@sesionario/blocks 1.17.1 → 1.19.0

package/dist/index.d.cts

@@ -7,6 +7,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { HlsConfig, RetryConfig, LoaderResponse } from 'hls.js';
 import * as RPNInput from 'react-phone-number-input';
+import { PaymentType } from 'react-svg-credit-card-payment-icons';
 import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
 export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
 import { ClassValue } from 'clsx';
@@ -676,6 +677,11 @@ interface VideoPlayerProps {
     labels?: VideoPlayerLabels;
     /** Show the resolution picker when multiple levels exist. Default true. */
     showQualitySelector?: boolean;
+    /**
+     * When true, force-pauses the media element. Clearing it does not
+     * auto-resume — the user must press play again.
+     */
+    paused?: boolean;
     onPlayingChange?: (playing: boolean) => void;
     /** Fires once, the first time playback actually starts — wire your view
      * beacon here. */
@@ -692,7 +698,30 @@ interface VideoPlayerProps {
  *
  * hls.js is a peer dependency loaded on demand; see {@link useHlsPlayback}.
  */
-declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, onPlayingChange, onFirstPlay, onError, className, }: VideoPlayerProps): React.JSX.Element;
+declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, paused, onPlayingChange, onFirstPlay, onError, className, }: VideoPlayerProps): React.JSX.Element;
+
+interface FeedVideoPlayerProps extends VideoPlayerProps {
+    /** Stable id for exclusive playback (typically the feed post id). */
+    playbackId: string;
+}
+/**
+ * Feed-scoped {@link VideoPlayer}: only one feed video plays at a time, and
+ * playback autopauses when the card leaves the viewport or the tab is hidden.
+ */
+declare function FeedVideoPlayer({ playbackId, onPlayingChange, paused: pausedProp, ...playerProps }: FeedVideoPlayerProps): React.JSX.Element;
+
+interface UseFeedExclusivePlaybackResult {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    paused: boolean;
+    onPlayingChange: (playing: boolean) => void;
+}
+/**
+ * Coordinates exclusive feed playback: claims the global slot on play,
+ * force-pauses when another feed video plays, when the player leaves the
+ * viewport, or when the tab is hidden. Picture-in-Picture is exempt from
+ * scroll/visibility autopause.
+ */
+declare function useFeedExclusivePlayback(playbackId: string): UseFeedExclusivePlaybackResult;
 
 type PlaybackState = "idle" | "loading" | "ready" | "waiting" | "error";
 /** Autoplay overlay state once the manifest is parsed. */
@@ -1002,6 +1031,36 @@ interface MexicoMapProps {
 }
 declare function MexicoMap({ selected, onToggle, className }: MexicoMapProps): React.JSX.Element;
 
