@zappie/foundations 0.1.4 → 0.1.6

package/dist/branch-map/index.js

@@ -1,16 +1,18 @@
 "use client";
 
 // src/branch-map/index.tsx
-import {
-  useEffect,
-  useRef,
-  useState
-} from "react";
+import { useEffect, useRef } from "react";
+import { COLOR_PROBE_STYLE, readColors } from "./colors.js";
 import {
   validCoordinates,
   visibleBranches
 } from "./geometry.js";
+import { useMapRuntime } from "./use-map-runtime.js";
+import { DeliveryMap } from "./delivery-map.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+var loadBranchMap = (mapTypeControl) => (target, key, signal) => import("./runtime.js").then(
+  ({ createMap }) => createMap(target, key, signal, { mapTypeControl })
+);
 function BranchMap({
   branches,
   selectedBranchId,
@@ -21,58 +23,24 @@ function BranchMap({
   pinImageUrl,
   mapTypeControl = false,
   pinLabel,
+  compact = false,
   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 probe = useRef(null);
+  const hasCoordinates = visibleBranches(branches).length > 0;
+  const { element, runtime, failure, retry } = useMapRuntime(browserKey, hasCoordinates, loadBranchMap(mapTypeControl), 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
+      pinLabel,
+      compact,
+      colors: readColors(probe.current)
     });
   }, [
     runtime,
@@ -83,15 +51,17 @@ function BranchMap({
     effectiveMaxZoom,
     pinImageUrl,
     mapTypeControl,
-    pinLabel
+    pinLabel,
+    compact
   ]);
   if (!browserKey) {
     return null;
   }
   const unavailable = branches.filter(
-    (branch) => !validCoordinates(branch.coordinates)
+    (branch) => !visibleBranches([branch]).length
   );
   return /* @__PURE__ */ jsxs("div", { ...props, "data-branch-map": "", children: [
+    /* @__PURE__ */ jsx("span", { ref: probe, hidden: true, style: COLOR_PROBE_STYLE }),
     /* @__PURE__ */ jsx(
       "div",
       {
@@ -101,10 +71,7 @@ function BranchMap({
         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,
+    failure && renderLoadError ? renderLoadError({ error: failure.error, retry }) : failed || !hasCoordinates ? /* @__PURE__ */ jsx("p", { role: "status", children: "Map location unavailable" }) : null,
     unavailable.map((branch) => /* @__PURE__ */ jsxs(
       "button",
       {
@@ -122,6 +89,7 @@ function BranchMap({
   ] });
 }
 export {
-  BranchMap
+  BranchMap,
+  DeliveryMap
 };
 //# sourceMappingURL=index.js.map

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

@@ -1,7 +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": "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",
+  "sourcesContent": ["\"use client\";\nimport type { Branch } from \"@zappie/sdk\";\nimport { useEffect, useRef, type HTMLAttributes, type ReactNode } from \"react\";\nimport { COLOR_PROBE_STYLE, readColors } from \"./colors\";\nimport {\n  validCoordinates,\n  visibleBranches,\n  type Coordinates,\n} from \"./geometry\";\nimport type { createMap } from \"./runtime\";\nimport { useMapRuntime, type MapLoadErrorState } from \"./use-map-runtime\";\n\nexport { DeliveryMap } from \"./delivery-map\";\nexport type { DeliveryMapProps } from \"./delivery-map\";\nexport type { MapLoadErrorState } from \"./use-map-runtime\";\n\n/** What a template gets to render when the map fails to load. */\nexport type BranchMapLoadErrorState = MapLoadErrorState;\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  /**\n   * The shopper's coordinates. The map shows them with a house marker and\n   * draws a line to the selected branch, or to the nearest one.\n   */\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, such as the business logo. */\n  pinImageUrl?: string;\n  /** Show the map and satellite switch. Defaults to false. */\n  mapTypeControl?: boolean;\n  /**\n   * Show the branch name above the selected pin, or above every pin. Off by\n   * default. With a shopper location and no selection, \"selected\" labels the\n   * nearest branch.\n   */\n  pinLabel?: \"selected\" | \"all\";\n  /** Frame a small map, with tighter padding and a wider single-branch view. */\n  compact?: boolean;\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\nconst loadBranchMap =\n  (mapTypeControl: boolean) =>\n  (target: HTMLElement, key: string, signal: AbortSignal) =>\n    import(\"./runtime\").then(({ createMap }) =>\n      createMap(target, key, signal, { mapTypeControl }),\n    );\n\n/**\n * Show branch locations. Maps loads after mount when you supply a browser key.\n * Nearby branches group into numbered clusters. Set the container height with\n * CSS. Colour clusters, the shopper marker, labels and the route with\n * --map-accent and --map-accent-foreground. Style dot pins with\n * --branch-map-pin, --branch-map-pin-selected, --branch-map-pin-border and\n * --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  compact = false,\n  onLoadError,\n  renderLoadError,\n  ...props\n}: BranchMapProps) {\n  const probe = useRef<HTMLSpanElement>(null);\n  const hasCoordinates = visibleBranches(branches).length > 0;\n  const { element, runtime, failure, retry } = useMapRuntime<\n    Awaited<ReturnType<typeof createMap>>\n  >(browserKey, hasCoordinates, loadBranchMap(mapTypeControl), onLoadError);\n  const failed = failure !== undefined;\n  const effectiveMaxZoom =\n    maxZoom ?? (validCoordinates(shopperLocation) ? 15 : 14);\n  useEffect(() => {\n    runtime?.update(branches, selectedBranchId, onSelect, shopperLocation, {\n      maxZoom: effectiveMaxZoom,\n      pinImageUrl,\n      mapTypeControl,\n      pinLabel,\n      compact,\n      colors: readColors(probe.current),\n    });\n  }, [\n    runtime,\n    branches,\n    selectedBranchId,\n    onSelect,\n    shopperLocation,\n    effectiveMaxZoom,\n    pinImageUrl,\n    mapTypeControl,\n    pinLabel,\n    compact,\n  ]);\n  if (!browserKey) {\n    return null;\n  }\n  const unavailable = branches.filter(\n    (branch) => !visibleBranches([branch]).length,\n  );\n  return (\n    <div {...props} data-branch-map=\"\">\n      <span ref={probe} hidden style={COLOR_PROBE_STYLE} />\n      <div\n        hidden={failed || !hasCoordinates}\n        ref={element}\n        data-branch-map-canvas=\"\"\n        style={{ height: \"100%\" }}\n      />\n      {failure && renderLoadError ? (\n        renderLoadError({ error: failure.error, retry })\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,cAAmD;AACvE,SAAS,mBAAmB,kBAAkB;AAC9C;AAAA,EACE;AAAA,EACA;AAAA,OAEK;AAEP,SAAS,qBAA6C;AAEtD,SAAS,mBAAmB;AAkHtB,cAaE,YAbF;AAnEN,IAAM,gBACJ,CAAC,mBACD,CAAC,QAAqB,KAAa,WACjC,OAAO,cAAW,EAAE;AAAA,EAAK,CAAC,EAAE,UAAU,MACpC,UAAU,QAAQ,KAAK,QAAQ,EAAE,eAAe,CAAC;AACnD;AAUG,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAmB;AACjB,QAAM,QAAQ,OAAwB,IAAI;AAC1C,QAAM,iBAAiB,gBAAgB,QAAQ,EAAE,SAAS;AAC1D,QAAM,EAAE,SAAS,SAAS,SAAS,MAAM,IAAI,cAE3C,YAAY,gBAAgB,cAAc,cAAc,GAAG,WAAW;AACxE,QAAM,SAAS,YAAY;AAC3B,QAAM,mBACJ,YAAY,iBAAiB,eAAe,IAAI,KAAK;AACvD,YAAU,MAAM;AACd,aAAS,OAAO,UAAU,kBAAkB,UAAU,iBAAiB;AAAA,MACrE,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,WAAW,MAAM,OAAO;AAAA,IAClC,CAAC;AAAA,EACH,GAAG;AAAA,IACD;AAAA,IACA;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,gBAAgB,CAAC,MAAM,CAAC,EAAE;AAAA,EACzC;AACA,SACE,qBAAC,SAAK,GAAG,OAAO,mBAAgB,IAC9B;AAAA,wBAAC,UAAK,KAAK,OAAO,QAAM,MAAC,OAAO,mBAAmB;AAAA,IACnD;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,EAAE,OAAO,QAAQ,OAAO,MAAM,CAAC,IAC7C,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/markers.js

@@ -0,0 +1,183 @@
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+
+// src/branch-map/markers.ts
+import { DEFAULT_COLORS } from "./colors.js";
+var SHADOW_SM = "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+var SHADOW_MD = "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+var MARKER_BOX = 40;
+var LABEL_GAP = 4;
+function branchMarker(imageUrl, focused) {
+  return imageUrl ? {
+    kind: "logo",
+    size: focused ? 40 : 32,
+    imageUrl,
+    shadow: focused ? "md" : "sm"
+  } : { kind: "dot", selected: focused };
+}
+var SVG_NAMESPACE = "http://www.w3.org/2000/svg";
+function houseIcon() {
+  const svg = document.createElementNS(SVG_NAMESPACE, "svg");
+  for (const [name, value] of Object.entries({
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "2",
+    "stroke-linecap": "round",
+    "stroke-linejoin": "round",
+    "aria-hidden": "true"
+  })) {
+    svg.setAttribute(name, value);
+  }
+  svg.style.display = "block";
+  for (const data of [
+    [
+      "path",
+      "d",
+      "M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z"
+    ],
+    [
+      "path",
+      "d",
+      "M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2"
+    ],
+    ["path", "d", "M18 22v-3"],
+    ["circle", "cx", "10"]
+  ]) {
+    const child = document.createElementNS(SVG_NAMESPACE, data[0]);
+    child.setAttribute(data[1], data[2]);
+    if (data[0] === "circle") {
+      child.setAttribute("cy", "10");
+      child.setAttribute("r", "3");
+    }
+    svg.appendChild(child);
+  }
+  return svg;
+}
+function paintMarker(element, spec, colors) {
+  const { left, top } = element.style;
+  try {
+    paint(element, spec, colors);
+  } finally {
+    element.style.left = left;
+    element.style.top = top;
+  }
+}
+function paint(element, spec, colors) {
+  element.dataset.marker = spec.kind;
+  if (spec.kind === "logo") {
+    const lift = spec.lift ?? MARKER_BOX / 2;
+    element.style.cssText = `position:absolute;box-sizing:border-box;transform:translate(-50%,calc(-50% - ${lift}px));width:${spec.size}px;height:${spec.size}px;padding:0;border-radius:9999px;overflow:hidden;border:2px solid white;background:white;box-shadow:${spec.shadow === "md" ? SHADOW_MD : SHADOW_SM};cursor:pointer;transition:width 150ms cubic-bezier(0.4,0,0.2,1),height 150ms cubic-bezier(0.4,0,0.2,1)`;
+    let image = element.querySelector("img");
+    if (!image) {
+      element.replaceChildren();
+      image = document.createElement("img");
+      image.alt = "";
+      image.decoding = "async";
+      image.draggable = false;
+      image.onerror = () => {
+        image.style.visibility = "hidden";
+      };
+      element.appendChild(image);
+    }
+    image.style.cssText = "display:block;width:100%;height:100%;border-radius:9999px;object-fit:cover";
+    if (image.getAttribute("src") !== spec.imageUrl) {
+      image.src = spec.imageUrl;
+    }
+    return;
+  }
+  if (spec.kind === "dot") {
+    element.replaceChildren();
+    element.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(${spec.selected ? "--branch-map-pin-selected" : "--branch-map-pin"},currentColor);cursor:pointer`;
+    return;
+  }
+  element.style.cssText = `position:absolute;box-sizing:border-box;transform:translate(-50%,calc(-50% - ${spec.lift ?? MARKER_BOX / 2}px));width:32px;height:32px;padding:4px;border-radius:4px;border:2px solid white;background:${colors.accent};color:${spec.color};box-shadow:${SHADOW_MD}`;
+  if (!element.firstChild) {
+    element.appendChild(houseIcon());
+  }
+}
+function paintLabel(element, options) {
+  const { left, top } = element.style;
+  element.style.cssText = `position:absolute;box-sizing:border-box;transform:translate(-50%,calc(-100% - ${options.offset}));white-space:nowrap;pointer-events:none;padding:4px 8px;border-radius:8px;font-size:12px;line-height:16px;font-weight:500;${options.capitalize ? "text-transform:capitalize;" : ""}background:var(--branch-map-label-background,white);color:var(--branch-map-label-color,#111);border:2px solid var(--branch-map-label-border,${options.colors.accent});box-shadow:${SHADOW_MD}`;
+  element.style.left = left;
+  element.style.top = top;
+}
+function labelOffset(spec) {
+  return spec.kind === "dot" ? `var(--branch-map-pin-size,24px) + ${LABEL_GAP}px` : `${MARKER_BOX + LABEL_GAP}px`;
+}
+function markerOverlayClass(maps) {
+  var _position, _pane, _a;
+  return _a = class extends maps.OverlayView {
+    constructor(key, position, element) {
+      super();
+      __privateAdd(this, _position);
+      __privateAdd(this, _pane);
+      this.key = key;
+      this.element = element;
+      __privateSet(this, _position, position);
+      this.label = document.createElement("span");
+      this.label.setAttribute("aria-hidden", "true");
+    }
+    getPosition() {
+      return new maps.LatLng(__privateGet(this, _position));
+    }
+    getVisible() {
+      return true;
+    }
+    setPosition(position) {
+      __privateSet(this, _position, position);
+      if (this.getMap()) {
+        this.draw();
+      }
+    }
+    // An unlabelled marker has no label node in the map.
+    setLabel(text) {
+      this.label.textContent = text ?? "";
+      if (!text) {
+        this.label.remove();
+      } else if (__privateGet(this, _pane) && !this.label.isConnected) {
+        __privateGet(this, _pane).appendChild(this.label);
+      }
+    }
+    onAdd() {
+      __privateSet(this, _pane, this.getPanes()?.overlayMouseTarget);
+      __privateGet(this, _pane)?.appendChild(this.element);
+      if (this.label.textContent) {
+        __privateGet(this, _pane)?.appendChild(this.label);
+      }
+      maps.OverlayView.preventMapHitsAndGesturesFrom(this.element);
+    }
+    draw() {
+      const point = this.getProjection()?.fromLatLngToDivPixel(
+        new maps.LatLng(__privateGet(this, _position))
+      );
+      if (point) {
+        for (const node of [this.element, this.label]) {
+          node.style.left = `${point.x}px`;
+          node.style.top = `${point.y}px`;
+        }
+      }
+    }
+    onRemove() {
+      __privateSet(this, _pane, void 0);
+      this.element.remove();
+      this.label.remove();
+    }
+  }, _position = new WeakMap(), _pane = new WeakMap(), _a;
+}
+export {
+  DEFAULT_COLORS,
+  branchMarker,
+  labelOffset,
+  markerOverlayClass,
+  paintLabel,
+  paintMarker
+};
+//# sourceMappingURL=markers.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/branch-map/markers.ts"],
+  "sourcesContent": ["/// <reference types=\"google.maps\" />\nimport type { MapColors } from \"./colors\";\nimport type { Coordinates } from \"./geometry\";\n\nexport { DEFAULT_COLORS, type MapColors } from \"./colors\";\n\nconst SHADOW_SM =\n  \"0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)\";\nconst SHADOW_MD =\n  \"0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)\";\n/** Every marker sits in a 40px box whose bottom centre is the location. */\nconst MARKER_BOX = 40;\nconst LABEL_GAP = 4;\n\n/** What a marker shows. */\nexport type MarkerSpec =\n  | {\n      kind: \"logo\";\n      /** Outer diameter, including the white border. */\n      size: number;\n      imageUrl: string;\n      shadow: \"sm\" | \"md\";\n      /** Offset from the location to the logo's centre. Defaults to the 40px box. */\n      lift?: number;\n    }\n  | { kind: \"dot\"; selected: boolean }\n  | {\n      kind: \"house\";\n      /** Icon colour. The fill is the accent. */\n      color: string;\n      /** Offset from the location to the icon's centre. Defaults to the 40px box. */\n      lift?: number;\n    };\n\n/** Choose the branch marker: the logo when there is an image, otherwise the themed dot. */\nexport function branchMarker(\n  imageUrl: string | undefined,\n  focused: boolean,\n): MarkerSpec {\n  return imageUrl\n    ? {\n        kind: \"logo\",\n        size: focused ? 40 : 32,\n        imageUrl,\n        shadow: focused ? \"md\" : \"sm\",\n      }\n    : { kind: \"dot\", selected: focused };\n}\n\nconst SVG_NAMESPACE = \"http://www.w3.org/2000/svg\";\n\nfunction houseIcon(): SVGSVGElement {\n  const svg = document.createElementNS(SVG_NAMESPACE, \"svg\");\n  for (const [name, value] of Object.entries({\n    width: \"20\",\n    height: \"20\",\n    viewBox: \"0 0 24 24\",\n    fill: \"none\",\n    stroke: \"currentColor\",\n    \"stroke-width\": \"2\",\n    \"stroke-linecap\": \"round\",\n    \"stroke-linejoin\": \"round\",\n    \"aria-hidden\": \"true\",\n  })) {\n    svg.setAttribute(name, value);\n  }\n  svg.style.display = \"block\";\n  for (const data of [\n    [\n      \"path\",\n      \"d\",\n      \"M15 22a1 1 0 0 1-1-1v-4a1 1 0 0 1 .445-.832l3-2a1 1 0 0 1 1.11 0l3 2A1 1 0 0 1 22 17v4a1 1 0 0 1-1 1z\",\n    ],\n    [\n      \"path\",\n      \"d\",\n      \"M18 10a8 8 0 0 0-16 0c0 4.993 5.539 10.193 7.399 11.799a1 1 0 0 0 .601.2\",\n    ],\n    [\"path\", \"d\", \"M18 22v-3\"],\n    [\"circle\", \"cx\", \"10\"],\n  ] as const) {\n    const child = document.createElementNS(SVG_NAMESPACE, data[0]);\n    child.setAttribute(data[1], data[2]);\n    if (data[0] === \"circle\") {\n      child.setAttribute(\"cy\", \"10\");\n      child.setAttribute(\"r\", \"3\");\n    }\n    svg.appendChild(child);\n  }\n  return svg;\n}\n\n/** Style a marker element in place, so selection changes keep the same node. */\nexport function paintMarker(\n  element: HTMLElement,\n  spec: MarkerSpec,\n  colors: MapColors,\n) {\n  const { left, top } = element.style;\n  try {\n    paint(element, spec, colors);\n  } finally {\n    element.style.left = left;\n    element.style.top = top;\n  }\n}\n\nfunction paint(element: HTMLElement, spec: MarkerSpec, colors: MapColors) {\n  element.dataset.marker = spec.kind;\n  if (spec.kind === \"logo\") {\n    const lift = spec.lift ?? MARKER_BOX / 2;\n    element.style.cssText = `position:absolute;box-sizing:border-box;transform:translate(-50%,calc(-50% - ${lift}px));width:${spec.size}px;height:${spec.size}px;padding:0;border-radius:9999px;overflow:hidden;border:2px solid white;background:white;box-shadow:${spec.shadow === \"md\" ? SHADOW_MD : SHADOW_SM};cursor:pointer;transition:width 150ms cubic-bezier(0.4,0,0.2,1),height 150ms cubic-bezier(0.4,0,0.2,1)`;\n    let image = element.querySelector(\"img\");\n    if (!image) {\n      element.replaceChildren();\n      image = document.createElement(\"img\");\n      image.alt = \"\";\n      image.decoding = \"async\";\n      image.draggable = false;\n      image.onerror = () => {\n        image!.style.visibility = \"hidden\";\n      };\n      element.appendChild(image);\n    }\n    image.style.cssText =\n      \"display:block;width:100%;height:100%;border-radius:9999px;object-fit:cover\";\n    if (image.getAttribute(\"src\") !== spec.imageUrl) {\n      image.src = spec.imageUrl;\n    }\n    return;\n  }\n  if (spec.kind === \"dot\") {\n    element.replaceChildren();\n    element.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(${spec.selected ? \"--branch-map-pin-selected\" : \"--branch-map-pin\"},currentColor);cursor:pointer`;\n    return;\n  }\n  element.style.cssText = `position:absolute;box-sizing:border-box;transform:translate(-50%,calc(-50% - ${spec.lift ?? MARKER_BOX / 2}px));width:32px;height:32px;padding:4px;border-radius:4px;border:2px solid white;background:${colors.accent};color:${spec.color};box-shadow:${SHADOW_MD}`;\n  if (!element.firstChild) {\n    element.appendChild(houseIcon());\n  }\n}\n\n/** Style a label above a marker. Branch labels are capitalised like the default storefront's. */\nexport function paintLabel(\n  element: HTMLElement,\n  options: { offset: string; capitalize: boolean; colors: MapColors },\n) {\n  const { left, top } = element.style;\n  element.style.cssText = `position:absolute;box-sizing:border-box;transform:translate(-50%,calc(-100% - ${options.offset}));white-space:nowrap;pointer-events:none;padding:4px 8px;border-radius:8px;font-size:12px;line-height:16px;font-weight:500;${options.capitalize ? \"text-transform:capitalize;\" : \"\"}background:var(--branch-map-label-background,white);color:var(--branch-map-label-color,#111);border:2px solid var(--branch-map-label-border,${options.colors.accent});box-shadow:${SHADOW_MD}`;\n  element.style.left = left;\n  element.style.top = top;\n}\n\n/** Offset from the location to the bottom of a label above a marker. */\nexport function labelOffset(spec: MarkerSpec) {\n  return spec.kind === \"dot\"\n    ? `var(--branch-map-pin-size,24px) + ${LABEL_GAP}px`\n    : `${MARKER_BOX + LABEL_GAP}px`;\n}\n\nexport type MarkerOverlay = google.maps.OverlayView & {\n  readonly element: HTMLElement;\n  readonly label: HTMLElement;\n  /** The clusterer reads markers through these two methods. */\n  getPosition(): google.maps.LatLng;\n  getVisible(): boolean;\n  setLabel(text: string | undefined): void;\n  setPosition(position: Coordinates): void;\n};\n\n/**\n * An overlay that places one element (a button or a div) and an optional\n * label at a location. The DOM nodes persist across restyles.\n */\nexport function markerOverlayClass(\n  maps: typeof google.maps,\n): new (\n  key: string,\n  position: Coordinates,\n  element: HTMLElement,\n) => MarkerOverlay {\n  return class Marker extends maps.OverlayView implements MarkerOverlay {\n    // Declared first so two markers compare unequal at once (the clusterer deep-compares them).\n    readonly key: string;\n    readonly element: HTMLElement;\n    readonly label: HTMLElement;\n    #position: Coordinates;\n    #pane: Element | undefined;\n    constructor(key: string, position: Coordinates, element: HTMLElement) {\n      super();\n      this.key = key;\n      this.element = element;\n      this.#position = position;\n      this.label = document.createElement(\"span\");\n      this.label.setAttribute(\"aria-hidden\", \"true\");\n    }\n    getPosition() {\n      return new maps.LatLng(this.#position);\n    }\n    getVisible() {\n      return true;\n    }\n    setPosition(position: Coordinates) {\n      this.#position = position;\n      if (this.getMap()) {\n        this.draw();\n      }\n    }\n    // An unlabelled marker has no label node in the map.\n    setLabel(text: string | undefined) {\n      this.label.textContent = text ?? \"\";\n      if (!text) {\n        this.label.remove();\n      } else if (this.#pane && !this.label.isConnected) {\n        this.#pane.appendChild(this.label);\n      }\n    }\n    onAdd() {\n      this.#pane = this.getPanes()?.overlayMouseTarget;\n      this.#pane?.appendChild(this.element);\n      if (this.label.textContent) {\n        this.#pane?.appendChild(this.label);\n      }\n      maps.OverlayView.preventMapHitsAndGesturesFrom(this.element);\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.element, this.label]) {\n          node.style.left = `${point.x}px`;\n          node.style.top = `${point.y}px`;\n        }\n      }\n    }\n    onRemove() {\n      this.#pane = undefined;\n      this.element.remove();\n      this.label.remove();\n    }\n  };\n}\n"],
+  "mappings": "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",
+  "names": []
+}