@postrun/react 2.9.0 → 2.10.0

package/dist/index.d.cts

@@ -1899,6 +1899,8 @@ interface ReelPreviewProps {
     author: InstagramPreviewAuthor;
     body: string;
     media: readonly ResolvedMedia[];
+    /** Media is referenced but its pixels aren't resolved yet (still processing). */
+    pending?: boolean;
     /** The reel's audio label (`settings.audio_name`); defaults to "Original audio". */
     audioName?: string;
     className?: string;
@@ -1911,7 +1913,7 @@ interface ReelPreviewProps {
  * counts). Always dark, like the real Reels surface. The caption uses the shared
  * `ExpandableText` fold so the full text is readable (no silent truncation).
  */
-declare function ReelPreview({ author, body, media, audioName, className, style, }: ReelPreviewProps): react.JSX.Element;
+declare function ReelPreview({ author, body, media, pending, audioName, className, style, }: ReelPreviewProps): react.JSX.Element;
 
 /**
  * Public props for the TikTok post preview — a faithful render of how a post will

package/dist/index.d.ts

@@ -1899,6 +1899,8 @@ interface ReelPreviewProps {
     author: InstagramPreviewAuthor;
     body: string;
     media: readonly ResolvedMedia[];
+    /** Media is referenced but its pixels aren't resolved yet (still processing). */
+    pending?: boolean;
     /** The reel's audio label (`settings.audio_name`); defaults to "Original audio". */
     audioName?: string;
     className?: string;
@@ -1911,7 +1913,7 @@ interface ReelPreviewProps {
  * counts). Always dark, like the real Reels surface. The caption uses the shared
  * `ExpandableText` fold so the full text is readable (no silent truncation).
  */
-declare function ReelPreview({ author, body, media, audioName, className, style, }: ReelPreviewProps): react.JSX.Element;
+declare function ReelPreview({ author, body, media, pending, audioName, className, style, }: ReelPreviewProps): react.JSX.Element;
 
 /**
  * Public props for the TikTok post preview — a faithful render of how a post will

package/dist/index.js

@@ -1374,6 +1374,7 @@ function XPostPreviewImpl({
     resolvedQuotedMedia,
     replyToHandle
   ]);
+  const isEmpty = !variant.body && resolvedMedia.length === 0 && !variant.settings?.poll && !tweet.quoted_tweet;
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1383,7 +1384,7 @@ function XPostPreviewImpl({
       children: /* @__PURE__ */ jsxs(TweetContainer, { children: [
         /* @__PURE__ */ jsx(TweetHeader, { tweet, components }),
         tweet.in_reply_to_screen_name ? /* @__PURE__ */ jsx(TweetInReplyTo, { tweet }) : null,
-        /* @__PURE__ */ jsx(TweetBody, { tweet }),
+        isEmpty ? /* @__PURE__ */ jsx(EmptyBody, {}) : /* @__PURE__ */ jsx(TweetBody, { tweet }),
         tweet.mediaDetails?.length ? /* @__PURE__ */ jsx(TweetMedia, { tweet, components }) : null,
         variant.settings?.poll ? /* @__PURE__ */ jsx(XPoll, { poll: variant.settings.poll }) : null,
         tweet.quoted_tweet ? /* @__PURE__ */ jsx(QuotedTweet, { tweet: tweet.quoted_tweet }) : null,
@@ -1392,6 +1393,18 @@ function XPostPreviewImpl({
     }
   );
 }
+function EmptyBody() {
+  return /* @__PURE__ */ jsx("p", { style: emptyBodyStyle, children: "What's happening?" });
+}
+var emptyBodyStyle = {
+  margin: "var(--tweet-body-margin)",
+  fontSize: "var(--tweet-body-font-size)",
+  fontWeight: "var(--tweet-body-font-weight)",
+  lineHeight: "var(--tweet-body-line-height)",
+  color: "var(--tweet-font-color-secondary)",
+  whiteSpace: "pre-wrap",
+  overflowWrap: "break-word"
+};
 var XPostPreview = memo(XPostPreviewImpl);
 
 // src/preview/linkedin/theme.ts
@@ -1680,12 +1693,13 @@ function ImageMosaic({ media }) {
     return null;
   }
   if (media.length === 1) {
+    const ratio = only.width && only.height ? `${only.width} / ${only.height}` : void 0;
     return /* @__PURE__ */ jsx(
       "img",
       {
         src: only.src,
         alt: only.alt ?? "",
-        style: { width: "100%", height: "auto", display: "block" }
+        style: { width: "100%", height: "auto", display: "block", aspectRatio: ratio }
       }
     );
   }
@@ -1919,11 +1933,16 @@ 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",
     overflow: "hidden",
     fontFamily: FONT_STACK,
     ...style
   };
+  const hasContent = Boolean(variant.body) || resolvedMedia.length > 0 || Boolean(variant.settings?.content_kind && variant.settings.content_kind !== "text");
   return /* @__PURE__ */ jsxs("div", { className, style: cardStyle5, children: [
     /* @__PURE__ */ jsx(Header, { author, visibility, time }),
     variant.body ? /* @__PURE__ */ jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsx(
@@ -1935,9 +1954,16 @@ function LinkedInPostPreviewImpl({
       }
     ) }) : null,
     renderContent(variant, resolvedMedia),
+    hasContent ? null : /* @__PURE__ */ jsx("p", { style: { ...emptyBodyStyle2, color: BODY_COLORS.muted }, children: "What do you want to talk about?" }),
     showActions ? /* @__PURE__ */ jsx(EngagementBar, {}) : null
   ] });
 }
