@postrun/react 2.3.0 → 2.4.0

package/dist/index.d.cts

@@ -2,8 +2,8 @@ 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, LinkedInPostVariant } from '@postrun/js';
-export { PostValidation, PostVariant, PostVariantError, TikTokCreatorInfo, ValidationIssue } from '@postrun/js';
+import { PostrunClient, ListProfilesQuery, DiscoverableAccountList, Connection, ConnectionKind, ConnectionStatus, ListMediaQuery, ListPostsQuery, ConnectablePlatform, MediaResource, MediaTarget, Metadata, ComposePostInput, PostValidation, MediaKind, XPostVariant, LinkedInPostVariant, TikTokPostVariant, TikTokCreatorInfo, TikTokOptionsValue } from '@postrun/js';
+export { PostValidation, PostVariant, PostVariantError, TIKTOK_CAPTION_MAX, TikTokCreatorInfo, ValidationIssue, captionMaxFor } from '@postrun/js';
 import { TwitterComponents } from 'react-tweet';
 
 /**
@@ -1374,6 +1374,7 @@ declare function useValidatePost(profileId: string): {
         got?: string;
         variant_index: number;
         path: Array<string | number>;
+        platform?: "x" | "linkedin" | "facebook_page" | "instagram" | "tiktok";
         display_error: string;
     }[];
     isPending: boolean;
@@ -1764,4 +1765,136 @@ declare function LinkedInPostPreviewImpl({ variant, author, media, theme, time,
  * absorbs unstable media arrays). */
 declare const LinkedInPostPreview: react.MemoExoticComponent<typeof LinkedInPostPreviewImpl>;
 
