koin.js 1.0.8 → 1.0.9

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import React2, { memo, createContext, useState, useRef, useEffect, useMemo, useCallback, useContext } from 'react';
-import { Play, Pause, RotateCcw, Rewind, Save, Download, Camera, Video, Circle, Monitor, ChevronDown, RefreshCw, HelpCircle, Maximize, Gamepad2, Joystick, Code, Settings, Power, Square, Keyboard, X, Palette, ChevronUp, Gauge, VolumeX, Volume1, Volume2, Loader2, Trophy, AlertTriangle, List, PauseCircle, Check, Clock, User, Copy, Lock, Zap, HardDrive, Trash2, Cpu, AlertCircle, FileCode, Globe, ExternalLink, EyeOff, Eye, Shield, CheckCircle, LogOut, Info, XCircle } from 'lucide-react';
+import { Play, Pause, RotateCcw, Rewind, Save, Download, Camera, Video, Circle, Monitor, ChevronDown, RefreshCw, HelpCircle, Maximize, Gamepad2, Joystick, Code, Settings, Power, Square, Keyboard, X, Palette, ChevronUp, Gauge, VolumeX, Volume1, Volume2, Loader2, Trophy, AlertTriangle, Minimize2, List, PauseCircle, Check, Clock, Move, User, Copy, Lock, Zap, HardDrive, Trash2, Cpu, AlertCircle, FileCode, Globe, ExternalLink, EyeOff, Eye, Shield, CheckCircle, LogOut, Info, XCircle } from 'lucide-react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Nostalgist } from 'nostalgist';
 
