@agg-build/ui 1.3.0 → 2.1.0

package/dist/primitives.js

@@ -5002,7 +5002,7 @@ var Footer = ({
         "div",
         {
           className: cn(
-            "agg-footer-inner mx-auto flex h-10 w-full max-w-[1360px] px-6 lg:px-10 items-center justify-between",
+            "agg-footer-inner mx-auto flex h-10 w-full max-w-[1440px] px-6 lg:px-10 items-center justify-between",
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
@@ -5133,292 +5133,14 @@ var import_hooks27 = require("@agg-build/hooks");
 var import_react9 = require("react");
 
 // src/events/list/event-list.utils.ts
-var import_hooks9 = require("@agg-build/hooks");
-var import_sdk = require("@agg-build/sdk");
-
-// src/events/item/event-list-item.utils.ts
 var import_hooks8 = require("@agg-build/hooks");
-
-// src/events/shared/venue-market-cluster.ts
-var toNonEmptyString = (value) => {
-  if (typeof value !== "string") return void 0;
-  const trimmedValue = value.trim();
-  return trimmedValue ? trimmedValue : void 0;
-};
-var addGraphEdge = (adjacencyById, fromMarketId, toMarketId) => {
-  var _a, _b;
-  if (fromMarketId === toMarketId) return;
-  const fromNeighbors = (_a = adjacencyById.get(fromMarketId)) != null ? _a : /* @__PURE__ */ new Set();
-  fromNeighbors.add(toMarketId);
-  adjacencyById.set(fromMarketId, fromNeighbors);
-  const toNeighbors = (_b = adjacencyById.get(toMarketId)) != null ? _b : /* @__PURE__ */ new Set();
-  toNeighbors.add(fromMarketId);
-  adjacencyById.set(toMarketId, toNeighbors);
-};
-var dedupeSourceMarketsById = (markets) => {
-  const seenMarketIds = /* @__PURE__ */ new Set();
-  return markets.filter((market) => {
-    if (seenMarketIds.has(market.id)) {
-      return false;
-    }
-    seenMarketIds.add(market.id);
-    return true;
-  });
-};
-var collectDirectRelationMarkets = (market) => {
-  var _a, _b, _c;
-  const relationMarkets = [];
-  const seenRelationIds = /* @__PURE__ */ new Set();
-  const addRelationMarket = (relationMarket) => {
-    if (!relationMarket) return;
-    if (seenRelationIds.has(relationMarket.id)) return;
-    seenRelationIds.add(relationMarket.id);
-    relationMarkets.push(relationMarket);
-  };
-  for (const matchedVenueMarket of (_a = market.matchedVenueMarkets) != null ? _a : []) {
-    addRelationMarket(matchedVenueMarket);
-  }
-  addRelationMarket(
-    (_c = (_b = market.matchEntry) == null ? void 0 : _b.targetVenueMarket) != null ? _c : void 0
-  );
-  return relationMarkets;
-};
-var collectUniqueRelatedMarkets = (markets, sourceMarketsById) => {
-  const relatedMarketsById = /* @__PURE__ */ new Map();
-  for (const market of markets) {
-    for (const relatedMarket of collectDirectRelationMarkets(market)) {
-      if (sourceMarketsById.has(relatedMarket.id) || relatedMarketsById.has(relatedMarket.id)) {
-        continue;
-      }
-      relatedMarketsById.set(relatedMarket.id, relatedMarket);
-    }
-  }
-  return Array.from(relatedMarketsById.values());
-};
-var normalizeVenueMarketCluster = (markets, selectedMarketId) => {
-  var _a, _b;
-  if (markets.length === 0) return [];
-  const orderedSourceMarkets = dedupeSourceMarketsById(markets);
-  const sourceMarketsById = new Map(orderedSourceMarkets.map((market) => [market.id, market]));
-  const orderedRelatedMarkets = collectUniqueRelatedMarkets(
-    orderedSourceMarkets,
-    sourceMarketsById
-  );
-  const relatedMarketsById = new Map(orderedRelatedMarkets.map((market) => [market.id, market]));
-  const resolvedSelectedMarketId = toNonEmptyString(selectedMarketId);
-  if (!resolvedSelectedMarketId) {
-    return [...orderedSourceMarkets, ...orderedRelatedMarkets];
-  }
-  const adjacencyById = /* @__PURE__ */ new Map();
-  for (const market of orderedSourceMarkets) {
-    for (const relatedMarket of collectDirectRelationMarkets(market)) {
-      addGraphEdge(adjacencyById, market.id, relatedMarket.id);
-    }
-    const targetVenueMarketId = toNonEmptyString((_a = market.matchEntry) == null ? void 0 : _a.targetVenueMarketId);
-    if (targetVenueMarketId) {
-      addGraphEdge(adjacencyById, market.id, targetVenueMarketId);
-    }
-  }
-  if (!sourceMarketsById.has(resolvedSelectedMarketId) && !relatedMarketsById.has(resolvedSelectedMarketId)) {
-    return [];
-  }
-  const visitedMarketIds = /* @__PURE__ */ new Set();
-  const queue = [resolvedSelectedMarketId];
-  while (queue.length > 0) {
-    const currentMarketId = queue.shift();
-    if (!currentMarketId || visitedMarketIds.has(currentMarketId)) {
-      continue;
-    }
-    visitedMarketIds.add(currentMarketId);
-    const neighborMarketIds = adjacencyById.get(currentMarketId);
-    for (const neighborMarketId of Array.from(neighborMarketIds != null ? neighborMarketIds : /* @__PURE__ */ new Set())) {
-      if (!visitedMarketIds.has(neighborMarketId)) {
-        queue.push(neighborMarketId);
-      }
-    }
-  }
-  const orderedClusterMarkets = [];
-  const appendedMarketIds = /* @__PURE__ */ new Set();
-  const appendMarket = (market) => {
-    if (!market) return;
-    if (!visitedMarketIds.has(market.id)) return;
-    if (appendedMarketIds.has(market.id)) return;
-    appendedMarketIds.add(market.id);
-    orderedClusterMarkets.push(market);
-  };
-  appendMarket(
-    (_b = sourceMarketsById.get(resolvedSelectedMarketId)) != null ? _b : relatedMarketsById.get(resolvedSelectedMarketId)
-  );
-  for (const market of orderedSourceMarkets) {
-    appendMarket(market);
-  }
-  for (const market of orderedRelatedMarkets) {
-    appendMarket(market);
-  }
-  return orderedClusterMarkets;
-};
-
-// src/events/item/event-list-item.utils.ts
-var normalizeProbability = (value) => {
-  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
-  if (value < 0) return 0;
-  if (value > 1) return 1;
-  return value;
-};
-var formatWholePercent = (value) => {
-  return `${Math.round(value * 100)}%`;
-};
-var hasDateLabel = (outcome) => {
-  return !!toDate(outcome.label);
-};
-var isYesLabel = (label2) => label2.trim().toLowerCase() === "yes";
-var isNoLabel = (label2) => label2.trim().toLowerCase() === "no";
-var hasBinaryOutcomes = (outcomes) => {
-  return outcomes.some((o) => isYesLabel(o.label)) && outcomes.some((o) => isNoLabel(o.label));
-};
-var sortYesFirst = (outcomes) => {
-  return [...outcomes].sort((a, b) => {
-    if (isYesLabel(a.label) && !isYesLabel(b.label)) return -1;
-    if (!isYesLabel(a.label) && isYesLabel(b.label)) return 1;
-    return 0;
-  });
-};
-var formatMarketProbabilityPercent = (value, formatPercent = formatWholePercent) => {
-  const probability = normalizeProbability(value);
-  if (probability == null) return "-";
-  const formattedValue = formatPercent(probability);
-  if (probability > 0 && formattedValue === formatPercent(0)) {
-    return "<1%";
-  }
-  return formattedValue;
-};
-var sortOutcomes = (outcomes) => {
-  if (outcomes.length <= 1) return outcomes;
-  if (hasBinaryOutcomes(outcomes)) {
-    return sortYesFirst(outcomes);
-  }
-  const now = Date.now();
-  if (outcomes.some(hasDateLabel)) {
-    return [...outcomes].sort((a, b) => {
-      var _a, _b, _c, _d;
-      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
-      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
-      return Math.abs(aDate - now) - Math.abs(bDate - now);
-    });
-  }
-  return [...outcomes].sort((a, b) => {
-    var _a, _b;
-    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
-    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
-    return bPrice - aPrice;
-  });
-};
-var compareVisibleOutcomeRows = (left, right) => {
-  var _a, _b;
-  const leftDate = toDate(resolveOutcomeTitle(left.outcome));
-  const rightDate = toDate(resolveOutcomeTitle(right.outcome));
-  if (leftDate && rightDate) {
-    return leftDate.getTime() - rightDate.getTime();
-  }
-  const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
-  const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
-  return rightProbability - leftProbability;
-};
-var shouldReplaceVisibleOutcome = (current, next) => {
-  var _a, _b;
-  const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
-  const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
-  if (currentVolume !== nextVolume) {
-    return nextVolume > currentVolume;
-  }
-  const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
-  const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
-  return nextProbability > currentProbability;
-};
-var resolveVisibleOutcomes = (venueMarkets) => {
-  const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
-  venueMarkets.forEach((market) => {
-    const title2 = market.question;
-    const canonicalOutcome = sortOutcomes(market.venueMarketOutcomes)[0];
-    if (!canonicalOutcome) return;
-    const normalizedTitle = title2.trim().toLowerCase();
-    const nextVisibleOutcome = {
-      venue: market.venue,
-      market,
-      outcome: canonicalOutcome,
-      title: title2
-    };
-    const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
-    if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
-      visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
-    }
-  });
-  return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, 2));
-};
-var resolveOutcomeTitle = (outcome) => {
-  var _a, _b;
-  return (_b = (_a = outcome == null ? void 0 : outcome.title) != null ? _a : outcome == null ? void 0 : outcome.label) == null ? void 0 : _b.trim();
-};
-var selectPrimaryVenueMarket = (venueMarkets) => {
-  if (venueMarkets.length === 0) return void 0;
-  if (venueMarkets.length === 1) return venueMarkets[0];
-  return [...venueMarkets].sort((a, b) => {
-    const aVolume = typeof a.volume === "number" ? a.volume : -1;
-    const bVolume = typeof b.volume === "number" ? b.volume : -1;
-    return bVolume - aVolume;
-  })[0];
-};
-var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
-  if (typeof imageOverride === "string" && imageOverride.trim()) {
-    return imageOverride;
-  }
-  if (typeof event.image === "string" && event.image.trim()) {
-    return event.image;
-  }
-  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.image) === "string" && primaryVenueMarket.image.trim()) {
-    return primaryVenueMarket.image;
-  }
-  return void 0;
-};
-var formatCountLabel = (count, singular, plural) => {
-  return `${count} ${count === 1 ? singular : plural}`;
-};
-var getVenueSummary = (venueMarkets, options) => {
-  const normalizedVenueMarkets = normalizeVenueMarketCluster(venueMarkets);
-  const tradableVenues = options == null ? void 0 : options.tradableVenues;
-  const isVenueTradable = (venue) => {
-    if (tradableVenues == null) return true;
-    return tradableVenues.has(venue);
-  };
-  const uniqueVenues = Array.from(
-    new Set(
-      normalizedVenueMarkets.filter((market) => isVenueTradable(market.venue)).map((market) => market.venue)
-    )
-  );
-  return {
-    marketCount: normalizedVenueMarkets.length,
-    venueCount: uniqueVenues.length,
-    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
-  };
-};
-var resolveDisplayVolume = (eventVolume, venueMarkets) => {
-  if (typeof eventVolume === "number" && eventVolume > 0) return eventVolume;
-  const clusterMarkets = normalizeVenueMarketCluster(venueMarkets);
-  const marketSum = clusterMarkets.reduce(
-    (acc, m) => acc + (typeof m.volume === "number" ? m.volume : 0),
-    0
-  );
-  if (marketSum > 0) return marketSum;
-  return void 0;
-};
-
-// src/events/list/event-list.utils.ts
+var import_sdk = require("@agg-build/sdk");
 var filterOpenEvents = (events) => {
   return events.filter((event) => {
     var _a;
-    if (event.status && event.status !== import_hooks9.MarketStatus.open) return false;
+    if (event.status && event.status !== import_hooks8.MarketStatus.open) return false;
     const openMarkets = (_a = event.venueMarkets) == null ? void 0 : _a.filter(
-      (m) => !m.status || m.status === import_hooks9.MarketStatus.open
+      (m) => !m.status || m.status === import_hooks8.MarketStatus.open
     );
     if (!openMarkets || openMarkets.length === 0) return false;
     return true;
@@ -5426,16 +5148,16 @@ var filterOpenEvents = (events) => {
 };
 
 // src/primitives/remote-image/index.tsx
-var import_hooks11 = require("@agg-build/hooks");
+var import_hooks10 = require("@agg-build/hooks");
 var import_react8 = require("react");
 
 // src/primitives/skeleton/skeleton-block.tsx
-var import_hooks10 = require("@agg-build/hooks");
+var import_hooks9 = require("@agg-build/hooks");
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var SkeletonBlock = ({ className }) => {
   const {
     features: { enableAnimations }
-  } = (0, import_hooks10.useSdkUiConfig)();
+  } = (0, import_hooks9.useSdkUiConfig)();
   return /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
     "div",
     {
@@ -5479,7 +5201,7 @@ var RemoteImage = ({
 }) => {
   const {
     general: { theme }
-  } = (0, import_hooks11.useSdkUiConfig)();
+  } = (0, import_hooks10.useSdkUiConfig)();
   const isDarkTheme = theme === "dark";
   const [status, setStatus] = (0, import_react8.useState)(
     () => resolveRemoteImageStatusFromSrc(src)
@@ -5553,17 +5275,17 @@ var RemoteImage = ({
 RemoteImage.displayName = "RemoteImage";
 
 // src/primitives/skeleton/views/event-list-skeleton-view.tsx
-var import_hooks13 = require("@agg-build/hooks");
+var import_hooks12 = require("@agg-build/hooks");
 
 // src/primitives/skeleton/views/event-list-item-skeleton-view.tsx
-var import_hooks12 = require("@agg-build/hooks");
+var import_hooks11 = require("@agg-build/hooks");
 var import_jsx_runtime98 = require("react/jsx-runtime");
 var EventListItemSkeletonView = ({
   className,
   ariaLabel,
   isStandalone = false
 }) => {
-  const labels = (0, import_hooks12.useLabels)();
+  const labels = (0, import_hooks11.useLabels)();
   const outcomeTitleWidths = ["max-w-40", "max-w-[200px]"];
   return /* @__PURE__ */ (0, import_jsx_runtime98.jsxs)(
     Card,
@@ -5629,7 +5351,7 @@ var EventListSkeletonView = ({
   ariaLabel,
   withSidebar
 }) => {
-  const labels = (0, import_hooks13.useLabels)();
+  const labels = (0, import_hooks12.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime99.jsxs)(
     "section",
     {
@@ -5668,7 +5390,7 @@ var EventListSkeletonView = ({
 EventListSkeletonView.displayName = "EventListSkeletonView";
 
 // src/primitives/skeleton/views/event-list-item-details-skeleton-view.tsx
-var import_hooks14 = require("@agg-build/hooks");
+var import_hooks13 = 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";
@@ -5679,7 +5401,7 @@ var EventListItemDetailsSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks14.useLabels)();
+  const labels = (0, import_hooks13.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(
     Card,
     {
@@ -5716,7 +5438,7 @@ var EventListItemDetailsSkeletonView = ({
 EventListItemDetailsSkeletonView.displayName = "EventListItemDetailsSkeletonView";
 
 // src/primitives/skeleton/views/market-details-skeleton-view.tsx
-var import_hooks15 = require("@agg-build/hooks");
+var import_hooks14 = require("@agg-build/hooks");
 
 // src/events/market-details/market-details.constants.ts
 var marketDetailsBaseCardClassName = "w-full overflow-hidden rounded-agg-lg border border-agg-separator bg-agg-secondary text-agg-foreground shadow-none hover:shadow-none";
@@ -5804,7 +5526,7 @@ var MarketDetailsSkeletonView = ({
   ariaLabel,
   isDetailed
 }) => {
-  const labels = (0, import_hooks15.useLabels)();
+  const labels = (0, import_hooks14.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
     Card,
     {
@@ -5905,7 +5627,7 @@ var PlaceOrderSkeletonView = ({
 PlaceOrderSkeletonView.displayName = "PlaceOrderSkeletonView";
 
 // src/primitives/skeleton/views/search-skeleton-view.tsx
-var import_hooks16 = require("@agg-build/hooks");
+var import_hooks15 = require("@agg-build/hooks");
 var import_jsx_runtime103 = require("react/jsx-runtime");
 var SearchSkeletonRow = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)("div", { className: "flex w-full items-center gap-6 px-5 py-4", children: [
@@ -5931,7 +5653,7 @@ var SearchSkeletonRow = () => {
   ] });
 };
 var SearchSkeletonView = ({ className, ariaLabel }) => {
-  const labels = (0, import_hooks16.useLabels)();
+  const labels = (0, import_hooks15.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime103.jsxs)(
     "div",
     {
@@ -5953,13 +5675,13 @@ var SearchSkeletonView = ({ className, ariaLabel }) => {
 SearchSkeletonView.displayName = "SearchSkeletonView";
 
 // src/primitives/skeleton/views/settlement-skeleton-view.tsx
-var import_hooks17 = require("@agg-build/hooks");
+var import_hooks16 = require("@agg-build/hooks");
 var import_jsx_runtime104 = require("react/jsx-runtime");
 var SettlementSkeletonView = ({
   className,
   ariaLabel
 }) => {
-  const labels = (0, import_hooks17.useLabels)();
+  const labels = (0, import_hooks16.useLabels)();
   return /* @__PURE__ */ (0, import_jsx_runtime104.jsxs)(
     Card,
     {
@@ -6173,7 +5895,7 @@ var Skeleton = ({
 Skeleton.displayName = "Skeleton";
 
 // src/primitives/venue-logo/index.tsx
-var import_hooks26 = require("@agg-build/hooks");
+var import_hooks25 = require("@agg-build/hooks");
 
 // src/primitives/venue-logo/venue-logo.constants.ts
 var import_sdk10 = require("@agg-build/sdk");
@@ -6226,7 +5948,7 @@ var DefaultVenueIcon = (_a) => {
 };
 
 // src/primitives/venue-logo/svg/logo-hyperliquid.tsx
-var import_hooks18 = require("@agg-build/hooks");
+var import_hooks17 = require("@agg-build/hooks");
 var import_sdk2 = require("@agg-build/sdk");
 var import_jsx_runtime109 = require("react/jsx-runtime");
 var LogoHyperliquidIcon = (_a) => {
@@ -6244,7 +5966,7 @@ var LogoHyperliquidIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks18.useAggUiConfig)();
+  } = (0, import_hooks17.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk2.Venue.hyperliquid, isDarkTheme)) != null ? _a2 : "#97FCE4",
@@ -6274,7 +5996,7 @@ var LogoHyperliquidIcon = (_a) => {
 LogoHyperliquidIcon.displayName = "LogoHyperliquidIcon";
 
 // src/primitives/venue-logo/svg/logo-kalshi.tsx
-var import_hooks19 = require("@agg-build/hooks");
+var import_hooks18 = require("@agg-build/hooks");
 var import_sdk3 = require("@agg-build/sdk");
 var import_jsx_runtime110 = require("react/jsx-runtime");
 var LogoKalshiIcon = (_a) => {
@@ -6292,7 +6014,7 @@ var LogoKalshiIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks19.useAggUiConfig)();
+  } = (0, import_hooks18.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk3.Venue.kalshi, isDarkTheme)) != null ? _a2 : "#18C590",
@@ -6322,7 +6044,7 @@ var LogoKalshiIcon = (_a) => {
 LogoKalshiIcon.displayName = "LogoKalshiIcon";
 
 // src/primitives/venue-logo/svg/logo-limitless.tsx
-var import_hooks20 = require("@agg-build/hooks");
+var import_hooks19 = require("@agg-build/hooks");
 var import_sdk4 = require("@agg-build/sdk");
 var import_jsx_runtime111 = require("react/jsx-runtime");
 var LogoLimitlessIcon = (_a) => {
@@ -6340,7 +6062,7 @@ var LogoLimitlessIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks20.useAggUiConfig)();
+  } = (0, import_hooks19.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk4.Venue.limitless, isDarkTheme)) != null ? _a2 : "#c4fe00",
@@ -6370,7 +6092,7 @@ var LogoLimitlessIcon = (_a) => {
 LogoLimitlessIcon.displayName = "LogoLimitlessIcon";
 
 // src/primitives/venue-logo/svg/logo-myriad.tsx
-var import_hooks21 = require("@agg-build/hooks");
+var import_hooks20 = require("@agg-build/hooks");
 var import_sdk5 = require("@agg-build/sdk");
 var import_jsx_runtime112 = require("react/jsx-runtime");
 var LogoMyriadIcon = (_a) => {
@@ -6388,7 +6110,7 @@ var LogoMyriadIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks21.useAggUiConfig)();
+  } = (0, import_hooks20.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk5.Venue.myriad, isDarkTheme)) != null ? _a2 : "#2E5CFF",
@@ -6418,7 +6140,7 @@ var LogoMyriadIcon = (_a) => {
 LogoMyriadIcon.displayName = "LogoMyriadIcon";
 
 // src/primitives/venue-logo/svg/logo-opinion.tsx
-var import_hooks22 = require("@agg-build/hooks");
+var import_hooks21 = require("@agg-build/hooks");
 var import_sdk6 = require("@agg-build/sdk");
 var import_jsx_runtime113 = require("react/jsx-runtime");
 var LogoOpinionIcon = (_a) => {
@@ -6436,7 +6158,7 @@ var LogoOpinionIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks22.useAggUiConfig)();
+  } = (0, import_hooks21.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk6.Venue.opinion, isDarkTheme)) != null ? _a2 : "#ec5e26",
@@ -6466,7 +6188,7 @@ var LogoOpinionIcon = (_a) => {
 LogoOpinionIcon.displayName = "LogoOpinionIcon";
 
 // src/primitives/venue-logo/svg/logo-polymarket.tsx
-var import_hooks23 = require("@agg-build/hooks");
+var import_hooks22 = require("@agg-build/hooks");
 var import_sdk7 = require("@agg-build/sdk");
 var import_jsx_runtime114 = require("react/jsx-runtime");
 var LogoPolymarketIcon = (_a) => {
@@ -6484,7 +6206,7 @@ var LogoPolymarketIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks23.useAggUiConfig)();
+  } = (0, import_hooks22.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk7.Venue.polymarket, isDarkTheme)) != null ? _a2 : "#2E5CFF",
@@ -6514,7 +6236,7 @@ var LogoPolymarketIcon = (_a) => {
 LogoPolymarketIcon.displayName = "LogoPolymarketIcon";
 
 // src/primitives/venue-logo/svg/logo-predict.tsx
-var import_hooks24 = require("@agg-build/hooks");
+var import_hooks23 = require("@agg-build/hooks");
 var import_sdk8 = require("@agg-build/sdk");
 var import_jsx_runtime115 = require("react/jsx-runtime");
 var LogoPredictIcon = (_a) => {
@@ -6532,7 +6254,7 @@ var LogoPredictIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks24.useAggUiConfig)();
+  } = (0, import_hooks23.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk8.Venue.predict, isDarkTheme)) != null ? _a2 : "#705bf6",
@@ -6564,7 +6286,7 @@ var LogoPredictIcon = (_a) => {
 LogoPredictIcon.displayName = "LogoPredictIcon";
 
 // src/primitives/venue-logo/svg/logo-probable.tsx
-var import_hooks25 = require("@agg-build/hooks");
+var import_hooks24 = require("@agg-build/hooks");
 var import_sdk9 = require("@agg-build/sdk");
 var import_jsx_runtime116 = require("react/jsx-runtime");
 var LogoProbableIcon = (_a) => {
@@ -6582,7 +6304,7 @@ var LogoProbableIcon = (_a) => {
   var _a2;
   const {
     general: { theme }
-  } = (0, import_hooks25.useAggUiConfig)();
+  } = (0, import_hooks24.useAggUiConfig)();
   const isDarkTheme = theme === "dark";
   const primaryColor = resolveLogoPrimaryColor({
     brandColor: (_a2 = resolveVenueLineColor(import_sdk9.Venue.probable, isDarkTheme)) != null ? _a2 : "#EC4899",
@@ -6681,91 +6403,369 @@ var lineColorByVenue = {
     [import_sdk10.Venue.hyperliquid]: "#97FCE4"
   }
 };
-var resolveVenueLineColor = (venue, isDarkTheme) => {
-  return lineColorByVenue[isDarkTheme ? "dark" : "light"][venue];
-};
-var DEFAULT_VENUE_COLOR = "#94a3b8";
-
-// src/primitives/venue-logo/venue-logo.utils.ts
-var resolveVenueLogoLabel = ({
-  ariaLabel,
-  labels,
-  venue,
-  venueFallbackLabels
-}) => {
-  var _a;
-  return (_a = ariaLabel != null ? ariaLabel : labels.venues[venue]) != null ? _a : venueFallbackLabels[venue];
-};
-var resolveVenueLogoIsColor = ({
-  isColor,
-  isMonochromatic
-}) => {
-  return isMonochromatic ? false : isColor;
+var resolveVenueLineColor = (venue, isDarkTheme) => {
+  return lineColorByVenue[isDarkTheme ? "dark" : "light"][venue];
+};
+var DEFAULT_VENUE_COLOR = "#94a3b8";
+
+// src/primitives/venue-logo/venue-logo.utils.ts
+var resolveVenueLogoLabel = ({
+  ariaLabel,
+  labels,
+  venue,
+  venueFallbackLabels
+}) => {
+  var _a;
+  return (_a = ariaLabel != null ? ariaLabel : labels.venues[venue]) != null ? _a : venueFallbackLabels[venue];
+};
+var resolveVenueLogoIsColor = ({
+  isColor,
+  isMonochromatic
+}) => {
+  return isMonochromatic ? false : isColor;
+};
+
+// src/primitives/venue-logo/index.tsx
+var import_jsx_runtime117 = require("react/jsx-runtime");
+var VenueLogo = ({
+  venue,
+  variant = "icon",
+  isColor = true,
+  isMonochromatic = false,
+  color,
+  size = "medium",
+  className,
+  ariaLabel,
+  title: title2
+}) => {
+  var _a, _b;
+  const labels = (0, import_hooks25.useLabels)();
+  const sizeClass = sizeClasses2[size];
+  const resolvedLabel = resolveVenueLogoLabel({
+    ariaLabel,
+    labels,
+    venue,
+    venueFallbackLabels: venueLogoLabels
+  });
+  const isUnknownVenue = !(venue in venueLogoRegistry);
+  if (isUnknownVenue && process.env.NODE_ENV === "development") {
+    console.warn(`[AggUI] Unknown venue "${venue}" \u2014 using default logo`);
+  }
+  if (variant === "logo") {
+    return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+      RemoteImage,
+      {
+        src: (_a = venueLogoUrlRegistry[venue]) != null ? _a : DEFAULT_VENUE_LOGO_URL,
+        alt: resolvedLabel || DEFAULT_VENUE_LABEL,
+        title: title2,
+        className: cn("shrink-0 rounded-agg-lg object-cover", sizeClass, className)
+      }
+    );
+  }
+  const Component2 = (_b = venueLogoRegistry[venue]) != null ? _b : DefaultVenueIcon;
+  const resolvedIsColor = resolveVenueLogoIsColor({
+    isColor,
+    isMonochromatic
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
+    Component2,
+    {
+      className: cn("group/agg-venue-logo", "shrink-0", sizeClass, className),
+      isColor: resolvedIsColor,
+      color,
+      "aria-label": resolvedLabel || DEFAULT_VENUE_LABEL,
+      title: title2
+    }
+  );
+};
+VenueLogo.displayName = "VenueLogo";
+
+// src/primitives/search/search.constants.ts
+var DEFAULT_SEARCH_LIMIT = 5;
+var MIN_SEARCH_LENGTH = 3;
+var SEARCH_DEBOUNCE_MS = 300;
+
+// src/primitives/search/search.utils.ts
+var import_sdk11 = require("@agg-build/sdk");
+var import_dayjs2 = __toESM(require("dayjs"));
+
+// src/events/item/event-list-item.utils.ts
+var import_hooks26 = require("@agg-build/hooks");
+
+// src/events/shared/venue-market-cluster.ts
+var toNonEmptyString = (value) => {
+  if (typeof value !== "string") return void 0;
+  const trimmedValue = value.trim();
+  return trimmedValue ? trimmedValue : void 0;
+};
+var addGraphEdge = (adjacencyById, fromMarketId, toMarketId) => {
+  var _a, _b;
+  if (fromMarketId === toMarketId) return;
+  const fromNeighbors = (_a = adjacencyById.get(fromMarketId)) != null ? _a : /* @__PURE__ */ new Set();
+  fromNeighbors.add(toMarketId);
+  adjacencyById.set(fromMarketId, fromNeighbors);
+  const toNeighbors = (_b = adjacencyById.get(toMarketId)) != null ? _b : /* @__PURE__ */ new Set();
+  toNeighbors.add(fromMarketId);
+  adjacencyById.set(toMarketId, toNeighbors);
+};
+var dedupeSourceMarketsById = (markets) => {
+  const seenMarketIds = /* @__PURE__ */ new Set();
+  return markets.filter((market) => {
+    if (seenMarketIds.has(market.id)) {
+      return false;
+    }
+    seenMarketIds.add(market.id);
+    return true;
+  });
+};
+var collectDirectRelationMarkets = (market) => {
+  var _a, _b, _c;
+  const relationMarkets = [];
+  const seenRelationIds = /* @__PURE__ */ new Set();
+  const addRelationMarket = (relationMarket) => {
+    if (!relationMarket) return;
+    if (seenRelationIds.has(relationMarket.id)) return;
+    seenRelationIds.add(relationMarket.id);
+    relationMarkets.push(relationMarket);
+  };
+  for (const matchedVenueMarket of (_a = market.matchedVenueMarkets) != null ? _a : []) {
+    addRelationMarket(matchedVenueMarket);
+  }
+  addRelationMarket(
+    (_c = (_b = market.matchEntry) == null ? void 0 : _b.targetVenueMarket) != null ? _c : void 0
+  );
+  return relationMarkets;
+};
+var collectUniqueRelatedMarkets = (markets, sourceMarketsById) => {
+  const relatedMarketsById = /* @__PURE__ */ new Map();
+  for (const market of markets) {
+    for (const relatedMarket of collectDirectRelationMarkets(market)) {
+      if (sourceMarketsById.has(relatedMarket.id) || relatedMarketsById.has(relatedMarket.id)) {
+        continue;
+      }
+      relatedMarketsById.set(relatedMarket.id, relatedMarket);
+    }
+  }
+  return Array.from(relatedMarketsById.values());
+};
+var normalizeVenueMarketCluster = (markets, selectedMarketId) => {
+  var _a, _b;
+  if (markets.length === 0) return [];
+  const orderedSourceMarkets = dedupeSourceMarketsById(markets);
+  const sourceMarketsById = new Map(orderedSourceMarkets.map((market) => [market.id, market]));
+  const orderedRelatedMarkets = collectUniqueRelatedMarkets(
+    orderedSourceMarkets,
+    sourceMarketsById
+  );
+  const relatedMarketsById = new Map(orderedRelatedMarkets.map((market) => [market.id, market]));
+  const resolvedSelectedMarketId = toNonEmptyString(selectedMarketId);
+  if (!resolvedSelectedMarketId) {
+    return [...orderedSourceMarkets, ...orderedRelatedMarkets];
+  }
+  const adjacencyById = /* @__PURE__ */ new Map();
+  for (const market of orderedSourceMarkets) {
+    for (const relatedMarket of collectDirectRelationMarkets(market)) {
+      addGraphEdge(adjacencyById, market.id, relatedMarket.id);
+    }
+    const targetVenueMarketId = toNonEmptyString((_a = market.matchEntry) == null ? void 0 : _a.targetVenueMarketId);
+    if (targetVenueMarketId) {
+      addGraphEdge(adjacencyById, market.id, targetVenueMarketId);
+    }
+  }
+  if (!sourceMarketsById.has(resolvedSelectedMarketId) && !relatedMarketsById.has(resolvedSelectedMarketId)) {
+    return [];
+  }
+  const visitedMarketIds = /* @__PURE__ */ new Set();
+  const queue = [resolvedSelectedMarketId];
+  while (queue.length > 0) {
+    const currentMarketId = queue.shift();
+    if (!currentMarketId || visitedMarketIds.has(currentMarketId)) {
+      continue;
+    }
+    visitedMarketIds.add(currentMarketId);
+    const neighborMarketIds = adjacencyById.get(currentMarketId);
+    for (const neighborMarketId of Array.from(neighborMarketIds != null ? neighborMarketIds : /* @__PURE__ */ new Set())) {
+      if (!visitedMarketIds.has(neighborMarketId)) {
+        queue.push(neighborMarketId);
+      }
+    }
+  }
+  const orderedClusterMarkets = [];
+  const appendedMarketIds = /* @__PURE__ */ new Set();
+  const appendMarket = (market) => {
+    if (!market) return;
+    if (!visitedMarketIds.has(market.id)) return;
+    if (appendedMarketIds.has(market.id)) return;
+    appendedMarketIds.add(market.id);
+    orderedClusterMarkets.push(market);
+  };
+  appendMarket(
+    (_b = sourceMarketsById.get(resolvedSelectedMarketId)) != null ? _b : relatedMarketsById.get(resolvedSelectedMarketId)
+  );
+  for (const market of orderedSourceMarkets) {
+    appendMarket(market);
+  }
+  for (const market of orderedRelatedMarkets) {
+    appendMarket(market);
+  }
+  return orderedClusterMarkets;
+};
+
+// src/events/item/event-list-item.utils.ts
+var normalizeProbability = (value) => {
+  if (typeof value !== "number" || !Number.isFinite(value)) return void 0;
+  if (value < 0) return 0;
+  if (value > 1) return 1;
+  return value;
+};
+var formatWholePercent = (value) => {
+  return `${Math.round(value * 100)}%`;
+};
+var hasDateLabel = (outcome) => {
+  return !!toDate(outcome.label);
+};
+var isYesLabel = (label2) => label2.trim().toLowerCase() === "yes";
+var isNoLabel = (label2) => label2.trim().toLowerCase() === "no";
+var hasBinaryOutcomes = (outcomes) => {
+  return outcomes.some((o) => isYesLabel(o.label)) && outcomes.some((o) => isNoLabel(o.label));
+};
+var sortYesFirst = (outcomes) => {
+  return [...outcomes].sort((a, b) => {
+    if (isYesLabel(a.label) && !isYesLabel(b.label)) return -1;
+    if (!isYesLabel(a.label) && isYesLabel(b.label)) return 1;
+    return 0;
+  });
+};
+var formatMarketProbabilityPercent = (value, formatPercent = formatWholePercent) => {
+  const probability = normalizeProbability(value);
+  if (probability == null) return "-";
+  const formattedValue = formatPercent(probability);
+  if (probability > 0 && formattedValue === formatPercent(0)) {
+    return "<1%";
+  }
+  return formattedValue;
+};
+var sortOutcomes = (outcomes) => {
+  if (outcomes.length <= 1) return outcomes;
+  if (hasBinaryOutcomes(outcomes)) {
+    return sortYesFirst(outcomes);
+  }
+  const now = Date.now();
+  if (outcomes.some(hasDateLabel)) {
+    return [...outcomes].sort((a, b) => {
+      var _a, _b, _c, _d;
+      const aDate = (_b = (_a = toDate(a.label)) == null ? void 0 : _a.getTime()) != null ? _b : 0;
+      const bDate = (_d = (_c = toDate(b.label)) == null ? void 0 : _c.getTime()) != null ? _d : 0;
+      return Math.abs(aDate - now) - Math.abs(bDate - now);
+    });
+  }
+  return [...outcomes].sort((a, b) => {
+    var _a, _b;
+    const aPrice = (_a = normalizeProbability(a.price)) != null ? _a : 0;
+    const bPrice = (_b = normalizeProbability(b.price)) != null ? _b : 0;
+    return bPrice - aPrice;
+  });
 };
-
-// src/primitives/venue-logo/index.tsx
-var import_jsx_runtime117 = require("react/jsx-runtime");
-var VenueLogo = ({
-  venue,
-  variant = "icon",
-  isColor = true,
-  isMonochromatic = false,
-  color,
-  size = "medium",
-  className,
-  ariaLabel,
-  title: title2
-}) => {
+var compareVisibleOutcomeRows = (left, right) => {
   var _a, _b;
-  const labels = (0, import_hooks26.useLabels)();
-  const sizeClass = sizeClasses2[size];
-  const resolvedLabel = resolveVenueLogoLabel({
-    ariaLabel,
-    labels,
-    venue,
-    venueFallbackLabels: venueLogoLabels
-  });
-  const isUnknownVenue = !(venue in venueLogoRegistry);
-  if (isUnknownVenue && process.env.NODE_ENV === "development") {
-    console.warn(`[AggUI] Unknown venue "${venue}" \u2014 using default logo`);
+  const leftDate = toDate(resolveOutcomeTitle(left.outcome));
+  const rightDate = toDate(resolveOutcomeTitle(right.outcome));
+  if (leftDate && rightDate) {
+    return leftDate.getTime() - rightDate.getTime();
   }
-  if (variant === "logo") {
-    return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-      RemoteImage,
-      {
-        src: (_a = venueLogoUrlRegistry[venue]) != null ? _a : DEFAULT_VENUE_LOGO_URL,
-        alt: resolvedLabel || DEFAULT_VENUE_LABEL,
-        title: title2,
-        className: cn("shrink-0 rounded-agg-lg object-cover", sizeClass, className)
-      }
-    );
+  const leftProbability = (_a = normalizeProbability(left.outcome.price)) != null ? _a : -1;
+  const rightProbability = (_b = normalizeProbability(right.outcome.price)) != null ? _b : -1;
+  return rightProbability - leftProbability;
+};
+var shouldReplaceVisibleOutcome = (current, next) => {
+  var _a, _b;
+  const currentVolume = typeof current.market.volume === "number" ? current.market.volume : -1;
+  const nextVolume = typeof next.market.volume === "number" ? next.market.volume : -1;
+  if (currentVolume !== nextVolume) {
+    return nextVolume > currentVolume;
   }
-  const Component2 = (_b = venueLogoRegistry[venue]) != null ? _b : DefaultVenueIcon;
-  const resolvedIsColor = resolveVenueLogoIsColor({
-    isColor,
-    isMonochromatic
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime117.jsx)(
-    Component2,
-    {
-      className: cn("group/agg-venue-logo", "shrink-0", sizeClass, className),
-      isColor: resolvedIsColor,
-      color,
-      "aria-label": resolvedLabel || DEFAULT_VENUE_LABEL,
+  const currentProbability = (_a = normalizeProbability(current.outcome.price)) != null ? _a : -1;
+  const nextProbability = (_b = normalizeProbability(next.outcome.price)) != null ? _b : -1;
+  return nextProbability > currentProbability;
+};
+var resolveVisibleOutcomes = (venueMarkets) => {
+  const visibleOutcomesByLabel = /* @__PURE__ */ new Map();
+  venueMarkets.forEach((market) => {
+    const title2 = market.question;
+    const canonicalOutcome = sortOutcomes(market.venueMarketOutcomes)[0];
+    if (!canonicalOutcome) return;
+    const normalizedTitle = title2.trim().toLowerCase();
+    const nextVisibleOutcome = {
+      venue: market.venue,
+      market,
+      outcome: canonicalOutcome,
       title: title2
+    };
+    const currentVisibleOutcome = visibleOutcomesByLabel.get(normalizedTitle);
+    if (!currentVisibleOutcome || shouldReplaceVisibleOutcome(currentVisibleOutcome, nextVisibleOutcome)) {
+      visibleOutcomesByLabel.set(normalizedTitle, nextVisibleOutcome);
     }
+  });
+  return [...visibleOutcomesByLabel.values()].sort(compareVisibleOutcomeRows).slice(0, Math.max(1, 2));
+};
+var resolveOutcomeTitle = (outcome) => {
+  var _a, _b;
+  return (_b = (_a = outcome == null ? void 0 : outcome.title) != null ? _a : outcome == null ? void 0 : outcome.label) == null ? void 0 : _b.trim();
+};
+var selectPrimaryVenueMarket = (venueMarkets) => {
+  if (venueMarkets.length === 0) return void 0;
+  if (venueMarkets.length === 1) return venueMarkets[0];
+  return [...venueMarkets].sort((a, b) => {
+    const aVolume = typeof a.volume === "number" ? a.volume : -1;
+    const bVolume = typeof b.volume === "number" ? b.volume : -1;
+    return bVolume - aVolume;
+  })[0];
+};
+var resolveTileImage = (event, primaryVenueMarket, imageOverride) => {
+  if (typeof imageOverride === "string" && imageOverride.trim()) {
+    return imageOverride;
+  }
+  if (typeof event.image === "string" && event.image.trim()) {
+    return event.image;
+  }
+  if (typeof (primaryVenueMarket == null ? void 0 : primaryVenueMarket.image) === "string" && primaryVenueMarket.image.trim()) {
+    return primaryVenueMarket.image;
+  }
+  return void 0;
+};
+var formatCountLabel = (count, singular, plural) => {
+  return `${count} ${count === 1 ? singular : plural}`;
+};
+var getVenueSummary = (venueMarkets, options) => {
+  const normalizedVenueMarkets = normalizeVenueMarketCluster(venueMarkets);
+  const tradableVenues = options == null ? void 0 : options.tradableVenues;
+  const isVenueTradable = (venue) => {
+    if (tradableVenues == null) return true;
+    return tradableVenues.has(venue);
+  };
+  const uniqueVenues = Array.from(
+    new Set(
+      normalizedVenueMarkets.filter((market) => isVenueTradable(market.venue)).map((market) => market.venue)
+    )
   );
+  return {
+    marketCount: normalizedVenueMarkets.length,
+    venueCount: uniqueVenues.length,
+    singleVenue: uniqueVenues.length === 1 ? uniqueVenues[0] : void 0
+  };
+};
+var resolveDisplayVolume = (eventVolume, venueMarkets) => {
+  if (typeof eventVolume === "number" && eventVolume > 0) return eventVolume;
+  const clusterMarkets = normalizeVenueMarketCluster(venueMarkets);
+  const marketSum = clusterMarkets.reduce(
+    (acc, m) => acc + (typeof m.volume === "number" ? m.volume : 0),
+    0
+  );
+  if (marketSum > 0) return marketSum;
+  return void 0;
 };
-VenueLogo.displayName = "VenueLogo";
-
-// src/primitives/search/search.constants.ts
-var DEFAULT_SEARCH_LIMIT = 5;
-var MIN_SEARCH_LENGTH = 3;
-var SEARCH_DEBOUNCE_MS = 300;
 
 // src/primitives/search/search.utils.ts
-var import_sdk11 = require("@agg-build/sdk");
-var import_dayjs2 = __toESM(require("dayjs"));
 var formatSearchContextLabel = (value) => {
   if (!(0, import_dayjs2.default)(value).isValid()) return value;
   return (0, import_dayjs2.default)(value).format("MMMM D, YYYY");
@@ -7403,7 +7403,7 @@ var Header = ({
         "div",
         {
           className: cn(
-            "agg-header-inner mx-auto flex h-auto w-full max-w-[1360px] px-6 lg:px-10 items-center gap-2 md:gap-4 py-5",
+            "agg-header-inner mx-auto flex h-auto w-full max-w-[1440px] px-6 lg:px-10 items-center gap-2 md:gap-4 py-5",
             classNames == null ? void 0 : classNames.inner
           ),
           children: [
@@ -8445,7 +8445,37 @@ StateMessage.displayName = "StateMessage";
 
 // src/primitives/tabs/index.tsx
 var import_hooks34 = require("@agg-build/hooks");
+var import_react14 = require("react");
+
+// src/shared/use-horizontal-scroll-state.ts
 var import_react13 = require("react");
+var useHorizontalScrollState = () => {
+  const containerRef = (0, import_react13.useRef)(null);
+  const [canScrollLeft, setCanScrollLeft] = (0, import_react13.useState)(false);
+  const [canScrollRight, setCanScrollRight] = (0, import_react13.useState)(false);
+  const update = (0, import_react13.useCallback)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    setCanScrollLeft(el.scrollLeft > 4);
+    setCanScrollRight(maxScroll - el.scrollLeft > 4);
+  }, []);
+  (0, import_react13.useEffect)(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    el.addEventListener("scroll", update, { passive: true });
+    return () => el.removeEventListener("scroll", update);
+  }, [update]);
+  (0, import_react13.useEffect)(() => {
+    if (typeof ResizeObserver === "undefined") return;
+    const el = containerRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver(() => update());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [update]);
+  return { containerRef, canScrollLeft, canScrollRight, update };
+};
 
 // src/primitives/tabs/tabs.constants.ts
 var MOBILE_TABS_MEDIA_QUERY = "(max-width: 736px)";
@@ -8519,8 +8549,8 @@ var Tabs = ({
   const {
     features: { enableAnimations }
   } = (0, import_hooks34.useSdkUiConfig)();
-  const buttonRefs = (0, import_react13.useRef)([]);
-  const dragStateRef = (0, import_react13.useRef)({
+  const buttonRefs = (0, import_react14.useRef)([]);
+  const dragStateRef = (0, import_react14.useRef)({
     isPointerDown: false,
     isDragging: false,
     pointerId: null,
@@ -8528,29 +8558,30 @@ var Tabs = ({
     startClientY: 0,
     startScrollLeft: 0
   });
-  const suppressClickRef = (0, import_react13.useRef)(false);
+  const suppressClickRef = (0, import_react14.useRef)(false);
   const resolvedAriaLabel = ariaLabel != null ? ariaLabel : labels.common.tabsAria;
-  const [isMobileViewport, setIsMobileViewport] = (0, import_react13.useState)(false);
-  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react13.useState)(false);
-  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react13.useState)({
+  const [isMobileViewport, setIsMobileViewport] = (0, import_react14.useState)(false);
+  const [isDraggingTabs, setIsDraggingTabs] = (0, import_react14.useState)(false);
+  const [activeUnderlineStyle, setActiveUnderlineStyle] = (0, import_react14.useState)({
     transform: "translateX(0px)",
     width: 0,
     opacity: 0
   });
-  const [scrollAffordanceState, setScrollAffordanceState] = (0, import_react13.useState)({
-    showStart: false,
-    showEnd: false
-  });
-  const tabListRef = (0, import_react13.useRef)(null);
+  const {
+    containerRef: tabListRef,
+    canScrollLeft,
+    canScrollRight,
+    update: updateScrollState
+  } = useHorizontalScrollState();
   const isBarVariant = variant === "bar";
-  const resolvedOverflowBehavior = (0, import_react13.useMemo)(() => {
+  const resolvedOverflowBehavior = (0, import_react14.useMemo)(() => {
     if (overflowBehavior) return overflowBehavior;
     if (!isBarVariant) return "scroll";
     return isMobileViewport ? "select" : "scroll";
   }, [isBarVariant, isMobileViewport, overflowBehavior]);
   const shouldUseOverflowScroll = resolvedOverflowBehavior === "scroll";
   const shouldUseOverflowSelect = resolvedOverflowBehavior === "select";
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(MOBILE_TABS_MEDIA_QUERY);
     const handleMediaQueryChange = (event) => {
@@ -8568,28 +8599,12 @@ var Tabs = ({
       mediaQueryList.removeListener(handleMediaQueryChange);
     };
   }, []);
-  const updateScrollAffordances = (0, import_react13.useCallback)(() => {
-    if (!shouldUseOverflowScroll) {
-      setScrollAffordanceState({
-        showStart: false,
-        showEnd: false
-      });
-      return;
-    }
-    const tabListElement = tabListRef.current;
-    if (!tabListElement) return;
-    const maxScrollLeft = tabListElement.scrollWidth - tabListElement.clientWidth;
-    setScrollAffordanceState({
-      showStart: tabListElement.scrollLeft > 4,
-      showEnd: maxScrollLeft - tabListElement.scrollLeft > 4
-    });
-  }, [shouldUseOverflowScroll]);
-  const renderedItems = (0, import_react13.useMemo)(() => {
+  const renderedItems = (0, import_react14.useMemo)(() => {
     return items.map((item) => __spreadProps(__spreadValues({}, item), {
       disabled: item.disabled || item.isComingSoon
     }));
   }, [items]);
-  const selectItems = (0, import_react13.useMemo)(() => {
+  const selectItems = (0, import_react14.useMemo)(() => {
     return renderedItems.map((item) => ({
       value: item.value,
       label: item.isComingSoon ? `${item.label} (soon)` : item.label,
@@ -8722,7 +8737,7 @@ var Tabs = ({
     event == null ? void 0 : event.stopPropagation();
     suppressClickRef.current = false;
   };
-  const updateActiveUnderline = (0, import_react13.useCallback)(() => {
+  const updateActiveUnderline = (0, import_react14.useCallback)(() => {
     if (isBarVariant) {
       setActiveUnderlineStyle({
         transform: "translateX(0px)",
@@ -8745,42 +8760,39 @@ var Tabs = ({
       opacity: 1
     });
   }, [isBarVariant, renderedItems, value]);
-  (0, import_react13.useLayoutEffect)(() => {
+  (0, import_react14.useLayoutEffect)(() => {
     updateActiveUnderline();
   }, [updateActiveUnderline]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     if (isBarVariant || !shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const handleScroll = () => {
       updateActiveUnderline();
-      updateScrollAffordances();
     };
     tabListElement.addEventListener("scroll", handleScroll, { passive: true });
-    updateScrollAffordances();
     return () => {
       tabListElement.removeEventListener("scroll", handleScroll);
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react13.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react14.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
-    updateScrollAffordances();
-  }, [renderedItems, shouldUseOverflowScroll, updateScrollAffordances, value]);
-  (0, import_react13.useEffect)(() => {
-    if (isBarVariant && !shouldUseOverflowScroll) return;
+    updateScrollState();
+  }, [renderedItems, shouldUseOverflowScroll, updateScrollState, value]);
+  (0, import_react14.useEffect)(() => {
+    if (isBarVariant || !shouldUseOverflowScroll) return;
     if (typeof ResizeObserver === "undefined") return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
     const resizeObserver = new ResizeObserver(() => {
       updateActiveUnderline();
-      updateScrollAffordances();
     });
     resizeObserver.observe(tabListElement);
     return () => {
       resizeObserver.disconnect();
     };
-  }, [isBarVariant, shouldUseOverflowScroll, updateActiveUnderline, updateScrollAffordances]);
-  (0, import_react13.useEffect)(() => {
+  }, [isBarVariant, shouldUseOverflowScroll, tabListRef, updateActiveUnderline]);
+  (0, import_react14.useEffect)(() => {
     if (!shouldUseOverflowScroll) return;
     const tabListElement = tabListRef.current;
     if (!tabListElement) return;
@@ -8927,7 +8939,7 @@ var Tabs = ({
                 "agg-tab-scroll-start",
                 "pointer-events-none absolute top-0 bottom-0 left-0 z-10 w-12 md:w-18 bg-linear-to-r from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showStart ? "opacity-100" : "opacity-0"
+                canScrollLeft ? "opacity-100" : "opacity-0"
               )
             }
           ),
@@ -8939,24 +8951,63 @@ var Tabs = ({
                 "agg-tab-scroll-end",
                 "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-12 md:w-18 bg-linear-to-l from-agg-secondary via-agg-secondary to-transparent",
                 getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-                scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
+                canScrollRight ? "opacity-100" : "opacity-0"
               )
             }
           )
         ] }) : null,
-        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
-          "span",
-          {
-            "aria-hidden": true,
-            className: cn(
-              "agg-tab-scroll-end",
-              "pointer-events-none absolute top-0 right-0 bottom-0 z-10 w-[120px] overflow-hidden rounded-r-[8px] bg-linear-to-l from-agg-secondary from-[20%] via-agg-secondary/85 to-transparent",
-              getMotionClassName(enableAnimations, "transition-opacity duration-200"),
-              scrollAffordanceState.showEnd ? "opacity-100" : "opacity-0"
-            ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "absolute inset-y-0 right-3 inline-flex items-center text-agg-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" }) })
-          }
-        ) : null
+        shouldUseOverflowScroll && isBarVariant ? /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(import_jsx_runtime127.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsLeft,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-start",
+                "absolute top-0 bottom-0 left-0 z-10 w-20 rounded-l-agg-lg",
+                "inline-flex items-center justify-start pl-2",
+                "bg-linear-to-r from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollLeft ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: -200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { name: "chevron-left", size: "small", color: "currentColor" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+            "button",
+            {
+              type: "button",
+              "aria-label": labels.common.scrollTabsRight,
+              tabIndex: -1,
+              className: cn(
+                "agg-tab-scroll-end",
+                "absolute top-0 right-0 bottom-0 z-10 w-20 rounded-r-agg-lg",
+                "inline-flex items-center justify-end pr-2",
+                "bg-linear-to-l from-agg-secondary from-[25%] via-agg-secondary/80 to-transparent",
+                "cursor-pointer",
+                getMotionClassName(enableAnimations, "transition-opacity duration-200"),
+                canScrollRight ? "opacity-100" : "opacity-0 pointer-events-none"
+              ),
+              onClick: () => {
+                var _a;
+                (_a = tabListRef.current) == null ? void 0 : _a.scrollBy({
+                  left: 200,
+                  behavior: getScrollBehavior(enableAnimations)
+                });
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(Icon, { name: "chevron-right", size: "small", color: "currentColor" })
+            }
+          )
+        ] }) : null
       ]
     }
   );
@@ -8965,7 +9016,7 @@ Tabs.displayName = "Tabs";
 
 // src/primitives/toast/index.tsx
 var RadixToast = __toESM(require("@radix-ui/react-toast"));
-var import_react14 = require("react");
+var import_react15 = require("react");
 var import_jsx_runtime128 = require("react/jsx-runtime");
 var DEFAULT_DURATION_MS = 5e3;
 var EXIT_ANIMATION_MS = 350;
@@ -8981,7 +9032,7 @@ var TONE_ICON_NAME = {
   warning: "warning-filled",
   error: "error-filled"
 };
-var ToastContext = (0, import_react14.createContext)(null);
+var ToastContext = (0, import_react15.createContext)(null);
 function ToastProvider({
   children,
   defaultDurationMs = DEFAULT_DURATION_MS,
@@ -8989,12 +9040,12 @@ function ToastProvider({
   swipeThreshold = 50,
   viewportClassName
 }) {
-  const [toasts, setToasts] = (0, import_react14.useState)([]);
-  const idRef = (0, import_react14.useRef)(0);
-  const dismiss = (0, import_react14.useCallback)((id) => {
+  const [toasts, setToasts] = (0, import_react15.useState)([]);
+  const idRef = (0, import_react15.useRef)(0);
+  const dismiss = (0, import_react15.useCallback)((id) => {
     setToasts((current) => current.filter((entry) => entry.id !== id));
   }, []);
-  const toast = (0, import_react14.useCallback)(
+  const toast = (0, import_react15.useCallback)(
     (message, options) => {
       const id = ++idRef.current;
       setToasts((current) => {
@@ -9039,31 +9090,31 @@ function ToastProvider({
   ] }) });
 }
 function ToastRow({ entry, onOpenChange }) {
-  const [isOpen, setIsOpen] = (0, import_react14.useState)(true);
+  const [isOpen, setIsOpen] = (0, import_react15.useState)(true);
   const hasAutoDismiss = entry.durationMs > 0 && Number.isFinite(entry.durationMs);
   const duration = hasAutoDismiss ? entry.durationMs : Number.POSITIVE_INFINITY;
-  const timeoutRef = (0, import_react14.useRef)(null);
-  const closeTimeoutRef = (0, import_react14.useRef)(null);
-  const remainingMsRef = (0, import_react14.useRef)(duration);
-  const timerStartedAtRef = (0, import_react14.useRef)(null);
-  const onOpenChangeRef = (0, import_react14.useRef)(onOpenChange);
+  const timeoutRef = (0, import_react15.useRef)(null);
+  const closeTimeoutRef = (0, import_react15.useRef)(null);
+  const remainingMsRef = (0, import_react15.useRef)(duration);
+  const timerStartedAtRef = (0, import_react15.useRef)(null);
+  const onOpenChangeRef = (0, import_react15.useRef)(onOpenChange);
   const rootStyle = {
     "--agg-toast-duration": `${duration}ms`
   };
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onOpenChangeRef.current = onOpenChange;
   }, [onOpenChange]);
-  const clearDismissTimer = (0, import_react14.useCallback)(() => {
+  const clearDismissTimer = (0, import_react15.useCallback)(() => {
     if (!timeoutRef.current) return;
     clearTimeout(timeoutRef.current);
     timeoutRef.current = null;
   }, []);
-  const clearCloseTimer = (0, import_react14.useCallback)(() => {
+  const clearCloseTimer = (0, import_react15.useCallback)(() => {
     if (!closeTimeoutRef.current) return;
     clearTimeout(closeTimeoutRef.current);
     closeTimeoutRef.current = null;
   }, []);
-  const handleOpenChange = (0, import_react14.useCallback)(
+  const handleOpenChange = (0, import_react15.useCallback)(
     (open) => {
       if (open) {
         clearCloseTimer();
@@ -9080,7 +9131,7 @@ function ToastRow({ entry, onOpenChange }) {
     },
     [clearCloseTimer, clearDismissTimer]
   );
-  const startDismissTimer = (0, import_react14.useCallback)(() => {
+  const startDismissTimer = (0, import_react15.useCallback)(() => {
     if (!hasAutoDismiss) return;
     clearDismissTimer();
     timerStartedAtRef.current = Date.now();
@@ -9088,18 +9139,18 @@ function ToastRow({ entry, onOpenChange }) {
       handleOpenChange(false);
     }, remainingMsRef.current);
   }, [clearDismissTimer, handleOpenChange, hasAutoDismiss]);
-  const handlePauseDismissTimer = (0, import_react14.useCallback)(() => {
+  const handlePauseDismissTimer = (0, import_react15.useCallback)(() => {
     if (!hasAutoDismiss || timerStartedAtRef.current === null) return;
     const elapsedMs = Date.now() - timerStartedAtRef.current;
     remainingMsRef.current = Math.max(0, remainingMsRef.current - elapsedMs);
     timerStartedAtRef.current = null;
     clearDismissTimer();
   }, [clearDismissTimer, hasAutoDismiss]);
-  const handleResumeDismissTimer = (0, import_react14.useCallback)(() => {
+  const handleResumeDismissTimer = (0, import_react15.useCallback)(() => {
     if (!hasAutoDismiss || timerStartedAtRef.current !== null) return;
     startDismissTimer();
   }, [hasAutoDismiss, startDismissTimer]);
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     remainingMsRef.current = duration;
     startDismissTimer();
     return () => {
@@ -9171,20 +9222,20 @@ function ToastRow({ entry, onOpenChange }) {
   );
 }
 function useToast() {
-  const ctx = (0, import_react14.useContext)(ToastContext);
+  const ctx = (0, import_react15.useContext)(ToastContext);
   if (!ctx) {
     throw new Error("useToast must be used within a <ToastProvider>");
   }
   return ctx;
 }
 function useOptionalToast() {
-  return (0, import_react14.useContext)(ToastContext);
+  return (0, import_react15.useContext)(ToastContext);
 }
 
 // src/primitives/tooltip/index.tsx
 var import_hooks35 = require("@agg-build/hooks");
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"));
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/primitives/tooltip/tooltip.constants.ts
 var tooltipSizeClasses = {
@@ -9232,7 +9283,7 @@ var Tooltip = ({
     general: { rootClassName },
     features: { enableAnimations }
   } = (0, import_hooks35.useSdkUiConfig)();
-  const trigger = (0, import_react15.useMemo)(() => {
+  const trigger = (0, import_react16.useMemo)(() => {
     if (children) return children;
     return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
       "button",