@agg-market/ui 9.0.0 → 11.0.0

package/dist/{chunk-HJ4UPYM7.mjs → chunk-HMUMJUIL.mjs}

@@ -1,18 +1,25 @@
 import {
   EventList,
+  EventListItem,
   EventListItemDetails,
   MarketDetails,
-  isErrorWithStatus
-} from "./chunk-6CRY27SQ.mjs";
+  MarketDetailsList,
+  getDefaultEventListTabs,
+  isErrorWithStatus,
+  resolveTabVenus
+} from "./chunk-2KGE5AJQ.mjs";
 import {
   PlaceOrder,
   Settlement
-} from "./chunk-3U4VHAP6.mjs";
+} from "./chunk-UONHGMFI.mjs";
 import {
   Button,
   Card,
+  Header,
   Icon,
+  Modal,
   RemoteImage,
+  Skeleton,
   StateMessage,
   Tabs,
   Typography,
@@ -20,106 +27,333 @@ import {
   __spreadProps,
   __spreadValues,
   cn
-} from "./chunk-3G7C6WEC.mjs";
+} from "./chunk-IUJXJEDQ.mjs";
 
 // src/pages/home/index.tsx
-import { useEffect, useMemo, useState } from "react";
-import { useCategories, useLabels } from "@agg-market/hooks";
+import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { useCategories, useLabels as useLabels2, useSdkUiConfig, useVenueEvents } from "@agg-market/hooks";
 
