@postrun/react 2.13.0 → 2.14.0

package/dist/index.cjs

@@ -929,96 +929,93 @@ function useTikTokCreatorInfo(connectionId) {
   );
 }
 
-// src/preview/from-upload.ts
-function previewKind(item) {
-  const detected = item.media?.kind;
-  if (detected) {
-    return detected === "document" ? null : detected;
-  }
-  const mime = item.file.type;
-  if (mime === "image/gif") {
-    return "gif";
-  }
-  if (mime.startsWith("video/")) {
-    return "video";
-  }
-  if (mime.startsWith("image/")) {
-    return "image";
+// src/preview/media-resolver.ts
+function previewKind(kind) {
+  return kind === "image" || kind === "video" || kind === "gif" ? kind : null;
+}
+function resourceFor(ref, fallback) {
+  if ("media" in ref && ref.media) {
+    return ref.media;
   }
-  return null;
+  return fallback?.find((asset) => asset.id === ref.media_id);
 }
-function toPreviewMedia(items) {
-  return items.flatMap((item) => {
-    const kind = previewKind(item);
+function renditionFor(asset, target) {
+  return asset.per_platform[target];
+}
+function resolveVariantMedia(refs, target, fallback) {
+  return (refs ?? []).flatMap((ref) => {
+    const asset = resourceFor(ref, fallback);
+    if (!asset) {
+      return [];
+    }
+    const kind = previewKind(asset.kind);
     if (!kind) {
       return [];
     }
-    return [
-      {
-        kind,
-        file: item.file,
-        width: item.media?.source?.width ?? void 0,
-        height: item.media?.source?.height ?? void 0,
-        alt: item.media?.alt_text ?? void 0
-      }
-    ];
-  });
-}
-function fileKey(file) {
-  return file ? `${file.name}:${file.size}:${file.lastModified}` : "";
-}
-function mediaSignature(media) {
-  return (media ?? []).map((item) => {
-    const source = item.url ?? fileKey(item.file);
-    const size = `${item.width ?? ""}x${item.height ?? ""}`;
-    return `${item.kind}|${source}|${item.posterUrl ?? ""}|${size}|${item.alt ?? ""}`;
-  }).join("\xA7");
-}
-function altSignatureOf(media) {
-  return (media ?? []).map((m) => m?.alt_text_override ?? "").join("\xA7");
-}
-function useResolvedMedia(media, altFallbacks, altSignature) {
-  const signature = mediaSignature(media);
-  const [objectUrls, setObjectUrls] = react.useState({});
-  react.useEffect(() => {
-    const created = [];
-    const next = {};
-    (media ?? []).forEach((item, index) => {
-      if (!item.url && item.file) {
-        const url = URL.createObjectURL(item.file);
-        created.push(url);
-        next[index] = url;
-      }
-    });
-    setObjectUrls(next);
-    return () => {
-      for (const url of created) {
-        URL.revokeObjectURL(url);
-      }
-    };
-  }, [signature]);
-  return react.useMemo(
-    () => (media ?? []).flatMap((item, index) => {
-      const src = item.url ?? objectUrls[index];
-      if (!src) {
-        return [];
-      }
+    const alt = ref.alt_text_override ?? asset.alt_text ?? void 0;
+    const width = asset.source?.width ?? void 0;
+    const height = asset.source?.height ?? void 0;
+    const rendition = renditionFor(asset, target);
+    if (asset.status === "ready" && rendition?.status === "ready" && rendition.url) {
       return [
         {
-          kind: item.kind,
-          src,
-          width: item.width,
-          height: item.height,
-          alt: item.alt ?? altFallbacks?.[index]?.alt_text_override ?? void 0,
-          posterSrc: item.posterUrl
+          kind,
+          state: "ready",
+          src: rendition.url,
+          width: rendition.width ?? width,
+          height: rendition.height ?? height,
+          alt
         }
       ];
-    }),
-    // `signature` + `altSignature` capture the content; `objectUrls` flips once
-    // File blobs resolve. Referencing `media`/`altFallbacks` directly is safe.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [signature, altSignature, objectUrls]
-  );
+    }
+    return [{ kind, state: "processing", width, height, alt }];
+  });
+}
+function MediaPlaceholder({
+  label,
+  color,
+  background,
+  shimmer = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...fillStyle, background, color }, children: [
+    shimmer ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("style", { children: SHIMMER_KEYFRAME }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { style: shimmerStyle })
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: label })
+  ] });
+}
+var SHIMMER_KEYFRAME = "@keyframes pr-media-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}";
+var fillStyle = {
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  overflow: "hidden"
+};
+var labelStyle = {
+  position: "relative",
+  zIndex: 1,
+  fontSize: 13,
+  letterSpacing: 0.1
+};
+var shimmerStyle = {
+  position: "absolute",
+  inset: 0,
+  background: "linear-gradient(90deg, transparent 0%, color-mix(in srgb, currentColor 12%, transparent) 50%, transparent 100%)",
+  backgroundSize: "200% 100%",
+  animation: "pr-media-shimmer 1.4s ease-in-out infinite"
+};
+
+// src/preview/types.ts
+function isReadyMedia(item) {
+  return item.state === "ready";
+}
+
+// src/preview/author.ts
+function authorName(connection) {
+  return connection.external_account_name ?? connection.username ?? "";
 }
 function XPoll({ poll }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: wrapStyle, children: [
@@ -1087,9 +1084,7 @@ function rawSrcLookup(...lists) {
   const map = /* @__PURE__ */ new Map();
   for (const list of lists) {
     for (const item of list) {
-      const poster = item.posterSrc ?? item.src;
       map.set(twitterMediaUrl(item.src), item.src);
-      map.set(twitterMediaUrl(poster), poster);
     }
   }
   return map;
@@ -1184,7 +1179,7 @@ function buildPhoto(media) {
   };
 }
 function buildVideo(media) {
-  const poster = media.posterSrc ?? media.src;
+  const poster = media.src;
   const videoInfo = {
     aspect_ratio: [media.width ?? 16, media.height ?? 9],
     variants: [{ content_type: "video/mp4", url: media.src }]
@@ -1280,8 +1275,9 @@ function toTweet(input) {
 }
 function XPostPreviewImpl({
   variant,
-  author,
+  connection,
   media,
+  verified,
   quotedTweet,
   replyToHandle,
   theme = "auto",
@@ -1290,45 +1286,53 @@ function XPostPreviewImpl({
   style,
   components: componentsProp
 }) {
-  const resolvedMedia = useResolvedMedia(
-    media,
-    variant.media,
-    altSignatureOf(variant.media)
+  const resolved = react.useMemo(
+    () => resolveVariantMedia(variant.media, "x", media),
+    [variant.media, media]
+  );
+  const readyMedia = react.useMemo(() => resolved.filter(isReadyMedia), [resolved]);
+  const readyQuotedMedia = react.useMemo(
+    () => (quotedTweet?.media ?? []).filter(isReadyMedia),
+    [quotedTweet?.media]
+  );
+  const mediaPending = resolved.length > 0 && readyMedia.length === 0;
+  const author = react.useMemo(
+    () => ({
+      name: authorName(connection),
+      username: connection.username,
+      avatar_url: connection.avatar_url,
+      verified
+    }),
+    [connection, verified]
   );
-  const resolvedQuotedMedia = useResolvedMedia(quotedTweet?.media, void 0, "");
   const components = react.useMemo(
     () => ({
-      MediaImg: makeRawMediaImg(
-        rawSrcLookup(resolvedMedia, resolvedQuotedMedia)
-      ),
+      MediaImg: makeRawMediaImg(rawSrcLookup(readyMedia, readyQuotedMedia)),
       ...componentsProp
     }),
-    [resolvedMedia, resolvedQuotedMedia, componentsProp]
+    [readyMedia, readyQuotedMedia, componentsProp]
   );
   const tweet = react.useMemo(() => {
     const resolvedQuoted = quotedTweet ? {
-      author: quotedTweet.author,
+      author: {
+        name: quotedTweet.name,
+        username: quotedTweet.username,
+        avatar_url: quotedTweet.avatar_url
+      },
       body: quotedTweet.body,
-      media: resolvedQuotedMedia
+      media: readyQuotedMedia
     } : void 0;
     return reactTweet.enrichTweet(
       toTweet({
         variant,
         author,
-        media: resolvedMedia,
+        media: readyMedia,
         quotedTweet: resolvedQuoted,
         replyToHandle
       })
     );
-  }, [
-    variant,
-    author,
-    resolvedMedia,
-    quotedTweet,
-    resolvedQuotedMedia,
-    replyToHandle
-  ]);
-  const isEmpty = !variant.body && resolvedMedia.length === 0 && !variant.settings?.poll && !tweet.quoted_tweet;
+  }, [variant, author, readyMedia, quotedTweet, readyQuotedMedia, replyToHandle]);
+  const isEmpty = !variant.body && resolved.length === 0 && !variant.settings?.poll && !tweet.quoted_tweet;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1340,6 +1344,7 @@ function XPostPreviewImpl({
         tweet.in_reply_to_screen_name ? /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetInReplyTo, { tweet }) : null,
         isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyBody, {}) : /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetBody, { tweet }),
         tweet.mediaDetails?.length ? /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetMedia, { tweet, components }) : null,
+        mediaPending ? /* @__PURE__ */ jsxRuntime.jsx(ProcessingTile, {}) : 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
@@ -1347,6 +1352,26 @@ function XPostPreviewImpl({
     }
   );
 }
+function ProcessingTile() {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: processingFrameStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+    MediaPlaceholder,
+    {
+      label: "Processing media\u2026",
+      color: "var(--tweet-font-color-secondary, #536471)",
+      background: "color-mix(in srgb, currentColor 6%, transparent)",
+      shimmer: true
+    }
+  ) });
+}
+var processingFrameStyle = {
+  position: "relative",
+  width: "100%",
+  aspectRatio: "16 / 9",
+  marginTop: "var(--tweet-body-margin, 12px)",
+  borderRadius: 16,
+  overflow: "hidden",
+  border: "1px solid var(--tweet-color-gray-secondary, rgba(15,20,25,0.1))"
+};
 function EmptyBody() {
   return /* @__PURE__ */ jsxRuntime.jsx("p", { style: emptyBodyStyle, children: "What's happening?" });
 }
