@zappie/foundations 0.1.2 → 0.1.4

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @zappie/foundations
 
+## 0.1.4
+
+### Patch Changes
+
+- 4f3cdc3: Add `deferred()` and `useIntentPreload()`, which load an overlay's code on demand and render it without suspending, so a first open no longer waits for React's 300 ms reveal. `BranchMap` now fits the shopper's location with the branches, pans to a newly selected branch instead of fitting again, reports load failures through `onLoadError` and `renderLoadError` with a retry, and can label pins with the branch name. `ItemForm.Root` focuses the first invalid group without scrolling and reports the invalid groups through `onInvalid`.
+- e1f4cf0: `Overlay` prefetches its engine once the page has loaded and the browser is idle, without waiting for an `Overlay.Root` to mount. An overlay loaded with `deferred()` mounts its Root only on the tap, so its first open used to wait for the engine's download as well.
+- 3d56337: Add a fitted-zoom limit, image pins, and an optional map and satellite switch to `BranchMap`.
+- Updated dependencies [4f3cdc3]
+  - @zappie/sdk@0.1.8
+
+## 0.1.3
+
+### Patch Changes
+
+- 4bfb1b2: Add BranchMap with lazy Maps loading, themeable pins, controlled branch selection, shopper location and a fallback for branches without coordinates.
+- Updated dependencies [4bfb1b2]
+- Updated dependencies [666ba1c]
+  - @zappie/sdk@0.1.7
+
 ## 0.1.2
 
 ### Patch Changes

package/README.md

@@ -49,3 +49,126 @@ Foundations is at `0.x`. Its API can change in a minor release while it settles.
 ## License
 
 MIT
+
+## Deferred overlays
+
+Keep a bag, branch finder or search dialog off the first load without `React.lazy`.
+React holds a suspended boundary's first reveal for about 300 ms, so a lazy overlay
+opens late. `deferred()` loads the code on demand and renders on the frame it arrives.
+It never suspends.
+
+```tsx
+import { deferred, useIntentPreload } from "@zappie/foundations";
+
+const BagSheet = deferred(() => import("./bag-sheet"));
+// Or a named export: deferred(() => import("./finder").then((m) => m.Finder))
+
+function Header() {
+  const [open, setOpen] = useState(false);
+  const intent = useIntentPreload(BagSheet);
+  return (
+    <>
+      <button {...intent} onClick={() => setOpen(true)}>
+        Bag
+      </button>
+      <BagSheet.Component open={open} onClose={() => setOpen(false)} />
+    </>
+  );
+}
+```
+
+- `deferred(load)` takes a function that imports a module whose default export
+  is the component, or that resolves to the component. Create it once at module
+  scope.
+- `Component` renders nothing until `open` is first true and the code is in.
+  When `open` turns true it loads the code and renders as soon as it arrives.
+  After that first open the component stays mounted and receives every prop,
+  `open` included, so it can animate out and return focus when it closes.
+- Pass `fallback` to hold an inline part's place while its code loads, for
+  example a placeholder label. It shows only while `open` is true and the code
+  is not in yet, and it never suspends.
+- `preload()` starts the load and returns its promise. Calls share one load. A
+  failed load is forgotten, so the next `preload()` or the next open tries again.
+- `preloadWhenIdle({ timeout? })` loads the code when the browser is idle and
+  returns a function that cancels it. Use it only for small chunks. It does
+  nothing on the server.
+- `useIntentPreload(target)` returns `{ onPointerEnter, onPointerDown, onFocus }`
+  for the trigger, so the code is usually in by the click.
+
+Importing the helper never touches `window`. On the server `Component` renders
+nothing, and it works under `StrictMode`.
+
+## Item form focus
+
+When an add fails validation, `ItemForm.Root` focuses the first invalid group
+with `preventScroll`, so the page doesn't jump. Pass `onInvalid(groups)` to
+scroll it into view yourself. `groups` lists the invalid groups in display
+order, each with its `groupId`, its `group` (undefined for a group the
+template renders from its own model), its `element` and its `issues`.
+
+```tsx
+<ItemForm.Root
+  item={item}
+  onInvalid={(groups) =>
+    groups[0]?.element?.scrollIntoView({ behavior: "smooth", block: "center" })
+  }
+>
+```
+
+## Branch map
+
+`BranchMap` accepts SDK `Branch[]` data, `selectedBranchId`, `onSelect(branch)`,
+`browserKey`, and optional `shopperLocation: { lat, lng }`. Use `maxZoom` to
+limit the zoom after fitting, `pinImageUrl` to show an image in each branch pin,
+`mapTypeControl` to show the map and satellite switch, and `pinLabel` to show
+the branch name above the selected pin (`"selected"`) or every pin (`"all"`).
+It also accepts standard div attributes such as `className` and `style`.
+
+```tsx
+import { BranchMap } from "@zappie/foundations";
+
+<BranchMap
+  branches={branches}
+  selectedBranchId={selectedBranchId}
+  onSelect={(branch) => setSelectedBranchId(branch.id)}
+  browserKey={integrations.googleMaps?.browserKey}
+  shopperLocation={shopperLocation}
+  pinImageUrl={store.brand.logoUrl}
+  pinLabel="selected"
+  mapTypeControl
+  onLoadError={(error) => report(error)}
+  renderLoadError={({ retry }) => (
+    <div role="status">
+      <p>Map didn't load</p>
+      <button type="button" onClick={retry}>
+        Try again
+      </button>
+    </div>
+  )}
+  className="branch-map"
+/>;
+```
+
+Set a height on `.branch-map`. Theme pins with `--branch-map-pin`,
+`--branch-map-pin-selected`, `--branch-map-pin-border`, and
+`--branch-map-pin-size`. Pins expose `data-selected` and `aria-pressed`. Theme
+pin labels with `--branch-map-label-background`, `--branch-map-label-color` and
+`--branch-map-label-border`. Labels are marked `data-branch-map-pin-label` and
+hidden from assistive technology, because the pin already carries the name.
+
+The map fits branches with valid coordinates, including across the date line.
+With a `shopperLocation`, it fits the shopper with the branches, with 88 px of
+padding. After that first fit, selecting another branch pans to it and keeps the
+zoom. The map fits again only when the branches, the shopper location or
+`maxZoom` change. Branches without coordinates remain selectable with “Map
+location unavailable”. `maxZoom` defaults to `15` with a shopper location and
+`14` without one. `mapTypeControl` defaults to `false`. Without a `pinImageUrl`,
+branch pins keep using the existing CSS variables.
+
+The component renders nothing without a key. It loads its map runtime and the
+Maps JavaScript API after mount, sharing one script across mounted maps.
+Use one browser key per page. A loading failure calls `onLoadError(error)`.
+With `renderLoadError({ error, retry })` you render the message, and `retry`
+loads the map again. Without it the map shows “Map location unavailable”.
+The optional location button pans to coordinates supplied by your app. Your app
+requests geolocation permission and supplies those coordinates.

package/dist/branch-map/geometry.js

@@ -0,0 +1,43 @@
+// src/branch-map/geometry.ts
+function validCoordinates(value) {
+  return !!value && Number.isFinite(value.lat) && Number.isFinite(value.lng) && Math.abs(value.lat) <= 90 && Math.abs(value.lng) <= 180;
+}
+function visibleBranches(branches) {
+  return branches.filter(
+    (branch) => validCoordinates(branch.coordinates)
+  );
+}
+function branchBounds(branches, location) {
+  const points = visibleBranches(branches).map((branch) => branch.coordinates);
+  if (validCoordinates(location)) {
+    points.push(location);
+  }
+  if (!points.length) {
+    return void 0;
+  }
+  const longitudes = points.map((point) => (point.lng + 360) % 360).sort((a, b) => a - b);
+  let gap = -1;
+  let start = 0;
+  for (let index = 0; index < longitudes.length; index++) {
+    const next = longitudes[(index + 1) % longitudes.length] + (index === longitudes.length - 1 ? 360 : 0);
+    if (next - longitudes[index] > gap) {
+      gap = next - longitudes[index];
+      start = (index + 1) % longitudes.length;
+    }
+  }
+  const normalize = (lng) => lng > 180 ? lng - 360 : lng;
+  return {
+    north: Math.max(...points.map((point) => point.lat)),
+    south: Math.min(...points.map((point) => point.lat)),
+    west: normalize(longitudes[start]),
+    east: normalize(
+      longitudes[(start + longitudes.length - 1) % longitudes.length]
+    )
+  };
+}
+export {
+  branchBounds,
+  validCoordinates,
+  visibleBranches
+};
+//# sourceMappingURL=geometry.js.map

package/dist/branch-map/geometry.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/branch-map/geometry.ts"],
+  "sourcesContent": ["import type { Branch } from \"@zappie/sdk\";\n\nexport type Coordinates = { lat: number; lng: number };\nexport function validCoordinates(value?: Coordinates): value is Coordinates {\n  return (\n    !!value &&\n    Number.isFinite(value.lat) &&\n    Number.isFinite(value.lng) &&\n    Math.abs(value.lat) <= 90 &&\n    Math.abs(value.lng) <= 180\n  );\n}\nexport function visibleBranches(branches: Branch[]) {\n  return branches.filter(\n    (branch): branch is Branch & { coordinates: Coordinates } =>\n      validCoordinates(branch.coordinates),\n  );\n}\nexport function branchBounds(branches: Branch[], location?: Coordinates) {\n  const points = visibleBranches(branches).map((branch) => branch.coordinates);\n  if (validCoordinates(location)) {\n    points.push(location);\n  }\n  if (!points.length) {\n    return undefined;\n  }\n  // The largest longitude gap lies outside the bounds, including across the date line.\n  const longitudes = points\n    .map((point) => (point.lng + 360) % 360)\n    .sort((a, b) => a - b);\n  let gap = -1;\n  let start = 0;\n  for (let index = 0; index < longitudes.length; index++) {\n    const next =\n      longitudes[(index + 1) % longitudes.length]! +\n      (index === longitudes.length - 1 ? 360 : 0);\n    if (next - longitudes[index]! > gap) {\n      gap = next - longitudes[index]!;\n      start = (index + 1) % longitudes.length;\n    }\n  }\n  const normalize = (lng: number) => (lng > 180 ? lng - 360 : lng);\n  return {\n    north: Math.max(...points.map((point) => point.lat)),\n    south: Math.min(...points.map((point) => point.lat)),\n    west: normalize(longitudes[start]!),\n    east: normalize(\n      longitudes[(start + longitudes.length - 1) % longitudes.length]!,\n    ),\n  };\n}\n"],
+  "mappings": ";AAGO,SAAS,iBAAiB,OAA2C;AAC1E,SACE,CAAC,CAAC,SACF,OAAO,SAAS,MAAM,GAAG,KACzB,OAAO,SAAS,MAAM,GAAG,KACzB,KAAK,IAAI,MAAM,GAAG,KAAK,MACvB,KAAK,IAAI,MAAM,GAAG,KAAK;AAE3B;AACO,SAAS,gBAAgB,UAAoB;AAClD,SAAO,SAAS;AAAA,IACd,CAAC,WACC,iBAAiB,OAAO,WAAW;AAAA,EACvC;AACF;AACO,SAAS,aAAa,UAAoB,UAAwB;AACvE,QAAM,SAAS,gBAAgB,QAAQ,EAAE,IAAI,CAAC,WAAW,OAAO,WAAW;AAC3E,MAAI,iBAAiB,QAAQ,GAAG;AAC9B,WAAO,KAAK,QAAQ;AAAA,EACtB;AACA,MAAI,CAAC,OAAO,QAAQ;AAClB,WAAO;AAAA,EACT;AAEA,QAAM,aAAa,OAChB,IAAI,CAAC,WAAW,MAAM,MAAM,OAAO,GAAG,EACtC,KAAK,CAAC,GAAG,MAAM,IAAI,CAAC;AACvB,MAAI,MAAM;AACV,MAAI,QAAQ;AACZ,WAAS,QAAQ,GAAG,QAAQ,WAAW,QAAQ,SAAS;AACtD,UAAM,OACJ,YAAY,QAAQ,KAAK,WAAW,MAAM,KACzC,UAAU,WAAW,SAAS,IAAI,MAAM;AAC3C,QAAI,OAAO,WAAW,KAAK,IAAK,KAAK;AACnC,YAAM,OAAO,WAAW,KAAK;AAC7B,eAAS,QAAQ,KAAK,WAAW;AAAA,IACnC;AAAA,EACF;AACA,QAAM,YAAY,CAAC,QAAiB,MAAM,MAAM,MAAM,MAAM;AAC5D,SAAO;AAAA,IACL,OAAO,KAAK,IAAI,GAAG,OAAO,IAAI,CAAC,UAAU,MAAM,GAAG,CAAC;AAAA,IACnD,OAAO,KAAK,IAAI,GAAG,OAAO,IAAI,CAAC,UAAU,MAAM,GAAG,CAAC;AAAA,IACnD,MAAM,UAAU,WAAW,KAAK,CAAE;AAAA,IAClC,MAAM;AAAA,MACJ,YAAY,QAAQ,WAAW,SAAS,KAAK,WAAW,MAAM;AAAA,IAChE;AAAA,EACF;AACF;",
+  "names": []
+}

package/dist/branch-map/index.js

