@zappie/foundations 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @zappie/foundations
 
+## 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,34 @@ Foundations is at `0.x`. Its API can change in a minor release while it settles.
 ## License
 
 MIT
+
+## Branch map
+
+`BranchMap` accepts SDK `Branch[]` data, `selectedBranchId`, `onSelect(branch)`,
+`browserKey`, and optional `shopperLocation: { lat, lng }`. 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}
+  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`.
+The map fits branches with valid coordinates, including across the date line.
+Branches without coordinates remain selectable with “Map location unavailable”.
+
+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. Loading failures show “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,40 @@
+// 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) {
+  const points = visibleBranches(branches).map((branch) => branch.coordinates);
+  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[]) {\n  const points = visibleBranches(branches).map((branch) => branch.coordinates);\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;AAC/C,QAAM,SAAS,gBAAgB,QAAQ,EAAE,IAAI,CAAC,WAAW,OAAO,WAAW;AAC3E,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,89 @@
+"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,
+  ...props
+}) {
+  const element = useRef(null);
+  const [runtime, setRuntime] = useState();
+  const [failed, setFailed] = useState(false);
+  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;
+    setFailed(false);
+    void import("./runtime.js").then(({ createMap }) => createMap(target, browserKey, controller.signal)).then((map) => {
+      instance = map;
+      if (disposed) {
+        map.destroy();
+      } else {
+        setRuntime(map);
+      }
+    }).catch(() => {
+      if (!disposed) {
+        setFailed(true);
+      }
+    });
+    return () => {
+      disposed = true;
+      controller.abort();
+      instance?.destroy();
+      setRuntime(void 0);
+    };
+  }, [browserKey, hasCoordinates]);
+  useEffect(() => {
+    runtime?.update(branches, selectedBranchId, onSelect, shopperLocation);
+  }, [runtime, branches, selectedBranchId, onSelect, shopperLocation]);
+  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%" }
+      }
+    ),
+    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 { useEffect, useRef, useState, type HTMLAttributes } from \"react\";\nimport {\n  validCoordinates,\n  visibleBranches,\n  type Coordinates,\n} from \"./geometry\";\nimport type { createMap } from \"./runtime\";\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  shopperLocation?: Coordinates;\n  browserKey?: string;\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  ...props\n}: BranchMapProps) {\n  const element = useRef<HTMLDivElement>(null);\n  const [runtime, setRuntime] =\n    useState<Awaited<ReturnType<typeof createMap>>>();\n  const [failed, setFailed] = useState(false);\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    setFailed(false);\n    void import(\"./runtime\")\n      .then(({ createMap }) => createMap(target, browserKey, controller.signal))\n      .then((map) => {\n        instance = map;\n        if (disposed) {\n          map.destroy();\n        } else {\n          setRuntime(map);\n        }\n      })\n      .catch(() => {\n        if (!disposed) {\n          setFailed(true);\n        }\n      });\n    return () => {\n      disposed = true;\n      controller.abort();\n      instance?.destroy();\n      setRuntime(undefined);\n    };\n  }, [browserKey, hasCoordinates]);\n  useEffect(() => {\n    runtime?.update(branches, selectedBranchId, onSelect, shopperLocation);\n  }, [runtime, branches, selectedBranchId, onSelect, shopperLocation]);\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      {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,SAAS,WAAW,QAAQ,gBAAqC;AACjE;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AA2ED,cAUE,YAVF;AAvDC,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,UAAU,OAAuB,IAAI;AAC3C,QAAM,CAAC,SAAS,UAAU,IACxB,SAAgD;AAClD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAC1C,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,cAAU,KAAK;AACf,SAAK,OAAO,cAAW,EACpB,KAAK,CAAC,EAAE,UAAU,MAAM,UAAU,QAAQ,YAAY,WAAW,MAAM,CAAC,EACxE,KAAK,CAAC,QAAQ;AACb,iBAAW;AACX,UAAI,UAAU;AACZ,YAAI,QAAQ;AAAA,MACd,OAAO;AACL,mBAAW,GAAG;AAAA,MAChB;AAAA,IACF,CAAC,EACA,MAAM,MAAM;AACX,UAAI,CAAC,UAAU;AACb,kBAAU,IAAI;AAAA,MAChB;AAAA,IACF,CAAC;AACH,WAAO,MAAM;AACX,iBAAW;AACX,iBAAW,MAAM;AACjB,gBAAU,QAAQ;AAClB,iBAAW,MAAS;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,YAAY,cAAc,CAAC;AAC/B,YAAU,MAAM;AACd,aAAS,OAAO,UAAU,kBAAkB,UAAU,eAAe;AAAA,EACvE,GAAG,CAAC,SAAS,UAAU,kBAAkB,UAAU,eAAe,CAAC;AACnE,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,UAAU,CAAC,iBACV,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,90 @@
+// src/branch-map/runtime.ts
+import {
+  branchBounds,
+  validCoordinates,
+  visibleBranches
+} from "./geometry.js";
+import { loadMaps } from "./loader.js";
+async function createMap(element, key, signal) {
+  const maps = await loadMaps(key);
+  signal.throwIfAborted();
+  const map = new maps.Map(element, {
+    center: { lat: 0, lng: 0 },
+    zoom: 12,
+    maxZoom: 18,
+    mapTypeControl: false,
+    streetViewControl: false
+  });
+  let pins = [];
+  class Pin extends maps.OverlayView {
+    constructor(position, label, selected, onClick) {
+      super();
+      this.position = position;
+      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 = `position:absolute;transform:translate(-50%,-100%);width:var(--branch-map-pin-size,24px);height:var(--branch-map-pin-size,24px);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`;
+      this.button.onclick = onClick ?? null;
+    }
+    onAdd() {
+      this.getPanes()?.overlayMouseTarget.appendChild(this.button);
+      maps.OverlayView.preventMapHitsAndGesturesFrom(this.button);
+    }
+    draw() {
+      const point = this.getProjection().fromLatLngToDivPixel(
+        new maps.LatLng(this.position)
+      );
+      if (point) {
+        this.button.style.left = `${point.x}px`;
+        this.button.style.top = `${point.y}px`;
+      }
+    }
+    onRemove() {
+      this.button.remove();
+      this.button.onclick = null;
+    }
+  }
+  const clear = () => {
+    pins.forEach((pin) => pin.setMap(null));
+    pins = [];
+  };
+  return {
+    update(branches, selected, onSelect, location) {
+      clear();
+      for (const branch of visibleBranches(branches)) {
+        const pin = new Pin(
+          branch.coordinates,
+          branch.name,
+          branch.id === selected,
+          () => onSelect(branch)
+        );
+        pin.setMap(map);
+        pins.push(pin);
+      }
+      const bounds = branchBounds(branches);
+      if (bounds) {
+        map.fitBounds(bounds, 32);
+      }
+      if (validCoordinates(location)) {
+        const pin = new Pin(location, "Your location", false);
+        pin.setMap(map);
+        pins.push(pin);
+      }
+    },
+    locate(location) {
+      map.panTo(location);
+    },
+    destroy() {
+      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\nexport async function createMap(\n  element: HTMLElement,\n  key: string,\n  signal: AbortSignal,\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    maxZoom: 18,\n    mapTypeControl: false,\n    streetViewControl: false,\n  });\n  let pins: google.maps.OverlayView[] = [];\n  class Pin extends maps.OverlayView {\n    private button: HTMLButtonElement;\n    constructor(\n      private position: Coordinates,\n      label: string,\n      selected: boolean,\n      onClick?: () => void,\n    ) {\n      super();\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 = `position:absolute;transform:translate(-50%,-100%);width:var(--branch-map-pin-size,24px);height:var(--branch-map-pin-size,24px);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      this.button.onclick = onClick ?? null;\n    }\n    onAdd() {\n      this.getPanes()?.overlayMouseTarget.appendChild(this.button);\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        this.button.style.left = `${point.x}px`;\n        this.button.style.top = `${point.y}px`;\n      }\n    }\n    onRemove() {\n      this.button.remove();\n      this.button.onclick = null;\n    }\n  }\n  const clear = () => {\n    pins.forEach((pin) => pin.setMap(null));\n    pins = [];\n  };\n  return {\n    update(\n      branches: Branch[],\n      selected: string | undefined,\n      onSelect: (branch: Branch) => void,\n      location?: Coordinates,\n    ) {\n      clear();\n      for (const branch of visibleBranches(branches)) {\n        const pin = new Pin(\n          branch.coordinates,\n          branch.name,\n          branch.id === selected,\n          () => onSelect(branch),\n        );\n        pin.setMap(map);\n        pins.push(pin);\n      }\n      const bounds = branchBounds(branches);\n      if (bounds) {\n        map.fitBounds(bounds, 32);\n      }\n      if (validCoordinates(location)) {\n        const pin = new Pin(location, \"Your location\", false);\n        pin.setMap(map);\n        pins.push(pin);\n      }\n    },\n    locate(location: Coordinates) {\n      map.panTo(location);\n    },\n    destroy() {\n      clear();\n      maps.event.clearInstanceListeners(map);\n      element.replaceChildren();\n    },\n  };\n}\n"],
+  "mappings": ";AACA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,gBAAgB;AAEzB,eAAsB,UACpB,SACA,KACA,QACA;AACA,QAAM,OAAO,MAAM,SAAS,GAAG;AAC/B,SAAO,eAAe;AACtB,QAAM,MAAM,IAAI,KAAK,IAAI,SAAS;AAAA,IAChC,QAAQ,EAAE,KAAK,GAAG,KAAK,EAAE;AAAA,IACzB,MAAM;AAAA,IACN,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,mBAAmB;AAAA,EACrB,CAAC;AACD,MAAI,OAAkC,CAAC;AAAA,EACvC,MAAM,YAAY,KAAK,YAAY;AAAA,IAEjC,YACU,UACR,OACA,UACA,SACA;AACA,YAAM;AALE;AAMR,WAAK,SAAS,SAAS,cAAc,QAAQ;AAC7C,WAAK,OAAO,OAAO;AACnB,WAAK,OAAO,aAAa,cAAc,KAAK;AAC5C,WAAK,OAAO,aAAa,gBAAgB,OAAO,QAAQ,CAAC;AACzD,WAAK,OAAO,QAAQ,WAAW,OAAO,QAAQ;AAC9C,WAAK,OAAO,QAAQ,eAAe;AACnC,WAAK,OAAO,MAAM,UAAU,8NAA8N,WAAW,8BAA8B,kBAAkB;AACrT,WAAK,OAAO,UAAU,WAAW;AAAA,IACnC;AAAA,IACA,QAAQ;AACN,WAAK,SAAS,GAAG,mBAAmB,YAAY,KAAK,MAAM;AAC3D,WAAK,YAAY,8BAA8B,KAAK,MAAM;AAAA,IAC5D;AAAA,IACA,OAAO;AACL,YAAM,QAAQ,KAAK,cAAc,EAAE;AAAA,QACjC,IAAI,KAAK,OAAO,KAAK,QAAQ;AAAA,MAC/B;AACA,UAAI,OAAO;AACT,aAAK,OAAO,MAAM,OAAO,GAAG,MAAM,CAAC;AACnC,aAAK,OAAO,MAAM,MAAM,GAAG,MAAM,CAAC;AAAA,MACpC;AAAA,IACF;AAAA,IACA,WAAW;AACT,WAAK,OAAO,OAAO;AACnB,WAAK,OAAO,UAAU;AAAA,IACxB;AAAA,EACF;AACA,QAAM,QAAQ,MAAM;AAClB,SAAK,QAAQ,CAAC,QAAQ,IAAI,OAAO,IAAI,CAAC;AACtC,WAAO,CAAC;AAAA,EACV;AACA,SAAO;AAAA,IACL,OACE,UACA,UACA,UACA,UACA;AACA,YAAM;AACN,iBAAW,UAAU,gBAAgB,QAAQ,GAAG;AAC9C,cAAM,MAAM,IAAI;AAAA,UACd,OAAO;AAAA,UACP,OAAO;AAAA,UACP,OAAO,OAAO;AAAA,UACd,MAAM,SAAS,MAAM;AAAA,QACvB;AACA,YAAI,OAAO,GAAG;AACd,aAAK,KAAK,GAAG;AAAA,MACf;AACA,YAAM,SAAS,aAAa,QAAQ;AACpC,UAAI,QAAQ;AACV,YAAI,UAAU,QAAQ,EAAE;AAAA,MAC1B;AACA,UAAI,iBAAiB,QAAQ,GAAG;AAC9B,cAAM,MAAM,IAAI,IAAI,UAAU,iBAAiB,KAAK;AACpD,YAAI,OAAO,GAAG;AACd,aAAK,KAAK,GAAG;AAAA,MACf;AAAA,IACF;AAAA,IACA,OAAO,UAAuB;AAC5B,UAAI,MAAM,QAAQ;AAAA,IACpB;AAAA,IACA,UAAU;AACR,YAAM;AACN,WAAK,MAAM,uBAAuB,GAAG;AACrC,cAAQ,gBAAgB;AAAA,IAC1B;AAAA,EACF;AACF;",
+  "names": []
+}

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, 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,26 @@ declare const Account: {
     } & react.RefAttributes<HTMLElement>>;
 };
 
+type Coordinates = {
+    lat: number;
+    lng: number;
+};
+
+/** Branches, selection and optional shopper coordinates for BranchMap. */
+type BranchMapProps = Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
+    branches: Branch$1[];
+    selectedBranchId?: string;
+    onSelect: (branch: Branch$1) => void;
+    shopperLocation?: Coordinates;
+    browserKey?: string;
+};
+/**
+ * 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, ...props }: BranchMapProps): react_jsx_runtime.JSX.Element | null;
+
 /**
  * The current quantity, bounds, step, disabled state and value setter exposed by a quantity control.
  */
@@ -805,4 +825,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 BranchMapProps, 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 };

package/dist/index.js

@@ -3,6 +3,7 @@
 // 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 { Address } from "./fulfilment/address-picker.js";
 import { Branch } from "./fulfilment/branch-picker.js";
@@ -29,6 +30,7 @@ export {
   AccountNotConfiguredError,
   Address,
   Branch,
+  BranchMap,
   Cart,
   FOUNDATIONS_VERSION,
   Fulfilment,

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 { BranchMapProps } from \"./branch-map\";\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,iBAAiB;AAE1B,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;AAlCpB,IAAM,sBAA8B;",
   "names": []
 }

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.3" : "0.0.0-development";
 export {
   PACKAGE_VERSION
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zappie/foundations",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "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.7"
   },
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",