@zappie/theme-base 0.1.0 → 0.1.2

package/dist/catalogue.js

@@ -1,1218 +1,28 @@
 "use client";
-import { Description, ItemImage } from './chunk-USSLDBDY.js';
-import { ClearCart, CartLine } from './chunk-FB5DRCU7.js';
-import './chunk-2MV6KU3R.js';
-import { useBaseHostBridge } from './chunk-QWST2TA2.js';
-import { ThemeClassProvider } from './chunk-JFEI2OUZ.js';
-import { useCatalogueNavigation } from './chunk-ILOCSCZL.js';
-import { useOverlay, createSearchIndex, OpenStatus, Search, Overlay, Cart } from '@zappie/foundations';
-import { useZappie, useStore, useCart, useCartCatalogue } from '@zappie/sdk/react';
-import { useState, useCallback, useMemo, useEffect, useRef, Fragment } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { countEvent } from '@zappie/sdk/visits';
-import { createSanitizeRichText, splitInfoBanner } from '@zappie/foundations/rich-text';
-import { parseRichText } from '@zappie/foundations/rich-text/browser';
 
-function CatalogueCart({
-  action,
-  count,
-  subtotal,
-  client,
-  onOpen
-}) {
-  if (count === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs("button", { type: "button", className: "z-base-catalogue-cart", onClick: onOpen, children: [
-    action,
-    " Order \xB7 ",
-    count,
-    " items \xB7",
-    " ",
-    subtotal ? client.format.money(subtotal) : "Calculating\u2026"
-  ] });
-}
-function CatalogueHeader({
-  branch,
-  storeName,
-  menus,
-  selectedMenuId,
-  cartLines,
-  cartOpen,
-  fulfilmentMode,
-  layout,
-  slots,
-  onOpenCart,
-  onOpenBranchDetails,
-  onSelectMenu,
-  onOpenBranchFinder,
-  onSwitchFulfilment,
-  onSetLayout
-}) {
-  const [canShare, setCanShare] = useState(false);
-  useEffect(() => setCanShare(typeof navigator.share === "function"), []);
-  const ToolbarAction = slots?.ToolbarAction;
-  return /* @__PURE__ */ jsxs("header", { children: [
-    /* @__PURE__ */ jsx("h2", { tabIndex: -1, id: "base-catalogue-heading", children: "Menu" }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        "aria-label": `Open cart${cartLines.length ? `, ${cartLines.length} items` : ""}`,
-        onClick: onOpenCart,
-        children: "Cart"
-      }
-    ),
-    branch && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: onOpenBranchDetails,
-        "aria-label": "View opening hours",
-        children: /* @__PURE__ */ jsx(OpenStatus, { branch, children: ({ isOpen, label }) => branch.isOpen === isOpen ? label : branch.isOpen ? "Open" : "Temporarily closed" })
-      }
-    ),
-    selectedMenuId && /* @__PURE__ */ jsxs("label", { children: [
-      "Menu",
-      /* @__PURE__ */ jsx(
-        "select",
-        {
-          value: selectedMenuId,
-          onChange: (event) => onSelectMenu(event.target.value),
-          children: menus?.map((menu) => /* @__PURE__ */ jsxs("option", { value: menu.id, children: [
-            menu.name,
-            " (",
-            cartLines.filter((line) => line.menuId === menu.id).reduce((sum, line) => sum + line.quantity, 0),
-            " ",
-            "added)"
-          ] }, menu.id))
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: onOpenBranchFinder, children: "Change branch" }),
-    /* @__PURE__ */ jsx("button", { type: "button", onClick: onSwitchFulfilment, children: fulfilmentMode === "pickup" ? "Delivery" : "Pickup" }),
-    canShare && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => {
-          if (navigator.share) {
-            void navigator.share({
-              url: window.location.href,
-              ...storeName ? { title: storeName } : {}
-            }).catch(() => {
-            });
-          }
-        },
-        children: "Share menu"
-      }
-    ),
-    ToolbarAction && /* @__PURE__ */ jsx(ToolbarAction, { layout, setLayout: onSetLayout }),
-    cartLines.length > 0 && !cartOpen && /* @__PURE__ */ jsx(ClearCart, {})
-  ] });
-}
-function CatalogueSearch({
-  search,
-  open,
-  themeClass,
-  onOpen,
-  onSelectItem,
-  onSelectCategory
-}) {
-  const content = /* @__PURE__ */ jsxs(
-    Search.Root,
-    {
-      source: search.source,
-      query: search.query,
-      onQueryChange: search.setQuery,
-      onSelect: (result) => {
-        if (result.type === "item") {
-          onSelectItem(result.item);
-        } else {
-          onSelectCategory(result.category.id);
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          Search.Input,
-          {
-            "aria-label": "Search menu",
-            placeholder: "Search menu",
-            onFocus: onOpen
-          }
-        ),
-        search.query && /* @__PURE__ */ jsx("button", { type: "button", onClick: () => search.setQuery(""), children: "Clear search" }),
-        open && search.query && /* @__PURE__ */ jsx(Search.Results, { children: ({ results, error, retry }) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          search.source.isLoading && /* @__PURE__ */ jsx("p", { role: "status", children: "Searching\u2026" }),
-          error && /* @__PURE__ */ jsxs("p", { role: "alert", children: [
-            error,
-            /* @__PURE__ */ jsx("button", { type: "button", onClick: retry, children: "Retry search" })
-          ] }),
-          !search.source.isLoading && !error && !results.length && /* @__PURE__ */ jsx("p", { children: "No results" }),
-          search.hasMore && /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              disabled: search.source.isLoading,
-              onClick: search.loadMore,
-              children: "More search results"
-            }
-          ),
-          results.map((result, index) => /* @__PURE__ */ jsx(
-            Search.Result,
-            {
-              index,
-              children: result.type === "item" ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                result.item.name,
-                !result.item.isAvailable && /* @__PURE__ */ jsx("span", { children: result.item.stockLabel ?? "Unavailable" })
-              ] }) : result.category.name
-            },
-            result.type === "item" ? result.item.id : result.category.id
-          ))
-        ] }) })
-      ]
-    }
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("div", { className: "z-base-search-desktop", children: content }),
-    /* @__PURE__ */ jsxs(Overlay.Root, { param: "catalogue_search", id: "search", presentation: "sheet", children: [
-      /* @__PURE__ */ jsx(Overlay.Trigger, { className: "z-base-search-mobile", children: "Search menu" }),
-      /* @__PURE__ */ jsxs(
-        Overlay.Content,
-        {
-          "data-zappie-theme": "base",
-          className: ["z-base-cart z-base-editor", themeClass].filter(Boolean).join(" "),
-          children: [
-            /* @__PURE__ */ jsx(Overlay.Title, { children: "Search menu" }),
-            /* @__PURE__ */ jsx(Overlay.Close, { children: "Close search" }),
-            content
-          ]
-        }
-      )
-    ] })
-  ] });
-}
-function CategoryNavigation({
-  categories,
-  active,
-  themeClass,
-  slots,
-  onSelect,
-  onFocusCategory
-}) {
-  const overlay = useOverlay("catalogue_categories", "categories");
-  const [filter, setFilter] = useState("");
-  const [pending, setPending] = useState();
-  const CategoryTab = slots?.CategoryTab;
-  useEffect(() => {
-    if (pending && !overlay.isOpen) {
-      const frame = requestAnimationFrame(() => {
-        setPending(void 0);
-        onSelect(pending);
-        onFocusCategory(pending);
-      });
-      return () => cancelAnimationFrame(frame);
-    }
-  }, [pending, overlay.isOpen, onSelect, onFocusCategory]);
-  const filtered = categories.filter(
-    (category) => category.name.toLowerCase().includes(filter.toLowerCase())
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(
-      Overlay.Root,
-      {
-        param: "catalogue_categories",
-        id: "categories",
-        presentation: { base: "sheet", lg: "dialog" },
-        children: [
-          /* @__PURE__ */ jsx(Overlay.Trigger, { children: "Browse categories" }),
-          /* @__PURE__ */ jsxs(
-            Overlay.Content,
-            {
-              "data-zappie-theme": "base",
-              className: ["z-base-cart z-base-editor", themeClass].filter(Boolean).join(" "),
-              children: [
-                /* @__PURE__ */ jsx(Overlay.Title, { children: "Browse categories" }),
-                /* @__PURE__ */ jsx(Overlay.Close, { children: "Close categories" }),
-                /* @__PURE__ */ jsx(
-                  "input",
-                  {
-                    "aria-label": "Filter categories",
-                    value: filter,
-                    onChange: (event) => setFilter(event.target.value)
-                  }
-                ),
-                filtered.map((category) => /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => {
-                      setPending(category.id);
-                      overlay.close();
-                    },
-                    children: category.name
-                  },
-                  category.id
-                )),
-                filtered.length === 0 && /* @__PURE__ */ jsx("p", { children: "No matching categories" })
-              ]
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx("nav", { "aria-label": "Categories", className: "z-base-category-nav", children: categories.map((category) => /* @__PURE__ */ jsx(
-      "a",
-      {
-        href: `#base-category-${category.id}`,
-        "aria-current": active === category.id ? "true" : void 0,
-        onClick: (event) => {
-          event.preventDefault();
-          onSelect(category.id);
-        },
-        children: CategoryTab ? /* @__PURE__ */ jsx(
-          CategoryTab,
-          {
-            category,
-            active: active === category.id
-          }
-        ) : category.name
-      },
-      category.id
-    )) })
-  ] });
-}
-function BaseItemTile({
-  item,
-  lines,
-  href,
-  layout,
-  priority,
-  client,
-  onOpen
-}) {
-  const price = item.price;
-  return /* @__PURE__ */ jsxs(
-    "a",
-    {
-      href,
-      className: "z-base-item-tile",
-      onClick: (event) => {
-        event.preventDefault();
-        event.currentTarget.focus({ preventScroll: true });
-        onOpen();
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          ItemImage,
-          {
-            src: item.images[0],
-            sizes: layout === "LIST" ? "100vw" : "(min-width: 768px) 33vw, 50vw",
-            priority
-          }
-        ),
-        /* @__PURE__ */ jsx("span", { className: "z-base-item-name", children: item.name }),
-        item.description && /* @__PURE__ */ jsx(Description, { value: item.description }),
-        item.promo && /* @__PURE__ */ jsx("span", { children: item.promo.name }),
-        item.compareAtPrice && /* @__PURE__ */ jsx("del", { children: client.format.money(item.compareAtPrice) }),
-        price && /* @__PURE__ */ jsxs("span", { className: "z-base-amount", children: [
-          item.variants.some(
-            (variant) => variant.price.amountMinor !== price.amountMinor
-          ) ? "From " : "",
-          client.format.money(price)
-        ] }),
-        (item.stockLabel || !item.isAvailable) && /* @__PURE__ */ jsx("span", { children: item.stockLabel ?? "Unavailable" }),
-        lines.map((line) => /* @__PURE__ */ jsxs("span", { children: [
-          line.quantity,
-          " added"
-        ] }, line.id))
-      ]
-    }
-  );
-}
-function CategorySection({
-  category,
-  categoryIndex,
-  catalogue,
-  menuId,
-  layout,
-  slots,
-  sections,
-  cartOpen,
-  client,
-  busy,
-  hasMore,
-  itemHref,
-  onOpen,
-  onLoadMore
-}) {
-  const CategoryHeader = slots?.CategoryHeader;
-  const Tile = slots?.Tile;
-  const columns = slots?.layout?.columns;
-  const baseColumns = typeof columns === "object" ? columns.base : columns;
-  const mediumColumns = typeof columns === "object" ? columns.medium : columns;
-  const largeColumns = typeof columns === "object" ? columns.large : columns;
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      id: `base-category-${category.id}`,
-      className: "z-base-category",
-      "data-unloaded": category.itemIds.length === 0,
-      ref: (node) => {
-        if (node) {
-          sections.current.set(category.id, node);
-        } else {
-          sections.current.delete(category.id);
-        }
-      },
-      children: [
-        /* @__PURE__ */ jsx("h3", { tabIndex: -1, children: CategoryHeader ? /* @__PURE__ */ jsx(CategoryHeader, { category }) : category.name }),
-        category.description && /* @__PURE__ */ jsx(Description, { value: category.description }),
-        /* @__PURE__ */ jsx(
-          Cart.Root,
-          {
-            className: "z-base-item-list",
-            "data-layout": layout,
-            "data-columns": baseColumns,
-            "data-columns-medium": mediumColumns,
-            "data-columns-large": largeColumns,
-            "data-density": slots?.layout?.density,
-            children: category.itemIds.map((id, index) => {
-              const item = catalogue.items[id];
-              if (!item) {
-                return null;
-              }
-              const lines = client.cart.lines.filter((line) => line.itemId === id);
-              const href = itemHref(item.id, menuId);
-              return /* @__PURE__ */ jsxs("div", { children: [
-                Tile ? /* @__PURE__ */ jsx(
-                  Tile,
-                  {
-                    item,
-                    ...menuId !== void 0 ? { menuId } : {},
-                    href,
-                    quantityInCart: lines.reduce(
-                      (sum, line) => sum + line.quantity,
-                      0
-                    ),
-                    onAdd: () => {
-                      try {
-                        client.cart.add(item.id, {
-                          ...menuId !== void 0 ? { menuId } : {}
-                        });
-                        countEvent("add");
-                      } catch {
-                        onOpen(item);
-                      }
-                    },
-                    onOpen: () => onOpen(item)
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  BaseItemTile,
-                  {
-                    item,
-                    lines,
-                    href,
-                    layout,
-                    priority: categoryIndex === 0 && index < 4,
-                    client,
-                    onOpen: () => onOpen(item)
-                  }
-                ),
-                !cartOpen && lines.map((line) => /* @__PURE__ */ jsx(CartLine, { line }, line.id))
-              ] }, id);
-            })
-          }
-        ),
-        hasMore && /* @__PURE__ */ jsxs("button", { type: "button", disabled: busy, onClick: onLoadMore, children: [
-          "Load more ",
-          category.name
-        ] })
-      ]
-    }
-  );
-}
-var sanitize = createSanitizeRichText(parseRichText);
-function InfoBanners({ value }) {
-  const [banners, setBanners] = useState([]);
-  const [index, setIndex] = useState(0);
-  const [expanded, setExpanded] = useState({});
-  const [paused, setPaused] = useState(false);
-  const viewport = useRef(null);
-  const interacted = useRef(false);
-  useEffect(() => {
-    setBanners(
-      splitInfoBanner(value).map(sanitize).filter((banner) => banner.replace(/<[^>]*>/g, "").trim())
-    );
-    setIndex(0);
-    setExpanded({});
-    interacted.current = false;
-  }, [value]);
-  function select(next, interaction = true) {
-    interacted.current || (interacted.current = interaction);
-    setExpanded({});
-    viewport.current?.children[next]?.scrollIntoView({
-      block: "nearest",
-      inline: "start",
-      behavior: "instant"
-    });
-    setIndex(next);
-  }
-  const isExpanded = Object.values(expanded).some(Boolean);
-  useEffect(() => {
-    if (paused || isExpanded || banners.length < 2) {
-      return;
-    }
-    const interval = setInterval(() => {
-      const node = viewport.current;
-      if (!node || interacted.current || window.matchMedia("(prefers-reduced-motion: reduce)").matches || node.scrollWidth <= node.clientWidth) {
-        return;
-      }
-      select((index + 1) % banners.length, false);
-    }, 5e3);
-    return () => clearInterval(interval);
-  }, [index, paused, isExpanded, banners.length]);
-  if (!banners.length) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      "aria-label": "Menu information",
-      onMouseEnter: () => setPaused(true),
-      onMouseLeave: () => setPaused(false),
-      onFocus: () => setPaused(true),
-      onBlur: () => setPaused(false),
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "z-base-info-banners",
-            ref: viewport,
-            onPointerDown: () => {
-              interacted.current = true;
-            },
-            onScroll: () => {
-              const node = viewport.current;
-              if (node?.children[0]) {
-                setIndex(
-                  Math.round(
-                    node.scrollLeft / node.children[0].getBoundingClientRect().width
-                  )
-                );
-              }
-            },
-            children: banners.map((banner, position) => /* @__PURE__ */ jsxs("article", { children: [
-              /* @__PURE__ */ jsx(
-                "div",
-                {
-                  className: "z-base-info-copy",
-                  "data-expanded": Boolean(expanded[position]),
-                  dangerouslySetInnerHTML: { __html: banner }
-                }
-              ),
-              /* @__PURE__ */ jsxs(
-                "button",
-                {
-                  type: "button",
-                  "aria-expanded": Boolean(expanded[position]),
-                  onClick: () => setExpanded((current) => ({
-                    ...current,
-                    [position]: !current[position]
-                  })),
-                  children: [
-                    "Show ",
-                    expanded[position] ? "less" : "more"
-                  ]
-                }
-              )
-            ] }, banner + position))
-          }
-        ),
-        banners.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Previous information",
-              disabled: index === 0,
-              onClick: () => select(index - 1),
-              children: "Previous"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": "Next information",
-              disabled: index >= banners.length - 1,
-              onClick: () => select(index + 1),
-              children: "Next"
-            }
-          ),
-          banners.map((_, position) => /* @__PURE__ */ jsx(
-            "button",
-            {
-              type: "button",
-              "aria-label": `Go to banner ${position + 1}`,
-              "aria-current": index === position ? "true" : void 0,
-              onClick: () => select(position),
-              children: position + 1
-            },
-            position
-          ))
-        ] })
-      ]
-    }
-  );
-}
-
-// src/catalogue/catalogue-pages.ts
-var pageKey = (menuId, categoryId) => `${menuId}:${categoryId}`;
-function pageState(nextCursor) {
-  return { ...nextCursor ? { next: nextCursor } : {}, done: !nextCursor };
-}
-function mergePage(menu, page) {
-  return {
-    ...menu,
-    items: { ...menu.items, ...page.menu.items },
-    categories: menu.categories.map((category) => {
-      const incoming = page.menu.categories.find(
-        (value) => value.id === category.id
-      );
-      return incoming ? {
-        ...category,
-        itemIds: [.../* @__PURE__ */ new Set([...category.itemIds, ...incoming.itemIds])]
-      } : category;
-    }),
-    completeness: "partial"
-  };
-}
-function readSavedPages(client, menuId, branchId, saved, signal) {
-  return Promise.all(
-    saved.map(async (entry) => ({
-      ...entry,
-      page: await client.menu.page(menuId, entry.categoryId, {
-        branch: branchId,
-        signal,
-        ...entry.cursor ? { cursor: entry.cursor } : {}
-      })
-    }))
-  );
-}
-function replaceRefreshedCategories(menu, refreshed) {
-  const fresh = /* @__PURE__ */ new Map();
-  let next = menu;
-  for (const { categoryId, page } of refreshed) {
-    const ids = page.menu.categories.find((c) => c.id === categoryId)?.itemIds;
-    fresh.set(categoryId, [...fresh.get(categoryId) ?? [], ...ids ?? []]);
-    next = { ...next, items: { ...next.items, ...page.menu.items } };
-  }
-  return {
-    ...next,
-    categories: next.categories.map((category) => {
-      const ids = fresh.get(category.id);
-      return ids ? { ...category, itemIds: ids } : category;
-    })
-  };
-}
-function replaceSavedPages(saved, refreshed) {
-  for (const page of refreshed) {
-    const index = saved.findIndex(
-      (entry) => entry.categoryId === page.categoryId && entry.cursor === page.cursor
-    );
-    if (index >= 0) {
-      saved[index] = page;
-    }
-  }
-}
-
-// src/catalogue/saved-catalogue-sync.ts
-async function loadResources(client, scope) {
-  const [persistence, selected] = await Promise.all([
-    import('@zappie/sdk/persist/catalogue'),
-    import('@zappie/sdk/transport/selected-menu')
-  ]);
-  return {
-    saved: persistence.createSavedCatalogue(client, scope),
-    selected: selected.createSelectedMenuReader(client)
-  };
-}
-function createSavedCatalogueSync({
-  client,
-  state,
-  scope,
-  revision,
-  publish
-}) {
-  let resources;
-  function snapshot() {
-    return {
-      scope,
-      menu: state.menu,
-      coverage: { menuIds: [scope.menuId], complete: state.complete },
-      pages: [...state.savedPages],
-      etag: state.menu.version,
-      savedAt: Date.now(),
-      ...revision ? { revision } : {}
-    };
-  }
-  async function save() {
-    if (await resources.saved.publish(snapshot()).catch(() => true)) {
-      state.abort.signal.throwIfAborted();
-      publish?.(state.menu);
-    }
-  }
-  async function refresh() {
-    if (state.complete) {
-      const response = await resources.selected.read(scope, {
-        signal: state.abort.signal
-      });
-      state.abort.signal.throwIfAborted();
-      if ("notModified" in response) {
-        return;
-      }
-      state.menu = response.menu;
-      await save();
-      return;
-    }
-    const refreshed = await readSavedPages(
-      client,
-      scope.menuId,
-      scope.branchId,
-      state.savedPages,
-      state.abort.signal
-    );
-    state.abort.signal.throwIfAborted();
-    state.menu = replaceRefreshedCategories(state.menu, refreshed);
-    for (const { categoryId, page } of refreshed) {
-      state.pages.set(
-        pageKey(scope.menuId, categoryId),
-        pageState(page.nextCursor)
-      );
-    }
-    replaceSavedPages(state.savedPages, refreshed);
-    await save();
-  }
-  return {
-    get resources() {
-      return resources;
-    },
-    /** Shows the current menu now; saving runs behind it and never fails a read. */
-    emit() {
-      state.abort.signal.throwIfAborted();
-      publish?.(state.menu);
-      void resources?.saved.publish(snapshot()).catch(() => {
-      });
-    },
-    async restore() {
-      resources = await loadResources(client, scope);
-      const value = await resources.saved.restore();
-      state.abort.signal.throwIfAborted();
-      if (!value) {
-        return false;
-      }
-      state.menu = value.menu;
-      state.complete = value.coverage.complete;
-      state.mode = state.complete ? "eager" : "progressive";
-      state.savedPages.push(...value.pages);
-      for (const saved of value.pages) {
-        state.pages.set(
-          pageKey(scope.menuId, saved.categoryId),
-          pageState(saved.page.nextCursor)
-        );
-      }
-      publish?.(state.menu);
-      if (!revision || value.revision !== revision) {
-        void refresh().catch(() => {
-        });
-      }
-      return true;
-    }
-  };
-}
-
-// src/catalogue/loader.ts
-function createCatalogueLoader(client, metadata, resolve, publish, orderContext = "delivery", revision) {
-  const state = {
-    menu: metadata,
-    mode: resolve(metadata),
-    complete: false,
-    abort: new AbortController(),
-    pages: /* @__PURE__ */ new Map(),
-    savedPages: []
-  };
-  const scope = {
-    store: client.config.store,
-    branchId: metadata.branchId,
-    orderContext,
-    menuId: metadata.menus?.[0]?.id ?? metadata.id
-  };
-  const saved = createSavedCatalogueSync({
-    client,
-    state,
-    scope,
-    revision,
-    publish
-  });
-  const pending = /* @__PURE__ */ new Map();
-  let eager;
-  let speculative;
-  function readEager(signal = state.abort.signal) {
-    eager ?? (eager = saved.resources.selected.read(scope, { signal }).then(async (response) => {
-      signal.throwIfAborted();
-      if ("notModified" in response) {
-        throw new Error("Unexpected conditional selected-menu response");
-      }
-      state.complete = true;
-      state.menu = response.menu;
-      saved.emit();
-      return state.menu;
-    }).catch((failure) => {
-      eager = void 0;
-      throw failure;
-    }));
-    return eager;
-  }
-  function speculate() {
-    if (eager) {
-      return;
-    }
-    speculative = new AbortController();
-    const cancel = () => speculative?.abort();
-    state.abort.signal.addEventListener("abort", cancel, { once: true });
-    void readEager(speculative.signal).catch(() => {
-    });
-  }
-  async function readPage(menuId, categoryId, key, cursor) {
-    const page = await client.menu.page(menuId, categoryId, {
-      branch: metadata.branchId,
-      signal: state.abort.signal,
-      ...cursor ? { cursor } : {}
-    });
-    state.abort.signal.throwIfAborted();
-    if (!state.complete) {
-      state.menu = mergePage(state.menu, page);
-    }
-    state.savedPages.push({ categoryId, ...cursor ? { cursor } : {}, page });
-    saved.emit();
-    state.pages.set(key, pageState(page.nextCursor));
-    if (state.mode === null) {
-      state.mode = resolve(metadata, page.menu) ?? "progressive";
-      if (state.mode !== "eager") {
-        speculative?.abort();
-        eager = void 0;
-      }
-    }
-    return state.menu;
-  }
-  const initialized = saved.restore().catch(() => false);
-  return {
-    get value() {
-      return state.menu;
-    },
-    get mode() {
-      return state.mode;
-    },
-    hasMore(menuId, categoryId) {
-      return state.mode !== "eager" && !state.pages.get(pageKey(menuId, categoryId))?.done;
-    },
-    /** True when reaching this category would neither read nor change. */
-    isLoaded(menuId, categoryId) {
-      return state.complete || state.mode !== "eager" && state.pages.has(pageKey(menuId, categoryId));
-    },
-    async reach(menuId, categoryId, more = false) {
-      const key = pageKey(menuId, categoryId);
-      const warm = await initialized;
-      if (state.complete || warm && state.pages.has(key) && !more) {
-        return state.menu;
-      }
-      if (state.mode === "eager") {
-        return readEager();
-      }
-      const existing = pending.get(key);
-      if (existing) {
-        return existing;
-      }
-      const loaded = state.pages.get(key);
-      if (loaded && (!more || loaded.done)) {
-        return state.menu;
-      }
-      if (state.mode === null) {
-        speculate();
-      }
-      const request = readPage(menuId, categoryId, key, loaded?.next);
-      pending.set(key, request);
-      try {
-        return await request;
-      } finally {
-        pending.delete(key);
-      }
-    },
-    /** Aborts in-flight reads; `resume()` makes the loader usable again. */
-    dispose() {
-      state.abort.abort();
-    },
-    resume() {
-      if (state.abort.signal.aborted) {
-        state.abort = new AbortController();
-      }
-    }
-  };
-}
-
-// src/catalogue/use-catalogue-data.ts
-function useCatalogueData({
-  client,
-  initialMenu,
-  selectedMenuId,
-  fulfilmentMode,
-  resolveStrategy,
-  revision
-}) {
-  const [catalogue, setCatalogue] = useState(initialMenu);
-  const show = useCallback(
-    (value) => setCatalogue({
-      ...value,
-      ...initialMenu.menus ? { menus: initialMenu.menus } : {},
-      categories: initialMenu.categories.map(
-        (category) => value.categories.find((loaded) => loaded.id === category.id) ?? category
-      )
-    }),
-    [initialMenu]
-  );
-  const loader = useMemo(() => {
-    const selected = initialMenu.menus?.find(
-      (source2) => source2.id === selectedMenuId
-    );
-    const scoped = {
-      ...initialMenu,
-      ...selected ? { menus: [selected] } : {},
-      categories: initialMenu.categories.filter(
-        (category) => !selected || selected.categoryIds.includes(category.id)
-      )
-    };
-    return createCatalogueLoader(
-      client,
-      scoped,
-      resolveStrategy,
-      show,
-      fulfilmentMode,
-      revision
-    );
-  }, [
-    client,
-    initialMenu,
-    selectedMenuId,
-    fulfilmentMode,
-    resolveStrategy,
-    revision,
-    show
-  ]);
-  useEffect(() => {
-    loader.resume();
-    return () => loader.dispose();
-  }, [loader]);
-  const source = catalogue.menus?.find((value) => value.id === selectedMenuId) ?? catalogue.menus?.[0];
-  const categories = useMemo(
-    () => catalogue.categories.filter(
-      (category) => source?.categoryIds.includes(category.id)
-    ),
-    [catalogue.categories, source]
-  );
-  const [error, setError] = useState();
-  const [busy, setBusy] = useState(false);
-  const reach = useCallback(
-    async (categoryId, more = false) => {
-      if (!source || !more && loader.isLoaded(source.id, categoryId)) {
-        return;
-      }
-      setBusy(true);
-      setError(void 0);
-      try {
-        show(await loader.reach(source.id, categoryId, more));
-      } catch (failure) {
-        if (!(failure instanceof Error) || failure.name !== "AbortError") {
-          setError("Catalogue could not load. Try again.");
-        }
-      } finally {
-        setBusy(false);
-      }
-    },
-    [loader, source, show]
-  );
-  return { catalogue, source, categories, loader, error, busy, reach };
-}
-function useCategoryScroll({
-  categories,
-  selectedCategoryId,
-  itemOpen,
-  menuId,
-  menuLayout,
-  reach,
-  onSelectCategory
-}) {
-  const [active, setActive] = useState(selectedCategoryId ?? categories[0]?.id);
-  const activeRef = useRef(active);
-  activeRef.current = active;
-  const sections = useRef(/* @__PURE__ */ new Map());
-  const wanted = useRef(void 0);
-  const reading = useRef(false);
-  const reachLatest = useCallback(
-    (categoryId) => {
-      wanted.current = categoryId;
-      if (reading.current) {
-        return;
-      }
-      reading.current = true;
-      void (async () => {
-        try {
-          while (wanted.current) {
-            const next = wanted.current;
-            wanted.current = void 0;
-            await reach(next);
-          }
-        } finally {
-          reading.current = false;
-        }
-      })();
-    },
-    [reach]
-  );
-  useEffect(() => {
-    if (itemOpen) {
-      return;
-    }
-    const id = selectedCategoryId ?? categories[0]?.id;
-    if (id) {
-      setActive(id);
-      void reach(id);
-    }
-  }, [menuId, selectedCategoryId, itemOpen, reach, categories]);
-  useEffect(() => {
-    if (itemOpen) {
-      return;
-    }
-    let frame = 0;
-    const select = () => {
-      frame = 0;
-      let id = categories[0]?.id;
-      for (const category of categories) {
-        const top = sections.current.get(category.id)?.getBoundingClientRect().top;
-        if (top === void 0) {
-          continue;
-        }
-        if (top > 200) {
-          break;
-        }
-        id = category.id;
-      }
-      if (window.scrollY + window.innerHeight >= document.documentElement.scrollHeight - 2) {
-        id = categories.at(-1)?.id ?? id;
-      }
-      if (id && id !== activeRef.current) {
-        setActive(id);
-        reachLatest(id);
-      }
-    };
-    const onScroll = () => {
-      if (!frame) {
-        frame = requestAnimationFrame(select);
-      }
-    };
-    window.addEventListener("scroll", onScroll, { passive: true });
-    return () => {
-      window.removeEventListener("scroll", onScroll);
-      cancelAnimationFrame(frame);
-    };
-  }, [categories, itemOpen, reachLatest]);
-  const selectCategory = useCallback(
-    (id) => {
-      setActive(id);
-      onSelectCategory(id);
-      sections.current.get(id)?.scrollIntoView({ block: "start" });
-      void reach(id);
-    },
-    [onSelectCategory, reach]
-  );
-  const previousLayout = useRef(menuLayout);
-  useEffect(() => {
-    if (previousLayout.current !== menuLayout && active) {
-      sections.current.get(active)?.scrollIntoView({ block: "start" });
-    }
-    previousLayout.current = menuLayout;
-  }, [menuLayout, active]);
-  const focusCategory = useCallback((id) => {
-    sections.current.get(id)?.querySelector("h3")?.focus();
-  }, []);
-  return {
-    active,
-    sections,
-    selectCategory,
-    focusCategory
-  };
-}
-function useItemOpener({
-  navigation,
-  source,
-  clearSearch
-}) {
-  const searchOverlay = useOverlay("catalogue_search", "search");
-  const [pendingItem, setPendingItem] = useState();
-  const open = useCallback(
-    async (item) => {
-      if (searchOverlay.isOpen) {
-        setPendingItem(item);
-        searchOverlay.close();
-        return;
-      }
-      const placement = item.placements?.find((value) => value.menuId === source?.id) ?? item.placements?.[0];
-      const menuId = placement?.menuId ?? source?.id;
-      if (menuId) {
-        clearSearch();
-        await navigation.openItem({
-          itemId: item.id,
-          item,
-          menuId,
-          ...placement ? { categoryId: placement.categoryId } : {}
-        });
-      }
-    },
-    [clearSearch, navigation, searchOverlay, source]
-  );
-  useEffect(() => {
-    if (pendingItem && !searchOverlay.isOpen) {
-      const frame = requestAnimationFrame(() => {
-        setPendingItem(void 0);
-        void open(pendingItem);
-      });
-      return () => cancelAnimationFrame(frame);
-    }
-  }, [pendingItem, searchOverlay.isOpen, open]);
-  return open;
-}
-function useSearchSource(menu, enabled) {
-  const client = useZappie();
-  const [query, setQuery] = useState("");
-  const [composing, setComposing] = useState(false);
-  const [attempt, setAttempt] = useState(0);
-  const [cursor, setCursor] = useState();
-  const [remote, setRemote] = useState({ query: "" });
-  const index = useMemo(() => createSearchIndex(menu), [menu]);
-  const local = useMemo(() => index(query), [index, query]);
-  const hasLocalItems = local.some((result) => result.type === "item");
-  useEffect(() => {
-    if (!enabled || composing || !query.trim() || hasLocalItems) {
-      return;
-    }
-    const abort = new AbortController();
-    const timer = setTimeout(() => {
-      setRemote((previous) => ({
-        ...cursor && previous.query === query ? previous : {},
-        query,
-        loading: true
-      }));
-      void client.menu.search(query, {
-        branch: menu.branchId,
-        signal: abort.signal,
-        ...cursor ? { cursor } : {}
-      }).then(
-        (page) => {
-          if (!abort.signal.aborted) {
-            setRemote((previous) => {
-              if (!cursor || previous.query !== query || !previous.page) {
-                return { query, page };
-              }
-              return {
-                query,
-                page: {
-                  ...page,
-                  menu: {
-                    ...page.menu,
-                    items: {
-                      ...previous.page.menu.items,
-                      ...page.menu.items
-                    },
-                    categories: [
-                      ...new Map(
-                        [
-                          ...previous.page.menu.categories,
-                          ...page.menu.categories
-                        ].map((category) => [category.id, category])
-                      ).values()
-                    ]
-                  }
-                }
-              };
-            });
-          }
-        },
-        () => {
-          if (!abort.signal.aborted) {
-            setRemote((previous) => ({
-              ...cursor && previous.query === query ? previous : {},
-              query,
-              loading: false,
-              error: "Search could not load. Try again."
-            }));
-          }
-        }
-      );
-    }, 500);
-    return () => {
-      clearTimeout(timer);
-      abort.abort();
-    };
-  }, [
-    client,
-    menu.branchId,
-    query,
-    enabled,
-    composing,
-    hasLocalItems,
-    attempt,
-    cursor
-  ]);
-  const current = !composing && remote.query === query && !hasLocalItems ? remote : void 0;
-  const results = useMemo(() => {
-    const values = [...local];
-    for (const item of Object.values(current?.page?.menu.items ?? {})) {
-      if (!values.some(
-        (result) => result.type === "item" && result.item.id === item.id
-      )) {
-        values.push({ type: "item", item, score: 0 });
-      }
-    }
-    for (const category of current?.page?.menu.categories ?? []) {
-      if (category.name.toLocaleLowerCase().includes(query.trim().toLocaleLowerCase()) && !values.some(
-        (result) => result.type === "category" && result.category.id === category.id
-      )) {
-        values.push({ type: "category", category, score: 0 });
-      }
-    }
-    return values;
-  }, [local, current?.page, query]);
-  return {
-    query,
-    setQuery: (value) => {
-      setCursor(void 0);
-      setQuery(value);
-    },
-    hasMore: Boolean(current?.page?.nextCursor),
-    loadMore: () => {
-      if (!current?.loading && current?.page?.nextCursor) {
-        setCursor(current.page.nextCursor);
-      }
-    },
-    source: {
-      results,
-      isLoading: current?.loading ?? false,
-      ...current?.error ? { error: current.error } : {},
-      retry: () => setAttempt((value) => value + 1),
-      onCompositionChange: setComposing
-    }
-  };
-}
+// src/catalogue/catalogue.tsx
+import { useOverlay } from "@zappie/foundations";
+import {
+  useCart,
+  useCartCatalogue,
+  useStore,
+  useZappie
+} from "@zappie/sdk/react";
+import { useCallback, useState } from "react";
+import { ThemeClassProvider } from "./cart/theme-class.js";
+import { useBaseHostBridge } from "./host-bridge.js";
+import { useCatalogueNavigation } from "./navigation.js";
+import { CatalogueCart } from "./catalogue/catalogue-cart.js";
+import { CatalogueHeader } from "./catalogue/catalogue-header.js";
+import { CatalogueSearch } from "./catalogue/catalogue-search.js";
+import { CategoryNavigation } from "./catalogue/category-navigation.js";
+import { CategorySection } from "./catalogue/category-section.js";
+import { InfoBanners } from "./catalogue/info-banners.js";
+import { useCatalogueData } from "./catalogue/use-catalogue-data.js";
+import { useCategoryScroll } from "./catalogue/use-category-scroll.js";
+import { useItemOpener } from "./catalogue/use-item-opener.js";
+import { useSearchSource } from "./catalogue/use-search-source.js";
+import { jsx, jsxs } from "react/jsx-runtime";
 function Catalogue({
   initialMenu,
   resolveStrategy,
@@ -1383,7 +193,7 @@ function Catalogue({
     }
   ) });
 }
-
-export { Catalogue };
+export {
+  Catalogue
+};
 //# sourceMappingURL=catalogue.js.map
-//# sourceMappingURL=catalogue.js.map