@gramps-connect/story 0.2.0 → 0.4.0

package/dist/types/editor/PhotosField.d.ts

@@ -0,0 +1,16 @@
+import type { MediaItem, SlideMedia } from "../types";
+import type { EditorStrings } from "./strings";
+export interface PhotosFieldProps {
+    photos: SlideMedia[];
+    media: Record<string, MediaItem>;
+    /** A displayable URL for a media key. */
+    urlFor: (key: string) => Promise<string | null>;
+    strings: EditorStrings;
+    /** True while chosen files are being prepared. */
+    busy?: boolean;
+    onChange: (photos: SlideMedia[], key: string) => void;
+    /** Image files to add at the end, or to put in place of photo `replace`. */
+    onFiles: (files: File[], replace?: number) => void;
+    onDescription: (mediaKey: string, alt: string) => void;
+}
+export declare function PhotosField({ photos, media, urlFor, strings, busy, onChange, onFiles, onDescription }: PhotosFieldProps): import("react").JSX.Element;

package/dist/types/editor/PlaceField.d.ts

@@ -0,0 +1,21 @@
+import type { Place } from "../types";
+import type { Bounds } from "../player/geo";
+import type { PlaceSearch } from "./placeSearch";
+import type { EditorStrings } from "./strings";
+export type PlaceUpdate = (place: Place | undefined) => Place | undefined;
+export interface PlaceFieldProps {
+    place: Place | undefined;
+    /** The story's other places, to reuse. */
+    choices: Place[];
+    /** Where the map looks while this place has no point. */
+    around?: Bounds | null;
+    /** The story's language: search results are named in it. */
+    language?: string;
+    /** Null hides the search. */
+    search: PlaceSearch | null;
+    dark?: boolean;
+    strings: EditorStrings;
+    /** A change, as a function of the place as it is by then. */
+    onChange: (update: PlaceUpdate, key: string) => void;
+}
+export declare function PlaceField({ place, choices, around, language, search, dark, strings, onChange }: PlaceFieldProps): import("react").JSX.Element;

package/dist/types/editor/PlaceMap.d.ts

@@ -0,0 +1,12 @@
+import "maplibre-gl/dist/maplibre-gl.css";
+import type { LonLat } from "../types";
+import type { Bounds } from "../player/geo";
+export interface PlaceMapProps {
+    point: LonLat | null;
+    /** Where to look when there's no point yet. */
+    around?: Bounds | null;
+    dark?: boolean;
+    label: string;
+    onPick: (point: LonLat) => void;
+}
+export declare function PlaceMap({ point, around, dark, label, onPick }: PlaceMapProps): import("react").JSX.Element;

package/dist/types/editor/StoryEditor.d.ts

@@ -1,20 +1,24 @@
 import { type ReactNode } from "react";
-import type { MediaItem, StoryDoc } from "../types";
+import type { StoryDoc } from "../types";
 import type { PlayerStrings } from "../player/strings";
 import { type DateTextParser } from "./dates";
