koin.js 1.0.10 → 1.0.11

package/dist/index.js

@@ -3,6 +3,7 @@
 var React2 = require('react');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
+var reactDom = require('react-dom');
 var nostalgist = require('nostalgist');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -61,18 +62,43 @@ var ControlButton = React2.memo(function ControlButton2({
   );
 });
 var SPEED_OPTIONS = [1, 2];
-function SpeedMenu({ speed, onSpeedChange, disabled = false }) {
+var SpeedMenu = React2.memo(function SpeedMenu2({ speed, onSpeedChange, disabled = false }) {
   const [showMenu, setShowMenu] = React2.useState(false);
   const buttonRef = React2__default.default.useRef(null);
-  const getMenuPosition = () => {
-    if (!buttonRef.current) return {};
+  const menuRef = React2__default.default.useRef(null);
+  const [menuPosition, setMenuPosition] = React2.useState({ bottom: "0px", left: "0px", transform: "translateX(-50%)" });
+  const updateMenuPosition = () => {
+    if (!buttonRef.current) return;
     const rect = buttonRef.current.getBoundingClientRect();
-    return {
+    setMenuPosition({
       bottom: `${window.innerHeight - rect.top + 8}px`,
       left: `${rect.left + rect.width / 2}px`,
       transform: "translateX(-50%)"
-    };
+    });
   };
+  React2.useEffect(() => {
+    if (showMenu) {
+      updateMenuPosition();
+      window.addEventListener("resize", updateMenuPosition);
+      window.addEventListener("scroll", updateMenuPosition);
+      return () => {
+        window.removeEventListener("resize", updateMenuPosition);
+        window.removeEventListener("scroll", updateMenuPosition);
+      };
+    }
+  }, [showMenu]);
+  React2.useEffect(() => {
+    if (!showMenu) return;
+    const handleClickOutside = (e) => {
+      const target = e.target;
+      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
+      }
+      setShowMenu(false);
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [showMenu]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
@@ -103,36 +129,41 @@ function SpeedMenu({ speed, onSpeedChange, disabled = false }) {
         ]
       }
     ),
-    showMenu && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: "fixed z-[9999] bg-black/90 backdrop-blur-md border border-white/20 rounded-lg p-1.5 shadow-xl flex flex-col gap-1 min-w-[80px]",
-          style: getMenuPosition(),
-          children: SPEED_OPTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: () => {
-                onSpeedChange(s);
-                setShowMenu(false);
-              },
-              className: `
+    showMenu && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setShowMenu(false) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: menuRef,
+            className: "fixed z-[9999] bg-black/90 backdrop-blur-md border border-white/20 rounded-lg p-1.5 shadow-xl flex flex-col gap-1 min-w-[80px]",
+            style: menuPosition,
+            children: SPEED_OPTIONS.map((s) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: () => {
+                  onSpeedChange(s);
+                  setShowMenu(false);
+                },
+                className: `
                                     px-3 py-2 rounded text-xs font-mono font-bold text-center transition-colors
                                     ${speed === s ? "bg-white/20 text-white" : "hover:bg-white/10 text-gray-400 hover:text-white"}
                                 `,
-              children: [
-                s,
-                "x"
-              ]
-            },
-            s
-          ))
-        }
-      )
-    ] })
+                children: [
+                  s,
+                  "x"
+                ]
+              },
+              s
+            ))
+          }
+        )
+      ] }),
+      document.body
+    )
   ] });
-}
+});
+var SpeedMenu_default = SpeedMenu;
 function VolumeControl({
   volume,
   isMuted,
@@ -191,13 +222,72 @@ function VolumeControl({
     ] })
   ] });
 }
-function HardcoreTooltip({ show, message = "Disabled in Hardcore mode", children }) {
-  if (!show) return children ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : null;
+var PortalTooltip = React2.memo(function PortalTooltip2({
+  content,
+  children,
+  className = "",
+  show = true,
+  tooltipClassName = "bg-black/90 text-white"
+}) {
+  const [isHovered, setIsHovered] = React2.useState(false);
+  const containerRef = React2.useRef(null);
+  const [tooltipPosition, setTooltipPosition] = React2.useState({ bottom: "0px", left: "0px" });
+  React2.useEffect(() => {
+    if (!isHovered || !show) return;
+    const updatePosition = () => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setTooltipPosition({
+        bottom: `${window.innerHeight - rect.top + 8}px`,
+        left: `${rect.left + rect.width / 2}px`
+      });
+    };
+    updatePosition();
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition);
+    };
+  }, [isHovered, show]);
+  if (!show) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    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 })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: containerRef,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        className,
+        children
+      }
+    ),
+    isHovered && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `fixed px-2 py-1 text-xs rounded whitespace-nowrap z-[9999] ${tooltipClassName}`,
+          style: { ...tooltipPosition, transform: "translateX(-50%)" },
+          children: content
+        }
+      ),
+      document.body
+    )
   ] });
-}
+});
+var HardcoreTooltip = React2.memo(function HardcoreTooltip2({ show, message = "Disabled in Hardcore mode", children }) {
+  if (!show) return children ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    PortalTooltip,
+    {
+      content: message,
+      show,
+      tooltipClassName: "bg-amber-500/90 text-black",
+      children
+    }
+  );
+});
+var HardcoreTooltip_default = HardcoreTooltip;
 
 // src/locales/en.ts
 var en = {
@@ -495,33 +585,40 @@ var PlaybackControls = React2.memo(function PlaybackControls2({
         systemColor
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsx(SpeedMenu, { speed, onSpeedChange, disabled }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative group", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ControlButton,
-        {
-          onMouseDown: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStart : void 0,
-          onMouseUp: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
-          onMouseLeave: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
-          onTouchStart: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStart : void 0,
-          onTouchEnd: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
-          icon: lucideReact.Rewind,
-          label: t.controls.rewind,
-          active: isRewinding,
-          disabled: disabled || !hasRewindHistory || hardcoreRestrictions?.canUseRewind === false,
-          systemColor
-        }
-      ),
-      hasRewindHistory && !isRewinding && hardcoreRestrictions?.canUseRewind !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg animate-pulse pointer-events-none", style: { backgroundColor: `${systemColor}20` } }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        HardcoreTooltip,
-        {
-          show: hardcoreRestrictions?.canUseRewind === false,
-          message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
-        }
-      ),
-      hardcoreRestrictions?.canUseRewind !== false && !hasRewindHistory && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-black/90 text-white text-xs rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-50", children: t.common.playToEnableRewind })
-    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SpeedMenu_default, { speed, onSpeedChange, disabled }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      PortalTooltip,
+      {
+        content: t.common.playToEnableRewind,
+        show: hardcoreRestrictions?.canUseRewind !== false && !hasRewindHistory,
+        className: "relative group",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ControlButton,
+            {
+              onMouseDown: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStart : void 0,
+              onMouseUp: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
+              onMouseLeave: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
+              onTouchStart: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStart : void 0,
+              onTouchEnd: hasRewindHistory && hardcoreRestrictions?.canUseRewind !== false ? onRewindStop : void 0,
+              icon: lucideReact.Rewind,
+              label: t.controls.rewind,
+              active: isRewinding,
+              disabled: disabled || !hasRewindHistory || hardcoreRestrictions?.canUseRewind === false,
+              systemColor
+            }
+          ),
+          hasRewindHistory && !isRewinding && hardcoreRestrictions?.canUseRewind !== false && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 rounded-lg animate-pulse pointer-events-none", style: { backgroundColor: `${systemColor}20` } }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            HardcoreTooltip_default,
+            {
+              show: hardcoreRestrictions?.canUseRewind === false,
+              message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
+            }
+          )
+        ]
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-8 bg-white/10 mx-1" }),
     /* @__PURE__ */ jsxRuntime.jsx(
       VolumeControl,
@@ -747,7 +844,7 @@ var SaveLoadControls = React2.memo(function SaveLoadControls2({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        HardcoreTooltip,
+        HardcoreTooltip_default,
         {
           show: hardcoreRestrictions?.canUseSaveStates === false,
           message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
@@ -766,7 +863,7 @@ var SaveLoadControls = React2.memo(function SaveLoadControls2({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        HardcoreTooltip,
+        HardcoreTooltip_default,
         {
           show: hardcoreRestrictions?.canUseSaveStates === false,
           message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
@@ -824,17 +921,41 @@ var ShaderDropdown = React2.memo(function ShaderDropdown2({
 }) {
   const [isOpen, setIsOpen] = React2.useState(false);
   const [pendingShader, setPendingShader] = React2.useState(null);
-  const dropdownRef = React2.useRef(null);
+  const buttonRef = React2.useRef(null);
+  const menuRef = React2.useRef(null);
+  const [dropdownPosition, setDropdownPosition] = React2.useState({ bottom: "0px", left: "0px" });
+  const updateDropdownPosition = () => {
+    if (!buttonRef.current) return;
+    const rect = buttonRef.current.getBoundingClientRect();
+    setDropdownPosition({
+      bottom: `${window.innerHeight - rect.top + 8}px`,
+      left: `${rect.left}px`
+    });
+  };
   React2.useEffect(() => {
+    if (isOpen) {
+      updateDropdownPosition();
+      window.addEventListener("resize", updateDropdownPosition);
+      window.addEventListener("scroll", updateDropdownPosition);
+      return () => {
+        window.removeEventListener("resize", updateDropdownPosition);
+        window.removeEventListener("scroll", updateDropdownPosition);
+      };
+    }
+  }, [isOpen]);
+  React2.useEffect(() => {
+    if (!isOpen) return;
     const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        setIsOpen(false);
-        setPendingShader(null);
+      const target = e.target;
+      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
       }
+      setIsOpen(false);
+      setPendingShader(null);
     };
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  }, [isOpen]);
   const currentLabel = QUICK_PRESETS.find((p) => p.id === currentShader)?.label || "Custom";
   if (!onShaderChange) return null;
   const handleSelect = (id) => {
@@ -859,10 +980,11 @@ var ShaderDropdown = React2.memo(function ShaderDropdown2({
   const cancelRestart = () => {
     setPendingShader(null);
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: "relative hidden sm:block", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative hidden sm:block", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
+        ref: buttonRef,
         onClick: () => !disabled && setIsOpen(!isOpen),
         disabled,
         className: `flex items-center gap-1.5 px-2 py-1.5 rounded-lg transition-all duration-200 hover:bg-white/10 ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
@@ -874,52 +996,60 @@ var ShaderDropdown = React2.memo(function ShaderDropdown2({
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        className: "absolute bottom-full left-0 mb-2 py-1 rounded-lg shadow-xl z-50 min-w-[160px]",
-        style: {
-          backgroundColor: "rgba(0, 0, 0, 0.95)",
-          border: `1px solid ${systemColor}40`
-        },
-        children: pendingShader !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-orange-400", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: 14 }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "Restart Required" })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-white/60", children: "Shader change requires game restart. Your progress since last save will be lost." }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: confirmRestart,
-                className: "flex-1 px-2 py-1 text-xs font-bold rounded bg-orange-500/20 text-orange-400 hover:bg-orange-500/30",
-                children: "Restart"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "button",
-              {
-                onClick: cancelRestart,
-                className: "flex-1 px-2 py-1 text-xs font-bold rounded bg-white/10 text-white/60 hover:bg-white/20",
-                children: "Cancel"
-              }
-            )
-          ] })
-        ] }) : (
-          // Shader list
-          QUICK_PRESETS.map(({ id, label }) => /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: () => handleSelect(id),
-              className: `w-full px-3 py-1.5 text-left text-xs font-medium transition-colors ${currentShader === id ? "text-white" : "text-white/70 hover:bg-white/10"}`,
-              style: currentShader === id ? { backgroundColor: `${systemColor}30`, color: systemColor } : void 0,
-              children: label
+    isOpen && typeof document !== "undefined" && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "fixed inset-0 z-[9998]", onClick: () => setIsOpen(false) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            ref: menuRef,
+            className: "fixed py-1 rounded-lg shadow-xl z-[9999] min-w-[160px]",
+            style: {
+              backgroundColor: "rgba(0, 0, 0, 0.95)",
+              border: `1px solid ${systemColor}40`,
+              ...dropdownPosition
             },
-            id
-          ))
+            children: pendingShader !== null ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-3 space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs text-orange-400", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.RefreshCw, { size: 14 }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-bold", children: "Restart Required" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-white/60", children: "Shader change requires game restart. Your progress since last save will be lost." }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-2 pt-1", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: confirmRestart,
+                    className: "flex-1 px-2 py-1 text-xs font-bold rounded bg-orange-500/20 text-orange-400 hover:bg-orange-500/30",
+                    children: "Restart"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    onClick: cancelRestart,
+                    className: "flex-1 px-2 py-1 text-xs font-bold rounded bg-white/10 text-white/60 hover:bg-white/20",
+                    children: "Cancel"
+                  }
+                )
+              ] })
+            ] }) : (
+              // Shader list
+              QUICK_PRESETS.map(({ id, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: () => handleSelect(id),
+                  className: `w-full px-3 py-1.5 text-left text-xs font-medium transition-colors ${currentShader === id ? "text-white" : "text-white/70 hover:bg-white/10"}`,
+                  style: currentShader === id ? { backgroundColor: `${systemColor}30`, color: systemColor } : void 0,
+                  children: label
+                },
+                id
+              ))
+            )
+          }
         )
