@gramps-connect/story 0.3.0 → 0.5.0

package/dist/editor.js

@@ -1,20 +1,20 @@
 // src/editor/StoryEditor.tsx
-import { useCallback, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef7, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect9, useMemo as useMemo4, useRef as useRef11, useState as useState10 } from "react";
 import {
-  ActionIcon as ActionIcon2,
+  ActionIcon as ActionIcon3,
   Badge,
-  Box as Box2,
-  Button as Button3,
-  Divider,
-  Group as Group4,
-  Modal,
+  Box as Box4,
+  Button as Button6,
+  Divider as Divider2,
+  Group as Group7,
+  Modal as Modal2,
   Popover,
   Select,
-  Stack as Stack5,
-  Text as Text4,
-  TextInput as TextInput3,
-  Tooltip as Tooltip2,
-  UnstyledButton as UnstyledButton2
+  Stack as Stack8,
+  Text as Text7,
+  TextInput as TextInput6,
+  Tooltip as Tooltip4,
+  UnstyledButton as UnstyledButton3
 } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
 
@@ -1787,6 +1787,53 @@ function findUnknownFields(value, node, path, warnings, root = story_schema_defa
   }
 }
 
+// src/player/geo.ts
+function visit(coords, bounds) {
+  if (!Array.isArray(coords)) return;
+  if (coords.length >= 2 && typeof coords[0] === "number" && typeof coords[1] === "number") {
+    const [lon, lat] = coords;
+    bounds[0] = Math.min(bounds[0], lon);
+    bounds[1] = Math.min(bounds[1], lat);
+    bounds[2] = Math.max(bounds[2], lon);
+    bounds[3] = Math.max(bounds[3], lat);
+    return;
+  }
+  for (const child of coords) visit(child, bounds);
+}
+function visitGeoJson(node, bounds) {
+  if (!node || typeof node !== "object") return;
+  const obj = node;
+  if (obj.coordinates !== void 0) visit(obj.coordinates, bounds);
+  if (obj.geometry) visitGeoJson(obj.geometry, bounds);
+  for (const g of obj.geometries ?? []) visitGeoJson(g, bounds);
+  for (const f of obj.features ?? []) visitGeoJson(f, bounds);
+}
+function placeBounds(place) {
+  if (!place) return null;
+  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
+  visitGeoJson(place.geometry, bounds);
+  for (const overlay of place.overlays ?? []) visit(overlay.corners, bounds);
+  return Number.isFinite(bounds[0]) ? bounds : null;
+}
+function placeCenter(place) {
+  if (place?.lat !== void 0 && place.lon !== void 0) return [place.lon, place.lat];
+  const bounds = placeBounds(place);
+  return bounds ? [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2] : null;
+}
+function storyPlaces(places) {
+  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
+  const points = /* @__PURE__ */ new Map();
+  for (const place of places) {
+    const center = placeCenter(place);
+    if (!center) continue;
+    points.set(`${center[0].toFixed(5)},${center[1].toFixed(5)}`, center);
+    visit(center, bounds);
+    const box = placeBounds(place);
+    if (box) visit([[box[0], box[1]], [box[2], box[3]]], bounds);
+  }
+  return points.size ? { points: [...points.values()], bounds } : null;
+}
+
 // src/player/StoryPlayer.tsx
 import { useEffect as useEffect3, useMemo, useRef as useRef3, useState as useState3 } from "react";
 
@@ -1839,53 +1886,6 @@ function timelineYear(date) {
   return sortYear + (month - 1) / 12 + (day ? (day - 1) / 365 : 0);
 }
 
-// src/player/geo.ts
-function visit(coords, bounds) {
-  if (!Array.isArray(coords)) return;
-  if (coords.length >= 2 && typeof coords[0] === "number" && typeof coords[1] === "number") {
-    const [lon, lat] = coords;
-    bounds[0] = Math.min(bounds[0], lon);
-    bounds[1] = Math.min(bounds[1], lat);
-    bounds[2] = Math.max(bounds[2], lon);
-    bounds[3] = Math.max(bounds[3], lat);
-    return;
-  }
-  for (const child of coords) visit(child, bounds);
-}
-function visitGeoJson(node, bounds) {
-  if (!node || typeof node !== "object") return;
-  const obj = node;
-  if (obj.coordinates !== void 0) visit(obj.coordinates, bounds);
-  if (obj.geometry) visitGeoJson(obj.geometry, bounds);
-  for (const g of obj.geometries ?? []) visitGeoJson(g, bounds);
-  for (const f of obj.features ?? []) visitGeoJson(f, bounds);
-}
-function placeBounds(place) {
-  if (!place) return null;
-  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
-  visitGeoJson(place.geometry, bounds);
-  for (const overlay of place.overlays ?? []) visit(overlay.corners, bounds);
-  return Number.isFinite(bounds[0]) ? bounds : null;
-}
-function placeCenter(place) {
-  if (place?.lat !== void 0 && place.lon !== void 0) return [place.lon, place.lat];
-  const bounds = placeBounds(place);
-  return bounds ? [(bounds[0] + bounds[2]) / 2, (bounds[1] + bounds[3]) / 2] : null;
-}
-function storyPlaces(places) {
-  const bounds = [Infinity, Infinity, -Infinity, -Infinity];
-  const points = /* @__PURE__ */ new Map();
-  for (const place of places) {
-    const center = placeCenter(place);
-    if (!center) continue;
-    points.set(`${center[0].toFixed(5)},${center[1].toFixed(5)}`, center);
-    visit(center, bounds);
-    const box = placeBounds(place);
-    if (box) visit([[box[0], box[1]], [box[2], box[3]]], bounds);
-  }
-  return points.size ? { points: [...points.values()], bounds } : null;
-}
-
 // src/player/MapBackground.tsx
 import { useEffect, useRef, useState } from "react";
 import * as maplibregl from "maplibre-gl";
