@postrun/react 2.7.0 → 2.9.0

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, QueryKey } from '@tanstack/react-query';
-import { PostrunClient, ListProfilesQuery, DiscoverableAccountList, Connection, ConnectionKind, ConnectionStatus, ListMediaQuery, ListPostsQuery, ConnectablePlatform, MediaResource, MediaTarget, Metadata, ComposePostInput, PostValidation, MediaKind, XPostVariant, XPoll as XPoll$1, LinkedInPostVariant, TikTokPostVariant, TikTokCreatorInfo, TikTokOptionsValue } from '@postrun/js';
+import { PostrunClient, ListProfilesQuery, DiscoverableAccountList, Connection, ConnectionKind, ConnectionStatus, ListMediaQuery, ListPostsQuery, ConnectablePlatform, MediaResource, MediaTarget, Metadata, ComposePostInput, PostValidation, MediaKind, XPostVariant, XPoll as XPoll$1, LinkedInPostVariant, InstagramPostVariant, TikTokPostVariant, TikTokCreatorInfo, TikTokOptionsValue } from '@postrun/js';
 export { PostValidation, PostVariant, PostVariantError, TIKTOK_CAPTION_MAX, TikTokCreatorInfo, ValidationIssue, captionMaxFor } from '@postrun/js';
 import { TwitterComponents } from 'react-tweet';
 
@@ -1618,39 +1618,57 @@ declare function useTikTokCreatorInfo(connectionId: string | null): _tanstack_re
 }>, Error>;
 
 /**
- * Public input types for the post-preview components. These describe data the
- * CUSTOMER supplies for presentation — NOT shapes from our OpenAPI contract — so
- * they are authored here rather than derived. The one value with a contract
- * counterpart, a media asset's `kind`, IS derived from the SDK's `MediaKind`.
+ * Public input types for the post-preview components.
  *
- * Why author/media live outside the post schema: a connection stores only a
- * cached account name (no avatar, no `@handle`, no verified flag), and a variant
- * references media by id, not by pixels — at compose time the only pixels that
- * exist are a local `File`.
+ * Identity that our API DOES store on a `Connection` (`username`, `avatar_url`,
+ * `profile_url`) is DERIVED from the SDK `Connection` type — never re-declared —
+ * so a preview author can be built straight from a connection and can't drift.
+ * Fields the API does NOT store (a verified badge, a display name distinct from
+ * the handle, a LinkedIn headline) are presentation extras the customer supplies;
+ * those are the documented backend gaps. Media `kind` derives from `MediaKind`;
+ * pixels are still a `url`/`File` because a variant references media by id.
  */