@@ -2078,92 +2078,175 @@ function useMobile() {
 
 // src/components/VirtualController/layouts.ts
 var BUTTON_SMALL = 44;
-var BUTTON_MEDIUM = 52;
-var BUTTON_LARGE = 60;
-var NES_LAYOUT = {
-  console: "NES",
+var BUTTON_MEDIUM = 56;
+var BUTTON_LARGE = 68;
+var START_SELECT_Y = 8;
+var SELECT_X = 38;
+var START_X = 62;
+var DPAD_BUTTONS = [
+  { type: "up", label: "\u2191", x: 14, y: 55, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+  { type: "down", label: "\u2193", x: 14, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+  { type: "left", label: "\u2190", x: 6, y: 62.5, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+  { type: "right", label: "\u2192", x: 22, y: 62.5, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true }
+];
+var TWO_BUTTON_LAYOUT = {
+  console: "2BUTTON",
   buttons: [
-    // D-pad - y:55-70 to stay above control bar
-    { type: "up", label: "\u2191", x: 12, y: 55, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    // Action buttons
-    { type: "b", label: "B", x: 80, y: 64, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 92, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    // System buttons - top center
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    { type: "b", label: "B", x: 78, y: 66, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 90, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 var SNES_LAYOUT = {
   console: "SNES",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "y", label: "Y", x: 76, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "x", label: "X", x: 88, y: 37, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 88, y: 53, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 96, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "l", label: "L", x: 8, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "r", label: "R", x: 92, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    // Diamond: Y-X-B-A (left-top-bottom-right)
+    { type: "y", label: "Y", x: 74, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "X", x: 84, y: 46, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 84, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 94, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Shoulders
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
-var GB_LAYOUT = {
-  console: "GB",
+var GBA_LAYOUT = {
+  console: "GBA",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 55, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 62, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 80, y: 64, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 92, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    { type: "b", label: "B", x: 80, y: 62, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 92, y: 52, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
-var GBA_LAYOUT = {
-  console: "GBA",
+var SIX_BUTTON_LAYOUT = {
+  console: "6BUTTON",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 82, y: 55, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 94, y: 45, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
-    { type: "l", label: "L", x: 8, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "r", label: "R", x: 92, y: 18, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "select", label: "SEL", x: 38, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 62, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    // Top row (X, Y, Z) → mapped to L, X, R
+    { type: "l", label: "X", x: 74, y: 48, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "Y", x: 84, y: 44, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "r", label: "Z", x: 94, y: 40, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Bottom row (A, B, C) → mapped to Y, B, A
+    { type: "y", label: "A", x: 72, y: 64, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 82, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "C", x: 92, y: 56, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
-var GENESIS_LAYOUT = {
-  console: "GENESIS",
+var SATURN_LAYOUT = {
+  console: "SATURN",
   buttons: [
-    { type: "up", label: "\u2191", x: 12, y: 45, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "down", label: "\u2193", x: 12, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "left", label: "\u2190", x: 5, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "right", label: "\u2192", x: 19, y: 52, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "a", label: "A", x: 74, y: 56, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "b", label: "B", x: 85, y: 48, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "c", label: "C", x: 96, y: 40, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
-    { type: "start", label: "START", x: 50, y: 8, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true }
+    ...DPAD_BUTTONS,
+    // Face buttons (same as 6-button but uses standard buttons)
+    // X/Y/Z on top
+    { type: "x", label: "X", x: 74, y: 48, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "y", label: "Y", x: 84, y: 44, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "l", label: "Z", x: 94, y: 40, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // A/B/C on bottom
+    { type: "b", label: "A", x: 72, y: 64, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "B", x: 82, y: 60, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "r", label: "C", x: 92, y: 56, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Triggers (L2/R2 for Saturn L/R)
+    { type: "l2", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r2", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var NEOGEO_LAYOUT = {
+  console: "NEOGEO",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // Curved A-B-C-D layout (maps to b-a-y-x for RetroPad)
+    { type: "b", label: "A", x: 68, y: 68, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "B", x: 78, y: 62, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "y", label: "C", x: 88, y: 56, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "D", x: 96, y: 48, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "select", label: "COIN", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var PSX_LAYOUT = {
+  console: "PSX",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // PS symbols: △◯✕□ → y, b, a, x (triangle-circle-cross-square)
+    { type: "y", label: "\u25B3", x: 84, y: 46, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "\u25CB", x: 94, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "\u2715", x: 84, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "\u25A1", x: 74, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Shoulders
+    { type: "l", label: "L1", x: 8, y: 25, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R1", x: 92, y: 25, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "l2", label: "L2", x: 8, y: 15, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r2", label: "R2", x: 92, y: 15, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "select", label: "SELECT", x: SELECT_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" },
+    { type: "start", label: "START", x: START_X, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var N64_LAYOUT = {
+  console: "N64",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // A/B
+    { type: "a", label: "A", x: 80, y: 68, size: BUTTON_LARGE, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 72, y: 76, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // C-buttons (use x/y as C-left/C-up, l2/r2 as C-down/C-right)
+    { type: "y", label: "C\u2191", x: 92, y: 50, size: 36, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "C\u2190", x: 86, y: 56, size: 36, showInPortrait: true, showInLandscape: true },
+    { type: "l2", label: "C\u2193", x: 92, y: 62, size: 36, showInPortrait: true, showInLandscape: true },
+    { type: "r2", label: "C\u2192", x: 98, y: 56, size: 36, showInPortrait: true, showInLandscape: true },
+    // Shoulders
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    // Z trigger (use select as workaround since it's a unique button)
+    { type: "select", label: "Z", x: 8, y: 35, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
+  ]
+};
+var DREAMCAST_LAYOUT = {
+  console: "DREAMCAST",
+  buttons: [
+    ...DPAD_BUTTONS,
+    // Standard diamond
+    { type: "y", label: "Y", x: 74, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "x", label: "X", x: 84, y: 46, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "b", label: "B", x: 84, y: 70, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    { type: "a", label: "A", x: 94, y: 58, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true },
+    // Triggers
+    { type: "l", label: "L", x: 8, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "r", label: "R", x: 92, y: 20, size: BUTTON_MEDIUM, showInPortrait: true, showInLandscape: true, shape: "rect" },
+    { type: "start", label: "START", x: 50, y: START_SELECT_Y, size: BUTTON_SMALL, showInPortrait: true, showInLandscape: true, shape: "pill" }
   ]
 };
 function getLayoutForSystem(system) {
-  const n = system.toUpperCase();
-  if (n.includes("NES") || n.includes("FAMICOM")) return NES_LAYOUT;
-  if (n.includes("SNES") || n.includes("SUPER")) return SNES_LAYOUT;
-  if (n.includes("GBA") || n.includes("ADVANCE")) return GBA_LAYOUT;
-  if (n.includes("GB") || n.includes("GAME BOY")) return GB_LAYOUT;
-  if (n.includes("GENESIS") || n.includes("MEGA")) return GENESIS_LAYOUT;
-  return NES_LAYOUT;
+  const s = system.toUpperCase();
+  if (s === "PS1" || s === "PSX" || s === "PSP") return PSX_LAYOUT;
+  if (s === "N64") return N64_LAYOUT;
+  if (s === "SNES" || s === "NDS") return SNES_LAYOUT;
+  if (s === "GBA") return GBA_LAYOUT;
+  if (s === "NES" || s === "GB" || s === "GBC" || s === "VIRTUAL_BOY") return TWO_BUTTON_LAYOUT;
+  if (s === "DREAMCAST") return DREAMCAST_LAYOUT;
+  if (s === "SATURN") return SATURN_LAYOUT;
+  if (s === "GENESIS") return SIX_BUTTON_LAYOUT;
+  if (s === "MASTER_SYSTEM" || s === "GAME_GEAR") return TWO_BUTTON_LAYOUT;
+  if (s === "NEOGEO") return NEOGEO_LAYOUT;
+  if (s.includes("NEOGEO_POCKET")) return TWO_BUTTON_LAYOUT;
+  if (s === "ARCADE") return SIX_BUTTON_LAYOUT;
+  if (s === "PC_ENGINE" || s === "TURBOGRAFX") return TWO_BUTTON_LAYOUT;
+  if (s.includes("WONDERSWAN")) return TWO_BUTTON_LAYOUT;
+  if (s.includes("ATARI")) return TWO_BUTTON_LAYOUT;
+  return TWO_BUTTON_LAYOUT;
 }
-var DRAG_HOLD_DELAY = 300;
+var DRAG_HOLD_DELAY = 350;
 var DRAG_MOVE_THRESHOLD = 10;
 var DRAG_CENTER_THRESHOLD = 0.4;
 function useTouchHandlers({
@@ -2196,6 +2279,9 @@ function useTouchHandlers({
         x: touchX - displayX / 100 * containerWidth,
         y: touchY - displayY / 100 * containerHeight
       };
+      if (navigator.vibrate) {
+        navigator.vibrate([10, 30, 10]);
+      }
       if (!isSystemButton) {
         onRelease(buttonType);
       }
@@ -2311,55 +2397,119 @@ function useTouchHandlers({
 }
 
 // src/components/VirtualController/utils/buttonStyles.ts
-function getButtonStyles(buttonType, isPressed) {
+var DEFAULT_FACE = {
+  bg: "bg-white/10 backdrop-blur-md",
+  text: "text-white",
+  border: "border-white/30",
+  shadow: "shadow-lg",
+  transform: ""
+};
+var DEFAULT_SHOULDER = {
+  bg: "bg-white/20 backdrop-blur-md",
+  text: "text-white",
+  border: "border-white/30",
+  shadow: "shadow-sm",
+  transform: ""
+};
+var DEFAULT_SYSTEM = {
+  bg: "bg-black/60 backdrop-blur-md",
+  text: "text-white/80",
+  border: "border-white/20",
+  shadow: "shadow-sm",
+  transform: ""
+};
+var PRESSED_STYLE = {
+  bg: "bg-white/90",
+  text: "text-black",
+  border: "border-white",
+  shadow: "shadow-none",
+  transform: "scale(0.95)"
+};
+function coloredButton(bgColor, textColor = "text-white") {
+  return {
+    bg: bgColor,
+    text: textColor,
+    border: "border-white/20",
+    shadow: "shadow-lg",
+    transform: ""
+  };
+}
+function psButton(symbolColor) {
+  return {
+    bg: "bg-black/80 backdrop-blur-md",
+    text: symbolColor,
+    border: "border-white/30",
+    shadow: "shadow-lg",
+    transform: ""
+  };
+}
+function getButtonStyles(buttonType, isPressed, consoleName = "") {
   if (isPressed) {
-    return {
-      bg: "bg-retro-primary",
-      text: "text-black",
-      border: "border-white",
-      shadow: "shadow-none",
-      transform: "translate-x-[3px] translate-y-[3px]"
-    };
+    return PRESSED_STYLE;
+  }
+  const c = consoleName.toUpperCase();
+  if (c === "NEOGEO") {
+    switch (buttonType) {
+      case "b":
+        return coloredButton("bg-[#E60012]");
+      // A = Red
+      case "a":
+        return coloredButton("bg-[#FFD600]", "text-black");
+      // B = Yellow
+      case "y":
+        return coloredButton("bg-[#009944]");
+      // C = Green
+      case "x":
+        return coloredButton("bg-[#0068B7]");
+    }
+  }
+  if (c === "PSX" || c === "PS1" || c === "PSP") {
+    switch (buttonType) {
+      case "y":
+        return psButton("text-[#25D998]");
+      // △ = Green
+      case "b":
+        return psButton("text-[#FF5555]");
+      // ○ = Red
+      case "a":
+        return psButton("text-[#5599FF]");
+      // ✕ = Blue
+      case "x":
+        return psButton("text-[#E889DD]");
+    }
+  }
+  if (c === "SNES" || c === "NDS") {
+    switch (buttonType) {
+      case "a":
+        return coloredButton("bg-[#CC0000]");
+      // A = Red
+      case "b":
+        return coloredButton("bg-[#CCCC00]", "text-black");
+      // B = Yellow
+      case "x":
+        return coloredButton("bg-[#0033CC]");
+      // X = Blue
+      case "y":
+        return coloredButton("bg-[#006600]");
+    }
   }
   switch (buttonType) {
     case "a":
     case "b":
-    case "c":
-      return {
-        bg: "bg-red-600",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
     case "x":
     case "y":
-      return {
-        bg: "bg-blue-600",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
+      return DEFAULT_FACE;
     case "l":
     case "r":
+    case "l2":
+    case "r2":
+      return DEFAULT_SHOULDER;
     case "start":
     case "select":
-      return {
-        bg: "bg-retro-surface",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
+    case "menu":
+      return DEFAULT_SYSTEM;
     default:
-      return {
-        bg: "bg-black",
-        text: "text-white",
-        border: "border-white",
-        shadow: "shadow-hard",
-        transform: ""
-      };
+      return DEFAULT_FACE;
   }
 }
 var VirtualButton = React2.memo(function VirtualButton2({
@@ -2373,12 +2523,11 @@ var VirtualButton = React2.memo(function VirtualButton2({
   customPosition,
   onPositionChange,
   isLandscape = false,
-  systemColor = "#00FF41"
-  // Default retro green
+  console: console2 = ""
 }) {
   const t = useKoinTranslation();
   const buttonRef = useRef(null);
-  const isSystemButton = config.type === "start" || config.type === "select";
+  const isSystemButton = config.type === "start" || config.type === "select" || config.type === "menu";
   const displayX = customPosition ? customPosition.x : config.x;
   const displayY = customPosition ? customPosition.y : config.y;
   let label = config.label;
@@ -2421,63 +2570,78 @@ var VirtualButton = React2.memo(function VirtualButton2({
   const leftPercent = displayX / 100 * containerWidth - config.size / 2;
   const topPercent = displayY / 100 * containerHeight - config.size / 2;
   const transform = `translate3d(${leftPercent.toFixed(1)}px, ${topPercent.toFixed(1)}px, 0)`;
-  const styles = getButtonStyles(config.type, isPressed);
-  const isActionButton = config.type === "a" || config.type === "b";
-  const borderRadius = isActionButton ? "50%" : "0";
-  const pressedStyle = isPressed ? {
-    backgroundColor: systemColor,
-    color: "#000000",
-    borderColor: "#FFFFFF"
-  } : {};
+  const styles = getButtonStyles(config.type, isPressed, console2);
+  let borderRadius = "50%";
+  let width = `${config.size}px`;
+  if (config.shape === "pill") {
+    borderRadius = "20px";
+    width = `${config.size * 1.8}px`;
+  } else if (config.shape === "rect") {
+    borderRadius = "8px";
+    width = `${config.size * 2.5}px`;
+  } else if (config.shape === "square") {
+    borderRadius = "12px";
+  } else {
+    if (["l", "r", "l2", "r2"].includes(config.type)) {
+      borderRadius = "10px";
+      width = `${config.size * 2}px`;
+    }
+  }
   return /* @__PURE__ */ jsx(
     "button",
     {
       ref: buttonRef,
       className: `
-        absolute border-4 font-heading font-bold uppercase tracking-wider
-        transition-all duration-100 select-none
+        absolute flex items-center justify-center
+        font-heading font-bold uppercase tracking-wider
+        transition-all duration-75 select-none
         pointer-events-auto touch-manipulation
-        ${isPressed ? "" : `${styles.bg} ${styles.text} ${styles.border} ${styles.shadow}`} ${styles.transform}
-        active:translate-x-[3px] active:translate-y-[3px] active:shadow-none
+        backdrop-blur-sm
+        ${isPressed ? "" : `${styles.bg} ${styles.border} ${styles.shadow}`} 
+        ${styles.text}
+        active:shadow-none
       `,
       style: {
-        // Remove left/top and use transform instead for high performance (compositor only)
         top: 0,
         left: 0,
-        transform,
+        transform: transform + (isPressed ? " scale(0.95)" : ""),
         willChange: "transform",
-        width: `${config.size}px`,
+        width,
         height: `${config.size}px`,
+        // Height stays consistent
         minWidth: `${config.size}px`,
-        minHeight: `${config.size}px`,
-        fontSize: config.size < 50 ? "10px" : "12px",
+        fontSize: config.size < 50 ? "11px" : "16px",
         borderRadius,
+        borderWidth: isPressed ? "0px" : "1.5px",
+        // slightly thicker border
         lineHeight: "1",
         // Semi-transparent in landscape mode
         opacity: isLandscape ? 0.85 : 1,
-        // Prevent context menu on long-press
         WebkitTouchCallout: "none",
         WebkitUserSelect: "none",
         userSelect: "none",
-        ...pressedStyle
+        // Direct style overrides if needed from getButtonStyles (for exact hex colors)
+        backgroundColor: isPressed ? styles.bg.startsWith("bg-") ? void 0 : styles.bg : styles.bg.startsWith("bg-") ? void 0 : styles.bg,
+        borderColor: isPressed ? void 0 : styles.border.startsWith("border-") ? void 0 : styles.border,
+        color: styles.text.startsWith("text-") ? void 0 : styles.text
       },
       "aria-label": label,
       onContextMenu: (e) => e.preventDefault(),
-      children: label
+      children: /* @__PURE__ */ jsx("span", { className: "drop-shadow-md", children: label })
     }
   );
 });
 var VirtualButton_default = VirtualButton;
 
 // src/lib/controls/types.ts
-var DPAD_BUTTONS = ["up", "down", "left", "right"];
+var DPAD_BUTTONS2 = ["up", "down", "left", "right"];
 var FACE_BUTTONS = ["a", "b", "x", "y"];
 var SHOULDER_BUTTONS = ["l", "r"];
 var TRIGGER_BUTTONS = ["l2", "r2"];
 var STICK_BUTTONS = ["l3", "r3"];
 var SYSTEM_BUTTONS = ["start", "select"];
 var ALL_BUTTONS = [
-  ...DPAD_BUTTONS,
+  ...DPAD_BUTTONS2,
   ...FACE_BUTTONS,
   ...SHOULDER_BUTTONS,
   ...TRIGGER_BUTTONS,
@@ -2635,91 +2799,91 @@ var CONSOLE_CAPABILITIES = {
   // ============ Nintendo ============
   NES: {
     console: "NES",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   SNES: {
     console: "SNES",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start", "select"]
   },
   N64: {
     console: "N64",
-    buttons: [...DPAD_BUTTONS, "a", "b", "l", "r", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "l", "r", "start"]
     // No select, has Z trigger (mapped to l2)
   },
   GB: {
     console: "GB",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   GBC: {
     console: "GBC",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   GBA: {
     console: "GBA",
-    buttons: [...DPAD_BUTTONS, "a", "b", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "l", "r", "start", "select"]
   },
   // ============ Sega ============
   SMS: {
     console: "SMS",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start"]
     // 1, 2, Pause
   },
   GENESIS: {
     console: "GENESIS",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start"]
     // 6-button: A/B/C + X/Y/Z
   },
   GG: {
     console: "GG",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start"]
   },
   SATURN: {
     console: "SATURN",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "l2", "r2", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "l2", "r2", "start"]
     // Full 8-button
   },
   // ============ Sony ============
   PS1: {
     console: "PS1",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "l2", "r2", "l3", "r3", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "l2", "r2", "l3", "r3", "start", "select"]
   },
   // ============ NEC ============
   PCE: {
     console: "PCE",
     // TurboGrafx-16
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
     // I, II, Run, Select
   },
   // ============ Atari ============
   ATARI2600: {
     console: "ATARI2600",
-    buttons: [...DPAD_BUTTONS, "a", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "select"]
     // Fire, Select/Reset
   },
   ATARI7800: {
     console: "ATARI7800",
-    buttons: [...DPAD_BUTTONS, "a", "b", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "select"]
   },
   LYNX: {
     console: "LYNX",
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
     // A, B, Option 1, Option 2
   },
   // ============ SNK ============
   NGPC: {
     console: "NGPC",
     // Neo Geo Pocket
-    buttons: [...DPAD_BUTTONS, "a", "b", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "start", "select"]
   },
   // ============ Other ============
   WSC: {
     console: "WSC",
     // WonderSwan
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "start"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "start"]
   },
   ARCADE: {
     console: "ARCADE",
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start", "select"]
     // Generic 6-button
   }
 };
@@ -2760,7 +2924,7 @@ function getConsoleCapabilities(system) {
   const normalized = system.toUpperCase();
   return CONSOLE_CAPABILITIES[normalized] ?? {
     console: normalized,
-    buttons: [...DPAD_BUTTONS, "a", "b", "x", "y", "l", "r", "start", "select"]
+    buttons: [...DPAD_BUTTONS2, "a", "b", "x", "y", "l", "r", "start", "select"]
   };
 }
 function getConsoleButtons(system) {
@@ -3048,13 +3212,11 @@ var DEFAULT_CONTROLS = DEFAULT_KEYBOARD;
 
 // src/components/VirtualController/utils/keyboardEvents.ts
 function getKeyboardCode(buttonType, controls) {
-  const controlMapping = controls || DEFAULT_CONTROLS;
-  const mappingKey = buttonType === "c" ? "x" : buttonType;
-  const key = mappingKey;
-  if (key in controlMapping) {
-    return controlMapping[key] ?? null;
+  const key = buttonType;
+  if (controls && key in controls && controls[key]) {
+    return controls[key];
   }
-  return null;
+  return DEFAULT_CONTROLS[key] ?? null;
 }
 function getKeyName(code) {
   if (code.startsWith("Key")) return code.slice(3).toLowerCase();
@@ -3080,23 +3242,34 @@ function dispatchKeyboardEvent(type, code) {
   canvas.dispatchEvent(event);
   return true;
 }
+var DRAG_HOLD_DELAY2 = 350;
+var CENTER_TOUCH_RADIUS = 0.25;
 var Dpad = React2.memo(function Dpad2({
-  size,
+  size = 180,
   x,
   y,
   containerWidth,
   containerHeight,
   controls,
   systemColor = "#00FF41",
-  isLandscape = false
+  isLandscape = false,
+  customPosition,
+  onPositionChange
 }) {
   const dpadRef = useRef(null);
   const activeTouchRef = useRef(null);
   const activeDirectionsRef = useRef(/* @__PURE__ */ new Set());
-  const upRef = useRef(null);
-  const downRef = useRef(null);
-  const leftRef = useRef(null);
-  const rightRef = useRef(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const dragTimerRef = useRef(null);
+  const dragStartRef = useRef({ x: 0, y: 0, touchX: 0, touchY: 0 });
+  const touchStartPosRef = useRef({ x: 0, y: 0, time: 0 });
+  const upPathRef = useRef(null);
+  const downPathRef = useRef(null);
+  const leftPathRef = useRef(null);
+  const rightPathRef = useRef(null);
+  const centerCircleRef = useRef(null);
+  const displayX = customPosition ? customPosition.x : x;
+  const displayY = customPosition ? customPosition.y : y;
   const getKeyCode = useCallback((direction) => {
     if (!controls) {
       const defaults = {
@@ -3114,24 +3287,41 @@ var Dpad = React2.memo(function Dpad2({
     const centerY = rect.top + rect.height / 2;
     const dx = touchX - centerX;
     const dy = touchY - centerY;
-    const deadZone = rect.width * 0.12;
     const distance = Math.sqrt(dx * dx + dy * dy);
+    const deadZone = rect.width / 2 * 0.15;
     if (distance < deadZone) return /* @__PURE__ */ new Set();
     const directions = /* @__PURE__ */ new Set();
     const angle = Math.atan2(dy, dx) * (180 / Math.PI);
-    if (angle >= -157.5 && angle <= -22.5) directions.add("up");
-    if (angle >= 22.5 && angle <= 157.5) directions.add("down");
-    if (angle >= 112.5 || angle <= -112.5) directions.add("left");
-    if (angle >= -67.5 && angle <= 67.5) directions.add("right");
+    if (angle >= -150 && angle <= -30) directions.add("up");
+    if (angle >= 30 && angle <= 150) directions.add("down");
+    if (angle >= 120 || angle <= -120) directions.add("left");
+    if (angle >= -60 && angle <= 60) directions.add("right");
     return directions;
   }, []);
   const updateVisuals = useCallback((directions) => {
-    const activeColor = systemColor;
-    const inactiveColor = "#1a1a1a";
-    if (upRef.current) upRef.current.style.fill = directions.has("up") ? activeColor : inactiveColor;
-    if (downRef.current) downRef.current.style.fill = directions.has("down") ? activeColor : inactiveColor;
-    if (leftRef.current) leftRef.current.style.fill = directions.has("left") ? activeColor : inactiveColor;
-    if (rightRef.current) rightRef.current.style.fill = directions.has("right") ? activeColor : inactiveColor;
+    const activeFill = `${systemColor}80`;
+    const inactiveFill = "rgba(255, 255, 255, 0.05)";
+    const activeStroke = systemColor;
+    const inactiveStroke = "rgba(255, 255, 255, 0.2)";
+    const glow = `0 0 15px ${systemColor}`;
+    const updatePart = (ref, isActive) => {
+      if (ref.current) {
+        ref.current.style.fill = isActive ? activeFill : inactiveFill;
+        ref.current.style.stroke = isActive ? activeStroke : inactiveStroke;
+        ref.current.style.filter = isActive ? `drop-shadow(${glow})` : "none";
+        ref.current.style.transform = isActive ? "scale(0.98)" : "scale(1)";
+        ref.current.style.transformOrigin = "center";
+      }
+    };
+    updatePart(upPathRef, directions.has("up"));
+    updatePart(downPathRef, directions.has("down"));
+    updatePart(leftPathRef, directions.has("left"));
+    updatePart(rightPathRef, directions.has("right"));
+    if (centerCircleRef.current) {
+      const isAny = directions.size > 0;
+      centerCircleRef.current.style.fill = isAny ? systemColor : "rgba(0,0,0,0.5)";
+      centerCircleRef.current.style.stroke = isAny ? "#fff" : "rgba(255,255,255,0.3)";
+    }
   }, [systemColor]);
   const updateDirections = useCallback((newDirections) => {
     const prev = activeDirectionsRef.current;
@@ -3153,48 +3343,107 @@ var Dpad = React2.memo(function Dpad2({
     activeDirectionsRef.current = newDirections;
     updateVisuals(newDirections);
   }, [getKeyCode, updateVisuals]);
+  const clearDragTimer = useCallback(() => {
+    if (dragTimerRef.current) {
+      clearTimeout(dragTimerRef.current);
+      dragTimerRef.current = null;
+    }
+  }, []);
+  const startDragging = useCallback((touchX, touchY) => {
+    setIsDragging(true);
+    dragStartRef.current = {
+      x: displayX,
+      y: displayY,
+      touchX,
+      touchY
+    };
+    activeDirectionsRef.current.forEach((dir) => {
+      const keyCode = getKeyCode(dir);
+      if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
+    });
+    activeDirectionsRef.current = /* @__PURE__ */ new Set();
+    updateVisuals(/* @__PURE__ */ new Set());
+    if (navigator.vibrate) navigator.vibrate([10, 30, 10]);
+  }, [displayX, displayY, getKeyCode, updateVisuals]);
   const handleTouchStart = useCallback((e) => {
     e.preventDefault();
-    e.stopPropagation();
-    const touch = e.touches[0];
+    if (activeTouchRef.current !== null) return;
+    const touch = e.changedTouches[0];
     activeTouchRef.current = touch.identifier;
+    touchStartPosRef.current = { x: touch.clientX, y: touch.clientY, time: Date.now() };
     const rect = dpadRef.current?.getBoundingClientRect();
     if (!rect) return;
-    updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
-  }, [getDirectionsFromTouch, updateDirections]);
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const distFromCenter = Math.sqrt(
+      Math.pow(touch.clientX - centerX, 2) + Math.pow(touch.clientY - centerY, 2)
+    );
+    const centerRadius = size * CENTER_TOUCH_RADIUS;
+    if (distFromCenter < centerRadius && onPositionChange) {
+      dragTimerRef.current = setTimeout(() => {
+        startDragging(touch.clientX, touch.clientY);
+      }, DRAG_HOLD_DELAY2);
+    }
+    if (!isDragging) {
+      updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
+    }
+  }, [getDirectionsFromTouch, updateDirections, isDragging, size, onPositionChange, startDragging]);
   const handleTouchMove = useCallback((e) => {
     e.preventDefault();
     let touch = null;
-    for (let i = 0; i < e.touches.length; i++) {
-      if (e.touches[i].identifier === activeTouchRef.current) {
-        touch = e.touches[i];
+    for (let i = 0; i < e.changedTouches.length; i++) {
+      if (e.changedTouches[i].identifier === activeTouchRef.current) {
+        touch = e.changedTouches[i];
         break;
       }
     }
     if (!touch) return;
-    const rect = dpadRef.current?.getBoundingClientRect();
-    if (!rect) return;
-    updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
-  }, [getDirectionsFromTouch, updateDirections]);
+    if (isDragging && onPositionChange) {
+      const deltaX = touch.clientX - dragStartRef.current.touchX;
+      const deltaY = touch.clientY - dragStartRef.current.touchY;
+      const newXPercent = dragStartRef.current.x + deltaX / containerWidth * 100;
+      const newYPercent = dragStartRef.current.y + deltaY / containerHeight * 100;
+      const margin = size / 2 / Math.min(containerWidth, containerHeight) * 100;
+      const constrainedX = Math.max(margin, Math.min(100 - margin, newXPercent));
+      const constrainedY = Math.max(margin, Math.min(100 - margin, newYPercent));
+      onPositionChange(constrainedX, constrainedY);
+    } else {
+      const moveDistance = Math.sqrt(
+        Math.pow(touch.clientX - touchStartPosRef.current.x, 2) + Math.pow(touch.clientY - touchStartPosRef.current.y, 2)
+      );
+      if (moveDistance > 15) {
+        clearDragTimer();
+      }
+      const rect = dpadRef.current?.getBoundingClientRect();
+      if (rect) {
+        updateDirections(getDirectionsFromTouch(touch.clientX, touch.clientY, rect));
+      }
+    }
+  }, [isDragging, onPositionChange, containerWidth, containerHeight, size, getDirectionsFromTouch, updateDirections, clearDragTimer]);
   const handleTouchEnd = useCallback((e) => {
     e.preventDefault();
-    let touchEnded = true;
-    for (let i = 0; i < e.touches.length; i++) {
-      if (e.touches[i].identifier === activeTouchRef.current) {
-        touchEnded = false;
+    clearDragTimer();
+    let touchEnded = false;
+    for (let i = 0; i < e.changedTouches.length; i++) {
+      if (e.changedTouches[i].identifier === activeTouchRef.current) {
+        touchEnded = true;
         break;
       }
     }
     if (touchEnded) {
       activeTouchRef.current = null;
-      activeDirectionsRef.current.forEach((dir) => {
-        const keyCode = getKeyCode(dir);
-        if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
-      });
-      activeDirectionsRef.current = /* @__PURE__ */ new Set();
-      updateVisuals(/* @__PURE__ */ new Set());
+      if (isDragging) {
+        setIsDragging(false);
+      } else {
+        activeDirectionsRef.current.forEach((dir) => {
+          const keyCode = getKeyCode(dir);
+          if (keyCode) dispatchKeyboardEvent("keyup", keyCode);
+        });
+        activeDirectionsRef.current = /* @__PURE__ */ new Set();
+        updateVisuals(/* @__PURE__ */ new Set());
+      }
     }
-  }, [getKeyCode, updateVisuals]);
+  }, [getKeyCode, updateVisuals, isDragging, clearDragTimer]);
   useEffect(() => {
     const dpad = dpadRef.current;
     if (!dpad) return;
@@ -3207,37 +3456,57 @@ var Dpad = React2.memo(function Dpad2({
       dpad.removeEventListener("touchmove", handleTouchMove);
       dpad.removeEventListener("touchend", handleTouchEnd);
       dpad.removeEventListener("touchcancel", handleTouchEnd);
+      clearDragTimer();
     };
-  }, [handleTouchStart, handleTouchMove, handleTouchEnd]);
-  const leftPx = x / 100 * containerWidth - size / 2;
-  const topPx = y / 100 * containerHeight - size / 2;
-  return /* @__PURE__ */ jsx(
+  }, [handleTouchStart, handleTouchMove, handleTouchEnd, clearDragTimer]);
+  const leftPx = displayX / 100 * containerWidth - size / 2;
+  const topPx = displayY / 100 * containerHeight - size / 2;
+  const dUp = "M 35,5 L 65,5 L 65,35 L 50,50 L 35,35 Z";
+  const dRight = "M 65,35 L 95,35 L 95,65 L 65,65 L 50,50 Z";
+  const dDown = "M 65,65 L 65,95 L 35,95 L 35,65 L 50,50 Z";
+  const dLeft = "M 35,65 L 5,65 L 5,35 L 35,35 L 50,50 Z";
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: dpadRef,
-      className: "absolute pointer-events-auto touch-manipulation",
+      className: `absolute pointer-events-auto touch-manipulation select-none ${isDragging ? "opacity-60" : ""}`,
       style: {
         top: 0,
         left: 0,
-        transform: `translate3d(${leftPx}px, ${topPx}px, 0)`,
+        transform: `translate3d(${leftPx}px, ${topPx}px, 0)${isDragging ? " scale(1.05)" : ""}`,
         width: size,
         height: size,
-        opacity: isLandscape ? 0.85 : 1,
+        opacity: isLandscape ? 0.75 : 0.9,
         WebkitTouchCallout: "none",
-        userSelect: "none"
+        WebkitUserSelect: "none",
+        touchAction: "none",
+        transition: isDragging ? "none" : "transform 0.1s ease-out"
       },
-      onContextMenu: (e) => e.preventDefault(),
-      children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 100 100", children: [
-        /* @__PURE__ */ jsx("rect", { ref: upRef, x: "35", y: "5", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { ref: downRef, x: "35", y: "65", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { ref: leftRef, x: "5", y: "35", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { ref: rightRef, x: "65", y: "35", width: "30", height: "30", rx: "4", fill: "#1a1a1a", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("rect", { x: "35", y: "35", width: "30", height: "30", fill: "#000", stroke: "white", strokeWidth: "2" }),
-        /* @__PURE__ */ jsx("text", { x: "50", y: "25", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2191" }),
-        /* @__PURE__ */ jsx("text", { x: "50", y: "85", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2193" }),
-        /* @__PURE__ */ jsx("text", { x: "20", y: "55", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2190" }),
-        /* @__PURE__ */ jsx("text", { x: "80", y: "55", textAnchor: "middle", fill: "#fff", fontSize: "14", fontWeight: "bold", children: "\u2192" })
-      ] })
+      children: [
+        /* @__PURE__ */ jsx("div", { className: `absolute inset-0 rounded-full bg-black/40 backdrop-blur-md border shadow-lg ${isDragging ? "border-white/50 ring-2 ring-white/30" : "border-white/10"}` }),
+        /* @__PURE__ */ jsxs("svg", { width: "100%", height: "100%", viewBox: "0 0 100 100", className: "drop-shadow-xl relative z-10", children: [
+          /* @__PURE__ */ jsx("path", { ref: upPathRef, d: dUp, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
+          /* @__PURE__ */ jsx("path", { ref: rightPathRef, d: dRight, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
+          /* @__PURE__ */ jsx("path", { ref: downPathRef, d: dDown, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
+          /* @__PURE__ */ jsx("path", { ref: leftPathRef, d: dLeft, fill: "rgba(255,255,255,0.05)", stroke: "rgba(255,255,255,0.2)", strokeWidth: "1", className: "transition-all duration-75" }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              ref: centerCircleRef,
+              cx: "50",
+              cy: "50",
+              r: "12",
+              fill: isDragging ? systemColor : "rgba(0,0,0,0.5)",
+              stroke: isDragging ? "#fff" : "rgba(255,255,255,0.3)",
+              strokeWidth: isDragging ? 2 : 1
+            }
+          ),
+          /* @__PURE__ */ jsx("path", { d: "M 50,15 L 50,25 M 45,20 L 50,15 L 55,20", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" }),
+          /* @__PURE__ */ jsx("path", { d: "M 50,85 L 50,75 M 45,80 L 50,85 L 55,80", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" }),
+          /* @__PURE__ */ jsx("path", { d: "M 15,50 L 25,50 M 20,45 L 15,50 L 20,55", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" }),
+          /* @__PURE__ */ jsx("path", { d: "M 85,50 L 75,50 M 80,45 L 85,50 L 80,55", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", opacity: "0.8", pointerEvents: "none" })
+        ] })
+      ]
     }
   );
 });
@@ -3323,6 +3592,72 @@ function useButtonPositions() {
     resetPositions
   };
 }
+var STORAGE_KEY2 = "koin-controls-hint-shown";
+function ControlsHint({ isVisible }) {
+  const [show, setShow] = useState(false);
+  useEffect(() => {
+    if (!isVisible) return;
+    try {
+      const wasShown = sessionStorage.getItem(STORAGE_KEY2);
+      if (!wasShown) {
+        const timer = setTimeout(() => setShow(true), 1500);
+        return () => clearTimeout(timer);
+      }
+    } catch {
+    }
+  }, [isVisible]);
+  const handleDismiss = () => {
+    setShow(false);
+    try {
+      sessionStorage.setItem(STORAGE_KEY2, "true");
+    } catch {
+    }
+  };
+  if (!show) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[100] flex items-center justify-center bg-black/60 backdrop-blur-sm",
+      onClick: handleDismiss,
+      onTouchEnd: handleDismiss,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: "bg-black/90 border border-white/30 rounded-2xl p-6 mx-4 max-w-sm text-center shadow-2xl pointer-events-auto",
+          onClick: (e) => e.stopPropagation(),
+          onTouchEnd: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-green-500/20 border-2 border-green-400 flex items-center justify-center", children: /* @__PURE__ */ jsx(Move, { size: 32, className: "text-green-400" }) }) }),
+            /* @__PURE__ */ jsx("h3", { className: "text-white text-lg font-bold mb-2", children: "Customize Your Controls" }),
+            /* @__PURE__ */ jsxs("p", { className: "text-white/70 text-sm mb-4", children: [
+              /* @__PURE__ */ jsx("strong", { className: "text-white", children: "Long-press" }),
+              " any button or the ",
+              /* @__PURE__ */ jsx("strong", { className: "text-white", children: "D-pad center" }),
+              " to drag and reposition it."
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "text-white/50 text-xs mb-4", children: "Your layout is saved separately for portrait and landscape modes." }),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: (e) => {
+                  e.stopPropagation();
+                  handleDismiss();
+                },
+                onTouchEnd: (e) => {
+                  e.stopPropagation();
+                  handleDismiss();
+                },
+                className: "w-full py-3 px-4 bg-green-500 hover:bg-green-400 active:bg-green-600 text-black font-bold rounded-xl transition-colors flex items-center justify-center gap-2 cursor-pointer touch-manipulation",
+                children: "Got it!"
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
 function VirtualController({
   system,
   isRunning,
@@ -3343,7 +3678,6 @@ function VirtualController({
     return btn.showInLandscape;
   });
   const DPAD_TYPES = ["up", "down", "left", "right"];
-  const dpadButtons = visibleButtons.filter((btn) => DPAD_TYPES.includes(btn.type));
   useEffect(() => {
     const updateSize = () => {
       const { width, height } = getViewportSize();
@@ -3393,7 +3727,7 @@ function VirtualController({
     },
     [controls]
   );
-  const SYSTEM_BUTTONS2 = ["start", "select"];
+  const SYSTEM_BUTTONS2 = ["start", "select", "menu"];
   const handlePress = useCallback(
     (buttonType) => {
       const isSystemButton = SYSTEM_BUTTONS2.includes(buttonType);
@@ -3481,26 +3815,28 @@ function VirtualController({
   if (!isMobile) {
     return null;
   }
-  if (visibleButtons.length === 0) {
-    return null;
-  }
+  const dpadSize = containerSize.width > containerSize.height ? 160 : 180;
+  const dpadY = containerSize.width > containerSize.height ? 55 : 62;
+  const finalDpadY = system.toUpperCase() === "NEOGEO" ? dpadY - 5 : dpadY;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: "fixed inset-0 z-30 pointer-events-none",
       style: { touchAction: "none" },
       children: [
-        dpadButtons.length > 0 && /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(
           Dpad_default,
           {
-            size: containerSize.width > containerSize.height ? 120 : 130,
-            x: 12,
-            y: containerSize.width > containerSize.height ? 52 : 62,
+            size: dpadSize,
+            x: 14,
+            y: finalDpadY,
             containerWidth: containerSize.width || window.innerWidth,
             containerHeight: containerSize.height || window.innerHeight,
             controls,
             systemColor,
-            isLandscape
+            isLandscape,
+            customPosition: getPosition("up", isLandscape),
+            onPositionChange: (x, y) => savePosition("up", x, y, isLandscape)
           }
         ),
         memoizedButtonElements.filter(({ buttonConfig }) => !DPAD_TYPES.includes(buttonConfig.type)).map(({ buttonConfig, adjustedConfig, customPosition, width, height }) => /* @__PURE__ */ jsx(
@@ -3516,64 +3852,77 @@ function VirtualController({
             customPosition,
             onPositionChange: (x, y) => savePosition(buttonConfig.type, x, y, isLandscape),
             isLandscape,
-            systemColor
+            console: layout.console
           },
           buttonConfig.type
-        ))
+        )),
+        /* @__PURE__ */ jsx(ControlsHint, { isVisible: isRunning })
       ]
     }
   );
 }
 function FloatingExitButton({ onClick, disabled = false }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick,
       disabled,
       className: `
-                fixed top-3 left-1/2 -translate-x-1/2 z-50
-                w-11 h-11 rounded-lg
-                bg-black/90 backdrop-blur-sm
-                border-2 border-white/80
-                shadow-lg
-                flex items-center justify-center
-                transition-all duration-200
+                fixed top-3 right-3 z-50
+                px-3 py-2 rounded-xl
+                bg-black/80 backdrop-blur-md
+                border-2 border-red-400/60
+                shadow-xl
+                flex items-center gap-2
+                transition-all duration-300
                 hover:bg-red-600/30 hover:border-red-400 hover:scale-105
                 active:scale-95
                 disabled:opacity-40 disabled:cursor-not-allowed
                 touch-manipulation
             `,
       style: {
-        paddingTop: "env(safe-area-inset-top, 0px)"
+        paddingTop: "max(env(safe-area-inset-top, 0px), 8px)"
       },
       "aria-label": "Exit fullscreen",
-      title: "Exit fullscreen",
-      children: /* @__PURE__ */ jsx(X, { size: 22, className: "text-white" })
+      children: [
+        /* @__PURE__ */ jsx(X, { size: 16, className: "text-red-400" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider", children: "Exit" }),
+        /* @__PURE__ */ jsx(Minimize2, { size: 14, className: "text-white/60" })
+      ]
     }
   );
 }
 function FloatingFullscreenButton({ onClick, disabled = false }) {
-  return /* @__PURE__ */ jsx(
+  const [pulse, setPulse] = useState(true);
+  useEffect(() => {
+    const timer = setTimeout(() => setPulse(false), 5e3);
+    return () => clearTimeout(timer);
+  }, []);
+  return /* @__PURE__ */ jsxs(
     "button",
     {
       onClick,
       disabled,
       className: `
                 absolute top-3 left-3 z-50
-                w-9 h-9 rounded-lg
-                bg-black/70 backdrop-blur-sm
-                border-2 border-white/50
-                shadow-md
-                flex items-center justify-center
-                transition-all duration-200
-                hover:bg-white/20 hover:border-white
+                px-3 py-2 rounded-xl
+                bg-black/80 backdrop-blur-md
+                border-2 border-white/60
+                shadow-xl
+                flex items-center gap-2
+                transition-all duration-300
+                hover:bg-white/20 hover:border-white hover:scale-105
                 active:scale-95
                 disabled:opacity-40 disabled:cursor-not-allowed
                 touch-manipulation
+                ${pulse ? "animate-pulse border-green-400/80" : ""}
             `,
-      "aria-label": "Enter fullscreen",
-      title: "Enter fullscreen",
-      children: /* @__PURE__ */ jsx(Maximize, { size: 16, className: "text-white/80" })
+      "aria-label": "Tap for fullscreen controls",
+      children: [
+        /* @__PURE__ */ jsx(Gamepad2, { size: 18, className: "text-green-400" }),
+        /* @__PURE__ */ jsx("span", { className: "text-white text-xs font-bold uppercase tracking-wider whitespace-nowrap", children: "Tap for Controls" }),
+        /* @__PURE__ */ jsx(Maximize, { size: 14, className: "text-white/60" })
+      ]
     }
   );
 }
@@ -7889,7 +8238,7 @@ function useGamePlayer(props) {
     recordingSupported
   };
 }
-var STORAGE_KEY2 = "koin-player-settings";
+var STORAGE_KEY3 = "koin-player-settings";
 var DEFAULT_SETTINGS = {
   volume: 1,
   muted: false,
@@ -7902,7 +8251,7 @@ function usePlayerPersistence(onSettingsChange) {
   const [isLoaded, setIsLoaded] = useState(false);
   useEffect(() => {
     try {
-      const stored = localStorage.getItem(STORAGE_KEY2);
+      const stored = localStorage.getItem(STORAGE_KEY3);
       if (stored) {
         const parsed = JSON.parse(stored);
         setSettings((prev) => ({ ...prev, ...parsed }));
@@ -7916,7 +8265,7 @@ function usePlayerPersistence(onSettingsChange) {
     setSettings((prev) => {
       const next = { ...prev, ...updates };
       try {
-        localStorage.setItem(STORAGE_KEY2, JSON.stringify(next));
+        localStorage.setItem(STORAGE_KEY3, JSON.stringify(next));
       } catch (e) {
         console.error("Failed to save player settings", e);
       }
@@ -9128,6 +9477,6 @@ var ShortcutsReference = memo(function ShortcutsReference2({
 });
 var ShortcutsReference_default = ShortcutsReference;
 
-export { ALL_BUTTONS, AchievementPopup, BUTTON_GROUPS, BUTTON_LABELS, CONSOLE_CAPABILITIES, CONSOLE_KEYBOARD_OVERRIDES, DEFAULT_CONTROLS, DEFAULT_GAMEPAD, DEFAULT_KEYBOARD, DPAD_BUTTONS, FACE_BUTTONS, GamePlayer_default as GamePlayer, KoinI18nProvider, PERFORMANCE_TIER_1_SYSTEMS, PERFORMANCE_TIER_2_SYSTEMS, RASidebar, RA_MEDIA_BASE, SHADER_PRESETS, SHOULDER_BUTTONS, STANDARD_AXIS_MAP, STANDARD_GAMEPAD_BUTTONS, STICK_BUTTONS, SUPPORTED_EXTENSIONS, SYSTEMS, SYSTEM_BUTTONS, ShaderSelector_default as ShaderSelector, ShortcutsReference_default as ShortcutsReference, TRIGGER_BUTTONS, ToastContainer, buildRetroArchConfig, clearAllControls, consoleHasButton, detectControllerBrand, detectSystem, en, es, fetchAndCacheRom, formatGamepadButton, formatKeyCode, fr, gamepadToRetroArchConfig, getAchievementBadgeUrl, getCachedRom, getConsoleButtons, getConsoleCapabilities, getConsoleKeyboardDefaults, getCore, getDBSystemNames, getFullGamepadMapping, getFullKeyboardMapping, getSupportedExtensions, getSystem, getSystemByDbName, getSystemByKey, getSystemFromExtension, getSystemsList, getUserAvatarUrl, isSystemSupported, keyboardToRetroArchConfig, loadAllGamepadMappings, loadGamepadMapping, loadKeyboardMapping, normalizeSystemKey, saveGamepadMapping, saveKeyboardMapping, systemsMatch, useGameRecording, useGamepad, useKoinTranslation, useNostalgist, useToast };
+export { ALL_BUTTONS, AchievementPopup, BUTTON_GROUPS, BUTTON_LABELS, CONSOLE_CAPABILITIES, CONSOLE_KEYBOARD_OVERRIDES, DEFAULT_CONTROLS, DEFAULT_GAMEPAD, DEFAULT_KEYBOARD, DPAD_BUTTONS2 as DPAD_BUTTONS, FACE_BUTTONS, GamePlayer_default as GamePlayer, KoinI18nProvider, PERFORMANCE_TIER_1_SYSTEMS, PERFORMANCE_TIER_2_SYSTEMS, RASidebar, RA_MEDIA_BASE, SHADER_PRESETS, SHOULDER_BUTTONS, STANDARD_AXIS_MAP, STANDARD_GAMEPAD_BUTTONS, STICK_BUTTONS, SUPPORTED_EXTENSIONS, SYSTEMS, SYSTEM_BUTTONS, ShaderSelector_default as ShaderSelector, ShortcutsReference_default as ShortcutsReference, TRIGGER_BUTTONS, ToastContainer, buildRetroArchConfig, clearAllControls, consoleHasButton, detectControllerBrand, detectSystem, en, es, fetchAndCacheRom, formatGamepadButton, formatKeyCode, fr, gamepadToRetroArchConfig, getAchievementBadgeUrl, getCachedRom, getConsoleButtons, getConsoleCapabilities, getConsoleKeyboardDefaults, getCore, getDBSystemNames, getFullGamepadMapping, getFullKeyboardMapping, getSupportedExtensions, getSystem, getSystemByDbName, getSystemByKey, getSystemFromExtension, getSystemsList, getUserAvatarUrl, isSystemSupported, keyboardToRetroArchConfig, loadAllGamepadMappings, loadGamepadMapping, loadKeyboardMapping, normalizeSystemKey, saveGamepadMapping, saveKeyboardMapping, systemsMatch, useGameRecording, useGamepad, useKoinTranslation, useNostalgist, useToast };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map