@therealtinhtute/baroiplayer 1.0.0 → 1.0.2

package/dist/src/components/media-player-volume.tsx

@@ -0,0 +1,155 @@
+"use client"
+
+import { Button } from "@rp/ui/components/button"
+import { Slider } from "@rp/ui/components/slider"
+import { Volume1Icon, Volume2Icon, VolumeXIcon } from "lucide-react"
+import React from "react"
+import {
+	MediaActionTypes,
+	useMediaContext,
+	useMediaDispatch,
+	useMediaSelector
+} from "../context/media-context"
+import { cn } from "../lib/utils"
+import { MediaPlayerTooltip } from "./media-player-tooltip"
+
+export interface MediaPlayerVolumeProps {
+	className?: string
+	disabled?: boolean
+	asChild?: boolean
+	expandable?: boolean
+	children?: React.ReactNode
+}
+
+export function MediaPlayerVolume({
+	className,
+	disabled = false,
+	asChild = false,
+	expandable = true,
+	children,
+	...props
+}: MediaPlayerVolumeProps) {
+	const context = useMediaContext()
+	const dispatch = useMediaDispatch()
+
+	const volume = useMediaSelector((state) => state.volume)
+	const isMuted = useMediaSelector((state) => state.isMuted)
+	const isDisabled = disabled || useMediaSelector((state) => state.error !== null)
+
+	// Determine volume level for icon
+	const volumeLevel = React.useMemo(() => {
+		if (isMuted || volume === 0) return 0
+		if (volume < 0.5) return 1
+		return 2
+	}, [volume, isMuted])
+
+	const handleMuteToggle = React.useCallback(() => {
+		dispatch({
+			type: MediaActionTypes.TOGGLE_MUTE
+		})
+	}, [dispatch])
+
+	const handleVolumeChange = React.useCallback(
+		(values: number[]) => {
+			const newVolume = values[0]
+			dispatch({
+				type: MediaActionTypes.SET_VOLUME,
+				detail: newVolume
+			})
+		},
+		[dispatch]
+	)
+
+	const handleVolumeCommit = React.useCallback(
+		(values: number[]) => {
+			const newVolume = values[0]
+			dispatch({
+				type: MediaActionTypes.SET_VOLUME,
+				detail: newVolume
+			})
+		},
+		[dispatch]
+	)
+
+	const VolumeIcon = volumeLevel === 0 ? VolumeXIcon : volumeLevel === 1 ? Volume1Icon : Volume2Icon
+
+	const containerProps = {
+		"data-disabled": isDisabled ? "" : undefined,
+		"data-slot": "media-player-volume",
+		className: cn(
+			"group flex items-center",
+			expandable ? "gap-2 transition-all duration-200 hover:gap-3" : "gap-2",
+			className
+		),
+		...props
+	}
+
+	const buttonProps = {
+		type: "button" as const,
+		"aria-controls": context.mediaId,
+		"aria-label": isMuted ? "Unmute" : "Mute",
+		"aria-pressed": isMuted,
+		"data-slot": "media-player-volume-button",
+		"data-state": isMuted ? "muted" : "unmuted",
+		variant: "ghost" as const,
+		size: "icon" as const,
+		className: "size-8 shrink-0",
+		disabled: isDisabled,
+		onClick: handleMuteToggle
+	}
+
+	const sliderProps = {
+		"aria-controls": context.mediaId,
+		"aria-valuetext": `Volume ${Math.round(volume * 100)}%`,
+		"data-slot": "media-player-volume-slider",
+		min: 0,
+		max: 1,
+		step: 0.01,
+		value: [isMuted ? 0 : volume],
+		onValueChange: handleVolumeChange,
+		onValueCommit: handleVolumeCommit,
+		disabled: isDisabled,
+		className: cn(
+			"relative flex touch-none select-none items-center",
+			expandable
+				? "w-0 opacity-0 transition-all duration-200 group-hover:w-20 group-hover:opacity-100"
+				: "w-20",
+			"data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
+		)
+	}
+
+	const content = (
+		<div {...containerProps}>
+			<MediaPlayerTooltip tooltip={isMuted ? "Unmute" : "Mute"} shortcut="M">
+				<Button {...buttonProps}>
+					<VolumeIcon className="size-4" />
+				</Button>
+			</MediaPlayerTooltip>
+
+			<Slider {...sliderProps}>
+				<div className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary">
+					<div
+						className="h-full bg-primary transition-all"
+						style={{ width: `${(isMuted ? 0 : volume) * 100}%` }}
+					/>
+				</div>
+				<div
+					className="block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+					style={{
+						transform: `translateX(-50%)`,
+						left: `${(isMuted ? 0 : volume) * 100}%`
+					}}
+				/>
+			</Slider>
+		</div>
+	)
+
+	if (asChild) {
+		const child = React.Children.only(children) as React.ReactElement
+		return React.cloneElement(child, containerProps as any, content)
+	}
+
+	return content
+}
+
+MediaPlayerVolume.displayName = "MediaPlayerVolume"

