@postrun/react 2.8.0 → 2.10.0

package/dist/index.cjs

@@ -1125,6 +1125,38 @@ var ACTIONS = [
 function XPreviewActions() {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { style: ROW, children: ACTIONS.map(({ label, Icon: Icon2 }) => /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: 18, "aria-label": label, role: "img" }, label)) });
 }
+function twitterMediaUrl(src) {
+  try {
+    const url = new URL(src);
+    const extension = url.pathname.split(".").pop();
+    if (!extension) {
+      return src;
+    }
+    url.pathname = url.pathname.replace(`.${extension}`, "");
+    url.searchParams.set("format", extension);
+    url.searchParams.set("name", "small");
+    return url.toString();
+  } catch {
+    return src;
+  }
+}
+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;
+}
+function makeRawMediaImg(rawBySrc) {
+  return function RawMediaImg(props) {
+    const raw = typeof props.src === "string" ? rawBySrc.get(props.src) ?? props.src : props.src;
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { ...props, src: raw });
+  };
+}
 var {
   extractCashtagsWithIndices,
   extractHashtagsWithIndices,
@@ -1175,9 +1207,12 @@ function buildUser(author) {
   return {
     id_str: "",
     name: author.name,
-    profile_image_url_https: author.avatarUrl ?? PLACEHOLDER_AVATAR,
+    profile_image_url_https: author.avatar_url ?? PLACEHOLDER_AVATAR,
     profile_image_shape: "Circle",
-    screen_name: author.handle,
+    // `username`/`avatar_url` derive from the SDK Connection and are nullable.
+    screen_name: author.username ?? "",
+    // Legacy (pre-X-era) verification flag — always false for organic posts; the
+    // X Blue checkmark rides on `is_blue_verified`.
     verified: false,
     is_blue_verified: verified
   };
@@ -1240,7 +1275,11 @@ function buildQuoted(quote, hasQuoteId) {
   if (!quote && !hasQuoteId) {
     return void 0;
   }
-  const author = quote?.author ?? { name: "Quoted post", handle: "" };
+  const author = quote?.author ?? {
+    name: "Quoted post",
+    username: "",
+    avatar_url: null
+  };
   const body = quote?.body ?? "";
   const media = quote?.media ?? [];
   return {
@@ -1306,7 +1345,7 @@ function XPostPreviewImpl({
   showActions = true,
   className,
   style,
-  components
+  components: componentsProp
 }) {
   const resolvedMedia = useResolvedMedia(
     media,
@@ -1314,6 +1353,15 @@ function XPostPreviewImpl({
     altSignatureOf(variant.media)
   );
   const resolvedQuotedMedia = useResolvedMedia(quotedTweet?.media, void 0, "");
+  const components = react.useMemo(
+    () => ({
+      MediaImg: makeRawMediaImg(
+        rawSrcLookup(resolvedMedia, resolvedQuotedMedia)
+      ),
+      ...componentsProp
+    }),
+    [resolvedMedia, resolvedQuotedMedia, componentsProp]
+  );
   const tweet = react.useMemo(() => {
     const resolvedQuoted = quotedTweet ? {
       author: quotedTweet.author,
@@ -1337,6 +1385,7 @@ function XPostPreviewImpl({
     resolvedQuotedMedia,
     replyToHandle
   ]);
+  const isEmpty = !variant.body && resolvedMedia.length === 0 && !variant.settings?.poll && !tweet.quoted_tweet;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -1346,7 +1395,7 @@ function XPostPreviewImpl({
       children: /* @__PURE__ */ jsxRuntime.jsxs(reactTweet.TweetContainer, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetHeader, { tweet, components }),
         tweet.in_reply_to_screen_name ? /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetInReplyTo, { tweet }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(reactTweet.TweetBody, { tweet }),
+        isEmpty ? /* @__PURE__ */ jsxRuntime.jsx(EmptyBody, {}) : /* @__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,
@@ -1355,6 +1404,18 @@ function XPostPreviewImpl({
     }
   );
 }
+function EmptyBody() {
+  return /* @__PURE__ */ jsxRuntime.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 = react.memo(XPostPreviewImpl);
 
 // src/preview/linkedin/theme.ts
@@ -1368,14 +1429,15 @@ var LI_VAR = {
 function varRef(name) {
   return `var(${name})`;
 }
+var PALETTE_VARS = {
+  [LI_VAR.bg]: "light-dark(#ffffff, #1b1f23)",
+  [LI_VAR.text]: "light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9))",
+  [LI_VAR.muted]: "light-dark(rgba(0,0,0,0.6), rgba(255,255,255,0.6))",
+  [LI_VAR.border]: "light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.15))",
+  [LI_VAR.accent]: "light-dark(rgb(10,102,194), rgb(112,181,249))"
+};
 function paletteVars() {
-  return {
-    [LI_VAR.bg]: "light-dark(#ffffff, #1b1f23)",
-    [LI_VAR.text]: "light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.9))",
-    [LI_VAR.muted]: "light-dark(rgba(0,0,0,0.6), rgba(255,255,255,0.6))",
-    [LI_VAR.border]: "light-dark(rgba(0,0,0,0.08), rgba(255,255,255,0.15))",
-    [LI_VAR.accent]: "light-dark(rgb(10,102,194), rgb(112,181,249))"
-  };
+  return PALETTE_VARS;
 }
 function colorSchemeFor(theme) {
   return theme === "auto" ? "light dark" : theme;
@@ -1521,7 +1583,7 @@ function Header({ author, visibility, time = "Now" }) {
     /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
-        src: author.avatarUrl ?? PLACEHOLDER_AVATAR2,
+        src: author.avatar_url ?? PLACEHOLDER_AVATAR2,
         alt: "",
         width: 48,
         height: 48,
@@ -1620,7 +1682,6 @@ function Tile({
     overlay ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        "aria-hidden": false,
         style: {
           position: "absolute",
           inset: 0,
@@ -1643,12 +1704,13 @@ function ImageMosaic({ media }) {
     return null;
   }
   if (media.length === 1) {
+    const ratio = only.width && only.height ? `${only.width} / ${only.height}` : void 0;
     return /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
         src: only.src,
         alt: only.alt ?? "",
-        style: { width: "100%", height: "auto", display: "block" }
+        style: { width: "100%", height: "auto", display: "block", aspectRatio: ratio }
       }
     );
   }
@@ -1791,7 +1853,18 @@ function linkify(text, colors, mentionNames) {
       );
     } else if (token.startsWith("#")) {
       nodes.push(
-        /* @__PURE__ */ jsxRuntime.jsx("a", { href: "#", style: linkStyle(colors.accent), children: token }, key++)
+        // Preview-only hashtag: no real destination, so prevent the host SPA from
+        // navigating / scrolling to top on click.
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: "#",
+            style: linkStyle(colors.accent),
+            onClick: (e) => e.preventDefault(),
+            children: token
+          },
+          key++
+        )
       );
     } else {
       nodes.push(
@@ -1809,32 +1882,41 @@ function PostBody({ text, mentionNames = [], colors }) {
   const [expanded, setExpanded] = react.useState(false);
   const isLong = text.length > FOLD_CHARS;
   const shown = isLong && !expanded ? truncateAtWord(text, FOLD_CHARS) : text;
+  const nodes = react.useMemo(
+    () => linkify(shown, colors, mentionNames),
+    [shown, colors, mentionNames]
+  );
+  const toggleStyle2 = {
+    background: "none",
+    border: "none",
+    padding: 0,
+    cursor: "pointer",
+    color: colors.muted,
+    fontWeight: 600,
+    fontSize: 14
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: BODY_STYLE, children: [
-    linkify(shown, colors, mentionNames),
-    isLong && !expanded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      "\u2026",
-      " ",
+    nodes,
+    isLong ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      !expanded ? "\u2026 " : " ",
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
           type: "button",
-          onClick: () => setExpanded(true),
-          style: {
-            background: "none",
-            border: "none",
-            padding: 0,
-            cursor: "pointer",
-            color: colors.muted,
-            fontWeight: 600,
-            fontSize: 14
-          },
-          children: "more"
+          "aria-expanded": expanded,
+          onClick: () => setExpanded((v) => !v),
+          style: toggleStyle2,
+          children: expanded ? "see less" : "more"
         }
       )
     ] }) : null
   ] });
 }
 var FONT_STACK = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif';
+var BODY_COLORS = {
+  accent: varRef(LI_VAR.accent),
+  muted: varRef(LI_VAR.muted)
+};
 function LinkedInPostPreviewImpl({
   variant,
   author,
@@ -1851,11 +1933,10 @@ function LinkedInPostPreviewImpl({
     altSignatureOf(variant.media)
   );
   const visibility = variant.settings?.visibility ?? "PUBLIC";
-  const mentionNames = (variant.settings?.mentions ?? []).map((m) => m.name);
-  const bodyColors = {
-    accent: varRef(LI_VAR.accent),
-    muted: varRef(LI_VAR.muted)
-  };
+  const mentionNames = react.useMemo(
+    () => (variant.settings?.mentions ?? []).map((m) => m.name),
+    [variant.settings?.mentions]
+  );
   const cardStyle5 = {
     ...paletteVars(),
     colorScheme: colorSchemeFor(theme),
@@ -1863,11 +1944,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__ */ jsxRuntime.jsxs("div", { className, style: cardStyle5, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header, { author, visibility, time }),
     variant.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -1875,13 +1961,20 @@ function LinkedInPostPreviewImpl({
       {
         text: variant.body,
         mentionNames,
-        colors: bodyColors
+        colors: BODY_COLORS
       }
     ) }) : null,
     renderContent(variant, resolvedMedia),
+    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
   ] });
 }
+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;
@@ -1911,14 +2004,15 @@ var IG_VAR = {
 function varRef2(name) {
   return `var(${name})`;
 }
+var PALETTE_VARS2 = {
+  [IG_VAR.bg]: "light-dark(#ffffff, #000000)",
+  [IG_VAR.text]: "light-dark(#000000, #f5f5f5)",
+  [IG_VAR.muted]: "light-dark(#737373, #a8a8a8)",
+  [IG_VAR.border]: "light-dark(#dbdbdb, #262626)",
+  [IG_VAR.accent]: "light-dark(#00376b, #e0f1ff)"
+};
 function paletteVars2() {
-  return {
-    [IG_VAR.bg]: "light-dark(#ffffff, #000000)",
-    [IG_VAR.text]: "light-dark(#000000, #f5f5f5)",
-    [IG_VAR.muted]: "light-dark(#737373, #a8a8a8)",
-    [IG_VAR.border]: "light-dark(#dbdbdb, #262626)",
-    [IG_VAR.accent]: "light-dark(#00376b, #e0f1ff)"
-  };
+  return PALETTE_VARS2;
 }
 function colorSchemeFor2(theme) {
   return theme === "auto" ? "light dark" : theme;
@@ -1959,7 +2053,14 @@ function ExpandableText({
     if (!el || expanded) {
       return;
     }
-    setOverflowing(el.scrollHeight > el.clientHeight + 1);
+    const measure = () => setOverflowing(el.scrollHeight > el.clientHeight + 1);
+    measure();
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
   }, [expanded, children]);
   const textStyle = expanded ? FULL : { ...FULL, ...clampStyle(lines) };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style, children: [
@@ -2013,10 +2114,10 @@ function Caption({
       toggleColor: varRef2(IG_VAR.muted),
       style: wrapStyle3,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600 }, children: [
+        username ? /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600 }, children: [
           username,
           " "
-        ] }),
+        ] }) : null,
         parts.map(
           (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: varRef2(IG_VAR.accent) }, children: part }, i) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: part }, i)
         )
@@ -2030,9 +2131,57 @@ var wrapStyle3 = {
   lineHeight: 1.4,
   color: varRef2(IG_VAR.text)
 };
-function FeedMedia({ media }) {
+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
+}) {
   if (media.length <= 1) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: frameStyle, children: media[0] ? /* @__PURE__ */ jsxRuntime.jsx(Tile2, { item: media[0] }) : null });
+    const item = media[0];
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { style: frameStyle, children: item ? /* @__PURE__ */ jsxRuntime.jsx(Tile2, { item }) : /* @__PURE__ */ jsxRuntime.jsx(
+      MediaPlaceholder,
+      {
+        label: pending ? "Processing media\u2026" : "No media yet",
+        color: varRef2(IG_VAR.muted),
+        background: EMPTY_BG,
+        shimmer: pending
+      }
+    ) });
   }
   return /* @__PURE__ */ jsxRuntime.jsx(Carousel, { media });
 }
