@postrun/react 2.4.0 → 2.5.0

package/dist/index.cjs

@@ -1342,6 +1342,111 @@ function useIsDark(theme) {
   }
   return theme === "dark";
 }
+function domainOf(source) {
+  try {
+    return new URL(source).hostname.replace(/^www\./, "");
+  } catch {
+    return source;
+  }
+}
+function ArticleCard({ article, thumbnail }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle, children: [
+    thumbnail ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: thumbnail.src, alt: thumbnail.alt ?? "", style: thumbStyle }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: metaStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: domainStyle, children: domainOf(article.source) }),
+      article.title ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyle, children: article.title }) : null,
+      article.description ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: descStyle, children: article.description }) : null
+    ] })
+  ] });
+}
+var cardStyle = {
+  border: `1px solid ${varRef(LI_VAR.border)}`,
+  borderRadius: 8,
+  overflow: "hidden"
+};
+var thumbStyle = {
+  width: "100%",
+  display: "block",
+  aspectRatio: "1.91 / 1",
+  objectFit: "cover"
+};
+var metaStyle = {
+  padding: "8px 12px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var domainStyle = {
+  fontSize: 12,
+  color: varRef(LI_VAR.muted)
+};
+var titleStyle = {
+  fontSize: 14,
+  fontWeight: 600,
+  color: varRef(LI_VAR.text),
+  lineHeight: 1.3,
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+var descStyle = {
+  fontSize: 12,
+  color: varRef(LI_VAR.muted),
+  lineHeight: 1.3,
+  display: "-webkit-box",
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+function DocumentCard({ document, cover }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: cardStyle2, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: pageStyle, children: cover ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: cover.src, alt: cover.alt ?? "", style: coverStyle }) : /* @__PURE__ */ jsxRuntime.jsx(fi.FiFileText, { size: 56, "aria-hidden": true, style: { opacity: 0.5 } }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: barStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: titleStyle2, children: document.title }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: kindStyle, children: "Document" })
+    ] })
+  ] });
+}
+var cardStyle2 = {
+  border: `1px solid ${varRef(LI_VAR.border)}`,
+  borderRadius: 8,
+  overflow: "hidden"
+};
+var pageStyle = {
+  position: "relative",
+  aspectRatio: "4 / 3",
+  background: "rgba(127,127,127,0.12)",
+  display: "grid",
+  placeItems: "center",
+  color: varRef(LI_VAR.muted)
+};
+var coverStyle = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+var barStyle = {
+  background: "rgba(0,0,0,0.85)",
+  color: "#fff",
+  padding: "10px 14px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 1
+};
+var titleStyle2 = {
+  fontSize: 14,
+  fontWeight: 600,
+  lineHeight: 1.3,
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+var kindStyle = {
+  fontSize: 12,
+  color: "rgba(255,255,255,0.7)"
+};
 var ROW2 = {
   display: "flex",
   justifyContent: "space-around",
@@ -1495,11 +1600,11 @@ function Tile({
   ] });
 }
 function ImageMosaic({ media }) {
-  if (media.length === 0) {
+  const [only] = media;
+  if (!only) {
     return null;
   }
   if (media.length === 1) {
-    const only = media[0];
     return /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
@@ -1545,6 +1650,48 @@ function Media({ media }) {
   const images = media.filter((item) => item.kind === "image");
   return /* @__PURE__ */ jsxRuntime.jsx(ImageMosaic, { media: images });
 }
+function Poll({ poll }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: questionStyle, children: poll.question }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionsStyle, children: poll.options.map((option, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: optionStyle, children: option }, `${option}-${i}`)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerStyle, children: [
+      "0 votes \u2022 ",
+      js.linkedinPollDurationLabel(poll.duration)
+    ] })
+  ] });
+}
+var wrapStyle = {
+  border: `1px solid ${varRef(LI_VAR.border)}`,
+  borderRadius: 8,
+  padding: 12,
+  display: "flex",
+  flexDirection: "column",
+  gap: 10
+};
+var questionStyle = {
+  fontSize: 14,
+  fontWeight: 600,
+  color: varRef(LI_VAR.text),
+  lineHeight: 1.35
+};
+var optionsStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var optionStyle = {
+  border: `1px solid ${varRef(LI_VAR.accent)}`,
+  borderRadius: 999,
+  padding: "8px 16px",
+  textAlign: "center",
+  fontSize: 14,
+  fontWeight: 600,
+  color: varRef(LI_VAR.accent)
+};
+var footerStyle = {
+  fontSize: 12,
+  color: varRef(LI_VAR.muted)
+};
 var FOLD_CHARS = 200;
 var BODY_STYLE = {
   whiteSpace: "pre-wrap",
@@ -1672,7 +1819,7 @@ function LinkedInPostPreviewImpl({
     accent: varRef(LI_VAR.accent),
     muted: varRef(LI_VAR.muted)
   };
-  const cardStyle2 = {
+  const cardStyle4 = {
     ...paletteVars(dark),
     background: varRef(LI_VAR.bg),
     color: varRef(LI_VAR.text),
@@ -1683,7 +1830,7 @@ function LinkedInPostPreviewImpl({
     fontFamily: FONT_STACK,
     ...style
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: cardStyle2, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: cardStyle4, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header, { author, visibility, time }),
     variant.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       PostBody,
@@ -1693,10 +1840,26 @@ function LinkedInPostPreviewImpl({
         colors: bodyColors
       }
     ) }) : null,
-    resolvedMedia.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(Media, { media: resolvedMedia }) }) : null,
+    renderContent(variant, resolvedMedia),
     showActions ? /* @__PURE__ */ jsxRuntime.jsx(EngagementBar, {}) : null
   ] });
 }