package/dist/src/components/media-player.d.ts

@@ -0,0 +1,3 @@
+import type { MediaPlayerProps } from "../types/index";
+export declare const MediaPlayer: import("react").ForwardRefExoticComponent<MediaPlayerProps & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=media-player.d.ts.map

package/dist/src/components/media-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-player.d.ts","sourceRoot":"","sources":["media-player.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEtD,eAAO,MAAM,WAAW,6GAoPtB,CAAA"}

package/dist/src/components/media-player.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useTransition } from "react";
+import { useKeyboardControls } from "../hooks/use-keyboard-controls";
+import { useEnhancedMediaPlayer } from "../hooks/use-enhanced-media-player";
+import { useMemoryOptimization } from "../hooks/use-memory-optimization";
+import { EnhancedMediaWrapper } from "./media-suspense";
+import { cn } from "../lib/utils";
+export const MediaPlayer = forwardRef(({ src, className, children, keyboardControls = true, showControls = true, customControls = false, crossOrigin, enablePerformanceMonitoring = true, bufferingStrategy = "adaptive", preloadStrategy = "progressive", enableOptimizations = true, ...options }, ref) => {
+    // React 19 concurrent features
+    const [isPending] = useTransition();
+    // Enhanced media player with optimizations
+    const { state, controls, mediaRef, containerRef, performanceMetrics, isEnhanced } = useEnhancedMediaPlayer({
+        src,
+        crossOrigin,
+        enablePerformanceMonitoring,
+        bufferingStrategy,
+        preloadStrategy,
+        enableTimeUpdateThrottling: true,
+        timeUpdateThrottleMs: 100,
+        enableSeekPreview: true,
+        ...options
+    });
+    // Memory optimization
+    const { memoryStats, addEventListener } = useMemoryOptimization({
+        maxMemoryUsage: 50, // 50MB for media player
+        cleanupInterval: 15000, // 15 seconds
+        enableGC: true,
+        monitorMemory: enableOptimizations
+    });
+    // Keyboard controls with performance optimization
+    useKeyboardControls({
+        enabled: keyboardControls,
+        state,
+        controls
+    });
+    // Memoize media type detection
+    const isVideo = useMemo(() => {
+        return Array.isArray(src)
+            ? src.some((s) => /\.(mp4|webm|ogv|mov|avi)$/i.test(s))
+            : /\.(mp4|webm|ogv|mov|avi)$/i.test(src);
+    }, [src]);
+    // Memoize source rendering
+    const renderSources = useMemo(() => {
+        if (!Array.isArray(src))
+            return null;
+        return src.map((source, index) => (_jsx("source", { src: source }, `${source}-${index}`)));
+    }, [src]);
+    // Memoize common props
+    const commonProps = useMemo(() => ({
+        controls: showControls && !customControls,
+        className: cn("w-full transition-all duration-300", isVideo && "aspect-video", "bg-[color:var(--media-bg)] rounded-lg", state.isTransitioning && "opacity-90"),
+        preload: preloadStrategy === "eager" ? "auto" : "metadata",
+        crossOrigin,
+        ...(Array.isArray(src) ? {} : { src })
+    }), [showControls, customControls, isVideo, state.isTransitioning, preloadStrategy, crossOrigin, src]);
+    return (_jsx(EnhancedMediaWrapper, { priority: "high", errorFallback: ({ error, resetError }) => (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass-strong animate-enter rounded-lg", "bg-[color:var(--color-error)]/10 backdrop-blur-md"), children: _jsxs("div", { className: "space-y-2 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3", children: _jsx("svg", { className: "size-6 text-[color:var(--color-error)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }), _jsx("p", { className: "font-semibold text-lg", children: "Playback Error" }), _jsx("p", { className: "max-w-xs text-[color:var(--media-text-secondary)] text-sm", children: error.message || state.error }), _jsx("button", { onClick: resetError, className: "mt-2 rounded bg-[color:var(--color-brand-primary)] px-4 py-2 text-sm text-white transition-colors hover:bg-[color:var(--color-brand-accent)]", children: "Try Again" })] }) })), loadingFallback: _jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass animate-enter rounded-lg", "bg-[color:var(--media-bg)]/20 backdrop-blur-sm"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("size-12 animate-spin rounded-full border-2", "border-[color:var(--color-brand-accent)]/30", "border-t-[color:var(--color-brand-accent)]") }), _jsx("div", { className: cn("absolute inset-0 size-12 rounded-full", "bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]", "animate-pulse opacity-20 blur-sm") })] }), _jsx("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-sm", children: "Loading media..." })] }) }), children: _jsxs("div", { ref: ref || containerRef, className: cn("media-container relative overflow-hidden contain-strict", "bg-[color:var(--media-bg)] focus-within:outline-none", "rounded-xl border border-[color:var(--media-border)]/30", "shadow-2xl shadow-[color:var(--media-bg)]/50", "transition-all duration-300 ease-out", "hover:border-[color:var(--media-border)]/50", "hover:shadow-3xl hover:shadow-[color:var(--media-bg)]/60", 
+            // Performance optimizations
+            "will-change-transform", state.isTransitioning && "cursor-wait", className), tabIndex: 0, 
+            // Performance attributes
+            role: "application", "aria-label": isVideo ? "Video player" : "Audio player", "aria-busy": state.isLoading || state.isBuffering, children: [isVideo ? (_jsxs("video", { ref: mediaRef, ...commonProps, 
+                    // Performance optimizations
+                    disablePictureInPicture: false, playsInline: true, "x-webkit-airplay": "allow", style: { willChange: 'transform' }, children: [renderSources(), "Your browser does not support the video element."] })) : (_jsxs("audio", { ref: mediaRef, ...commonProps, 
+                    // Performance optimizations
+                    preload: preloadStrategy === "eager" ? "auto" : "metadata", children: [renderSources(), "Your browser does not support the audio element."] })), state.error && (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass-strong animate-enter rounded-lg", "bg-[color:var(--color-error)]/10 backdrop-blur-md"), children: _jsxs("div", { className: "space-y-2 text-center text-[color:var(--media-text)]", children: [_jsx("div", { className: "mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3", children: _jsx("svg", { className: "size-6 text-[color:var(--color-error)]", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }) }), _jsx("p", { className: "font-semibold text-lg", children: "Playback Error" }), _jsx("p", { className: "max-w-xs text-[color:var(--media-text-secondary)] text-sm", children: state.error })] }) })), state.isLoading && (_jsx("div", { className: cn("absolute inset-0 flex items-center justify-center", "glass animate-enter rounded-lg", "bg-[color:var(--media-bg)]/20 backdrop-blur-sm"), children: _jsxs("div", { className: "space-y-4 text-center text-[color:var(--media-text)]", children: [_jsxs("div", { className: "relative", children: [_jsx("div", { className: cn("size-12 animate-spin rounded-full border-2", "border-[color:var(--color-brand-accent)]/30", "border-t-[color:var(--color-brand-accent)]") }), _jsx("div", { className: cn("absolute inset-0 size-12 rounded-full", "bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]", "animate-pulse opacity-20 blur-sm") })] }), _jsx("p", { className: "font-medium text-[color:var(--media-text-secondary)] text-sm", children: state.isBuffering ? "Buffering..." : "Loading media..." })] }) })), customControls && typeof children === "function" && (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-50", children: children({ state, controls }) })), customControls && typeof children !== "function" && (_jsx("div", { className: "pointer-events-auto absolute inset-0 z-50", children: children })), process.env.NODE_ENV === 'development' && enablePerformanceMonitoring && (_jsxs("div", { className: "absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs", children: [_jsxs("div", { children: ["FPS: ", performanceMetrics.frameRate || 0] }), _jsxs("div", { children: ["Memory: ", memoryStats.usage.toFixed(1), "MB"] }), isEnhanced && _jsx("div", { children: "Enhanced \u2713" })] }))] }) }));
+});
+MediaPlayer.displayName = "MediaPlayer";

