@gramps-connect/story 0.2.0 → 0.4.0

package/dist/editor.js

@@ -1,23 +1,71 @@
 // src/editor/StoryEditor.tsx
-import { useCallback, useEffect as useEffect5, useMemo as useMemo2, useState as useState6 } from "react";
+import { useCallback, useEffect as useEffect8, useMemo as useMemo3, useRef as useRef9, useState as useState8 } from "react";
 import {
-  ActionIcon,
+  ActionIcon as ActionIcon2,
   Badge,
-  Box,
-  Button as Button2,
+  Box as Box2,
+  Button as Button4,
   Divider,
-  Group as Group3,
+  Group as Group5,
   Modal,
   Popover,
   Select,
-  Stack as Stack4,
-  Text as Text3,
-  TextInput as TextInput2,
-  Tooltip,
-  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";
 
+// src/image.ts
+var DEFAULT_MAX_EDGE = { photo: 1600, overlay: 2048 };
+function fitWithin(width, height, maxEdge) {
+  const longEdge = Math.max(width, height);
+  if (longEdge <= maxEdge) return { width, height };
+  const scale = maxEdge / longEdge;
+  return { width: Math.max(1, Math.round(width * scale)), height: Math.max(1, Math.round(height * scale)) };
+}
+function encodingCandidates(purpose, hasAlpha) {
+  if (hasAlpha) return purpose === "overlay" ? ["image/png"] : ["image/webp", "image/png"];
+  return ["image/webp", "image/jpeg"];
+}
+var EXT = {
+  "image/webp": "webp",
+  "image/jpeg": "jpg",
+  "image/png": "png"
+};
+function canvasHasAlpha(ctx, width, height) {
+  const data = ctx.getImageData(0, 0, width, height).data;
+  for (let i = 3; i < data.length; i += 4) {
+    if (data[i] < 255) return true;
+  }
+  return false;
+}
+async function optimizeImage(input, options = {}) {
+  const purpose = options.purpose ?? "photo";
+  const maxEdge = options.maxEdge ?? DEFAULT_MAX_EDGE[purpose];
+  const quality = options.quality ?? 0.82;
+  const bitmap = await createImageBitmap(input, { imageOrientation: "from-image" });
+  try {
+    const { width, height } = fitWithin(bitmap.width, bitmap.height, maxEdge);
+    const canvas = new OffscreenCanvas(width, height);
+    const ctx = canvas.getContext("2d");
+    if (!ctx) throw new Error("No 2D canvas context available.");
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(bitmap, 0, 0, width, height);
+    const hasAlpha = canvasHasAlpha(ctx, width, height);
+    for (const mime of encodingCandidates(purpose, hasAlpha)) {
+      const blob2 = await canvas.convertToBlob({ type: mime, quality });
+      if (blob2.type === mime) return { blob: blob2, mime, ext: EXT[mime], width, height };
+    }
+    const blob = await canvas.convertToBlob({ type: "image/png" });
+    return { blob, mime: "image/png", ext: "png", width, height };
+  } finally {
+    bitmap.close();
+  }
+}
+
 // spec/1.0/story.schema.json
 var story_schema_default = {
   $schema: "https://json-schema.org/draft/2020-12/schema",
@@ -1739,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";
 
@@ -1791,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";
@@ -2200,7 +2248,8 @@ var ENGLISH = {
   historical: "Historical",
   historicalMapYear: (year) => `Historical map, ${year}`,
   noDateStandardMap: "No date here \u2014 standard map",
-  historicalYear: "Historical map year"
+  historicalYear: "Historical map year",
+  photoOf: (n, total) => `Photo ${n} of ${total}`
 };
 var TABLE = {
   en: ENGLISH,
@@ -2214,7 +2263,8 @@ var TABLE = {
     historical: "Historisch",
     historicalMapYear: (year) => `Historische Karte, ${year}`,
     noDateStandardMap: "Kein Datum hier \u2014 Standardkarte",
-    historicalYear: "Jahr der historischen Karte"
+    historicalYear: "Jahr der historischen Karte",
+    photoOf: (n, total) => `Foto ${n} von ${total}`
   },
   es: {
     previous: "Anterior",
@@ -2226,7 +2276,8 @@ var TABLE = {
     historical: "Hist\xF3rico",
     historicalMapYear: (year) => `Mapa hist\xF3rico, ${year}`,
     noDateStandardMap: "Sin fecha aqu\xED \u2014 mapa est\xE1ndar",
-    historicalYear: "A\xF1o del mapa hist\xF3rico"
+    historicalYear: "A\xF1o del mapa hist\xF3rico",
+    photoOf: (n, total) => `Foto ${n} de ${total}`
   },
   fr: {
     previous: "Pr\xE9c\xE9dent",
@@ -2238,7 +2289,8 @@ var TABLE = {
     historical: "Historique",
     historicalMapYear: (year) => `Carte historique, ${year}`,
     noDateStandardMap: "Pas de date ici \u2014 carte standard",
-    historicalYear: "Ann\xE9e de la carte historique"
+    historicalYear: "Ann\xE9e de la carte historique",
+    photoOf: (n, total) => `Photo ${n} sur ${total}`
   },
   nl: {
     previous: "Vorige",
@@ -2250,7 +2302,8 @@ var TABLE = {
     historical: "Historisch",
     historicalMapYear: (year) => `Historische kaart, ${year}`,
     noDateStandardMap: "Geen datum hier \u2014 standaardkaart",
-    historicalYear: "Jaar van de historische kaart"
+    historicalYear: "Jaar van de historische kaart",
+    photoOf: (n, total) => `Foto ${n} van ${total}`
   }
 };
 function stringsFor(...languages) {
@@ -2417,8 +2470,45 @@ function SlidePhoto({ mediaKey, item, caption, credit, resolveMedia, colors }) {
     (caption || credit) && /* @__PURE__ */ jsx4("figcaption", { style: { fontSize: 13, color: colors.muted }, children: [caption, credit && `\xA9 ${credit}`].filter(Boolean).join(" \xB7 ") })
   ] });
 }
-function SlideContent({ slide, story, resolveMedia, colors }) {
-  const photo = slide?.media?.find((m) => Object.prototype.hasOwnProperty.call(story.media, m.ref));
+function PhotoThumb({ mediaKey, item, label, selected, onSelect, resolveMedia, colors }) {
+  const [src, setSrc] = useState3(null);
+  useEffect3(() => {
+    let cancelled = false;
+    resolveMedia(mediaKey, item).then((url) => {
+      if (!cancelled) setSrc(url);
+    }, () => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [mediaKey, item, resolveMedia]);
+  return /* @__PURE__ */ jsx4(
+    "button",
+    {
+      type: "button",
+      "aria-label": label,
+      title: label,
+      "aria-pressed": selected,
+      onClick: onSelect,
+      style: {
+        width: 44,
+        height: 44,
+        padding: 0,
+        borderRadius: 4,
+        overflow: "hidden",
+        cursor: "pointer",
+        border: `2px solid ${selected ? colors.mark : "transparent"}`,
+        background: colors.border,
+        opacity: selected ? 1 : 0.7
+      },
+      children: src && /* @__PURE__ */ jsx4("img", { src, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } })
+    }
+  );
+}
+function SlideContent({ slide, story, resolveMedia, colors, strings }) {
+  const photos = (slide?.media ?? []).filter((m) => Object.prototype.hasOwnProperty.call(story.media, m.ref));
+  const [shown, setShown] = useState3(0);
+  const photo = photos[Math.min(shown, photos.length - 1)];
   const eyebrow = [slide?.date?.text, slide?.place?.name].filter(Boolean).join(" \xB7 ");
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
     photo && /* @__PURE__ */ jsx4(
@@ -2432,6 +2522,19 @@ function SlideContent({ slide, story, resolveMedia, colors }) {
         colors
       }
     ),
+    photos.length > 1 && /* @__PURE__ */ jsx4("div", { style: { display: "flex", gap: 6, flexWrap: "wrap", justifyContent: "center" }, children: photos.map((m, i) => /* @__PURE__ */ jsx4(
+      PhotoThumb,
+      {
+        mediaKey: m.ref,
+        item: story.media[m.ref],
+        label: strings.photoOf(i + 1, photos.length),
+        selected: photo === m,
+        onSelect: () => setShown(i),
+        resolveMedia,
+        colors
+      },
+      `${i}:${m.ref}`
+    )) }),
     /* @__PURE__ */ jsxs3("div", { style: { display: "flex", flexDirection: "column", gap: 4, alignItems: "center", maxWidth: 640, textAlign: "center" }, children: [
       eyebrow && /* @__PURE__ */ jsx4("div", { dir: "auto", style: { fontSize: 14, color: colors.muted }, children: eyebrow }),
       slide?.title && /* @__PURE__ */ jsx4("div", { dir: "auto", style: { fontSize: 20, fontWeight: 700, color: colors.text }, children: slide.title }),
@@ -2609,7 +2712,7 @@ function StoryPlayer({
     const item = Object.prototype.hasOwnProperty.call(story.media, key) ? story.media[key] : void 0;
     return item ? resolveMedia(key, item) : Promise.resolve(null);
   }, [story, resolveMedia]);
-  const content = /* @__PURE__ */ jsx4(SlideContent, { slide, story, resolveMedia, colors });
+  const content = /* @__PURE__ */ jsx4(SlideContent, { slide, story, resolveMedia, colors, strings }, slide?.id ?? index);
   const timeline = showTimeline && /* @__PURE__ */ jsx4(TimelineStrip, { points: datedSlides, currentIndex: index, onSelect: setIndex, colors });
   return /* @__PURE__ */ jsxs3(
     "div",
@@ -2864,6 +2967,68 @@ 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;
+  return true;
+}
+function findMedia(doc, files, data) {
+  for (const [key, item] of Object.entries(doc.media)) {
+    if (sameBytes(files.get(item.src), data)) return key;
+  }
+  return void 0;
+}
+function addImage(doc, files, image, stem = "photo") {
+  const existing = findMedia(doc, files, image.data);
+  if (existing) return { doc, files, key: existing };
+  let n = 1;
+  const taken = (key2) => Object.prototype.hasOwnProperty.call(doc.media, key2) || files.has(`media/${key2}.${image.ext}`);
+  while (taken(`${stem}-${n}`)) n += 1;
+  const key = `${stem}-${n}`;
+  const src = `media/${key}.${image.ext}`;
+  const item = {
+    src,
+    mime: image.mime,
+    ...image.width ? { width: image.width } : {},
+    ...image.height ? { height: image.height } : {}
+  };
+  return {
+    doc: { ...doc, media: { ...doc.media, [key]: item } },
+    files: new Map(files).set(src, image.data),
+    key
+  };
+}
+function setSlidePhotos(doc, index, media) {
+  return updateSlide(doc, index, { media: media.length ? media : void 0 });
+}
+function updateMedia(doc, key, patch) {
+  if (!Object.prototype.hasOwnProperty.call(doc.media, key)) return doc;
+  return { ...doc, media: { ...doc.media, [key]: patched(doc.media[key], patch) } };
+}
 function usedMedia(doc) {
   const used = /* @__PURE__ */ new Set();
   for (const slide of doc.slides) {
@@ -2979,22 +3144,389 @@ function DateField({ value, language, parse, strings, onChange }) {
   ] });
 }
 
+// src/editor/PhotosField.tsx
+import { useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
+import { ActionIcon, Box, Button, Group as Group2, Loader, Stack as Stack2, Text as Text2, TextInput as TextInput2, Tooltip } from "@mantine/core";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var imagesIn = (list) => [...list ?? []].filter((f) => f.type.startsWith("image/"));
+function Preview({ mediaKey, urlFor }) {
+  const [url, setUrl] = useState5(null);
+  useEffect5(() => {
+    let live = true;
+    void urlFor(mediaKey).then((u) => {
+      if (live) setUrl(u);
+    });
+    return () => {
+      live = false;
+    };
+  }, [mediaKey, urlFor]);
+  return /* @__PURE__ */ jsx6(Box, { w: 96, h: 96, style: { flex: "none", borderRadius: 6, overflow: "hidden", background: "var(--mantine-color-default-hover)" }, children: url && /* @__PURE__ */ jsx6("img", { src: url, alt: "", style: { width: "100%", height: "100%", objectFit: "cover", display: "block" } }) });
+}
+function PhotosField({ photos, media, urlFor, strings, busy, onChange, onFiles, onDescription }) {
+  const input = useRef5(null);
+  const replacing = useRef5(void 0);
+  const [dropping, setDropping] = useState5(false);
+  const pick = (replace) => {
+    replacing.current = replace;
+    input.current?.click();
+  };
+  const set = (i, patch, field) => {
+    const next = photos.map((p, j) => {
+      if (j !== i) return p;
+      const changed = { ...p, ...patch };
+      for (const [k, v] of Object.entries(patch)) if (!v) delete changed[k];
+      return changed;
+    });
+    onChange(next, `photo:${i}:${field}`);
+  };
+  const move = (from, to) => {
+    const next = [...photos];
+    const [p] = next.splice(from, 1);
+    next.splice(to, 0, p);
+    onChange(next, "photos");
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    setDropping(false);
+    const files = imagesIn(e.dataTransfer.files);
+    if (files.length) onFiles(files);
+  };
+  return /* @__PURE__ */ jsxs5(
+    Stack2,
+    {
+      gap: "sm",
+      onDragOver: (e) => {
+        if ([...e.dataTransfer.types].includes("Files")) {
+          e.preventDefault();
+          setDropping(true);
+        }
+      },
+      onDragLeave: (e) => {
+        if (e.currentTarget === e.target) setDropping(false);
+      },
+      onDrop,
+      style: {
+        borderRadius: 8,
+        padding: dropping ? 8 : 0,
+        margin: dropping ? -8 : 0,
+        outline: dropping ? "2px dashed var(--mantine-primary-color-filled)" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs5(Group2, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx6(Text2, { size: "sm", fw: 500, children: strings.photos }),
+          /* @__PURE__ */ jsxs5(Group2, { gap: "xs", children: [
+            busy && /* @__PURE__ */ jsx6(Loader, { size: "xs" }),
+            /* @__PURE__ */ jsxs5(Button, { variant: "default", size: "xs", onClick: () => pick(), disabled: busy, children: [
+              "+ ",
+              strings.addPhoto
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          "input",
+          {
+            ref: input,
+            type: "file",
+            accept: "image/*",
+            multiple: true,
+            hidden: true,
+            onChange: (e) => {
+              const files = imagesIn(e.currentTarget.files);
+              e.currentTarget.value = "";
+              if (files.length) onFiles(replacing.current === void 0 ? files : files.slice(0, 1), replacing.current);
+            }
+          }
+        ),
+        photos.length === 0 && /* @__PURE__ */ jsx6(Text2, { size: "xs", c: "dimmed", children: strings.photosHint }),
+        photos.map((photo, i) => {
+          const item = Object.prototype.hasOwnProperty.call(media, photo.ref) ? media[photo.ref] : void 0;
+          return /* @__PURE__ */ jsxs5(Group2, { gap: "sm", align: "flex-start", wrap: "nowrap", children: [
+            /* @__PURE__ */ jsxs5(Stack2, { gap: 4, align: "center", children: [
+              /* @__PURE__ */ jsx6(Preview, { mediaKey: photo.ref, urlFor }),
+              /* @__PURE__ */ jsxs5(Group2, { gap: 4, children: [
+                /* @__PURE__ */ jsx6(Tooltip, { label: strings.movePhotoUp, children: /* @__PURE__ */ jsx6(ActionIcon, { size: "sm", variant: "default", "aria-label": strings.movePhotoUp, disabled: i === 0, onClick: () => move(i, i - 1), children: "\u2191" }) }),
+                /* @__PURE__ */ jsx6(Tooltip, { label: strings.movePhotoDown, children: /* @__PURE__ */ jsx6(ActionIcon, { size: "sm", variant: "default", "aria-label": strings.movePhotoDown, disabled: i === photos.length - 1, onClick: () => move(i, i + 1), children: "\u2193" }) })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs5(Stack2, { gap: 6, style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx6(TextInput2, { size: "xs", label: strings.caption, value: photo.caption ?? "", onChange: (e) => set(i, { caption: e.currentTarget.value }, "caption") }),
+              /* @__PURE__ */ jsx6(TextInput2, { size: "xs", label: strings.credit, placeholder: strings.creditHint, value: photo.credit ?? "", onChange: (e) => set(i, { credit: e.currentTarget.value }, "credit") }),
+              item && /* @__PURE__ */ jsx6(
+                TextInput2,
+                {
+                  size: "xs",
+                  label: strings.description,
+                  description: strings.descriptionHint,
+                  value: item.alt ?? "",
+                  onChange: (e) => onDescription(photo.ref, e.currentTarget.value)
+                }
+              ),
+              /* @__PURE__ */ jsxs5(Group2, { gap: "xs", children: [
+                /* @__PURE__ */ jsx6(Button, { variant: "subtle", size: "compact-xs", onClick: () => pick(i), disabled: busy, children: strings.replacePhoto }),
+                /* @__PURE__ */ jsx6(Button, { variant: "subtle", size: "compact-xs", color: "red", onClick: () => onChange(photos.filter((_, j) => j !== i), "photos"), children: strings.removePhoto })
+              ] })
+            ] })
+          ] }, i);
+        })
+      ]
+    }
+  );
+}
+
+// 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 useState5 } from "react";
-import { Stack as Stack2, UnstyledButton } from "@mantine/core";
-import { jsx as jsx6 } from "react/jsx-runtime";
+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] = useState5(null);
-  const [over, setOver] = useState5(null);
+  const [dragging, setDragging] = useState7(null);
+  const [over, setOver] = useState7(null);
   const end = () => {
     setDragging(null);
     setOver(null);
   };
-  return /* @__PURE__ */ jsx6(Stack2, { 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__ */ jsx6(
-      UnstyledButton,
+    return /* @__PURE__ */ jsx9(
+      UnstyledButton2,
       {
         role: "option",
         "aria-selected": isSelected,
@@ -3033,9 +3565,9 @@ function SlideList({ items, selected, onSelect, onMove, getKey, renderItem, labe
 }
 
 // src/editor/StoryTextField.tsx
-import { useRef as useRef5 } from "react";
-import { Button, Group as Group2, Stack as Stack3, Text as Text2, Textarea } from "@mantine/core";
-import { jsx as jsx7, jsxs as jsxs5 } 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;
@@ -3053,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 = useRef5(null);
-  return /* @__PURE__ */ jsxs5(Stack3, { gap: 4, children: [
-    /* @__PURE__ */ jsxs5(Group2, { gap: "xs", children: [
-      /* @__PURE__ */ jsx7(Text2, { size: "sm", fw: 500, children: label }),
-      /* @__PURE__ */ jsx7(
-        Button,
+  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",
@@ -3069,8 +3601,8 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
           children: "B"
         }
       ),
-      /* @__PURE__ */ jsx7(
-        Button,
+      /* @__PURE__ */ jsx10(
+        Button3,
         {
           variant: "default",
           size: "compact-xs",
@@ -3082,7 +3614,7 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx10(
       Textarea,
       {
         ref,
@@ -3129,7 +3661,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}, 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",
+  replacePhoto: "Replace",
+  movePhotoUp: "Move photo up",
+  movePhotoDown: "Move photo down",
+  removePhoto: "Remove",
+  caption: "Caption",
+  credit: "Credit",
+  creditHint: "Who took it, or where it's from",
+  description: "Description",
+  descriptionHint: "What the photo shows, for anyone who can't see it.",
+  photoFailed: (name) => `Couldn't use ${name}: this browser can't read it as an image.`,
   undo: "Undo",
   redo: "Redo",
   present: "Present",
@@ -3139,18 +3698,22 @@ var EDITOR_ENGLISH = {
 };
 
 // src/editor/StoryEditor.tsx
-import { jsx as jsx8, jsxs as jsxs6 } 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) {
   const match = /^\/slides\/(\d+)/.exec(issue.path);
   return match ? Number(match[1]) : STORY;
 }
+async function prepareImage(file) {
+  const image = await optimizeImage(file);
+  return { data: new Uint8Array(await image.blob.arrayBuffer()), mime: image.mime, ext: image.ext, width: image.width, height: image.height };
+}
 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] = useState6(null);
-  useEffect5(() => {
+  const [url, setUrl] = useState8(null);
+  useEffect8(() => {
     let live = true;
     setUrl(null);
     if (ref && item) void resolveMedia(ref, item).then((u) => {
@@ -3160,48 +3723,132 @@ function Thumb({ doc, slide, resolveMedia }) {
       live = false;
     };
   }, [ref, item, resolveMedia]);
-  return /* @__PURE__ */ jsx8(
-    Box,
+  return /* @__PURE__ */ jsx11(
+    Box2,
     {
       w: 40,
       h: 40,
       style: { flex: "none", borderRadius: 4, background: "var(--mantine-color-default-hover)", overflow: "hidden" },
-      children: url && /* @__PURE__ */ jsx8("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" } })
     }
   );
 }
 function StoryEditor({
   initialStory,
-  files,
-  resolveMedia,
+  initialFiles,
   onChange,
+  prepareImage: prepare = prepareImage,
   toolbar,
   brand,
   dark = false,
   strings: stringOverrides,
   playerStrings,
-  parseDateText = suggestEdtf
+  parseDateText = suggestEdtf,
+  placeSearch = WIKIDATA_PLACE_SEARCH
 }) {
-  const strings = useMemo2(() => ({ ...EDITOR_ENGLISH, ...stringOverrides }), [stringOverrides]);
-  const [history, setHistory] = useState6(() => startHistory(initialStory));
-  const [selected, setSelected] = useState6(0);
-  const [presenting, setPresenting] = useState6(false);
-  const [problemsOpen, setProblemsOpen] = useState6(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] = useState8(() => new Map(initialFiles ?? []));
+  const [busy, setBusy] = useState8(false);
+  const [photoError, setPhotoError] = useState8(null);
+  const docRef = useRef9(doc);
+  docRef.current = doc;
+  const filesRef = useRef9(files);
+  filesRef.current = files;
+  const urls = useRef9(/* @__PURE__ */ new Map());
+  useEffect8(() => () => {
+    for (const url of urls.current.values()) URL.revokeObjectURL(url);
+  }, []);
+  const resolveMedia = useCallback(async (_key, item) => {
+    const cached = urls.current.get(item.src);
+    if (cached) return cached;
+    const data = filesRef.current.get(item.src);
+    if (!data) return null;
+    const url = URL.createObjectURL(new Blob([data], { type: item.mime }));
+    urls.current.set(item.src, url);
+    return url;
+  }, []);
+  const urlFor = useCallback((key) => {
+    const item = Object.prototype.hasOwnProperty.call(docRef.current.media, key) ? docRef.current.media[key] : void 0;
+    return item ? resolveMedia(key, item) : Promise.resolve(null);
+  }, [resolveMedia]);
   const apply = useCallback((next, key) => {
     setHistory((h) => record(h, next, key));
   }, []);
-  useEffect5(() => {
-    onChange?.(doc);
-  }, [doc, onChange]);
+  useEffect8(() => {
+    onChange?.(doc, files);
+  }, [doc, files, onChange]);
   const index = selected === STORY ? STORY : Math.min(selected, doc.slides.length - 1);
   const slide = index === STORY ? void 0 : doc.slides[index];
   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]);
-  useEffect5(() => {
+  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);
+    const chosenImages = [];
+    for (const file of chosen) {
+      try {
+        const known = findMedia(docRef.current, filesRef.current, new Uint8Array(await file.arrayBuffer()));
+        chosenImages.push(known ?? await prepare(file));
+      } catch {
+        setPhotoError(strings.photoFailed(file.name || "the image"));
+      }
+    }
+    setBusy(false);
+    if (!chosenImages.length) return;
+    let next = docRef.current;
+    let nextFiles = filesRef.current;
+    const keys = [];
+    for (const image of chosenImages) {
+      if (typeof image === "string") {
+        keys.push(image);
+        continue;
+      }
+      const added = addImage(next, nextFiles, image);
+      next = added.doc;
+      nextFiles = added.files;
+      keys.push(added.key);
+    }
+    const at = next.slides.findIndex((s) => s.id === slideId2);
+    if (at < 0) return;
+    const photos = [...next.slides[at].media ?? []];
+    if (replace !== void 0 && photos[replace]) photos[replace] = { ...photos[replace], ref: keys[0] };
+    else photos.push(...keys.map((ref) => ({ ref })));
+    setFiles(nextFiles);
+    apply(setSlidePhotos(next, at, photos));
+  }, [apply, prepare, strings]);
+  const slideId = slide?.id;
+  useEffect8(() => {
+    if (!slideId) return;
+    const onPaste = (e) => {
+      if (e.target?.closest("input, textarea, [contenteditable=true]")) return;
+      const images = [...e.clipboardData?.files ?? []].filter((f) => f.type.startsWith("image/"));
+      if (!images.length) return;
+      e.preventDefault();
+      void addPhotos(images, slideId);
+    };
+    window.addEventListener("paste", onPaste);
+    return () => window.removeEventListener("paste", onPaste);
+  }, [slideId, addPhotos]);
+  useEffect8(() => {
     const onKey = (e) => {
       if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
       const target = e.target;
@@ -3218,9 +3865,9 @@ function StoryEditor({
     window.addEventListener("keydown", onKey);
     return () => window.removeEventListener("keydown", onKey);
   }, []);
-  const slideActions = slide && /* @__PURE__ */ jsxs6(Group3, { gap: 6, children: [
-    /* @__PURE__ */ jsx8(Tooltip, { label: strings.moveUp, children: /* @__PURE__ */ jsx8(
-      ActionIcon,
+  const slideActions = slide && /* @__PURE__ */ jsxs8(Group5, { gap: 6, children: [
+    /* @__PURE__ */ jsx11(Tooltip3, { label: strings.moveUp, children: /* @__PURE__ */ jsx11(
+      ActionIcon2,
       {
         variant: "default",
         "aria-label": strings.moveUp,
@@ -3232,8 +3879,8 @@ function StoryEditor({
         children: "\u2191"
       }
     ) }),
-    /* @__PURE__ */ jsx8(Tooltip, { label: strings.moveDown, children: /* @__PURE__ */ jsx8(
-      ActionIcon,
+    /* @__PURE__ */ jsx11(Tooltip3, { label: strings.moveDown, children: /* @__PURE__ */ jsx11(
+      ActionIcon2,
       {
         variant: "default",
         "aria-label": strings.moveDown,
@@ -3245,13 +3892,13 @@ function StoryEditor({
         children: "\u2193"
       }
     ) }),
-    /* @__PURE__ */ jsx8(Button2, { 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__ */ jsx8(
-      Button2,
+    /* @__PURE__ */ jsx11(
+      Button4,
       {
         variant: "default",
         size: "xs",
@@ -3266,10 +3913,10 @@ function StoryEditor({
       }
     )
   ] });
-  const storyForm = /* @__PURE__ */ jsxs6(Stack4, { gap: "md", children: [
-    /* @__PURE__ */ jsx8(Text3, { fw: 600, size: "lg", children: strings.story }),
-    /* @__PURE__ */ jsx8(
-      TextInput2,
+  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,
@@ -3277,8 +3924,8 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { title: e.currentTarget.value }), "story:title")
       }
     ),
-    /* @__PURE__ */ jsx8(
-      TextInput2,
+    /* @__PURE__ */ jsx11(
+      TextInput4,
       {
         label: strings.language,
         description: strings.languageHint,
@@ -3287,7 +3934,7 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { language: e.currentTarget.value.trim() || void 0 }), "story:language")
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       Select,
       {
         label: strings.map,
@@ -3306,20 +3953,20 @@ function StoryEditor({
       }
     )
   ] });
-  const slideForm = slide && /* @__PURE__ */ jsxs6(Stack4, { gap: "md", children: [
-    /* @__PURE__ */ jsxs6(Group3, { justify: "space-between", wrap: "wrap", gap: "xs", children: [
-      /* @__PURE__ */ jsx8(Text3, { 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__ */ jsx8(
-      TextInput2,
+    /* @__PURE__ */ jsx11(
+      TextInput4,
       {
         label: strings.slideTitle,
         value: slide.title ?? "",
         onChange: (e) => setSlide({ title: e.currentTarget.value || void 0 }, "title")
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       DateField,
       {
         value: slide.date,
@@ -3329,7 +3976,7 @@ function StoryEditor({
         onChange: (date) => setSlide({ date }, "date")
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(
       StoryTextField,
       {
         label: strings.text,
@@ -3340,40 +3987,48 @@ function StoryEditor({
         onChange: (text) => setSlide({ text: text || void 0 }, "text")
       }
     ),
-    slide.place && /* @__PURE__ */ jsxs6(Stack4, { gap: 2, children: [
-      /* @__PURE__ */ jsx8(Text3, { size: "sm", fw: 500, children: strings.place }),
-      /* @__PURE__ */ jsxs6(Text3, { size: "sm", children: [
-        slide.place.name ?? "",
-        slide.place.lat !== void 0 && slide.place.lon !== void 0 && /* @__PURE__ */ jsxs6(Text3, { span: true, c: "dimmed", size: "sm", children: [
-          " ",
-          slide.place.lat.toFixed(4),
-          ", ",
-          slide.place.lon.toFixed(4)
-        ] })
-      ] })
-    ] }),
-    slide.media && slide.media.length > 0 && /* @__PURE__ */ jsxs6(Stack4, { gap: 4, children: [
-      /* @__PURE__ */ jsx8(Text3, { size: "sm", fw: 500, children: strings.photos }),
-      /* @__PURE__ */ jsx8(Group3, { gap: "sm", children: slide.media.map((m, i) => /* @__PURE__ */ jsxs6(Group3, { gap: "xs", wrap: "nowrap", children: [
-        /* @__PURE__ */ jsx8(Thumb, { doc, slide: { id: "", media: [m] }, resolveMedia }),
-        /* @__PURE__ */ jsx8(Text3, { size: "xs", c: "dimmed", maw: 200, lineClamp: 2, children: m.caption ?? "" })
-      ] }, i)) })
-    ] })
+    /* @__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 ?? [],
+        media: doc.media,
+        urlFor,
+        strings,
+        busy,
+        onChange: (photos, key) => apply(setSlidePhotos(doc, index, photos), `${slide.id}:${key}`),
+        onFiles: (chosen, replace) => void addPhotos(chosen, slide.id, replace),
+        onDescription: (key, alt) => apply(updateMedia(doc, key, { alt: alt || void 0 }), `media:${key}:alt`)
+      }
+    ),
+    photoError && /* @__PURE__ */ jsx11(Text5, { size: "xs", c: "red", role: "alert", children: photoError })
   ] }, slide.id);
-  const list = /* @__PURE__ */ jsxs6(Stack4, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs6(
-      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__ */ jsx8(Text3, { fw: 600, size: "sm", children: strings.story }),
-          /* @__PURE__ */ jsx8(Text3, { 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__ */ jsx8(Divider, { label: strings.slides, labelPosition: "left" }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx11(Divider, { label: strings.slides, labelPosition: "left" }),
+    /* @__PURE__ */ jsx11(
       SlideList,
       {
         label: strings.slides,
@@ -3385,17 +4040,17 @@ function StoryEditor({
           setSelected(to);
         },
         getKey: (s) => s.id,
-        renderItem: (s, i) => /* @__PURE__ */ jsxs6(Group3, { gap: "sm", wrap: "nowrap", children: [
-          /* @__PURE__ */ jsx8(Thumb, { doc, slide: s, resolveMedia }),
-          /* @__PURE__ */ jsxs6(Box, { style: { minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx8(Text3, { size: "sm", fw: 500, truncate: true, dir: "auto", c: s.title ? void 0 : "dimmed", children: s.title || strings.untitledSlide }),
-            /* @__PURE__ */ jsx8(Text3, { 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__ */ jsxs6(
-      Button2,
+    /* @__PURE__ */ jsxs8(
+      Button4,
       {
         variant: "light",
         size: "xs",
@@ -3412,7 +4067,7 @@ function StoryEditor({
       }
     )
   ] });
-  const preview = /* @__PURE__ */ jsx8(Box, { style: { position: "relative", height: wide ? "100%" : 460, borderRadius: 8, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }, children: /* @__PURE__ */ jsx8(
+  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,
@@ -3426,8 +4081,8 @@ function StoryEditor({
       }
     }
   ) });
-  const column = (children, width) => /* @__PURE__ */ jsx8(
-    Box,
+  const column = (children, width) => /* @__PURE__ */ jsx11(
+    Box2,
     {
       style: {
         width,
@@ -3440,9 +4095,9 @@ function StoryEditor({
       children
     }
   );
-  return /* @__PURE__ */ jsxs6(Box, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs6(
-      Group3,
+  return /* @__PURE__ */ jsxs8(Box2, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs8(
+      Group5,
       {
         h: BAR_HEIGHT2,
         px: "md",
@@ -3451,21 +4106,21 @@ function StoryEditor({
         justify: "space-between",
         style: { flex: "none", borderBottom: "1px solid var(--mantine-color-default-border)" },
         children: [
-          /* @__PURE__ */ jsxs6(Group3, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: [
+          /* @__PURE__ */ jsxs8(Group5, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: [
             brand,
-            /* @__PURE__ */ jsx8(Text3, { fw: 600, truncate: true, dir: "auto", children: doc.title })
+            /* @__PURE__ */ jsx11(Text5, { fw: 600, truncate: true, dir: "auto", children: doc.title })
           ] }),
-          /* @__PURE__ */ jsxs6(Group3, { gap: "xs", wrap: "nowrap", children: [
-            issues.length > 0 && /* @__PURE__ */ jsxs6(Popover, { opened: problemsOpen, onChange: setProblemsOpen, width: 360, position: "bottom-end", withArrow: true, children: [
-              /* @__PURE__ */ jsx8(Popover.Target, { children: /* @__PURE__ */ jsx8(Badge, { color: "red", variant: "light", style: { cursor: "pointer" }, onClick: () => setProblemsOpen((o) => !o), children: strings.problems(issues.length) }) }),
-              /* @__PURE__ */ jsx8(Popover.Dropdown, { children: /* @__PURE__ */ jsx8(Stack4, { 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__ */ jsxs6(UnstyledButton2, { onClick: () => {
+                return /* @__PURE__ */ jsxs8(UnstyledButton3, { onClick: () => {
                   setSelected(at);
                   setProblemsOpen(false);
                 }, children: [
-                  /* @__PURE__ */ jsx8(Text3, { size: "sm", fw: 500, children: at === STORY ? strings.story : doc.slides[at]?.title || `${strings.untitledSlide} ${at + 1}` }),
-                  /* @__PURE__ */ jsxs6(Text3, { 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
@@ -3473,16 +4128,16 @@ function StoryEditor({
                 ] }, i);
               }) }) })
             ] }),
-            /* @__PURE__ */ jsx8(Tooltip, { label: strings.undo, children: /* @__PURE__ */ jsx8(ActionIcon, { variant: "default", size: "lg", "aria-label": strings.undo, disabled: history.past.length === 0, onClick: () => setHistory(undo), children: "\u21B6" }) }),
-            /* @__PURE__ */ jsx8(Tooltip, { label: strings.redo, children: /* @__PURE__ */ jsx8(ActionIcon, { variant: "default", size: "lg", "aria-label": strings.redo, disabled: history.future.length === 0, onClick: () => setHistory(redo), children: "\u21B7" }) }),
-            /* @__PURE__ */ jsx8(Button2, { 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__ */ jsxs6(
-      Box,
+    /* @__PURE__ */ jsxs8(
+      Box2,
       {
         style: {
           flex: 1,
@@ -3498,7 +4153,7 @@ function StoryEditor({
         ]
       }
     ),
-    /* @__PURE__ */ jsx8(Modal, { opened: presenting, onClose: () => setPresenting(false), fullScreen: true, withCloseButton: false, padding: 0, children: /* @__PURE__ */ jsx8(Box, { style: { position: "fixed", inset: 0 }, children: /* @__PURE__ */ jsx8(
+    /* @__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,
@@ -3515,25 +4170,40 @@ export {
   COALESCE_MS,
   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