@scalemule/news-publication 0.0.30 → 0.0.31

package/dist/story-review.cjs

@@ -75,7 +75,11 @@ function useReviewDrafts(session, revision, initial, request) {
   const flushRef = react.useRef(flush);
   flushRef.current = flush;
   react.useEffect(() => {
-    if (!revision) return;
+    if (!revision) {
+      entries.current = {};
+      redraw();
+      return;
+    }
     const id = `${session}:${revision}`;
     active.current = id;
     const next = {};
@@ -292,12 +296,29 @@ function StoryReview({
   publicationFooter
 }) {
   const base = `/api/news/review/${encodeURIComponent(sessionId)}`;
-  const [review, setReview] = react.useState(null), [error, setError] = react.useState(""), [notice, setNotice] = react.useState(""), [busy, setBusy] = react.useState(false), [panel, setPanel] = react.useState("article"), [verification, setVerification] = react.useState(false), [code, setCode] = react.useState("");
+  const [review, setReview] = react.useState(null), [error, setError] = react.useState(""), [notice, setNotice] = react.useState(""), [busy, setBusy] = react.useState(false), [panel, setPanelState] = react.useState("article"), [verification, setVerification] = react.useState(false), [code, setCode] = react.useState("");
+  const [shareUrl, setShareUrl] = react.useState(""), [canShare, setCanShare] = react.useState(false);
+  const [contributorName, setContributorName] = react.useState(""), [contributorEmail, setContributorEmail] = react.useState("");
+  const [identityStep, setIdentityStep] = react.useState("name"), [requestedPanel, setRequestedPanel] = react.useState("comment");
+  function setPanel(next) {
+    if (review?.identity_required && !["article", "history", "identity", "share"].includes(next)) {
+      setRequestedPanel(next);
+      setPanelState("identity");
+    } else setPanelState(next);
+  }
+  const identity = review?.session_id || sessionId;
   const [rights, setRights] = react.useState(false), [compare, setCompare] = react.useState(""), [compareTo, setCompareTo] = react.useState(""), [editingMedia, setEditingMedia] = react.useState(""), [commentTarget, setCommentTarget] = react.useState("STORY");
-  const pendingPhoto = usePendingPhoto(review ? `${sessionId}:${review.revision.id}` : void 0);
+  const pendingPhoto = usePendingPhoto(review && !review.identity_required ? `${identity}:${review.revision.id}` : void 0);
   const file = pendingPhoto.photo?.file || null;
   const galleryRef = react.useRef(null);
   const cameraRef = react.useRef(null);
+  const errorRef = react.useRef(null);
+  react.useEffect(() => {
+    if (error) {
+      errorRef.current?.scrollIntoView({ block: "center" });
+      errorRef.current?.focus({ preventScroll: true });
+    }
+  }, [error]);
   const noticeRef = react.useRef(null);
   react.useEffect(() => {
     if (notice) {
@@ -329,7 +350,7 @@ function StoryReview({
     }
   }, [panel]);
   const emptyMediaInfo = { caption: "", who_is_pictured: "", creator: "", when_taken: "", where_taken: "", credit: "", alt: "" };
-  const drafts = useReviewDrafts(sessionId, review?.revision.id, review?.response_drafts, request);
+  const drafts = useReviewDrafts(identity, review?.identity_required ? void 0 : review?.revision.id, review?.response_drafts, request);
   const currentDraft = drafts.entries[panel];
   const message = currentDraft?.data.message || "";
   const answers = drafts.entries.questions?.data.answers || {};
@@ -382,10 +403,23 @@ function StoryReview({
     let active = true;
     void (async () => {
       try {
-        const token = window.location.hash.slice(1);
-        if (token) {
-          await request("/session", { token });
-          window.history.replaceState(null, "", window.location.pathname);
+        const token = new URL(window.location.href).searchParams.get("key") || (/^[a-f0-9]{64}$/.test(window.location.hash.slice(1)) ? window.location.hash.slice(1) : void 0);
+        let exchange = {};
+        try {
+          exchange = await request("/session", token ? { token } : {});
+        } catch (e) {
+          if (token) throw e;
+        }
+        const address = exchange.share_url || (token ? `/review/${encodeURIComponent(sessionId)}?key=${encodeURIComponent(token)}` : void 0);
+        if (address) {
+          const canonical = new URL(address, window.location.origin);
+          if (canonical.origin === window.location.origin) {
+            window.history.replaceState(null, "", canonical.pathname + canonical.search);
+            if (active) {
+              setShareUrl(canonical.href);
+              setCanShare(exchange.can_share === true);
+            }
+          }
         }
         const data = await request();
         if (active) {
@@ -406,6 +440,18 @@ function StoryReview({
       active = false;
     };
   }, [sessionId]);
+  async function sharePrivateLink() {
+    if (!shareUrl) return;
+    if (navigator.share) {
+      try {
+        await navigator.share({ title: "Private story preview", url: shareUrl });
+        return;
+      } catch (e) {
+        if (e.name === "AbortError") return;
+      }
+    }
+    setPanel("share");
+  }
   async function send(action, success) {
     if (!review || busy) return;
     if (action.action === "APPROVE" && file) {
@@ -542,7 +588,7 @@ function StoryReview({
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: review?.publication.name || publicationName })
     ] }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("main", { className: `sm-story-review${celebration ? " sm-review-celebration" : ""}`, children: [
-      error && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "sm-review-alert", children: error }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { ref: errorRef, tabIndex: -1, role: "alert", className: "sm-review-alert", children: error }),
       notice && !(approved && finalEditor && notice === approvalThanks) && /* @__PURE__ */ jsxRuntime.jsx("p", { ref: noticeRef, tabIndex: -1, role: "status", className: "sm-review-notice", children: notice }),
       verification && /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "sm-review-form", children: [
         /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Verify your email" }),
@@ -610,8 +656,36 @@ function StoryReview({
           }
         )
       ] }),
+      !review && error && /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+        "Ask the person who invited you to use ",
+        /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Share private preview" }),
+        " or copy the complete address from their open preview. You do not need an account to read it."
+      ] }),
       !review && !error && !verification && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "status", children: "Opening your private preview\u2026" }),
       review && document && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        canShare && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-sharing", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Private family preview. Share only with people you want to invite." }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => void sharePrivateLink(), children: "Share private preview" })
+        ] }),
+        review.participant && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-identity-status", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "Contributing as ",
+            /* @__PURE__ */ jsxRuntime.jsx("strong", { children: review.reviewer })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy || pending.length > 0 || !!file, onClick: async () => {
+            setBusy(true);
+            try {
+              await request("/leave", {});
+              setPanelState("article");
+              setIdentityStep("name");
+              await load();
+            } catch (e) {
+              setError(e.message);
+            } finally {
+              setBusy(false);
+            }
+          }, children: "Not you?" })
+        ] }),
         celebration ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm-review-intro", children: [
           review.revision.number > 1 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
             /* @__PURE__ */ jsxRuntime.jsx("strong", { children: "Updated preview" }),