+function renderContent(variant, media) {
+  const settings = variant.settings;
+  const kind = settings?.content_kind;
+  const [firstMedia] = media;
+  if (kind === "article" && settings?.article) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: INSET, children: /* @__PURE__ */ jsxRuntime.jsx(ArticleCard, { article: settings.article, thumbnail: firstMedia }) });
+  }
+  if (kind === "poll" && settings?.poll) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: INSET, children: /* @__PURE__ */ jsxRuntime.jsx(Poll, { poll: settings.poll }) });
+  }
+  if (kind === "document" && settings?.document) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: INSET, children: /* @__PURE__ */ jsxRuntime.jsx(DocumentCard, { document: settings.document, cover: firstMedia }) });
+  }
+  return media.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(Media, { media }) }) : null;
+}
+var INSET = { padding: "12px 16px 0" };
 var LinkedInPostPreview = react.memo(LinkedInPostPreviewImpl);
 var LINK_COLOR = "#8ab4ff";
 var TOKEN = /([#@][\p{L}\p{N}_.]+)/gu;
@@ -1713,7 +1876,7 @@ function Caption({ body }) {
     setOverflowing(el.scrollHeight > el.clientHeight + 1);
   }, [body, expanded]);
   const parts = body.split(TOKEN);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapStyle, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapStyle2, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { ref, style: expanded ? expandedTextStyle : clampedTextStyle, children: parts.map(
       (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: LINK_COLOR }, children: part }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: part }, i)
     ) }),
@@ -1730,7 +1893,7 @@ function Caption({ body }) {
     ) : null
   ] });
 }
-var wrapStyle = {
+var wrapStyle2 = {
   fontSize: 14,
   lineHeight: 1.35
 };
@@ -1779,7 +1942,7 @@ function Media2({
         muted: true,
         loop: true,
         playsInline: true,
-        style: coverStyle
+        style: coverStyle2
       }
     );
   }
@@ -1806,7 +1969,7 @@ function PhotoCarousel({ media }) {
     };
   }, [emblaApi, sync]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "absolute", inset: 0 }, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle }) }, `${m.src}-${i}`)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle2 }) }, `${m.src}-${i}`)) }) }),
     media.length > 1 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: dotsStyle, children: media.map((m, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -1825,7 +1988,7 @@ function ProcessingMedia() {
     /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
   ] });
 }
-var coverStyle = {
+var coverStyle2 = {
   position: "absolute",
   inset: 0,
   width: "100%",
@@ -1951,7 +2114,7 @@ function TikTokPostPreviewImpl({
   const label = commercialLabel(variant.settings);
   const isAigc = Boolean(variant.settings?.is_aigc);
   const pending = (media?.length ?? 0) > 0 && resolvedMedia.length === 0;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...cardStyle, ...style }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: KEYFRAMES }),
     /* @__PURE__ */ jsxRuntime.jsx(Media2, { media: resolvedMedia, pending }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: scrimStyle }),
@@ -1998,7 +2161,7 @@ function Avatar({ url, name }) {
 function Disc({ url }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: discStyle, children: url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt: "", style: discImgStyle }) : null });
 }
-var cardStyle = {
+var cardStyle3 = {
   position: "relative",
   width: "100%",
   maxWidth: 320,
@@ -2373,7 +2536,7 @@ function TikTokCaptionField({
   const max = js.captionMaxFor(postType);
   const count = value.length;
   const over = count > max;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...wrapStyle2, ...style }, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...wrapStyle3, ...style }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelRowStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2407,7 +2570,7 @@ function TikTokCaptionField({
     )
   ] });
 }
-var wrapStyle2 = {
+var wrapStyle3 = {
   display: "flex",
   flexDirection: "column",
   gap: 6,
@@ -2674,12 +2837,15 @@ Object.defineProperty(exports, "captionMaxFor", {
   enumerable: true,
   get: function () { return js.captionMaxFor; }
 });
+exports.ArticleCard = ArticleCard;
 exports.AudienceSelect = AudienceSelect;
 exports.CommercialDisclosure = CommercialDisclosure;
 exports.Connect = Connect;
 exports.Declaration = Declaration;
+exports.DocumentCard = DocumentCard;
 exports.InteractionToggles = InteractionToggles;
 exports.LinkedInPostPreview = LinkedInPostPreview;
+exports.Poll = Poll;
 exports.PostrunProvider = PostrunProvider;
 exports.TikTokCaptionField = TikTokCaptionField;
 exports.TikTokPostPreview = TikTokPostPreview;