@@ -1674,7 +1699,6 @@ function VideoTile({ item }) {
     "video",
     {
       src: item.src,
-      poster: item.posterSrc,
       controls: true,
       style: { width: "100%", display: "block", background: "#000" }
     }
@@ -1862,18 +1886,30 @@ var BODY_COLORS = {
 };
 function LinkedInPostPreviewImpl({
   variant,
-  author,
+  connection,
   media,
+  headline,
+  verified,
   theme = "auto",
   time,
   showActions = true,
   className,
   style
 }) {
-  const resolvedMedia = useResolvedMedia(
-    media,
-    variant.media,
-    altSignatureOf(variant.media)
+  const resolved = react.useMemo(
+    () => resolveVariantMedia(variant.media, "linkedin", media),
+    [variant.media, media]
+  );
+  const readyMedia = react.useMemo(() => resolved.filter(isReadyMedia), [resolved]);
+  const mediaPending = resolved.length > 0 && readyMedia.length === 0;
+  const author = react.useMemo(
+    () => ({
+      name: authorName(connection),
+      avatar_url: connection.avatar_url,
+      headline,
+      verified
+    }),
+    [connection, headline, verified]
   );
   const visibility = variant.settings?.visibility ?? "PUBLIC";
   const mentionNames = react.useMemo(
@@ -1887,8 +1923,6 @@ function LinkedInPostPreviewImpl({
     color: varRef(LI_VAR.text),
     border: `1px solid ${varRef(LI_VAR.border)}`,
     borderRadius: 10,
-    // Pin the width (see InstagramPostPreview): without it the card shrinks to its
-    // content, so an empty post collapses to a fraction of a populated card's width.
     width: "100%",
     maxWidth: 552,
     boxSizing: "border-box",
@@ -1896,9 +1930,18 @@ function LinkedInPostPreviewImpl({
     fontFamily: FONT_STACK,
     ...style
   };
-  const hasContent = Boolean(variant.body) || resolvedMedia.length > 0 || Boolean(variant.settings?.content_kind && variant.settings.content_kind !== "text");
+  const hasContent = Boolean(variant.body) || resolved.length > 0 || Boolean(
+    variant.settings?.content_kind && variant.settings.content_kind !== "text"
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: cardStyle5, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Header, { author, visibility, time }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Header,
+      {
+        author,
+        visibility,
+        time
+      }
+    ),
     variant.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
       PostBody,
       {
@@ -1907,7 +1950,7 @@ function LinkedInPostPreviewImpl({
         colors: BODY_COLORS
       }
     ) }) : null,
-    renderContent(variant, resolvedMedia),
+    renderContent(variant, readyMedia, mediaPending),
     hasContent ? null : /* @__PURE__ */ jsxRuntime.jsx("p", { style: { ...emptyBodyStyle2, color: BODY_COLORS.muted }, children: "What do you want to talk about?" }),
     showActions ? /* @__PURE__ */ jsxRuntime.jsx(EngagementBar, {}) : null
   ] });
@@ -1918,7 +1961,7 @@ var emptyBodyStyle2 = {
   fontSize: 14,
   lineHeight: 1.4
 };
-function renderContent(variant, media) {
+function renderContent(variant, media, pending) {
   const settings = variant.settings;
   const kind = settings?.content_kind;
   const [firstMedia] = media;
@@ -1931,9 +1974,29 @@ function renderContent(variant, media) {
   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;
+  if (media.length > 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(Media, { media }) });
+  }
+  if (pending) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: processingFrameStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(
+      MediaPlaceholder,
+      {
+        label: "Processing media\u2026",
+        color: varRef(LI_VAR.muted),
+        background: varRef(LI_VAR.border),
+        shimmer: true
+      }
+    ) });
+  }
+  return null;
 }
 var INSET = { padding: "12px 16px 0" };