@@ -2059,7 +2208,7 @@ function Carousel({ media }) {
     };
   }, [emblaApi, sync]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: frameStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", height: "100%" }, children: media.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Tile2, { item }) }, `${item.src}-${i}`)) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: emblaRef, style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", height: "100%" }, children: media.map((item) => /* @__PURE__ */ jsxRuntime.jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Tile2, { item }) }, item.src)) }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: pillStyle, children: [
       selected + 1,
       "/",
@@ -2070,7 +2219,7 @@ function Carousel({ media }) {
       {
         style: { ...dotStyle, opacity: i === selected ? 1 : 0.5 }
       },
-      `dot-${item.src}-${i}`
+      `dot-${item.src}`
     )) })
   ] });
 }
@@ -2081,6 +2230,7 @@ var frameStyle = {
   background: "#000",
   overflow: "hidden"
 };
+var EMPTY_BG = "light-dark(#efefef, #1c1c1c)";
 var mediaStyle = {
   position: "absolute",
   inset: 0,
@@ -2195,12 +2345,13 @@ function ReelPreview({
   author,
   body,
   media,
+  pending = false,
   audioName,
   className,
   style
 }) {
   const first = media[0];
-  const username = author.username ?? "";
+  const username = author.username;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
     first ? first.kind === "video" ? /* @__PURE__ */ jsxRuntime.jsx(
       "video",
@@ -2213,14 +2364,30 @@ function ReelPreview({
         playsInline: true,
         style: coverStyle2
       }
-    ) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: first.src, alt: first.alt ?? "", style: coverStyle2 }) : null,
+    ) : /* @__PURE__ */ jsxRuntime.jsx("img", { src: first.src, alt: first.alt ?? "", style: coverStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(
+      MediaPlaceholder,
+      {
+        label: pending ? "Processing media\u2026" : "No media yet",
+        color: "rgba(255,255,255,0.55)",
+        background: "transparent",
+        shimmer: pending
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: scrimStyle }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: infoStyle, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: authorRowStyle, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: username }),
+        username ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: username }) : null,
         author.verified ? /* @__PURE__ */ jsxRuntime.jsx(md.MdVerified, { size: 13, "aria-label": "Verified", role: "img", style: { color: "#fff" } }) : null
       ] }),
