@postrun/react 2.8.0 → 2.9.0

package/dist/index.d.cts

@@ -1631,29 +1631,31 @@ declare function useTikTokCreatorInfo(connectionId: string | null): _tanstack_re
 /** The identity fields our `Connection` stores — the SDK-driven base every
  * preview author derives from (so the field names + nullability match the API). */
 type ConnectionIdentity = Pick<Connection, 'username' | 'avatar_url'>;
-/** The author identity rendered in an X preview header. */
-interface XPreviewAuthor {
-    /** Display name, e.g. "Acme Studio". */
+/**
+ * The author identity rendered in an X preview header. `username` (the `@handle`)
+ * and `avatar_url` are DERIVED from the SDK `Connection`; `name` (the display
+ * name) and `verified` are presentation extras our API doesn't store.
+ */
+type XPreviewAuthor = ConnectionIdentity & {
+    /** Display name, e.g. "Acme Studio". NOT on Connection — caller-supplied. */
     name: string;
-    /** Handle WITHOUT the leading `@`, e.g. "acmestudio". */
-    handle: string;
-    /** Avatar image URL. Omit for a neutral placeholder. */
-    avatarUrl?: string;
-    /** Show the verified badge. Default false. */
+    /** Show the verified badge. NOT on Connection — caller-supplied. */
     verified?: boolean;
-}
-/** The author identity rendered in a LinkedIn preview header. LinkedIn shows a
- * name + a one-line headline (role/tagline), not an `@handle`. */
-interface LinkedInPreviewAuthor {
-    /** Display name, e.g. "Acme Studio". */
+};
+/**
+ * The author identity rendered in a LinkedIn preview header. LinkedIn shows a
+ * display `name` + a one-line `headline`. `username`/`avatar_url` are DERIVED
+ * from the SDK `Connection`; `name`/`headline`/`verified` are presentation extras
+ * our API doesn't store (LinkedIn's `username` is also documented as NULL today).
+ */
+type LinkedInPreviewAuthor = ConnectionIdentity & {
+    /** Display name, e.g. "Acme Studio". NOT on Connection — caller-supplied. */
     name: string;
-    /** One-line headline under the name, e.g. "Founder & CEO at Acme". */
+    /** One-line headline under the name. NOT on Connection — caller-supplied. */
     headline?: string;
-    /** Avatar image URL. Omit for a neutral placeholder. */
-    avatarUrl?: string;
-    /** Show the verified badge. Default false. */
+    /** Show the verified badge. NOT on Connection — caller-supplied. */
     verified?: boolean;
-}
+};
 /**
  * The author identity rendered in an Instagram preview header. Instagram shows
  * the `username` (no separate display name) + an optional verified badge.
@@ -1744,7 +1746,7 @@ interface XPostPreviewProps {
  * preview. Fully customizable: restyle via `className`/`style` (CSS variables)
  * or swap internals via `components`; theme light/dark/auto.
  */
-declare function XPostPreviewImpl({ variant, author, media, quotedTweet, replyToHandle, theme, showActions, className, style, components, }: XPostPreviewProps): react.JSX.Element;
+declare function XPostPreviewImpl({ variant, author, media, quotedTweet, replyToHandle, theme, showActions, className, style, components: componentsProp, }: XPostPreviewProps): react.JSX.Element;
 /** Memoized: re-renders only when its props change (the resolved-media hook
  * already absorbs unstable media arrays). */
 declare const XPostPreview: react.MemoExoticComponent<typeof XPostPreviewImpl>;
