@zappie/theme-base 0.1.0 → 0.1.2

package/dist/catalogue/category-navigation.js

@@ -0,0 +1,98 @@
+// src/catalogue/category-navigation.tsx
+import { Overlay, useOverlay } from "@zappie/foundations";
+import { Fragment, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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
+    )) })
+  ] });
+}
+export {
+  CategoryNavigation
+};
+//# sourceMappingURL=category-navigation.js.map

package/dist/catalogue/category-navigation.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/catalogue/category-navigation.tsx"],
+  "sourcesContent": ["import { Overlay, useOverlay } from \"@zappie/foundations\";\nimport type { Category } from \"@zappie/sdk\";\nimport { Fragment, useEffect, useState } from \"react\";\nimport type { CatalogueSlots } from \"./types\";\n\nexport function CategoryNavigation({\n  categories,\n  active,\n  themeClass,\n  slots,\n  onSelect,\n  onFocusCategory,\n}: {\n  categories: readonly Category[];\n  active?: string;\n  themeClass?: string;\n  slots?: CatalogueSlots;\n  onSelect(categoryId: string): void;\n  onFocusCategory(categoryId: string): void;\n}) {\n  const overlay = useOverlay(\"catalogue_categories\", \"categories\");\n  const [filter, setFilter] = useState(\"\");\n  const [pending, setPending] = useState<string>();\n  const CategoryTab = slots?.CategoryTab;\n  useEffect(() => {\n    if (pending && !overlay.isOpen) {\n      const frame = requestAnimationFrame(() => {\n        setPending(undefined);\n        onSelect(pending);\n        onFocusCategory(pending);\n      });\n      return () => cancelAnimationFrame(frame);\n    }\n  }, [pending, overlay.isOpen, onSelect, onFocusCategory]);\n  const filtered = categories.filter((category) =>\n    category.name.toLowerCase().includes(filter.toLowerCase()),\n  );\n  return (\n    <Fragment>\n      <Overlay.Root\n        param=\"catalogue_categories\"\n        id=\"categories\"\n        presentation={{ base: \"sheet\", lg: \"dialog\" }}\n      >\n        <Overlay.Trigger>Browse categories</Overlay.Trigger>\n        <Overlay.Content\n          data-zappie-theme=\"base\"\n          className={[\"z-base-cart z-base-editor\", themeClass]\n            .filter(Boolean)\n            .join(\" \")}\n        >\n          <Overlay.Title>Browse categories</Overlay.Title>\n          <Overlay.Close>Close categories</Overlay.Close>\n          <input\n            aria-label=\"Filter categories\"\n            value={filter}\n            onChange={(event) => setFilter(event.target.value)}\n          />\n          {filtered.map((category) => (\n            <button\n              key={category.id}\n              type=\"button\"\n              onClick={() => {\n                setPending(category.id);\n                overlay.close();\n              }}\n            >\n              {category.name}\n            </button>\n          ))}\n          {filtered.length === 0 && <p>No matching categories</p>}\n        </Overlay.Content>\n      </Overlay.Root>\n      <nav aria-label=\"Categories\" className=\"z-base-category-nav\">\n        {categories.map((category) => (\n          <a\n            key={category.id}\n            href={`#base-category-${category.id}`}\n            aria-current={active === category.id ? \"true\" : undefined}\n            onClick={(event) => {\n              event.preventDefault();\n              onSelect(category.id);\n            }}\n          >\n            {CategoryTab ? (\n              <CategoryTab\n                category={category}\n                active={active === category.id}\n              />\n            ) : (\n              category.name\n            )}\n          </a>\n        ))}\n      </nav>\n    </Fragment>\n  );\n}\n"],
+  "mappings": ";AAAA,SAAS,SAAS,kBAAkB;AAEpC,SAAS,UAAU,WAAW,gBAAgB;AA0CtC,cACA,YADA;AAvCD,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAOG;AACD,QAAM,UAAU,WAAW,wBAAwB,YAAY;AAC/D,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,EAAE;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAiB;AAC/C,QAAM,cAAc,OAAO;AAC3B,YAAU,MAAM;AACd,QAAI,WAAW,CAAC,QAAQ,QAAQ;AAC9B,YAAM,QAAQ,sBAAsB,MAAM;AACxC,mBAAW,MAAS;AACpB,iBAAS,OAAO;AAChB,wBAAgB,OAAO;AAAA,MACzB,CAAC;AACD,aAAO,MAAM,qBAAqB,KAAK;AAAA,IACzC;AAAA,EACF,GAAG,CAAC,SAAS,QAAQ,QAAQ,UAAU,eAAe,CAAC;AACvD,QAAM,WAAW,WAAW;AAAA,IAAO,CAAC,aAClC,SAAS,KAAK,YAAY,EAAE,SAAS,OAAO,YAAY,CAAC;AAAA,EAC3D;AACA,SACE,qBAAC,YACC;AAAA;AAAA,MAAC,QAAQ;AAAA,MAAR;AAAA,QACC,OAAM;AAAA,QACN,IAAG;AAAA,QACH,cAAc,EAAE,MAAM,SAAS,IAAI,SAAS;AAAA,QAE5C;AAAA,8BAAC,QAAQ,SAAR,EAAgB,+BAAiB;AAAA,UAClC;AAAA,YAAC,QAAQ;AAAA,YAAR;AAAA,cACC,qBAAkB;AAAA,cAClB,WAAW,CAAC,6BAA6B,UAAU,EAChD,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,cAEX;AAAA,oCAAC,QAAQ,OAAR,EAAc,+BAAiB;AAAA,gBAChC,oBAAC,QAAQ,OAAR,EAAc,8BAAgB;AAAA,gBAC/B;AAAA,kBAAC;AAAA;AAAA,oBACC,cAAW;AAAA,oBACX,OAAO;AAAA,oBACP,UAAU,CAAC,UAAU,UAAU,MAAM,OAAO,KAAK;AAAA;AAAA,gBACnD;AAAA,gBACC,SAAS,IAAI,CAAC,aACb;AAAA,kBAAC;AAAA;AAAA,oBAEC,MAAK;AAAA,oBACL,SAAS,MAAM;AACb,iCAAW,SAAS,EAAE;AACtB,8BAAQ,MAAM;AAAA,oBAChB;AAAA,oBAEC,mBAAS;AAAA;AAAA,kBAPL,SAAS;AAAA,gBAQhB,CACD;AAAA,gBACA,SAAS,WAAW,KAAK,oBAAC,OAAE,oCAAsB;AAAA;AAAA;AAAA,UACrD;AAAA;AAAA;AAAA,IACF;AAAA,IACA,oBAAC,SAAI,cAAW,cAAa,WAAU,uBACpC,qBAAW,IAAI,CAAC,aACf;AAAA,MAAC;AAAA;AAAA,QAEC,MAAM,kBAAkB,SAAS,EAAE;AAAA,QACnC,gBAAc,WAAW,SAAS,KAAK,SAAS;AAAA,QAChD,SAAS,CAAC,UAAU;AAClB,gBAAM,eAAe;AACrB,mBAAS,SAAS,EAAE;AAAA,QACtB;AAAA,QAEC,wBACC;AAAA,UAAC;AAAA;AAAA,YACC;AAAA,YACA,QAAQ,WAAW,SAAS;AAAA;AAAA,QAC9B,IAEA,SAAS;AAAA;AAAA,MAdN,SAAS;AAAA,IAgBhB,CACD,GACH;AAAA,KACF;AAEJ;",
+  "names": []
+}

