@nulib/clover 4.0.0-beta.1 → 4.1.0

package/dist/components/Map/MapView.mjs

@@ -1,7 +1,9 @@
 "use client";
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useMemo, forwardRef, useRef, useState, useEffect } from "react";
+import React, { useMemo, forwardRef, useRef, useState, useEffect } from "react";
+import { createPortal } from "react-dom";
 import { useUniqueId } from "../../ui/useUniqueId.mjs";
+import { useHighContrast, highContrastProps } from "../../hooks/useHighContrast.mjs";
 import { DEFAULT_STYLE_URL, applyDefaultBasemap } from "./basemap.mjs";
 import { navPlaceOf, georeferencesOf, cornersOf, boundsOf, readGeoreference } from "../../core/geo.mjs";
 import { sendsCredentials } from "../../core/request.mjs";
@@ -11,9 +13,15 @@ import { useCloverTranslation } from "../../i18n/useCloverTranslation.mjs";
 import { join } from "../../lib/classnames.mjs";
 import { useOptionalClover, useOptionalCloverSelector } from "../../react/context.mjs";
 import { HostLanguageContext } from "../../i18n/hostLanguage.mjs";
-import { useRootLanguage } from "../../react/language.mjs";
+import { useRootLanguage } from "../../i18n/useRootLanguage.mjs";
 import { getMapWorkerUrl } from "../../core/map-config.mjs";
 import { useNearViewport } from "../Body/useNearViewport.mjs";
+import { languageProps, directionOf } from "../../i18n/direction.mjs";
+import { Tip } from "../../ui/Tip.mjs";
+import { NavDate } from "../../ui/NavDate.mjs";
+import { readDate } from "../../core/dates.mjs";
+import { dateTimeOf, formatDate } from "../../core/dates-format.mjs";
+import { cloverI18n, langWithin } from "../../i18n/config.mjs";
 const RootMap = forwardRef(function RootMap2(props, ref) {
   return /* @__PURE__ */ jsx(ConnectedMap, { ...props, scope: "view", landmark: false, forwardedRef: ref });
 });
@@ -41,9 +49,31 @@ function ConnectedMap({
     ),
     [scope, all, shown]
   );
