chore: update deps

gbajs3/src/App.tsx

@@ -10,10 +10,10 @@ import { PwaPrompt } from './components/pwa-prompt/pwa-prompt.tsx';
 import { Screen } from './components/screen/screen.tsx';
 import { AppErrorBoundary } from './components/shared/error-boundary.tsx';
 import { ToasterWithDefaults } from './components/toast/toaster.tsx';
-import { AuthProvider } from './context/auth/auth.tsx';
+import { AuthProvider } from './context/auth/auth-provider.tsx';
 import { EmulatorContextProvider } from './context/emulator/emulator-context-provider.tsx';
-import { LayoutProvider } from './context/layout/layout.tsx';
-import { ModalProvider } from './context/modal/modal.tsx';
+import { LayoutProvider } from './context/layout/layout-provider.tsx';
+import { ModalProvider } from './context/modal/modal-provider.tsx';
 import { GbaDarkTheme } from './context/theme/theme.tsx';
 
 export const App = () => {

gbajs3/src/components/modals/controls/control-profiles.tsx

@@ -9,7 +9,7 @@ import { useLayoutContext } from '../../../hooks/context.tsx';
 import { virtualControlProfilesLocalStorageKey } from '../../controls/consts.tsx';
 import { CenteredText, StyledBiPlus } from '../../shared/styled.tsx';
 
-import type { Layouts } from '../../../context/layout/layout.tsx';
+import type { Layouts } from '../../../context/layout/layout-context.tsx';
 import type { IconButtonProps } from '@mui/material';
 import type { ReactNode } from 'react';
 

gbajs3/src/context/auth/auth-context.tsx

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+
+import type { Dispatch, SetStateAction } from 'react';
+
+export type AccessTokenSource = 'refresh' | 'login' | null;
+
+export type AuthContextProps = {
+  accessToken: string | null;
+  setAccessToken: Dispatch<SetStateAction<string | null>>;
+  setAccessTokenSource: Dispatch<SetStateAction<AccessTokenSource | null>>;
+  isAuthenticated: () => boolean;
+};
+
+export const AuthContext = createContext<AuthContextProps | null>(null);
+
+AuthContext.displayName = 'AuthContext';

gbajs3/src/context/auth/auth.tsx → gbajs3/src/context/auth/auth-provider.tsx

@@ -1,32 +1,16 @@
 import { jwtDecode, type JwtPayload } from 'jwt-decode';
-import {
-  createContext,
-  useState,
-  useEffect,
-  useCallback,
-  type ReactNode,
-  type SetStateAction,
-  type Dispatch
-} from 'react';
+import { useState, useEffect, useCallback, type ReactNode } from 'react';
 import { useInterval } from 'usehooks-ts';
 
+import {
+  AuthContext,
+  type AuthContextProps,
+  type AccessTokenSource
+} from './auth-context.tsx';
 import { useRefreshAccessToken } from '../../hooks/use-refresh.tsx';
 
-type AccessTokenSource = 'refresh' | 'login' | null;
-
-type AuthContextProps = {
-  accessToken: string | null;
-  setAccessToken: Dispatch<SetStateAction<string | null>>;
-  setAccessTokenSource: Dispatch<SetStateAction<AccessTokenSource | null>>;
-  isAuthenticated: () => boolean;
-};
-
 type AuthProviderProps = { children: ReactNode };
 
-export const AuthContext = createContext<AuthContextProps | null>(null);
-
-AuthContext.displayName = 'AuthContext';
-
 export const AuthProvider = ({ children }: AuthProviderProps) => {
   const fourMinutesInMS = 240 * 1000;
   const hasApiLocation = !!import.meta.env.VITE_GBA_SERVER_LOCATION;

gbajs3/src/context/emulator/contexts/drag-context.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+import type { Dispatch, SetStateAction } from 'react';
+
+type DragContextProps = {
+  areItemsDraggable: boolean;
+  setAreItemsDraggable: Dispatch<SetStateAction<boolean>>;
+};
+
+export const DragContext = createContext<DragContextProps | null>(null);
+
+DragContext.displayName = 'DragContext';

gbajs3/src/context/emulator/contexts/emulator-context.tsx

@@ -0,0 +1,14 @@
+import { createContext } from 'react';
+
+import type { GBAEmulator } from '../../../emulator/mgba/mgba-emulator';
+import type { Dispatch, SetStateAction } from 'react';
+
+type EmulatorContextProps = {
+  emulator: GBAEmulator | null;
+  canvas: HTMLCanvasElement | null;
+  setCanvas: Dispatch<SetStateAction<HTMLCanvasElement | null>>;
+};
+
+export const EmulatorContext = createContext<EmulatorContextProps | null>(null);
+
+EmulatorContext.displayName = 'EmulatorContext';

gbajs3/src/context/emulator/contexts/resize-context.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+import type { Dispatch, SetStateAction } from 'react';
+
+type ResizeContextProps = {
+  areItemsResizable: boolean;
+  setAreItemsResizable: Dispatch<SetStateAction<boolean>>;
+};
+
+export const ResizeContext = createContext<ResizeContextProps | null>(null);
+
+ResizeContext.displayName = 'ResizeContext';

gbajs3/src/context/emulator/contexts/running-context.tsx

@@ -0,0 +1,12 @@
+import { createContext } from 'react';
+
+import type { Dispatch, SetStateAction} from 'react';
+
+type RunningContextProps = {
+  isRunning: boolean;
+  setIsRunning: Dispatch<SetStateAction<boolean>>;
+};
+
+export const RunningContext = createContext<RunningContextProps | null>(null);
+
+RunningContext.displayName = 'RunningContext';

gbajs3/src/context/emulator/emulator-context-provider.tsx

@@ -1,7 +1,7 @@
-import { DragProvider } from './drag.tsx';
-import { EmulatorProvider } from './emulator.tsx';
-import { ResizeProvider } from './resize.tsx';
-import { RunningProvider } from './running.tsx';
+import { DragProvider } from './providers/drag-provider.tsx';
+import { EmulatorProvider } from './providers/emulator-provider.tsx';
+import { ResizeProvider } from './providers/resize-provider.tsx';
+import { RunningProvider } from './providers/running-provider.tsx';
 
 import type { ReactNode } from 'react';
 

gbajs3/src/context/emulator/providers/drag-provider.tsx

@@ -0,0 +1,17 @@
+import { useState, type ReactNode } from 'react';
+
+import { DragContext } from '../contexts/drag-context.tsx';
+
+type DragProviderProps = {
+  children: ReactNode;
+};
+
+export const DragProvider = ({ children }: DragProviderProps) => {
+  const [areItemsDraggable, setAreItemsDraggable] = useState(false);
+
+  return (
+    <DragContext.Provider value={{ areItemsDraggable, setAreItemsDraggable }}>
+      {children}
+    </DragContext.Provider>
+  );
+};

gbajs3/src/context/emulator/providers/emulator-provider.tsx

@@ -0,0 +1,19 @@
+import { useState, type ReactNode } from 'react';
+
+import { useEmulator } from '../../../hooks/use-emulator.tsx';
+import { EmulatorContext } from '../contexts/emulator-context.tsx';
+
+type EmulatorProviderProps = {
+  children: ReactNode;
+};
+
+export const EmulatorProvider = ({ children }: EmulatorProviderProps) => {
+  const [canvas, setCanvas] = useState<HTMLCanvasElement | null>(null);
+  const emulator = useEmulator(canvas);
+
+  return (
+    <EmulatorContext.Provider value={{ emulator, canvas, setCanvas }}>
+      {children}
+    </EmulatorContext.Provider>
+  );
+};

gbajs3/src/context/emulator/providers/resize-provider.tsx

@@ -0,0 +1,17 @@
+import { useState, type ReactNode } from 'react';
+
+import { ResizeContext } from '../contexts/resize-context.tsx';
+
+type ResizeProviderProps = {
+  children: ReactNode;
+};
+
+export const ResizeProvider = ({ children }: ResizeProviderProps) => {
+  const [areItemsResizable, setAreItemsResizable] = useState(false);
+
+  return (
+    <ResizeContext.Provider value={{ areItemsResizable, setAreItemsResizable }}>
+      {children}
+    </ResizeContext.Provider>
+  );
+};

gbajs3/src/context/emulator/providers/running-provider.tsx

@@ -0,0 +1,17 @@
+import { useState, type ReactNode } from 'react';
+
+import { RunningContext } from '../contexts/running-context.tsx';
+
+type RunningProviderProps = {
+  children: ReactNode;
+};
+
+export const RunningProvider = ({ children }: RunningProviderProps) => {
+  const [isRunning, setIsRunning] = useState(false);
+
+  return (
+    <RunningContext.Provider value={{ isRunning, setIsRunning }}>
+      {children}
+    </RunningContext.Provider>
+  );
+};

gbajs3/src/context/layout/layout-context.tsx

@@ -0,0 +1,23 @@
+import { createContext } from 'react';
+
+export type Layout = {
+  position?: { x: number; y: number };
+  size?: { width: string | number; height: string | number };
+  initialBounds?: DOMRect;
+};
+
+export type Layouts = {
+  [key: string]: Layout;
+};
+
+export type LayoutContextProps = {
+  layouts: Layouts;
+  hasSetLayout: boolean;
+  clearLayouts: () => void;
+  setLayout: (layoutKey: string, layout: Layout) => void;
+  setLayouts: (layouts: Layouts) => void;
+};
+
+export const LayoutContext = createContext<LayoutContextProps | null>(null);
+
+LayoutContext.displayName = 'LayoutContext';