+import { type NewImage } from "./model";
+import { type PlaceSearch } from "./placeSearch";
 import { type EditorStrings } from "./strings";
 export interface StoryEditorProps {
-    /** The story to start from. Changing it later has no effect: remount
-     * (a new `key`) to edit another. */
+    /** The story to start from, and its files (paths as in media `src`).
+     * Changing these later has no effect: remount (a new `key`) to edit
+     * another story. */
     initialStory: StoryDoc;
-    /** The story's files, for checking that every media file is there. */
-    files?: {
-        has(path: string): boolean;
-    };
-    /** As for StoryPlayer. */
-    resolveMedia: (key: string, item: MediaItem) => Promise<string | null>;
-    /** Called with the document after every change, undo and redo included. */
-    onChange?: (doc: StoryDoc) => void;
+    initialFiles?: Map<string, Uint8Array>;
+    /** Called with the document and its files after every change, undo and
+     * redo included. The files only grow while editing (an undone photo's
+     * file stays); pruneMedia leaves out what nothing uses when saving. */
+    onChange?: (doc: StoryDoc, files: Map<string, Uint8Array>) => void;
+    /** Turns a chosen image file into what's stored. By default
+     * optimizeImage: 1600px WebP (JPEG where the browser can't), with the
+     * original's metadata left behind. */
+    prepareImage?: (file: Blob) => Promise<NewImage>;
     /** The host's own buttons (Open, Save, ...), at the right of the top bar. */
     toolbar?: ReactNode;
     /** Shown first in the top bar, e.g. ViewerBrand. */
@@ -24,5 +28,10 @@ export interface StoryEditorProps {
     playerStrings?: Partial<PlayerStrings>;
     /** Date text -> EDTF. By default gramps-date, in the story's language. */
     parseDateText?: DateTextParser;
+    /** Finding a place by name. By default Wikidata, and only when the
+     * person asks; null leaves the search out. */
+    placeSearch?: PlaceSearch | null;
 }
-export declare function StoryEditor({ initialStory, files, resolveMedia, onChange, toolbar, brand, dark, strings: stringOverrides, playerStrings, parseDateText, }: StoryEditorProps): import("react").JSX.Element;
+/** The default prepareImage. */
+export declare function prepareImage(file: Blob): Promise<NewImage>;
+export declare function StoryEditor({ initialStory, initialFiles, onChange, prepareImage: prepare, toolbar, brand, dark, strings: stringOverrides, playerStrings, parseDateText, placeSearch, }: StoryEditorProps): import("react").JSX.Element;

package/dist/types/editor/index.d.ts

@@ -1,7 +1,10 @@
-export { StoryEditor, type StoryEditorProps } from "./StoryEditor";
+export { prepareImage, StoryEditor, type StoryEditorProps } from "./StoryEditor";
+export { PhotosField, type PhotosFieldProps } from "./PhotosField";
+export { PlaceField, type PlaceFieldProps, type PlaceUpdate } from "./PlaceField";
+export { searchWikidataPlaces, wikidataPoint, WIKIDATA_PLACE_SEARCH, type PlaceSearch, type PlaceSearchResult } from "./placeSearch";
 export { StoryTextField, type StoryTextFieldProps } from "./StoryTextField";
 export { SlideList, type SlideListProps } from "./SlideList";
 export { DateField, type DateFieldProps } from "./DateField";
 export { suggestEdtf, type DateTextParser } from "./dates";
 export { EDITOR_ENGLISH, type EditorStrings } from "./strings";
-export { addSlide, blankStory, COALESCE_MS, deleteSlide, duplicateSlide, moveSlide, nextSlideId, pruneMedia, record, redo, slideDate, startHistory, storyFileName, undo, updateSlide, updateStory, usedMedia, type History, } from "./model";
+export { addImage, addSlide, blankStory, COALESCE_MS, deleteSlide, duplicateSlide, findMedia, formatLatLon, moveSlide, nextSlideId, parseLatLon, patchPlace, pruneMedia, record, redo, roundDegrees, setSlidePhotos, slideDate, startHistory, storyFileName, storyPlaceChoices, undo, updateMedia, updateSlide, updateStory, usedMedia, type History, type NewImage, } from "./model";

package/dist/types/editor/model.d.ts

@@ -1,4 +1,4 @@
-import type { Slide, StoryDate, StoryDoc } from "../types";
+import type { MediaItem, Place, Slide, SlideMedia, StoryDate, StoryDoc } from "../types";
 /** A story with one empty slide: the smallest valid one. */
 export declare function blankStory(title: string, language?: string): StoryDoc;
 /** "s<n>" past every id already of that form, so it's unique however the
@@ -27,6 +27,47 @@ export declare function updateStory(doc: StoryDoc, patch: Partial<Omit<StoryDoc,
  * date at all. A new precise form drops a `sortYear` it would contradict
  * (the timeline reads sortYear first); the date's other fields stay. */
 export declare function slideDate(previous: StoryDate | undefined, text: string, edtf: string | undefined): StoryDate | undefined;
+/** A place with some fields set or (undefined) removed; one left with
+ * nothing in it is no place at all. Its shape and overlays, and any field
+ * this version doesn't know, stay as they were. */
+export declare function patchPlace(place: Place | undefined, patch: Partial<Place>): Place | undefined;
+/** Degrees to 5 decimals: about a metre, and no float noise. */
+export declare const roundDegrees: (value: number) => number;
+/** "47.3769, 8.5417" (or with a space or semicolon between) -> a point;
+ * null when that's not two numbers in range. */
+export declare function parseLatLon(text: string): {
+    lat: number;
+    lon: number;
+} | null;
+export declare function formatLatLon(lat: number, lon: number): string;
+/** The places of the story's other slides, one per name (the first slide
+ * to use it), for giving another slide the very same place. */
+export declare function storyPlaceChoices(doc: StoryDoc, exceptIndex?: number): Place[];
+/** A prepared image to add to a story (see optimizeImage). */
+export interface NewImage {
+    data: Uint8Array;
+    mime: string;
+    /** File extension, without the dot. */
+    ext: string;
+    width?: number;
+    height?: number;
+}
+/** The media key whose file is exactly these bytes, if any: a photo
+ * that's already in the story, chosen again. */
+export declare function findMedia(doc: StoryDoc, files: Map<string, Uint8Array>, data: Uint8Array): string | undefined;
+/** Adds an image to the story's media (not to any slide), or finds the
+ * identical one already there, so the same photo is stored once. Returns
+ * its media key. */
+export declare function addImage(doc: StoryDoc, files: Map<string, Uint8Array>, image: NewImage, stem?: string): {
+    doc: StoryDoc;
+    files: Map<string, Uint8Array>;
+    key: string;
+};
+/** A slide's photo list; an empty one removes the field. */
+export declare function setSlidePhotos(doc: StoryDoc, index: number, media: SlideMedia[]): StoryDoc;
+/** Changes a media item itself (its description, shared by every slide
+ * that shows it). */
+export declare function updateMedia(doc: StoryDoc, key: string, patch: Partial<MediaItem>): StoryDoc;
 /** Every media key a slide or overlay refers to. */
 export declare function usedMedia(doc: StoryDoc): Set<string>;
 /** The story as it should be saved: media nothing refers to any more left

package/dist/types/editor/placeSearch.d.ts

@@ -0,0 +1,22 @@
+export interface PlaceSearchResult {
+    /** The Wikidata item, e.g. "Q72". */
+    id: string;
+    label: string;
+    /** Usually names the region and country, which tells same-named places
+     * apart. */
+    description?: string;
+}
+export interface PlaceSearch {
+    search: (term: string, language: string | undefined, signal?: AbortSignal) => Promise<PlaceSearchResult[]>;
+    /** The result's position, or null when it has none. */
+    point: (result: PlaceSearchResult, signal?: AbortSignal) => Promise<{
+        lat: number;
+        lon: number;
+    } | null>;
+}
+export declare function searchWikidataPlaces(term: string, language?: string, signal?: AbortSignal): Promise<PlaceSearchResult[]>;
+export declare function wikidataPoint(result: PlaceSearchResult, signal?: AbortSignal): Promise<{
+    lat: number;
+    lon: number;
+} | null>;
+export declare const WIKIDATA_PLACE_SEARCH: PlaceSearch;

