@algenium/blocks 1.13.0 → 1.14.1

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import * as React from 'react';
 import React__default, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { LucideIcon } from 'lucide-react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { HlsConfig, RetryConfig, LoaderResponse } from 'hls.js';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
@@ -10,7 +12,6 @@ import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { Drawer as Drawer$1 } from 'vaul';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 import { ClassValue } from 'clsx';
 
@@ -731,6 +732,294 @@ interface ChatSidebarProps {
 }
 declare function ChatSidebar({ currentUserId, config, labels, roleLabel, roomTypeLabel, mobileTopOffset, className, }: ChatSidebarProps): react_jsx_runtime.JSX.Element | null;
 
+/** Category keys, in display order. */
+type EmojiCategoryKey = "smileys" | "people" | "nature" | "food" | "travel" | "activities" | "objects" | "symbols" | "flags";
+interface EmojiDatum {
+    /** The emoji glyph to insert. */
+    e: string;
+    /** English label, for aria-label / tooltip. */
+    n: string;
+    /** Normalized bilingual (en+es) search haystack; space-joined tokens. */
+    k: string;
+    /** Uniform skin-tone variants, tone 1..5. Present only when applicable. */
+    t?: string[];
+}
+interface EmojiCategoryData {
+    key: EmojiCategoryKey;
+    emojis: EmojiDatum[];
+}
+
+/** 0 = default (no modifier / yellow); 1..5 = Fitzpatrick light..dark. */
+type EmojiSkinTone = 0 | 1 | 2 | 3 | 4 | 5;
+type EmojiPickerLocale = "en" | "es";
+interface EmojiPickerLabels {
+    searchPlaceholder?: string;
+    searchAriaLabel?: string;
+    noResults?: string;
+    recentTitle?: string;
+    skinToneAriaLabel?: string;
+    /** Overrides the built-in category section titles (keyed by category, plus
+     * `recent`). When omitted, titles come from `locale`. */
+    categoryTitles?: Partial<Record<EmojiCategoryKey | "recent", string>>;
+}
+interface EmojiPickerProps {
+    /** Called with the (skin-tone-applied) emoji glyph when one is chosen. */
+    onSelect: (emoji: string) => void;
+    /** Drives the default section titles + skin-tone labels. Search is always
+     * bilingual regardless. Default `"en"`. */
+    locale?: EmojiPickerLocale;
+    labels?: EmojiPickerLabels;
+    className?: string;
+    /** How many recently-used emoji to remember. Default 24. */
+    recentLimit?: number;
+    /** localStorage namespace for recents + skin-tone preference. Default
+     * `"blocks-emoji"`. Set to `null` to disable persistence entirely. */
+    storageKey?: string | null;
+}
+/**
+ * Normalizes a search query the same way keyword haystacks are normalized at
+ * generation time (see `scripts/generate-emoji-data.mjs`): lowercased, accents
+ * stripped, punctuation collapsed to spaces. Keeping the two in lockstep is
+ * what lets "corazón", "corazon" and "heart" all match the same emoji.
+ */
+declare function normalizeEmojiQuery(input: string): string;
+/**
+ * Zero-dependency emoji picker with bilingual (English + Spanish) search,
+ * category navigation, a persisted "frequently used" section, a global skin
+ * tone preference, and keyboard navigation (desktop-first). Usable standalone
+ * or inside {@link EmojiPickerPopover}.
+ */
+declare function EmojiPicker({ onSelect, locale, labels, className, recentLimit, storageKey, }: EmojiPickerProps): react_jsx_runtime.JSX.Element;
+
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
+
+interface EmojiPickerPopoverProps extends EmojiPickerProps {
+    /** aria-label for the trigger button. Defaults by `locale`. */
+    triggerLabel?: string;
+    /** Extra classes for the trigger button. */
+    triggerClassName?: string;
+    /** Popover side. Default `"top"`. */
+    side?: React.ComponentProps<typeof PopoverContent>["side"];
+    /** Popover alignment. Default `"end"`. */
+    align?: React.ComponentProps<typeof PopoverContent>["align"];
+    /** Controlled open state (optional). */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Keep the popover open after choosing an emoji (e.g. to add several).
+     * Default `false`. */
+    keepOpenOnSelect?: boolean;
+}
+/**
+ * Convenience wrapper: a `Smile` icon button that opens {@link EmojiPicker} in
+ * a popover. Drop it next to a textarea/input; wire `onSelect` to insert at the
+ * caret. Uncontrolled by default; pass `open`/`onOpenChange` to control it.
+ */
+declare function EmojiPickerPopover({ onSelect, triggerLabel, triggerClassName, side, align, open, onOpenChange, keepOpenOnSelect, locale, ...pickerProps }: EmojiPickerPopoverProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Playback error description, ported from the app's HLS player but stripped of
+ * Sentry. `@algenium/blocks` must stay reporting-agnostic: the player surfaces
+ * a {@link DescribedPlaybackError} through an optional `onError` prop so each
+ * app can wire its own reporting (Sentry, Datadog, console, …).
+ *
+ * User-facing messages are intentionally NOT baked in here — they come from the
+ * player's `labels` prop so they stay translatable. This module only classifies
+ * the error and produces a machine-readable summary + detail for logging.
+ */
+type HlsPlayerMode = "live" | "vod";
+/** Coarse category the player uses to pick the right localized message. */
+type PlaybackErrorKind = "unavailable" | "network" | "media" | "unsupported" | "generic";
+type PlaybackErrorContext = {
+    mode: HlsPlayerMode;
+    src: string;
+    manifestParsed: boolean;
+    retryCount?: number;
+    source: "hls" | "native" | "unsupported";
+};
+type PlaybackErrorDetail = {
+    source: PlaybackErrorContext["source"];
+    kind: PlaybackErrorKind;
+    type?: string;
+    details?: string;
+    fatal?: boolean;
+    httpStatus?: number;
+    url?: string;
+    reason?: string;
+    errorMessage?: string;
+    mediaErrorCode?: number;
+    mediaErrorName?: string;
+    context: PlaybackErrorContext;
+};
+type DescribePlaybackErrorInput = {
+    source: "hls";
+    type?: string;
+    details?: string;
+    fatal: boolean;
+    url?: string;
+    response?: {
+        code?: number;
+        text?: string;
+    };
+    reason?: string;
+    error?: unknown;
+    context: PlaybackErrorContext;
+} | {
+    source: "native";
+    mediaError?: MediaError | null;
+    context: PlaybackErrorContext;
+} | {
+    source: "unsupported";
+    context: PlaybackErrorContext;
+};
+type DescribedPlaybackError = {
+    /** Machine-readable one-line summary for logs. */
+    summary: string;
+    /** Coarse category for choosing a localized message. */
+    kind: PlaybackErrorKind;
+    detail: PlaybackErrorDetail;
+};
+declare function describePlaybackError(input: DescribePlaybackErrorInput): DescribedPlaybackError;
+
+interface PlaybackStats {
+    /** Concurrent live viewers (meaningful in live mode). */
+    viewers?: number;
+    /** Cumulative VOD reproductions. */
+    views?: number;
+}
+interface UsePlaybackStatsOptions {
+    /** Poll interval in ms. Default 15000. */
+    intervalMs?: number;
+    /** When false, polling is paused. Default true. */
+    enabled?: boolean;
+}
+/**
+ * Polls a playback-stats endpoint (media-svc `GET /playback/:mediaId/stats`)
+ * and returns `{ viewers, views }`. Plain `fetch`, zero dependencies, so wiring
+ * it into an app is a one-liner. Fails silently (stats are non-critical); the
+ * last successful value is retained across transient errors.
+ */
+declare function usePlaybackStats(statsUrl: string | null | undefined, { intervalMs, enabled }?: UsePlaybackStatsOptions): PlaybackStats;
+
+interface VideoPlayerLabels {
+    play?: string;
+    pause?: string;
+    mute?: string;
+    unmute?: string;
+    enterFullscreen?: string;
+    exitFullscreen?: string;
+    pictureInPicture?: string;
+    settings?: string;
+    quality?: string;
+    auto?: string;
+    speed?: string;
+    live?: string;
+    goLive?: string;
+    tapToUnmute?: string;
+    loading?: string;
+    waiting?: string;
+    retry?: string;
+    /** Messages by error kind; a generic fallback covers the rest. */
+    errorUnavailable?: string;
+    errorNetwork?: string;
+    errorMedia?: string;
+    errorUnsupported?: string;
+    errorGeneric?: string;
+    /** `(n) => "N watching"`. */
+    formatViewers?: (n: number) => string;
+    /** `(n) => "N views"`. */
+    formatViews?: (n: number) => string;
+}
+interface VideoPlayerProps {
+    src: string;
+    mode: "live" | "vod";
+    /** Cover image; renders a click-to-play state before attaching HLS. */
+    poster?: string;
+    autoPlay?: boolean;
+    muted?: boolean;
+    /** Presentational stats (see `usePlaybackStats`). */
+    stats?: PlaybackStats;
+    labels?: VideoPlayerLabels;
+    /** Show the resolution picker when multiple levels exist. Default true. */
+    showQualitySelector?: boolean;
+    onPlayingChange?: (playing: boolean) => void;
+    /** Fires once, the first time playback actually starts — wire your view
+     * beacon here. */
+    onFirstPlay?: () => void;
+    onError?: (error: DescribedPlaybackError) => void;
+    className?: string;
+}
+/**
+ * Standardized HLS video player with a fully custom control bar (no native
+ * `controls`): click-to-play poster, play/pause, mute + volume, resolution
+ * picker, playback speed (VOD), Picture-in-Picture, fullscreen, a VOD seekbar
+ * with buffered ranges, and a live badge (no seekbar) with a "go live"
+ * affordance. `stats` renders live viewer / VOD reproduction counts.
+ *
+ * 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_runtime.JSX.Element;
+
+type PlaybackState = "idle" | "loading" | "ready" | "waiting" | "error";
+/** Autoplay overlay state once the manifest is parsed. */
+type AutoplayState = "none" | "playing" | "muted" | "blocked";
+interface QualityLevel {
+    /** hls.js level index. */
+    index: number;
+    /** Vertical resolution, e.g. 720. */
+    height: number;
+}
+interface UseHlsPlaybackOptions {
+    src: string;
+    mode: HlsPlayerMode;
+    /** When false, nothing is attached/loaded (poster gating). */
+    active: boolean;
+    /** Attempt autoplay once the manifest is ready. Live always autoplays. */
+    autoPlay?: boolean;
+    /** Start muted (independent of the autoplay cascade). */
+    muted?: boolean;
+    onError?: (error: DescribedPlaybackError) => void;
+    onPlayingChange?: (playing: boolean) => void;
+}
+interface UseHlsPlaybackResult {
+    videoRef: React.RefObject<HTMLVideoElement | null>;
+    state: PlaybackState;
+    /** Available quality levels (empty for native HLS / single-level). */
+    qualities: QualityLevel[];
+    /** Selected level index, or -1 for automatic. */
+    activeLevel: number;
+    setLevel: (index: number) => void;
+    autoplayState: AutoplayState;
+    /** The classified error, when `state === "error"`. */
+    error: DescribedPlaybackError | null;
+    retry: () => void;
+}
+/**
+ * Attaches hls.js (loaded on demand via dynamic import) or native HLS to a
+ * `<video>` element and exposes the state a custom control bar needs. Ported
+ * from the app's production `HlsPlayer` effect, minus the built-in UI and
+ * Sentry: errors are classified and handed to `onError`.
+ */
+declare function useHlsPlayback({ src, mode, active, autoPlay, muted, onError, onPlayingChange, }: UseHlsPlaybackOptions): UseHlsPlaybackResult;
+
+/** Retry transient live-edge 404s; hls.js skips all 4xx by default. */
+declare function shouldRetryLiveEdge404(retryConfig: RetryConfig | null | undefined, retryCount: number, _isTimeout: boolean, loaderResponse: LoaderResponse | undefined, defaultRetry: boolean): boolean;
+/**
+ * HLS.js options tuned for live playback through a Cloudflare R2 custom domain.
+ * Ported from the app's production player: stays 4 segments (~8s) behind the
+ * live edge so transient upload lag never reaches the playhead, and retries the
+ * 404s that appear while a new segment is still being written.
+ */
+declare function createLiveHlsConfig(): Partial<HlsConfig>;
+/**
+ * HLS.js options for on-demand (VOD) playback. No live-edge cushion; enables
+ * the worker and lets hls.js manage the buffer with its defaults, which are
+ * well suited to seekable recordings.
+ */
+declare function createVodHlsConfig(): Partial<HlsConfig>;
+
 /**
  * Debounces a value — useful for ZIP lookups and autocomplete queries.
  */
@@ -811,11 +1100,6 @@ declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div
 declare function DrawerTitle({ className, ...props }: React.ComponentProps<typeof Drawer$1.Title>): react_jsx_runtime.JSX.Element;
 declare function DrawerDescription({ className, ...props }: React.ComponentProps<typeof Drawer$1.Description>): react_jsx_runtime.JSX.Element;
 
-declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
-declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content>): react_jsx_runtime.JSX.Element;
-declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
-
 declare function ScrollArea({ className, children, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): react_jsx_runtime.JSX.Element;
 
@@ -958,4 +1242,4 @@ declare const MEXICO_STATE_PATHS: Record<MexicoStateId, string>;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { type AddressAutocompleteAdapter, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, BLOCKS_DATA_ENVIRONMENTS, type BlocksDataEnvironment, type BlocksLanguage, type BlocksNotification, Button, CalendarContext, type CalendarContextValue, type CalendarData, type CalendarEvent, CalendarSubscribeButton, type CalendarSubscribeButtonProps, CalendarView, type CalendarViewLabels, type CalendarViewMode, type CalendarViewProps, CalendarWidget, type CalendarWidgetLabels, type CalendarWidgetProps, CardInput, type CardInputLabels, type CardInputProps, type CardTokenResult, type ChatConversation, type ChatConversationRoom, type ChatMessageData, type ChatRoomConfig, ChatRoomView, type ChatRoomViewLabels, type ChatRoomViewProps, ChatSidebar, ChatSidebarContext, type ChatSidebarContextValue, type ChatSidebarLabels, type ChatSidebarProps, ChatSidebarProvider, type ChatSidebarProviderProps, type ChatSidebarView, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateProps, EnvironmentBanner, type EnvironmentBannerLabels, type EnvironmentBannerProps, EnvironmentContext, type EnvironmentContextValue, EnvironmentDot, type EnvironmentDotProps, EnvironmentMiniBadge, type EnvironmentMiniBadgeProps, EnvironmentSwitcher, type EnvironmentSwitcherLabels, type EnvironmentSwitcherProps, ErrorState, EventDialog, type EventDialogLabels, type EventDialogProps, EventRsvpBadge, type EventRsvpBadgeProps, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, MiniCalendar, type MiniCalendarProps, type Notification, type NotificationType, NotificationsContext, type NotificationsContextValue, NotificationsWidget, type NotificationsWidgetProps, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type ProfessionalVerificationStatus, ScrollArea, ScrollBar, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, USAddressInput, type USAddressInputLabels, type USAddressInputProps, type USAddressValue, UpcomingEvents, type UpcomingEventsProps, type UseChatRoomResult, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, buttonVariants, cn, defaultLanguages, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useDebouncedValue, useDebouncedValueStrict, useEnvironmentContext, useLanguageContext, useNotificationsContext };
+export { type AddressAutocompleteAdapter, type AutoplayState, AvatarEditor, AvatarEditorDialog, type AvatarEditorDialogProps, type AvatarEditorProps, BLOCKS_DATA_ENVIRONMENTS, type BlocksDataEnvironment, type BlocksLanguage, type BlocksNotification, Button, CalendarContext, type CalendarContextValue, type CalendarData, type CalendarEvent, CalendarSubscribeButton, type CalendarSubscribeButtonProps, CalendarView, type CalendarViewLabels, type CalendarViewMode, type CalendarViewProps, CalendarWidget, type CalendarWidgetLabels, type CalendarWidgetProps, CardInput, type CardInputLabels, type CardInputProps, type CardTokenResult, type ChatConversation, type ChatConversationRoom, type ChatMessageData, type ChatRoomConfig, ChatRoomView, type ChatRoomViewLabels, type ChatRoomViewProps, ChatSidebar, ChatSidebarContext, type ChatSidebarContextValue, type ChatSidebarLabels, type ChatSidebarProps, ChatSidebarProvider, type ChatSidebarProviderProps, type ChatSidebarView, type DescribedPlaybackError, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EmojiCategoryData, type EmojiCategoryKey, type EmojiDatum, EmojiPicker, type EmojiPickerLabels, type EmojiPickerLocale, EmojiPickerPopover, type EmojiPickerPopoverProps, type EmojiPickerProps, type EmojiSkinTone, EmptyState, type EmptyStateProps, EnvironmentBanner, type EnvironmentBannerLabels, type EnvironmentBannerProps, EnvironmentContext, type EnvironmentContextValue, EnvironmentDot, type EnvironmentDotProps, EnvironmentMiniBadge, type EnvironmentMiniBadgeProps, EnvironmentSwitcher, type EnvironmentSwitcherLabels, type EnvironmentSwitcherProps, ErrorState, EventDialog, type EventDialogLabels, type EventDialogProps, EventRsvpBadge, type EventRsvpBadgeProps, type HlsPlayerMode, type Language, LanguageContext, type LanguageContextValue, LanguageSwitcher, type LanguageSwitcherLabels, type LanguageSwitcherProps, LoadingState, MEXICO_STATES, MEXICO_STATE_PATHS, MexicoMap, type MexicoMapProps, type MexicoState, type MexicoStateId, MiniCalendar, type MiniCalendarProps, type Notification, type NotificationType, NotificationsContext, type NotificationsContextValue, NotificationsWidget, type NotificationsWidgetProps, OrgSwitcher, type OrgSwitcherLabels, type OrgSwitcherProps, type OrgSwitcherTenant, type PlaybackErrorContext, type PlaybackErrorDetail, type PlaybackErrorKind, type PlaybackState, type PlaybackStats, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type ProfessionalVerificationStatus, type QualityLevel, ScrollArea, ScrollBar, Slider, ThemeSwitcher, type ThemeSwitcherLabels, type ThemeSwitcherProps, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, USAddressInput, type USAddressInputLabels, type USAddressInputProps, type USAddressValue, UpcomingEvents, type UpcomingEventsProps, type UseChatRoomResult, type UseHlsPlaybackOptions, type UseHlsPlaybackResult, type UsePlaybackStatsOptions, VerifiedProfessionalBadge, type VerifiedProfessionalBadgeProps, VideoPlayer, type VideoPlayerLabels, type VideoPlayerProps, buttonVariants, cn, createLiveHlsConfig, createVodHlsConfig, defaultLanguages, describePlaybackError, getEnvironmentDotClass, getEnvironmentLabel, isBlocksDataEnvironment, normalizeEmojiQuery, shouldRetryLiveEdge404, toggleVariants, useCalendarContext, useChatRoom, useChatSidebar, useDebouncedValue, useDebouncedValueStrict, useEnvironmentContext, useHlsPlayback, useLanguageContext, useNotificationsContext, usePlaybackStats };