@agg-build/ui 2.4.2 → 2.4.5

package/dist/events.js

@@ -1387,6 +1387,12 @@ var iconSizeClasses = {
   medium: "h-6 w-6",
   large: "h-8 w-8"
 };
+var iconSizePixels = {
+  xs: 12,
+  small: 16,
+  medium: 24,
+  large: 32
+};
 
 // src/primitives/search/search-empty-icon.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
@@ -2988,6 +2994,8 @@ var Icon = (_a) => {
     __spreadValues({
       color,
       className: cn("group/agg-icon", resolvedClassName),
+      width: iconSizePixels[size],
+      height: iconSizePixels[size],
       style: resolvedStyle
     }, props)
   );
@@ -4471,7 +4479,7 @@ EventListSkeletonView.displayName = "EventListSkeletonView";
 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";
+var detailsBaseCardClassName = "w-full gap-6 p-4 md:p-5 md:gap-8";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
 var import_jsx_runtime95 = require("react/jsx-runtime");
@@ -4782,17 +4790,10 @@ var SettlementSkeletonView = ({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full items-center justify-between gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-4 w-[81px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-full max-w-[240px] rounded-agg-sm" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
-          /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex flex-col gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[320px] rounded-agg-sm" }),
-            /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-4 w-full max-w-[280px] rounded-agg-sm" })
-          ] })
+          /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[240px] max-w-[60%] rounded-agg-sm" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)("div", { className: "h-px w-full bg-agg-separator" }),
-        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-col gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[200px] rounded-agg-sm" }),
+        /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex w-full flex-col gap-4", children: [
           /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)("div", { className: "flex items-center gap-2", children: [
             /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "size-4 rounded-agg-sm" }),
             /* @__PURE__ */ (0, import_jsx_runtime99.jsx)(SkeletonBlock, { className: "h-5 w-[100px] rounded-agg-sm" })
@@ -6620,14 +6621,23 @@ var import_react8 = require("react");
 var import_react7 = require("react");
 var useHorizontalScrollState = () => {
   const containerRef = (0, import_react7.useRef)(null);
+  const [hasOverflow, setHasOverflow] = (0, import_react7.useState)(false);
+  const [isAtStart, setIsAtStart] = (0, import_react7.useState)(true);
+  const [isAtEnd, setIsAtEnd] = (0, import_react7.useState)(true);
   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);
+    const epsilon = 2;
+    const nextHasOverflow = el.scrollWidth > el.clientWidth + epsilon;
+    const nextIsAtStart = el.scrollLeft <= epsilon;
+    const nextIsAtEnd = el.scrollLeft + el.clientWidth >= el.scrollWidth - epsilon;
+    setHasOverflow(nextHasOverflow);
+    setIsAtStart(nextIsAtStart);
+    setIsAtEnd(nextIsAtEnd);
+    setCanScrollLeft(nextHasOverflow && !nextIsAtStart);
+    setCanScrollRight(nextHasOverflow && !nextIsAtEnd);
   }, []);
   (0, import_react7.useEffect)(() => {
     const el = containerRef.current;
@@ -6643,7 +6653,15 @@ var useHorizontalScrollState = () => {
     ro.observe(el);
     return () => ro.disconnect();
   }, [update]);
-  return { containerRef, canScrollLeft, canScrollRight, update };
+  return {
+    containerRef,
+    hasOverflow,
+    isAtStart,
+    isAtEnd,
+    canScrollLeft,
+    canScrollRight,
+    update
+  };
 };
 
 // src/primitives/tabs/tabs.constants.ts