package/dist/catalogue/category-section.js

@@ -0,0 +1,113 @@
+// src/catalogue/category-section.tsx
+import { Cart } from "@zappie/foundations";
+import { countEvent } from "@zappie/sdk/visits";
+import { CartLine } from "../cart/cart-line.js";
+import { BaseItemTile } from "./item-tile.js";
+import { Description } from "./presentation.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+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
+        ] })
+      ]
+    }
+  );
+}
+export {
+  CategorySection
+};
+//# sourceMappingURL=category-section.js.map

package/dist/catalogue/category-section.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/catalogue/category-section.tsx"],
+  "sourcesContent": ["import { Cart } from \"@zappie/foundations\";\nimport type { Category, Item, Menu, Zappie } from \"@zappie/sdk\";\nimport { countEvent } from \"@zappie/sdk/visits\";\nimport type { MutableRefObject } from \"react\";\nimport { CartLine } from \"../cart/cart-line\";\nimport { BaseItemTile } from \"./item-tile\";\nimport { Description } from \"./presentation\";\nimport type { CatalogueLayoutMode, CatalogueSlots } from \"./types\";\n\nexport function CategorySection({\n  category,\n  categoryIndex,\n  catalogue,\n  menuId,\n  layout,\n  slots,\n  sections,\n  cartOpen,\n  client,\n  busy,\n  hasMore,\n  itemHref,\n  onOpen,\n  onLoadMore,\n}: {\n  category: Category;\n  categoryIndex: number;\n  catalogue: Menu;\n  menuId?: string;\n  layout: CatalogueLayoutMode;\n  slots?: CatalogueSlots;\n  sections: MutableRefObject<Map<string, HTMLElement>>;\n  cartOpen: boolean;\n  client: Zappie;\n  busy: boolean;\n  hasMore: boolean;\n  itemHref(itemId: string, menuId?: string): string;\n  onOpen(item: Item): void;\n  onLoadMore(): void;\n}) {\n  const CategoryHeader = slots?.CategoryHeader;\n  const Tile = slots?.Tile;\n  const columns = slots?.layout?.columns;\n  const baseColumns = typeof columns === \"object\" ? columns.base : columns;\n  const mediumColumns = typeof columns === \"object\" ? columns.medium : columns;\n  const largeColumns = typeof columns === \"object\" ? columns.large : columns;\n  return (\n    <section\n      id={`base-category-${category.id}`}\n      className=\"z-base-category\"\n      data-unloaded={category.itemIds.length === 0}\n      ref={(node) => {\n        if (node) {\n          sections.current.set(category.id, node);\n        } else {\n          sections.current.delete(category.id);\n        }\n      }}\n    >\n      <h3 tabIndex={-1}>\n        {CategoryHeader ? (\n          <CategoryHeader category={category} />\n        ) : (\n          category.name\n        )}\n      </h3>\n      {category.description && <Description value={category.description} />}\n      <Cart.Root\n        className=\"z-base-item-list\"\n        data-layout={layout}\n        data-columns={baseColumns}\n        data-columns-medium={mediumColumns}\n        data-columns-large={largeColumns}\n        data-density={slots?.layout?.density}\n      >\n        {category.itemIds.map((id, index) => {\n          const item = catalogue.items[id];\n          if (!item) {\n            return null;\n          }\n          const lines = client.cart.lines.filter((line) => line.itemId === id);\n          const href = itemHref(item.id, menuId);\n          return (\n            <div key={id}>\n              {Tile ? (\n                <Tile\n                  item={item}\n                  {...(menuId !== undefined ? { menuId } : {})}\n                  href={href}\n                  quantityInCart={lines.reduce(\n                    (sum, line) => sum + line.quantity,\n                    0,\n                  )}\n                  onAdd={() => {\n                    // An item the cart refuses as-is (required choices, an\n                    // ambiguous variant) opens the item to be configured.\n                    try {\n                      client.cart.add(item.id, {\n                        ...(menuId !== undefined ? { menuId } : {}),\n                      });\n                      countEvent(\"add\");\n                    } catch {\n                      onOpen(item);\n                    }\n                  }}\n                  onOpen={() => onOpen(item)}\n                />\n              ) : (\n                <BaseItemTile\n                  item={item}\n                  lines={lines}\n                  href={href}\n                  layout={layout}\n                  priority={categoryIndex === 0 && index < 4}\n                  client={client}\n                  onOpen={() => onOpen(item)}\n                />\n              )}\n              {!cartOpen &&\n                lines.map((line) => <CartLine key={line.id} line={line} />)}\n            </div>\n          );\n        })}\n      </Cart.Root>\n      {hasMore && (\n        <button type=\"button\" disabled={busy} onClick={onLoadMore}>\n          Load more {category.name}\n        </button>\n      )}\n    </section>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/catalogue/info-banners.js

@@ -0,0 +1,148 @@
+"use client";
+
+// src/catalogue/info-banners.tsx
+import {
+  createSanitizeRichText,
+  splitInfoBanner
+} from "@zappie/foundations/rich-text";
+import { parseRichText } from "@zappie/foundations/rich-text/browser";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+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
+          ))
+        ] })
+      ]
+    }
+  );
+}
+export {
+  InfoBanners
+};
+//# sourceMappingURL=info-banners.js.map

