@scalemule/news-publication 0.0.28 → 0.0.29

package/dist/story-review.cjs

@@ -77,6 +77,13 @@ function StoryReview({
   const thanksRef = react.useRef(null);
   const [moreQuestions, setMoreQuestions] = react.useState(false);
   const [correctionKind, setCorrectionKind] = react.useState("Correct a detail");
+  const [replacementPhoto, setReplacementPhoto] = react.useState(null);
+  function openMedia(photo = null) {
+    setReplacementPhoto(photo);
+    setFile(null);
+    setRights(false);
+    setPanel("media");
+  }
   react.useEffect(() => {
     if (panel !== "article") {
       responseRef.current?.scrollIntoView({
@@ -197,13 +204,34 @@ function StoryReview({
         "metadata",
         JSON.stringify({ ...mediaInfo, rights_confirmed: true })
       );
-      await request("/media", form);
+      const received = await request("/media", form);
+      let uploadNotice = "Media received privately. The newsroom will review it before publication.";
+      if (replacementPhoto) {
+        uploadNotice = "Your replacement photo has been sent to the newsroom. The current photo will stay in this preview until we prepare an updated draft.";
+        if (can("COMMENT")) {
+          try {
+            await request("", {
+              revision_id: review.revision.id,
+              action: "COMMENT",
+              message: "Please use my newly uploaded photograph in place of this photo.",
+              target: {
+                kind: "PHOTO",
+                reference: replacementPhoto.contribution_id,
+                replacement_contribution_id: received.id
+              }
+            });
+          } catch {
+            uploadNotice = "Your photo was uploaded privately, but we couldn't attach the replacement note. Please use Suggest a Change to tell the newsroom which photograph it should replace.";
+          }
+        } else {
+          uploadNotice = "Your photo was uploaded privately for newsroom review. The newsroom will select the photo for the next preview.";
+        }
+      }
       await load();
       setFile(null);
       setRights(false);
-      setNotice(
-        "Media received privately. The newsroom will review it before publication."
-      );
+      setNotice(uploadNotice);
+      setReplacementPhoto(null);
       setPanel("article");
     } catch (e) {
       setError(e instanceof Error ? e.message : "Upload failed.");
@@ -334,7 +362,16 @@ function StoryReview({
           /* @__PURE__ */ jsxRuntime.jsx("h1", { children: review.revision.document.title }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "sm-review-dek", children: review.revision.document.subtitle }),
           /* @__PURE__ */ jsxRuntime.jsx(EditorialNotices, { editorial: review.revision.editorial }),
-          review.revision.document.media.filter((m) => m.position === "hero").map((m) => /* @__PURE__ */ jsxRuntime.jsx(PrivatePhoto, { media: m, base }, m.file_id)),
+          review.revision.document.media.filter((m) => m.position === "hero").map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+            PrivatePhoto,
+            {
+              media: m,
+              base,
+              onChange: can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
+              disabled: busy
+            },
+            m.file_id
+          )),
           celebration && !review.revision.document.media.some(
             (m) => m.position === "hero"
           ) && can("UPLOAD_MEDIA") && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -347,7 +384,7 @@ function StoryReview({
                   /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "A photograph makes it yours." }),
                   /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Family photograph may be added before publication." })
                 ] }),
-                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("media"), children: "+ Add a photograph" })
+                /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => openMedia(), children: "+ Add a photograph" })
               ]
             }
           ),
@@ -358,7 +395,16 @@ function StoryReview({
               dangerouslySetInnerHTML: { __html: review.revision.content_html }
             }
           ),
-          review.revision.document.media.filter((m) => m.position !== "hero").map((m) => /* @__PURE__ */ jsxRuntime.jsx(PrivatePhoto, { media: m, base }, m.file_id))
+          review.revision.document.media.filter((m) => m.position !== "hero").map((m) => /* @__PURE__ */ jsxRuntime.jsx(
+            PrivatePhoto,
+            {
+              media: m,
+              base,
+              onChange: m.kind !== "video" && can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
+              disabled: busy
+            },
+            m.file_id
+          ))
         ] }),
         celebration && /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "review-options", className: "sm-review-welcome", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Help us make this just right" }),
@@ -401,7 +447,7 @@ function StoryReview({
               ),
               can("REQUEST_CHANGES") && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("changes"), children: celebration ? "Suggest a Change" : "Request changes" }),
               celebration && can("PROPOSE_EDITS") && !can("REQUEST_CHANGES") && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("edits"), children: "Suggest a Change" }),
-              can("UPLOAD_MEDIA") && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("media"), children: celebration ? "Add Photos" : "Add photos" }),
+              can("UPLOAD_MEDIA") && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => openMedia(), children: celebration ? "Add Photos" : "Add photos" }),
               !celebration && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
                 can("PROPOSE_EDITS") && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("edits"), children: "Suggest edits" }),
                 can("ANSWER_QUESTIONS") && review.questions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("questions"), children: "Answer questions" }),