@@ -6738,6 +6756,9 @@ var Tabs = ({
   });
   const {
     containerRef: tabListRef,
+    hasOverflow,
+    isAtStart,
+    isAtEnd,
     canScrollLeft,
     canScrollRight,
     update: updateScrollState
@@ -6826,7 +6847,7 @@ var Tabs = ({
       "overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden",
       getMotionClassName(enableAnimations, "scroll-smooth")
     ) : "overflow-x-auto",
-    isBarVariant ? "items-start rounded-agg-lg border border-agg-separator p-1.5" : "h-15 border-b border-agg-separator -mb-[1px]",
+    isBarVariant ? "items-start rounded-agg-lg border border-agg-separator p-1.5" : "h-14 md:h-15 border-b border-agg-separator -mb-[1px]",
     shouldUseOverflowScroll && "select-none",
     shouldUseOverflowScroll && !isBarVariant && "snap-x snap-mandatory",
     shouldUseOverflowScroll && (isDraggingTabs ? "cursor-grabbing" : "cursor-grab")
@@ -6984,7 +7005,10 @@ var Tabs = ({
       left: Math.max(0, nextScrollLeft),
       behavior: getScrollBehavior(enableAnimations)
     });
-  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, value]);
+    requestAnimationFrame(() => {
+      updateScrollState();
+    });
+  }, [enableAnimations, renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
   if (shouldUseOverflowSelect) {
     return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)("div", { className: cn("group/agg-tabs w-full", className, classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
       Select,
@@ -7023,6 +7047,13 @@ var Tabs = ({
             onPointerUp: handleEndTabListDrag,
             onWheel: handleTabListWheel,
             children: [
+              shouldUseOverflowScroll && !isBarVariant && hasOverflow ? /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "agg-tab-scroll-start-spacer h-full w-4 shrink-0 snap-start"
+                }
+              ) : null,
               renderedItems.map((item, index) => {
                 var _a;
                 const isActive = item.value === value;
@@ -7057,6 +7088,7 @@ var Tabs = ({
                         isDisabled: !!item.disabled,
                         size
                       }),
+                      !isBarVariant && (size === "s" ? "px-3 md:px-4" : "h-14 px-3 md:h-15 md:px-4"),
                       shouldUseOverflowScroll && !isBarVariant && "snap-start",
                       classNames == null ? void 0 : classNames.tabTrigger
                     ),
@@ -7106,9 +7138,9 @@ var Tabs = ({
               "aria-hidden": true,
               className: cn(
                 "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",
+                "pointer-events-none absolute inset-y-0 left-0 z-10 w-6 md:w-[60px] bg-linear-to-r from-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                canScrollLeft ? "opacity-100" : "opacity-0"
+                hasOverflow && canScrollLeft && !isAtStart ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -7118,9 +7150,9 @@ var Tabs = ({
               "aria-hidden": true,
               className: cn(
                 "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",
+                "pointer-events-none absolute inset-y-0 right-0 z-10 w-6 md:w-[60px] bg-linear-to-l from-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                canScrollRight ? "opacity-100" : "opacity-0"
+                hasOverflow && canScrollRight && !isAtEnd ? "opacity-100" : "opacity-0"
               )
             }
           )
@@ -7523,8 +7555,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 = (0, import_react10.useRef)(null);
+  const frameRef = (0, import_react10.useRef)(null);
+  const scrollStateRef = (0, import_react10.useRef)(DEFAULT_OUTCOMES_SCROLL_STATE);
+  const [scrollState, setScrollState] = (0, import_react10.useState)(
+    DEFAULT_OUTCOMES_SCROLL_STATE
+  );
+  const measureScrollState = (0, import_react10.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 = (0, import_react10.useCallback)(() => {
+    if (frameRef.current != null) return;
+    frameRef.current = window.requestAnimationFrame(measureScrollState);
+  }, [measureScrollState]);
+  (0, import_react10.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) => {
@@ -7691,6 +7800,31 @@ var EventListItemContent = ({
   const matchedCountLabel = labels.eventItem.matchedCount(
     Math.max(resolvedVenueCount, visibleFooterVenues.length)
   );
+  const handleOutcomesScrollThreshold = (0, import_react10.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;
   };
@@ -7742,29 +7876,9 @@ var EventListItemContent = ({
       onEventClick == null ? void 0 : onEventClick(event);
     }
   };
-  const handleOutcomesScroll = (0, import_react10.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
-    ]
-  );
+  (0, import_react10.useEffect)(() => {
+    updateScrollState();
+  }, [comparison.rows.length, shouldRenderLoadingOutcomeRow, updateScrollState]);
   const renderArbitrage = (value) => {
     if (value == null) return null;
     if (Math.abs(value) < config.market.arbitrageThreshold) return null;
@@ -7949,69 +8063,94 @@ var EventListItemContent = ({
             ) }) : null
           ] }) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsx)("div", { className: "agg-outcome-label-row flex min-w-0 flex-1 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "agg-outcome-meta flex shrink-0 flex-row items-center justify-end gap-2", children: [
-                        renderArbitrage(arbitragePercent),
-                        renderPriceGapPill(priceGapPercent, priceGapSource),
-                        /* @__PURE__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "agg-outcome-row-loading flex w-full items-center justify-between gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-                  "div",
-                  {
-                    "aria-hidden": "true",
-                    className: "bg-agg-separator animate-pulse h-5 rounded-agg-sm w-[200px]"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
-                  "div",
-                  {
-                    "aria-hidden": "true",
-                    className: "bg-agg-separator animate-pulse h-9 w-[100px] rounded-agg-full"
-                  }
-                )
-              ] }) : null
-            ]
-          }
-        ),
+        /* @__PURE__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsx)("div", { className: "agg-outcome-label-row flex min-w-0 flex-1 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "agg-outcome-meta flex shrink-0 flex-row items-center justify-end gap-2", children: [
+                          renderArbitrage(arbitragePercent),
+                          renderPriceGapPill(priceGapPercent, priceGapSource),
+                          /* @__PURE__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsxs)("div", { className: "agg-outcome-row-loading flex w-full items-center justify-between gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-agg-separator animate-pulse h-5 rounded-agg-sm w-[200px]"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
+                    "div",
+                    {
+                      "aria-hidden": "true",
+                      className: "bg-agg-separator animate-pulse h-9 w-[100px] rounded-agg-full"
+                    }
+                  )
+                ] }) : null
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsxs)(
           "div",
           {
@@ -8029,6 +8168,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__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.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__ */ (0, import_jsx_runtime119.jsxs)("span", { className: "agg-event-single-venue flex min-w-0 items-center gap-1 overflow-hidden", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime119.jsx)(
@@ -10046,13 +10193,6 @@ var parseSettlementBlocks = (input) => {
   }
   return blocks;
 };
-var getFirstSettlementParagraph = (input) => {
-  if (!input) return "";
-  const blocks = parseSettlementBlocks(input);
-  const firstParagraph = blocks.find((block) => block.kind === "paragraph");
-  if (!firstParagraph || firstParagraph.kind !== "paragraph") return "";
-  return firstParagraph.lines.join(" ").trim();
-};
 var normalizeSettlementForCompare = (input) => {
   return stripHtmlFragments(input).replace(/\s+/g, " ").trim().toLowerCase();
 };
@@ -10221,8 +10361,204 @@ SettlementTextRenderer.displayName = "SettlementTextRenderer";
 // src/trading/settlement/index.tsx
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var SETTLEMENT_SECTION_ID = "agg-settlement-section";
-var getSettlementHeaderClassName = () => {
-  return "flex items-center justify-between gap-4";
+var getSettlementDifferenceId = (sectionId, canonicalKey) => {
+  return `${sectionId}-difference-${canonicalKey}`;
+};
+var dateOnlyRegex = /^(\d{4})-(\d{2})-(\d{2})$/;
+var isoTimestampWithTimezoneRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}(?::\d{2}(?:\.\d{1,9})?)?(?:Z|[+-]\d{2}:?\d{2})$/i;
+var normalizeDifferenceText = (value) => {
+  return value.trim().toLowerCase().replace(/[^a-z0-9]+/g, "_").replace(/^_+|_+$/g, "");
+};
+var resolveCanonicalDifferenceKey = (difference) => {
+  const normalizedType = normalizeDifferenceText(difference.type);
+  const combined = normalizeDifferenceText(`${difference.type} ${difference.title}`);
+  if (combined.includes("start_date") || combined.includes("open_date")) return "start_date";
+  if (combined.includes("end_date") || combined.includes("close_date") || combined.includes("closing_date") || combined.includes("expiration_date") || combined.includes("expiry_date")) {
+    return "end_date";
+  }
+  if (combined.includes("resolution_timing") || combined.includes("resolution_date") || combined.includes("resolution_deadline") || combined.includes("settlement_date") || combined.includes("settlement_deadline") || combined.includes("settlement_timing")) {
+    return "resolution_timing";
+  }
+  return normalizedType || "other";
+};
+var parseSettlementDateMs = (value) => {
+  const trimmed = value.trim();
+  const dateOnlyMatch = dateOnlyRegex.exec(trimmed);
+  if (dateOnlyMatch) {
+    const [, year, month, day] = dateOnlyMatch;
+    return Date.UTC(Number(year), Number(month) - 1, Number(day));
+  }
+  if (!isoTimestampWithTimezoneRegex.test(trimmed)) return null;
+  const ms = Date.parse(trimmed);
+  return Number.isNaN(ms) ? null : ms;
+};
+var isDateLikeDifference = (canonicalKey) => {
+  return canonicalKey === "resolution_timing" || canonicalKey === "start_date" || canonicalKey === "end_date";
+};
+var hasEqualNormalizedDateValues = (difference, canonicalKey) => {
+  if (!isDateLikeDifference(canonicalKey)) return false;
+  const values = Object.values(difference.perVenue);
+  if (values.length < 2) return false;
+  const timestamps = values.map(parseSettlementDateMs);
+  if (timestamps.some((timestamp) => timestamp === null)) return false;
+  return new Set(timestamps).size === 1;
+};
+var resolveDifferenceSeverity = (difference, canonicalKey) => {
+  var _a;
+  const combined = normalizeDifferenceText(
+    `${difference.type} ${difference.title} ${(_a = difference.summary) != null ? _a : ""}`
+  );
+  if (isDateLikeDifference(canonicalKey)) return "critical";
+  if (canonicalKey === "scope" || canonicalKey === "threshold" || canonicalKey === "edge_cases") {
+    return "critical";
+  }
+  if (combined.includes("conflict") || combined.includes("void") || combined.includes("cancel") || combined.includes("postpone") || combined.includes("recount") || combined.includes("overtime") || combined.includes("extra_time")) {
+    return "critical";
+  }
+  return "informational";
+};
+var mergePerVenueValues = (current, next) => {
+  return Object.entries(next).reduce(
+    (merged, [venue, value]) => {
+      if (merged[venue] === void 0) merged[venue] = value;
+      return merged;
+    },
+    __spreadValues({}, current)
+  );
+};
+var prepareSettlementDifferences = (differences) => {
+  const byCanonicalKey = /* @__PURE__ */ new Map();
+  for (const [originalIndex, rawDifference] of (differences != null ? differences : []).entries()) {
+    const title2 = rawDifference.title.trim();
+    const perVenue = Object.fromEntries(
+      Object.entries(rawDifference.perVenue).map(([venue, value]) => [venue.trim(), value.trim()]).filter(([venue, value]) => venue.length > 0 && value.length > 0)
+    );
+    if (!title2 || Object.keys(perVenue).length === 0) continue;
+    const difference = __spreadProps(__spreadValues({}, rawDifference), { title: title2, perVenue });
+    const canonicalKey = resolveCanonicalDifferenceKey(difference);
+    if (hasEqualNormalizedDateValues(difference, canonicalKey)) continue;
+    const existing = byCanonicalKey.get(canonicalKey);
+    if (existing) {
+      byCanonicalKey.set(canonicalKey, __spreadProps(__spreadValues({}, existing), {
+        perVenue: mergePerVenueValues(existing.perVenue, difference.perVenue)
+      }));
+      continue;
+    }
+    byCanonicalKey.set(canonicalKey, __spreadProps(__spreadValues({}, difference), {
+      canonicalKey,
+      severity: resolveDifferenceSeverity(difference, canonicalKey),
+      originalIndex
+    }));
+  }
+  return Array.from(byCanonicalKey.values()).sort((left, right) => {
+    const severityDelta = Number(right.severity === "critical") - Number(left.severity === "critical");
+    if (severityDelta !== 0) return severityDelta;
+    return left.originalIndex - right.originalIndex;
+  });
+};
+var formatVenueFallbackLabel = (venue) => {
+  return venue.split(/[-_\s]+/).filter(Boolean).map((part) => `${part.slice(0, 1).toUpperCase()}${part.slice(1)}`).join(" ");
+};
+var resolveSettlementVenueLabel = (venue, labels) => {
+  var _a;
+  return (_a = labels.venues[venue]) != null ? _a : formatVenueFallbackLabel(venue);
+};
+var resolveDifferenceVenueKeys = (difference, settlementVenues) => {
+  const explicitVenues = Object.keys(difference.perVenue);
+  if (!isDateLikeDifference(difference.canonicalKey)) return explicitVenues;
+  const allVenues = [...settlementVenues != null ? settlementVenues : [], ...explicitVenues];
+  return Array.from(new Set(allVenues.filter((venue) => venue.trim().length > 0)));
+};
+var resolveDifferenceIconClassName = (canonicalKey) => {
+  if (canonicalKey.includes("source") || canonicalKey.includes("url")) return "fi-rr-world";
+  if (canonicalKey === "resolution_timing" || canonicalKey.includes("timing")) {
+    return "fi-rr-clock";
+  }
+  if (canonicalKey === "start_date" || canonicalKey.includes("start"))
+    return "fi-rr-calendar-clock";
+  if (canonicalKey === "end_date" || canonicalKey.includes("end")) return "fi-rr-calendar-clock";
+  if (canonicalKey.includes("cancel") || canonicalKey.includes("void") || canonicalKey.includes("postpone")) {
+    return "fi-rr-ban";
+  }
+  if (canonicalKey === "edge_cases" || canonicalKey.includes("edge")) {
+    return "fi-rr-triangle-warning";
+  }
+  if (canonicalKey === "scope") return "fi-rr-layers";
+  if (canonicalKey === "threshold") return "fi-rr-tachometer-alt-fastest";
+  if (canonicalKey.includes("wording")) return "fi-rr-document";
+  return "fi-rr-info";
+};
+var buildSettlementVenueRules = ({
+  marketBlock,
+  primaryRulesBlock,
+  settlementVenues,
+  settlementVenueRules
+}) => {
+  var _a, _b;
+  if (settlementVenueRules) {
+    const rulesByVenue = /* @__PURE__ */ new Map();
+    for (const rule of settlementVenueRules) {
+      const venue2 = rule.venue.trim();
+      const content2 = rule.content.trim();
+      if (!venue2 || !content2) continue;
+      const venueRules = (_a = rulesByVenue.get(venue2)) != null ? _a : [];
+      if (!venueRules.includes(content2)) venueRules.push(content2);
+      rulesByVenue.set(venue2, venueRules);
+    }
+    return Array.from(rulesByVenue, ([venue2, contents]) => ({
+      venue: venue2,
+      content: contents.join("\n\n")
+    }));
+  }
+  const content = [marketBlock == null ? void 0 : marketBlock.content, primaryRulesBlock == null ? void 0 : primaryRulesBlock.content].filter((value) => typeof value === "string" && value.trim().length > 0).join("\n\n");
+  const venue = (_b = settlementVenues == null ? void 0 : settlementVenues.find((candidate) => candidate.trim().length > 0)) == null ? void 0 : _b.trim();
+  return content && venue ? [{ venue, content }] : [];
+};
+var isDuplicatedByVenueRules = (content, venueRules) => {
+  const normalizedContent = normalizeSettlementForCompare(content);
+  if (!normalizedContent) return false;
+  return venueRules.some((rule) => {
+    const normalizedRule = normalizeSettlementForCompare(rule.content);
+    return normalizedRule.includes(normalizedContent);
+  });
+};
+var SettlementVenueRules = ({
+  rules,
+  labels
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-venue-rules flex w-full flex-col items-start gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.trading.settlementFullRulesTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex w-full flex-col items-start gap-4", children: rules.map((rule) => {
+      const venueLabel = resolveSettlementVenueLabel(rule.venue, labels);
+      return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("details", { className: "group/agg-settlement-rule w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("summary", { className: "flex cursor-pointer list-none items-center gap-2 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground group-hover/agg-settlement-rule:text-agg-muted-foreground transition-colors marker:hidden", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            VenueLogo,
+            {
+              venue: rule.venue,
+              size: "small",
+              className: "size-4",
+              ariaLabel: venueLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("span", { className: "text-agg-foreground group-hover/agg-settlement-rule:text-agg-muted-foreground transition-colors", children: venueLabel }),
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+            "i",
+            {
+              className: cn(
+                "fi fi-rr-angle-small-down text-[14px]!",
+                "group-open/agg-settlement-rule:rotate-180",
+                "size-3.5! shrink-0 text-agg-foreground group-hover/agg-settlement-rule:text-agg-muted-foreground transition-[colors,transform]"
+              ),
+              style: { fontSize: 14 },
+              "aria-hidden": "true"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "mt-3 pl-6", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: rule.content }) })
+      ] }, rule.venue);
+    }) })
+  ] });
 };
 var Settlement = ({
   className,
@@ -10232,9 +10568,12 @@ var Settlement = ({
   eventDescription,
   marketDescription,
   primaryRules,
+  settlementDiff,
+  settlementVenues,
+  settlementVenueRules,
   isLoading = false
 }) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d, _e;
   const labels = (0, import_hooks38.useLabels)();
   const blocks = (0, import_react14.useMemo)(
     () => dedupeSettlementSources({
@@ -10244,9 +10583,41 @@ var Settlement = ({
     }),
     [eventDescription, marketDescription, primaryRules]
   );
+  const settlementDifferences = (0, import_react14.useMemo)(
+    () => prepareSettlementDifferences(settlementDiff == null ? void 0 : settlementDiff.differences),
+    [settlementDiff == null ? void 0 : settlementDiff.differences]
+  );
   const eventBlock = (_a = blocks.find((block) => block.key === "eventDescription")) != null ? _a : null;
   const marketBlock = (_b = blocks.find((block) => block.key === "marketDescription")) != null ? _b : null;
   const primaryRulesBlock = (_c = blocks.find((block) => block.key === "primaryRules")) != null ? _c : null;
+  const venueRuleBlocks = (0, import_react14.useMemo)(
+    () => buildSettlementVenueRules({
+      marketBlock,
+      primaryRulesBlock,
+      settlementVenues,
+      settlementVenueRules
+    }),
+    [marketBlock, primaryRulesBlock, settlementVenues, settlementVenueRules]
+  );
+  const hasSettlementDifferences = settlementDifferences.length > 0;
+  const hasVenueSettlementRules = venueRuleBlocks.length > 0;
+  const standaloneEventBlock = eventBlock && !isDuplicatedByVenueRules(eventBlock.content, venueRuleBlocks) ? eventBlock : null;
+  const standaloneMarketBlock = hasVenueSettlementRules ? null : marketBlock;
+  const standalonePrimaryRulesBlock = hasVenueSettlementRules ? null : primaryRulesBlock;
+  const hasStandaloneSettlementText = hasVenueSettlementRules ? standaloneEventBlock !== null : blocks.length > 0;
+  const hasSettlementContent = hasSettlementDifferences || hasVenueSettlementRules || hasStandaloneSettlementText;
+  const defaultOpenDifferenceKey = (_e = (_d = settlementDifferences[0]) == null ? void 0 : _d.canonicalKey) != null ? _e : null;
+  const [openDifferenceKeys, setOpenDifferenceKeys] = (0, import_react14.useState)(
+    () => defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []
+  );
+  (0, import_react14.useEffect)(() => {
+    setOpenDifferenceKeys(defaultOpenDifferenceKey ? [defaultOpenDifferenceKey] : []);
+  }, [defaultOpenDifferenceKey]);
+  const handleToggleDifference = (canonicalKey) => {
+    setOpenDifferenceKeys(
+      (currentKeys) => currentKeys.includes(canonicalKey) ? currentKeys.filter((currentKey) => currentKey !== canonicalKey) : [...currentKeys, canonicalKey]
+    );
+  };
   if (isLoading) {
     return /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
       Skeleton,
@@ -10257,6 +10628,7 @@ var Settlement = ({
       }
     );
   }
+  if (!hasSettlementContent) return null;
   const resolvedSectionLabel = sectionLabel === defaultSettlementSectionLabel ? labels.trading.settlementSection : sectionLabel;
   return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
     Card,
@@ -10264,38 +10636,117 @@ var Settlement = ({
       id,
       className: cn(
         "group/agg-settlement-card",
-        "flex flex-col w-full gap-5 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none",
+        "flex w-full flex-col items-start gap-4 rounded-agg-xl border border-agg-separator bg-agg-secondary p-5 shadow-none hover:shadow-none sm:gap-5",
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn("agg-settlement-header", getSettlementHeaderClassName()), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground", children: resolvedSectionLabel }),
-          question ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-question text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: question }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-header flex w-full flex-col items-start gap-1 text-agg-muted-foreground sm:flex-row sm:items-center sm:justify-between sm:gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "shrink-0 text-agg-xs font-agg-bold leading-agg-4 uppercase", children: resolvedSectionLabel }),
+          question ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-question min-w-0 text-agg-sm font-agg-normal leading-agg-5 sm:max-w-[314px] sm:truncate", children: question }) : null
         ] }),
-        blocks.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-empty text-agg-sm leading-agg-5 text-agg-muted-foreground", children: labels.trading.settlementEmpty }) : /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-sections flex flex-col gap-4", children: [
-          eventBlock || marketBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
-            "div",
-            {
-              className: "agg-settlement-section agg-settlement-section-description",
-              "data-source": "description",
-              children: [
-                eventBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { "data-source": "eventDescription", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: eventBlock.content }) }) : null,
-                eventBlock && marketBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("hr", { className: "agg-settlement-divider my-4 border-0 border-t border-agg-separator" }) : null,
-                marketBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { "data-source": "marketDescription", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: marketBlock.content }) }) : null
-              ]
-            }
-          ) : null,
-          primaryRulesBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
-            "div",
-            {
-              className: "agg-settlement-section agg-settlement-section-primaryRules",
-              "data-source": "primaryRules",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-section-label text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground mb-2", children: labels.trading.settlementPrimaryRulesLabel }),
-                /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: primaryRulesBlock.content })
-              ]
-            }
-          ) : null
+        /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-sections flex w-full flex-col items-start gap-5", children: [
+          hasStandaloneSettlementText ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "w-full", children: [
+            standaloneEventBlock || standaloneMarketBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+              "div",
+              {
+                className: "agg-settlement-section agg-settlement-section-description",
+                "data-source": "description",
+                children: [
+                  standaloneEventBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { "data-source": "eventDescription", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: standaloneEventBlock.content }) }) : null,
+                  standaloneEventBlock && standaloneMarketBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("hr", { className: "agg-settlement-divider my-4 border-0 border-t border-agg-separator" }) : null,
+                  standaloneMarketBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { "data-source": "marketDescription", children: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: standaloneMarketBlock.content }) }) : null
+                ]
+              }
+            ) : null,
+            standalonePrimaryRulesBlock ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+              "div",
+              {
+                className: "agg-settlement-section agg-settlement-section-primaryRules",
+                "data-source": "primaryRules",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "agg-settlement-section-label text-agg-xs font-agg-bold leading-agg-4 uppercase text-agg-muted-foreground mb-2", children: labels.trading.settlementPrimaryRulesLabel }),
+                  /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementTextRenderer, { content: standalonePrimaryRulesBlock.content })
+                ]
+              }
+            ) : null
+          ] }) : null,
+          hasSettlementDifferences ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "agg-settlement-differences flex w-full flex-col items-start gap-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "text-agg-sm font-agg-bold leading-agg-5 text-agg-foreground", children: labels.trading.settlementDifferencesTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("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__ */ (0, import_jsx_runtime123.jsx)("div", { className: "flex w-full flex-col items-start gap-5", children: settlementDifferences.map((difference) => {
+              const venueKeys = resolveDifferenceVenueKeys(difference, settlementVenues);
+              const isExpanded = openDifferenceKeys.includes(difference.canonicalKey) && venueKeys.length > 0;
+              return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+                "div",
+                {
+                  id: getSettlementDifferenceId(id, difference.canonicalKey),
+                  className: "agg-settlement-difference flex w-full flex-col items-start gap-2 rounded-agg-lg",
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(
+                      "button",
+                      {
+                        type: "button",
+                        className: "flex w-full cursor-pointer items-center gap-2 text-left group/agg-settlement-difference",
+                        "aria-expanded": isExpanded,
+                        onClick: () => handleToggleDifference(difference.canonicalKey),
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                            "i",
+                            {
+                              className: cn(
+                                "fi",
+                                resolveDifferenceIconClassName(difference.canonicalKey),
+                                "inline-flex size-4! shrink-0 items-center justify-center text-[16px] leading-none text-agg-muted-foreground"
+                              ),
+                              "aria-hidden": "true"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("p", { className: "min-w-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground group-hover/agg-settlement-difference:text-agg-muted-foreground transition-colors break-words [overflow-wrap:anywhere]", children: difference.title }),
+                          /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                            "i",
+                            {
+                              className: cn(
+                                "fi fi-rr-angle-small-down text-[14px]!",
+                                isExpanded && "rotate-180",
+                                "size-3.5! shrink-0 text-agg-foreground group-hover/agg-settlement-difference:text-agg-muted-foreground transition-[colors,transform]"
+                              ),
+                              style: { fontSize: 14 },
+                              "aria-hidden": "true"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    isExpanded ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("dl", { className: "flex w-full flex-col items-start gap-1 px-6", children: venueKeys.map((venue) => {
+                      var _a2;
+                      const venueValue = (_a2 = difference.perVenue[venue]) != null ? _a2 : labels.trading.settlementValueUnavailable;
+                      const venueLabel = resolveSettlementVenueLabel(venue, labels);
+                      return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: "flex w-full items-start gap-2", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+                          VenueLogo,
+                          {
+                            venue,
+                            size: "small",
+                            className: "mt-0.5 size-4",
+                            ariaLabel: venueLabel
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("dt", { className: "w-[88px] shrink-0 text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: venueLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("dd", { className: "min-w-0 flex-1 text-agg-sm font-agg-normal leading-agg-5 text-agg-muted-foreground break-words [overflow-wrap:anywhere]", children: venueValue })
+                      ] }, venue);
+                    }) }) : null
+                  ]
+                },
+                difference.canonicalKey
+              );
+            }) })
+          ] }) : null,
+          hasVenueSettlementRules ? /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)(import_jsx_runtime123.Fragment, { children: [
+            hasSettlementDifferences || hasStandaloneSettlementText ? /* @__PURE__ */ (0, import_jsx_runtime123.jsx)("div", { className: "h-px w-full bg-agg-separator" }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(SettlementVenueRules, { rules: venueRuleBlocks, labels })
+          ] }) : null
         ] })
       ]
     }