-      body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: captionStyle, children: body }) : null,
+      body ? /* @__PURE__ */ jsxRuntime.jsx(
+        ExpandableText,
+        {
+          lines: 2,
+          toggleColor: "rgba(255,255,255,0.7)",
+          style: captionStyle,
+          children: body
+        }
+      ) : null,
       /* @__PURE__ */ jsxRuntime.jsxs("div", { style: audioStyle, children: [
         /* @__PURE__ */ jsxRuntime.jsx(md.MdMusicNote, { size: 14, "aria-hidden": true }),
         /* @__PURE__ */ jsxRuntime.jsx("span", { children: audioName ?? "Original audio" })
@@ -2276,11 +2443,7 @@ var authorRowStyle = {
 };
 var captionStyle = {
   fontSize: 13,
-  lineHeight: 1.35,
-  display: "-webkit-box",
-  WebkitLineClamp: 2,
-  WebkitBoxOrient: "vertical",
-  overflow: "hidden"
+  lineHeight: 1.35
 };
 var audioStyle = {
   display: "flex",
@@ -2313,7 +2476,8 @@ function InstagramPostPreviewImpl({
     altSignatureOf(variant.media)
   );
   const settings = variant.settings;
-  const isReel = variant.post_type === "reel" || settings?.media_type === "REELS";
+  const isReel = variant.post_type === "reel";
+  const pending = (media?.length ?? 0) > 0 && resolvedMedia.length === 0;
   if (isReel) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ReelPreview,
@@ -2321,6 +2485,7 @@ function InstagramPostPreviewImpl({
         author,
         body: variant.body ?? "",
         media: resolvedMedia,
+        pending,
         audioName: settings?.audio_name,
         className,
         style
@@ -2335,16 +2500,22 @@ 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__ */ jsxRuntime.jsxs("div", { className, style: cardStyle5, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Header2, { author, collaborators }),
-    /* @__PURE__ */ jsxRuntime.jsx(FeedMedia, { media: resolvedMedia }),
+    /* @__PURE__ */ jsxRuntime.jsx(FeedMedia, { media: resolvedMedia, 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
+    variant.body ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: 12 }, children: /* @__PURE__ */ jsxRuntime.jsx(Caption, { username: author.username, body: variant.body }) }) : null
   ] });
 }
 var InstagramPostPreview = react.memo(InstagramPostPreviewImpl);
@@ -2367,7 +2538,15 @@ function Media2({
 }) {
   const [first] = media;
   if (!first) {
-    return pending ? /* @__PURE__ */ jsxRuntime.jsx(ProcessingMedia, {}) : /* @__PURE__ */ jsxRuntime.jsx(EmptyMedia, {});
+    return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
@@ -2416,15 +2595,6 @@ function PhotoCarousel({ media }) {
     )) }) : null
   ] });
 }