@@ -423,7 +469,7 @@ function StoryReview({
             "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" ? "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("h2", { children: panel === "approve" ? "Approve this exact draft" : panel === "edits" ? "Propose changes" : panel === "media" ? replacementPhoto ? "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" })
               ] }),
               panel === "edits" && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -562,6 +608,7 @@ function StoryReview({
                     void upload();
                   },
                   children: [
+                    replacementPhoto && /* @__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("label", { children: [
                       "Photograph or video",
@@ -847,7 +894,7 @@ function StoryReview({
     publicationFooter
   ] });
 }
-function PrivatePhoto({ base, media }) {
+function PrivatePhoto({ base, media, onChange, disabled }) {
   const [url, setUrl] = react.useState("");
   const [video, setVideo] = react.useState(false);
   react.useEffect(() => {
@@ -881,9 +928,12 @@ function PrivatePhoto({ base, media }) {
         "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", { children: [
-      media.caption,
-      media.credit && ` Photo: ${media.credit}`
+    /* @__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" })
     ] })
   ] });
 }

package/dist/story-review.js

@@ -75,6 +75,13 @@ function StoryReview({
   const thanksRef = useRef(null);
   const [moreQuestions, setMoreQuestions] = useState(false);
   const [correctionKind, setCorrectionKind] = useState("Correct a detail");
+  const [replacementPhoto, setReplacementPhoto] = useState(null);
+  function openMedia(photo = null) {
+    setReplacementPhoto(photo);
+    setFile(null);
+    setRights(false);
+    setPanel("media");
+  }
   useEffect(() => {
     if (panel !== "article") {
       responseRef.current?.scrollIntoView({
@@ -195,13 +202,34 @@ function StoryReview({
         "metadata",
         JSON.stringify({ ...mediaInfo, rights_confirmed: true })
       );
-      await request("/media", form);
+      const received = await request("/media", form);
+      let uploadNotice = "Media received privately. The newsroom will review it before publication.";
+      if (replacementPhoto) {
+        uploadNotice = "Your replacement photo has been sent to the newsroom. The current photo will stay in this preview until we prepare an updated draft.";
+        if (can("COMMENT")) {
+          try {
+            await request("", {
+              revision_id: review.revision.id,
+              action: "COMMENT",
+              message: "Please use my newly uploaded photograph in place of this photo.",
+              target: {
+                kind: "PHOTO",
+                reference: replacementPhoto.contribution_id,
+                replacement_contribution_id: received.id
+              }
+            });
+          } catch {
+            uploadNotice = "Your photo was uploaded privately, but we couldn't attach the replacement note. Please use Suggest a Change to tell the newsroom which photograph it should replace.";
+          }
+        } else {
+          uploadNotice = "Your photo was uploaded privately for newsroom review. The newsroom will select the photo for the next preview.";
+        }
+      }
       await load();
       setFile(null);
       setRights(false);
-      setNotice(
-        "Media received privately. The newsroom will review it before publication."
-      );
+      setNotice(uploadNotice);
+      setReplacementPhoto(null);
       setPanel("article");
     } catch (e) {
       setError(e instanceof Error ? e.message : "Upload failed.");
@@ -332,7 +360,16 @@ function StoryReview({
           /* @__PURE__ */ jsx("h1", { children: review.revision.document.title }),
           /* @__PURE__ */ jsx("p", { className: "sm-review-dek", children: review.revision.document.subtitle }),
           /* @__PURE__ */ jsx(EditorialNotices, { editorial: review.revision.editorial }),
-          review.revision.document.media.filter((m) => m.position === "hero").map((m) => /* @__PURE__ */ jsx(PrivatePhoto, { media: m, base }, m.file_id)),
+          review.revision.document.media.filter((m) => m.position === "hero").map((m) => /* @__PURE__ */ jsx(
+            PrivatePhoto,
+            {
+              media: m,
+              base,
+              onChange: can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
+              disabled: busy
+            },
+            m.file_id
+          )),
           celebration && !review.revision.document.media.some(
             (m) => m.position === "hero"
           ) && can("UPLOAD_MEDIA") && /* @__PURE__ */ jsxs(
@@ -345,7 +382,7 @@ function StoryReview({
                   /* @__PURE__ */ jsx("strong", { children: "A photograph makes it yours." }),
                   /* @__PURE__ */ jsx("p", { children: "Family photograph may be added before publication." })
                 ] }),
-                /* @__PURE__ */ jsx("button", { onClick: () => setPanel("media"), children: "+ Add a photograph" })
+                /* @__PURE__ */ jsx("button", { onClick: () => openMedia(), children: "+ Add a photograph" })
               ]
             }
           ),