@@ -0,0 +1,127 @@
+"use client";
+
+// src/branch-map/index.tsx
+import {
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import {
+  validCoordinates,
+  visibleBranches
+} from "./geometry.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BranchMap({
+  branches,
+  selectedBranchId,
+  onSelect,
+  shopperLocation,
+  browserKey,
+  maxZoom,
+  pinImageUrl,
+  mapTypeControl = false,
+  pinLabel,
+  onLoadError,
+  renderLoadError,
+  ...props
+}) {
+  const element = useRef(null);
+  const [runtime, setRuntime] = useState();
+  const [failure, setFailure] = useState();
+  const [attempt, setAttempt] = useState(0);
+  const reportError = useRef(onLoadError);
+  useEffect(() => {
+    reportError.current = onLoadError;
+  }, [onLoadError]);
+  const failed = failure !== void 0;
+  const effectiveMaxZoom = maxZoom ?? (validCoordinates(shopperLocation) ? 15 : 14);
+  const hasCoordinates = visibleBranches(branches).length > 0;
+  useEffect(() => {
+    if (!browserKey || !element.current || !hasCoordinates) {
+      return;
+    }
+    let disposed = false;
+    const controller = new AbortController();
+    let instance;
+    const target = element.current;
+    setFailure(void 0);
+    void import("./runtime.js").then(
+      ({ createMap }) => createMap(target, browserKey, controller.signal, { mapTypeControl })
+    ).then((map) => {
+      instance = map;
+      if (disposed) {
+        map.destroy();
+      } else {
+        setRuntime(map);
+      }
+    }).catch((error) => {
+      if (!disposed) {
+        setFailure({ error });
+        reportError.current?.(error);
+      }
+    });
+    return () => {
+      disposed = true;
+      controller.abort();
+      instance?.destroy();
+      setRuntime(void 0);
+    };
+  }, [browserKey, hasCoordinates, attempt]);
+  useEffect(() => {
+    runtime?.update(branches, selectedBranchId, onSelect, shopperLocation, {
+      maxZoom: effectiveMaxZoom,
+      pinImageUrl,
+      mapTypeControl,
+      pinLabel
+    });
+  }, [
+    runtime,
+    branches,
+    selectedBranchId,
+    onSelect,
+    shopperLocation,
+    effectiveMaxZoom,
+    pinImageUrl,
+    mapTypeControl,
+    pinLabel
+  ]);
+  if (!browserKey) {
+    return null;
+  }
+  const unavailable = branches.filter(
+    (branch) => !validCoordinates(branch.coordinates)
+  );
+  return /* @__PURE__ */ jsxs("div", { ...props, "data-branch-map": "", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        hidden: failed || !hasCoordinates,
+        ref: element,
+        "data-branch-map-canvas": "",
+        style: { height: "100%" }
+      }
+    ),
+    failure && renderLoadError ? renderLoadError({
+      error: failure.error,
+      retry: () => setAttempt((count) => count + 1)
+    }) : failed || !hasCoordinates ? /* @__PURE__ */ jsx("p", { role: "status", children: "Map location unavailable" }) : null,
+    unavailable.map((branch) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": branch.id === selectedBranchId,
+        onClick: () => onSelect(branch),
+        children: [
+          branch.name,
+          ": Map location unavailable"
+        ]
+      },
+      branch.id
+    )),
+    runtime && validCoordinates(shopperLocation) ? /* @__PURE__ */ jsx("button", { type: "button", onClick: () => runtime.locate(shopperLocation), children: "Use my current location" }) : null
+  ] });
+}
+export {
+  BranchMap
+};
+//# sourceMappingURL=index.js.map

package/dist/branch-map/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/branch-map/index.tsx"],
+  "sourcesContent": ["\"use client\";\nimport type { Branch } from \"@zappie/sdk\";\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport {\n  validCoordinates,\n  visibleBranches,\n  type Coordinates,\n} from \"./geometry\";\nimport type { createMap } from \"./runtime\";\n\n/** What a template gets to render when the map fails to load. */\nexport type BranchMapLoadErrorState = {\n  /** Why the map failed to load. */\n  error: unknown;\n  /** Load the map again. */\n  retry: () => void;\n};\n\n/** Branches, selection and optional shopper coordinates for BranchMap. */\nexport type BranchMapProps = Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"onSelect\"\n> & {\n  branches: Branch[];\n  selectedBranchId?: string;\n  onSelect: (branch: Branch) => void;\n  /** The shopper's coordinates. The map fits them with the branches. */\n  shopperLocation?: Coordinates;\n  browserKey?: string;\n  /**\n   * Highest zoom applied after fitting. Defaults to 15 when a shopper location\n   * is shown and 14 otherwise.\n   */\n  maxZoom?: number;\n  /** Image shown inside each branch pin. */\n  pinImageUrl?: string;\n  /** Show the map and satellite switch. Defaults to false. */\n  mapTypeControl?: boolean;\n  /** Show the branch name above the selected pin, or above every pin. Off by default. */\n  pinLabel?: \"selected\" | \"all\";\n  /** Called each time the map fails to load. */\n  onLoadError?: (error: unknown) => void;\n  /**\n   * Render your own message when the map fails to load, such as a retry\n   * button that calls `retry`. Without it the map shows \"Map location unavailable\".\n   */\n  renderLoadError?: (state: BranchMapLoadErrorState) => ReactNode;\n};\n\n/**\n * Show branch locations. Maps loads after mount when you supply a browser key.\n * Set the container height with CSS. Style pins with --branch-map-pin,\n * --branch-map-pin-selected, --branch-map-pin-border and --branch-map-pin-size.\n */\nexport function BranchMap({\n  branches,\n  selectedBranchId,\n  onSelect,\n  shopperLocation,\n  browserKey,\n  maxZoom,\n  pinImageUrl,\n  mapTypeControl = false,\n  pinLabel,\n  onLoadError,\n  renderLoadError,\n  ...props\n}: BranchMapProps) {\n  const element = useRef<HTMLDivElement>(null);\n  const [runtime, setRuntime] =\n    useState<Awaited<ReturnType<typeof createMap>>>();\n  const [failure, setFailure] = useState<{ error: unknown }>();\n  const [attempt, setAttempt] = useState(0);\n  const reportError = useRef(onLoadError);\n  useEffect(() => {\n    reportError.current = onLoadError;\n  }, [onLoadError]);\n  const failed = failure !== undefined;\n  const effectiveMaxZoom =\n    maxZoom ?? (validCoordinates(shopperLocation) ? 15 : 14);\n  const hasCoordinates = visibleBranches(branches).length > 0;\n  useEffect(() => {\n    if (!browserKey || !element.current || !hasCoordinates) {\n      return;\n    }\n    let disposed = false;\n    const controller = new AbortController();\n    let instance: Awaited<ReturnType<typeof createMap>> | undefined;\n    const target = element.current;\n    setFailure(undefined);\n    void import(\"./runtime\")\n      .then(({ createMap }) =>\n        createMap(target, browserKey, controller.signal, { mapTypeControl }),\n      )\n      .then((map) => {\n        instance = map;\n        if (disposed) {\n          map.destroy();\n        } else {\n          setRuntime(map);\n        }\n      })\n      .catch((error: unknown) => {\n        if (!disposed) {\n          setFailure({ error });\n          reportError.current?.(error);\n        }\n      });\n    return () => {\n      disposed = true;\n      controller.abort();\n      instance?.destroy();\n      setRuntime(undefined);\n    };\n  }, [browserKey, hasCoordinates, attempt]);\n  useEffect(() => {\n    runtime?.update(branches, selectedBranchId, onSelect, shopperLocation, {\n      maxZoom: effectiveMaxZoom,\n      pinImageUrl,\n      mapTypeControl,\n      pinLabel,\n    });\n  }, [\n    runtime,\n    branches,\n    selectedBranchId,\n    onSelect,\n    shopperLocation,\n    effectiveMaxZoom,\n    pinImageUrl,\n    mapTypeControl,\n    pinLabel,\n  ]);\n  if (!browserKey) {\n    return null;\n  }\n  const unavailable = branches.filter(\n    (branch) => !validCoordinates(branch.coordinates),\n  );\n  return (\n    <div {...props} data-branch-map=\"\">\n      <div\n        hidden={failed || !hasCoordinates}\n        ref={element}\n        data-branch-map-canvas=\"\"\n        style={{ height: \"100%\" }}\n      />\n      {failure && renderLoadError ? (\n        renderLoadError({\n          error: failure.error,\n          retry: () => setAttempt((count) => count + 1),\n        })\n      ) : failed || !hasCoordinates ? (\n        <p role=\"status\">Map location unavailable</p>\n      ) : null}\n      {unavailable.map((branch) => (\n        <button\n          key={branch.id}\n          type=\"button\"\n          aria-pressed={branch.id === selectedBranchId}\n          onClick={() => onSelect(branch)}\n        >\n          {branch.name}: Map location unavailable\n        </button>\n      ))}\n      {runtime && validCoordinates(shopperLocation) ? (\n        <button type=\"button\" onClick={() => runtime.locate(shopperLocation)}>\n          Use my current location\n        </button>\n      ) : null}\n    </div>\n  );\n}\n"],
+  "mappings": ";;;AAEA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AACP;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAsID,cAeE,YAfF;AAvFC,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,SAAS,UAAU,IACxB,SAAgD;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAA6B;AAC3D,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAC;AACxC,QAAM,cAAc,OAAO,WAAW;AACtC,YAAU,MAAM;AACd,gBAAY,UAAU;AAAA,EACxB,GAAG,CAAC,WAAW,CAAC;AAChB,QAAM,SAAS,YAAY;AAC3B,QAAM,mBACJ,YAAY,iBAAiB,eAAe,IAAI,KAAK;AACvD,QAAM,iBAAiB,gBAAgB,QAAQ,EAAE,SAAS;AAC1D,YAAU,MAAM;AACd,QAAI,CAAC,cAAc,CAAC,QAAQ,WAAW,CAAC,gBAAgB;AACtD;AAAA,IACF;AACA,QAAI,WAAW;AACf,UAAM,aAAa,IAAI,gBAAgB;AACvC,QAAI;AACJ,UAAM,SAAS,QAAQ;AACvB,eAAW,MAAS;AACpB,SAAK,OAAO,cAAW,EACpB;AAAA,MAAK,CAAC,EAAE,UAAU,MACjB,UAAU,QAAQ,YAAY,WAAW,QAAQ,EAAE,eAAe,CAAC;AAAA,IACrE,EACC,KAAK,CAAC,QAAQ;AACb,iBAAW;AACX,UAAI,UAAU;AACZ,YAAI,QAAQ;AAAA,MACd,OAAO;AACL,mBAAW,GAAG;AAAA,MAChB;AAAA,IACF,CAAC,EACA,MAAM,CAAC,UAAmB;AACzB,UAAI,CAAC,UAAU;AACb,mBAAW,EAAE,MAAM,CAAC;AACpB,oBAAY,UAAU,KAAK;AAAA,MAC7B;AAAA,IACF,CAAC;AACH,WAAO,MAAM;AACX,iBAAW;AACX,iBAAW,MAAM;AACjB,gBAAU,QAAQ;AAClB,iBAAW,MAAS;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,YAAY,gBAAgB,OAAO,CAAC;AACxC,YAAU,MAAM;AACd,aAAS,OAAO,UAAU,kBAAkB,UAAU,iBAAiB;AAAA,MACrE,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AACD,MAAI,CAAC,YAAY;AACf,WAAO;AAAA,EACT;AACA,QAAM,cAAc,SAAS;AAAA,IAC3B,CAAC,WAAW,CAAC,iBAAiB,OAAO,WAAW;AAAA,EAClD;AACA,SACE,qBAAC,SAAK,GAAG,OAAO,mBAAgB,IAC9B;AAAA;AAAA,MAAC;AAAA;AAAA,QACC,QAAQ,UAAU,CAAC;AAAA,QACnB,KAAK;AAAA,QACL,0BAAuB;AAAA,QACvB,OAAO,EAAE,QAAQ,OAAO;AAAA;AAAA,IAC1B;AAAA,IACC,WAAW,kBACV,gBAAgB;AAAA,MACd,OAAO,QAAQ;AAAA,MACf,OAAO,MAAM,WAAW,CAAC,UAAU,QAAQ,CAAC;AAAA,IAC9C,CAAC,IACC,UAAU,CAAC,iBACb,oBAAC,OAAE,MAAK,UAAS,sCAAwB,IACvC;AAAA,IACH,YAAY,IAAI,CAAC,WAChB;AAAA,MAAC;AAAA;AAAA,QAEC,MAAK;AAAA,QACL,gBAAc,OAAO,OAAO;AAAA,QAC5B,SAAS,MAAM,SAAS,MAAM;AAAA,QAE7B;AAAA,iBAAO;AAAA,UAAK;AAAA;AAAA;AAAA,MALR,OAAO;AAAA,IAMd,CACD;AAAA,IACA,WAAW,iBAAiB,eAAe,IAC1C,oBAAC,YAAO,MAAK,UAAS,SAAS,MAAM,QAAQ,OAAO,eAAe,GAAG,qCAEtE,IACE;AAAA,KACN;AAEJ;",
+  "names": []
+}

package/dist/branch-map/loader.js

@@ -0,0 +1,39 @@
+// src/branch-map/loader.ts
+var pending;
+function loadMaps(key) {
+  if (globalThis.google?.maps?.Map) {
+    return Promise.resolve(google.maps);
+  }
+  if (pending) {
+    return pending;
+  }
+  pending = new Promise((resolve, reject) => {
+    const script = document.createElement("script");
+    const callback = `__zappieMaps${Date.now()}`;
+    const scope = globalThis;
+    const cleanup = () => {
+      clearTimeout(timeout);
+      delete scope[callback];
+    };
+    const fail = () => {
+      cleanup();
+      script.remove();
+      pending = void 0;
+      reject(new Error("Map location unavailable"));
+    };
+    const timeout = setTimeout(fail, 15e3);
+    scope[callback] = () => {
+      cleanup();
+      resolve(google.maps);
+    };
+    script.async = true;
+    script.src = `https://maps.googleapis.com/maps/api/js?${new URLSearchParams({ key, loading: "async", callback, v: "weekly" })}`;
+    script.onerror = fail;
+    document.head.appendChild(script);
+  });
+  return pending;
+}
+export {
+  loadMaps
+};
+//# sourceMappingURL=loader.js.map

package/dist/branch-map/loader.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/branch-map/loader.ts"],
+  "sourcesContent": ["/// <reference types=\"google.maps\" />\nlet pending: Promise<typeof google.maps> | undefined;\n\nexport function loadMaps(key: string): Promise<typeof google.maps> {\n  if (globalThis.google?.maps?.Map) {\n    return Promise.resolve(google.maps);\n  }\n  if (pending) {\n    return pending;\n  }\n  pending = new Promise((resolve, reject) => {\n    const script = document.createElement(\"script\");\n    const callback = `__zappieMaps${Date.now()}`;\n    const scope = globalThis as unknown as Record<string, unknown>;\n    const cleanup = () => {\n      clearTimeout(timeout);\n      delete scope[callback];\n    };\n    const fail = () => {\n      cleanup();\n      script.remove();\n      pending = undefined;\n      reject(new Error(\"Map location unavailable\"));\n    };\n    const timeout = setTimeout(fail, 15000);\n    scope[callback] = () => {\n      cleanup();\n      resolve(google.maps);\n    };\n    script.async = true;\n    script.src = `https://maps.googleapis.com/maps/api/js?${new URLSearchParams({ key, loading: \"async\", callback, v: \"weekly\" })}`;\n    script.onerror = fail;\n    document.head.appendChild(script);\n  });\n  return pending;\n}\n"],
+  "mappings": ";AACA,IAAI;AAEG,SAAS,SAAS,KAA0C;AACjE,MAAI,WAAW,QAAQ,MAAM,KAAK;AAChC,WAAO,QAAQ,QAAQ,OAAO,IAAI;AAAA,EACpC;AACA,MAAI,SAAS;AACX,WAAO;AAAA,EACT;AACA,YAAU,IAAI,QAAQ,CAAC,SAAS,WAAW;AACzC,UAAM,SAAS,SAAS,cAAc,QAAQ;AAC9C,UAAM,WAAW,eAAe,KAAK,IAAI,CAAC;AAC1C,UAAM,QAAQ;AACd,UAAM,UAAU,MAAM;AACpB,mBAAa,OAAO;AACpB,aAAO,MAAM,QAAQ;AAAA,IACvB;AACA,UAAM,OAAO,MAAM;AACjB,cAAQ;AACR,aAAO,OAAO;AACd,gBAAU;AACV,aAAO,IAAI,MAAM,0BAA0B,CAAC;AAAA,IAC9C;AACA,UAAM,UAAU,WAAW,MAAM,IAAK;AACtC,UAAM,QAAQ,IAAI,MAAM;AACtB,cAAQ;AACR,cAAQ,OAAO,IAAI;AAAA,IACrB;AACA,WAAO,QAAQ;AACf,WAAO,MAAM,2CAA2C,IAAI,gBAAgB,EAAE,KAAK,SAAS,SAAS,UAAU,GAAG,SAAS,CAAC,CAAC;AAC7H,WAAO,UAAU;AACjB,aAAS,KAAK,YAAY,MAAM;AAAA,EAClC,CAAC;AACD,SAAO;AACT;",
+  "names": []
+}

