@gramps-connect/story 0.2.0 → 0.3.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 useEffect6, useMemo as useMemo2, useRef as useRef7, useState as useState7 } from "react";
 import {
-  ActionIcon,
+  ActionIcon as ActionIcon2,
   Badge,
-  Box,
-  Button as Button2,
+  Box as Box2,
+  Button as Button3,
   Divider,
-  Group as Group3,
+  Group as Group4,
   Modal,
   Popover,
   Select,
-  Stack as Stack4,
-  Text as Text3,
-  TextInput as TextInput2,
-  Tooltip,
+  Stack as Stack5,
+  Text as Text4,
+  TextInput as TextInput3,
+  Tooltip as Tooltip2,
   UnstyledButton as UnstyledButton2
 } 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",
@@ -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,44 @@ function slideDate(previous, text, edtf) {
   if (next.edtf !== previous?.edtf) delete next.sortYear;
   return next;
 }
+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,21 +3120,150 @@ 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/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 useState6 } from "react";
+import { Stack as Stack3, UnstyledButton } from "@mantine/core";
+import { jsx as jsx7 } 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] = useState6(null);
+  const [over, setOver] = useState6(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__ */ jsx7(Stack3, { 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(
+    return /* @__PURE__ */ jsx7(
       UnstyledButton,
       {
         role: "option",
@@ -3033,9 +3303,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 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";
 function applyMarker(el, marker, value, onChange) {
   const start = el.selectionStart ?? value.length;
   const end = el.selectionEnd ?? value.length;
@@ -3053,12 +3323,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 = 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,
         {
           variant: "default",
           size: "compact-xs",
@@ -3069,8 +3339,8 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
           children: "B"
         }
       ),
-      /* @__PURE__ */ jsx7(
-        Button,
+      /* @__PURE__ */ jsx8(
+        Button2,
         {
           variant: "default",
           size: "compact-xs",
@@ -3082,7 +3352,7 @@ function StoryTextField({ label, value, onChange, boldLabel = "Bold", italicLabe
         }
       )
     ] }),
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       Textarea,
       {
         ref,
@@ -3130,6 +3400,18 @@ var EDITOR_ENGLISH = {
   noPreciseDate: "None: this slide stays off the timeline.",
   place: "Place",
   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 +3421,22 @@ var EDITOR_ENGLISH = {
 };
 
 // src/editor/StoryEditor.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } 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] = useState7(null);
+  useEffect6(() => {
     let live = true;
     setUrl(null);
     if (ref && item) void resolveMedia(ref, item).then((u) => {
@@ -3160,21 +3446,21 @@ function Thumb({ doc, slide, resolveMedia }) {
       live = false;
     };
   }, [ref, item, resolveMedia]);
-  return /* @__PURE__ */ jsx8(
-    Box,
+  return /* @__PURE__ */ jsx9(
+    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__ */ jsx9("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,
@@ -3183,25 +3469,97 @@ function StoryEditor({
   parseDateText = suggestEdtf
 }) {
   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 [history, setHistory] = useState7(() => startHistory(initialStory));
+  const [selected, setSelected] = useState7(0);
+  const [presenting, setPresenting] = useState7(false);
+  const [problemsOpen, setProblemsOpen] = useState7(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);
+  docRef.current = doc;
+  const filesRef = useRef7(files);
+  filesRef.current = files;
+  const urls = useRef7(/* @__PURE__ */ new Map());
+  useEffect6(() => () => {
+    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]);
+  useEffect6(() => {
+    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 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;
+  useEffect6(() => {
+    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]);
+  useEffect6(() => {
     const onKey = (e) => {
       if (!(e.ctrlKey || e.metaKey) || e.altKey) return;
       const target = e.target;
@@ -3218,9 +3576,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__ */ jsxs7(Group4, { gap: 6, children: [
+    /* @__PURE__ */ jsx9(Tooltip2, { label: strings.moveUp, children: /* @__PURE__ */ jsx9(
+      ActionIcon2,
       {
         variant: "default",
         "aria-label": strings.moveUp,
@@ -3232,8 +3590,8 @@ function StoryEditor({
         children: "\u2191"
       }
     ) }),
-    /* @__PURE__ */ jsx8(Tooltip, { label: strings.moveDown, children: /* @__PURE__ */ jsx8(
-      ActionIcon,
+    /* @__PURE__ */ jsx9(Tooltip2, { label: strings.moveDown, children: /* @__PURE__ */ jsx9(
+      ActionIcon2,
       {
         variant: "default",
         "aria-label": strings.moveDown,
@@ -3245,13 +3603,13 @@ function StoryEditor({
         children: "\u2193"
       }
     ) }),
-    /* @__PURE__ */ jsx8(Button2, { variant: "default", size: "xs", onClick: () => {
+    /* @__PURE__ */ jsx9(Button3, { variant: "default", size: "xs", onClick: () => {
       const r = duplicateSlide(doc, index);
       apply(r.doc);
       setSelected(r.index);
     }, children: strings.duplicateSlide }),
-    /* @__PURE__ */ jsx8(
-      Button2,
+    /* @__PURE__ */ jsx9(
+      Button3,
       {
         variant: "default",
         size: "xs",
@@ -3266,10 +3624,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__ */ jsxs7(Stack5, { gap: "md", children: [
+    /* @__PURE__ */ jsx9(Text4, { fw: 600, size: "lg", children: strings.story }),
+    /* @__PURE__ */ jsx9(
+      TextInput3,
       {
         label: strings.title,
         required: true,
@@ -3277,8 +3635,8 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { title: e.currentTarget.value }), "story:title")
       }
     ),
-    /* @__PURE__ */ jsx8(
-      TextInput2,
+    /* @__PURE__ */ jsx9(
+      TextInput3,
       {
         label: strings.language,
         description: strings.languageHint,
@@ -3287,7 +3645,7 @@ function StoryEditor({
         onChange: (e) => apply(updateStory(doc, { language: e.currentTarget.value.trim() || void 0 }), "story:language")
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       Select,
       {
         label: strings.map,
@@ -3306,20 +3664,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__ */ 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}` }),
       slideActions
     ] }),
-    /* @__PURE__ */ jsx8(
-      TextInput2,
+    /* @__PURE__ */ jsx9(
+      TextInput3,
       {
         label: strings.slideTitle,
         value: slide.title ?? "",
         onChange: (e) => setSlide({ title: e.currentTarget.value || void 0 }, "title")
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       DateField,
       {
         value: slide.date,
@@ -3329,7 +3687,7 @@ function StoryEditor({
         onChange: (date) => setSlide({ date }, "date")
       }
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       StoryTextField,
       {
         label: strings.text,
@@ -3340,11 +3698,11 @@ 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 && /* @__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__ */ jsxs6(Text3, { span: true, c: "dimmed", size: "sm", children: [
+        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),
           ", ",
@@ -3352,28 +3710,35 @@ function StoryEditor({
         ] })
       ] })
     ] }),
-    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__ */ jsx9(
+      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__ */ jsx9(Text4, { size: "xs", c: "red", role: "alert", children: photoError })
   ] }, slide.id);
-  const list = /* @__PURE__ */ jsxs6(Stack4, { gap: "xs", children: [
-    /* @__PURE__ */ jsxs6(
+  const list = /* @__PURE__ */ jsxs7(Stack5, { gap: "xs", children: [
+    /* @__PURE__ */ jsxs7(
       UnstyledButton2,
       {
         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__ */ jsx9(Text4, { fw: 600, size: "sm", children: strings.story }),
+          /* @__PURE__ */ jsx9(Text4, { size: "xs", c: "dimmed", children: strings.storySettings })
         ]
       }
     ),
-    /* @__PURE__ */ jsx8(Divider, { label: strings.slides, labelPosition: "left" }),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(Divider, { label: strings.slides, labelPosition: "left" }),
+    /* @__PURE__ */ jsx9(
       SlideList,
       {
         label: strings.slides,
@@ -3385,17 +3750,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__ */ 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 ?? "" })
           ] })
         ] })
       }
     ),
-    /* @__PURE__ */ jsxs6(
-      Button2,
+    /* @__PURE__ */ jsxs7(
+      Button3,
       {
         variant: "light",
         size: "xs",
@@ -3412,7 +3777,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__ */ jsx9(Box2, { style: { position: "relative", height: wide ? "100%" : 460, borderRadius: 8, overflow: "hidden", border: "1px solid var(--mantine-color-default-border)" }, children: /* @__PURE__ */ jsx9(
     StoryPlayer,
     {
       story: doc,
@@ -3426,8 +3791,8 @@ function StoryEditor({
       }
     }
   ) });
-  const column = (children, width) => /* @__PURE__ */ jsx8(
-    Box,
+  const column = (children, width) => /* @__PURE__ */ jsx9(
+    Box2,
     {
       style: {
         width,
@@ -3440,9 +3805,9 @@ function StoryEditor({
       children
     }
   );
-  return /* @__PURE__ */ jsxs6(Box, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsxs6(
-      Group3,
+  return /* @__PURE__ */ jsxs7(Box2, { style: { height: "100%", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsxs7(
+      Group4,
       {
         h: BAR_HEIGHT2,
         px: "md",
@@ -3451,21 +3816,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__ */ jsxs7(Group4, { gap: "sm", wrap: "nowrap", style: { minWidth: 0 }, children: [
             brand,
-            /* @__PURE__ */ jsx8(Text3, { fw: 600, truncate: true, dir: "auto", children: doc.title })
+            /* @__PURE__ */ jsx9(Text4, { 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__ */ 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) => {
                 const at = issueSlide(issue);
-                return /* @__PURE__ */ jsxs6(UnstyledButton2, { onClick: () => {
+                return /* @__PURE__ */ jsxs7(UnstyledButton2, { 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__ */ 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: [
                     issue.path,
                     " ",
                     issue.message
@@ -3473,16 +3838,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__ */ 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 }),
             toolbar
           ] })
         ]
       }
     ),
-    /* @__PURE__ */ jsxs6(
-      Box,
+    /* @__PURE__ */ jsxs7(
+      Box2,
       {
         style: {
           flex: 1,
@@ -3498,7 +3863,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__ */ 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(
       StoryPlayer,
       {
         story: doc,
@@ -3515,23 +3880,29 @@ export {
   COALESCE_MS,
   DateField,
   EDITOR_ENGLISH,
+  PhotosField,
   SlideList,
   StoryEditor,
   StoryTextField,
+  addImage,
   addSlide,
   blankStory,
   deleteSlide,
   duplicateSlide,
+  findMedia,
   moveSlide,
   nextSlideId,
+  prepareImage,
   pruneMedia,
   record,
   redo,
+  setSlidePhotos,
   slideDate,
   startHistory,
   storyFileName,
   suggestEdtf,
   undo,
+  updateMedia,
   updateSlide,
   updateStory,
   usedMedia