@livepeer-frameworks/player-react 0.0.3

package/dist/types/hooks/useMetaTrack.d.ts

@@ -0,0 +1,54 @@
+import { type MetaTrackEvent } from '@livepeer-frameworks/player-core';
+import type { UseMetaTrackOptions } from '../types';
+export interface UseMetaTrackReturn {
+    /** Whether connected to MistServer WebSocket */
+    isConnected: boolean;
+    /** Connection state */
+    connectionState: 'disconnected' | 'connecting' | 'connected' | 'reconnecting';
+    /** List of subscribed track IDs */
+    subscribedTracks: string[];
+    /** Subscribe to a meta track */
+    subscribe: (trackId: string, callback: (event: MetaTrackEvent) => void) => () => void;
+    /** Unsubscribe from a meta track */
+    unsubscribe: (trackId: string, callback: (event: MetaTrackEvent) => void) => void;
+    /** Manually connect */
+    connect: () => void;
+    /** Manually disconnect */
+    disconnect: () => void;
+    /** Update playback time for timed event dispatch (call on video timeupdate) */
+    setPlaybackTime: (timeInSeconds: number) => void;
+    /** Handle seek event (call on video seeking/seeked) */
+    onSeek: (newTimeInSeconds: number) => void;
+}
+/**
+ * Hook for subscribing to real-time metadata from MistServer
+ *
+ * Uses native MistServer WebSocket protocol for low-latency metadata delivery:
+ * - Subtitles/captions
+ * - Live scores
+ * - Timed events
+ * - Chapter markers
+ *
+ * @example
+ * ```tsx
+ * const { isConnected, subscribe } = useMetaTrack({
+ *   mistBaseUrl: 'https://mist.example.com',
+ *   streamName: 'my-stream',
+ *   enabled: true,
+ * });
+ *
+ * useEffect(() => {
+ *   if (!isConnected) return;
+ *
+ *   const unsubscribe = subscribe('1', (event) => {
+ *     if (event.type === 'subtitle') {
+ *       setSubtitle(event.data as SubtitleCue);
+ *     }
+ *   });
+ *
+ *   return unsubscribe;
+ * }, [isConnected, subscribe]);
+ * ```
+ */
+export declare function useMetaTrack(options: UseMetaTrackOptions): UseMetaTrackReturn;
+export default useMetaTrack;

package/dist/types/hooks/usePlaybackQuality.d.ts

@@ -0,0 +1,42 @@
+import { type PlaybackQuality } from '@livepeer-frameworks/player-core';
+import type { UsePlaybackQualityOptions } from '../types';
+/**
+ * Hook to monitor video playback quality
+ *
+ * Tracks:
+ * - Buffer health (seconds ahead)
+ * - Stall count
+ * - Frame drop rate
+ * - Estimated bitrate
+ * - Latency (live streams)
+ * - Composite quality score (0-100)
+ *
+ * @example
+ * ```tsx
+ * const { quality, isMonitoring } = usePlaybackQuality({
+ *   videoElement,
+ *   enabled: true,
+ *   thresholds: { minScore: 60 },
+ *   onQualityDegraded: (q) => console.log('Quality dropped:', q.score),
+ * });
+ *
+ * return <div>Quality: {quality?.score ?? '--'}</div>;
+ * ```
+ */
+export declare function usePlaybackQuality(options: UsePlaybackQualityOptions): {
+    /** Current quality metrics */
+    quality: PlaybackQuality | null;
+    /** Whether monitoring is active */
+    isMonitoring: boolean;
+    /** Get current quality snapshot */
+    getCurrentQuality: () => PlaybackQuality | null;
+    /** Get rolling average quality */
+    getAverageQuality: () => PlaybackQuality | null;
+    /** Get quality history */
+    getHistory: () => PlaybackQuality[];
+    /** Reset stall counters */
+    resetStallCounters: () => void;
+    /** Get total stall time in ms */
+    getTotalStallMs: () => number;
+};
+export default usePlaybackQuality;