package/dist/src/components/media-player.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import { forwardRef, useMemo, useTransition, startTransition } from "react"
+import { useKeyboardControls } from "../hooks/use-keyboard-controls"
+import { useEnhancedMediaPlayer } from "../hooks/use-enhanced-media-player"
+import { useMemoryOptimization } from "../hooks/use-memory-optimization"
+import { EnhancedMediaWrapper } from "./media-suspense"
+import { cn } from "../lib/utils"
+import type { MediaPlayerProps } from "../types/index"
+
+export const MediaPlayer = forwardRef<HTMLDivElement, MediaPlayerProps>(
+	(
+		{
+			src,
+			className,
+			children,
+			keyboardControls = true,
+			showControls = true,
+			customControls = false,
+			crossOrigin,
+			enablePerformanceMonitoring = true,
+			bufferingStrategy = "adaptive",
+			preloadStrategy = "progressive",
+			enableOptimizations = true,
+			...options
+		},
+		ref
+	) => {
+		// React 19 concurrent features
+		const [isPending] = useTransition()
+
+		// Enhanced media player with optimizations
+		const { state, controls, mediaRef, containerRef, performanceMetrics, isEnhanced } = useEnhancedMediaPlayer({
+			src,
+			crossOrigin,
+			enablePerformanceMonitoring,
+			bufferingStrategy,
+			preloadStrategy,
+			enableTimeUpdateThrottling: true,
+			timeUpdateThrottleMs: 100,
+			enableSeekPreview: true,
+			...options
+		})
+
+		// Memory optimization
+		const { memoryStats, addEventListener } = useMemoryOptimization({
+			maxMemoryUsage: 50, // 50MB for media player
+			cleanupInterval: 15000, // 15 seconds
+			enableGC: true,
+			monitorMemory: enableOptimizations
+		})
+
+		// Keyboard controls with performance optimization
+		useKeyboardControls({
+			enabled: keyboardControls,
+			state,
+			controls
+		})
+
+		// Memoize media type detection
+		const isVideo = useMemo(() => {
+			return Array.isArray(src)
+				? src.some((s) => /\.(mp4|webm|ogv|mov|avi)$/i.test(s))
+				: /\.(mp4|webm|ogv|mov|avi)$/i.test(src)
+		}, [src])
+
+		// Memoize source rendering
+		const renderSources = useMemo(() => {
+			if (!Array.isArray(src)) return null
+
+			return src.map((source, index) => (
+				<source key={`${source}-${index}`} src={source} />
+			))
+		}, [src])
+
+		// Memoize common props
+		const commonProps = useMemo(() => ({
+			controls: showControls && !customControls,
+			className: cn(
+				"w-full transition-all duration-300",
+				isVideo && "aspect-video",
+				"bg-[color:var(--media-bg)] rounded-lg",
+				state.isTransitioning && "opacity-90"
+			),
+			preload: preloadStrategy === "eager" ? "auto" : "metadata",
+			crossOrigin,
+			...(Array.isArray(src) ? {} : { src })
+		}), [showControls, customControls, isVideo, state.isTransitioning, preloadStrategy, crossOrigin, src])
+
+		return (
+		<EnhancedMediaWrapper
+			priority="high"
+			errorFallback={({ error, resetError }) => (
+				<div className={cn(
+					"absolute inset-0 flex items-center justify-center",
+					"glass-strong animate-enter rounded-lg",
+					"bg-[color:var(--color-error)]/10 backdrop-blur-md"
+				)}>
+					<div className="space-y-2 text-center text-[color:var(--media-text)]">
+						<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3">
+							<svg className="size-6 text-[color:var(--color-error)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+								<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+							</svg>
+						</div>
+						<p className="font-semibold text-lg">Playback Error</p>
+						<p className="max-w-xs text-[color:var(--media-text-secondary)] text-sm">
+							{error.message || state.error}
+						</p>
+						<button
+							onClick={resetError}
+							className="mt-2 rounded bg-[color:var(--color-brand-primary)] px-4 py-2 text-sm text-white transition-colors hover:bg-[color:var(--color-brand-accent)]">
+							Try Again
+						</button>
+					</div>
+				</div>
+			)}
+			loadingFallback={
+				<div className={cn(
+					"absolute inset-0 flex items-center justify-center",
+					"glass animate-enter rounded-lg",
+					"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
+				)}>
+					<div className="space-y-4 text-center text-[color:var(--media-text)]">
+						<div className="relative">
+							<div className={cn(
+								"size-12 animate-spin rounded-full border-2",
+								"border-[color:var(--color-brand-accent)]/30",
+								"border-t-[color:var(--color-brand-accent)]"
+							)}></div>
+							<div className={cn(
+								"absolute inset-0 size-12 rounded-full",
+								"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
+								"animate-pulse opacity-20 blur-sm"
+							)}></div>
+						</div>
+						<p className="font-medium text-[color:var(--media-text-secondary)] text-sm">
+							Loading media...
+						</p>
+					</div>
+				</div>
+			}>
+			<div
+				ref={ref || containerRef}
+				className={cn(
+					"media-container relative overflow-hidden contain-strict",
+					"bg-[color:var(--media-bg)] focus-within:outline-none",
+					"rounded-xl border border-[color:var(--media-border)]/30",
+					"shadow-2xl shadow-[color:var(--media-bg)]/50",
+					"transition-all duration-300 ease-out",
+					"hover:border-[color:var(--media-border)]/50",
+					"hover:shadow-3xl hover:shadow-[color:var(--media-bg)]/60",
+					// Performance optimizations
+					"will-change-transform",
+					state.isTransitioning && "cursor-wait",
+					className
+				)}
+				tabIndex={0}
+				// Performance attributes
+				role="application"
+				aria-label={isVideo ? "Video player" : "Audio player"}
+				aria-busy={state.isLoading || state.isBuffering}>
+
+				{isVideo ? (
+					<video
+						ref={mediaRef as React.RefObject<HTMLVideoElement>}
+						{...commonProps}
+						// Performance optimizations
+						disablePictureInPicture={false}
+						playsInline
+						x-webkit-airplay="allow"
+						style={{ willChange: 'transform' }}
+					>
+						{renderSources}
+						Your browser does not support the video element.
+					</video>
+				) : (
+					<audio
+						ref={mediaRef as React.RefObject<HTMLAudioElement>}
+						{...commonProps}
+						// Performance optimizations
+						preload={preloadStrategy === "eager" ? "auto" : "metadata"}
+					>
+						{renderSources}
+						Your browser does not support the audio element.
+					</audio>
+				)}
+
+				{state.error && (
+					<div className={cn(
+						"absolute inset-0 flex items-center justify-center",
+						"glass-strong animate-enter rounded-lg",
+						"bg-[color:var(--color-error)]/10 backdrop-blur-md"
+					)}>
+						<div className="space-y-2 text-center text-[color:var(--media-text)]">
+							<div className="mx-auto w-fit rounded-full bg-[color:var(--color-error)]/20 p-3">
+								<svg className="size-6 text-[color:var(--color-error)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+									<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+								</svg>
+							</div>
+							<p className="font-semibold text-lg">Playback Error</p>
+							<p className="max-w-xs text-[color:var(--media-text-secondary)] text-sm">
+								{state.error}
+							</p>
+						</div>
+					</div>
+				)}
+
+				{state.isLoading && (
+					<div className={cn(
+						"absolute inset-0 flex items-center justify-center",
+						"glass animate-enter rounded-lg",
+						"bg-[color:var(--media-bg)]/20 backdrop-blur-sm"
+					)}>
+						<div className="space-y-4 text-center text-[color:var(--media-text)]">
+							<div className="relative">
+								<div className={cn(
+									"size-12 animate-spin rounded-full border-2",
+									"border-[color:var(--color-brand-accent)]/30",
+									"border-t-[color:var(--color-brand-accent)]"
+								)}></div>
+								<div className={cn(
+									"absolute inset-0 size-12 rounded-full",
+									"bg-gradient-to-r from-[color:var(--color-brand-primary)] to-[color:var(--color-brand-accent)]",
+									"animate-pulse opacity-20 blur-sm"
+								)}></div>
+							</div>
+							<p className="font-medium text-[color:var(--media-text-secondary)] text-sm">
+								{state.isBuffering ? "Buffering..." : "Loading media..."}
+							</p>
+						</div>
+					</div>
+				)}
+
+				{customControls && typeof children === "function" && (
+					<div className="pointer-events-auto absolute inset-0 z-50">
+						{children({ state, controls })}
+					</div>
+				)}
+
+				{customControls && typeof children !== "function" && (
+					<div className="pointer-events-auto absolute inset-0 z-50">{children}</div>
+				)}
+
+				{/* Performance indicator for development */}
+				{process.env.NODE_ENV === 'development' && enablePerformanceMonitoring && (
+					<div className="absolute bottom-2 left-2 rounded bg-black/50 px-2 py-1 text-white text-xs">
+						<div>FPS: {performanceMetrics.frameRate || 0}</div>
+						<div>Memory: {memoryStats.usage.toFixed(1)}MB</div>
+						{isEnhanced && <div>Enhanced ✓</div>}
+					</div>
+				)}
+			</div>
+		</EnhancedMediaWrapper>
+	)
+})
+
+MediaPlayer.displayName = "MediaPlayer"