-      }
+      ] }),
+      document.body
     )
   ] });
 });
@@ -936,41 +1066,48 @@ function RAButton({
   const t = useKoinTranslation();
   const title = isGameFound ? `${t.retroAchievements.title} (${achievementCount} achievements)` : isConnected ? t.retroAchievements.connected : t.retroAchievements.title;
   const tooltip = isIdentifying ? t.retroAchievements.identifying : isGameFound ? t.retroAchievements.achievementsAvailable.replace("{{count}}", achievementCount.toString()) : isConnected ? t.retroAchievements.gameNotSupported : t.retroAchievements.connect;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative group ${className}`, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick,
-        disabled,
-        className: `
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    PortalTooltip,
+    {
+      content: tooltip,
+      className: `relative group ${className}`,
+      tooltipClassName: "bg-gray-900/95 text-white border border-white/10",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick,
+            disabled,
+            className: `
           group relative flex flex-col items-center gap-1 px-3 py-2 rounded-lg
           transition-all duration-200 disabled:opacity-40 disabled:cursor-not-allowed
           select-none
           ${isGameFound ? "bg-gradient-to-b from-yellow-500/30 to-orange-500/20 text-yellow-400 ring-1 ring-yellow-500/50 shadow-[0_0_12px_rgba(234,179,8,0.3)]" : isConnected ? "bg-yellow-500/10 text-yellow-400/70 ring-1 ring-yellow-500/30" : "hover:bg-white/10 text-gray-400 hover:text-white"}
         `,
-        title,
-        children: [
-          isIdentifying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 20, className: "animate-spin text-yellow-400" }) : /* @__PURE__ */ jsxRuntime.jsx(
-            lucideReact.Trophy,
-            {
-              size: 20,
-              className: `
+            title,
+            children: [
+              isIdentifying ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2, { size: 20, className: "animate-spin text-yellow-400" }) : /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.Trophy,
+                {
+                  size: 20,
+                  className: `
               transition-all group-hover:scale-110 
               ${isGameFound ? "drop-shadow-[0_0_8px_rgba(234,179,8,0.7)] text-yellow-400" : ""}
               ${isConnected && !isGameFound ? "opacity-70" : ""}
             `
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold uppercase tracking-wider opacity-70", children: isIdentifying ? "..." : isGameFound ? achievementCount : "RA" })
-        ]
-      }
-    ),
-    isConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[9px] font-bold uppercase tracking-wider opacity-70", children: isIdentifying ? "..." : isGameFound ? achievementCount : "RA" })
+            ]
+          }
+        ),
+        isConnected && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `
           absolute -top-1 -right-1 w-3 h-3 rounded-full border-2 border-black
           ${isGameFound ? "bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.8)]" : "bg-yellow-500 shadow-[0_0_6px_rgba(234,179,8,0.6)]"}
-        `, children: isGameFound && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-green-400 rounded-full animate-ping opacity-50" }) }),
-    /* @__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: tooltip })
-  ] });
+        `, children: isGameFound && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-green-400 rounded-full animate-ping opacity-50" }) })
+      ]
+    }
+  );
 }
 var SettingsControls = React2.memo(function SettingsControls2({
   onFullscreen,
@@ -1062,7 +1199,7 @@ var SettingsControls = React2.memo(function SettingsControls2({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
-        HardcoreTooltip,
+        HardcoreTooltip_default,
         {
           show: hardcoreRestrictions?.canUseCheats === false,
           message: hardcoreRestrictions?.isHardcore ? t.common.disabledInHardcore : t.common.notSupported
@@ -9340,6 +9477,8 @@ function AchievementPopup({
     }
   );
 }
+
+// src/lib/shader-presets.ts
 var SHADER_PRESETS = [
   { id: "", name: "None", description: "No shader - sharp pixels" },
   { id: "crt/crt-lottes", name: "CRT Lottes", description: "High-quality arcade monitor look" },
@@ -9352,81 +9491,6 @@ 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 = React2.memo(function ShaderSelector2({
-  currentShader,
-  onShaderChange,
-  disabled = false,
-  systemColor = "#00FF41"
-}) {
-  const [isOpen, setIsOpen] = React2.useState(false);
-  const dropdownRef = React2.useRef(null);
-  React2.useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  const currentPreset = SHADER_PRESETS.find((p) => p.id === currentShader) || SHADER_PRESETS[0];
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: dropdownRef, className: "relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "button",
-      {
-        onClick: () => !disabled && setIsOpen(!isOpen),
-        disabled,
-        className: "flex items-center gap-2 px-3 py-2 rounded text-sm font-medium transition-all",
-        style: {
-          backgroundColor: currentShader ? `${systemColor}20` : "rgba(255,255,255,0.1)",
-          color: currentShader ? systemColor : "rgba(255,255,255,0.7)",
-          border: `1px solid ${currentShader ? systemColor : "rgba(255,255,255,0.2)"}`
-        },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Palette, { size: 16 }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:inline", children: currentPreset.name }),
-          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 14, className: `transition-transform ${isOpen ? "rotate-180" : ""}` })
-        ]
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "absolute bottom-full left-0 mb-2 w-56 bg-black/95 border border-white/20 rounded-lg shadow-xl overflow-hidden z-50",
-        style: { backdropFilter: "blur(8px)" },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-2 border-b border-white/10", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs font-bold text-white/60 uppercase tracking-wide", children: "Video Shader" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-64 overflow-y-auto", children: SHADER_PRESETS.map((preset) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: () => {
-                onShaderChange(preset.id);
-                setIsOpen(false);
-              },
-              className: "w-full px-3 py-2 text-left hover:bg-white/10 transition-colors flex flex-col gap-0.5",
-              style: {
-                backgroundColor: currentShader === preset.id ? `${systemColor}20` : void 0
-              },
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: "text-sm font-medium",
-                    style: { color: currentShader === preset.id ? systemColor : "white" },
-                    children: preset.name
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-white/50", children: preset.description })
-              ]
-            },
-            preset.id
-          )) })
-        ]
-      }
-    )
-  ] });
-});
-var ShaderSelector_default = ShaderSelector;
 var SHORTCUTS = [
   { key: "F1", description: "Help" },
   { key: "F3", description: "FPS Overlay" },
@@ -9508,7 +9572,6 @@ exports.STICK_BUTTONS = STICK_BUTTONS;
 exports.SUPPORTED_EXTENSIONS = SUPPORTED_EXTENSIONS;
 exports.SYSTEMS = SYSTEMS;
 exports.SYSTEM_BUTTONS = SYSTEM_BUTTONS;
-exports.ShaderSelector = ShaderSelector_default;
 exports.ShortcutsReference = ShortcutsReference_default;
 exports.TRIGGER_BUTTONS = TRIGGER_BUTTONS;
 exports.ToastContainer = ToastContainer;