+  const picked = useOptionalCloverSelector((state) => state.annotationId, null);
+  const highlighted = React.useSyncExternalStore(
+    context.clover.highlight.subscribe,
+    context.clover.highlight.get,
+    context.clover.highlight.get
+  );
+  const active = useMemo(
+    () => [picked, highlighted].filter(
+      (id) => typeof id === "string"
+    ),
+    [picked, highlighted]
+  );
+  const manifestId = useOptionalCloverSelector(
+    (state) => {
+      var _a;
+      return ((_a = state.manifest) == null ? void 0 : _a.id) ?? null;
+    },
+    null
+  );
   const current = useMemo(
-    () => scope === "view" ? shown.map((canvas) => canvas.id) : void 0,
-    [scope, shown]
+    () => scope === "view" ? [
+      ...shown.map((canvas) => canvas.id),
+      ...manifestId ? [manifestId] : []
+    ] : void 0,
+    [scope, shown, manifestId]
   );
   return /* @__PURE__ */ jsx(
     MapView,
@@ -52,12 +82,25 @@ function ConnectedMap({
       features,
       overlays,
       current,
+      activeAnnotations: active,
+      onHighlight: (feature) => context.clover.highlight.emit((feature == null ? void 0 : feature.properties.annotationId) ?? null),
       language: context.language,
       request: context.clover.request,
       onSelect: (feature) => {
+        var _a;
         onSelect == null ? void 0 : onSelect(feature);
-        const canvasId = feature.properties.canvasId;
-        if (canvasId) context.clover.goTo(canvasId);
+        const {
+          annotationId,
+          canvasId,
+          manifestId: member
+        } = feature.properties;
+        if (member && member !== ((_a = context.clover.store.get().manifest) == null ? void 0 : _a.id)) {
+          void context.clover.goToManifest(member);
+          return;
+        }
+        if (annotationId) context.clover.selectAnnotation(annotationId);
+        const selected = annotationId !== void 0 && context.clover.store.get().annotationId === annotationId;
+        if (!selected && canvasId) context.clover.goTo(canvasId);
       }
     }
   );
@@ -101,13 +144,21 @@ const NAVPLACE = "geomap-navplace";
 const FILL = "geomap-navplace-fill";
 const LINE = "geomap-navplace-line";
 const CASING = "geomap-navplace-casing";
+const ACCENT = "geomap-navplace-accent";
 const POINT = "geomap-navplace-point";
-const CLICKABLE = [FILL, LINE, POINT];
+const POINT_EDGE = "geomap-navplace-point-edge";
+const POINT_HIT = "geomap-navplace-point-hit";
+const CLICKABLE = [FILL, CASING, LINE, POINT_HIT, POINT];
 function MapView({
   features,
   overlays,
   current,
+  activeAnnotations,
+  onHighlight,
+  list = true,
+  credits = true,
   language,
+  highContrast,
   landmark = true,
   overlay = true,
   overlayOpacity = 0.75,
@@ -126,23 +177,39 @@ function MapView({
   const aboutId = useUniqueId();
   const root = useRootLanguage(forwardedRef, rest.lang);
   const { langOf } = root;
+  const contrast = useHighContrast(highContrast);
   const container = useRef(null);
   const [box, setBox] = useState(null);
   const near = useNearViewport(box);
   const [map, setMap] = useState(null);
+  const [tips, setTips] = useState([]);
   const [failed, setFailed] = useState(false);
   const [drawnIds, setDrawnIds] = useState(NO_IDS);
-  const latest = useRef({ onSelect, t });
-  latest.current = { onSelect, t };
+  const latest = useRef({
+    onSelect,
+    onHighlight,
+    t,
+    features,
+    host: root.hostLanguage
+  });
+  latest.current = {
+    onSelect,
+    onHighlight,
+    t,
+    features,
+    host: root.hostLanguage
+  };
   const name = useRef(
     null
   );
+  const reread = useRef(null);
   const framed = useRef("");
   useEffect(() => {
     if (!near) return;
     let live = true;
     let instance = null;
     let observer = null;
+    let letGo = null;
     Promise.all([import("maplibre-gl"), import("./worker.mjs")]).then(([module, bundled]) => {
       var _a;
       const maplibre = "Map" in module ? module : module.default;
@@ -158,7 +225,8 @@ function MapView({
         maxPitch: 0,
         dragRotate: false,
         scrollZoom,
-        attributionControl: { compact: true },
+        // Its credits behind their ⓘ, in the lower corner; none where left out.
+        attributionControl: credits ? { compact: true } : false,
         // MapLibre's own names, in Clover's words; kept current below.
         locale: {
           "Map.Title": t2("mapLabel"),
@@ -170,7 +238,7 @@ function MapView({
       if (!landmark) instance.getCanvas().setAttribute("role", "group");
       instance.addControl(
         new maplibre.NavigationControl({ showCompass: false }),
-        "top-right"
+        "bottom-left"
       );
       instance.on("load", () => {
         var _a2;
@@ -181,23 +249,114 @@ function MapView({
         );
         attrib == null ? void 0 : attrib.classList.remove("maplibregl-compact-show");
         attrib == null ? void 0 : attrib.removeAttribute("open");
-        addPlaceLayers(instance, accentOf(container.current));
+        addPlaceLayers(instance, colorsOf(container.current));
         let popup = null;
-        name.current = (feature, at) => {
-          var _a3, _b;
+        let picked = null;
+        let shown = "";
+        let hovered;
+        let pickedId;
+        const idOf = (feature) => typeof feature.id === "number" && feature.id >= 0 ? feature.id : latest.current.features.features.indexOf(feature);
+        const mark = (id, key, on) => {
+          var _a3;
+          if (id !== void 0 && id >= 0)
+            (_a3 = instance.setFeatureState) == null ? void 0 : _a3.call(
+              instance,
+              { source: NAVPLACE, id },
+              { [key]: on }
+            );
+        };
+        const pick = (feature) => {
+          mark(pickedId, "picked", false);
+          pickedId = feature ? idOf(feature) : void 0;
+          mark(pickedId, "picked", true);
+        };
+        const keyOf = (feature) => JSON.stringify(feature.properties ?? {});
+        const gap = () => 0.382 * (parseFloat(getComputedStyle(document.documentElement).fontSize) || 16);
+        const unname = () => {
           popup == null ? void 0 : popup.remove();
           popup = null;
+          shown = "";
+        };
+        const show2 = (feature) => {
+          var _a3, _b, _c, _d, _e, _f, _g, _h, _i;
+          if (shown === keyOf(feature) && popup) return;
+          unname();
           const title = (_a3 = feature.properties) == null ? void 0 : _a3.title;
-          if (!title) return;
+          const bounds = boundsOf([feature]);
+          if (!title || !bounds) return;
           const text = document.createElement("span");
           text.textContent = String(title);
           const lang = (_b = feature.properties) == null ? void 0 : _b.titleLang;
-          if (lang !== void 0) text.lang = String(lang);
+          const marked = (element, tag) => {
+            if (tag === void 0) return;
+            element.lang = tag;
+            const dir = directionOf(tag);
+            if (dir) element.dir = dir;
+          };
+          const nameLang = lang === void 0 ? void 0 : String(lang);
+          marked(text, nameLang);
+          const date = readDate((_c = feature.properties) == null ? void 0 : _c.navDate);
+          if (date) {
+            const locale = cloverI18n.language;
+            const time = document.createElement("time");
+            time.className = "clover-geomap-popup-date";
+            time.dateTime = dateTimeOf(
+              date,
+              String(feature.properties.navDate)
+            );
+            time.textContent = formatDate(date, locale);
+            marked(time, langWithin(locale, nameLang ?? latest.current.host));
+            text.append(time);
+          }
+          const [[west, south], [east, north]] = bounds;
+          const middle = (west + east) / 2;
+          const room = ((_e = (_d = instance.getContainer) == null ? void 0 : _d.call(instance)) == null ? void 0 : _e.clientHeight) ?? 0;
+          const top = ((_g = (_f = instance.project) == null ? void 0 : _f.call(instance, [middle, north])) == null ? void 0 : _g.y) ?? 0;
+          const foot = ((_i = (_h = instance.project) == null ? void 0 : _h.call(instance, [middle, south])) == null ? void 0 : _i.y) ?? 0;
+          const below = room - foot >= top;
+          const away = gap();
+          hangs = below ? away : -away;
           popup = new maplibre.Popup({
             closeButton: false,
-            offset: 8,
+            closeOnClick: false,
+            anchor: below ? "top" : "bottom",
+            offset: [0, hangs],
+            maxWidth: "none",
             className: "clover-geomap-popup"
-          }).setLngLat(at).setDOMContent(text).addTo(instance);
+          }).setLngLat(below ? [middle, south] : [middle, north]).setDOMContent(text).addTo(instance);
+          shown = keyOf(feature);
+          keepInside();
+        };
+        let hangs = 0;
+        const keepInside = () => {
+          var _a3, _b, _c, _d;
+          const element = (_a3 = popup == null ? void 0 : popup.getElement) == null ? void 0 : _a3.call(popup);
+          const box2 = (_d = (_c = (_b = instance.getContainer) == null ? void 0 : _b.call(instance)) == null ? void 0 : _c.getBoundingClientRect) == null ? void 0 : _d.call(_c);
+          if (!element || !box2 || !popup.setOffset) return;
+          const away = gap();
+          popup.setOffset([0, hangs]);
+          const own = element.getBoundingClientRect();
+          const across = own.left < box2.left + away ? box2.left + away - own.left : own.right > box2.right - away ? box2.right - away - own.right : 0;
+          const down = own.top < box2.top + away ? box2.top + away - own.top : own.bottom > box2.bottom - away ? box2.bottom - away - own.bottom : 0;
+          if (across || down) popup.setOffset([across, hangs + down]);
+        };
+        instance.on("move", keepInside);
+        reread.current = (next) => {
+          var _a3;
+          (_a3 = instance.removeFeatureState) == null ? void 0 : _a3.call(instance, { source: NAVPLACE });
+          hovered = void 0;
+          const placeOf = (feature) => JSON.stringify([feature.properties, feature.geometry]);
+          const kept = picked ? next.features.find((f) => placeOf(f) === placeOf(picked)) : void 0;
+          picked = kept ?? null;
+          pickedId = void 0;
+          if (!kept) return unname();
+          pick(kept);
+          show2(kept);
+        };
+        name.current = (feature) => {
+          picked = feature;
+          pick(feature);
+          show2(feature);
         };
         for (const layer of CLICKABLE) {
           instance.on("click", layer, (event) => {
@@ -207,13 +366,50 @@ function MapView({
             (_b = name.current) == null ? void 0 : _b.call(name, feature, event.lngLat);
             (_d = (_c = latest.current).onSelect) == null ? void 0 : _d.call(_c, feature);
           });
-          instance.on("mouseenter", layer, () => {
+          instance.on("mousemove", layer, (event) => {
+            var _a3, _b, _c;
             instance.getCanvas().style.cursor = "pointer";
+            const feature = (_a3 = event.features) == null ? void 0 : _a3[0];
+            if (!feature) return;
+            show2(feature);
+            const id = idOf(feature);
+            if (id === hovered) return;
+            mark(hovered, "hover", false);
+            hovered = id;
+            mark(hovered, "hover", true);
+            (_c = (_b = latest.current).onHighlight) == null ? void 0 : _c.call(_b, feature);
           });
           instance.on("mouseleave", layer, () => {
+            var _a3, _b;
             instance.getCanvas().style.cursor = "";
+            mark(hovered, "hover", false);
+            hovered = void 0;
+            (_b = (_a3 = latest.current).onHighlight) == null ? void 0 : _b.call(_a3, null);
+            if (picked) show2(picked);
+            else unname();
           });
         }
+        instance.on("click", (event) => {
+          var _a3;
+          const under = (_a3 = instance.queryRenderedFeatures) == null ? void 0 : _a3.call(instance, event.point, {
+            layers: CLICKABLE.filter((layer) => {
+              var _a4;
+              return (_a4 = instance.getLayer) == null ? void 0 : _a4.call(instance, layer);
+            })
+          });
+          if (under == null ? void 0 : under.length) return;
+          picked = null;
+          pick(null);
+          unname();
+        });
+        const escape = (event) => {
+          if (event.key !== "Escape" || !popup) return;
+          picked = null;
+          pick(null);
+          unname();
+        };
+        document.addEventListener("keydown", escape);
+        letGo = () => document.removeEventListener("keydown", escape);
         setMap(instance);
       });
       if (typeof ResizeObserver !== "undefined") {
@@ -225,20 +421,36 @@ function MapView({
     });
     return () => {
       live = false;
+      letGo == null ? void 0 : letGo();
       observer == null ? void 0 : observer.disconnect();
       instance == null ? void 0 : instance.remove();
       name.current = null;
+      reread.current = null;
       framed.current = "";
       setMap(null);
     };
   }, [near]);
   useEffect(() => {
-    var _a;
+    var _a, _b;
     (_a = map == null ? void 0 : map.getSource(NAVPLACE)) == null ? void 0 : _a.setData(features);
+    (_b = reread.current) == null ? void 0 : _b.call(reread, features);
   }, [map, features]);
+  const linked = useRef([]);
+  const activeKey = (activeAnnotations == null ? void 0 : activeAnnotations.join("\n")) ?? "";
+  useEffect(() => {
+    if (!(map == null ? void 0 : map.setFeatureState)) return;
+    const ids = features.features.flatMap(
+      (feature, index) => feature.properties.annotationId && activeKey.split("\n").includes(feature.properties.annotationId) ? [index] : []
+    );
+    for (const id of linked.current)
+      map.setFeatureState({ source: NAVPLACE, id }, { linked: false });
+    for (const id of ids)
+      map.setFeatureState({ source: NAVPLACE, id }, { linked: true });
+    linked.current = ids;
+  }, [map, features, activeKey]);
   const listed = overlay ? overlays.filter((item) => drawnIds.has(item.id)) : NONE;
   const count = features.features.length + listed.length;
-  const described = count > 0;
+  const described = list && count > 0;
   useEffect(() => {
     var _a;
     if (!map) return;
@@ -252,21 +464,24 @@ function MapView({
     mark(canvas, langOf("mapLabel"));
     if (described) canvas.setAttribute("aria-describedby", aboutId);
     else canvas.removeAttribute("aria-describedby");
+    const part = (_a = container.current) == null ? void 0 : _a.closest(".clover-geomap");
     const rename = (selector, key) => {
-      var _a2;
-      const control = (_a2 = container.current) == null ? void 0 : _a2.querySelector(selector);
-      if (!control) return;
+      const control = part == null ? void 0 : part.querySelector(selector);
+      if (!control) return null;
       control.setAttribute("aria-label", t(key));
-      if (control.hasAttribute("title")) control.setAttribute("title", t(key));
+      control.removeAttribute("title");
       mark(control, langOf(key));
+      return { element: control, key };
     };
-    rename(".maplibregl-ctrl-zoom-in", "imageZoomIn");
-    rename(".maplibregl-ctrl-zoom-out", "imageZoomOut");
-    rename(".maplibregl-ctrl-attrib-button", "mapAttribution");
-    const credits = (_a = container.current) == null ? void 0 : _a.querySelector(
-      ".maplibregl-ctrl-attrib-inner"
+    setTips(
+      [
+        rename(".maplibregl-ctrl-zoom-in", "imageZoomIn"),
+        rename(".maplibregl-ctrl-zoom-out", "imageZoomOut"),
+        rename(".maplibregl-ctrl-attrib-button", "mapAttribution")
+      ].filter((tip) => tip !== null)
     );
-    if (credits) mark(credits, styleUrl ? void 0 : "en");
+    const words = part == null ? void 0 : part.querySelector(".maplibregl-ctrl-attrib-inner");
+    if (words) mark(words, styleUrl ? void 0 : "en");
   }, [map, t, langOf, described, aboutId, landmark, styleUrl]);
   const drawn = useRef({});
   useEffect(() => {
@@ -353,6 +568,7 @@ function MapView({
       className: join("clover-geomap", className),
       "data-status": failed ? "error" : map ? "ready" : "loading",
       style,
+      ...highContrastProps(contrast),
       ...rest,
       children: [
         /* @__PURE__ */ jsxs(
@@ -372,12 +588,19 @@ function MapView({
                   style: { position: "absolute", inset: 0 }
                 }
               ),
+              map && tips.map(
+                ({ element, key }) => createPortal(
+                  /* @__PURE__ */ jsx(Tip, { label: t(key), lang: langOf(key) }),
+                  element,
+                  key
+                )
+              ),
               failed && /* @__PURE__ */ jsx(
                 "p",
                 {
                   className: "clover-geomap-error",
                   role: "alert",
-                  lang: langOf("mapUnavailable"),
+                  ...languageProps(langOf("mapUnavailable")),
                   children: t("mapUnavailable")
                 }
               )
@@ -385,18 +608,37 @@ function MapView({
           }
         ),
         described && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { id: aboutId, hidden: true, lang: langOf("mapPlacesListed"), children: t("mapPlacesListed", { count }) }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              id: aboutId,
+              hidden: true,
+              ...languageProps(langOf("mapPlacesListed")),
+              children: t("mapPlacesListed", { count })
+            }
+          ),
           /* @__PURE__ */ jsxs("ul", { className: "clover-geomap-places", children: [
             features.features.map((feature, index) => {
-              const { title, titleLang, canvasId } = feature.properties;
-              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              const { title, titleLang, canvasId, manifestId, navDate } = feature.properties;
+              const nameLang = title ? titleLang : langOf("mapPlaceUntitled");
+              return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  lang: title ? titleLang : langOf("mapPlaceUntitled"),
-                  "aria-current": canvasId && (current == null ? void 0 : current.includes(canvasId)) ? "true" : void 0,
+                  ...languageProps(nameLang),
+                  "aria-current": (current == null ? void 0 : current.includes(canvasId ?? manifestId ?? "")) ? "true" : void 0,
                   onClick: () => choose(feature),
-                  children: title || t("mapPlaceUntitled", { number: index + 1 })
+                  children: [
+                    title || t("mapPlaceUntitled", { number: index + 1 }),
+                    /* @__PURE__ */ jsx(
+                      NavDate,
+                      {
+                        value: navDate,
+                        className: "clover-geomap-place-date",
+                        within: nameLang
+                      }
+                    )
+                  ]
                 }
               ) }, `place-${index}`);
             }),
@@ -404,10 +646,10 @@ function MapView({
               const label = localize(item.label, language);
               return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs("button", { type: "button", onClick: () => show(item), children: [
                 label.text && /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx("span", { lang: label.lang, children: label.text }),
+                  /* @__PURE__ */ jsx("span", { ...languageProps(label.lang), children: label.text }),
                   " "
                 ] }),
-                /* @__PURE__ */ jsx("span", { lang: langOf("mapOverlay"), children: t("mapOverlay") })
+                /* @__PURE__ */ jsx("span", { ...languageProps(langOf("mapOverlay")), children: t("mapOverlay") })
               ] }) }, item.id);
             })
           ] })
@@ -427,14 +669,30 @@ function frame(map, bounds, zoom) {
 function center([[west, south], [east, north]]) {
   return [(west + east) / 2, (south + north) / 2];
 }
-function accentOf(element) {
-  const value = element ? getComputedStyle(element).getPropertyValue("--clover-color-accent").trim() : "";
-  return value || "#0065c3";
+function colorsOf(element) {
+  const token = (name, fallback) => (element ? getComputedStyle(element).getPropertyValue(name).trim() : "") || fallback;
+  const unit = parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+  return {
+    accent: token("--clover-color-accent", "#0065c3"),
+    dark: token("--clover-color-primary", "#1a1d1e"),
+    light: token("--clover-color-secondary", "#ffffff"),
+    // A point's dot, `m` across, as a hotspot's is.
+    dot: unit / 2
+  };
 }
-function addPlaceLayers(map, color) {
+const ACTIVE = [
+  "any",
+  ["boolean", ["feature-state", "hover"], false],
+  ["boolean", ["feature-state", "picked"], false],
+  ["boolean", ["feature-state", "linked"], false]
+];
+function addPlaceLayers(map, colors) {
+  const { accent, dark, light, dot } = colors;
   map.addSource(NAVPLACE, {
     type: "geojson",
-    data: { type: "FeatureCollection", features: [] }
+    data: { type: "FeatureCollection", features: [] },
+    // Each feature its place in the data as its id, for its state (`ACTIVE`).
+    generateId: true
   });
   map.addLayer({
     id: FILL,
@@ -448,8 +706,14 @@ function addPlaceLayers(map, color) {
       false
     ],
     paint: {
-      "fill-color": ["coalesce", ["get", "fill"], color],
-      "fill-opacity": ["coalesce", ["get", "fill-opacity"], 0.18]
+      // Clear but for a fill its feature asks for: still found by the pointer inside.
+      "fill-color": ["coalesce", ["get", "fill"], accent],
+      "fill-opacity": [
+        "case",
+        ["has", "fill"],
+        ["coalesce", ["get", "fill-opacity"], 0.18],
+        0
+      ]
     }
   });
   const lines = [
@@ -459,16 +723,16 @@ function addPlaceLayers(map, color) {
     true,
     false
   ];
+  const round = { "line-join": "round", "line-cap": "round" };
   map.addLayer({
     id: CASING,
     type: "line",
     source: NAVPLACE,
     filter: lines,
-    layout: { "line-join": "round", "line-cap": "round" },
+    layout: round,
     paint: {
-      "line-color": "#ffffff",
-      "line-width": ["+", ["coalesce", ["get", "stroke-width"], 2], 2],
-      "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1]
+      "line-color": dark,
+      "line-width": ["case", ACTIVE, 6, 3]
     }
   });
   map.addLayer({
@@ -476,22 +740,68 @@ function addPlaceLayers(map, color) {
     type: "line",
     source: NAVPLACE,
     filter: lines,
+    layout: round,
     paint: {
-      "line-color": ["coalesce", ["get", "stroke"], color],
-      "line-width": ["coalesce", ["get", "stroke-width"], 2],
+      "line-color": light,
+      "line-width": ["case", ACTIVE, 4, 1]
+    }
+  });
+  map.addLayer({
+    id: ACCENT,
+    type: "line",
+    source: NAVPLACE,
+    filter: lines,
+    layout: round,
+    paint: {
+      "line-color": ["coalesce", ["get", "stroke"], accent],
+      "line-width": [
+        "case",
+        ACTIVE,
+        2,
+        ["has", "stroke"],
+        ["coalesce", ["get", "stroke-width"], 2],
+        0
+      ],
       "line-opacity": ["coalesce", ["get", "stroke-opacity"], 1]
     }
   });
+  const points = [
+    "match",
+    ["geometry-type"],
+    ["Point", "MultiPoint"],
+    true,
+    false
+  ];
+  map.addLayer({
+    id: POINT_HIT,
+    type: "circle",
+    source: NAVPLACE,
+    filter: points,
+    paint: { "circle-radius": 12, "circle-opacity": 0 }
+  });
+  map.addLayer({
+    id: POINT_EDGE,
+    type: "circle",
+    source: NAVPLACE,
+    filter: points,
+    paint: {
+      // Active, the accent band round the light ring, then the dark edge round that.
+      "circle-radius": ["case", ACTIVE, dot + 2 + 2, dot + 2],
+      "circle-color": accent,
+      "circle-stroke-width": 1,
+      "circle-stroke-color": dark
+    }
+  });
   map.addLayer({
     id: POINT,
     type: "circle",
     source: NAVPLACE,
-    filter: ["match", ["geometry-type"], ["Point", "MultiPoint"], true, false],
+    filter: points,
     paint: {
-      "circle-radius": 6,
-      "circle-color": ["coalesce", ["get", "marker-color"], color],
+      "circle-radius": dot,
+      "circle-color": ["coalesce", ["get", "marker-color"], accent],
       "circle-stroke-width": 2,
-      "circle-stroke-color": "#ffffff"
+      "circle-stroke-color": light
     }
   });
 }