+var processingFrameStyle2 = {
+  position: "relative",
+  width: "100%",
+  height: 272,
+  marginTop: 12
+};
 var LinkedInPostPreview = react.memo(LinkedInPostPreviewImpl);
 
 // src/preview/instagram/theme.ts
@@ -2074,42 +2137,6 @@ var wrapStyle3 = {
   lineHeight: 1.4,
   color: varRef2(IG_VAR.text)
 };
-function MediaPlaceholder({
-  label,
-  color,
-  background,
-  shimmer = false
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...fillStyle, background, color }, children: [
-    shimmer ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("style", { children: SHIMMER_KEYFRAME }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: shimmerStyle })
-    ] }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle, children: label })
-  ] });
-}
-var SHIMMER_KEYFRAME = "@keyframes pr-media-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}";
-var fillStyle = {
-  position: "absolute",
-  inset: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  overflow: "hidden"
-};
-var labelStyle = {
-  position: "relative",
-  zIndex: 1,
-  fontSize: 13,
-  letterSpacing: 0.1
-};
-var shimmerStyle = {
-  position: "absolute",
-  inset: 0,
-  background: "linear-gradient(90deg, transparent 0%, color-mix(in srgb, currentColor 12%, transparent) 50%, transparent 100%)",
-  backgroundSize: "200% 100%",
-  animation: "pr-media-shimmer 1.4s ease-in-out infinite"
-};
 function FeedMedia({
   media,
   pending = false
@@ -2130,7 +2157,7 @@ function FeedMedia({
 }
 function Tile2({ item }) {
   if (item.kind === "video") {
-    return /* @__PURE__ */ jsxRuntime.jsx("video", { src: item.src, poster: item.posterSrc, controls: true, style: mediaStyle });
+    return /* @__PURE__ */ jsxRuntime.jsx("video", { src: item.src, controls: true, style: mediaStyle });
   }
   return /* @__PURE__ */ jsxRuntime.jsx("img", { src: item.src, alt: item.alt ?? "", style: mediaStyle });
 }
@@ -2300,7 +2327,6 @@ function ReelPreview({
       "video",
       {
         src: first.src,
-        poster: first.posterSrc,
         autoPlay: true,
         muted: true,
         loop: true,
@@ -2407,27 +2433,32 @@ var railStyle = {
 };
 function InstagramPostPreviewImpl({
   variant,
-  author,
+  connection,
   media,
+  verified,
   theme = "auto",
   className,
   style
 }) {
-  const resolvedMedia = useResolvedMedia(
-    media,
-    variant.media,
-    altSignatureOf(variant.media)
+  const resolved = react.useMemo(
+    () => resolveVariantMedia(variant.media, "instagram", media),
+    [variant.media, media]
+  );
+  const readyMedia = react.useMemo(() => resolved.filter(isReadyMedia), [resolved]);
+  const pending = resolved.length > 0 && readyMedia.length === 0;
+  const author = react.useMemo(
+    () => ({ username: connection.username, avatar_url: connection.avatar_url, verified }),
+    [connection, verified]
   );
   const settings = variant.settings;
   const isReel = variant.post_type === "reel";
-  const pending = (media?.length ?? 0) > 0 && resolvedMedia.length === 0;
   if (isReel) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ReelPreview,
       {
         author,
         body: variant.body ?? "",
-        media: resolvedMedia,
+        media: readyMedia,
         pending,
         audioName: settings?.audio_name,
         className,
@@ -2443,10 +2474,6 @@ function InstagramPostPreviewImpl({
     color: varRef2(IG_VAR.text),
     border: `1px solid ${varRef2(IG_VAR.border)}`,
     borderRadius: 8,
-    // Fill the container up to IG's feed width. WITHOUT an explicit width the card
-    // shrinks to its content, so an empty post (no caption/media to widen it) would
-    // collapse to a fraction of a populated card's width — a jarring size change as
-    // you type. Pinning width keeps every state the SAME size (zero layout shift).
     width: "100%",
     maxWidth: 470,
     boxSizing: "border-box",
@@ -2456,7 +2483,7 @@ function InstagramPostPreviewImpl({
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: cardStyle5, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header2, { author, collaborators }),
-    /* @__PURE__ */ jsxRuntime.jsx(FeedMedia, { media: resolvedMedia, pending }),
+    /* @__PURE__ */ jsxRuntime.jsx(FeedMedia, { media: readyMedia, pending }),
     /* @__PURE__ */ jsxRuntime.jsx(Actions, {}),
     variant.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(Caption, { username: author.username, body: variant.body }) }) : null
   ] });
@@ -2496,7 +2523,6 @@ function Media2({
       "video",
       {
         src: first.src,
-        poster: first.posterSrc,
         autoPlay: true,
         muted: true,
         loop: true,
@@ -2636,19 +2662,19 @@ function TikTokPostPreviewImpl({
   className,
   style
 }) {
-  const resolvedMedia = useResolvedMedia(
-    media,
-    variant.media,
-    altSignatureOf(variant.media)
+  const resolved = react.useMemo(
+    () => resolveVariantMedia(variant.media, "tiktok", media),
+    [variant.media, media]
   );
+  const readyMedia = react.useMemo(() => resolved.filter(isReadyMedia), [resolved]);
   const { creator } = creatorInfo;
   const handle = creator.username || creator.nickname;
   const label = commercialLabel(variant.settings);
   const isAigc = Boolean(variant.settings?.is_aigc);
-  const pending = (media?.length ?? 0) > 0 && resolvedMedia.length === 0;
+  const pending = resolved.length > 0 && readyMedia.length === 0;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...cardStyle4, ...style }, children: [
     /* @__PURE__ */ jsxRuntime.jsx("style", { children: KEYFRAMES }),
-    /* @__PURE__ */ jsxRuntime.jsx(Media2, { media: resolvedMedia, pending }),
+    /* @__PURE__ */ jsxRuntime.jsx(Media2, { media: readyMedia, pending }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: scrimStyle2 }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: infoStyle2, children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { style: usernameStyle, children: handle }),
@@ -3366,11 +3392,12 @@ exports.TikTokPublishPanel = TikTokPublishPanel;
 exports.XPoll = XPoll;
 exports.XPostPreview = XPostPreview;
 exports.connectionKeys = connectionKeys;
+exports.isReadyMedia = isReadyMedia;
 exports.mediaKeys = mediaKeys;
 exports.postKeys = postKeys;
 exports.profileKeys = profileKeys;
+exports.resolveVariantMedia = resolveVariantMedia;
 exports.tiktokKeys = tiktokKeys;
-exports.toPreviewMedia = toPreviewMedia;
 exports.useCalendar = useCalendar;
 exports.useConnect = useConnect;
 exports.useConnection = useConnection;