makersclaw 0.2.0 → 0.3.1

package/registry/blocks/map/map-view.jsx

@@ -0,0 +1,715 @@
+"use client";
+
+// MapView — places on a map, with the list beside it, behind one set of
+// props (README.md beside this file). MapLibre draws the tiles; every mark
+// on them (markers, clusters, the popup) and every control is ours, in the
+// kit and the workspace's tokens.
+//
+// Client only, one static bundle: maplibre loads with the page (see
+// maplibre.js), and the map itself mounts after the first effect (the
+// mount guard). Until then — on the server and in the first client paint —
+// the frame, the list and a quiet placeholder are already there, so the
+// page does not jump and the places can be read before the map arrives.
+//
+// One selection, one hover, shared by the map, the list, the popup and the
+// phone's card strip. Picking in the list moves the camera to the place
+// (zooming until it stands clear of its cluster); picking on the map
+// scrolls the list to it. Clustering is ours (geo.js clusterPoints, in
+// screen pixels at the current zoom), so a cluster is kit-drawn HTML like
+// every other mark.
+import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Button, ButtonGroup, Empty, Icon, IconButton, Notice, cx, toast } from "../../ui";
+import { boundsOf, clusterPoints, idsKey, inBounds, isPointBounds, matches, readPosition, zoomToReveal } from "./geo";
+import { ListPanel, Strip } from "./list";
+import { AttributionControl, GLMap, Layer, Marker, Popup, Source, WORKER_URL, maplibregl } from "./maplibre";
+import { ClusterMark, DefaultPopup, PointMark, PopupCard, StackList } from "./marks";
+import { CHROME, TONES, prefersReducedMotion, resolveTones, schemeOf, styleFor, toneOrDefault } from "./theme";
+
+/** A ref for the map's handle: `const map = useMapView()`, then
+ *  `<MapView mapRef={map} />` and `map.current?.fitAll()`. */
+export function useMapView() {
+  return useRef(null);
+}
+
+const WORLD = { lat: 30, lng: 0, zoom: 1.2 };
+const NO_ITEMS = [];
+const step = (zoom) => Math.round(zoom * 2) / 2;
+const text = (v) => (typeof v === "string" || typeof v === "number" ? String(v) : "");
+const defaultTitle = (item) => item?.title ?? item?.name ?? item?.label ?? item?.location?.label ?? "Untitled";
+const defaultId = (item) => item?.id;
+
+export function MapView(props) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+  return <Frame {...props} mounted={mounted} />;
+}
+
+function Frame({
+  mounted,
+  items = NO_ITEMS,
+  positionOf = readPosition,
+  idOf = defaultId,
+  titleOf = defaultTitle,
+  metaOf,
+  asideOf,
+  toneOf,
+  searchOf,
+  renderMarker,
+  renderPopup,
+  selectedId,
+  defaultSelectedId = null,
+  onSelect,
+  onMove,
+  onMapClick,
+  onViewChange,
+  areas,
+  onAreaClick,
+  list = "side",
+  search = true,
+  cluster = true,
+  clusterRadius = 48,
+  popup = true,
+  styleUrl,
+  scheme: schemeProp = "auto",
+  workerUrl = WORKER_URL,
+  initialView,
+  fitMaxZoom = 14,
+  maxZoom = 18,
+  fitOnChange = true,
+  scrollZoom = true,
+  controls = true,
+  height = 520,
+  noun = "place",
+  nounPlural,
+  emptyTitle,
+  emptyBody,
+  emptyAction,
+  label = "Map",
+  mapRef,
+  className,
+}) {
+  const plural = nounPlural ?? `${noun}s`;
+  const rootRef = useRef(null);
+  const glRef = useRef(null);
+  const listRef = useRef(null);
+  const stripRef = useRef(null);
+  const hasList = list !== "none";
+
+  const [query, setQuery] = useState("");
+  const [inner, setInner] = useState(defaultSelectedId);
+  const selected = selectedId !== undefined ? selectedId : inner;
+  const [hovered, setHovered] = useState(null);
+  const [overrides, setOverrides] = useState({});
+  const [zoomStep, setZoomStep] = useState(null);
+  const [loaded, setLoaded] = useState(false);
+  const [failure, setFailure] = useState(null);
+  const [attempt, setAttempt] = useState(0);
+  const [scheme, setScheme] = useState(schemeProp === "dark" ? "dark" : "light");
+  const [tones, setTones] = useState({});
+  const [phoneView, setPhoneView] = useState("map");
+  const [stack, setStack] = useState(null);
+  const dragged = useRef(false);
+
+  // ---- the rows -------------------------------------------------------------
+  const rows = useMemo(
+    () =>
+      items.map((item) => {
+        const id = String(idOf(item));
+        const own = positionOf(item);
+        const o = overrides[id];
+        // An optimistic move holds until the row itself changes position.
+        const pos = o && samePos(o.base, own) ? o.pos : own;
+        const meta = metaOf?.(item) ?? null;
+        const title = text(titleOf(item)) || "Untitled";
+        return {
+          id,
+          item,
+          pos,
+          title,
+          meta,
+          aside: asideOf?.(item) ?? null,
+          tone: toneOrDefault(toneOf?.(item)),
+          words: searchOf ? text(searchOf(item)) : `${title} ${text(meta)}`,
+        };
+      }),
+    [items, idOf, positionOf, titleOf, metaOf, asideOf, toneOf, searchOf, overrides],
+  );
+  const byId = useMemo(() => new Map(rows.map((r) => [r.id, r])), [rows]);
+  const visible = useMemo(() => (query.trim() ? rows.filter((r) => matches(r.words, query)) : rows), [rows, query]);
+  const located = useMemo(() => visible.filter((r) => r.pos), [visible]);
+  const unlocated = useMemo(() => visible.filter((r) => !r.pos), [visible]);
+  const points = useMemo(() => located.map((r) => ({ id: r.id, lat: r.pos.lat, lng: r.pos.lng })), [located]);
+  const groups = useMemo(() => {
+    if (zoomStep == null) return [];
+    return cluster ? clusterPoints(points, zoomStep, clusterRadius) : points.map((p) => ({ type: "point", ...p }));
+  }, [points, zoomStep, cluster, clusterRadius]);
+  const locatedKey = useMemo(() => idsKey(points.map((p) => `${p.id}@${p.lat},${p.lng}`)), [points]);
+
+  // ---- the camera -----------------------------------------------------------
+  const map = () => glRef.current?.getMap?.() ?? null;
+  const duration = (ms) => (prefersReducedMotion() ? 0 : ms);
+  const padding = () => {
+    const w = rootRef.current?.clientWidth ?? 800;
+    return w < 480 ? 40 : 64;
+  };
+
+  const fitAll = useCallback(
+    ({ animate = true } = {}) => {
+      const m = map();
+      if (!m) return;
+      const b = boundsOf(points);
+      const ms = animate ? duration(700) : 0;
+      if (!b) {
+        const v = initialView ?? WORLD;
+        m.easeTo({ center: [v.lng, v.lat], zoom: v.zoom ?? WORLD.zoom, duration: ms });
+      } else if (isPointBounds(b)) {
+        m.easeTo({ center: [b.west, b.south], zoom: Math.max(m.getZoom(), Math.min(fitMaxZoom, 13)), duration: ms });
+      } else {
+        m.fitBounds(
+          [
+            [b.west, b.south],
+            [b.east, b.north],
+          ],
+          { padding: padding(), maxZoom: fitMaxZoom, duration: ms },
+        );
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [points, initialView, fitMaxZoom],
+  );
+
+  /** Bring a place into view, clear of any cluster that hides it. */
+  const reveal = useCallback(
+    (id) => {
+      const m = map();
+      const r = byId.get(String(id));
+      if (!m || !r?.pos) return;
+      const z = m.getZoom();
+      const need = cluster ? zoomToReveal(points, r.id, z, { radius: clusterRadius, maxZoom: Math.min(maxZoom, fitMaxZoom + 2) }) : z;
+      const zoom = Math.max(z, need ?? z);
+      const b = m.getBounds();
+      const view = { west: b.getWest(), south: b.getSouth(), east: b.getEast(), north: b.getNorth() };
+      // Already on screen, away from the edges, and not hidden in a cluster: leave the camera be.
+      const inset = { west: view.west + (view.east - view.west) * 0.12, east: view.east - (view.east - view.west) * 0.12, south: view.south + (view.north - view.south) * 0.12, north: view.north - (view.north - view.south) * 0.25 };
+      if (zoom === z && inBounds(inset, r.pos)) return;
+      m.easeTo({ center: [r.pos.lng, r.pos.lat], zoom, duration: duration(600) });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [byId, points, cluster, clusterRadius, maxZoom, fitMaxZoom],
+  );
+
+  // ---- selection ------------------------------------------------------------
+  const pending = useRef({ id: undefined, reveal: false });
+  const select = useCallback(
+    (id, { reveal: move = false } = {}) => {
+      const next = id == null ? null : String(id);
+      pending.current = { id: next, reveal: move };
+      setStack(null);
+      if (selectedId === undefined) setInner(next);
+      onSelect?.(next, next == null ? null : byId.get(next)?.item ?? null);
+    },
+    [selectedId, onSelect, byId],
+  );
+
+  // A selection that changed — from the list, the handle or the parent —
+  // moves the camera; one made on the map itself does not.
+  const seen = useRef(selected);
+  useEffect(() => {
+    if (seen.current === selected) return;
+    seen.current = selected;
+    const own = pending.current.id === (selected == null ? null : String(selected));
+    const move = own ? pending.current.reveal : true;
+    pending.current = { id: undefined, reveal: false };
+    if (selected == null) return;
+    if (move && loaded) reveal(selected);
+    // Keep the chosen row and card in view.
+    const q = `[data-map-id="${cssEscape(String(selected))}"]`;
+    listRef.current?.querySelector(q)?.scrollIntoView({ block: "nearest", behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    const card = stripRef.current?.querySelector(q);
+    if (card && stripRef.current) {
+      const s = stripRef.current;
+      s.scrollTo({ left: card.offsetLeft - (s.clientWidth - card.clientWidth) / 2, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+    }
+  }, [selected, loaded, reveal]);
+
+  // Refit when the set of places on the map changes (new rows, a search).
+  const fittedKey = useRef(null);
+  useEffect(() => {
+    if (!loaded) return;
+    if (fittedKey.current === null) {
+      fittedKey.current = locatedKey;
+      return;
+    }
+    if (fittedKey.current === locatedKey) return;
+    fittedKey.current = locatedKey;
+    if (fitOnChange && points.length) fitAll();
+  }, [locatedKey, loaded, fitOnChange, fitAll, points.length]);
+
+  // ---- the scheme, and the tones areas are painted in ------------------------
+  // Read on the first effect — the same flush that mounts the map — so the
+  // map's first style is already the right one (no light flash in dark).
+  useEffect(() => {
+    const root = rootRef.current;
+    const read = () => {
+      const s = schemeProp === "light" || schemeProp === "dark" ? schemeProp : schemeOf(root);
+      setScheme(s);
+      if (areas?.length) setTones(resolveTones(root, TONES));
+    };
+    read();
+    const mo = new MutationObserver(read);
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["data-theme", "class", "style"] });
+    const scoped = root?.parentElement?.closest("[data-theme]");
+    if (scoped && scoped !== document.documentElement) mo.observe(scoped, { attributes: true, attributeFilter: ["data-theme", "class", "style"] });
+    const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+    mq?.addEventListener?.("change", read);
+    return () => {
+      mo.disconnect();
+      mq?.removeEventListener?.("change", read);
+    };
+  }, [schemeProp, areas?.length]);
+
+  const mapStyle = styleFor(styleUrl, scheme);
+
+  // ---- areas (territories, zones) -------------------------------------------
+  const areaData = useMemo(() => {
+    if (!areas?.length) return null;
+    return {
+      type: "FeatureCollection",
+      features: areas
+        .filter((a) => a?.geometry)
+        .map((a, i) => {
+          const tone = toneOrDefault(a.tone);
+          const colour = tones[tone] ?? tones.primary ?? null;
+          return { type: "Feature", id: i, geometry: a.geometry, properties: { id: String(a.id ?? i), label: text(a.label), paint: colour } };
+        })
+        .filter((f) => f.properties.paint),
+    };
+  }, [areas, tones]);
+
+  // ---- the handle -----------------------------------------------------------
+  const api = useRef({});
+  api.current = {
+    fitAll: (o) => fitAll(o),
+    select: (id, { reveal: move = true } = {}) => select(id, { reveal: move }),
+    flyTo: ({ lat, lng, zoom }) => map()?.easeTo({ center: [lng, lat], zoom: zoom ?? map()?.getZoom(), duration: duration(700) }),
+    fitBounds: (b, { maxZoom: mz = fitMaxZoom } = {}) =>
+      b &&
+      map()?.fitBounds(
+        [
+          [b.west, b.south],
+          [b.east, b.north],
+        ],
+        { padding: padding(), maxZoom: mz, duration: duration(700) },
+      ),
+    zoomIn: () => map()?.zoomIn({ duration: duration(250) }),
+    zoomOut: () => map()?.zoomOut({ duration: duration(250) }),
+    getView: () => viewOf(map()),
+    getMap: () => map(),
+  };
+  useImperativeHandle(
+    mapRef,
+    () => ({
+      fitAll: (o) => api.current.fitAll(o),
+      select: (id, o) => api.current.select(id, o),
+      flyTo: (p) => api.current.flyTo(p),
+      fitBounds: (b, o) => api.current.fitBounds(b, o),
+      zoomIn: () => api.current.zoomIn(),
+      zoomOut: () => api.current.zoomOut(),
+      getView: () => api.current.getView(),
+      getMap: () => api.current.getMap(),
+    }),
+    [],
+  );
+
+  // ---- a moved marker: optimistic, rolled back when the save fails ---------
+  async function moveTo(r, pos) {
+    const base = positionOf(r.item);
+    setOverrides((o) => ({ ...o, [r.id]: { pos, base } }));
+    let res;
+    try {
+      res = await onMove(r.item, pos);
+    } catch (e) {
+      res = { ok: false, error: e?.message };
+    }
+    if (res?.ok) return;
+    setOverrides((o) => {
+      const next = { ...o };
+      delete next[r.id];
+      return next;
+    });
+    toast.error(`${r.title} wasn’t moved`, { description: res?.error || "The new spot didn’t save, so it’s back where it was. Try again." });
+  }
+
+  // The map is made only once its box has a size. Made while hidden (a
+  // container query shows it only when the frame is wide enough), it fitted
+  // its first view to a 0×0 box, the camera came out invalid and no tile
+  // was ever asked for: "Loading the map…" for good (store-locator and
+  // location-map, seen in the pane 2026-09-24).
+  const stageRef = useRef(null);
+  const [sized, setSized] = useState(false);
+  useEffect(() => {
+    const el = stageRef.current;
+    if (!el || sized) return;
+    const has = () => el.clientWidth > 0 && el.clientHeight > 0;
+    if (has()) return setSized(true);
+    if (typeof ResizeObserver === "undefined") return setSized(true);
+    const ro = new ResizeObserver(() => has() && setSized(true));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [mounted, sized]);
+
+  // ---- the first view -------------------------------------------------------
+  const firstView = useMemo(() => {
+    const b = boundsOf(points);
+    if (b && !isPointBounds(b)) {
+      return {
+        bounds: [
+          [b.west, b.south],
+          [b.east, b.north],
+        ],
+        fitBoundsOptions: { padding: 64, maxZoom: fitMaxZoom },
+      };
+    }
+    if (b) return { longitude: b.west, latitude: b.south, zoom: Math.min(fitMaxZoom, 13) };
+    const v = initialView ?? WORLD;
+    return { longitude: v.lng, latitude: v.lat, zoom: v.zoom ?? WORLD.zoom };
+    // Only the first render's matters: react-map-gl reads it once.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [attempt]);
+
+  // `load` can be missed: in development React mounts twice, and the event
+  // fired for a map the block had already let go of, so the cover stayed on
+  // over a map that was ready ("Loading the map…" for good, seen in the pane
+  // 2026-09-24). The first `idle` counts as loaded too.
+  const loadedRef = useRef(false);
+  loadedRef.current = loaded;
+  // And a map already loaded and idle by the time we listen fires neither
+  // again: ask it directly for a moment after it mounts.
+  useEffect(() => {
+    if (!mounted || !sized || loaded) return;
+    let tries = 0;
+    const t = setInterval(() => {
+      const m = glRef.current?.getMap?.();
+      if (m?.loaded?.() && !loadedRef.current) onLoad({ target: m });
+      if (loadedRef.current || ++tries > 40) clearInterval(t);
+    }, 250);
+    return () => clearInterval(t);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mounted, sized, loaded, attempt]);
+
+  function onLoad(e) {
+    const m = e.target;
+    loadedRef.current = true;
+    m.touchZoomRotate?.disableRotation?.();
+    setZoomStep(step(m.getZoom()));
+    setLoaded(true);
+    setFailure(null);
+    if (selected != null) reveal(selected);
+    onViewChange?.(viewOf(m));
+  }
+
+  function onError(e) {
+    // A tile or an icon that failed is maplibre's to retry; only a map that
+    // never came up (the style unreachable, no WebGL) is worth a notice.
+    if (loaded || e?.tile || e?.sourceId || e?.source) return;
+    const msg = String(e?.error?.message ?? e?.message ?? "");
+    setFailure(/webgl/i.test(msg) ? "webgl" : "network");
+  }
+
+  function retry() {
+    setFailure(null);
+    setLoaded(false);
+    setZoomStep(null);
+    fittedKey.current = null;
+    setAttempt((a) => a + 1);
+  }
+
+  const selectedRow = selected == null ? null : byId.get(String(selected)) ?? null;
+  const popupRow = popup && selectedRow?.pos && located.includes(selectedRow) ? selectedRow : null;
+  const stackRows = stack ? stack.ids.map((id) => byId.get(id)).filter(Boolean) : [];
+  const hoveredId = hovered == null ? null : String(hovered);
+
+  const empty = (
+    <Empty
+      icon="map"
+      title={emptyTitle ?? `No ${plural} yet`}
+      body={emptyBody ?? `${cap(plural)} with an address or coordinates show up here and on the map.`}
+      action={emptyAction}
+      className="mx-1 mt-2 border-0"
+    />
+  );
+
+  return (
+    <div
+      ref={rootRef}
+      role="region"
+      aria-label={label}
+      onKeyDown={(e) => {
+        if (e.key !== "Escape" || e.defaultPrevented) return;
+        if (stack) setStack(null);
+        else if (selected != null) select(null);
+      }}
+      style={{ height }}
+      className={cx("@container relative flex overflow-hidden rounded-lg border border-border bg-card text-card-foreground", CHROME, className)}
+    >
+      <div className="flex min-h-0 min-w-0 flex-1 flex-col @3xl:flex-row">
+        {hasList ? (
+          <ListPanel
+            ref={listRef}
+            rows={located.map((r) => (r.id === hoveredId ? { ...r, hovered: true } : r))}
+            unlocated={unlocated}
+            total={rows.length}
+            query={query}
+            onQuery={setQuery}
+            search={search}
+            noun={noun}
+            plural={plural}
+            selected={selected == null ? null : String(selected)}
+            onPick={(id) => {
+              setPhoneView("map");
+              select(id, { reveal: true });
+            }}
+            onHover={setHovered}
+            onShowMap={() => setPhoneView("map")}
+            empty={empty}
+            className={cx("flex-1 @3xl:flex @3xl:w-80 @3xl:flex-none @3xl:border-r @3xl:border-border", phoneView === "list" ? "flex" : "hidden")}
+          />
+        ) : null}
+
+        <div ref={stageRef} className={cx("relative min-h-0 min-w-0 flex-1", hasList && phoneView === "list" && "hidden @3xl:block")}>
+          {mounted && sized ? (
+            <GLMap
+              key={attempt}
+              ref={glRef}
+              mapLib={maplibregl}
+              workerUrl={workerUrl}
+              initialViewState={firstView}
+              mapStyle={mapStyle}
+              maxZoom={maxZoom}
+              dragRotate={false}
+              pitchWithRotate={false}
+              touchPitch={false}
+              scrollZoom={scrollZoom}
+              attributionControl={false}
+              interactiveLayerIds={areaData && onAreaClick ? ["mc-areas-fill"] : undefined}
+              onLoad={onLoad}
+              onIdle={(e) => {
+                if (!loadedRef.current) onLoad(e);
+              }}
+              onError={onError}
+              onMove={(e) => {
+                const s = step(e.viewState.zoom);
+                if (s !== zoomStep) setZoomStep(s);
+              }}
+              onMoveEnd={(e) => onViewChange?.(viewOf(e.target))}
+              onClick={(e) => {
+                const f = e.features?.[0];
+                if (f && onAreaClick) {
+                  const a = areas.find((x, i) => String(x.id ?? i) === f.properties?.id);
+                  if (a) return onAreaClick(a);
+                }
+                if (stack) setStack(null);
+                else if (selected != null) select(null);
+                onMapClick?.({ lat: e.lngLat.lat, lng: e.lngLat.lng });
+              }}
+              style={{ width: "100%", height: "100%" }}
+            >
+              <AttributionControl compact={false} position="bottom-right" />
+              {areaData ? (
+                <Source id="mc-areas" type="geojson" data={areaData}>
+                  <Layer id="mc-areas-fill" type="fill" filter={["in", ["geometry-type"], ["literal", ["Polygon", "MultiPolygon"]]]} paint={{ "fill-color": ["get", "paint"], "fill-opacity": 0.14 }} />
+                  <Layer id="mc-areas-line" type="line" paint={{ "line-color": ["get", "paint"], "line-width": 1.5, "line-opacity": 0.8 }} />
+                </Source>
+              ) : null}
+
+              {groups.map((g) => {
+                if (g.type === "cluster") {
+                  const holds = selected != null && g.ids.includes(String(selected));
+                  return (
+                    <Marker
+                      key={g.id}
+                      longitude={g.lng}
+                      latitude={g.lat}
+                      anchor="center"
+                      onClick={(e) => {
+                        // A native listener on the marker, so it runs before
+                        // maplibre's own map click (which would clear the selection).
+                        e.originalEvent.stopPropagation();
+                        const m = map();
+                        if (!m) return;
+                        if (isPointBounds(g.bounds) || m.getZoom() >= maxZoom - 0.5) {
+                          setStack(g);
+                          return;
+                        }
+                        m.fitBounds(
+                          [
+                            [g.bounds.west, g.bounds.south],
+                            [g.bounds.east, g.bounds.north],
+                          ],
+                          { padding: 96, maxZoom, duration: duration(500) },
+                        );
+                      }}
+                    >
+                      <ClusterMark count={g.count} holdsSelected={holds} label={`${g.count} ${plural} here. Zoom in`} />
+                    </Marker>
+                  );
+                }
+                const r = byId.get(g.id);
+                if (!r) return null;
+                const isSel = selected != null && String(selected) === r.id;
+                const isHover = hoveredId === r.id;
+                return (
+                  <Marker
+                    key={r.id}
+                    longitude={g.lng}
+                    latitude={g.lat}
+                    anchor="center"
+                    draggable={Boolean(onMove)}
+                    onDragStart={() => {
+                      dragged.current = true;
+                    }}
+                    onDragEnd={(e) => {
+                      setTimeout(() => {
+                        dragged.current = false;
+                      }, 0);
+                      moveTo(r, { lat: e.lngLat.lat, lng: e.lngLat.lng });
+                    }}
+                    onClick={(e) => {
+                      // Native, on the marker: runs before maplibre's map click.
+                      // A keyboard Enter on the marker's button arrives here too.
+                      e.originalEvent.stopPropagation();
+                      if (dragged.current) return;
+                      select(isSel ? null : r.id);
+                    }}
+                  >
+                    <PointMark
+                      title={r.title}
+                      tone={r.tone}
+                      selected={isSel}
+                      hovered={isHover}
+                      showLabel={isHover && !(isSel && popupRow)}
+                      focusable={!hasList}
+                      custom={renderMarker ? renderMarker(r.item, { selected: isSel, hovered: isHover, tone: r.tone }) : null}
+                      onHover={(on) => setHovered(on ? r.id : (h) => (h === r.id ? null : h))}
+                    />
+                  </Marker>
+                );
+              })}
+
+              {popupRow ? (
+                <Popup
+                  key={`pop:${popupRow.id}`}
+                  longitude={popupRow.pos.lng}
+                  latitude={popupRow.pos.lat}
+                  anchor="bottom"
+                  offset={20}
+                  closeButton={false}
+                  closeOnClick={false}
+                  focusAfterOpen={false}
+                  maxWidth="none"
+                >
+                  <PopupCard onClose={() => select(null)}>
+                    {renderPopup ? (
+                      renderPopup(popupRow.item, { close: () => select(null) })
+                    ) : (
+                      <DefaultPopup title={popupRow.title} meta={popupRow.meta} aside={popupRow.aside} />
+                    )}
+                  </PopupCard>
+                </Popup>
+              ) : null}
+
+              {stack && stackRows.length ? (
+                <Popup key={`stack:${stack.id}`} longitude={stack.lng} latitude={stack.lat} anchor="bottom" offset={28} closeButton={false} closeOnClick={false} focusAfterOpen={false} maxWidth="none">
+                  <PopupCard onClose={() => setStack(null)}>
+                    <StackList rows={stackRows} plural={plural} onPick={(id) => select(id)} />
+                  </PopupCard>
+                </Popup>
+              ) : null}
+            </GLMap>
+          ) : null}
+
+          {!loaded && !failure ? (
+            <div className="pointer-events-none absolute inset-0 grid place-items-center bg-muted">
+              <div className="absolute inset-0 animate-pulse bg-accent/40 motion-reduce:animate-none" aria-hidden="true" />
+              <p className="relative flex items-center gap-2 text-sm text-muted-foreground">
+                <Icon name="map" />
+                Loading the map…
+              </p>
+              {!hasList && rows.length ? (
+                <ul className="sr-only">
+                  {rows.map((r) => (
+                    <li key={r.id}>{r.title}</li>
+                  ))}
+                </ul>
+              ) : null}
+            </div>
+          ) : null}
+
+          {failure ? (
+            <div className="absolute inset-0 z-[4] grid place-items-center bg-muted p-4">
+              <Notice
+                tone="warning"
+                title={failure === "webgl" ? "This browser can’t draw maps" : "The map didn’t load"}
+                action={
+                  failure === "webgl" ? null : (
+                    <Button variant="secondary" size="sm" onClick={retry}>
+                      Try again
+                    </Button>
+                  )
+                }
+                className="max-w-sm"
+              >
+                {failure === "webgl" ? "WebGL is turned off or not supported here." : "The map tiles couldn’t be reached. Check the connection, then try again."}
+                {hasList ? ` The ${plural} are still listed.` : ""}
+              </Notice>
+            </div>
+          ) : null}
+
+          {controls && loaded ? (
+            <div className="absolute right-3 top-3 z-[3] flex flex-col items-end gap-2">
+              <ButtonGroup orientation="vertical" size="sm" aria-label="Zoom" className="rounded-md shadow-sm">
+                <IconButton icon="plus" label="Zoom in" size="sm" variant="secondary" onClick={() => api.current.zoomIn()} />
+                <IconButton icon="minus" label="Zoom out" size="sm" variant="secondary" onClick={() => api.current.zoomOut()} />
+              </ButtonGroup>
+              <IconButton icon="maximize" label={`Show all ${plural}`} size="sm" variant="secondary" className="shadow-sm" disabled={!points.length} onClick={() => fitAll()} />
+            </div>
+          ) : null}
+
+          {hasList ? (
+            <div className="absolute left-3 top-3 z-[3] @3xl:hidden">
+              <Button variant="secondary" size="sm" icon="list" className="shadow-sm" onClick={() => setPhoneView("list")}>
+                List
+                <span className="text-muted-foreground" data-nums>
+                  {visible.length}
+                </span>
+              </Button>
+            </div>
+          ) : null}
+        </div>
+
+        {hasList && located.length ? (
+          <Strip ref={stripRef} rows={located} selected={selected == null ? null : String(selected)} onPick={(id) => select(id, { reveal: true })} className={cx("@3xl:hidden", phoneView === "list" && "hidden")} />
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function samePos(a, b) {
+  if (!a && !b) return true;
+  if (!a || !b) return false;
+  return Math.abs(a.lat - b.lat) < 1e-9 && Math.abs(a.lng - b.lng) < 1e-9;
+}
+
+function viewOf(m) {
+  if (!m) return null;
+  const c = m.getCenter();
+  const b = m.getBounds();
+  return { center: { lat: c.lat, lng: c.lng }, zoom: m.getZoom(), bounds: { west: b.getWest(), south: b.getSouth(), east: b.getEast(), north: b.getNorth() } };
+}
+
+const cap = (s) => (s ? s[0].toUpperCase() + s.slice(1) : s);
+
+function cssEscape(s) {
+  return typeof CSS !== "undefined" && CSS.escape ? CSS.escape(s) : s.replace(/["\\]/g, "\\$&");
+}