@agg-build/ui 2.4.3 → 2.4.6

package/dist/{chunk-PHRYWSNV.mjs → chunk-I4X5UNCT.mjs}

@@ -5,8 +5,6 @@ import {
   formatProbabilityCents,
   formatProbabilityPercent,
   getDisplayOutcomePrice,
-  getFirstSettlementParagraph,
-  getSettlementDifferenceId,
   prepareSettlementDifferences,
   resolveDifferenceIconClassName,
   resolveHeaderOutcomeItems,
@@ -26,7 +24,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-STL4ZHLP.mjs";
+} from "./chunk-UH3DUTMG.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -78,7 +76,7 @@ import {
   sortCategoriesForNavigation,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-WZ55ERDO.mjs";
+} from "./chunk-PTNFXXOV.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -91,7 +89,7 @@ import {
   useVenueMarketMidpoints,
   useVenueMarkets
 } from "@agg-build/hooks";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 // src/shared/query-error.ts
 var getErrorStatus = (error) => {
@@ -310,8 +308,85 @@ var EventListItemNotFoundState = ({
   );
 };
 var OUTCOMES_SCROLL_LOAD_THRESHOLD_PX = 16;
+var OUTCOMES_SCROLL_STATE_EPSILON_PX = 1;
+var OUTCOMES_SCROLL_MASK_HEIGHT_PX = 24;
 var MARKET_ID_QUERY_PARAM = "marketId";
 var OUTCOME_ID_QUERY_PARAM = "outcomeId";
+var OUTCOME_ROW_SELECTOR = ".agg-outcome-row";
+var DEFAULT_OUTCOMES_SCROLL_STATE = {
+  hasOverflow: false,
+  isAtTop: true,
+  isAtBottom: true,
+  remainingMarkets: 0
+};
+var areOutcomesScrollStatesEqual = (left, right) => {
+  return left.hasOverflow === right.hasOverflow && left.isAtTop === right.isAtTop && left.isAtBottom === right.isAtBottom && left.remainingMarkets === right.remainingMarkets;
+};
+var useOutcomesScrollState = ({
+  totalMarketCount,
+  onReachScrollThreshold
+}) => {
+  const containerRef = useRef(null);
+  const frameRef = useRef(null);
+  const scrollStateRef = useRef(DEFAULT_OUTCOMES_SCROLL_STATE);
+  const [scrollState, setScrollState] = useState(
+    DEFAULT_OUTCOMES_SCROLL_STATE
+  );
+  const measureScrollState = useCallback(() => {
+    frameRef.current = null;
+    const element = containerRef.current;
+    if (!element) return;
+    const { clientHeight, scrollHeight, scrollTop } = element;
+    const hasOverflow = scrollHeight > clientHeight + OUTCOMES_SCROLL_STATE_EPSILON_PX;
+    const isAtTop = scrollTop <= OUTCOMES_SCROLL_STATE_EPSILON_PX;
+    const isAtBottom = !hasOverflow || scrollTop + clientHeight >= scrollHeight - OUTCOMES_SCROLL_STATE_EPSILON_PX;
+    const loadedRows = Array.from(element.querySelectorAll(OUTCOME_ROW_SELECTOR));
+    const visibleMarketCount = loadedRows.reduce((count, row) => {
+      return count + (row.offsetTop < clientHeight - OUTCOMES_SCROLL_STATE_EPSILON_PX ? 1 : 0);
+    }, 0);
+    const remainingMarkets = hasOverflow ? Math.max(0, totalMarketCount - visibleMarketCount) : 0;
+    const nextScrollState = {
+      hasOverflow,
+      isAtTop,
+      isAtBottom,
+      remainingMarkets
+    };
+    if (!areOutcomesScrollStatesEqual(scrollStateRef.current, nextScrollState)) {
+      scrollStateRef.current = nextScrollState;
+      setScrollState(nextScrollState);
+    }
+    const distanceToBottom = scrollHeight - scrollTop - clientHeight;
+    if (distanceToBottom <= OUTCOMES_SCROLL_LOAD_THRESHOLD_PX) {
+      onReachScrollThreshold == null ? void 0 : onReachScrollThreshold();
+    }
+  }, [onReachScrollThreshold, totalMarketCount]);
+  const updateScrollState = useCallback(() => {
+    if (frameRef.current != null) return;
+    frameRef.current = window.requestAnimationFrame(measureScrollState);
+  }, [measureScrollState]);
+  useEffect(() => {
+    const element = containerRef.current;
+    if (!element) return;
+    element.addEventListener("scroll", updateScrollState, { passive: true });
+    let resizeObserver = null;
+    if (typeof ResizeObserver !== "undefined") {
+      resizeObserver = new ResizeObserver(() => {
+        updateScrollState();
+      });
+      resizeObserver.observe(element);
+    }
+    updateScrollState();
+    return () => {
+      element.removeEventListener("scroll", updateScrollState);
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      if (frameRef.current != null) {
+        window.cancelAnimationFrame(frameRef.current);
+        frameRef.current = null;
+      }
+    };
+  }, [updateScrollState]);
+  return { containerRef, scrollState, updateScrollState };
+};
 var buildOutcomeMidpointsByOutcomeId = (midpointRows) => {
   const outcomeMidpointsByOutcomeId = /* @__PURE__ */ new Map();
   const addOutcomeMidpoints = (value) => {
@@ -478,6 +553,31 @@ var EventListItemContent = ({
   const matchedCountLabel = labels.eventItem.matchedCount(
     Math.max(resolvedVenueCount, visibleFooterVenues.length)
   );
+  const handleOutcomesScrollThreshold = useCallback(() => {
+    if (!shouldEnableLazyMarketLoading) return;
+    if (!isLazyMarketsQueryEnabled) {
+      setIsLazyMarketsQueryEnabled(true);
+      return;
+    }
+    if (!hasNextLazyMarketsPage) return;
+    if (isLoadingLazyMarkets || isFetchingNextLazyMarketsPage) return;
+    void fetchNextLazyMarketsPage();
+  }, [
+    fetchNextLazyMarketsPage,
+    hasNextLazyMarketsPage,
+    isFetchingNextLazyMarketsPage,
+    isLazyMarketsQueryEnabled,
+    isLoadingLazyMarkets,
+    shouldEnableLazyMarketLoading
+  ]);
+  const {
+    containerRef: outcomesContainerRef,
+    scrollState: outcomesScrollState,
+    updateScrollState
+  } = useOutcomesScrollState({
+    totalMarketCount: resolvedMarketCount,
+    onReachScrollThreshold: handleOutcomesScrollThreshold
+  });
   const shouldUseNativeLinkNavigation = (eventToHandle) => {
     return eventToHandle.metaKey || eventToHandle.ctrlKey || eventToHandle.shiftKey || eventToHandle.altKey || eventToHandle.button === 1;
   };
@@ -529,29 +629,9 @@ var EventListItemContent = ({
       onEventClick == null ? void 0 : onEventClick(event);
     }
   };
-  const handleOutcomesScroll = useCallback(
-    (eventToHandle) => {
-      if (!shouldEnableLazyMarketLoading) return;
-      const element = eventToHandle.currentTarget;
-      const distanceToBottom = element.scrollHeight - element.scrollTop - element.clientHeight;
-      if (distanceToBottom > OUTCOMES_SCROLL_LOAD_THRESHOLD_PX) return;
-      if (!isLazyMarketsQueryEnabled) {
-        setIsLazyMarketsQueryEnabled(true);
-        return;
-      }
-      if (!hasNextLazyMarketsPage) return;
-      if (isLoadingLazyMarkets || isFetchingNextLazyMarketsPage) return;
-      void fetchNextLazyMarketsPage();
-    },
-    [
-      fetchNextLazyMarketsPage,
-      hasNextLazyMarketsPage,
-      isFetchingNextLazyMarketsPage,
-      isLazyMarketsQueryEnabled,
-      isLoadingLazyMarkets,
-      shouldEnableLazyMarketLoading
-    ]
-  );
+  useEffect(() => {
+    updateScrollState();
+  }, [comparison.rows.length, shouldRenderLoadingOutcomeRow, updateScrollState]);
   const renderArbitrage = (value) => {
     if (value == null) return null;
     if (Math.abs(value) < config.market.arbitrageThreshold) return null;
@@ -736,69 +816,94 @@ var EventListItemContent = ({
             ) }) : null
           ] }) })
         ] }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "agg-outcomes flex max-h-[76px] flex-col gap-4 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
