@postrun/react 2.4.0 → 2.6.0

package/dist/index.cjs

@@ -10,8 +10,8 @@ var pLimit = require('p-limit');
 var pRetry = require('p-retry');
 var axios = require('axios');
 var reactTweet = require('react-tweet');
-var fi = require('react-icons/fi');
 var jsxRuntime = require('react/jsx-runtime');
+var fi = require('react-icons/fi');
 var twitterText = require('twitter-text');
 var lu = require('react-icons/lu');
 var useEmblaCarousel = require('embla-carousel-react');
@@ -1040,6 +1040,37 @@ function useResolvedMedia(media, altFallbacks, altSignature) {
     [signature, altSignature, objectUrls]
   );
 }
+function XPoll({ poll }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapStyle, 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 \xB7 ",
+      js.xPollDurationLabel(poll.duration_minutes)
+    ] })
+  ] });
+}
+var BLUE = "var(--tweet-color-blue-primary, #1d9bf0)";
+var MUTED = "var(--tweet-color-gray-secondary, #536471)";
+var wrapStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8,
+  marginTop: 12
+};
+var optionStyle = {
+  border: `1px solid ${BLUE}`,
+  color: BLUE,
+  borderRadius: 999,
+  padding: "8px 16px",
+  textAlign: "center",
+  fontSize: 15,
+  fontWeight: 700
+};
+var footerStyle = {
+  fontSize: 13,
+  color: MUTED,
+  marginTop: 2
+};
 var ROW = {
   display: "flex",
   justifyContent: "space-between",
@@ -1280,6 +1311,7 @@ function XPostPreviewImpl({
         tweet.in_reply_to_screen_name ? /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetInReplyTo, { tweet }) : null,
         /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetBody, { tweet }),
         tweet.mediaDetails?.length ? /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetMedia, { tweet, components }) : null,
+        variant.settings?.poll ? /* @__PURE__ */ jsxRuntime.jsx(XPoll, { poll: variant.settings.poll }) : null,
         tweet.quoted_tweet ? /* @__PURE__ */ jsxRuntime.jsx(reactTweet.QuotedTweet, { tweet: tweet.quoted_tweet }) : null,
         showActions ? /* @__PURE__ */ jsxRuntime.jsx(XPreviewActions, {}) : null
       ] })
@@ -1342,6 +1374,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 +1632,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 +1682,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: wrapStyle2, 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: optionStyle2, children: option }, `${option}-${i}`)) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: footerStyle2, children: [
+      "0 votes \u2022 ",
+      js.linkedinPollDurationLabel(poll.duration)
+    ] })
+  ] });
+}
+var wrapStyle2 = {
+  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 optionStyle2 = {
+  border: `1px solid ${varRef(LI_VAR.accent)}`,
+  borderRadius: 999,
+  padding: "8px 16px",
+  textAlign: "center",
+  fontSize: 14,
+  fontWeight: 600,
+  color: varRef(LI_VAR.accent)
+};
+var footerStyle2 = {
+  fontSize: 12,
+  color: varRef(LI_VAR.muted)
+};
 var FOLD_CHARS = 200;
 var BODY_STYLE = {
   whiteSpace: "pre-wrap",
@@ -1672,7 +1851,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 +1862,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 +1872,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 +1908,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: wrapStyle3, 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 +1925,7 @@ function Caption({ body }) {
     ) : null
   ] });
 }
-var wrapStyle = {
+var wrapStyle3 = {
   fontSize: 14,
   lineHeight: 1.35
 };
@@ -1779,7 +1974,7 @@ function Media2({
         muted: true,
         loop: true,
         playsInline: true,
-        style: coverStyle
+        style: coverStyle2
       }
     );
   }
@@ -1806,7 +2001,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 +2020,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 +2146,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 +2193,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,
@@ -2185,7 +2380,7 @@ function useIsDark2(theme) {
   }
   return theme === "dark";
 }
-var MUTED = varRef2(TT_VAR.muted);
+var MUTED2 = varRef2(TT_VAR.muted);
 var BORDER = varRef2(TT_VAR.border);
 var ACCENT = varRef2(TT_VAR.accent);
 var SWITCH_OFF = varRef2(TT_VAR.switchOff);
@@ -2199,7 +2394,7 @@ function Row({
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("label", { htmlFor, style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14 }, children: label }),
-      sublabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: MUTED }, children: sublabel }) : null
+      sublabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: MUTED2 }, children: sublabel }) : null
     ] }),
     control
   ] });
@@ -2307,7 +2502,7 @@ var hintStyle = {
 var noticeStyle = {
   margin: 0,
   fontSize: 12,
-  color: MUTED,
+  color: MUTED2,
   lineHeight: 1.4
 };
 var checkRowStyle = {
@@ -2316,7 +2511,7 @@ var checkRowStyle = {
   gap: 10,
   cursor: "pointer"
 };
-var TOKENS = { MUTED, BORDER, ACCENT};
+var TOKENS = { MUTED: MUTED2, BORDER, ACCENT};
 function AudienceSelect({
   creatorInfo,
   value,
@@ -2373,7 +2568,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: { ...wrapStyle4, ...style }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelRowStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
       /* @__PURE__ */ jsxRuntime.jsxs(
@@ -2407,7 +2602,7 @@ function TikTokCaptionField({
     )
   ] });
 }
-var wrapStyle2 = {
+var wrapStyle4 = {
   display: "flex",
   flexDirection: "column",
   gap: 6,
@@ -2674,17 +2869,21 @@ 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;
 exports.TikTokPublishPanel = TikTokPublishPanel;
 exports.UploadError = UploadError;
+exports.XPoll = XPoll;
 exports.XPostPreview = XPostPreview;
 exports.connectionKeys = connectionKeys;
 exports.mediaKeys = mediaKeys;