+var emptyBodyStyle2 = {
+  margin: 0,
+  padding: "8px 16px 4px",
+  fontSize: 14,
+  lineHeight: 1.4
+};
 function renderContent(variant, media) {
   const settings = variant.settings;
   const kind = settings?.content_kind;
@@ -2094,9 +2120,57 @@ var wrapStyle3 = {
   lineHeight: 1.4,
   color: varRef2(IG_VAR.text)
 };
-function FeedMedia({ media }) {
+function MediaPlaceholder({
+  label,
+  color,
+  background,
+  shimmer = false
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { ...fillStyle, background, color }, children: [
+    shimmer ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAME }),
+      /* @__PURE__ */ jsx("div", { style: shimmerStyle })
+    ] }) : null,
+    /* @__PURE__ */ 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
+}) {
   if (media.length <= 1) {
-    return /* @__PURE__ */ jsx("div", { style: frameStyle, children: media[0] ? /* @__PURE__ */ jsx(Tile2, { item: media[0] }) : null });
+    const item = media[0];
+    return /* @__PURE__ */ jsx("div", { style: frameStyle, children: item ? /* @__PURE__ */ jsx(Tile2, { item }) : /* @__PURE__ */ jsx(
+      MediaPlaceholder,
+      {
+        label: pending ? "Processing media\u2026" : "No media yet",
+        color: varRef2(IG_VAR.muted),
+        background: EMPTY_BG,
+        shimmer: pending
+      }
+    ) });
   }
   return /* @__PURE__ */ jsx(Carousel, { media });
 }
@@ -2145,6 +2219,7 @@ var frameStyle = {
   background: "#000",
   overflow: "hidden"
 };