-              classNames == null ? void 0 : classNames.outcomes
-            ),
-            onScroll: handleOutcomesScroll,
-            children: [
-              comparison.rows.map((row) => {
-                var _a2;
-                const arbitragePercent = (_a2 = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[row.outcome.id]) != null ? _a2 : arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[row.market.id];
-                const arbReturn = arbReturnByVenueMarketId.get(row.market.id);
-                const priceGapPercent = arbReturn == null ? gapsByVenueMarketId.get(row.market.id) : arbReturn;
-                const priceGapSource = arbReturn == null ? "percent" : "fraction";
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "agg-outcome-row",
-                      "flex h-10 w-full flex-row items-center justify-between gap-3",
-                      classNames == null ? void 0 : classNames.outcomeRow
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-1 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "body",
-                          className: "agg-outcome-label min-w-0 truncate text-agg-xs leading-agg-5 md:text-agg-base md:leading-agg-6",
-                          children: row.label
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex shrink-0 flex-row items-center justify-end gap-2", children: [
-                        renderArbitrage(arbitragePercent),
-                        renderPriceGapPill(priceGapPercent, priceGapSource),
-                        /* @__PURE__ */ jsx("div", { className: "agg-outcome-price-strip relative flex shrink-0 items-center justify-end", children: isAwaitingMidpoints ? renderPriceStripSkeleton(row.prices.length) : row.prices.map(
-                          (price, priceIndex) => renderComparisonPriceBadge(row, price, priceIndex)
-                        ) })
-                      ] })
-                    ]
-                  },
-                  row.id
-                );
-              }),
-              shouldRenderLoadingOutcomeRow ? /* @__PURE__ */ jsxs("div", { className: "agg-outcome-row-loading flex w-full items-center justify-between gap-3", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "aria-hidden": "true",
-                    className: "bg-agg-separator animate-pulse h-5 rounded-agg-sm w-[200px]"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    "aria-hidden": "true",
-                    className: "bg-agg-separator animate-pulse h-9 w-[100px] rounded-agg-full"
-                  }
-                )
-              ] }) : null
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: outcomesContainerRef,
+              className: cn(
+                "agg-outcomes flex max-h-[76px] flex-col gap-4 overflow-y-auto rounded-agg-md [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-2 focus-visible:ring-offset-agg-secondary",
+                classNames == null ? void 0 : classNames.outcomes
+              ),
+              "aria-label": labels.marketDetails.marketOutcomesAria,
+              tabIndex: 0,
+              children: [
+                comparison.rows.map((row) => {
+                  var _a2;
+                  const arbitragePercent = (_a2 = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[row.outcome.id]) != null ? _a2 : arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[row.market.id];
+                  const arbReturn = arbReturnByVenueMarketId.get(row.market.id);
+                  const priceGapPercent = arbReturn == null ? gapsByVenueMarketId.get(row.market.id) : arbReturn;
+                  const priceGapSource = arbReturn == null ? "percent" : "fraction";
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "agg-outcome-row",
+                        "flex h-10 w-full flex-row items-center justify-between gap-3",
+                        classNames == null ? void 0 : classNames.outcomeRow
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-1 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            variant: "body",
+                            className: "agg-outcome-label min-w-0 truncate text-agg-xs leading-agg-5 md:text-agg-base md:leading-agg-6",
+                            children: row.label
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex shrink-0 flex-row items-center justify-end gap-2", children: [
+                          renderArbitrage(arbitragePercent),
+                          renderPriceGapPill(priceGapPercent, priceGapSource),
+                          /* @__PURE__ */ jsx("div", { className: "agg-outcome-price-strip relative flex shrink-0 items-center justify-end", children: isAwaitingMidpoints ? renderPriceStripSkeleton(row.prices.length) : row.prices.map(
+                            (price, priceIndex) => renderComparisonPriceBadge(row, price, priceIndex)
+                          ) })
+                        ] })
+                      ]
+                    },
+                    row.id
+                  );
+                }),
+                shouldRenderLoadingOutcomeRow ? /* @__PURE__ */ jsxs("div", { className: "agg-outcome-row-loading flex w-full items-center justify-between gap-3", children: [
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-agg-separator animate-pulse h-5 rounded-agg-sm w-[200px]"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-agg-separator animate-pulse h-9 w-[100px] rounded-agg-full"
+                    }
+                  )
+                ] }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "agg-outcomes-scroll-gradient-top pointer-events-none absolute inset-x-0 top-0 z-10 bg-gradient-to-b from-agg-secondary to-transparent transition-opacity duration-150",
+                outcomesScrollState.hasOverflow && !outcomesScrollState.isAtTop ? "opacity-100" : "opacity-0"
+              ),
+              style: { height: OUTCOMES_SCROLL_MASK_HEIGHT_PX }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "agg-outcomes-scroll-gradient-bottom pointer-events-none absolute inset-x-0 bottom-0 z-10 bg-gradient-to-t from-agg-secondary to-transparent transition-opacity duration-150",
+                outcomesScrollState.hasOverflow && !outcomesScrollState.isAtBottom ? "opacity-100" : "opacity-0"
+              ),
+              style: { height: OUTCOMES_SCROLL_MASK_HEIGHT_PX }
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -816,6 +921,14 @@ var EventListItemContent = ({
                     "agg-event-meta flex min-w-0 flex-1 items-center gap-2 text-agg-sm leading-agg-5 truncate"
                   ),
                   children: [
+                    outcomesScrollState.remainingMarkets > 0 ? /* @__PURE__ */ jsx(
+                      Typography,
+                      {
+                        variant: "body",
+                        className: "agg-event-remaining-markets shrink-0 text-agg-sm leading-agg-5 text-agg-muted-foreground",
+                        children: labels.eventItem.remainingMarkets(outcomesScrollState.remainingMarkets)
+                      }
+                    ) : null,
                     shouldShowMatchedVenueSummary ? /* @__PURE__ */ jsx("span", { className: "agg-event-matched-badge rounded-agg-full bg-agg-primary/10 px-2 py-[3px] text-agg-2xs font-agg-bold uppercase leading-agg-14 text-agg-primary", children: matchedCountLabel }) : null,
                     singleFooterVenue ? /* @__PURE__ */ jsxs("span", { className: "agg-event-single-venue flex min-w-0 items-center gap-1 overflow-hidden", children: [
                       /* @__PURE__ */ jsx(
@@ -1275,18 +1388,16 @@ import { useLabels as useLabels2 } from "@agg-build/hooks";
 import { useMemo as useMemo2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SettlementSummary = ({
-  content,
   settlementDiff,
   settlementSectionId = SETTLEMENT_SECTION_ID,
   className
 }) => {
   const labels = useLabels2();
-  const firstParagraph = useMemo2(() => getFirstSettlementParagraph(content), [content]);
   const settlementDifferences = useMemo2(
     () => prepareSettlementDifferences(settlementDiff == null ? void 0 : settlementDiff.differences),
     [settlementDiff == null ? void 0 : settlementDiff.differences]
   );
-  if (!firstParagraph && settlementDifferences.length === 0) return null;
+  if (settlementDifferences.length === 0) return null;
   const handleReadFullDetails = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -1295,20 +1406,6 @@ var SettlementSummary = ({
     if (!target) return;
     target.scrollIntoView({ behavior: "smooth", block: "start" });
   };
-  const handleDifferencePillClick = (event, canonicalKey) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (typeof document === "undefined") return;
-    const target = document.getElementById(
-      getSettlementDifferenceId(settlementSectionId, canonicalKey)
-    );
-    if (!target) return;
-    const trigger = target.querySelector("button[aria-expanded]");
-    if ((trigger == null ? void 0 : trigger.getAttribute("aria-expanded")) === "false") {
-      trigger.click();
-    }
-    target.scrollIntoView({ behavior: "smooth", block: "start" });
-  };
   const actionButton = /* @__PURE__ */ jsxs2(
     "button",
     {
@@ -1323,85 +1420,59 @@ var SettlementSummary = ({
       onClick: handleReadFullDetails,
       children: [
         /* @__PURE__ */ jsx2("span", { children: labels.settlementSummary.readFullDetails }),
-        /* @__PURE__ */ jsx2(Icon, { name: "chevron-down", className: "size-[14px]", "aria-hidden": "true" })
+        /* @__PURE__ */ jsx2(
+          "i",
+          {
+            className: "fi fi-rr-arrow-small-down size-3.5!",
+            "aria-hidden": "true",
+            style: { fontSize: 14 }
+          }
+        )
       ]
     }
   );
-  if (settlementDifferences.length > 0) {
-    const visibleDifferences = settlementDifferences.slice(0, 2);
-    const hiddenDifferenceCount = settlementDifferences.length - visibleDifferences.length;
-    return /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        className: cn(
-          "agg-settlement-summary flex w-full flex-wrap items-start justify-between gap-x-4 gap-y-2",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsxs2("div", { className: "flex min-w-[240px] flex-1 flex-wrap items-center gap-x-5 gap-y-3", children: [
-            /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: [
-              /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }),
-              /* @__PURE__ */ jsx2("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-agg-full bg-agg-primary text-[10px] font-agg-bold leading-[14px] text-agg-on-primary", children: settlementDifferences.length })
-            ] }),
-            /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-pills flex min-w-[240px] flex-1 flex-wrap items-center gap-2", children: [
-              visibleDifferences.map((difference) => /* @__PURE__ */ jsxs2(
-                "button",
-                {
-                  type: "button",
-                  className: cn(
-                    "flex h-6 max-w-full shrink-0 cursor-pointer items-center gap-2 rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground sm:max-w-[220px]",
-                    "hover:opacity-80",
-                    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-agg-primary focus-visible:ring-offset-0 focus-visible:ring-offset-agg-secondary"
-                  ),
-                  onClick: (event) => handleDifferencePillClick(event, difference.canonicalKey),
-                  children: [
-                    /* @__PURE__ */ jsx2(
-                      "i",
-                      {
-                        className: cn(
-                          "fi",
-                          resolveDifferenceIconClassName(difference.canonicalKey),
-                          "inline-flex size-3 shrink-0 items-center justify-center text-[12px] leading-none text-agg-muted-foreground"
-                        ),
-                        "aria-hidden": "true"
-                      }
-                    ),
-                    /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: difference.title })
-                  ]
-                },
-                difference.canonicalKey
-              )),
-              hiddenDifferenceCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "flex h-6 shrink-0 items-center rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground", children: [
-                "+",
-                hiddenDifferenceCount
-              ] }) : null
-            ] })
-          ] }),
-          actionButton
-        ]
-      }
-    );
-  }
+  const visibleDifferences = settlementDifferences.slice(0, 2);
+  const hiddenDifferenceCount = settlementDifferences.length - visibleDifferences.length;
   return /* @__PURE__ */ jsxs2(
     "div",
     {
       className: cn(
-        "agg-settlement-summary flex w-full items-center justify-between gap-4",
+        "agg-settlement-summary flex w-full flex-wrap items-start justify-between gap-x-4 gap-y-2",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-row flex min-w-0 flex-1 items-center gap-5", children: [
-          /* @__PURE__ */ jsx2("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }) }),
-          /* @__PURE__ */ jsx2(
-            "p",
-            {
-              className: cn(
-                "agg-settlement-summary-text",
-                "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
-              ),
-              children: firstParagraph
-            }
-          )
+        /* @__PURE__ */ jsxs2("div", { className: "flex min-w-[240px] flex-1 flex-wrap items-center gap-x-5 gap-y-3", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx2("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }),
+            /* @__PURE__ */ jsx2("span", { className: "flex size-4 shrink-0 items-center justify-center rounded-agg-full bg-agg-primary text-[10px] font-agg-bold leading-[14px] text-agg-on-primary", children: settlementDifferences.length })
+          ] }),
+          /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-pills flex min-w-[240px] flex-1 flex-wrap items-center gap-2", children: [
+            visibleDifferences.map((difference) => /* @__PURE__ */ jsxs2(
+              "span",
+              {
+                className: "flex h-6 max-w-full shrink-0 items-center gap-2 rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground sm:max-w-[220px]",
+                children: [
+                  /* @__PURE__ */ jsx2(
+                    "i",
+                    {
+                      className: cn(
+                        "fi",
+                        resolveDifferenceIconClassName(difference.canonicalKey),
+                        "inline-flex size-3 shrink-0 items-center justify-center text-[12px] leading-none text-agg-muted-foreground"
+                      ),
+                      "aria-hidden": "true"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx2("span", { className: "min-w-0 truncate", children: difference.title })
+                ]
+              },
+              difference.canonicalKey
+            )),
+            hiddenDifferenceCount > 0 ? /* @__PURE__ */ jsxs2("span", { className: "flex h-6 shrink-0 items-center rounded-agg-full bg-agg-secondary-hover px-3 py-1 text-agg-xs font-agg-normal leading-agg-4 text-agg-foreground", children: [
+              "+",
+              hiddenDifferenceCount
+            ] }) : null
+          ] })
         ] }),
         actionButton
       ]