package/dist/branch-map/runtime.js

@@ -0,0 +1,159 @@
+// src/branch-map/runtime.ts
+import {
+  branchBounds,
+  validCoordinates,
+  visibleBranches
+} from "./geometry.js";
+import { loadMaps } from "./loader.js";
+var BRANCH_PADDING = 32;
+var SHOPPER_PADDING = 88;
+async function createMap(element, key, signal, options) {
+  const maps = await loadMaps(key);
+  signal.throwIfAborted();
+  const map = new maps.Map(element, {
+    center: { lat: 0, lng: 0 },
+    zoom: 12,
+    mapTypeControl: options.mapTypeControl,
+    streetViewControl: false
+  });
+  let pins = [];
+  let fitListener;
+  let fitted;
+  let lastSelected;
+  class Pin extends maps.OverlayView {
+    constructor(position, pin) {
+      super();
+      this.position = position;
+      const { label, selected, imageUrl } = pin;
+      const size = imageUrl ? `${selected ? 40 : 32}px` : "var(--branch-map-pin-size,24px)";
+      this.button = document.createElement("button");
+      this.button.type = "button";
+      this.button.setAttribute("aria-label", label);
+      this.button.setAttribute("aria-pressed", String(selected));
+      this.button.dataset.selected = String(selected);
+      this.button.dataset.branchMapPin = "";
+      this.button.style.cssText = imageUrl ? `position:absolute;transform:translate(-50%,-100%);width:${size};height:${size};padding:0;border-radius:50%;overflow:hidden;border:2px solid white;background:white;box-shadow:${selected ? "0 2px 6px rgb(0 0 0 / 35%)" : "0 1px 3px rgb(0 0 0 / 25%)"};cursor:pointer` : `position:absolute;transform:translate(-50%,-100%);width:${size};height:${size};border-radius:50%;border:2px solid var(--branch-map-pin-border,currentColor);background:var(${selected ? "--branch-map-pin-selected" : "--branch-map-pin"},currentColor);cursor:pointer`;
+      if (imageUrl) {
+        const image = document.createElement("img");
+        image.alt = "";
+        image.decoding = "async";
+        image.style.cssText = "display:block;width:100%;height:100%;object-fit:cover";
+        image.src = imageUrl;
+        this.button.appendChild(image);
+      }
+      if (pin.caption) {
+        this.caption = document.createElement("span");
+        this.caption.textContent = pin.caption;
+        this.caption.setAttribute("aria-hidden", "true");
+        this.caption.dataset.branchMapPinLabel = "";
+        this.caption.dataset.selected = String(selected);
+        this.caption.style.cssText = `position:absolute;transform:translate(-50%,calc(-100% - ${size} - 4px));white-space:nowrap;pointer-events:none;padding:2px 8px;border-radius:4px;font-size:12px;line-height:16px;font-weight:500;background:var(--branch-map-label-background,white);color:var(--branch-map-label-color,#111);border:1px solid var(--branch-map-label-border,transparent);box-shadow:0 1px 3px rgb(0 0 0 / 20%)`;
+      }
+      this.button.onclick = pin.onClick ?? null;
+    }
+    onAdd() {
+      const pane = this.getPanes()?.overlayMouseTarget;
+      pane?.appendChild(this.button);
+      if (this.caption) {
+        pane?.appendChild(this.caption);
+      }
+      maps.OverlayView.preventMapHitsAndGesturesFrom(this.button);
+    }
+    draw() {
+      const point = this.getProjection().fromLatLngToDivPixel(
+        new maps.LatLng(this.position)
+      );
+      if (point) {
+        for (const node of [this.button, this.caption]) {
+          if (node) {
+            node.style.left = `${point.x}px`;
+            node.style.top = `${point.y}px`;
+          }
+        }
+      }
+    }
+    onRemove() {
+      this.button.remove();
+      this.caption?.remove();
+      this.button.onclick = null;
+    }
+  }
+  const clear = () => {
+    pins.forEach((pin) => pin.setMap(null));
+    pins = [];
+  };
+  const fit = (branches, location, maxZoom) => {
+    fitListener?.remove();
+    fitListener = void 0;
+    const bounds = branchBounds(branches, location);
+    if (!bounds) {
+      return;
+    }
+    map.fitBounds(bounds, location ? SHOPPER_PADDING : BRANCH_PADDING);
+    fitListener = maps.event.addListenerOnce(map, "idle", () => {
+      fitListener = void 0;
+      const zoom = map.getZoom();
+      if (typeof zoom === "number" && zoom > maxZoom) {
+        map.setZoom(maxZoom);
+      }
+    });
+  };
+  return {
+    update(branches, selected, onSelect, location, options2) {
+      clear();
+      map.setOptions({ mapTypeControl: options2?.mapTypeControl ?? false });
+      const visible = visibleBranches(branches);
+      for (const branch of visible) {
+        const isSelected = branch.id === selected;
+        const pin = new Pin(branch.coordinates, {
+          label: branch.name,
+          selected: isSelected,
+          imageUrl: options2?.pinImageUrl,
+          caption: options2?.pinLabel === "all" || options2?.pinLabel === "selected" && isSelected ? branch.name : void 0,
+          onClick: () => onSelect(branch)
+        });
+        pin.setMap(map);
+        pins.push(pin);
+      }
+      const shopper = validCoordinates(location) ? location : void 0;
+      if (shopper) {
+        const pin = new Pin(shopper, {
+          label: "Your location",
+          selected: false
+        });
+        pin.setMap(map);
+        pins.push(pin);
+      }
+      const maxZoom = options2?.maxZoom ?? 14;
+      const frame = JSON.stringify([
+        visible.map(({ coordinates }) => [coordinates.lat, coordinates.lng]),
+        shopper ? [shopper.lat, shopper.lng] : null,
+        maxZoom
+      ]);
+      const previous = lastSelected;
+      lastSelected = selected;
+      if (frame !== fitted) {
+        fitted = frame;
+        fit(branches, shopper, maxZoom);
+        return;
+      }
+      const target = visible.find((branch) => branch.id === selected);
+      if (target && selected !== previous) {
+        map.panTo(target.coordinates);
+      }
+    },
+    locate(location) {
+      map.panTo(location);
+    },
+    destroy() {
+      fitListener?.remove();
+      clear();
+      maps.event.clearInstanceListeners(map);
+      element.replaceChildren();
+    }
+  };
+}
+export {
+  createMap
+};
+//# sourceMappingURL=runtime.js.map

package/dist/branch-map/runtime.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/branch-map/runtime.ts"],
+  "sourcesContent": ["import type { Branch } from \"@zappie/sdk\";\nimport {\n  branchBounds,\n  validCoordinates,\n  visibleBranches,\n  type Coordinates,\n} from \"./geometry\";\nimport { loadMaps } from \"./loader\";\n\n/** Padding around fitted branches, and around branches plus the shopper. */\nconst BRANCH_PADDING = 32;\nconst SHOPPER_PADDING = 88;\n\nexport type MapUpdateOptions = {\n  maxZoom: number;\n  pinImageUrl: string | undefined;\n  mapTypeControl: boolean;\n  pinLabel?: \"selected\" | \"all\" | undefined;\n};\n\ntype PinOptions = {\n  label: string;\n  selected: boolean;\n  imageUrl?: string | undefined;\n  /** Text shown above the pin. */\n  caption?: string | undefined;\n  onClick?: () => void;\n};\n\nexport async function createMap(\n  element: HTMLElement,\n  key: string,\n  signal: AbortSignal,\n  options: { mapTypeControl: boolean },\n) {\n  const maps = await loadMaps(key);\n  signal.throwIfAborted();\n  const map = new maps.Map(element, {\n    center: { lat: 0, lng: 0 },\n    zoom: 12,\n    mapTypeControl: options.mapTypeControl,\n    streetViewControl: false,\n  });\n  let pins: google.maps.OverlayView[] = [];\n  let fitListener: google.maps.MapsEventListener | undefined;\n  let fitted: string | undefined;\n  let lastSelected: string | undefined;\n  class Pin extends maps.OverlayView {\n    private button: HTMLButtonElement;\n    private caption: HTMLElement | undefined;\n    constructor(\n      private position: Coordinates,\n      pin: PinOptions,\n    ) {\n      super();\n      const { label, selected, imageUrl } = pin;\n      const size = imageUrl\n        ? `${selected ? 40 : 32}px`\n        : \"var(--branch-map-pin-size,24px)\";\n      this.button = document.createElement(\"button\");\n      this.button.type = \"button\";\n      this.button.setAttribute(\"aria-label\", label);\n      this.button.setAttribute(\"aria-pressed\", String(selected));\n      this.button.dataset.selected = String(selected);\n      this.button.dataset.branchMapPin = \"\";\n      this.button.style.cssText = imageUrl\n        ? `position:absolute;transform:translate(-50%,-100%);width:${size};height:${size};padding:0;border-radius:50%;overflow:hidden;border:2px solid white;background:white;box-shadow:${selected ? \"0 2px 6px rgb(0 0 0 / 35%)\" : \"0 1px 3px rgb(0 0 0 / 25%)\"};cursor:pointer`\n        : `position:absolute;transform:translate(-50%,-100%);width:${size};height:${size};border-radius:50%;border:2px solid var(--branch-map-pin-border,currentColor);background:var(${selected ? \"--branch-map-pin-selected\" : \"--branch-map-pin\"},currentColor);cursor:pointer`;\n      if (imageUrl) {\n        const image = document.createElement(\"img\");\n        image.alt = \"\";\n        image.decoding = \"async\";\n        image.style.cssText =\n          \"display:block;width:100%;height:100%;object-fit:cover\";\n        image.src = imageUrl;\n        this.button.appendChild(image);\n      }\n      if (pin.caption) {\n        // The button already carries the name, so the caption is visual only.\n        this.caption = document.createElement(\"span\");\n        this.caption.textContent = pin.caption;\n        this.caption.setAttribute(\"aria-hidden\", \"true\");\n        this.caption.dataset.branchMapPinLabel = \"\";\n        this.caption.dataset.selected = String(selected);\n        this.caption.style.cssText = `position:absolute;transform:translate(-50%,calc(-100% - ${size} - 4px));white-space:nowrap;pointer-events:none;padding:2px 8px;border-radius:4px;font-size:12px;line-height:16px;font-weight:500;background:var(--branch-map-label-background,white);color:var(--branch-map-label-color,#111);border:1px solid var(--branch-map-label-border,transparent);box-shadow:0 1px 3px rgb(0 0 0 / 20%)`;\n      }\n      this.button.onclick = pin.onClick ?? null;\n    }\n    onAdd() {\n      const pane = this.getPanes()?.overlayMouseTarget;\n      pane?.appendChild(this.button);\n      if (this.caption) {\n        pane?.appendChild(this.caption);\n      }\n      maps.OverlayView.preventMapHitsAndGesturesFrom(this.button);\n    }\n    draw() {\n      const point = this.getProjection().fromLatLngToDivPixel(\n        new maps.LatLng(this.position),\n      );\n      if (point) {\n        for (const node of [this.button, this.caption]) {\n          if (node) {\n            node.style.left = `${point.x}px`;\n            node.style.top = `${point.y}px`;\n          }\n        }\n      }\n    }\n    onRemove() {\n      this.button.remove();\n      this.caption?.remove();\n      this.button.onclick = null;\n    }\n  }\n  const clear = () => {\n    pins.forEach((pin) => pin.setMap(null));\n    pins = [];\n  };\n  const fit = (\n    branches: Branch[],\n    location: Coordinates | undefined,\n    maxZoom: number,\n  ) => {\n    fitListener?.remove();\n    fitListener = undefined;\n    const bounds = branchBounds(branches, location);\n    if (!bounds) {\n      return;\n    }\n    map.fitBounds(bounds, location ? SHOPPER_PADDING : BRANCH_PADDING);\n    fitListener = maps.event.addListenerOnce(map, \"idle\", () => {\n      fitListener = undefined;\n      const zoom = map.getZoom();\n      if (typeof zoom === \"number\" && zoom > maxZoom) {\n        map.setZoom(maxZoom);\n      }\n    });\n  };\n  return {\n    update(\n      branches: Branch[],\n      selected: string | undefined,\n      onSelect: (branch: Branch) => void,\n      location?: Coordinates,\n      options?: MapUpdateOptions,\n    ) {\n      clear();\n      map.setOptions({ mapTypeControl: options?.mapTypeControl ?? false });\n      const visible = visibleBranches(branches);\n      for (const branch of visible) {\n        const isSelected = branch.id === selected;\n        const pin = new Pin(branch.coordinates, {\n          label: branch.name,\n          selected: isSelected,\n          imageUrl: options?.pinImageUrl,\n          caption:\n            options?.pinLabel === \"all\" ||\n            (options?.pinLabel === \"selected\" && isSelected)\n              ? branch.name\n              : undefined,\n          onClick: () => onSelect(branch),\n        });\n        pin.setMap(map);\n        pins.push(pin);\n      }\n      const shopper = validCoordinates(location) ? location : undefined;\n      if (shopper) {\n        const pin = new Pin(shopper, {\n          label: \"Your location\",\n          selected: false,\n        });\n        pin.setMap(map);\n        pins.push(pin);\n      }\n      const maxZoom = options?.maxZoom ?? 14;\n      // Refit only when what the map frames changes. A new selection pans instead.\n      const frame = JSON.stringify([\n        visible.map(({ coordinates }) => [coordinates.lat, coordinates.lng]),\n        shopper ? [shopper.lat, shopper.lng] : null,\n        maxZoom,\n      ]);\n      const previous = lastSelected;\n      lastSelected = selected;\n      if (frame !== fitted) {\n        fitted = frame;\n        fit(branches, shopper, maxZoom);\n        return;\n      }\n      const target = visible.find((branch) => branch.id === selected);\n      if (target && selected !== previous) {\n        map.panTo(target.coordinates);\n      }\n    },\n    locate(location: Coordinates) {\n      map.panTo(location);\n    },\n    destroy() {\n      fitListener?.remove();\n      clear();\n      maps.event.clearInstanceListeners(map);\n      element.replaceChildren();\n    },\n  };\n}\n"],
+  "mappings": "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",
+  "names": ["options"]
+}