@@ -2057,7 +2057,9 @@ function MapBackground({ initialCenter, current, dark, colors, panelFraction, oh
       type: "fill",
       source: SHAPE_SOURCE,
       filter: ["==", ["geometry-type"], "Polygon"],
-      paint: { "fill-color": color, "fill-opacity": 0.25 }
+      // And its own `opacity` (what the map editor sets on an area) over
+      // a light default.
+      paint: { "fill-color": color, "fill-opacity": ["coalesce", ["to-number", ["get", "opacity"], 0.25], 0.25] }
     });
     map.addLayer({
       id: LINE_LAYER,
@@ -2967,6 +2969,30 @@ function slideDate(previous, text, edtf) {
   if (next.edtf !== previous?.edtf) delete next.sortYear;
   return next;
 }
+function patchPlace(place, patch) {
+  if (place && Object.entries(patch).every(([key, value]) => place[key] === value)) return place;
+  const next = patched(place ?? {}, patch);
+  return Object.keys(next).length ? next : void 0;
+}
+var roundDegrees = (value) => Math.round(value * 1e5) / 1e5;
+function parseLatLon(text) {
+  const parts = text.trim().split(/\s*[,;\s]\s*/);
+  if (parts.length !== 2 || parts.some((p) => !/^[-+]?(\d+\.?\d*|\.\d+)$/.test(p))) return null;
+  const [lat, lon] = parts.map(Number);
+  if (Math.abs(lat) > 90 || Math.abs(lon) > 180) return null;
+  return { lat, lon };
+}
+function formatLatLon(lat, lon) {
+  return `${roundDegrees(lat)}, ${roundDegrees(lon)}`;
+}
+function storyPlaceChoices(doc, exceptIndex) {
+  const byName = /* @__PURE__ */ new Map();
+  doc.slides.forEach((slide, i) => {
+    const name = slide.place?.name?.trim();
+    if (i !== exceptIndex && name && !byName.has(name)) byName.set(name, slide.place);
+  });
+  return [...byName.values()];
+}
 function sameBytes(a, b) {
   if (!a || a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
@@ -3249,22 +3275,1803 @@ function PhotosField({ photos, media, urlFor, strings, busy, onChange, onFiles,
   );
 }
 
-// src/editor/SlideList.tsx
-import { useState as useState6 } from "react";
-import { Stack as Stack3, UnstyledButton } from "@mantine/core";
+// src/editor/PlaceField.tsx
+import { useEffect as useEffect7, useMemo as useMemo2, useRef as useRef7, useState as useState6 } from "react";
+import { Autocomplete, Button as Button2, Group as Group3, Loader as Loader2, Stack as Stack3, Text as Text3, TextInput as TextInput3, Tooltip as Tooltip2, UnstyledButton } from "@mantine/core";
+
+// src/editor/PlaceMap.tsx
+import { useEffect as useEffect6, useRef as useRef6 } from "react";
+import * as maplibregl2 from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
 import { jsx as jsx7 } from "react/jsx-runtime";
+function PlaceMap({ point, around, dark = false, label, onPick }) {
+  const container = useRef6(null);
+  const mapRef = useRef6(null);
+  const markerRef = useRef6(null);
+  const onPickRef = useRef6(onPick);
+  onPickRef.current = onPick;
+  const pick = (lngLat) => onPickRef.current([roundDegrees(lngLat.lng), roundDegrees(lngLat.lat)]);
+  const start = useRef6({ point, around });
+  useEffect6(() => {
+    if (!container.current) return;
+    const { point: first, around: box } = start.current;
+    const map = new maplibregl2.Map({
+      container: container.current,
+      style: mapStyleUrl(dark, null),
+      ...first ? { center: first, zoom: 9 } : box ? { bounds: box, fitBoundsOptions: { padding: 30, maxZoom: 9 } } : { center: [10, 30], zoom: 0.5 },
+      attributionControl: { compact: true },
+      // Scrolling the form past the map shouldn't zoom it.
+      cooperativeGestures: true
+    });
+    map.addControl(new maplibregl2.NavigationControl({ showCompass: false }), "top-right");
+    map.getCanvas().style.cursor = "crosshair";
+    map.on("click", (e) => pick(e.lngLat));
+    mapRef.current = map;
+    return () => {
+      markerRef.current?.remove();
+      markerRef.current = null;
+      map.remove();
+      mapRef.current = null;
+    };
+  }, [dark]);
+  useEffect6(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    if (!point) {
+      markerRef.current?.remove();
+      markerRef.current = null;
+      return;
+    }
+    if (!markerRef.current) {
+      const el = document.createElement("div");
+      const c = defaultColors(dark);
+      el.innerHTML = `<svg viewBox="0 0 24 24" width="28" height="28" style="display:block;cursor:grab"><path d="${PIN_PATH_D}" fill="${c.mark}" stroke="${c.surface}" stroke-width="1.5" /></svg>`;
+      const marker = new maplibregl2.Marker({ element: el, anchor: "bottom", draggable: true }).setLngLat(point).addTo(map);
+      marker.on("dragend", () => pick(marker.getLngLat()));
+      markerRef.current = marker;
+    } else {
+      markerRef.current.setLngLat(point);
+    }
+    if (!map.getBounds().contains(point)) map.easeTo({ center: point, zoom: Math.max(map.getZoom(), 8) });
+  }, [point?.[0], point?.[1], dark]);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      ref: container,
+      role: "application",
+      "aria-label": label,
+      style: { height: 240, borderRadius: 6, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }
+    }
+  );
+}
+
+// src/editor/PlaceField.tsx
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+function PlaceField({ place, choices, around, language, search, dark, strings, onChange, onEditMap }) {
+  const lat = place?.lat;
+  const lon = place?.lon;
+  const point = lat !== void 0 && lon !== void 0 ? [lon, lat] : null;
+  const name = place?.name ?? "";
+  const [coords, setCoords] = useState6(point ? formatLatLon(point[1], point[0]) : "");
+  useEffect7(() => {
+    setCoords((typed) => {
+      const parsed = parseLatLon(typed);
+      if (lat === void 0 || lon === void 0) return parsed ? "" : typed;
+      return parsed && parsed.lat === lat && parsed.lon === lon ? typed : formatLatLon(lat, lon);
+    });
+  }, [lat, lon]);
+  const coordsInvalid = coords.trim() !== "" && !parseLatLon(coords);
+  const [found, setFound] = useState6({ state: "idle" });
+  const searching = useRef7(null);
+  useEffect7(() => () => searching.current?.abort(), []);
+  const find = async () => {
+    if (!search || !name.trim()) return;
+    searching.current?.abort();
+    const controller = new AbortController();
+    searching.current = controller;
+    setFound({ state: "searching" });
+    try {
+      const results = await search.search(name.trim(), language, controller.signal);
+      setFound(results.length ? { state: "results", results } : { state: "message", message: strings.findPlaceNone });
+    } catch {
+      if (!controller.signal.aborted) setFound({ state: "message", message: strings.findPlaceFailed });
+    }
+  };
+  const choose = async (result) => {
+    if (!search) return;
+    searching.current?.abort();
+    const controller = new AbortController();
+    searching.current = controller;
+    setFound({ state: "searching" });
+    try {
+      const at = await search.point(result, controller.signal);
+      if (!at) {
+        setFound({ state: "message", message: strings.findPlaceNoPoint(result.label) });
+        return;
+      }
+      setFound({ state: "idle" });
+      onChange((p) => patchPlace(p, { name: result.label, lat: roundDegrees(at.lat), lon: roundDegrees(at.lon) }), "place");
+    } catch {
+      if (!controller.signal.aborted) setFound({ state: "message", message: strings.findPlaceFailed });
+    }
+  };
+  const byName = useMemo2(() => new Map(choices.map((c) => [c.name.trim(), c])), [choices]);
+  const keeps = [
+    place?.geometry ? strings.placeShape : null,
+    place?.overlays?.length ? strings.placeOverlays(place.overlays.length) : null
+  ].filter(Boolean);
+  return /* @__PURE__ */ jsxs6(Stack3, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs6(Group3, { justify: "space-between", children: [
+      /* @__PURE__ */ jsx8(Text3, { size: "sm", fw: 500, children: strings.place }),
+      place && /* @__PURE__ */ jsx8(Button2, { variant: "subtle", size: "compact-xs", color: "red", onClick: () => {
+        setFound({ state: "idle" });
+        onChange(() => void 0, "place");
+      }, children: strings.removePlace })
+    ] }),
+    /* @__PURE__ */ jsxs6(Group3, { gap: "xs", align: "flex-end", wrap: "nowrap", children: [
+      /* @__PURE__ */ jsx8(
+        Autocomplete,
+        {
+          size: "xs",
+          label: strings.placeName,
+          style: { flex: 1 },
+          value: name,
+          data: [...byName.keys()],
+          comboboxProps: { withinPortal: true },
+          onChange: (value) => onChange((p) => patchPlace(p, { name: value || void 0 }), "place:name"),
+          onOptionSubmit: (value) => {
+            const chosen = byName.get(value);
+            if (chosen) onChange(() => structuredClone(chosen), "place");
+          }
+        }
+      ),
+      search && /* @__PURE__ */ jsx8(Tooltip2, { label: strings.findPlaceHint, multiline: true, w: 260, children: /* @__PURE__ */ jsx8(Button2, { variant: "default", size: "xs", disabled: !name.trim() || found.state === "searching", onClick: () => void find(), children: strings.findPlace }) })
+    ] }),
+    found.state === "searching" && /* @__PURE__ */ jsx8(Loader2, { size: "xs" }),
+    found.state === "message" && /* @__PURE__ */ jsx8(Text3, { size: "xs", c: "dimmed", role: "status", children: found.message }),
+    found.state === "results" && /* @__PURE__ */ jsx8(Stack3, { gap: 2, role: "list", "aria-label": strings.findPlace, children: found.results.map((result) => /* @__PURE__ */ jsxs6(
+      UnstyledButton,
+      {
+        role: "listitem",
+        onClick: () => void choose(result),
+        style: { padding: "4px 8px", borderRadius: 4, border: "1px solid var(--mantine-color-default-border)" },
+        children: [
+          /* @__PURE__ */ jsx8(Text3, { size: "sm", children: result.label }),
+          result.description && /* @__PURE__ */ jsx8(Text3, { size: "xs", c: "dimmed", children: result.description })
+        ]
+      },
+      result.id
+    )) }),
+    /* @__PURE__ */ jsx8(
+      TextInput3,
+      {
+        size: "xs",
+        label: strings.coordinates,
+        placeholder: strings.coordinatesHint,
+        w: 260,
+        value: coords,
+        error: coordsInvalid ? strings.coordinatesInvalid : void 0,
+        onChange: (e) => {
+          const text = e.currentTarget.value;
+          setCoords(text);
+          const parsed = parseLatLon(text);
+          if (!text.trim()) onChange((p) => patchPlace(p, { lat: void 0, lon: void 0 }), "place:point");
+          else if (parsed) onChange((p) => patchPlace(p, parsed), "place:point");
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      PlaceMap,
+      {
+        point,
+        around,
+        dark,
+        label: strings.placeMap,
+        onPick: ([pickedLon, pickedLat]) => onChange((p) => patchPlace(p, { lat: pickedLat, lon: pickedLon }), "place:point")
+      }
+    ),
+    /* @__PURE__ */ jsx8(Text3, { size: "xs", c: "dimmed", children: strings.placeMapHint }),
+    keeps.length > 0 && /* @__PURE__ */ jsx8(Text3, { size: "xs", c: "dimmed", children: strings.placeKeeps(keeps.join(", ")) }),
+    onEditMap && /* @__PURE__ */ jsxs6(Group3, { gap: "sm", wrap: "nowrap", align: "center", children: [
+      /* @__PURE__ */ jsx8(Button2, { variant: "default", size: "xs", style: { flex: "none" }, onClick: onEditMap, children: strings.editMap }),
+      /* @__PURE__ */ jsx8(Text3, { size: "xs", c: "dimmed", children: strings.editMapHint })
+    ] })
+  ] });
+}
+
+// src/editor/PlaceMapDialog.tsx
+import { useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
+import { ActionIcon as ActionIcon2, Box as Box3, Button as Button4, Group as Group5, Modal, Stack as Stack5, Text as Text5, TextInput as TextInput5, Tooltip as Tooltip3 } from "@mantine/core";
+
+// src/mapEdit/model.ts
+var EDITOR_OWNED = /* @__PURE__ */ new Set(["name", "color", "opacity"]);
+var DROPPED = /* @__PURE__ */ new Set(["coordinateProperties", "_gpxType", "styleUrl", "@geometry-type"]);
+function round2d(position) {
+  return [Number(position[0].toFixed(9)), Number(position[1].toFixed(9))];
+}
+function singleParts(geometry) {
+  switch (geometry.type) {
+    case "Point":
+      return [{ type: "Point", coordinates: round2d(geometry.coordinates) }];
+    case "LineString":
+      return [{ type: "LineString", coordinates: geometry.coordinates.map(round2d) }];
+    case "Polygon":
+      return [{ type: "Polygon", coordinates: geometry.coordinates.map((ring) => ring.map(round2d)) }];
+    case "MultiPoint":
+      return geometry.coordinates.map((c) => ({ type: "Point", coordinates: round2d(c) }));
+    case "MultiLineString":
+      return geometry.coordinates.map((line) => ({ type: "LineString", coordinates: line.map(round2d) }));
+    case "MultiPolygon":
+      return geometry.coordinates.map((poly) => ({ type: "Polygon", coordinates: poly.map((ring) => ring.map(round2d)) }));
+    case "GeometryCollection":
+      return geometry.geometries.flatMap(singleParts);
+  }
+}
+var modeOf = (geometry) => geometry.type === "Point" ? "point" : geometry.type === "LineString" ? "linestring" : "polygon";
+function extraProperties(properties) {
+  const extra = {};
+  for (const [key, value] of Object.entries(properties)) {
+    if (EDITOR_OWNED.has(key) || DROPPED.has(key) || value === void 0 || value === null) continue;
+    extra[key] = value;
+  }
+  return extra;
+}
+function partTimes(feature, partCount) {
+  const times = feature.properties?.coordinateProperties?.times;
+  if (!Array.isArray(times) || times.length === 0) return [];
+  if (feature.geometry?.type === "LineString" && times.every((t) => typeof t === "string")) {
+    return [times];
+  }
+  if (feature.geometry?.type === "MultiLineString" && times.length === partCount && times.every(Array.isArray)) {
+    return times;
+  }
+  return [];
+}
+function prepareForEditing(features, firstIndex = 0) {
+  const session = { parts: [], sources: /* @__PURE__ */ new Map(), locked: /* @__PURE__ */ new Map() };
+  features.forEach((feature, i) => {
+    const f = firstIndex + i;
+    if (!feature.geometry) return;
+    const properties = feature.properties ?? {};
+    const extra = extraProperties(properties);
+    const geometries = singleParts(feature.geometry);
+    const times = partTimes(feature, geometries.length);
+    const opacityRaw = Number(properties.opacity);
+    const opacity = Number.isFinite(opacityRaw) && opacityRaw >= 0 && opacityRaw <= 1 ? opacityRaw : void 0;
+    geometries.forEach((geometry, index) => {
+      const sourceKey = `f${f}p${index}`;
+      const partTimesHere = times[index];
+      const keepTimes = geometry.type === "LineString" && partTimesHere?.length === geometry.coordinates.length;
+      session.sources.set(sourceKey, {
+        group: `f${f}`,
+        index,
+        extra,
+        ...keepTimes ? { times: partTimesHere, coords: geometry.coordinates } : {}
+      });
+      const part = {
+        sourceKey,
+        mode: modeOf(geometry),
+        geometry,
+        name: typeof properties.name === "string" ? properties.name : void 0,
+        color: typeof properties.color === "string" ? properties.color : void 0,
+        ...geometry.type === "Polygon" ? { opacity } : {}
+      };
+      if (geometry.type === "Polygon" && geometry.coordinates.length > 1) session.locked.set(sourceKey, part);
+      else session.parts.push(part);
+    });
+  });
+  return session;
+}
+function addToSession(session, features) {
+  let next = 0;
+  for (const source of session.sources.values()) next = Math.max(next, Number(source.group.slice(1)) + 1);
+  const added = prepareForEditing(features, next);
+  session.parts.push(...added.parts);
+  for (const [key, source] of added.sources) session.sources.set(key, source);
+  for (const [key, part] of added.locked) session.locked.set(key, part);
+  return added;
+}
+function lockPart(session, sourceKey) {
+  const index = session.parts.findIndex((part) => part.sourceKey === sourceKey);
+  if (index < 0) return;
+  session.locked.set(sourceKey, session.parts[index]);
+  session.parts.splice(index, 1);
+}
+var samePositions = (a, b) => a.length === b.length && a.every((p, i) => p[0] === b[i][0] && p[1] === b[i][1]);
+function joinGeometries(geometries) {
+  if (geometries.length === 1) return geometries[0];
+  const kinds = new Set(geometries.map((g) => g.type));
+  if (kinds.size === 1) {
+    if (kinds.has("Point")) return { type: "MultiPoint", coordinates: geometries.map((g) => g.coordinates) };
+    if (kinds.has("LineString")) return { type: "MultiLineString", coordinates: geometries.map((g) => g.coordinates) };
+    return { type: "MultiPolygon", coordinates: geometries.map((g) => g.coordinates) };
+  }
+  return { type: "GeometryCollection", geometries };
+}
+function assembleForSaving(session, saved) {
+  const entries = [
+    ...saved.map((part) => ({ part, source: part.sourceKey ? session.sources.get(part.sourceKey) : void 0 })),
+    ...[...session.locked.values()].map((part) => ({ part, source: session.sources.get(part.sourceKey) }))
+  ];
+  const buckets = /* @__PURE__ */ new Map();
+  let newCount = 0;
+  for (const entry of entries) {
+    const { part, source } = entry;
+    const key = source ? `${source.group}|${part.name ?? ""}|${part.color ?? ""}|${part.opacity ?? ""}` : `new${newCount++}`;
+    const bucket = buckets.get(key);
+    if (bucket) bucket.push(entry);
+    else buckets.set(key, [entry]);
+  }
+  const groupOrder = (key) => key.startsWith("new") ? Infinity : Number(key.slice(1, key.indexOf("|")));
+  return [...buckets.entries()].sort(([a], [b]) => groupOrder(a) - groupOrder(b)).map(([, bucket]) => {
+    bucket.sort((a, b) => (a.source?.index ?? 0) - (b.source?.index ?? 0));
+    const first = bucket[0];
+    const geometry = joinGeometries(bucket.map((e) => e.part.geometry));
+    const times = bucket.map(({ part, source }) => part.geometry.type === "LineString" && source?.times && source.coords && samePositions(part.geometry.coordinates, source.coords) ? source.times : void 0);
+    const allTimed = bucket.every((e) => e.part.geometry.type === "LineString") && times.every(Boolean);
+    return {
+      type: "Feature",
+      geometry,
+      properties: {
+        ...first.source?.extra ?? {},
+        ...first.part.color !== void 0 ? { color: first.part.color } : {},
+        ...first.part.name ? { name: first.part.name } : {},
+        ...first.part.opacity !== void 0 ? { opacity: first.part.opacity } : {},
+        ...allTimed ? { coordinateProperties: { times: bucket.length === 1 ? times[0] : times } } : {}
+      }
+    };
+  });
+}
+
+// src/mapEdit/mapFile.ts
+import { gpx, kml } from "@tmcw/togeojson";
+var MEDIA_HANDLE_PREFIX = "media-handle:";
+function applySimplestyle(feature) {
+  const props = feature.properties ?? {};
+  const isRegion = feature.geometry?.type === "Polygon" || feature.geometry?.type === "MultiPolygon";
+  const color = props.color ?? (isRegion ? props.fill ?? props.stroke : props.stroke ?? props["marker-color"]);
+  const opacity = props.opacity ?? (isRegion ? props["fill-opacity"] : void 0);
+  if (color === props.color && opacity === props.opacity) return feature;
+  return { ...feature, properties: { ...props, color, opacity } };
+}
+function geoJsonFeatures(doc) {
+  if (doc.type === "FeatureCollection") return doc.features ?? [];
+  if (doc.type === "Feature") return [doc];
+  return [{ type: "Feature", geometry: doc, properties: {} }];
+}
+function asGroundOverlay(feature) {
+  const props = feature.properties ?? {};
+  if (props[IMAGE_OVERLAY_PROPERTY] !== true || typeof props.image !== "string") return feature;
+  const { [IMAGE_OVERLAY_PROPERTY]: _marker, image, ...rest } = props;
+  return {
+    ...feature,
+    properties: { ...rest, "@geometry-type": "groundoverlay", icon: `${MEDIA_HANDLE_PREFIX}${image}` }
+  };
+}
+function parseMapFile(text) {
+  const hasGeometry = (f) => f.geometry != null;
+  if (text.trimStart().startsWith("{")) {
+    return geoJsonFeatures(JSON.parse(text)).filter(hasGeometry).map(asGroundOverlay).map(applySimplestyle);
+  }
+  const dom = new DOMParser().parseFromString(text, "text/xml");
+  if (dom.documentElement.localName === "gpx") {
+    return gpx(dom).features.filter(hasGeometry).map(applySimplestyle);
+  }
+  return kml(dom).features.filter(hasGeometry);
+}
+var IMAGE_OVERLAY_PROPERTY = "gramps:image-overlay";
+
+// src/mapEdit/geometry.ts
+var DEG_TO_RAD = Math.PI / 180;
+var RAD_TO_DEG = 180 / Math.PI;
+function mercatorFromLngLat([lng, lat]) {
+  const x = (180 + lng) / 360;
+  const y = (180 - RAD_TO_DEG * Math.log(Math.tan(Math.PI / 4 + lat * DEG_TO_RAD / 2))) / 360;
+  return [x, y];
+}
+function lngLatFromMercator([x, y]) {
+  const lng = x * 360 - 180;
+  const lat = 90 - 2 * Math.atan(Math.exp((y * 360 - 180) * DEG_TO_RAD)) * RAD_TO_DEG;
+  return [lng, lat];
+}
+function rotatePoint(point, center, rotationDeg) {
+  const angle = rotationDeg * DEG_TO_RAD;
+  const cos = Math.cos(angle);
+  const sin = Math.sin(angle);
+  const [px, py] = mercatorFromLngLat(point);
+  const [cx, cy] = mercatorFromLngLat(center);
+  const dx = px - cx;
+  const dy = -(py - cy);
+  const rx = dx * cos - dy * sin;
+  const ry = dx * sin + dy * cos;
+  return lngLatFromMercator([cx + rx, cy - ry]);
+}
+function scalePoint(point, center, scale) {
+  const [px, py] = mercatorFromLngLat(point);
+  const [cx, cy] = mercatorFromLngLat(center);
+  return lngLatFromMercator([cx + (px - cx) * scale, cy + (py - cy) * scale]);
+}
+function mercatorDistance(a, b) {
+  const [ax, ay] = mercatorFromLngLat(a);
+  const [bx, by] = mercatorFromLngLat(b);
+  return Math.hypot(bx - ax, by - ay);
+}
+function mercatorBearing(from, to) {
+  const [fx, fy] = mercatorFromLngLat(from);
+  const [tx, ty] = mercatorFromLngLat(to);
+  return Math.atan2(-(ty - fy), tx - fx) * RAD_TO_DEG;
+}
+
+// src/editor/MapEditor.tsx
+import { forwardRef, useEffect as useEffect8, useImperativeHandle, useRef as useRef8, useState as useState7 } from "react";
+import * as maplibregl3 from "maplibre-gl";
+import {
+  TerraDraw,
+  TerraDrawLineStringMode,
+  TerraDrawPointMode,
+  TerraDrawPolygonMode,
+  TerraDrawRectangleMode,
+  TerraDrawSelectMode
+} from "terra-draw";
+import { TerraDrawMapLibreGLAdapter } from "terra-draw-maplibre-gl-adapter";
+import {
+  Alert,
+  Box as Box2,
+  Button as Button3,
+  ColorInput,
+  Divider,
+  Group as Group4,
+  Kbd,
+  List,
+  Loader as Loader3,
+  NumberInput,
+  SegmentedControl,
+  Slider,
+  Stack as Stack4,
+  Text as Text4,
+  TextInput as TextInput4
+} from "@mantine/core";
+
+// src/editor/mapEditorStrings.ts
+var MAP_EDITOR_ENGLISH = {
+  point: "Point",
+  line: "Line",
+  polygon: "Polygon",
+  rectangle: "Rectangle",
+  select: "Select",
+  image: "Image",
+  editOptions: "Edit Options",
+  labelText: "Label text",
+  regionName: "Region name (optional)",
+  fillOpacity: "Fill opacity",
+  scale: "Scale",
+  transform: "Transform",
+  overlayName: "Overlay name (optional)",
+  opacity: "Opacity",
+  stackingOrder: "Stacking order",
+  removeImage: "Remove this image",
+  resizeImage: "Drag to resize (keeps its exact shape, warped or not)",
+  rotateImage: "Drag to rotate",
+  warpCorner: "Drag to warp this corner",
+  basemapFailed: "The basemap could not be loaded.",
+  imageFailed: "The image failed to load.",
+  lockedOne: "1 shape can't be edited here",
+  lockedMany: (count) => `${count} shapes can't be edited here`,
+  lockedExplain: "For example, a region with a hole in it, or one whose outline crosses itself. It's drawn dashed, and saved exactly as it was.",
+  helpTitle: "How to use this editor",
+  helpDrawing: "Drawing",
+  helpPoint: "Point: click once to place it.",
+  helpLine: "Line, Polygon: click to place each point, then click that first point's own marker again to finish -- it's styled differently once there's enough points to close the shape. Pressing",
+  helpEnterFinishes: "finishes it too;",
+  helpEscCancels: "cancels it.",
+  helpRectangle: "Rectangle: click and drag from one corner to the opposite corner.",
+  helpImage: "Image: pick a media object to overlay -- see",
+  helpImages: "Images",
+  helpBelow: "below.",
+  helpEditing: "Editing a shape",
+  helpSelect: "Select: click a shape to select it, then drag it or one of its handles.",
+  helpVertex: "Drag a vertex to move it. To add a new point on a Line, Polygon, or Rectangle, drag the small midpoint marker between two existing vertices outward.",
+  helpColor: "The color swatch sets the next shape's color -- or, with a shape selected, changes its color.",
+  helpDelete: "Delete a selected shape or image with",
+  helpOr: "or",
+  helpRotate: "Rotate a selected Polygon, Rectangle, or Line: hold",
+  helpRotateHandle: "while dragging one of its handles.",
+  helpImageMove: "Drag anywhere on an image to move it.",
+  helpImageResize: "Drag its \u2198 handle to resize it -- grows or shrinks from its own center, keeping its exact shape (works the same on a warped image, too).",
+  helpImageRotate: "Drag its \u21BB handle to rotate it -- handy for aligning a scanned old map.",
+  helpImageTransform: `Switch to "Transform" to also show 4 corner handles you can drag independently (rubber-sheeting) -- for a scanned map that isn't printed at a uniform scale/orientation. Switching back to "Scale" just hides those 4 handles again; move/resize/rotate keep working on the image's exact current shape either way.`,
+  helpImageRemove: "Click its \xD7 handle to remove it."
+};
+
+// src/editor/MapEditor.tsx
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var TOOLBAR = [
+  { mode: "point", label: "point" },
+  { mode: "linestring", label: "line" },
+  { mode: "polygon", label: "polygon" },
+  { mode: "rectangle", label: "rectangle" },
+  { mode: "select", label: "select" }
+];
+var COLOR_SWATCHES = [
+  "#2a78d6",
+  "#d64545",
+  "#3aa657",
+  "#e0a325",
+  "#8654c9",
+  "#2aa7a0",
+  "#e0678a",
+  "#555555"
+];
+var EMPTY_LABEL_PREVIEW = { type: "FeatureCollection", features: [] };
+var OVERLAY_ANCHOR_LAYER = "image-overlay-anchor";
+var TERRA_DRAW_LAYERS = ["td-polygon", "td-polygon-outline", "td-linestring", "td-point", "td-point-marker"];
+var LOCKED_SOURCE = "locked-shapes";
+var LOCKED_FILL_LAYER = "locked-shapes-fill";
+var LOCKED_LINE_LAYER = "locked-shapes-line";
+var LABEL_PREVIEW_SOURCE = "label-preview";
+var LABEL_PREVIEW_LAYER = "label-preview-text";
+var TOOLBAR_CLASS = "gc-map-editor-toolbar";
+var TOOLBAR_CSS = `.${TOOLBAR_CLASS} { pointer-events: none; } .${TOOLBAR_CLASS} > * { pointer-events: auto; }`;
+function overlayCenter(corners) {
+  let lng = 0, lat = 0;
+  for (const [x, y] of corners) {
+    lng += x;
+    lat += y;
+  }
+  return [lng / 4, lat / 4];
+}
+function rotateHandleAnchor(corners, center) {
+  const [topLeft, topRight] = corners;
+  const topMid = [(topLeft[0] + topRight[0]) / 2, (topLeft[1] + topRight[1]) / 2];
+  return [center[0] + (topMid[0] - center[0]) * 1.5, center[1] + (topMid[1] - center[1]) * 1.5];
+}
+function pointInQuad(point, corners) {
+  let sign = 0;
+  for (let i = 0; i < corners.length; i++) {
+    const a = corners[i];
+    const b = corners[(i + 1) % corners.length];
+    const cross = (b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x);
+    if (cross === 0) continue;
+    const s = cross > 0 ? 1 : -1;
+    if (sign === 0) sign = s;
+    else if (s !== sign) return false;
+  }
+  return true;
+}
+var OVERLAY_DRAG_OPACITY = 0.5;
+var OVERLAY_HANDLE_STYLE = {
+  width: "20px",
+  height: "20px",
+  borderRadius: "50%",
+  background: "white",
+  border: "2px solid #333",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontSize: "12px",
+  fontWeight: "700",
+  color: "#333",
+  cursor: "pointer",
+  boxShadow: "0 1px 3px rgba(0,0,0,0.4)",
+  userSelect: "none",
+  zIndex: 4
+};
+function loadImageElement(src, failed) {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.onload = () => resolve(img);
+    img.onerror = () => reject(new Error(failed));
+    img.src = src;
+  });
+}
+function extendBounds(bounds, geometry) {
+  if (geometry.type === "Point") {
+    bounds.extend(geometry.coordinates);
+  } else if (geometry.type === "LineString") {
+    for (const c of geometry.coordinates) bounds.extend(c);
+  } else if (geometry.type === "Polygon") {
+    for (const ring of geometry.coordinates) for (const c of ring) bounds.extend(c);
+  }
+}
+var MapEditor = forwardRef(function MapEditor2({
+  initial,
+  initialView,
+  resolveImage,
+  releaseImage,
+  onAddImage,
+  onStatus,
+  onError,
+  dark = false,
+  defaultColor,
+  labelColors,
+  toolbarTop = 12,
+  overlayNames = true,
+  renderOverlayOptions,
+  strings: stringOverrides
+}, ref) {
+  const strings = { ...MAP_EDITOR_ENGLISH, ...stringOverrides };
+  const live = useRef8({ strings, resolveImage, releaseImage, onError });
+  live.current = { strings, resolveImage, releaseImage, onError };
+  const fail = (message) => live.current.onError?.(message);
+  const release = (url) => live.current.releaseImage?.(url);
+  const [containerEl, setContainerEl] = useState7(null);
+  const mapRef = useRef8(null);
+  const drawRef = useRef8(null);
+  const overlayMountsRef = useRef8(/* @__PURE__ */ new Map());
+  const [mode, setMode] = useState7("select");
+  const modeRef = useRef8(mode);
+  modeRef.current = mode;
+  const [ready, setReady] = useState7(false);
+  const [color, setColor] = useState7(() => defaultColor ?? defaultColors(dark).mark);
+  const colorRef = useRef8(color);
+  colorRef.current = color;
+  const [opacity, setOpacity] = useState7(0.25);
+  const opacityRef = useRef8(opacity);
+  opacityRef.current = opacity;
+  const [labelText, setLabelText] = useState7("");
+  const refreshLabelPreviewRef = useRef8(null);
+  const [selectedId, setSelectedId] = useState7(null);
+  const selectedIdRef = useRef8(selectedId);
+  selectedIdRef.current = selectedId;
+  const labelColorsRef = useRef8(labelColors ?? defaultColors(dark));
+  labelColorsRef.current = labelColors ?? defaultColors(dark);
+  useEffect8(() => {
+    const draw = drawRef.current;
+    const map = mapRef.current;
+    const source = map?.getSource(LABEL_PREVIEW_SOURCE);
+    const refresh = () => {
+      const currentDraw = drawRef.current;
+      const currentSource = mapRef.current?.getSource(LABEL_PREVIEW_SOURCE);
+      if (!currentDraw || !currentSource) return;
+      const features = [];
+      for (const f of currentDraw.getSnapshot()) {
+        if (f.geometry?.type !== "Point") continue;
+        const isSelected = String(f.id) === selectedId;
+        const name = (isSelected ? labelText : f.properties?.name)?.trim();
+        if (!name) continue;
+        features.push({
+          type: "Feature",
+          geometry: f.geometry,
+          properties: { name, color: f.properties?.color }
+        });
+      }
+      currentSource.setData({ type: "FeatureCollection", features });
+    };
+    refreshLabelPreviewRef.current = refresh;
+    if (draw && source) refresh();
+  }, [labelText, selectedId]);
+  const [overlays, setOverlays] = useState7([]);
+  const overlaysRef = useRef8(overlays);
+  overlaysRef.current = overlays;
+  const [selectedOverlayId, setSelectedOverlayId] = useState7(null);
+  const [warpHandleIds, setWarpHandleIds] = useState7(/* @__PURE__ */ new Set());
+  const [hasFeatures, setHasFeatures] = useState7(false);
+  const sessionRef = useRef8(null);
+  const [lockedCount, setLockedCount] = useState7(0);
+  const [lockedNoticeDismissed, setLockedNoticeDismissed] = useState7(false);
+  const hasDrawn = hasFeatures || overlays.length > 0;
+  const hasContent = hasDrawn || lockedCount > 0;
+  const onStatusRef = useRef8(onStatus);
+  onStatusRef.current = onStatus;
+  useEffect8(() => {
+    onStatusRef.current?.({ hasDrawn, hasContent });
+  }, [hasDrawn, hasContent]);
+  useEffect8(() => {
+    if (!containerEl) return;
+    const map = new maplibregl3.Map({
+      container: containerEl,
+      style: mapStyleUrl(dark, null),
+      center: [0, 20],
+      zoom: 1.5,
+      attributionControl: { compact: true }
+    });
+    mapRef.current = map;
+    map.addControl(new maplibregl3.NavigationControl({ showCompass: false }), "top-right");
+    map.dragRotate.disable();
+    map.touchZoomRotate.disableRotation();
+    map.keyboard.disableRotation();
+    const readColor = (feature) => feature.properties.color ?? colorRef.current;
+    const readOpacity = (feature) => feature.properties.opacity ?? opacityRef.current;
+    const draw = new TerraDraw({
+      adapter: new TerraDrawMapLibreGLAdapter({ map }),
+      modes: [
+        new TerraDrawPointMode({ styles: { pointColor: readColor } }),
+        new TerraDrawLineStringMode({ styles: { lineStringColor: readColor } }),
+        new TerraDrawPolygonMode({ styles: { fillColor: readColor, fillOpacity: readOpacity, outlineColor: readColor } }),
+        new TerraDrawRectangleMode({ styles: { fillColor: readColor, fillOpacity: readOpacity, outlineColor: readColor } }),
+        // Dragging (both a whole feature and its individual vertices) and
+        // deletion (terra-draw's own default keybinding, Delete/Backspace
+        // on the current selection) are what this editor needs from
+        // Select for every mode; `rotateable` additionally turns on
+        // terra-draw's own built-in rotate gesture (hold R while dragging
+        // a selected shape's vertex) for anything 2D enough for "rotate"
+        // to mean something -- not `point`, a single vertex has nothing to
+        // rotate around.
+        new TerraDrawSelectMode({
+          // While a feature is selected, terra-draw renders it through
+          // *this* mode's own styling, not the drawing mode that created it
+          // (see TerraDraw's own per-feature style dispatch: only the
+          // selected feature goes through TerraDrawSelectMode.styleFeature;
+          // every other feature keeps using its own mode's, which is why an
+          // unselected shape's color/opacity already reflects its own
+          // properties fine). Without these, the selected-state styling
+          // falls back to terra-draw's fixed defaults regardless of
+          // `feature.properties` -- so dragging the opacity slider (or
+          // recoloring) while a shape is actively selected had no visible
+          // effect until it was deselected. Found live.
+          styles: {
+            selectedPointColor: readColor,
+            selectedLineStringColor: readColor,
+            selectedPolygonColor: readColor,
+            selectedPolygonOutlineColor: readColor,
+            selectedPolygonFillOpacity: readOpacity
+          },
+          // Half terra-draw's own default (40px) -- with labels sitting
+          // right next to their point (see LABEL_PREVIEW_LAYER's
+          // text-offset below) and vertices sometimes placed close
+          // together, the default hit-test radius made clicking one point
+          // too likely to grab a neighboring one instead. Found live.
+          pointerDistance: 20,
+          // Every field restated (terra-draw's own type doesn't allow a
+          // partial override), only `rotate` actually changed from its
+          // default -- plain "r" instead of the default Ctrl+R, an
+          // awkward two-handed chord to hold through an entire drag. Bare
+          // "r" is safe here the same way Backspace-delete is (see the
+          // canvas keydown listener below): terra-draw's own keydown
+          // listener is bound to the map canvas specifically, so it never
+          // fires while typing "r" into a text field.
+          keyEvents: { deselect: "Escape", delete: "Delete", rotate: ["r"], scale: ["Control", "s"] },
+          flags: {
+            point: { feature: { draggable: true } },
+            linestring: {
+              feature: {
+                draggable: true,
+                rotateable: true,
+                coordinates: { draggable: true, deletable: true, midpoints: true }
+              }
+            },
+            polygon: {
+              feature: {
+                draggable: true,
+                rotateable: true,
+                coordinates: { draggable: true, deletable: true, midpoints: true }
+              }
+            },
+            rectangle: {
+              feature: {
+                draggable: true,
+                rotateable: true,
+                coordinates: { draggable: true, deletable: true, midpoints: true }
+              }
+            }
+          }
+        })
+      ]
+    });
+    drawRef.current = draw;
+    draw.on("change", () => {
+      setHasFeatures(
+        draw.getSnapshot().some((f) => f.geometry != null && !f.properties?.selectionPoint && !f.properties?.midPoint)
+      );
+      refreshLabelPreviewRef.current?.();
+    });
+    function syncSelection(id) {
+      setSelectedId(id);
+      const feature = id ? draw.getSnapshot().find((f) => String(f.id) === id) : void 0;
+      setLabelText(feature?.properties?.name ?? "");
+      if (feature) {
+        setColor(feature.properties?.color ?? colorRef.current);
+        setOpacity(feature.properties?.opacity ?? 0.25);
+        setSelectedOverlayId(null);
+      }
+    }
+    draw.on("finish", (id) => {
+      const isRegion = modeRef.current === "polygon" || modeRef.current === "rectangle";
+      draw.updateFeatureProperties(
+        id,
+        isRegion ? { color: colorRef.current, opacity: opacityRef.current } : { color: colorRef.current }
+      );
+      draw.setMode("select");
+      setMode("select");
+      draw.selectFeature(id);
+      syncSelection(String(id));
+    });
+    draw.on("select", (id) => syncSelection(String(id)));
+    draw.on("deselect", () => syncSelection(null));
+    const canvas = map.getCanvas();
+    const onCanvasKeyDown = (e) => {
+      if (e.key !== "Backspace" || !selectedIdRef.current) return;
+      try {
+        draw.removeFeatures([selectedIdRef.current]);
+      } catch {
+      }
+      setSelectedId(null);
+    };
+    canvas.addEventListener("keydown", onCanvasKeyDown);
+    let sawNativePointerdown = false;
+    let pointerBridgeActive = false;
+    let pendingFirstMouseDown = null;
+    const onNativePointerDown = () => {
+      sawNativePointerdown = true;
+    };
+    canvas.addEventListener("pointerdown", onNativePointerDown, { once: true });
+    const dispatchAsPointerEvent = (type, e) => {
+      const synthetic = new MouseEvent(type, {
+        bubbles: true,
+        cancelable: true,
+        view: window,
+        clientX: e.clientX,
+        clientY: e.clientY,
+        button: e.button,
+        buttons: e.buttons
+      });
+      Object.defineProperty(synthetic, "isPrimary", { value: true });
+      canvas.dispatchEvent(synthetic);
+    };
+    const onMouseDownBridge = (e) => {
+      if (pointerBridgeActive) {
+        dispatchAsPointerEvent("pointerdown", e);
+        return;
+      }
+      if (sawNativePointerdown) return;
+      pendingFirstMouseDown = e;
+      requestAnimationFrame(() => {
+        if (sawNativePointerdown || !pendingFirstMouseDown) return;
+        pointerBridgeActive = true;
+        dispatchAsPointerEvent("pointerdown", pendingFirstMouseDown);
+        pendingFirstMouseDown = null;
+      });
+    };
+    const onMouseMoveBridge = (e) => {
+      if (pointerBridgeActive) dispatchAsPointerEvent("pointermove", e);
+    };
+    const onMouseUpBridge = (e) => {
+      if (pointerBridgeActive) dispatchAsPointerEvent("pointerup", e);
+    };
+    canvas.addEventListener("mousedown", onMouseDownBridge);
+    canvas.addEventListener("mousemove", onMouseMoveBridge);
+    canvas.addEventListener("mouseup", onMouseUpBridge);
+    map.on("mousedown", (e) => {
+      const target = e.originalEvent.target;
+      if (target instanceof Node) {
+        for (const mount of overlayMountsRef.current.values()) {
+          if (mount.deleteMarker.getElement().contains(target) || mount.resizeMarker.getElement().contains(target) || mount.rotateMarker.getElement().contains(target) || mount.cornerMarkers.some((marker) => marker.getElement().contains(target))) return;
+        }
+      }
+      if (map.queryRenderedFeatures(e.point, { layers: TERRA_DRAW_LAYERS }).length > 0) return;
+      const mounts = [...overlayMountsRef.current.entries()].reverse();
+      for (const [id, mount] of mounts) {
+        const corners = mount.box.corners.map((c) => map.project(c));
+        if (pointInQuad(e.point, corners)) {
+          if (selectedIdRef.current) draw.deselectFeature(selectedIdRef.current);
+          setSelectedOverlayId(id);
+          mount.startMove(e);
+          return;
+        }
+      }
+      setSelectedOverlayId(null);
+    });
+    map.on("error", (e) => {
+      const message = e.error?.message ?? "";
+      if (/style|sprite|tile|fetch|network|Failed/i.test(message)) fail(message || live.current.strings.basemapFailed);
+    });
+    map.on("style.load", () => {
+      try {
+        map.addLayer({ id: OVERLAY_ANCHOR_LAYER, type: "background", paint: { "background-opacity": 0 } });
+        map.addSource(LOCKED_SOURCE, { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+        map.addLayer({
+          id: LOCKED_FILL_LAYER,
+          type: "fill",
+          source: LOCKED_SOURCE,
+          filter: ["==", ["geometry-type"], "Polygon"],
+          paint: { "fill-color": ["coalesce", ["get", "color"], "#888888"], "fill-opacity": 0.15 }
+        });
+        map.addLayer({
+          id: LOCKED_LINE_LAYER,
+          type: "line",
+          source: LOCKED_SOURCE,
+          filter: ["any", ["==", ["geometry-type"], "Polygon"], ["==", ["geometry-type"], "LineString"]],
+          paint: { "line-color": ["coalesce", ["get", "color"], "#888888"], "line-width": 2, "line-dasharray": [2, 2] }
+        });
+        draw.start();
+        draw.setMode("select");
+        const colors = labelColorsRef.current;
+        map.addSource(LABEL_PREVIEW_SOURCE, { type: "geojson", data: EMPTY_LABEL_PREVIEW });
+        map.addLayer({
+          id: LABEL_PREVIEW_LAYER,
+          type: "symbol",
+          source: LABEL_PREVIEW_SOURCE,
+          layout: {
+            "text-field": ["get", "name"],
+            "text-size": 12,
+            "text-font": ["Noto Sans Regular"],
+            // Offset right rather than centered on the point -- centered
+            // text sat directly on top of the point, making it hard to see
+            // (and, in the real map views, click) the point itself.
+            "text-anchor": "left",
+            "text-offset": [0.6, 0]
+          },
+          paint: {
+            "text-color": ["coalesce", ["get", "color"], colors.text],
+            "text-halo-color": colors.surface,
+            "text-halo-width": 1.5
+          }
+        });
+        refreshLabelPreviewRef.current?.();
+      } catch (err) {
+        fail(err instanceof Error ? err.message : String(err));
+      } finally {
+        setReady(true);
+      }
+    });
+    return () => {
+      draw.stop();
+      canvas.removeEventListener("keydown", onCanvasKeyDown);
+      canvas.removeEventListener("pointerdown", onNativePointerDown);
+      canvas.removeEventListener("mousedown", onMouseDownBridge);
+      canvas.removeEventListener("mousemove", onMouseMoveBridge);
+      canvas.removeEventListener("mouseup", onMouseUpBridge);
+      for (const mount of overlayMountsRef.current.values()) {
+        mount.deleteMarker.remove();
+        mount.resizeMarker.remove();
+        mount.rotateMarker.remove();
+        for (const marker of mount.cornerMarkers) marker.remove();
+        release(mount.imageUrl);
+      }
+      overlayMountsRef.current.clear();
+      map.remove();
+      mapRef.current = null;
+      drawRef.current = null;
+    };
+  }, [containerEl]);
+  async function mountOverlay(overlay) {
+    const map = mapRef.current;
+    if (!map) return;
+    const sourceId = `img-${overlay.id}`;
+    const box = { corners: overlay.corners };
+    const imageUrl = await live.current.resolveImage(overlay.image);
+    map.addSource(sourceId, { type: "image", url: imageUrl, coordinates: box.corners });
+    map.addLayer({ id: sourceId, type: "raster", source: sourceId }, OVERLAY_ANCHOR_LAYER);
+    map.setPaintProperty(sourceId, "raster-opacity", overlay.opacity ?? 1);
+    const setCorners = (next) => {
+      box.corners = next;
+      map.getSource(sourceId)?.setCoordinates(box.corners);
+    };
+    const commit = () => {
+      setOverlays((prev) => prev.map((o) => o.id === overlay.id ? { ...o, corners: box.corners } : o));
+    };
+    const words = live.current.strings;
+    const deleteEl = document.createElement("div");
+    deleteEl.textContent = "\xD7";
+    deleteEl.title = words.removeImage;
+    Object.assign(deleteEl.style, OVERLAY_HANDLE_STYLE);
+    const deleteMarker = new maplibregl3.Marker({ element: deleteEl, anchor: "center" });
+    deleteEl.addEventListener("click", (e) => {
+      e.stopPropagation();
+      unmountOverlay(overlay.id);
+      setOverlays((prev) => prev.filter((o) => o.id !== overlay.id));
+      setSelectedOverlayId((current) => current === overlay.id ? null : current);
+    });
+    const resizeEl = document.createElement("div");
+    resizeEl.textContent = "\u2198";
+    resizeEl.title = words.resizeImage;
+    Object.assign(resizeEl.style, OVERLAY_HANDLE_STYLE);
+    const resizeMarker = new maplibregl3.Marker({ element: resizeEl, anchor: "center", draggable: true });
+    let resizeStartCorners = box.corners;
+    let resizeStartDist = 1;
+    resizeMarker.on("dragstart", () => {
+      resizeStartCorners = box.corners;
+      const center = overlayCenter(resizeStartCorners);
+      const p = resizeMarker.getLngLat();
+      resizeStartDist = Math.max(1e-9, mercatorDistance(center, [p.lng, p.lat]));
+    });
+    resizeMarker.on("drag", () => {
+      const center = overlayCenter(resizeStartCorners);
+      const p = resizeMarker.getLngLat();
+      const scale = Math.max(0.02, mercatorDistance(center, [p.lng, p.lat]) / resizeStartDist);
+      setCorners(resizeStartCorners.map((c) => scalePoint(c, center, scale)));
+      repositionHandles();
+    });
+    resizeMarker.on("dragend", commit);
+    const rotateEl = document.createElement("div");
+    rotateEl.textContent = "\u21BB";
+    rotateEl.title = words.rotateImage;
+    Object.assign(rotateEl.style, OVERLAY_HANDLE_STYLE);
+    const rotateMarker = new maplibregl3.Marker({ element: rotateEl, anchor: "center", draggable: true });
+    let rotateStartCorners = box.corners;
+    let rotateStartAngle = 0;
+    rotateMarker.on("dragstart", () => {
+      rotateStartCorners = box.corners;
+      const center = overlayCenter(rotateStartCorners);
+      const p = rotateMarker.getLngLat();
+      rotateStartAngle = mercatorBearing(center, [p.lng, p.lat]);
+    });
+    rotateMarker.on("drag", () => {
+      const center = overlayCenter(rotateStartCorners);
+      const p = rotateMarker.getLngLat();
+      const delta = mercatorBearing(center, [p.lng, p.lat]) - rotateStartAngle;
+      setCorners(rotateStartCorners.map((c) => rotatePoint(c, center, delta)));
+      repositionHandles();
+    });
+    rotateMarker.on("dragend", commit);
+    const cornerMarkers = [0, 1, 2, 3].map((i) => {
+      const el = document.createElement("div");
+      el.title = words.warpCorner;
+      Object.assign(el.style, OVERLAY_HANDLE_STYLE);
+      const marker = new maplibregl3.Marker({ element: el, anchor: "center", draggable: true });
+      marker.on("drag", () => {
+        const corners = [...box.corners];
+        const p = marker.getLngLat();
+        corners[i] = [p.lng, p.lat];
+        setCorners(corners);
+        repositionHandles();
+      });
+      marker.on("dragend", commit);
+      return marker;
+    });
+    const repositionHandles = () => {
+      const [topLeft, topRight, bottomRight, bottomLeft] = box.corners;
+      const center = overlayCenter(box.corners);
+      deleteMarker.setLngLat(center);
+      resizeMarker.setLngLat(bottomRight);
+      rotateMarker.setLngLat(rotateHandleAnchor(box.corners, center));
+      cornerMarkers[0].setLngLat(topLeft);
+      cornerMarkers[1].setLngLat(topRight);
+      cornerMarkers[2].setLngLat(bottomRight);
+      cornerMarkers[3].setLngLat(bottomLeft);
+    };
+    const startMove = (e) => {
+      e.preventDefault();
+      map.dragPan.disable();
+      map.setPaintProperty(sourceId, "raster-opacity", OVERLAY_DRAG_OPACITY);
+      const startPoint = e.point;
+      const startScreenCorners = box.corners.map((corner) => map.project(corner));
+      const container = map.getContainer();
+      const onMove = (moveEvent) => {
+        const rect = container.getBoundingClientRect();
+        const dx = moveEvent.clientX - rect.left - startPoint.x;
+        const dy = moveEvent.clientY - rect.top - startPoint.y;
+        const newCorners = startScreenCorners.map((screenCorner) => {
+          const lngLat = map.unproject([screenCorner.x + dx, screenCorner.y + dy]);
+          return [lngLat.lng, lngLat.lat];
+        });
+        setCorners(newCorners);
+        repositionHandles();
+      };
+      const onUp = () => {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+        map.dragPan.enable();
+        const current = overlaysRef.current.find((o) => o.id === overlay.id);
+        map.setPaintProperty(sourceId, "raster-opacity", current?.opacity ?? 1);
+        commit();
+      };
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    };
+    repositionHandles();
+    overlayMountsRef.current.set(overlay.id, {
+      sourceId,
+      box,
+      deleteMarker,
+      resizeMarker,
+      rotateMarker,
+      cornerMarkers,
+      startMove,
+      setCorners,
+      repositionHandles,
+      imageUrl
+    });
+  }
+  function unmountOverlay(id) {
+    const map = mapRef.current;
+    const mount = overlayMountsRef.current.get(id);
+    if (!map || !mount) return;
+    mount.deleteMarker.remove();
+    mount.resizeMarker.remove();
+    mount.rotateMarker.remove();
+    for (const marker of mount.cornerMarkers) marker.remove();
+    if (map.getLayer(mount.sourceId)) map.removeLayer(mount.sourceId);
+    if (map.getSource(mount.sourceId)) map.removeSource(mount.sourceId);
+    release(mount.imageUrl);
+    overlayMountsRef.current.delete(id);
+  }
+  function setCornerHandlesVisible(id, visible) {
+    setWarpHandleIds((prev) => {
+      const next = new Set(prev);
+      if (visible) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+  const showCornerHandles = selectedOverlayId !== null && warpHandleIds.has(selectedOverlayId);
+  useEffect8(() => {
+    const map = mapRef.current;
+    if (!map) return;
+    for (const [id, mount] of overlayMountsRef.current) {
+      if (id !== selectedOverlayId) {
+        mount.deleteMarker.remove();
+        mount.resizeMarker.remove();
+        mount.rotateMarker.remove();
+        for (const marker of mount.cornerMarkers) marker.remove();
+        continue;
+      }
+      mount.deleteMarker.addTo(map);
+      mount.resizeMarker.addTo(map);
+      mount.rotateMarker.addTo(map);
+      for (const marker of mount.cornerMarkers) showCornerHandles ? marker.addTo(map) : marker.remove();
+    }
+  }, [selectedOverlayId, showCornerHandles]);
+  const selectedOverlay = overlays.find((o) => o.id === selectedOverlayId) ?? null;
+  function updateSelectedOverlay(patch) {
+    if (!selectedOverlayId) return;
+    setOverlays((prev) => prev.map((o) => o.id === selectedOverlayId ? { ...o, ...patch } : o));
+    if (patch.opacity !== void 0) {
+      const mount = overlayMountsRef.current.get(selectedOverlayId);
+      if (mount) mapRef.current?.setPaintProperty(mount.sourceId, "raster-opacity", patch.opacity);
+    }
+  }
+  const loaded = useRef8(false);
+  useEffect8(() => {
+    if (!ready || !initial || loaded.current) return;
+    const draw = drawRef.current;
+    const map = mapRef.current;
+    if (!draw || !map) return;
+    loaded.current = true;
+    const bounds = new maplibregl3.LngLatBounds();
+    if (initial.features.length > 0) {
+      const session = prepareForEditing(initial.features);
+      sessionRef.current = session;
+      for (const geometry of showShapes(session, session)) extendBounds(bounds, geometry);
+    }
+    const drafts = initial.overlays.map((overlay) => ({ ...overlay, id: crypto.randomUUID() }));
+    setOverlays(drafts);
+    for (const draft of drafts) {
+      mountOverlay(draft).catch(() => {
+      });
+      for (const corner of draft.corners) bounds.extend(corner);
+    }
+    if (!bounds.isEmpty()) map.fitBounds(bounds, { padding: 60, maxZoom: 17, duration: 0 });
+    else if (initialView) map.jumpTo(initialView);
+  }, [ready, initial]);
+  function showShapes(session, added) {
+    const draw = drawRef.current;
+    const map = mapRef.current;
+    if (!draw || !map) return [];
+    const parts = [...added.parts];
+    const results = draw.addFeatures(parts.map((part) => ({
+      type: "Feature",
+      geometry: part.geometry,
+      properties: {
+        mode: part.mode,
+        sourceKey: part.sourceKey,
+        color: part.color,
+        name: part.name,
+        ...part.mode === "polygon" ? { opacity: part.opacity } : {}
+      }
+    })));
+    results.forEach((result, i) => {
+      if (!result.valid) lockPart(session, parts[i].sourceKey);
+    });
+    const locked = [...session.locked.values()];
+    setLockedCount(locked.length);
+    map.getSource(LOCKED_SOURCE)?.setData({
+      type: "FeatureCollection",
+      features: locked.map((part) => ({ type: "Feature", geometry: part.geometry, properties: { color: part.color } }))
+    });
+    return [...parts, ...added.locked.values()].map((part) => part.geometry);
+  }
+  function handleModeChange(next) {
+    if (!ready) return;
+    setMode(next);
+    setSelectedOverlayId(null);
+    drawRef.current?.setMode(next);
+  }
+  useImperativeHandle(ref, () => ({
+    getResult() {
+      const savedParts = (drawRef.current?.getSnapshot() ?? []).filter((f) => f.geometry != null && !f.properties?.selectionPoint && !f.properties?.midPoint).map((f) => {
+        const name = f.properties?.name?.trim();
+        const regionOpacity = f.geometry.type === "Polygon" ? f.properties?.opacity ?? opacityRef.current : void 0;
+        const sourceKey = f.properties?.sourceKey;
+        return {
+          ...typeof sourceKey === "string" ? { sourceKey } : {},
+          geometry: f.geometry,
+          color: f.properties?.color ?? colorRef.current,
+          ...name ? { name } : {},
+          ...regionOpacity !== void 0 ? { opacity: regionOpacity } : {}
+        };
+      });
+      const session = sessionRef.current ?? { parts: [], sources: /* @__PURE__ */ new Map(), locked: /* @__PURE__ */ new Map() };
+      return {
+        features: assembleForSaving(session, savedParts),
+        overlays: overlaysRef.current.map(({ image, corners, name, opacity: opacity2, order }) => ({ image, corners, name, opacity: opacity2, order }))
+      };
+    },
+    drawnBounds() {
+      const bounds = new maplibregl3.LngLatBounds();
+      for (const f of drawRef.current?.getSnapshot() ?? []) {
+        if (f.geometry == null || f.properties?.selectionPoint || f.properties?.midPoint) continue;
+        extendBounds(bounds, f.geometry);
+      }
+      for (const overlay of overlaysRef.current) for (const corner of overlay.corners) bounds.extend(corner);
+      return bounds.isEmpty() ? null : bounds.toArray().flat();
+    },
+    async addImage(image) {
+      if (overlaysRef.current.some((o) => o.image === image)) return false;
+      const map = mapRef.current;
+      if (!map) return false;
+      const url = await live.current.resolveImage(image);
+      const element = await loadImageElement(url, live.current.strings.imageFailed).finally(() => release(url));
+      const aspect = element.naturalWidth / element.naturalHeight;
+      const centerScreen = map.project(map.getCenter());
+      const halfWidthPx = 130;
+      const halfHeightPx = halfWidthPx / aspect;
+      const topLeft = map.unproject([centerScreen.x - halfWidthPx, centerScreen.y - halfHeightPx]);
+      const bottomRight = map.unproject([centerScreen.x + halfWidthPx, centerScreen.y + halfHeightPx]);
+      const draft = {
+        id: crypto.randomUUID(),
+        image,
+        corners: [
+          [topLeft.lng, topLeft.lat],
+          [bottomRight.lng, topLeft.lat],
+          [bottomRight.lng, bottomRight.lat],
+          [topLeft.lng, bottomRight.lat]
+        ],
+        // Leaves room to insert between existing overlays later without
+        // renumbering.
+        order: overlaysRef.current.length * 10
+      };
+      setOverlays((prev) => [...prev, draft]);
+      await mountOverlay(draft);
+      setSelectedOverlayId(draft.id);
+      return true;
+    },
+    addFeatures(features) {
+      const map = mapRef.current;
+      if (!map || features.length === 0) return;
+      const session = sessionRef.current ?? { parts: [], sources: /* @__PURE__ */ new Map(), locked: /* @__PURE__ */ new Map() };
+      sessionRef.current = session;
+      const bounds = new maplibregl3.LngLatBounds();
+      for (const geometry of showShapes(session, addToSession(session, features))) extendBounds(bounds, geometry);
+      if (!bounds.isEmpty()) map.fitBounds(bounds, { padding: 60, maxZoom: 17 });
+    }
+    // mountOverlay and friends read only refs: a fresh handle each render
+    // is fine.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }));
+  const selectedFeature = selectedId ? drawRef.current?.getSnapshot().find((f) => String(f.id) === selectedId) : void 0;
+  const selectedIsPoint = selectedFeature?.geometry?.type === "Point";
+  const selectedIsRegion = selectedFeature?.geometry?.type === "Polygon";
+  function renderModeButton(entry) {
+    return /* @__PURE__ */ jsx9(
+      Button3,
+      {
+        size: "xs",
+        variant: mode === entry.mode ? "filled" : "default",
+        disabled: !ready,
+        onClick: () => handleModeChange(entry.mode),
+        children: strings[entry.label]
+      },
+      entry.mode
+    );
+  }
+  return /* @__PURE__ */ jsxs7(Box2, { style: { position: "absolute", inset: 0, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx9("style", { children: TOOLBAR_CSS }),
+    /* @__PURE__ */ jsx9("div", { ref: setContainerEl, style: { position: "absolute", inset: 0 } }),
+    /* @__PURE__ */ jsxs7(
+      Stack4,
+      {
+        gap: 4,
+        p: 6,
+        className: TOOLBAR_CLASS,
+        style: {
+          position: "absolute",
+          top: toolbarTop,
+          left: 12,
+          zIndex: 3,
+          borderRadius: 8,
+          background: dark ? "rgba(20,20,20,0.75)" : "rgba(255,255,255,0.85)"
+        },
+        children: [
+          TOOLBAR.filter((entry) => entry.mode !== "select").map(renderModeButton),
+          onAddImage && /* @__PURE__ */ jsx9(Button3, { size: "xs", variant: "default", disabled: !ready, onClick: onAddImage, children: strings.image }),
+          TOOLBAR.filter((entry) => entry.mode === "select").map(renderModeButton),
+          /* @__PURE__ */ jsx9(Divider, { my: 2 }),
+          /* @__PURE__ */ jsx9(Text4, { size: "xs", fw: 600, c: "dimmed", children: strings.editOptions }),
+          selectedFeature && /* @__PURE__ */ jsx9(
+            ColorInput,
+            {
+              size: "xs",
+              value: color,
+              onChange: (next) => {
+                setColor(next);
+                const draw = drawRef.current;
+                if (draw && selectedId) draw.updateFeatureProperties(selectedId, { color: next });
+              },
+              swatches: COLOR_SWATCHES,
+              disabled: !ready,
+              popoverProps: { withinPortal: true, zIndex: 1e3 }
+            }
+          ),
+          (selectedIsPoint || selectedIsRegion) && /* @__PURE__ */ jsx9(
+            TextInput4,
+            {
+              size: "xs",
+              placeholder: selectedIsPoint ? strings.labelText : strings.regionName,
+              value: labelText,
+              onChange: (e) => {
+                setLabelText(e.currentTarget.value);
+                const draw = drawRef.current;
+                if (draw && selectedId) draw.updateFeatureProperties(selectedId, { name: e.currentTarget.value });
+              },
+              disabled: !ready
+            }
+          ),
+          selectedIsRegion && /* @__PURE__ */ jsxs7(Stack4, { gap: 2, children: [
+            /* @__PURE__ */ jsx9(Text4, { size: "xs", c: "dimmed", children: strings.fillOpacity }),
+            /* @__PURE__ */ jsx9(
+              Slider,
+              {
+                size: "xs",
+                min: 0.1,
+                max: 1,
+                step: 0.05,
+                label: (v) => `${Math.round(v * 100)}%`,
+                value: opacity,
+                onChange: (v) => {
+                  setOpacity(v);
+                  const draw = drawRef.current;
+                  if (draw && selectedId) draw.updateFeatureProperties(selectedId, { opacity: v });
+                },
+                disabled: !ready
+              }
+            )
+          ] }),
+          selectedOverlayId && /* @__PURE__ */ jsx9(
+            SegmentedControl,
+            {
+              size: "xs",
+              value: showCornerHandles ? "transform" : "scale",
+              onChange: (value) => setCornerHandlesVisible(selectedOverlayId, value === "transform"),
+              disabled: !ready,
+              data: [
+                { label: strings.scale, value: "scale" },
+                { label: strings.transform, value: "transform" }
+              ]
+            }
+          ),
+          selectedOverlay && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+            overlayNames && /* @__PURE__ */ jsx9(
+              TextInput4,
+              {
+                size: "xs",
+                placeholder: strings.overlayName,
+                value: selectedOverlay.name ?? "",
+                onChange: (e) => updateSelectedOverlay({ name: e.currentTarget.value }),
+                disabled: !ready
+              }
+            ),
+            /* @__PURE__ */ jsxs7(Stack4, { gap: 2, children: [
+              /* @__PURE__ */ jsx9(Text4, { size: "xs", c: "dimmed", children: strings.opacity }),
+              /* @__PURE__ */ jsx9(
+                Slider,
+                {
+                  size: "xs",
+                  min: 0.1,
+                  max: 1,
+                  step: 0.05,
+                  label: (v) => `${Math.round(v * 100)}%`,
+                  value: selectedOverlay.opacity ?? 1,
+                  onChange: (v) => updateSelectedOverlay({ opacity: v }),
+                  disabled: !ready
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx9(
+              NumberInput,
+              {
+                size: "xs",
+                label: strings.stackingOrder,
+                hideControls: false,
+                value: selectedOverlay.order ?? 0,
+                onChange: (v) => updateSelectedOverlay({ order: Number(v) || 0 }),
+                disabled: !ready
+              }
+            ),
+            renderOverlayOptions?.(selectedOverlay.image)
+          ] })
+        ]
+      }
+    ),
+    !ready && /* @__PURE__ */ jsx9(Group4, { justify: "center", align: "center", style: { position: "absolute", inset: 0, zIndex: 2 }, children: /* @__PURE__ */ jsx9(Loader3, { size: "sm" }) }),
+    lockedCount > 0 && !lockedNoticeDismissed && /* @__PURE__ */ jsx9(
+      Alert,
+      {
+        color: "yellow",
+        title: lockedCount === 1 ? strings.lockedOne : strings.lockedMany(lockedCount),
+        withCloseButton: true,
+        onClose: () => setLockedNoticeDismissed(true),
+        style: { position: "absolute", bottom: 12, right: 12, zIndex: 3, maxWidth: 360 },
+        children: strings.lockedExplain
+      }
+    )
+  ] });
+});
+function MapEditorHelp({ strings: stringOverrides, images = true }) {
+  const strings = { ...MAP_EDITOR_ENGLISH, ...stringOverrides };
+  return /* @__PURE__ */ jsxs7(Stack4, { gap: "md", children: [
+    /* @__PURE__ */ jsx9(Text4, { size: "sm", fw: 600, children: strings.helpDrawing }),
+    /* @__PURE__ */ jsxs7(List, { spacing: 4, size: "sm", children: [
+      /* @__PURE__ */ jsx9(List.Item, { children: strings.helpPoint }),
+      /* @__PURE__ */ jsxs7(List.Item, { children: [
+        strings.helpLine,
+        " ",
+        /* @__PURE__ */ jsx9(Kbd, { children: "Enter" }),
+        " ",
+        strings.helpEnterFinishes,
+        " ",
+        /* @__PURE__ */ jsx9(Kbd, { children: "Esc" }),
+        " ",
+        strings.helpEscCancels
+      ] }),
+      /* @__PURE__ */ jsx9(List.Item, { children: strings.helpRectangle }),
+      images && /* @__PURE__ */ jsxs7(List.Item, { children: [
+        strings.helpImage,
+        " ",
+        /* @__PURE__ */ jsx9(Text4, { span: true, fw: 600, children: strings.helpImages }),
+        " ",
+        strings.helpBelow
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx9(Text4, { size: "sm", fw: 600, children: strings.helpEditing }),
+    /* @__PURE__ */ jsxs7(List, { spacing: 4, size: "sm", children: [
+      /* @__PURE__ */ jsx9(List.Item, { children: strings.helpSelect }),
+      /* @__PURE__ */ jsx9(List.Item, { children: strings.helpVertex }),
+      /* @__PURE__ */ jsx9(List.Item, { children: strings.helpColor }),
+      /* @__PURE__ */ jsxs7(List.Item, { children: [
+        strings.helpDelete,
+        " ",
+        /* @__PURE__ */ jsx9(Kbd, { children: "Delete" }),
+        " ",
+        strings.helpOr,
+        " ",
+        /* @__PURE__ */ jsx9(Kbd, { children: "Backspace" }),
+        "."
+      ] }),
+      /* @__PURE__ */ jsxs7(List.Item, { children: [
+        strings.helpRotate,
+        " ",
+        /* @__PURE__ */ jsx9(Kbd, { children: "R" }),
+        " ",
+        strings.helpRotateHandle
+      ] })
+    ] }),
+    images && /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx9(Text4, { size: "sm", fw: 600, children: strings.helpImages }),
+      /* @__PURE__ */ jsxs7(List, { spacing: 4, size: "sm", children: [
+        /* @__PURE__ */ jsx9(List.Item, { children: strings.helpImageMove }),
+        /* @__PURE__ */ jsx9(List.Item, { children: strings.helpImageResize }),
+        /* @__PURE__ */ jsx9(List.Item, { children: strings.helpImageRotate }),
+        /* @__PURE__ */ jsx9(List.Item, { children: strings.helpImageTransform }),
+        /* @__PURE__ */ jsx9(List.Item, { children: strings.helpImageRemove })
+      ] })
+    ] })
+  ] });
+}
+
+// src/editor/placeShapes.ts
+function placeFeatures(place) {
+  const geometry = place?.geometry;
+  if (!geometry) return [];
+  if (geometry.type === "FeatureCollection") {
+    return (geometry.features ?? []).filter((f) => f && f.geometry);
+  }
+  if (geometry.type === "Feature") return geometry.geometry ? [geometry] : [];
+  return [{ type: "Feature", properties: {}, geometry }];
+}
+function placeToEditor(place) {
+  return {
+    features: placeFeatures(place),
+    overlays: (place?.overlays ?? []).map((o) => ({
+      image: o.media,
+      corners: o.corners,
+      ...o.opacity !== void 0 ? { opacity: o.opacity } : {},
+      ...o.order !== void 0 ? { order: o.order } : {}
+    }))
+  };
+}
+function editorToPlace(place, result, dates) {
+  const before = place?.geometry;
+  const geometry = result.features.length === 0 ? void 0 : { ...before?.type === "FeatureCollection" ? before : {}, type: "FeatureCollection", features: result.features };
+  const previous = new Map((place?.overlays ?? []).map((o) => [o.media, o]));
+  const overlays = result.overlays.map((o) => {
+    const { opacity: _o, order: _r, date: _d, ...kept } = previous.get(o.image) ?? {};
+    const date = dates.has(o.image) ? dates.get(o.image) : previous.get(o.image)?.date;
+    return {
+      ...kept,
+      media: o.image,
+      corners: o.corners,
+      ...o.opacity !== void 0 && o.opacity !== 1 ? { opacity: o.opacity } : {},
+      ...o.order !== void 0 ? { order: Math.round(o.order) } : {},
+      ...date ? { date } : {}
+    };
+  });
+  return patchPlace(place, {
+    geometry,
+    overlays: overlays.length ? overlays : void 0
+  });
+}
+
+// src/editor/PlaceMapDialog.tsx
+import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+var BAR_HEIGHT2 = 56;
+var STORY_MAP_WORDS = {
+  helpImage: "Image: add a picture file, such as a scan of an old map -- see"
+};
+async function prepareOverlay(file) {
+  const image = await optimizeImage(file, { purpose: "overlay" });
+  return { data: new Uint8Array(await image.blob.arrayBuffer()), mime: image.mime, ext: image.ext, width: image.width, height: image.height };
+}
+function OverlayDateField({ value, language, parse, strings, onChange }) {
+  const [text, setText] = useState8(value?.text ?? "");
+  const request = useRef9(0);
+  const edtf = value?.edtf;
+  return /* @__PURE__ */ jsxs8(Stack5, { gap: 2, maw: 220, children: [
+    /* @__PURE__ */ jsx10(
+      TextInput5,
+      {
+        size: "xs",
+        label: strings.overlayDate,
+        description: strings.overlayDateHint,
+        value: text,
+        onChange: (e) => {
+          const typed = e.currentTarget.value;
+          setText(typed);
+          const id = ++request.current;
+          if (!typed.trim()) {
+            onChange(void 0);
+            return;
+          }
+          void parse(typed, language).then((parsed) => {
+            if (id === request.current) onChange(slideDate(value, typed, parsed));
+          });
+        }
+      }
+    ),
+    text.trim() && /* @__PURE__ */ jsx10(Text5, { size: "xs", c: edtf && edtfYearRange(edtf) ? "dimmed" : "red", children: edtf && edtfYearRange(edtf) ? `EDTF ${edtf}` : strings.preciseDateNotUnderstood })
+  ] });
+}
+function PlaceMapDialog({
+  place,
+  doc,
+  files,
+  dark,
+  parseDateText,
+  strings,
+  mapStrings: mapStringOverrides,
+  onCancel,
+  onDone
+}) {
+  const mapStrings = { ...STORY_MAP_WORDS, ...mapStringOverrides };
+  const editorRef = useRef9(null);
+  const initial = useMemo3(() => placeToEditor(place), [place]);
+  const [work, setWork] = useState8({ doc, files });
+  const workRef = useRef9(work);
+  workRef.current = work;
+  const [dates, setDates] = useState8(() => /* @__PURE__ */ new Map());
+  const [message, setMessage] = useState8(null);
+  const [helpOpen, setHelpOpen] = useState8(false);
+  const imageInput = useRef9(null);
+  const shapesInput = useRef9(null);
+  const initialView = useMemo3(() => {
+    if (place?.lat !== void 0 && place.lon !== void 0) return { center: [place.lon, place.lat], zoom: 12 };
+    const all = storyPlaces(doc.slides.map((s2) => s2.place));
+    if (!all) return void 0;
+    const [w, s, e, n] = all.bounds;
+    return { center: [(w + e) / 2, (s + n) / 2], zoom: 5 };
+  }, [place, doc]);
+  const resolveImage = async (key) => {
+    const item = Object.prototype.hasOwnProperty.call(workRef.current.doc.media, key) ? workRef.current.doc.media[key] : void 0;
+    const data = item && workRef.current.files.get(item.src);
+    if (!item || !data) throw new Error(strings.photoFailed(key));
+    return URL.createObjectURL(new Blob([data], { type: item.mime }));
+  };
+  const addImages = async (chosen) => {
+    setMessage(null);
+    for (const file of chosen) {
+      let key;
+      try {
+        const added = addImage(workRef.current.doc, workRef.current.files, await prepareOverlay(file), "map");
+        workRef.current = { doc: added.doc, files: added.files };
+        setWork(workRef.current);
+        key = added.key;
+      } catch {
+        setMessage(strings.photoFailed(file.name || "the image"));
+        continue;
+      }
+      try {
+        if (!await editorRef.current?.addImage(key)) setMessage(strings.overlayAlready);
+      } catch (err) {
+        setMessage(err instanceof Error ? err.message : String(err));
+      }
+    }
+  };
+  const importShapes = async (chosen) => {
+    setMessage(null);
+    for (const file of chosen) {
+      try {
+        const features = parseMapFile(await file.text()).filter((f) => f.properties?.["@geometry-type"] !== "groundoverlay");
+        if (features.length === 0) setMessage(strings.importNothing(file.name));
+        else editorRef.current?.addFeatures(features);
+      } catch {
+        setMessage(strings.importFailed(file.name));
+      }
+    }
+  };
+  const done = () => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    onDone(editorToPlace(place, editor.getResult(), dates), workRef.current.doc.media, workRef.current.files);
+  };
+  const bar = dark ? "rgba(20,20,20,0.85)" : "rgba(255,255,255,0.9)";
+  return /* @__PURE__ */ jsxs8(Modal, { opened: true, onClose: onCancel, fullScreen: true, withCloseButton: false, closeOnEscape: false, padding: 0, children: [
+    /* @__PURE__ */ jsxs8(Box3, { style: { position: "fixed", inset: 0, overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx10(
+        MapEditor,
+        {
+          ref: editorRef,
+          initial,
+          initialView,
+          resolveImage,
+          releaseImage: (url) => URL.revokeObjectURL(url),
+          onAddImage: () => imageInput.current?.click(),
+          onError: setMessage,
+          dark,
+          toolbarTop: BAR_HEIGHT2 + 12,
+          overlayNames: false,
+          strings: mapStrings,
+          renderOverlayOptions: (key) => /* @__PURE__ */ jsx10(
+            OverlayDateField,
+            {
+              value: dates.has(key) ? dates.get(key) : place?.overlays?.find((o) => o.media === key)?.date,
+              language: doc.language,
+              parse: parseDateText,
+              strings,
+              onChange: (date) => setDates((prev) => new Map(prev).set(key, date))
+            },
+            key
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs8(
+        Group5,
+        {
+          justify: "space-between",
+          wrap: "nowrap",
+          px: "md",
+          gap: "sm",
+          style: { position: "absolute", top: 0, left: 0, right: 0, height: BAR_HEIGHT2, zIndex: 3, background: bar },
+          children: [
+            /* @__PURE__ */ jsxs8(Group5, { gap: 6, wrap: "nowrap", style: { minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx10(Text5, { fw: 600, truncate: true, dir: "auto", children: strings.mapDialogTitle(place?.name) }),
+              /* @__PURE__ */ jsx10(Tooltip3, { label: strings.mapHelp, children: /* @__PURE__ */ jsx10(ActionIcon2, { variant: "subtle", radius: "xl", "aria-label": strings.mapHelp, onClick: () => setHelpOpen(true), children: "\u24D8" }) })
+            ] }),
+            /* @__PURE__ */ jsxs8(Group5, { gap: "xs", wrap: "nowrap", children: [
+              /* @__PURE__ */ jsx10(Tooltip3, { label: strings.importShapesHint, multiline: true, w: 280, children: /* @__PURE__ */ jsx10(Button4, { variant: "default", size: "sm", onClick: () => shapesInput.current?.click(), children: strings.importShapes }) }),
+              /* @__PURE__ */ jsx10(Button4, { variant: "default", size: "sm", onClick: onCancel, children: strings.cancel }),
+              /* @__PURE__ */ jsx10(Button4, { size: "sm", onClick: done, children: strings.done })
+            ] })
+          ]
+        }
+      ),
+      message && /* @__PURE__ */ jsx10(
+        Text5,
+        {
+          size: "sm",
+          role: "alert",
+          style: {
+            position: "absolute",
+            bottom: 12,
+            left: 12,
+            zIndex: 3,
+            maxWidth: 480,
+            padding: "6px 10px",
+            borderRadius: 6,
+            background: bar,
+            color: "var(--mantine-color-red-filled)"
+          },
+          children: message
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          ref: imageInput,
+          type: "file",
+          accept: "image/*",
+          multiple: true,
+          hidden: true,
+          onChange: (e) => {
+            const chosen = [...e.currentTarget.files ?? []];
+            e.currentTarget.value = "";
+            void addImages(chosen);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx10(
+        "input",
+        {
+          ref: shapesInput,
+          type: "file",
+          accept: ".kml,.gpx,.geojson,.json,application/vnd.google-earth.kml+xml,application/gpx+xml,application/geo+json",
+          multiple: true,
+          hidden: true,
+          onChange: (e) => {
+            const chosen = [...e.currentTarget.files ?? []];
+            e.currentTarget.value = "";
+            void importShapes(chosen);
+          }
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx10(Modal, { opened: helpOpen, onClose: () => setHelpOpen(false), title: strings.mapHelp, size: "md", zIndex: 1e3, children: /* @__PURE__ */ jsx10(MapEditorHelp, { strings: mapStrings }) })
+  ] });
+}
+
+// src/editor/placeSearch.ts
+var WIKIDATA_API = "https://www.wikidata.org/w/api.php";
+var WIKIDATA_ENTITY_DATA = "https://www.wikidata.org/wiki/Special:EntityData";
+function wikidataLanguage(language) {
+  return (language ?? "").trim().toLowerCase().replace(/_/g, "-") || "en";
+}
+async function searchWikidataPlaces(term, language, signal) {
+  const code = wikidataLanguage(language);
+  const params = new URLSearchParams({
+    action: "wbsearchentities",
+    search: term,
+    language: code,
+    uselang: code,
+    format: "json",
+    limit: "7",
+    origin: "*"
+    // what makes an anonymous api.php GET answer cross-origin
+  });
+  const res = await fetch(`${WIKIDATA_API}?${params}`, { signal });
+  if (!res.ok) throw new Error(`Wikidata search failed (${res.status})`);
+  const data = await res.json();
+  return (data.search ?? []).map((hit) => ({
+    id: hit.id,
+    label: hit.label ?? hit.id,
+    ...hit.description ? { description: hit.description } : {}
+  }));
+}
+async function wikidataPoint(result, signal) {
+  const res = await fetch(`${WIKIDATA_ENTITY_DATA}/${encodeURIComponent(result.id)}.json`, { signal });
+  if (!res.ok) throw new Error(`Wikidata fetch failed for ${result.id} (${res.status})`);
+  const data = await res.json();
+  const entity = data.entities?.[result.id] ?? Object.values(data.entities ?? {})[0];
+  const value = entity?.claims?.P625?.[0]?.mainsnak?.datavalue?.value;
+  if (typeof value?.latitude !== "number" || typeof value.longitude !== "number") return null;
+  return { lat: value.latitude, lon: value.longitude };
+}
+var WIKIDATA_PLACE_SEARCH = { search: searchWikidataPlaces, point: wikidataPoint };
+
+// src/editor/SlideList.tsx
+import { useState as useState9 } from "react";
+import { Stack as Stack6, UnstyledButton as UnstyledButton2 } from "@mantine/core";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function SlideList({ items, selected, onSelect, onMove, getKey, renderItem, label }) {
-  const [dragging, setDragging] = useState6(null);
-  const [over, setOver] = useState6(null);
+  const [dragging, setDragging] = useState9(null);
+  const [over, setOver] = useState9(null);
   const end = () => {
     setDragging(null);
     setOver(null);
   };
-  return /* @__PURE__ */ jsx7(Stack3, { gap: 4, role: "listbox", "aria-label": label, children: items.map((item, i) => {
+  return /* @__PURE__ */ jsx11(Stack6, { gap: 4, role: "listbox", "aria-label": label, children: items.map((item, i) => {
     const isSelected = i === selected;
     const dropLine = over === i && dragging !== null && dragging !== i ? dragging < i ? { borderBottom: "2px solid var(--mantine-primary-color-filled)" } : { borderTop: "2px solid var(--mantine-primary-color-filled)" } : {};
-    return /* @__PURE__ */ jsx7(
-      UnstyledButton,
+    return /* @__PURE__ */ jsx11(
+      UnstyledButton2,
       {
         role: "option",
         "aria-selected": isSelected,
@@ -3303,9 +5110,9 @@ function SlideList({ items, selected, onSelect, onMove, getKey, renderItem, labe
 }
 
 // src/editor/StoryTextField.tsx
-import { useRef as useRef6 } from "react";
-import { Button as Button2, Group as Group3, Stack as Stack4, Text as Text3, Textarea } from "@mantine/core";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useRef as useRef10 } from "react";
+import { Button as Button5, Group as Group6, Stack as Stack7, Text as Text6, Textarea } from "@mantine/core";
+import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
 function applyMarker(el, marker, value, onChange) {
   const start = el.selectionStart ?? value.length;
   const end = el.selectionEnd ?? value.length;
@@ -3323,12 +5130,12 @@ function applyMarker(el, marker, value, onChange) {
   onChange(value.slice(0, start) + replacement + value.slice(end));
 }
 function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabel = "Italic", minRows = 3 }) {
-  const ref = useRef6(null);
-  return /* @__PURE__ */ jsxs6(Stack4, { gap: 4, children: [
-    /* @__PURE__ */ jsxs6(Group3, { gap: "xs", children: [
-      /* @__PURE__ */ jsx8(Text3, { size: "sm", fw: 500, children: label }),
-      /* @__PURE__ */ jsx8(
-        Button2,
+  const ref = useRef10(null);
+  return /* @__PURE__ */ jsxs9(Stack7, { gap: 4, children: [
+    /* @__PURE__ */ jsxs9(Group6, { gap: "xs", children: [
+      /* @__PURE__ */ jsx12(Text6, { size: "sm", fw: 500, children: label }),
+      /* @__PURE__ */ jsx12(
+        Button5,
         {
           variant: "default",
           size: "compact-xs",
@@ -3339,8 +5146,8 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
           children: "B"
         }
       ),
-      /* @__PURE__ */ jsx8(
-        Button2,
+      /* @__PURE__ */ jsx12(
+        Button5,
         {
           variant: "default",
           size: "compact-xs",
@@ -3352,7 +5159,7 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx12(
       Textarea,
       {
         ref,
@@ -3399,6 +5206,34 @@ var EDITOR_ENGLISH = {
   matchDateAsWritten: "Work it out from the date",
   noPreciseDate: "None: this slide stays off the timeline.",
   place: "Place",
+  placeName: "Name",
+  removePlace: "Remove place",
+  findPlace: "Find on Wikidata",
+  findPlaceHint: "Looks the name up on Wikidata, to put the pin there. The name is all that's sent, and only when you ask.",
+  findPlaceNone: "Wikidata has no place by that name.",
+  findPlaceFailed: "Couldn't reach Wikidata.",
+  findPlaceNoPoint: (name) => `Wikidata has no map position for ${name}.`,
+  coordinates: "Latitude, longitude",
+  coordinatesHint: "e.g. 47.3769, 8.5417",
+  coordinatesInvalid: "Two numbers: latitude (-90 to 90), then longitude (-180 to 180).",
+  placeMap: "Map: click to put the pin",
+  placeMapHint: "Click the map to put the pin there, or drag the pin.",
+  placeShape: "a shape",
+  placeOverlays: (count) => count === 1 ? "a map overlay" : `${count} map overlays`,
+  placeKeeps: (what) => `This place also has ${what}.`,
+  editMap: "Edit map",
+  editMapHint: "Shapes under the pin (a parish, a route) and scans of old maps laid over it.",
+  mapDialogTitle: (placeName) => placeName ? `Map: ${placeName}` : "Map",
+  mapHelp: "How to use this editor",
+  importShapes: "Import shapes",
+  importShapesHint: "Adds the points, lines and areas in a KML, GPX or GeoJSON file to this map.",
+  importFailed: (fileName) => `Couldn't read ${fileName} as a KML, GPX or GeoJSON file.`,
+  importNothing: (fileName) => `${fileName} has no shapes in it.`,
+  overlayAlready: "That image is already on this map.",
+  overlayDate: "Years it shows",
+  overlayDateHint: "e.g. 1850, or 1850 to 1880. With historical maps, it's hidden on slides outside them.",
+  cancel: "Cancel",
+  done: "Done",
   photos: "Photos",
   photosHint: "Add, drop or paste a photo. It's resized for the screen, and hidden details like camera and location are left out.",
   addPhoto: "Add photo",
@@ -3421,8 +5256,8 @@ var EDITOR_ENGLISH = {
 };
 
 // src/editor/StoryEditor.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var BAR_HEIGHT2 = 56;
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+var BAR_HEIGHT3 = 56;
 var STORY = -1;
 function issueSlide(issue) {
   const match = /^\/slides\/(\d+)/.exec(issue.path);
@@ -3435,8 +5270,8 @@ async function prepareImage(file) {
 function Thumb({ doc, slide, resolveMedia }) {
   const ref = slide.media?.[0]?.ref;
   const item = ref && Object.prototype.hasOwnProperty.call(doc.media, ref) ? doc.media[ref] : void 0;
-  const [url, setUrl] = useState7(null);
-  useEffect6(() => {
+  const [url, setUrl] = useState10(null);
+  useEffect9(() => {
     let live = true;
     setUrl(null);
     if (ref && item) void resolveMedia(ref, item).then((u) => {
@@ -3446,13 +5281,13 @@ function Thumb({ doc, slide, resolveMedia }) {
       live = false;
     };
   }, [ref, item, resolveMedia]);
-  return /* @__PURE__ */ jsx9(
-    Box2,
+  return /* @__PURE__ */ jsx13(
+    Box4,
     {
       w: 40,
       h: 40,
       style: { flex: "none", borderRadius: 4, background: "var(--mantine-color-default-hover)", overflow: "hidden" },
-      children: url && /* @__PURE__ */ jsx9("img", { src: url, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })
+      children: url && /* @__PURE__ */ jsx13("img", { src: url, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })
     }
   );
 }
@@ -3466,24 +5301,26 @@ function StoryEditor({
   dark = false,
   strings: stringOverrides,
   playerStrings,
-  parseDateText = suggestEdtf
+  parseDateText = suggestEdtf,
+  placeSearch = WIKIDATA_PLACE_SEARCH,
+  mapStrings
 }) {
-  const strings = useMemo2(() => ({ ...EDITOR_ENGLISH, ...stringOverrides }), [stringOverrides]);
-  const [history, setHistory] = useState7(() => startHistory(initialStory));
-  const [selected, setSelected] = useState7(0);
-  const [presenting, setPresenting] = useState7(false);
-  const [problemsOpen, setProblemsOpen] = useState7(false);
+  const strings = useMemo4(() => ({ ...EDITOR_ENGLISH, ...stringOverrides }), [stringOverrides]);
+  const [history, setHistory] = useState10(() => startHistory(initialStory));
+  const [selected, setSelected] = useState10(0);
+  const [presenting, setPresenting] = useState10(false);
+  const [problemsOpen, setProblemsOpen] = useState10(false);
   const wide = useMediaQuery("(min-width: 1000px)", true);
   const doc = history.present;
-  const [files, setFiles] = useState7(() => new Map(initialFiles ?? []));
-  const [busy, setBusy] = useState7(false);
-  const [photoError, setPhotoError] = useState7(null);
-  const docRef = useRef7(doc);
+  const [files, setFiles] = useState10(() => new Map(initialFiles ?? []));
+  const [busy, setBusy] = useState10(false);
+  const [photoError, setPhotoError] = useState10(null);
+  const docRef = useRef11(doc);
   docRef.current = doc;
-  const filesRef = useRef7(files);
+  const filesRef = useRef11(files);
   filesRef.current = files;
-  const urls = useRef7(/* @__PURE__ */ new Map());
-  useEffect6(() => () => {
+  const urls = useRef11(/* @__PURE__ */ new Map());
+  useEffect9(() => () => {
     for (const url of urls.current.values()) URL.revokeObjectURL(url);
   }, []);
   const resolveMedia = useCallback(async (_key, item) => {
@@ -3502,7 +5339,7 @@ function StoryEditor({
   const apply = useCallback((next, key) => {
     setHistory((h) => record(h, next, key));
   }, []);
-  useEffect6(() => {
+  useEffect9(() => {
     onChange?.(doc, files);
   }, [doc, files, onChange]);
   const index = selected === STORY ? STORY : Math.min(selected, doc.slides.length - 1);
@@ -3510,7 +5347,20 @@ function StoryEditor({
   const setSlide = (patch, key) => {
     if (index !== STORY) apply(updateSlide(history.present, index, patch), `${slide.id}:${key}`);
   };
-  const issues = useMemo2(() => validate2(doc, files).errors, [doc, files]);
+  const setPlace = (slideId2, update, key) => {
+    setHistory((h) => {
+      const at = h.present.slides.findIndex((s) => s.id === slideId2);
+      if (at < 0) return h;
+      const before = h.present.slides[at].place;
+      const after = update(before);
+      return after === before ? h : record(h, updateSlide(h.present, at, { place: after }), `${slideId2}:${key}`);
+    });
+  };
+  const [mapSlideId, setMapSlideId] = useState10(null);
+  const mapSlide = mapSlideId ? doc.slides.find((s) => s.id === mapSlideId) : void 0;
+  const placeChoices = useMemo4(() => storyPlaceChoices(doc, index), [doc, index]);
+  const around = useMemo4(() => storyPlaces(doc.slides.map((s) => s.place))?.bounds ?? null, [doc.slides]);
+  const issues = useMemo4(() => validate2(doc, files).errors, [doc, files]);
   const addPhotos = useCallback(async (chosen, slideId2, replace) => {
     setBusy(true);
     setPhotoError(null);
@@ -3547,7 +5397,7 @@ function StoryEditor({
     apply(setSlidePhotos(next, at, photos));
   }, [apply, prepare, strings]);
   const slideId = slide?.id;
-  useEffect6(() => {
+  useEffect9(() => {
     if (!slideId) return;
     const onPaste = (e) => {
       if (e.target?.closest("input, textarea, [contenteditable=true]")) return;
@@ -3559,7 +5409,7 @@ function StoryEditor({
     window.addEventListener("paste", onPaste);
     return () => window.removeEventListener("paste", onPaste);
   }, [slideId, addPhotos]);
-  useEffect6(() => {
+  useEffect9(() => {
     const onKey = (e) => {
       if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
       const target = e.target;
@@ -3576,9 +5426,9 @@ function StoryEditor({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, []);
-  const slideActions = slide && /* @__PURE__ */ jsxs7(Group4, { gap: 6, children: [
-    /* @__PURE__ */ jsx9(Tooltip2, { label: strings.moveUp, children: /* @__PURE__ */ jsx9(
-      ActionIcon2,
+  const slideActions = slide && /* @__PURE__ */ jsxs10(Group7, { gap: 6, children: [
+    /* @__PURE__ */ jsx13(Tooltip4, { label: strings.moveUp, children: /* @__PURE__ */ jsx13(
+      ActionIcon3,
       {
         variant: "default",
         "aria-label": strings.moveUp,
@@ -3590,8 +5440,8 @@ function StoryEditor({
         children: "\u2191"
       }
     ) }),
-    /* @__PURE__ */ jsx9(Tooltip2, { label: strings.moveDown, children: /* @__PURE__ */ jsx9(
-      ActionIcon2,
+    /* @__PURE__ */ jsx13(Tooltip4, { label: strings.moveDown, children: /* @__PURE__ */ jsx13(
+      ActionIcon3,
       {
         variant: "default",
         "aria-label": strings.moveDown,
@@ -3603,13 +5453,13 @@ function StoryEditor({
         children: "\u2193"
       }
     ) }),
-    /* @__PURE__ */ jsx9(Button3, { variant: "default", size: "xs", onClick: () => {
+    /* @__PURE__ */ jsx13(Button6, { variant: "default", size: "xs", onClick: () => {
       const r = duplicateSlide(doc, index);
       apply(r.doc);
       setSelected(r.index);
     }, children: strings.duplicateSlide }),
-    /* @__PURE__ */ jsx9(
-      Button3,
+    /* @__PURE__ */ jsx13(
+      Button6,
       {
         variant: "default",
         size: "xs",
@@ -3624,10 +5474,10 @@ function StoryEditor({
       }
     )
   ] });
-  const storyForm = /* @__PURE__ */ jsxs7(Stack5, { gap: "md", children: [
-    /* @__PURE__ */ jsx9(Text4, { fw: 600, size: "lg", children: strings.story }),
-    /* @__PURE__ */ jsx9(
-      TextInput3,
+  const storyForm = /* @__PURE__ */ jsxs10(Stack8, { gap: "md", children: [
+    /* @__PURE__ */ jsx13(Text7, { fw: 600, size: "lg", children: strings.story }),
+    /* @__PURE__ */ jsx13(
+      TextInput6,
       {
         label: strings.title,
         required: true,
@@ -3635,8 +5485,8 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { title: e.currentTarget.value }), "story:title")
       }
     ),
-    /* @__PURE__ */ jsx9(
-      TextInput3,
+    /* @__PURE__ */ jsx13(
+      TextInput6,
       {
         label: strings.language,
         description: strings.languageHint,
@@ -3645,7 +5495,7 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { language: e.currentTarget.value.trim() || void 0 }), "story:language")
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(
       Select,
       {
         label: strings.map,
@@ -3664,20 +5514,20 @@ function StoryEditor({
       }
     )
   ] });
-  const slideForm = slide && /* @__PURE__ */ jsxs7(Stack5, { gap: "md", children: [
-    /* @__PURE__ */ jsxs7(Group4, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
-      /* @__PURE__ */ jsx9(Text4, { fw: 600, size: "lg", children: index === 0 ? strings.openingSlide : `${index + 1} / ${doc.slides.length}` }),
+  const slideForm = slide && /* @__PURE__ */ jsxs10(Stack8, { gap: "md", children: [
+    /* @__PURE__ */ jsxs10(Group7, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ jsx13(Text7, { fw: 600, size: "lg", children: index === 0 ? strings.openingSlide : `${index + 1} / ${doc.slides.length}` }),
       slideActions
     ] }),
-    /* @__PURE__ */ jsx9(
-      TextInput3,
+    /* @__PURE__ */ jsx13(
+      TextInput6,
       {
         label: strings.slideTitle,
         value: slide.title ?? "",
         onChange: (e) => setSlide({ title: e.currentTarget.value || void 0 }, "title")
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(
       DateField,
       {
         value: slide.date,
@@ -3687,7 +5537,7 @@ function StoryEditor({
         onChange: (date) => setSlide({ date }, "date")
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(
       StoryTextField,
       {
         label: strings.text,
@@ -3698,19 +5548,21 @@ function StoryEditor({
         onChange: (text) => setSlide({ text: text || void 0 }, "text")
       }
     ),
-    slide.place && /* @__PURE__ */ jsxs7(Stack5, { gap: 2, children: [
-      /* @__PURE__ */ jsx9(Text4, { size: "sm", fw: 500, children: strings.place }),
-      /* @__PURE__ */ jsxs7(Text4, { size: "sm", children: [
-        slide.place.name ?? "",
-        slide.place.lat !== void 0 && slide.place.lon !== void 0 && /* @__PURE__ */ jsxs7(Text4, { span: true, c: "dimmed", size: "sm", children: [
-          " ",
-          slide.place.lat.toFixed(4),
-          ", ",
-          slide.place.lon.toFixed(4)
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(
+      PlaceField,
+      {
+        place: slide.place,
+        choices: placeChoices,
+        around,
+        language: doc.language,
+        search: placeSearch,
+        dark,
+        strings,
+        onChange: (update, key) => setPlace(slide.id, update, key),
+        onEditMap: () => setMapSlideId(slide.id)
+      }
+    ),
+    /* @__PURE__ */ jsx13(
       PhotosField,
       {
         photos: slide.media ?? [],
@@ -3723,22 +5575,22 @@ function StoryEditor({
         onDescription: (key, alt) => apply(updateMedia(doc, key, { alt: alt || void 0 }), `media:${key}:alt`)
       }
     ),
-    photoError && /* @__PURE__ */ jsx9(Text4, { size: "xs", c: "red", role: "alert", children: photoError })
+    photoError && /* @__PURE__ */ jsx13(Text7, { size: "xs", c: "red", role: "alert", children: photoError })
   ] }, slide.id);
-  const list = /* @__PURE__ */ jsxs7(Stack5, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs7(
-      UnstyledButton2,
+  const list = /* @__PURE__ */ jsxs10(Stack8, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs10(
+      UnstyledButton3,
       {
         onClick: () => setSelected(STORY),
         style: { padding: "8px", borderRadius: 6, background: index === STORY ? "var(--mantine-primary-color-light)" : void 0 },
         children: [
-          /* @__PURE__ */ jsx9(Text4, { fw: 600, size: "sm", children: strings.story }),
-          /* @__PURE__ */ jsx9(Text4, { size: "xs", c: "dimmed", children: strings.storySettings })
+          /* @__PURE__ */ jsx13(Text7, { fw: 600, size: "sm", children: strings.story }),
+          /* @__PURE__ */ jsx13(Text7, { size: "xs", c: "dimmed", children: strings.storySettings })
         ]
       }
     ),
-    /* @__PURE__ */ jsx9(Divider, { label: strings.slides, labelPosition: "left" }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx13(Divider2, { label: strings.slides, labelPosition: "left" }),
+    /* @__PURE__ */ jsx13(
       SlideList,
       {
         label: strings.slides,
@@ -3750,17 +5602,17 @@ function StoryEditor({
           setSelected(to);
         },
         getKey: (s) => s.id,
-        renderItem: (s, i) => /* @__PURE__ */ jsxs7(Group4, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx9(Thumb, { doc, slide: s, resolveMedia }),
-          /* @__PURE__ */ jsxs7(Box2, { style: { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx9(Text4, { size: "sm", fw: 500, truncate: true, dir: "auto", c: s.title ? void 0 : "dimmed", children: s.title || strings.untitledSlide }),
-            /* @__PURE__ */ jsx9(Text4, { size: "xs", c: "dimmed", truncate: true, children: i === 0 ? strings.openingSlide : s.date?.text ?? "" })
+        renderItem: (s, i) => /* @__PURE__ */ jsxs10(Group7, { gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx13(Thumb, { doc, slide: s, resolveMedia }),
+          /* @__PURE__ */ jsxs10(Box4, { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx13(Text7, { size: "sm", fw: 500, truncate: true, dir: "auto", c: s.title ? void 0 : "dimmed", children: s.title || strings.untitledSlide }),
+            /* @__PURE__ */ jsx13(Text7, { size: "xs", c: "dimmed", truncate: true, children: i === 0 ? strings.openingSlide : s.date?.text ?? "" })
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs7(
-      Button3,
+    /* @__PURE__ */ jsxs10(
+      Button6,
       {
         variant: "light",
         size: "xs",
@@ -3777,7 +5629,7 @@ function StoryEditor({
       }
     )
   ] });
-  const preview = /* @__PURE__ */ jsx9(Box2, { style: { position: "relative", height: wide ? "100%" : 460, borderRadius: 8, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }, children: /* @__PURE__ */ jsx9(
+  const preview = /* @__PURE__ */ jsx13(Box4, { style: { position: "relative", height: wide ? "100%" : 460, borderRadius: 8, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }, children: /* @__PURE__ */ jsx13(
     StoryPlayer,
     {
       story: doc,
@@ -3791,8 +5643,8 @@ function StoryEditor({
       }
     }
   ) });
-  const column = (children, width) => /* @__PURE__ */ jsx9(
-    Box2,
+  const column = (children, width) => /* @__PURE__ */ jsx13(
+    Box4,
     {
       style: {
         width,
@@ -3805,32 +5657,32 @@ function StoryEditor({
       children
     }
   );
-  return /* @__PURE__ */ jsxs7(Box2, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs7(
-      Group4,
+  return /* @__PURE__ */ jsxs10(Box4, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs10(
+      Group7,
       {
-        h: BAR_HEIGHT2,
+        h: BAR_HEIGHT3,
         px: "md",
         gap: "sm",
         wrap: "nowrap",
         justify: "space-between",
         style: { flex: "none", borderBottom: "1px solid var(--mantine-color-default-border)" },
         children: [
-          /* @__PURE__ */ jsxs7(Group4, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs10(Group7, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: [
             brand,
-            /* @__PURE__ */ jsx9(Text4, { fw: 600, truncate: true, dir: "auto", children: doc.title })
+            /* @__PURE__ */ jsx13(Text7, { fw: 600, truncate: true, dir: "auto", children: doc.title })
           ] }),
-          /* @__PURE__ */ jsxs7(Group4, { gap: "xs", wrap: "nowrap", children: [
-            issues.length > 0 && /* @__PURE__ */ jsxs7(Popover, { opened: problemsOpen, onChange: setProblemsOpen, width: 360, position: "bottom-end", withArrow: true, children: [
-              /* @__PURE__ */ jsx9(Popover.Target, { children: /* @__PURE__ */ jsx9(Badge, { color: "red", variant: "light", style: { cursor: "pointer" }, onClick: () => setProblemsOpen((o) => !o), children: strings.problems(issues.length) }) }),
-              /* @__PURE__ */ jsx9(Popover.Dropdown, { children: /* @__PURE__ */ jsx9(Stack5, { gap: 6, children: issues.map((issue, i) => {
+          /* @__PURE__ */ jsxs10(Group7, { gap: "xs", wrap: "nowrap", children: [
+            issues.length > 0 && /* @__PURE__ */ jsxs10(Popover, { opened: problemsOpen, onChange: setProblemsOpen, width: 360, position: "bottom-end", withArrow: true, children: [
+              /* @__PURE__ */ jsx13(Popover.Target, { children: /* @__PURE__ */ jsx13(Badge, { color: "red", variant: "light", style: { cursor: "pointer" }, onClick: () => setProblemsOpen((o) => !o), children: strings.problems(issues.length) }) }),
+              /* @__PURE__ */ jsx13(Popover.Dropdown, { children: /* @__PURE__ */ jsx13(Stack8, { gap: 6, children: issues.map((issue, i) => {
                 const at = issueSlide(issue);
-                return /* @__PURE__ */ jsxs7(UnstyledButton2, { onClick: () => {
+                return /* @__PURE__ */ jsxs10(UnstyledButton3, { onClick: () => {
                   setSelected(at);
                   setProblemsOpen(false);
                 }, children: [
-                  /* @__PURE__ */ jsx9(Text4, { size: "sm", fw: 500, children: at === STORY ? strings.story : doc.slides[at]?.title || `${strings.untitledSlide} ${at + 1}` }),
-                  /* @__PURE__ */ jsxs7(Text4, { size: "xs", c: "dimmed", children: [
+                  /* @__PURE__ */ jsx13(Text7, { size: "sm", fw: 500, children: at === STORY ? strings.story : doc.slides[at]?.title || `${strings.untitledSlide} ${at + 1}` }),
+                  /* @__PURE__ */ jsxs10(Text7, { size: "xs", c: "dimmed", children: [
                     issue.path,
                     " ",
                     issue.message
@@ -3838,16 +5690,16 @@ function StoryEditor({
                 ] }, i);
               }) }) })
             ] }),
-            /* @__PURE__ */ jsx9(Tooltip2, { label: strings.undo, children: /* @__PURE__ */ jsx9(ActionIcon2, { variant: "default", size: "lg", "aria-label": strings.undo, disabled: history.past.length === 0, onClick: () => setHistory(undo), children: "\u21B6" }) }),
-            /* @__PURE__ */ jsx9(Tooltip2, { label: strings.redo, children: /* @__PURE__ */ jsx9(ActionIcon2, { variant: "default", size: "lg", "aria-label": strings.redo, disabled: history.future.length === 0, onClick: () => setHistory(redo), children: "\u21B7" }) }),
-            /* @__PURE__ */ jsx9(Button3, { variant: "default", onClick: () => setPresenting(true), children: strings.present }),
+            /* @__PURE__ */ jsx13(Tooltip4, { label: strings.undo, children: /* @__PURE__ */ jsx13(ActionIcon3, { variant: "default", size: "lg", "aria-label": strings.undo, disabled: history.past.length === 0, onClick: () => setHistory(undo), children: "\u21B6" }) }),
+            /* @__PURE__ */ jsx13(Tooltip4, { label: strings.redo, children: /* @__PURE__ */ jsx13(ActionIcon3, { variant: "default", size: "lg", "aria-label": strings.redo, disabled: history.future.length === 0, onClick: () => setHistory(redo), children: "\u21B7" }) }),
+            /* @__PURE__ */ jsx13(Button6, { variant: "default", onClick: () => setPresenting(true), children: strings.present }),
             toolbar
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs7(
-      Box2,
+    /* @__PURE__ */ jsxs10(
+      Box4,
       {
         style: {
           flex: 1,
@@ -3863,7 +5715,27 @@ function StoryEditor({
         ]
       }
     ),
-    /* @__PURE__ */ jsx9(Modal, { opened: presenting, onClose: () => setPresenting(false), fullScreen: true, withCloseButton: false, padding: 0, children: /* @__PURE__ */ jsx9(Box2, { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ jsx9(
+    mapSlide && /* @__PURE__ */ jsx13(
+      PlaceMapDialog,
+      {
+        place: mapSlide.place,
+        doc,
+        files,
+        dark,
+        parseDateText,
+        strings,
+        mapStrings,
+        onCancel: () => setMapSlideId(null),
+        onDone: (place, media, nextFiles) => {
+          const at = doc.slides.findIndex((s) => s.id === mapSlide.id);
+          setMapSlideId(null);
+          if (at < 0) return;
+          setFiles(nextFiles);
+          apply(updateSlide({ ...doc, media }, at, { place }));
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx13(Modal2, { opened: presenting, onClose: () => setPresenting(false), fullScreen: true, withCloseButton: false, padding: 0, children: /* @__PURE__ */ jsx13(Box4, { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ jsx13(
       StoryPlayer,
       {
         story: doc,
@@ -3880,31 +5752,47 @@ export {
   COALESCE_MS,
   DateField,
   EDITOR_ENGLISH,
+  MAP_EDITOR_ENGLISH,
+  MapEditor,
+  MapEditorHelp,
   PhotosField,
+  PlaceField,
+  PlaceMapDialog,
   SlideList,
   StoryEditor,
   StoryTextField,
+  WIKIDATA_PLACE_SEARCH,
   addImage,
   addSlide,
   blankStory,
   deleteSlide,
   duplicateSlide,
+  editorToPlace,
   findMedia,
+  formatLatLon,
   moveSlide,
   nextSlideId,
+  parseLatLon,
+  patchPlace,
+  placeFeatures,
+  placeToEditor,
   prepareImage,
   pruneMedia,
   record,
   redo,
+  roundDegrees,
+  searchWikidataPlaces,
   setSlidePhotos,
   slideDate,
   startHistory,
   storyFileName,
+  storyPlaceChoices,
   suggestEdtf,
   undo,
   updateMedia,
   updateSlide,
   updateStory,
-  usedMedia
+  usedMedia,
+  wikidataPoint
 };
 //# sourceMappingURL=editor.js.map