package/dist/types/editor/strings.d.ts

@@ -29,7 +29,34 @@ export interface EditorStrings {
     matchDateAsWritten: string;
     noPreciseDate: string;
     place: string;
+    placeName: string;
+    removePlace: string;
+    findPlace: string;
+    findPlaceHint: string;
+    findPlaceNone: string;
+    findPlaceFailed: string;
+    findPlaceNoPoint: (name: string) => string;
+    coordinates: string;
+    coordinatesHint: string;
+    coordinatesInvalid: string;
+    placeMap: string;
+    placeMapHint: string;
+    placeShape: string;
+    placeOverlays: (count: number) => string;
+    placeKeeps: (what: string) => string;
     photos: string;
+    photosHint: string;
+    addPhoto: string;
+    replacePhoto: string;
+    movePhotoUp: string;
+    movePhotoDown: string;
+    removePhoto: string;
+    caption: string;
+    credit: string;
+    creditHint: string;
+    description: string;
+    descriptionHint: string;
+    photoFailed: (name: string) => string;
     undo: string;
     redo: string;
     present: string;

package/dist/types/player/strings.d.ts

@@ -10,6 +10,8 @@ export interface PlayerStrings {
     historicalMapYear: (year: number) => string;
     noDateStandardMap: string;
     historicalYear: string;
+    /** A photo's thumbnail button, on a slide with several. */
+    photoOf: (n: number, total: number) => string;
 }
 export declare const ENGLISH: PlayerStrings;
 /** The best table for a list of BCP 47 tags, most preferred first:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gramps-connect/story",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "description": "Read, write, validate and present .story.zip files: portable, versioned family-history stories.",
   "license": "AGPL-3.0-or-later",
   "type": "module",

package/src/editor/PhotosField.tsx

@@ -0,0 +1,134 @@
+// A slide's photos: add (pick, drop or paste -- pasting is the editor's),
+// replace, reorder and remove them, and write each one's caption, credit
+// and description. The files themselves are the editor's to prepare and
+// store; this only says what was chosen.
+import { useEffect, useRef, useState, type DragEvent } from "react";
+import { ActionIcon, Box, Button, Group, Loader, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import type { MediaItem, SlideMedia } from "../types";
+import type { EditorStrings } from "./strings";
+
+export interface PhotosFieldProps {
+  photos: SlideMedia[];
+  media: Record<string, MediaItem>;
+  /** A displayable URL for a media key. */
+  urlFor: (key: string) => Promise<string | null>;
+  strings: EditorStrings;
+  /** True while chosen files are being prepared. */
+  busy?: boolean;
+  onChange: (photos: SlideMedia[], key: string) => void;
+  /** Image files to add at the end, or to put in place of photo `replace`. */
+  onFiles: (files: File[], replace?: number) => void;
+  onDescription: (mediaKey: string, alt: string) => void;
+}
+
+const imagesIn = (list: FileList | null | undefined) => [...(list ?? [])].filter((f) => f.type.startsWith("image/"));
+
+function Preview({ mediaKey, urlFor }: { mediaKey: string; urlFor: PhotosFieldProps["urlFor"] }) {
+  const [url, setUrl] = useState<string | null>(null);
+  useEffect(() => {
+    let live = true;
+    void urlFor(mediaKey).then((u) => { if (live) setUrl(u); });
+    return () => { live = false; };
+  }, [mediaKey, urlFor]);
+  return (
+    <Box w={96} h={96} style={{ flex: "none", borderRadius: 6, overflow: "hidden", background: "var(--mantine-color-default-hover)" }}>
+      {url && <img src={url} alt="" style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }} />}
+    </Box>
+  );
+}
+
+export function PhotosField({ photos, media, urlFor, strings, busy, onChange, onFiles, onDescription }: PhotosFieldProps) {
+  const input = useRef<HTMLInputElement>(null);
+  const replacing = useRef<number | undefined>(undefined);
+  const [dropping, setDropping] = useState(false);
+
+  const pick = (replace?: number) => {
+    replacing.current = replace;
+    input.current?.click();
+  };
+  const set = (i: number, patch: Partial<SlideMedia>, field: string) => {
+    const next = photos.map((p, j) => {
+      if (j !== i) return p;
+      const changed: Record<string, unknown> = { ...p, ...patch };
+      for (const [k, v] of Object.entries(patch)) if (!v) delete changed[k];
+      return changed as unknown as SlideMedia;
+    });
+    onChange(next, `photo:${i}:${field}`);
+  };
+  const move = (from: number, to: number) => {
+    const next = [...photos];
+    const [p] = next.splice(from, 1);
+    next.splice(to, 0, p);
+    onChange(next, "photos");
+  };
+  const onDrop = (e: DragEvent) => {
+    e.preventDefault();
+    setDropping(false);
+    const files = imagesIn(e.dataTransfer.files);
+    if (files.length) onFiles(files);
+  };
+
+  return (
+    <Stack
+      gap="sm"
+      onDragOver={(e) => { if ([...e.dataTransfer.types].includes("Files")) { e.preventDefault(); setDropping(true); } }}
+      onDragLeave={(e) => { if (e.currentTarget === e.target) setDropping(false); }}
+      onDrop={onDrop}
+      style={{
+        borderRadius: 8, padding: dropping ? 8 : 0, margin: dropping ? -8 : 0,
+        outline: dropping ? "2px dashed var(--mantine-primary-color-filled)" : undefined,
+      }}
+    >
+      <Group justify="space-between">
+        <Text size="sm" fw={500}>{strings.photos}</Text>
+        <Group gap="xs">
+          {busy && <Loader size="xs" />}
+          <Button variant="default" size="xs" onClick={() => pick()} disabled={busy}>+ {strings.addPhoto}</Button>
+        </Group>
+      </Group>
+      <input
+        ref={input} type="file" accept="image/*" multiple hidden
+        onChange={(e) => {
+          const files = imagesIn(e.currentTarget.files);
+          e.currentTarget.value = "";
+          if (files.length) onFiles(replacing.current === undefined ? files : files.slice(0, 1), replacing.current);
+        }}
+      />
+      {photos.length === 0 && <Text size="xs" c="dimmed">{strings.photosHint}</Text>}
+      {photos.map((photo, i) => {
+        const item = Object.prototype.hasOwnProperty.call(media, photo.ref) ? media[photo.ref] : undefined;
+        return (
+          <Group key={i} gap="sm" align="flex-start" wrap="nowrap">
+            <Stack gap={4} align="center">
+              <Preview mediaKey={photo.ref} urlFor={urlFor} />
+              <Group gap={4}>
+                <Tooltip label={strings.movePhotoUp}>
+                  <ActionIcon size="sm" variant="default" aria-label={strings.movePhotoUp} disabled={i === 0} onClick={() => move(i, i - 1)}>↑</ActionIcon>
+                </Tooltip>
+                <Tooltip label={strings.movePhotoDown}>
+                  <ActionIcon size="sm" variant="default" aria-label={strings.movePhotoDown} disabled={i === photos.length - 1} onClick={() => move(i, i + 1)}>↓</ActionIcon>
+                </Tooltip>
+              </Group>
+            </Stack>
+            <Stack gap={6} style={{ flex: 1, minWidth: 0 }}>
+              <TextInput size="xs" label={strings.caption} value={photo.caption ?? ""} onChange={(e) => set(i, { caption: e.currentTarget.value }, "caption")} />
+              <TextInput size="xs" label={strings.credit} placeholder={strings.creditHint} value={photo.credit ?? ""} onChange={(e) => set(i, { credit: e.currentTarget.value }, "credit")} />
+              {item && (
+                <TextInput
+                  size="xs" label={strings.description} description={strings.descriptionHint} value={item.alt ?? ""}
+                  onChange={(e) => onDescription(photo.ref, e.currentTarget.value)}
+                />
+              )}
+              <Group gap="xs">
+                <Button variant="subtle" size="compact-xs" onClick={() => pick(i)} disabled={busy}>{strings.replacePhoto}</Button>
+                <Button variant="subtle" size="compact-xs" color="red" onClick={() => onChange(photos.filter((_, j) => j !== i), "photos")}>
+                  {strings.removePhoto}
+                </Button>
+              </Group>
+            </Stack>
+          </Group>
+        );
+      })}
+    </Stack>
+  );
+}