-export { type CalendarFilters, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionsFilter, type DiscoverableAccount, type InfiniteList, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, 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 };
+/**
+ * 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
+ * the Content-Posting policy requires the publishing UI to show.
+ *
+ * The component is presentational: the host collects the variant + creator info
+ * (via `useTikTokCreatorInfo`) + resolves media pixels, and passes them in. Later
+ * chunks add the editable caption + the consent-gated Post button.
+ */
+interface TikTokPostPreviewProps {
+    /** The TikTok variant from our schema — the content source, untouched. */
+    variant: TikTokPostVariant;
+    /** Live creator info (nickname/avatar, audience options, interaction flags). */
+    creatorInfo: TikTokCreatorInfo;
+    /** Resolved media pixels (processed URLs or compose-time File blobs). */
+    media?: PreviewMedia[];
+    /** Class applied to the phone frame — your hook for sizing. */
+    className?: string;
+    /** Inline styles on the frame. */
+    style?: CSSProperties;
+}
+
+declare function TikTokPostPreviewImpl({ variant, creatorInfo, media, className, style, }: TikTokPostPreviewProps): react.JSX.Element;
+/** Memoized: the resolved-media hook absorbs unstable media arrays. */
+declare const TikTokPostPreview: react.MemoExoticComponent<typeof TikTokPostPreviewImpl>;
+
+/**
+ * Theming for the TikTok publish PANEL. The preview card itself is always dark
+ * (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.
+ */
+type TikTokTheme = 'light' | 'dark' | 'auto';
+
+/**
+ * The TikTok publish/confirmation panel — the Required-UX surface that turns a
+ * preview into a compliant publish flow. It composes the editable caption (#2),
+ * audience (#5), interaction (#6), commercial disclosure (#7), the video-only
+ * AIGC toggle (SHOULD), the processing notice (#10), the consent declaration
+ * directly above the button (#8), and the consent-gated Post button (#9) — which
+ * fires `onPost` ONLY on an explicit click and is disabled until the post is
+ * valid.
+ *
+ * All logic comes from `@postrun/js` (the single source); this is the render.
+ */
+interface TikTokPublishPanelProps {
+    /** The variant — drives post_type (caps, interaction set) + media count. */
+    variant: TikTokPostVariant;
+    /** Live creator info (audience options, interaction gates). */
+    creatorInfo: TikTokCreatorInfo;
+    /** Editable caption (controlled) + its setter. */
+    caption: string;
+    onCaptionChange: (value: string) => void;
+    /** The TikTok options value (controlled) + its setter. */
+    options: TikTokOptionsValue;
+    onOptionsChange: (value: TikTokOptionsValue) => void;
+    /** Fired ONLY on an explicit Post click — the affirmative-consent gate (#9). */
+    onPost: () => void;
+    /** Disable the button + show a busy label while a publish is in flight. */
+    posting?: boolean;
+    /** Colour scheme. `auto` (default) follows the OS preference. */
+    theme?: TikTokTheme;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function TikTokPublishPanel({ variant, creatorInfo, caption, onCaptionChange, options, onOptionsChange, onPost, posting, theme, className, style, }: TikTokPublishPanelProps): react.JSX.Element;
+
+interface TikTokCaptionFieldProps {
+    /** The caption text (controlled). */
+    value: string;
+    /** Fired on every edit — keep your variant `body` in sync with this. */
+    onChange: (value: string) => void;
+    /** Drives the cap (video → 2200, photo → 4000). */
+    postType: TikTokPostVariant['post_type'];
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function TikTokCaptionField({ value, onChange, postType, placeholder, className, style, }: TikTokCaptionFieldProps): react.JSX.Element;
+
+/**
+ * The audience / privacy selector — MUST #5. TikTok mandates an explicit choice
+ * with NO default, so the select opens on a disabled placeholder and an unchosen
+ * value shows the required hint. Options come from the creator's allowed set;
+ * branded content drops SELF_ONLY (handled in `audiencePrivacyOptions`).
+ */
+declare function AudienceSelect({ creatorInfo, value, onChange, }: {
+    creatorInfo: TikTokCreatorInfo;
+    value: TikTokOptionsValue;
+    onChange: (value: TikTokOptionsValue) => void;
+}): react.JSX.Element;
+
+/**
+ * The interaction toggles — MUST #6. Video shows Comment / Duet / Stitch; a photo
+ * post shows only Comment (TikTok mandate). None default on; an interaction the
+ * creator forbids renders disabled and forced off. The rows + the forbidden flags
+ * come from `interactionRows` (the single source).
+ */
+declare function InteractionToggles({ creatorInfo, value, onChange, isVideo, }: {
+    creatorInfo: TikTokCreatorInfo;
+    value: TikTokOptionsValue;
+    onChange: (value: TikTokOptionsValue) => void;
+    isVideo: boolean;
+}): react.JSX.Element;
+
+/**
+ * Commercial-content disclosure — MUST #7. Off by default. When on, the user must
+ * pick at least one of "Your brand" / "Branded content" (else the required hint
+ * blocks publish), and the resulting label notice is shown verbatim:
+ *   Your brand     → "Your photo/video will be labeled as 'Promotional content'"
+ *   Branded content→ "Your photo/video will be labeled as 'Paid partnership'"
+ * Branded content can't be private (handled in `setBrandKind` / the audience list).
+ */
+declare function CommercialDisclosure({ value, onChange, }: {
+    value: TikTokOptionsValue;
+    onChange: (value: TikTokOptionsValue) => void;
+}): react.JSX.Element;
+
+/**
+ * The consent declaration — MUST #8. Rendered DIRECTLY above the Post button. The
+ * wording switches on whether the post is disclosed as branded content (verbatim
+ * TikTok copy):
+ *   default → "By posting, you agree to TikTok's Music Usage Confirmation"
+ *   branded → "By posting, you agree to TikTok's Branded Content Policy and
+ *              Music Usage Confirmation."
+ */
+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 };

package/dist/index.d.ts

@@ -2,8 +2,8 @@ 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, LinkedInPostVariant } from '@postrun/js';
-export { PostValidation, PostVariant, PostVariantError, TikTokCreatorInfo, ValidationIssue } from '@postrun/js';
+import { PostrunClient, ListProfilesQuery, DiscoverableAccountList, Connection, ConnectionKind, ConnectionStatus, ListMediaQuery, ListPostsQuery, ConnectablePlatform, MediaResource, MediaTarget, Metadata, ComposePostInput, PostValidation, MediaKind, XPostVariant, LinkedInPostVariant, TikTokPostVariant, TikTokCreatorInfo, TikTokOptionsValue } from '@postrun/js';
+export { PostValidation, PostVariant, PostVariantError, TIKTOK_CAPTION_MAX, TikTokCreatorInfo, ValidationIssue, captionMaxFor } from '@postrun/js';
 import { TwitterComponents } from 'react-tweet';
 
 /**
@@ -1374,6 +1374,7 @@ declare function useValidatePost(profileId: string): {
         got?: string;
         variant_index: number;
         path: Array<string | number>;
+        platform?: "x" | "linkedin" | "facebook_page" | "instagram" | "tiktok";
         display_error: string;
     }[];
     isPending: boolean;
@@ -1764,4 +1765,136 @@ declare function LinkedInPostPreviewImpl({ variant, author, media, theme, time,
  * absorbs unstable media arrays). */
 declare const LinkedInPostPreview: react.MemoExoticComponent<typeof LinkedInPostPreviewImpl>;
 