package/dist/types/hooks/usePlayerController.d.ts

@@ -0,0 +1,163 @@
+/**
+ * usePlayerController.ts
+ *
+ * React hook that wraps PlayerController for declarative usage.
+ * Manages the complete player lifecycle and provides reactive state.
+ */
+import { PlayerController, type PlayerControllerConfig, type PlayerState, type StreamState, type StreamInfo, type PlaybackQuality, type ContentEndpoints, type ContentMetadata } from '@livepeer-frameworks/player-core';
+export interface UsePlayerControllerConfig extends Omit<PlayerControllerConfig, 'playerManager'> {
+    /** Enable/disable the hook */
+    enabled?: boolean;
+    /** Callback when state changes */
+    onStateChange?: (state: PlayerState) => void;
+    /** Callback when stream state changes */
+    onStreamStateChange?: (state: StreamState) => void;
+    /** Callback when error occurs */
+    onError?: (error: string) => void;
+    /** Callback when ready */
+    onReady?: (videoElement: HTMLVideoElement) => void;
+}
+export interface PlayerControllerState {
+    /** Current player state */
+    state: PlayerState;
+    /** Stream state (for live streams) */
+    streamState: StreamState | null;
+    /** Resolved endpoints */
+    endpoints: ContentEndpoints | null;
+    /** Content metadata */
+    metadata: ContentMetadata | null;
+    /** Video element (null if not ready) */
+    videoElement: HTMLVideoElement | null;
+    /** Current time */
+    currentTime: number;
+    /** Duration */
+    duration: number;
+    /** Is playing */
+    isPlaying: boolean;
+    /** Is paused */
+    isPaused: boolean;
+    /** Is buffering */
+    isBuffering: boolean;
+    /** Is muted */
+    isMuted: boolean;
+    /** Volume (0-1) */
+    volume: number;
+    /** Error text */
+    error: string | null;
+    /** Is passive error */
+    isPassiveError: boolean;
+    /** Has playback ever started */
+    hasPlaybackStarted: boolean;
+    /** Is holding speed (2x gesture) */
+    isHoldingSpeed: boolean;
+    /** Current hold speed */
+    holdSpeed: number;
+    /** Is hovering (controls visible) */
+    isHovering: boolean;
+    /** Should show controls */
+    shouldShowControls: boolean;
+    /** Is loop enabled */
+    isLoopEnabled: boolean;
+    /** Is fullscreen */
+    isFullscreen: boolean;
+    /** Is PiP active */
+    isPiPActive: boolean;
+    /** Is effectively live (live or DVR recording) */
+    isEffectivelyLive: boolean;
+    /** Should show idle screen */
+    shouldShowIdleScreen: boolean;
+    /** Current player info */
+    currentPlayerInfo: {
+        name: string;
+        shortname: string;
+    } | null;
+    /** Current source info */
+    currentSourceInfo: {
+        url: string;
+        type: string;
+    } | null;
+    /** Playback quality metrics */
+    playbackQuality: PlaybackQuality | null;
+    /** Subtitles enabled */
+    subtitlesEnabled: boolean;
+    /** Available quality levels */
+    qualities: Array<{
+        id: string;
+        label: string;
+        bitrate?: number;
+        width?: number;
+        height?: number;
+        isAuto?: boolean;
+        active?: boolean;
+    }>;
+    /** Available text/caption tracks */
+    textTracks: Array<{
+        id: string;
+        label: string;
+        language?: string;
+        active: boolean;
+    }>;
+    /** Stream info for player selection (sources + tracks) */
+    streamInfo: StreamInfo | null;
+}
+export interface UsePlayerControllerReturn {
+    /** Container ref to attach to your player container div */
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    /** Current state (reactive) */
+    state: PlayerControllerState;
+    /** Controller instance (for direct method calls) */
+    controller: PlayerController | null;
+    /** Play */
+    play: () => Promise<void>;
+    /** Pause */
+    pause: () => void;
+    /** Toggle play/pause */
+    togglePlay: () => void;
+    /** Seek to time */
+    seek: (time: number) => void;
+    /** Seek by delta */
+    seekBy: (delta: number) => void;
+    /** Set volume */
+    setVolume: (volume: number) => void;
+    /** Toggle mute */
+    toggleMute: () => void;
+    /** Toggle loop */
+    toggleLoop: () => void;
+    /** Toggle fullscreen */
+    toggleFullscreen: () => Promise<void>;
+    /** Toggle PiP */
+    togglePiP: () => Promise<void>;
+    /** Toggle subtitles */
+    toggleSubtitles: () => void;
+    /** Clear error */
+    clearError: () => void;
+    /** Retry playback */
+    retry: () => Promise<void>;
+    /** Reload player */
+    reload: () => Promise<void>;
+    /** Get qualities */
+    getQualities: () => Array<{
+        id: string;
+        label: string;
+        bitrate?: number;
+    }>;
+    /** Select quality */
+    selectQuality: (id: string) => void;
+    /** Handle mouse enter (for controls visibility) */
+    handleMouseEnter: () => void;
+    /** Handle mouse leave (for controls visibility) */
+    handleMouseLeave: () => void;
+    /** Handle mouse move (for controls visibility) */
+    handleMouseMove: () => void;
+    /** Handle touch start (for controls visibility) */
+    handleTouchStart: () => void;
+    /** Set dev mode options (force player, type, source) */
+    setDevModeOptions: (options: {
+        forcePlayer?: string;
+        forceType?: string;
+        forceSource?: number;
+        playbackMode?: 'auto' | 'low-latency' | 'quality' | 'vod';
+    }) => Promise<void>;
+}
+export declare function usePlayerController(config: UsePlayerControllerConfig): UsePlayerControllerReturn;
+export default usePlayerController;