-// src/pages/home/home.constants.ts
-var ALL_CATEGORIES_TAB_VALUE = "trending";
-var DEFAULT_CATEGORIES_LIMIT = 100;
-var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
-var CATEGORY_TAB_NAME_ORDER = [
-  "crypto",
-  "economy",
-  "entertainment",
-  "finance",
-  "geopolitics",
-  "health",
-  "mentions",
-  "politics",
-  "science",
-  "sports",
-  "technology",
-  "weather",
-  "world"
-];
-var getDefaultHomePageTabs = (allCategoryTabLabel) => {
-  return [
+// src/pages/event-market/index.tsx
+import { useMemo, useState } from "react";
+import { useVenueEvent, useLabels } from "@agg-market/hooks";
+import dayjs from "dayjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var resolveHeroMarketId = (event, heroMarketId) => {
+  var _a, _b;
+  if (!((_a = event == null ? void 0 : event.venueMarkets) == null ? void 0 : _a.length))
+    return void 0;
+  if (heroMarketId) {
+    const matchingHeroMarket = event.venueMarkets.find(
+      (market) => market.id === heroMarketId
+    );
+    if (matchingHeroMarket)
+      return matchingHeroMarket.id;
+  }
+  return (_b = event.venueMarkets[0]) == null ? void 0 : _b.id;
+};
+var buildHeroEvent = (event, heroMarketId) => {
+  if (!heroMarketId)
+    return void 0;
+  const heroMarket = event.venueMarkets.find((market) => market.id === heroMarketId);
+  if (!heroMarket)
+    return void 0;
+  return __spreadProps(__spreadValues({}, event), {
+    venueMarkets: [heroMarket]
+  });
+};
+var EventMarketPageMobileTrade = ({
+  placeOrder,
+  classNames
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const handleOpen = () => {
+    setIsOpen(true);
+  };
+  const handleOpenChange = (nextOpen) => {
+    setIsOpen(nextOpen);
+  };
+  const handleClose = () => {
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-20 flex justify-end p-4 lg:hidden",
+          classNames == null ? void 0 : classNames.mobileTradeCta
+        ),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "large",
+            className: "min-w-[168px] shadow-agg-modal",
+            "aria-label": placeOrder.actionLabel,
+            "data-testid": "event-market-page-mobile-trade-cta",
+            onClick: (e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              handleOpen();
+            },
+            children: placeOrder.actionLabel
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(Modal, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsx(
+      Modal.Container,
+      {
+        "aria-label": placeOrder.title,
+        maxWidth: "420px",
+        classNames: {
+          content: "items-end p-0 sm:items-center sm:p-4",
+          container: cn(
+            "w-full max-w-[420px] border-0 bg-transparent shadow-none",
+            classNames == null ? void 0 : classNames.mobileTradeModal
+          )
+        },
+        children: /* @__PURE__ */ jsx(
+          PlaceOrder,
+          __spreadProps(__spreadValues({}, placeOrder), {
+            isDismissible: true,
+            className: cn("w-full rounded-t-agg-2xl sm:rounded-agg-xl", classNames == null ? void 0 : classNames.mobileTrade),
+            onClose: handleClose
+          })
+        )
+      }
+    ) })
+  ] });
+};
+var EventMarketPageUnavailableState = ({
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(
+    Card,
     {
-      value: ALL_CATEGORIES_TAB_VALUE,
-      label: allCategoryTabLabel,
-      iconName: "arrow-trend-up"
-    },
-    { value: "crypto", label: "crypto", categoryIds: ["crypto"] },
-    { value: "economy", label: "economy", categoryIds: ["economy"] },
+      className: "rounded-agg-xl border border-agg-separator bg-agg-secondary p-6 shadow-none hover:shadow-none",
+      role: "status",
+      "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
+      children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
+        /* @__PURE__ */ jsx(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
+      ] })
+    }
+  );
+};
+var EventMarketPageNotFoundState = ({
+  ariaLabel
+}) => {
+  const labels = useLabels();
+  return /* @__PURE__ */ jsx(Card, { className: "overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary p-0 shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx(
+    StateMessage,
     {
-      value: "entertainment",
-      label: "entertainment",
-      categoryIds: ["entertainment"]
-    },
-    { value: "finance", label: "finance", categoryIds: ["finance"] },
+      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
+      title: labels.eventItemDetails.notFoundTitle,
+      description: labels.eventItemDetails.notFoundDescription,
+      className: "min-h-[320px] md:min-h-[360px]"
+    }
+  ) });
+};
+var EventMarketPageLoadingState = ({
+  placeOrder,
+  settlement,
+  classNames
+}) => {
+  const labels = useLabels();
+  const fallbackSettlement = settlement != null ? settlement : {
+    sectionLabel: labels.trading.settlementSection,
+    question: labels.eventMarketPage.loadingSettlementQuestion,
+    differencesTitle: labels.eventMarketPage.loadingSettlementDifferencesTitle,
+    differences: [labels.eventMarketPage.loadingSettlementPlaceholder],
+    venues: [
+      {
+        venue: "polymarket",
+        description: labels.eventMarketPage.loadingSettlementPlaceholder
+      }
+    ]
+  };
+  return /* @__PURE__ */ jsxs("section", { className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+          classNames == null ? void 0 : classNames.content
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+            /* @__PURE__ */ jsx(
+              EventListItemDetails,
+              {
+                isLoading: true,
+                classNames: {
+                  root: classNames == null ? void 0 : classNames.hero
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
+              /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
+              /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
+              /* @__PURE__ */ jsx(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
+            /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) })
+          ] }),
+          placeOrder ? /* @__PURE__ */ jsx(
+            "aside",
+            {
+              className: cn(
+                "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
+                classNames == null ? void 0 : classNames.sidebar
+              ),
+              children: /* @__PURE__ */ jsx(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
+            }
+          ) : null
+        ]
+      }
+    ),
+    placeOrder ? /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-20 flex justify-end p-4 lg:hidden",
+          classNames == null ? void 0 : classNames.mobileTradeCta
+        ),
+        children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "large",
+            className: "min-w-[168px] shadow-agg-modal",
+            "aria-label": placeOrder.actionLabel,
+            disabled: true,
+            children: placeOrder.actionLabel
+          }
+        )
+      }
+    ) : null
+  ] });
+};
+var EventMarketPageContent = ({
+  event,
+  heroMarketId,
+  defaultExpandedMarketId,
+  expandedMarketId,
+  heroDefaultTimeRange,
+  placeOrder,
+  settlement,
+  classNames,
+  ariaLabel
+}) => {
+  const resolvedHeroMarketId = useMemo(() => {
+    return resolveHeroMarketId(event, heroMarketId);
+  }, [event, heroMarketId]);
+  const heroEvent = useMemo(() => {
+    return buildHeroEvent(event, resolvedHeroMarketId);
+  }, [event, resolvedHeroMarketId]);
+  if (!heroEvent || !event.venueMarkets.length) {
+    return /* @__PURE__ */ jsx(EventMarketPageUnavailableState, { ariaLabel });
+  }
+  return /* @__PURE__ */ jsxs(
+    "section",
     {
-      value: "geopolitics",
-      label: "geopolitics",
-      categoryIds: ["geopolitics"]
-    },
-    { value: "health", label: "health", categoryIds: ["health"] },
-    { value: "mentions", label: "mentions", categoryIds: ["mentions"] },
-    { value: "politics", label: "politics", categoryIds: ["politics"] },
-    { value: "science", label: "science", categoryIds: ["science"] },
-    { value: "sports", label: "sports", categoryIds: ["sports"] },
-    { value: "technology", label: "technology", categoryIds: ["technology"] },
-    { value: "weather", label: "weather", categoryIds: ["weather"] },
-    { value: "world", label: "world", categoryIds: ["world"] }
-  ];
+      className: cn("w-full pb-24 lg:pb-0", classNames == null ? void 0 : classNames.root),
+      "aria-label": ariaLabel != null ? ariaLabel : event.title,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
+              classNames == null ? void 0 : classNames.content
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
+                /* @__PURE__ */ jsx(
+                  EventListItemDetails,
+                  {
+                    event: heroEvent,
+                    defaultTimeRange: heroDefaultTimeRange,
+                    classNames: {
+                      root: classNames == null ? void 0 : classNames.hero
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx(MarketDetailsList, { eventId: event.id }),
+                settlement ? /* @__PURE__ */ jsx("div", { className: "md:hidden", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
+                settlement ? /* @__PURE__ */ jsx("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
+              ] }),
+              placeOrder ? /* @__PURE__ */ jsx(
+                "aside",
+                {
+                  className: cn("hidden w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar),
+                  "data-testid": "event-market-page-desktop-trade",
+                  children: /* @__PURE__ */ jsx(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade }))
+                }
+              ) : null
+            ]
+          }
+        ),
+        placeOrder ? /* @__PURE__ */ jsx(EventMarketPageMobileTrade, { placeOrder, classNames }) : null
+      ]
+    }
+  );
+};
+var EventMarketPage = (props) => {
+  var _a;
+  const hasEventProp = "event" in props && !!props.event;
+  const {
+    event: fetchedEvent,
+    error: eventError,
+    isLoading: isFetchingEvent
+  } = useVenueEvent({
+    eventId: hasEventProp ? "" : (_a = props.eventId) != null ? _a : "",
+    enabled: !props.isLoading && !hasEventProp && !!props.eventId
+  });
+  if (props.isLoading) {
+    return /* @__PURE__ */ jsx(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
+  }
+  if ("event" in props && props.event) {
+    return /* @__PURE__ */ jsx(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
+  }
+  if (isFetchingEvent) {
+    return /* @__PURE__ */ jsx(
+      EventMarketPageLoadingState,
+      {
+        placeOrder: props.placeOrder,
+        settlement: props.settlement,
+        classNames: props.classNames
+      }
+    );
+  }
+  if (!fetchedEvent) {
+    if (isErrorWithStatus(eventError, 404)) {
+      return /* @__PURE__ */ jsx(EventMarketPageNotFoundState, { ariaLabel: props.ariaLabel });
+    }
+    return /* @__PURE__ */ jsx(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
+  }
+  return /* @__PURE__ */ jsx(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
 };
+EventMarketPage.displayName = "EventMarketPage";
+
+// src/pages/home/home.constants.ts
+var ALL_CATEGORIES_TAB_VALUE = "trending";
+var DEFAULT_CATEGORIES_LIMIT = 100;
+var DEFAULT_ALL_CATEGORY_TAB_LABEL = "Trending";
 var getDefaultEventSectionItems = (labels) => {
   return [
     {
       id: "top-markets",
       title: labels.home.topMarkets,
       maxItemsPerRow: 3,
-      limit: 3,
-      maxVisibleItems: 3
-    },
-    {
-      id: "new-markets",
-      title: labels.home.newMarkets,
-      maxItemsPerRow: 3,
-      limit: 3,
-      maxVisibleItems: 3
+      limit: 9,
+      maxVisibleItems: 9
     }
   ];
 };
 
 // src/pages/home/home.utils.ts
-var categoryOrderMap = CATEGORY_TAB_NAME_ORDER.reduce(
-  (accumulator, name, index) => {
-    accumulator.set(name, index);
-    return accumulator;
-  },
-  /* @__PURE__ */ new Map()
-);
-var normalizeCategoryName = (name) => {
-  return name.trim().toLowerCase();
-};
 var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
-  const sortedCategories = [...categories].sort((left, right) => {
-    const leftName = normalizeCategoryName(left.name);
-    const rightName = normalizeCategoryName(right.name);
-    const leftOrder = categoryOrderMap.get(leftName);
-    const rightOrder = categoryOrderMap.get(rightName);
-    if (leftOrder != null && rightOrder != null) {
-      return leftOrder - rightOrder;
-    }
-    if (leftOrder != null)
-      return -1;
-    if (rightOrder != null)
-      return 1;
-    return leftName.localeCompare(rightName);
-  });
   const seenCategoryIds = /* @__PURE__ */ new Set();
   const tabs = [
     {
@@ -128,13 +362,13 @@ var resolveCategoryTabs = (categories, allCategoryTabLabel) => {
       iconName: "arrow-trend-up"
     }
   ];
-  for (const category of sortedCategories) {
+  for (const category of categories) {
     if (seenCategoryIds.has(category.id))
       continue;
     seenCategoryIds.add(category.id);
     tabs.push({
       value: category.id,
-      label: normalizeCategoryName(category.name),
+      label: category.name.trim().toLowerCase(),
       categoryIds: [category.id]
     });
   }
@@ -147,44 +381,211 @@ var resolveInitialTabValue = (tabs, defaultActiveTab) => {
     if (hasDefaultTab)
       return defaultActiveTab;
   }
-  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "trending";
+  return (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : ALL_CATEGORIES_TAB_VALUE;
 };
 
 // src/pages/home/index.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MIN_SEARCH_LENGTH = 3;
+var SEARCH_DEBOUNCE_MS = 300;
+var SEARCH_RESULTS_LIMIT = 9;
+var HomeSearchResults = ({
+  activeTabValue,
+  onTabChange,
+  query,
+  tabs,
+  resolvedTabs,
+  className
+}) => {
+  const labels = useLabels2();
+  const { search: searchConfig } = useSdkUiConfig();
+  const [activeVenueTabValue, setActiveVenueTabValue] = useState2("matched");
+  const eventListTabs = useMemo2(() => {
+    return getDefaultEventListTabs(labels);
+  }, [labels]);
+  const activeVenueTab = useMemo2(() => {
+    return eventListTabs.find((tab) => tab.value === activeVenueTabValue);
+  }, [activeVenueTabValue, eventListTabs]);
+  const activeCategoryTab = useMemo2(() => {
+    return resolvedTabs.find((tab) => tab.value === activeTabValue);
+  }, [activeTabValue, resolvedTabs]);
+  const { events, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useVenueEvents({
+    queryKeyScope: "home-search-results",
+    search: query,
+    categoryIds: activeTabValue === ALL_CATEGORIES_TAB_VALUE ? void 0 : activeCategoryTab == null ? void 0 : activeCategoryTab.categoryIds,
+    venues: resolveTabVenus(activeVenueTab),
+    limit: SEARCH_RESULTS_LIMIT
+  });
+  const loadMoreRef = useRef(null);
+  useEffect2(() => {
+    if (!hasNextPage)
+      return;
+    const target = loadMoreRef.current;
+    if (!target)
+      return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!(entry == null ? void 0 : entry.isIntersecting))
+          return;
+        if (isLoading || isFetchingNextPage || !hasNextPage)
+          return;
+        void fetchNextPage();
+      },
+      {
+        rootMargin: "320px 0px"
+      }
+    );
+    observer.observe(target);
+    return () => {
+      observer.disconnect();
+    };
+  }, [fetchNextPage, hasNextPage, isFetchingNextPage, isLoading]);
+  const resultsTitle = labels.search.resultsSummary(
+    hasNextPage ? `${events.length}+` : `${events.length}`,
+    query
+  );
+  const searchResultTabs = useMemo2(() => {
+    return eventListTabs.map((tab) => {
+      const isActive = tab.value === activeVenueTabValue;
+      return {
+        value: tab.value,
+        label: tab.label,
+        icon: tab.iconName ? /* @__PURE__ */ jsx2(
+          Icon,
+          {
+            name: tab.iconName,
+            size: "small",
+            color: isActive ? "var(--agg-color-primary)" : "var(--agg-color-foreground)"
+          }
+        ) : tab.venueLogo ? /* @__PURE__ */ jsx2(
+          VenueLogo,
+          {
+            venue: tab.venueLogo,
+            size: "small",
+            className: cn(isActive ? "text-agg-primary" : "text-agg-foreground")
+          }
+        ) : void 0,
+        disabled: tab.disabled
+      };
+    });
+  }, [activeVenueTabValue, eventListTabs]);
+  const loadingPlaceholderCount = isFetchingNextPage ? 3 : 0;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx2(Skeleton, { view: "event-list", ariaLabel: labels.search.loadingResults, className });
+  }
+  return /* @__PURE__ */ jsxs2("section", { className: cn("flex w-full flex-col gap-5", className), children: [
+    /* @__PURE__ */ jsx2("header", { className: "flex flex-col gap-5", children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between", children: [
+      /* @__PURE__ */ jsx2(Typography, { as: "h2", variant: "title", className: "min-w-0", children: resultsTitle }),
+      /* @__PURE__ */ jsx2(
+        Tabs,
+        {
+          ariaLabel: labels.eventList.tabsAria(resultsTitle),
+          items: searchResultTabs,
+          value: activeVenueTabValue,
+          onChange: setActiveVenueTabValue
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-1 gap-5 md:grid-cols-3", children: [
+      events.map((event) => /* @__PURE__ */ jsx2(
+        EventListItem,
+        {
+          event,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          },
+          onClick: (selectedEvent) => {
+            if (!selectedEvent)
+              return;
+            searchConfig.onSelect(selectedEvent);
+          }
+        },
+        event.id
+      )),
+      Array.from({ length: loadingPlaceholderCount }).map((_, index) => /* @__PURE__ */ jsx2(
+        EventListItem,
+        {
+          isLoading: true,
+          classNames: {
+            root: "w-full min-w-0 max-w-none"
+          }
+        },
+        `search-results-loading-${index}`
+      )),
+      !isError && events.length === 0 ? /* @__PURE__ */ jsx2(Card, { className: "col-span-full overflow-hidden shadow-none hover:shadow-none p-0! border-none! bg-transparent!", children: /* @__PURE__ */ jsx2(
+        StateMessage,
+        {
+          ariaLabel: labels.eventList.emptyAria,
+          title: labels.eventList.emptyTitle,
+          description: labels.eventList.emptyDescription
+        }
+      ) }) : null,
+      isError ? /* @__PURE__ */ jsx2(
+        Typography,
+        {
+          variant: "body",
+          className: "col-span-full flex h-32 w-full items-center justify-center",
+          children: labels.eventList.error
+        }
+      ) : null
+    ] }),
+    hasNextPage ? /* @__PURE__ */ jsx2("div", { ref: loadMoreRef, className: "h-px w-full", "aria-hidden": true }) : null
+  ] });
+};
 var HomePage = ({
   tabs,
   defaultActiveTab,
   onTabChange,
   eventSectionItems,
   classNames,
-  useCategoriesTabs = true,
   categoriesLimit = DEFAULT_CATEGORIES_LIMIT,
   allCategoryTabLabel = DEFAULT_ALL_CATEGORY_TAB_LABEL
 }) => {
-  const labels = useLabels();
+  const labels = useLabels2();
+  const {
+    search: {
+      value: searchValue,
+      result: selectedEvent,
+      isShowingAllResults,
+      onSelect: onSelectEvent
+    }
+  } = useSdkUiConfig();
   const hasCustomTabs = !!tabs && tabs.length > 0;
-  const shouldUseCategoriesTabs = !hasCustomTabs && useCategoriesTabs;
+  const normalizedSearchValue = searchValue.trim();
+  const [debouncedSearchValue, setDebouncedSearchValue] = useState2(() => {
+    return normalizedSearchValue.length >= MIN_SEARCH_LENGTH ? normalizedSearchValue : "";
+  });
+  useEffect2(() => {
+    if (normalizedSearchValue.length < MIN_SEARCH_LENGTH) {
+      setDebouncedSearchValue("");
+      return;
+    }
+    const timeoutId = window.setTimeout(() => {
+      setDebouncedSearchValue(normalizedSearchValue);
+    }, SEARCH_DEBOUNCE_MS);
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [normalizedSearchValue]);
   const resolvedAllCategoryTabLabel = allCategoryTabLabel === DEFAULT_ALL_CATEGORY_TAB_LABEL ? labels.home.trending : allCategoryTabLabel;
-  const { categories } = useCategories({
+  const { categories, isLoading: isCategoriesLoading } = useCategories({
     limit: categoriesLimit,
-    enabled: shouldUseCategoriesTabs
+    enabled: !hasCustomTabs
   });
-  const categoryTabs = useMemo(() => {
+  const categoryTabs = useMemo2(() => {
     return resolveCategoryTabs(categories, resolvedAllCategoryTabLabel);
   }, [categories, resolvedAllCategoryTabLabel]);
-  const resolvedTabs = useMemo(() => {
+  const resolvedTabs = useMemo2(() => {
     if (hasCustomTabs && tabs)
       return tabs;
-    if (shouldUseCategoriesTabs)
-      return categoryTabs;
-    return getDefaultHomePageTabs(resolvedAllCategoryTabLabel);
-  }, [categoryTabs, hasCustomTabs, resolvedAllCategoryTabLabel, shouldUseCategoriesTabs, tabs]);
+    return categoryTabs;
+  }, [categoryTabs, hasCustomTabs, tabs]);
   const resolvedEventSectionItems = eventSectionItems && eventSectionItems.length > 0 ? eventSectionItems : getDefaultEventSectionItems(labels);
-  const [activeTabValue, setActiveTabValue] = useState(() => {
+  const [activeTabValue, setActiveTabValue] = useState2(() => {
     return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
   });
-  useEffect(() => {
+  useEffect2(() => {
     setActiveTabValue((currentValue) => {
       const hasCurrentValue = resolvedTabs.some((tab) => tab.value === currentValue);
       if (hasCurrentValue)
@@ -192,13 +593,13 @@ var HomePage = ({
       return resolveInitialTabValue(resolvedTabs, defaultActiveTab);
     });
   }, [defaultActiveTab, resolvedTabs]);
-  const tabsItems = useMemo(() => {
+  const tabsItems = useMemo2(() => {
     return resolvedTabs.map((tab) => {
       const isActive = tab.value === activeTabValue;
       return {
         value: tab.value,
         label: tab.label,
-        icon: tab.iconName ? /* @__PURE__ */ jsx(
+        icon: tab.iconName ? /* @__PURE__ */ jsx2(
           Icon,
           {
             name: tab.iconName,
@@ -210,26 +611,24 @@ var HomePage = ({
       };
     });
   }, [activeTabValue, resolvedTabs]);
-  const activeTab = useMemo(() => {
+  const activeTab = useMemo2(() => {
     return resolvedTabs.find((tab) => tab.value === activeTabValue);
   }, [activeTabValue, resolvedTabs]);
-  const resolvedSectionItems = useMemo(() => {
-    var _a, _b, _c, _d, _e;
+  const resolvedSectionItems = useMemo2(() => {
+    var _a, _b, _c, _d;
     if (activeTabValue === ALL_CATEGORIES_TAB_VALUE) {
       return resolvedEventSectionItems;
     }
     const maxItemsPerRow = (_b = (_a = resolvedEventSectionItems[0]) == null ? void 0 : _a.maxItemsPerRow) != null ? _b : 3;
-    const showVenueLogo = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.showVenueLogo;
-    const firstSectionLimit = (_d = resolvedEventSectionItems[0]) == null ? void 0 : _d.limit;
+    const firstSectionLimit = (_c = resolvedEventSectionItems[0]) == null ? void 0 : _c.limit;
     const limit = firstSectionLimit && Number.isFinite(firstSectionLimit) ? Math.max(9, Math.floor(firstSectionLimit)) : 9;
     return [
       {
         id: `${activeTabValue}-markets`,
-        title: (_e = activeTab == null ? void 0 : activeTab.label) != null ? _e : activeTabValue,
+        title: (_d = activeTab == null ? void 0 : activeTab.label) != null ? _d : activeTabValue,
         maxItemsPerRow,
         limit,
         maxVisibleItems: void 0,
-        showVenueLogo,
         search: activeTab == null ? void 0 : activeTab.search,
         categoryIds: activeTab == null ? void 0 : activeTab.categoryIds
       }
@@ -239,12 +638,16 @@ var HomePage = ({
     setActiveTabValue(value);
     onTabChange == null ? void 0 : onTabChange(value);
   };
-  return /* @__PURE__ */ jsxs("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
-    /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs2("section", { className: cn("flex w-full flex-col", classNames == null ? void 0 : classNames.root), children: [
+    /* @__PURE__ */ jsx2(Header, { searchProps: {} }),
+    !selectedEvent && !isShowingAllResults ? /* @__PURE__ */ jsx2(
       "header",
       {
-        className: cn("w-full bg-agg-secondary border-b border-agg-separator", classNames == null ? void 0 : classNames.header),
-        children: /* @__PURE__ */ jsx(
+        className: cn(
+          "w-full bg-agg-secondary border-b border-agg-separator",
+          classNames == null ? void 0 : classNames.header
+        ),
+        children: /* @__PURE__ */ jsx2(
           Tabs,
           {
             ariaLabel: labels.home.categoryTabsAria,
@@ -256,26 +659,39 @@ var HomePage = ({
           }
         )
       }
-    ),
-    /* @__PURE__ */ jsx(
+    ) : null,
+    /* @__PURE__ */ jsx2(
       "main",
       {
         className: cn(
           "flex w-full flex-col gap-4 md:gap-10 px-4 md:px-10 py-4 md:py-8",
           classNames == null ? void 0 : classNames.sections
         ),
-        children: resolvedSectionItems.map((eventSectionItem) => {
-          var _a, _b, _c;
-          return /* @__PURE__ */ jsx(
+        children: selectedEvent ? /* @__PURE__ */ jsx2(EventMarketPage, { eventId: selectedEvent.id }) : isShowingAllResults && debouncedSearchValue ? /* @__PURE__ */ jsx2(
+          HomeSearchResults,
+          {
+            activeTabValue,
+            onTabChange: handleTabChange,
+            query: debouncedSearchValue,
+            tabs: tabsItems,
+            resolvedTabs
+          }
+        ) : resolvedSectionItems.map((eventSectionItem) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsx2(
             EventList,
             {
               title: eventSectionItem.title,
               maxItemsPerRow: eventSectionItem.maxItemsPerRow,
               limit: eventSectionItem.limit,
               maxVisibleItems: eventSectionItem.maxVisibleItems,
-              showVenueLogo: eventSectionItem.showVenueLogo,
-              search: (_b = eventSectionItem.search) != null ? _b : activeTab == null ? void 0 : activeTab.search,
-              categoryIds: (_c = eventSectionItem.categoryIds) != null ? _c : activeTab == null ? void 0 : activeTab.categoryIds
+              search: debouncedSearchValue || eventSectionItem.search || (activeTab == null ? void 0 : activeTab.search),
+              categoryIds: (_b = eventSectionItem.categoryIds) != null ? _b : activeTab == null ? void 0 : activeTab.categoryIds,
+              onClick: (event) => {
+                if (!event)
+                  return;
+                onSelectEvent(event);
+              }
             },
             (_a = eventSectionItem.id) != null ? _a : eventSectionItem.title
           );
@@ -286,288 +702,6 @@ var HomePage = ({
 };
 HomePage.displayName = "HomePage";
 
-// src/pages/event-market/index.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useState as useState2 } from "react";
-import { useVenueEvent, useLabels as useLabels2 } from "@agg-market/hooks";
-import dayjs from "dayjs";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var getMarketDateValue = (market, fallbackIndex) => {
-  var _a, _b, _c;
-  const candidateDate = (_c = (_b = (_a = market.endDate) != null ? _a : market.startDate) != null ? _b : market.creationDate) != null ? _c : null;
-  if (!candidateDate)
-    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
-  const parsedDate = dayjs(candidateDate);
-  if (!parsedDate.isValid()) {
-    return Number.MAX_SAFE_INTEGER - 1 + fallbackIndex;
-  }
-  return parsedDate.valueOf();
-};
-var resolveHeroMarketId = (event, heroMarketId) => {
-  var _a, _b;
-  if (!((_a = event == null ? void 0 : event.venueMarkets) == null ? void 0 : _a.length))
-    return void 0;
-  if (heroMarketId) {
-    const matchingHeroMarket = event.venueMarkets.find(
-      (market) => market.id === heroMarketId
-    );
-    if (matchingHeroMarket)
-      return matchingHeroMarket.id;
-  }
-  return (_b = event.venueMarkets[0]) == null ? void 0 : _b.id;
-};
-var buildHeroEvent = (event, heroMarketId) => {
-  if (!heroMarketId)
-    return void 0;
-  const heroMarket = event.venueMarkets.find((market) => market.id === heroMarketId);
-  if (!heroMarket)
-    return void 0;
-  return __spreadProps(__spreadValues({}, event), {
-    venueMarkets: [heroMarket]
-  });
-};
-var resolveDetailedMarkets = (event, heroMarketId) => {
-  return event.venueMarkets.filter((market) => market.id !== heroMarketId).map((market, index) => ({
-    market,
-    index
-  })).sort(
-    (leftItem, rightItem) => {
-      return getMarketDateValue(leftItem.market, leftItem.index) - getMarketDateValue(rightItem.market, rightItem.index);
-    }
-  ).map((item) => item.market);
-};
-var resolveInitialExpandedMarketId = (detailedMarkets, defaultExpandedMarketId) => {
-  var _a, _b;
-  if (!detailedMarkets.length)
-    return null;
-  if (defaultExpandedMarketId) {
-    const matchingMarket = detailedMarkets.find((market) => market.id === defaultExpandedMarketId);
-    if (matchingMarket)
-      return matchingMarket.id;
-  }
-  return (_b = (_a = detailedMarkets[0]) == null ? void 0 : _a.id) != null ? _b : null;
-};
-var EventMarketPageUnavailableState = ({
-  ariaLabel
-}) => {
-  const labels = useLabels2();
-  return /* @__PURE__ */ jsx2(
-    Card,
-    {
-      className: "rounded-agg-xl border border-agg-separator bg-agg-secondary p-6 shadow-none hover:shadow-none",
-      role: "status",
-      "aria-label": ariaLabel != null ? ariaLabel : labels.eventMarketPage.unavailableAria,
-      children: /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx2(Typography, { variant: "body-large-strong", children: labels.eventMarketPage.unavailableTitle }),
-        /* @__PURE__ */ jsx2(Typography, { variant: "label", className: "text-agg-muted-foreground", children: labels.eventMarketPage.unavailableDescription })
-      ] })
-    }
-  );
-};
-var EventMarketPageNotFoundState = ({
-  ariaLabel
-}) => {
-  const labels = useLabels2();
-  return /* @__PURE__ */ jsx2(Card, { className: "overflow-hidden rounded-agg-xl border border-agg-separator bg-agg-secondary p-0 shadow-none hover:shadow-none", children: /* @__PURE__ */ jsx2(
-    StateMessage,
-    {
-      ariaLabel: ariaLabel != null ? ariaLabel : labels.eventItemDetails.notFoundAria,
-      title: labels.eventItemDetails.notFoundTitle,
-      description: labels.eventItemDetails.notFoundDescription,
-      className: "min-h-[320px] md:min-h-[360px]"
-    }
-  ) });
-};
-var EventMarketPageLoadingState = ({
-  placeOrder,
-  settlement,
-  classNames
-}) => {
-  const labels = useLabels2();
-  const fallbackSettlement = settlement != null ? settlement : {
-    sectionLabel: labels.trading.settlementSection,
-    question: labels.eventMarketPage.loadingSettlementQuestion,
-    differencesTitle: labels.eventMarketPage.loadingSettlementDifferencesTitle,
-    differences: [labels.eventMarketPage.loadingSettlementPlaceholder],
-    venues: [
-      {
-        venue: "polymarket",
-        description: labels.eventMarketPage.loadingSettlementPlaceholder
-      }
-    ]
-  };
-  return /* @__PURE__ */ jsx2("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), children: /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "mx-auto flex w-full max-w-[1200px] flex-col gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
-        classNames == null ? void 0 : classNames.content
-      ),
-      children: [
-        /* @__PURE__ */ jsxs2("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-          /* @__PURE__ */ jsx2(
-            EventListItemDetails,
-            {
-              isLoading: true,
-              classNames: {
-                root: classNames == null ? void 0 : classNames.hero
-              }
-            }
-          ),
-          /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: [
-            /* @__PURE__ */ jsx2(MarketDetails, { isLoading: true, isOpened: true, classNames: { root: "w-full" } }),
-            /* @__PURE__ */ jsx2(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } }),
-            /* @__PURE__ */ jsx2(MarketDetails, { isLoading: true, isOpened: false, classNames: { root: "w-full" } })
-          ] }),
-          /* @__PURE__ */ jsx2("div", { className: "md:hidden", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
-          /* @__PURE__ */ jsx2("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, fallbackSettlement), { isLoading: true, className: classNames == null ? void 0 : classNames.settlement })) }),
-          placeOrder ? /* @__PURE__ */ jsx2("div", { className: "md:hidden", children: /* @__PURE__ */ jsx2(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.mobileTrade })) }) : null
-        ] }),
-        placeOrder ? /* @__PURE__ */ jsx2(
-          "aside",
-          {
-            className: cn(
-              "hidden w-full shrink-0 lg:sticky lg:top-6 lg:block lg:w-[343px]",
-              classNames == null ? void 0 : classNames.sidebar
-            ),
-            children: /* @__PURE__ */ jsx2(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { isLoading: true, className: classNames == null ? void 0 : classNames.trade }))
-          }
-        ) : null
-      ]
-    }
-  ) });
-};
-var EventMarketPageContent = ({
-  event,
-  heroMarketId,
-  defaultExpandedMarketId,
-  expandedMarketId,
-  onExpandedMarketChange,
-  heroDefaultTimeRange,
-  placeOrder,
-  settlement,
-  classNames,
-  ariaLabel
-}) => {
-  const labels = useLabels2();
-  const resolvedHeroMarketId = useMemo2(() => {
-    return resolveHeroMarketId(event, heroMarketId);
-  }, [event, heroMarketId]);
-  const heroEvent = useMemo2(() => {
-    return buildHeroEvent(event, resolvedHeroMarketId);
-  }, [event, resolvedHeroMarketId]);
-  const detailedMarkets = useMemo2(() => {
-    return resolveDetailedMarkets(event, resolvedHeroMarketId);
-  }, [event, resolvedHeroMarketId]);
-  const [internalExpandedMarketId, setInternalExpandedMarketId] = useState2(() => {
-    return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
-  });
-  useEffect2(() => {
-    if (typeof expandedMarketId === "undefined")
-      return;
-    setInternalExpandedMarketId(expandedMarketId);
-  }, [expandedMarketId]);
-  useEffect2(() => {
-    if (typeof expandedMarketId !== "undefined")
-      return;
-    setInternalExpandedMarketId((currentExpandedMarketId) => {
-      if (currentExpandedMarketId && detailedMarkets.some((market) => market.id === currentExpandedMarketId)) {
-        return currentExpandedMarketId;
-      }
-      return resolveInitialExpandedMarketId(detailedMarkets, defaultExpandedMarketId);
-    });
-  }, [defaultExpandedMarketId, detailedMarkets, expandedMarketId]);
-  const resolvedExpandedMarketId = typeof expandedMarketId === "undefined" ? internalExpandedMarketId : expandedMarketId;
-  const handleExpandedMarketChange = (marketId, isOpened) => {
-    const nextExpandedMarketId = isOpened ? marketId : null;
-    if (typeof expandedMarketId === "undefined") {
-      setInternalExpandedMarketId(nextExpandedMarketId);
-    }
-    onExpandedMarketChange == null ? void 0 : onExpandedMarketChange(nextExpandedMarketId);
-  };
-  if (!heroEvent || !event.venueMarkets.length) {
-    return /* @__PURE__ */ jsx2(EventMarketPageUnavailableState, { ariaLabel });
-  }
-  return /* @__PURE__ */ jsx2("section", { className: cn("w-full", classNames == null ? void 0 : classNames.root), "aria-label": ariaLabel != null ? ariaLabel : event.title, children: /* @__PURE__ */ jsxs2(
-    "div",
-    {
-      className: cn(
-        "mx-auto flex w-full max-w-[1200px] flex-row gap-6 px-3 py-3 md:px-6 md:py-6 lg:flex-row lg:items-start lg:gap-8",
-        classNames == null ? void 0 : classNames.content
-      ),
-      children: [
-        /* @__PURE__ */ jsxs2("div", { className: cn("flex min-w-0 flex-1 flex-col gap-6", classNames == null ? void 0 : classNames.main), children: [
-          /* @__PURE__ */ jsx2(
-            EventListItemDetails,
-            {
-              event: heroEvent,
-              defaultTimeRange: heroDefaultTimeRange,
-              classNames: {
-                root: classNames == null ? void 0 : classNames.hero
-              }
-            }
-          ),
-          detailedMarkets.length > 0 ? /* @__PURE__ */ jsx2("div", { className: cn("flex flex-col gap-3", classNames == null ? void 0 : classNames.markets), children: detailedMarkets.map((market) => {
-            const isOpened = resolvedExpandedMarketId === market.id;
-            return /* @__PURE__ */ jsx2(
-              MarketDetails,
-              {
-                event,
-                marketId: market.id,
-                isOpened,
-                defaultTab: "order-book",
-                ariaLabel: market.endDate && dayjs(market.endDate).isValid() ? labels.eventMarketPage.marketDetailsAriaByDate(
-                  dayjs(market.endDate).format("MMM D, YYYY")
-                ) : labels.eventMarketPage.marketDetailsAriaByQuestion(market.question),
-                onOpenChange: (nextIsOpened) => handleExpandedMarketChange(market.id, nextIsOpened)
-              },
-              market.id
-            );
-          }) }) : null,
-          settlement ? /* @__PURE__ */ jsx2("div", { className: "md:hidden", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null,
-          settlement ? /* @__PURE__ */ jsx2("div", { className: "hidden md:block", children: /* @__PURE__ */ jsx2(Settlement, __spreadProps(__spreadValues({}, settlement), { className: classNames == null ? void 0 : classNames.settlement })) }) : null
-        ] }),
-        placeOrder ? /* @__PURE__ */ jsx2("aside", { className: cn("w-full lg:block lg:max-w-[360px]", classNames == null ? void 0 : classNames.sidebar), children: /* @__PURE__ */ jsx2(PlaceOrder, __spreadProps(__spreadValues({}, placeOrder), { className: classNames == null ? void 0 : classNames.trade })) }) : null
-      ]
-    }
-  ) });
-};
-var EventMarketPage = (props) => {
-  var _a;
-  const hasEventProp = "event" in props && !!props.event;
-  const {
-    event: fetchedEvent,
-    error: eventError,
-    isLoading: isFetchingEvent
-  } = useVenueEvent({
-    eventId: hasEventProp ? "" : (_a = props.eventId) != null ? _a : "",
-    enabled: !props.isLoading && !hasEventProp && !!props.eventId
-  });
-  if (props.isLoading) {
-    return /* @__PURE__ */ jsx2(EventMarketPageLoadingState, { placeOrder: props.placeOrder, settlement: props.settlement });
-  }
-  if ("event" in props && props.event) {
-    return /* @__PURE__ */ jsx2(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: props.event }));
-  }
-  if (isFetchingEvent) {
-    return /* @__PURE__ */ jsx2(
-      EventMarketPageLoadingState,
-      {
-        placeOrder: props.placeOrder,
-        settlement: props.settlement,
-        classNames: props.classNames
-      }
-    );
-  }
-  if (!fetchedEvent) {
-    if (isErrorWithStatus(eventError, 404)) {
-      return /* @__PURE__ */ jsx2(EventMarketPageNotFoundState, { ariaLabel: props.ariaLabel });
-    }
-    return /* @__PURE__ */ jsx2(EventMarketPageUnavailableState, { ariaLabel: props.ariaLabel });
-  }
-  return /* @__PURE__ */ jsx2(EventMarketPageContent, __spreadProps(__spreadValues({}, props), { event: fetchedEvent }));
-};
-EventMarketPage.displayName = "EventMarketPage";
-
 // src/pages/user-profile/components/balance-display.tsx
 import { useState as useState3 } from "react";
 
@@ -1204,7 +1338,7 @@ var UserProfilePage = ({
 UserProfilePage.displayName = "UserProfilePage";
 
 export {
-  HomePage,
   EventMarketPage,
+  HomePage,
   UserProfilePage
 };