@@ -694,7 +768,10 @@ function StoryReview({
         ] }),
         celebration && /* @__PURE__ */ jsxRuntime.jsxs("section", { id: "review-options", className: "sm-review-welcome", children: [
           /* @__PURE__ */ jsxRuntime.jsx("h2", { children: "Help us make this just right" }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "We prepared this announcement as a starting point so you don't have to write anything yourself. If everything looks right, you can simply approve it." }),
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+            "We prepared this announcement as a starting point so you don't have to write anything yourself. ",
+            can("APPROVE") ? "If everything looks right, you can simply approve it." : "Read it at your own pace, and let us know if anything needs a change."
+          ] }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { children: "If you'd like, you can also correct a detail, add photographs, or tell us a little more about the couple. We'll take care of turning any additional information into the next draft." }),
           can("ANSWER_QUESTIONS") && review.questions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
             "button",
@@ -722,6 +799,7 @@ function StoryReview({
             className: `sm-review-actions${celebration ? " sm-review-concierge-actions" : ""}${panel !== "article" ? " sm-review-actions-editing" : ""}`,
             "aria-label": "Review actions",
             children: [
+              !can("APPROVE") && can("COMMENT") && (review.identity_required || review.participant) && /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("feedback"), children: "Looks good to me" }),
               can("APPROVE") && !review.published && /* @__PURE__ */ jsxRuntime.jsx(
                 "button",
                 {
@@ -755,7 +833,94 @@ function StoryReview({
           ] }, name)),
           file && !pending.some(([name]) => name === "media") && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: () => setPanel("media"), children: "Continue your photo upload" })
         ] }),