@@ -10306,13 +10757,16 @@ Settlement.displayName = "Settlement";
 // src/events/item-details/settlement-summary.tsx
 var import_jsx_runtime124 = require("react/jsx-runtime");
 var SettlementSummary = ({
-  content,
+  settlementDiff,
   settlementSectionId = SETTLEMENT_SECTION_ID,
   className
 }) => {
   const labels = (0, import_hooks39.useLabels)();
-  const firstParagraph = (0, import_react15.useMemo)(() => getFirstSettlementParagraph(content), [content]);
-  if (!firstParagraph) return null;
+  const settlementDifferences = (0, import_react15.useMemo)(
+    () => prepareSettlementDifferences(settlementDiff == null ? void 0 : settlementDiff.differences),
+    [settlementDiff == null ? void 0 : settlementDiff.differences]
+  );
+  if (settlementDifferences.length === 0) return null;
   const handleReadFullDetails = (event) => {
     event.preventDefault();
     event.stopPropagation();
@@ -10321,43 +10775,78 @@ var SettlementSummary = ({
     if (!target) return;
     target.scrollIntoView({ behavior: "smooth", block: "start" });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: cn("agg-settlement-summary flex w-full flex-col gap-2", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-      Typography,
-      {
-        variant: "caption-caps",
-        className: "agg-settlement-summary-label text-agg-muted-foreground",
-        children: labels.settlementSummary.title
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "agg-settlement-summary-row flex w-full items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-        "p",
-        {
-          className: cn(
-            "agg-settlement-summary-text",
-            "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
-          ),
-          children: firstParagraph
-        }
+  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "agg-settlement-summary-toggle",
+        "inline-flex shrink-0 cursor-pointer items-center gap-1 whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
+        "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"
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
-        "button",
-        {
-          type: "button",
-          className: cn(
-            "agg-settlement-summary-toggle",
-            "shrink-0 cursor-pointer whitespace-nowrap text-agg-sm font-agg-bold leading-agg-5 text-agg-primary",
-            "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"
-          ),
-          "aria-controls": settlementSectionId,
-          onClick: handleReadFullDetails,
-          children: labels.settlementSummary.readFullDetails
-        }
-      )
-    ] })
-  ] });
+      "aria-controls": settlementSectionId,
+      onClick: handleReadFullDetails,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("span", { children: labels.settlementSummary.readFullDetails }),
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "i",
+          {
+            className: "fi fi-rr-arrow-small-down size-3.5!",
+            "aria-hidden": "true",
+            style: { fontSize: 14 }
+          }
+        )
+      ]
+    }
+  );
+  const visibleDifferences = settlementDifferences.slice(0, 2);
+  const hiddenDifferenceCount = settlementDifferences.length - visibleDifferences.length;
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "div",
+    {
+      className: cn(
+        "agg-settlement-summary flex w-full flex-wrap items-start justify-between gap-x-4 gap-y-2",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "flex min-w-[240px] flex-1 flex-wrap items-center gap-x-5 gap-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "agg-settlement-summary-heading flex shrink-0 items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("p", { className: "text-agg-sm font-agg-normal leading-agg-5 text-agg-foreground", children: labels.settlementSummary.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("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__ */ (0, import_jsx_runtime124.jsxs)("div", { className: "agg-settlement-summary-pills flex min-w-[240px] flex-1 flex-wrap items-center gap-2", children: [
+            visibleDifferences.map((difference) => /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+              "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__ */ (0, import_jsx_runtime124.jsx)(
+                    "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__ */ (0, import_jsx_runtime124.jsx)("span", { className: "min-w-0 truncate", children: difference.title })
+                ]
+              },
+              difference.canonicalKey
+            )),
+            hiddenDifferenceCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)("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
+      ]
+    }
+  );
 };
 SettlementSummary.displayName = "SettlementSummary";
 