@@ -356,7 +393,16 @@ function StoryReview({
               dangerouslySetInnerHTML: { __html: review.revision.content_html }
             }
           ),
-          review.revision.document.media.filter((m) => m.position !== "hero").map((m) => /* @__PURE__ */ jsx(PrivatePhoto, { media: m, base }, m.file_id))
+          review.revision.document.media.filter((m) => m.position !== "hero").map((m) => /* @__PURE__ */ jsx(
+            PrivatePhoto,
+            {
+              media: m,
+              base,
+              onChange: m.kind !== "video" && can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
+              disabled: busy
+            },
+            m.file_id
+          ))
         ] }),
         celebration && /* @__PURE__ */ jsxs("section", { id: "review-options", className: "sm-review-welcome", children: [
           /* @__PURE__ */ jsx("h2", { children: "Help us make this just right" }),
@@ -399,7 +445,7 @@ function StoryReview({
               ),
               can("REQUEST_CHANGES") && /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("changes"), children: celebration ? "Suggest a Change" : "Request changes" }),
               celebration && can("PROPOSE_EDITS") && !can("REQUEST_CHANGES") && /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("edits"), children: "Suggest a Change" }),
-              can("UPLOAD_MEDIA") && /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("media"), children: celebration ? "Add Photos" : "Add photos" }),
+              can("UPLOAD_MEDIA") && /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => openMedia(), children: celebration ? "Add Photos" : "Add photos" }),
               !celebration && /* @__PURE__ */ jsxs(Fragment, { children: [
                 can("PROPOSE_EDITS") && /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("edits"), children: "Suggest edits" }),
                 can("ANSWER_QUESTIONS") && review.questions.length > 0 && /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("questions"), children: "Answer questions" }),
@@ -421,7 +467,7 @@ function StoryReview({
             "aria-label": "Your response",
             children: [
               /* @__PURE__ */ jsxs("div", { className: "sm-review-form-heading", children: [
-                /* @__PURE__ */ jsx("h2", { children: panel === "approve" ? "Approve this exact draft" : panel === "edits" ? "Propose changes" : panel === "media" ? "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__ */ jsx("h2", { children: panel === "approve" ? "Approve this exact draft" : panel === "edits" ? "Propose changes" : panel === "media" ? replacementPhoto ? "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__ */ jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Close" })
               ] }),
               panel === "edits" && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -560,6 +606,7 @@ function StoryReview({
                     void upload();
                   },
                   children: [
+                    replacementPhoto && /* @__PURE__ */ 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__ */ 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__ */ jsxs("label", { children: [
                       "Photograph or video",
@@ -845,7 +892,7 @@ function StoryReview({
     publicationFooter
   ] });
 }
-function PrivatePhoto({ base, media }) {
+function PrivatePhoto({ base, media, onChange, disabled }) {
   const [url, setUrl] = useState("");
   const [video, setVideo] = useState(false);
   useEffect(() => {
@@ -879,9 +926,12 @@ function PrivatePhoto({ base, media }) {
         "aria-label": media.alt
       }
     ) : /* @__PURE__ */ jsx("img", { src: url, alt: media.alt, referrerPolicy: "no-referrer" }) : /* @__PURE__ */ jsx("p", { children: "Media unavailable." }),
-    /* @__PURE__ */ jsxs("figcaption", { children: [
-      media.caption,
-      media.credit && ` Photo: ${media.credit}`
+    /* @__PURE__ */ jsxs("figcaption", { className: "sm-review-photo-details", children: [
+      (media.caption || media.credit) && /* @__PURE__ */ jsxs("span", { children: [
+        media.caption,
+        media.credit && ` Photo: ${media.credit}`
+      ] }),
+      onChange && /* @__PURE__ */ jsx("button", { className: "sm-review-change-photo", type: "button", disabled, onClick: onChange, children: "Change photo" })
     ] })
   ] });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/news-publication",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "description": "Shared server framework for ScaleMule local news publications. Walnut Creek Times is the broadsheet default; each paper supplies its own identity and feature flags.",
   "type": "module",
   "main": "./dist/index.cjs",

package/story-review.css

@@ -151,6 +151,24 @@
   color: #496076;
   margin-top: 8px;
 }
+.sm-review-photo-details {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 8px 16px;
+  margin-top: 10px;
+}
+.sm-review-photo-details > span {
+  flex: 1 1 200px;
+  margin: 0;
+  color: var(--pub-muted, #545c55);
+}
+.sm-story-review .sm-review-change-photo {
+  margin-left: auto;
+  min-height: 44px;
+  font-size: 13px;
+}
 .sm-review-actions {
   position: sticky;
   bottom: 0;
@@ -565,6 +583,7 @@
   }
 }
 @media print {
+  .sm-review-change-photo,
   .sm-review-concierge-actions,
   .sm-review-welcome,
   .sm-review-utilities,