package/dist/types/hooks/usePlayerSelection.d.ts

@@ -0,0 +1,47 @@
+/**
+ * usePlayerSelection
+ *
+ * React hook for subscribing to PlayerManager selection events.
+ * Uses event-driven updates instead of polling - no render spam.
+ */
+import type { PlayerManager, PlayerSelection, PlayerCombination, StreamInfo, PlaybackMode } from '@livepeer-frameworks/player-core';
+export interface UsePlayerSelectionOptions {
+    /** Stream info to compute selections for */
+    streamInfo: StreamInfo | null;
+    /** Playback mode override */
+    playbackMode?: PlaybackMode;
+    /** Enable debug logging */
+    debug?: boolean;
+}
+export interface UsePlayerSelectionReturn {
+    /** Current best selection (null if no compatible player) */
+    selection: PlayerSelection | null;
+    /** All player+source combinations with scores */
+    combinations: PlayerCombination[];
+    /** Whether initial computation has completed */
+    ready: boolean;
+    /** Force recomputation (invalidates cache) */
+    refresh: () => void;
+}
+/**
+ * Subscribe to player selection changes from a PlayerManager.
+ *
+ * This hook uses the event system in PlayerManager, which means:
+ * - Initial computation happens once when streamInfo is provided
+ * - Updates only fire when selection actually changes (different player+source)
+ * - No render spam from React strict mode or frequent re-renders
+ *
+ * @example
+ * ```tsx
+ * const { selection, combinations, ready } = usePlayerSelection(globalPlayerManager, {
+ *   streamInfo,
+ *   playbackMode: 'auto',
+ * });
+ *
+ * if (!ready) return <Loading />;
+ * if (!selection) return <NoPlayerAvailable />;
+ *
+ * return <div>Selected: {selection.player} + {selection.source.type}</div>;
+ * ```
+ */
+export declare function usePlayerSelection(manager: PlayerManager, options: UsePlayerSelectionOptions): UsePlayerSelectionReturn;