package/dist/deferred/index.js

@@ -0,0 +1,111 @@
+"use client";
+
+// src/deferred/index.tsx
+import {
+  Fragment,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+function component(value) {
+  if (typeof value === "object" && value !== null && "default" in value && !("$$typeof" in value)) {
+    return value.default;
+  }
+  return value;
+}
+var ignore = () => {
+};
+function deferred(load) {
+  let loaded;
+  let pending;
+  const preload = () => {
+    if (loaded) {
+      return Promise.resolve(loaded);
+    }
+    if (!pending) {
+      const attempt = new Promise((resolve) => resolve(load())).then(
+        (value) => {
+          loaded = component(value);
+          return loaded;
+        },
+        (error) => {
+          if (pending === attempt) {
+            pending = void 0;
+          }
+          throw error;
+        }
+      );
+      attempt.catch(ignore);
+      pending = attempt;
+    }
+    return pending;
+  };
+  const preloadWhenIdle = (options = {}) => {
+    if (typeof window === "undefined" || loaded) {
+      return ignore;
+    }
+    const start = () => {
+      preload().catch(ignore);
+    };
+    if (typeof window.requestIdleCallback === "function") {
+      const handle2 = window.requestIdleCallback(
+        start,
+        options.timeout === void 0 ? void 0 : { timeout: options.timeout }
+      );
+      return () => window.cancelIdleCallback(handle2);
+    }
+    const handle = window.setTimeout(start, options.timeout ?? 1);
+    return () => window.clearTimeout(handle);
+  };
+  function DeferredComponent({ fallback = null, ...props }) {
+    const { open } = props;
+    const [ready, setReady] = useState(() => loaded);
+    const [opened, setOpened] = useState(open);
+    if (open && !opened) {
+      setOpened(true);
+    }
+    const Loaded = ready ?? loaded;
+    useEffect(() => {
+      if (!open || Loaded) {
+        return;
+      }
+      let active = true;
+      preload().then((value) => {
+        if (active) {
+          setReady(() => value);
+        }
+      }, ignore);
+      return () => {
+        active = false;
+      };
+    }, [open, Loaded]);
+    if (!(open || opened)) {
+      return null;
+    }
+    if (!Loaded) {
+      return open ? /* @__PURE__ */ jsx(Fragment, { children: fallback }) : null;
+    }
+    return /* @__PURE__ */ jsx(Loaded, { ...props });
+  }
+  DeferredComponent.displayName = "Deferred";
+  return {
+    // The load resolved to the component typed by T.
+    preload,
+    preloadWhenIdle,
+    Component: DeferredComponent
+  };
+}
+function useIntentPreload(target) {
+  return useMemo(() => {
+    const start = () => {
+      target.preload().catch(ignore);
+    };
+    return { onPointerEnter: start, onPointerDown: start, onFocus: start };
+  }, [target]);
+}
+export {
+  deferred,
+  useIntentPreload
+};
+//# sourceMappingURL=index.js.map

package/dist/deferred/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/deferred/index.tsx"],
+  "sourcesContent": ["\"use client\";\nimport {\n  Fragment,\n  useEffect,\n  useMemo,\n  useState,\n  type ComponentType,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\n/** Props for a deferred component: its own props plus `open`, which the helper reads and passes on. */\nexport type DeferredProps<P> = Omit<P, \"open\"> & {\n  /**\n   * Load the code if needed and render the component. Before the first open\n   * it renders nothing; after it, the component stays mounted and receives\n   * `open`, so it can animate out and return focus when it closes.\n   */\n  open: boolean;\n  /** Shown while `open` is true and the code is still loading, for inline parts that should hold their place. */\n  fallback?: ReactNode;\n};\n\n/** Options for `preloadWhenIdle`. */\nexport type DeferredIdleOptions = {\n  /** Start the load after this many milliseconds even if the browser never goes idle. */\n  timeout?: number;\n};\n\n/**\n * A component whose code loads on demand and renders without suspending.\n * Create it once at module scope with `deferred()`.\n */\nexport type Deferred<P> = {\n  /**\n   * Start loading the code. Repeated calls share one load. A failed load is\n   * forgotten, so the next call tries again.\n   * @returns The loaded component, or the load error.\n   */\n  preload(): Promise<ComponentType<P>>;\n  /**\n   * Load the code once the browser is idle. Use it only for small chunks.\n   * Does nothing on the server.\n   * @returns A function that cancels the scheduled load.\n   */\n  preloadWhenIdle(options?: DeferredIdleOptions): () => void;\n  /**\n   * Renders nothing until `open` is first true and the code is in. When\n   * `open` turns true it loads the code and renders as soon as it arrives. It\n   * never suspends. After the first open the component stays mounted and\n   * every prop passes through, `open` included, so it can run its own exit.\n   */\n  Component: (props: DeferredProps<P>) => ReactElement | null;\n};\n\n/** Event handlers that start loading a deferred component when a shopper reaches for its trigger. */\nexport type IntentPreloadHandlers = {\n  onPointerEnter: () => void;\n  onPointerDown: () => void;\n  onFocus: () => void;\n};\n\n/** What a deferred load resolves to: a component, or a module whose default export is one. */\nexport type DeferredModule =\n  ComponentType<never> | { default: ComponentType<never> };\n\n/** The props of the component a deferred load resolves to. */\nexport type DeferredModuleProps<T> = T extends {\n  default: ComponentType<infer P>;\n}\n  ? P\n  : T extends ComponentType<infer P>\n    ? P\n    : never;\n\ntype AnyComponent = ComponentType<Record<string, unknown>>;\n\nfunction component(value: DeferredModule): AnyComponent {\n  if (\n    typeof value === \"object\" &&\n    value !== null &&\n    \"default\" in value &&\n    !(\"$$typeof\" in value)\n  ) {\n    return value.default as AnyComponent;\n  }\n  return value as AnyComponent;\n}\n\nconst ignore = () => {};\n\n/**\n * Load a component's code on demand without `React.lazy` or `<Suspense>`.\n * React holds a suspended boundary's first reveal for about 300 ms, so a\n * lazy overlay opens late. A deferred one renders on the frame its code\n * arrives. Pass a module whose default export is the component, or resolve\n * to the component itself.\n *\n * @example\n * const Bag = deferred(() => import(\"./bag-sheet\"));\n * const Finder = deferred(() => import(\"./finder\").then((m) => m.Finder));\n * <Bag.Component open={open} onClose={close} />\n */\nexport function deferred<T extends DeferredModule>(\n  load: () => Promise<T>,\n): Deferred<DeferredModuleProps<T>> {\n  type P = DeferredModuleProps<T>;\n  let loaded: AnyComponent | undefined;\n  let pending: Promise<AnyComponent> | undefined;\n\n  const preload = (): Promise<AnyComponent> => {\n    if (loaded) {\n      return Promise.resolve(loaded);\n    }\n    if (!pending) {\n      // Starts the import now; a load that throws becomes a rejection.\n      const attempt = new Promise<T>((resolve) => resolve(load())).then(\n        (value) => {\n          loaded = component(value);\n          return loaded;\n        },\n        (error: unknown) => {\n          // Forget the failure so the next open or preload tries again.\n          if (pending === attempt) {\n            pending = undefined;\n          }\n          throw error;\n        },\n      );\n      // Callers may ignore the promise; the component reports nothing either.\n      attempt.catch(ignore);\n      pending = attempt;\n    }\n    return pending;\n  };\n\n  const preloadWhenIdle = (options: DeferredIdleOptions = {}) => {\n    if (typeof window === \"undefined\" || loaded) {\n      return ignore;\n    }\n    const start = () => {\n      preload().catch(ignore);\n    };\n    if (typeof window.requestIdleCallback === \"function\") {\n      const handle = window.requestIdleCallback(\n        start,\n        options.timeout === undefined\n          ? undefined\n          : { timeout: options.timeout },\n      );\n      return () => window.cancelIdleCallback(handle);\n    }\n    const handle = window.setTimeout(start, options.timeout ?? 1);\n    return () => window.clearTimeout(handle);\n  };\n\n  function DeferredComponent({ fallback = null, ...props }: DeferredProps<P>) {\n    const { open } = props;\n    const [ready, setReady] = useState<AnyComponent | undefined>(() => loaded);\n    const [opened, setOpened] = useState<boolean>(open);\n    if (open && !opened) {\n      setOpened(true);\n    }\n    const Loaded = ready ?? loaded;\n    useEffect(() => {\n      if (!open || Loaded) {\n        return;\n      }\n      let active = true;\n      preload().then((value) => {\n        if (active) {\n          setReady(() => value);\n        }\n      }, ignore);\n      return () => {\n        active = false;\n      };\n    }, [open, Loaded]);\n    if (!(open || opened)) {\n      return null;\n    }\n    if (!Loaded) {\n      return open ? <Fragment>{fallback}</Fragment> : null;\n    }\n    return <Loaded {...(props as Record<string, unknown>)} />;\n  }\n  DeferredComponent.displayName = \"Deferred\";\n\n  return {\n    // The load resolved to the component typed by T.\n    preload: preload as () => Promise<ComponentType<P>>,\n    preloadWhenIdle,\n    Component: DeferredComponent,\n  };\n}\n\n/**\n * Start loading a deferred component when the shopper points at, presses or\n * focuses its trigger, so the code is usually in by the click. Spread the\n * result on the trigger.\n *\n * @example\n * const intent = useIntentPreload(Bag);\n * <button {...intent} onClick={openBag}>Bag</button>\n */\nexport function useIntentPreload(target: {\n  preload(): Promise<unknown>;\n}): IntentPreloadHandlers {\n  return useMemo(() => {\n    const start = () => {\n      target.preload().catch(ignore);\n    };\n    return { onPointerEnter: start, onPointerDown: start, onFocus: start };\n  }, [target]);\n}\n"],
+  "mappings": ";;;AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;AA6Ka;AAzGpB,SAAS,UAAU,OAAqC;AACtD,MACE,OAAO,UAAU,YACjB,UAAU,QACV,aAAa,SACb,EAAE,cAAc,QAChB;AACA,WAAO,MAAM;AAAA,EACf;AACA,SAAO;AACT;AAEA,IAAM,SAAS,MAAM;AAAC;AAcf,SAAS,SACd,MACkC;AAElC,MAAI;AACJ,MAAI;AAEJ,QAAM,UAAU,MAA6B;AAC3C,QAAI,QAAQ;AACV,aAAO,QAAQ,QAAQ,MAAM;AAAA,IAC/B;AACA,QAAI,CAAC,SAAS;AAEZ,YAAM,UAAU,IAAI,QAAW,CAAC,YAAY,QAAQ,KAAK,CAAC,CAAC,EAAE;AAAA,QAC3D,CAAC,UAAU;AACT,mBAAS,UAAU,KAAK;AACxB,iBAAO;AAAA,QACT;AAAA,QACA,CAAC,UAAmB;AAElB,cAAI,YAAY,SAAS;AACvB,sBAAU;AAAA,UACZ;AACA,gBAAM;AAAA,QACR;AAAA,MACF;AAEA,cAAQ,MAAM,MAAM;AACpB,gBAAU;AAAA,IACZ;AACA,WAAO;AAAA,EACT;AAEA,QAAM,kBAAkB,CAAC,UAA+B,CAAC,MAAM;AAC7D,QAAI,OAAO,WAAW,eAAe,QAAQ;AAC3C,aAAO;AAAA,IACT;AACA,UAAM,QAAQ,MAAM;AAClB,cAAQ,EAAE,MAAM,MAAM;AAAA,IACxB;AACA,QAAI,OAAO,OAAO,wBAAwB,YAAY;AACpD,YAAMA,UAAS,OAAO;AAAA,QACpB;AAAA,QACA,QAAQ,YAAY,SAChB,SACA,EAAE,SAAS,QAAQ,QAAQ;AAAA,MACjC;AACA,aAAO,MAAM,OAAO,mBAAmBA,OAAM;AAAA,IAC/C;AACA,UAAM,SAAS,OAAO,WAAW,OAAO,QAAQ,WAAW,CAAC;AAC5D,WAAO,MAAM,OAAO,aAAa,MAAM;AAAA,EACzC;AAEA,WAAS,kBAAkB,EAAE,WAAW,MAAM,GAAG,MAAM,GAAqB;AAC1E,UAAM,EAAE,KAAK,IAAI;AACjB,UAAM,CAAC,OAAO,QAAQ,IAAI,SAAmC,MAAM,MAAM;AACzE,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAkB,IAAI;AAClD,QAAI,QAAQ,CAAC,QAAQ;AACnB,gBAAU,IAAI;AAAA,IAChB;AACA,UAAM,SAAS,SAAS;AACxB,cAAU,MAAM;AACd,UAAI,CAAC,QAAQ,QAAQ;AACnB;AAAA,MACF;AACA,UAAI,SAAS;AACb,cAAQ,EAAE,KAAK,CAAC,UAAU;AACxB,YAAI,QAAQ;AACV,mBAAS,MAAM,KAAK;AAAA,QACtB;AAAA,MACF,GAAG,MAAM;AACT,aAAO,MAAM;AACX,iBAAS;AAAA,MACX;AAAA,IACF,GAAG,CAAC,MAAM,MAAM,CAAC;AACjB,QAAI,EAAE,QAAQ,SAAS;AACrB,aAAO;AAAA,IACT;AACA,QAAI,CAAC,QAAQ;AACX,aAAO,OAAO,oBAAC,YAAU,oBAAS,IAAc;AAAA,IAClD;AACA,WAAO,oBAAC,UAAQ,GAAI,OAAmC;AAAA,EACzD;AACA,oBAAkB,cAAc;AAEhC,SAAO;AAAA;AAAA,IAEL;AAAA,IACA;AAAA,IACA,WAAW;AAAA,EACb;AACF;AAWO,SAAS,iBAAiB,QAEP;AACxB,SAAO,QAAQ,MAAM;AACnB,UAAM,QAAQ,MAAM;AAClB,aAAO,QAAQ,EAAE,MAAM,MAAM;AAAA,IAC/B;AACA,WAAO,EAAE,gBAAgB,OAAO,eAAe,OAAO,SAAS,MAAM;AAAA,EACvE,GAAG,CAAC,MAAM,CAAC;AACb;",
+  "names": ["handle"]
+}

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
-import { KeyboardEvent as KeyboardEvent$1, ImgHTMLAttributes, ChangeEvent, ClipboardEvent } from 'react';
-import * as _zappie_sdk from '@zappie/sdk';
-import { CartLine, CartLineInput, CartIssue, CartFix, Quote, DeliveryAddress, Branch as Branch$1, MenuSchedule, CartFulfilment, OptionGroup as OptionGroup$1, Item, Money as Money$1, Choice as Choice$1, MoneyFormatOptions, PaymentMethodKind, Category, Menu, OpeningTime } from '@zappie/sdk';
+import { HTMLAttributes, ReactNode, ComponentType, ReactElement, KeyboardEvent as KeyboardEvent$1, ImgHTMLAttributes, ChangeEvent, ClipboardEvent } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as _zappie_sdk from '@zappie/sdk';
+import { Branch as Branch$1, CartLine, CartLineInput, CartIssue, CartFix, Quote, DeliveryAddress, MenuSchedule, CartFulfilment, OptionGroup as OptionGroup$1, Item, Money as Money$1, Choice as Choice$1, MoneyFormatOptions, PaymentMethodKind, Category, Menu, OpeningTime } from '@zappie/sdk';
 import { useCart } from '@zappie/sdk/react';
 import { P as PartProps, a as Presentation, S as SwipeDirection } from './engine-XTsgCwwe.js';
 import { C as CloseOptions, O as OverlayQuery } from './history-Bqu12Vkz.js';