package/dist/catalogue/info-banners.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/catalogue/info-banners.tsx"],
+  "sourcesContent": ["\"use client\";\nimport {\n  createSanitizeRichText,\n  splitInfoBanner,\n} from \"@zappie/foundations/rich-text\";\nimport { parseRichText } from \"@zappie/foundations/rich-text/browser\";\nimport { useEffect, useRef, useState } from \"react\";\nconst sanitize = createSanitizeRichText(parseRichText);\n/** Safe rich text with touch scrolling, explicit controls and pausable rotation. */\nexport function InfoBanners({ value }: { value?: string }) {\n  const [banners, setBanners] = useState<string[]>([]);\n  const [index, setIndex] = useState(0);\n  const [expanded, setExpanded] = useState<Record<number, boolean>>({});\n  const [paused, setPaused] = useState(false);\n  const viewport = useRef<HTMLDivElement>(null);\n  const interacted = useRef(false);\n  useEffect(() => {\n    setBanners(\n      splitInfoBanner(value)\n        .map(sanitize)\n        .filter((banner) => banner.replace(/<[^>]*>/g, \"\").trim()),\n    );\n    setIndex(0);\n    setExpanded({});\n    interacted.current = false;\n  }, [value]);\n  function select(next: number, interaction = true) {\n    interacted.current ||= interaction;\n    setExpanded({});\n    viewport.current?.children[next]?.scrollIntoView({\n      block: \"nearest\",\n      inline: \"start\",\n      behavior: \"instant\",\n    });\n    setIndex(next);\n  }\n  const isExpanded = Object.values(expanded).some(Boolean);\n  useEffect(() => {\n    if (paused || isExpanded || banners.length < 2) {\n      return;\n    }\n    const interval = setInterval(() => {\n      const node = viewport.current;\n      if (\n        !node ||\n        interacted.current ||\n        window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches ||\n        node.scrollWidth <= node.clientWidth\n      ) {\n        return;\n      }\n      select((index + 1) % banners.length, false);\n    }, 5000);\n    return () => clearInterval(interval);\n  }, [index, paused, isExpanded, banners.length]);\n  if (!banners.length) {\n    return null;\n  }\n  return (\n    <section\n      aria-label=\"Menu information\"\n      onMouseEnter={() => setPaused(true)}\n      onMouseLeave={() => setPaused(false)}\n      onFocus={() => setPaused(true)}\n      onBlur={() => setPaused(false)}\n    >\n      <div\n        className=\"z-base-info-banners\"\n        ref={viewport}\n        onPointerDown={() => {\n          interacted.current = true;\n        }}\n        onScroll={() => {\n          const node = viewport.current;\n          if (node?.children[0]) {\n            setIndex(\n              Math.round(\n                node.scrollLeft /\n                  node.children[0].getBoundingClientRect().width,\n              ),\n            );\n          }\n        }}\n      >\n        {banners.map((banner, position) => (\n          <article key={banner + position}>\n            <div\n              className=\"z-base-info-copy\"\n              data-expanded={Boolean(expanded[position])}\n              dangerouslySetInnerHTML={{ __html: banner }}\n            />\n            <button\n              type=\"button\"\n              aria-expanded={Boolean(expanded[position])}\n              onClick={() =>\n                setExpanded((current) => ({\n                  ...current,\n                  [position]: !current[position],\n                }))\n              }\n            >\n              Show {expanded[position] ? \"less\" : \"more\"}\n            </button>\n          </article>\n        ))}\n      </div>\n      {banners.length > 1 && (\n        <div>\n          <button\n            type=\"button\"\n            aria-label=\"Previous information\"\n            disabled={index === 0}\n            onClick={() => select(index - 1)}\n          >\n            Previous\n          </button>\n          <button\n            type=\"button\"\n            aria-label=\"Next information\"\n            disabled={index >= banners.length - 1}\n            onClick={() => select(index + 1)}\n          >\n            Next\n          </button>\n          {banners.map((_, position) => (\n            <button\n              key={position}\n              type=\"button\"\n              aria-label={`Go to banner ${position + 1}`}\n              aria-current={index === position ? \"true\" : undefined}\n              onClick={() => select(position)}\n            >\n              {position + 1}\n            </button>\n          ))}\n        </div>\n      )}\n    </section>\n  );\n}\n"],
+  "mappings": "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",
+  "names": []
+}