+type PaymentIconFormat = "flat" | "flatRounded" | "logo" | "logoBorder" | "mono" | "monoOutline";
+interface PaymentIconProps {
+    /** Stripe `card.brand` (e.g. `"amex"`). Null/unknown → Generic. */
+    brand: string | null | undefined;
+    /** Visual style from react-svg-credit-card-payment-icons. */
+    format?: PaymentIconFormat;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+/**
+ * Stripe-friendly payment brand mark (wraps react-svg-credit-card-payment-icons).
+ *
+ * @example
+ * ```tsx
+ * <PaymentIcon brand="amex" />
+ * <PaymentIcon brand={pm.cardBrand} format="flat" width={40} />
+ * ```
+ */
+declare function PaymentIcon({ brand, format, width, height, className, }: PaymentIconProps): React.JSX.Element;
+
+declare function normalizePaymentCardBrand(brand: string | null | undefined): string | null;
+/** Human-readable brand for UI (falls back to a tidy capitalization). */
+declare function formatPaymentCardBrand(brand: string | null | undefined): string;
+/**
+ * Maps a Stripe `card.brand` (or similar) to an upstream payment-icon type.
+ * Unknown / empty brands resolve to `Generic`.
+ */
+declare function paymentTypeFromStripeBrand(brand: string | null | undefined): PaymentType;
+
 declare const MEXICO_STATE_PATHS: Record<MexicoStateId, string>;
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -1261,4 +1320,4 @@ declare function useRealtimeChannel({ getWsUrl, onEvent, enabled, reconnectDelay
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, type MergedPlatformAccountOrg, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PhoneInput, type PhoneInputProps, PlatformAccountMenu, type PlatformAccountMenuLabels, type PlatformAccountMenuOrg, type PlatformAccountMenuProps, type PlatformAccountMenuUrls, type PlatformAccountMenuUser, type PlatformAccountMenuVariant, PlatformNavbar, type PlatformNavbarProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, type RealtimeEvent, type ScrollFadeXEdges, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseRealtimeChannelOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, FeedVideoPlayer, type FeedVideoPlayerProps, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, type MergedPlatformAccountOrg, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, type PaymentIconFormat, type PaymentIconProps, PhoneInput, type PhoneInputProps, PlatformAccountMenu, type PlatformAccountMenuLabels, type PlatformAccountMenuOrg, type PlatformAccountMenuProps, type PlatformAccountMenuUrls, type PlatformAccountMenuUser, type PlatformAccountMenuVariant, PlatformNavbar, type PlatformNavbarProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, type RealtimeEvent, type ScrollFadeXEdges, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseFeedExclusivePlaybackResult, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseRealtimeChannelOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { HlsConfig, RetryConfig, LoaderResponse } from 'hls.js';
 import * as RPNInput from 'react-phone-number-input';
+import { PaymentType } from 'react-svg-credit-card-payment-icons';
 import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
 export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
 import { ClassValue } from 'clsx';
@@ -676,6 +677,11 @@ interface VideoPlayerProps {
     labels?: VideoPlayerLabels;
     /** Show the resolution picker when multiple levels exist. Default true. */
     showQualitySelector?: boolean;
+    /**
+     * When true, force-pauses the media element. Clearing it does not
+     * auto-resume — the user must press play again.
+     */
+    paused?: boolean;
     onPlayingChange?: (playing: boolean) => void;
     /** Fires once, the first time playback actually starts — wire your view
      * beacon here. */
@@ -692,7 +698,30 @@ interface VideoPlayerProps {
  *
  * hls.js is a peer dependency loaded on demand; see {@link useHlsPlayback}.
  */
-declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, onPlayingChange, onFirstPlay, onError, className, }: VideoPlayerProps): React.JSX.Element;
+declare function VideoPlayer({ src, mode, poster, autoPlay, muted, stats, labels, showQualitySelector, paused, onPlayingChange, onFirstPlay, onError, className, }: VideoPlayerProps): React.JSX.Element;
+
+interface FeedVideoPlayerProps extends VideoPlayerProps {
+    /** Stable id for exclusive playback (typically the feed post id). */
+    playbackId: string;
+}
+/**
+ * Feed-scoped {@link VideoPlayer}: only one feed video plays at a time, and
+ * playback autopauses when the card leaves the viewport or the tab is hidden.
+ */
+declare function FeedVideoPlayer({ playbackId, onPlayingChange, paused: pausedProp, ...playerProps }: FeedVideoPlayerProps): React.JSX.Element;
+
+interface UseFeedExclusivePlaybackResult {
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    paused: boolean;
+    onPlayingChange: (playing: boolean) => void;
+}
+/**
+ * Coordinates exclusive feed playback: claims the global slot on play,
+ * force-pauses when another feed video plays, when the player leaves the
+ * viewport, or when the tab is hidden. Picture-in-Picture is exempt from
+ * scroll/visibility autopause.
+ */
+declare function useFeedExclusivePlayback(playbackId: string): UseFeedExclusivePlaybackResult;
 
 type PlaybackState = "idle" | "loading" | "ready" | "waiting" | "error";
 /** Autoplay overlay state once the manifest is parsed. */
@@ -1002,6 +1031,36 @@ interface MexicoMapProps {
 }
 declare function MexicoMap({ selected, onToggle, className }: MexicoMapProps): React.JSX.Element;
 
+type PaymentIconFormat = "flat" | "flatRounded" | "logo" | "logoBorder" | "mono" | "monoOutline";
+interface PaymentIconProps {
+    /** Stripe `card.brand` (e.g. `"amex"`). Null/unknown → Generic. */
+    brand: string | null | undefined;
+    /** Visual style from react-svg-credit-card-payment-icons. */
+    format?: PaymentIconFormat;
+    width?: number;
+    height?: number;
+    className?: string;
+}
+/**
+ * Stripe-friendly payment brand mark (wraps react-svg-credit-card-payment-icons).
+ *
+ * @example
+ * ```tsx
+ * <PaymentIcon brand="amex" />
+ * <PaymentIcon brand={pm.cardBrand} format="flat" width={40} />
+ * ```
+ */
+declare function PaymentIcon({ brand, format, width, height, className, }: PaymentIconProps): React.JSX.Element;
+
+declare function normalizePaymentCardBrand(brand: string | null | undefined): string | null;
+/** Human-readable brand for UI (falls back to a tidy capitalization). */
+declare function formatPaymentCardBrand(brand: string | null | undefined): string;
+/**
+ * Maps a Stripe `card.brand` (or similar) to an upstream payment-icon type.
+ * Unknown / empty brands resolve to `Generic`.
+ */
+declare function paymentTypeFromStripeBrand(brand: string | null | undefined): PaymentType;
+
 declare const MEXICO_STATE_PATHS: Record<MexicoStateId, string>;
 
 declare function MessageGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
@@ -1261,4 +1320,4 @@ declare function useRealtimeChannel({ getWsUrl, onEvent, enabled, reconnectDelay
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, type MergedPlatformAccountOrg, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PhoneInput, type PhoneInputProps, PlatformAccountMenu, type PlatformAccountMenuLabels, type PlatformAccountMenuOrg, type PlatformAccountMenuProps, type PlatformAccountMenuUrls, type PlatformAccountMenuUser, type PlatformAccountMenuVariant, PlatformNavbar, type PlatformNavbarProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, type RealtimeEvent, type ScrollFadeXEdges, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseRealtimeChannelOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiInput, type EmojiInputProps, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmojiTextarea, type EmojiTextareaProps, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, type EmptyStateProps, EmptyTitle, ErrorState, ExpandableText, type ExpandableTextProps, type FeatureEntry, FeedVideoPlayer, type FeedVideoPlayerProps, type FindOrCreateConversationInput, type HlsPlayerMode, ImageLightbox, type ImageLightboxLabels, type ImageLightboxProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, type MergedPlatformAccountOrg, Message, MessageAvatar, MessageComposer, type MessageComposerProps, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, type OpenThreadRequest, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, type PaymentIconFormat, type PaymentIconProps, PhoneInput, type PhoneInputProps, PlatformAccountMenu, type PlatformAccountMenuLabels, type PlatformAccountMenuOrg, type PlatformAccountMenuProps, type PlatformAccountMenuUrls, type PlatformAccountMenuUser, type PlatformAccountMenuVariant, PlatformNavbar, type PlatformNavbarProps, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, type ProfessionalVerificationStatus, type QualityLevel, type RealtimeEvent, type ScrollFadeXEdges, SearchCommand, type SearchCommandLabels, type SearchCommandProps, type SearchCommandSelection, type SearchHit, SearchablePicker, type SearchablePickerCreateOption, type SearchablePickerLabels, type SearchablePickerMultipleProps, type SearchablePickerPinned, type SearchablePickerProps, type SearchablePickerSingleProps, type SupportChatClient, type SupportConversation, type SupportMessage, type SupportMessengerItem, type SupportMessengerLabels, SupportMessengerProvider, type SupportMessengerProviderProps, type SupportMessengerTab, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, type UseFeedExclusivePlaybackResult, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, type UseRealtimeChannelOptions, type UseSearchHotkeyOptions, type UseSearchHotkeyResult, type UseSupportConversationOptions, type UseSupportConversationResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.js

@@ -21,6 +21,7 @@ import { Command as Command$1 } from 'cmdk';
 import * as RPNInput from 'react-phone-number-input';
 import flags from 'react-phone-number-input/flags';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+import { PaymentIcon as PaymentIcon$1 } from 'react-svg-credit-card-payment-icons';
 import { MessageScroller as MessageScroller$1 } from '@shadcn/react/message-scroller';
 export { useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from '@shadcn/react/message-scroller';
 
@@ -3757,7 +3758,7 @@ function insertAtCaret(element, value, text) {
 }
 
 // src/components/emoji/emoji-field-shared.ts
-var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
+var emojiFieldWrapperClassName = "relative w-full rounded-md border border-input bg-transparent shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 has-[[aria-invalid=true]]:border-destructive has-[[aria-invalid=true]]:ring-destructive/20 has-[[data-slot=textarea]:disabled]:opacity-50 has-[[data-slot=input]:disabled]:opacity-50 dark:bg-input/30 dark:has-[[aria-invalid=true]]:ring-destructive/40";
 var emojiFieldResetClassName = "border-0 bg-transparent shadow-none focus-visible:border-transparent focus-visible:ring-0 dark:bg-transparent";
 function mergeRefs(...refs) {
   return (node) => {
@@ -4483,6 +4484,7 @@ function VideoPlayer({
   stats,
   labels,
   showQualitySelector = true,
+  paused = false,
   onPlayingChange,
   onFirstPlay,
   onError,
@@ -4574,6 +4576,11 @@ function VideoPlayer({
       video.removeEventListener("ratechange", onRate);
     };
   }, [videoRef, active, mode]);
+  React7.useEffect(() => {
+    const video = videoRef.current;
+    if (!paused || !video || !isPlaying) return;
+    video.pause();
+  }, [paused, videoRef, isPlaying]);
   React7.useEffect(() => {
     setWebkitFullscreenSupported(hasWebkitVideoFullscreen(videoRef.current));
   }, [videoRef, active]);
@@ -5081,6 +5088,106 @@ function MenuItem({
     }
   );
 }
+
+// src/components/video/feedPlaybackCoordinator.ts
+var players = /* @__PURE__ */ new Map();
+function registerFeedPlayer(id, pause) {
+  players.set(id, pause);
+  return () => {
+    if (players.get(id) === pause) {
+      players.delete(id);
+    }
+  };
+}
+function claimFeedPlaying(id) {
+  for (const [otherId, pause] of players) {
+    if (otherId !== id) pause();
+  }
+}
+
+// src/components/video/useFeedExclusivePlayback.ts
+var VISIBILITY_THRESHOLDS = [0, 0.5, 1];
+var MIN_VISIBLE_RATIO = 0.5;
+function videoInPictureInPicture(container) {
+  if (typeof document === "undefined" || !container) return false;
+  const pip = document.pictureInPictureElement;
+  if (!pip) return false;
+  return container.contains(pip);
+}
+function useFeedExclusivePlayback(playbackId) {
+  const containerRef = React7.useRef(null);
+  const [forcePaused, setForcePaused] = React7.useState(false);
+  const requestPause = React7.useCallback(() => {
+    if (videoInPictureInPicture(containerRef.current)) return;
+    setForcePaused(true);
+  }, []);
+  React7.useEffect(() => {
+    return registerFeedPlayer(playbackId, requestPause);
+  }, [playbackId, requestPause]);
+  React7.useEffect(() => {
+    const node = containerRef.current;
+    if (!node || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (!entry) return;
+        if (!entry.isIntersecting || entry.intersectionRatio < MIN_VISIBLE_RATIO) {
+          requestPause();
+        }
+      },
+      { threshold: [...VISIBILITY_THRESHOLDS] }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [requestPause]);
+  React7.useEffect(() => {
+    const onVisibility = () => {
+      if (document.hidden) requestPause();
+    };
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => document.removeEventListener("visibilitychange", onVisibility);
+  }, [requestPause]);
+  const onPlayingChange = React7.useCallback(
+    (playing) => {
+      if (!playing) return;
+      setForcePaused(false);
+      claimFeedPlaying(playbackId);
+    },
+    [playbackId]
+  );
+  return {
+    containerRef,
+    paused: forcePaused,
+    onPlayingChange
+  };
+}
+function FeedVideoPlayer({
+  playbackId,
+  onPlayingChange,
+  paused: pausedProp,
+  ...playerProps
+}) {
+  const {
+    containerRef,
+    paused: exclusivePaused,
+    onPlayingChange: onExclusivePlayingChange
+  } = useFeedExclusivePlayback(playbackId);
+  const handlePlayingChange = React7.useCallback(
+    (playing) => {
+      onExclusivePlayingChange(playing);
+      onPlayingChange?.(playing);
+    },
+    [onExclusivePlayingChange, onPlayingChange]
+  );
+  return /* @__PURE__ */ jsx("div", { ref: containerRef, "data-slot": "feed-video-player", children: /* @__PURE__ */ jsx(
+    VideoPlayer,
+    {
+      ...playerProps,
+      paused: pausedProp || exclusivePaused,
+      onPlayingChange: handlePlayingChange
+    }
+  ) });
+}
 function usePlaybackStats(statsUrl, { intervalMs = 15e3, enabled = true } = {}) {
   const [stats, setStats] = React7.useState({});
   React7.useEffect(() => {
@@ -6373,6 +6480,63 @@ function MexicoMap({ selected, onToggle, className }) {
     }
   );
 }
+
+// src/lib/paymentCardBrand.ts
+var CARD_BRAND_LABELS = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "American Express",
+  discover: "Discover",
+  diners: "Diners Club",
+  jcb: "JCB",
+  unionpay: "UnionPay"
+};
+var STRIPE_TO_PAYMENT_TYPE = {
+  visa: "Visa",
+  mastercard: "Mastercard",
+  amex: "AmericanExpress",
+  discover: "Discover",
+  diners: "DinersClub",
+  jcb: "JCB",
+  unionpay: "UnionPay"
+};
+function normalizePaymentCardBrand(brand) {
+  if (!brand?.trim()) return null;
+  return brand.trim().toLowerCase();
+}
+function formatPaymentCardBrand(brand) {
+  if (!brand?.trim()) return "Card";
+  const key = brand.trim().toLowerCase();
+  const known = CARD_BRAND_LABELS[key];
+  if (known) return known;
+  return key.charAt(0).toUpperCase() + key.slice(1);
+}
+function paymentTypeFromStripeBrand(brand) {
+  const key = normalizePaymentCardBrand(brand);
+  if (!key) return "Generic";
+  return STRIPE_TO_PAYMENT_TYPE[key] ?? "Generic";
+}
+var DEFAULT_FORMAT = "flatRounded";
+var DEFAULT_WIDTH = 36;
+function PaymentIcon({
+  brand,
+  format = DEFAULT_FORMAT,
+  width = DEFAULT_WIDTH,
+  height,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    PaymentIcon$1,
+    {
+      type: paymentTypeFromStripeBrand(brand),
+      format,
+      width,
+      height,
+      className: cn("inline-block shrink-0", className),
+      "aria-hidden": true
+    }
+  );
+}
 function MessageGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -7703,6 +7867,6 @@ function useRealtimeChannel({
   }, [enabled, reconnectDelayMs]);
 }
 
-export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DropdownMenuItem, DropdownMenuSeparator, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PhoneInput, PlatformAccountMenu, PlatformNavbar, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DropdownMenuItem, DropdownMenuSeparator, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, ImageLightbox, LanguageContext, LanguageSwitcher, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, Marker, MarkerContent, MarkerIcon, Message, MessageAvatar, MessageComposer, MessageContent, MessageFooter, MessageGroup, MessageHeader, MessageScroller, MessageScrollerButton, MessageScrollerContent, MessageScrollerItem, MessageScrollerProvider, MessageScrollerViewport, MexicoMap, OrgSwitcher, PLATFORM_ACCOUNT_ORG_COLLAPSE_AT, PaymentIcon, PhoneInput, PlatformAccountMenu, PlatformNavbar, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map