@@ -63,6 +63,52 @@ declare const Account: {
     } & react.RefAttributes<HTMLElement>>;
 };
 
+type Coordinates = {
+    lat: number;
+    lng: number;
+};
+
+/** What a template gets to render when the map fails to load. */
+type BranchMapLoadErrorState = {
+    /** Why the map failed to load. */
+    error: unknown;
+    /** Load the map again. */
+    retry: () => void;
+};
+/** Branches, selection and optional shopper coordinates for BranchMap. */
+type BranchMapProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    branches: Branch$1[];
+    selectedBranchId?: string;
+    onSelect: (branch: Branch$1) => void;
+    /** The shopper's coordinates. The map fits them with the branches. */
+    shopperLocation?: Coordinates;
+    browserKey?: string;
+    /**
+     * Highest zoom applied after fitting. Defaults to 15 when a shopper location
+     * is shown and 14 otherwise.
+     */
+    maxZoom?: number;
+    /** Image shown inside each branch pin. */
+    pinImageUrl?: string;
+    /** Show the map and satellite switch. Defaults to false. */
+    mapTypeControl?: boolean;
+    /** Show the branch name above the selected pin, or above every pin. Off by default. */
+    pinLabel?: "selected" | "all";
+    /** Called each time the map fails to load. */
+    onLoadError?: (error: unknown) => void;
+    /**
+     * Render your own message when the map fails to load, such as a retry
+     * button that calls `retry`. Without it the map shows "Map location unavailable".
+     */
+    renderLoadError?: (state: BranchMapLoadErrorState) => ReactNode;
+};
+/**
+ * Show branch locations. Maps loads after mount when you supply a browser key.
+ * Set the container height with CSS. Style pins with --branch-map-pin,
+ * --branch-map-pin-selected, --branch-map-pin-border and --branch-map-pin-size.
+ */
+declare function BranchMap({ branches, selectedBranchId, onSelect, shopperLocation, browserKey, maxZoom, pinImageUrl, mapTypeControl, pinLabel, onLoadError, renderLoadError, ...props }: BranchMapProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * The current quantity, bounds, step, disabled state and value setter exposed by a quantity control.
  */
@@ -174,6 +220,87 @@ declare const Totals: react.ForwardRefExoticComponent<Omit<react.AllHTMLAttribut
     children?: react.ReactNode | ((state: TotalsState) => react.ReactNode);
 } & react.RefAttributes<HTMLElement>>;
 
