@agg-build/ui 1.3.0 → 2.1.0

package/dist/events.js

@@ -82,7 +82,7 @@ module.exports = __toCommonJS(events_exports);
 
 // src/events/item/index.tsx
 var import_hooks31 = require("@agg-build/hooks");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/constants.ts
 var AGG_ROOT_CLASS_NAME = "agg-root";
@@ -4005,425 +4005,131 @@ var LineChart = ({
 LineChart.displayName = "LineChart";
 
 // src/events/list/event-list.utils.ts
-var import_hooks8 = require("@agg-build/hooks");
-var import_sdk = require("@agg-build/sdk");
-
-// src/events/item/event-list-item.utils.ts
 var import_hooks7 = require("@agg-build/hooks");
-
-// src/events/shared/venue-market-cluster.ts
-var toNonEmptyString = (value) => {
-  if (typeof value !== "string") return void 0;
-  const trimmedValue = value.trim();
-  return trimmedValue ? trimmedValue : void 0;
-};
-var addGraphEdge = (adjacencyById, fromMarketId, toMarketId) => {
-  var _a, _b;
-  if (fromMarketId === toMarketId) return;
-  const fromNeighbors = (_a = adjacencyById.get(fromMarketId)) != null ? _a : /* @__PURE__ */ new Set();
-  fromNeighbors.add(toMarketId);
-  adjacencyById.set(fromMarketId, fromNeighbors);
-  const toNeighbors = (_b = adjacencyById.get(toMarketId)) != null ? _b : /* @__PURE__ */ new Set();
-  toNeighbors.add(fromMarketId);
-  adjacencyById.set(toMarketId, toNeighbors);
-};
-var dedupeSourceMarketsById = (markets) => {
-  const seenMarketIds = /* @__PURE__ */ new Set();
-  return markets.filter((market) => {
-    if (seenMarketIds.has(market.id)) {
-      return false;
-    }
-    seenMarketIds.add(market.id);
-    return true;
-  });
-};
-var collectDirectRelationMarkets = (market) => {
-  var _a, _b, _c;
-  const relationMarkets = [];
-  const seenRelationIds = /* @__PURE__ */ new Set();
-  const addRelationMarket = (relationMarket) => {
-    if (!relationMarket) return;
-    if (seenRelationIds.has(relationMarket.id)) return;
-    seenRelationIds.add(relationMarket.id);
-    relationMarkets.push(relationMarket);
-  };
-  for (const matchedVenueMarket of (_a = market.matchedVenueMarkets) != null ? _a : []) {
-    addRelationMarket(matchedVenueMarket);
+var import_sdk = require("@agg-build/sdk");
+var resolveEventVolume = (event) => {
+  if (typeof event.volume === "number" && Number.isFinite(event.volume)) {
+    return event.volume;
   }
-  addRelationMarket(
-    (_c = (_b = market.matchEntry) == null ? void 0 : _b.targetVenueMarket) != null ? _c : void 0
-  );
-  return relationMarkets;
+  return event.venueMarkets.reduce((maxVolume, market) => {
+    if (typeof market.volume !== "number" || !Number.isFinite(market.volume)) {
+      return maxVolume;
+    }
+    return Math.max(maxVolume, market.volume);
+  }, -1);
 };
-var collectUniqueRelatedMarkets = (markets, sourceMarketsById) => {
-  const relatedMarketsById = /* @__PURE__ */ new Map();
-  for (const market of markets) {
-    for (const relatedMarket of collectDirectRelationMarkets(market)) {
-      if (sourceMarketsById.has(relatedMarket.id) || relatedMarketsById.has(relatedMarket.id)) {
-        continue;
+var sortEventsByVolumeDesc = (events, sortEventsBy) => {
+  return events.map((event, index) => ({
+    event,
+    index,
+    volume: resolveEventVolume(event)
+  })).sort((left, right) => {
+    if (sortEventsBy === "volume") {
+      if (left.volume !== right.volume) {
+        return right.volume - left.volume;
       }
-      relatedMarketsById.set(relatedMarket.id, relatedMarket);
     }
-  }
-  return Array.from(relatedMarketsById.values());
+    return left.index - right.index;
+  }).map(({ event }) => event);
 };
-var normalizeVenueMarketCluster = (markets, selectedMarketId) => {
-  var _a, _b;
-  if (markets.length === 0) return [];
-  const orderedSourceMarkets = dedupeSourceMarketsById(markets);
-  const sourceMarketsById = new Map(orderedSourceMarkets.map((market) => [market.id, market]));
-  const orderedRelatedMarkets = collectUniqueRelatedMarkets(
-    orderedSourceMarkets,
-    sourceMarketsById
+var resolveEventLifecycle = (event) => {
+  const hasOpenMarket = event.venueMarkets.some(
+    (market) => !market.status || market.status === import_hooks7.MarketStatus.open
   );
-  const relatedMarketsById = new Map(orderedRelatedMarkets.map((market) => [market.id, market]));
-  const resolvedSelectedMarketId = toNonEmptyString(selectedMarketId);
-  if (!resolvedSelectedMarketId) {
-    return [...orderedSourceMarkets, ...orderedRelatedMarkets];
-  }
-  const adjacencyById = /* @__PURE__ */ new Map();
-  for (const market of orderedSourceMarkets) {
-    for (const relatedMarket of collectDirectRelationMarkets(market)) {
-      addGraphEdge(adjacencyById, market.id, relatedMarket.id);
-    }
-    const targetVenueMarketId = toNonEmptyString((_a = market.matchEntry) == null ? void 0 : _a.targetVenueMarketId);
-    if (targetVenueMarketId) {
-      addGraphEdge(adjacencyById, market.id, targetVenueMarketId);
-    }
-  }
-  if (!sourceMarketsById.has(resolvedSelectedMarketId) && !relatedMarketsById.has(resolvedSelectedMarketId)) {
-    return [];
-  }
-  const visitedMarketIds = /* @__PURE__ */ new Set();
-  const queue = [resolvedSelectedMarketId];
-  while (queue.length > 0) {
-    const currentMarketId = queue.shift();
-    if (!currentMarketId || visitedMarketIds.has(currentMarketId)) {
-      continue;
-    }
-    visitedMarketIds.add(currentMarketId);
-    const neighborMarketIds = adjacencyById.get(currentMarketId);
-    for (const neighborMarketId of Array.from(neighborMarketIds != null ? neighborMarketIds : /* @__PURE__ */ new Set())) {
-      if (!visitedMarketIds.has(neighborMarketId)) {
-        queue.push(neighborMarketId);
-      }
-    }
-  }
-  const orderedClusterMarkets = [];
-  const appendedMarketIds = /* @__PURE__ */ new Set();
-  const appendMarket = (market) => {
-    if (!market) return;
-    if (!visitedMarketIds.has(market.id)) return;
-    if (appendedMarketIds.has(market.id)) return;
-    appendedMarketIds.add(market.id);
-    orderedClusterMarkets.push(market);
-  };
-  appendMarket(
-    (_b = sourceMarketsById.get(resolvedSelectedMarketId)) != null ? _b : relatedMarketsById.get(resolvedSelectedMarketId)
+  if (hasOpenMarket) return "open";
+  const hasUpcomingMarket = event.venueMarkets.some(
+    (market) => market.status === import_hooks7.MarketStatus.unopened
   );
-  for (const market of orderedSourceMarkets) {
-    appendMarket(market);
-  }
-  for (const market of orderedRelatedMarkets) {
-    appendMarket(market);
-  }
-  return orderedClusterMarkets;
-};
-
-// src/events/item/event-list-item.utils.ts
-var resolveEventListItemEvent = (fetchedEvent) => {
-  if (!fetchedEvent) return void 0;
-  if (!fetchedEvent.venueMarkets || fetchedEvent.venueMarkets.length === 0) return void 0;
-  return fetchedEvent;
-};
-var normalizeProbability = (value) => {
-  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
+  if (hasUpcomingMarket) return "upcoming";
+  const hasResolvedMarket = event.venueMarkets.some(
+    (market) => market.status === import_hooks7.MarketStatus.resolved
+  );
+  if (hasResolvedMarket) return "resolved";
+  if (event.status === import_hooks7.MarketStatus.open) return "open";
+  if (event.status === import_hooks7.MarketStatus.unopened) return "upcoming";
+  if (event.status === import_hooks7.MarketStatus.resolved) return "resolved";
+  return "ignore";
 };
-var formatWholePercent = (value) => {
-  return `${Math.round(value * 100)}%`;
+var splitEventsByLifecycle = (events) => {
+  const groupedEvents = events.reduce(
+    (grouped, event) => {
+      const lifecycle = resolveEventLifecycle(event);
+      if (lifecycle === "ignore") return grouped;
+      grouped[lifecycle].push(event);
+      return grouped;
+    },
+    {
+      open: [],
+      upcoming: [],
+      resolved: []
+    }
+  );
+  return {
+    open: sortEventsByVolumeDesc(groupedEvents.open),
+    upcoming: sortEventsByVolumeDesc(groupedEvents.upcoming),
+    resolved: sortEventsByVolumeDesc(groupedEvents.resolved)
+  };
 };
-var hasDateLabel = (outcome) => {
-  return !!toDate(outcome.label);
+var mapEventToEventListItemEvent = (event) => {
+  if (!event.venueMarkets || event.venueMarkets.length === 0) return null;
+  return event;
 };
-var isYesLabel = (label2) => label2.trim().toLowerCase() === "yes";
-var isNoLabel = (label2) => label2.trim().toLowerCase() === "no";
-var hasBinaryOutcomes = (outcomes) => {
-  return outcomes.some((o) => isYesLabel(o.label)) && outcomes.some((o) => isNoLabel(o.label));
+var filterEventsByTabValue = (events, _tabValue) => {
+  return events;
 };
-var sortYesFirst = (outcomes) => {
-  return [...outcomes].sort((a, b) => {
-    if (isYesLabel(a.label) && !isYesLabel(b.label)) return -1;
-    if (!isYesLabel(a.label) && isYesLabel(b.label)) return 1;
-    return 0;
+var sortCategoriesForNavigation = (categories) => {
+  return [...categories].sort((left, right) => {
+    const leftIsOther = left.name.trim().toLowerCase() === "other";
+    const rightIsOther = right.name.trim().toLowerCase() === "other";
+    if (leftIsOther === rightIsOther) return 0;
+    return leftIsOther ? 1 : -1;
   });
 };
-var resolveYesOutcome = (market) => {
-  return market.venueMarketOutcomes.find((outcome) => isYesLabel(outcome.label));
-};
-var resolveYesOutcomeProbability = (market) => {
+var resolveCategoryIdsFromPath = (path, fallbackCategoryIds) => {
   var _a;
-  return normalizeProbability((_a = resolveYesOutcome(market)) == null ? void 0 : _a.price);
+  const deepest = (_a = path[path.length - 1]) == null ? void 0 : _a.id;
+  if (deepest) return [deepest];
+  return fallbackCategoryIds;
 };
-var formatMarketProbabilityPercent = (value, formatPercent = formatWholePercent) => {
-  const probability = normalizeProbability(value);
-  if (probability == null) return "-";
-  const formattedValue = formatPercent(probability);
-  if (probability > 0 && formattedValue === formatPercent(0)) {
-    return "<1%";
+var resolveTabVenus = (tab, visibleVenues) => {
+  const applyAllowList = (venues) => {
+    if (!venues) {
+      return visibleVenues && visibleVenues.length > 0 ? visibleVenues : void 0;
+    }
+    if (!visibleVenues) return venues;
+    const filtered = venues.filter((v) => visibleVenues.includes(v));
+    return filtered.length > 0 ? filtered : void 0;
+  };
+  if (!tab) return applyAllowList(void 0);
+  if (tab.venues && tab.venues.length > 0) return applyAllowList(tab.venues);
+  if (import_sdk.VENUES.includes(tab.value)) {
+    return applyAllowList([tab.value]);
   }
-  return formattedValue;
+  return applyAllowList(void 0);
 };
-var formatPriceGapPercent = (value) => {
-  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
-  if (value < import_hooks7.MIN_PRICE_GAP_PCT) return void 0;
-  if (value > import_hooks7.MAX_PRICE_GAP_PCT) return void 0;
-  return `${Math.round(value)}%`;
-};
-var sortOutcomes = (outcomes) => {
-  if (outcomes.length <= 1) return outcomes;
-  if (hasBinaryOutcomes(outcomes)) {
-    return sortYesFirst(outcomes);
-  }
-  const now = Date.now();
-  if (outcomes.some(hasDateLabel)) {
-    return [...outcomes].sort((a, b) => {
-      var _a, _b, _c, _d;
-      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
-      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
-      return Math.abs(aDate - now) - Math.abs(bDate - now);
-    });
-  }
-  return [...outcomes].sort((a, b) => {
-    var _a, _b;
-    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
-    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
-    return bPrice - aPrice;
-  });
-};
-var dedupeVenueMarketsById = (venueMarkets) => {
-  const seenClusterIds = /* @__PURE__ */ new Set();
-  return venueMarkets.filter((venueMarket) => {
-    var _a;
-    if (seenClusterIds.has(venueMarket.id)) {
-      return false;
-    }
-    seenClusterIds.add(venueMarket.id);
-    for (const sibling of (_a = venueMarket.matchedVenueMarkets) != null ? _a : []) {
-      seenClusterIds.add(sibling.id);
-    }
-    return true;
-  });
-};
-var resolveOutcomeTitle = (outcome) => {
-  var _a, _b;
-  return (_b = (_a = outcome == null ? void 0 : outcome.title) != null ? _a : outcome == null ? void 0 : outcome.label) == null ? void 0 : _b.trim();
-};
-var selectPrimaryVenueMarket = (venueMarkets) => {
-  if (venueMarkets.length === 0) return void 0;
-  if (venueMarkets.length === 1) return venueMarkets[0];
-  return [...venueMarkets].sort((a, b) => {
-    const aVolume = typeof a.volume === "number" ? a.volume : -1;
-    const bVolume = typeof b.volume === "number" ? b.volume : -1;
-    return bVolume - aVolume;
-  })[0];
-};
-var getVenueSummary = (venueMarkets, options) => {
-  const normalizedVenueMarkets = normalizeVenueMarketCluster(venueMarkets);
-  const tradableVenues = options == null ? void 0 : options.tradableVenues;
-  const isVenueTradable = (venue) => {
-    if (tradableVenues == null) return true;
-    return tradableVenues.has(venue);
-  };
-  const uniqueVenues = Array.from(
-    new Set(
-      normalizedVenueMarkets.filter((market) => isVenueTradable(market.venue)).map((market) => market.venue)
-    )
-  );
-  return {
-    marketCount: normalizedVenueMarkets.length,
-    venueCount: uniqueVenues.length,
-    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
-  };
-};
-var resolveVenueLabel = (venue, venueInfo, labels) => {
-  var _a, _b;
-  if (!venue) return labels.eventItem.venueSingular;
-  return (_b = (_a = venueInfo == null ? void 0 : venueInfo[venue]) == null ? void 0 : _a.label) != null ? _b : labels.venues[venue];
-};
-var resolveDisplayVolume = (eventVolume, venueMarkets) => {
-  if (typeof eventVolume === "number" && eventVolume > 0) return eventVolume;
-  const clusterMarkets = normalizeVenueMarketCluster(venueMarkets);
-  const marketSum = clusterMarkets.reduce(
-    (acc, m) => acc + (typeof m.volume === "number" ? m.volume : 0),
-    0
-  );
-  if (marketSum > 0) return marketSum;
-  return void 0;
-};
-
-// src/events/list/event-list.utils.ts
-var resolveEventVolume = (event) => {
-  if (typeof event.volume === "number" && Number.isFinite(event.volume)) {
-    return event.volume;
-  }
-  return event.venueMarkets.reduce((maxVolume, market) => {
-    if (typeof market.volume !== "number" || !Number.isFinite(market.volume)) {
-      return maxVolume;
-    }
-    return Math.max(maxVolume, market.volume);
-  }, -1);
-};
-var sortEventsByVolumeDesc = (events, sortEventsBy) => {
-  return events.map((event, index) => ({
-    event,
-    index,
-    volume: resolveEventVolume(event)
-  })).sort((left, right) => {
-    if (sortEventsBy === "volume") {
-      if (left.volume !== right.volume) {
-        return right.volume - left.volume;
-      }
-    }
-    return left.index - right.index;
-  }).map(({ event }) => event);
-};
-var resolveEventLifecycle = (event) => {
-  const hasOpenMarket = event.venueMarkets.some(
-    (market) => !market.status || market.status === import_hooks8.MarketStatus.open
-  );
-  if (hasOpenMarket) return "open";
-  const hasUpcomingMarket = event.venueMarkets.some(
-    (market) => market.status === import_hooks8.MarketStatus.unopened
-  );
-  if (hasUpcomingMarket) return "upcoming";
-  const hasResolvedMarket = event.venueMarkets.some(
-    (market) => market.status === import_hooks8.MarketStatus.resolved
-  );
-  if (hasResolvedMarket) return "resolved";
-  if (event.status === import_hooks8.MarketStatus.open) return "open";
-  if (event.status === import_hooks8.MarketStatus.unopened) return "upcoming";
-  if (event.status === import_hooks8.MarketStatus.resolved) return "resolved";
-  return "ignore";
-};
-var splitEventsByLifecycle = (events) => {
-  const groupedEvents = events.reduce(
-    (grouped, event) => {
-      const lifecycle = resolveEventLifecycle(event);
-      if (lifecycle === "ignore") return grouped;
-      grouped[lifecycle].push(event);
-      return grouped;
-    },
-    {
-      open: [],
-      upcoming: [],
-      resolved: []
-    }
-  );
-  return {
-    open: sortEventsByVolumeDesc(groupedEvents.open),
-    upcoming: sortEventsByVolumeDesc(groupedEvents.upcoming),
-    resolved: sortEventsByVolumeDesc(groupedEvents.resolved)
-  };
-};
-var mapEventToEventListItemEvent = (event) => {
-  if (!event.venueMarkets || event.venueMarkets.length === 0) return null;
-  return event;
-};
-var filterEventsByTabValue = (events, _tabValue) => {
-  return events;
-};
-var sortMarketsByYesOddsDesc = (markets) => {
-  return markets.map((market, index) => ({
-    market,
-    index,
-    yesProbability: resolveYesOutcomeProbability(market)
-  })).sort((left, right) => {
-    const leftHasYesProbability = left.yesProbability != null;
-    const rightHasYesProbability = right.yesProbability != null;
-    if (leftHasYesProbability !== rightHasYesProbability) {
-      return leftHasYesProbability ? -1 : 1;
-    }
-    if (left.yesProbability != null && right.yesProbability != null) {
-      if (left.yesProbability !== right.yesProbability) {
-        return right.yesProbability - left.yesProbability;
-      }
-    }
-    return left.index - right.index;
-  }).map(({ market }) => market);
-};
-var resolveMarketVolume = (market) => {
-  if (typeof market.volume !== "number") return 0;
-  if (!Number.isFinite(market.volume)) return 0;
-  return market.volume;
-};
-var sortMarketsByVolumeDesc = (markets) => {
-  return markets.map((market, index) => ({
-    market,
-    index,
-    volume: resolveMarketVolume(market)
-  })).sort((left, right) => {
-    if (left.volume !== right.volume) {
-      return right.volume - left.volume;
-    }
-    return left.index - right.index;
-  }).map(({ market }) => market);
-};
-var sortCategoriesForNavigation = (categories) => {
-  return [...categories].sort((left, right) => {
-    const leftIsOther = left.name.trim().toLowerCase() === "other";
-    const rightIsOther = right.name.trim().toLowerCase() === "other";
-    if (leftIsOther === rightIsOther) return 0;
-    return leftIsOther ? 1 : -1;
-  });
-};
-var resolveCategoryIdsFromPath = (path, fallbackCategoryIds) => {
-  var _a;
-  const deepest = (_a = path[path.length - 1]) == null ? void 0 : _a.id;
-  if (deepest) return [deepest];
-  return fallbackCategoryIds;
-};
-var resolveTabVenus = (tab, visibleVenues) => {
-  const applyAllowList = (venues) => {
-    if (!venues) {
-      return visibleVenues && visibleVenues.length > 0 ? visibleVenues : void 0;
-    }
-    if (!visibleVenues) return venues;
-    const filtered = venues.filter((v) => visibleVenues.includes(v));
-    return filtered.length > 0 ? filtered : void 0;
-  };
-  if (!tab) return applyAllowList(void 0);
-  if (tab.venues && tab.venues.length > 0) return applyAllowList(tab.venues);
-  if (import_sdk.VENUES.includes(tab.value)) {
-    return applyAllowList([tab.value]);
-  }
-  return applyAllowList(void 0);
-};
-
-// src/primitives/remote-image/index.tsx
-var import_hooks10 = require("@agg-build/hooks");
-var import_react4 = require("react");
-
-// src/primitives/skeleton/skeleton-block.tsx
-var import_hooks9 = require("@agg-build/hooks");
-var import_jsx_runtime90 = require("react/jsx-runtime");
-var SkeletonBlock = ({ className }) => {
-  const {
-    features: { enableAnimations }
-  } = (0, import_hooks9.useSdkUiConfig)();
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
-    "div",
-    {
-      "aria-hidden": true,
-      className: cn(
-        "bg-agg-separator",
-        getMotionClassName(enableAnimations, "animate-pulse"),
-        className
-      )
-    }
-  );
+
+// src/primitives/remote-image/index.tsx
+var import_hooks9 = require("@agg-build/hooks");
+var import_react4 = require("react");
+
+// src/primitives/skeleton/skeleton-block.tsx
+var import_hooks8 = require("@agg-build/hooks");
+var import_jsx_runtime90 = require("react/jsx-runtime");
+var SkeletonBlock = ({ className }) => {
+  const {
+    features: { enableAnimations }
+  } = (0, import_hooks8.useSdkUiConfig)();
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn(
+        "bg-agg-separator",
+        getMotionClassName(enableAnimations, "animate-pulse"),
+        className
+      )
+    }
+  );
 };
 SkeletonBlock.displayName = "SkeletonBlock";
 
@@ -4456,7 +4162,7 @@ var RemoteImage = ({
 }) => {
   const {
     general: { theme }
-  } = (0, import_hooks10.useSdkUiConfig)();
+  } = (0, import_hooks9.useSdkUiConfig)();
   const isDarkTheme = theme === "dark";
   const [status, setStatus] = (0, import_react4.useState)(
     () => resolveRemoteImageStatusFromSrc(src)
@@ -4530,17 +4236,17 @@ var RemoteImage = ({
 RemoteImage.displayName = "RemoteImage";
 
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
-var import_hooks12 = require("@agg-build/hooks");
+var import_hooks11 = require("@agg-build/hooks");
 
 // src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
-var import_hooks11 = require("@agg-build/hooks");
+var import_hooks10 = require("@agg-build/hooks");
 var import_jsx_runtime92 = require("react/jsx-runtime");
 var EventListItemSkeletonView = ({
   className,
   ariaLabel,
   isStandalone = false
 }) => {
-  const labels = (0, import_hooks11.useLabels)();
+  const labels = (0, import_hooks10.useLabels)();
   const outcomeTitleWidths = ["max-w-40", "max-w-[200px]"];
   return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
     Card,
@@ -4606,7 +4312,7 @@ var EventListSkeletonView = ({
   ariaLabel,
   withSidebar
 }) => {
-  const labels = (0, import_hooks12.useLabels)();
+  const labels = (0, import_hooks11.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "section",
     {
@@ -4645,7 +4351,7 @@ var EventListSkeletonView = ({
 EventListSkeletonView.displayName = "EventListSkeletonView";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
-var import_hooks13 = require("@agg-build/hooks");
+var import_hooks12 = require("@agg-build/hooks");
 
 // src/events/item-details/event-list-item-details.constants.ts
 var detailsBaseCardClassName = "w-full gap-6 p-5 md:gap-8";
@@ -4656,7 +4362,7 @@ var EventListItemDetailsSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks13.useLabels)();
+  const labels = (0, import_hooks12.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)(
     Card,
     {
@@ -4693,7 +4399,7 @@ var EventListItemDetailsSkeletonView = ({
 EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
-var import_hooks14 = require("@agg-build/hooks");
+var import_hooks13 = require("@agg-build/hooks");
 
 // src/events/market-details/market-details.constants.ts
 var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
@@ -4789,7 +4495,7 @@ var MarketDetailsSkeletonView = ({
   ariaLabel,
   isDetailed
 }) => {
-  const labels = (0, import_hooks14.useLabels)();
+  const labels = (0, import_hooks13.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime95.jsxs)(
     Card,
     {
@@ -4890,7 +4596,7 @@ var PlaceOrderSkeletonView = ({
 PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
 
 // src/primitives/skeleton/views/search-skeleton-view.tsx
-var import_hooks15 = require("@agg-build/hooks");
+var import_hooks14 = require("@agg-build/hooks");
 var import_jsx_runtime97 = require("react/jsx-runtime");
 var SearchSkeletonRow = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex w-full items-center gap-6 px-5 py-4", children: [
@@ -4916,7 +4622,7 @@ var SearchSkeletonRow = () => {
   ] });
 };
 var SearchSkeletonView = ({ className, ariaLabel }) => {
-  const labels = (0, import_hooks15.useLabels)();
+  const labels = (0, import_hooks14.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
     "div",
     {
@@ -4938,13 +4644,13 @@ var SearchSkeletonView = ({ className, ariaLabel }) => {
 SearchSkeletonView.displayName = "SearchSkeletonView";
 
 // src/primitives/skeleton/views/settlement-skeleton-view.tsx
-var import_hooks16 = require("@agg-build/hooks");
+var import_hooks15 = require("@agg-build/hooks");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var SettlementSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks16.useLabels)();
+  const labels = (0, import_hooks15.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     Card,
     {
@@ -5158,7 +4864,7 @@ var Skeleton = ({
 Skeleton.displayName = "Skeleton";
 
 // src/primitives/venue-logo/index.tsx
-var import_hooks25 = require("@agg-build/hooks");
+var import_hooks24 = require("@agg-build/hooks");
 
 // src/primitives/venue-logo/venue-logo.constants.ts
 var import_sdk10 = require("@agg-build/sdk");
@@ -5211,7 +4917,7 @@ var DefaultVenueIcon = (_a) => {
 };
 
 // src/primitives/venue-logo/svg/logo-hyperliquid.tsx
-var import_hooks17 = require("@agg-build/hooks");
+var import_hooks16 = require("@agg-build/hooks");
 var import_sdk2 = require("@agg-build/sdk");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var LogoHyperliquidIcon = (_a) => {
@@ -5229,7 +4935,7 @@ var LogoHyperliquidIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks17.useAggUiConfig)();
+  } = (0, import_hooks16.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk2.Venue.hyperliquid, isDarkTheme)) != null ? _a2 : "#97FCE4",
@@ -5259,7 +4965,7 @@ var LogoHyperliquidIcon = (_a) => {
 LogoHyperliquidIcon.displayName = "LogoHyperliquidIcon";
 
 // src/primitives/venue-logo/svg/logo-kalshi.tsx
-var import_hooks18 = require("@agg-build/hooks");
+var import_hooks17 = require("@agg-build/hooks");
 var import_sdk3 = require("@agg-build/sdk");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var LogoKalshiIcon = (_a) => {
@@ -5277,7 +4983,7 @@ var LogoKalshiIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks18.useAggUiConfig)();
+  } = (0, import_hooks17.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk3.Venue.kalshi, isDarkTheme)) != null ? _a2 : "#18C590",
@@ -5307,7 +5013,7 @@ var LogoKalshiIcon = (_a) => {
 LogoKalshiIcon.displayName = "LogoKalshiIcon";
 
 // src/primitives/venue-logo/svg/logo-limitless.tsx
-var import_hooks19 = require("@agg-build/hooks");
+var import_hooks18 = require("@agg-build/hooks");
 var import_sdk4 = require("@agg-build/sdk");
 var import_jsx_runtime105 = require("react/jsx-runtime");
 var LogoLimitlessIcon = (_a) => {
@@ -5325,7 +5031,7 @@ var LogoLimitlessIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks19.useAggUiConfig)();
+  } = (0, import_hooks18.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk4.Venue.limitless, isDarkTheme)) != null ? _a2 : "#c4fe00",
@@ -5355,7 +5061,7 @@ var LogoLimitlessIcon = (_a) => {
 LogoLimitlessIcon.displayName = "LogoLimitlessIcon";
 
 // src/primitives/venue-logo/svg/logo-myriad.tsx
-var import_hooks20 = require("@agg-build/hooks");
+var import_hooks19 = require("@agg-build/hooks");
 var import_sdk5 = require("@agg-build/sdk");
 var import_jsx_runtime106 = require("react/jsx-runtime");
 var LogoMyriadIcon = (_a) => {
@@ -5373,7 +5079,7 @@ var LogoMyriadIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks20.useAggUiConfig)();
+  } = (0, import_hooks19.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk5.Venue.myriad, isDarkTheme)) != null ? _a2 : "#2E5CFF",
@@ -5403,7 +5109,7 @@ var LogoMyriadIcon = (_a) => {
 LogoMyriadIcon.displayName = "LogoMyriadIcon";
 
 // src/primitives/venue-logo/svg/logo-opinion.tsx
-var import_hooks21 = require("@agg-build/hooks");
+var import_hooks20 = require("@agg-build/hooks");
 var import_sdk6 = require("@agg-build/sdk");
 var import_jsx_runtime107 = require("react/jsx-runtime");
 var LogoOpinionIcon = (_a) => {
@@ -5421,7 +5127,7 @@ var LogoOpinionIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks21.useAggUiConfig)();
+  } = (0, import_hooks20.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk6.Venue.opinion, isDarkTheme)) != null ? _a2 : "#ec5e26",
@@ -5451,7 +5157,7 @@ var LogoOpinionIcon = (_a) => {
 LogoOpinionIcon.displayName = "LogoOpinionIcon";
 
 // src/primitives/venue-logo/svg/logo-polymarket.tsx
-var import_hooks22 = require("@agg-build/hooks");
+var import_hooks21 = require("@agg-build/hooks");
 var import_sdk7 = require("@agg-build/sdk");
 var import_jsx_runtime108 = require("react/jsx-runtime");
 var LogoPolymarketIcon = (_a) => {
@@ -5469,7 +5175,7 @@ var LogoPolymarketIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks22.useAggUiConfig)();
+  } = (0, import_hooks21.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk7.Venue.polymarket, isDarkTheme)) != null ? _a2 : "#2E5CFF",
@@ -5499,7 +5205,7 @@ var LogoPolymarketIcon = (_a) => {
 LogoPolymarketIcon.displayName = "LogoPolymarketIcon";
 
 // src/primitives/venue-logo/svg/logo-predict.tsx
-var import_hooks23 = require("@agg-build/hooks");
+var import_hooks22 = require("@agg-build/hooks");
 var import_sdk8 = require("@agg-build/sdk");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var LogoPredictIcon = (_a) => {
@@ -5517,7 +5223,7 @@ var LogoPredictIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks23.useAggUiConfig)();
+  } = (0, import_hooks22.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk8.Venue.predict, isDarkTheme)) != null ? _a2 : "#705bf6",
@@ -5549,7 +5255,7 @@ var LogoPredictIcon = (_a) => {
 LogoPredictIcon.displayName = "LogoPredictIcon";
 
 // src/primitives/venue-logo/svg/logo-probable.tsx
-var import_hooks24 = require("@agg-build/hooks");
+var import_hooks23 = require("@agg-build/hooks");
 var import_sdk9 = require("@agg-build/sdk");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var LogoProbableIcon = (_a) => {
@@ -5567,7 +5273,7 @@ var LogoProbableIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks24.useAggUiConfig)();
+  } = (0, import_hooks23.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk9.Venue.probable, isDarkTheme)) != null ? _a2 : "#EC4899",
@@ -5715,7 +5421,7 @@ var VenueLogo = ({
   title: title2
 }) => {
   var _a, _b;
-  const labels = (0, import_hooks25.useLabels)();
+  const labels = (0, import_hooks24.useLabels)();
   const sizeClass = sizeClasses2[size];
   const resolvedLabel = resolveVenueLogoLabel({
     ariaLabel,
@@ -5756,6 +5462,258 @@ var VenueLogo = ({
 };
 VenueLogo.displayName = "VenueLogo";
 
+// src/events/item/event-list-item.utils.ts
+var import_hooks25 = require("@agg-build/hooks");
+
+// src/events/shared/venue-market-cluster.ts
+var toNonEmptyString = (value) => {
+  if (typeof value !== "string") return void 0;
+  const trimmedValue = value.trim();
+  return trimmedValue ? trimmedValue : void 0;
+};
+var addGraphEdge = (adjacencyById, fromMarketId, toMarketId) => {
+  var _a, _b;
+  if (fromMarketId === toMarketId) return;
+  const fromNeighbors = (_a = adjacencyById.get(fromMarketId)) != null ? _a : /* @__PURE__ */ new Set();
+  fromNeighbors.add(toMarketId);
+  adjacencyById.set(fromMarketId, fromNeighbors);
+  const toNeighbors = (_b = adjacencyById.get(toMarketId)) != null ? _b : /* @__PURE__ */ new Set();
+  toNeighbors.add(fromMarketId);
+  adjacencyById.set(toMarketId, toNeighbors);
+};
+var dedupeSourceMarketsById = (markets) => {
+  const seenMarketIds = /* @__PURE__ */ new Set();
+  return markets.filter((market) => {
+    if (seenMarketIds.has(market.id)) {
+      return false;
+    }
+    seenMarketIds.add(market.id);
+    return true;
+  });
+};
+var collectDirectRelationMarkets = (market) => {
+  var _a, _b, _c;
+  const relationMarkets = [];
+  const seenRelationIds = /* @__PURE__ */ new Set();
+  const addRelationMarket = (relationMarket) => {
+    if (!relationMarket) return;
+    if (seenRelationIds.has(relationMarket.id)) return;
+    seenRelationIds.add(relationMarket.id);
+    relationMarkets.push(relationMarket);
+  };
+  for (const matchedVenueMarket of (_a = market.matchedVenueMarkets) != null ? _a : []) {
+    addRelationMarket(matchedVenueMarket);
+  }
+  addRelationMarket(
+    (_c = (_b = market.matchEntry) == null ? void 0 : _b.targetVenueMarket) != null ? _c : void 0
+  );
+  return relationMarkets;
+};
+var collectUniqueRelatedMarkets = (markets, sourceMarketsById) => {
+  const relatedMarketsById = /* @__PURE__ */ new Map();
+  for (const market of markets) {
+    for (const relatedMarket of collectDirectRelationMarkets(market)) {
+      if (sourceMarketsById.has(relatedMarket.id) || relatedMarketsById.has(relatedMarket.id)) {
+        continue;
+      }
+      relatedMarketsById.set(relatedMarket.id, relatedMarket);
+    }
+  }
+  return Array.from(relatedMarketsById.values());
+};
+var normalizeVenueMarketCluster = (markets, selectedMarketId) => {
+  var _a, _b;
+  if (markets.length === 0) return [];
+  const orderedSourceMarkets = dedupeSourceMarketsById(markets);
+  const sourceMarketsById = new Map(orderedSourceMarkets.map((market) => [market.id, market]));
+  const orderedRelatedMarkets = collectUniqueRelatedMarkets(
+    orderedSourceMarkets,
+    sourceMarketsById
+  );
+  const relatedMarketsById = new Map(orderedRelatedMarkets.map((market) => [market.id, market]));
+  const resolvedSelectedMarketId = toNonEmptyString(selectedMarketId);
+  if (!resolvedSelectedMarketId) {
+    return [...orderedSourceMarkets, ...orderedRelatedMarkets];
+  }
+  const adjacencyById = /* @__PURE__ */ new Map();
+  for (const market of orderedSourceMarkets) {
+    for (const relatedMarket of collectDirectRelationMarkets(market)) {
+      addGraphEdge(adjacencyById, market.id, relatedMarket.id);
+    }
+    const targetVenueMarketId = toNonEmptyString((_a = market.matchEntry) == null ? void 0 : _a.targetVenueMarketId);
+    if (targetVenueMarketId) {
+      addGraphEdge(adjacencyById, market.id, targetVenueMarketId);
+    }
+  }
+  if (!sourceMarketsById.has(resolvedSelectedMarketId) && !relatedMarketsById.has(resolvedSelectedMarketId)) {
+    return [];
+  }
+  const visitedMarketIds = /* @__PURE__ */ new Set();
+  const queue = [resolvedSelectedMarketId];
+  while (queue.length > 0) {
+    const currentMarketId = queue.shift();
+    if (!currentMarketId || visitedMarketIds.has(currentMarketId)) {
+      continue;
+    }
+    visitedMarketIds.add(currentMarketId);
+    const neighborMarketIds = adjacencyById.get(currentMarketId);
+    for (const neighborMarketId of Array.from(neighborMarketIds != null ? neighborMarketIds : /* @__PURE__ */ new Set())) {
+      if (!visitedMarketIds.has(neighborMarketId)) {
+        queue.push(neighborMarketId);
+      }
+    }
+  }
+  const orderedClusterMarkets = [];
+  const appendedMarketIds = /* @__PURE__ */ new Set();
+  const appendMarket = (market) => {
+    if (!market) return;
+    if (!visitedMarketIds.has(market.id)) return;
+    if (appendedMarketIds.has(market.id)) return;
+    appendedMarketIds.add(market.id);
+    orderedClusterMarkets.push(market);
+  };
+  appendMarket(
+    (_b = sourceMarketsById.get(resolvedSelectedMarketId)) != null ? _b : relatedMarketsById.get(resolvedSelectedMarketId)
+  );
+  for (const market of orderedSourceMarkets) {
+    appendMarket(market);
+  }
+  for (const market of orderedRelatedMarkets) {
+    appendMarket(market);
+  }
+  return orderedClusterMarkets;
+};
+
+// src/events/item/event-list-item.utils.ts
+var resolveEventListItemEvent = (fetchedEvent) => {
+  if (!fetchedEvent) return void 0;
+  if (!fetchedEvent.venueMarkets || fetchedEvent.venueMarkets.length === 0) return void 0;
+  return fetchedEvent;
+};
+var normalizeProbability = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+};
+var formatWholePercent = (value) => {
+  return `${Math.round(value * 100)}%`;
+};
+var hasDateLabel = (outcome) => {
+  return !!toDate(outcome.label);
+};
+var isYesLabel = (label2) => label2.trim().toLowerCase() === "yes";
+var isNoLabel = (label2) => label2.trim().toLowerCase() === "no";
+var hasBinaryOutcomes = (outcomes) => {
+  return outcomes.some((o) => isYesLabel(o.label)) && outcomes.some((o) => isNoLabel(o.label));
+};
+var sortYesFirst = (outcomes) => {
+  return [...outcomes].sort((a, b) => {
+    if (isYesLabel(a.label) && !isYesLabel(b.label)) return -1;
+    if (!isYesLabel(a.label) && isYesLabel(b.label)) return 1;
+    return 0;
+  });
+};
+var resolveYesOutcome = (market) => {
+  return market.venueMarketOutcomes.find((outcome) => isYesLabel(outcome.label));
+};
+var formatMarketProbabilityPercent = (value, formatPercent = formatWholePercent) => {
+  const probability = normalizeProbability(value);
+  if (probability == null) return "-";
+  const formattedValue = formatPercent(probability);
+  if (probability > 0 && formattedValue === formatPercent(0)) {
+    return "<1%";
+  }
+  return formattedValue;
+};
+var formatPriceGapPercent = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+  if (value < import_hooks25.MIN_PRICE_GAP_PCT) return void 0;
+  if (value > import_hooks25.MAX_PRICE_GAP_PCT) return void 0;
+  return `${Math.round(value)}%`;
+};
+var sortOutcomes = (outcomes) => {
+  if (outcomes.length <= 1) return outcomes;
+  if (hasBinaryOutcomes(outcomes)) {
+    return sortYesFirst(outcomes);
+  }
+  const now = Date.now();
+  if (outcomes.some(hasDateLabel)) {
+    return [...outcomes].sort((a, b) => {
+      var _a, _b, _c, _d;
+      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
+      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
+      return Math.abs(aDate - now) - Math.abs(bDate - now);
+    });
+  }
+  return [...outcomes].sort((a, b) => {
+    var _a, _b;
+    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
+    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
+    return bPrice - aPrice;
+  });
+};
+var dedupeVenueMarketsById = (venueMarkets) => {
+  const seenClusterIds = /* @__PURE__ */ new Set();
+  return venueMarkets.filter((venueMarket) => {
+    var _a;
+    if (seenClusterIds.has(venueMarket.id)) {
+      return false;
+    }
+    seenClusterIds.add(venueMarket.id);
+    for (const sibling of (_a = venueMarket.matchedVenueMarkets) != null ? _a : []) {
+      seenClusterIds.add(sibling.id);
+    }
+    return true;
+  });
+};
+var resolveOutcomeTitle = (outcome) => {
+  var _a, _b;
+  return (_b = (_a = outcome == null ? void 0 : outcome.title) != null ? _a : outcome == null ? void 0 : outcome.label) == null ? void 0 : _b.trim();
+};
+var selectPrimaryVenueMarket = (venueMarkets) => {
+  if (venueMarkets.length === 0) return void 0;
+  if (venueMarkets.length === 1) return venueMarkets[0];
+  return [...venueMarkets].sort((a, b) => {
+    const aVolume = typeof a.volume === "number" ? a.volume : -1;
+    const bVolume = typeof b.volume === "number" ? b.volume : -1;
+    return bVolume - aVolume;
+  })[0];
+};
+var getVenueSummary = (venueMarkets, options) => {
+  const normalizedVenueMarkets = normalizeVenueMarketCluster(venueMarkets);
+  const tradableVenues = options == null ? void 0 : options.tradableVenues;
+  const isVenueTradable = (venue) => {
+    if (tradableVenues == null) return true;
+    return tradableVenues.has(venue);
+  };
+  const uniqueVenues = Array.from(
+    new Set(
+      normalizedVenueMarkets.filter((market) => isVenueTradable(market.venue)).map((market) => market.venue)
+    )
+  );
+  return {
+    marketCount: normalizedVenueMarkets.length,
+    venueCount: uniqueVenues.length,
+    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
+  };
+};
+var resolveVenueLabel = (venue, venueInfo, labels) => {
+  var _a, _b;
+  if (!venue) return labels.eventItem.venueSingular;
+  return (_b = (_a = venueInfo == null ? void 0 : venueInfo[venue]) == null ? void 0 : _a.label) != null ? _b : labels.venues[venue];
+};
+var resolveDisplayVolume = (eventVolume, venueMarkets) => {
+  if (typeof eventVolume === "number" && eventVolume > 0) return eventVolume;
+  const clusterMarkets = normalizeVenueMarketCluster(venueMarkets);
+  const marketSum = clusterMarkets.reduce(
+    (acc, m) => acc + (typeof m.volume === "number" ? m.volume : 0),
+    0
+  );
+  if (marketSum > 0) return marketSum;
+  return void 0;
+};
+
 // src/primitives/modal/index.tsx
 var import_hooks26 = require("@agg-build/hooks");
 var Dialog = __toESM(require("@radix-ui/react-dialog"));
@@ -6428,7 +6386,37 @@ StateMessage.displayName = "StateMessage";
 
 // src/primitives/tabs/index.tsx
 var import_hooks29 = require("@agg-build/hooks");
+var import_react8 = require("react");
+
+// src/shared/use-horizontal-scroll-state.ts
 var import_react7 = require("react");
+var useHorizontalScrollState = () => {
+  const containerRef = (0, import_react7.useRef)(null);
+  const [canScrollLeft, setCanScrollLeft] = (0, import_react7.useState)(false);
+  const [canScrollRight, setCanScrollRight] = (0, import_react7.useState)(false);
+  const update = (0, import_react7.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > 4);
+    setCanScrollRight(maxScroll - el.scrollLeft > 4);
+  }, []);
+  (0, import_react7.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", update, { passive: true });
+    return () => el.removeEventListener("scroll", update);
+  }, [update]);
+  (0, import_react7.useEffect)(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [update]);
+  return { containerRef, canScrollLeft, canScrollRight, update };
+};
 
 // src/primitives/tabs/tabs.constants.ts
 var MOBILE_TABS_MEDIA_QUERY = "(max-width: 736px)";
@@ -6502,8 +6490,8 @@ var Tabs = ({
   const {
     features: { enableAnimations }
   } = (0, import_hooks29.useSdkUiConfig)();
-  const buttonRefs = (0, import_react7.useRef)([]);
-  const dragStateRef = (0, import_react7.useRef)({
+  const buttonRefs = (0, import_react8.useRef)([]);
+  const dragStateRef = (0, import_react8.useRef)({
     isPointerDown: false,
     isDragging: false,
     pointerId: null,
@@ -6511,29 +6499,30 @@ var Tabs = ({
     startClientY: 0,
     startScrollLeft: 0
   });
-  const suppressClickRef = (0, import_react7.useRef)(false);
+  const suppressClickRef = (0, import_react8.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const [isMobileViewport, setIsMobileViewport] = (0, import_react7.useState)(false);
-  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react7.useState)(false);
-  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react7.useState)({
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react8.useState)(false);
+  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react8.useState)(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react8.useState)({
     transform: "translateX(0px)",
     width: 0,
     opacity: 0
   });
-  const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react7.useState)({
-    showStart: false,
-    showEnd: false
-  });
-  const tabListRef = (0, import_react7.useRef)(null);
+  const {
+    containerRef: tabListRef,
+    canScrollLeft,
+    canScrollRight,
+    update: updateScrollState
+  } = useHorizontalScrollState();
   const isBarVariant = variant === "bar";
-  const resolvedOverflowBehavior = (0, import_react7.useMemo)(() => {
+  const resolvedOverflowBehavior = (0, import_react8.useMemo)(() => {
     if (overflowBehavior) return overflowBehavior;
     if (!isBarVariant) return "scroll";
     return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -6551,28 +6540,12 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const updateScrollAffordances = (0, import_react7.useCallback)(() => {
-    if (!shouldUseOverflowScroll) {
-      setScrollAffordanceState({
-        showStart: false,
-        showEnd: false
-      });
-      return;
-    }
-    const tabListElement = tabListRef.current;
-    if (!tabListElement) return;
-    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
-    setScrollAffordanceState({
-      showStart: tabListElement.scrollLeft > 4,
-      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
-    });
-  }, [shouldUseOverflowScroll]);
-  const renderedItems = (0, import_react7.useMemo)(() => {
+  const renderedItems = (0, import_react8.useMemo)(() => {
     return items.map((item) => __spreadProps(__spreadValues({}, item), {
       disabled: item.disabled || item.isComingSoon
     }));
   }, [items]);
-  const selectItems = (0, import_react7.useMemo)(() => {
+  const selectItems = (0, import_react8.useMemo)(() => {
     return renderedItems.map((item) => ({
       value: item.value,
       label: item.isComingSoon ? `${item.label} (soon)` : item.label,
@@ -6705,7 +6678,7 @@ var Tabs = ({
     event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const updateActiveUnderline = (0, import_react7.useCallback)(() => {
+  const updateActiveUnderline = (0, import_react8.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
         transform: "translateX(0px)",
@@ -6728,42 +6701,39 @@ var Tabs = ({
       opacity: 1
     });
   }, [isBarVariant, renderedItems, value]);
-  (0, import_react7.useLayoutEffect)(() => {
+  (0, import_react8.useLayoutEffect)(() => {
     updateActiveUnderline();
   }, [updateActiveUnderline]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isBarVariant || !shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const handleScroll = () => {
       updateActiveUnderline();
-      updateScrollAffordances();
     };
     tabListElement.addEventListener("scroll", handleScroll, { passive: true });
-    updateScrollAffordances();
     return () => {
       tabListElement.removeEventListener("scroll", handleScroll);
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react7.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react8.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
-    updateScrollAffordances();
-  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
-  (0, import_react7.useEffect)(() => {
-    if (isBarVariant && !shouldUseOverflowScroll) return;
+    updateScrollState();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
+  (0, import_react8.useEffect)(() => {
+    if (isBarVariant || !shouldUseOverflowScroll) return;
     if (typeof ResizeObserver === "undefined") return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const resizeObserver = new ResizeObserver(() => {
       updateActiveUnderline();
-      updateScrollAffordances();
     });
     resizeObserver.observe(tabListElement);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react7.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react8.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
@@ -6910,7 +6880,7 @@ var Tabs = ({
                 "agg-tab-scroll-start",
                 "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+                canScrollLeft ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -6922,24 +6892,63 @@ var Tabs = ({
                 "agg-tab-scroll-end",
                 "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+                canScrollRight ? "opacity-100" : "opacity-0"
               )
             }
           )
         ] }) : null,
-        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "agg-tab-scroll-end",
-              "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-[120px] overflow-hidden rounded-r-[8px] bg-linear-to-l from-agg-secondary from-[20%] via-agg-secondary/85 to-transparent",
-              getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-              scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)("span", { className: "absolute inset-y-0 right-3 inline-flex items-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" }) })
-          }
-        ) : null
+        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime116.jsxs)(import_jsx_runtime116.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsLeft,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-start",
+                "absolute top-0 bottom-0 left-0 z-10 w-20 rounded-l-agg-lg",
+                "inline-flex items-center justify-start pl-2",
+                "bg-linear-to-r from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollLeft ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: -200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { name: "chevron-left", size: "small", color: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsRight,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-end",
+                "absolute top-0 right-0 bottom-0 z-10 w-20 rounded-r-agg-lg",
+                "inline-flex items-center justify-end pr-2",
+                "bg-linear-to-l from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollRight ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: 200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime116.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -6949,7 +6958,7 @@ Tabs.displayName = "Tabs";
 // src/primitives/tooltip/index.tsx
 var import_hooks30 = require("@agg-build/hooks");
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/primitives/tooltip/tooltip.constants.ts
 var tooltipSizeClasses = {
@@ -6997,7 +7006,7 @@ var Tooltip = ({
     general: { rootClassName },
     features: { enableAnimations }
   } = (0, import_hooks30.useSdkUiConfig)();
-  const trigger = (0, import_react8.useMemo)(() => {
+  const trigger = (0, import_react9.useMemo)(() => {
     if (children) return children;
     return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       "button",
@@ -7108,7 +7117,7 @@ var resolveOutcomeRows = ({
       outcome
     }));
   }
-  return sortMarketsByYesOddsDesc(venueMarkets).map((market) => {
+  return venueMarkets.map((market) => {
     const outcome = resolveDisplayOutcome(market);
     if (!outcome) return void 0;
     return {
@@ -7334,17 +7343,17 @@ var EventListItemContent = ({
   var _a;
   const config = (0, import_hooks31.useSdkUiConfig)();
   const labels = (0, import_hooks31.useLabels)();
-  const allVenueMarkets = (0, import_react9.useMemo)(() => event.venueMarkets, [event.venueMarkets]);
+  const allVenueMarkets = (0, import_react10.useMemo)(() => event.venueMarkets, [event.venueMarkets]);
   const resolvedTitle = event.title;
   const resolvedImage = event.image;
-  const visibleVenueLogos = (0, import_react9.useMemo)(() => {
+  const visibleVenueLogos = (0, import_react10.useMemo)(() => {
     var _a2;
     return (0, import_hooks31.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;
-  const [isLazyMarketsQueryEnabled, setIsLazyMarketsQueryEnabled] = (0, import_react9.useState)(false);
-  const shouldEnableLazyMarketLoading = (0, import_react9.useMemo)(() => {
+  const [isLazyMarketsQueryEnabled, setIsLazyMarketsQueryEnabled] = (0, import_react10.useState)(false);
+  const shouldEnableLazyMarketLoading = (0, import_react10.useMemo)(() => {
     if (!event.id) return false;
     const hasExplicitMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount);
     if (hasExplicitMarketCount) {
@@ -7365,11 +7374,11 @@ var EventListItemContent = ({
     sortDir: "desc",
     status: marketStatus
   });
-  const resolvedOutcomeMarkets = (0, import_react9.useMemo)(() => {
+  const resolvedOutcomeMarkets = (0, import_react10.useMemo)(() => {
     if (!isLazyMarketsQueryEnabled || lazyLoadedMarkets.length === 0) return allVenueMarkets;
     return dedupeVenueMarketsById([...allVenueMarkets, ...lazyLoadedMarkets]);
   }, [allVenueMarkets, isLazyMarketsQueryEnabled, lazyLoadedMarkets]);
-  const midpointVenueMarketIds = (0, import_react9.useMemo)(() => {
+  const midpointVenueMarketIds = (0, import_react10.useMemo)(() => {
     var _a2;
     const ids = [];
     for (const market of resolvedOutcomeMarkets) {
@@ -7386,27 +7395,27 @@ var EventListItemContent = ({
   });
   const { prices: displayMidpointsByOutcomeId, isLoading: isOutcomeMidpointsLoading } = (0, import_hooks31.useMidpoints)(resolvedOutcomeMarkets);
   const isAwaitingMidpoints = isOutcomeMidpointsLoading || midpointVenueMarketIds.length > 0 && isVenueMarketMidpointsLoading;
-  const displayPriceByOutcomeId = (0, import_react9.useMemo)(() => {
+  const displayPriceByOutcomeId = (0, import_react10.useMemo)(() => {
     const priceByOutcomeId = new Map(displayMidpointsByOutcomeId);
     for (const [outcomeId, price] of buildOutcomeMidpointsByOutcomeId(midpointRows)) {
       priceByOutcomeId.set(outcomeId, price);
     }
     return priceByOutcomeId;
   }, [displayMidpointsByOutcomeId, midpointRows]);
-  const comparison = (0, import_react9.useMemo)(() => {
+  const comparison = (0, import_react10.useMemo)(() => {
     return normalizeEventListItemV2Comparison({
       venueMarkets: resolvedOutcomeMarkets,
       marketCount: resolvedMarketCount,
       priceByOutcomeId: displayPriceByOutcomeId
     });
   }, [displayPriceByOutcomeId, resolvedMarketCount, resolvedOutcomeMarkets]);
-  const gapsByVenueMarketId = (0, import_react9.useMemo)(() => {
+  const gapsByVenueMarketId = (0, import_react10.useMemo)(() => {
     return computePriceGapsFromComparisonRows(comparison.rows);
   }, [comparison.rows]);
   const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && (!isLazyMarketsQueryEnabled || isLoadingLazyMarkets || isFetchingNextLazyMarketsPage || hasNextLazyMarketsPage);
   const resolvedVolume = (_a = resolveDisplayVolume(event.volume, allVenueMarkets)) != null ? _a : 0;
   const volumeLabel = `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}`;
-  const orderedFooterVenues = (0, import_react9.useMemo)(() => {
+  const orderedFooterVenues = (0, import_react10.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]);
@@ -7467,7 +7476,7 @@ var EventListItemContent = ({
       onEventClick == null ? void 0 : onEventClick(event);
     }
   };
-  const handleOutcomesScroll = (0, import_react9.useCallback)(
+  const handleOutcomesScroll = (0, import_react10.useCallback)(
     (eventToHandle) => {
       if (!shouldEnableLazyMarketLoading) return;
       const element = eventToHandle.currentTarget;
@@ -7795,7 +7804,7 @@ var EventListItemByEventId = (_a) => {
     eventId: eventId != null ? eventId : "",
     enabled: !!eventId
   });
-  const resolvedEvent = (0, import_react9.useMemo)(() => {
+  const resolvedEvent = (0, import_react10.useMemo)(() => {
     return resolveEventListItemEvent(fetchedEvent);
   }, [fetchedEvent]);
   if (!eventId) {
@@ -7833,11 +7842,11 @@ EventListItemV2.displayName = "EventListItemV2";
 
 // src/events/item-details/index.tsx
 var import_hooks40 = require("@agg-build/hooks");
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/primitives/chart/chart-type-switch.tsx
 var import_hooks32 = require("@agg-build/hooks");
-var import_react10 = require("react");
+var import_react11 = require("react");
 
 // src/primitives/chart/chart-type-switch.constants.ts
 var CHART_TYPE_SWITCH_OPTION_KEYS = ["line", "candlestick"];
@@ -7869,7 +7878,7 @@ var ChartTypeSwitch = ({
   className
 }) => {
   const labels = (0, import_hooks32.useLabels)();
-  const options = (0, import_react10.useMemo)(
+  const options = (0, import_react11.useMemo)(
     () => CHART_TYPE_SWITCH_OPTION_KEYS.map((chartType) => ({
       value: chartType,
       iconName: resolveChartTypeOptionIconName(chartType),
@@ -9086,7 +9095,7 @@ var getDisplayOutcomePrice = ({
 
 // src/events/item-details/event-list-item-details-market-selector.tsx
 var import_hooks36 = require("@agg-build/hooks");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime120 = require("react/jsx-runtime");
 var MARKET_PILL_MAX_ROWS = 2;
 var MARKET_PILL_FALLBACK_CONTAINER_WIDTH = 640;
@@ -9183,38 +9192,38 @@ var EventListItemDetailsMarketSelector = ({
 }) => {
   var _a;
   const labels = (0, import_hooks36.useLabels)();
-  const containerRef = (0, import_react11.useRef)(null);
-  const measurementContainerRef = (0, import_react11.useRef)(null);
-  const moreButtonRef = (0, import_react11.useRef)(null);
-  const dropdownInputRef = (0, import_react11.useRef)(null);
-  const moreButtonMeasureRef = (0, import_react11.useRef)(null);
-  const optionMeasureRefs = (0, import_react11.useRef)({});
-  const [layout, setLayout] = (0, import_react11.useState)(() => ({
+  const containerRef = (0, import_react12.useRef)(null);
+  const measurementContainerRef = (0, import_react12.useRef)(null);
+  const moreButtonRef = (0, import_react12.useRef)(null);
+  const dropdownInputRef = (0, import_react12.useRef)(null);
+  const moreButtonMeasureRef = (0, import_react12.useRef)(null);
+  const optionMeasureRefs = (0, import_react12.useRef)({});
+  const [layout, setLayout] = (0, import_react12.useState)(() => ({
     visibleItems: options,
     hiddenItems: []
   }));
-  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react11.useState)(false);
-  const [isMobileViewport, setIsMobileViewport] = (0, import_react11.useState)(false);
-  const [searchValue, setSearchValue] = (0, import_react11.useState)("");
-  const [dropdownPosition, setDropdownPosition] = (0, import_react11.useState)({
+  const [isDropdownOpen, setIsDropdownOpen] = (0, import_react12.useState)(false);
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react12.useState)(false);
+  const [searchValue, setSearchValue] = (0, import_react12.useState)("");
+  const [dropdownPosition, setDropdownPosition] = (0, import_react12.useState)({
     left: 0,
     top: 0,
     width: 0
   });
-  const selectedHiddenOption = (0, import_react11.useMemo)(() => {
+  const selectedHiddenOption = (0, import_react12.useMemo)(() => {
     var _a2;
     return (_a2 = layout.hiddenItems.find((option) => option.value === selectedValue)) != null ? _a2 : null;
   }, [layout.hiddenItems, selectedValue]);
   const moreButtonLabel = (_a = selectedHiddenOption == null ? void 0 : selectedHiddenOption.label) != null ? _a : MARKET_PILL_MORE_LABEL;
   const isMoreButtonSelected = selectedHiddenOption != null;
-  const filteredOptions = (0, import_react11.useMemo)(() => {
+  const filteredOptions = (0, import_react12.useMemo)(() => {
     const normalizedSearchValue = searchValue.trim().toLowerCase();
     if (!normalizedSearchValue) return options;
     return options.filter((option) => option.label.toLowerCase().includes(normalizedSearchValue));
   }, [options, searchValue]);
-  const lastMeasuredKeyRef = (0, import_react11.useRef)(null);
-  const measureFrameRef = (0, import_react11.useRef)(null);
-  (0, import_react11.useLayoutEffect)(() => {
+  const lastMeasuredKeyRef = (0, import_react12.useRef)(null);
+  const measureFrameRef = (0, import_react12.useRef)(null);
+  (0, import_react12.useLayoutEffect)(() => {
     const measureLayout = () => {
       var _a2, _b, _c, _d, _e;
       const measurementContainer = measurementContainerRef.current;
@@ -9295,7 +9304,7 @@ var EventListItemDetailsMarketSelector = ({
       }
     };
   }, [moreButtonLabel, options]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -9313,7 +9322,7 @@ var EventListItemDetailsMarketSelector = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isDropdownOpen) {
       setSearchValue("");
       return;
@@ -9326,7 +9335,7 @@ var EventListItemDetailsMarketSelector = ({
       window.cancelAnimationFrame(animationFrameId);
     };
   }, [isDropdownOpen]);
-  (0, import_react11.useLayoutEffect)(() => {
+  (0, import_react12.useLayoutEffect)(() => {
     if (!isDropdownOpen || isMobileViewport) return;
     const updateDropdownPosition = () => {
       const containerElement = containerRef.current;
@@ -9362,7 +9371,7 @@ var EventListItemDetailsMarketSelector = ({
       resizeObserver.disconnect();
     };
   }, [isDropdownOpen, isMobileViewport, moreButtonLabel]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (!isDropdownOpen) return;
     const handlePointerDown = (event) => {
       var _a2;
@@ -9609,11 +9618,11 @@ var EventListItemDetailsMarketSelector = ({
 
 // src/events/item-details/settlement-summary.tsx
 var import_hooks39 = require("@agg-build/hooks");
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/trading/settlement/index.tsx
 var import_hooks38 = require("@agg-build/hooks");
-var import_react13 = require("react");
+var import_react14 = require("react");
 
 // src/trading/utils.ts
 var import_hooks37 = require("@agg-build/hooks");
@@ -9623,7 +9632,7 @@ var defaultSettlementSectionLabel = defaultLabels.trading.settlementSection;
 var defaultTradingDisclaimer = defaultLabels.trading.disclaimer;
 
 // src/trading/settlement/settlement-text-renderer.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/trading/settlement/settlement-text.utils.ts
 var stripHtmlFragments = (text) => {
@@ -9715,7 +9724,7 @@ var renderInlineSegment = (text, baseKey) => {
     }
     if (match.index > lastIndex) {
       nodes.push(
-        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react12.Fragment, { children: text.slice(lastIndex, match.index) }, `${baseKey}-text-${segmentIndex++}`)
+        /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react13.Fragment, { children: text.slice(lastIndex, match.index) }, `${baseKey}-text-${segmentIndex++}`)
       );
     }
     if (isLinkMatch(match)) {
@@ -9773,7 +9782,7 @@ var renderInlineSegment = (text, baseKey) => {
   }
   if (lastIndex < text.length) {
     nodes.push(
-      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react12.Fragment, { children: text.slice(lastIndex) }, `${baseKey}-text-${segmentIndex++}`)
+      /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(import_react13.Fragment, { children: text.slice(lastIndex) }, `${baseKey}-text-${segmentIndex++}`)
     );
   }
   return nodes;
@@ -9800,7 +9809,7 @@ var renderBlock = (block, blockIndex) => {
     "p",
     {
       className: "agg-settlement-text-paragraph text-agg-sm leading-agg-5 text-agg-foreground break-words [overflow-wrap:anywhere]",
-      children: block.lines.map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_react12.Fragment, { children: [
+      children: block.lines.map((line, lineIndex) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_react13.Fragment, { children: [
         lineIndex > 0 ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("br", {}) : null,
         renderInlineSegment(line, `block-${blockIndex}-line-${lineIndex}`)
       ] }, `block-${blockIndex}-line-${lineIndex}`))
@@ -9836,7 +9845,7 @@ var Settlement = ({
 }) => {
   var _a, _b, _c;
   const labels = (0, import_hooks38.useLabels)();
-  const blocks = (0, import_react13.useMemo)(
+  const blocks = (0, import_react14.useMemo)(
     () => dedupeSettlementSources({
       eventDescription,
       marketDescription,
@@ -9911,7 +9920,7 @@ var SettlementSummary = ({
   className
 }) => {
   const labels = (0, import_hooks39.useLabels)();
-  const firstParagraph = (0, import_react14.useMemo)(() => getFirstSettlementParagraph(content), [content]);
+  const firstParagraph = (0, import_react15.useMemo)(() => getFirstSettlementParagraph(content), [content]);
   if (!firstParagraph) return null;
   const handleReadFullDetails = (event) => {
     event.preventDefault();
@@ -10067,11 +10076,11 @@ var EventListItemDetailsGraphSection = ({
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m;
   const labels = (0, import_hooks40.useLabels)();
   const tradingContext = (0, import_hooks33.useEventTradingContext)();
-  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react15.useState)(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react15.useState)(
+  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react16.useState)(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react16.useState)(
     (_c = (_b = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a.label) == null ? void 0 : _b.trim()) != null ? _c : null
   );
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     var _a2, _b2, _c2;
     if (chartOutcomeLabel != null) return;
     const label2 = (_c2 = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a2.label) == null ? void 0 : _b2.trim()) != null ? _c2 : null;
@@ -10087,13 +10096,13 @@ var EventListItemDetailsGraphSection = ({
   const isDarkTheme = theme === "dark";
   const effectiveChartTimeRange = rangeOverride != null ? rangeOverride : selectedChartTimeRange;
   const rollingWindow = (0, import_hooks40.useRollingChartWindow)({ range: effectiveChartTimeRange });
-  const availableMarkets = (0, import_react15.useMemo)(() => {
+  const availableMarkets = (0, import_react16.useMemo)(() => {
     var _a2, _b2, _c2, _d2;
     if (venueMarkets.length === 0) return [];
     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 = (0, import_react15.useMemo)(() => {
+  const fallbackOutcomeLabel = (0, import_react16.useMemo)(() => {
     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;
@@ -10101,7 +10110,7 @@ var EventListItemDetailsGraphSection = ({
   }, [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 = (0, import_react15.useMemo)(() => {
+  const availableVenueOutcomes = (0, import_react16.useMemo)(() => {
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
         venueMarkets: availableMarkets,
@@ -10130,11 +10139,11 @@ var EventListItemDetailsGraphSection = ({
     // of refetching every time the bucket boundary advances.
     rangeKey: rollingWindow.range
   });
-  const hasAutoFallenBackRangeRef = (0, import_react15.useRef)(false);
-  (0, import_react15.useEffect)(() => {
+  const hasAutoFallenBackRangeRef = (0, import_react16.useRef)(false);
+  (0, import_react16.useEffect)(() => {
     hasAutoFallenBackRangeRef.current = false;
   }, [chartPrimaryOutcomeId]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!shouldAutoFallbackToAllRange({
       chartData: scopedMarketChartData,
       isLoading: isScopedMarketChartLoading,
@@ -10159,7 +10168,7 @@ var EventListItemDetailsGraphSection = ({
     onRangeOverrideChange,
     rollingWindow.startTs
   ]);
-  const selectedMarketOutcomes = (0, import_react15.useMemo)(() => {
+  const selectedMarketOutcomes = (0, import_react16.useMemo)(() => {
     var _a2, _b2;
     const selectedMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
     if (!selectedMarket) return [];
@@ -10171,7 +10180,7 @@ var EventListItemDetailsGraphSection = ({
       });
     });
   }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
-  const resolvedVenueChartSeries = (0, import_react15.useMemo)(() => {
+  const resolvedVenueChartSeries = (0, import_react16.useMemo)(() => {
     return resolveMarketChartVenueSeries({
       chartData: scopedMarketChartData,
       transformProbability: (v) => v
@@ -10184,32 +10193,32 @@ var EventListItemDetailsGraphSection = ({
       lineStyle: "solid"
     }));
   }, [isDarkTheme, scopedMarketChartData]);
-  const chartAvailableVenueOutcomes = (0, import_react15.useMemo)(() => {
+  const chartAvailableVenueOutcomes = (0, import_react16.useMemo)(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: scopedMarketChartData,
       venueOutcomes: availableVenueOutcomes
     });
   }, [availableVenueOutcomes, scopedMarketChartData]);
-  const defaultCandlestickVenue = (0, import_react15.useMemo)(() => {
+  const defaultCandlestickVenue = (0, import_react16.useMemo)(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
     return (_f2 = (_e2 = (_c2 = (_a2 = chartAvailableVenueOutcomes.find((item) => item.venue === (tradingContext == null ? void 0 : tradingContext.selectedVenue))) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartAvailableVenueOutcomes[0]) == null ? void 0 : _b2.venue) != null ? _e2 : (_d2 = availableVenueOutcomes[0]) == null ? void 0 : _d2.venue) != null ? _f2 : null;
   }, [availableVenueOutcomes, chartAvailableVenueOutcomes, tradingContext == null ? void 0 : tradingContext.selectedVenue]);
   const activeGraphVenue = selectedChartType === "candlestick" ? selectedGraphVenue != null ? selectedGraphVenue : defaultCandlestickVenue : selectedGraphVenue;
-  const visibleChartSeries = (0, import_react15.useMemo)(() => {
+  const visibleChartSeries = (0, import_react16.useMemo)(() => {
     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 = (0, import_react15.useMemo)(() => {
+  const chartLiveState = (0, import_react16.useMemo)(() => {
     return resolveMarketChartLiveState({
       chartData: scopedMarketChartData,
       selectedVenue: activeGraphVenue,
       transformProbability: (v) => v
     });
   }, [activeGraphVenue, scopedMarketChartData]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!selectedGraphVenue) return;
     const hasSelectedGraphVenue = chartAvailableVenueOutcomes.some(
       (item) => item.venue === selectedGraphVenue
@@ -10369,18 +10378,18 @@ var EventListItemDetailsContent = ({
   midpointsResult
 }) => {
   var _a, _b, _c, _d;
-  const [selectedChartType, setSelectedChartType] = (0, import_react15.useState)("line");
-  const lastAppliedEventSyncKeyRef = (0, import_react15.useRef)(null);
-  const lastAppliedDefaultRef = (0, import_react15.useRef)(null);
-  const [chartRangeOverride, setChartRangeOverride] = (0, import_react15.useState)(null);
-  (0, import_react15.useEffect)(() => {
+  const [selectedChartType, setSelectedChartType] = (0, import_react16.useState)("line");
+  const lastAppliedEventSyncKeyRef = (0, import_react16.useRef)(null);
+  const lastAppliedDefaultRef = (0, import_react16.useRef)(null);
+  const [chartRangeOverride, setChartRangeOverride] = (0, import_react16.useState)(null);
+  (0, import_react16.useEffect)(() => {
     setChartRangeOverride(null);
   }, [event.id]);
   const config = (0, import_hooks40.useSdkUiConfig)();
   const labels = (0, import_hooks40.useLabels)();
   const tradingContext = (0, import_hooks33.useEventTradingContext)();
-  const eventSyncKey = (0, import_react15.useMemo)(() => resolveEventDetailsSyncKey(event), [event]);
-  const resolvedEventTradingState = (0, import_react15.useMemo)(() => {
+  const eventSyncKey = (0, import_react16.useMemo)(() => resolveEventDetailsSyncKey(event), [event]);
+  const resolvedEventTradingState = (0, import_react16.useMemo)(() => {
     return eventTradingState != null ? eventTradingState : (0, import_hooks40.resolveEventTradingState)(event);
   }, [event, eventTradingState]);
   const scopedSelectedMarket = (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? (_a = tradingContext.selectedMarket) != null ? _a : resolvedEventTradingState.primaryMarket : resolvedEventTradingState.primaryMarket;
@@ -10404,18 +10413,18 @@ var EventListItemDetailsContent = ({
   const restMidpoints = (_b = resolvedMidpointsResult.bestMidpointsByOutcomeId) != null ? _b : resolvedMidpointsResult.prices;
   const bestMidpoint = resolvedMidpointsResult.bestMidpoint;
   const restBestPrices = resolvedMidpointsResult.bestPrices;
-  const bestPrices = (0, import_react15.useMemo)(
+  const bestPrices = (0, import_react16.useMemo)(
     () => (0, import_hooks40.mergeBestPricesPreferringLive)(restBestPrices, wsBestPrices),
     [restBestPrices, wsBestPrices]
   );
-  const livePrices = (0, import_react15.useMemo)(() => {
+  const livePrices = (0, import_react16.useMemo)(() => {
     if (!restMidpoints.size) return wsLivePrices;
     if (!wsLivePrices.size) return restMidpoints;
     const merged = new Map(restMidpoints);
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [restMidpoints, wsLivePrices]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!tradingContext) return;
     if (lastAppliedEventSyncKeyRef.current === eventSyncKey) return;
     if ((tradingContext == null ? void 0 : tradingContext.selectedEventId) !== event.id) {
@@ -10425,7 +10434,7 @@ var EventListItemDetailsContent = ({
     }
     lastAppliedEventSyncKeyRef.current = eventSyncKey;
   }, [event, eventSyncKey, tradingContext]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!tradingContext) return;
     if (!defaultMarketId) return;
     if (tradingContext.selectedEventId !== event.id) return;
@@ -10452,19 +10461,18 @@ var EventListItemDetailsContent = ({
     tradingContext,
     tradingContext == null ? void 0 : tradingContext.selectedEventId
   ]);
-  const venueMarkets = (0, import_react15.useMemo)(
+  const venueMarkets = (0, import_react16.useMemo)(
     () => resolvedEventTradingState.displayMarkets,
     [resolvedEventTradingState.displayMarkets]
   );
-  const sortedVenueMarkets = (0, import_react15.useMemo)(() => sortMarketsByVolumeDesc(venueMarkets), [venueMarkets]);
-  const marketOptions = (0, import_react15.useMemo)(
-    () => sortedVenueMarkets.map((vm) => ({
+  const marketOptions = (0, import_react16.useMemo)(
+    () => venueMarkets.map((vm) => ({
       value: vm.id,
       label: vm.question
     })),
-    [sortedVenueMarkets]
+    [venueMarkets]
   );
-  const volumeLabel = (0, import_react15.useMemo)(() => {
+  const volumeLabel = (0, import_react16.useMemo)(() => {
     const resolvedVolume = resolveDisplayVolume(event.volume, venueMarkets);
     if (typeof resolvedVolume !== "number") return "";
     return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -10731,11 +10739,11 @@ EventListItemDetails.displayName = "EventListItemDetails";
 
 // src/events/market-details/index.tsx
 var import_hooks42 = require("@agg-build/hooks");
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/events/orderbook/index.tsx
 var import_hooks41 = require("@agg-build/hooks");
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/events/orderbook/orderbook.constants.ts
 var orderbookRowLimitDefault = 4;
@@ -10756,7 +10764,7 @@ var orderbookDefaultLabels = {
 };
 
 // src/events/orderbook/use-center-orderbook-spread.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var maxAutoCenterAttempts = 12;
 var userScrollKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "]);
 var useCenterOrderbookSpread = ({
@@ -10767,21 +10775,21 @@ var useCenterOrderbookSpread = ({
   rowCount,
   enabled = true
 }) => {
-  const hasUserScrolledRef = (0, import_react16.useRef)(false);
-  const animationFrameRef = (0, import_react16.useRef)(null);
-  const retryCountRef = (0, import_react16.useRef)(0);
+  const hasUserScrolledRef = (0, import_react17.useRef)(false);
+  const animationFrameRef = (0, import_react17.useRef)(null);
+  const retryCountRef = (0, import_react17.useRef)(0);
   const resetKey = marketId != null ? marketId : "";
-  const cancelPendingFrame = (0, import_react16.useCallback)(() => {
+  const cancelPendingFrame = (0, import_react17.useCallback)(() => {
     if (animationFrameRef.current === null) return;
     window.cancelAnimationFrame(animationFrameRef.current);
     animationFrameRef.current = null;
   }, []);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     hasUserScrolledRef.current = false;
     retryCountRef.current = 0;
     cancelPendingFrame();
   }, [cancelPendingFrame, resetKey]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     const container = containerRef.current;
     if (!container) return;
     const handleUserScrollIntent = () => {
@@ -10804,7 +10812,7 @@ var useCenterOrderbookSpread = ({
       cancelPendingFrame();
     };
   }, [cancelPendingFrame, containerRef]);
-  (0, import_react16.useLayoutEffect)(() => {
+  (0, import_react17.useLayoutEffect)(() => {
     if (!enabled) return;
     let isCancelled = false;
     const measureAndCenter = () => {
@@ -10878,7 +10886,7 @@ var useCenterOrderbookSpread = ({
       mutationObserver == null ? void 0 : mutationObserver.disconnect();
     };
   }, [cancelPendingFrame, containerRef, enabled, resetKey, rowCount, spreadRef]);
-  const recenter = (0, import_react16.useCallback)(() => {
+  const recenter = (0, import_react17.useCallback)(() => {
     const container = containerRef.current;
     const spread = spreadRef.current;
     if (!container || !spread) return;
@@ -11070,8 +11078,8 @@ var Orderbook = ({
   var _a, _b, _c, _d, _e;
   const { enableWebsocketsLogs } = (0, import_hooks41.useAggUiConfig)();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
-  const scrollContainerRef = (0, import_react17.useRef)(null);
-  const spreadRowRef = (0, import_react17.useRef)(null);
+  const scrollContainerRef = (0, import_react18.useRef)(null);
+  const spreadRowRef = (0, import_react18.useRef)(null);
   const autoCenterMarketId = (_a = marketId != null ? marketId : outcomeId) != null ? _a : null;
   const maxVisibleRows = Math.max(1, visibleRows);
   const totalVisibleRows = maxVisibleRows * 2 + 1;
@@ -11088,7 +11096,7 @@ var Orderbook = ({
   const spreadEntry = entries.find(
     (e) => e.kind === "spread"
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     var _a2, _b2;
     if (!enableWebsocketsLogs) return;
     console.debug("[AggUI][orderbook] component_rendered", {
@@ -11482,14 +11490,14 @@ var MarketDetailsContent = ({
   const isDarkTheme = theme === "dark";
   const labels = (0, import_hooks42.useLabels)();
   const tradingContext = (0, import_hooks42.useEventTradingContext)();
-  const detailsContentId = (0, import_react18.useId)();
+  const detailsContentId = (0, import_react19.useId)();
   const tradeSide = (_a = tradingContext == null ? void 0 : tradingContext.tradeSide) != null ? _a : "buy";
   const wsLivePrices = (0, import_hooks42.useLiveOutcomePrices)(venueMarkets);
   const wsBestPrices = (0, import_hooks42.useLiveBestPrices)(venueMarkets);
-  const resolvedMarket = (0, import_react18.useMemo)(() => {
+  const resolvedMarket = (0, import_react19.useMemo)(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
-  const scopedResolvedMarket = (0, import_react18.useMemo)(() => {
+  const scopedResolvedMarket = (0, import_react19.useMemo)(() => {
     var _a2, _b2;
     if (!resolvedMarket) return null;
     return (_b2 = (_a2 = resolvedMarket.venueMarkets.find((venueMarket) => venueMarket.id === resolvedMarket.id)) != null ? _a2 : resolvedMarket.venueMarkets[0]) != null ? _b2 : null;
@@ -11511,17 +11519,17 @@ var MarketDetailsContent = ({
   const clusterBestMidpoint = clusterMidpointResult.bestMidpoint;
   const clusterBestMidpointVenue = clusterMidpointResult.bestMidpointVenue;
   const clusterBestPricesRest = clusterMidpointResult.bestPrices;
-  const clusterBestPrices = (0, import_react18.useMemo)(
+  const clusterBestPrices = (0, import_react19.useMemo)(
     () => (0, import_hooks42.mergeBestPricesPreferringLive)(clusterBestPricesRest, wsBestPrices),
     [clusterBestPricesRest, wsBestPrices]
   );
   const clusterBestPriceVenuesByOutcomeId = clusterMidpointResult.bestPriceVenuesByOutcomeId;
-  const clusterMidpointMarkets = (0, import_react18.useMemo)(() => {
+  const clusterMidpointMarkets = (0, import_react19.useMemo)(() => {
     var _a2;
     if (!resolvedMarket) return [];
     return (_a2 = resolvedMarket.venueMarkets) != null ? _a2 : [];
   }, [resolvedMarket]);
-  const tradableVenues = (0, import_react18.useMemo)(() => {
+  const tradableVenues = (0, import_react19.useMemo)(() => {
     var _a2;
     if (clusterMidpointMarkets.length === 0) return null;
     if (clusterMidpoints.size === 0) return null;
@@ -11536,7 +11544,7 @@ var MarketDetailsContent = ({
     }
     return set;
   }, [clusterMidpointMarkets, clusterMidpoints]);
-  const model = (0, import_react18.useMemo)(() => {
+  const model = (0, import_react19.useMemo)(() => {
     return buildMarketDetailsModel({
       venueMarkets,
       marketId,
@@ -11555,7 +11563,7 @@ var MarketDetailsContent = ({
     title2,
     tradableVenues
   ]);
-  const livePrices = (0, import_react18.useMemo)(() => {
+  const livePrices = (0, import_react19.useMemo)(() => {
     const merged = /* @__PURE__ */ new Map();
     if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
       for (const [outcomeId, price] of midpointsFallback) {
@@ -11570,37 +11578,37 @@ var MarketDetailsContent = ({
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [clusterMidpoints, midpointsFallback, wsLivePrices]);
-  const scopedMarketForCard = (0, import_react18.useMemo)(() => {
+  const scopedMarketForCard = (0, import_react19.useMemo)(() => {
     var _a2;
     if (!model) return null;
     return (_a2 = model.market.venueMarkets.find((venueMarket) => venueMarket.id === model.market.id)) != null ? _a2 : model.primaryVenueMarket;
   }, [model]);
-  const marketTradingState = (0, import_react18.useMemo)(() => {
+  const marketTradingState = (0, import_react19.useMemo)(() => {
     return (0, import_hooks42.resolveMarketTradingState)(scopedMarketForCard);
   }, [scopedMarketForCard]);
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
   const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
-  const marketDetailsTabs = (0, import_react18.useMemo)(() => {
+  const marketDetailsTabs = (0, import_react19.useMemo)(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
-  const [selectedTab, setSelectedTab] = (0, import_react18.useState)(
+  const [selectedTab, setSelectedTab] = (0, import_react19.useState)(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = (0, import_react18.useState)(controlledIsOpened);
-  (0, import_react18.useEffect)(() => {
+  const [isOpened, setIsOpened] = (0, import_react19.useState)(controlledIsOpened);
+  (0, import_react19.useEffect)(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     setIsOpened(controlledIsOpened);
   }, [controlledIsOpened]);
   const selectedTimeRange = config.chart.selectedChartTimeRange;
   const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
-  const [chartRangeOverride, setChartRangeOverride] = (0, import_react18.useState)(null);
+  const [chartRangeOverride, setChartRangeOverride] = (0, import_react19.useState)(null);
   const effectiveChartTimeRange = isResolvedMarket ? "ALL" : chartRangeOverride != null ? chartRangeOverride : selectedTimeRange;
-  const [selectedChartType, setSelectedChartType] = (0, import_react18.useState)("line");
-  const scopedSelectedOutcomeState = (0, import_react18.useMemo)(() => {
+  const [selectedChartType, setSelectedChartType] = (0, import_react19.useState)("line");
+  const scopedSelectedOutcomeState = (0, import_react19.useMemo)(() => {
     if (!model) {
       return {
         outcomeId: null,
@@ -11622,15 +11630,15 @@ var MarketDetailsContent = ({
   const selectedOutcomeId = scopedSelectedOutcomeState.outcomeId;
   const selectedOutcomeLabel = (_c = scopedSelectedOutcomeState.outcomeLabel) != null ? _c : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
-  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react18.useState)(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react18.useState)(selectedOutcomeLabel);
-  (0, import_react18.useEffect)(() => {
+  const [selectedGraphVenue, setSelectedGraphVenue] = (0, import_react19.useState)(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = (0, import_react19.useState)(selectedOutcomeLabel);
+  (0, import_react19.useEffect)(() => {
     if (!isOpened) return;
     if (selectedOutcomeLabel) {
       setChartOutcomeLabel(selectedOutcomeLabel);
     }
   }, [isOpened]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
@@ -11654,7 +11662,7 @@ var MarketDetailsContent = ({
     tradingContext == null ? void 0 : tradingContext.selectedMarketId,
     selectOutcome
   ]);
-  const headerOutcomeItems = (0, import_react18.useMemo)(() => {
+  const headerOutcomeItems = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     const items = resolveHeaderOutcomeItems(model.market.venueMarkets, scopedMarketForCard);
     return items.map((item) => {
@@ -11708,7 +11716,7 @@ var MarketDetailsContent = ({
     tradeSide,
     wsLivePrices
   ]);
-  const headlineProbability = (0, import_react18.useMemo)(() => {
+  const headlineProbability = (0, import_react19.useMemo)(() => {
     var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
     if (isResolvedMarket) {
@@ -11744,7 +11752,7 @@ var MarketDetailsContent = ({
     midpointsFallback,
     wsLivePrices
   ]);
-  const selectedOutcomesByVenue = (0, import_react18.useMemo)(() => {
+  const selectedOutcomesByVenue = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
       venueMarkets: model.market.venueMarkets,
@@ -11758,7 +11766,7 @@ var MarketDetailsContent = ({
   }, [model, selectedOutcomeLabel, selectedOutcomeId]);
   const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
   const chartSelectedOutcomeId = selectedOutcomeId && resolvedChartOutcomeLabel === selectedOutcomeLabel ? selectedOutcomeId : null;
-  const chartOutcomesByVenue = (0, import_react18.useMemo)(() => {
+  const chartOutcomesByVenue = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
@@ -11775,7 +11783,7 @@ var MarketDetailsContent = ({
   const primaryVenueMarketId = (_f = (_e = selectedOutcomesByVenue[0]) == null ? void 0 : _e.market.id) != null ? _f : null;
   const primaryOutcomeId = (_h = (_g = selectedOutcomesByVenue[0]) == null ? void 0 : _g.outcome.id) != null ? _h : null;
   const chartPrimaryOutcomeId = (_j = (_i = chartOutcomesByVenue[0]) == null ? void 0 : _i.outcome.id) != null ? _j : null;
-  const chartVenueOutcomeIds = (0, import_react18.useMemo)(() => {
+  const chartVenueOutcomeIds = (0, import_react19.useMemo)(() => {
     return chartOutcomesByVenue.map((item) => item.outcome.id);
   }, [chartOutcomesByVenue]);
   const {
@@ -11796,12 +11804,12 @@ var MarketDetailsContent = ({
     // instead of refetching on every bucket-boundary rollover.
     rangeKey: rollingWindow.range
   });
-  const hasAutoFallenBackRangeRef = (0, import_react18.useRef)(false);
-  (0, import_react18.useEffect)(() => {
+  const hasAutoFallenBackRangeRef = (0, import_react19.useRef)(false);
+  (0, import_react19.useEffect)(() => {
     hasAutoFallenBackRangeRef.current = false;
     setChartRangeOverride(null);
   }, [chartPrimaryOutcomeId]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!shouldAutoFallbackToAllRange({
       chartData: marketChartData,
       isLoading: isMarketChartLoading,
@@ -11832,14 +11840,14 @@ var MarketDetailsContent = ({
     })),
     live
   });
-  const marketOrderbookDataById = (0, import_react18.useMemo)(() => {
+  const marketOrderbookDataById = (0, import_react19.useMemo)(() => {
     var _a2;
     return (_a2 = marketOrderbookResult.dataById) != null ? _a2 : {};
   }, [marketOrderbookResult]);
   const isOrderBookLoading = marketOrderbookResult.isLoading;
   const orderBookError = marketOrderbookResult.error;
   const refetchOrderBook = marketOrderbookResult.refetch;
-  const aggregatedOrderbookRows = (0, import_react18.useMemo)(() => {
+  const aggregatedOrderbookRows = (0, import_react19.useMemo)(() => {
     return mergeVenueOutcomeOrderbooks({
       eligibleOutcomes: selectedOutcomesByVenue,
       orderbooksByOutcomeId: marketOrderbookDataById
@@ -11847,7 +11855,7 @@ var MarketDetailsContent = ({
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
   const askRows = aggregatedOrderbookRows.askRows;
   const bidRows = aggregatedOrderbookRows.bidRows;
-  const unifiedEntries = (0, import_react18.useMemo)(() => {
+  const unifiedEntries = (0, import_react19.useMemo)(() => {
     return resolveUnifiedOrderBookEntries({
       askRows,
       bidRows,
@@ -11855,7 +11863,7 @@ var MarketDetailsContent = ({
       spread: aggregatedOrderbookRows.spread
     });
   }, [aggregatedOrderbookRows.midpoint, aggregatedOrderbookRows.spread, askRows, bidRows]);
-  const orderbookSnapshotKey = (0, import_react18.useMemo)(() => {
+  const orderbookSnapshotKey = (0, import_react19.useMemo)(() => {
     if (selectedOutcomesByVenue.length === 0) return null;
     return selectedOutcomesByVenue.map((item) => {
       var _a2, _b2;
@@ -11863,13 +11871,13 @@ var MarketDetailsContent = ({
       return `${item.outcomeId}:${snapshotVersion}`;
     }).join("|");
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
-  const chartAvailableOutcomesByVenue = (0, import_react18.useMemo)(() => {
+  const chartAvailableOutcomesByVenue = (0, import_react19.useMemo)(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: marketChartData,
       venueOutcomes: chartOutcomesByVenue
     });
   }, [chartOutcomesByVenue, marketChartData]);
-  const graphSeries = (0, import_react18.useMemo)(() => {
+  const graphSeries = (0, import_react19.useMemo)(() => {
     var _a2, _b2, _c2, _d2;
     const baseColor = resolveSeriesColor(
       (_d2 = (_c2 = selectedGraphVenue != null ? selectedGraphVenue : (_a2 = chartAvailableOutcomesByVenue[0]) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartOutcomesByVenue[0]) == null ? void 0 : _b2.venue) != null ? _d2 : "polymarket",
@@ -11901,14 +11909,14 @@ var MarketDetailsContent = ({
     chartAvailableOutcomesByVenue,
     chartOutcomesByVenue
   ]);
-  const graphLiveState = (0, import_react18.useMemo)(() => {
+  const graphLiveState = (0, import_react19.useMemo)(() => {
     return resolveMarketChartLiveState({
       chartData: marketChartData,
       selectedVenue: selectedGraphVenue,
       transformProbability: (value) => value
     });
   }, [marketChartData, selectedGraphVenue]);
-  const otherRows = (0, import_react18.useMemo)(() => {
+  const otherRows = (0, import_react19.useMemo)(() => {
     if (!model) return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
@@ -11999,7 +12007,7 @@ var MarketDetailsContent = ({
     title: labels.marketDetails.orderBookEmptyTitle,
     description: labels.marketDetails.orderBookEmptyDescription
   } : { kind: "data" };
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!selectedGraphVenue) {
       return;
     }
@@ -12514,8 +12522,8 @@ var MarketDetailsList = ({
   const labels = (0, import_hooks42.useLabels)();
   const tradingContext = (0, import_hooks42.useEventTradingContext)();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
-  const [expandedMarketId, setExpandedMarketId] = (0, import_react18.useState)(null);
-  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = (0, import_react18.useState)(false);
+  const [expandedMarketId, setExpandedMarketId] = (0, import_react19.useState)(null);
+  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = (0, import_react19.useState)(false);
   const resolvedEventId = eventId || "";
   const {
     markets: rawMarkets,
@@ -12528,7 +12536,7 @@ var MarketDetailsList = ({
     sortBy: "yesPrice",
     sortDir: "desc"
   });
-  const sourceMarkets = (0, import_react18.useMemo)(() => {
+  const sourceMarkets = (0, import_react19.useMemo)(() => {
     var _a2;
     if ((_a2 = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _a2.length) {
       return eventTradingState.marketStates.map((item) => item.market);
@@ -12536,12 +12544,11 @@ var MarketDetailsList = ({
     if (providedMarkets) return providedMarkets;
     return rawMarkets;
   }, [eventTradingState == null ? void 0 : eventTradingState.marketStates, providedMarkets, rawMarkets]);
-  const isResolvedEvent = (0, import_react18.useMemo)(() => {
+  const isResolvedEvent = (0, import_react19.useMemo)(() => {
     return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
   }, [eventTradingState, sourceMarkets]);
-  const groupedMarkets = (0, import_react18.useMemo)(() => {
-    const sortedMarkets = sortMarketsByVolumeDesc(sourceMarkets);
-    if (sortedMarkets.length === 0) {
+  const groupedMarkets = (0, import_react19.useMemo)(() => {
+    if (sourceMarkets.length === 0) {
       return {
         primary: [],
         closed: [],
@@ -12550,9 +12557,9 @@ var MarketDetailsList = ({
       };
     }
     if (isResolvedEvent) {
-      const winnerMarketId = resolveResolvedWinnerMarketId(sortedMarkets, eventTradingState);
+      const winnerMarketId = resolveResolvedWinnerMarketId(sourceMarkets, eventTradingState);
       return {
-        primary: moveMarketToFront(sortedMarkets, winnerMarketId),
+        primary: moveMarketToFront(sourceMarkets, winnerMarketId),
         upcoming: [],
         resolved: []
       };
@@ -12561,7 +12568,7 @@ var MarketDetailsList = ({
     const upcoming = [];
     const resolved = [];
     const closed = [];
-    sortedMarkets.forEach((market) => {
+    sourceMarkets.forEach((market) => {
       const marketStateKind = (0, import_hooks42.resolveMarketTradingState)(market).kind;
       if (marketStateKind === "resolved") {
         resolved.push(market);
@@ -12580,21 +12587,21 @@ var MarketDetailsList = ({
     return { primary, upcoming, resolved, closed };
   }, [eventTradingState, isResolvedEvent, sourceMarkets]);
   const shouldShowResolvedToggle = !isResolvedEvent && groupedMarkets.resolved.length > 0;
-  const visibleResolvedMarkets = (0, import_react18.useMemo)(() => {
+  const visibleResolvedMarkets = (0, import_react19.useMemo)(() => {
     if (isResolvedEvent || areResolvedMarketsVisible) return groupedMarkets.resolved;
     return [];
   }, [areResolvedMarketsVisible, groupedMarkets.resolved, isResolvedEvent]);
-  const displayedMarkets = (0, import_react18.useMemo)(() => {
+  const displayedMarkets = (0, import_react19.useMemo)(() => {
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
-  const midpointEligibleMarkets = (0, import_react18.useMemo)(() => {
+  const midpointEligibleMarkets = (0, import_react19.useMemo)(() => {
     return displayedMarkets.filter(
       (market) => (0, import_hooks42.resolveMarketTradingState)(market).kind !== "resolved"
     );
   }, [displayedMarkets]);
   const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = (0, import_hooks42.useViewportMidpoints)(midpointEligibleMarkets);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
       return;
@@ -12603,7 +12610,7 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
       return;
@@ -12620,7 +12627,7 @@ var MarketDetailsList = ({
     if (!autoSelectFallbackMarket) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
   }, [autoSelectFallbackMarket, displayedMarkets, selectedMarketId, sourceMarkets, tradingContext]);
-  (0, import_react18.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
     setExpandedMarketId(null);
@@ -12730,11 +12737,128 @@ MarketDetailsList.displayName = "MarketDetailsList";
 var import_hooks44 = require("@agg-build/hooks");
 var import_sdk14 = require("@agg-build/sdk");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
+var import_react22 = require("react");
+
+// src/events/list/category-sidebar.tsx
 var import_react20 = require("react");
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var rowBase = cn(
+  "flex min-h-11 w-full items-center gap-3 rounded-[6px] px-3 py-3",
+  "text-left text-agg-sm font-agg-normal leading-agg-5",
+  "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 idleRowClassName = cn(
+  rowBase,
+  "cursor-pointer text-agg-foreground hover:bg-agg-secondary-hover"
+);
+var selectedRowClassName = cn(rowBase, "cursor-pointer bg-agg-primary/10 text-agg-primary");
+var CategorySidebar = ({
+  baseCategoryId,
+  childrenByParentId,
+  categoryPath,
+  collapsedCategoryIds,
+  totalEventCount,
+  labels,
+  onSelectAll,
+  onToggleCategory
+}) => {
+  const isDrilledIn = categoryPath.length > 0;
+  const sortedBaseChildren = (0, import_react20.useMemo)(() => {
+    var _a;
+    if (!baseCategoryId) return [];
+    const children = [...(_a = childrenByParentId.get(baseCategoryId)) != null ? _a : []];
+    return children.sort((a, b) => {
+      var _a2, _b, _c, _d;
+      const aHasChildren = ((_b = (_a2 = childrenByParentId.get(a.id)) == null ? void 0 : _a2.length) != null ? _b : 0) > 0;
+      const bHasChildren = ((_d = (_c = childrenByParentId.get(b.id)) == null ? void 0 : _c.length) != null ? _d : 0) > 0;
+      if (aHasChildren === bHasChildren) return 0;
+      return aHasChildren ? -1 : 1;
+    });
+  }, [baseCategoryId, childrenByParentId]);
+  const renderRow = ({
+    entry,
+    isExpanded,
+    isSelected,
+    onClick
+  }) => {
+    var _a, _b;
+    const hasKnownChildren = ((_b = (_a = childrenByParentId.get(entry.id)) == null ? void 0 : _a.length) != null ? _b : 0) > 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-current": isSelected ? "true" : void 0,
+        className: isSelected ? selectedRowClassName : idleRowClassName,
+        onClick,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "min-w-0 flex-1 truncate first-letter:uppercase", children: entry.label }),
+          hasKnownChildren ? /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            Icon,
+            {
+              name: isExpanded ? "chevron-up" : "chevron-down",
+              size: "small",
+              color: "currentColor",
+              className: "shrink-0 text-agg-muted-foreground"
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
+        ]
+      },
+      entry.id
+    );
+  };
+  const renderBranch = (category, depth) => {
+    var _a, _b, _c, _d, _e;
+    const label2 = (_a = category.displayName) != null ? _a : category.name;
+    const entry = {
+      id: category.id,
+      label: label2,
+      eventCount: (_b = category.eventCount) != null ? _b : 0
+    };
+    const childCategories = (_c = childrenByParentId.get(category.id)) != null ? _c : [];
+    const hasKnownChildren = childCategories.length > 0;
+    const isExpanded = ((_d = categoryPath[depth]) == null ? void 0 : _d.id) === category.id && !collapsedCategoryIds.has(category.id);
+    const isSelected = ((_e = categoryPath[depth]) == null ? void 0 : _e.id) === category.id && categoryPath.length === depth + 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex w-full flex-col", children: [
+      renderRow({
+        entry,
+        isExpanded,
+        isSelected,
+        onClick: () => onToggleCategory({ entry, depth, hasKnownChildren, isExpanded, isSelected })
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        "div",
+        {
+          className: cn(
+            "grid transition-[grid-template-rows] duration-150 ease-in-out motion-reduce:transition-none",
+            isExpanded ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex w-full flex-col gap-1 pl-4 pt-1", children: childCategories.map((child) => renderBranch(child, depth + 1)) }) })
+        }
+      )
+    ] }, category.id);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+      "button",
+      {
+        type: "button",
+        "aria-current": !isDrilledIn ? "true" : void 0,
+        className: !isDrilledIn ? selectedRowClassName : idleRowClassName,
+        onClick: onSelectAll,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "min-w-0 flex-1 truncate", children: labels.subcategoriesAll }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: totalEventCount })
+        ]
+      }
+    ),
+    sortedBaseChildren.map((category) => renderBranch(category, 0))
+  ] });
+};
+CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
 var import_hooks43 = require("@agg-build/hooks");
-var import_react19 = require("react");
+var import_react21 = require("react");
 
 // src/events/list/event-list.constants.ts
 var import_sdk13 = require("@agg-build/sdk");
@@ -12801,16 +12925,16 @@ var getDefaultEventListTabs = (labels) => {
 };
 
 // src/events/list/event-list-tabs.tsx
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var renderTabIcon = (tab, isActive) => {
   if (tab.iconName === "warning-filled") {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "warning-filled", size: "small", color: "currentColor" });
   }
   if (tab.venueLogo) {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(VenueLogo, { venue: tab.venueLogo, size: "small" });
   }
   if (!tab.iconName) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     Icon,
     {
       name: tab.iconName,
@@ -12823,7 +12947,7 @@ var useEventListTabs = (tabs) => {
   const labels = (0, import_hooks43.useLabels)();
   const { disabledVenues } = (0, import_hooks43.useAppConfig)();
   const { isLocationBlocked } = (0, import_hooks43.useGeoBlock)();
-  return (0, import_react19.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
@@ -12852,13 +12976,13 @@ var EventListTabs = ({
   overflowBehavior
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
-  (0, import_react19.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const fallbackTab = resolvedTabs.find((tab) => !tab.disabled);
     if (!fallbackTab) return;
     if (resolvedTabs.some((tab) => tab.value === activeTab && !tab.disabled)) return;
     onTabChange(fallbackTab.value);
   }, [activeTab, onTabChange, resolvedTabs]);
-  const items = (0, import_react19.useMemo)(() => {
+  const items = (0, import_react21.useMemo)(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -12870,7 +12994,7 @@ var EventListTabs = ({
       };
     });
   }, [activeTab, resolvedTabs]);
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
     Tabs,
     {
       ariaLabel,
@@ -12883,93 +13007,9 @@ var EventListTabs = ({
   );
 };
 EventListTabs.displayName = "EventListTabs";
-var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
-  const headerRef = (0, import_react19.useRef)(null);
-  const titleRef = (0, import_react19.useRef)(null);
-  const requiredTabsWidthRef = (0, import_react19.useRef)(0);
-  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = (0, import_react19.useState)(false);
-  const updateTabsOverflowBehavior = (0, import_react19.useCallback)(() => {
-    var _a;
-    if (typeof window === "undefined") return;
-    const headerElement = headerRef.current;
-    const titleElement = titleRef.current;
-    if (!headerElement || !titleElement) return;
-    const headerStyles = window.getComputedStyle(headerElement);
-    const rawGap = headerStyles.columnGap || headerStyles.gap || "0";
-    const horizontalGap = Number.parseFloat(rawGap) || 0;
-    const availableTabsWidth = headerElement.clientWidth - titleElement.getBoundingClientRect().width - horizontalGap;
-    if (availableTabsWidth <= 0) {
-      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;
-      if (currentRequiredWidth > 0) {
-        requiredTabsWidthRef.current = currentRequiredWidth;
-      }
-      const hasRealOverflow = tabListElement.scrollWidth - tabListElement.clientWidth > 1;
-      setShouldUseSelectOverflow(hasRealOverflow);
-      return;
-    }
-    if (requiredTabsWidthRef.current <= 0) return;
-    setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
-  }, [options == null ? void 0 : options.minTabsInlineWidthForSelect, options == null ? void 0 : options.preferSelectOnOverflow]);
-  (0, import_react19.useEffect)(() => {
-    updateTabsOverflowBehavior();
-  }, [recomputeOn, updateTabsOverflowBehavior]);
-  (0, import_react19.useEffect)(() => {
-    if (typeof window === "undefined") return;
-    const handleResize = () => {
-      updateTabsOverflowBehavior();
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [updateTabsOverflowBehavior]);
-  (0, import_react19.useEffect)(() => {
-    if (typeof ResizeObserver === "undefined") return;
-    const headerElement = headerRef.current;
-    const titleElement = titleRef.current;
-    if (!headerElement || !titleElement) return;
-    const resizeObserver = new ResizeObserver(() => {
-      updateTabsOverflowBehavior();
-    });
-    resizeObserver.observe(headerElement);
-    resizeObserver.observe(titleElement);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, [updateTabsOverflowBehavior]);
-  return { headerRef, titleRef, shouldUseSelectOverflow };
-};
 
 // src/events/list/index.tsx
-var import_jsx_runtime130 = require("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 import_jsx_runtime131 = require("react/jsx-runtime");
 var SORT_ICON_BY_VALUE = {
   volume24hr: "sort-volume-24hr",
   topArbitrage: "sort-top-arbitrage",
@@ -13006,7 +13046,7 @@ var EventList = ({
   initialLoadedPageCount,
   stateRef
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const labels = (0, import_hooks44.useLabels)();
   const { disabledVenues } = (0, import_hooks44.useAppConfig)();
   const {
@@ -13014,39 +13054,38 @@ var EventList = ({
   } = (0, import_hooks44.useSdkUiConfig)();
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = (0, import_react20.useMemo)(
+  const visibleVenues = (0, import_react22.useMemo)(
     () => disabledVenues.length === 0 ? void 0 : (0, import_hooks44.getVisibleVenueIdsByConfig)(import_sdk14.VENUES, disabledVenues),
     [disabledVenues]
   );
-  const [activeTabValue, setActiveTabValue] = (0, import_react20.useState)(
+  const [activeTabValue, setActiveTabValue] = (0, import_react22.useState)(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
-  const [selectedSort, setSelectedSort] = (0, import_react20.useState)("volume24hr");
-  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react20.useState)(false);
-  const [categoryPath, setCategoryPath] = (0, import_react20.useState)([]);
-  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react20.useState)(() => /* @__PURE__ */ new Set());
-  const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs, { minTabsInlineWidthForSelect: 400, preferSelectOnOverflow: false });
-  const sortItems = (0, import_react20.useMemo)(() => {
+  const [selectedSort, setSelectedSort] = (0, import_react22.useState)("volume24hr");
+  const [isSubcategoriesModalOpen, setIsSubcategoriesModalOpen] = (0, import_react22.useState)(false);
+  const [categoryPath, setCategoryPath] = (0, import_react22.useState)([]);
+  const [collapsedCategoryIds, setCollapsedCategoryIds] = (0, import_react22.useState)(() => /* @__PURE__ */ new Set());
+  const sortItems = (0, import_react22.useMemo)(() => {
     return [
       {
         value: "volume24hr",
         label: labels.eventList.sortBy24hVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume24hr, size: "small", color: "currentColor" })
       },
       {
         value: "topArbitrage",
         label: labels.eventList.sortByTopArbitrage,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.topArbitrage, size: "small", color: "currentColor" })
       },
       {
         value: "volume",
         label: labels.eventList.sortByTotalVolume,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.volume, size: "small", color: "currentColor" })
       },
       {
         value: "endDate",
         label: labels.eventList.sortByEndingSoon,
-        icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
+        icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: SORT_ICON_BY_VALUE.endDate, size: "small", color: "currentColor" })
       }
     ];
   }, [
@@ -13056,14 +13095,9 @@ var EventList = ({
     labels.eventList.sortByTotalVolume
   ]);
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (!isDiscoveryFiltersEnabled) return;
-    if (!baseCategoryId) {
-      setCategoryPath([]);
-      setCollapsedCategoryIds(/* @__PURE__ */ new Set());
-      return;
-    }
-    setCategoryPath([{ id: baseCategoryId, label: baseCategoryId, eventCount: 0 }]);
+    setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
   }, [baseCategoryId, isDiscoveryFiltersEnabled]);
   const { categories: topLevelCategories } = (0, import_hooks44.useCategories)({
@@ -13071,10 +13105,10 @@ var EventList = ({
     enabled: isDiscoveryFiltersEnabled,
     limit: 100
   });
-  const sortedTopLevelCategories = (0, import_react20.useMemo)(() => {
+  const sortedTopLevelCategories = (0, import_react22.useMemo)(() => {
     return sortCategoriesForNavigation(topLevelCategories);
   }, [topLevelCategories]);
-  const baseCategoryChildPrefetchIds = (0, import_react20.useMemo)(() => {
+  const baseCategoryChildPrefetchIds = (0, import_react22.useMemo)(() => {
     return Array.from(
       /* @__PURE__ */ new Set([
         ...sortedTopLevelCategories.map((category) => category.id),
@@ -13088,23 +13122,28 @@ var EventList = ({
     parentIds: baseCategoryChildPrefetchIds,
     limit: 100
   });
-  const visibleChildPrefetchIds = (0, import_react20.useMemo)(() => {
-    var _a2;
+  const visibleChildPrefetchIds = (0, import_react22.useMemo)(() => {
+    var _a2, _b2;
     const ids = /* @__PURE__ */ new Set();
+    if (baseCategoryId) {
+      for (const child of (_a2 = baseChildrenByParentId.get(baseCategoryId)) != null ? _a2 : []) {
+        ids.add(child.id);
+      }
+    }
     for (const expandedCategory of categoryPath) {
-      for (const childCategory of (_a2 = baseChildrenByParentId.get(expandedCategory.id)) != null ? _a2 : []) {
+      for (const childCategory of (_b2 = baseChildrenByParentId.get(expandedCategory.id)) != null ? _b2 : []) {
         ids.add(childCategory.id);
       }
     }
     return Array.from(ids);
-  }, [baseChildrenByParentId, categoryPath]);
+  }, [baseCategoryId, baseChildrenByParentId, categoryPath]);
   const { childrenByParentId: visibleChildrenByParentId } = (0, import_hooks44.useCategoryChildren)({
     queryKeyScope: "event-list-category-children",
     enabled: isDiscoveryFiltersEnabled,
     parentIds: visibleChildPrefetchIds,
     limit: 100
   });
-  const visibleGrandchildPrefetchIds = (0, import_react20.useMemo)(() => {
+  const visibleGrandchildPrefetchIds = (0, import_react22.useMemo)(() => {
     var _a2;
     const ids = /* @__PURE__ */ new Set();
     for (const expandedCategory of categoryPath) {
@@ -13120,43 +13159,41 @@ var EventList = ({
     parentIds: visibleGrandchildPrefetchIds,
     limit: 100
   });
-  const childrenByParentId = (0, import_react20.useMemo)(() => {
+  const childrenByParentId = (0, import_react22.useMemo)(() => {
     return new Map([
       ...baseChildrenByParentId,
       ...visibleChildrenByParentId,
       ...visibleGrandchildrenByParentId
     ]);
   }, [baseChildrenByParentId, visibleChildrenByParentId, visibleGrandchildrenByParentId]);
-  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && (sortedTopLevelCategories.length > 0 || categoryPath.length > 0);
-  const totalTopLevelEventCount = (0, import_react20.useMemo)(() => {
-    return sortedTopLevelCategories.reduce((accumulator, category) => {
-      var _a2;
-      return accumulator + ((_a2 = category.eventCount) != null ? _a2 : 0);
-    }, 0);
-  }, [sortedTopLevelCategories]);
-  const resolvedCategoryIds = (0, import_react20.useMemo)(() => {
+  const shouldRenderSubcategoryFilters = isDiscoveryFiltersEnabled && baseCategoryId !== null && (((_e = (_d = childrenByParentId.get(baseCategoryId)) == null ? void 0 : _d.length) != null ? _e : 0) > 0 || categoryPath.length > 0);
+  const baseCategoryEventCount = (0, import_react22.useMemo)(() => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = sortedTopLevelCategories.find((c) => c.id === baseCategoryId)) == null ? void 0 : _a2.eventCount) != null ? _b2 : 0;
+  }, [baseCategoryId, sortedTopLevelCategories]);
+  const resolvedCategoryIds = (0, import_react22.useMemo)(() => {
     if (!isDiscoveryFiltersEnabled) return categoryIds;
-    return resolveCategoryIdsFromPath(categoryPath, void 0);
-  }, [categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
-  const sortQueryParams = (0, import_react20.useMemo)(() => {
+    return resolveCategoryIdsFromPath(categoryPath, baseCategoryId ? [baseCategoryId] : void 0);
+  }, [baseCategoryId, categoryIds, categoryPath, isDiscoveryFiltersEnabled]);
+  const sortQueryParams = (0, import_react22.useMemo)(() => {
     return resolveSortQueryParams(selectedSort);
   }, [selectedSort]);
-  const activeTab = (0, import_react20.useMemo)(() => {
+  const activeTab = (0, import_react22.useMemo)(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = (0, import_react20.useMemo)(() => {
+  const venues = (0, import_react22.useMemo)(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = (0, import_react20.useMemo)(() => {
+  const matchStatus = (0, import_react22.useMemo)(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = (0, import_react20.useMemo)(() => {
+  const resolvedMaxVisibleItems = (0, import_react22.useMemo)(() => {
     if (!Number.isFinite(maxVisibleItems)) return void 0;
     return Math.max(1, Math.floor(maxVisibleItems));
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const endDateFrom = (0, import_react20.useMemo)(() => {
+  const endDateFrom = (0, import_react22.useMemo)(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -13185,21 +13222,21 @@ var EventList = ({
     endDateFrom,
     initialPages: initialLoadedPageCount
   });
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = (0, import_react20.useMemo)(() => {
+  const filteredEvents = (0, import_react22.useMemo)(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = (0, import_react20.useMemo)(() => {
+  const groupedEvents = (0, import_react22.useMemo)(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = (0, import_react20.useMemo)(() => {
+  const orderedEvents = (0, import_react22.useMemo)(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = (0, import_react20.useMemo)(() => {
+  const tileEvents = (0, import_react22.useMemo)(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
@@ -13207,8 +13244,8 @@ var EventList = ({
   const shouldRenderLoadingState = isLoading && !isPlaceholderData && tileEvents.length === 0;
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
-  const loadMoreRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const loadMoreRef = (0, import_react22.useRef)(null);
+  (0, import_react22.useEffect)(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;
@@ -13233,11 +13270,10 @@ 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 isDrilledIn = categoryPath.length > 0;
   const handleSelectAllCategories = () => {
     setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
-    onCategoryRootChange == null ? void 0 : onCategoryRootChange(void 0);
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
     setIsSubcategoriesModalOpen(false);
   };
   const handleToggleSubcategory = ({
@@ -13247,7 +13283,6 @@ var EventList = ({
     isExpanded,
     isSelected
   }) => {
-    var _a2;
     setCategoryPath((prev) => [...prev.slice(0, depth), entry]);
     setCollapsedCategoryIds((prev) => {
       const next = new Set(prev);
@@ -13258,122 +13293,41 @@ var EventList = ({
       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__ */ (0, import_jsx_runtime130.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-current": isSelected ? "true" : void 0,
-        className: isSelected ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
-        onClick,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "min-w-0 truncate first-letter:uppercase", children: entry.label }),
-          hasKnownChildren ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
-            Icon,
-            {
-              name: isExpanded ? "chevron-up" : "chevron-down",
-              size: "small",
-              color: "currentColor",
-              className: "shrink-0 text-agg-muted-foreground"
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "shrink-0 text-agg-muted-foreground", children: entry.eventCount })
-        ]
-      },
-      entry.id
-    );
-  };
-  const renderSubcategoryBranch = (category, depth) => {
-    var _a2, _b2, _c2, _d, _e;
-    const label2 = (_a2 = category.displayName) != null ? _a2 : category.name;
-    const entry = {
-      id: category.id,
-      label: label2,
-      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__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex w-full flex-col gap-1", children: [
-      renderSubcategoryTreeRow({
-        entry,
-        isExpanded,
-        isSelected,
-        onClick: () => handleToggleSubcategory({
-          entry,
-          depth,
-          hasKnownChildren,
-          isExpanded,
-          isSelected
-        })
-      }),
-      isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex w-full flex-col gap-1 pl-4", children: childCategories.map(
-        (childCategory) => renderSubcategoryBranch(childCategory, depth + 1)
-      ) }) : null
-    ] }, category.id);
+    onCategoryRootChange == null ? void 0 : onCategoryRootChange(baseCategoryId != null ? baseCategoryId : void 0);
   };
-  const subcategoriesListContent = /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(import_jsx_runtime130.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
-      "button",
-      {
-        type: "button",
-        "aria-current": !isDrilledIn ? "true" : void 0,
-        className: !isDrilledIn ? subcategoryMenuSelectedRowClassName : subcategoryMenuIdleRowClassName,
-        onClick: handleSelectAllCategories,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "min-w-0 truncate", children: labels.eventList.subcategoriesAll }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-agg-muted-foreground", children: totalTopLevelEventCount })
-        ]
-      }
-    ),
-    sortedTopLevelCategories.map((category) => renderSubcategoryBranch(category, 0))
-  ] });
   if (shouldRenderLoadingState) {
-    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       Skeleton,
       {
         view: "event-list",
         ariaLabel: labels.eventList.loading(title2),
-        withSidebar: isDiscoveryFiltersEnabled
+        withSidebar: shouldRenderSubcategoryFilters
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("section", { className: "agg-event-list flex w-full flex-col gap-2 md:gap-5 t", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "header",
       {
-        ref: headerRef,
         className: cn(
           "agg-event-list-header",
           "flex flex-col w-full items-start justify-between",
           "gap-2 sm:flex-row sm:items-center sm:gap-4"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { ref: titleRef, className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "agg-event-list-title min-w-32", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Typography, { as: "h2", variant: "title", className: "truncate first-letter:uppercase", children: title2 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "hidden min-w-0 max-w-full items-center gap-3 md:flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
               EventListTabs,
               {
                 ariaLabel: labels.eventList.tabsAria(title2),
-                className: cn(
-                  "agg-event-list-tabs w-fit max-w-full flex-1",
-                  shouldUseSelectOverflow ? "min-w-[220px]" : "min-w-[400px]"
-                ),
+                className: "agg-event-list-tabs min-w-0 flex-1 max-w-[600px]!",
                 activeTab: activeTabValue,
                 onTabChange: setActiveTabValue,
-                overflowBehavior: shouldUseSelectOverflow ? "select" : "scroll"
+                overflowBehavior: "scroll"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
               Select,
               {
                 ariaLabel: labels.eventList.sortByLabel,
@@ -13389,8 +13343,8 @@ var EventList = ({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex w-full gap-2 md:hidden mb-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
         EventListTabs,
         {
           ariaLabel: labels.eventList.tabsAria(title2),
@@ -13400,7 +13354,7 @@ var EventList = ({
           overflowBehavior: "select"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
         Select,
         {
           ariaLabel: labels.eventList.sortByLabel,
@@ -13411,24 +13365,36 @@ var EventList = ({
           contentClassName: "rounded-[12px] py-2 shadow-[0_8px_16px_rgba(0,0,0,0.1)]"
         }
       ),
-      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+      shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
         "button",
         {
           type: "button",
           className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-[8px] border-2 border-agg-primary bg-agg-secondary text-agg-foreground cursor-pointer",
           "aria-label": labels.eventList.subcategoriesOpenAria,
           onClick: () => setIsSubcategoriesModalOpen(true),
-          children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "apps", size: "small", color: "currentColor" })
         }
       ) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
       "div",
       {
         className: cn("flex w-full gap-6", shouldRenderSubcategoryFilters ? "md:items-start" : ""),
         children: [
-          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex w-full flex-col gap-1 rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: subcategoriesListContent }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+          shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("aside", { className: "hidden w-[200px] shrink-0 md:block self-start sticky top-4", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "agg-sidebar max-h-[calc(100vh-19rem)] overflow-y-auto rounded-[8px] border border-agg-separator bg-agg-secondary p-2", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            CategorySidebar,
+            {
+              baseCategoryId,
+              childrenByParentId,
+              categoryPath,
+              collapsedCategoryIds,
+              totalEventCount: baseCategoryEventCount,
+              labels: { subcategoriesAll: labels.eventList.subcategoriesAll },
+              onSelectAll: handleSelectAllCategories,
+              onToggleCategory: handleToggleSubcategory
+            }
+          ) }) }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
             "div",
             {
               className: cn(
@@ -13439,7 +13405,7 @@ var EventList = ({
                 gridClassName
               ),
               children: [
-                tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                tileEvents.map((event) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   EventListItem,
                   {
                     event,
@@ -13454,7 +13420,7 @@ var EventList = ({
                   },
                   event.id
                 )),
-                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                shouldRenderPaginationLoadingItems ? Array.from({ length: 6 }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   EventListItem,
                   {
                     isLoading: true,
@@ -13464,20 +13430,20 @@ var EventList = ({
                   },
                   `loading-${index}`
                 )) : null,
-                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                shouldRenderEmptyState ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.emptyTitle,
                     description: labels.eventList.emptyDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "search-empty" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "search-empty" })
                   }
                 ) }) : null,
-                isError ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                isError ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "col-span-full w-full", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
                   StateMessage,
                   {
                     title: labels.eventList.errorTitle,
                     description: labels.eventList.errorDescription,
-                    icon: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Icon, { name: "warning" })
+                    icon: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Icon, { name: "warning" })
                   }
                 ) }) : null
               ]
@@ -13486,20 +13452,45 @@ var EventList = ({
         ]
       }
     ),
-    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    shouldRenderSubcategoryFilters ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Modal, { open: isSubcategoriesModalOpen, onOpenChange: setIsSubcategoriesModalOpen, children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       Modal.Container,
       {
         classNames: {
-          content: "items-end p-0",
+          // pointer-events-none lets clicks on the empty area above the panel pass through
+          // to Dialog.Overlay, which triggers Radix's outside-click dismiss.
+          content: "items-end p-0 pointer-events-none",
           container: "w-full max-w-none border-0 bg-transparent shadow-none"
         },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(Dialog2.Title, { className: "sr-only", children: labels.eventList.subcategoriesLabel }),
-          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary p-4", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex flex-col gap-1", children: subcategoriesListContent }) })
-        ]
+        children: /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "pointer-events-auto w-full rounded-t-[12px] border border-agg-separator bg-agg-secondary", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex justify-center pb-1 pt-3", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "h-1 w-10 rounded-full bg-agg-muted-foreground/30" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2 pt-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(Dialog2.Title, { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.eventList.subcategoriesLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+              Dialog2.Close,
+              {
+                className: "flex cursor-pointer items-center justify-center rounded-full p-1 text-agg-muted-foreground hover:bg-agg-secondary-hover",
+                "aria-label": labels.common.close,
+                children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(CloseIcon, { className: "h-5 w-5" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex flex-col gap-1 px-4 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+            CategorySidebar,
+            {
+              baseCategoryId,
+              childrenByParentId,
+              categoryPath,
+              collapsedCategoryIds,
+              totalEventCount: baseCategoryEventCount,
+              labels: { subcategoriesAll: labels.eventList.subcategoriesAll },
+              onSelectAll: handleSelectAllCategories,
+              onToggleCategory: handleToggleSubcategory
+            }
+          ) })
+        ] })
       }
     ) }) : null,
-    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
+    shouldPaginate && hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { ref: loadMoreRef, className: "agg-event-list-sentinel h-px w-full", "aria-hidden": true }) : null
   ] });
 };
 EventList.displayName = "EventList";