@zappie/theme-base 0.0.0-stage → 0.1.1

package/dist/catalogue.js

@@ -0,0 +1,1389 @@
+"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
+    }
+  };
+}
+function Catalogue({
+  initialMenu,
+  resolveStrategy,
+  themeClass,
+  orderAction = "View",
+  menuNotice,
+  revision,
+  slots
+}) {
+  const client = useZappie();
+  const fulfilmentMode = useBaseHostBridge().fulfilmentMode === "pickup" ? "pickup" : "delivery";
+  const navigation = useCatalogueNavigation();
+  const store = useStore();
+  const cart = useCart();
+  const cartOverlay = useOverlay("modal_id", "review-menu");
+  useCartCatalogue();
+  const selectedMenuId = navigation.location.menuId ?? initialMenu.menus?.[0]?.id ?? initialMenu.id;
+  const data = useCatalogueData({
+    client,
+    initialMenu,
+    selectedMenuId,
+    fulfilmentMode,
+    resolveStrategy,
+    ...revision !== void 0 ? { revision } : {}
+  });
+  const layout = navigation.location.menuLayout ?? "GRID";
+  const [searchOpen, setSearchOpen] = useState(false);
+  const search = useSearchSource(data.catalogue, searchOpen);
+  const clearSearch = useCallback(() => {
+    setSearchOpen(false);
+    search.setQuery("");
+  }, [search.setQuery]);
+  const openItem = useItemOpener({
+    navigation,
+    ...data.source !== void 0 ? { source: data.source } : {},
+    clearSearch
+  });
+  const categories = useCategoryScroll({
+    categories: data.categories,
+    ...navigation.location.categoryId !== void 0 ? { selectedCategoryId: navigation.location.categoryId } : {},
+    itemOpen: Boolean(navigation.location.item),
+    ...data.source?.id !== void 0 ? { menuId: data.source.id } : {},
+    ...navigation.location.menuLayout !== void 0 ? { menuLayout: navigation.location.menuLayout } : {},
+    reach: data.reach,
+    onSelectCategory: (categoryId) => navigation.selectCategory(categoryId)
+  });
+  const branch = store.data?.branches.find(
+    (value) => value.id === data.catalogue.branchId
+  );
+  const BeforeList = slots?.BeforeList;
+  const AfterList = slots?.AfterList;
+  return /* @__PURE__ */ jsx(ThemeClassProvider, { value: themeClass, children: /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: ["z-base-catalogue", themeClass].filter(Boolean).join(" "),
+      "data-zappie-theme": "base",
+      "aria-label": "Catalogue",
+      children: [
+        /* @__PURE__ */ jsx(
+          CatalogueHeader,
+          {
+            ...branch !== void 0 ? { branch } : {},
+            ...store.data?.name !== void 0 ? { storeName: store.data.name } : {},
+            ...data.catalogue.menus !== void 0 ? { menus: data.catalogue.menus } : {},
+            ...data.source?.id !== void 0 ? { selectedMenuId: data.source.id } : {},
+            cartLines: cart.lines,
+            cartOpen: cartOverlay.isOpen,
+            fulfilmentMode,
+            layout,
+            ...slots !== void 0 ? { slots } : {},
+            onOpenCart: () => void navigation.openCart(),
+            onOpenBranchDetails: () => void navigation.openBranchDetails?.(),
+            onSelectMenu: (menuId) => navigation.selectMenu(menuId),
+            onOpenBranchFinder: () => void navigation.openBranchFinder(),
+            onSwitchFulfilment: () => {
+              void navigation.switchFulfilment(
+                fulfilmentMode === "pickup" ? "delivery" : "pickup"
+              );
+            },
+            onSetLayout: (value) => navigation.setLayout(value)
+          }
+        ),
+        menuNotice && /* @__PURE__ */ jsx("p", { role: "status", children: menuNotice }),
+        /* @__PURE__ */ jsx(
+          InfoBanners,
+          {
+            ...data.source?.infoBanner ? { value: data.source.infoBanner } : {}
+          }
+        ),
+        BeforeList && /* @__PURE__ */ jsx(BeforeList, { menu: data.catalogue }),
+        /* @__PURE__ */ jsx(
+          CatalogueSearch,
+          {
+            search,
+            open: searchOpen,
+            ...themeClass !== void 0 ? { themeClass } : {},
+            onOpen: () => setSearchOpen(true),
+            onSelectItem: (item) => void openItem(item),
+            onSelectCategory: categories.selectCategory
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          CategoryNavigation,
+          {
+            categories: data.categories,
+            ...categories.active !== void 0 ? { active: categories.active } : {},
+            ...themeClass !== void 0 ? { themeClass } : {},
+            ...slots !== void 0 ? { slots } : {},
+            onSelect: categories.selectCategory,
+            onFocusCategory: categories.focusCategory
+          }
+        ),
+        data.error && /* @__PURE__ */ jsxs("p", { role: "alert", children: [
+          data.error,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => {
+                if (categories.active) {
+                  void data.reach(categories.active);
+                }
+              },
+              children: "Retry catalogue"
+            }
+          )
+        ] }),
+        !data.categories.length && /* @__PURE__ */ jsx("p", { children: "No items available" }),
+        data.categories.map((category, index) => /* @__PURE__ */ jsx(
+          CategorySection,
+          {
+            category,
+            categoryIndex: index,
+            catalogue: data.catalogue,
+            ...data.source?.id !== void 0 ? { menuId: data.source.id } : {},
+            layout,
+            ...slots !== void 0 ? { slots } : {},
+            sections: categories.sections,
+            cartOpen: cartOverlay.isOpen,
+            client,
+            busy: data.busy,
+            hasMore: Boolean(
+              data.source && data.loader.hasMore(data.source.id, category.id)
+            ),
+            itemHref: (itemId, menuId) => navigation.hrefFor({
+              type: "item",
+              itemId,
+              ...menuId !== void 0 ? { menuId } : {},
+              categoryId: category.id
+            }),
+            onOpen: (item) => void openItem(item),
+            onLoadMore: () => void data.reach(category.id, true)
+          },
+          category.id
+        )),
+        AfterList && /* @__PURE__ */ jsx(AfterList, { menu: data.catalogue }),
+        data.busy && /* @__PURE__ */ jsx("p", { role: "status", children: "Loading products\u2026" }),
+        /* @__PURE__ */ jsx(
+          CatalogueCart,
+          {
+            action: orderAction,
+            count: cart.lines.reduce((sum, line) => sum + line.quantity, 0),
+            ...cart.subtotal ? { subtotal: cart.subtotal } : {},
+            client,
+            onOpen: () => void navigation.openCart()
+          }
+        )
+      ]
+    }
+  ) });
+}
+
+export { Catalogue };
+//# sourceMappingURL=catalogue.js.map
+//# sourceMappingURL=catalogue.js.map