efficient-shell 4.137.0 → 4.137.1

package/dist/map/index.js

@@ -1,541 +1,21 @@
 "use client";
-import { Button_default } from '../chunk-RT6DSB5Y.js';
-import { rootIsDark, ROOT_THEME_ATTRIBUTES } from '../chunk-IPXN646P.js';
-import { useRef, useState, useEffect, useCallback, useMemo, useSyncExternalStore } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useQuery } from '@tanstack/react-query';
-
-// src/map/attribution.ts
-var COMPACT_SHOW = "maplibregl-compact-show";
-function foldAttributionOnce(control) {
-  if (!control) return () => {
-  };
-  const fold = () => {
-    if (!control.classList.contains(COMPACT_SHOW)) return false;
-    control.classList.remove(COMPACT_SHOW);
-    return true;
-  };
-  if (fold()) return () => {
-  };
-  const watcher = new MutationObserver(() => {
-    if (fold()) watcher.disconnect();
-  });
-  watcher.observe(control, { attributes: true, attributeFilter: ["class"] });
-  return () => watcher.disconnect();
-}
-
-// src/map/maplibre.ts
-var MAPLIBRE_WORKER_FILE = "maplibre-gl-worker.mjs";
-var mapLibreWorkerUrl = (version) => `/maplibre-gl/${version}/${MAPLIBRE_WORKER_FILE}`;
-var loading = null;
-function loadMapLibre() {
-  loading ??= Promise.all([import('maplibre-gl'), import('maplibre-gl/dist/maplibre-gl.css')]).then(([maplibre]) => {
-    maplibre.setWorkerUrl(mapLibreWorkerUrl(maplibre.getVersion()));
-    return maplibre;
-  }).catch((error) => {
-    loading = null;
-    throw error;
-  });
-  return loading;
-}
-function subscribe(onChange) {
-  const watcher = new MutationObserver(onChange);
-  watcher.observe(document.documentElement, { attributes: true, attributeFilter: ROOT_THEME_ATTRIBUTES });
-  return () => watcher.disconnect();
-}
-var isDark = rootIsDark;
-function useDarkTheme() {
-  return useSyncExternalStore(subscribe, isDark, () => false);
-}
-var ROUTE_SOURCE = "routes";
-function accentColor() {
-  const probe = document.createElement("span");
-  probe.className = "text-blue-600";
-  probe.style.display = "none";
-  document.body.appendChild(probe);
-  const color = getComputedStyle(probe).color || "#2563eb";
-  probe.remove();
-  return toRgb(color);
-}
-function toRgb(css) {
-  const ctx = document.createElement("canvas").getContext("2d");
-  if (!ctx) return "#2563eb";
-  ctx.fillStyle = "#2563eb";
-  ctx.fillStyle = css;
-  ctx.fillRect(0, 0, 1, 1);
-  const [r, g, b] = ctx.getImageData(0, 0, 1, 1).data;
-  return `rgb(${r}, ${g}, ${b})`;
-}
-var STYLES = {
-  light: "https://tiles.openfreemap.org/styles/positron",
-  dark: "https://tiles.openfreemap.org/styles/dark"
-};
-var WORLD = { center: [30, 20], zoom: 1 };
-var SVG_NS = "http://www.w3.org/2000/svg";
-function iconElement(paths, selected) {
-  const svg = document.createElementNS(SVG_NS, "svg");
-  svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("fill", "none");
-  svg.setAttribute("stroke", "currentColor");
-  svg.setAttribute("stroke-width", "2");
-  svg.setAttribute("aria-hidden", "true");
-  svg.setAttribute("class", selected ? "h-4 w-4" : "h-3.5 w-3.5");
-  for (const d of paths) {
-    const path = document.createElementNS(SVG_NS, "path");
-    path.setAttribute("stroke-linecap", "round");
-    path.setAttribute("stroke-linejoin", "round");
-    path.setAttribute("d", d);
-    svg.appendChild(path);
-  }
-  return svg;
-}
-function pinElement(pin, selected) {
-  const el = document.createElement("button");
-  el.type = "button";
-  el.title = pin.approximate ? `${pin.label} (approximate)` : pin.label;
-  el.setAttribute("aria-label", pin.approximate ? `${pin.label}, approximate location` : pin.label);
-  el.dataset.pin = pin.key;
-  el.className = [
-    "relative grid place-items-center rounded-full border-2 border-white font-semibold leading-none shadow-md cursor-pointer",
-    pin.tone,
-    selected ? "h-8 w-8 text-xs ring-2 ring-gray-900 ring-offset-1" : "h-6 w-6 text-[10px]",
-    pin.approximate ? "border-dashed opacity-80" : "",
-    pin.faded && !selected ? "opacity-40" : ""
-  ].join(" ");
-  if (pin.icon?.length) el.appendChild(iconElement(pin.icon, selected));
-  else el.textContent = pin.glyph;
-  if (pin.badge) {
-    const badge = document.createElement("span");
-    badge.setAttribute("aria-hidden", "true");
-    badge.className = [
-      "absolute -right-2 -top-2 grid h-4 min-w-4 place-items-center rounded-full px-0.5 text-[9px] font-semibold leading-none shadow",
-      pin.badgeTone ?? "bg-white text-gray-900"
-    ].join(" ");
-    badge.textContent = pin.badge;
-    el.appendChild(badge);
-  }
-  return el;
-}
-function EntityMap({
-  pins,
-  selectedKey,
-  focus,
-  onSelect,
-  ariaLabel,
-  className = "",
-  children,
-  routes,
-  fitTo,
-  attribution
-}) {
-  const box = useRef(null);
-  const map = useRef(null);
-  const lib = useRef(null);
-  const markers = useRef([]);
-  const fitted = useRef("");
-  const [ready, setReady] = useState(false);
-  const [failed, setFailed] = useState(false);
-  const theme = useDarkTheme() ? "dark" : "light";
-  const latest = useRef({ onSelect, pins, selectedKey });
-  useEffect(() => {
-    latest.current = { onSelect, pins, selectedKey };
-  });
-  const revealSelected = useCallback(() => {
-    const m = map.current;
-    const { pins: shown, selectedKey: chosen } = latest.current;
-    const pin = chosen ? shown.find((p) => p.key === chosen) : void 0;
-    if (!m || !pin || m.getBounds().contains([pin.lng, pin.lat])) return;
-    const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-    m.easeTo({ center: [pin.lng, pin.lat], duration: reduced ? 0 : 400 });
-  }, []);
-  useEffect(() => {
-    let cancelled = false;
-    let created = null;
-    let observer = null;
-    let unfoldWatch = () => {
-    };
-    void (async () => {
-      try {
-        const maplibre = await loadMapLibre();
-        if (cancelled || !box.current) return;
-        lib.current = maplibre;
-        created = new maplibre.Map({
-          container: box.current,
-          style: STYLES[theme],
-          center: WORLD.center,
-          zoom: WORLD.zoom,
-          attributionControl: attribution ? { compact: true, customAttribution: attribution } : { compact: true },
-          dragRotate: false,
-          pitchWithRotate: false,
-          touchPitch: false,
-          maxPitch: 0
-        });
-        created.touchZoomRotate.disableRotation();
-        created.keyboard.disableRotation();
-        created.addControl(new maplibre.NavigationControl({ showCompass: false }), "top-right");
-        created.on("error", (event) => console.warn("[map]", event.error?.message));
-        unfoldWatch = foldAttributionOnce(box.current.querySelector(".maplibregl-ctrl-attrib"));
-        const current = created;
-        observer = new ResizeObserver(() => {
-          current.resize();
-          revealSelected();
-        });
-        observer.observe(box.current);
-        map.current = created;
-        setReady(true);
-      } catch (error) {
-        console.error("[map] could not start", error);
-        if (!cancelled) setFailed(true);
-      }
-    })();
-    return () => {
-      cancelled = true;
-      observer?.disconnect();
-      unfoldWatch();
-      markers.current.forEach((m) => m.remove());
-      markers.current = [];
-      created?.remove();
-      map.current = null;
-    };
-  }, []);
-  const shownTheme = useRef(theme);
-  useEffect(() => {
-    if (!ready || !map.current || shownTheme.current === theme) return;
-    shownTheme.current = theme;
-    map.current.setStyle(STYLES[theme]);
-  }, [ready, theme]);
-  useEffect(() => {
-    const m = map.current;
-    const maplibre = lib.current;
-    if (!ready || !m || !maplibre) return;
-    markers.current.forEach((marker) => marker.remove());
-    markers.current = [];
-    const ordered = [...pins].sort((a, b) => Number(a.key === selectedKey) - Number(b.key === selectedKey));
-    for (const pin of ordered) {
-      const el = pinElement(pin, pin.key === selectedKey);
-      el.addEventListener("click", (event) => {
-        event.stopPropagation();
-        latest.current.onSelect(pin.key);
-      });
-      markers.current.push(new maplibre.Marker({ element: el, anchor: "center" }).setLngLat([pin.lng, pin.lat]).addTo(m));
-    }
-  }, [ready, pins, selectedKey]);
-  useEffect(() => {
-    if (!ready || !selectedKey) return;
-    const frame = requestAnimationFrame(revealSelected);
-    return () => cancelAnimationFrame(frame);
-  }, [ready, selectedKey, revealSelected]);
-  useEffect(() => {
-    const m = map.current;
-    const maplibre = lib.current;
-    const target = fitTo ? pins.filter((p) => fitTo.includes(p.key)) : pins;
-    if (!ready || !m || !maplibre || target.length === 0) return;
-    const key = target.map((p) => `${p.key}@${p.lat},${p.lng}`).sort().join("|");
-    if (fitted.current === key) return;
-    const first = fitted.current === "";
-    fitted.current = key;
-    if (target.length === 1) {
-      m.jumpTo({ center: [target[0].lng, target[0].lat], zoom: 13 });
-      return;
-    }
-    const bounds = new maplibre.LngLatBounds([target[0].lng, target[0].lat], [target[0].lng, target[0].lat]);
-    for (const p of target) bounds.extend([p.lng, p.lat]);
-    m.fitBounds(bounds, { padding: 48, maxZoom: 14, animate: !first });
-  }, [ready, pins, fitTo]);
-  useEffect(() => {
-    const m = map.current;
-    if (!ready || !m) return;
-    const data = {
-      type: "FeatureCollection",
-      features: (routes ?? []).filter((r) => r.coordinates.length >= 2).map((r) => ({
-        type: "Feature",
-        properties: { key: r.key, estimate: r.estimate, faded: !!r.faded },
-        geometry: { type: "LineString", coordinates: r.coordinates }
-      }))
-    };
-    const draw = () => {
-      const color = accentColor();
-      const opacity = ["case", ["get", "faded"], 0.25, 0.85];
-      const source = m.getSource(ROUTE_SOURCE);
-      if (source) source.setData(data);
-      else m.addSource(ROUTE_SOURCE, { type: "geojson", data });
-      if (m.getLayer("routes-road")) m.setPaintProperty("routes-road", "line-color", color);
-      else m.addLayer({
-        id: "routes-road",
-        type: "line",
-        source: ROUTE_SOURCE,
-        filter: ["!", ["get", "estimate"]],
-        layout: { "line-join": "round", "line-cap": "round" },
-        paint: { "line-color": color, "line-width": 4, "line-opacity": opacity }
-      });
-      if (m.getLayer("routes-estimate")) m.setPaintProperty("routes-estimate", "line-color", color);
-      else m.addLayer({
-        id: "routes-estimate",
-        type: "line",
-        source: ROUTE_SOURCE,
-        filter: ["get", "estimate"],
-        layout: { "line-join": "round", "line-cap": "round" },
-        paint: { "line-color": color, "line-width": 3, "line-dasharray": [1.5, 1.5], "line-opacity": opacity }
-      });
-    };
-    const tryDraw = () => {
-      try {
-        draw();
-      } catch (error) {
-        console.debug("[map] routes wait for the style", error);
-      }
-    };
-    tryDraw();
-    m.on("style.load", tryDraw);
-    m.once("idle", tryDraw);
-    return () => {
-      m.off("style.load", tryDraw);
-      m.off("idle", tryDraw);
-    };
-  }, [ready, routes, theme]);
-  useEffect(() => {
-    const m = map.current;
-    if (!ready || !m || !focus) return;
-    const pin = pins.find((p) => p.key === focus.key);
-    if (!pin) return;
-    const to = { center: [pin.lng, pin.lat], zoom: Math.max(m.getZoom(), 13) };
-    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) m.jumpTo(to);
-    else m.flyTo({ ...to, duration: 600 });
-  }, [ready, focus?.n]);
-  return /* @__PURE__ */ jsxs("div", { className: `relative min-h-72 overflow-hidden rounded-lg border border-gray-200 bg-gray-100 ${className}`, children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0", children: /* @__PURE__ */ jsx("div", { ref: box, className: "h-full w-full", role: "region", "aria-label": ariaLabel }) }),
-    failed && /* @__PURE__ */ jsx("p", { className: "absolute inset-0 grid place-items-center p-6 text-center text-sm text-gray-500", children: "The map could not be drawn here. The list has everything it shows." }),
-    children
-  ] });
-}
-
-// src/map/points.ts
-var PENDING_POLL_MS = 3e3;
-var mapPointsRefetchInterval = (data) => data?.pending ? PENDING_POLL_MS : false;
-var pointKey = (p) => `${p.kind}:${p.id}`;
-var isOnMap = (p) => (p.placement === "located" || p.placement === "approximate") && p.lat != null && p.lng != null;
-function placementNote(placement) {
-  switch (placement) {
-    case "located":
-      return null;
-    case "approximate":
-      return "Approximate: only the suburb or postcode matched";
-    case "pending":
-      return "Locating\u2026";
-    case "not_found":
-      return "Not on the map: address not found";
-    case "failed":
-      return "Not on the map: the map service could not be reached";
-    case "no_address":
-      return "Not on the map: no city or postcode";
-  }
-}
-var MAP_CATEGORIES = {
-  importer: { label: "Importer", tone: "bg-sky-600 text-white" },
-  dealer: { label: "Dealer", tone: "bg-purple-600 text-white" },
-  retail: { label: "Retail", tone: "bg-green-600 text-white" },
-  supplier: { label: "Supplier", tone: "bg-sky-600 text-white" },
-  delivery_location: { label: "Delivery location", tone: "bg-amber-600 text-white" },
-  warehouse: { label: "Warehouse", tone: "bg-amber-600 text-white" }
-};
-var DEFAULT_TONE = "bg-gray-700 text-white";
-var CATEGORY_ORDER = ["importer", "dealer", "retail", "supplier", "delivery_location", "warehouse"];
-function pinCategory(p) {
-  if (p.kind === "supplier") return "supplier";
-  if (p.kind === "customer") return p.category || "importer";
-  return p.kind;
-}
-var categoryTone = (category, categories = MAP_CATEGORIES) => categories[category]?.tone ?? DEFAULT_TONE;
-var categoryLabel = (category, categories = MAP_CATEGORIES) => categories[category]?.label ?? category;
-var pinTone = (p, categories) => categoryTone(pinCategory(p), categories);
-function pinGlyph(p, number, categories = MAP_CATEGORIES) {
-  if (number != null) return String(number);
-  return (categories[pinCategory(p)]?.label ?? "").charAt(0).toUpperCase();
-}
-var SECONDARY_KINDS = ["delivery_location", "warehouse"];
-function locationNumbers(points, kinds = SECONDARY_KINDS) {
-  const numbers = /* @__PURE__ */ new Map();
-  let n = 0;
-  for (const p of points) {
-    if (kinds.includes(p.kind)) numbers.set(pointKey(p), ++n);
-  }
-  return numbers;
-}
-function summarize(points) {
-  const summary = { onMap: 0, approximate: 0, pending: 0, off: 0 };
-  for (const p of points) {
-    if (isOnMap(p)) {
-      summary.onMap += 1;
-      if (p.placement === "approximate") summary.approximate += 1;
-    } else if (p.placement === "pending") summary.pending += 1;
-    else summary.off += 1;
-  }
-  return summary;
-}
-function summaryText(s) {
-  const parts = [`${s.onMap} on the map`];
-  if (s.approximate) parts.push(`${s.approximate} approximate`);
-  if (s.pending) parts.push(`${s.pending} locating`);
-  if (s.off) parts.push(`${s.off} not on the map`);
-  return parts.join(" \xB7 ");
-}
-function legendCategories(points) {
-  const present = [...new Set(points.filter(isOnMap).map(pinCategory))];
-  const known = CATEGORY_ORDER.filter((c) => present.includes(c));
-  return [...known, ...present.filter((c) => !CATEGORY_ORDER.includes(c))];
-}
-function offMapNotes(points, numbers) {
-  return points.filter((p) => !isOnMap(p) && p.placement !== "pending").map((p) => {
-    const n = numbers?.get(pointKey(p));
-    const note = placementNote(p.placement)?.replace(/^Not on the map: /, "") ?? "";
-    return { key: pointKey(p), text: `${n != null ? `${n}. ` : ""}${p.label}: ${note}` };
-  });
-}
-function MapLegend({ categories, palette = MAP_CATEGORIES, floating = true }) {
-  if (categories.length < 2) return null;
-  return /* @__PURE__ */ jsx("div", { className: `${floating ? "absolute left-3 top-3 z-10 " : ""}flex flex-wrap gap-x-3 gap-y-1 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs text-gray-600 shadow-sm`, children: categories.map((c) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
-    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: `h-2.5 w-2.5 rounded-full ${categoryTone(c, palette)}` }),
-    categoryLabel(c, palette)
-  ] }, c)) });
-}
-function SelectedCard({ point, number, onOpen, onClose, palette = MAP_CATEGORIES }) {
-  const note = placementNote(point.placement);
-  const category = pinCategory(point);
-  return /* @__PURE__ */ jsxs(
-    "section",
-    {
-      "aria-label": `${point.label}, chosen on the map`,
-      className: "absolute bottom-3 left-3 right-3 z-10 max-w-md space-y-1.5 rounded-lg border border-gray-200 bg-white p-3 shadow-md",
-      children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-            /* @__PURE__ */ jsxs("h3", { className: "text-sm font-semibold text-gray-900 [overflow-wrap:anywhere]", children: [
-              number != null && /* @__PURE__ */ jsxs("span", { className: "mr-1 text-gray-400", children: [
-                number,
-                "."
-              ] }),
-              point.label,
-              point.code && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs font-normal text-gray-400", children: point.code })
-            ] }),
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: palette[category] ? categoryLabel(category, palette) : point.category })
-          ] }),
-          /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "rounded p-0.5 text-gray-400 hover:text-gray-600", children: /* @__PURE__ */ jsx("svg", { "aria-hidden": true, className: "h-4 w-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" }) }) })
-        ] }),
-        /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-700 [overflow-wrap:anywhere]", children: point.address || "\u2014" }),
-        note && /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500", children: note }),
-        point.matched && point.placement === "approximate" && /* @__PURE__ */ jsxs("p", { className: "text-xs text-gray-400 [overflow-wrap:anywhere]", children: [
-          "Placed at: ",
-          point.matched
-        ] }),
-        onOpen && /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(Button_default, { variant: "secondary", size: "sm", onClick: onOpen, children: "Open" }) })
-      ]
-    }
-  );
-}
-function useMapPoints(queryKey, queryFn, { staleTime } = {}) {
-  return useQuery({
-    queryKey,
-    queryFn,
-    staleTime,
-    refetchInterval: (query) => mapPointsRefetchInterval(query.state.data)
-  });
-}
-var NOTES_SHOWN = 3;
-function LocationsMap({
-  queryKey,
-  queryFn,
-  refreshSignal,
-  onOpen,
-  ariaLabel,
-  title = "Locations",
-  palette = MAP_CATEGORIES,
-  numbers: givenNumbers,
-  className = "",
-  mapClassName = "min-h-[240px] flex-1"
-}) {
-  const { data, isError, refetch } = useMapPoints(queryKey, queryFn, { staleTime: 0 });
-  const mounted = useRef(false);
-  useEffect(() => {
-    if (!mounted.current) {
-      mounted.current = true;
-      return;
-    }
-    void refetch();
-  }, [refreshSignal]);
-  const [selectedKey, setSelectedKey] = useState(null);
-  const points = useMemo(() => data?.points ?? [], [data]);
-  const numbers = useMemo(() => givenNumbers ?? locationNumbers(points), [givenNumbers, points]);
-  const pins = useMemo(() => points.filter(isOnMap).map((p) => ({
-    key: pointKey(p),
-    label: p.label,
-    lat: p.lat,
-    lng: p.lng,
-    glyph: pinGlyph(p, numbers.get(pointKey(p)) ?? null, palette),
-    tone: pinTone(p, palette),
-    approximate: p.placement === "approximate"
-  })), [points, numbers, palette]);
-  const notes = useMemo(() => offMapNotes(points, numbers), [points, numbers]);
-  const legend = useMemo(() => legendCategories(points), [points]);
-  const pending = data?.pending ?? 0;
-  const selected = points.find((p) => pointKey(p) === selectedKey) ?? null;
-  const open = selected && onOpen ? onOpen(selected) : null;
-  return /* @__PURE__ */ jsxs("section", { "aria-label": title, className: `flex min-w-0 flex-col ${className}`, children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex min-h-[30px] items-center justify-between mb-2", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-900", children: title }),
-      data && /* @__PURE__ */ jsx("span", { className: "text-xs text-gray-500", children: summaryText(summarize(points)) })
-    ] }),
-    /* @__PURE__ */ jsxs(
-      EntityMap,
-      {
-        pins,
-        selectedKey,
-        focus: null,
-        onSelect: setSelectedKey,
-        ariaLabel,
-        className: mapClassName,
-        children: [
-          /* @__PURE__ */ jsxs("div", { className: "absolute left-3 top-3 z-10 flex max-w-[70%] flex-col items-start gap-1.5", children: [
-            /* @__PURE__ */ jsx(MapLegend, { categories: legend, palette, floating: false }),
-            isError && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs text-gray-600 shadow-sm", children: [
-              "Couldn\u2019t load the locations.",
-              /* @__PURE__ */ jsx("button", { type: "button", onClick: () => void refetch(), className: "font-medium text-blue-600 hover:text-blue-800 hover:underline", children: "Try again" })
-            ] }),
-            !isError && (pending > 0 || notes.length > 0) && /* @__PURE__ */ jsxs("div", { className: "max-w-full space-y-0.5 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs shadow-sm", "aria-live": "polite", children: [
-              pending > 0 && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1.5 text-gray-500", children: [
-                /* @__PURE__ */ jsxs("svg", { className: "h-3 w-3 animate-spin", fill: "none", viewBox: "0 0 24 24", children: [
-                  /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
-                  /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })
-                ] }),
-                "Locating ",
-                pending,
-                " address",
-                pending === 1 ? "" : "es",
-                "\u2026"
-              ] }),
-              notes.slice(0, NOTES_SHOWN).map((n) => /* @__PURE__ */ jsx("p", { className: "truncate text-amber-700", title: n.text, children: n.text }, n.key)),
-              notes.length > NOTES_SHOWN && /* @__PURE__ */ jsxs("p", { className: "text-gray-500", children: [
-                "+",
-                notes.length - NOTES_SHOWN,
-                " more not on the map"
-              ] })
-            ] })
-          ] }),
-          selected && /* @__PURE__ */ jsx(
-            SelectedCard,
-            {
-              point: selected,
-              number: numbers.get(pointKey(selected)) ?? null,
-              onOpen: open,
-              onClose: () => setSelectedKey(null),
-              palette
-            }
-          )
-        ]
-      }
-    )
-  ] });
-}
-
-export { COMPACT_SHOW, EntityMap, LocationsMap, MAPLIBRE_WORKER_FILE, MAP_CATEGORIES, MapLegend, PENDING_POLL_MS, SECONDARY_KINDS, SelectedCard, categoryLabel, categoryTone, foldAttributionOnce, isOnMap, legendCategories, loadMapLibre, locationNumbers, mapLibreWorkerUrl, mapPointsRefetchInterval, offMapNotes, pinCategory, pinGlyph, pinTone, placementNote, pointKey, summarize, summaryText, useMapPoints };
-//# sourceMappingURL=index.js.map
-//# sourceMappingURL=index.js.map
+import{Button_default as e}from"../chunk-PH3PRIFP.js";import{rootIsDark as t,ROOT_THEME_ATTRIBUTES as r}from"../chunk-MAIHBBWT.js";import{useRef as n,useState as a,useEffect as o,useCallback as l,useMemo as i,useSyncExternalStore as s}from"react";import{jsxs as c,jsx as d}from"react/jsx-runtime";import{useQuery as u}from"@tanstack/react-query";var p="maplibregl-compact-show";function m(e){if(!e)return()=>{};const t=()=>!!e.classList.contains(p)&&(e.classList.remove(p),!0);if(t())return()=>{};const r=new MutationObserver(()=>{t()&&r.disconnect()});return r.observe(e,{attributes:!0,attributeFilter:["class"]}),()=>r.disconnect()}var h="maplibre-gl-worker.mjs",g=e=>`/maplibre-gl/${e}/${h}`,f=null;function b(){return f??=Promise.all([import("maplibre-gl"),import("maplibre-gl/dist/maplibre-gl.css")]).then(([e])=>(e.setWorkerUrl(g(e.getVersion())),e)).catch(e=>{throw f=null,e}),f}function y(e){const t=new MutationObserver(e);return t.observe(document.documentElement,{attributes:!0,attributeFilter:r}),()=>t.disconnect()}var x=t;var w="routes";function v(){const e=document.createElement("span");e.className="text-blue-600",e.style.display="none",document.body.appendChild(e);const t=getComputedStyle(e).color||"#2563eb";return e.remove(),function(e){const t=document.createElement("canvas").getContext("2d");if(!t)return"#2563eb";t.fillStyle="#2563eb",t.fillStyle=e,t.fillRect(0,0,1,1);const[r,n,a]=t.getImageData(0,0,1,1).data;return`rgb(${r}, ${n}, ${a})`}(t)}var N={light:"https://tiles.openfreemap.org/styles/positron",dark:"https://tiles.openfreemap.org/styles/dark"},k={center:[30,20],zoom:1},C="http://www.w3.org/2000/svg";function $(e,t){const r=document.createElement("button");if(r.type="button",r.title=e.approximate?`${e.label} (approximate)`:e.label,r.setAttribute("aria-label",e.approximate?`${e.label}, approximate location`:e.label),r.dataset.pin=e.key,r.className=["relative grid place-items-center rounded-full border-2 border-white font-semibold leading-none shadow-md cursor-pointer",e.tone,t?"h-8 w-8 text-xs ring-2 ring-gray-900 ring-offset-1":"h-6 w-6 text-[10px]",e.approximate?"border-dashed opacity-80":"",e.faded&&!t?"opacity-40":""].join(" "),e.icon?.length?r.appendChild(function(e,t){const r=document.createElementNS(C,"svg");r.setAttribute("viewBox","0 0 24 24"),r.setAttribute("fill","none"),r.setAttribute("stroke","currentColor"),r.setAttribute("stroke-width","2"),r.setAttribute("aria-hidden","true"),r.setAttribute("class",t?"h-4 w-4":"h-3.5 w-3.5");for(const t of e){const e=document.createElementNS(C,"path");e.setAttribute("stroke-linecap","round"),e.setAttribute("stroke-linejoin","round"),e.setAttribute("d",t),r.appendChild(e)}return r}(e.icon,t)):r.textContent=e.glyph,e.badge){const t=document.createElement("span");t.setAttribute("aria-hidden","true"),t.className=["absolute -right-2 -top-2 grid h-4 min-w-4 place-items-center rounded-full px-0.5 text-[9px] font-semibold leading-none shadow",e.badgeTone??"bg-white text-gray-900"].join(" "),t.textContent=e.badge,r.appendChild(t)}return r}function L({pins:e,selectedKey:t,focus:r,onSelect:i,ariaLabel:u,className:p="",children:h,routes:g,fitTo:f,attribution:C}){const L=n(null),S=n(null),j=n(null),A=n([]),M=n(""),[T,z]=a(!1),[P,E]=a(!1),F=s(y,x,()=>!1)?"dark":"light",R=n({onSelect:i,pins:e,selectedKey:t});o(()=>{R.current={onSelect:i,pins:e,selectedKey:t}});const B=l(()=>{const e=S.current,{pins:t,selectedKey:r}=R.current,n=r?t.find(e=>e.key===r):void 0;if(!e||!n||e.getBounds().contains([n.lng,n.lat]))return;const a=window.matchMedia("(prefers-reduced-motion: reduce)").matches;e.easeTo({center:[n.lng,n.lat],duration:a?0:400})},[]);o(()=>{let e=!1,t=null,r=null,n=()=>{};return(async()=>{try{const a=await b();if(e||!L.current)return;j.current=a,t=new a.Map({container:L.current,style:N[F],center:k.center,zoom:k.zoom,attributionControl:C?{compact:!0,customAttribution:C}:{compact:!0},dragRotate:!1,pitchWithRotate:!1,touchPitch:!1,maxPitch:0}),t.touchZoomRotate.disableRotation(),t.keyboard.disableRotation(),t.addControl(new a.NavigationControl({showCompass:!1}),"top-right"),t.on("error",e=>console.warn("[map]",e.error?.message)),n=m(L.current.querySelector(".maplibregl-ctrl-attrib"));const o=t;r=new ResizeObserver(()=>{o.resize(),B()}),r.observe(L.current),S.current=t,z(!0)}catch(t){console.error("[map] could not start",t),e||E(!0)}})(),()=>{e=!0,r?.disconnect(),n(),A.current.forEach(e=>e.remove()),A.current=[],t?.remove(),S.current=null}},[]);const q=n(F);return o(()=>{T&&S.current&&q.current!==F&&(q.current=F,S.current.setStyle(N[F]))},[T,F]),o(()=>{const r=S.current,n=j.current;if(!T||!r||!n)return;A.current.forEach(e=>e.remove()),A.current=[];const a=[...e].sort((e,r)=>Number(e.key===t)-Number(r.key===t));for(const e of a){const a=$(e,e.key===t);a.addEventListener("click",t=>{t.stopPropagation(),R.current.onSelect(e.key)}),A.current.push(new n.Marker({element:a,anchor:"center"}).setLngLat([e.lng,e.lat]).addTo(r))}},[T,e,t]),o(()=>{if(!T||!t)return;const e=requestAnimationFrame(B);return()=>cancelAnimationFrame(e)},[T,t,B]),o(()=>{const t=S.current,r=j.current,n=f?e.filter(e=>f.includes(e.key)):e;if(!T||!t||!r||0===n.length)return;const a=n.map(e=>`${e.key}@${e.lat},${e.lng}`).sort().join("|");if(M.current===a)return;const o=""===M.current;if(M.current=a,1===n.length)return void t.jumpTo({center:[n[0].lng,n[0].lat],zoom:13});const l=new r.LngLatBounds([n[0].lng,n[0].lat],[n[0].lng,n[0].lat]);for(const e of n)l.extend([e.lng,e.lat]);t.fitBounds(l,{padding:48,maxZoom:14,animate:!o})},[T,e,f]),o(()=>{const e=S.current;if(!T||!e)return;const t={type:"FeatureCollection",features:(g??[]).filter(e=>e.coordinates.length>=2).map(e=>({type:"Feature",properties:{key:e.key,estimate:e.estimate,faded:!!e.faded},geometry:{type:"LineString",coordinates:e.coordinates}}))},r=()=>{try{(()=>{const r=v(),n=["case",["get","faded"],.25,.85],a=e.getSource(w);a?a.setData(t):e.addSource(w,{type:"geojson",data:t}),e.getLayer("routes-road")?e.setPaintProperty("routes-road","line-color",r):e.addLayer({id:"routes-road",type:"line",source:w,filter:["!",["get","estimate"]],layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":r,"line-width":4,"line-opacity":n}}),e.getLayer("routes-estimate")?e.setPaintProperty("routes-estimate","line-color",r):e.addLayer({id:"routes-estimate",type:"line",source:w,filter:["get","estimate"],layout:{"line-join":"round","line-cap":"round"},paint:{"line-color":r,"line-width":3,"line-dasharray":[1.5,1.5],"line-opacity":n}})})()}catch(e){console.debug("[map] routes wait for the style",e)}};return r(),e.on("style.load",r),e.once("idle",r),()=>{e.off("style.load",r),e.off("idle",r)}},[T,g,F]),o(()=>{const t=S.current;if(!T||!t||!r)return;const n=e.find(e=>e.key===r.key);if(!n)return;const a={center:[n.lng,n.lat],zoom:Math.max(t.getZoom(),13)};window.matchMedia("(prefers-reduced-motion: reduce)").matches?t.jumpTo(a):t.flyTo({...a,duration:600})},[T,r?.n]),/* @__PURE__ */c("div",{className:`relative min-h-72 overflow-hidden rounded-lg border border-gray-200 bg-gray-100 ${p}`,children:[
+/* @__PURE__ */d("div",{className:"absolute inset-0",children:/* @__PURE__ */d("div",{ref:L,className:"h-full w-full",role:"region","aria-label":u})}),P&&/* @__PURE__ */d("p",{className:"absolute inset-0 grid place-items-center p-6 text-center text-sm text-gray-500",children:"The map could not be drawn here. The list has everything it shows."}),h]})}var S=3e3,j=e=>!!e?.pending&&3e3,A=e=>`${e.kind}:${e.id}`,M=e=>("located"===e.placement||"approximate"===e.placement)&&null!=e.lat&&null!=e.lng;function T(e){switch(e){case"located":return null;case"approximate":return"Approximate: only the suburb or postcode matched";case"pending":return"Locating…";case"not_found":return"Not on the map: address not found";case"failed":return"Not on the map: the map service could not be reached";case"no_address":return"Not on the map: no city or postcode"}}var z={importer:{label:"Importer",tone:"bg-sky-600 text-white"},dealer:{label:"Dealer",tone:"bg-purple-600 text-white"},retail:{label:"Retail",tone:"bg-green-600 text-white"},supplier:{label:"Supplier",tone:"bg-sky-600 text-white"},delivery_location:{label:"Delivery location",tone:"bg-amber-600 text-white"},warehouse:{label:"Warehouse",tone:"bg-amber-600 text-white"}},P=["importer","dealer","retail","supplier","delivery_location","warehouse"];function E(e){return"supplier"===e.kind?"supplier":"customer"===e.kind?e.category||"importer":e.kind}var F=(e,t=z)=>t[e]?.tone??"bg-gray-700 text-white",R=(e,t=z)=>t[e]?.label??e,B=(e,t)=>F(E(e),t);function q(e,t,r=z){return null!=t?String(t):(r[E(e)]?.label??"").charAt(0).toUpperCase()}var K=["delivery_location","warehouse"];function O(e,t=K){const r=/* @__PURE__ */new Map;let n=0;for(const a of e)t.includes(a.kind)&&r.set(A(a),++n);return r}function W(e){const t={onMap:0,approximate:0,pending:0,off:0};for(const r of e)M(r)?(t.onMap+=1,"approximate"===r.placement&&(t.approximate+=1)):"pending"===r.placement?t.pending+=1:t.off+=1;return t}function I(e){const t=[`${e.onMap} on the map`];return e.approximate&&t.push(`${e.approximate} approximate`),e.pending&&t.push(`${e.pending} locating`),e.off&&t.push(`${e.off} not on the map`),t.join(" · ")}function _(e){const t=[...new Set(e.filter(M).map(E))];return[...P.filter(e=>t.includes(e)),...t.filter(e=>!P.includes(e))]}function D(e,t){return e.filter(e=>!M(e)&&"pending"!==e.placement).map(e=>{const r=t?.get(A(e)),n=T(e.placement)?.replace(/^Not on the map: /,"")??"";return{key:A(e),text:`${null!=r?`${r}. `:""}${e.label}: ${n}`}})}function H({categories:e,palette:t=z,floating:r=!0}){return e.length<2?null:/* @__PURE__ */d("div",{className:(r?"absolute left-3 top-3 z-10 ":"")+"flex flex-wrap gap-x-3 gap-y-1 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs text-gray-600 shadow-sm",children:e.map(e=>/* @__PURE__ */c("span",{className:"inline-flex items-center gap-1.5",children:[
+/* @__PURE__ */d("span",{"aria-hidden":!0,className:`h-2.5 w-2.5 rounded-full ${F(e,t)}`}),R(e,t)]},e))})}function Z({point:t,number:r,onOpen:n,onClose:a,palette:o=z}){const l=T(t.placement),i=E(t);/* @__PURE__ */
+return c("section",{"aria-label":`${t.label}, chosen on the map`,className:"absolute bottom-3 left-3 right-3 z-10 max-w-md space-y-1.5 rounded-lg border border-gray-200 bg-white p-3 shadow-md",children:[
+/* @__PURE__ */c("div",{className:"flex items-start justify-between gap-2",children:[
+/* @__PURE__ */c("div",{className:"min-w-0",children:[
+/* @__PURE__ */c("h3",{className:"text-sm font-semibold text-gray-900 [overflow-wrap:anywhere]",children:[null!=r&&/* @__PURE__ */c("span",{className:"mr-1 text-gray-400",children:[r,"."]}),t.label,t.code&&/* @__PURE__ */d("span",{className:"ml-1.5 text-xs font-normal text-gray-400",children:t.code})]}),
+/* @__PURE__ */d("p",{className:"text-xs text-gray-500",children:o[i]?R(i,o):t.category})]}),
+/* @__PURE__ */d("button",{type:"button",onClick:a,"aria-label":"Close",className:"rounded p-0.5 text-gray-400 hover:text-gray-600",children:/* @__PURE__ */d("svg",{"aria-hidden":!0,className:"h-4 w-4",fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",strokeWidth:2,children:/* @__PURE__ */d("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"})})})]}),
+/* @__PURE__ */d("p",{className:"text-sm text-gray-700 [overflow-wrap:anywhere]",children:t.address||"—"}),l&&/* @__PURE__ */d("p",{className:"text-xs text-gray-500",children:l}),t.matched&&"approximate"===t.placement&&/* @__PURE__ */c("p",{className:"text-xs text-gray-400 [overflow-wrap:anywhere]",children:["Placed at: ",t.matched]}),n&&/* @__PURE__ */d("div",{className:"flex justify-end",children:/* @__PURE__ */d(e,{variant:"secondary",size:"sm",onClick:n,children:"Open"})})]})}function U(e,t,{staleTime:r}={}){return u({queryKey:e,queryFn:t,staleTime:r,refetchInterval:e=>j(e.state.data)})}function V({queryKey:e,queryFn:t,refreshSignal:r,onOpen:l,ariaLabel:s,title:u="Locations",palette:p=z,numbers:m,className:h="",mapClassName:g="min-h-[240px] flex-1"}){const{data:f,isError:b,refetch:y}=U(e,t,{staleTime:0}),x=n(!1);o(()=>{x.current?y():x.current=!0},[r]);const[w,v]=a(null),N=i(()=>f?.points??[],[f]),k=i(()=>m??O(N),[m,N]),C=i(()=>N.filter(M).map(e=>({key:A(e),label:e.label,lat:e.lat,lng:e.lng,glyph:q(e,k.get(A(e))??null,p),tone:B(e,p),approximate:"approximate"===e.placement})),[N,k,p]),$=i(()=>D(N,k),[N,k]),S=i(()=>_(N),[N]),j=f?.pending??0,T=N.find(e=>A(e)===w)??null,P=T&&l?l(T):null;/* @__PURE__ */
+return c("section",{"aria-label":u,className:`flex min-w-0 flex-col ${h}`,children:[
+/* @__PURE__ */c("div",{className:"flex min-h-[30px] items-center justify-between mb-2",children:[
+/* @__PURE__ */d("h3",{className:"text-sm font-semibold text-gray-900",children:u}),f&&/* @__PURE__ */d("span",{className:"text-xs text-gray-500",children:I(W(N))})]}),
+/* @__PURE__ */c(L,{pins:C,selectedKey:w,focus:null,onSelect:v,ariaLabel:s,className:g,children:[
+/* @__PURE__ */c("div",{className:"absolute left-3 top-3 z-10 flex max-w-[70%] flex-col items-start gap-1.5",children:[
+/* @__PURE__ */d(H,{categories:S,palette:p,floating:!1}),b&&/* @__PURE__ */c("div",{className:"flex items-center gap-2 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs text-gray-600 shadow-sm",children:["Couldn’t load the locations.",
+/* @__PURE__ */d("button",{type:"button",onClick:()=>{y()},className:"font-medium text-blue-600 hover:text-blue-800 hover:underline",children:"Try again"})]}),!b&&(j>0||$.length>0)&&/* @__PURE__ */c("div",{className:"max-w-full space-y-0.5 rounded-lg border border-gray-200 bg-white px-2.5 py-1.5 text-xs shadow-sm","aria-live":"polite",children:[j>0&&/* @__PURE__ */c("p",{className:"flex items-center gap-1.5 text-gray-500",children:[
+/* @__PURE__ */c("svg",{className:"h-3 w-3 animate-spin",fill:"none",viewBox:"0 0 24 24",children:[
+/* @__PURE__ */d("circle",{className:"opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),
+/* @__PURE__ */d("path",{className:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"})]}),"Locating ",j," address",1===j?"":"es","…"]}),$.slice(0,3).map(e=>/* @__PURE__ */d("p",{className:"truncate text-amber-700",title:e.text,children:e.text},e.key)),$.length>3&&/* @__PURE__ */c("p",{className:"text-gray-500",children:["+",$.length-3," more not on the map"]})]})]}),T&&/* @__PURE__ */d(Z,{point:T,number:k.get(A(T))??null,onOpen:P,onClose:()=>v(null),palette:p})]})]})}export{p as COMPACT_SHOW,L as EntityMap,V as LocationsMap,h as MAPLIBRE_WORKER_FILE,z as MAP_CATEGORIES,H as MapLegend,S as PENDING_POLL_MS,K as SECONDARY_KINDS,Z as SelectedCard,R as categoryLabel,F as categoryTone,m as foldAttributionOnce,M as isOnMap,_ as legendCategories,b as loadMapLibre,O as locationNumbers,g as mapLibreWorkerUrl,j as mapPointsRefetchInterval,D as offMapNotes,E as pinCategory,q as pinGlyph,B as pinTone,T as placementNote,A as pointKey,W as summarize,I as summaryText,U as useMapPoints};