-/** The author identity rendered in an X preview header. */
-interface XPreviewAuthor {
-    /** Display name, e.g. "Acme Studio". */
+/** 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. `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.
+ *
+ * `username` / `avatar_url` are DERIVED from the SDK `Connection` (`string | null`,
+ * so build it straight from `useConnections()`). `verified` is a presentation
+ * extra — our API does NOT store verified status on a connection (a backend gap),
+ * so the customer supplies it (or omit it).
+ */
+type InstagramPreviewAuthor = ConnectionIdentity & {
+    /** Verified badge. NOT sourced from our Connection — presentation-only. */
+    verified?: boolean;
+};
 /** The media kinds a social preview can render (documents are not previewable
  * here) — derived from the SDK's `MediaKind`, never re-listed. */
 type PreviewMediaKind = Extract<MediaKind, 'image' | 'video' | 'gif'>;
@@ -1708,7 +1726,8 @@ interface XPostPreviewProps {
     quotedTweet?: XPreviewQuotedTweet;
     /** The replied-to account's handle (our schema only stores the parent id). */
     replyToHandle?: string;
-    /** Color scheme. `auto` (default) inherits the host's theme. */
+    /** Color scheme. `auto` (default) follows the OS color scheme (light/dark) —
+     * the same resolution every Postrun preview card uses. */
     theme?: 'light' | 'dark' | 'auto';
     /** Show the static action row (icons, no counts). Default true. */
     showActions?: boolean;
@@ -1727,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>;
@@ -1744,11 +1763,14 @@ interface XPollProps {
 declare function XPoll({ poll }: XPollProps): react.JSX.Element;
 
 /**
- * LinkedIn preview theming. Unlike the X preview (which inherits react-tweet's
- * CSS), we own the LinkedIn card, so we expose a small set of CSS custom
- * properties on the wrapper. The resolved palette sets their default values;
- * a customer can override any of them via `style`/`className`. Components read
- * `var(--pr-li-*)`, so restyling needs no fork.
+ * LinkedIn preview theming. We own the card, so we expose CSS custom properties
+ * on the wrapper; components read `var(--pr-li-*)`.
+ *
+ * `auto` follows the OS color scheme the SAME way every card does (X via
+ * react-tweet's `@media (prefers-color-scheme)`): the vars use the CSS
+ * `light-dark()` function and the card sets `color-scheme` (`light dark` for auto,
+ * else the explicit scheme). This resolves in CSS — instant, SSR-safe, no
+ * JS-after-mount flash — so all previews agree on what `auto` means.
  */
 type LinkedInTheme = 'light' | 'dark' | 'auto';
 
@@ -1834,6 +1856,63 @@ interface DocumentCardProps {
 }
 declare function DocumentCard({ document, cover }: DocumentCardProps): react.JSX.Element;
 
+/**
+ * Instagram feed-card theming. We own the card, so we expose CSS custom
+ * properties on the wrapper; components read `var(--pr-ig-*)`.
+ *
+ * `auto` follows the OS color scheme the SAME way every card does (X via
+ * react-tweet's `@media (prefers-color-scheme)`): the vars use the CSS
+ * `light-dark()` function and the card sets `color-scheme` (`light dark` for auto,
+ * else the explicit scheme). This resolves in CSS — instant, SSR-safe, no
+ * JS-after-mount flash — so all previews agree on what `auto` means.
+ */
+type InstagramTheme = 'light' | 'dark' | 'auto';
+
+/**
+ * A faithful, schema-driven preview of how an Instagram post will look, rendered
+ * straight from a Postrun Instagram variant. Covers everything the API supports:
+ * a **feed** post (single image / carousel) and a **reel** (9:16 video). Identity
+ * is SDK-driven (`author` derives from `Connection`); creator details (username,
+ * avatar, verified, collaborators) and the audio label come from the variant +
+ * author. Feed themes light/dark/`auto`; the reel is always dark.
+ *
+ * Clean-room (there's no package to "buy" — Instagram's embed only renders
+ * already-published posts), referencing the real IG feed + Postiz.
+ */
+interface InstagramPostPreviewProps {
+    /** The Instagram variant from our schema — the content source, untouched. */
+    variant: InstagramPostVariant;
+    /** Author identity (SDK-driven; `verified` is a presentation extra). */
+    author: InstagramPreviewAuthor;
+    /** Resolved media pixels (processed URLs or compose-time File blobs). */
+    media?: PreviewMedia[];
+    /** Color scheme for the feed card. `auto` (default) follows the OS. */
+    theme?: InstagramTheme;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function InstagramPostPreviewImpl({ variant, author, media, theme, className, style, }: InstagramPostPreviewProps): react.JSX.Element;
+/** Memoized: the resolved-media hook absorbs unstable media arrays. */
+declare const InstagramPostPreview: react.MemoExoticComponent<typeof InstagramPostPreviewImpl>;
+
+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;
+}
+/**
+ * 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
  * look on TikTok, driven straight from our Post object plus the live creator info
@@ -1865,7 +1944,8 @@ declare const TikTokPostPreview: react.MemoExoticComponent<typeof TikTokPostPrev
  * (TikTok's video surface is always dark), so only the panel adapts. We expose a
  * small set of CSS custom properties on the panel root; controls read
  * `var(--pr-tt-*)`, so a customer can restyle via `style`/`className` without a
- * fork. Mirrors the LinkedIn preview's theme approach.
+ * fork. `auto` follows the OS color scheme via CSS `light-dark()` — the same way
+ * every preview card resolves `auto`.
  */
 type TikTokTheme = 'light' | 'dark' | 'auto';
 
@@ -1966,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, 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, 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

@@ -2,7 +2,7 @@ import * as react from 'react';
 import { ReactNode, CSSProperties } from 'react';
 import * as _tanstack_react_query from '@tanstack/react-query';
 import { QueryClient, QueryKey } from '@tanstack/react-query';
-import { PostrunClient, ListProfilesQuery, DiscoverableAccountList, Connection, ConnectionKind, ConnectionStatus, ListMediaQuery, ListPostsQuery, ConnectablePlatform, MediaResource, MediaTarget, Metadata, ComposePostInput, PostValidation, MediaKind, XPostVariant, XPoll as XPoll$1, LinkedInPostVariant, TikTokPostVariant, TikTokCreatorInfo, TikTokOptionsValue } from '@postrun/js';
+import { PostrunClient, ListProfilesQuery, DiscoverableAccountList, Connection, ConnectionKind, ConnectionStatus, ListMediaQuery, ListPostsQuery, ConnectablePlatform, MediaResource, MediaTarget, Metadata, ComposePostInput, PostValidation, MediaKind, XPostVariant, XPoll as XPoll$1, LinkedInPostVariant, InstagramPostVariant, TikTokPostVariant, TikTokCreatorInfo, TikTokOptionsValue } from '@postrun/js';
 export { PostValidation, PostVariant, PostVariantError, TIKTOK_CAPTION_MAX, TikTokCreatorInfo, ValidationIssue, captionMaxFor } from '@postrun/js';
 import { TwitterComponents } from 'react-tweet';
 
@@ -1618,39 +1618,57 @@ declare function useTikTokCreatorInfo(connectionId: string | null): _tanstack_re
 }>, Error>;
 
 /**
- * Public input types for the post-preview components. These describe data the
- * CUSTOMER supplies for presentation — NOT shapes from our OpenAPI contract — so
- * they are authored here rather than derived. The one value with a contract
- * counterpart, a media asset's `kind`, IS derived from the SDK's `MediaKind`.
+ * Public input types for the post-preview components.
  *
- * Why author/media live outside the post schema: a connection stores only a
- * cached account name (no avatar, no `@handle`, no verified flag), and a variant
- * references media by id, not by pixels — at compose time the only pixels that
- * exist are a local `File`.
+ * Identity that our API DOES store on a `Connection` (`username`, `avatar_url`,
+ * `profile_url`) is DERIVED from the SDK `Connection` type — never re-declared —
+ * so a preview author can be built straight from a connection and can't drift.
+ * Fields the API does NOT store (a verified badge, a display name distinct from
+ * the handle, a LinkedIn headline) are presentation extras the customer supplies;
+ * those are the documented backend gaps. Media `kind` derives from `MediaKind`;
+ * pixels are still a `url`/`File` because a variant references media by id.
  */
-/** The author identity rendered in an X preview header. */
-interface XPreviewAuthor {
-    /** Display name, e.g. "Acme Studio". */
+/** 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. `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.
+ *
+ * `username` / `avatar_url` are DERIVED from the SDK `Connection` (`string | null`,
+ * so build it straight from `useConnections()`). `verified` is a presentation
+ * extra — our API does NOT store verified status on a connection (a backend gap),
+ * so the customer supplies it (or omit it).
+ */
+type InstagramPreviewAuthor = ConnectionIdentity & {
+    /** Verified badge. NOT sourced from our Connection — presentation-only. */
+    verified?: boolean;
+};
 /** The media kinds a social preview can render (documents are not previewable
  * here) — derived from the SDK's `MediaKind`, never re-listed. */
 type PreviewMediaKind = Extract<MediaKind, 'image' | 'video' | 'gif'>;
@@ -1708,7 +1726,8 @@ interface XPostPreviewProps {
     quotedTweet?: XPreviewQuotedTweet;
     /** The replied-to account's handle (our schema only stores the parent id). */
     replyToHandle?: string;
-    /** Color scheme. `auto` (default) inherits the host's theme. */
+    /** Color scheme. `auto` (default) follows the OS color scheme (light/dark) —
+     * the same resolution every Postrun preview card uses. */
     theme?: 'light' | 'dark' | 'auto';
     /** Show the static action row (icons, no counts). Default true. */
     showActions?: boolean;
@@ -1727,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>;
@@ -1744,11 +1763,14 @@ interface XPollProps {
 declare function XPoll({ poll }: XPollProps): react.JSX.Element;
 
 /**
- * LinkedIn preview theming. Unlike the X preview (which inherits react-tweet's
- * CSS), we own the LinkedIn card, so we expose a small set of CSS custom
- * properties on the wrapper. The resolved palette sets their default values;
- * a customer can override any of them via `style`/`className`. Components read
- * `var(--pr-li-*)`, so restyling needs no fork.
+ * LinkedIn preview theming. We own the card, so we expose CSS custom properties
+ * on the wrapper; components read `var(--pr-li-*)`.
+ *
+ * `auto` follows the OS color scheme the SAME way every card does (X via
+ * react-tweet's `@media (prefers-color-scheme)`): the vars use the CSS
+ * `light-dark()` function and the card sets `color-scheme` (`light dark` for auto,
+ * else the explicit scheme). This resolves in CSS — instant, SSR-safe, no
+ * JS-after-mount flash — so all previews agree on what `auto` means.
  */
 type LinkedInTheme = 'light' | 'dark' | 'auto';
 
@@ -1834,6 +1856,63 @@ interface DocumentCardProps {
 }
 declare function DocumentCard({ document, cover }: DocumentCardProps): react.JSX.Element;
 
+/**
+ * Instagram feed-card theming. We own the card, so we expose CSS custom
+ * properties on the wrapper; components read `var(--pr-ig-*)`.
+ *
+ * `auto` follows the OS color scheme the SAME way every card does (X via
+ * react-tweet's `@media (prefers-color-scheme)`): the vars use the CSS
+ * `light-dark()` function and the card sets `color-scheme` (`light dark` for auto,
+ * else the explicit scheme). This resolves in CSS — instant, SSR-safe, no
+ * JS-after-mount flash — so all previews agree on what `auto` means.
+ */
+type InstagramTheme = 'light' | 'dark' | 'auto';
+
+/**
+ * A faithful, schema-driven preview of how an Instagram post will look, rendered
+ * straight from a Postrun Instagram variant. Covers everything the API supports:
+ * a **feed** post (single image / carousel) and a **reel** (9:16 video). Identity
+ * is SDK-driven (`author` derives from `Connection`); creator details (username,
+ * avatar, verified, collaborators) and the audio label come from the variant +
+ * author. Feed themes light/dark/`auto`; the reel is always dark.
+ *
+ * Clean-room (there's no package to "buy" — Instagram's embed only renders
+ * already-published posts), referencing the real IG feed + Postiz.
+ */
+interface InstagramPostPreviewProps {
+    /** The Instagram variant from our schema — the content source, untouched. */
+    variant: InstagramPostVariant;
+    /** Author identity (SDK-driven; `verified` is a presentation extra). */
+    author: InstagramPreviewAuthor;
+    /** Resolved media pixels (processed URLs or compose-time File blobs). */
+    media?: PreviewMedia[];
+    /** Color scheme for the feed card. `auto` (default) follows the OS. */
+    theme?: InstagramTheme;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function InstagramPostPreviewImpl({ variant, author, media, theme, className, style, }: InstagramPostPreviewProps): react.JSX.Element;
+/** Memoized: the resolved-media hook absorbs unstable media arrays. */
+declare const InstagramPostPreview: react.MemoExoticComponent<typeof InstagramPostPreviewImpl>;
+
+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;
+}
+/**
+ * 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
  * look on TikTok, driven straight from our Post object plus the live creator info
@@ -1865,7 +1944,8 @@ declare const TikTokPostPreview: react.MemoExoticComponent<typeof TikTokPostPrev
  * (TikTok's video surface is always dark), so only the panel adapts. We expose a
  * small set of CSS custom properties on the panel root; controls read
  * `var(--pr-tt-*)`, so a customer can restyle via `style`/`className` without a
- * fork. Mirrors the LinkedIn preview's theme approach.
+ * fork. `auto` follows the OS color scheme via CSS `light-dark()` — the same way
+ * every preview card resolves `auto`.
  */
 type TikTokTheme = 'light' | 'dark' | 'auto';
 
@@ -1966,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, 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, 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 };