@scalemule/news-publication 0.0.67 → 0.0.69

package/dist/story-review.js

@@ -1,7 +1,7 @@
 "use client";
-import { parseDocumentBlocks, formatArtworkCaption } from './chunk-OISLCYER.js';
-import { useState, useRef, useEffect } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { articlePresentation, articleFormatLabel, parseDocumentBlocks, formatArtworkCaption } from './chunk-DN3TBZLK.js';
+import { createContext, useState, useRef, useEffect, useContext } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 var stable = (value) => Array.isArray(value) ? value.map(stable) : value && typeof value === "object" ? Object.fromEntries(Object.keys(value).sort().map((k) => [k, stable(value[k])])) : value;
 var same = (a, b) => JSON.stringify(stable(a)) === JSON.stringify(stable(b));
@@ -320,6 +320,7 @@ function EditorialNotices({ editorial }) {
     ] }, i))
   ] }) : null;
 }
+var ReviewMediaSession = createContext(false);
 var human = (s) => s.toLowerCase().replaceAll("_", " ");
 function StoryReview({
   sessionId,
@@ -329,10 +330,14 @@ function StoryReview({
   publicationFooter,
   readerAccountUrl,
   renderSignIn,
-  feedbackEmail
+  feedbackEmail,
+  initialReview,
+  onReviewLoaded,
+  formatImageCaption = (value) => value || ""
 }) {
   const base = `/api/news/review/${encodeURIComponent(sessionId)}`;
-  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 [mediaSessionReady, setMediaSessionReady] = useState(false);
+  const [review, setReview] = useState(initialReview ?? 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");
@@ -387,6 +392,9 @@ function StoryReview({
   const responseRef = useRef(null);
   const thanksRef = useRef(null);
   const [moreQuestions, setMoreQuestions] = useState(false);
+  useEffect(() => {
+    if (review) onReviewLoaded?.(review);
+  }, [review, onReviewLoaded]);
   const [replacementPhoto, setReplacementPhoto] = useState(null);
   const photoToReplace = pendingPhoto.photo?.replacement || replacementPhoto;
   function openMedia(photo = null) {
@@ -466,6 +474,7 @@ function StoryReview({
       setReview(null);
     } else {
       setVerification(false);
+      setMediaSessionReady(true);
       setReview(data);
     }
   }
@@ -507,7 +516,7 @@ function StoryReview({
         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 } : {});
+          exchange = await request("/session", { ...token ? { token } : {}, include_review: true });
         } catch (e) {
           if (token) throw e;
         }
@@ -524,13 +533,14 @@ function StoryReview({
             }
           }
         }
-        const data = await request();
+        const data = exchange.review ?? await request();
         if (active) {
           if (data.verification_required) {
             setVerification(true);
             setReview(null);
           } else {
             setVerification(false);
+            setMediaSessionReady(true);
             setReview(data);
           }
         }
@@ -691,10 +701,29 @@ function StoryReview({
     /* @__PURE__ */ jsx("a", { href: emailLink, children: "Email the newsroom" }),
     ". Your email app will open; send your message there."
   ] });
-  return /* @__PURE__ */ jsxs("div", { className: `sm-review-frame${publicationHeader ? " sm-review-publication-frame" : ""}`, children: [
+  const presentation = articlePresentation(review?.presentation);
+  const formatLabel = articleFormatLabel(presentation.format);
+  const sourceHero = 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,
+      onSuggestCorrection: can("REQUEST_CHANGES") ? () => openCorrection(m) : void 0,
+      disabled: busy
+    },
+    m.file_id
+  ));
+  const generated = review?.generated_visual;
+  const hero = sourceHero?.length ? sourceHero : generated && /^https:\/\//.test(generated.url) ? /* @__PURE__ */ jsxs("figure", { children: [
+    /* @__PURE__ */ jsx("img", { src: generated.url, alt: formatImageCaption(generated.alt) || review?.revision.document.title || "Article illustration" }),
+    formatImageCaption(generated.caption) && /* @__PURE__ */ jsx("figcaption", { children: formatImageCaption(generated.caption) })
+  ] }) : null;
+  const heroBeforeHeadline = presentation.layout.headline_position === "after_hero";
+  return /* @__PURE__ */ jsx(ReviewMediaSession.Provider, { value: mediaSessionReady, children: /* @__PURE__ */ jsxs("div", { className: `sm-review-frame${publicationHeader ? " sm-review-publication-frame" : ""}`, children: [
     /* @__PURE__ */ jsx("div", { className: "sm-review-banner-wrap", children: /* @__PURE__ */ jsxs("div", { className: "sm-review-private", children: [
-      /* @__PURE__ */ jsx("strong", { children: review?.published ? "Private review" : "Private preview \xB7 Not published" }),
-      /* @__PURE__ */ jsx("span", { children: review?.published ? "This revision has been published. This review link remains private." : `Prepared by ${publicationName} for ${celebration ? "family " : ""}review.` })
+      /* @__PURE__ */ jsx("strong", { children: review?.article_published || review?.published ? "Private review" : "Private preview \xB7 Not published" }),
+      /* @__PURE__ */ jsx("span", { children: review?.published ? "This revision has been published. This review link remains private." : review?.article_published ? "The article is published. This private link preserves the version you were invited to review." : `Prepared by ${publicationName} for ${celebration ? "family " : ""}review.` })
     ] }) }),
     publicationHeader ?? /* @__PURE__ */ jsx("div", { className: "sm-review-brand-wrap", children: /* @__PURE__ */ jsxs("header", { className: "sm-review-masthead", children: [
       nameplateUrl && /* @__PURE__ */ jsx("img", { src: nameplateUrl, alt: "", width: 80, height: 80 }),
@@ -841,117 +870,118 @@ function StoryReview({
             "newsroom for final editorial review. It has not been published yet."
           ] })
         ] }),
-        /* @__PURE__ */ jsxs("article", { className: "sm-review-article", children: [
-          /* @__PURE__ */ jsxs("p", { className: "sm-review-category", children: [
-            /* @__PURE__ */ jsx("span", { children: review.revision.document.section }),
-            celebration && /* @__PURE__ */ jsx("span", { children: human(review.celebration_type || "") })
-          ] }),
-          /* @__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,
-              onChange: can("UPLOAD_MEDIA") ? () => openMedia(m) : void 0,
-              onSuggestCorrection: can("REQUEST_CHANGES") ? () => openCorrection(m) : void 0,
-              disabled: busy
-            },
-            m.file_id
-          )),
-          celebration && !review.revision.document.media.some(
-            (m) => m.position === "hero"
-          ) && can("UPLOAD_MEDIA") && /* @__PURE__ */ jsxs(
-            "aside",
-            {
-              className: "sm-review-photo-invitation",
-              "aria-label": "Family photograph",
-              children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx("strong", { children: "A photograph makes it yours." }),
-                  /* @__PURE__ */ jsx("p", { children: "Family photograph may be added before publication." })
-                ] }),
-                /* @__PURE__ */ jsx("button", { onClick: () => openMedia(), children: "+ Add a photograph" })
-              ]
-            }
-          ),
-          (() => {
-            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);
-            }
-            return /* @__PURE__ */ jsx("div", { className: "sm-review-prose", children: blocks.length === 0 && review.revision.content_html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: review.revision.content_html } }) : blocks.map((block, idx) => {
-              switch (block.type) {
-                case "paragraph":
-                  return /* @__PURE__ */ jsx(
-                    "p",
-                    {
-                      dangerouslySetInnerHTML: { __html: block.html }
-                    },
-                    idx
-                  );
-                case "heading": {
-                  if (block.level === 1)
-                    return /* @__PURE__ */ jsx("h1", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
-                  if (block.level === 2)
-                    return /* @__PURE__ */ jsx("h2", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
-                  if (block.level === 3)
-                    return /* @__PURE__ */ jsx("h3", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
-                  if (block.level === 4)
-                    return /* @__PURE__ */ jsx("h4", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
-                  if (block.level === 5)
-                    return /* @__PURE__ */ jsx("h5", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
-                  return /* @__PURE__ */ jsx("h6", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+        /* @__PURE__ */ jsxs(
+          "article",
+          {
+            className: "sm-review-article",
+            "data-article-layout": presentation.layout.renderer,
+            "data-wide-body": presentation.layout.wide_body,
+            "data-hero-aspect": presentation.layout.hero_aspect,
+            children: [
+              heroBeforeHeadline && /* @__PURE__ */ jsx("div", { className: "sm-review-hero", children: hero }),
+              /* @__PURE__ */ jsxs("p", { className: "sm-review-category", children: [
+                /* @__PURE__ */ jsx("span", { children: review.revision.document.section }),
+                formatLabel && /* @__PURE__ */ jsx("span", { children: formatLabel }),
+                celebration && /* @__PURE__ */ jsx("span", { children: human(review.celebration_type || "") })
+              ] }),
+              /* @__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 }),
+              !heroBeforeHeadline && /* @__PURE__ */ jsx("div", { className: "sm-review-hero", children: hero }),
+              celebration && !review.revision.document.media.some(
+                (m) => m.position === "hero"
+              ) && can("UPLOAD_MEDIA") && /* @__PURE__ */ jsxs(
+                "aside",
+                {
+                  className: "sm-review-photo-invitation",
+                  "aria-label": "Family photograph",
+                  children: [
+                    /* @__PURE__ */ jsxs("div", { children: [
+                      /* @__PURE__ */ jsx("strong", { children: "A photograph makes it yours." }),
+                      /* @__PURE__ */ jsx("p", { children: "Family photograph may be added before publication." })
+                    ] }),
+                    /* @__PURE__ */ jsx("button", { onClick: () => openMedia(), children: "+ Add a photograph" })
+                  ]
                 }
-                case "quote":
-                  return /* @__PURE__ */ jsxs("blockquote", { children: [
-                    /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: block.html } }),
-                    block.attribution && /* @__PURE__ */ jsx("cite", { children: block.attribution })
-                  ] }, idx);
-                case "list":
-                  return block.ordered ? /* @__PURE__ */ jsx("ol", { children: block.items.map((it, i) => /* @__PURE__ */ jsx("li", { dangerouslySetInnerHTML: { __html: it } }, i)) }, idx) : /* @__PURE__ */ jsx("ul", { children: block.items.map((it, i) => /* @__PURE__ */ jsx("li", { dangerouslySetInnerHTML: { __html: it } }, i)) }, idx);
-                case "divider":
-                  return /* @__PURE__ */ jsx("hr", {}, idx);
-                case "inline_media": {
-                  const m = mediaMap.get(block.media_id);
-                  if (!m) return null;
-                  return /* @__PURE__ */ 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
-                  );
+              ),
+              (() => {
+                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);
                 }
-                default:
-                  return null;
-              }
-            }) });
-          })(),
-          review.revision.document.media.filter((m) => m.position === "gallery").map((m) => /* @__PURE__ */ 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
-          ))
-        ] }),
+                return /* @__PURE__ */ jsx("div", { className: "sm-review-prose", children: blocks.length === 0 && review.revision.content_html ? /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: review.revision.content_html } }) : blocks.map((block, idx) => {
+                  switch (block.type) {
+                    case "paragraph":
+                      return /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          dangerouslySetInnerHTML: { __html: block.html }
+                        },
+                        idx
+                      );
+                    case "heading": {
+                      if (block.level === 1)
+                        return /* @__PURE__ */ jsx("h1", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                      if (block.level === 2)
+                        return /* @__PURE__ */ jsx("h2", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                      if (block.level === 3)
+                        return /* @__PURE__ */ jsx("h3", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                      if (block.level === 4)
+                        return /* @__PURE__ */ jsx("h4", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                      if (block.level === 5)
+                        return /* @__PURE__ */ jsx("h5", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                      return /* @__PURE__ */ jsx("h6", { dangerouslySetInnerHTML: { __html: block.html } }, idx);
+                    }
+                    case "quote":
+                      return /* @__PURE__ */ jsxs("blockquote", { children: [
+                        /* @__PURE__ */ jsx("p", { dangerouslySetInnerHTML: { __html: block.html } }),
+                        block.attribution && /* @__PURE__ */ jsx("cite", { children: block.attribution })
+                      ] }, idx);
+                    case "list":
+                      return block.ordered ? /* @__PURE__ */ jsx("ol", { children: block.items.map((it, i) => /* @__PURE__ */ jsx("li", { dangerouslySetInnerHTML: { __html: it } }, i)) }, idx) : /* @__PURE__ */ jsx("ul", { children: block.items.map((it, i) => /* @__PURE__ */ jsx("li", { dangerouslySetInnerHTML: { __html: it } }, i)) }, idx);
+                    case "divider":
+                      return /* @__PURE__ */ jsx("hr", {}, idx);
+                    case "inline_media": {
+                      const m = mediaMap.get(block.media_id);
+                      if (!m) return null;
+                      return /* @__PURE__ */ 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__ */ 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
+              ))
+            ]
+          }
+        ),
         celebration && /* @__PURE__ */ jsxs("section", { id: "review-options", className: "sm-review-welcome", children: [
           /* @__PURE__ */ jsx("h2", { children: "Help us make this just right" }),
           /* @__PURE__ */ jsxs("p", { children: [
@@ -1652,7 +1682,7 @@ function StoryReview({
       ] })
     ] }),
     publicationFooter
-  ] });
+  ] }) });
 }
 function PrivatePhoto({
   base,
@@ -1662,9 +1692,11 @@ function PrivatePhoto({
   disabled,
   isInline
 }) {
+  const sessionReady = useContext(ReviewMediaSession);
   const [url, setUrl] = useState("");
   const [video, setVideo] = useState(false);
   useEffect(() => {
+    if (!sessionReady) return;
     let active = true, object = "";
     void fetch(`${base}/media/${encodeURIComponent(media.file_id)}`, {
       cache: "no-store",
@@ -1683,7 +1715,7 @@ function PrivatePhoto({
       active = false;
       if (object) URL.revokeObjectURL(object);
     };
-  }, [base, media.file_id]);
+  }, [base, media.file_id, sessionReady]);
   const captionInfo = formatArtworkCaption(media);
   return /* @__PURE__ */ jsxs(
     "figure",
@@ -1707,7 +1739,7 @@ function PrivatePhoto({
             alt: media.alt || captionInfo.title || "Story photograph",
             referrerPolicy: "no-referrer"
           }
-        ) : /* @__PURE__ */ jsx("p", { children: "Media unavailable." }),
+        ) : /* @__PURE__ */ jsx("p", { children: sessionReady ? "Media unavailable." : "Loading photograph\u2026" }),
         /* @__PURE__ */ jsxs("figcaption", { className: "sm-review-photo-details", children: [
           /* @__PURE__ */ jsxs("div", { className: "sm-review-caption-text", children: [
             captionInfo.title && /* @__PURE__ */ jsx("div", { className: "sm-review-artwork-title", children: /* @__PURE__ */ jsxs("strong", { children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalemule/news-publication",
-  "version": "0.0.67",
+  "version": "0.0.69",
   "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",
@@ -179,7 +179,12 @@
       "import": "./dist/toys-server.js",
       "require": "./dist/toys-server.cjs"
     },
-    "./toys.css": "./toys.css"
+    "./toys.css": "./toys.css",
+    "./article-workflow": {
+      "types": "./dist/article-workflow-client.d.ts",
+      "import": "./dist/article-workflow-client.js",
+      "require": "./dist/article-workflow-client.cjs"
+    }
   },
   "files": [
     "dist",

package/story-review.css

@@ -809,3 +809,8 @@
     padding: 20px 16px max(20px, env(safe-area-inset-bottom));
   }
 }
+
+/* The same finite layout vocabulary is used by public and private readers. */
+.sm-review-article[data-wide-body="true"] { max-width: 900px; }
+.sm-review-article[data-hero-aspect="portrait"] .sm-review-hero img { aspect-ratio: 4 / 5; object-fit: contain; max-height: 80vh; }
+.sm-review-article[data-hero-aspect="square"] .sm-review-hero img { aspect-ratio: 1; object-fit: contain; }