@@ -1893,20 +1895,23 @@ declare function InstagramPostPreviewImpl({ variant, author, media, theme, class
 /** Memoized: the resolved-media hook absorbs unstable media arrays. */
 declare const InstagramPostPreview: react.MemoExoticComponent<typeof InstagramPostPreviewImpl>;
 
-/**
- * An Instagram Reel preview — the 9:16 vertical card: full-bleed video, the
- * username/verified + caption overlaid bottom-left, an audio row ("♪ <audio>"),
- * and the right action rail (like/comment/share/save/more — no fabricated
- * counts). Always dark, like the real Reels surface.
- */
-declare function ReelPreview({ author, body, media, audioName, className, style, }: {
+interface ReelPreviewProps {
     author: InstagramPreviewAuthor;
     body: string;
     media: readonly ResolvedMedia[];
+    /** The reel's audio label (`settings.audio_name`); defaults to "Original audio". */
     audioName?: string;
     className?: string;
     style?: CSSProperties;
-}): react.JSX.Element;
+}
+/**
+ * An Instagram Reel preview — the 9:16 vertical card: full-bleed video, the
+ * username/verified + caption overlaid bottom-left, an audio row ("♪ <audio>"),
+ * and the right action rail (like/comment/share/save/more — no fabricated
+ * 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;
 
 /**
  * Public props for the TikTok post preview — a faithful render of how a post will
@@ -2041,4 +2046,4 @@ declare function Declaration({ brandedContent }: {
     brandedContent: boolean;
 }): react.JSX.Element;
 
-export { ArticleCard, type ArticleCardProps, AudienceSelect, type CalendarFilters, CommercialDisclosure, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionsFilter, Declaration, type DiscoverableAccount, DocumentCard, type DocumentCardProps, type InfiniteList, InstagramPostPreview, type InstagramPostPreviewProps, type InstagramPreviewAuthor, type InstagramTheme, InteractionToggles, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, Poll, type PollProps, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, ReelPreview, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPoll, type XPollProps, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, toPreviewMedia, useCalendar, useConnect, useConnection, useConnections, useCreatePost, useCreateProfile, useDeleteMedia, useDeletePost, useDeleteProfile, useDisconnect, useDiscoverableAccounts, useInfiniteList, useMedia, useMediaInfinite, useMediaList, useMediaUpload, usePost, usePostrun, usePosts, usePostsInfinite, useProfile, useProfiles, useProfilesInfinite, useSelectAccount, useTikTokCreatorInfo, useUpdateMedia, useUpdatePost, useUpdateProfile, useValidatePost };
+export { ArticleCard, type ArticleCardProps, AudienceSelect, type CalendarFilters, CommercialDisclosure, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionIdentity, type ConnectionsFilter, Declaration, type DiscoverableAccount, DocumentCard, type DocumentCardProps, type InfiniteList, InstagramPostPreview, type InstagramPostPreviewProps, type InstagramPreviewAuthor, type InstagramTheme, InteractionToggles, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, Poll, type PollProps, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, ReelPreview, type ReelPreviewProps, type ResolvedMedia, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPoll, type XPollProps, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, toPreviewMedia, useCalendar, useConnect, useConnection, useConnections, useCreatePost, useCreateProfile, useDeleteMedia, useDeletePost, useDeleteProfile, useDisconnect, useDiscoverableAccounts, useInfiniteList, useMedia, useMediaInfinite, useMediaList, useMediaUpload, usePost, usePostrun, usePosts, usePostsInfinite, useProfile, useProfiles, useProfilesInfinite, useSelectAccount, useTikTokCreatorInfo, useUpdateMedia, useUpdatePost, useUpdateProfile, useValidatePost };

package/dist/index.d.ts

@@ -1631,29 +1631,31 @@ declare function useTikTokCreatorInfo(connectionId: string | null): _tanstack_re
 /** The identity fields our `Connection` stores — the SDK-driven base every
  * preview author derives from (so the field names + nullability match the API). */
 type ConnectionIdentity = Pick<Connection, 'username' | 'avatar_url'>;
-/** The author identity rendered in an X preview header. */
-interface XPreviewAuthor {
-    /** Display name, e.g. "Acme Studio". */
+/**
+ * The author identity rendered in an X preview header. `username` (the `@handle`)
+ * and `avatar_url` are DERIVED from the SDK `Connection`; `name` (the display
+ * name) and `verified` are presentation extras our API doesn't store.
+ */
+type XPreviewAuthor = ConnectionIdentity & {
+    /** Display name, e.g. "Acme Studio". NOT on Connection — caller-supplied. */
     name: string;
-    /** Handle WITHOUT the leading `@`, e.g. "acmestudio". */
-    handle: string;
-    /** Avatar image URL. Omit for a neutral placeholder. */
-    avatarUrl?: string;
-    /** Show the verified badge. Default false. */
+    /** Show the verified badge. NOT on Connection — caller-supplied. */
     verified?: boolean;
-}
-/** The author identity rendered in a LinkedIn preview header. LinkedIn shows a
- * name + a one-line headline (role/tagline), not an `@handle`. */
-interface LinkedInPreviewAuthor {
-    /** Display name, e.g. "Acme Studio". */
+};
+/**
+ * The author identity rendered in a LinkedIn preview header. LinkedIn shows a
+ * display `name` + a one-line `headline`. `username`/`avatar_url` are DERIVED
+ * from the SDK `Connection`; `name`/`headline`/`verified` are presentation extras
+ * our API doesn't store (LinkedIn's `username` is also documented as NULL today).
+ */
+type LinkedInPreviewAuthor = ConnectionIdentity & {
+    /** Display name, e.g. "Acme Studio". NOT on Connection — caller-supplied. */
     name: string;
-    /** One-line headline under the name, e.g. "Founder & CEO at Acme". */
+    /** One-line headline under the name. NOT on Connection — caller-supplied. */
     headline?: string;
-    /** Avatar image URL. Omit for a neutral placeholder. */
-    avatarUrl?: string;
-    /** Show the verified badge. Default false. */
+    /** Show the verified badge. NOT on Connection — caller-supplied. */
     verified?: boolean;
-}
+};
 /**
  * The author identity rendered in an Instagram preview header. Instagram shows
  * the `username` (no separate display name) + an optional verified badge.
@@ -1744,7 +1746,7 @@ interface XPostPreviewProps {
  * preview. Fully customizable: restyle via `className`/`style` (CSS variables)
  * or swap internals via `components`; theme light/dark/auto.
  */
-declare function XPostPreviewImpl({ variant, author, media, quotedTweet, replyToHandle, theme, showActions, className, style, components, }: XPostPreviewProps): react.JSX.Element;
+declare function XPostPreviewImpl({ variant, author, media, quotedTweet, replyToHandle, theme, showActions, className, style, components: componentsProp, }: XPostPreviewProps): react.JSX.Element;
 /** Memoized: re-renders only when its props change (the resolved-media hook
  * already absorbs unstable media arrays). */
 declare const XPostPreview: react.MemoExoticComponent<typeof XPostPreviewImpl>;
@@ -1893,20 +1895,23 @@ declare function InstagramPostPreviewImpl({ variant, author, media, theme, class
 /** Memoized: the resolved-media hook absorbs unstable media arrays. */
 declare const InstagramPostPreview: react.MemoExoticComponent<typeof InstagramPostPreviewImpl>;
 
-/**
- * An Instagram Reel preview — the 9:16 vertical card: full-bleed video, the
- * username/verified + caption overlaid bottom-left, an audio row ("♪ <audio>"),
- * and the right action rail (like/comment/share/save/more — no fabricated
- * counts). Always dark, like the real Reels surface.
- */
-declare function ReelPreview({ author, body, media, audioName, className, style, }: {
+interface ReelPreviewProps {
     author: InstagramPreviewAuthor;
     body: string;
     media: readonly ResolvedMedia[];
+    /** The reel's audio label (`settings.audio_name`); defaults to "Original audio". */
     audioName?: string;
     className?: string;
     style?: CSSProperties;
-}): react.JSX.Element;
+}
+/**
+ * An Instagram Reel preview — the 9:16 vertical card: full-bleed video, the
+ * username/verified + caption overlaid bottom-left, an audio row ("♪ <audio>"),
+ * and the right action rail (like/comment/share/save/more — no fabricated
+ * 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;
 
 /**
  * Public props for the TikTok post preview — a faithful render of how a post will
@@ -2041,4 +2046,4 @@ declare function Declaration({ brandedContent }: {
     brandedContent: boolean;
 }): react.JSX.Element;
 
-export { ArticleCard, type ArticleCardProps, AudienceSelect, type CalendarFilters, CommercialDisclosure, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionsFilter, Declaration, type DiscoverableAccount, DocumentCard, type DocumentCardProps, type InfiniteList, InstagramPostPreview, type InstagramPostPreviewProps, type InstagramPreviewAuthor, type InstagramTheme, InteractionToggles, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, Poll, type PollProps, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, ReelPreview, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPoll, type XPollProps, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, toPreviewMedia, useCalendar, useConnect, useConnection, useConnections, useCreatePost, useCreateProfile, useDeleteMedia, useDeletePost, useDeleteProfile, useDisconnect, useDiscoverableAccounts, useInfiniteList, useMedia, useMediaInfinite, useMediaList, useMediaUpload, usePost, usePostrun, usePosts, usePostsInfinite, useProfile, useProfiles, useProfilesInfinite, useSelectAccount, useTikTokCreatorInfo, useUpdateMedia, useUpdatePost, useUpdateProfile, useValidatePost };
+export { ArticleCard, type ArticleCardProps, AudienceSelect, type CalendarFilters, CommercialDisclosure, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionIdentity, type ConnectionsFilter, Declaration, type DiscoverableAccount, DocumentCard, type DocumentCardProps, type InfiniteList, InstagramPostPreview, type InstagramPostPreviewProps, type InstagramPreviewAuthor, type InstagramTheme, InteractionToggles, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, Poll, type PollProps, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, ReelPreview, type ReelPreviewProps, type ResolvedMedia, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPoll, type XPollProps, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, toPreviewMedia, useCalendar, useConnect, useConnection, useConnections, useCreatePost, useCreateProfile, useDeleteMedia, useDeletePost, useDeleteProfile, useDisconnect, useDiscoverableAccounts, useInfiniteList, useMedia, useMediaInfinite, useMediaList, useMediaUpload, usePost, usePostrun, usePosts, usePostsInfinite, useProfile, useProfiles, useProfilesInfinite, useSelectAccount, useTikTokCreatorInfo, useUpdateMedia, useUpdatePost, useUpdateProfile, useValidatePost };

package/dist/index.js

@@ -1,5 +1,5 @@
 "use client";
-import { createContext, memo, useMemo, useState, useEffect, Fragment as Fragment$1, useCallback, useRef, useLayoutEffect, createElement, useContext, useId } from 'react';
+import { createContext, memo, useMemo, useState, useEffect, Fragment as Fragment$1, useRef, useLayoutEffect, useCallback, createElement, useContext, useId } from 'react';
 import { useInfiniteQuery, useQuery, useMutation, QueryClient } from '@tanstack/react-query';
 import { xPollDurationLabel, linkedinPollDurationLabel, createPostrunClient, profilesList, profilesGet, profilesCreate, profilesUpdate, profilesDelete, connectionsConnect, connectionsListByProfile, connectionsGet, connectionsListAccounts, connectionsSelect, connectionsDelete, mediaGet, mediaList, mediaUpdate, mediaDelete, postsList, postsGet, postsCreate, buildCreatePost, isPostPlatform, failedVariants, isPublished, postsValidate, postsUpdate, postsDelete, tiktokCreatorInfo, audiencePrivacyOptions, audienceUnselected, tiktokPrivacyLabel, parsePrivacyLevel, TIKTOK_AUDIENCE_REQUIRED_HINT, captionMaxFor, commercialLabelNotice, commercialDisclosureIncomplete, setCommercialDisclosure, setBrandKind, TIKTOK_DISCLOSURE_REQUIRED_HINT, TIKTOK_BRANDED_CONTENT_POLICY_URL, TIKTOK_MUSIC_CONFIRMATION_URL, interactionRows, interactionValueKey, toggleInteraction, tiktokOptionsReady, TIKTOK_PROCESSING_NOTICE, brandedContentDeclared, mediaCreate, PostrunError } from '@postrun/js';
 export { TIKTOK_CAPTION_MAX, captionMaxFor } from '@postrun/js';
@@ -1114,6 +1114,38 @@ var ACTIONS = [
 function XPreviewActions() {
   return /* @__PURE__ */ jsx("div", { style: ROW, children: ACTIONS.map(({ label, Icon: Icon2 }) => /* @__PURE__ */ 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__ */ jsx("img", { ...props, src: raw });
+  };
+}
 var {
   extractCashtagsWithIndices,
   extractHashtagsWithIndices,
@@ -1164,9 +1196,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
   };
@@ -1229,7 +1264,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 {
@@ -1295,7 +1334,7 @@ function XPostPreviewImpl({
   showActions = true,
   className,
   style,
-  components
+  components: componentsProp
 }) {
   const resolvedMedia = useResolvedMedia(
     media,
@@ -1303,6 +1342,15 @@ function XPostPreviewImpl({
     altSignatureOf(variant.media)
   );
   const resolvedQuotedMedia = useResolvedMedia(quotedTweet?.media, void 0, "");
+  const components = useMemo(
+    () => ({
+      MediaImg: makeRawMediaImg(
+        rawSrcLookup(resolvedMedia, resolvedQuotedMedia)
+      ),
+      ...componentsProp
+    }),
+    [resolvedMedia, resolvedQuotedMedia, componentsProp]
+  );
   const tweet = useMemo(() => {
     const resolvedQuoted = quotedTweet ? {
       author: quotedTweet.author,
@@ -1357,14 +1405,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;
@@ -1510,7 +1559,7 @@ function Header({ author, visibility, time = "Now" }) {
     /* @__PURE__ */ jsx(
       "img",
       {
-        src: author.avatarUrl ?? PLACEHOLDER_AVATAR2,
+        src: author.avatar_url ?? PLACEHOLDER_AVATAR2,
         alt: "",
         width: 48,
         height: 48,
@@ -1609,7 +1658,6 @@ function Tile({
     overlay ? /* @__PURE__ */ jsx(
       "div",
       {
-        "aria-hidden": false,
         style: {
           position: "absolute",
           inset: 0,
@@ -1780,7 +1828,18 @@ function linkify(text, colors, mentionNames) {
       );
     } else if (token.startsWith("#")) {
       nodes.push(
-        /* @__PURE__ */ 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__ */ jsx(
+          "a",
+          {
+            href: "#",
+            style: linkStyle(colors.accent),
+            onClick: (e) => e.preventDefault(),
+            children: token
+          },
+          key++
+        )
       );
     } else {
       nodes.push(
@@ -1798,32 +1857,41 @@ function PostBody({ text, mentionNames = [], colors }) {
   const [expanded, setExpanded] = useState(false);
   const isLong = text.length > FOLD_CHARS;
   const shown = isLong && !expanded ? truncateAtWord(text, FOLD_CHARS) : text;
+  const nodes = 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__ */ jsxs("div", { style: BODY_STYLE, children: [
-    linkify(shown, colors, mentionNames),
-    isLong && !expanded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      "\u2026",
-      " ",
+    nodes,
+    isLong ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      !expanded ? "\u2026 " : " ",
       /* @__PURE__ */ 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,
@@ -1840,11 +1908,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 = useMemo(
+    () => (variant.settings?.mentions ?? []).map((m) => m.name),
+    [variant.settings?.mentions]
+  );
   const cardStyle5 = {
     ...paletteVars(),
     colorScheme: colorSchemeFor(theme),
@@ -1864,7 +1931,7 @@ function LinkedInPostPreviewImpl({
       {
         text: variant.body,
         mentionNames,
-        colors: bodyColors
+        colors: BODY_COLORS
       }
     ) }) : null,
     renderContent(variant, resolvedMedia),
@@ -1900,14 +1967,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;
@@ -1948,7 +2016,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__ */ jsxs("div", { style, children: [
@@ -2002,10 +2077,10 @@ function Caption({
       toggleColor: varRef2(IG_VAR.muted),
       style: wrapStyle3,
       children: [
-        /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
+        username ? /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600 }, children: [
           username,
           " "
-        ] }),
+        ] }) : null,
         parts.map(
           (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsx("span", { style: { color: varRef2(IG_VAR.accent) }, children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
         )
@@ -2048,7 +2123,7 @@ function Carousel({ media }) {
     };
   }, [emblaApi, sync]);
   return /* @__PURE__ */ jsxs("div", { style: frameStyle, children: [
-    /* @__PURE__ */ jsx("div", { ref: emblaRef, style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", height: "100%" }, children: media.map((item, i) => /* @__PURE__ */ jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsx(Tile2, { item }) }, `${item.src}-${i}`)) }) }),
+    /* @__PURE__ */ jsx("div", { ref: emblaRef, style: { position: "absolute", inset: 0, overflow: "hidden" }, children: /* @__PURE__ */ jsx("div", { style: { display: "flex", height: "100%" }, children: media.map((item) => /* @__PURE__ */ jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsx(Tile2, { item }) }, item.src)) }) }),
     /* @__PURE__ */ jsxs("div", { style: pillStyle, children: [
       selected + 1,
       "/",
@@ -2059,7 +2134,7 @@ function Carousel({ media }) {
       {
         style: { ...dotStyle, opacity: i === selected ? 1 : 0.5 }
       },
-      `dot-${item.src}-${i}`
+      `dot-${item.src}`
     )) })
   ] });
 }
@@ -2189,7 +2264,7 @@ function ReelPreview({
   style
 }) {
   const first = media[0];
-  const username = author.username ?? "";
+  const username = author.username;
   return /* @__PURE__ */ jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
     first ? first.kind === "video" ? /* @__PURE__ */ jsx(
       "video",
@@ -2206,10 +2281,18 @@ function ReelPreview({
     /* @__PURE__ */ jsx("div", { style: scrimStyle }),
     /* @__PURE__ */ jsxs("div", { style: infoStyle, children: [
       /* @__PURE__ */ jsxs("div", { style: authorRowStyle, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: username }),
+        username ? /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontSize: 14 }, children: username }) : null,
         author.verified ? /* @__PURE__ */ jsx(MdVerified, { size: 13, "aria-label": "Verified", role: "img", style: { color: "#fff" } }) : null
       ] }),
-      body ? /* @__PURE__ */ jsx("div", { style: captionStyle, children: body }) : null,
+      body ? /* @__PURE__ */ jsx(
+        ExpandableText,
+        {
+          lines: 2,
+          toggleColor: "rgba(255,255,255,0.7)",
+          style: captionStyle,
+          children: body
+        }
+      ) : null,
       /* @__PURE__ */ jsxs("div", { style: audioStyle, children: [
         /* @__PURE__ */ jsx(MdMusicNote, { size: 14, "aria-hidden": true }),
         /* @__PURE__ */ jsx("span", { children: audioName ?? "Original audio" })
@@ -2265,11 +2348,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",
@@ -2302,7 +2381,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__ */ jsx(
       ReelPreview,
@@ -2333,7 +2412,7 @@ function InstagramPostPreviewImpl({
     /* @__PURE__ */ jsx(Header2, { author, collaborators }),
     /* @__PURE__ */ jsx(FeedMedia, { media: resolvedMedia }),
     /* @__PURE__ */ jsx(Actions, {}),
-    variant.body ? /* @__PURE__ */ jsx("div", { style: { paddingBottom: 12 }, children: /* @__PURE__ */ jsx(Caption, { username: author.username ?? "", body: variant.body }) }) : null
+    variant.body ? /* @__PURE__ */ jsx("div", { style: { paddingBottom: 12 }, children: /* @__PURE__ */ jsx(Caption, { username: author.username, body: variant.body }) }) : null
   ] });
 }
 var InstagramPostPreview = memo(InstagramPostPreviewImpl);
@@ -2410,10 +2489,12 @@ function EmptyMedia() {
 }
 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,
@@ -2731,14 +2812,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;
@@ -2754,11 +2836,17 @@ function Row({
   control,
   htmlFor
 }) {
+  const text = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: label }),
+    sublabel ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: MUTED2 }, children: sublabel }) : null
+  ] });
+  const textStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2
+  };
   return /* @__PURE__ */ jsxs("div", { style: rowStyle3, children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor, style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 14 }, children: label }),
-      sublabel ? /* @__PURE__ */ jsx("span", { style: { fontSize: 12, color: MUTED2 }, children: sublabel }) : null
-    ] }),
+    htmlFor ? /* @__PURE__ */ jsx("label", { htmlFor, style: textStyle, children: text }) : /* @__PURE__ */ jsx("span", { style: textStyle, children: text }),
     control
   ] });
 }
@@ -2880,7 +2968,6 @@ function AudienceSelect({
   value,
   onChange
 }) {
-  const id = useId();
   const options = audiencePrivacyOptions(creatorInfo.privacy_options, value);
   const unselected = audienceUnselected(value);
   return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8 }, children: [
@@ -2888,7 +2975,7 @@ function AudienceSelect({
     /* @__PURE__ */ jsxs(
       "select",
       {
-        id,
+        "aria-label": "Who can view this post",
         value: value.privacy_level ?? "",
         onChange: (e) => onChange({
           ...value,