+/** Props for a deferred component: its own props plus `open`, which the helper reads and passes on. */
+type DeferredProps<P> = Omit<P, "open"> & {
+    /**
+     * Load the code if needed and render the component. Before the first open
+     * it renders nothing; after it, the component stays mounted and receives
+     * `open`, so it can animate out and return focus when it closes.
+     */
+    open: boolean;
+    /** Shown while `open` is true and the code is still loading, for inline parts that should hold their place. */
+    fallback?: ReactNode;
+};
+/** Options for `preloadWhenIdle`. */
+type DeferredIdleOptions = {
+    /** Start the load after this many milliseconds even if the browser never goes idle. */
+    timeout?: number;
+};
+/**
+ * A component whose code loads on demand and renders without suspending.
+ * Create it once at module scope with `deferred()`.
+ */
+type Deferred<P> = {
+    /**
+     * Start loading the code. Repeated calls share one load. A failed load is
+     * forgotten, so the next call tries again.
+     * @returns The loaded component, or the load error.
+     */
+    preload(): Promise<ComponentType<P>>;
+    /**
+     * Load the code once the browser is idle. Use it only for small chunks.
+     * Does nothing on the server.
+     * @returns A function that cancels the scheduled load.
+     */
+    preloadWhenIdle(options?: DeferredIdleOptions): () => void;
+    /**
+     * Renders nothing until `open` is first true and the code is in. When
+     * `open` turns true it loads the code and renders as soon as it arrives. It
+     * never suspends. After the first open the component stays mounted and
+     * every prop passes through, `open` included, so it can run its own exit.
+     */
+    Component: (props: DeferredProps<P>) => ReactElement | null;
+};
+/** Event handlers that start loading a deferred component when a shopper reaches for its trigger. */
+type IntentPreloadHandlers = {
+    onPointerEnter: () => void;
+    onPointerDown: () => void;
+    onFocus: () => void;
+};
+/** What a deferred load resolves to: a component, or a module whose default export is one. */
+type DeferredModule = ComponentType<never> | {
+    default: ComponentType<never>;
+};
+/** The props of the component a deferred load resolves to. */
+type DeferredModuleProps<T> = T extends {
+    default: ComponentType<infer P>;
+} ? P : T extends ComponentType<infer P> ? P : never;
+/**
+ * Load a component's code on demand without `React.lazy` or `<Suspense>`.
+ * React holds a suspended boundary's first reveal for about 300 ms, so a
+ * lazy overlay opens late. A deferred one renders on the frame its code
+ * arrives. Pass a module whose default export is the component, or resolve
+ * to the component itself.
+ *
+ * @example
+ * const Bag = deferred(() => import("./bag-sheet"));
+ * const Finder = deferred(() => import("./finder").then((m) => m.Finder));
+ * <Bag.Component open={open} onClose={close} />
+ */
+declare function deferred<T extends DeferredModule>(load: () => Promise<T>): Deferred<DeferredModuleProps<T>>;
+/**
+ * Start loading a deferred component when the shopper points at, presses or
+ * focuses its trigger, so the code is usually in by the click. Spread the
+ * result on the trigger.
+ *
+ * @example
+ * const intent = useIntentPreload(Bag);
+ * <button {...intent} onClick={openBag}>Bag</button>
+ */
+declare function useIntentPreload(target: {
+    preload(): Promise<unknown>;
+}): IntentPreloadHandlers;
+
 declare function useCombobox<T>(results: readonly T[], onSelect: (item: T) => void): {
     setListId: react.Dispatch<react.SetStateAction<string>>;
     registerOption: (index: number, id: string) => void;
@@ -396,6 +523,17 @@ type ItemFormContext = {
     value: CartLineInput;
     setValue: (value: CartLineInput) => void;
 };
+/**
+ * An option group that failed validation when the shopper tried to add, with its element and issues.
+ */
+type ItemFormInvalidGroup = {
+    groupId: string;
+    /** The item's option group, or undefined for a group the template rendered from its own model. */
+    group: ActiveGroup | undefined;
+    /** The group's rendered element, or undefined when the group is not on screen. */
+    element: HTMLElement | undefined;
+    issues: CartIssue[];
+};
 /**
  * Item form configuration with controlled or default selections and cart commit callbacks.
  * Supply onCommit to update an existing line instead of adding a new one.
@@ -409,8 +547,15 @@ type ItemFormProps = PartProps<ItemFormContext> & {
     onAdded?: (line: CartLine) => void;
     /** Update an existing line through the same validation and focus workflow. */
     onCommit?: (input: CartLineInput) => CartLine;
-};
-declare function Root$3({ item, value, defaultValue, onValueChange, defaultQuantity, onAdded, onCommit, ...props }: ItemFormProps): react_jsx_runtime.JSX.Element;
+    /**
+     * Called when an add fails validation, after the first invalid group gets
+     * focus without scrolling. Groups are in display order. Scroll to
+     * `groups[0].element` yourself, for example smoothly. The list is empty
+     * when no issue belongs to a group.
+     */
+    onInvalid?: (groups: ItemFormInvalidGroup[]) => void;
+};
+declare function Root$3({ item, value, defaultValue, onValueChange, defaultQuantity, onAdded, onCommit, onInvalid, ...props }: ItemFormProps): react_jsx_runtime.JSX.Element;
 
 type GroupState = {
     group: OptionGroup$1;
@@ -805,4 +950,4 @@ declare const OpenStatus: react.ForwardRefExoticComponent<Omit<react.AllHTMLAttr
 /** The installed @zappie/foundations version. */
 declare const FOUNDATIONS_VERSION: string;
 
-export { Account, AccountNotConfiguredError, type ActiveGroup, Address, type AddressState, type AddressSuggestion, Branch, Cart, Choice, type Customer, FOUNDATIONS_VERSION, Fulfilment, Image, type ImageProps, ItemForm, type ItemFormContext, type ItemFormProps, Money, OpenStatus, OptionGroup, Otp, Overlay, PartProps, type PaymentMethod, PaymentMethods, Quantity, type QuantityProps, type QuantityState, Schedule, type ScheduleSlot, type ScheduleState, Search, type SearchResult, type SearchSource, type SearchState, type SignInOptions, Totals, type TotalsState, createSearchIndex, formatOpeningHours, formatWallClock, getOpenStatus, parseWallClock, scheduleSlots, useControllableState, useOverlay };
+export { Account, AccountNotConfiguredError, type ActiveGroup, Address, type AddressState, type AddressSuggestion, Branch, BranchMap, type BranchMapLoadErrorState, type BranchMapProps, Cart, Choice, type Customer, type Deferred, type DeferredIdleOptions, type DeferredProps, FOUNDATIONS_VERSION, Fulfilment, Image, type ImageProps, type IntentPreloadHandlers, ItemForm, type ItemFormContext, type ItemFormInvalidGroup, type ItemFormProps, Money, OpenStatus, OptionGroup, Otp, Overlay, PartProps, type PaymentMethod, PaymentMethods, Quantity, type QuantityProps, type QuantityState, Schedule, type ScheduleSlot, type ScheduleState, Search, type SearchResult, type SearchSource, type SearchState, type SignInOptions, Totals, type TotalsState, createSearchIndex, deferred, formatOpeningHours, formatWallClock, getOpenStatus, parseWallClock, scheduleSlots, useControllableState, useIntentPreload, useOverlay };

package/dist/index.js

@@ -3,7 +3,9 @@
 // src/index.ts
 import { PACKAGE_VERSION } from "./version.js";
 import { Account, AccountNotConfiguredError } from "./account/index.js";
+import { BranchMap } from "./branch-map/index.js";
 import { Cart, Totals } from "./cart/index.js";
+import { deferred, useIntentPreload } from "./deferred/index.js";
 import { Address } from "./fulfilment/address-picker.js";
 import { Branch } from "./fulfilment/branch-picker.js";
 import { Schedule, scheduleSlots } from "./fulfilment/schedule.js";
@@ -29,6 +31,7 @@ export {
   AccountNotConfiguredError,
   Address,
   Branch,
+  BranchMap,
   Cart,
   FOUNDATIONS_VERSION,
   Fulfilment,
@@ -42,12 +45,14 @@ export {
   Search,
   Totals,
   createSearchIndex,
+  deferred,
   formatOpeningHours,
   formatWallClock,
   getOpenStatus,
   parseWallClock,
   scheduleSlots,
   useControllableState,
+  useIntentPreload,
   useOverlay
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/index.ts"],
-  "sourcesContent": ["\"use client\";\nimport { PACKAGE_VERSION } from \"./version\";\n\n/** The installed @zappie/foundations version. */\nexport const FOUNDATIONS_VERSION: string = PACKAGE_VERSION;\nexport { Account, AccountNotConfiguredError } from \"./account\";\nexport type { Customer, SignInOptions } from \"./account\";\nexport { Cart, Totals } from \"./cart\";\nexport type { TotalsState } from \"./cart\";\nexport { Address } from \"./fulfilment/address-picker\";\nexport type {\n  AddressState,\n  AddressSuggestion,\n} from \"./fulfilment/address-picker\";\nexport { Branch } from \"./fulfilment/branch-picker\";\nexport { Schedule, scheduleSlots } from \"./fulfilment/schedule\";\nexport type { ScheduleSlot, ScheduleState } from \"./fulfilment/schedule\";\nexport { Fulfilment } from \"./fulfilment/switch\";\nexport type { PartProps } from \"./internal/slot\";\nexport { useControllableState } from \"./internal/use-controllable-state\";\nexport * from \"./item-form\";\nexport { Image } from \"./media/image\";\nexport type { ImageProps } from \"./media/image\";\nexport { Money } from \"./money\";\nexport { Otp } from \"./otp/input\";\nexport { Overlay, useOverlay } from \"./overlay/react\";\nexport { PaymentMethods } from \"./payment/methods\";\nexport type { PaymentMethod } from \"./payment/methods\";\nexport { createSearchIndex, Search } from \"./search\";\nexport type { SearchResult, SearchSource, SearchState } from \"./search\";\nexport {\n  formatOpeningHours,\n  formatWallClock,\n  getOpenStatus,\n  parseWallClock,\n} from \"./status/hours\";\nexport { OpenStatus } from \"./status/open-status\";\n"],
-  "mappings": ";;;AACA,SAAS,uBAAuB;AAIhC,SAAS,SAAS,iCAAiC;AAEnD,SAAS,MAAM,cAAc;AAE7B,SAAS,eAAe;AAKxB,SAAS,cAAc;AACvB,SAAS,UAAU,qBAAqB;AAExC,SAAS,kBAAkB;AAE3B,SAAS,4BAA4B;AACrC,cAAc;AACd,SAAS,aAAa;AAEtB,SAAS,aAAa;AACtB,SAAS,WAAW;AACpB,SAAS,SAAS,kBAAkB;AACpC,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB,cAAc;AAE1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAhCpB,IAAM,sBAA8B;",
+  "sourcesContent": ["\"use client\";\nimport { PACKAGE_VERSION } from \"./version\";\n\n/** The installed @zappie/foundations version. */\nexport const FOUNDATIONS_VERSION: string = PACKAGE_VERSION;\nexport { Account, AccountNotConfiguredError } from \"./account\";\nexport type { Customer, SignInOptions } from \"./account\";\nexport { BranchMap } from \"./branch-map\";\nexport type { BranchMapLoadErrorState, BranchMapProps } from \"./branch-map\";\nexport { Cart, Totals } from \"./cart\";\nexport type { TotalsState } from \"./cart\";\nexport { deferred, useIntentPreload } from \"./deferred\";\nexport type {\n  Deferred,\n  DeferredIdleOptions,\n  DeferredProps,\n  IntentPreloadHandlers,\n} from \"./deferred\";\nexport { Address } from \"./fulfilment/address-picker\";\nexport type {\n  AddressState,\n  AddressSuggestion,\n} from \"./fulfilment/address-picker\";\nexport { Branch } from \"./fulfilment/branch-picker\";\nexport { Schedule, scheduleSlots } from \"./fulfilment/schedule\";\nexport type { ScheduleSlot, ScheduleState } from \"./fulfilment/schedule\";\nexport { Fulfilment } from \"./fulfilment/switch\";\nexport type { PartProps } from \"./internal/slot\";\nexport { useControllableState } from \"./internal/use-controllable-state\";\nexport * from \"./item-form\";\nexport { Image } from \"./media/image\";\nexport type { ImageProps } from \"./media/image\";\nexport { Money } from \"./money\";\nexport { Otp } from \"./otp/input\";\nexport { Overlay, useOverlay } from \"./overlay/react\";\nexport { PaymentMethods } from \"./payment/methods\";\nexport type { PaymentMethod } from \"./payment/methods\";\nexport { createSearchIndex, Search } from \"./search\";\nexport type { SearchResult, SearchSource, SearchState } from \"./search\";\nexport {\n  formatOpeningHours,\n  formatWallClock,\n  getOpenStatus,\n  parseWallClock,\n} from \"./status/hours\";\nexport { OpenStatus } from \"./status/open-status\";\n"],
+  "mappings": ";;;AACA,SAAS,uBAAuB;AAIhC,SAAS,SAAS,iCAAiC;AAEnD,SAAS,iBAAiB;AAE1B,SAAS,MAAM,cAAc;AAE7B,SAAS,UAAU,wBAAwB;AAO3C,SAAS,eAAe;AAKxB,SAAS,cAAc;AACvB,SAAS,UAAU,qBAAqB;AAExC,SAAS,kBAAkB;AAE3B,SAAS,4BAA4B;AACrC,cAAc;AACd,SAAS,aAAa;AAEtB,SAAS,aAAa;AACtB,SAAS,WAAW;AACpB,SAAS,SAAS,kBAAkB;AACpC,SAAS,sBAAsB;AAE/B,SAAS,mBAAmB,cAAc;AAE1C;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,kBAAkB;AAzCpB,IAAM,sBAA8B;",
   "names": []
 }

package/dist/item-form/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/item-form/index.ts"],
-  "sourcesContent": ["import { Add, Options } from \"./options\";\nimport { Root } from \"./root\";\n/**\n * Composable item configuration parts for selecting options, validating a line and adding it to the cart.\n * Use ItemForm.Root within your ZappieProvider and place Options and Add inside it.\n */\nexport const ItemForm = { Root, Options, Add };\nexport { Choice, OptionGroup } from \"./option-group\";\nexport { Quantity } from \"./quantity\";\nexport type { QuantityProps, QuantityState } from \"./quantity\";\nexport type { ActiveGroup, ItemFormContext, ItemFormProps } from \"./root\";\n"],
+  "sourcesContent": ["import { Add, Options } from \"./options\";\nimport { Root } from \"./root\";\n/**\n * Composable item configuration parts for selecting options, validating a line and adding it to the cart.\n * Use ItemForm.Root within your ZappieProvider and place Options and Add inside it.\n */\nexport const ItemForm = { Root, Options, Add };\nexport { Choice, OptionGroup } from \"./option-group\";\nexport { Quantity } from \"./quantity\";\nexport type { QuantityProps, QuantityState } from \"./quantity\";\nexport type {\n  ActiveGroup,\n  ItemFormContext,\n  ItemFormInvalidGroup,\n  ItemFormProps,\n} from \"./root\";\n"],
   "mappings": ";AAAA,SAAS,KAAK,eAAe;AAC7B,SAAS,YAAY;AAMrB,SAAS,QAAQ,mBAAmB;AACpC,SAAS,gBAAgB;AAFlB,IAAM,WAAW,EAAE,MAAM,SAAS,IAAI;",
   "names": []
 }

package/dist/item-form/root.js

@@ -36,6 +36,7 @@ function Root({
   defaultQuantity,
   onAdded,
   onCommit,
+  onInvalid,
   ...props
 }) {
   const client = useZappie();
@@ -78,14 +79,30 @@ function Root({
     (quantity) => setValue({ ...normalized, quantity }),
     [setValue, normalized]
   );
-  const focusIssue = useCallback((errors) => {
-    for (const [groupId, element] of registry.current) {
-      if (errors.some((issue) => issue.groupId === groupId)) {
-        element.focus();
-        break;
-      }
-    }
-  }, []);
+  const focusIssue = useCallback(
+    (errors) => {
+      const issuesOf = (groupId) => errors.filter((issue) => issue.groupId === groupId);
+      const group = (groupId) => preview.groups.find((candidate) => candidate.id === groupId);
+      const rendered = [...registry.current].filter(([groupId]) => issuesOf(groupId).length > 0).map(([groupId, element]) => ({
+        groupId,
+        group: group(groupId),
+        element,
+        issues: issuesOf(groupId)
+      }));
+      const offscreen = preview.groups.filter(
+        (candidate) => !registry.current.has(candidate.id) && issuesOf(candidate.id).length > 0
+      ).map((candidate) => ({
+        groupId: candidate.id,
+        group: candidate,
+        element: void 0,
+        issues: issuesOf(candidate.id)
+      }));
+      const invalid = [...rendered, ...offscreen];
+      invalid[0]?.element?.focus({ preventScroll: true });
+      onInvalid?.(invalid);
+    },
+    [preview.groups, onInvalid]
+  );
   const add = useCallback(() => {
     const result = client.cart.validate(normalized);
     if (!result.ok) {

package/dist/item-form/root.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/item-form/root.tsx"],
-  "sourcesContent": ["\"use client\";\nimport {\n  previewItem,\n  ZappieCartError,\n  type CartIssue,\n  type CartLine,\n  type CartLineInput,\n  type Item,\n  type Money,\n  type OptionGroup,\n} from \"@zappie/sdk\";\nimport { useCartCatalogue, useZappie } from \"@zappie/sdk/react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { part, type PartProps } from \"../internal/slot\";\nimport { useControllableState } from \"../internal/use-controllable-state\";\n/**\n * An SDK option group with the effective rules exposed by the item preview.\n */\nexport type ActiveGroup = OptionGroup;\n/**\n * The current item selection, preview prices, validation issues and actions supplied to item form parts.\n */\nexport type ItemFormContext = {\n  item: Item;\n  groups: ActiveGroup[];\n  quantity: number;\n  setQuantity: (quantity: number) => void;\n  unitPrice: Money;\n  total: Money;\n  issues: CartIssue[];\n  canAdd: boolean;\n  add: () => CartLine | null;\n  status: \"incomplete\" | \"valid\" | \"added\";\n  value: CartLineInput;\n  setValue: (value: CartLineInput) => void;\n};\nexport const ItemFormStateContext = createContext<ItemFormContext | null>(null);\nexport function useItemForm() {\n  const value = useContext(ItemFormStateContext);\n  if (!value) {\n    throw new Error(\"ItemForm parts require ItemForm.Root\");\n  }\n  return value;\n}\nexport const GroupRegistry = createContext<Map<string, HTMLElement> | null>(\n  null,\n);\n/**\n * Item form configuration with controlled or default selections and cart commit callbacks.\n * Supply onCommit to update an existing line instead of adding a new one.\n */\nexport type ItemFormProps = PartProps<ItemFormContext> & {\n  item: Item;\n  value?: CartLineInput;\n  defaultValue?: Partial<CartLineInput>;\n  onValueChange?: (value: CartLineInput) => void;\n  defaultQuantity?: number;\n  onAdded?: (line: CartLine) => void;\n  /** Update an existing line through the same validation and focus workflow. */\n  onCommit?: (input: CartLineInput) => CartLine;\n};\nexport function Root({\n  item,\n  value,\n  defaultValue,\n  onValueChange,\n  defaultQuantity,\n  onAdded,\n  onCommit,\n  ...props\n}: ItemFormProps) {\n  const client = useZappie();\n  const menu = useCartCatalogue();\n  const [input, setInput] = useControllableState({\n    value,\n    defaultValue: {\n      ...defaultValue,\n      itemId: item.id,\n      quantity: defaultQuantity ?? defaultValue?.quantity ?? item.quantity.min,\n    },\n    onChange: onValueChange,\n  });\n  const registry = useRef(new Map<string, HTMLElement>());\n  const [added, setAdded] = useState(false);\n  // Errors show only after the shopper tries to add (PRD 05 5.3), then track live validation.\n  const [attempted, setAttempted] = useState(false);\n  const [failure, setFailure] = useState<CartIssue[] | null>(null);\n  const normalized = useMemo(\n    () => ({ ...input, itemId: item.id }),\n    [input, item.id],\n  );\n  const preview = useMemo(\n    () => previewItem(item, normalized),\n    [item, normalized],\n  );\n  const validation = useMemo(\n    () => client.cart.validate(normalized),\n    [client, normalized, menu],\n  );\n  const issues =\n    failure ?? (attempted && !validation.ok ? validation.issues : []);\n  const setValue = useCallback(\n    (next: CartLineInput) => {\n      setAdded(false);\n      setFailure(null);\n      setInput({ ...next, itemId: item.id });\n    },\n    [setInput, item.id],\n  );\n  const setQuantity = useCallback(\n    (quantity: number) => setValue({ ...normalized, quantity }),\n    [setValue, normalized],\n  );\n  const focusIssue = useCallback((errors: CartIssue[]) => {\n    for (const [groupId, element] of registry.current) {\n      if (errors.some((issue) => issue.groupId === groupId)) {\n        element.focus();\n        break;\n      }\n    }\n  }, []);\n  const add = useCallback(() => {\n    const result = client.cart.validate(normalized);\n    if (!result.ok) {\n      setAttempted(true);\n      setFailure(result.issues);\n      focusIssue(result.issues);\n      return null;\n    }\n    try {\n      const line = onCommit\n        ? onCommit(normalized)\n        : client.cart.add(item, normalized);\n      setAttempted(false);\n      setAdded(true);\n      onAdded?.(line);\n      return line;\n    } catch (error) {\n      if (error instanceof ZappieCartError) {\n        setAttempted(true);\n        setFailure([...error.issues]);\n        focusIssue([...error.issues]);\n        return null;\n      }\n      throw error;\n    }\n  }, [client, normalized, item, onAdded, onCommit, focusIssue]);\n  const context: ItemFormContext = useMemo(\n    () => ({\n      item,\n      ...preview,\n      quantity: normalized.quantity ?? item.quantity.min,\n      setQuantity,\n      issues,\n      canAdd: validation.ok && !failure,\n      add,\n      status: added ? \"added\" : validation.ok ? \"valid\" : \"incomplete\",\n      value: normalized,\n      setValue,\n    }),\n    [\n      item,\n      preview,\n      normalized,\n      setQuantity,\n      issues,\n      validation.ok,\n      failure,\n      add,\n      added,\n      setValue,\n    ],\n  );\n  return (\n    <ItemFormStateContext.Provider value={context}>\n      <GroupRegistry.Provider value={registry.current}>\n        {part(\"div\", props, context, {\n          \"data-zappie-item\": item.id,\n          \"data-state\": issues.length ? \"invalid\" : \"valid\",\n          \"data-sold-out\": item.isAvailable ? undefined : \"\",\n        })}\n      </GroupRegistry.Provider>\n    </ItemFormStateContext.Provider>\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["\"use client\";\nimport {\n  previewItem,\n  ZappieCartError,\n  type CartIssue,\n  type CartLine,\n  type CartLineInput,\n  type Item,\n  type Money,\n  type OptionGroup,\n} from \"@zappie/sdk\";\nimport { useCartCatalogue, useZappie } from \"@zappie/sdk/react\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport { part, type PartProps } from \"../internal/slot\";\nimport { useControllableState } from \"../internal/use-controllable-state\";\n/**\n * An SDK option group with the effective rules exposed by the item preview.\n */\nexport type ActiveGroup = OptionGroup;\n/**\n * The current item selection, preview prices, validation issues and actions supplied to item form parts.\n */\nexport type ItemFormContext = {\n  item: Item;\n  groups: ActiveGroup[];\n  quantity: number;\n  setQuantity: (quantity: number) => void;\n  unitPrice: Money;\n  total: Money;\n  issues: CartIssue[];\n  canAdd: boolean;\n  add: () => CartLine | null;\n  status: \"incomplete\" | \"valid\" | \"added\";\n  value: CartLineInput;\n  setValue: (value: CartLineInput) => void;\n};\nexport const ItemFormStateContext = createContext<ItemFormContext | null>(null);\nexport function useItemForm() {\n  const value = useContext(ItemFormStateContext);\n  if (!value) {\n    throw new Error(\"ItemForm parts require ItemForm.Root\");\n  }\n  return value;\n}\n/**\n * An option group that failed validation when the shopper tried to add, with its element and issues.\n */\nexport type ItemFormInvalidGroup = {\n  groupId: string;\n  /** The item's option group, or undefined for a group the template rendered from its own model. */\n  group: ActiveGroup | undefined;\n  /** The group's rendered element, or undefined when the group is not on screen. */\n  element: HTMLElement | undefined;\n  issues: CartIssue[];\n};\nexport const GroupRegistry = createContext<Map<string, HTMLElement> | null>(\n  null,\n);\n/**\n * Item form configuration with controlled or default selections and cart commit callbacks.\n * Supply onCommit to update an existing line instead of adding a new one.\n */\nexport type ItemFormProps = PartProps<ItemFormContext> & {\n  item: Item;\n  value?: CartLineInput;\n  defaultValue?: Partial<CartLineInput>;\n  onValueChange?: (value: CartLineInput) => void;\n  defaultQuantity?: number;\n  onAdded?: (line: CartLine) => void;\n  /** Update an existing line through the same validation and focus workflow. */\n  onCommit?: (input: CartLineInput) => CartLine;\n  /**\n   * Called when an add fails validation, after the first invalid group gets\n   * focus without scrolling. Groups are in display order. Scroll to\n   * `groups[0].element` yourself, for example smoothly. The list is empty\n   * when no issue belongs to a group.\n   */\n  onInvalid?: (groups: ItemFormInvalidGroup[]) => void;\n};\nexport function Root({\n  item,\n  value,\n  defaultValue,\n  onValueChange,\n  defaultQuantity,\n  onAdded,\n  onCommit,\n  onInvalid,\n  ...props\n}: ItemFormProps) {\n  const client = useZappie();\n  const menu = useCartCatalogue();\n  const [input, setInput] = useControllableState({\n    value,\n    defaultValue: {\n      ...defaultValue,\n      itemId: item.id,\n      quantity: defaultQuantity ?? defaultValue?.quantity ?? item.quantity.min,\n    },\n    onChange: onValueChange,\n  });\n  const registry = useRef(new Map<string, HTMLElement>());\n  const [added, setAdded] = useState(false);\n  // Errors show only after the shopper tries to add (PRD 05 5.3), then track live validation.\n  const [attempted, setAttempted] = useState(false);\n  const [failure, setFailure] = useState<CartIssue[] | null>(null);\n  const normalized = useMemo(\n    () => ({ ...input, itemId: item.id }),\n    [input, item.id],\n  );\n  const preview = useMemo(\n    () => previewItem(item, normalized),\n    [item, normalized],\n  );\n  const validation = useMemo(\n    () => client.cart.validate(normalized),\n    [client, normalized, menu],\n  );\n  const issues =\n    failure ?? (attempted && !validation.ok ? validation.issues : []);\n  const setValue = useCallback(\n    (next: CartLineInput) => {\n      setAdded(false);\n      setFailure(null);\n      setInput({ ...next, itemId: item.id });\n    },\n    [setInput, item.id],\n  );\n  const setQuantity = useCallback(\n    (quantity: number) => setValue({ ...normalized, quantity }),\n    [setValue, normalized],\n  );\n  const focusIssue = useCallback(\n    (errors: CartIssue[]) => {\n      const issuesOf = (groupId: string) =>\n        errors.filter((issue) => issue.groupId === groupId);\n      const group = (groupId: string) =>\n        preview.groups.find((candidate) => candidate.id === groupId);\n      // Rendered groups first, in the order they mounted, then any invalid group not on screen.\n      const rendered = [...registry.current]\n        .filter(([groupId]) => issuesOf(groupId).length > 0)\n        .map(([groupId, element]) => ({\n          groupId,\n          group: group(groupId),\n          element: element as HTMLElement | undefined,\n          issues: issuesOf(groupId),\n        }));\n      const offscreen = preview.groups\n        .filter(\n          (candidate) =>\n            !registry.current.has(candidate.id) &&\n            issuesOf(candidate.id).length > 0,\n        )\n        .map((candidate) => ({\n          groupId: candidate.id,\n          group: candidate,\n          element: undefined,\n          issues: issuesOf(candidate.id),\n        }));\n      const invalid = [...rendered, ...offscreen];\n      // Focus moves for keyboard and screen reader users; the template decides how to scroll.\n      invalid[0]?.element?.focus({ preventScroll: true });\n      onInvalid?.(invalid);\n    },\n    [preview.groups, onInvalid],\n  );\n  const add = useCallback(() => {\n    const result = client.cart.validate(normalized);\n    if (!result.ok) {\n      setAttempted(true);\n      setFailure(result.issues);\n      focusIssue(result.issues);\n      return null;\n    }\n    try {\n      const line = onCommit\n        ? onCommit(normalized)\n        : client.cart.add(item, normalized);\n      setAttempted(false);\n      setAdded(true);\n      onAdded?.(line);\n      return line;\n    } catch (error) {\n      if (error instanceof ZappieCartError) {\n        setAttempted(true);\n        setFailure([...error.issues]);\n        focusIssue([...error.issues]);\n        return null;\n      }\n      throw error;\n    }\n  }, [client, normalized, item, onAdded, onCommit, focusIssue]);\n  const context: ItemFormContext = useMemo(\n    () => ({\n      item,\n      ...preview,\n      quantity: normalized.quantity ?? item.quantity.min,\n      setQuantity,\n      issues,\n      canAdd: validation.ok && !failure,\n      add,\n      status: added ? \"added\" : validation.ok ? \"valid\" : \"incomplete\",\n      value: normalized,\n      setValue,\n    }),\n    [\n      item,\n      preview,\n      normalized,\n      setQuantity,\n      issues,\n      validation.ok,\n      failure,\n      add,\n      added,\n      setValue,\n    ],\n  );\n  return (\n    <ItemFormStateContext.Provider value={context}>\n      <GroupRegistry.Provider value={registry.current}>\n        {part(\"div\", props, context, {\n          \"data-zappie-item\": item.id,\n          \"data-state\": issues.length ? \"invalid\" : \"valid\",\n          \"data-sold-out\": item.isAvailable ? undefined : \"\",\n        })}\n      </GroupRegistry.Provider>\n    </ItemFormStateContext.Provider>\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/overlay/react.js

@@ -108,6 +108,27 @@ function useContextValue() {
 }
 var prefetch = () => void loadOverlayEngine().catch(() => {
 });
+function prefetchWhenIdle() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  const schedule = () => {
+    if (engineModule) {
+      return;
+    }
+    if (typeof window.requestIdleCallback === "function") {
+      window.requestIdleCallback(prefetch);
+    } else {
+      window.setTimeout(prefetch, 1500);
+    }
+  };
+  if (document.readyState === "complete") {
+    schedule();
+  } else {
+    window.addEventListener("load", schedule, { once: true });
+  }
+}
+prefetchWhenIdle();
 function Root({
   param,
   id,
@@ -124,17 +145,6 @@ function Root({
   const generated = useId();
   const [contentId, setContentId] = useState(`zappie-overlay-${generated}`);
   const trigger = useRef(null);
-  useEffect(() => {
-    if (engineModule) {
-      return void 0;
-    }
-    if (typeof window.requestIdleCallback === "function") {
-      const handle2 = window.requestIdleCallback(prefetch);
-      return () => window.cancelIdleCallback(handle2);
-    }
-    const handle = window.setTimeout(prefetch, 1500);
-    return () => window.clearTimeout(handle);
-  }, []);
   const context = useMemo(
     () => ({
       ...overlay,

package/dist/overlay/react.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/overlay/react.tsx"],
-  "sourcesContent": ["\"use client\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { composeRefs, part, partId, type PartProps } from \"../internal/slot\";\nimport type { Presentation, SwipeDirection } from \"./engine\";\nimport {\n  closeOverlay,\n  locationSnapshot,\n  openOverlay,\n  subscribeLocation,\n  type CloseOptions,\n  type OverlayQuery,\n} from \"./history\";\n\ntype EngineModule = typeof import(\"./engine\");\nlet engineModule: EngineModule | undefined;\nlet enginePromise: Promise<EngineModule> | undefined;\n/**\n * Load the overlay engine (Base UI dialog and drawer). It is a separate chunk: Root prefetches\n * it when the browser is idle and on trigger hover/focus, so it is usually ready by first open.\n */\nexport function loadOverlayEngine(): Promise<EngineModule> {\n  enginePromise ??= import(\"./engine\").then(\n    (module) => (engineModule = module),\n    (error: unknown) => {\n      // A failed chunk load (e.g. offline) must not poison later opens.\n      enginePromise = undefined;\n      throw error;\n    },\n  );\n  return enginePromise;\n}\n\n/**\n * Control an overlay whose open state is stored in a URL query parameter.\n *\n * @param param - The query parameter to read and update.\n * @param id - The value that identifies this overlay as open.\n * @param options - Fallback query values and query parameters to omit when closing.\n * @returns Reactive open state and history-backed open and close actions.\n */\nexport function useOverlay(param: string, id: string, options?: CloseOptions) {\n  const search = useSyncExternalStore(\n    subscribeLocation,\n    locationSnapshot,\n    () => \"\",\n  );\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  const open = useCallback(\n    (query?: OverlayQuery) => openOverlay(param, id, query),\n    [param, id],\n  );\n  const close = useCallback(\n    () => closeOverlay(param, id, optionsRef.current),\n    [param, id],\n  );\n  return useMemo(\n    () => ({\n      isOpen: new URLSearchParams(search).get(param) === id,\n      open,\n      close,\n    }),\n    [search, param, id, open, close],\n  );\n}\n\n/** Tailwind's default min-width breakpoints. */\nconst BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 } as const;\nexport type ResponsivePresentation =\n  | Presentation\n  | ({ base: Presentation } & Partial<\n      Record<keyof typeof BREAKPOINTS, Presentation>\n    >);\n/** Choose a presentation using media queries. The server renders `base`. */\nfunction usePresentation(value: ResponsivePresentation): Presentation {\n  // Serialise so inline objects don't resubscribe on every render.\n  const key = typeof value === \"string\" ? value : JSON.stringify(value);\n  const resolve = useCallback((): Presentation => {\n    const parsed = (\n      key.startsWith(\"{\") ? JSON.parse(key) : key\n    ) as ResponsivePresentation;\n    if (typeof parsed === \"string\") {\n      return parsed;\n    }\n    let current = parsed.base;\n    for (const [name, width] of Object.entries(BREAKPOINTS)) {\n      const at = parsed[name as keyof typeof BREAKPOINTS];\n      if (at && window.matchMedia(`(min-width: ${width}px)`).matches) {\n        current = at;\n      }\n    }\n    return current;\n  }, [key]);\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      if (!key.startsWith(\"{\")) {\n        return () => {};\n      }\n      const queries = Object.values(BREAKPOINTS).map((width) =>\n        window.matchMedia(`(min-width: ${width}px)`),\n      );\n      queries.forEach((query) => query.addEventListener(\"change\", onChange));\n      return () =>\n        queries.forEach((query) =>\n          query.removeEventListener(\"change\", onChange),\n        );\n    },\n    [key],\n  );\n  return useSyncExternalStore(subscribe, resolve, () =>\n    typeof value === \"string\" ? value : value.base,\n  );\n}\n\ntype OverlayState = ReturnType<typeof useOverlay>;\ntype OverlayContext = OverlayState & {\n  presentation: Presentation;\n  swipeDirection: SwipeDirection;\n  contentId: string;\n  setContentId: (id: string) => void;\n  trigger: { current: HTMLElement | null };\n};\nconst Context = createContext<OverlayContext | null>(null);\nconst EngineContext = createContext<EngineModule | null>(null);\nfunction useContextValue() {\n  const value = useContext(Context);\n  if (!value) {\n    throw new Error(\"Overlay parts require Overlay.Root\");\n  }\n  return value;\n}\nconst prefetch = () => void loadOverlayEngine().catch(() => {});\n\n/**\n * The URL is the only open state. The engine (Base UI) supplies the modal mechanics: portal,\n * focus scope, scroll lock, outside and Escape dismissal, exit presence and, for drawers and\n * sheets, swipe-to-dismiss. Every open or close it requests goes through the history core.\n */\nfunction Root({\n  param,\n  id,\n  presentation = \"dialog\",\n  swipeDirection,\n  fallback,\n  omitParams,\n  navigation,\n  ...props\n}: PartProps<OverlayState> & {\n  param: string;\n  id: string;\n  /** Your URL adapter for overlays whose open state lives in the path. */\n  navigation?: OverlayState;\n  /** A `dialog`, swipeable `drawer` or `sheet`. Use `{ base, sm, md, lg, xl }` for responsive layouts. */\n  presentation?: ResponsivePresentation;\n  /** Swipe direction to dismiss. Defaults to `down` for drawers and `right` for sheets. */\n  swipeDirection?: SwipeDirection;\n} & CloseOptions) {\n  const queryOverlay = useOverlay(param, id, { fallback, omitParams });\n  const overlay = navigation ?? queryOverlay;\n  const resolved = usePresentation(presentation);\n  const generated = useId();\n  const [contentId, setContentId] = useState(`zappie-overlay-${generated}`);\n  const trigger = useRef<HTMLElement | null>(null);\n  useEffect(() => {\n    if (engineModule) {\n      return undefined;\n    }\n    if (typeof window.requestIdleCallback === \"function\") {\n      const handle = window.requestIdleCallback(prefetch);\n      return () => window.cancelIdleCallback(handle);\n    }\n    const handle = window.setTimeout(prefetch, 1500);\n    return () => window.clearTimeout(handle);\n  }, []);\n  const context = useMemo(\n    () => ({\n      ...overlay,\n      presentation: resolved,\n      swipeDirection:\n        swipeDirection ?? (resolved === \"sheet\" ? \"right\" : \"down\"),\n      contentId,\n      setContentId,\n      trigger,\n    }),\n    [overlay, resolved, swipeDirection, contentId],\n  );\n  return (\n    <Context.Provider value={context}>\n      {part(\"div\", props, overlay, {\n        \"data-state\": overlay.isOpen ? \"open\" : \"closed\",\n        \"data-presentation\": resolved,\n      })}\n    </Context.Provider>\n  );\n}\nconst Trigger = forwardRef<HTMLElement, PartProps<OverlayState>>(\n  function Trigger(props, ref) {\n    const ctx = useContextValue();\n    return part(\n      \"button\",\n      props,\n      ctx,\n      {\n        type: \"button\",\n        \"aria-haspopup\": \"dialog\",\n        \"aria-expanded\": ctx.isOpen,\n        \"aria-controls\": ctx.contentId,\n        \"data-state\": ctx.isOpen ? \"open\" : \"closed\",\n        onPointerEnter: prefetch,\n        onFocus: prefetch,\n        onClick: () => ctx.open(),\n      },\n      composeRefs(ref, (node: HTMLElement | null) => {\n        ctx.trigger.current = node;\n      }),\n    );\n  },\n);\nexport type OverlayContentProps = PartProps<OverlayState> & {\n  /** Runs on Escape. Call `event.preventDefault()` to keep the overlay open. */\n  onEscape?: (event: KeyboardEvent) => void;\n  /** Runs on an outside pointer press or focus. Call `event.preventDefault()` to keep the overlay open. */\n  onInteractOutside?: (event: Event) => void;\n  /** Keep the content mounted while closed, for exit animations driven by `data-state`. */\n  forceMount?: true;\n  /** Where to mount the content. Defaults to `document.body`. */\n  container?: HTMLElement | null;\n};\nconst Content = forwardRef<HTMLElement, OverlayContentProps>(function Content(\n  { onEscape, onInteractOutside, forceMount, container, ...props },\n  ref,\n) {\n  const ctx = useContextValue();\n  const [engine, setEngine] = useState(engineModule);\n  // Once opened, the surface stays mounted so the engine can play exit transitions.\n  const [opened, setOpened] = useState(ctx.isOpen);\n  if (ctx.isOpen && !opened) {\n    setOpened(true);\n  }\n  const customId = partId(props as Parameters<typeof partId>[0]);\n  const { setContentId } = ctx;\n  useEffect(() => {\n    if (customId) {\n      setContentId(customId);\n    }\n  }, [customId, setContentId]);\n  useEffect(() => {\n    if (engine || !(ctx.isOpen || forceMount)) {\n      return undefined;\n    }\n    let live = true;\n    void loadOverlayEngine().then(\n      (module) => {\n        if (live) {\n          setEngine(module);\n        }\n      },\n      () => {},\n    );\n    return () => {\n      live = false;\n    };\n  }, [engine, ctx.isOpen, forceMount]);\n  if (!engine || (!opened && !forceMount)) {\n    return null;\n  }\n  return (\n    <EngineContext.Provider value={engine}>\n      <engine.Surface\n        open={ctx.isOpen}\n        presentation={ctx.presentation}\n        swipeDirection={ctx.swipeDirection}\n        contentId={ctx.contentId}\n        trigger={ctx.trigger}\n        onOpen={() => ctx.open()}\n        onClose={ctx.close}\n        onEscape={onEscape}\n        onInteractOutside={onInteractOutside}\n        forceMount={forceMount}\n        container={container}\n        state={ctx}\n        contentProps={props as PartProps<never>}\n        contentRef={ref}\n      />\n    </EngineContext.Provider>\n  );\n});\nfunction useEngine() {\n  const engine = useContext(EngineContext);\n  if (!engine) {\n    throw new Error(\n      \"Overlay.Title and Overlay.Close must be inside Overlay.Content\",\n    );\n  }\n  return engine;\n}\nconst Title = forwardRef<HTMLElement, PartProps<OverlayState>>(\n  function Title(props, ref) {\n    const ctx = useContextValue();\n    const { EngineTitle } = useEngine();\n    return (\n      <EngineTitle {...(props as PartProps<unknown>)} state={ctx} ref={ref} />\n    );\n  },\n);\nconst Close = forwardRef<HTMLElement, PartProps<OverlayState>>(\n  function Close(props, ref) {\n    const ctx = useContextValue();\n    const { EngineClose } = useEngine();\n    return (\n      <EngineClose {...(props as PartProps<unknown>)} state={ctx} ref={ref} />\n    );\n  },\n);\n/**\n * Composable dialog, drawer and sheet parts with URL-backed open state and a lazy modal engine.\n * Use Root, Trigger, Content, Title and Close to connect history, focus handling and dismissal.\n */\nexport const Overlay = { Root, Trigger, Content, Title, Close };\n"],
-  "mappings": "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",
-  "names": ["handle", "Trigger", "Content", "Title", "Close"]
+  "sourcesContent": ["\"use client\";\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n} from \"react\";\nimport { composeRefs, part, partId, type PartProps } from \"../internal/slot\";\nimport type { Presentation, SwipeDirection } from \"./engine\";\nimport {\n  closeOverlay,\n  locationSnapshot,\n  openOverlay,\n  subscribeLocation,\n  type CloseOptions,\n  type OverlayQuery,\n} from \"./history\";\n\ntype EngineModule = typeof import(\"./engine\");\nlet engineModule: EngineModule | undefined;\nlet enginePromise: Promise<EngineModule> | undefined;\n/**\n * Load the overlay engine (Base UI dialog and drawer). It is a separate chunk, prefetched once\n * the page has loaded and the browser is idle, and on trigger hover/focus, so it is ready by\n * the first open.\n */\nexport function loadOverlayEngine(): Promise<EngineModule> {\n  enginePromise ??= import(\"./engine\").then(\n    (module) => (engineModule = module),\n    (error: unknown) => {\n      // A failed chunk load (e.g. offline) must not poison later opens.\n      enginePromise = undefined;\n      throw error;\n    },\n  );\n  return enginePromise;\n}\n\n/**\n * Control an overlay whose open state is stored in a URL query parameter.\n *\n * @param param - The query parameter to read and update.\n * @param id - The value that identifies this overlay as open.\n * @param options - Fallback query values and query parameters to omit when closing.\n * @returns Reactive open state and history-backed open and close actions.\n */\nexport function useOverlay(param: string, id: string, options?: CloseOptions) {\n  const search = useSyncExternalStore(\n    subscribeLocation,\n    locationSnapshot,\n    () => \"\",\n  );\n  const optionsRef = useRef(options);\n  optionsRef.current = options;\n  const open = useCallback(\n    (query?: OverlayQuery) => openOverlay(param, id, query),\n    [param, id],\n  );\n  const close = useCallback(\n    () => closeOverlay(param, id, optionsRef.current),\n    [param, id],\n  );\n  return useMemo(\n    () => ({\n      isOpen: new URLSearchParams(search).get(param) === id,\n      open,\n      close,\n    }),\n    [search, param, id, open, close],\n  );\n}\n\n/** Tailwind's default min-width breakpoints. */\nconst BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 } as const;\nexport type ResponsivePresentation =\n  | Presentation\n  | ({ base: Presentation } & Partial<\n      Record<keyof typeof BREAKPOINTS, Presentation>\n    >);\n/** Choose a presentation using media queries. The server renders `base`. */\nfunction usePresentation(value: ResponsivePresentation): Presentation {\n  // Serialise so inline objects don't resubscribe on every render.\n  const key = typeof value === \"string\" ? value : JSON.stringify(value);\n  const resolve = useCallback((): Presentation => {\n    const parsed = (\n      key.startsWith(\"{\") ? JSON.parse(key) : key\n    ) as ResponsivePresentation;\n    if (typeof parsed === \"string\") {\n      return parsed;\n    }\n    let current = parsed.base;\n    for (const [name, width] of Object.entries(BREAKPOINTS)) {\n      const at = parsed[name as keyof typeof BREAKPOINTS];\n      if (at && window.matchMedia(`(min-width: ${width}px)`).matches) {\n        current = at;\n      }\n    }\n    return current;\n  }, [key]);\n  const subscribe = useCallback(\n    (onChange: () => void) => {\n      if (!key.startsWith(\"{\")) {\n        return () => {};\n      }\n      const queries = Object.values(BREAKPOINTS).map((width) =>\n        window.matchMedia(`(min-width: ${width}px)`),\n      );\n      queries.forEach((query) => query.addEventListener(\"change\", onChange));\n      return () =>\n        queries.forEach((query) =>\n          query.removeEventListener(\"change\", onChange),\n        );\n    },\n    [key],\n  );\n  return useSyncExternalStore(subscribe, resolve, () =>\n    typeof value === \"string\" ? value : value.base,\n  );\n}\n\ntype OverlayState = ReturnType<typeof useOverlay>;\ntype OverlayContext = OverlayState & {\n  presentation: Presentation;\n  swipeDirection: SwipeDirection;\n  contentId: string;\n  setContentId: (id: string) => void;\n  trigger: { current: HTMLElement | null };\n};\nconst Context = createContext<OverlayContext | null>(null);\nconst EngineContext = createContext<EngineModule | null>(null);\nfunction useContextValue() {\n  const value = useContext(Context);\n  if (!value) {\n    throw new Error(\"Overlay parts require Overlay.Root\");\n  }\n  return value;\n}\nconst prefetch = () => void loadOverlayEngine().catch(() => {});\n\n// The prefetch is scheduled when this module loads, not when an Overlay.Root mounts: a template\n// that loads its overlay with deferred() mounts the Root only on the tap, which would leave the\n// engine's download inside the open. Waiting for the load event keeps it out of the page load.\nfunction prefetchWhenIdle() {\n  if (typeof window === \"undefined\") {\n    return;\n  }\n  const schedule = () => {\n    if (engineModule) {\n      return;\n    }\n    if (typeof window.requestIdleCallback === \"function\") {\n      window.requestIdleCallback(prefetch);\n    } else {\n      window.setTimeout(prefetch, 1500);\n    }\n  };\n  if (document.readyState === \"complete\") {\n    schedule();\n  } else {\n    window.addEventListener(\"load\", schedule, { once: true });\n  }\n}\nprefetchWhenIdle();\n\n/**\n * The URL is the only open state. The engine (Base UI) supplies the modal mechanics: portal,\n * focus scope, scroll lock, outside and Escape dismissal, exit presence and, for drawers and\n * sheets, swipe-to-dismiss. Every open or close it requests goes through the history core.\n */\nfunction Root({\n  param,\n  id,\n  presentation = \"dialog\",\n  swipeDirection,\n  fallback,\n  omitParams,\n  navigation,\n  ...props\n}: PartProps<OverlayState> & {\n  param: string;\n  id: string;\n  /** Your URL adapter for overlays whose open state lives in the path. */\n  navigation?: OverlayState;\n  /** A `dialog`, swipeable `drawer` or `sheet`. Use `{ base, sm, md, lg, xl }` for responsive layouts. */\n  presentation?: ResponsivePresentation;\n  /** Swipe direction to dismiss. Defaults to `down` for drawers and `right` for sheets. */\n  swipeDirection?: SwipeDirection;\n} & CloseOptions) {\n  const queryOverlay = useOverlay(param, id, { fallback, omitParams });\n  const overlay = navigation ?? queryOverlay;\n  const resolved = usePresentation(presentation);\n  const generated = useId();\n  const [contentId, setContentId] = useState(`zappie-overlay-${generated}`);\n  const trigger = useRef<HTMLElement | null>(null);\n  const context = useMemo(\n    () => ({\n      ...overlay,\n      presentation: resolved,\n      swipeDirection:\n        swipeDirection ?? (resolved === \"sheet\" ? \"right\" : \"down\"),\n      contentId,\n      setContentId,\n      trigger,\n    }),\n    [overlay, resolved, swipeDirection, contentId],\n  );\n  return (\n    <Context.Provider value={context}>\n      {part(\"div\", props, overlay, {\n        \"data-state\": overlay.isOpen ? \"open\" : \"closed\",\n        \"data-presentation\": resolved,\n      })}\n    </Context.Provider>\n  );\n}\nconst Trigger = forwardRef<HTMLElement, PartProps<OverlayState>>(\n  function Trigger(props, ref) {\n    const ctx = useContextValue();\n    return part(\n      \"button\",\n      props,\n      ctx,\n      {\n        type: \"button\",\n        \"aria-haspopup\": \"dialog\",\n        \"aria-expanded\": ctx.isOpen,\n        \"aria-controls\": ctx.contentId,\n        \"data-state\": ctx.isOpen ? \"open\" : \"closed\",\n        onPointerEnter: prefetch,\n        onFocus: prefetch,\n        onClick: () => ctx.open(),\n      },\n      composeRefs(ref, (node: HTMLElement | null) => {\n        ctx.trigger.current = node;\n      }),\n    );\n  },\n);\nexport type OverlayContentProps = PartProps<OverlayState> & {\n  /** Runs on Escape. Call `event.preventDefault()` to keep the overlay open. */\n  onEscape?: (event: KeyboardEvent) => void;\n  /** Runs on an outside pointer press or focus. Call `event.preventDefault()` to keep the overlay open. */\n  onInteractOutside?: (event: Event) => void;\n  /** Keep the content mounted while closed, for exit animations driven by `data-state`. */\n  forceMount?: true;\n  /** Where to mount the content. Defaults to `document.body`. */\n  container?: HTMLElement | null;\n};\nconst Content = forwardRef<HTMLElement, OverlayContentProps>(function Content(\n  { onEscape, onInteractOutside, forceMount, container, ...props },\n  ref,\n) {\n  const ctx = useContextValue();\n  const [engine, setEngine] = useState(engineModule);\n  // Once opened, the surface stays mounted so the engine can play exit transitions.\n  const [opened, setOpened] = useState(ctx.isOpen);\n  if (ctx.isOpen && !opened) {\n    setOpened(true);\n  }\n  const customId = partId(props as Parameters<typeof partId>[0]);\n  const { setContentId } = ctx;\n  useEffect(() => {\n    if (customId) {\n      setContentId(customId);\n    }\n  }, [customId, setContentId]);\n  useEffect(() => {\n    if (engine || !(ctx.isOpen || forceMount)) {\n      return undefined;\n    }\n    let live = true;\n    void loadOverlayEngine().then(\n      (module) => {\n        if (live) {\n          setEngine(module);\n        }\n      },\n      () => {},\n    );\n    return () => {\n      live = false;\n    };\n  }, [engine, ctx.isOpen, forceMount]);\n  if (!engine || (!opened && !forceMount)) {\n    return null;\n  }\n  return (\n    <EngineContext.Provider value={engine}>\n      <engine.Surface\n        open={ctx.isOpen}\n        presentation={ctx.presentation}\n        swipeDirection={ctx.swipeDirection}\n        contentId={ctx.contentId}\n        trigger={ctx.trigger}\n        onOpen={() => ctx.open()}\n        onClose={ctx.close}\n        onEscape={onEscape}\n        onInteractOutside={onInteractOutside}\n        forceMount={forceMount}\n        container={container}\n        state={ctx}\n        contentProps={props as PartProps<never>}\n        contentRef={ref}\n      />\n    </EngineContext.Provider>\n  );\n});\nfunction useEngine() {\n  const engine = useContext(EngineContext);\n  if (!engine) {\n    throw new Error(\n      \"Overlay.Title and Overlay.Close must be inside Overlay.Content\",\n    );\n  }\n  return engine;\n}\nconst Title = forwardRef<HTMLElement, PartProps<OverlayState>>(\n  function Title(props, ref) {\n    const ctx = useContextValue();\n    const { EngineTitle } = useEngine();\n    return (\n      <EngineTitle {...(props as PartProps<unknown>)} state={ctx} ref={ref} />\n    );\n  },\n);\nconst Close = forwardRef<HTMLElement, PartProps<OverlayState>>(\n  function Close(props, ref) {\n    const ctx = useContextValue();\n    const { EngineClose } = useEngine();\n    return (\n      <EngineClose {...(props as PartProps<unknown>)} state={ctx} ref={ref} />\n    );\n  },\n);\n/**\n * Composable dialog, drawer and sheet parts with URL-backed open state and a lazy modal engine.\n * Use Root, Trigger, Content, Title and Close to connect history, focus handling and dismissal.\n */\nexport const Overlay = { Root, Trigger, Content, Title, Close };\n"],
+  "mappings": "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",
+  "names": ["Trigger", "Content", "Title", "Close"]
 }

package/dist/version.js

@@ -1,5 +1,5 @@
 // src/version.ts
-var PACKAGE_VERSION = true ? "0.1.2" : "0.0.0-development";
+var PACKAGE_VERSION = true ? "0.1.4" : "0.0.0-development";
 export {
   PACKAGE_VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zappie/foundations",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "UI-less React primitives for Zappie storefronts: behaviour, state and accessibility without styles.",
   "type": "module",
   "sideEffects": false,
@@ -32,7 +32,7 @@
   ],
   "dependencies": {
     "@base-ui/react": "^1.8.0",
-    "@zappie/sdk": "^0.1.2"
+    "@zappie/sdk": "^0.1.8"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",