package/dist/types/hooks/useStreamState.d.ts

@@ -0,0 +1,27 @@
+import type { UseStreamStateOptions, StreamState } from '../types';
+/**
+ * Hook to poll MistServer for stream status via WebSocket or HTTP
+ *
+ * Uses native MistServer protocol:
+ * - WebSocket: ws://{baseUrl}/json_{streamName}.js
+ * - HTTP fallback: GET {baseUrl}/json_{streamName}.js
+ *
+ * @example
+ * ```tsx
+ * const { status, isOnline, message } = useStreamState({
+ *   mistBaseUrl: 'https://mist.example.com',
+ *   streamName: 'my-stream',
+ *   pollInterval: 3000,
+ * });
+ * ```
+ */
+export interface UseStreamStateReturn extends StreamState {
+    /** Manual refetch function */
+    refetch: () => void;
+    /** WebSocket reference for sharing with MistReporter */
+    socketRef: React.RefObject<WebSocket | null>;
+    /** True when WebSocket is connected and ready (triggers re-render) */
+    socketReady: boolean;
+}
+export declare function useStreamState(options: UseStreamStateOptions): UseStreamStateReturn;
+export default useStreamState;

package/dist/types/hooks/useTelemetry.d.ts

@@ -0,0 +1,57 @@
+import { type TelemetryOptions, type PlaybackQuality, type ContentType } from '@livepeer-frameworks/player-core';
+export interface UseTelemetryOptions extends TelemetryOptions {
+    /** Video element to monitor */
+    videoElement: HTMLVideoElement | null;
+    /** Content ID being played */
+    contentId: string;
+    /** Content type */
+    contentType: ContentType;
+    /** Player type name */
+    playerType: string;
+    /** Protocol being used */
+    protocol: string;
+    /** Optional quality getter function */
+    getQuality?: () => PlaybackQuality | null;
+}
+/**
+ * Hook to send telemetry data to a server
+ *
+ * Reports playback metrics at configurable intervals:
+ * - Current time and duration
+ * - Buffer health
+ * - Stall count and duration
+ * - Quality score and bitrate
+ * - Frame decode/drop stats
+ * - Errors encountered
+ *
+ * Uses navigator.sendBeacon() for reliable reporting on page unload.
+ *
+ * @example
+ * ```tsx
+ * const { sessionId, recordError } = useTelemetry({
+ *   enabled: true,
+ *   endpoint: '/api/telemetry',
+ *   interval: 5000,
+ *   videoElement,
+ *   contentId: 'my-stream',
+ *   contentType: 'live',
+ *   playerType: 'hlsjs',
+ *   protocol: 'HLS',
+ *   getQuality: () => qualityMonitor.getCurrentQuality(),
+ * });
+ *
+ * // Record custom error
+ * recordError('NETWORK_ERROR', 'Connection lost');
+ * ```
+ */
+export declare function useTelemetry(options: UseTelemetryOptions): {
+    /** Session ID for this playback session */
+    sessionId: string | null;
+    /** Record a custom error */
+    recordError: (code: string, message: string) => void;
+    /** Get current session ID */
+    getSessionId: () => string | null;
+    /** Check if telemetry is active */
+    isActive: () => boolean;
+};
+export default useTelemetry;

package/dist/types/hooks/useViewerEndpoints.d.ts

@@ -0,0 +1,14 @@
+import type { ContentType } from '@livepeer-frameworks/player-core';
+import type { ContentEndpoints } from '../types';
+interface Params {
+    gatewayUrl: string;
+    contentType: ContentType;
+    contentId: string;
+    authToken?: string;
+}
+export declare function useViewerEndpoints({ gatewayUrl, contentType, contentId, authToken }: Params): {
+    endpoints: ContentEndpoints | null;
+    status: "error" | "ready" | "idle" | "loading";
+    error: string | null;
+};
+export default useViewerEndpoints;

