@postrun/react 2.8.0 → 2.9.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,
@@ -1368,14 +1416,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 +1570,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 +1669,6 @@ function Tile({
     overlay ? /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        "aria-hidden": false,
         style: {
           position: "absolute",
           inset: 0,
@@ -1791,7 +1839,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 +1868,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 +1919,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),
@@ -1875,7 +1942,7 @@ function LinkedInPostPreviewImpl({
       {
         text: variant.body,
         mentionNames,
-        colors: bodyColors
+        colors: BODY_COLORS
       }
     ) }) : null,
     renderContent(variant, resolvedMedia),
@@ -1911,14 +1978,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 +2027,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 +2088,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)
         )
@@ -2059,7 +2134,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 +2145,7 @@ function Carousel({ media }) {
       {
         style: { ...dotStyle, opacity: i === selected ? 1 : 0.5 }
       },
-      `dot-${item.src}-${i}`
+      `dot-${item.src}`
     )) })
   ] });
 }
@@ -2200,7 +2275,7 @@ function ReelPreview({
   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",
@@ -2217,10 +2292,18 @@ function ReelPreview({
     /* @__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 +2359,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 +2392,7 @@ 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";
   if (isReel) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       ReelPreview,
@@ -2344,7 +2423,7 @@ function InstagramPostPreviewImpl({
     /* @__PURE__ */ jsxRuntime.jsx(Header2, { author, collaborators }),
     /* @__PURE__ */ jsxRuntime.jsx(FeedMedia, { media: resolvedMedia }),
     /* @__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);
@@ -2421,10 +2500,12 @@ function EmptyMedia() {
 }
 function ProcessingMedia() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: emptyStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: SHIMMER_KEYFRAME }),
     /* @__PURE__ */ jsxRuntime.jsx("div", { style: shimmerStyle }),
     /* @__PURE__ */ jsxRuntime.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,
@@ -2742,14 +2823,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 +2847,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 +2979,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 +2986,7 @@ function AudienceSelect({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "select",
       {
-        id,
+        "aria-label": "Who can view this post",
         value: value.privacy_level ?? "",
         onChange: (e) => onChange({
           ...value,