package/dist/catalogue/item-tile.js

@@ -0,0 +1,55 @@
+// src/catalogue/item-tile.tsx
+import { Description, ItemImage } from "./presentation.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+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))
+      ]
+    }
+  );
+}
+export {
+  BaseItemTile
+};
+//# sourceMappingURL=item-tile.js.map

package/dist/catalogue/item-tile.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/catalogue/item-tile.tsx"],
+  "sourcesContent": ["import type { CartLine, Item, Zappie } from \"@zappie/sdk\";\nimport { Description, ItemImage } from \"./presentation\";\nimport type { CatalogueLayoutMode } from \"./types\";\n\nexport function BaseItemTile({\n  item,\n  lines,\n  href,\n  layout,\n  priority,\n  client,\n  onOpen,\n}: {\n  item: Item;\n  lines: readonly CartLine[];\n  href: string;\n  layout: CatalogueLayoutMode;\n  priority: boolean;\n  client: Zappie;\n  onOpen(): void;\n}) {\n  const price = item.price;\n  return (\n    <a\n      href={href}\n      className=\"z-base-item-tile\"\n      onClick={(event) => {\n        event.preventDefault();\n        event.currentTarget.focus({ preventScroll: true });\n        onOpen();\n      }}\n    >\n      <ItemImage\n        src={item.images[0]}\n        sizes={layout === \"LIST\" ? \"100vw\" : \"(min-width: 768px) 33vw, 50vw\"}\n        priority={priority}\n      />\n      <span className=\"z-base-item-name\">{item.name}</span>\n      {item.description && <Description value={item.description} />}\n      {item.promo && <span>{item.promo.name}</span>}\n      {item.compareAtPrice && (\n        <del>{client.format.money(item.compareAtPrice)}</del>\n      )}\n      {price && (\n        <span className=\"z-base-amount\">\n          {item.variants.some(\n            (variant) => variant.price.amountMinor !== price.amountMinor,\n          )\n            ? \"From \"\n            : \"\"}\n          {client.format.money(price)}\n        </span>\n      )}\n      {(item.stockLabel || !item.isAvailable) && (\n        <span>{item.stockLabel ?? \"Unavailable\"}</span>\n      )}\n      {lines.map((line) => (\n        <span key={line.id}>{line.quantity} added</span>\n      ))}\n    </a>\n  );\n}\n"],
+  "mappings": ";AACA,SAAS,aAAa,iBAAiB;AA+BjC,cAYE,YAZF;AA5BC,SAAS,aAAa;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAQG;AACD,QAAM,QAAQ,KAAK;AACnB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAU;AAAA,MACV,SAAS,CAAC,UAAU;AAClB,cAAM,eAAe;AACrB,cAAM,cAAc,MAAM,EAAE,eAAe,KAAK,CAAC;AACjD,eAAO;AAAA,MACT;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,KAAK,KAAK,OAAO,CAAC;AAAA,YAClB,OAAO,WAAW,SAAS,UAAU;AAAA,YACrC;AAAA;AAAA,QACF;AAAA,QACA,oBAAC,UAAK,WAAU,oBAAoB,eAAK,MAAK;AAAA,QAC7C,KAAK,eAAe,oBAAC,eAAY,OAAO,KAAK,aAAa;AAAA,QAC1D,KAAK,SAAS,oBAAC,UAAM,eAAK,MAAM,MAAK;AAAA,QACrC,KAAK,kBACJ,oBAAC,SAAK,iBAAO,OAAO,MAAM,KAAK,cAAc,GAAE;AAAA,QAEhD,SACC,qBAAC,UAAK,WAAU,iBACb;AAAA,eAAK,SAAS;AAAA,YACb,CAAC,YAAY,QAAQ,MAAM,gBAAgB,MAAM;AAAA,UACnD,IACI,UACA;AAAA,UACH,OAAO,OAAO,MAAM,KAAK;AAAA,WAC5B;AAAA,SAEA,KAAK,cAAc,CAAC,KAAK,gBACzB,oBAAC,UAAM,eAAK,cAAc,eAAc;AAAA,QAEzC,MAAM,IAAI,CAAC,SACV,qBAAC,UAAoB;AAAA,eAAK;AAAA,UAAS;AAAA,aAAxB,KAAK,EAAyB,CAC1C;AAAA;AAAA;AAAA,EACH;AAEJ;",
+  "names": []
+}