-function EmptyMedia() {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: emptyStyle, children: "No media yet" });
-}
-function ProcessingMedia() {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: emptyStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { style: shimmerStyle }),
-    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
-  ] });
-}
 var coverStyle3 = {
   position: "absolute",
   inset: 0,
@@ -2463,24 +2633,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,
@@ -2728,7 +2880,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 = react.memo(TikTokPostPreviewImpl);
 
 // src/preview/tiktok/theme.ts
@@ -2742,14 +2894,15 @@ var TT_VAR = {
 function varRef3(name) {
   return `var(${name})`;
 }
+var PALETTE_VARS3 = {
+  [TT_VAR.text]: "light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.92))",
+  [TT_VAR.muted]: "light-dark(rgba(0,0,0,0.55), #8a8a92)",
+  [TT_VAR.border]: "light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.14))",
+  [TT_VAR.accent]: "#fe2c55",
+  [TT_VAR.switchOff]: "light-dark(rgba(0,0,0,0.18), rgba(255,255,255,0.22))"
+};
 function paletteVars3() {
-  return {
-    [TT_VAR.text]: "light-dark(rgba(0,0,0,0.9), rgba(255,255,255,0.92))",
-    [TT_VAR.muted]: "light-dark(rgba(0,0,0,0.55), #8a8a92)",
-    [TT_VAR.border]: "light-dark(rgba(0,0,0,0.12), rgba(255,255,255,0.14))",
-    [TT_VAR.accent]: "#fe2c55",
-    [TT_VAR.switchOff]: "light-dark(rgba(0,0,0,0.18), rgba(255,255,255,0.22))"
-  };
+  return PALETTE_VARS3;
 }
 function colorSchemeFor3(theme) {
   return theme === "auto" ? "light dark" : theme;
@@ -2765,11 +2918,17 @@ function Row({
   control,
   htmlFor
 }) {
+  const text = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 14 }, children: label }),
+    sublabel ? /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: MUTED2 }, children: sublabel }) : null
+  ] });
+  const textStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle3, 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: MUTED2 }, children: sublabel }) : null
-    ] }),
+    htmlFor ? /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor, style: textStyle, children: text }) : /* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children: text }),
     control
   ] });
 }
@@ -2891,7 +3050,6 @@ function AudienceSelect({
   value,
   onChange
 }) {
-  const id = react.useId();
   const options = js.audiencePrivacyOptions(creatorInfo.privacy_options, value);
   const unselected = js.audienceUnselected(value);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
@@ -2899,7 +3057,7 @@ function AudienceSelect({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
-        id,
+        "aria-label": "Who can view this post",
         value: value.privacy_level ?? "",
         onChange: (e) => onChange({
           ...value,
@@ -2944,7 +3102,7 @@ function TikTokCaptionField({
   const over = count > max;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...wrapStyle5, ...style }, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelRowStyle, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
+      /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: id, style: labelStyle2, children: "Caption" }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         "span",
         {
@@ -2987,7 +3145,7 @@ var labelRowStyle = {
   alignItems: "baseline",
   justifyContent: "space-between"
 };
-var labelStyle = {
+var labelStyle2 = {
   fontSize: 13,
   fontWeight: 600,
   color: "inherit"