package/dist/types/index.d.ts

@@ -0,0 +1,33 @@
+/**
+ * @livepeer-frameworks/player-react
+ *
+ * React components for FrameWorks streaming player.
+ */
+export { default as Player } from './components/Player';
+export { default as PlayerControls } from './components/PlayerControls';
+export { default as LoadingScreen } from './components/LoadingScreen';
+export { default as IdleScreen } from './components/IdleScreen';
+export { default as ThumbnailOverlay } from './components/ThumbnailOverlay';
+export { default as TitleOverlay } from './components/TitleOverlay';
+export { default as StreamStateOverlay } from './components/StreamStateOverlay';
+export { default as StatsPanel } from './components/StatsPanel';
+export { default as DevModePanel } from './components/DevModePanel';
+export { default as PlayerErrorBoundary } from './components/PlayerErrorBoundary';
+export * from './components/Icons';
+export { Button } from './ui/button';
+export { Badge } from './ui/badge';
+export { Slider } from './ui/slider';
+export { PlayerProvider, usePlayerContext, usePlayerContextOptional, PlayerContext } from './context/PlayerContext';
+export type { PlayerContextValue } from './context/PlayerContext';
+export { useStreamState } from './hooks/useStreamState';
+export { usePlaybackQuality } from './hooks/usePlaybackQuality';
+export { useViewerEndpoints } from './hooks/useViewerEndpoints';
+export { useMetaTrack } from './hooks/useMetaTrack';
+export { useTelemetry } from './hooks/useTelemetry';
+export { usePlayerSelection } from './hooks/usePlayerSelection';
+export type { UsePlayerSelectionOptions, UsePlayerSelectionReturn } from './hooks/usePlayerSelection';
+export { usePlayerController } from './hooks/usePlayerController';
+export type { UsePlayerControllerConfig, UsePlayerControllerReturn, PlayerControllerState, } from './hooks/usePlayerController';
+export * from './types';
+export { PlayerManager, globalPlayerManager, PlayerController, GatewayClient, StreamStateClient, QualityMonitor, cn, } from '@livepeer-frameworks/player-core';
+export type { PlayerState, PlayerStateContext, StreamState, StreamStatus, MistStreamInfo, PlaybackQuality, PlaybackMode, ContentEndpoints, EndpointInfo, PlayerSelection, PlayerCombination, PlayerManagerEvents, } from '@livepeer-frameworks/player-core';

package/dist/types/types.d.ts

