@agg-build/ui 1.0.0 → 1.0.2

package/dist/{chunk-I2WBGEWK.mjs → chunk-4ILR2YH3.mjs}

@@ -1,8 +1,10 @@
 "use client";
 import {
+  SETTLEMENT_SECTION_ID,
   buildMarketDetailsModel,
   formatProbabilityCents,
   formatProbabilityPercent,
+  getFirstSettlementParagraph,
   getTimeWindowByRange,
   resolveHeaderOutcomeItems,
   resolveInitialOutcomeLabel,
@@ -19,7 +21,7 @@ import {
   resolveUnifiedOrderBookEntries,
   sortOutcomeSelectorOutcomes,
   useEventTradingContext
-} from "./chunk-C7T56TJR.mjs";
+} from "./chunk-PEVG67XU.mjs";
 import {
   AutocompleteSelect,
   Badge,
@@ -44,6 +46,7 @@ import {
   __spreadProps,
   __spreadValues,
   baseCardClassName,
+  buildSpreadByVenueMarketId,
   cn,
   dedupeVenueMarketsById,
   detailsBaseCardClassName,
@@ -61,16 +64,16 @@ import {
   normalizeProbability,
   normalizeVenueMarketCluster,
   orderBookRowLimitDefault,
+  resolveBestMidpointForMarket,
   resolveDisplayVolume,
   resolveEventListItemEvent,
   resolveOutcomeTitle,
   resolveTabVenus,
   resolveYesOutcome,
-  selectPrimaryVenueMarket,
   sortMarketsByYesOddsDesc,
   sortOutcomes,
   splitEventsByLifecycle
-} from "./chunk-6NS7D73S.mjs";
+} from "./chunk-TLGQ4LID.mjs";
 
 // src/events/item/index.tsx
 import {
@@ -186,9 +189,6 @@ var EventListItemContent = ({
   const allVenueMarkets = useMemo(() => {
     return dedupeVenueMarketsById(event.venueMarkets);
   }, [event.venueMarkets]);
-  const _primaryVenueMarket = useMemo(() => {
-    return selectPrimaryVenueMarket(allVenueMarkets);
-  }, [allVenueMarkets]);
   const resolvedTitle = event.title;
   const resolvedImage = event.image;
   const visibleVenueLogos = useMemo(() => {
@@ -199,11 +199,12 @@ var EventListItemContent = ({
   const resolvedVenueCount = typeof event.venueCount === "number" && Number.isFinite(event.venueCount) ? Math.max(0, Math.floor(event.venueCount)) : visibleVenueLogos.length;
   const [isLazyMarketsQueryEnabled, setIsLazyMarketsQueryEnabled] = useState(false);
   const shouldEnableLazyMarketLoading = useMemo(() => {
-    if (allVenueMarkets.length <= 1) return false;
     if (!event.id) return false;
     const hasExplicitMarketCount = typeof event.marketCount === "number" && Number.isFinite(event.marketCount);
-    if (!hasExplicitMarketCount) return true;
-    return resolvedMarketCount > allVenueMarkets.length;
+    if (hasExplicitMarketCount) {
+      return resolvedMarketCount > allVenueMarkets.length;
+    }
+    return allVenueMarkets.length > 1;
   }, [allVenueMarkets.length, event.id, event.marketCount, resolvedMarketCount]);
   const {
     markets: lazyLoadedMarkets,
@@ -234,12 +235,17 @@ var EventListItemContent = ({
   }, [resolvedOutcomeMarkets]);
   const {
     midpointsByVenueMarketId,
+    midpointRows,
     isLoading: isLoadingMidpoints,
     isFetching: isFetchingMidpoints
   } = useVenueMarketMidpoints({
     venueMarketIds: midpointVenueMarketIds,
     enabled: midpointVenueMarketIds.length > 0
   });
+  const spreadByVenueMarketId = useMemo(
+    () => buildSpreadByVenueMarketId(midpointRows),
+    [midpointRows]
+  );
   const gapsByVenueMarketId = useMemo(
     () => computePriceGaps({
       markets: resolvedOutcomeMarkets,
@@ -248,13 +254,7 @@ var EventListItemContent = ({
     [resolvedOutcomeMarkets, midpointsByVenueMarketId]
   );
   const isMidpointQueryInFlight = isLoadingMidpoints || isFetchingMidpoints;
-  const resolveMarketMidpoint = useCallback(
-    (marketId) => {
-      return normalizeProbability(midpointsByVenueMarketId.get(marketId));
-    },
-    [midpointsByVenueMarketId]
-  );
-  const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && isLazyMarketsQueryEnabled && (isLoadingLazyMarkets || isFetchingNextLazyMarketsPage);
+  const shouldRenderLoadingOutcomeRow = shouldEnableLazyMarketLoading && (!isLazyMarketsQueryEnabled || isLoadingLazyMarkets || isFetchingNextLazyMarketsPage || hasNextLazyMarketsPage);
   const resolvedVolume = resolveDisplayVolume(event.volume, allVenueMarkets);
   const volumeLabel = typeof resolvedVolume === "number" ? `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItem.volumeSuffix}` : "";
   const shouldUseNativeLinkNavigation = (eventToHandle) => {
@@ -460,72 +460,87 @@ var EventListItemContent = ({
             ),
             onScroll: handleOutcomesScroll,
             children: [
-              resolvedOutcomeMarkets.length === 1 ? sortOutcomes(resolvedOutcomeMarkets[0].venueMarketOutcomes).map((outcome) => {
+              resolvedOutcomeMarkets.length === 1 ? (() => {
+                var _a;
                 const market = resolvedOutcomeMarkets[0];
-                const marketMidpoint = resolveMarketMidpoint(market.id);
+                const bestMidpoint = resolveBestMidpointForMarket(
+                  market,
+                  midpointsByVenueMarketId,
+                  spreadByVenueMarketId
+                );
+                const marketMidpoint = bestMidpoint != null ? normalizeProbability(bestMidpoint.midpoint) : void 0;
+                const bestVenue = (_a = bestMidpoint == null ? void 0 : bestMidpoint.venue) != null ? _a : market.venue;
                 const hasYesOutcome = market.venueMarketOutcomes.some(
                   (item) => isYesLabel(item.label)
                 );
                 const hasNoOutcome = market.venueMarketOutcomes.some((item) => isNoLabel(item.label));
                 const shouldUseMidpoint = hasYesOutcome && hasNoOutcome;
-                const probability = (() => {
-                  if (!shouldUseMidpoint) {
-                    return normalizeProbability(outcome.price);
-                  }
-                  if (marketMidpoint == null) {
-                    if (isMidpointQueryInFlight) return void 0;
+                return sortOutcomes(market.venueMarketOutcomes).map((outcome) => {
+                  const probability = (() => {
+                    if (!shouldUseMidpoint) {
+                      return normalizeProbability(outcome.price);
+                    }
+                    if (marketMidpoint == null) {
+                      if (isMidpointQueryInFlight) return void 0;
+                      return normalizeProbability(outcome.price);
+                    }
+                    if (isYesLabel(outcome.label)) {
+                      return marketMidpoint;
+                    }
+                    if (isNoLabel(outcome.label)) {
+                      return normalizeProbability(1 - marketMidpoint);
+                    }
                     return normalizeProbability(outcome.price);
-                  }
-                  if (isYesLabel(outcome.label)) {
-                    return marketMidpoint;
-                  }
-                  if (isNoLabel(outcome.label)) {
-                    return normalizeProbability(1 - marketMidpoint);
-                  }
-                  return normalizeProbability(outcome.price);
-                })();
-                const shouldRenderMidpointSkeleton = shouldUseMidpoint && marketMidpoint == null && isMidpointQueryInFlight;
-                const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[outcome.id];
-                const _priceGapPct = gapsByVenueMarketId.get(market.id);
-                return /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    className: cn(
-                      "agg-outcome-row",
-                      "flex flex-row gap-3 w-full items-center justify-between",
-                      classNames == null ? void 0 : classNames.outcomeRow
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
-                        Typography,
-                        {
-                          variant: "body",
-                          className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
-                          children: resolveOutcomeTitle(outcome)
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
-                        renderArbitrage(arbitragePercent),
-                        renderOutcomePriceBadge(
-                          probability,
-                          market.venue,
-                          shouldRenderMidpointSkeleton,
-                          market,
-                          outcome
-                        )
-                      ] })
-                    ]
-                  },
-                  outcome.id
-                );
-              }) : sortMarketsByYesOddsDesc(resolvedOutcomeMarkets).map((market) => {
-                var _a, _b;
+                  })();
+                  const shouldRenderMidpointSkeleton = shouldUseMidpoint && marketMidpoint == null && isMidpointQueryInFlight;
+                  const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[outcome.id];
+                  const _priceGapPct = gapsByVenueMarketId.get(market.id);
+                  return /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "agg-outcome-row",
+                        "flex flex-row gap-3 w-full items-center justify-between",
+                        classNames == null ? void 0 : classNames.outcomeRow
+                      ),
+                      children: [
+                        /* @__PURE__ */ jsx("div", { className: "agg-outcome-label-row flex min-w-0 flex-row items-center justify-start gap-2", children: /* @__PURE__ */ jsx(
+                          Typography,
+                          {
+                            variant: "body",
+                            className: "agg-outcome-label min-w-0 truncate text-agg-sm leading-agg-5 md:text-agg-base md:leading-agg-6",
+                            children: resolveOutcomeTitle(outcome)
+                          }
+                        ) }),
+                        /* @__PURE__ */ jsxs("div", { className: "agg-outcome-meta flex flex-row items-center justify-end gap-3", children: [
+                          renderArbitrage(arbitragePercent),
+                          renderOutcomePriceBadge(
+                            probability,
+                            bestVenue,
+                            shouldRenderMidpointSkeleton,
+                            market,
+                            outcome
+                          )
+                        ] })
+                      ]
+                    },
+                    outcome.id
+                  );
+                });
+              })() : sortMarketsByYesOddsDesc(resolvedOutcomeMarkets).map((market) => {
+                var _a, _b, _c;
                 const yesOutcome = resolveYesOutcome(market);
                 const displayOutcome = yesOutcome != null ? yesOutcome : (_b = market.venueMarketOutcomes) == null ? void 0 : _b.reduce(
                   (acc, o) => o.price > acc.price ? o : acc,
                   (_a = market.venueMarketOutcomes) == null ? void 0 : _a[0]
                 );
-                const marketMidpoint = resolveMarketMidpoint(market.id);
+                const bestMidpoint = resolveBestMidpointForMarket(
+                  market,
+                  midpointsByVenueMarketId,
+                  spreadByVenueMarketId
+                );
+                const marketMidpoint = bestMidpoint != null ? normalizeProbability(bestMidpoint.midpoint) : void 0;
+                const bestVenue = (_c = bestMidpoint == null ? void 0 : bestMidpoint.venue) != null ? _c : market.venue;
                 const probability = marketMidpoint != null ? marketMidpoint : isMidpointQueryInFlight ? void 0 : normalizeProbability(displayOutcome == null ? void 0 : displayOutcome.price);
                 const shouldRenderMidpointSkeleton = marketMidpoint == null && isMidpointQueryInFlight;
                 const arbitragePercent = arbitrageByOutcomeId == null ? void 0 : arbitrageByOutcomeId[market.id];
@@ -552,7 +567,7 @@ var EventListItemContent = ({
                         renderArbitrage(arbitragePercent),
                         renderOutcomePriceBadge(
                           probability,
-                          market.venue,
+                          bestVenue,
                           shouldRenderMidpointSkeleton,
                           market,
                           displayOutcome
@@ -942,70 +957,23 @@ var mergeVenueOutcomeOrderbooks = ({
 
 // src/events/item-details/settlement-summary.tsx
 import { useLabels as useLabels2 } from "@agg-build/hooks";
-import { useCallback as useCallback2, useEffect, useId, useRef, useState as useState2 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 var SettlementSummary = ({
   content,
-  onToggle,
+  settlementSectionId = SETTLEMENT_SECTION_ID,
   className
 }) => {
-  var _a;
   const labels = useLabels2();
-  const contentId = useId();
-  const containerRef = useRef(null);
-  const measureRef = useRef(null);
-  const [isExpanded, setIsExpanded] = useState2(false);
-  const [canExpand, setCanExpand] = useState2(false);
-  const resolvedContent = (_a = content == null ? void 0 : content.trim()) != null ? _a : "";
-  const measureOverflow = useCallback2(() => {
-    const measureElement = measureRef.current;
-    if (!measureElement) return;
-    const nextCanExpand = measureElement.scrollWidth > measureElement.clientWidth + 1;
-    setCanExpand((currentValue) => {
-      if (currentValue === nextCanExpand) return currentValue;
-      return nextCanExpand;
-    });
-  }, []);
-  useEffect(() => {
-    if (!resolvedContent) {
-      setCanExpand(false);
-      setIsExpanded(false);
-      return;
-    }
-    setCanExpand(false);
-    setIsExpanded(false);
-    measureOverflow();
-  }, [measureOverflow, resolvedContent]);
-  useEffect(() => {
-    if (!resolvedContent) return;
-    const containerElement = containerRef.current;
-    if (!containerElement) return;
-    if (typeof ResizeObserver === "function") {
-      const resizeObserver = new ResizeObserver(() => {
-        measureOverflow();
-      });
-      resizeObserver.observe(containerElement);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-    const handleResize = () => {
-      measureOverflow();
-    };
-    window.addEventListener("resize", handleResize);
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [measureOverflow, resolvedContent]);
-  if (!resolvedContent) return null;
-  const shouldShowToggle = canExpand || isExpanded;
-  const toggleLabel = isExpanded ? labels.settlementSummary.showLess : labels.settlementSummary.readFullDetails;
-  const handleToggle = (event) => {
+  const firstParagraph = useMemo2(() => getFirstSettlementParagraph(content), [content]);
+  if (!firstParagraph) return null;
+  const handleReadFullDetails = (event) => {
     event.preventDefault();
     event.stopPropagation();
-    const nextExpanded = !isExpanded;
-    setIsExpanded(nextExpanded);
-    onToggle == null ? void 0 : onToggle(nextExpanded);
+    if (typeof document === "undefined") return;
+    const target = document.getElementById(settlementSectionId);
+    if (!target) return;
+    target.scrollIntoView({ behavior: "smooth", block: "start" });
   };
   return /* @__PURE__ */ jsxs2("div", { className: cn("agg-settlement-summary flex w-full flex-col gap-2", className), children: [
     /* @__PURE__ */ jsx2(
@@ -1016,78 +984,32 @@ var SettlementSummary = ({
         children: labels.settlementSummary.title
       }
     ),
-    /* @__PURE__ */ jsxs2("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-row flex w-full items-center gap-3", children: [
       /* @__PURE__ */ jsx2(
         "p",
         {
-          ref: measureRef,
-          "aria-hidden": "true",
           className: cn(
-            "agg-settlement-summary-measure",
-            "pointer-events-none absolute inset-x-0 top-0 block overflow-hidden whitespace-nowrap opacity-0",
-            "text-agg-sm leading-agg-5 text-agg-foreground"
+            "agg-settlement-summary-text",
+            "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
           ),
-          children: resolvedContent
+          children: firstParagraph
         }
       ),
-      isExpanded ? /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-expanded flex flex-col gap-2", children: [
-        /* @__PURE__ */ jsx2(
-          "p",
-          {
-            id: contentId,
-            className: cn(
-              "agg-settlement-summary-text",
-              "text-agg-sm leading-agg-5 text-agg-foreground",
-              "break-words [overflow-wrap:anywhere]"
-            ),
-            children: resolvedContent
-          }
-        ),
-        shouldShowToggle ? /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: cn(
-              "agg-settlement-summary-toggle",
-              "w-fit shrink-0 cursor-pointer whitespace-nowrap text-left 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": contentId,
-            "aria-expanded": isExpanded,
-            onClick: handleToggle,
-            children: toggleLabel
-          }
-        ) : null
-      ] }) : /* @__PURE__ */ jsxs2("div", { className: "agg-settlement-summary-collapsed flex w-full items-start gap-3", children: [
-        /* @__PURE__ */ jsx2(
-          "p",
-          {
-            id: contentId,
-            className: cn(
-              "agg-settlement-summary-text",
-              "min-w-0 flex-1 truncate text-agg-sm leading-agg-5 text-agg-foreground"
-            ),
-            children: resolvedContent
-          }
-        ),
-        shouldShowToggle ? /* @__PURE__ */ jsx2(
-          "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": contentId,
-            "aria-expanded": isExpanded,
-            onClick: handleToggle,
-            children: toggleLabel
-          }
-        ) : null
-      ] })
+      /* @__PURE__ */ jsx2(
+        "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
+        }
+      )
     ] })
   ] });
 };
@@ -1107,11 +1029,11 @@ import {
   useSdkUiConfig as useSdkUiConfig2,
   useVenueEvent as useVenueEvent2
 } from "@agg-build/hooks";
-import { useEffect as useEffect3, useMemo as useMemo4, useRef as useRef3, useState as useState4 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo5, useRef as useRef2, useState as useState3 } from "react";
 
 // src/primitives/chart/chart-type-switch.tsx
 import { useLabels as useLabels3 } from "@agg-build/hooks";
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 
 // src/primitives/chart/chart-type-switch.constants.ts
 var CHART_TYPE_SWITCH_OPTION_KEYS = ["line", "candlestick"];
@@ -1143,7 +1065,7 @@ var ChartTypeSwitch = ({
   className
 }) => {
   const labels = useLabels3();
-  const options = useMemo2(
+  const options = useMemo3(
     () => CHART_TYPE_SWITCH_OPTION_KEYS.map((chartType) => ({
       value: chartType,
       iconName: resolveChartTypeOptionIconName(chartType),
@@ -1259,7 +1181,7 @@ var filterChartVenueOutcomesByRenderableVenues = ({
 
 // src/events/item-details/event-list-item-details-market-selector.tsx
 import { useLabels as useLabels4 } from "@agg-build/hooks";
-import { useEffect as useEffect2, useLayoutEffect, useMemo as useMemo3, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect, useLayoutEffect, useMemo as useMemo4, useRef, 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;
@@ -1356,37 +1278,37 @@ var EventListItemDetailsMarketSelector = ({
 }) => {
   var _a;
   const labels = useLabels4();
-  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] = useState3(() => ({
+  const containerRef = useRef(null);
+  const measurementContainerRef = useRef(null);
+  const moreButtonRef = useRef(null);
+  const dropdownInputRef = useRef(null);
+  const moreButtonMeasureRef = useRef(null);
+  const optionMeasureRefs = useRef({});
+  const [layout, setLayout] = useState2(() => ({
     visibleItems: options,
     hiddenItems: []
   }));
-  const [isDropdownOpen, setIsDropdownOpen] = useState3(false);
-  const [isMobileViewport, setIsMobileViewport] = useState3(false);
-  const [searchValue, setSearchValue] = useState3("");
-  const [dropdownPosition, setDropdownPosition] = useState3({
+  const [isDropdownOpen, setIsDropdownOpen] = useState2(false);
+  const [isMobileViewport, setIsMobileViewport] = useState2(false);
+  const [searchValue, setSearchValue] = useState2("");
+  const [dropdownPosition, setDropdownPosition] = useState2({
     left: 0,
     top: 0,
     width: 0
   });
-  const selectedHiddenOption = useMemo3(() => {
+  const selectedHiddenOption = useMemo4(() => {
     var _a2;
     return (_a2 = layout.hiddenItems.find((option) => option.value === selectedValue)) != null ? _a2 : null;
   }, [layout.hiddenItems, selectedValue]);
   const moreButtonLabel = (_a = selectedHiddenOption == null ? void 0 : selectedHiddenOption.label) != null ? _a : MARKET_PILL_MORE_LABEL;
   const isMoreButtonSelected = selectedHiddenOption != null;
-  const filteredOptions = useMemo3(() => {
+  const filteredOptions = useMemo4(() => {
     const normalizedSearchValue = searchValue.trim().toLowerCase();
     if (!normalizedSearchValue) return options;
     return options.filter((option) => option.label.toLowerCase().includes(normalizedSearchValue));
   }, [options, searchValue]);
-  const lastMeasuredKeyRef = useRef2(null);
-  const measureFrameRef = useRef2(null);
+  const lastMeasuredKeyRef = useRef(null);
+  const measureFrameRef = useRef(null);
   useLayoutEffect(() => {
     const measureLayout = () => {
       var _a2, _b, _c, _d, _e;
@@ -1468,7 +1390,7 @@ var EventListItemDetailsMarketSelector = ({
       }
     };
   }, [moreButtonLabel, options]);
-  useEffect2(() => {
+  useEffect(() => {
     if (typeof window === "undefined" || typeof window.matchMedia !== "function") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -1486,7 +1408,7 @@ var EventListItemDetailsMarketSelector = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isDropdownOpen) {
       setSearchValue("");
       return;
@@ -1535,7 +1457,7 @@ var EventListItemDetailsMarketSelector = ({
       resizeObserver.disconnect();
     };
   }, [isDropdownOpen, isMobileViewport, moreButtonLabel]);
-  useEffect2(() => {
+  useEffect(() => {
     if (!isDropdownOpen) return;
     const handlePointerDown = (event) => {
       var _a2;
@@ -1874,16 +1796,18 @@ var EventListItemDetailsGraphSection = ({
   selectedChartType,
   venueMarkets,
   livePrices,
+  wsLivePrices,
+  restMidpoints,
   live
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const labels = useLabels5();
   const tradingContext = useEventTradingContext();
-  const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState3(null);
+  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
   );
-  useEffect3(() => {
+  useEffect2(() => {
     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;
@@ -1897,15 +1821,15 @@ var EventListItemDetailsGraphSection = ({
     general: { theme }
   } = useSdkUiConfig2();
   const isDarkTheme = theme === "dark";
-  const timeWindow = useMemo4(() => {
+  const timeWindow = useMemo5(() => {
     return getTimeWindowByRange(selectedChartTimeRange);
   }, [selectedChartTimeRange]);
-  const availableMarkets = useMemo4(() => {
+  const availableMarkets = useMemo5(() => {
     if (venueMarkets.length === 0) return [];
     return normalizeVenueMarketCluster(venueMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarketId);
   }, [tradingContext == null ? void 0 : tradingContext.selectedMarketId, venueMarkets]);
   const resolvedChartOutcomeLabel = (_g = chartOutcomeLabel != null ? chartOutcomeLabel : (_f = (_e = tradingContext == null ? void 0 : tradingContext.selectedOutcome) == null ? void 0 : _e.label) == null ? void 0 : _f.trim()) != null ? _g : null;
-  const availableVenueOutcomes = useMemo4(() => {
+  const availableVenueOutcomes = useMemo5(() => {
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
         venueMarkets: availableMarkets,
@@ -1929,13 +1853,13 @@ var EventListItemDetailsGraphSection = ({
     enabled: availableVenueOutcomes.length > 0,
     live
   });
-  const selectedMarketOutcomes = useMemo4(() => {
+  const selectedMarketOutcomes = useMemo5(() => {
     var _a2, _b2;
     const selectedMarket = (_b2 = (_a2 = tradingContext == null ? void 0 : tradingContext.selectedMarket) != null ? _a2 : availableMarkets[0]) != null ? _b2 : null;
     if (!selectedMarket) return [];
     return sortOutcomeSelectorOutcomes(selectedMarket.venueMarketOutcomes);
   }, [availableMarkets, tradingContext == null ? void 0 : tradingContext.selectedMarket]);
-  const resolvedVenueChartSeries = useMemo4(() => {
+  const resolvedVenueChartSeries = useMemo5(() => {
     return resolveMarketChartVenueSeries({
       chartData: scopedMarketChartData,
       transformProbability: (v) => v
@@ -1948,31 +1872,31 @@ var EventListItemDetailsGraphSection = ({
       lineStyle: "solid"
     }));
   }, [isDarkTheme, scopedMarketChartData]);
-  const chartAvailableVenueOutcomes = useMemo4(() => {
+  const chartAvailableVenueOutcomes = useMemo5(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: scopedMarketChartData,
       venueOutcomes: availableVenueOutcomes
     });
   }, [availableVenueOutcomes, scopedMarketChartData]);
-  const defaultCandlestickVenue = useMemo4(() => {
+  const defaultCandlestickVenue = useMemo5(() => {
     var _a2, _b2, _c2, _d2, _e2, _f2;
     return (_f2 = (_e2 = (_c2 = (_a2 = chartAvailableVenueOutcomes.find((item) => item.venue === (tradingContext == null ? void 0 : tradingContext.selectedVenue))) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartAvailableVenueOutcomes[0]) == null ? void 0 : _b2.venue) != null ? _e2 : (_d2 = availableVenueOutcomes[0]) == null ? void 0 : _d2.venue) != null ? _f2 : null;
   }, [availableVenueOutcomes, chartAvailableVenueOutcomes, tradingContext == null ? void 0 : tradingContext.selectedVenue]);
   const activeGraphVenue = selectedChartType === "candlestick" ? selectedGraphVenue != null ? selectedGraphVenue : defaultCandlestickVenue : selectedGraphVenue;
-  const visibleChartSeries = useMemo4(() => {
+  const visibleChartSeries = useMemo5(() => {
     if (!activeGraphVenue) {
       return resolvedVenueChartSeries;
     }
     return resolvedVenueChartSeries.filter((seriesItem) => seriesItem.venue === activeGraphVenue);
   }, [activeGraphVenue, resolvedVenueChartSeries]);
-  const chartLiveState = useMemo4(() => {
+  const chartLiveState = useMemo5(() => {
     return resolveMarketChartLiveState({
       chartData: scopedMarketChartData,
       selectedVenue: activeGraphVenue,
       transformProbability: (v) => v
     });
   }, [activeGraphVenue, scopedMarketChartData]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!selectedGraphVenue) return;
     const hasSelectedGraphVenue = chartAvailableVenueOutcomes.some(
       (item) => item.venue === selectedGraphVenue
@@ -2030,7 +1954,7 @@ var EventListItemDetailsGraphSection = ({
                   ),
                   children: chartAvailableVenueOutcomes.map((item) => {
                     var _a3;
-                    const percentage = (_a3 = livePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price;
+                    const percentage = (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price;
                     const text = formatMarketProbabilityPercent(percentage, formatPercent);
                     const seriesId = `${item.venue}-chart`;
                     const isActiveVenue = activeGraphVenue === item.venue;
@@ -2091,8 +2015,8 @@ var EventListItemDetailsGraphSection = ({
                     tradingContext == null ? void 0 : tradingContext.selectOutcome(outcomeId);
                   },
                   options: selectedMarketOutcomes.map((outcome) => {
-                    var _a3;
-                    const price = (_a3 = livePrices.get(outcome.id)) != null ? _a3 : outcome.price;
+                    var _a3, _b3;
+                    const price = (_b3 = (_a3 = restMidpoints.get(outcome.id)) != null ? _a3 : livePrices.get(outcome.id)) != null ? _b3 : outcome.price;
                     return {
                       value: outcome.id,
                       label: `${outcome.label} ${formatProbabilityCents(price)}`,
@@ -2120,14 +2044,14 @@ var EventListItemDetailsContent = ({
   onClick
 }) => {
   var _a, _b;
-  const [selectedChartType, setSelectedChartType] = useState4("line");
-  const lastAppliedEventSyncKeyRef = useRef3(null);
-  const lastAppliedDefaultRef = useRef3(null);
+  const [selectedChartType, setSelectedChartType] = useState3("line");
+  const lastAppliedEventSyncKeyRef = useRef2(null);
+  const lastAppliedDefaultRef = useRef2(null);
   const config = useSdkUiConfig2();
   const labels = useLabels5();
   const tradingContext = useEventTradingContext();
-  const eventSyncKey = useMemo4(() => resolveEventDetailsSyncKey(event), [event]);
-  const resolvedEventTradingState = useMemo4(() => {
+  const eventSyncKey = useMemo5(() => resolveEventDetailsSyncKey(event), [event]);
+  const resolvedEventTradingState = useMemo5(() => {
     return eventTradingState != null ? eventTradingState : resolveEventTradingState(event);
   }, [event, eventTradingState]);
   const scopedSelectedMarket = (tradingContext == null ? void 0 : tradingContext.selectedEventId) === event.id ? (_a = tradingContext.selectedMarket) != null ? _a : resolvedEventTradingState.primaryMarket : resolvedEventTradingState.primaryMarket;
@@ -2137,7 +2061,7 @@ var EventListItemDetailsContent = ({
     scopedSelectedMarketId
   );
   const wsLivePrices = useLiveOutcomePrices(resolvedEventTradingState.displayMarkets);
-  const midpointsClusterMarkets = useMemo4(() => {
+  const midpointsClusterMarkets = useMemo5(() => {
     if (resolvedEventTradingState.isTradingDisabled) return [];
     return normalizeVenueMarketCluster(
       resolvedEventTradingState.displayMarkets,
@@ -2149,14 +2073,14 @@ var EventListItemDetailsContent = ({
     scopedSelectedMarketId
   ]);
   const { prices: restMidpoints } = useMidpoints(midpointsClusterMarkets);
-  const livePrices = useMemo4(() => {
+  const livePrices = useMemo5(() => {
     if (!restMidpoints.size) return wsLivePrices;
     if (!wsLivePrices.size) return restMidpoints;
     const merged = new Map(restMidpoints);
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [restMidpoints, wsLivePrices]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!tradingContext) return;
     if (lastAppliedEventSyncKeyRef.current === eventSyncKey) return;
     if ((tradingContext == null ? void 0 : tradingContext.selectedEventId) !== event.id) {
@@ -2166,7 +2090,7 @@ var EventListItemDetailsContent = ({
     }
     lastAppliedEventSyncKeyRef.current = eventSyncKey;
   }, [event, eventSyncKey, tradingContext]);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!tradingContext) return;
     if (!defaultMarketId) return;
     if (tradingContext.selectedEventId !== event.id) return;
@@ -2193,19 +2117,19 @@ var EventListItemDetailsContent = ({
     tradingContext,
     tradingContext == null ? void 0 : tradingContext.selectedEventId
   ]);
-  const venueMarkets = useMemo4(
+  const venueMarkets = useMemo5(
     () => resolvedEventTradingState.displayMarkets,
     [resolvedEventTradingState.displayMarkets]
   );
-  const sortedVenueMarkets = useMemo4(() => sortMarketsByYesOddsDesc(venueMarkets), [venueMarkets]);
-  const marketOptions = useMemo4(
+  const sortedVenueMarkets = useMemo5(() => sortMarketsByYesOddsDesc(venueMarkets), [venueMarkets]);
+  const marketOptions = useMemo5(
     () => sortedVenueMarkets.map((vm) => ({
       value: vm.id,
       label: vm.question
     })),
     [sortedVenueMarkets]
   );
-  const volumeLabel = useMemo4(() => {
+  const volumeLabel = useMemo5(() => {
     const resolvedVolume = resolveDisplayVolume(event.volume, venueMarkets);
     if (typeof resolvedVolume !== "number") return "";
     return `${config.formatting.formatCompactCurrency(resolvedVolume)} ${labels.eventItemDetails.volumeSuffix}`;
@@ -2309,6 +2233,8 @@ var EventListItemDetailsContent = ({
               venueInfo,
               venueMarkets,
               livePrices,
+              wsLivePrices,
+              restMidpoints,
               live: false
             }
           ),
@@ -2480,7 +2406,7 @@ var orderbookDefaultLabels = {
 };
 
 // src/events/orderbook/use-center-orderbook-spread.ts
-import { useCallback as useCallback3, useLayoutEffect as useLayoutEffect2, useRef as useRef4 } from "react";
+import { useCallback as useCallback2, useLayoutEffect as useLayoutEffect2, useRef as useRef3 } from "react";
 var maxAutoCenterAttempts = 12;
 var userScrollKeys = /* @__PURE__ */ new Set(["ArrowDown", "ArrowUp", "PageDown", "PageUp", "Home", "End", " "]);
 var useCenterOrderbookSpread = ({
@@ -2491,10 +2417,10 @@ var useCenterOrderbookSpread = ({
   rowCount,
   enabled = true
 }) => {
-  const hasAutoCenteredRef = useRef4(false);
-  const hasUserScrolledRef = useRef4(false);
-  const animationFrameRef = useRef4(null);
-  const retryCountRef = useRef4(0);
+  const hasAutoCenteredRef = useRef3(false);
+  const hasUserScrolledRef = useRef3(false);
+  const animationFrameRef = useRef3(null);
+  const retryCountRef = useRef3(0);
   const resetKey = marketId != null ? marketId : "";
   useLayoutEffect2(() => {
     const cancelPendingFrame = () => {
@@ -2539,18 +2465,42 @@ var useCenterOrderbookSpread = ({
     if (!enabled) return;
     if (hasAutoCenteredRef.current || hasUserScrolledRef.current) return;
     let isCancelled = false;
+    let resizeObserver = null;
     const cancelPendingFrame = () => {
       if (animationFrameRef.current === null) return;
       window.cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
     };
+    const disconnectResizeObserver = () => {
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      resizeObserver = null;
+    };
     const scheduleMeasurement = () => {
       cancelPendingFrame();
       animationFrameRef.current = window.requestAnimationFrame(measureAndCenter);
     };
+    const setupResizeObserverFallback = () => {
+      if (resizeObserver) return;
+      const container = containerRef.current;
+      if (!container) return;
+      resizeObserver = new ResizeObserver(() => {
+        if (isCancelled || hasAutoCenteredRef.current || hasUserScrolledRef.current) {
+          disconnectResizeObserver();
+          return;
+        }
+        if (container.clientHeight <= 0) return;
+        disconnectResizeObserver();
+        retryCountRef.current = 0;
+        scheduleMeasurement();
+      });
+      resizeObserver.observe(container);
+    };
     const scheduleRetry = () => {
       if (isCancelled || hasUserScrolledRef.current || hasAutoCenteredRef.current) return;
-      if (retryCountRef.current >= maxAutoCenterAttempts) return;
+      if (retryCountRef.current >= maxAutoCenterAttempts) {
+        setupResizeObserverFallback();
+        return;
+      }
       retryCountRef.current += 1;
       scheduleMeasurement();
     };
@@ -2575,6 +2525,11 @@ var useCenterOrderbookSpread = ({
       }
       const spreadOffsetTop = container.scrollTop + (spreadRect.top - containerRect.top);
       const maxScrollTop = Math.max(0, container.scrollHeight - containerHeight);
+      if (maxScrollTop === 0) {
+        retryCountRef.current = 0;
+        animationFrameRef.current = null;
+        return;
+      }
       const targetScrollTop = Math.max(
         0,
         Math.min(maxScrollTop, spreadOffsetTop - containerHeight / 2 + spreadRect.height / 2)
@@ -2583,14 +2538,16 @@ var useCenterOrderbookSpread = ({
       hasAutoCenteredRef.current = true;
       retryCountRef.current = 0;
       animationFrameRef.current = null;
+      disconnectResizeObserver();
     };
     scheduleMeasurement();
     return () => {
       isCancelled = true;
       cancelPendingFrame();
+      disconnectResizeObserver();
     };
   }, [containerRef, enabled, resetKey, rowCount, spreadRef]);
-  const recenter = useCallback3(() => {
+  const recenter = useCallback2(() => {
     const container = containerRef.current;
     const spread = spreadRef.current;
     if (!container || !spread) return;
@@ -2611,7 +2568,7 @@ var useCenterOrderbookSpread = ({
 
 // src/events/orderbook/index.tsx
 import { sortVenues as sortVenues3, useAggUiConfig } from "@agg-build/hooks";
-import { useEffect as useEffect4, useRef as useRef5 } from "react";
+import { useEffect as useEffect3, useRef as useRef4 } from "react";
 import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var OrderbookVenueLogos = ({ venues }) => {
   const visible = sortVenues3(venues).slice(0, orderbookMaxVisibleVenues);
@@ -2708,8 +2665,8 @@ var Orderbook = ({
   var _a, _b, _c, _d, _e;
   const { enableWebsocketsLogs } = useAggUiConfig();
   const labels = __spreadValues(__spreadValues({}, orderbookDefaultLabels), labelsProp);
-  const scrollContainerRef = useRef5(null);
-  const spreadRowRef = useRef5(null);
+  const scrollContainerRef = useRef4(null);
+  const spreadRowRef = useRef4(null);
   const autoCenterMarketId = (_a = marketId != null ? marketId : outcomeId) != null ? _a : null;
   const maxVisibleRows = Math.max(1, visibleRows);
   const totalVisibleRows = maxVisibleRows * 2 + 1;
@@ -2726,7 +2683,7 @@ var Orderbook = ({
   const spreadEntry = entries.find(
     (e) => e.kind === "spread"
   );
-  useEffect4(() => {
+  useEffect3(() => {
     var _a2, _b2;
     if (!enableWebsocketsLogs) return;
     console.debug("[AggUI][orderbook] component_rendered", {
@@ -2926,7 +2883,7 @@ import {
   useVenueMarkets as useVenueMarkets2,
   useViewportMidpoints
 } from "@agg-build/hooks";
-import { useEffect as useEffect5, useId as useId2, useMemo as useMemo5, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect4, useId, useMemo as useMemo6, useRef as useRef5, useState as useState4 } from "react";
 
 // src/events/market-details/market-details-outcome-button.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -2988,6 +2945,7 @@ var MarketDetailsOutcomeButton = ({
       type: "button",
       role: "tab",
       "data-id": item.id,
+      "data-venue": item.venue,
       "aria-controls": ariaControls,
       "aria-selected": isSelected,
       tabIndex: isSelected ? 0 : -1,
@@ -3089,7 +3047,8 @@ var MarketDetailsContent = ({
   classNames,
   otherContent,
   live,
-  midpointsFallback
+  midpointsFallback,
+  midpointsFallbackVenues
 }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const config = useSdkUiConfig3();
@@ -3101,9 +3060,9 @@ var MarketDetailsContent = ({
   const isDarkTheme = theme === "dark";
   const labels = useLabels6();
   const tradingContext = useEventTradingContext2();
-  const detailsContentId = useId2();
+  const detailsContentId = useId();
   const wsLivePrices = useLiveOutcomePrices2(venueMarkets);
-  const model = useMemo5(() => {
+  const model = useMemo6(() => {
     return buildMarketDetailsModel({
       venueMarkets,
       marketId,
@@ -3113,15 +3072,15 @@ var MarketDetailsContent = ({
       labels
     });
   }, [config.formatting.formatCompactCurrency, venueMarkets, image, labels, marketId, title]);
-  const resolvedMarket = useMemo5(() => {
+  const resolvedMarket = useMemo6(() => {
     return resolveMarketFromVenueMarkets(venueMarkets, marketId);
   }, [venueMarkets, marketId]);
-  const clusterMidpointMarkets = useMemo5(() => {
+  const clusterMidpointMarkets = useMemo6(() => {
     if (!controlledIsOpened || !resolvedMarket) return [];
     return resolvedMarket.venueMarkets;
   }, [controlledIsOpened, resolvedMarket]);
-  const { prices: clusterMidpoints } = useMidpoints2(clusterMidpointMarkets);
-  const livePrices = useMemo5(() => {
+  const { prices: clusterMidpoints, venueByOutcomeId: clusterVenueByOutcomeId } = useMidpoints2(clusterMidpointMarkets);
+  const livePrices = useMemo6(() => {
     const merged = /* @__PURE__ */ new Map();
     if (midpointsFallback == null ? void 0 : midpointsFallback.size) {
       for (const [outcomeId, price] of midpointsFallback) {
@@ -3136,49 +3095,49 @@ var MarketDetailsContent = ({
     for (const [k, v] of wsLivePrices) merged.set(k, v);
     return merged;
   }, [clusterMidpoints, midpointsFallback, wsLivePrices]);
-  const scopedMarketForCard = useMemo5(() => {
+  const scopedMarketForCard = useMemo6(() => {
     var _a2;
     if (!model) return null;
     return (_a2 = model.market.venueMarkets.find((venueMarket) => venueMarket.id === model.market.id)) != null ? _a2 : model.primaryVenueMarket;
   }, [model]);
-  const marketTradingState = useMemo5(() => {
+  const marketTradingState = useMemo6(() => {
     return resolveMarketTradingState(scopedMarketForCard);
   }, [scopedMarketForCard]);
   const isResolvedMarket = marketTradingState.kind === "resolved";
   const isOutcomeSelectionLocked = marketTradingState.isTradingDisabled;
   const isUpcomingMarket = marketTradingState.kind === "unopened";
   const marketStatePresentation = resolveTradingStatePresentation(labels, marketTradingState);
-  const marketDetailsTabs = useMemo5(() => {
+  const marketDetailsTabs = useMemo6(() => {
     return getMarketDetailsTabs(labels);
   }, [labels]);
-  const [selectedTab, setSelectedTab] = useState5(
+  const [selectedTab, setSelectedTab] = useState4(
     () => resolveInitialTab(defaultTab)
   );
-  const [isOpened, setIsOpened] = useState5(controlledIsOpened);
-  useEffect5(() => {
+  const [isOpened, setIsOpened] = useState4(controlledIsOpened);
+  useEffect4(() => {
     setSelectedTab(resolveInitialTab(defaultTab));
   }, [defaultTab]);
-  useEffect5(() => {
+  useEffect4(() => {
     setIsOpened(controlledIsOpened);
   }, [controlledIsOpened]);
   const selectedTimeRange = config.chart.selectedChartTimeRange;
   const setSelectedTimeRange = config.chart.setSelectedChartTimeRange;
   const effectiveSelectedTab = isResolvedMarket ? "graph" : selectedTab;
   const effectiveChartTimeRange = isResolvedMarket ? "ALL" : selectedTimeRange;
-  const [selectedChartType, setSelectedChartType] = useState5("line");
+  const [selectedChartType, setSelectedChartType] = useState4("line");
   const scopedSelectedOutcome = (_a = tradingContext == null ? void 0 : tradingContext.selectedOutcome) != null ? _a : null;
   const selectedOutcomeId = (_b = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.id) != null ? _b : null;
   const selectedOutcomeLabel = (_c = scopedSelectedOutcome == null ? void 0 : scopedSelectedOutcome.label) != null ? _c : null;
   const selectOutcome = tradingContext == null ? void 0 : tradingContext.selectOutcome;
-  const [selectedGraphVenue, setSelectedGraphVenue] = useState5(null);
-  const [chartOutcomeLabel, setChartOutcomeLabel] = useState5(selectedOutcomeLabel);
-  useEffect5(() => {
+  const [selectedGraphVenue, setSelectedGraphVenue] = useState4(null);
+  const [chartOutcomeLabel, setChartOutcomeLabel] = useState4(selectedOutcomeLabel);
+  useEffect4(() => {
     if (!isOpened) return;
     if (selectedOutcomeLabel) {
       setChartOutcomeLabel(selectedOutcomeLabel);
     }
   }, [isOpened]);
-  useEffect5(() => {
+  useEffect4(() => {
     var _a2;
     if (!isOpened || !model) return;
     if (isOutcomeSelectionLocked) return;
@@ -3198,29 +3157,44 @@ var MarketDetailsContent = ({
     selectedOutcomeId,
     selectOutcome
   ]);
-  const headerOutcomeItems = useMemo5(() => {
+  const headerOutcomeItems = useMemo6(() => {
     if (!model) return [];
     const items = resolveHeaderOutcomeItems(model.market.venueMarkets);
     return items.map((item) => {
-      const livePrice = findLivePriceById(livePrices, item.id);
-      return livePrice != null ? __spreadProps(__spreadValues({}, item), { probability: livePrice }) : item;
+      const clusterPrice = clusterMidpoints.get(item.id);
+      if (clusterPrice != null) {
+        const bestVenue = clusterVenueByOutcomeId.get(item.id);
+        return __spreadValues(__spreadProps(__spreadValues({}, item), { probability: clusterPrice }), bestVenue ? { venue: bestVenue } : {});
+      }
+      const fallbackPrice = midpointsFallback == null ? void 0 : midpointsFallback.get(item.id);
+      if (fallbackPrice != null) {
+        const bestVenue = midpointsFallbackVenues == null ? void 0 : midpointsFallbackVenues.get(item.id);
+        return __spreadValues(__spreadProps(__spreadValues({}, item), { probability: fallbackPrice }), bestVenue ? { venue: bestVenue } : {});
+      }
+      const wsPrice = findLivePriceById(wsLivePrices, item.id);
+      return wsPrice != null ? __spreadProps(__spreadValues({}, item), { probability: wsPrice }) : item;
     });
-  }, [model, livePrices]);
-  const headlineProbability = useMemo5(() => {
-    var _a2, _b2;
+  }, [
+    model,
+    clusterMidpoints,
+    clusterVenueByOutcomeId,
+    midpointsFallback,
+    midpointsFallbackVenues,
+    wsLivePrices
+  ]);
+  const headlineProbability = useMemo6(() => {
+    var _a2, _b2, _c2, _d2;
     if (!model || !scopedMarketForCard) return void 0;
-    const resolveLiveProbability = (outcomeId, fallbackPrice) => {
-      const liveProbability = findLivePriceById(livePrices, outcomeId);
-      return liveProbability != null ? liveProbability : fallbackPrice;
-    };
     const yesOutcome = resolveYesOutcome(scopedMarketForCard);
     const displayOutcome = yesOutcome != null ? yesOutcome : (_b2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _b2.reduce(
       (acc, outcome) => outcome.price > acc.price ? outcome : acc,
       (_a2 = scopedMarketForCard.venueMarketOutcomes) == null ? void 0 : _a2[0]
     );
-    return resolveLiveProbability(displayOutcome.id, displayOutcome.price);
-  }, [model, scopedMarketForCard, livePrices]);
-  const selectedOutcomesByVenue = useMemo5(() => {
+    const restPrice = (_c2 = clusterMidpoints.get(displayOutcome.id)) != null ? _c2 : midpointsFallback == null ? void 0 : midpointsFallback.get(displayOutcome.id);
+    if (restPrice != null) return restPrice;
+    return (_d2 = findLivePriceById(wsLivePrices, displayOutcome.id)) != null ? _d2 : displayOutcome.price;
+  }, [model, scopedMarketForCard, clusterMidpoints, midpointsFallback, wsLivePrices]);
+  const selectedOutcomesByVenue = useMemo6(() => {
     if (!model) return [];
     return collectEligibleVenueOutcomes({
       venueMarkets: model.market.venueMarkets,
@@ -3228,7 +3202,7 @@ var MarketDetailsContent = ({
     });
   }, [model, selectedOutcomeLabel]);
   const resolvedChartOutcomeLabel = chartOutcomeLabel != null ? chartOutcomeLabel : selectedOutcomeLabel;
-  const chartOutcomesByVenue = useMemo5(() => {
+  const chartOutcomesByVenue = useMemo6(() => {
     if (!model) return [];
     return resolveChartVenueOutcomes({
       eligibleVenueOutcomes: collectEligibleVenueOutcomes({
@@ -3240,13 +3214,13 @@ var MarketDetailsContent = ({
   }, [livePrices, model, resolvedChartOutcomeLabel]);
   const chartEnabled = isOpened && effectiveSelectedTab === "graph";
   const orderBookEnabled = isOpened && effectiveSelectedTab === "order-book" && !marketTradingState.isTradingDisabled;
-  const timeWindow = useMemo5(() => {
+  const timeWindow = useMemo6(() => {
     return getTimeWindowByRange(effectiveChartTimeRange);
   }, [effectiveChartTimeRange]);
   const primaryVenueMarketId = (_e = (_d = selectedOutcomesByVenue[0]) == null ? void 0 : _d.market.id) != null ? _e : null;
   const primaryOutcomeId = (_g = (_f = selectedOutcomesByVenue[0]) == null ? void 0 : _f.outcome.id) != null ? _g : null;
   const chartPrimaryOutcomeId = (_i = (_h = chartOutcomesByVenue[0]) == null ? void 0 : _h.outcome.id) != null ? _i : null;
-  const chartVenueOutcomeIds = useMemo5(() => {
+  const chartVenueOutcomeIds = useMemo6(() => {
     return chartOutcomesByVenue.map((item) => item.outcome.id);
   }, [chartOutcomesByVenue]);
   const {
@@ -3272,14 +3246,14 @@ var MarketDetailsContent = ({
     })),
     live
   });
-  const marketOrderbookDataById = useMemo5(() => {
+  const marketOrderbookDataById = useMemo6(() => {
     var _a2;
     return (_a2 = marketOrderbookResult.dataById) != null ? _a2 : {};
   }, [marketOrderbookResult]);
   const isOrderBookLoading = marketOrderbookResult.isLoading;
   const orderBookError = marketOrderbookResult.error;
   const refetchOrderBook = marketOrderbookResult.refetch;
-  const aggregatedOrderbookRows = useMemo5(() => {
+  const aggregatedOrderbookRows = useMemo6(() => {
     return mergeVenueOutcomeOrderbooks({
       eligibleOutcomes: selectedOutcomesByVenue,
       orderbooksByOutcomeId: marketOrderbookDataById
@@ -3287,7 +3261,7 @@ var MarketDetailsContent = ({
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
   const askRows = aggregatedOrderbookRows.askRows;
   const bidRows = aggregatedOrderbookRows.bidRows;
-  const unifiedEntries = useMemo5(() => {
+  const unifiedEntries = useMemo6(() => {
     return resolveUnifiedOrderBookEntries({
       askRows,
       bidRows,
@@ -3295,7 +3269,7 @@ var MarketDetailsContent = ({
       spread: aggregatedOrderbookRows.spread
     });
   }, [aggregatedOrderbookRows.midpoint, aggregatedOrderbookRows.spread, askRows, bidRows]);
-  const orderbookSnapshotKey = useMemo5(() => {
+  const orderbookSnapshotKey = useMemo6(() => {
     if (selectedOutcomesByVenue.length === 0) return null;
     return selectedOutcomesByVenue.map((item) => {
       var _a2, _b2;
@@ -3303,13 +3277,13 @@ var MarketDetailsContent = ({
       return `${item.outcomeId}:${snapshotVersion}`;
     }).join("|");
   }, [marketOrderbookDataById, selectedOutcomesByVenue]);
-  const chartAvailableOutcomesByVenue = useMemo5(() => {
+  const chartAvailableOutcomesByVenue = useMemo6(() => {
     return filterChartVenueOutcomesByRenderableVenues({
       chartData: marketChartData,
       venueOutcomes: chartOutcomesByVenue
     });
   }, [chartOutcomesByVenue, marketChartData]);
-  const graphSeries = useMemo5(() => {
+  const graphSeries = useMemo6(() => {
     var _a2, _b2, _c2, _d2;
     const baseColor = resolveSeriesColor(
       (_d2 = (_c2 = selectedGraphVenue != null ? selectedGraphVenue : (_a2 = chartAvailableOutcomesByVenue[0]) == null ? void 0 : _a2.venue) != null ? _c2 : (_b2 = chartOutcomesByVenue[0]) == null ? void 0 : _b2.venue) != null ? _d2 : "polymarket",
@@ -3337,14 +3311,14 @@ var MarketDetailsContent = ({
     chartAvailableOutcomesByVenue,
     chartOutcomesByVenue
   ]);
-  const graphLiveState = useMemo5(() => {
+  const graphLiveState = useMemo6(() => {
     return resolveMarketChartLiveState({
       chartData: marketChartData,
       selectedVenue: selectedGraphVenue,
       transformProbability: (value) => value
     });
   }, [marketChartData, selectedGraphVenue]);
-  const otherRows = useMemo5(() => {
+  const otherRows = useMemo6(() => {
     if (!model) return [];
     return resolveOtherTabRows(model.market, labels);
   }, [labels, model]);
@@ -3418,7 +3392,7 @@ var MarketDetailsContent = ({
     title: labels.marketDetails.orderBookEmptyTitle,
     description: labels.marketDetails.orderBookEmptyDescription
   } : { kind: "data" };
-  useEffect5(() => {
+  useEffect4(() => {
     if (!selectedGraphVenue) {
       return;
     }
@@ -3719,7 +3693,7 @@ var MarketDetailsContent = ({
                                 /* @__PURE__ */ jsx9("div", { className: "agg-market-venues flex flex-wrap gap-2", children: chartAvailableOutcomesByVenue.map((item) => {
                                   var _a3;
                                   const probability = formatProbabilityPercent(
-                                    (_a3 = livePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
+                                    (_a3 = wsLivePrices.get(item.outcome.id)) != null ? _a3 : item.outcome.price,
                                     formatPercent
                                   );
                                   const isActiveVenue = selectedGraphVenue === item.venue;
@@ -3765,8 +3739,7 @@ var MarketDetailsContent = ({
                                       setChartOutcomeLabel(outcome.label);
                                     },
                                     options: headerOutcomeItems.map((outcome) => {
-                                      var _a3;
-                                      const price = (_a3 = livePrices.get(outcome.id)) != null ? _a3 : outcome.probability;
+                                      const price = outcome.probability;
                                       const outcomeLabel = `${outcome.label} ${formatProbabilityCents(price)}`;
                                       return {
                                         value: outcome.id,
@@ -3872,7 +3845,8 @@ var MarketDetails = (_a) => {
         isOpened,
         onOpenChange: props.onOpenChange,
         venueMarkets: props.venueMarkets,
-        midpointsFallback: props.midpointsFallback
+        midpointsFallback: props.midpointsFallback,
+        midpointsFallbackVenues: props.midpointsFallbackVenues
       })
     );
   }
@@ -3934,9 +3908,9 @@ var MarketDetailsList = ({
   const labels = useLabels6();
   const tradingContext = useEventTradingContext2();
   const selectedMarketId = (_a = tradingContext == null ? void 0 : tradingContext.selectedMarketId) != null ? _a : null;
-  const [expandedMarketId, setExpandedMarketId] = useState5(selectedMarketId);
-  const previousSelectedMarketIdRef = useRef6(selectedMarketId);
-  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState5(false);
+  const [expandedMarketId, setExpandedMarketId] = useState4(selectedMarketId);
+  const previousSelectedMarketIdRef = useRef5(selectedMarketId);
+  const [areResolvedMarketsVisible, setAreResolvedMarketsVisible] = useState4(false);
   const resolvedEventId = eventId || "";
   const {
     markets: rawMarkets,
@@ -3949,7 +3923,7 @@ var MarketDetailsList = ({
     sortBy: "yesPrice",
     sortDir: "desc"
   });
-  const sourceMarkets = useMemo5(() => {
+  const sourceMarkets = useMemo6(() => {
     var _a2;
     if ((_a2 = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _a2.length) {
       return eventTradingState.marketStates.map((item) => item.market);
@@ -3957,10 +3931,10 @@ var MarketDetailsList = ({
     if (providedMarkets) return providedMarkets;
     return rawMarkets;
   }, [eventTradingState == null ? void 0 : eventTradingState.marketStates, providedMarkets, rawMarkets]);
-  const isResolvedEvent = useMemo5(() => {
+  const isResolvedEvent = useMemo6(() => {
     return resolveIsResolvedEvent(sourceMarkets, eventTradingState);
   }, [eventTradingState, sourceMarkets]);
-  const groupedMarkets = useMemo5(() => {
+  const groupedMarkets = useMemo6(() => {
     const sortedMarkets = sortMarketsByYesOddsDesc(sourceMarkets);
     if (sortedMarkets.length === 0) {
       return {
@@ -4001,16 +3975,16 @@ var MarketDetailsList = ({
     return { primary, upcoming, resolved, closed };
   }, [eventTradingState, isResolvedEvent, sourceMarkets]);
   const shouldShowResolvedToggle = !isResolvedEvent && groupedMarkets.resolved.length > 0;
-  const visibleResolvedMarkets = useMemo5(() => {
+  const visibleResolvedMarkets = useMemo6(() => {
     if (isResolvedEvent || areResolvedMarketsVisible) return groupedMarkets.resolved;
     return [];
   }, [areResolvedMarketsVisible, groupedMarkets.resolved, isResolvedEvent]);
-  const displayedMarkets = useMemo5(() => {
+  const displayedMarkets = useMemo6(() => {
     return [...groupedMarkets.primary, ...visibleResolvedMarkets];
   }, [groupedMarkets.primary, visibleResolvedMarkets]);
   const hasPrefetchedMarkets = !!providedMarkets || !!((_b = eventTradingState == null ? void 0 : eventTradingState.marketStates) == null ? void 0 : _b.length);
-  const { prices: midpointsFallback } = useViewportMidpoints(displayedMarkets);
-  useEffect5(() => {
+  const { prices: midpointsFallback, venueByOutcomeId: midpointsFallbackVenues } = useViewportMidpoints(displayedMarkets);
+  useEffect4(() => {
     if (isResolvedEvent) {
       setAreResolvedMarketsVisible(false);
       return;
@@ -4019,14 +3993,14 @@ var MarketDetailsList = ({
       setAreResolvedMarketsVisible(false);
     }
   }, [groupedMarkets.resolved.length, isResolvedEvent]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (previousSelectedMarketIdRef.current === selectedMarketId) return;
     previousSelectedMarketIdRef.current = selectedMarketId;
     if (!selectedMarketId) return;
     if (!displayedMarkets.some((market) => market.id === selectedMarketId)) return;
     setExpandedMarketId(selectedMarketId);
   }, [displayedMarkets, selectedMarketId]);
-  useEffect5(() => {
+  useEffect4(() => {
     if (displayedMarkets.length === 0) return;
     if (selectedMarketId && displayedMarkets.some((market) => market.id === selectedMarketId)) {
       return;
@@ -4045,7 +4019,7 @@ var MarketDetailsList = ({
     }
     tradingContext == null ? void 0 : tradingContext.selectMarket(fallbackSelectableMarket.id, fallbackSelectableMarket);
   }, [displayedMarkets, expandedMarketId, selectedMarketId, sourceMarkets, tradingContext]);
-  useEffect5(() => {
+  useEffect4(() => {
     var _a2, _b2;
     if (!expandedMarketId) return;
     if (displayedMarkets.some((market) => market.id === expandedMarketId)) return;
@@ -4122,7 +4096,8 @@ var MarketDetailsList = ({
       ariaLabel: market.question,
       classNames: { root: cn("agg-market-list-item", classNames == null ? void 0 : classNames.item) },
       live,
-      midpointsFallback
+      midpointsFallback,
+      midpointsFallbackVenues
     }
   ) }, market.id);
   return /* @__PURE__ */ jsxs7("div", { className: cn("agg-market-list flex flex-col gap-3", classNames == null ? void 0 : classNames.root), children: [
@@ -4157,11 +4132,11 @@ MarketDetailsList.displayName = "MarketDetailsList";
 // src/events/list/index.tsx
 import { MarketStatus as MarketStatus2, useAppConfig as useAppConfig2, useLabels as useLabels8, useVenueEvents } from "@agg-build/hooks";
 import { VENUES } from "@agg-build/sdk";
-import { useEffect as useEffect7, useMemo as useMemo7, useRef as useRef8, useState as useState7 } from "react";
+import { useEffect as useEffect6, useMemo as useMemo8, useRef as useRef7, useState as useState6 } from "react";
 
 // src/events/list/event-list-tabs.tsx
 import { useAppConfig, useLabels as useLabels7 } from "@agg-build/hooks";
-import { useCallback as useCallback4, useEffect as useEffect6, useMemo as useMemo6, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo7, useRef as useRef6, useState as useState5 } from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var renderTabIcon = (tab, isActive) => {
   if (tab.venueLogo) {
@@ -4180,7 +4155,7 @@ var renderTabIcon = (tab, isActive) => {
 var useEventListTabs = (tabs) => {
   const labels = useLabels7();
   const { disabledVenues } = useAppConfig();
-  return useMemo6(() => {
+  return useMemo7(() => {
     const baseTabs = tabs != null ? tabs : getDefaultEventListTabs(labels);
     if (disabledVenues.length === 0) return baseTabs;
     const disabled = new Set(disabledVenues);
@@ -4199,12 +4174,12 @@ var EventListTabs = ({
   overflowBehavior
 }) => {
   const resolvedTabs = useEventListTabs(tabs);
-  useEffect6(() => {
+  useEffect5(() => {
     if (resolvedTabs.length === 0) return;
     if (resolvedTabs.some((tab) => tab.value === activeTab)) return;
     onTabChange(resolvedTabs[0].value);
   }, [activeTab, onTabChange, resolvedTabs]);
-  const items = useMemo6(() => {
+  const items = useMemo7(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTab;
       return {
@@ -4230,11 +4205,11 @@ var EventListTabs = ({
 };
 EventListTabs.displayName = "EventListTabs";
 var useEventListTabsHeaderOverflow = (recomputeOn) => {
-  const headerRef = useRef7(null);
-  const titleRef = useRef7(null);
-  const requiredTabsWidthRef = useRef7(0);
-  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState6(false);
-  const updateTabsOverflowBehavior = useCallback4(() => {
+  const headerRef = useRef6(null);
+  const titleRef = useRef6(null);
+  const requiredTabsWidthRef = useRef6(0);
+  const [shouldUseSelectOverflow, setShouldUseSelectOverflow] = useState5(false);
+  const updateTabsOverflowBehavior = useCallback3(() => {
     if (typeof window === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -4260,10 +4235,10 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
     if (requiredTabsWidthRef.current <= 0) return;
     setShouldUseSelectOverflow(requiredTabsWidthRef.current > availableTabsWidth);
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     updateTabsOverflowBehavior();
   }, [recomputeOn, updateTabsOverflowBehavior]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (typeof window === "undefined") return;
     const handleResize = () => {
       updateTabsOverflowBehavior();
@@ -4273,7 +4248,7 @@ var useEventListTabsHeaderOverflow = (recomputeOn) => {
       window.removeEventListener("resize", handleResize);
     };
   }, [updateTabsOverflowBehavior]);
-  useEffect6(() => {
+  useEffect5(() => {
     if (typeof ResizeObserver === "undefined") return;
     const headerElement = headerRef.current;
     const titleElement = titleRef.current;
@@ -4310,32 +4285,32 @@ var EventList = ({
   const labels = useLabels8();
   const { disabledVenues } = useAppConfig2();
   const resolvedTabs = useEventListTabs();
-  const visibleVenues = useMemo7(
+  const visibleVenues = useMemo8(
     () => disabledVenues.length === 0 ? void 0 : VENUES.filter(
       (v) => !disabledVenues.includes(v)
     ),
     [disabledVenues]
   );
-  const [activeTabValue, setActiveTabValue] = useState7(
+  const [activeTabValue, setActiveTabValue] = useState6(
     (_b = initialVenueTab != null ? initialVenueTab : (_a = resolvedTabs[0]) == null ? void 0 : _a.value) != null ? _b : "matched"
   );
   const { headerRef, titleRef, shouldUseSelectOverflow } = useEventListTabsHeaderOverflow(resolvedTabs);
-  const activeTab = useMemo7(() => {
+  const activeTab = useMemo8(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const venues = useMemo7(() => {
+  const venues = useMemo8(() => {
     return resolveTabVenus(activeTab, visibleVenues);
   }, [activeTab, visibleVenues]);
-  const matchStatus = useMemo7(() => {
+  const matchStatus = useMemo8(() => {
     return activeTabValue === "matched" ? activeTab == null ? void 0 : activeTab.matchStatus : void 0;
   }, [activeTabValue, activeTab]);
-  const resolvedMaxVisibleItems = useMemo7(() => {
+  const resolvedMaxVisibleItems = useMemo8(() => {
     if (!Number.isFinite(maxVisibleItems)) return void 0;
     return Math.max(1, Math.floor(maxVisibleItems));
   }, [maxVisibleItems]);
   const requestLimit = resolvedMaxVisibleItems != null ? resolvedMaxVisibleItems : limit;
   const shouldPaginate = resolvedMaxVisibleItems == null;
-  const endDateFrom = useMemo7(() => {
+  const endDateFrom = useMemo8(() => {
     if (search) return void 0;
     const BUCKET_MINUTES = 5;
     const bucket = /* @__PURE__ */ new Date();
@@ -4368,21 +4343,21 @@ var EventList = ({
   } : {}), {
     initialPages: initialLoadedPageCount
   }));
-  useEffect7(() => {
+  useEffect6(() => {
     if (stateRef) {
       stateRef.current = { venueTab: activeTabValue, loadedPageCount };
     }
   }, [stateRef, activeTabValue, loadedPageCount]);
-  const filteredEvents = useMemo7(() => {
+  const filteredEvents = useMemo8(() => {
     return filterEventsByTabValue(events, activeTabValue);
   }, [events, activeTabValue]);
-  const groupedEvents = useMemo7(() => {
+  const groupedEvents = useMemo8(() => {
     return splitEventsByLifecycle(filteredEvents);
   }, [filteredEvents]);
-  const orderedEvents = useMemo7(() => {
+  const orderedEvents = useMemo8(() => {
     return groupedEvents.open;
   }, [groupedEvents.open]);
-  const tileEvents = useMemo7(() => {
+  const tileEvents = useMemo8(() => {
     const normalizedEvents = orderedEvents.map((event) => mapEventToEventListItemEvent(event)).filter((event) => event != null);
     if (resolvedMaxVisibleItems == null) return normalizedEvents;
     return normalizedEvents.slice(0, resolvedMaxVisibleItems);
@@ -4390,8 +4365,8 @@ var EventList = ({
   const shouldRenderLoadingState = isLoading && !isPlaceholderData && tileEvents.length === 0;
   const shouldRenderEmptyState = !isLoading && !isError && tileEvents.length === 0;
   const shouldRenderPaginationLoadingItems = shouldPaginate && hasNextPage;
-  const loadMoreRef = useRef8(null);
-  useEffect7(() => {
+  const loadMoreRef = useRef7(null);
+  useEffect6(() => {
     if (!shouldPaginate) return;
     if (!hasNextPage) return;
     if (typeof IntersectionObserver === "undefined") return;