@@ -11092,7 +11581,7 @@ var EventListItemDetailsContent = ({
             }
           )
         ] }),
-        event.description ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SettlementSummary, { content: event.description }) : null
+        event.description || event.settlementDiff ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(SettlementSummary, { content: event.description, settlementDiff: event.settlementDiff }) : null
       ]
     }
   );
@@ -12979,7 +13468,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__ */ (0, import_jsx_runtime130.jsx)("div", { className: "h-px w-full bg-agg-separator" })
@@ -13349,7 +13838,7 @@ MarketDetailsList.displayName = "MarketDetailsList";
 
 // src/events/list/index.tsx
 var import_hooks45 = require("@agg-build/hooks");
-var import_sdk14 = require("@agg-build/sdk");
+var import_sdk15 = require("@agg-build/sdk");
 var Dialog2 = __toESM(require("@radix-ui/react-dialog"));
 var import_react23 = require("react");
 
@@ -13472,6 +13961,7 @@ CategorySidebar.displayName = "CategorySidebar";
 
 // src/events/list/event-list-tabs.tsx
 var import_hooks44 = require("@agg-build/hooks");
+var import_sdk14 = require("@agg-build/sdk");
 var import_react22 = require("react");
 
 // src/events/list/event-list.constants.ts
@@ -13496,12 +13986,6 @@ var getDefaultEventListTabs = (labels) => {
       venueLogo: import_sdk13.Venue.polymarket,
       venues: [import_sdk13.Venue.polymarket]
     },
