@postrun/react 2.4.0 → 2.5.0

package/dist/index.d.cts

@@ -1675,6 +1675,16 @@ interface PreviewMedia {
 }
 /** @deprecated Use {@link PreviewMedia}. Kept as an alias for back-compat. */
 type XPreviewMedia = PreviewMedia;
+/** A media item with its pixels already resolved to a single URL by the
+ * component (shared by every platform preview's renderer). */
+interface ResolvedMedia {
+    kind: PreviewMediaKind;
+    src: string;
+    width?: number;
+    height?: number;
+    alt?: string;
+    posterSrc?: string;
+}
 /**
  * Content for the nested quoted card. Supplied separately because our schema
  * carries only an opaque `quote_tweet_id` (no quoted text/author).
@@ -1736,8 +1746,9 @@ type LinkedInTheme = 'light' | 'dark' | 'auto';
  * with headline + audience icon, an entity-highlighted body with the "…more"
  * fold, the 1/2/3/4/+N image mosaic (or a video), and a static action bar.
  *
- * v1 renders text + images + video. The richer `content_kind`s (article, poll,
- * document) degrade gracefully to the text/media card and arrive next.
+ * Renders every `content_kind`: text, single/multi image, video, plus the rich
+ * units — article share card, poll, and document — each driven from
+ * `settings.{article,poll,document}` (see `renderContent`).
  *
  * Customize via `theme` (light/dark/auto), `className`/`style`, or by overriding
  * the `--pr-li-*` CSS variables the card reads.
@@ -1765,6 +1776,51 @@ declare function LinkedInPostPreviewImpl({ variant, author, media, theme, time,
  * absorbs unstable media arrays). */
 declare const LinkedInPostPreview: react.MemoExoticComponent<typeof LinkedInPostPreviewImpl>;
 
+/**
+ * A LinkedIn article share card (`content_kind: 'article'`) — the link unit
+ * LinkedIn renders below the commentary: an optional thumbnail, then a panel with
+ * the source domain (muted), the headline (bold), and the optional description.
+ * Driven straight from `settings.article`; the thumbnail pixels (resolved from
+ * `article.thumbnail_media_id`) are passed in by the host.
+ */
+/** The article settings shape — derived from the contract, never re-declared. */
+type LinkedInArticle = NonNullable<NonNullable<LinkedInPostVariant['settings']>['article']>;
+interface ArticleCardProps {
+    article: LinkedInArticle;
+    /** Resolved thumbnail pixels (from `article.thumbnail_media_id`), if any. */
+    thumbnail?: ResolvedMedia;
+}
+declare function ArticleCard({ article, thumbnail }: ArticleCardProps): react.JSX.Element;
+
+/**
+ * A LinkedIn poll (`content_kind: 'poll'`) — the question, the 2–4 option rows
+ * (rendered as the pre-vote outlined buttons LinkedIn shows), and the footer
+ * ("0 votes • <duration>"). A fresh poll has no votes, so we never fabricate
+ * counts. Driven straight from `settings.poll`.
+ */
+/** The poll settings shape — derived from the contract, never re-declared. */
+type LinkedInPoll = NonNullable<NonNullable<LinkedInPostVariant['settings']>['poll']>;
+interface PollProps {
+    poll: LinkedInPoll;
+}
+declare function Poll({ poll }: PollProps): react.JSX.Element;
+
+/**
+ * A LinkedIn document post (`content_kind: 'document'`) — the PDF/slide unit
+ * LinkedIn renders as a page preview with a dark caption bar (title + "Document").
+ * The document asset rides on the variant `media[]`; if the host resolves a
+ * first-page image it shows here, otherwise a clean document affordance. Title is
+ * required by the contract, so it always renders. Driven by `settings.document`.
+ */
+/** The document settings shape — derived from the contract, never re-declared. */
+type LinkedInDocument = NonNullable<NonNullable<LinkedInPostVariant['settings']>['document']>;
+interface DocumentCardProps {
+    document: LinkedInDocument;
+    /** Resolved first-page pixels (from the document asset on media[]), if any. */
+    cover?: ResolvedMedia;
+}
+declare function DocumentCard({ document, cover }: DocumentCardProps): react.JSX.Element;
+
 /**
  * Public props for the TikTok post preview — a faithful render of how a post will
  * look on TikTok, driven straight from our Post object plus the live creator info
@@ -1897,4 +1953,4 @@ declare function Declaration({ brandedContent }: {
     brandedContent: boolean;
 }): react.JSX.Element;
 
-export { AudienceSelect, type CalendarFilters, CommercialDisclosure, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionsFilter, Declaration, type DiscoverableAccount, type InfiniteList, InteractionToggles, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, 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 ConnectionsFilter, Declaration, type DiscoverableAccount, DocumentCard, type DocumentCardProps, type InfiniteList, 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, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, 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

@@ -1675,6 +1675,16 @@ interface PreviewMedia {
 }
 /** @deprecated Use {@link PreviewMedia}. Kept as an alias for back-compat. */
 type XPreviewMedia = PreviewMedia;
