@gramps-connect/story 0.3.0 → 0.4.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 useEffect8, useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
 import {
   ActionIcon as ActionIcon2,
   Badge,
   Box as Box2,
-  Button as Button3,
+  Button as Button4,
   Divider,
-  Group as Group4,
+  Group as Group5,
   Modal,
   Popover,
   Select,
-  Stack as Stack5,
-  Text as Text4,
-  TextInput as TextInput3,
-  Tooltip as Tooltip2,
-  UnstyledButton as UnstyledButton2
+  Stack as Stack6,
+  Text as Text5,
+  TextInput as TextInput4,
+  Tooltip as Tooltip3,
+  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";
@@ -2967,6 +2967,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 +3273,260 @@ 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 }) {
+  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(", ")) })
+  ] });
+}
+
+// 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 useState7 } from "react";
+import { Stack as Stack4, UnstyledButton as UnstyledButton2 } from "@mantine/core";
+import { jsx as jsx9 } 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] = useState7(null);
+  const [over, setOver] = useState7(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__ */ jsx9(Stack4, { 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__ */ jsx9(
+      UnstyledButton2,
       {
         role: "option",
         "aria-selected": isSelected,
@@ -3303,9 +3565,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 useRef8 } from "react";
+import { Button as Button3, Group as Group4, Stack as Stack5, Text as Text4, Textarea } from "@mantine/core";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function applyMarker(el, marker, value, onChange) {
   const start = el.selectionStart ?? value.length;
   const end = el.selectionEnd ?? value.length;
@@ -3323,12 +3585,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 = useRef8(null);
+  return /* @__PURE__ */ jsxs7(Stack5, { gap: 4, children: [
+    /* @__PURE__ */ jsxs7(Group4, { gap: "xs", children: [
+      /* @__PURE__ */ jsx10(Text4, { size: "sm", fw: 500, children: label }),
+      /* @__PURE__ */ jsx10(
+        Button3,
         {
           variant: "default",
           size: "compact-xs",
@@ -3339,8 +3601,8 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
           children: "B"
         }
       ),
-      /* @__PURE__ */ jsx8(
-        Button2,
+      /* @__PURE__ */ jsx10(
+        Button3,
         {
           variant: "default",
           size: "compact-xs",
@@ -3352,7 +3614,7 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
         }
       )
     ] }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx10(
       Textarea,
       {
         ref,
@@ -3399,6 +3661,21 @@ 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}, kept as they are.`,
   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,7 +3698,7 @@ var EDITOR_ENGLISH = {
 };
 
 // src/editor/StoryEditor.tsx
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var BAR_HEIGHT2 = 56;
 var STORY = -1;
 function issueSlide(issue) {
@@ -3435,8 +3712,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] = useState8(null);
+  useEffect8(() => {
     let live = true;
     setUrl(null);
     if (ref && item) void resolveMedia(ref, item).then((u) => {
@@ -3446,13 +3723,13 @@ function Thumb({ doc, slide, resolveMedia }) {
       live = false;
     };
   }, [ref, item, resolveMedia]);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     Box2,
     {
       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__ */ jsx11("img", { src: url, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })
     }
   );
 }
@@ -3466,24 +3743,25 @@ function StoryEditor({
   dark = false,
   strings: stringOverrides,
   playerStrings,
-  parseDateText = suggestEdtf
+  parseDateText = suggestEdtf,
+  placeSearch = WIKIDATA_PLACE_SEARCH
 }) {
-  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 = useMemo3(() => ({ ...EDITOR_ENGLISH, ...stringOverrides }), [stringOverrides]);
+  const [history, setHistory] = useState8(() => startHistory(initialStory));
+  const [selected, setSelected] = useState8(0);
+  const [presenting, setPresenting] = useState8(false);
+  const [problemsOpen, setProblemsOpen] = useState8(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] = useState8(() => new Map(initialFiles ?? []));
+  const [busy, setBusy] = useState8(false);
+  const [photoError, setPhotoError] = useState8(null);
+  const docRef = useRef9(doc);
   docRef.current = doc;
-  const filesRef = useRef7(files);
+  const filesRef = useRef9(files);
   filesRef.current = files;
-  const urls = useRef7(/* @__PURE__ */ new Map());
-  useEffect6(() => () => {
+  const urls = useRef9(/* @__PURE__ */ new Map());
+  useEffect8(() => () => {
     for (const url of urls.current.values()) URL.revokeObjectURL(url);
   }, []);
   const resolveMedia = useCallback(async (_key, item) => {
@@ -3502,7 +3780,7 @@ function StoryEditor({
   const apply = useCallback((next, key) => {
     setHistory((h) => record(h, next, key));
   }, []);
-  useEffect6(() => {
+  useEffect8(() => {
     onChange?.(doc, files);
   }, [doc, files, onChange]);
   const index = selected === STORY ? STORY : Math.min(selected, doc.slides.length - 1);
@@ -3510,7 +3788,18 @@ 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 placeChoices = useMemo3(() => storyPlaceChoices(doc, index), [doc, index]);
+  const around = useMemo3(() => storyPlaces(doc.slides.map((s) => s.place))?.bounds ?? null, [doc.slides]);
+  const issues = useMemo3(() => validate2(doc, files).errors, [doc, files]);
   const addPhotos = useCallback(async (chosen, slideId2, replace) => {
     setBusy(true);
     setPhotoError(null);
@@ -3547,7 +3836,7 @@ function StoryEditor({
     apply(setSlidePhotos(next, at, photos));
   }, [apply, prepare, strings]);
   const slideId = slide?.id;
-  useEffect6(() => {
+  useEffect8(() => {
     if (!slideId) return;
     const onPaste = (e) => {
       if (e.target?.closest("input, textarea, [contenteditable=true]")) return;
@@ -3559,7 +3848,7 @@ function StoryEditor({
     window.addEventListener("paste", onPaste);
     return () => window.removeEventListener("paste", onPaste);
   }, [slideId, addPhotos]);
-  useEffect6(() => {
+  useEffect8(() => {
     const onKey = (e) => {
       if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
       const target = e.target;
@@ -3576,8 +3865,8 @@ 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(
+  const slideActions = slide && /* @__PURE__ */ jsxs8(Group5, { gap: 6, children: [
+    /* @__PURE__ */ jsx11(Tooltip3, { label: strings.moveUp, children: /* @__PURE__ */ jsx11(
       ActionIcon2,
       {
         variant: "default",
@@ -3590,7 +3879,7 @@ function StoryEditor({
         children: "\u2191"
       }
     ) }),
-    /* @__PURE__ */ jsx9(Tooltip2, { label: strings.moveDown, children: /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx11(Tooltip3, { label: strings.moveDown, children: /* @__PURE__ */ jsx11(
       ActionIcon2,
       {
         variant: "default",
@@ -3603,13 +3892,13 @@ function StoryEditor({
         children: "\u2193"
       }
     ) }),
-    /* @__PURE__ */ jsx9(Button3, { variant: "default", size: "xs", onClick: () => {
+    /* @__PURE__ */ jsx11(Button4, { variant: "default", size: "xs", onClick: () => {
       const r = duplicateSlide(doc, index);
       apply(r.doc);
       setSelected(r.index);
     }, children: strings.duplicateSlide }),
-    /* @__PURE__ */ jsx9(
-      Button3,
+    /* @__PURE__ */ jsx11(
+      Button4,
       {
         variant: "default",
         size: "xs",
@@ -3624,10 +3913,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__ */ jsxs8(Stack6, { gap: "md", children: [
+    /* @__PURE__ */ jsx11(Text5, { fw: 600, size: "lg", children: strings.story }),
+    /* @__PURE__ */ jsx11(
+      TextInput4,
       {
         label: strings.title,
         required: true,
@@ -3635,8 +3924,8 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { title: e.currentTarget.value }), "story:title")
       }
     ),
-    /* @__PURE__ */ jsx9(
-      TextInput3,
+    /* @__PURE__ */ jsx11(
+      TextInput4,
       {
         label: strings.language,
         description: strings.languageHint,
@@ -3645,7 +3934,7 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { language: e.currentTarget.value.trim() || void 0 }), "story:language")
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx11(
       Select,
       {
         label: strings.map,
@@ -3664,20 +3953,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__ */ jsxs8(Stack6, { gap: "md", children: [
+    /* @__PURE__ */ jsxs8(Group5, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
+      /* @__PURE__ */ jsx11(Text5, { fw: 600, size: "lg", children: index === 0 ? strings.openingSlide : `${index + 1} / ${doc.slides.length}` }),
       slideActions
     ] }),
-    /* @__PURE__ */ jsx9(
-      TextInput3,
+    /* @__PURE__ */ jsx11(
+      TextInput4,
       {
         label: strings.slideTitle,
         value: slide.title ?? "",
         onChange: (e) => setSlide({ title: e.currentTarget.value || void 0 }, "title")
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx11(
       DateField,
       {
         value: slide.date,
@@ -3687,7 +3976,7 @@ function StoryEditor({
         onChange: (date) => setSlide({ date }, "date")
       }
     ),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx11(
       StoryTextField,
       {
         label: strings.text,
@@ -3698,19 +3987,20 @@ 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__ */ jsx11(
+      PlaceField,
+      {
+        place: slide.place,
+        choices: placeChoices,
+        around,
+        language: doc.language,
+        search: placeSearch,
+        dark,
+        strings,
+        onChange: (update, key) => setPlace(slide.id, update, key)
+      }
+    ),
+    /* @__PURE__ */ jsx11(
       PhotosField,
       {
         photos: slide.media ?? [],
@@ -3723,22 +4013,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__ */ jsx11(Text5, { size: "xs", c: "red", role: "alert", children: photoError })
   ] }, slide.id);
-  const list = /* @__PURE__ */ jsxs7(Stack5, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs7(
-      UnstyledButton2,
+  const list = /* @__PURE__ */ jsxs8(Stack6, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs8(
+      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__ */ jsx11(Text5, { fw: 600, size: "sm", children: strings.story }),
+          /* @__PURE__ */ jsx11(Text5, { size: "xs", c: "dimmed", children: strings.storySettings })
         ]
       }
     ),
-    /* @__PURE__ */ jsx9(Divider, { label: strings.slides, labelPosition: "left" }),
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx11(Divider, { label: strings.slides, labelPosition: "left" }),
+    /* @__PURE__ */ jsx11(
       SlideList,
       {
         label: strings.slides,
@@ -3750,17 +4040,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__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", children: [
+          /* @__PURE__ */ jsx11(Thumb, { doc, slide: s, resolveMedia }),
+          /* @__PURE__ */ jsxs8(Box2, { style: { minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx11(Text5, { size: "sm", fw: 500, truncate: true, dir: "auto", c: s.title ? void 0 : "dimmed", children: s.title || strings.untitledSlide }),
+            /* @__PURE__ */ jsx11(Text5, { size: "xs", c: "dimmed", truncate: true, children: i === 0 ? strings.openingSlide : s.date?.text ?? "" })
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs7(
-      Button3,
+    /* @__PURE__ */ jsxs8(
+      Button4,
       {
         variant: "light",
         size: "xs",
@@ -3777,7 +4067,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__ */ jsx11(Box2, { style: { position: "relative", height: wide ? "100%" : 460, borderRadius: 8, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }, children: /* @__PURE__ */ jsx11(
     StoryPlayer,
     {
       story: doc,
@@ -3791,7 +4081,7 @@ function StoryEditor({
       }
     }
   ) });
-  const column = (children, width) => /* @__PURE__ */ jsx9(
+  const column = (children, width) => /* @__PURE__ */ jsx11(
     Box2,
     {
       style: {
@@ -3805,9 +4095,9 @@ function StoryEditor({
       children
     }
   );
-  return /* @__PURE__ */ jsxs7(Box2, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs7(
-      Group4,
+  return /* @__PURE__ */ jsxs8(Box2, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs8(
+      Group5,
       {
         h: BAR_HEIGHT2,
         px: "md",
@@ -3816,21 +4106,21 @@ function StoryEditor({
         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__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: [
             brand,
-            /* @__PURE__ */ jsx9(Text4, { fw: 600, truncate: true, dir: "auto", children: doc.title })
+            /* @__PURE__ */ jsx11(Text5, { 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__ */ jsxs8(Group5, { gap: "xs", wrap: "nowrap", children: [
+            issues.length > 0 && /* @__PURE__ */ jsxs8(Popover, { opened: problemsOpen, onChange: setProblemsOpen, width: 360, position: "bottom-end", withArrow: true, children: [
+              /* @__PURE__ */ jsx11(Popover.Target, { children: /* @__PURE__ */ jsx11(Badge, { color: "red", variant: "light", style: { cursor: "pointer" }, onClick: () => setProblemsOpen((o) => !o), children: strings.problems(issues.length) }) }),
+              /* @__PURE__ */ jsx11(Popover.Dropdown, { children: /* @__PURE__ */ jsx11(Stack6, { gap: 6, children: issues.map((issue, i) => {
                 const at = issueSlide(issue);
-                return /* @__PURE__ */ jsxs7(UnstyledButton2, { onClick: () => {
+                return /* @__PURE__ */ jsxs8(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__ */ jsx11(Text5, { size: "sm", fw: 500, children: at === STORY ? strings.story : doc.slides[at]?.title || `${strings.untitledSlide} ${at + 1}` }),
+                  /* @__PURE__ */ jsxs8(Text5, { size: "xs", c: "dimmed", children: [
                     issue.path,
                     " ",
                     issue.message
@@ -3838,15 +4128,15 @@ 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__ */ jsx11(Tooltip3, { label: strings.undo, children: /* @__PURE__ */ jsx11(ActionIcon2, { variant: "default", size: "lg", "aria-label": strings.undo, disabled: history.past.length === 0, onClick: () => setHistory(undo), children: "\u21B6" }) }),
+            /* @__PURE__ */ jsx11(Tooltip3, { label: strings.redo, children: /* @__PURE__ */ jsx11(ActionIcon2, { variant: "default", size: "lg", "aria-label": strings.redo, disabled: history.future.length === 0, onClick: () => setHistory(redo), children: "\u21B7" }) }),
+            /* @__PURE__ */ jsx11(Button4, { variant: "default", onClick: () => setPresenting(true), children: strings.present }),
             toolbar
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs7(
+    /* @__PURE__ */ jsxs8(
       Box2,
       {
         style: {
@@ -3863,7 +4153,7 @@ 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(
+    /* @__PURE__ */ jsx11(Modal, { opened: presenting, onClose: () => setPresenting(false), fullScreen: true, withCloseButton: false, padding: 0, children: /* @__PURE__ */ jsx11(Box2, { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ jsx11(
       StoryPlayer,
       {
         story: doc,
@@ -3881,30 +4171,39 @@ export {
   DateField,
   EDITOR_ENGLISH,
   PhotosField,
+  PlaceField,
   SlideList,
   StoryEditor,
   StoryTextField,
+  WIKIDATA_PLACE_SEARCH,
   addImage,
   addSlide,
   blankStory,
   deleteSlide,
   duplicateSlide,
   findMedia,
+  formatLatLon,
   moveSlide,
   nextSlideId,
+  parseLatLon,
+  patchPlace,
   prepareImage,
   pruneMedia,
   record,
   redo,
+  roundDegrees,
+  searchWikidataPlaces,
   setSlidePhotos,
   slideDate,
   startHistory,
   storyFileName,
+  storyPlaceChoices,
   suggestEdtf,
   undo,
   updateMedia,
   updateSlide,
   updateStory,
-  usedMedia
+  usedMedia,
+  wikidataPoint
 };
 //# sourceMappingURL=editor.js.map