@@ -0,0 +1,94 @@
+/**
+ * React-specific types for FrameWorks player
+ */
+import type React from 'react';
+import type { PlayerOptions, PlayerState, PlayerStateContext, ContentEndpoints, MetaTrackSubscription, PlaybackQuality, QualityThresholds, ContentType } from '@livepeer-frameworks/player-core';
+export interface PlayerProps {
+    /** Content identifier or stream name */
+    contentId: string;
+    /** Content type */
+    contentType: ContentType;
+    /** Pre-resolved endpoints/capabilities from Gateway/Foghorn */
+    endpoints?: ContentEndpoints;
+    /** Optional thumbnail/poster image */
+    thumbnailUrl?: string | null;
+    /** Unified options (branding, playback prefs, etc.) */
+    options?: Partial<PlayerOptions>;
+    /** Detailed state updates for UI (booting, gateway, connecting, playing, etc.) */
+    onStateChange?: (state: PlayerState, context?: PlayerStateContext) => void;
+}
+export interface MistPlayerProps {
+    streamName: string;
+    htmlUrl?: string;
+    playerJsUrl?: string;
+    developmentMode?: boolean;
+    muted?: boolean;
+    poster?: string;
+}
+export interface LoadingScreenProps {
+    message?: string;
+}
+export interface ThumbnailOverlayProps {
+    thumbnailUrl?: string | null | undefined;
+    onPlay?: () => void;
+    message?: string | null;
+    showUnmuteMessage?: boolean;
+    style?: React.CSSProperties;
+    className?: string;
+}
+export interface AnimatedBubbleProps {
+    index: number;
+}
+export interface CenterLogoProps {
+    containerRef: React.RefObject<HTMLDivElement>;
+    scale?: number;
+    onHitmarker?: (event: React.MouseEvent) => void;
+}
+export interface HitmarkerData {
+    id: number;
+    x: number;
+    y: number;
+}
+export interface DvdLogoProps {
+    parentRef: React.RefObject<HTMLDivElement>;
+    scale?: number;
+}
+export interface UsePlaybackQualityOptions {
+    videoElement: HTMLVideoElement | null;
+    enabled?: boolean;
+    sampleInterval?: number;
+    thresholds?: Partial<QualityThresholds>;
+    onQualityDegraded?: (quality: PlaybackQuality) => void;
+}
+export interface UseMetaTrackOptions {
+    mistBaseUrl: string;
+    streamName: string;
+    enabled?: boolean;
+    subscriptions?: MetaTrackSubscription[];
+}
+export interface UseStreamStateOptions {
+    /** MistServer base URL */
+    mistBaseUrl: string;
+    /** Stream name */
+    streamName: string;
+    /** Poll interval in ms (default: 3000) */
+    pollInterval?: number;
+    /** Enable/disable the hook (default: true) */
+    enabled?: boolean;
+    /** Use WebSocket instead of HTTP polling (default: true) */
+    useWebSocket?: boolean;
+    /** Enable debug logging (default: false) */
+    debug?: boolean;
+}
+export interface UseTelemetryOptions {
+    enabled?: boolean;
+    endpoint?: string;
+    authToken?: string;
+    interval?: number;
+    batchSize?: number;
+    contentId?: string;
+    contentType?: string;
+    playerType?: string;
+    protocol?: string;
+}
+export type { PlayerState, PlayerStateContext, ContentEndpoints, PlayerOptions, PlaybackQuality, TelemetryOptions, TelemetryPayload, MetaTrackEvent, MetaTrackEventType, SubtitleCue, PlaybackMode, MistStreamInfo, StreamState, StreamStatus, EndpointInfo, ContentMetadata, } from '@livepeer-frameworks/player-core';

package/dist/types/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "secondary" | "outline" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/types/ui/button.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+declare const buttonVariants: (props?: ({
+    variant?: "link" | "default" | "secondary" | "ghost" | "outline" | "destructive" | "subtle" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { Button, buttonVariants };

package/dist/types/ui/context-menu.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+declare const ContextMenu: React.FC<ContextMenuPrimitive.ContextMenuProps>;
+declare const ContextMenuTrigger: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & React.RefAttributes<HTMLSpanElement>>;
+declare const ContextMenuGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuPortal: React.FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+declare const ContextMenuSub: React.FC<ContextMenuPrimitive.ContextMenuSubProps>;
+declare const ContextMenuRadioGroup: React.ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubTrigger: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSubContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuContent: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuCheckboxItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuRadioItem: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuLabel: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuSeparator: React.ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ContextMenuShortcut: {
+    ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };

package/dist/types/ui/select.d.ts

@@ -0,0 +1,10 @@
+import * as SelectPrimitive from "@radix-ui/react-select";
+import * as React from "react";
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectContent, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };

package/dist/types/ui/slider.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+export interface SliderProps extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    showTrack?: boolean;
+    trackClassName?: string;
+    thumbClassName?: string;
+    /** Show thumb only on hover (YouTube-style) - but always shows a smaller thumb when not hovered */
+    hoverThumb?: boolean;
+    /** Use cyan accent color (matches SeekBar styling) */
+    accentColor?: boolean;
+}
+declare const Slider: React.ForwardRefExoticComponent<SliderProps & React.RefAttributes<HTMLSpanElement>>;
+export { Slider };