package/src/editor/PlaceField.tsx

@@ -0,0 +1,160 @@
+// A slide's place: a name and a point. The point comes from clicking the
+// map, dragging the pin, typing coordinates, or a search by name (opt-in:
+// the one thing the editor sends anywhere). Picking one of the story's
+// other places gives this slide the very same place, overlays and all.
+// A place's shape and overlays aren't edited here, but are always kept.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Autocomplete, Button, Group, Loader, Stack, Text, TextInput, Tooltip, UnstyledButton } from "@mantine/core";
+import type { Place } from "../types";
+import type { Bounds } from "../player/geo";
+import { formatLatLon, parseLatLon, patchPlace, roundDegrees } from "./model";
+import { PlaceMap } from "./PlaceMap";
+import type { PlaceSearch, PlaceSearchResult } from "./placeSearch";
+import type { EditorStrings } from "./strings";
+
+export type PlaceUpdate = (place: Place | undefined) => Place | undefined;
+
+export interface PlaceFieldProps {
+  place: Place | undefined;
+  /** The story's other places, to reuse. */
+  choices: Place[];
+  /** Where the map looks while this place has no point. */
+  around?: Bounds | null;
+  /** The story's language: search results are named in it. */
+  language?: string;
+  /** Null hides the search. */
+  search: PlaceSearch | null;
+  dark?: boolean;
+  strings: EditorStrings;
+  /** A change, as a function of the place as it is by then. */
+  onChange: (update: PlaceUpdate, key: string) => void;
+}
+
+type Found =
+  | { state: "idle" }
+  | { state: "searching" }
+  | { state: "results"; results: PlaceSearchResult[] }
+  | { state: "message"; message: string };
+
+export function PlaceField({ place, choices, around, language, search, dark, strings, onChange }: PlaceFieldProps) {
+  const lat = place?.lat;
+  const lon = place?.lon;
+  const point = lat !== undefined && lon !== undefined ? ([lon, lat] as [number, number]) : null;
+  const name = place?.name ?? "";
+
+  // The coordinates as typed, until they're a point; then as the point is.
+  const [coords, setCoords] = useState(point ? formatLatLon(point[1], point[0]) : "");
+  useEffect(() => {
+    setCoords((typed) => {
+      const parsed = parseLatLon(typed);
+      if (lat === undefined || lon === undefined) 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] = useState<Found>({ state: "idle" });
+  const searching = useRef<AbortController | null>(null);
+  useEffect(() => () => 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: PlaceSearchResult) => {
+    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 = useMemo(() => 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 (
+    <Stack gap="xs">
+      <Group justify="space-between">
+        <Text size="sm" fw={500}>{strings.place}</Text>
+        {place && (
+          <Button variant="subtle" size="compact-xs" color="red" onClick={() => { setFound({ state: "idle" }); onChange(() => undefined, "place"); }}>
+            {strings.removePlace}
+          </Button>
+        )}
+      </Group>
+      <Group gap="xs" align="flex-end" wrap="nowrap">
+        <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 || undefined }), "place:name")}
+          onOptionSubmit={(value) => {
+            const chosen = byName.get(value);
+            if (chosen) onChange(() => structuredClone(chosen), "place");
+          }}
+        />
+        {search && (
+          <Tooltip label={strings.findPlaceHint} multiline w={260}>
+            <Button variant="default" size="xs" disabled={!name.trim() || found.state === "searching"} onClick={() => void find()}>
+              {strings.findPlace}
+            </Button>
+          </Tooltip>
+        )}
+      </Group>
+      {found.state === "searching" && <Loader size="xs" />}
+      {found.state === "message" && <Text size="xs" c="dimmed" role="status">{found.message}</Text>}
+      {found.state === "results" && (
+        <Stack gap={2} role="list" aria-label={strings.findPlace}>
+          {found.results.map((result) => (
+            <UnstyledButton
+              key={result.id} role="listitem" onClick={() => void choose(result)}
+              style={{ padding: "4px 8px", borderRadius: 4, border: "1px solid var(--mantine-color-default-border)" }}
+            >
+              <Text size="sm">{result.label}</Text>
+              {result.description && <Text size="xs" c="dimmed">{result.description}</Text>}
+            </UnstyledButton>
+          ))}
+        </Stack>
+      )}
+      <TextInput
+        size="xs" label={strings.coordinates} placeholder={strings.coordinatesHint} w={260} value={coords}
+        error={coordsInvalid ? strings.coordinatesInvalid : undefined}
+        onChange={(e) => {
+          const text = e.currentTarget.value;
+          setCoords(text);
+          const parsed = parseLatLon(text);
+          if (!text.trim()) onChange((p) => patchPlace(p, { lat: undefined, lon: undefined }), "place:point");
+          else if (parsed) onChange((p) => patchPlace(p, parsed), "place:point");
+        }}
+      />
+      <PlaceMap
+        point={point} around={around} dark={dark} label={strings.placeMap}
+        onPick={([pickedLon, pickedLat]) => onChange((p) => patchPlace(p, { lat: pickedLat, lon: pickedLon }), "place:point")}
+      />
+      <Text size="xs" c="dimmed">{strings.placeMapHint}</Text>
+      {keeps.length > 0 && <Text size="xs" c="dimmed">{strings.placeKeeps(keeps.join(", "))}</Text>}
+    </Stack>
+  );
+}

package/src/editor/PlaceMap.tsx

@@ -0,0 +1,88 @@
+// A small map for setting a place's point: click to put the pin there,
+// drag the pin to move it. It starts at the point, or (with none yet) at
+// the story's other places, or the whole world.
+import { useEffect, useRef } from "react";
+import * as maplibregl from "maplibre-gl";
+import "maplibre-gl/dist/maplibre-gl.css";
+import type { Map as MapLibreMap, Marker as MapLibreMarker } from "maplibre-gl";
+import type { LonLat } from "../types";
+import type { Bounds } from "../player/geo";
+import { mapStyleUrl } from "../player/mapStyles";
+import { defaultColors, PIN_PATH_D } from "../player/theme";
+import { roundDegrees } from "./model";
+
+export interface PlaceMapProps {
+  point: LonLat | null;
+  /** Where to look when there's no point yet. */
+  around?: Bounds | null;
+  dark?: boolean;
+  label: string;
+  onPick: (point: LonLat) => void;
+}
+
+export function PlaceMap({ point, around, dark = false, label, onPick }: PlaceMapProps) {
+  const container = useRef<HTMLDivElement>(null);
+  const mapRef = useRef<MapLibreMap | null>(null);
+  const markerRef = useRef<MapLibreMarker | null>(null);
+  const onPickRef = useRef(onPick);
+  onPickRef.current = onPick;
+  const pick = (lngLat: { lng: number; lat: number }) => onPickRef.current([roundDegrees(lngLat.lng), roundDegrees(lngLat.lat)]);
+  // The first point and surroundings only: moving is the effect below.
+  const start = useRef({ point, around });
+
+  useEffect(() => {
+    if (!container.current) return;
+    const { point: first, around: box } = start.current;
+    const map = new maplibregl.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 maplibregl.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;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [dark]);
+
+  // The pin follows the point, however it changed; the view follows only
+  // when the pin would be out of sight.
+  useEffect(() => {
+    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 maplibregl.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) });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [point?.[0], point?.[1], dark]);
+
+  return (
+    <div
+      ref={container} role="application" aria-label={label}
+      style={{ height: 240, borderRadius: 6, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }}
+    />
+  );
+}