-    {
-      value: import_sdk13.Venue.kalshi,
-      label: labels.venues.kalshi,
-      venueLogo: import_sdk13.Venue.kalshi,
-      venues: [import_sdk13.Venue.kalshi]
-    },
     {
       value: import_sdk13.Venue.limitless,
       label: labels.venues.limitless,
@@ -13565,6 +14049,7 @@ var useEventListTabs = (tabs) => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     return baseTabs.flatMap((tab) => {
       if (!tab.venueLogo) return [tab];
+      if (!(0, import_sdk14.isVenueActive)(tab.venueLogo)) return [];
       const availabilityState = (0, import_hooks44.getVenueAvailabilityState)({
         venueId: tab.venueLogo,
         disabledVenues,
@@ -13686,7 +14171,7 @@ var EventList = ({
   const isDiscoveryFiltersEnabled = enableVenueEventDiscoveryFilters && !search;
   const resolvedTabs = useEventListTabs();
   const visibleVenues = (0, import_react23.useMemo)(
-    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks45.getVisibleVenueIdsByConfig)(import_sdk14.VENUES, disabledVenues),
+    () => disabledVenues.length === 0 ? void 0 : (0, import_hooks45.getVisibleVenueIdsByConfig)(import_sdk15.VENUES, disabledVenues),
     [disabledVenues]
   );
   const [activeTabValue, setActiveTabValue] = (0, import_react23.useState)(