+/** A media item with its pixels already resolved to a single URL by the
+ * component (shared by every platform preview's renderer). */
+interface ResolvedMedia {
+    kind: PreviewMediaKind;
+    src: string;
+    width?: number;
+    height?: number;
+    alt?: string;
+    posterSrc?: string;
+}
 /**
  * Content for the nested quoted card. Supplied separately because our schema
  * carries only an opaque `quote_tweet_id` (no quoted text/author).
@@ -1736,8 +1746,9 @@ type LinkedInTheme = 'light' | 'dark' | 'auto';
  * with headline + audience icon, an entity-highlighted body with the "…more"
  * fold, the 1/2/3/4/+N image mosaic (or a video), and a static action bar.
  *
- * v1 renders text + images + video. The richer `content_kind`s (article, poll,
- * document) degrade gracefully to the text/media card and arrive next.
+ * Renders every `content_kind`: text, single/multi image, video, plus the rich
+ * units — article share card, poll, and document — each driven from
+ * `settings.{article,poll,document}` (see `renderContent`).
  *
  * Customize via `theme` (light/dark/auto), `className`/`style`, or by overriding
  * the `--pr-li-*` CSS variables the card reads.
@@ -1765,6 +1776,51 @@ declare function LinkedInPostPreviewImpl({ variant, author, media, theme, time,
  * absorbs unstable media arrays). */
 declare const LinkedInPostPreview: react.MemoExoticComponent<typeof LinkedInPostPreviewImpl>;
 
