@scalemule/news-publication 0.0.42 → 0.0.44

package/dist/story-review.cjs

@@ -308,6 +308,194 @@ function reviewEmailLink(email, title, text) {
   if (!email || !/^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$/i.test(email)) return void 0;
   return `mailto:${encodeURIComponent(email)}?subject=${encodeURIComponent(`Private story feedback: ${title}`)}&body=${encodeURIComponent(text)}`;
 }
+
+// src/article-blocks.ts
+function normalizeUuid(id) {
+  const clean = id.trim().toLowerCase().replace(/[^0-9a-f]/g, "");
+  if (clean.length === 32) {
+    return `${clean.slice(0, 8)}-${clean.slice(8, 12)}-${clean.slice(12, 16)}-${clean.slice(16, 20)}-${clean.slice(20)}`;
+  }
+  return id.trim().toLowerCase();
+}
+function escapeHtml(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeInlineMarkdown(raw) {
+  let text = raw.trim();
+  text = text.replace(/on\w+\s*=\s*(?:["'][^"']*["']|[^\s>]+)/gi, "");
+  text = text.replace(/javascript\s*:/gi, "");
+  text = escapeHtml(text);
+  text = text.replace(/\*\*(.+?)\*\*/g, "<strong>$1</strong>");
+  text = text.replace(/__(.+?)__/g, "<strong>$1</strong>");
+  text = text.replace(/\*([^*]+?)\*/g, "<em>$1</em>");
+  text = text.replace(/_([^_]+?)_/g, "<em>$1</em>");
+  text = text.replace(/`([^`]+?)`/g, "<code>$1</code>");
+  text = text.replace(/\[([^\]]+)\]\(((?:https?:\/\/|mailto:)[^)]+)\)/g, (_m, label, url) => {
+    return `<a href="${escapeHtml(url)}" rel="noopener noreferrer nofollow">${label}</a>`;
+  });
+  return text;
+}
+function parseDocumentBlocks(doc) {
+  const mediaList = doc.media || [];
+  const mediaMap = /* @__PURE__ */ new Map();
+  for (const m of mediaList) {
+    mediaMap.set(normalizeUuid(m.file_id), m);
+    if (m.contribution_id) {
+      mediaMap.set(normalizeUuid(m.contribution_id), m);
+    }
+  }
+  if (Array.isArray(doc.blocks) && doc.blocks.length > 0) {
+    const validated = [];
+    for (const b of doc.blocks) {
+      if (b.type === "inline_media") {
+        const norm = normalizeUuid(b.media_id);
+        const resolved = mediaMap.get(norm);
+        if (resolved) {
+          validated.push({
+            type: "inline_media",
+            media_id: resolved.file_id,
+            placement: "inline"
+          });
+        }
+      } else {
+        validated.push(b);
+      }
+    }
+    return validated;
+  }
+  const md = (doc.content_markdown || "").trim();
+  if (!md) return [];
+  const rawParagraphs = md.split(/\n{2,}/);
+  const blocks = [];
+  for (let i = 0; i < rawParagraphs.length; i++) {
+    const p = rawParagraphs[i].trim();
+    if (!p) continue;
+    let matchedMediaId = null;
+    const directiveMatch = p.match(/^::inline_media\{id=["']?([0-9a-f-]{32,36})["']?\}/i) || p.match(/^<!--\s*inline_media:([0-9a-f-]{32,36})\s*-->/i);
+    if (directiveMatch) {
+      matchedMediaId = normalizeUuid(directiveMatch[1]);
+      if (!mediaMap.has(matchedMediaId)) {
+        continue;
+      }
+    } else {
+      const imgMatch = p.match(/^!\[([^\]]*)\]\(([^)]+)\)/);
+      if (imgMatch) {
+        const src = imgMatch[2];
+        const uuidMatch = src.match(/(?:media:|\/)([0-9a-f]{8}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{4}-?[0-9a-f]{12}|[0-9a-f]{32})(?:\/|$|\?)/i);
+        if (uuidMatch) {
+          const norm = normalizeUuid(uuidMatch[1]);
+          if (mediaMap.has(norm)) {
+            matchedMediaId = norm;
+          }
+        }
+      }
+    }
+    if (matchedMediaId && mediaMap.has(matchedMediaId)) {
+      const mediaItem = mediaMap.get(matchedMediaId);
+      blocks.push({
+        type: "inline_media",
+        media_id: mediaItem.file_id,
+        placement: "inline"
+      });
+      const lines2 = p.split("\n").filter((l) => l.trim().length > 0);
+      if (lines2.length > 1 && !lines2[0].startsWith("::") && !lines2[0].startsWith("<!--")) {
+        const remaining = lines2.slice(1).join("\n").trim();
+        const isEcho = mediaItem.artwork_title && remaining.toLowerCase().includes(mediaItem.artwork_title.toLowerCase());
+        if (!isEcho && remaining) {
+          blocks.push({
+            type: "paragraph",
+            html: sanitizeInlineMarkdown(remaining)
+          });
+        }
+      }
+      continue;
+    }
+    const headingMatch = p.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      blocks.push({
+        type: "heading",
+        level: headingMatch[1].length,
+        html: sanitizeInlineMarkdown(headingMatch[2])
+      });
+      continue;
+    }
+    if (/^(\*{3,}|-{3,})$/.test(p)) {
+      blocks.push({ type: "divider" });
+      continue;
+    }
+    if (p.startsWith(">")) {
+      const quoteText = p.split("\n").map((l) => l.replace(/^>\s?/, "")).join(" ");
+      blocks.push({
+        type: "quote",
+        html: sanitizeInlineMarkdown(quoteText)
+      });
+      continue;
+    }
+    const lines = p.split("\n");
+    const isUnordered = lines.every((l) => /^\s*[-*]\s+/.test(l));
+    const isOrdered = lines.every((l) => /^\s*\d+\.\s+/.test(l));
+    if ((isUnordered || isOrdered) && lines.length > 0) {
+      const items = lines.map(
+        (l) => sanitizeInlineMarkdown(l.replace(/^\s*(?:[-*]|\d+\.)\s+/, ""))
+      );
+      blocks.push({
+        type: "list",
+        ordered: isOrdered,
+        items
+      });
+      continue;
+    }
+    blocks.push({
+      type: "paragraph",
+      html: sanitizeInlineMarkdown(p)
+    });
+  }
+  return blocks;
+}
+function formatArtworkCaption(media) {
+  let title = media.artwork_title ? media.artwork_title.trim() : void 0;
+  let artist = media.artist_name ? media.artist_name.trim() : void 0;
+  let mediumAndDate;
+  if (media.medium && media.artwork_date) {
+    mediumAndDate = `${media.medium} (${media.artwork_date})`;
+  } else if (media.medium) {
+    mediumAndDate = media.medium;
+  } else if (media.artwork_date) {
+    mediumAndDate = media.artwork_date;
+  }
+  let credit;
+  if (media.photographer) {
+    credit = `Photo: ${media.photographer}`;
+  } else if (media.credit) {
+    credit = media.credit.startsWith("Photo:") ? media.credit : `Photo: ${media.credit}`;
+  }
+  let source = media.source ? `Source: ${media.source}` : void 0;
+  let captionText = !title && media.caption ? media.caption : void 0;
+  if (!title && media.caption) {
+    const lines = media.caption.split("\n").map((l) => l.trim()).filter(Boolean);
+    if (lines.length >= 2 && (lines[0].startsWith("\u201C") || lines[0].startsWith('"'))) {
+      title = lines[0].replace(/^[“"']|[”"']$/g, "").trim();
+      artist = lines[1];
+      if (lines[2] && !lines[2].startsWith("Source:")) {
+        mediumAndDate = lines[2];
+      }
+      for (const line of lines) {
+        if (line.startsWith("Source:")) {
+          source = line;
+        }
+      }
+      captionText = void 0;
+    }
+  }
+  return {
+    title,
+    artist,
+    mediumAndDate,
+    credit,
+    source,
+    captionText
+  };
+}
 function EditorialNotices({ editorial }) {
   return editorial ? /* @__PURE__ */ jsxRuntime.jsxs("aside", { "aria-label": "Editorial notices", children: [
     editorial.content_kind && editorial.content_kind !== "EDITORIAL" && /* @__PURE__ */ jsxRuntime.jsx("p", { children: human(editorial.content_kind) }),
@@ -399,15 +587,27 @@ function StoryReview({
     setRights(false);
     setPanel("media");
   }
+  function openCorrection(photo) {
+    const title = photo.artwork_title || photo.caption || "Photograph";
+    setPanel("changes");
+    drafts.set("changes", {
+      ...drafts.entries.changes?.data,
+      correctionKind: "Correct a detail",
+      message: drafts.entries.changes?.data.message || `Correction regarding \u201C${title}\u201D: `
+    });
+  }
   react.useEffect(() => {
     if (panel !== "article") {
-      responseRef.current?.scrollIntoView({
-        block: "start",
-        behavior: window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ? "auto" : "smooth"
-      });
-      responseRef.current?.focus({ preventScroll: true });
+      responseRef.current?.focus();
+      const handleKeyDown = (e) => {
+        if (e.key === "Escape" && !busy) {
+          setPanel("article");
+        }
+      };
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
     }
-  }, [panel]);
+  }, [panel, busy]);
   const emptyMediaInfo = { caption: "", who_is_pictured: "", creator: "", when_taken: "", where_taken: "", credit: "", alt: "" };
   const drafts = useReviewDrafts(identity, review?.identity_required ? void 0 : review?.revision.id, review?.response_drafts, request);
   const currentDraft = drafts.entries[panel];
@@ -776,11 +976,25 @@ function StoryReview({
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy || pending.length > 0 || !!file, onClick: async () => {
             setBusy(true);
+            setError("");
             try {
+              const prevReviewer = review.reviewer;
               await request("/leave", {});
+              setReader(null);
               setPanelState("article");
               setIdentityStep("name");
               await load();
+              if (readerAccountUrl) {
+                void fetch(readerAccountUrl, { credentials: "same-origin", cache: "no-store" }).then(async (res) => {
+                  if (res.ok) {
+                    const d = await res.json();
+                    setReader(d.user || null);
+                  } else {
+                    setReader(null);
+                  }
+                }).catch(() => setReader(null));
+              }
+              setNotice(`You are no longer contributing as ${prevReviewer}. You can review the draft or sign in with another account.`);
             } catch (e) {
               setError(e.message);
             } finally {
@@ -830,6 +1044,7 @@ function StoryReview({
               media: m,
               base,
               onChange: can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
+              onSuggestCorrection: can("REQUEST_CHANGES") ? () => openCorrection(m) : void 0,
               disabled: busy
             },
             m.file_id
@@ -850,19 +1065,77 @@ function StoryReview({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              className: "sm-review-prose",
-              dangerouslySetInnerHTML: { __html: review.revision.content_html }
+          (() => {
+            const blocks = parseDocumentBlocks({
+              content_markdown: review.revision.document.content_markdown,
+              media: review.revision.document.media,
+              blocks: review.revision.document.blocks
+            });
+            const mediaMap = /* @__PURE__ */ new Map();
+            for (const m of review.revision.document.media) {
+              mediaMap.set(m.file_id, m);
+              if (m.contribution_id) mediaMap.set(m.contribution_id, m);
             }
-          ),
-          review.revision.document.media.filter((m) => m.position !== "hero").map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-prose", children: blocks.length === 0 && review.revision.content_html ? /* @__PURE__ */ jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: review.revision.content_html } }) : blocks.map((block, idx) => {
+              switch (block.type) {
+                case "paragraph":
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    "p",
+                    {
+                      dangerouslySetInnerHTML: { __html: block.html }
+                    },
+                    idx
+                  );
+                case "heading": {
+                  if (block.level === 1)
+                    return /* @__PURE__ */ jsxRuntime.jsx("h1", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                  if (block.level === 2)
+                    return /* @__PURE__ */ jsxRuntime.jsx("h2", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                  if (block.level === 3)
+                    return /* @__PURE__ */ jsxRuntime.jsx("h3", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                  if (block.level === 4)
+                    return /* @__PURE__ */ jsxRuntime.jsx("h4", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                  if (block.level === 5)
+                    return /* @__PURE__ */ jsxRuntime.jsx("h5", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                  return /* @__PURE__ */ jsxRuntime.jsx("h6", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                }
+                case "quote":
+                  return /* @__PURE__ */ jsxRuntime.jsxs("blockquote", { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { dangerouslySetInnerHTML: { __html: block.html } }),
+                    block.attribution && /* @__PURE__ */ jsxRuntime.jsx("cite", { children: block.attribution })
+                  ] }, idx);
+                case "list":
+                  return block.ordered ? /* @__PURE__ */ jsxRuntime.jsx("ol", { children: block.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { dangerouslySetInnerHTML: { __html: it } }, i)) }, idx) : /* @__PURE__ */ jsxRuntime.jsx("ul", { children: block.items.map((it, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { dangerouslySetInnerHTML: { __html: it } }, i)) }, idx);
+                case "divider":
+                  return /* @__PURE__ */ jsxRuntime.jsx("hr", {}, idx);
+                case "inline_media": {
+                  const m = mediaMap.get(block.media_id);
+                  if (!m) return null;
+                  return /* @__PURE__ */ jsxRuntime.jsx(
+                    PrivatePhoto,
+                    {
+                      media: m,
+                      base,
+                      onChange: m.kind !== "video" && can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
+                      onSuggestCorrection: can("REQUEST_CHANGES") ? () => openCorrection(m) : void 0,
+                      disabled: busy,
+                      isInline: true
+                    },
+                    m.file_id
+                  );
+                }
+                default:
+                  return null;
+              }
+            }) });
+          })(),
+          review.revision.document.media.filter((m) => m.position === "gallery").map((m) => /* @__PURE__ */ jsxRuntime.jsx(
             PrivatePhoto,
             {
               media: m,
               base,
               onChange: m.kind !== "video" && can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
+              onSuggestCorrection: can("REQUEST_CHANGES") ? () => openCorrection(m) : void 0,
               disabled: busy
             },
             m.file_id
@@ -936,544 +1209,573 @@ function StoryReview({
           ] }, name)),
           file && !pending.some(([name]) => name === "media") && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("media"), children: "Continue your photo upload" })
         ] }),
-        panel === "share" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Share private preview", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Share with your family" }),
-          errorMessage,
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-            "Anyone with this link can read the private preview. ",
-            renderSignIn ? "To contribute, they can continue with Google or use an email code." : "To send feedback or photos, they will enter their own name and verify their email. No account is needed."
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "review-share-url", children: "Private preview link" }),
-          /* @__PURE__ */ jsxRuntime.jsx("input", { id: "review-share-url", readOnly: true, value: shareUrl, onFocus: (e) => e.currentTarget.select() }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: async () => {
-            try {
-              await navigator.clipboard.writeText(shareUrl);
-              setNotice("Private link copied. Paste it into your message to family.");
-            } catch {
-              setNotice("Select the link above, then choose Copy on your device.");
-            }
-          }, children: "Copy private link" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("article"), children: "Back to the story" })
-        ] }),
-        panel === "question-list" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Optional story questions", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-form-heading", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Tell us a little more" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("article"), children: "Close" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Completely optional. Read the questions first, then answer online or copy them into an email. Even one answer helps." }),
-          /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "sm-review-question-list", children: review.questions.filter((q, i) => moreQuestions || i < 5 || q.required).map((q) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: q.prompt }, q.id)) }),
-          !moreQuestions && review.questions.length > 5 && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setMoreQuestions(true), children: "See all questions" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-primary", onClick: () => setPanel("questions"), children: "Answer online" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Sign in to save your answers as you go. You can return whenever it suits you." }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: async () => {
-            try {
-              await navigator.clipboard.writeText(questionText);
-              setNotice("Questions copied. Paste them into an email and answer as many as you like.");
-            } catch {
-              setCopiedQuestions(true);
-            }
-          }, children: "Copy all questions" }),
-          copiedQuestions && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-            "Copy these questions",
-            /* @__PURE__ */ jsxRuntime.jsx("textarea", { readOnly: true, rows: 10, value: questionText, onFocus: (e) => e.currentTarget.select() })
-          ] }),
-          questionsEmail && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("a", { href: questionsEmail, children: "Answer by email" }),
-            " \u2014 opens your email app with the questions ready."
-          ] })
-        ] }),
-        panel === "identity" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Introduce yourself", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: identityStep === "code" ? "Check your email" : "Continue to help with the story" }),
-          errorMessage,
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your name accompanies your feedback. Your email stays private." }),
-          identityStep === "name" && renderSignIn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-            readerLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Checking your sign-in\u2026" }) : reader?.email_verified ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "sm-review-primary", disabled: busy, onClick: () => void connectReader(), children: [
-                "Continue as ",
-                reader.full_name || reader.email
-              ] }),
-              /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your reader account is ready. No email code is needed." })
-            ] }) : renderSignIn(signInReturn),
-            !useEmailCode && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-quiet", onClick: () => setUseEmailCode(true), children: "Use an email code instead" })
-          ] }),
-          identityStep === "name" && useEmailCode && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: async (e) => {
-            e.preventDefault();
-            setBusy(true);
-            setError("");
-            try {
-              await request("/join", { name: contributorName, email: contributorEmail });
-              await request("/verify", {});
-              setIdentityStep("code");
-              setCode("");
-            } catch (e2) {
-              setError(e2.message);
-            } finally {
-              setBusy(false);
-            }
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contributor-name", children: "Your name" }),
-            /* @__PURE__ */ jsxRuntime.jsx("input", { id: "contributor-name", autoComplete: "name", value: contributorName, maxLength: 150, required: true, onChange: (e) => setContributorName(e.target.value) }),
-            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contributor-email", children: "Your email" }),
-            /* @__PURE__ */ jsxRuntime.jsx("input", { id: "contributor-email", type: "email", autoComplete: "email", value: contributorEmail, maxLength: 320, required: true, onChange: (e) => setContributorEmail(e.target.value) }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "We'll email you a code to confirm it's you." }),
-            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No password or account is needed for this option." }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, children: busy ? "Sending your code\u2026" : "Email me a code" })
-          ] }),
-          identityStep === "code" && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: async (e) => {
-            e.preventDefault();
-            setBusy(true);
-            setError("");
-            try {
-              await request("/verify", { code });
-              await load();
-              setCode("");
-              setPanelState(requestedPanel);
-            } catch (e2) {
-              setError(e2.message);
-            } finally {
-              setBusy(false);
-            }
-          }, children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-              "Enter the eight-digit code sent to ",
-              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: contributorEmail }),
-              ". It expires in ten minutes."
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contributor-code", children: "Email verification code" }),
-            /* @__PURE__ */ jsxRuntime.jsx("input", { id: "contributor-code", inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9]{8}", maxLength: 8, value: code, required: true, onChange: (e) => setCode(e.target.value.replace(/\s/g, "")) }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, children: busy ? "Verifying\u2026" : "Verify and continue" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: busy, onClick: async () => {
-              setBusy(true);
-              try {
-                await request("/verify", {});
-                setNotice("A new code was sent. Check your inbox and spam folder.");
-              } catch (e) {
-                setError(e.message);
-              } finally {
-                setBusy(false);
-              }
-            }, children: "Send a new code" }),
-            /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: busy, onClick: () => setIdentityStep("name"), children: "Use a different email" })
-          ] }),
-          emailAlternative,
-          /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Just read the story" })
-        ] }),
-        panel === "feedback" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Family feedback", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Looks good to you?" }),
-          errorMessage,
-          /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-            "We'll send your feedback as ",
-            review.reviewer,
-            ". The newsroom will request approval from the designated family reviewer separately. This will not publish the story."
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-primary", disabled: busy, onClick: () => void send({ action: "COMMENT", message: "This draft looks good to me.", target: { kind: "STORY" } }, "Thank you. Your feedback has been sent to the newsroom. The story is still private.", false), children: "Send my feedback" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Back to the story" })
-        ] }),
-        !["article", "identity", "share", "feedback", "question-list"].includes(panel) && /* @__PURE__ */ jsxRuntime.jsxs(
-          "section",
+        panel !== "article" && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            ref: responseRef,
-            tabIndex: -1,
-            className: "sm-review-form",
-            "aria-label": "Your response",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-form-heading", children: [
-                /* @__PURE__ */ jsxRuntime.jsx("h2", { children: panel === "approve" ? "Approve this exact draft" : panel === "edits" ? "Propose changes" : panel === "media" ? photoToReplace ? "Change photo" : "Contribute a photograph" : panel === "questions" ? "Tell us a little more" : panel === "history" ? "Selected revision history" : panel === "decline" ? "Prefer not to publish" : panel === "changes" ? "Suggest a change" : "Message the newsroom" }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Close" })
+            className: "sm-review-modal-backdrop",
+            role: "dialog",
+            "aria-modal": "true",
+            onClick: (e) => {
+              if (e.target === e.currentTarget && !busy) setPanel("article");
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-modal-container", children: [
+              panel === "share" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Share private preview", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-form-heading", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Share with your family" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, type: "button", onClick: () => setPanel("article"), "aria-label": "Close", children: "Close" })
+                ] }),
+                errorMessage,
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                  "Anyone with this link can read the private preview. ",
+                  renderSignIn ? "To contribute, they can continue with Google or use an email code." : "To send feedback or photos, they will enter their own name and verify their email. No account is needed."
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "review-share-url", children: "Private preview link" }),
+                /* @__PURE__ */ jsxRuntime.jsx("input", { id: "review-share-url", readOnly: true, value: shareUrl, onFocus: (e) => e.currentTarget.select() }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: async () => {
+                  try {
+                    await navigator.clipboard.writeText(shareUrl);
+                    setNotice("Private link copied. Paste it into your message to family.");
+                  } catch {
+                    setNotice("Select the link above, then choose Copy on your device.");
+                  }
+                }, children: "Copy private link" }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("article"), children: "Back to the story" })
               ] }),
-              errorMessage,
-              panel !== "history" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-save-state", role: "status", "aria-live": "polite", children: [
-                currentDraft?.status === "conflict" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A response was saved in another tab or device. Your writing here is still available. Choose which version to keep." }),
-                  /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => void drafts.resolve(panel, true).catch((e) => setError(e.message)), children: "Keep what I wrote here" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => void drafts.resolve(panel, false).catch((e) => setError(e.message)), children: "Use the saved response" })
-                ] }) : currentDraft?.status === "offline" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: currentDraft.local ? "Saved on this device. Waiting for a connection to save online." : "Not saved yet. Keep this page open and try again." }),
-                  /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => void drafts.flush(panel).catch((e) => setError(e.message)), children: "Try saving again" })
-                ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: currentDraft?.status === "saving" ? "Saving your writing\u2026" : hasDraft(currentDraft?.data) ? "Saved \u2014 not sent yet. You can safely come back later." : "Your writing saves automatically. Use the Send button below when you're ready to share it with the newsroom." }),
-                hasDraft(currentDraft?.data) && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-quiet", disabled: busy, onClick: () => {
-                  if (window.confirm("Discard this unsent response? Responses already sent will be kept.")) void drafts.discard(panel).catch((e) => setError(e.message));
-                }, children: "Discard this unsent response" })
+              panel === "question-list" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Optional story questions", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-form-heading", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Tell us a little more" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("article"), children: "Close" })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Completely optional. Read the questions first, then answer online or copy them into an email. Even one answer helps." }),
+                /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "sm-review-question-list", children: review.questions.filter((q, i) => moreQuestions || i < 5 || q.required).map((q) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: q.prompt }, q.id)) }),
+                !moreQuestions && review.questions.length > 5 && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setMoreQuestions(true), children: "See all questions" }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-primary", onClick: () => setPanel("questions"), children: "Answer online" }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Sign in to save your answers as you go. You can return whenever it suits you." }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: async () => {
+                  try {
+                    await navigator.clipboard.writeText(questionText);
+                    setNotice("Questions copied. Paste them into an email and answer as many as you like.");
+                  } catch {
+                    setCopiedQuestions(true);
+                  }
+                }, children: "Copy all questions" }),
+                copiedQuestions && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                  "Copy these questions",
+                  /* @__PURE__ */ jsxRuntime.jsx("textarea", { readOnly: true, rows: 10, value: questionText, onFocus: (e) => e.currentTarget.select() })
+                ] }),
+                questionsEmail && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("a", { href: questionsEmail, children: "Answer by email" }),
+                  " \u2014 opens your email app with the questions ready."
+                ] })
               ] }),
-              /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { disabled: busy, className: "sm-review-response-fields", children: [
-                panel === "edits" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your suggestions will be reviewed by an editor. They do not replace the newsroom\u2019s draft." }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    "Headline",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        value: document.title,
-                        onChange: (e) => setDocument({ ...document, title: e.target.value })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    "Short introduction",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        value: document.subtitle,
-                        onChange: (e) => setDocument({ ...document, subtitle: e.target.value })
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    "Suggested article text",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "textarea",
-                      {
-                        rows: 16,
-                        value: document.content_markdown,
-                        onChange: (e) => setDocument({
-                          ...document,
-                          content_markdown: e.target.value
-                        })
-                      }
-                    )
+              panel === "identity" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Introduce yourself", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-form-heading", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("h2", { children: identityStep === "code" ? "Check your email" : requestedPanel === "media" ? photoToReplace ? "Change photo" : "Contribute a photograph" : requestedPanel === "changes" ? "Suggest a change" : requestedPanel === "edits" ? "Propose changes" : requestedPanel === "comment" ? "Leave a comment" : "Continue to help with the story" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, type: "button", onClick: () => setPanel("article"), "aria-label": "Close", children: "Close" })
+                ] }),
+                errorMessage,
+                photoToReplace && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-target-preview", style: { padding: "10px 14px", background: "#f8fafc", borderRadius: "8px", border: "1px solid #e2e8f0", margin: "10px 0 16px" }, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "13px", color: "#334155" }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Replacing:" }),
+                  " ",
+                  photoToReplace.artwork_title ? `\u201C${photoToReplace.artwork_title}\u201D` : photoToReplace.caption || "Header photograph"
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your name accompanies your feedback. Your email stays private." }),
+                identityStep === "name" && renderSignIn && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  readerLoading ? /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Checking your sign-in\u2026" }) : reader?.email_verified ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "sm-review-primary", disabled: busy, onClick: () => void connectReader(), children: [
+                      "Continue as ",
+                      reader.full_name || reader.email
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your reader account is ready. No email code is needed." })
+                  ] }) : renderSignIn(signInReturn),
+                  !useEmailCode && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-quiet", onClick: () => setUseEmailCode(true), children: "Use an email code instead" })
+                ] }),
+                identityStep === "name" && useEmailCode && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: async (e) => {
+                  e.preventDefault();
+                  setBusy(true);
+                  setError("");
+                  try {
+                    await request("/join", { name: contributorName, email: contributorEmail });
+                    await request("/verify", {});
+                    setIdentityStep("code");
+                    setCode("");
+                  } catch (e2) {
+                    setError(e2.message);
+                  } finally {
+                    setBusy(false);
+                  }
+                }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contributor-name", children: "Your name" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("input", { id: "contributor-name", autoComplete: "name", value: contributorName, maxLength: 150, required: true, onChange: (e) => setContributorName(e.target.value) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contributor-email", children: "Your email" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("input", { id: "contributor-email", type: "email", autoComplete: "email", value: contributorEmail, maxLength: 320, required: true, onChange: (e) => setContributorEmail(e.target.value) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "We'll email you a code to confirm it's you." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "No password or account is needed for this option." }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, children: busy ? "Sending your code\u2026" : "Email me a code" })
+                ] }),
+                identityStep === "code" && /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: async (e) => {
+                  e.preventDefault();
+                  setBusy(true);
+                  setError("");
+                  try {
+                    await request("/verify", { code });
+                    await load();
+                    setCode("");
+                    setPanelState(requestedPanel);
+                  } catch (e2) {
+                    setError(e2.message);
+                  } finally {
+                    setBusy(false);
+                  }
+                }, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                    "Enter the eight-digit code sent to ",
+                    /* @__PURE__ */ jsxRuntime.jsx("strong", { children: contributorEmail }),
+                    ". It expires in ten minutes."
                   ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      disabled: busy,
-                      onClick: () => void send(
-                        {
-                          action: "PROPOSE_EDITS",
-                          title: document.title,
-                          subtitle: document.subtitle,
-                          content_markdown: document.content_markdown,
-                          message
-                        },
-                        "Your proposed changes have been sent to the newsroom."
-                      ),
-                      children: "Send proposed changes"
+                  /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "contributor-code", children: "Email verification code" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("input", { id: "contributor-code", inputMode: "numeric", autoComplete: "one-time-code", pattern: "[0-9]{8}", maxLength: 8, value: code, required: true, onChange: (e) => setCode(e.target.value.replace(/\s/g, "")) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, children: busy ? "Verifying\u2026" : "Verify and continue" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: busy, onClick: async () => {
+                    setBusy(true);
+                    try {
+                      await request("/verify", {});
+                      setNotice("A new code was sent. Check your inbox and spam folder.");
+                    } catch (e) {
+                      setError(e.message);
+                    } finally {
+                      setBusy(false);
                     }
-                  )
+                  }, children: "Send a new code" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled: busy, onClick: () => setIdentityStep("name"), children: "Use a different email" })
                 ] }),
-                panel === "questions" && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "form",
-                  {
-                    onSubmit: (e) => {
-                      e.preventDefault();
-                      void send(
-                        { action: "ANSWER_QUESTIONS", answers },
-                        "Thank you for sharing. We'll take care of turning your answers into an updated draft."
-                      );
-                    },
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { children: review.questions.some((q) => q.required) ? "Only questions marked required must be answered. Share what you would like considered for publication." : "Completely optional. Even one answer can help us make the announcement more personal." }),
-                      review.questions.filter((q, i) => moreQuestions || i < 5 || q.required).map((q) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                        q.prompt,
-                        q.required ? " (required)" : " (optional)",
+                emailAlternative,
+                /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Just read the story" })
+              ] }),
+              panel === "feedback" && /* @__PURE__ */ jsxRuntime.jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Family feedback", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Looks good to you?" }),
+                errorMessage,
+                /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                  "We'll send your feedback as ",
+                  review.reviewer,
+                  ". The newsroom will request approval from the designated family reviewer separately. This will not publish the story."
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-primary", disabled: busy, onClick: () => void send({ action: "COMMENT", message: "This draft looks good to me.", target: { kind: "STORY" } }, "Thank you. Your feedback has been sent to the newsroom. The story is still private.", false), children: "Send my feedback" }),
+                /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Back to the story" })
+              ] }),
+              !["article", "identity", "share", "feedback", "question-list"].includes(panel) && /* @__PURE__ */ jsxRuntime.jsxs(
+                "section",
+                {
+                  ref: responseRef,
+                  tabIndex: -1,
+                  className: "sm-review-form",
+                  "aria-label": "Your response",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-form-heading", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h2", { children: panel === "approve" ? "Approve this exact draft" : panel === "edits" ? "Propose changes" : panel === "media" ? photoToReplace ? "Change photo" : "Contribute a photograph" : panel === "questions" ? "Tell us a little more" : panel === "history" ? "Selected revision history" : panel === "decline" ? "Prefer not to publish" : panel === "changes" ? "Suggest a change" : "Message the newsroom" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Close" })
+                    ] }),
+                    errorMessage,
+                    panel !== "history" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-save-state", role: "status", "aria-live": "polite", children: [
+                      currentDraft?.status === "conflict" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A response was saved in another tab or device. Your writing here is still available. Choose which version to keep." }),
+                        /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => void drafts.resolve(panel, true).catch((e) => setError(e.message)), children: "Keep what I wrote here" }),
+                        /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => void drafts.resolve(panel, false).catch((e) => setError(e.message)), children: "Use the saved response" })
+                      ] }) : currentDraft?.status === "offline" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: currentDraft.local ? "Saved on this device. Waiting for a connection to save online." : "Not saved yet. Keep this page open and try again." }),
+                        /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => void drafts.flush(panel).catch((e) => setError(e.message)), children: "Try saving again" })
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: currentDraft?.status === "saving" ? "Saving your writing\u2026" : hasDraft(currentDraft?.data) ? "Saved \u2014 not sent yet. You can safely come back later." : "Your writing saves automatically. Use the Send button below when you're ready to share it with the newsroom." }),
+                      hasDraft(currentDraft?.data) && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-quiet", disabled: busy, onClick: () => {
+                        if (window.confirm("Discard this unsent response? Responses already sent will be kept.")) void drafts.discard(panel).catch((e) => setError(e.message));
+                      }, children: "Discard this unsent response" })
+                    ] }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { disabled: busy, className: "sm-review-response-fields", children: [
+                      panel === "edits" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your suggestions will be reviewed by an editor. They do not replace the newsroom\u2019s draft." }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          "Headline",
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              value: document.title,
+                              onChange: (e) => setDocument({ ...document, title: e.target.value })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          "Short introduction",
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "input",
+                            {
+                              value: document.subtitle,
+                              onChange: (e) => setDocument({ ...document, subtitle: e.target.value })
+                            }
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          "Suggested article text",
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "textarea",
+                            {
+                              rows: 16,
+                              value: document.content_markdown,
+                              onChange: (e) => setDocument({
+                                ...document,
+                                content_markdown: e.target.value
+                              })
+                            }
+                          )
+                        ] }),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          "textarea",
+                          "button",
                           {
-                            required: q.required,
-                            rows: 3,
-                            value: answers[q.id] || "",
-                            onChange: (e) => setAnswers({ ...answers, [q.id]: e.target.value })
+                            disabled: busy,
+                            onClick: () => void send(
+                              {
+                                action: "PROPOSE_EDITS",
+                                title: document.title,
+                                subtitle: document.subtitle,
+                                content_markdown: document.content_markdown,
+                                message
+                              },
+                              "Your proposed changes have been sent to the newsroom."
+                            ),
+                            children: "Send proposed changes"
                           }
                         )
-                      ] }, q.id)),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
-                        {
-                          className: "sm-review-primary",
-                          disabled: busy || !Object.values(answers).some((a) => a.trim()),
-                          children: "Send These Answers"
-                        }
-                      ),
-                      !moreQuestions && review.questions.length > 5 && /* @__PURE__ */ jsxRuntime.jsx(
-                        "button",
+                      ] }),
+                      panel === "questions" && /* @__PURE__ */ jsxRuntime.jsxs(
+                        "form",
                         {
-                          type: "button",
-                          onClick: () => setMoreQuestions(true),
-                          children: "Answer More Questions"
+                          onSubmit: (e) => {
+                            e.preventDefault();
+                            void send(
+                              { action: "ANSWER_QUESTIONS", answers },
+                              "Thank you for sharing. We'll take care of turning your answers into an updated draft."
+                            );
+                          },
+                          children: [
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { children: review.questions.some((q) => q.required) ? "Only questions marked required must be answered. Share what you would like considered for publication." : "Completely optional. Even one answer can help us make the announcement more personal." }),
+                            review.questions.filter((q, i) => moreQuestions || i < 5 || q.required).map((q) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                              q.prompt,
+                              q.required ? " (required)" : " (optional)",
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "textarea",
+                                {
+                                  required: q.required,
+                                  rows: 3,
+                                  value: answers[q.id] || "",
+                                  onChange: (e) => setAnswers({ ...answers, [q.id]: e.target.value })
+                                }
+                              )
+                            ] }, q.id)),
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                className: "sm-review-primary",
+                                disabled: busy || !Object.values(answers).some((a) => a.trim()),
+                                children: "Send These Answers"
+                              }
+                            ),
+                            !moreQuestions && review.questions.length > 5 && /* @__PURE__ */ jsxRuntime.jsx(
+                              "button",
+                              {
+                                type: "button",
+                                onClick: () => setMoreQuestions(true),
+                                children: "Answer More Questions"
+                              }
+                            ),
+                            questionsEmail && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("a", { href: questionsEmail, children: "Email these answers instead" }),
+                              ". Send them from your email app; your online draft stays saved."
+                            ] })
+                          ]
                         }
                       ),
-                      questionsEmail && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("a", { href: questionsEmail, children: "Email these answers instead" }),
-                        ". Send them from your email app; your online draft stays saved."
-                      ] })
-                    ]
-                  }
-                ),
-                panel === "metadata" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Caption and credit changes are proposals for the newsroom; historical captions remain intact." }),
-                  ["caption", "credit", "alt"].map((key) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    key,
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "input",
-                      {
-                        value: mediaInfo[key],
-                        onChange: (e) => setMediaInfo({ ...mediaInfo, [key]: e.target.value })
-                      }
-                    )
-                  ] }, key)),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      disabled: busy,
-                      onClick: () => void send(
-                        {
-                          action: "EDIT_MEDIA_METADATA",
-                          contribution_id: drafts.entries.metadata?.data.editingMedia || editingMedia,
-                          caption: mediaInfo.caption,
-                          credit: mediaInfo.credit,
-                          alt: mediaInfo.alt
-                        },
-                        "Your proposed media descriptions have been sent to the newsroom."
-                      ),
-                      children: "Propose caption / credit changes"
-                    }
-                  )
-                ] }),
-                panel === "media" && /* @__PURE__ */ jsxRuntime.jsxs(
-                  "form",
-                  {
-                    onSubmit: (e) => {
-                      e.preventDefault();
-                      void upload();
-                    },
-                    children: [
-                      photoToReplace && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Choose the photograph you'd like us to use instead. We'll review it and prepare an updated preview; the current photo stays in place until then." }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "JPEG, PNG or WebP photos up to 12 MB; MP4 or WebM videos up to 25 MB. Media remain private until selected and approved by the newsroom." }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-photo-picker", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "1. Choose a photo" }) }),
-                        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => galleryRef.current?.click(), children: "Choose from my photos" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => cameraRef.current?.click(), children: "Take a photo" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("input", { ref: cameraRef, "aria-label": "Take a photo", type: "file", accept: "image/jpeg,image/png,image/webp", capture: "environment", hidden: true, onChange: (e) => choosePhoto(e.target.files?.[0] || null) }),
-                        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "sm-review-native-file", children: [
-                          "Photograph or video",
+                      panel === "metadata" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Caption and credit changes are proposals for the newsroom; historical captions remain intact." }),
+                        ["caption", "credit", "alt"].map((key) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          key,
                           /* @__PURE__ */ jsxRuntime.jsx(
                             "input",
                             {
-                              ref: galleryRef,
-                              type: "file",
-                              accept: "image/jpeg,image/png,image/webp,video/mp4,video/webm",
-                              onChange: (e) => choosePhoto(e.target.files?.[0] || null)
+                              value: mediaInfo[key],
+                              onChange: (e) => setMediaInfo({ ...mediaInfo, [key]: e.target.value })
                             }
                           )
-                        ] })
-                      ] }),
-                      file && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-selected-photo", children: [
-                        pendingPhoto.preview && /* @__PURE__ */ jsxRuntime.jsx("img", { src: pendingPhoto.preview, alt: "Your selected photograph" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: file.name }) }),
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: pendingPhoto.saved ? "Photo kept on this device \u2014 not uploaded yet." : "Photo selected \u2014 not uploaded yet. Keep this page open." }),
-                        /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => {
-                          void pendingPhoto.select(null);
-                          setRights(false);
-                        }, children: "Remove selected photo" })
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sm-review-help", children: "Choose a photograph and confirm permission below. All descriptions are optional; we can help with the caption." }),
-                      Object.entries({
-                        caption: "Caption (optional)",
-                        credit: "Photographer / credit (optional)"
-                      }).map(([key, label]) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                        label,
+                        ] }, key)),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          "input",
+                          "button",
                           {
-                            value: mediaInfo[key],
-                            onChange: (e) => setMediaInfo({ ...mediaInfo, [key]: e.target.value })
+                            disabled: busy,
+                            onClick: () => void send(
+                              {
+                                action: "EDIT_MEDIA_METADATA",
+                                contribution_id: drafts.entries.metadata?.data.editingMedia || editingMedia,
+                                caption: mediaInfo.caption,
+                                credit: mediaInfo.credit,
+                                alt: mediaInfo.alt
+                              },
+                              "Your proposed media descriptions have been sent to the newsroom."
+                            ),
+                            children: "Propose caption / credit changes"
                           }
                         )
-                      ] }, key)),
-                      /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "sm-review-media-details", children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("summary", { children: "Add more photograph details (optional)" }),
-                        Object.entries({
-                          who_is_pictured: "Who is pictured?",
-                          creator: "Photographer / creator",
-                          when_taken: "When was it taken?",
-                          where_taken: "Where was it taken?",
-                          alt: "Describe the photograph for readers who cannot see it"
-                        }).map(([key, label]) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                          label,
+                      ] }),
+                      panel === "media" && /* @__PURE__ */ jsxRuntime.jsxs(
+                        "form",
+                        {
+                          onSubmit: (e) => {
+                            e.preventDefault();
+                            void upload();
+                          },
+                          children: [
+                            photoToReplace && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-target-preview", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-target-preview-title", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Replacing:" }),
+                              " ",
+                              photoToReplace.artwork_title ? `\u201C${photoToReplace.artwork_title}\u201D` : photoToReplace.caption || "Header photograph"
+                            ] }) }),
+                            photoToReplace && /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Choose the photograph you'd like us to use instead. We'll review it and prepare an updated preview; the current photo stays in place until then." }),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { children: "JPEG, PNG or WebP photos up to 12 MB; MP4 or WebM videos up to 25 MB. Media remain private until selected and approved by the newsroom." }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-photo-picker", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "1. Choose a photo" }) }),
+                              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => galleryRef.current?.click(), children: "Choose from my photos" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => cameraRef.current?.click(), children: "Take a photo" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("input", { ref: cameraRef, "aria-label": "Take a photo", type: "file", accept: "image/jpeg,image/png,image/webp", capture: "environment", hidden: true, onChange: (e) => choosePhoto(e.target.files?.[0] || null) }),
+                              /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "sm-review-native-file", children: [
+                                "Photograph or video",
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  "input",
+                                  {
+                                    ref: galleryRef,
+                                    type: "file",
+                                    accept: "image/jpeg,image/png,image/webp,video/mp4,video/webm",
+                                    onChange: (e) => choosePhoto(e.target.files?.[0] || null)
+                                  }
+                                )
+                              ] })
+                            ] }),
+                            file && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-selected-photo", children: [
+                              pendingPhoto.preview && /* @__PURE__ */ jsxRuntime.jsx("img", { src: pendingPhoto.preview, alt: "Your selected photograph" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: file.name }) }),
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: pendingPhoto.saved ? "Photo kept on this device \u2014 not uploaded yet." : "Photo selected \u2014 not uploaded yet. Keep this page open." }),
+                              /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => {
+                                void pendingPhoto.select(null);
+                                setRights(false);
+                              }, children: "Remove selected photo" })
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sm-review-help", children: "Choose a photograph and confirm permission below. All descriptions are optional; we can help with the caption." }),
+                            Object.entries({
+                              caption: "Caption (optional)",
+                              credit: "Photographer / credit (optional)"
+                            }).map(([key, label]) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                              label,
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "input",
+                                {
+                                  value: mediaInfo[key],
+                                  onChange: (e) => setMediaInfo({ ...mediaInfo, [key]: e.target.value })
+                                }
+                              )
+                            ] }, key)),
+                            /* @__PURE__ */ jsxRuntime.jsxs("details", { className: "sm-review-media-details", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("summary", { children: "Add more photograph details (optional)" }),
+                              Object.entries({
+                                who_is_pictured: "Who is pictured?",
+                                creator: "Photographer / creator",
+                                when_taken: "When was it taken?",
+                                where_taken: "Where was it taken?",
+                                alt: "Describe the photograph for readers who cannot see it"
+                              }).map(([key, label]) => /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                                label,
+                                /* @__PURE__ */ jsxRuntime.jsx(
+                                  "input",
+                                  {
+                                    value: mediaInfo[key],
+                                    onChange: (e) => setMediaInfo({
+                                      ...mediaInfo,
+                                      [key]: e.target.value
+                                    })
+                                  }
+                                )
+                              ] }, key))
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "2. Confirm permission" }) }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "sm-review-check", children: [
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "input",
+                                {
+                                  type: "checkbox",
+                                  required: true,
+                                  checked: rights,
+                                  onChange: (e) => setRights(e.target.checked)
+                                }
+                              ),
+                              "I confirm that I have the right or permission to provide this media to ",
+                              review.publication.name,
+                              " for editorial publication."
+                            ] }),
+                            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `sm-review-send-bar${rights && file ? " is-ready" : ""}`, children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("p", { children: busy ? "Uploading your photo. Please keep this page open\u2026" : !file ? "Choose a photo above to continue." : !rights ? "Tick the permission box above, then upload your photo." : "Ready. Tap Upload privately to send this photo to the newsroom." }),
+                              busy && /* @__PURE__ */ jsxRuntime.jsx("progress", { "aria-label": "Uploading photo" }),
+                              /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-primary", disabled: busy || !rights || !file, children: busy ? "Uploading\u2026" : "Upload privately" })
+                            ] })
+                          ]
+                        }
+                      ),
+                      ["approve", "changes", "comment", "decline"].includes(panel) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        panel === "approve" && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+                          "You are approving version ",
+                          review.revision.number,
+                          ". Changes to the article require a new approval.",
+                          review.review_policy === "SUBJECT_APPROVAL_AUTO_PUBLISH" ? " The editor has configured this version to publish or schedule after the required approvals are received." : " The newsroom will complete its editorial workflow before publication."
+                        ] }),
+                        panel === "decline" && /* @__PURE__ */ jsxRuntime.jsx("p", { children: ["FACT_CHECK", "CONTRIBUTOR_REVIEW"].includes(
+                          review.review_policy
+                        ) ? "You can decline this review. The newsroom may still publish its reporting." : "Declining participation prevents publication of this voluntary announcement." }),
+                        panel === "comment" && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          "Comment on",
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "select",
+                            {
+                              value: currentDraft?.data.commentTarget || commentTarget,
+                              onChange: (e) => {
+                                setCommentTarget(e.target.value);
+                                if (message) drafts.set("comment", { ...currentDraft?.data, commentTarget: e.target.value });
+                              },
+                              children: [
+                                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "STORY", children: "Entire story" }),
+                                review.revision.document.content_markdown.split(/\n\s*\n/).slice(0, 200).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: `PARAGRAPH:${i + 1}`, children: [
+                                  "Paragraph ",
+                                  i + 1
+                                ] }, i)),
+                                review.revision.document.media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+                                  "option",
+                                  {
+                                    value: `MEDIA:${m.contribution_id}`,
+                                    children: [
+                                      "Photo / caption ",
+                                      i + 1
+                                    ]
+                                  },
+                                  m.contribution_id
+                                )),
+                                review.questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: `QUESTION:${q.id}`, children: q.prompt }, q.id))
+                              ]
+                            }
+                          )
+                        ] }),
+                        panel === "changes" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                          /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                            "What would you like to change?",
+                            /* @__PURE__ */ jsxRuntime.jsx(
+                              "select",
+                              {
+                                value: correctionKind,
+                                onChange: (e) => setCorrectionKind(e.target.value),
+                                children: [
+                                  "Correct a detail",
+                                  "Correct a name",
+                                  "Correct a professional / education detail",
+                                  "Remove something",
+                                  "Rewrite something",
+                                  "Add something",
+                                  "General comment"
+                                ].map((kind) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: kind }, kind))
+                              }
+                            )
+                          ] }),
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A sentence or two is enough. We'll take care of the wording." }),
+                          can("PROPOSE_EDITS") && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("edits"), children: "Or edit the wording directly" })
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          panel === "changes" ? "What should change?" : "Message (optional)",
                           /* @__PURE__ */ jsxRuntime.jsx(
-                            "input",
+                            "textarea",
                             {
-                              value: mediaInfo[key],
-                              onChange: (e) => setMediaInfo({
-                                ...mediaInfo,
-                                [key]: e.target.value
-                              })
+                              rows: 5,
+                              value: message,
+                              onChange: (e) => setMessage(e.target.value)
                             }
                           )
-                        ] }, key))
-                      ] }),
-                      /* @__PURE__ */ jsxRuntime.jsx("p", { children: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "2. Confirm permission" }) }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "sm-review-check", children: [
+                        ] }),
                         /* @__PURE__ */ jsxRuntime.jsx(
-                          "input",
+                          "button",
                           {
-                            type: "checkbox",
-                            required: true,
-                            checked: rights,
-                            onChange: (e) => setRights(e.target.checked)
+                            disabled: busy || panel === "changes" && !message.trim() || panel === "comment" && !message.trim(),
+                            onClick: () => void send(
+                              {
+                                action: panel === "approve" ? "APPROVE" : panel === "changes" ? "REQUEST_CHANGES" : panel === "decline" ? "DECLINE" : "COMMENT",
+                                message: panel === "changes" ? `${correctionKind}: ${message}` : message || null,
+                                ...panel === "comment" ? {
+                                  target: {
+                                    kind: (currentDraft?.data.commentTarget || commentTarget).split(":")[0],
+                                    reference: (currentDraft?.data.commentTarget || commentTarget).split(":")[1] || null
+                                  }
+                                } : {}
+                              },
+                              panel === "approve" ? celebration && finalEditor ? approvalThanks : "Your approval has been recorded for this version." : panel === "decline" ? "Thank you for letting us know. The newsroom has received your decision." : "Your message has been sent to the newsroom."
+                            ),
+                            children: panel === "approve" ? `Approve version ${review.revision.number}` : panel === "changes" ? "Send change request" : panel === "decline" ? "Prefer not to publish" : "Send comment"
                           }
-                        ),
-                        "I confirm that I have the right or permission to provide this media to ",
-                        review.publication.name,
-                        " for editorial publication."
+                        )
                       ] }),
-                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `sm-review-send-bar${rights && file ? " is-ready" : ""}`, children: [
-                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: busy ? "Uploading your photo. Please keep this page open\u2026" : !file ? "Choose a photo above to continue." : !rights ? "Tick the permission box above, then upload your photo." : "Ready. Tap Upload privately to send this photo to the newsroom." }),
-                        busy && /* @__PURE__ */ jsxRuntime.jsx("progress", { "aria-label": "Uploading photo" }),
-                        /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-primary", disabled: busy || !rights || !file, children: busy ? "Uploading\u2026" : "Upload privately" })
-                      ] })
-                    ]
-                  }
-                ),
-                ["approve", "changes", "comment", "decline"].includes(panel) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  panel === "approve" && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
-                    "You are approving version ",
-                    review.revision.number,
-                    ". Changes to the article require a new approval.",
-                    review.review_policy === "SUBJECT_APPROVAL_AUTO_PUBLISH" ? " The editor has configured this version to publish or schedule after the required approvals are received." : " The newsroom will complete its editorial workflow before publication."
-                  ] }),
-                  panel === "decline" && /* @__PURE__ */ jsxRuntime.jsx("p", { children: ["FACT_CHECK", "CONTRIBUTOR_REVIEW"].includes(
-                    review.review_policy
-                  ) ? "You can decline this review. The newsroom may still publish its reporting." : "Declining participation prevents publication of this voluntary announcement." }),
-                  panel === "comment" && /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    "Comment on",
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "select",
-                      {
-                        value: currentDraft?.data.commentTarget || commentTarget,
-                        onChange: (e) => {
-                          setCommentTarget(e.target.value);
-                          if (message) drafts.set("comment", { ...currentDraft?.data, commentTarget: e.target.value });
-                        },
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "STORY", children: "Entire story" }),
-                          review.revision.document.content_markdown.split(/\n\s*\n/).slice(0, 200).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: `PARAGRAPH:${i + 1}`, children: [
-                            "Paragraph ",
-                            i + 1
-                          ] }, i)),
-                          review.revision.document.media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-                            "option",
+                      panel === "history" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Only revisions selected by the editor are visible here." }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          "Compare from",
+                          /* @__PURE__ */ jsxRuntime.jsxs(
+                            "select",
                             {
-                              value: `MEDIA:${m.contribution_id}`,
+                              value: compare,
+                              onChange: (e) => setCompare(e.target.value),
                               children: [
-                                "Photo / caption ",
-                                i + 1
+                                /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Choose a shared revision" }),
+                                revisions.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: r.id, children: [
+                                  "Version ",
+                                  r.number
+                                ] }, r.id))
                               ]
-                            },
-                            m.contribution_id
-                          )),
-                          review.questions.map((q) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: `QUESTION:${q.id}`, children: q.prompt }, q.id))
-                        ]
-                      }
-                    )
-                  ] }),
-                  panel === "changes" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                    /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                      "What would you like to change?",
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "select",
-                        {
-                          value: correctionKind,
-                          onChange: (e) => setCorrectionKind(e.target.value),
-                          children: [
-                            "Correct a detail",
-                            "Correct a name",
-                            "Correct a professional / education detail",
-                            "Remove something",
-                            "Rewrite something",
-                            "Add something",
-                            "General comment"
-                          ].map((kind) => /* @__PURE__ */ jsxRuntime.jsx("option", { children: kind }, kind))
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { children: "A sentence or two is enough. We'll take care of the wording." }),
-                    can("PROPOSE_EDITS") && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("edits"), children: "Or edit the wording directly" })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    panel === "changes" ? "What should change?" : "Message (optional)",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "textarea",
-                      {
-                        rows: 5,
-                        value: message,
-                        onChange: (e) => setMessage(e.target.value)
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      disabled: busy || panel === "changes" && !message.trim() || panel === "comment" && !message.trim(),
-                      onClick: () => void send(
-                        {
-                          action: panel === "approve" ? "APPROVE" : panel === "changes" ? "REQUEST_CHANGES" : panel === "decline" ? "DECLINE" : "COMMENT",
-                          message: panel === "changes" ? `${correctionKind}: ${message}` : message || null,
-                          ...panel === "comment" ? {
-                            target: {
-                              kind: (currentDraft?.data.commentTarget || commentTarget).split(":")[0],
-                              reference: (currentDraft?.data.commentTarget || commentTarget).split(":")[1] || null
                             }
-                          } : {}
-                        },
-                        panel === "approve" ? celebration && finalEditor ? approvalThanks : "Your approval has been recorded for this version." : panel === "decline" ? "Thank you for letting us know. The newsroom has received your decision." : "Your message has been sent to the newsroom."
-                      ),
-                      children: panel === "approve" ? `Approve version ${review.revision.number}` : panel === "changes" ? "Send change request" : panel === "decline" ? "Prefer not to publish" : "Send comment"
-                    }
-                  )
-                ] }),
-                panel === "history" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Only revisions selected by the editor are visible here." }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    "Compare from",
-                    /* @__PURE__ */ jsxRuntime.jsxs(
-                      "select",
-                      {
-                        value: compare,
-                        onChange: (e) => setCompare(e.target.value),
-                        children: [
-                          /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "Choose a shared revision" }),
-                          revisions.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: r.id, children: [
-                            "Version ",
-                            r.number
-                          ] }, r.id))
-                        ]
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-                    "Compare to",
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "select",
-                      {
-                        value: compareTo || review.revision.id,
-                        onChange: (e) => setCompareTo(e.target.value),
-                        children: revisions.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: r.id, children: [
-                          "Version ",
-                          r.number
-                        ] }, r.id))
-                      }
-                    )
-                  ] }),
-                  selected && selectedAfter && /* @__PURE__ */ jsxRuntime.jsx(ReviewDiff, { before: selected, after: selectedAfter }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("summary", { children: "Read selected revision" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("h3", { children: selected?.document.title }),
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { children: selected?.document.subtitle }),
-                    /* @__PURE__ */ jsxRuntime.jsx(EditorialNotices, { editorial: selected?.editorial }),
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      "div",
-                      {
-                        className: "sm-review-prose",
-                        dangerouslySetInnerHTML: {
-                          __html: selected?.content_html || ""
-                        }
-                      }
-                    ),
-                    selected?.document.media.map((m) => /* @__PURE__ */ jsxRuntime.jsx(PrivatePhoto, { media: m, base }, m.file_id))
-                  ] })
-                ] })
-              ] })
-            ]
+                          )
+                        ] }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+                          "Compare to",
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "select",
+                            {
+                              value: compareTo || review.revision.id,
+                              onChange: (e) => setCompareTo(e.target.value),
+                              children: revisions.map((r) => /* @__PURE__ */ jsxRuntime.jsxs("option", { value: r.id, children: [
+                                "Version ",
+                                r.number
+                              ] }, r.id))
+                            }
+                          )
+                        ] }),
+                        selected && selectedAfter && /* @__PURE__ */ jsxRuntime.jsx(ReviewDiff, { before: selected, after: selectedAfter }),
+                        /* @__PURE__ */ jsxRuntime.jsxs("details", { children: [
+                          /* @__PURE__ */ jsxRuntime.jsx("summary", { children: "Read selected revision" }),
+                          /* @__PURE__ */ jsxRuntime.jsx("h3", { children: selected?.document.title }),
+                          /* @__PURE__ */ jsxRuntime.jsx("p", { children: selected?.document.subtitle }),
+                          /* @__PURE__ */ jsxRuntime.jsx(EditorialNotices, { editorial: selected?.editorial }),
+                          /* @__PURE__ */ jsxRuntime.jsx(
+                            "div",
+                            {
+                              className: "sm-review-prose",
+                              dangerouslySetInnerHTML: {
+                                __html: selected?.content_html || ""
+                              }
+                            }
+                          ),
+                          selected?.document.media.map((m) => /* @__PURE__ */ jsxRuntime.jsx(PrivatePhoto, { media: m, base }, m.file_id))
+                        ] })
+                      ] })
+                    ] })
+                  ]
+                }
+              )
+            ] })
           }
         ),
         review.contributions.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "sm-review-contributions", children: [
@@ -1541,7 +1843,14 @@ function StoryReview({
     publicationFooter
   ] });
 }
-function PrivatePhoto({ base, media, onChange, disabled }) {
+function PrivatePhoto({
+  base,
+  media,
+  onChange,
+  onSuggestCorrection,
+  disabled,
+  isInline
+}) {
   const [url, setUrl] = react.useState("");
   const [video, setVideo] = react.useState(false);
   react.useEffect(() => {
@@ -1564,25 +1873,69 @@ function PrivatePhoto({ base, media, onChange, disabled }) {
       if (object) URL.revokeObjectURL(object);
     };
   }, [base, media.file_id]);
-  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { children: [
-    url ? video ? /* @__PURE__ */ jsxRuntime.jsx(
-      "video",
-      {
-        src: url,
-        controls: true,
-        playsInline: true,
-        preload: "metadata",
-        "aria-label": media.alt
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: media.alt, referrerPolicy: "no-referrer" }) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Media unavailable." }),
-    /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: "sm-review-photo-details", children: [
-      (media.caption || media.credit) && /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-        media.caption,
-        media.credit && ` Photo: ${media.credit}`
-      ] }),
-      onChange && /* @__PURE__ */ jsxRuntime.jsx("button", { className: "sm-review-change-photo", type: "button", disabled, onClick: onChange, children: "Change photo" })
-    ] })
-  ] });
+  const captionInfo = formatArtworkCaption(media);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "figure",
+    {
+      className: `sm-review-photo-figure ${isInline ? "sm-review-inline-figure" : "sm-review-hero-figure"}`,
+      "data-media-id": media.file_id,
+      children: [
+        url ? video ? /* @__PURE__ */ jsxRuntime.jsx(
+          "video",
+          {
+            src: url,
+            controls: true,
+            playsInline: true,
+            preload: "metadata",
+            "aria-label": media.alt || captionInfo.title || "Story video"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: url,
+            alt: media.alt || captionInfo.title || "Story photograph",
+            referrerPolicy: "no-referrer"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Media unavailable." }),
+        /* @__PURE__ */ jsxRuntime.jsxs("figcaption", { className: "sm-review-photo-details", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-caption-text", children: [
+            captionInfo.title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-artwork-title", children: /* @__PURE__ */ jsxRuntime.jsxs("strong", { children: [
+              "\u201C",
+              captionInfo.title,
+              "\u201D"
+            ] }) }),
+            captionInfo.artist && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-artist-name", children: captionInfo.artist }),
+            captionInfo.mediumAndDate && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-artwork-medium", children: captionInfo.mediumAndDate }),
+            captionInfo.captionText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-photo-caption", children: captionInfo.captionText }),
+            captionInfo.credit && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-photo-credit", children: captionInfo.credit }),
+            captionInfo.source && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm-review-photo-source", children: captionInfo.source })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-photo-controls", children: [
+            onChange && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "sm-review-change-photo",
+                type: "button",
+                disabled,
+                onClick: onChange,
+                children: "Change photo"
+              }
+            ),
+            onSuggestCorrection && /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                className: "sm-review-suggest-correction",
+                type: "button",
+                disabled,
+                onClick: onSuggestCorrection,
+                children: "Suggest correction"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
 }
 function ReviewDiff({
   before,