-        panel !== "article" && /* @__PURE__ */ jsxRuntime.jsxs(
+        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" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Anyone with this link can read the private preview. 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 === "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" : "Who is helping with the story?" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Your name will accompany your feedback for the newsroom. Your email stays private. No password or account is needed." }),
+          identityStep === "name" ? /* @__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("button", { disabled: busy, children: busy ? "Sending your code\u2026" : "Email me a 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" })
+          ] }),
+          /* @__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?" }),
+          /* @__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", { 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."), children: "Send my feedback" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Back to the story" })
+        ] }),
+        !["article", "identity", "share", "feedback"].includes(panel) && /* @__PURE__ */ jsxRuntime.jsxs(
           "section",
           {
             ref: responseRef,

package/dist/story-review.js

@@ -73,7 +73,11 @@ function useReviewDrafts(session, revision, initial, request) {
   const flushRef = useRef(flush);
   flushRef.current = flush;
   useEffect(() => {
-    if (!revision) return;
+    if (!revision) {
+      entries.current = {};
+      redraw();
+      return;
+    }
     const id = `${session}:${revision}`;
     active.current = id;
     const next = {};
@@ -290,12 +294,29 @@ function StoryReview({
   publicationFooter
 }) {
   const base = `/api/news/review/${encodeURIComponent(sessionId)}`;
-  const [review, setReview] = useState(null), [error, setError] = useState(""), [notice, setNotice] = useState(""), [busy, setBusy] = useState(false), [panel, setPanel] = useState("article"), [verification, setVerification] = useState(false), [code, setCode] = useState("");
+  const [review, setReview] = useState(null), [error, setError] = useState(""), [notice, setNotice] = useState(""), [busy, setBusy] = useState(false), [panel, setPanelState] = useState("article"), [verification, setVerification] = useState(false), [code, setCode] = useState("");
+  const [shareUrl, setShareUrl] = useState(""), [canShare, setCanShare] = useState(false);
+  const [contributorName, setContributorName] = useState(""), [contributorEmail, setContributorEmail] = useState("");
+  const [identityStep, setIdentityStep] = useState("name"), [requestedPanel, setRequestedPanel] = useState("comment");
+  function setPanel(next) {
+    if (review?.identity_required && !["article", "history", "identity", "share"].includes(next)) {
+      setRequestedPanel(next);
+      setPanelState("identity");
+    } else setPanelState(next);
+  }
+  const identity = review?.session_id || sessionId;
   const [rights, setRights] = useState(false), [compare, setCompare] = useState(""), [compareTo, setCompareTo] = useState(""), [editingMedia, setEditingMedia] = useState(""), [commentTarget, setCommentTarget] = useState("STORY");
-  const pendingPhoto = usePendingPhoto(review ? `${sessionId}:${review.revision.id}` : void 0);
+  const pendingPhoto = usePendingPhoto(review && !review.identity_required ? `${identity}:${review.revision.id}` : void 0);
   const file = pendingPhoto.photo?.file || null;
   const galleryRef = useRef(null);
   const cameraRef = useRef(null);
+  const errorRef = useRef(null);
+  useEffect(() => {
+    if (error) {
+      errorRef.current?.scrollIntoView({ block: "center" });
+      errorRef.current?.focus({ preventScroll: true });
+    }
+  }, [error]);
   const noticeRef = useRef(null);
   useEffect(() => {
     if (notice) {
@@ -327,7 +348,7 @@ function StoryReview({
     }
   }, [panel]);
   const emptyMediaInfo = { caption: "", who_is_pictured: "", creator: "", when_taken: "", where_taken: "", credit: "", alt: "" };
-  const drafts = useReviewDrafts(sessionId, review?.revision.id, review?.response_drafts, request);
+  const drafts = useReviewDrafts(identity, review?.identity_required ? void 0 : review?.revision.id, review?.response_drafts, request);
   const currentDraft = drafts.entries[panel];
   const message = currentDraft?.data.message || "";
   const answers = drafts.entries.questions?.data.answers || {};
@@ -380,10 +401,23 @@ function StoryReview({
     let active = true;
     void (async () => {
       try {
-        const token = window.location.hash.slice(1);
-        if (token) {
-          await request("/session", { token });
-          window.history.replaceState(null, "", window.location.pathname);
+        const token = new URL(window.location.href).searchParams.get("key") || (/^[a-f0-9]{64}$/.test(window.location.hash.slice(1)) ? window.location.hash.slice(1) : void 0);
+        let exchange = {};
+        try {
+          exchange = await request("/session", token ? { token } : {});
+        } catch (e) {
+          if (token) throw e;
+        }
+        const address = exchange.share_url || (token ? `/review/${encodeURIComponent(sessionId)}?key=${encodeURIComponent(token)}` : void 0);
+        if (address) {
+          const canonical = new URL(address, window.location.origin);
+          if (canonical.origin === window.location.origin) {
+            window.history.replaceState(null, "", canonical.pathname + canonical.search);
+            if (active) {
+              setShareUrl(canonical.href);
+              setCanShare(exchange.can_share === true);
+            }
+          }
         }
         const data = await request();
         if (active) {
@@ -404,6 +438,18 @@ function StoryReview({
       active = false;
     };
   }, [sessionId]);
+  async function sharePrivateLink() {
+    if (!shareUrl) return;
+    if (navigator.share) {
+      try {
+        await navigator.share({ title: "Private story preview", url: shareUrl });
+        return;
+      } catch (e) {
+        if (e.name === "AbortError") return;
+      }
+    }
+    setPanel("share");
+  }
   async function send(action, success) {
     if (!review || busy) return;
     if (action.action === "APPROVE" && file) {
@@ -540,7 +586,7 @@ function StoryReview({
       /* @__PURE__ */ jsx("span", { children: review?.publication.name || publicationName })
     ] }) }),
     /* @__PURE__ */ jsxs("main", { className: `sm-story-review${celebration ? " sm-review-celebration" : ""}`, children: [
-      error && /* @__PURE__ */ jsx("p", { role: "alert", className: "sm-review-alert", children: error }),
+      error && /* @__PURE__ */ jsx("p", { ref: errorRef, tabIndex: -1, role: "alert", className: "sm-review-alert", children: error }),
       notice && !(approved && finalEditor && notice === approvalThanks) && /* @__PURE__ */ jsx("p", { ref: noticeRef, tabIndex: -1, role: "status", className: "sm-review-notice", children: notice }),
       verification && /* @__PURE__ */ jsxs("section", { className: "sm-review-form", children: [
         /* @__PURE__ */ jsx("h2", { children: "Verify your email" }),
@@ -608,8 +654,36 @@ function StoryReview({
           }
         )
       ] }),
+      !review && error && /* @__PURE__ */ jsxs("p", { children: [
+        "Ask the person who invited you to use ",
+        /* @__PURE__ */ jsx("strong", { children: "Share private preview" }),
+        " or copy the complete address from their open preview. You do not need an account to read it."
+      ] }),
       !review && !error && !verification && /* @__PURE__ */ jsx("p", { role: "status", children: "Opening your private preview\u2026" }),
       review && document && /* @__PURE__ */ jsxs(Fragment, { children: [
+        canShare && /* @__PURE__ */ jsxs("div", { className: "sm-review-sharing", children: [
+          /* @__PURE__ */ jsx("p", { children: "Private family preview. Share only with people you want to invite." }),
+          /* @__PURE__ */ jsx("button", { onClick: () => void sharePrivateLink(), children: "Share private preview" })
+        ] }),
+        review.participant && /* @__PURE__ */ jsxs("div", { className: "sm-review-identity-status", children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            "Contributing as ",
+            /* @__PURE__ */ jsx("strong", { children: review.reviewer })
+          ] }),
+          /* @__PURE__ */ jsx("button", { disabled: busy || pending.length > 0 || !!file, onClick: async () => {
+            setBusy(true);
+            try {
+              await request("/leave", {});
+              setPanelState("article");
+              setIdentityStep("name");
+              await load();
+            } catch (e) {
+              setError(e.message);
+            } finally {
+              setBusy(false);
+            }
+          }, children: "Not you?" })
+        ] }),
         celebration ? /* @__PURE__ */ jsxs("div", { className: "sm-review-intro", children: [
           review.revision.number > 1 ? /* @__PURE__ */ jsxs("p", { children: [
             /* @__PURE__ */ jsx("strong", { children: "Updated preview" }),
@@ -692,7 +766,10 @@ function StoryReview({
         ] }),
         celebration && /* @__PURE__ */ jsxs("section", { id: "review-options", className: "sm-review-welcome", children: [
           /* @__PURE__ */ jsx("h2", { children: "Help us make this just right" }),
-          /* @__PURE__ */ jsx("p", { children: "We prepared this announcement as a starting point so you don't have to write anything yourself. If everything looks right, you can simply approve it." }),
+          /* @__PURE__ */ jsxs("p", { children: [
+            "We prepared this announcement as a starting point so you don't have to write anything yourself. ",
+            can("APPROVE") ? "If everything looks right, you can simply approve it." : "Read it at your own pace, and let us know if anything needs a change."
+          ] }),
           /* @__PURE__ */ jsx("p", { children: "If you'd like, you can also correct a detail, add photographs, or tell us a little more about the couple. We'll take care of turning any additional information into the next draft." }),
           can("ANSWER_QUESTIONS") && review.questions.length > 0 && /* @__PURE__ */ jsx(
             "button",
@@ -720,6 +797,7 @@ function StoryReview({
             className: `sm-review-actions${celebration ? " sm-review-concierge-actions" : ""}${panel !== "article" ? " sm-review-actions-editing" : ""}`,
             "aria-label": "Review actions",
             children: [
+              !can("APPROVE") && can("COMMENT") && (review.identity_required || review.participant) && /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("feedback"), children: "Looks good to me" }),
               can("APPROVE") && !review.published && /* @__PURE__ */ jsx(
                 "button",
                 {
@@ -753,7 +831,94 @@ function StoryReview({
           ] }, name)),
           file && !pending.some(([name]) => name === "media") && /* @__PURE__ */ jsx("button", { onClick: () => setPanel("media"), children: "Continue your photo upload" })
         ] }),
-        panel !== "article" && /* @__PURE__ */ jsxs(
+        panel === "share" && /* @__PURE__ */ jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Share private preview", children: [
+          /* @__PURE__ */ jsx("h2", { children: "Share with your family" }),
+          /* @__PURE__ */ jsx("p", { children: "Anyone with this link can read the private preview. To send feedback or photos, they will enter their own name and verify their email. No account is needed." }),
+          /* @__PURE__ */ jsx("label", { htmlFor: "review-share-url", children: "Private preview link" }),
+          /* @__PURE__ */ jsx("input", { id: "review-share-url", readOnly: true, value: shareUrl, onFocus: (e) => e.currentTarget.select() }),
+          /* @__PURE__ */ 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__ */ jsx("button", { onClick: () => setPanel("article"), children: "Back to the story" })
+        ] }),
+        panel === "identity" && /* @__PURE__ */ jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Introduce yourself", children: [
+          /* @__PURE__ */ jsx("h2", { children: identityStep === "code" ? "Check your email" : "Who is helping with the story?" }),
+          /* @__PURE__ */ jsx("p", { children: "Your name will accompany your feedback for the newsroom. Your email stays private. No password or account is needed." }),
+          identityStep === "name" ? /* @__PURE__ */ 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__ */ jsx("label", { htmlFor: "contributor-name", children: "Your name" }),
+            /* @__PURE__ */ jsx("input", { id: "contributor-name", autoComplete: "name", value: contributorName, maxLength: 150, required: true, onChange: (e) => setContributorName(e.target.value) }),
+            /* @__PURE__ */ jsx("label", { htmlFor: "contributor-email", children: "Your email" }),
+            /* @__PURE__ */ jsx("input", { id: "contributor-email", type: "email", autoComplete: "email", value: contributorEmail, maxLength: 320, required: true, onChange: (e) => setContributorEmail(e.target.value) }),
+            /* @__PURE__ */ jsx("p", { children: "We'll email you a code to confirm it's you." }),
+            /* @__PURE__ */ jsx("button", { disabled: busy, children: busy ? "Sending your code\u2026" : "Email me a code" })
+          ] }) : /* @__PURE__ */ 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__ */ jsxs("p", { children: [
+              "Enter the eight-digit code sent to ",
+              /* @__PURE__ */ jsx("strong", { children: contributorEmail }),
+              ". It expires in ten minutes."
+            ] }),
+            /* @__PURE__ */ jsx("label", { htmlFor: "contributor-code", children: "Email verification code" }),
+            /* @__PURE__ */ 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__ */ jsx("button", { disabled: busy, children: busy ? "Verifying\u2026" : "Verify and continue" }),
+            /* @__PURE__ */ 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__ */ jsx("button", { type: "button", disabled: busy, onClick: () => setIdentityStep("name"), children: "Use a different email" })
+          ] }),
+          /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Just read the story" })
+        ] }),
+        panel === "feedback" && /* @__PURE__ */ jsxs("section", { ref: responseRef, tabIndex: -1, className: "sm-review-form", "aria-label": "Family feedback", children: [
+          /* @__PURE__ */ jsx("h2", { children: "Looks good to you?" }),
+          /* @__PURE__ */ 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__ */ jsx("button", { 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."), children: "Send my feedback" }),
+          /* @__PURE__ */ jsx("button", { disabled: busy, onClick: () => setPanel("article"), children: "Back to the story" })
+        ] }),
+        !["article", "identity", "share", "feedback"].includes(panel) && /* @__PURE__ */ jsxs(
           "section",
           {
             ref: responseRef,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/news-publication",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "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

@@ -620,3 +620,10 @@
   .sm-review-photo-picker button { flex: 1 1 180px; margin: 0; }
   .sm-review-save-state button { margin: 8px 0 0; }
 }
+
+/* Keep family sharing alongside the preview, separate from editorial copy. */
+.sm-review-sharing, .sm-review-identity-status { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid var(--sm-rule, #d8d8d8); font:16px/1.5 system-ui,sans-serif; }
+.sm-review-sharing p { flex:1 1 240px; margin:0; }
+.sm-review-sharing button, .sm-review-identity-status button { min-height:48px; font:inherit; padding:10px 16px; cursor:pointer; }
+.sm-review-form input#review-share-url { width:100%; font-size:16px; min-width:0; }
+.sm-review-form label[for^="contributor-"] { display:block; margin-top:16px; }