package/dist/catalogue/loader.js

@@ -0,0 +1,136 @@
+// src/catalogue/loader.ts
+import { mergePage, pageKey, pageState } from "./catalogue-pages.js";
+import {
+  createSavedCatalogueSync
+} from "./saved-catalogue-sync.js";
+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();
+      }
+    }
+  };
+}
+export {
+  createCatalogueLoader
+};
+//# sourceMappingURL=loader.js.map

package/dist/catalogue/loader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/catalogue/loader.ts"],
+  "sourcesContent": ["import type { Menu, Zappie } from \"@zappie/sdk\";\nimport { mergePage, pageKey, pageState } from \"./catalogue-pages\";\nimport {\n  createSavedCatalogueSync,\n  type LoaderState,\n} from \"./saved-catalogue-sync\";\nexport type CatalogueStrategy = (\n  metadata: Menu,\n  sample?: Menu,\n) => \"eager\" | \"progressive\" | null;\n/** Screen-local read state; never marks a progressive catalogue as complete. */\nexport function createCatalogueLoader(\n  client: Zappie,\n  metadata: Menu,\n  resolve: CatalogueStrategy,\n  publish?: (menu: Menu) => void,\n  orderContext: \"delivery\" | \"pickup\" | \"dineIn\" = \"delivery\",\n  /** Host catalogue revision; a saved copy at this revision is not refreshed. */\n  revision?: string,\n) {\n  const state: LoaderState = {\n    menu: metadata,\n    mode: resolve(metadata),\n    complete: false,\n    abort: new AbortController(),\n    pages: new Map(),\n    savedPages: [],\n  };\n  const scope = {\n    store: client.config.store,\n    branchId: metadata.branchId,\n    orderContext,\n    menuId: metadata.menus?.[0]?.id ?? metadata.id,\n  };\n  const saved = createSavedCatalogueSync({\n    client,\n    state,\n    scope,\n    revision,\n    publish,\n  });\n  const pending = new Map<string, Promise<Menu>>();\n  let eager: Promise<Menu> | undefined;\n  // The complete read starts beside the size probe rather than after it, and\n  // is cancelled if the probe's measurement rejects eager loading.\n  let speculative: AbortController | undefined;\n  function readEager(signal: AbortSignal = state.abort.signal) {\n    eager ??= saved\n      .resources!.selected.read(scope, { signal })\n      .then(async (response) => {\n        signal.throwIfAborted();\n        if (\"notModified\" in response) {\n          throw new Error(\"Unexpected conditional selected-menu response\");\n        }\n        state.complete = true;\n        state.menu = response.menu;\n        saved.emit();\n        return state.menu;\n      })\n      .catch((failure: unknown) => {\n        eager = undefined;\n        throw failure;\n      });\n    return eager;\n  }\n  function speculate() {\n    if (eager) {\n      return;\n    }\n    speculative = new AbortController();\n    const cancel = () => speculative?.abort();\n    state.abort.signal.addEventListener(\"abort\", cancel, { once: true });\n    void readEager(speculative.signal).catch(() => {});\n  }\n  async function readPage(\n    menuId: string,\n    categoryId: string,\n    key: string,\n    cursor: string | undefined,\n  ) {\n    const page = await client.menu.page(menuId, categoryId, {\n      branch: metadata.branchId,\n      signal: state.abort.signal,\n      ...(cursor ? { cursor } : {}),\n    });\n    state.abort.signal.throwIfAborted();\n    // The size probe is a real first page: it renders before any\n    // complete read the measurement approves.\n    if (!state.complete) {\n      state.menu = mergePage(state.menu, page);\n    }\n    state.savedPages.push({ categoryId, ...(cursor ? { cursor } : {}), page });\n    saved.emit();\n    state.pages.set(key, pageState(page.nextCursor));\n    if (state.mode === null) {\n      state.mode = resolve(metadata, page.menu) ?? \"progressive\";\n      if (state.mode !== \"eager\") {\n        speculative?.abort();\n        eager = undefined;\n      }\n    }\n    return state.menu;\n  }\n  // Restoring starts with the loader, not at the first reach; any failure to\n  // restore (no IndexedDB, a chunk error) falls back to the network.\n  const initialized = saved.restore().catch(() => false);\n  return {\n    get value() {\n      return state.menu;\n    },\n    get mode() {\n      return state.mode;\n    },\n    hasMore(menuId: string, categoryId: string) {\n      return (\n        state.mode !== \"eager\" &&\n        !state.pages.get(pageKey(menuId, categoryId))?.done\n      );\n    },\n    /** True when reaching this category would neither read nor change. */\n    isLoaded(menuId: string, categoryId: string) {\n      return (\n        state.complete ||\n        (state.mode !== \"eager\" && state.pages.has(pageKey(menuId, categoryId)))\n      );\n    },\n    async reach(\n      menuId: string,\n      categoryId: string,\n      more = false,\n    ): Promise<Menu> {\n      const key = pageKey(menuId, categoryId);\n      const warm = await initialized;\n      if (state.complete || (warm && state.pages.has(key) && !more)) {\n        return state.menu;\n      }\n      if (state.mode === \"eager\") {\n        return readEager();\n      }\n      const existing = pending.get(key);\n      if (existing) {\n        return existing;\n      }\n      const loaded = state.pages.get(key);\n      if (loaded && (!more || loaded.done)) {\n        return state.menu;\n      }\n      if (state.mode === null) {\n        speculate();\n      }\n      const request = readPage(menuId, categoryId, key, loaded?.next);\n      pending.set(key, request);\n      try {\n        return await request;\n      } finally {\n        pending.delete(key);\n      }\n    },\n    /** Aborts in-flight reads; `resume()` makes the loader usable again. */\n    dispose() {\n      state.abort.abort();\n    },\n    resume() {\n      if (state.abort.signal.aborted) {\n        state.abort = new AbortController();\n      }\n    },\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}