package/dist/src/components/media-suspense.d.ts

@@ -0,0 +1,78 @@
+import React from "react";
+export interface MediaLoadingProps {
+    children?: React.ReactNode;
+    className?: string;
+    size?: "sm" | "md" | "lg";
+    variant?: "spinner" | "skeleton" | "pulse";
+}
+export declare function MediaLoading({ children, className, size, variant }: MediaLoadingProps): import("react/jsx-runtime").JSX.Element;
+export interface MediaSuspenseProps {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    className?: string;
+}
+export declare function MediaSuspense({ children, fallback, className }: MediaSuspenseProps): import("react/jsx-runtime").JSX.Element;
+export declare function withMediaSuspense<P extends object>(Component: React.ComponentType<P>, loadingComponent?: React.ComponentType): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
+export declare function useMediaConcurrent(): {
+    isPending: boolean;
+    updateWithTransition: (updateFn: () => any) => Promise<any>;
+    batchUpdates: (updates: Array<() => any>) => Promise<any[]>;
+};
+export interface MediaErrorBoundaryProps {
+    children: React.ReactNode;
+    fallback?: React.ComponentType<{
+        error: Error;
+        resetError: () => void;
+    }>;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface MediaErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+export declare class MediaErrorBoundary extends React.Component<MediaErrorBoundaryProps, MediaErrorBoundaryState> {
+    constructor(props: MediaErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): MediaErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    resetError: () => void;
+    render(): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+}
+export interface ConcurrentMediaProps {
+    children: React.ReactNode;
+    priority?: "high" | "normal" | "low";
+    deferredMs?: number;
+}
+export declare function ConcurrentMedia({ children, priority, deferredMs }: ConcurrentMediaProps): import("react/jsx-runtime").JSX.Element;
+export declare function useDeferredMediaLoading(delay?: number): {
+    isReady: boolean;
+    actualIsReady: boolean;
+};
+export interface EnhancedMediaWrapperProps {
+    children: React.ReactNode;
+    className?: string;
+    loadingFallback?: React.ReactNode;
+    errorFallback?: React.ComponentType<{
+        error: Error;
+        resetError: () => void;
+    }>;
+    priority?: "high" | "normal" | "low";
+    deferredMs?: number;
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+export declare function EnhancedMediaWrapper({ children, className, loadingFallback, errorFallback, priority, deferredMs, onError }: EnhancedMediaWrapperProps): import("react/jsx-runtime").JSX.Element;
+export declare const EnhancedMediaSuspense: typeof MediaSuspense;
+export declare const EnhancedMediaLoading: typeof MediaLoading;
+export declare function useMediaPerformance(): {
+    metrics: {
+        renderTime: number;
+        suspenseCount: number;
+        errorCount: number;
+        transitionCount: number;
+    };
+    recordRenderTime: (startTime: number) => void;
+    incrementSuspense: () => void;
+    incrementError: () => void;
+    incrementTransition: () => void;
+};
+export {};
+//# sourceMappingURL=media-suspense.d.ts.map

package/dist/src/components/media-suspense.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-suspense.d.ts","sourceRoot":"","sources":["media-suspense.tsx"],"names":[],"mappings":"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"}