koin.js 1.0.0 → 1.0.1

package/dist/index.js

@@ -1,18 +1,18 @@
 'use strict';
 
-var React3 = require('react');
+var React5 = require('react');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 var nostalgist = require('nostalgist');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React3__default = /*#__PURE__*/_interopDefault(React3);
+var React5__default = /*#__PURE__*/_interopDefault(React5);
 
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var ControlButton = React3.memo(function ControlButton2({
+var ControlButton = React5.memo(function ControlButton2({
   onClick,
   onMouseDown,
   onMouseUp,
@@ -59,7 +59,7 @@ var ControlButton = React3.memo(function ControlButton2({
 });
 var SPEED_OPTIONS = [1, 2];
 function SpeedMenu({ speed, onSpeedChange, disabled = false }) {
-  const [showMenu, setShowMenu] = React3.useState(false);
+  const [showMenu, setShowMenu] = React5.useState(false);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -177,7 +177,7 @@ function HardcoreTooltip({ show, message = "Disabled in Hardcore mode", children
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-amber-500/90 text-black text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50", children: message })
   ] });
 }
-var PlaybackControls = React3.memo(function PlaybackControls2({
+var PlaybackControls = React5.memo(function PlaybackControls2({
   isPaused,
   isRunning,
   speed,
@@ -260,10 +260,10 @@ function AutoSaveIndicator({
   isPaused = false,
   onClick
 }) {
-  const prevStateRef = React3.useRef(state);
-  const [displayProgress, setDisplayProgress] = React3.useState(progress);
-  const [iconOpacity, setIconOpacity] = React3.useState(1);
-  React3.useEffect(() => {
+  const prevStateRef = React5.useRef(state);
+  const [displayProgress, setDisplayProgress] = React5.useState(progress);
+  const [iconOpacity, setIconOpacity] = React5.useState(1);
+  React5.useEffect(() => {
     const prevState = prevStateRef.current;
     if (state === "done" && prevState === "saving") {
       const startProgress = displayProgress;
@@ -306,7 +306,7 @@ function AutoSaveIndicator({
     }
     prevStateRef.current = state;
   }, [state, progress]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (state !== prevStateRef.current) {
       setIconOpacity(0);
       const timer = setTimeout(() => {
@@ -421,7 +421,7 @@ function AutoSaveIndicator({
     }
   );
 }
-var SaveLoadControls = React3.memo(function SaveLoadControls2({
+var SaveLoadControls = React5.memo(function SaveLoadControls2({
   onSave,
   onLoad,
   onScreenshot,
@@ -517,17 +517,17 @@ var QUICK_PRESETS = [
   { id: "crt/crt-geom", label: "CRT Geom" },
   { id: "handheld/lcd-grid-v2", label: "LCD Grid" }
 ];
-var ShaderDropdown = React3.memo(function ShaderDropdown2({
+var ShaderDropdown = React5.memo(function ShaderDropdown2({
   currentShader = "",
   onShaderChange,
   isRunning = false,
   systemColor = "#00FF41",
   disabled = false
 }) {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const [pendingShader, setPendingShader] = React3.useState(null);
-  const dropdownRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [pendingShader, setPendingShader] = React5.useState(null);
+  const dropdownRef = React5.useRef(null);
+  React5.useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -671,7 +671,7 @@ function RAButton({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900/95 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50 border border-white/10", children: isIdentifying ? "Identifying game..." : isGameFound ? `${achievementCount} achievements available` : isConnected ? "Connected - Game not in RA database" : "Connect RetroAchievements" })
   ] });
 }
-var SettingsControls = React3.memo(function SettingsControls2({
+var SettingsControls = React5.memo(function SettingsControls2({
   onFullscreen,
   onControls,
   onGamepadSettings,
@@ -775,12 +775,12 @@ var SettingsControls = React3.memo(function SettingsControls2({
     /* @__PURE__ */ jsxRuntime.jsx(ControlButton, { onClick: onExit, icon: lucideReact.Power, label: "Exit", danger: true, disabled, systemColor })
   ] });
 });
-var MobileControlDrawer = React3.memo(function MobileControlDrawer2({
+var MobileControlDrawer = React5.memo(function MobileControlDrawer2({
   children,
   systemColor = "#00FF41"
 }) {
-  const [isExpanded, setIsExpanded] = React3.useState(false);
-  React3.useEffect(() => {
+  const [isExpanded, setIsExpanded] = React5.useState(false);
+  React5.useEffect(() => {
     if (isExpanded) {
       const handleInteract = (e) => {
         const target = e.target;
@@ -866,7 +866,7 @@ var MobileControlDrawer = React3.memo(function MobileControlDrawer2({
   ] });
 });
 var MobileControlDrawer_default = MobileControlDrawer;
-var PlayerControls = React3.memo(function PlayerControls2({
+var PlayerControls = React5.memo(function PlayerControls2({
   isPaused,
   isRunning,
   speed,
@@ -980,7 +980,7 @@ var PlayerControls = React3.memo(function PlayerControls2({
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(MobileControlDrawer_default, { systemColor, children: controlsContent }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:flex w-full items-center justify-between gap-4 px-6 py-3 bg-black/80 backdrop-blur-sm border-t border-white/10 shrink-0", children: controlsContent })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden sm:flex w-full items-center justify-between gap-2 px-4 py-2 bg-black/80 backdrop-blur-sm border-t border-white/10 shrink-0 overflow-x-auto", children: controlsContent })
   ] });
 });
 var PlayerControls_default = PlayerControls;
@@ -1028,11 +1028,11 @@ var TOAST_CONFIGS = {
   }
 };
 function ToastItem({ toast, onDismiss }) {
-  const [isVisible, setIsVisible] = React3.useState(false);
-  const [isExiting, setIsExiting] = React3.useState(false);
+  const [isVisible, setIsVisible] = React5.useState(false);
+  const [isExiting, setIsExiting] = React5.useState(false);
   const config = TOAST_CONFIGS[toast.type];
   const IconComponent = config.icon;
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     requestAnimationFrame(() => {
       setIsVisible(true);
     });
@@ -1138,17 +1138,17 @@ function ToastContainer({ toasts, onDismiss }) {
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed top-4 right-4 z-[9999] flex flex-col gap-2 pointer-events-none", children: toasts.map((toast) => /* @__PURE__ */ jsxRuntime.jsx(ToastItem, { toast, onDismiss }, toast.id)) })
   ] });
 }
-var PerformanceOverlay = React3.memo(function PerformanceOverlay2({
+var PerformanceOverlay = React5.memo(function PerformanceOverlay2({
   isVisible,
   coreName = "Unknown",
   systemColor = "#00FF41"
 }) {
-  const [fps, setFps] = React3.useState(0);
-  const [frameTime, setFrameTime] = React3.useState(0);
-  const frameTimesRef = React3.useRef([]);
-  const lastTimeRef = React3.useRef(performance.now());
-  const rafIdRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [fps, setFps] = React5.useState(0);
+  const [frameTime, setFrameTime] = React5.useState(0);
+  const frameTimesRef = React5.useRef([]);
+  const lastTimeRef = React5.useRef(performance.now());
+  const rafIdRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (!isVisible) {
       if (rafIdRef.current) {
         cancelAnimationFrame(rafIdRef.current);
@@ -1254,14 +1254,14 @@ var KEY_TO_BUTTON = {
   "ShiftRight": "SELECT",
   "Space": "COIN"
 };
-var InputDisplay = React3.memo(function InputDisplay2({
+var InputDisplay = React5.memo(function InputDisplay2({
   isVisible,
   system,
   systemColor = "#00FF41",
   position = "bottom-right"
 }) {
-  const [activeKeys, setActiveKeys] = React3.useState(/* @__PURE__ */ new Set());
-  React3.useEffect(() => {
+  const [activeKeys, setActiveKeys] = React5.useState(/* @__PURE__ */ new Set());
+  React5.useEffect(() => {
     if (!isVisible) return;
     const handleKeyDown = (e) => {
       const button = KEY_TO_BUTTON[e.code];
@@ -1335,7 +1335,7 @@ var InputDisplay = React3.memo(function InputDisplay2({
     }
   );
 });
-var DpadButton = React3.memo(function DpadButton2({
+var DpadButton = React5.memo(function DpadButton2({
   active,
   color,
   children
@@ -1353,7 +1353,7 @@ var DpadButton = React3.memo(function DpadButton2({
     }
   );
 });
-var ActionButton = React3.memo(function ActionButton2({
+var ActionButton = React5.memo(function ActionButton2({
   active,
   color,
   children
@@ -1372,7 +1372,7 @@ var ActionButton = React3.memo(function ActionButton2({
   );
 });
 var InputDisplay_default = InputDisplay;
-var RecordingIndicator = React3.memo(function RecordingIndicator2({
+var RecordingIndicator = React5.memo(function RecordingIndicator2({
   isRecording,
   isPaused,
   duration,
@@ -1381,7 +1381,7 @@ var RecordingIndicator = React3.memo(function RecordingIndicator2({
   onStop,
   systemColor = "#FF3333"
 }) {
-  const [isHovered, setIsHovered] = React3.useState(false);
+  const [isHovered, setIsHovered] = React5.useState(false);
   if (!isRecording) return null;
   const minutes = Math.floor(duration / 60);
   const seconds = duration % 60;
@@ -1495,7 +1495,7 @@ var SHORTCUTS = [
     ]
   }
 ];
-var ShortcutsModal = React3.memo(function ShortcutsModal2({
+var ShortcutsModal = React5.memo(function ShortcutsModal2({
   isOpen,
   onClose,
   systemColor = "#00FF41"
@@ -1705,10 +1705,10 @@ function createOrientationChangeHandler(callback, checkReady, maxRafs = 3) {
 
 // src/hooks/useMobile.ts
 function useMobile() {
-  const [isMobile, setIsMobile] = React3.useState(false);
-  const [isLandscape, setIsLandscape] = React3.useState(false);
-  const [isPortrait, setIsPortrait] = React3.useState(true);
-  React3.useEffect(() => {
+  const [isMobile, setIsMobile] = React5.useState(false);
+  const [isLandscape, setIsLandscape] = React5.useState(false);
+  const [isPortrait, setIsPortrait] = React5.useState(true);
+  React5.useEffect(() => {
     let lastOrientation = null;
     let orientationTimeout = null;
     const checkOrientation = () => {
@@ -1860,17 +1860,17 @@ function useTouchHandlers({
   onRelease,
   onPositionChange
 }) {
-  const isDraggingRef = React3.useRef(false);
-  const dragStartRef = React3.useRef({ x: 0, y: 0 });
-  const dragTimerRef = React3.useRef(null);
-  const touchStartPosRef = React3.useRef({ x: 0, y: 0 });
-  const clearDragTimer = React3.useCallback(() => {
+  const isDraggingRef = React5.useRef(false);
+  const dragStartRef = React5.useRef({ x: 0, y: 0 });
+  const dragTimerRef = React5.useRef(null);
+  const touchStartPosRef = React5.useRef({ x: 0, y: 0 });
+  const clearDragTimer = React5.useCallback(() => {
     if (dragTimerRef.current) {
       clearTimeout(dragTimerRef.current);
       dragTimerRef.current = null;
     }
   }, []);
-  const startDragging = React3.useCallback(
+  const startDragging = React5.useCallback(
     (touchX, touchY) => {
       isDraggingRef.current = true;
       dragStartRef.current = {
@@ -1883,7 +1883,7 @@ function useTouchHandlers({
     },
     [displayX, displayY, containerWidth, containerHeight, isSystemButton, buttonType, onRelease]
   );
-  const handleTouchStart = React3.useCallback(
+  const handleTouchStart = React5.useCallback(
     (e) => {
       const touch = e.touches[0];
       touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };
@@ -1918,7 +1918,7 @@ function useTouchHandlers({
     },
     [isSystemButton, buttonType, onPress, onPressDown, onPositionChange, buttonSize, startDragging]
   );
-  const handleTouchMove = React3.useCallback(
+  const handleTouchMove = React5.useCallback(
     (e) => {
       const touch = e.touches[0];
       if (onPositionChange && !isDraggingRef.current) {
@@ -1945,7 +1945,7 @@ function useTouchHandlers({
     },
     [onPositionChange, clearDragTimer, startDragging, containerWidth, containerHeight, buttonSize]
   );
-  const handleTouchEnd = React3.useCallback(
+  const handleTouchEnd = React5.useCallback(
     (e) => {
       clearDragTimer();
       if (isDraggingRef.current) {
@@ -1962,7 +1962,7 @@ function useTouchHandlers({
     },
     [clearDragTimer, isSystemButton, buttonType, onRelease]
   );
-  const handleTouchCancel = React3.useCallback(
+  const handleTouchCancel = React5.useCallback(
     (e) => {
       clearDragTimer();
       if (isDraggingRef.current) {
@@ -1979,7 +1979,7 @@ function useTouchHandlers({
     },
     [clearDragTimer, isSystemButton, buttonType, onRelease]
   );
-  const cleanup = React3.useCallback(() => {
+  const cleanup = React5.useCallback(() => {
     clearDragTimer();
   }, [clearDragTimer]);
   return {
@@ -2043,7 +2043,7 @@ function getButtonStyles(buttonType, isPressed) {
       };
   }
 }
-var VirtualButton = React3__default.default.memo(function VirtualButton2({
+var VirtualButton = React5__default.default.memo(function VirtualButton2({
   config,
   isPressed,
   onPress,
@@ -2057,7 +2057,7 @@ var VirtualButton = React3__default.default.memo(function VirtualButton2({
   systemColor = "#00FF41"
   // Default retro green
 }) {
-  const buttonRef = React3.useRef(null);
+  const buttonRef = React5.useRef(null);
   const isSystemButton = config.type === "start" || config.type === "select";
   const displayX = customPosition ? customPosition.x : config.x;
   const displayY = customPosition ? customPosition.y : config.y;
@@ -2080,7 +2080,7 @@ var VirtualButton = React3__default.default.memo(function VirtualButton2({
     onRelease,
     onPositionChange
   });
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const button = buttonRef.current;
     if (!button) return;
     button.addEventListener("touchstart", handleTouchStart, { passive: false });
@@ -2757,7 +2757,7 @@ function dispatchKeyboardEvent(type, code) {
   canvas.dispatchEvent(event);
   return true;
 }
-var Dpad = React3__default.default.memo(function Dpad2({
+var Dpad = React5__default.default.memo(function Dpad2({
   size,
   x,
   y,
@@ -2767,14 +2767,14 @@ var Dpad = React3__default.default.memo(function Dpad2({
   systemColor = "#00FF41",
   isLandscape = false
 }) {
-  const dpadRef = React3.useRef(null);
-  const activeTouchRef = React3.useRef(null);
-  const activeDirectionsRef = React3.useRef(/* @__PURE__ */ new Set());
-  const upRef = React3.useRef(null);
-  const downRef = React3.useRef(null);
-  const leftRef = React3.useRef(null);
-  const rightRef = React3.useRef(null);
-  const getKeyCode = React3.useCallback((direction) => {
+  const dpadRef = React5.useRef(null);
+  const activeTouchRef = React5.useRef(null);
+  const activeDirectionsRef = React5.useRef(/* @__PURE__ */ new Set());
+  const upRef = React5.useRef(null);
+  const downRef = React5.useRef(null);
+  const leftRef = React5.useRef(null);
+  const rightRef = React5.useRef(null);
+  const getKeyCode = React5.useCallback((direction) => {
     if (!controls) {
       const defaults = {
         up: "ArrowUp",
@@ -2786,7 +2786,7 @@ var Dpad = React3__default.default.memo(function Dpad2({
     }
     return controls[direction] || "";
   }, [controls]);
-  const getDirectionsFromTouch = React3.useCallback((touchX, touchY, rect) => {
+  const getDirectionsFromTouch = React5.useCallback((touchX, touchY, rect) => {
     const centerX = rect.left + rect.width / 2;
     const centerY = rect.top + rect.height / 2;
     const dx = touchX - centerX;
@@ -2802,7 +2802,7 @@ var Dpad = React3__default.default.memo(function Dpad2({
     if (angle >= -67.5 && angle <= 67.5) directions.add("right");
     return directions;
   }, []);
-  const updateVisuals = React3.useCallback((directions) => {
+  const updateVisuals = React5.useCallback((directions) => {
     const activeColor = systemColor;
     const inactiveColor = "#1a1a1a";
     if (upRef.current) upRef.current.style.fill = directions.has("up") ? activeColor : inactiveColor;
@@ -2810,7 +2810,7 @@ var Dpad = React3__default.default.memo(function Dpad2({
     if (leftRef.current) leftRef.current.style.fill = directions.has("left") ? activeColor : inactiveColor;
     if (rightRef.current) rightRef.current.style.fill = directions.has("right") ? activeColor : inactiveColor;
   }, [systemColor]);
-  const updateDirections = React3.useCallback((newDirections) => {
+  const updateDirections = React5.useCallback((newDirections) => {
     const prev = activeDirectionsRef.current;
     prev.forEach((dir) => {
       if (!newDirections.has(dir)) {
@@ -2830,7 +2830,7 @@ var Dpad = React3__default.default.memo(function Dpad2({
     activeDirectionsRef.current = newDirections;
     updateVisuals(newDirections);
   }, [getKeyCode, updateVisuals]);
-  const handleTouchStart = React3.useCallback((e) => {
+  const handleTouchStart = React5.useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
     const touch = e.touches[0];
@@ -2839,7 +2839,7 @@ var Dpad = React3__default.default.memo(function Dpad2({
     if (!rect) return;
     updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
   }, [getDirectionsFromTouch, updateDirections]);
-  const handleTouchMove = React3.useCallback((e) => {
+  const handleTouchMove = React5.useCallback((e) => {
     e.preventDefault();
     let touch = null;
     for (let i = 0; i < e.touches.length; i++) {
@@ -2853,7 +2853,7 @@ var Dpad = React3__default.default.memo(function Dpad2({
     if (!rect) return;
     updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
   }, [getDirectionsFromTouch, updateDirections]);
-  const handleTouchEnd = React3.useCallback((e) => {
+  const handleTouchEnd = React5.useCallback((e) => {
     e.preventDefault();
     let touchEnded = true;
     for (let i = 0; i < e.touches.length; i++) {
@@ -2872,7 +2872,7 @@ var Dpad = React3__default.default.memo(function Dpad2({
       updateVisuals(/* @__PURE__ */ new Set());
     }
   }, [getKeyCode, updateVisuals]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const dpad = dpadRef.current;
     if (!dpad) return;
     dpad.addEventListener("touchstart", handleTouchStart, { passive: false });
@@ -2930,9 +2930,9 @@ function adjustButtonPosition(config, context) {
 }
 var STORAGE_KEY = "virtual-button-positions";
 function useButtonPositions() {
-  const [landscapePositions, setLandscapePositions] = React3.useState({});
-  const [portraitPositions, setPortraitPositions] = React3.useState({});
-  React3.useEffect(() => {
+  const [landscapePositions, setLandscapePositions] = React5.useState({});
+  const [portraitPositions, setPortraitPositions] = React5.useState({});
+  React5.useEffect(() => {
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       if (stored) {
@@ -2948,7 +2948,7 @@ function useButtonPositions() {
       console.error("Failed to load button positions:", e);
     }
   }, []);
-  const savePosition = React3.useCallback((buttonType, x, y, isLandscape) => {
+  const savePosition = React5.useCallback((buttonType, x, y, isLandscape) => {
     if (isLandscape) {
       setLandscapePositions((prev) => {
         const updated = { ...prev, [buttonType]: { x, y } };
@@ -2979,11 +2979,11 @@ function useButtonPositions() {
       });
     }
   }, [landscapePositions, portraitPositions]);
-  const getPosition = React3.useCallback((buttonType, isLandscape) => {
+  const getPosition = React5.useCallback((buttonType, isLandscape) => {
     const positions = isLandscape ? landscapePositions : portraitPositions;
     return positions[buttonType] || null;
   }, [landscapePositions, portraitPositions]);
-  const resetPositions = React3.useCallback(() => {
+  const resetPositions = React5.useCallback(() => {
     setLandscapePositions({});
     setPortraitPositions({});
     try {
@@ -3008,9 +3008,9 @@ function VirtualController({
   // Default retro green
 }) {
   const { isMobile, isLandscape, isPortrait } = useMobile();
-  const [pressedButtons, setPressedButtons] = React3.useState(/* @__PURE__ */ new Set());
-  const [containerSize, setContainerSize] = React3.useState({ width: 0, height: 0 });
-  const [isFullscreenState, setIsFullscreenState] = React3.useState(false);
+  const [pressedButtons, setPressedButtons] = React5.useState(/* @__PURE__ */ new Set());
+  const [containerSize, setContainerSize] = React5.useState({ width: 0, height: 0 });
+  const [isFullscreenState, setIsFullscreenState] = React5.useState(false);
   const { getPosition, savePosition } = useButtonPositions();
   const layout = getLayoutForSystem(system);
   const visibleButtons = layout.buttons.filter((btn) => {
@@ -3021,7 +3021,7 @@ function VirtualController({
   });
   const DPAD_TYPES = ["up", "down", "left", "right"];
   const dpadButtons = visibleButtons.filter((btn) => DPAD_TYPES.includes(btn.type));
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const updateSize = () => {
       const { width, height } = getViewportSize();
       setContainerSize({ width, height });
@@ -3064,14 +3064,14 @@ function VirtualController({
       cleanupFullscreen();
     };
   }, [containerSize.height]);
-  const getButtonKeyboardCode = React3.useCallback(
+  const getButtonKeyboardCode = React5.useCallback(
     (buttonType) => {
       return getKeyboardCode(buttonType, controls);
     },
     [controls]
   );
   const SYSTEM_BUTTONS2 = ["start", "select"];
-  const handlePress = React3.useCallback(
+  const handlePress = React5.useCallback(
     (buttonType) => {
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
       if (!isSystemButton && !isRunning) {
@@ -3094,7 +3094,7 @@ function VirtualController({
     },
     [isRunning, getButtonKeyboardCode]
   );
-  const handlePressDown = React3.useCallback(
+  const handlePressDown = React5.useCallback(
     (buttonType) => {
       if (!isRunning) return;
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
@@ -3111,7 +3111,7 @@ function VirtualController({
     },
     [isRunning, getButtonKeyboardCode]
   );
-  const handleRelease = React3.useCallback(
+  const handleRelease = React5.useCallback(
     (buttonType) => {
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
       if (isSystemButton) return;
@@ -3127,7 +3127,7 @@ function VirtualController({
     },
     [getButtonKeyboardCode]
   );
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!isRunning && pressedButtons.size > 0) {
       pressedButtons.forEach((buttonType) => {
         if (!SYSTEM_BUTTONS2.includes(buttonType)) {
@@ -3137,7 +3137,7 @@ function VirtualController({
       setPressedButtons(/* @__PURE__ */ new Set());
     }
   }, [isRunning, pressedButtons, handleRelease]);
-  const memoizedButtonElements = React3.useMemo(() => {
+  const memoizedButtonElements = React5.useMemo(() => {
     const width = containerSize.width || (typeof window !== "undefined" ? window.innerWidth : 0);
     const height = containerSize.height || (typeof window !== "undefined" ? window.innerHeight : 0);
     const context = {
@@ -3408,7 +3408,7 @@ function saveMuteState(muted) {
   if (typeof window === "undefined") return;
   localStorage.setItem(MUTE_KEY, muted.toString());
 }
-var GameCanvas = React3.memo(function GameCanvas2({
+var GameCanvas = React5.memo(function GameCanvas2({
   status,
   system,
   error,
@@ -3419,8 +3419,8 @@ var GameCanvas = React3.memo(function GameCanvas2({
   canvasRef,
   onSelectBios
 }) {
-  const canvasContainerRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const canvasContainerRef = React5.useRef(null);
+  React5.useEffect(() => {
     const container = canvasContainerRef.current;
     if (!container || canvasRef.current) return;
     const canvas = document.createElement("canvas");
@@ -3438,7 +3438,7 @@ var GameCanvas = React3.memo(function GameCanvas2({
       canvasRef.current = null;
     };
   }, [canvasRef]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (status !== "ready" && status !== "running" && status !== "paused") return;
     return setupCanvasResize(canvasContainerRef);
   }, [status]);
@@ -3472,23 +3472,23 @@ function ControlMapper({
   onClose,
   system
 }) {
-  const [localControls, setLocalControls] = React3.useState(controls);
-  const [listeningFor, setListeningFor] = React3.useState(null);
-  const activeButtons = React3.useMemo(() => {
+  const [localControls, setLocalControls] = React5.useState(controls);
+  const [listeningFor, setListeningFor] = React5.useState(null);
+  const activeButtons = React5.useMemo(() => {
     return getConsoleButtons(system || "SNES");
   }, [system]);
-  const controlGroups = React3.useMemo(() => {
+  const controlGroups = React5.useMemo(() => {
     return getFilteredGroups(activeButtons);
   }, [activeButtons]);
-  const defaultControls = React3.useMemo(() => {
+  const defaultControls = React5.useMemo(() => {
     return getConsoleKeyboardDefaults(system || "SNES");
   }, [system]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (isOpen) {
       setLocalControls(controls);
     }
   }, [isOpen, controls]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen) {
       setListeningFor(null);
       return;
@@ -3638,17 +3638,17 @@ function toGamepadInfo(gamepad) {
 }
 function useGamepad(options) {
   const { onConnect, onDisconnect } = options || {};
-  const [gamepads, setGamepads] = React3.useState([]);
-  const rafRef = React3.useRef(null);
-  const lastStateRef = React3.useRef("");
-  const prevCountRef = React3.useRef(0);
-  const onConnectRef = React3.useRef(onConnect);
-  const onDisconnectRef = React3.useRef(onDisconnect);
-  React3.useEffect(() => {
+  const [gamepads, setGamepads] = React5.useState([]);
+  const rafRef = React5.useRef(null);
+  const lastStateRef = React5.useRef("");
+  const prevCountRef = React5.useRef(0);
+  const onConnectRef = React5.useRef(onConnect);
+  const onDisconnectRef = React5.useRef(onDisconnect);
+  React5.useEffect(() => {
     onConnectRef.current = onConnect;
     onDisconnectRef.current = onDisconnect;
   }, [onConnect, onDisconnect]);
-  const getGamepads = React3.useCallback(() => {
+  const getGamepads = React5.useCallback(() => {
     if (typeof navigator === "undefined" || typeof navigator.getGamepads !== "function") {
       return [];
     }
@@ -3662,14 +3662,14 @@ function useGamepad(options) {
     }
     return connected;
   }, []);
-  const getRawGamepad = React3.useCallback((index) => {
+  const getRawGamepad = React5.useCallback((index) => {
     const rawGamepads = navigator.getGamepads?.() ?? [];
     return rawGamepads[index] ?? null;
   }, []);
-  const refresh = React3.useCallback(() => {
+  const refresh = React5.useCallback(() => {
     setGamepads(getGamepads());
   }, [getGamepads]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (typeof window === "undefined" || typeof navigator === "undefined") {
       return;
     }
@@ -3770,11 +3770,11 @@ function GamepadMapper({
   onSave,
   systemColor = "#00FF41"
 }) {
-  const [selectedPlayer, setSelectedPlayer] = React3.useState(1);
-  const [bindings, setBindings] = React3.useState({});
-  const [listeningFor, setListeningFor] = React3.useState(null);
-  const rafRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [selectedPlayer, setSelectedPlayer] = React5.useState(1);
+  const [bindings, setBindings] = React5.useState({});
+  const [listeningFor, setListeningFor] = React5.useState(null);
+  const rafRef = React5.useRef(null);
+  React5.useEffect(() => {
     if (isOpen) {
       const loadedBindings = {};
       for (let i = 1; i <= 4; i++) {
@@ -3786,7 +3786,7 @@ function GamepadMapper({
       }
     }
   }, [isOpen, gamepads]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen || !listeningFor) {
       if (rafRef.current) {
         cancelAnimationFrame(rafRef.current);
@@ -3821,7 +3821,7 @@ function GamepadMapper({
       }
     };
   }, [isOpen, listeningFor, selectedPlayer]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!isOpen) return;
     const handleKeyDown = (e) => {
       if (e.code === "Escape") {
@@ -4009,7 +4009,7 @@ function CheatModal({
   onToggle,
   onClose
 }) {
-  const [copiedId, setCopiedId] = React3__default.default.useState(null);
+  const [copiedId, setCopiedId] = React5__default.default.useState(null);
   if (!isOpen) return null;
   const handleCopy = async (code, id) => {
     await navigator.clipboard.writeText(code);
@@ -4908,13 +4908,13 @@ function RASidebar({
   unlockedIds
 }) {
   const defaultTab = isLoggedIn && currentGame && achievements.length > 0 ? "achievements" : "settings";
-  const [activeTab, setActiveTab] = React3.useState(defaultTab);
-  const [filter, setFilter] = React3.useState("all");
-  const [username, setUsername] = React3.useState("");
-  const [password, setPassword] = React3.useState("");
-  const [showPassword, setShowPassword] = React3.useState(false);
-  const [localError, setLocalError] = React3.useState(null);
-  React3.useEffect(() => {
+  const [activeTab, setActiveTab] = React5.useState(defaultTab);
+  const [filter, setFilter] = React5.useState("all");
+  const [username, setUsername] = React5.useState("");
+  const [password, setPassword] = React5.useState("");
+  const [showPassword, setShowPassword] = React5.useState(false);
+  const [localError, setLocalError] = React5.useState(null);
+  React5.useEffect(() => {
     if (!isOpen) {
       setUsername("");
       setPassword("");
@@ -5069,8 +5069,8 @@ function RASidebar({
   ] });
 }
 function useToast(defaultDuration = 3e3) {
-  const [toasts, setToasts] = React3.useState([]);
-  const showToast = React3.useCallback((message, type = "info", options) => {
+  const [toasts, setToasts] = React5.useState([]);
+  const showToast = React5.useCallback((message, type = "info", options) => {
     const id = crypto.randomUUID();
     const duration = options?.duration ?? defaultDuration;
     const newToast = {
@@ -5089,10 +5089,10 @@ function useToast(defaultDuration = 3e3) {
       }, duration);
     }
   }, [defaultDuration]);
-  const dismissToast = React3.useCallback((id) => {
+  const dismissToast = React5.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
-  const clearToasts = React3.useCallback(() => {
+  const clearToasts = React5.useCallback(() => {
     setToasts([]);
   }, []);
   return {
@@ -5106,21 +5106,21 @@ function useToast(defaultDuration = 3e3) {
 // src/hooks/useGameUI.ts
 function useGameUI() {
   const { isMobile } = useMobile();
-  const containerRef = React3.useRef(null);
-  const canvasRef = React3.useRef(null);
+  const containerRef = React5.useRef(null);
+  const canvasRef = React5.useRef(null);
   const { toasts, showToast, dismissToast } = useToast(3500);
-  const [isFullscreen2, setIsFullscreen] = React3.useState(false);
-  const [raSidebarOpen, setRaSidebarOpen] = React3.useState(false);
-  const checkFullscreen = React3.useCallback(() => {
+  const [isFullscreen2, setIsFullscreen] = React5.useState(false);
+  const [raSidebarOpen, setRaSidebarOpen] = React5.useState(false);
+  const checkFullscreen = React5.useCallback(() => {
     const fullscreen = isFullscreen();
     setIsFullscreen(fullscreen);
     return fullscreen;
   }, []);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     checkFullscreen();
     return setupFullscreenListener(checkFullscreen);
   }, [checkFullscreen]);
-  const handleFullscreen = React3.useCallback(async () => {
+  const handleFullscreen = React5.useCallback(async () => {
     if (!containerRef.current) return;
     try {
       const nativeWorked = await toggleFullscreen(containerRef.current);
@@ -5663,15 +5663,15 @@ function useEmulatorCore({
   onReady,
   onError
 }) {
-  const [status, setStatus] = React3.useState("idle");
-  const [error, setError] = React3.useState(null);
-  const [isPaused, setIsPaused] = React3.useState(false);
-  const [speed, setSpeedState] = React3.useState(1);
-  const [isFastForwardOn, setIsFastForwardOn] = React3.useState(false);
-  const [isPerformanceMode, setIsPerformanceMode] = React3.useState(false);
-  const nostalgistRef = React3.useRef(null);
-  const isStartingRef = React3.useRef(false);
-  const prepare = React3.useCallback(async () => {
+  const [status, setStatus] = React5.useState("idle");
+  const [error, setError] = React5.useState(null);
+  const [isPaused, setIsPaused] = React5.useState(false);
+  const [speed, setSpeedState] = React5.useState(1);
+  const [isFastForwardOn, setIsFastForwardOn] = React5.useState(false);
+  const [isPerformanceMode, setIsPerformanceMode] = React5.useState(false);
+  const nostalgistRef = React5.useRef(null);
+  const isStartingRef = React5.useRef(false);
+  const prepare = React5.useCallback(async () => {
     if (!romUrl || !system) {
       console.warn("[Nostalgist] Missing romUrl or system");
       return;
@@ -5802,7 +5802,7 @@ function useEmulatorCore({
       onError?.(err instanceof Error ? err : new Error(errorMessage));
     }
   }, [system, romUrl, coreOverride, biosUrl, initialState, getCanvasElement, keyboardControls, gamepadBindings, initialVolume, onError, retroAchievements]);
-  const start = React3.useCallback(async () => {
+  const start = React5.useCallback(async () => {
     if (isStartingRef.current) {
       console.log("[Nostalgist] Already starting");
       return;
@@ -5835,7 +5835,7 @@ function useEmulatorCore({
       isStartingRef.current = false;
     }
   }, [prepare, onReady, onError]);
-  const stop = React3.useCallback(() => {
+  const stop = React5.useCallback(() => {
     if (nostalgistRef.current) {
       try {
         nostalgistRef.current.exit();
@@ -5848,7 +5848,7 @@ function useEmulatorCore({
       setIsPaused(false);
     }
   }, []);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       if (nostalgistRef.current) {
         console.log("[Nostalgist] Cleaning up emulator on unmount");
@@ -5856,7 +5856,7 @@ function useEmulatorCore({
       }
     };
   }, [stop]);
-  const restart = React3.useCallback(async () => {
+  const restart = React5.useCallback(async () => {
     if (nostalgistRef.current) {
       try {
         nostalgistRef.current.restart();
@@ -5871,7 +5871,7 @@ function useEmulatorCore({
       }
     }
   }, [stop, start]);
-  const pause = React3.useCallback(() => {
+  const pause = React5.useCallback(() => {
     if (nostalgistRef.current && !isPaused && status === "running") {
       try {
         nostalgistRef.current.pause();
@@ -5882,7 +5882,7 @@ function useEmulatorCore({
       }
     }
   }, [isPaused, status]);
-  const resume = React3.useCallback(() => {
+  const resume = React5.useCallback(() => {
     if (nostalgistRef.current) {
       try {
         nostalgistRef.current.resume();
@@ -5895,14 +5895,14 @@ function useEmulatorCore({
       }
     }
   }, [status]);
-  const togglePause = React3.useCallback(() => {
+  const togglePause = React5.useCallback(() => {
     if (isPaused) {
       resume();
     } else {
       pause();
     }
   }, [isPaused, pause, resume]);
-  const setSpeed = React3.useCallback((multiplier) => {
+  const setSpeed = React5.useCallback((multiplier) => {
     if (!nostalgistRef.current) return;
     try {
       const nostalgist = nostalgistRef.current;
@@ -5922,7 +5922,7 @@ function useEmulatorCore({
       console.error("[Nostalgist] Set speed error:", err);
     }
   }, [isFastForwardOn]);
-  const screenshot = React3.useCallback(async () => {
+  const screenshot = React5.useCallback(async () => {
     if (!nostalgistRef.current) {
       return null;
     }
@@ -5952,7 +5952,7 @@ function useEmulatorCore({
       return null;
     }
   }, []);
-  const resize = React3.useCallback((size) => {
+  const resize = React5.useCallback((size) => {
     if (!nostalgistRef.current) {
       console.warn("[Nostalgist] Cannot resize: emulator not ready");
       return;
@@ -5963,7 +5963,7 @@ function useEmulatorCore({
       console.error("[Nostalgist] Resize error:", err);
     }
   }, []);
-  React3.useCallback(() => {
+  React5.useCallback(() => {
     return nostalgistRef.current;
   }, []);
   return {
@@ -5989,11 +5989,11 @@ function useEmulatorCore({
   };
 }
 function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
-  const [volume, setVolume] = React3.useState(initialVolume);
-  const [isMuted, setIsMuted] = React3.useState(false);
-  const gainNodeRef = React3.useRef(null);
-  const lastVolumeRef = React3.useRef(initialVolume);
-  React3.useEffect(() => {
+  const [volume, setVolume] = React5.useState(initialVolume);
+  const [isMuted, setIsMuted] = React5.useState(false);
+  const gainNodeRef = React5.useRef(null);
+  const lastVolumeRef = React5.useRef(initialVolume);
+  React5.useEffect(() => {
     const originalConnect = AudioNode.prototype.connect;
     const contextGainMap = /* @__PURE__ */ new WeakMap();
     AudioNode.prototype.connect = function(destination, output, input) {
@@ -6021,7 +6021,7 @@ function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
       AudioNode.prototype.connect = originalConnect;
     };
   }, []);
-  const setVolumeLevel = React3.useCallback((newVolume) => {
+  const setVolumeLevel = React5.useCallback((newVolume) => {
     const clampedVolume = Math.max(0, Math.min(100, newVolume));
     const volumeValue = clampedVolume / 100;
     try {
@@ -6042,7 +6042,7 @@ function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
       console.error("[Nostalgist] Volume change error:", err);
     }
   }, []);
-  const toggleMute = React3.useCallback(() => {
+  const toggleMute = React5.useCallback(() => {
     if (!nostalgistRef.current) return;
     try {
       const emscripten = nostalgistRef.current.getEmscripten();
@@ -6084,7 +6084,7 @@ function useEmulatorAudio({ nostalgistRef, initialVolume = 100 }) {
   };
 }
 function useEmulatorInput({ nostalgistRef }) {
-  const pressKey = React3.useCallback((key) => {
+  const pressKey = React5.useCallback((key) => {
     if (!nostalgistRef.current) return;
     try {
       nostalgistRef.current.press(key);
@@ -6099,10 +6099,10 @@ function useEmulatorInput({ nostalgistRef }) {
 var MIN_SAVE_INTERVAL = 100;
 var SAVE_TIMEOUT = 5e3;
 function useSaveScheduler(nostalgistRef) {
-  const queueRef = React3.useRef([]);
-  const savingRef = React3.useRef(false);
-  const lastSaveTimeRef = React3.useRef(0);
-  const processQueue = React3.useCallback(async () => {
+  const queueRef = React5.useRef([]);
+  const savingRef = React5.useRef(false);
+  const lastSaveTimeRef = React5.useRef(0);
+  const processQueue = React5.useCallback(async () => {
     if (savingRef.current || queueRef.current.length === 0) {
       return;
     }
@@ -6156,7 +6156,7 @@ function useSaveScheduler(nostalgistRef) {
       setTimeout(() => processQueue(), MIN_SAVE_INTERVAL);
     }
   }, [nostalgistRef]);
-  const save = React3.useCallback(() => {
+  const save = React5.useCallback(() => {
     return new Promise((resolve) => {
       queueRef.current.push({
         priority: "high",
@@ -6166,7 +6166,7 @@ function useSaveScheduler(nostalgistRef) {
       processQueue();
     });
   }, [processQueue]);
-  const queueRewindCapture = React3.useCallback(() => {
+  const queueRewindCapture = React5.useCallback(() => {
     const lowPriorityCount = queueRef.current.filter((q) => q.priority === "low").length;
     if (lowPriorityCount >= 3) {
       return Promise.resolve(null);
@@ -6180,13 +6180,13 @@ function useSaveScheduler(nostalgistRef) {
       processQueue();
     });
   }, [processQueue]);
-  const isSaving = React3.useCallback(() => savingRef.current, []);
-  const getQueueLength = React3.useCallback(() => queueRef.current.length, []);
-  const clearQueue = React3.useCallback(() => {
+  const isSaving = React5.useCallback(() => savingRef.current, []);
+  const getQueueLength = React5.useCallback(() => queueRef.current.length, []);
+  const clearQueue = React5.useCallback(() => {
     queueRef.current.forEach((item) => item.resolve(null));
     queueRef.current = [];
   }, []);
-  const resultRef = React3.useRef({
+  const resultRef = React5.useRef({
     save,
     queueRewindCapture,
     isSaving,
@@ -6203,22 +6203,22 @@ function useSaveScheduler(nostalgistRef) {
 
 // src/hooks/emulator/useEmulatorSaves.ts
 function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rewindEnabled = true }) {
-  const [isRewinding, setIsRewinding] = React3.useState(false);
-  const [rewindBufferSize, setRewindBufferSize] = React3.useState(0);
-  const rewindIntervalRef = React3.useRef(null);
-  const rewindBufferRef = React3.useRef([]);
-  const rewindCaptureIntervalRef = React3.useRef(null);
+  const [isRewinding, setIsRewinding] = React5.useState(false);
+  const [rewindBufferSize, setRewindBufferSize] = React5.useState(0);
+  const rewindIntervalRef = React5.useRef(null);
+  const rewindBufferRef = React5.useRef([]);
+  const rewindCaptureIntervalRef = React5.useRef(null);
   const saveScheduler = useSaveScheduler(nostalgistRef);
-  const saveState = React3.useCallback(async () => {
+  const saveState = React5.useCallback(async () => {
     if (!nostalgistRef.current) return null;
     const result = await saveScheduler.queueRewindCapture();
     return result?.data ?? null;
   }, [saveScheduler, nostalgistRef]);
-  const saveStateWithBlob = React3.useCallback(async () => {
+  const saveStateWithBlob = React5.useCallback(async () => {
     if (!nostalgistRef.current) return null;
     return saveScheduler.save();
   }, [saveScheduler, nostalgistRef]);
-  const loadState = React3.useCallback(async (state) => {
+  const loadState = React5.useCallback(async (state) => {
     if (!nostalgistRef.current) {
       console.warn("[Nostalgist] Cannot load state: emulator not running");
       return false;
@@ -6239,7 +6239,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       return false;
     }
   }, [nostalgistRef, setIsPaused, setStatus]);
-  const startRewindCapture = React3.useCallback(() => {
+  const startRewindCapture = React5.useCallback(() => {
     if (!rewindEnabled) {
       return;
     }
@@ -6267,13 +6267,13 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       }
     }, 500);
   }, [isPaused, saveState, nostalgistRef]);
-  const stopRewindCapture = React3.useCallback(() => {
+  const stopRewindCapture = React5.useCallback(() => {
     if (rewindCaptureIntervalRef.current) {
       clearInterval(rewindCaptureIntervalRef.current);
       rewindCaptureIntervalRef.current = null;
     }
   }, []);
-  const stopRewind = React3.useCallback(() => {
+  const stopRewind = React5.useCallback(() => {
     if (!isRewinding) {
       return;
     }
@@ -6294,7 +6294,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       console.error("[Nostalgist] Stop rewind error:", err);
     }
   }, [isRewinding, startRewindCapture, nostalgistRef]);
-  const startRewind = React3.useCallback(() => {
+  const startRewind = React5.useCallback(() => {
     if (!nostalgistRef.current || isRewinding) {
       return;
     }
@@ -6333,7 +6333,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
       startRewindCapture();
     }
   }, [isRewinding, loadState, stopRewindCapture, startRewindCapture, stopRewind, nostalgistRef]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       saveScheduler.clearQueue();
       if (rewindIntervalRef.current) {
@@ -6361,7 +6361,7 @@ function useEmulatorSaves({ nostalgistRef, isPaused, setIsPaused, setStatus, rew
   };
 }
 function useEmulatorCheats({ nostalgistRef }) {
-  const applyCheat = React3.useCallback((code) => {
+  const applyCheat = React5.useCallback((code) => {
     if (!nostalgistRef.current) return;
     try {
       nostalgistRef.current.addCheat(code);
@@ -6369,7 +6369,7 @@ function useEmulatorCheats({ nostalgistRef }) {
       console.error("[Nostalgist] Apply cheat error:", err);
     }
   }, [nostalgistRef]);
-  const resetCheats = React3.useCallback(() => {
+  const resetCheats = React5.useCallback(() => {
     if (!nostalgistRef.current) return;
     try {
       nostalgistRef.current.resetCheats();
@@ -6400,7 +6400,7 @@ var useNostalgist = ({
   romFileName,
   shader
 }) => {
-  const isHeavySystem = React3.useMemo(() => {
+  const isHeavySystem = React5.useMemo(() => {
     return PERFORMANCE_TIER_2_SYSTEMS.has(system.toUpperCase());
   }, [system]);
   const {
@@ -6477,7 +6477,7 @@ var useNostalgist = ({
   } = useEmulatorCheats({
     nostalgistRef
   });
-  const start = React3.useCallback(async () => {
+  const start = React5.useCallback(async () => {
     await coreStart();
     setTimeout(() => {
       if (nostalgistRef.current) {
@@ -6485,11 +6485,11 @@ var useNostalgist = ({
       }
     }, 2e3);
   }, [coreStart, startRewindCapture, nostalgistRef]);
-  const stop = React3.useCallback(() => {
+  const stop = React5.useCallback(() => {
     stopRewindCapture();
     coreStop();
   }, [stopRewindCapture, coreStop]);
-  const hookReturn = React3.useMemo(() => ({
+  const hookReturn = React5.useMemo(() => ({
     status,
     error,
     isPaused,
@@ -6560,18 +6560,18 @@ function useVolume({
   setVolume: setVolumeInHook,
   toggleMute: toggleMuteInHook
 }) {
-  const [volume, setVolumeState] = React3.useState(() => loadVolume());
-  const [isMuted, setIsMutedState] = React3.useState(() => loadMuteState());
-  React3.useEffect(() => {
+  const [volume, setVolumeState] = React5.useState(() => loadVolume());
+  const [isMuted, setIsMutedState] = React5.useState(() => loadMuteState());
+  React5.useEffect(() => {
     setVolumeInHook(volume);
   }, [setVolumeInHook]);
-  const setVolume = React3.useCallback((newVolume) => {
+  const setVolume = React5.useCallback((newVolume) => {
     const clampedVolume = Math.max(0, Math.min(100, newVolume));
     setVolumeState(clampedVolume);
     saveVolume(clampedVolume);
     setVolumeInHook(clampedVolume);
   }, [setVolumeInHook]);
-  const toggleMute = React3.useCallback(() => {
+  const toggleMute = React5.useCallback(() => {
     setIsMutedState((prev) => {
       const newMuted = !prev;
       saveMuteState(newMuted);
@@ -6588,22 +6588,22 @@ function useVolume({
 }
 function useControls(system, onNotify) {
   const defaultControls = getConsoleKeyboardDefaults(system || "SNES");
-  const [controls, setControls] = React3.useState(() => {
+  const [controls, setControls] = React5.useState(() => {
     if (typeof window !== "undefined") {
       return loadKeyboardMapping(system);
     }
     return defaultControls;
   });
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const loaded = loadKeyboardMapping(system);
     setControls(loaded);
   }, [system]);
-  const saveControls = React3.useCallback((newControls) => {
+  const saveControls = React5.useCallback((newControls) => {
     setControls(newControls);
     saveKeyboardMapping(newControls, system);
     onNotify?.("Controls saved", "success");
   }, [system, onNotify]);
-  const resetToDefaults = React3.useCallback(() => {
+  const resetToDefaults = React5.useCallback(() => {
     setControls(defaultControls);
     saveKeyboardMapping(defaultControls, system);
     onNotify?.("Controls reset to defaults", "info");
@@ -6633,8 +6633,8 @@ function useGameSession(props) {
     showToast
   } = props;
   const { controls, saveControls } = useControls(system, showToast);
-  const [gamepadModalOpen, setGamepadModalOpen] = React3.useState(false);
-  const [controlsModalOpen, setControlsModalOpen] = React3.useState(false);
+  const [gamepadModalOpen, setGamepadModalOpen] = React5.useState(false);
+  const [controlsModalOpen, setControlsModalOpen] = React5.useState(false);
   const { gamepads, connectedCount } = useGamepad({
     onConnect: (gamepad) => {
       showToast(
@@ -6661,7 +6661,7 @@ function useGameSession(props) {
       );
     }
   });
-  const gamepadBindings = React3.useMemo(() => {
+  const gamepadBindings = React5.useMemo(() => {
     return [];
   }, [gamepads.length]);
   const nostalgist = useNostalgist({
@@ -6705,7 +6705,7 @@ function useGameSession(props) {
     toggleMute: toggleMuteInHook,
     prepare
   } = nostalgist;
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       if (status === "running" || status === "paused") {
         onSessionEnd?.();
@@ -6716,8 +6716,8 @@ function useGameSession(props) {
     setVolume: setVolumeInHook,
     toggleMute: toggleMuteInHook
   });
-  React3.useEffect(() => suppressEmulatorWarnings(), []);
-  React3.useEffect(() => {
+  React5.useEffect(() => suppressEmulatorWarnings(), []);
+  React5.useEffect(() => {
     if (!romUrl || !system || status !== "idle") return;
     const checkAndPrepare = async () => {
       if (canvasRef.current && canvasRef.current.isConnected) {
@@ -6729,7 +6729,7 @@ function useGameSession(props) {
     const rafId = requestAnimationFrame(checkAndPrepare);
     return () => cancelAnimationFrame(rafId);
   }, [romUrl, system, status, prepare]);
-  const hardcoreRestrictions = React3.useMemo(() => {
+  const hardcoreRestrictions = React5.useMemo(() => {
     const isHardcore = !!retroAchievementsConfig?.hardcore;
     return {
       isHardcore,
@@ -6800,17 +6800,17 @@ function useAutoSave({
   queueRef,
   autoSaveInterval = 6e4
 }) {
-  const [autoSavePaused, setAutoSavePaused] = React3.useState(false);
-  const [autoSaveState, setAutoSaveState] = React3.useState("idle");
-  const [autoSaveProgress, setAutoSaveProgress] = React3.useState(0);
-  const onAutoSaveRef = React3.useRef(onAutoSave);
-  const nostalgistRef = React3.useRef(nostalgist);
-  React3.useEffect(() => {
+  const [autoSavePaused, setAutoSavePaused] = React5.useState(false);
+  const [autoSaveState, setAutoSaveState] = React5.useState("idle");
+  const [autoSaveProgress, setAutoSaveProgress] = React5.useState(0);
+  const onAutoSaveRef = React5.useRef(onAutoSave);
+  const nostalgistRef = React5.useRef(nostalgist);
+  React5.useEffect(() => {
     onAutoSaveRef.current = onAutoSave;
     nostalgistRef.current = nostalgist;
   }, [onAutoSave, nostalgist]);
-  const [loopTrigger, setLoopTrigger] = React3.useState(0);
-  React3.useEffect(() => {
+  const [loopTrigger, setLoopTrigger] = React5.useState(0);
+  React5.useEffect(() => {
     const currentNostalgist = nostalgist;
     if (!onAutoSave || !currentNostalgist || currentNostalgist.status !== "running" || autoSavePaused) {
       setAutoSaveState("idle");
@@ -6860,10 +6860,10 @@ function useAutoSave({
       clearTimeout(saveTimeoutId);
     };
   }, [nostalgist?.status, autoSavePaused, !!onAutoSave, loopTrigger, autoSaveInterval]);
-  const handleAutoSaveToggle = React3.useCallback(() => {
+  const handleAutoSaveToggle = React5.useCallback(() => {
     setAutoSavePaused((prev) => !prev);
   }, []);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (!onAutoSave || !nostalgist || nostalgist.status !== "running") return;
     const performEmergencySave = async () => {
       try {
@@ -6925,12 +6925,12 @@ function useGameSaves({
   onDeleteSaveState,
   autoSaveInterval
 }) {
-  const [saveModalOpen, setSaveModalOpen] = React3.useState(false);
-  const [saveModalMode, setSaveModalMode] = React3.useState("save");
-  const [saveSlots, setSaveSlots] = React3.useState([]);
-  const [isSlotLoading, setIsSlotLoading] = React3.useState(false);
-  const [actioningSlot, setActioningSlot] = React3.useState(null);
-  const queueRef = React3.useRef(new SaveQueue());
+  const [saveModalOpen, setSaveModalOpen] = React5.useState(false);
+  const [saveModalMode, setSaveModalMode] = React5.useState("save");
+  const [saveSlots, setSaveSlots] = React5.useState([]);
+  const [isSlotLoading, setIsSlotLoading] = React5.useState(false);
+  const [actioningSlot, setActioningSlot] = React5.useState(null);
+  const queueRef = React5.useRef(new SaveQueue());
   const {
     autoSaveEnabled,
     autoSavePaused,
@@ -6943,7 +6943,7 @@ function useGameSaves({
     queueRef,
     autoSaveInterval
   });
-  const refreshSlots = React3.useCallback(async () => {
+  const refreshSlots = React5.useCallback(async () => {
     if (!onGetSaveSlots) return;
     setIsSlotLoading(true);
     try {
@@ -7115,8 +7115,8 @@ function useGameCheats({
   cheats = [],
   onToggleCheat
 }) {
-  const [cheatsModalOpen, setCheatsModalOpen] = React3.useState(false);
-  const [activeCheats, setActiveCheats] = React3.useState(/* @__PURE__ */ new Set());
+  const [cheatsModalOpen, setCheatsModalOpen] = React5.useState(false);
+  const [activeCheats, setActiveCheats] = React5.useState(/* @__PURE__ */ new Set());
   const handleToggleCheat = (cheatId) => {
     if (!nostalgist) return;
     const newActiveCheats = new Set(activeCheats);
@@ -7148,16 +7148,16 @@ function useGameCheats({
 function useGameRecording({
   getCanvasElement
 }) {
-  const [isRecording, setIsRecording] = React3.useState(false);
-  const [isPaused, setIsPaused] = React3.useState(false);
-  const [recordingDuration, setRecordingDuration] = React3.useState(0);
-  const mediaRecorderRef = React3.useRef(null);
-  const chunksRef = React3.useRef([]);
-  const startTimeRef = React3.useRef(0);
-  const pausedTimeRef = React3.useRef(0);
-  const durationIntervalRef = React3.useRef(null);
+  const [isRecording, setIsRecording] = React5.useState(false);
+  const [isPaused, setIsPaused] = React5.useState(false);
+  const [recordingDuration, setRecordingDuration] = React5.useState(0);
+  const mediaRecorderRef = React5.useRef(null);
+  const chunksRef = React5.useRef([]);
+  const startTimeRef = React5.useRef(0);
+  const pausedTimeRef = React5.useRef(0);
+  const durationIntervalRef = React5.useRef(null);
   const isSupported = typeof MediaRecorder !== "undefined" && MediaRecorder.isTypeSupported("video/webm");
-  const startRecording = React3.useCallback(() => {
+  const startRecording = React5.useCallback(() => {
     const canvas = getCanvasElement();
     if (!canvas || !isSupported) {
       console.warn("[Recording] Canvas not found or MediaRecorder not supported");
@@ -7195,7 +7195,7 @@ function useGameRecording({
       console.error("[Recording] Failed to start:", err);
     }
   }, [getCanvasElement, isSupported, isPaused]);
-  const stopRecording = React3.useCallback(async () => {
+  const stopRecording = React5.useCallback(async () => {
     return new Promise((resolve) => {
       const mediaRecorder = mediaRecorderRef.current;
       if (!mediaRecorder || mediaRecorder.state === "inactive") {
@@ -7217,7 +7217,7 @@ function useGameRecording({
       mediaRecorder.stop();
     });
   }, []);
-  const pauseRecording = React3.useCallback(() => {
+  const pauseRecording = React5.useCallback(() => {
     const mediaRecorder = mediaRecorderRef.current;
     if (mediaRecorder && mediaRecorder.state === "recording") {
       mediaRecorder.pause();
@@ -7226,7 +7226,7 @@ function useGameRecording({
       console.log("[Recording] Paused");
     }
   }, []);
-  const resumeRecording = React3.useCallback(() => {
+  const resumeRecording = React5.useCallback(() => {
     const mediaRecorder = mediaRecorderRef.current;
     if (mediaRecorder && mediaRecorder.state === "paused") {
       pausedTimeRef.current = Date.now() - pausedTimeRef.current;
@@ -7235,7 +7235,7 @@ function useGameRecording({
       console.log("[Recording] Resumed");
     }
   }, []);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     return () => {
       if (mediaRecorderRef.current && mediaRecorderRef.current.state !== "inactive") {
         mediaRecorderRef.current.stop();
@@ -7409,9 +7409,9 @@ var DEFAULT_SETTINGS = {
   showInputDisplay: false
 };
 function usePlayerPersistence(onSettingsChange) {
-  const [settings, setSettings] = React3.useState(DEFAULT_SETTINGS);
-  const [isLoaded, setIsLoaded] = React3.useState(false);
-  React3.useEffect(() => {
+  const [settings, setSettings] = React5.useState(DEFAULT_SETTINGS);
+  const [isLoaded, setIsLoaded] = React5.useState(false);
+  React5.useEffect(() => {
     try {
       const stored = localStorage.getItem(STORAGE_KEY2);
       if (stored) {
@@ -7423,7 +7423,7 @@ function usePlayerPersistence(onSettingsChange) {
     }
     setIsLoaded(true);
   }, []);
-  const updateSettings = React3.useCallback((updates) => {
+  const updateSettings = React5.useCallback((updates) => {
     setSettings((prev) => {
       const next = { ...prev, ...updates };
       try {
@@ -7440,10 +7440,10 @@ function usePlayerPersistence(onSettingsChange) {
     updateSettings
   };
 }
-var GamePlayer = React3.memo(function GamePlayer2(props) {
+var GamePlayer = React5.memo(function GamePlayer2(props) {
   const { settings, updateSettings, isLoaded: settingsLoaded } = usePlayerPersistence();
-  const [biosModalOpen, setBiosModalOpen] = React3.useState(false);
-  const [showShortcutsModal, setShowShortcutsModal] = React3.useState(false);
+  const [biosModalOpen, setBiosModalOpen] = React5.useState(false);
+  const [showShortcutsModal, setShowShortcutsModal] = React5.useState(false);
   const effectiveShader = props.shader !== void 0 ? props.shader : settings.shader;
   const {
     // Refs
@@ -7539,65 +7539,65 @@ var GamePlayer = React3.memo(function GamePlayer2(props) {
     status,
     isPerformanceMode
   } = nostalgist;
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     if (settingsLoaded) {
       setVolume(settings.volume);
       if (muted !== settings.muted) toggleMute();
     }
   }, [settingsLoaded]);
   const { system, systemColor = "#00FF41", cheats = [], onExit } = props;
-  const handlePauseToggle = React3.useCallback(() => {
+  const handlePauseToggle = React5.useCallback(() => {
     status === "ready" ? start() : togglePause();
   }, [status, start, togglePause]);
-  const handleScreenshot = React3.useCallback(async () => {
+  const handleScreenshot = React5.useCallback(async () => {
     const result = await screenshot();
     if (result && props.onScreenshotCaptured) {
       props.onScreenshotCaptured(result);
     }
   }, [screenshot, props.onScreenshotCaptured]);
-  const handleShowControls = React3.useCallback(() => {
+  const handleShowControls = React5.useCallback(() => {
     pause();
     setControlsModalOpen(true);
   }, [pause, setControlsModalOpen]);
-  const handleShowCheats = React3.useCallback(() => {
+  const handleShowCheats = React5.useCallback(() => {
     pause();
     setCheatsModalOpen(true);
   }, [pause, setCheatsModalOpen]);
-  const handleShowRA = React3.useCallback(() => {
+  const handleShowRA = React5.useCallback(() => {
     pause();
     setRaSidebarOpen(true);
   }, [pause, setRaSidebarOpen]);
-  const handleShowGamepadSettings = React3.useCallback(() => {
+  const handleShowGamepadSettings = React5.useCallback(() => {
     pause();
     setGamepadModalOpen(true);
   }, [pause, setGamepadModalOpen]);
-  const handleExitClick = React3.useCallback(() => {
+  const handleExitClick = React5.useCallback(() => {
     onExit?.();
   }, [onExit]);
-  const handleBiosSelection = React3.useCallback(() => {
+  const handleBiosSelection = React5.useCallback(() => {
     setBiosModalOpen(true);
   }, [setBiosModalOpen]);
-  const handleVolumeChange = React3.useCallback((val) => {
+  const handleVolumeChange = React5.useCallback((val) => {
     setVolume(val);
     updateSettings({ volume: val });
   }, [setVolume, updateSettings]);
-  const handleToggleMute = React3.useCallback(() => {
+  const handleToggleMute = React5.useCallback(() => {
     toggleMute();
     updateSettings({ muted: !muted });
   }, [toggleMute, updateSettings, muted]);
-  const handleShaderChange = React3.useCallback((newShader, requiresRestart) => {
+  const handleShaderChange = React5.useCallback((newShader, requiresRestart) => {
     updateSettings({ shader: newShader });
     if (props.onShaderChange) {
       props.onShaderChange(newShader, requiresRestart);
     }
   }, [updateSettings, props.onShaderChange]);
-  const handleTogglePerformanceOverlay = React3.useCallback(() => {
+  const handleTogglePerformanceOverlay = React5.useCallback(() => {
     updateSettings({ showPerformanceOverlay: !settings.showPerformanceOverlay });
   }, [updateSettings, settings.showPerformanceOverlay]);
-  const handleToggleInputDisplay = React3.useCallback(() => {
+  const handleToggleInputDisplay = React5.useCallback(() => {
     updateSettings({ showInputDisplay: !settings.showInputDisplay });
   }, [updateSettings, settings.showInputDisplay]);
-  const handleToggleRecording = React3.useCallback(async () => {
+  const handleToggleRecording = React5.useCallback(async () => {
     if (!recordingSupported) {
       console.warn("[Recording] Not supported in this browser");
       return;
@@ -7618,14 +7618,14 @@ var GamePlayer = React3.memo(function GamePlayer2(props) {
       startRecording();
     }
   }, [isRecording, recordingSupported, startRecording, stopRecording]);
-  const handleToggleShortcuts = React3.useCallback(() => {
+  const handleToggleShortcuts = React5.useCallback(() => {
     setShowShortcutsModal((prev) => {
       if (!prev) pause();
       else resume();
       return !prev;
     });
   }, [pause, resume]);
-  React3.useEffect(() => {
+  React5.useEffect(() => {
     const handleKeyDown = (e) => {
       if (e.key === "F1") {
         e.preventDefault();
@@ -7870,9 +7870,9 @@ function AchievementPopup({
   onDismiss,
   autoDismissMs = 5e3
 }) {
-  const [isVisible, setIsVisible] = React3.useState(false);
-  const [isExiting, setIsExiting] = React3.useState(false);
-  React3.useEffect(() => {
+  const [isVisible, setIsVisible] = React5.useState(false);
+  const [isExiting, setIsExiting] = React5.useState(false);
+  React5.useEffect(() => {
     requestAnimationFrame(() => {
       setIsVisible(true);
     });
@@ -7949,15 +7949,15 @@ var SHADER_PRESETS = [
   { id: "handheld/lcd-grid-v2", name: "LCD Grid", description: "Game Boy style LCD effect" },
   { id: "scanlines", name: "Scanlines", description: "Simple horizontal scanlines" }
 ];
-var ShaderSelector = React3.memo(function ShaderSelector2({
+var ShaderSelector = React5.memo(function ShaderSelector2({
   currentShader,
   onShaderChange,
   disabled = false,
   systemColor = "#00FF41"
 }) {
-  const [isOpen, setIsOpen] = React3.useState(false);
-  const dropdownRef = React3.useRef(null);
-  React3.useEffect(() => {
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const dropdownRef = React5.useRef(null);
+  React5.useEffect(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -8031,11 +8031,11 @@ var SHORTCUTS2 = [
   { key: "F5", description: "Record" },
   { key: "F9", description: "Mute" }
 ];
-var ShortcutsReference = React3.memo(function ShortcutsReference2({
+var ShortcutsReference = React5.memo(function ShortcutsReference2({
   systemColor = "#00FF41",
   isExpanded: initialExpanded = false
 }) {
-  const [isExpanded, setIsExpanded] = React3.useState(initialExpanded);
+  const [isExpanded, setIsExpanded] = React5.useState(initialExpanded);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {