@sesionario/blocks 1.22.2 → 1.23.0

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormEvent, KeyboardEvent, RefObject, CSSProperties, ReactNode, ComponentProps, SVGProps } from 'react';
+import { FormEvent, KeyboardEvent, RefObject, CSSProperties, ReactNode, ComponentProps, Dispatch, SetStateAction, SVGProps } from 'react';
 import { LucideIcon } from 'lucide-react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -990,6 +990,57 @@ interface UseSearchHotkeyResult {
  */
 declare function useSearchHotkey(options?: UseSearchHotkeyOptions): UseSearchHotkeyResult;
 
+/**
+ * Like `useState`, but when the surrounding `ScrollRestorationProvider` is
+ * mounting a browser back/forward traversal, the initial state is read from
+ * an in-memory snapshot (so infinite lists paint tall enough to restore
+ * scroll). Writes back on every change. Outside a provider, degrades to
+ * plain `useState`.
+ */
+declare function useRestorableState<T>(subKey: string, initializer: () => T): [T, Dispatch<SetStateAction<T>>];
+
+type ScrollRestorationContextValue = {
+    routeKey: string;
+    /** True when this route mount is a browser back/forward traversal. */
+    isTraversal: boolean;
+    anchorAttribute: string;
+};
+declare function useScrollRestorationContext(): ScrollRestorationContextValue | null;
+type ScrollRestorationProviderProps = {
+    /** App-supplied key, typically `pathname + search`. */
+    routeKey: string;
+    /**
+     * Nested scroll container. Omit to use the document (window) scroller.
+     * Required when the app shells content inside `overflow-auto` / `overflow-y-auto`.
+     */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Attribute used to mark restore anchors. Default: `data-scroll-anchor`. */
+    anchorAttribute?: string;
+    children: ReactNode;
+};
+/**
+ * Owns per-route scroll marks: saves on scroll, resets to top on fresh
+ * navigation, and restores (with anchor alignment) on browser back/forward.
+ *
+ * Apps must supply `routeKey` from their router (`usePathname` +
+ * `useSearchParams`) so this package stays free of `next/*` imports.
+ */
+declare function ScrollRestorationProvider({ routeKey, containerRef, anchorAttribute, children, }: ScrollRestorationProviderProps): React.JSX.Element;
+
+/**
+ * Framework-free scroll-restoration store.
+ *
+ * Keeps per-route scroll marks (offset + anchor) and in-memory list snapshots
+ * so infinite-scroll pages can remount tall enough for the browser to land
+ * where the user left off. No `next/*` imports — apps supply the route key.
+ */
+type ScrollMark = {
+    top: number;
+    anchorId: string | null;
+    /** Anchor's top edge relative to the scrollport top at save time. */
+    anchorTop: number;
+};
+
 type SearchablePickerLabels = {
     placeholder?: string;
     searchPlaceholder?: string;
@@ -1501,4 +1552,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, BrandX, type BrandXProps, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, type DataListItemProps, type DataListProps, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, EditableSection, type EditableSectionLabels, type EditableSectionMode, type EditableSectionProps, type EditableSectionSlots, 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, FieldMessage, type FieldMessageProps, 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 UseEditableSectionOptions, type UseEditableSectionResult, 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, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, BrandX, type BrandXProps, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, type DataListItemProps, type DataListProps, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, EditableSection, type EditableSectionLabels, type EditableSectionMode, type EditableSectionProps, type EditableSectionSlots, 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, FieldMessage, type FieldMessageProps, 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, type ScrollMark, type ScrollRestorationContextValue, ScrollRestorationProvider, type ScrollRestorationProviderProps, 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 UseEditableSectionOptions, type UseEditableSectionResult, 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, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useRestorableState, useScrollFadeXEdges, useScrollRestorationContext, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { FormEvent, KeyboardEvent, RefObject, CSSProperties, ReactNode, ComponentProps, SVGProps } from 'react';
+import { FormEvent, KeyboardEvent, RefObject, CSSProperties, ReactNode, ComponentProps, Dispatch, SetStateAction, SVGProps } from 'react';
 import { LucideIcon } from 'lucide-react';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
@@ -990,6 +990,57 @@ interface UseSearchHotkeyResult {
  */
 declare function useSearchHotkey(options?: UseSearchHotkeyOptions): UseSearchHotkeyResult;
 
+/**
+ * Like `useState`, but when the surrounding `ScrollRestorationProvider` is
+ * mounting a browser back/forward traversal, the initial state is read from
+ * an in-memory snapshot (so infinite lists paint tall enough to restore
+ * scroll). Writes back on every change. Outside a provider, degrades to
+ * plain `useState`.
+ */
+declare function useRestorableState<T>(subKey: string, initializer: () => T): [T, Dispatch<SetStateAction<T>>];
+
+type ScrollRestorationContextValue = {
+    routeKey: string;
+    /** True when this route mount is a browser back/forward traversal. */
+    isTraversal: boolean;
+    anchorAttribute: string;
+};
+declare function useScrollRestorationContext(): ScrollRestorationContextValue | null;
+type ScrollRestorationProviderProps = {
+    /** App-supplied key, typically `pathname + search`. */
+    routeKey: string;
+    /**
+     * Nested scroll container. Omit to use the document (window) scroller.
+     * Required when the app shells content inside `overflow-auto` / `overflow-y-auto`.
+     */
+    containerRef?: RefObject<HTMLElement | null>;
+    /** Attribute used to mark restore anchors. Default: `data-scroll-anchor`. */
+    anchorAttribute?: string;
+    children: ReactNode;
+};
+/**
+ * Owns per-route scroll marks: saves on scroll, resets to top on fresh
+ * navigation, and restores (with anchor alignment) on browser back/forward.
+ *
+ * Apps must supply `routeKey` from their router (`usePathname` +
+ * `useSearchParams`) so this package stays free of `next/*` imports.
+ */
+declare function ScrollRestorationProvider({ routeKey, containerRef, anchorAttribute, children, }: ScrollRestorationProviderProps): React.JSX.Element;
+
+/**
+ * Framework-free scroll-restoration store.
+ *
+ * Keeps per-route scroll marks (offset + anchor) and in-memory list snapshots
+ * so infinite-scroll pages can remount tall enough for the browser to land
+ * where the user left off. No `next/*` imports — apps supply the route key.
+ */
+type ScrollMark = {
+    top: number;
+    anchorId: string | null;
+    /** Anchor's top edge relative to the scrollport top at save time. */
+    anchorTop: number;
+};
+
 type SearchablePickerLabels = {
     placeholder?: string;
     searchPlaceholder?: string;
@@ -1501,4 +1552,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, BrandX, type BrandXProps, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, type DataListItemProps, type DataListProps, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, EditableSection, type EditableSectionLabels, type EditableSectionMode, type EditableSectionProps, type EditableSectionSlots, 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, FieldMessage, type FieldMessageProps, 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 UseEditableSectionOptions, type UseEditableSectionResult, 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, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, type BlocksLanguage, BrandX, type BrandXProps, Bubble, BubbleContent, BubbleGroup, BubbleReactions, type ChatListMessage, ChatMessageList, type ChatMessageListProps, ConfirmDestructiveDialog, type ConfirmDestructiveDialogProps, type ConversationKind, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, type DataListItemProps, type DataListProps, type DescribedPlaybackError, DropdownMenuItem, DropdownMenuSeparator, EditableSection, type EditableSectionLabels, type EditableSectionMode, type EditableSectionProps, type EditableSectionSlots, 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, FieldMessage, type FieldMessageProps, 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, type ScrollMark, type ScrollRestorationContextValue, ScrollRestorationProvider, type ScrollRestorationProviderProps, 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 UseEditableSectionOptions, type UseEditableSectionResult, 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, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery, usePlaybackStats, useRealtimeChannel, useRestorableState, useScrollFadeXEdges, useScrollRestorationContext, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };

package/dist/index.js

@@ -5150,7 +5150,7 @@ function VideoPlayer({
               setUserStarted(true);
               revealControls();
             },
-            className: "absolute inset-0 flex items-center justify-center bg-cover bg-center",
+            className: "absolute inset-0 flex items-center justify-center bg-black bg-contain bg-center bg-no-repeat",
             style: poster ? { backgroundImage: `url(${poster})` } : void 0,
             children: /* @__PURE__ */ jsx("span", { className: "flex size-16 items-center justify-center rounded-full bg-black/50 backdrop-blur-sm transition group-hover:bg-black/70", children: /* @__PURE__ */ jsx(Play, { className: "size-8 translate-x-0.5", fill: "currentColor" }) })
           }
@@ -5615,6 +5615,340 @@ function useSearchHotkey(options = {}) {
   return { open, setOpen, toggle };
 }
 
+// src/lib/scroll-restoration/store.ts
+var MAX_MARKS = 30;
+var MAX_SNAPSHOT_ROUTES = 3;
+var PENDING_TRAVERSAL_TTL_MS = 1e3;
+var scrollMarks = /* @__PURE__ */ new Map();
+var snapshotsByRoute = /* @__PURE__ */ new Map();
+var pendingTraversalKey = null;
+var pendingTraversalTimeout = null;
+var popstateInstalled = false;
+function touchMapEntry(map, key, value, max) {
+  if (map.has(key)) map.delete(key);
+  map.set(key, value);
+  while (map.size > max) {
+    const oldest = map.keys().next().value;
+    if (oldest === void 0) break;
+    map.delete(oldest);
+  }
+}
+function getScrollMark(routeKey) {
+  const mark = scrollMarks.get(routeKey);
+  if (!mark) return void 0;
+  scrollMarks.delete(routeKey);
+  scrollMarks.set(routeKey, mark);
+  return mark;
+}
+function setScrollMark(routeKey, mark) {
+  touchMapEntry(scrollMarks, routeKey, mark, MAX_MARKS);
+}
+function deleteScrollMark(routeKey) {
+  scrollMarks.delete(routeKey);
+}
+function getSnapshot(routeKey, subKey) {
+  const route = snapshotsByRoute.get(routeKey);
+  if (!route) return void 0;
+  snapshotsByRoute.delete(routeKey);
+  snapshotsByRoute.set(routeKey, route);
+  return route.get(subKey);
+}
+function setSnapshot(routeKey, subKey, value) {
+  let route = snapshotsByRoute.get(routeKey);
+  if (route) {
+    snapshotsByRoute.delete(routeKey);
+  } else {
+    route = /* @__PURE__ */ new Map();
+  }
+  route.set(subKey, value);
+  snapshotsByRoute.set(routeKey, route);
+  while (snapshotsByRoute.size > MAX_SNAPSHOT_ROUTES) {
+    const oldest = snapshotsByRoute.keys().next().value;
+    if (oldest === void 0) break;
+    snapshotsByRoute.delete(oldest);
+  }
+}
+function deleteSnapshotsForRoute(routeKey) {
+  snapshotsByRoute.delete(routeKey);
+}
+function clearRoute(routeKey) {
+  deleteScrollMark(routeKey);
+  deleteSnapshotsForRoute(routeKey);
+}
+function clearPendingTraversalTimer() {
+  if (pendingTraversalTimeout !== null) {
+    clearTimeout(pendingTraversalTimeout);
+    pendingTraversalTimeout = null;
+  }
+}
+function schedulePendingTraversalClear() {
+  clearPendingTraversalTimer();
+  pendingTraversalTimeout = setTimeout(() => {
+    pendingTraversalKey = null;
+    pendingTraversalTimeout = null;
+  }, PENDING_TRAVERSAL_TTL_MS);
+}
+function ensurePopstateListener() {
+  if (popstateInstalled || typeof window === "undefined") return;
+  popstateInstalled = true;
+  window.addEventListener("popstate", () => {
+    pendingTraversalKey = window.location.pathname + window.location.search;
+    schedulePendingTraversalClear();
+  });
+}
+function isPendingTraversal(routeKey) {
+  ensurePopstateListener();
+  return pendingTraversalKey === routeKey;
+}
+function consumePendingTraversal(routeKey) {
+  ensurePopstateListener();
+  if (pendingTraversalKey !== routeKey) return false;
+  pendingTraversalKey = null;
+  clearPendingTraversalTimer();
+  return true;
+}
+function getScrollTop(container) {
+  if (!container) {
+    return window.scrollY || document.documentElement.scrollTop || 0;
+  }
+  return container.scrollTop;
+}
+function setScrollTop(container, top) {
+  if (!container) {
+    window.scrollTo(0, top);
+    return;
+  }
+  container.scrollTop = top;
+}
+function scrollportTop(container) {
+  return container ? container.getBoundingClientRect().top : 0;
+}
+function scrollportBottom(container) {
+  if (!container) return window.innerHeight;
+  return container.getBoundingClientRect().bottom;
+}
+function escapeAttrValue(value) {
+  if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+    return CSS.escape(value);
+  }
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+function resolveAnchor(container, attribute) {
+  const scope = container ?? document;
+  const nodes = scope.querySelectorAll(`[${attribute}]`);
+  if (nodes.length === 0) return null;
+  const portTop = scrollportTop(container);
+  const portBottom = scrollportBottom(container);
+  let bestId = null;
+  let bestTop = 0;
+  let bestScore = Infinity;
+  for (const node of nodes) {
+    if (!(node instanceof HTMLElement)) continue;
+    const id = node.getAttribute(attribute);
+    if (!id) continue;
+    const rect = node.getBoundingClientRect();
+    if (rect.bottom <= portTop || rect.top >= portBottom) continue;
+    const relativeTop = rect.top - portTop;
+    const score = Math.abs(relativeTop);
+    if (score < bestScore) {
+      bestScore = score;
+      bestId = id;
+      bestTop = relativeTop;
+    }
+  }
+  if (!bestId) return null;
+  return { id: bestId, top: bestTop };
+}
+function captureMark(container, attribute) {
+  const anchor = resolveAnchor(container, attribute);
+  return {
+    top: getScrollTop(container),
+    anchorId: anchor?.id ?? null,
+    anchorTop: anchor?.top ?? 0
+  };
+}
+function applyMark(container, mark, attribute) {
+  if (mark.anchorId) {
+    const scope = container ?? document;
+    const el = scope.querySelector(
+      `[${attribute}="${escapeAttrValue(mark.anchorId)}"]`
+    );
+    if (el instanceof HTMLElement) {
+      const portTop = scrollportTop(container);
+      const currentRelativeTop = el.getBoundingClientRect().top - portTop;
+      const delta = currentRelativeTop - mark.anchorTop;
+      setScrollTop(container, getScrollTop(container) + delta);
+      return true;
+    }
+  }
+  setScrollTop(container, mark.top);
+  return false;
+}
+function getScrollHeight(container) {
+  if (!container) {
+    return Math.max(
+      document.documentElement.scrollHeight,
+      document.body?.scrollHeight ?? 0
+    );
+  }
+  return container.scrollHeight;
+}
+var DEFAULT_ANCHOR_ATTRIBUTE = "data-scroll-anchor";
+var STABILIZE_MS = 600;
+var ScrollRestorationContext = createContext(null);
+function useScrollRestorationContext() {
+  return useContext(ScrollRestorationContext);
+}
+function readContainer(containerRef) {
+  return containerRef?.current ?? null;
+}
+function ScrollRestorationProvider({
+  routeKey,
+  containerRef,
+  anchorAttribute = DEFAULT_ANCHOR_ATTRIBUTE,
+  children
+}) {
+  ensurePopstateListener();
+  const traversalForRouteRef = useRef({ routeKey: "", isTraversal: false });
+  if (traversalForRouteRef.current.routeKey !== routeKey) {
+    traversalForRouteRef.current = {
+      routeKey,
+      isTraversal: isPendingTraversal(routeKey)
+    };
+  }
+  const isTraversal = traversalForRouteRef.current.isTraversal;
+  const value = useMemo(
+    () => ({
+      routeKey,
+      isTraversal,
+      anchorAttribute
+    }),
+    [routeKey, isTraversal, anchorAttribute]
+  );
+  useEffect(() => {
+    if (typeof window === "undefined" || !("scrollRestoration" in history)) {
+      return;
+    }
+    const previous = history.scrollRestoration;
+    history.scrollRestoration = "manual";
+    return () => {
+      history.scrollRestoration = previous;
+    };
+  }, []);
+  const prevRouteKeyRef = useRef(routeKey);
+  const anchorAttributeRef = useRef(anchorAttribute);
+  anchorAttributeRef.current = anchorAttribute;
+  useEffect(() => {
+    const container = readContainer(containerRef);
+    const target = container ?? window;
+    let rafId = 0;
+    const onScroll = () => {
+      if (rafId) return;
+      rafId = requestAnimationFrame(() => {
+        rafId = 0;
+        setScrollMark(
+          routeKey,
+          captureMark(readContainer(containerRef), anchorAttribute)
+        );
+      });
+    };
+    target.addEventListener("scroll", onScroll, { passive: true });
+    return () => {
+      target.removeEventListener("scroll", onScroll);
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [routeKey, containerRef, anchorAttribute]);
+  useLayoutEffect(() => {
+    const container = readContainer(containerRef);
+    const prevKey = prevRouteKeyRef.current;
+    if (prevKey !== routeKey) {
+      setScrollMark(
+        prevKey,
+        captureMark(container, anchorAttributeRef.current)
+      );
+      prevRouteKeyRef.current = routeKey;
+    }
+    const hasHash = typeof window !== "undefined" && window.location.hash.length > 1;
+    if (isTraversal) {
+      consumePendingTraversal(routeKey);
+      const mark = getScrollMark(routeKey);
+      if (!mark) return void 0;
+      applyMark(container, mark, anchorAttribute);
+      return startStabilizationLoop(container, mark, anchorAttribute);
+    }
+    clearRoute(routeKey);
+    if (!hasHash) {
+      setScrollTop(container, 0);
+    }
+    return void 0;
+  }, [routeKey, isTraversal, containerRef, anchorAttribute]);
+  return /* @__PURE__ */ jsx(ScrollRestorationContext.Provider, { value, children });
+}
+function startStabilizationLoop(container, mark, attribute) {
+  const startedAt = performance.now();
+  let lastHeight = getScrollHeight(container);
+  let rafId = 0;
+  let aborted = false;
+  const abort = () => {
+    aborted = true;
+  };
+  const onUserIntent = () => {
+    abort();
+  };
+  window.addEventListener("wheel", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("touchstart", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("keydown", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  window.addEventListener("pointerdown", onUserIntent, {
+    passive: true,
+    once: true
+  });
+  const tick = () => {
+    if (aborted) return;
+    if (performance.now() - startedAt > STABILIZE_MS) return;
+    const height = getScrollHeight(container);
+    if (height !== lastHeight) {
+      lastHeight = height;
+      applyMark(container, mark, attribute);
+    }
+    rafId = requestAnimationFrame(tick);
+  };
+  rafId = requestAnimationFrame(tick);
+  return () => {
+    abort();
+    if (rafId) cancelAnimationFrame(rafId);
+    window.removeEventListener("wheel", onUserIntent);
+    window.removeEventListener("touchstart", onUserIntent);
+    window.removeEventListener("keydown", onUserIntent);
+    window.removeEventListener("pointerdown", onUserIntent);
+  };
+}
+
+// src/hooks/useRestorableState.ts
+function useRestorableState(subKey, initializer) {
+  const ctx = useScrollRestorationContext();
+  const [state, setState] = useState(() => {
+    if (!ctx) return initializer();
+    const traversal = ctx.isTraversal || isPendingTraversal(ctx.routeKey);
+    if (!traversal) return initializer();
+    const snap = getSnapshot(ctx.routeKey, subKey);
+    return snap !== void 0 ? snap : initializer();
+  });
+  useEffect(() => {
+    if (!ctx) return;
+    setSnapshot(ctx.routeKey, subKey, state);
+  }, [ctx, subKey, state]);
+  return [state, setState];
+}
+
 // src/components/search/fuzzy.ts
 function normalize(value) {
   return value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
@@ -8665,6 +8999,6 @@ function useRealtimeChannel({
   }, [enabled, reconnectDelayMs]);
 }
 
-export { AvatarEditor, AvatarEditorDialog, BrandX, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, DropdownMenuItem, DropdownMenuSeparator, EditableSection, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, FieldMessage, 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, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useScrollFadeXEdges, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
+export { AvatarEditor, AvatarEditorDialog, BrandX, Bubble, BubbleContent, BubbleGroup, BubbleReactions, ChatMessageList, ConfirmDestructiveDialog, DEFAULT_EDITABLE_SECTION_LABELS, DataList, DataListItem, DropdownMenuItem, DropdownMenuSeparator, EditableSection, EmojiInput, EmojiPicker, EmojiPickerPopover, EmojiTextarea, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, ErrorState, ExpandableText, FeedVideoPlayer, FieldMessage, 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, ScrollRestorationProvider, SearchCommand, SearchablePicker, SupportMessengerProvider, ThemeSwitcher, VerifiedProfessionalBadge, VideoPlayer, avatarFallbackStyle, bubbleVariants, cn, createLiveHlsConfig, createSupportChatClient, createVodHlsConfig, defaultLanguages, describeAvResync, describePlaybackError, formatPaymentCardBrand, fuzzyMatch, getAvatarColors, getInitials, insertAtCaret, markerVariants, mergePlatformAccountOrgs, normalizeEmojiQuery, normalizePaymentCardBrand, paymentIconBrandFromStripe, paymentTypeFromStripeBrand, shouldRetryLiveEdge404, useDebouncedValue, useDebouncedValueStrict, useEditableSection, useFeedExclusivePlayback, useHlsPlayback, useLanguageContext, useMediaQuery2 as useMediaQuery, usePlaybackStats, useRealtimeChannel, useRestorableState, useScrollFadeXEdges, useScrollRestorationContext, useSearchHotkey, useSupportConversation, useSupportMessenger, useSupportMessengerOptional };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map