+var EMPTY_BG = "light-dark(#efefef, #1c1c1c)";
 var mediaStyle = {
   position: "absolute",
   inset: 0,
@@ -2259,6 +2334,7 @@ function ReelPreview({
   author,
   body,
   media,
+  pending = false,
   audioName,
   className,
   style
@@ -2277,7 +2353,15 @@ function ReelPreview({
         playsInline: true,
         style: coverStyle2
       }
-    ) : /* @__PURE__ */ jsx("img", { src: first.src, alt: first.alt ?? "", style: coverStyle2 }) : null,
+    ) : /* @__PURE__ */ jsx("img", { src: first.src, alt: first.alt ?? "", style: coverStyle2 }) : /* @__PURE__ */ jsx(
+      MediaPlaceholder,
+      {
+        label: pending ? "Processing media\u2026" : "No media yet",
+        color: "rgba(255,255,255,0.55)",
+        background: "transparent",
+        shimmer: pending
+      }
+    ),
     /* @__PURE__ */ jsx("div", { style: scrimStyle }),
     /* @__PURE__ */ jsxs("div", { style: infoStyle, children: [
       /* @__PURE__ */ jsxs("div", { style: authorRowStyle, children: [
@@ -2382,6 +2466,7 @@ function InstagramPostPreviewImpl({
   );
   const settings = variant.settings;
   const isReel = variant.post_type === "reel";
+  const pending = (media?.length ?? 0) > 0 && resolvedMedia.length === 0;
   if (isReel) {
     return /* @__PURE__ */ jsx(
       ReelPreview,
@@ -2389,6 +2474,7 @@ function InstagramPostPreviewImpl({
         author,
         body: variant.body ?? "",
         media: resolvedMedia,
+        pending,
         audioName: settings?.audio_name,
         className,
         style
@@ -2403,14 +2489,20 @@ 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",
     overflow: "hidden",
     fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
     ...style
   };
   return /* @__PURE__ */ jsxs("div", { className, style: cardStyle5, children: [
     /* @__PURE__ */ jsx(Header2, { author, collaborators }),
-    /* @__PURE__ */ jsx(FeedMedia, { media: resolvedMedia }),
+    /* @__PURE__ */ jsx(FeedMedia, { media: resolvedMedia, pending }),
     /* @__PURE__ */ jsx(Actions, {}),
     variant.body ? /* @__PURE__ */ jsx("div", { style: { paddingBottom: 12 }, children: /* @__PURE__ */ jsx(Caption, { username: author.username, body: variant.body }) }) : null
   ] });
@@ -2435,7 +2527,15 @@ function Media2({
 }) {
   const [first] = media;
   if (!first) {
-    return pending ? /* @__PURE__ */ jsx(ProcessingMedia, {}) : /* @__PURE__ */ jsx(EmptyMedia, {});
+    return /* @__PURE__ */ jsx(
+      MediaPlaceholder,
+      {
+        label: pending ? "Processing media\u2026" : "No media yet",
+        color: "rgba(255,255,255,0.55)",
+        background: "linear-gradient(180deg,#1c1c20,#101013)",
+        shimmer: pending
+      }
+    );
   }
   if (first.kind === "video") {
     return /* @__PURE__ */ jsx(
@@ -2484,17 +2584,6 @@ function PhotoCarousel({ media }) {
     )) }) : null
   ] });
 }
-function EmptyMedia() {
-  return /* @__PURE__ */ jsx("div", { style: emptyStyle, children: "No media yet" });
-}
-function ProcessingMedia() {
-  return /* @__PURE__ */ jsxs("div", { style: emptyStyle, children: [
-    /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAME }),
-    /* @__PURE__ */ jsx("div", { style: shimmerStyle }),
-    /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
-  ] });
-}
-var SHIMMER_KEYFRAME = `@keyframes pr-tt-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`;
 var coverStyle3 = {
   position: "absolute",
   inset: 0,
@@ -2533,24 +2622,6 @@ var dotStyle2 = {
   background: "#fff",
   transition: "opacity 160ms ease"
 };
-var emptyStyle = {
-  position: "absolute",
-  inset: 0,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-  color: "rgba(255,255,255,0.55)",
-  fontSize: 13,
-  background: "linear-gradient(180deg,#1c1c20,#101013)",
-  overflow: "hidden"
-};
-var shimmerStyle = {
-  position: "absolute",
-  inset: 0,
-  background: "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0) 100%)",
-  backgroundSize: "200% 100%",
-  animation: "pr-tt-shimmer 1.4s ease-in-out infinite"
-};
 var Icon = ({
   size = 24,
   viewBox,
@@ -2798,7 +2869,7 @@ var discImgStyle = {
   borderRadius: "50%",
   objectFit: "cover"
 };
-var KEYFRAMES = `@keyframes pr-tt-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes pr-tt-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}`;
+var KEYFRAMES = `@keyframes pr-tt-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}`;
 var TikTokPostPreview = memo(TikTokPostPreviewImpl);
 
 // src/preview/tiktok/theme.ts
@@ -3020,7 +3091,7 @@ function TikTokCaptionField({
   const over = count > max;
   return /* @__PURE__ */ jsxs("div", { className, style: { ...wrapStyle5, ...style }, children: [
     /* @__PURE__ */ jsxs("div", { style: labelRowStyle, children: [
-      /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
+      /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle2, children: "Caption" }),
       /* @__PURE__ */ jsxs(
         "span",
         {
@@ -3063,7 +3134,7 @@ var labelRowStyle = {
   alignItems: "baseline",
   justifyContent: "space-between"
 };
-var labelStyle = {
+var labelStyle2 = {
   fontSize: 13,
   fontWeight: 600,
   color: "inherit"