-export { type CalendarFilters, Connect, type ConnectErrorReason, type ConnectOutcome, type ConnectProps, type ConnectRenderApi, type ConnectState, type ConnectionsFilter, type DiscoverableAccount, type InfiniteList, LinkedInPostPreview, type LinkedInPostPreviewProps, type LinkedInPreviewAuthor, type LiveOptions, type MediaUploadItem, type MediaUploadOptions, type MediaUploadStatus, type PostrunContextValue, PostrunProvider, type PostrunProviderProps, type PreviewMedia, type PreviewMediaKind, 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 };
+/**
+ * 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
+ * the Content-Posting policy requires the publishing UI to show.
+ *
+ * The component is presentational: the host collects the variant + creator info
+ * (via `useTikTokCreatorInfo`) + resolves media pixels, and passes them in. Later
+ * chunks add the editable caption + the consent-gated Post button.
+ */
+interface TikTokPostPreviewProps {
+    /** The TikTok variant from our schema — the content source, untouched. */
+    variant: TikTokPostVariant;
+    /** Live creator info (nickname/avatar, audience options, interaction flags). */
+    creatorInfo: TikTokCreatorInfo;
+    /** Resolved media pixels (processed URLs or compose-time File blobs). */
+    media?: PreviewMedia[];
+    /** Class applied to the phone frame — your hook for sizing. */
+    className?: string;
+    /** Inline styles on the frame. */
+    style?: CSSProperties;
+}
+
+declare function TikTokPostPreviewImpl({ variant, creatorInfo, media, className, style, }: TikTokPostPreviewProps): react.JSX.Element;
+/** Memoized: the resolved-media hook absorbs unstable media arrays. */
+declare const TikTokPostPreview: react.MemoExoticComponent<typeof TikTokPostPreviewImpl>;
+
+/**
+ * Theming for the TikTok publish PANEL. The preview card itself is always dark
+ * (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.
+ */
+type TikTokTheme = 'light' | 'dark' | 'auto';
+
+/**
+ * The TikTok publish/confirmation panel — the Required-UX surface that turns a
+ * preview into a compliant publish flow. It composes the editable caption (#2),
+ * audience (#5), interaction (#6), commercial disclosure (#7), the video-only
+ * AIGC toggle (SHOULD), the processing notice (#10), the consent declaration
+ * directly above the button (#8), and the consent-gated Post button (#9) — which
+ * fires `onPost` ONLY on an explicit click and is disabled until the post is
+ * valid.
+ *
+ * All logic comes from `@postrun/js` (the single source); this is the render.
+ */
+interface TikTokPublishPanelProps {
+    /** The variant — drives post_type (caps, interaction set) + media count. */
+    variant: TikTokPostVariant;
+    /** Live creator info (audience options, interaction gates). */
+    creatorInfo: TikTokCreatorInfo;
+    /** Editable caption (controlled) + its setter. */
+    caption: string;
+    onCaptionChange: (value: string) => void;
+    /** The TikTok options value (controlled) + its setter. */
+    options: TikTokOptionsValue;
+    onOptionsChange: (value: TikTokOptionsValue) => void;
+    /** Fired ONLY on an explicit Post click — the affirmative-consent gate (#9). */
+    onPost: () => void;
+    /** Disable the button + show a busy label while a publish is in flight. */
+    posting?: boolean;
+    /** Colour scheme. `auto` (default) follows the OS preference. */
+    theme?: TikTokTheme;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function TikTokPublishPanel({ variant, creatorInfo, caption, onCaptionChange, options, onOptionsChange, onPost, posting, theme, className, style, }: TikTokPublishPanelProps): react.JSX.Element;
+
+interface TikTokCaptionFieldProps {
+    /** The caption text (controlled). */
+    value: string;
+    /** Fired on every edit — keep your variant `body` in sync with this. */
+    onChange: (value: string) => void;
+    /** Drives the cap (video → 2200, photo → 4000). */
+    postType: TikTokPostVariant['post_type'];
+    /** Placeholder shown when empty. */
+    placeholder?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+declare function TikTokCaptionField({ value, onChange, postType, placeholder, className, style, }: TikTokCaptionFieldProps): react.JSX.Element;
+
+/**
+ * The audience / privacy selector — MUST #5. TikTok mandates an explicit choice
+ * with NO default, so the select opens on a disabled placeholder and an unchosen
+ * value shows the required hint. Options come from the creator's allowed set;
+ * branded content drops SELF_ONLY (handled in `audiencePrivacyOptions`).
+ */
+declare function AudienceSelect({ creatorInfo, value, onChange, }: {
+    creatorInfo: TikTokCreatorInfo;
+    value: TikTokOptionsValue;
+    onChange: (value: TikTokOptionsValue) => void;
+}): react.JSX.Element;
+
+/**
+ * The interaction toggles — MUST #6. Video shows Comment / Duet / Stitch; a photo
+ * post shows only Comment (TikTok mandate). None default on; an interaction the
+ * creator forbids renders disabled and forced off. The rows + the forbidden flags
+ * come from `interactionRows` (the single source).
+ */
+declare function InteractionToggles({ creatorInfo, value, onChange, isVideo, }: {
+    creatorInfo: TikTokCreatorInfo;
+    value: TikTokOptionsValue;
+    onChange: (value: TikTokOptionsValue) => void;
+    isVideo: boolean;
+}): react.JSX.Element;
+
+/**
+ * Commercial-content disclosure — MUST #7. Off by default. When on, the user must
+ * pick at least one of "Your brand" / "Branded content" (else the required hint
+ * blocks publish), and the resulting label notice is shown verbatim:
+ *   Your brand     → "Your photo/video will be labeled as 'Promotional content'"
+ *   Branded content→ "Your photo/video will be labeled as 'Paid partnership'"
+ * Branded content can't be private (handled in `setBrandKind` / the audience list).
+ */
+declare function CommercialDisclosure({ value, onChange, }: {
+    value: TikTokOptionsValue;
+    onChange: (value: TikTokOptionsValue) => void;
+}): react.JSX.Element;
+
+/**
+ * The consent declaration — MUST #8. Rendered DIRECTLY above the Post button. The
+ * wording switches on whether the post is disclosed as branded content (verbatim
+ * TikTok copy):
+ *   default → "By posting, you agree to TikTok's Music Usage Confirmation"
+ *   branded → "By posting, you agree to TikTok's Branded Content Policy and
+ *              Music Usage Confirmation."
+ */
+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 };