@@ -1426,7 +1497,7 @@ import {
   useSdkUiConfig as useSdkUiConfig2,
   useVenueEvent as useVenueEvent2
 } from "@agg-build/hooks";
-import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect as useEffect3, useMemo as useMemo5, useRef as useRef3, useState as useState3 } from "react";
 
 // src/primitives/chart/chart-type-switch.tsx
 import { useLabels as useLabels3 } from "@agg-build/hooks";
@@ -1602,7 +1673,7 @@ var filterChartVenueOutcomesByRenderableVenues = ({
 
 // src/events/item-details/event-list-item-details-market-selector.tsx
 import { useLabels as useLabels4 } from "@agg-build/hooks";
-import { useEffect, useLayoutEffect, useMemo as useMemo4, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useLayoutEffect, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MARKET_PILL_MAX_ROWS = 2;
 var MARKET_PILL_FALLBACK_CONTAINER_WIDTH = 640;
@@ -1699,12 +1770,12 @@ var EventListItemDetailsMarketSelector = ({
 }) => {
   var _a;
   const labels = useLabels4();
-  const containerRef = useRef(null);
-  const measurementContainerRef = useRef(null);
-  const moreButtonRef = useRef(null);
-  const dropdownInputRef = useRef(null);
-  const moreButtonMeasureRef = useRef(null);
-  const optionMeasureRefs = useRef({});
+  const containerRef = useRef2(null);
+  const measurementContainerRef = useRef2(null);
+  const moreButtonRef = useRef2(null);
+  const dropdownInputRef = useRef2(null);
+  const moreButtonMeasureRef = useRef2(null);
+  const optionMeasureRefs = useRef2({});
   const [layout, setLayout] = useState2(() => ({
     visibleItems: options,
     hiddenItems: []
@@ -1728,8 +1799,8 @@ var EventListItemDetailsMarketSelector = ({
     if (!normalizedSearchValue) return options;
     return options.filter((option) => option.label.toLowerCase().includes(normalizedSearchValue));
   }, [options, searchValue]);
-  const lastMeasuredKeyRef = useRef(null);
-  const measureFrameRef = useRef(null);
+  const lastMeasuredKeyRef = useRef2(null);
+  const measureFrameRef = useRef2(null);
   useLayoutEffect(() => {
     const measureLayout = () => {
       var _a2, _b, _c, _d, _e;
@@ -1811,7 +1882,7 @@ var EventListItemDetailsMarketSelector = ({
       }
     };
   }, [moreButtonLabel, options]);
-  useEffect(() => {
+  useEffect2(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -1829,7 +1900,7 @@ var EventListItemDetailsMarketSelector = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isDropdownOpen) {
       setSearchValue("");
       return;
@@ -1878,7 +1949,7 @@ var EventListItemDetailsMarketSelector = ({
       resizeObserver.disconnect();
     };
   }, [isDropdownOpen, isMobileViewport, moreButtonLabel]);
-  useEffect(() => {
+  useEffect2(() => {
     if (!isDropdownOpen) return;
     const handlePointerDown = (event) => {
       var _a2;
@@ -2238,7 +2309,7 @@ var EventListItemDetailsGraphSection = ({
   const [chartOutcomeLabel, setChartOutcomeLabel] = useState3(
     (_c = (_b = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a.label) == null ? void 0 : _b.trim()) != null ? _c : null
   );
-  useEffect2(() => {
+  useEffect3(() => {
     var _a2, _b2, _c2;
     if (chartOutcomeLabel != null) return;
     const label = (_c2 = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _a2.label) == null ? void 0 : _b2.trim()) != null ? _c2 : null;
@@ -2297,11 +2368,11 @@ var EventListItemDetailsGraphSection = ({
     // of refetching every time the bucket boundary advances.
     rangeKey: rollingWindow.range
   });
-  const hasAutoFallenBackRangeRef = useRef2(false);
-  useEffect2(() => {
+  const hasAutoFallenBackRangeRef = useRef3(false);
+  useEffect3(() => {
     hasAutoFallenBackRangeRef.current = false;
   }, [chartPrimaryOutcomeId]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!shouldAutoFallbackToAllRange({
       chartData: scopedMarketChartData,
       isLoading: isScopedMarketChartLoading,
@@ -2388,7 +2459,7 @@ var EventListItemDetailsGraphSection = ({
       transformProbability: (v) => v
     });
   }, [activeGraphVenue, scopedMarketChartData]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!selectedGraphVenue) return;
     const hasSelectedGraphVenue = chartAvailableVenueOutcomes.some(
       (item) => item.venue === selectedGraphVenue
@@ -2551,8 +2622,8 @@ var EventListItemDetailsContent = ({
 }) => {
   var _a, _b, _c, _d;
   const [selectedChartType, setSelectedChartType] = useState3("line");
-  const lastAppliedEventSyncKeyRef = useRef2(null);
-  const lastAppliedDefaultRef = useRef2(null);
+  const lastAppliedEventSyncKeyRef = useRef3(null);
+  const lastAppliedDefaultRef = useRef3(null);
   const [chartRangeOverride, setChartRangeOverride] = useState3(null);
   const config = useSdkUiConfig2();
   const labels = useLabels5();
@@ -2607,10 +2678,10 @@ var EventListItemDetailsContent = ({
       fallbackRange: defaultTimeRange != null ? defaultTimeRange : config.chart.selectedChartTimeRange
     });
   }, [config.chart.selectedChartTimeRange, defaultTimeRange, event, scopedSelectedMarket]);
-  useEffect2(() => {
+  useEffect3(() => {
     setChartRangeOverride(initialChartTimeRange);
   }, [event.id, initialChartTimeRange, scopedSelectedMarket == null ? void 0 : scopedSelectedMarket.id]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!tradingContext) return;
     if (lastAppliedEventSyncKeyRef.current === eventSyncKey) return;
     if ((tradingContext == null ? void 0 : tradingContext.selectedEventId) !== event.id) {
@@ -2620,7 +2691,7 @@ var EventListItemDetailsContent = ({
     }
     lastAppliedEventSyncKeyRef.current = eventSyncKey;
   }, [event, eventSyncKey, tradingContext]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!tradingContext) return;
     if (!defaultMarketId) return;
     if (tradingContext.selectedEventId !== event.id) return;
@@ -2964,7 +3035,7 @@ var orderbookDefaultLabels = {
 };
 
 // src/events/orderbook/use-center-orderbook-spread.ts
-import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
 var maxAutoCenterAttempts = 12;
 var userScrollKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "]);
 var useCenterOrderbookSpread = ({
@@ -2975,9 +3046,9 @@ var useCenterOrderbookSpread = ({
   rowCount,
   enabled = true
 }) => {
-  const hasUserScrolledRef = useRef3(false);
-  const animationFrameRef = useRef3(null);
-  const retryCountRef = useRef3(0);
+  const hasUserScrolledRef = useRef4(false);
+  const animationFrameRef = useRef4(null);
+  const retryCountRef = useRef4(0);
   const resetKey = marketId != null ? marketId : "";
   const cancelPendingFrame = useCallback2(() => {
     if (animationFrameRef.current === null) return;
@@ -3107,7 +3178,7 @@ var useCenterOrderbookSpread = ({
 
 // src/events/orderbook/index.tsx
 import { sortVenues as sortVenues3, useAggUiConfig } from "@agg-build/hooks";
-import { useEffect as useEffect3, useRef as useRef4 } from "react";
+import { useEffect as useEffect4, useRef as useRef5 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var OrderbookVenueLogos = ({ venues }) => {
   const visible = sortVenues3(venues).slice(0, orderbookMaxVisibleVenues);
@@ -3216,8 +3287,8 @@ var Orderbook = ({
   var _a, _b, _c, _d, _e;
   const { enableWebsocketsLogs } = useAggUiConfig();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
-  const scrollContainerRef = useRef4(null);
-  const spreadRowRef = useRef4(null);
+  const scrollContainerRef = useRef5(null);
+  const spreadRowRef = useRef5(null);
   const autoCenterMarketId = (_a = marketId != null ? marketId : outcomeId) != null ? _a : null;
   const maxVisibleRows = Math.max(1, visibleRows);
   const totalVisibleRows = maxVisibleRows * 2 + 1;
@@ -3234,7 +3305,7 @@ var Orderbook = ({
   const spreadEntry = entries.find(
     (e) => e.kind === "spread"
   );
-  useEffect3(() => {
+  useEffect4(() => {
     var _a2, _b2;
     if (!enableWebsocketsLogs) return;
     console.debug("[AggUI][orderbook] component_rendered", {
@@ -3435,7 +3506,7 @@ import {
   useVenueMarkets as useVenueMarkets2,
   useViewportMidpoints
 } from "@agg-build/hooks";
-import { useEffect as useEffect5, useId, useMemo as useMemo7, useState as useState5 } from "react";
+import { useEffect as useEffect6, useId, useMemo as useMemo7, useState as useState5 } from "react";
 
 // src/events/shared/select-best-outcome.ts
 var normalizeOutcomeLabel2 = (label) => {
@@ -3667,7 +3738,7 @@ import {
   useRollingChartWindow as useRollingChartWindow2,
   useSdkUiConfig as useSdkUiConfig3
 } from "@agg-build/hooks";
-import { useEffect as useEffect4, useMemo as useMemo6, useRef as useRef5, useState as useState4 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo6, useRef as useRef6, useState as useState4 } from "react";
 import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 var MarketDetailsGraphPanel = ({
   venueMarkets,
@@ -3734,12 +3805,12 @@ var MarketDetailsGraphPanel = ({
     // instead of refetching on every bucket-boundary rollover.
     rangeKey: rollingWindow.range
   });
-  const hasAutoFallenBackRangeRef = useRef5(false);
-  useEffect4(() => {
+  const hasAutoFallenBackRangeRef = useRef6(false);
+  useEffect5(() => {
     hasAutoFallenBackRangeRef.current = false;
     setChartRangeOverride(null);
   }, [chartPrimaryOutcomeId]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!shouldAutoFallbackToAllRange({
       chartData: marketChartData,
       isLoading: isMarketChartLoading,
@@ -3805,7 +3876,7 @@ var MarketDetailsGraphPanel = ({
     });
   }, [marketChartData, selectedGraphVenue]);
   const hasChartError = !!marketChartError;
-  useEffect4(() => {
+  useEffect5(() => {
     if (!selectedGraphVenue) {
       return;
     }
@@ -4140,10 +4211,10 @@ var MarketDetailsContent = ({
     () => resolveInitialTab(defaultTab)
   );
   const [isOpened, setIsOpened] = useState5(controlledIsOpened);
-  useEffect5(() => {
+  useEffect6(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  useEffect5(() => {
+  useEffect6(() => {
     setIsOpened(controlledIsOpened);
   }, [controlledIsOpened]);
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
@@ -4169,7 +4240,7 @@ var MarketDetailsContent = ({
   const selectedOutcomeId = scopedSelectedOutcomeState.outcomeId;
   const selectedOutcomeLabel = (_d = scopedSelectedOutcomeState.outcomeLabel) != null ? _d : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
-  useEffect5(() => {
+  useEffect6(() => {
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
@@ -4671,7 +4742,7 @@ var MarketDetailsContent = ({
                           value: selectedTab === "other" ? "order-book" : selectedTab,
                           onChange: (nextValue) => setSelectedTab(nextValue),
                           variant: "underline",
-                          className: "agg-market-tabs w-full px-5"
+                          className: "agg-market-tabs flex! w-full px-5"
                         }
                       ) }),
                       /* @__PURE__ */ jsx10("div", { className: "h-px w-full bg-agg-separator" })
@@ -4907,7 +4978,7 @@ var MarketDetailsList = ({
     );
   }, [displayedMarkets]);
   const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = useViewportMidpoints(midpointEligibleMarkets);
-  useEffect5(() => {
+  useEffect6(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
       return;
@@ -4916,7 +4987,7 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
       return;
@@ -4933,7 +5004,7 @@ var MarketDetailsList = ({
     if (!autoSelectFallbackMarket) return;
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
   }, [autoSelectFallbackMarket, displayedMarkets, selectedMarketId, sourceMarkets, tradingContext]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
     setExpandedMarketId(null);
@@ -5053,7 +5124,7 @@ import {
 } from "@agg-build/hooks";
 import { VENUES } from "@agg-build/sdk";
 import * as Dialog from "@radix-ui/react-dialog";
-import { useEffect as useEffect7, useMemo as useMemo10, useRef as useRef7, useState as useState7 } from "react";
+import { useEffect as useEffect8, useMemo as useMemo10, useRef as useRef8, useState as useState7 } from "react";
 
 // src/events/list/category-sidebar.tsx
 import { useMemo as useMemo8 } from "react";
@@ -5174,7 +5245,8 @@ CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
 import { getVenueAvailabilityState, useAppConfig, useGeoBlock, useLabels as useLabels8 } from "@agg-build/hooks";
-import { useCallback as useCallback3, useEffect as useEffect6, useMemo as useMemo9, useRef as useRef6, useState as useState6 } from "react";
+import { isVenueActive } from "@agg-build/sdk";
+import { useCallback as useCallback3, useEffect as useEffect7, useMemo as useMemo9, useRef as useRef7, useState as useState6 } from "react";
 
 // src/events/list/event-list.constants.ts
 import { MatchStatus, Venue as Venue2 } from "@agg-build/sdk";
@@ -5198,12 +5270,6 @@ var getDefaultEventListTabs = (labels) => {
       venueLogo: Venue2.polymarket,
       venues: [Venue2.polymarket]
     },
-    {
-      value: Venue2.kalshi,
-      label: labels.venues.kalshi,
-      venueLogo: Venue2.kalshi,
-      venues: [Venue2.kalshi]
-    },
     {
       value: Venue2.limitless,
       label: labels.venues.limitless,
@@ -5267,6 +5333,7 @@ var useEventListTabs = (tabs) => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
+      if (!isVenueActive(tab.venueLogo)) return [];
       const availabilityState = getVenueAvailabilityState({
         venueId: tab.venueLogo,
         disabledVenues,
@@ -5292,7 +5359,7 @@ var EventListTabs = ({
   overflowBehavior
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
-  useEffect6(() => {
+  useEffect7(() => {
     const fallbackTab = resolvedTabs.find((tab) => !tab.disabled);
     if (!fallbackTab) return;
     if (resolvedTabs.some((tab) => tab.value === activeTab && !tab.disabled)) return;
@@ -5324,9 +5391,9 @@ var EventListTabs = ({
 };
 EventListTabs.displayName = "EventListTabs";
 var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
-  const headerRef = useRef6(null);
-  const titleRef = useRef6(null);
-  const requiredTabsWidthRef = useRef6(0);
+  const headerRef = useRef7(null);
+  const titleRef = useRef7(null);
+  const requiredTabsWidthRef = useRef7(0);
   const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState6(false);
   const updateTabsOverflowBehavior = useCallback3(() => {
     var _a;
@@ -5365,10 +5432,10 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
     if (requiredTabsWidthRef.current <= 0) return;
     setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
   }, [options == null ? void 0 : options.minTabsInlineWidthForSelect, options == null ? void 0 : options.preferSelectOnOverflow]);
-  useEffect6(() => {
+  useEffect7(() => {
     updateTabsOverflowBehavior();
   }, [recomputeOn, updateTabsOverflowBehavior]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       updateTabsOverflowBehavior();
@@ -5378,7 +5445,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn, options) => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateTabsOverflowBehavior]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (typeof ResizeObserver === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -5499,7 +5566,7 @@ var EventList = ({
     labels.eventList.sortByTotalVolume
   ]);
   const baseCategoryId = (_c = categoryIds == null ? void 0 : categoryIds[0]) != null ? _c : null;
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isDiscoveryFiltersEnabled) return;
     setCategoryPath([]);
     setCollapsedCategoryIds(/* @__PURE__ */ new Set());
@@ -5630,7 +5697,7 @@ var EventList = ({
     grouped: showSportsMarkets,
     initialPages: initialLoadedPageCount
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
@@ -5662,8 +5729,8 @@ var EventList = ({
   const shouldRenderLoadingState = isLoading && !isPlaceholderData && tileEvents.length === 0;
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
-  const loadMoreRef = useRef7(null);
-  useEffect7(() => {
+  const loadMoreRef = useRef8(null);
+  useEffect8(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;