+/**
+ * A LinkedIn article share card (`content_kind: 'article'`) — the link unit
+ * LinkedIn renders below the commentary: an optional thumbnail, then a panel with
+ * the source domain (muted), the headline (bold), and the optional description.
+ * Driven straight from `settings.article`; the thumbnail pixels (resolved from
+ * `article.thumbnail_media_id`) are passed in by the host.
+ */
+/** The article settings shape — derived from the contract, never re-declared. */
+type LinkedInArticle = NonNullable<NonNullable<LinkedInPostVariant['settings']>['article']>;
+interface ArticleCardProps {
+    article: LinkedInArticle;
+    /** Resolved thumbnail pixels (from `article.thumbnail_media_id`), if any. */
+    thumbnail?: ResolvedMedia;
+}
+declare function ArticleCard({ article, thumbnail }: ArticleCardProps): react.JSX.Element;
+
+/**
+ * A LinkedIn poll (`content_kind: 'poll'`) — the question, the 2–4 option rows
+ * (rendered as the pre-vote outlined buttons LinkedIn shows), and the footer
+ * ("0 votes • <duration>"). A fresh poll has no votes, so we never fabricate
+ * counts. Driven straight from `settings.poll`.
+ */
+/** The poll settings shape — derived from the contract, never re-declared. */
+type LinkedInPoll = NonNullable<NonNullable<LinkedInPostVariant['settings']>['poll']>;
+interface PollProps {
+    poll: LinkedInPoll;
+}
+declare function Poll({ poll }: PollProps): react.JSX.Element;
+
+/**
+ * A LinkedIn document post (`content_kind: 'document'`) — the PDF/slide unit
+ * LinkedIn renders as a page preview with a dark caption bar (title + "Document").
+ * The document asset rides on the variant `media[]`; if the host resolves a
+ * first-page image it shows here, otherwise a clean document affordance. Title is
+ * required by the contract, so it always renders. Driven by `settings.document`.
+ */
+/** The document settings shape — derived from the contract, never re-declared. */
+type LinkedInDocument = NonNullable<NonNullable<LinkedInPostVariant['settings']>['document']>;
+interface DocumentCardProps {
+    document: LinkedInDocument;
+    /** Resolved first-page pixels (from the document asset on media[]), if any. */
+    cover?: ResolvedMedia;
+}
+declare function DocumentCard({ document, cover }: DocumentCardProps): react.JSX.Element;
+
 /**
  * Public props for the TikTok post preview — a faithful render of how a post will
  * look on TikTok, driven straight from our Post object plus the live creator info
@@ -1897,4 +1953,4 @@ declare function Declaration({ brandedContent }: {
     brandedContent: boolean;
 }): react.JSX.Element;
 
-export { AudienceSelect, type CalendarFilters, CommercialDisclosure, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionsFilter, Declaration, type DiscoverableAccount, type InfiniteList, InteractionToggles, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, 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 ConnectionsFilter, Declaration, type DiscoverableAccount, DocumentCard, type DocumentCardProps, type InfiniteList, 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, TikTokCaptionField, type TikTokCaptionFieldProps, TikTokPostPreview, type TikTokPostPreviewProps, TikTokPublishPanel, type TikTokPublishPanelProps, type TikTokTheme, UploadError, type UseConnectParams, type UseConnectResult, type UseMediaUploadOptions, type UseMediaUploadResult, XPostPreview, type XPostPreviewProps, type XPreviewAuthor, type XPreviewMedia, type XPreviewQuotedTweet, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, 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,7 +1,7 @@
 "use client";
 import { createContext, memo, useMemo, useState, useEffect, useRef, useLayoutEffect, Fragment as Fragment$1, useCallback, createElement, useContext, useId } from 'react';
 import { useInfiniteQuery, useQuery, useMutation, QueryClient } from '@tanstack/react-query';
-import { 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';
+import { 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';
 import Nango, { AuthError } from '@nangohq/frontend';
 import pWaitFor, { TimeoutError } from 'p-wait-for';
@@ -9,7 +9,7 @@ import pLimit from 'p-limit';
 import pRetry, { AbortError } from 'p-retry';
 import axios, { isAxiosError } from 'axios';
 import { enrichTweet, TweetContainer, TweetHeader, TweetInReplyTo, TweetBody, TweetMedia, QuotedTweet } from 'react-tweet';
-import { FiMessageCircle, FiRepeat, FiHeart, FiBarChart2, FiShare, FiGlobe, FiUsers, FiThumbsUp, FiMessageSquare, FiSend } from 'react-icons/fi';
+import { FiMessageCircle, FiRepeat, FiHeart, FiBarChart2, FiShare, FiGlobe, FiUsers, FiThumbsUp, FiMessageSquare, FiSend, FiFileText } from 'react-icons/fi';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import twitterText from 'twitter-text';
 import { LuBadgeCheck } from 'react-icons/lu';
@@ -1331,6 +1331,111 @@ function useIsDark(theme) {
   }
   return theme === "dark";
 }
+function domainOf(source) {
+  try {
+    return new URL(source).hostname.replace(/^www\./, "");
+  } catch {
+    return source;
+  }
+}
+function ArticleCard({ article, thumbnail }) {
+  return /* @__PURE__ */ jsxs("div", { style: cardStyle, children: [
+    thumbnail ? /* @__PURE__ */ jsx("img", { src: thumbnail.src, alt: thumbnail.alt ?? "", style: thumbStyle }) : null,
+    /* @__PURE__ */ jsxs("div", { style: metaStyle, children: [
+      /* @__PURE__ */ jsx("div", { style: domainStyle, children: domainOf(article.source) }),
+      article.title ? /* @__PURE__ */ jsx("div", { style: titleStyle, children: article.title }) : null,
+      article.description ? /* @__PURE__ */ jsx("div", { style: descStyle, children: article.description }) : null
+    ] })
+  ] });
+}
+var cardStyle = {
+  border: `1px solid ${varRef(LI_VAR.border)}`,
+  borderRadius: 8,
+  overflow: "hidden"
+};
+var thumbStyle = {
+  width: "100%",
+  display: "block",
+  aspectRatio: "1.91 / 1",
+  objectFit: "cover"
+};
+var metaStyle = {
+  padding: "8px 12px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 2
+};
+var domainStyle = {
+  fontSize: 12,
+  color: varRef(LI_VAR.muted)
+};
+var titleStyle = {
+  fontSize: 14,
+  fontWeight: 600,
+  color: varRef(LI_VAR.text),
+  lineHeight: 1.3,
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+var descStyle = {
+  fontSize: 12,
+  color: varRef(LI_VAR.muted),
+  lineHeight: 1.3,
+  display: "-webkit-box",
+  WebkitLineClamp: 1,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+function DocumentCard({ document, cover }) {
+  return /* @__PURE__ */ jsxs("div", { style: cardStyle2, children: [
+    /* @__PURE__ */ jsx("div", { style: pageStyle, children: cover ? /* @__PURE__ */ jsx("img", { src: cover.src, alt: cover.alt ?? "", style: coverStyle }) : /* @__PURE__ */ jsx(FiFileText, { size: 56, "aria-hidden": true, style: { opacity: 0.5 } }) }),
+    /* @__PURE__ */ jsxs("div", { style: barStyle, children: [
+      /* @__PURE__ */ jsx("div", { style: titleStyle2, children: document.title }),
+      /* @__PURE__ */ jsx("div", { style: kindStyle, children: "Document" })
+    ] })
+  ] });
+}
+var cardStyle2 = {
+  border: `1px solid ${varRef(LI_VAR.border)}`,
+  borderRadius: 8,
+  overflow: "hidden"
+};
+var pageStyle = {
+  position: "relative",
+  aspectRatio: "4 / 3",
+  background: "rgba(127,127,127,0.12)",
+  display: "grid",
+  placeItems: "center",
+  color: varRef(LI_VAR.muted)
+};
+var coverStyle = {
+  width: "100%",
+  height: "100%",
+  objectFit: "cover"
+};
+var barStyle = {
+  background: "rgba(0,0,0,0.85)",
+  color: "#fff",
+  padding: "10px 14px",
+  display: "flex",
+  flexDirection: "column",
+  gap: 1
+};
+var titleStyle2 = {
+  fontSize: 14,
+  fontWeight: 600,
+  lineHeight: 1.3,
+  display: "-webkit-box",
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: "vertical",
+  overflow: "hidden"
+};
+var kindStyle = {
+  fontSize: 12,
+  color: "rgba(255,255,255,0.7)"
+};
 var ROW2 = {
   display: "flex",
   justifyContent: "space-around",
@@ -1484,11 +1589,11 @@ function Tile({
   ] });
 }
 function ImageMosaic({ media }) {
-  if (media.length === 0) {
+  const [only] = media;
+  if (!only) {
     return null;
   }
   if (media.length === 1) {
-    const only = media[0];
     return /* @__PURE__ */ jsx(
       "img",
       {
@@ -1534,6 +1639,48 @@ function Media({ media }) {
   const images = media.filter((item) => item.kind === "image");
   return /* @__PURE__ */ jsx(ImageMosaic, { media: images });
 }
+function Poll({ poll }) {
+  return /* @__PURE__ */ jsxs("div", { style: wrapStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: questionStyle, children: poll.question }),
+    /* @__PURE__ */ jsx("div", { style: optionsStyle, children: poll.options.map((option, i) => /* @__PURE__ */ jsx("div", { style: optionStyle, children: option }, `${option}-${i}`)) }),
+    /* @__PURE__ */ jsxs("div", { style: footerStyle, children: [
+      "0 votes \u2022 ",
+      linkedinPollDurationLabel(poll.duration)
+    ] })
+  ] });
+}
+var wrapStyle = {
+  border: `1px solid ${varRef(LI_VAR.border)}`,
+  borderRadius: 8,
+  padding: 12,
+  display: "flex",
+  flexDirection: "column",
+  gap: 10
+};
+var questionStyle = {
+  fontSize: 14,
+  fontWeight: 600,
+  color: varRef(LI_VAR.text),
+  lineHeight: 1.35
+};
+var optionsStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: 8
+};
+var optionStyle = {
+  border: `1px solid ${varRef(LI_VAR.accent)}`,
+  borderRadius: 999,
+  padding: "8px 16px",
+  textAlign: "center",
+  fontSize: 14,
+  fontWeight: 600,
+  color: varRef(LI_VAR.accent)
+};
+var footerStyle = {
+  fontSize: 12,
+  color: varRef(LI_VAR.muted)
+};
 var FOLD_CHARS = 200;
 var BODY_STYLE = {
   whiteSpace: "pre-wrap",
@@ -1661,7 +1808,7 @@ function LinkedInPostPreviewImpl({
     accent: varRef(LI_VAR.accent),
     muted: varRef(LI_VAR.muted)
   };
-  const cardStyle2 = {
+  const cardStyle4 = {
     ...paletteVars(dark),
     background: varRef(LI_VAR.bg),
     color: varRef(LI_VAR.text),
@@ -1672,7 +1819,7 @@ function LinkedInPostPreviewImpl({
     fontFamily: FONT_STACK,
     ...style
   };
-  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle2, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: cardStyle4, children: [
     /* @__PURE__ */ jsx(Header, { author, visibility, time }),
     variant.body ? /* @__PURE__ */ jsx("div", { style: { padding: "8px 16px 0" }, children: /* @__PURE__ */ jsx(
       PostBody,
@@ -1682,10 +1829,26 @@ function LinkedInPostPreviewImpl({
         colors: bodyColors
       }
     ) }) : null,
-    resolvedMedia.length > 0 ? /* @__PURE__ */ jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx(Media, { media: resolvedMedia }) }) : null,
+    renderContent(variant, resolvedMedia),
     showActions ? /* @__PURE__ */ jsx(EngagementBar, {}) : null
   ] });
 }
+function renderContent(variant, media) {
+  const settings = variant.settings;
+  const kind = settings?.content_kind;
+  const [firstMedia] = media;
+  if (kind === "article" && settings?.article) {
+    return /* @__PURE__ */ jsx("div", { style: INSET, children: /* @__PURE__ */ jsx(ArticleCard, { article: settings.article, thumbnail: firstMedia }) });
+  }
+  if (kind === "poll" && settings?.poll) {
+    return /* @__PURE__ */ jsx("div", { style: INSET, children: /* @__PURE__ */ jsx(Poll, { poll: settings.poll }) });
+  }
+  if (kind === "document" && settings?.document) {
+    return /* @__PURE__ */ jsx("div", { style: INSET, children: /* @__PURE__ */ jsx(DocumentCard, { document: settings.document, cover: firstMedia }) });
+  }
+  return media.length > 0 ? /* @__PURE__ */ jsx("div", { style: { marginTop: 12 }, children: /* @__PURE__ */ jsx(Media, { media }) }) : null;
+}
+var INSET = { padding: "12px 16px 0" };
 var LinkedInPostPreview = memo(LinkedInPostPreviewImpl);
 var LINK_COLOR = "#8ab4ff";
 var TOKEN = /([#@][\p{L}\p{N}_.]+)/gu;
@@ -1702,7 +1865,7 @@ function Caption({ body }) {
     setOverflowing(el.scrollHeight > el.clientHeight + 1);
   }, [body, expanded]);
   const parts = body.split(TOKEN);
-  return /* @__PURE__ */ jsxs("div", { style: wrapStyle, children: [
+  return /* @__PURE__ */ jsxs("div", { style: wrapStyle2, children: [
     /* @__PURE__ */ jsx("div", { ref, style: expanded ? expandedTextStyle : clampedTextStyle, children: parts.map(
       (part, i) => IS_TOKEN.test(part) ? /* @__PURE__ */ jsx("span", { style: { color: LINK_COLOR }, children: part }, i) : /* @__PURE__ */ jsx("span", { children: part }, i)
     ) }),
@@ -1719,7 +1882,7 @@ function Caption({ body }) {
     ) : null
   ] });
 }
-var wrapStyle = {
+var wrapStyle2 = {
   fontSize: 14,
   lineHeight: 1.35
 };
@@ -1768,7 +1931,7 @@ function Media2({
         muted: true,
         loop: true,
         playsInline: true,
-        style: coverStyle
+        style: coverStyle2
       }
     );
   }
@@ -1795,7 +1958,7 @@ function PhotoCarousel({ media }) {
     };
   }, [emblaApi, sync]);
   return /* @__PURE__ */ jsxs("div", { style: { position: "absolute", inset: 0 }, children: [
-    /* @__PURE__ */ jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle }) }, `${m.src}-${i}`)) }) }),
+    /* @__PURE__ */ jsx("div", { ref: emblaRef, style: viewportStyle, children: /* @__PURE__ */ jsx("div", { style: containerStyle, children: media.map((m, i) => /* @__PURE__ */ jsx("div", { style: slideStyle, children: /* @__PURE__ */ jsx("img", { src: m.src, alt: m.alt ?? "", style: coverStyle2 }) }, `${m.src}-${i}`)) }) }),
     media.length > 1 ? /* @__PURE__ */ jsx("div", { style: dotsStyle, children: media.map((m, i) => /* @__PURE__ */ jsx(
       "span",
       {
@@ -1814,7 +1977,7 @@ function ProcessingMedia() {
     /* @__PURE__ */ jsx("span", { style: { position: "relative", zIndex: 1 }, children: "Processing media\u2026" })
   ] });
 }
-var coverStyle = {
+var coverStyle2 = {
   position: "absolute",
   inset: 0,
   width: "100%",
@@ -1940,7 +2103,7 @@ function TikTokPostPreviewImpl({
   const label = commercialLabel(variant.settings);
   const isAigc = Boolean(variant.settings?.is_aigc);
   const pending = (media?.length ?? 0) > 0 && resolvedMedia.length === 0;
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...cardStyle, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...cardStyle3, ...style }, children: [
     /* @__PURE__ */ jsx("style", { children: KEYFRAMES }),
     /* @__PURE__ */ jsx(Media2, { media: resolvedMedia, pending }),
     /* @__PURE__ */ jsx("div", { style: scrimStyle }),
@@ -1987,7 +2150,7 @@ function Avatar({ url, name }) {
 function Disc({ url }) {
   return /* @__PURE__ */ jsx("div", { style: discStyle, children: url ? /* @__PURE__ */ jsx("img", { src: url, alt: "", style: discImgStyle }) : null });
 }
-var cardStyle = {
+var cardStyle3 = {
   position: "relative",
   width: "100%",
   maxWidth: 320,
@@ -2362,7 +2525,7 @@ function TikTokCaptionField({
   const max = captionMaxFor(postType);
   const count = value.length;
   const over = count > max;
-  return /* @__PURE__ */ jsxs("div", { className, style: { ...wrapStyle2, ...style }, children: [
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...wrapStyle3, ...style }, children: [
     /* @__PURE__ */ jsxs("div", { style: labelRowStyle, children: [
       /* @__PURE__ */ jsx("label", { htmlFor: id, style: labelStyle, children: "Caption" }),
       /* @__PURE__ */ jsxs(
@@ -2396,7 +2559,7 @@ function TikTokCaptionField({
     )
   ] });
 }
-var wrapStyle2 = {
+var wrapStyle3 = {
   display: "flex",
   flexDirection: "column",
   gap: 6,
@@ -2655,6 +2818,6 @@ var postButtonStyle = {
   transition: "opacity 160ms ease"
 };
 
-export { AudienceSelect, CommercialDisclosure, Connect, Declaration, InteractionToggles, LinkedInPostPreview, PostrunProvider, TikTokCaptionField, TikTokPostPreview, TikTokPublishPanel, UploadError, XPostPreview, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, 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, AudienceSelect, CommercialDisclosure, Connect, Declaration, DocumentCard, InteractionToggles, LinkedInPostPreview, Poll, PostrunProvider, TikTokCaptionField, TikTokPostPreview, TikTokPublishPanel, UploadError, XPostPreview, connectionKeys, mediaKeys, postKeys, profileKeys, tiktokKeys, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map