From 7d22c49df5c16c7a776eaf9d5d72722a11fb4cba Mon Sep 17 00:00:00 2001
From: KBCats <kbpiscool@gmail.com>
Date: Sun, 15 Mar 2026 18:12:38 -0700
Subject: [PATCH] fix(editor): polish cursor sway and HUD capture controls

Keep the recording HUD visible on screen without burning it into captures, and make cursor sway match cursor motion while preserving the old 2x strength at the new 1x slider position.
---
 electron/electron-env.d.ts                    |  336 ++-
 electron/preload.ts                           |  384 +--
 electron/windows.ts                           |  291 +--
 src/components/launch/LaunchWindow.tsx        |  706 +++---
 src/components/video-editor/SettingsPanel.tsx | 2137 ++++++++---------
 .../videoPlayback/cursorSway.test.ts          |   50 +-
 .../video-editor/videoPlayback/cursorSway.ts  |   62 +-
 src/i18n/locales/en/launch.json               |    2 +
 src/i18n/locales/es/launch.json               |    2 +
 src/i18n/locales/zh-CN/launch.json            |    2 +
 src/vite-env.d.ts                             |  361 +--
 11 files changed, 2279 insertions(+), 2054 deletions(-)

diff --git a/electron/electron-env.d.ts b/electron/electron-env.d.ts
index f859957d..cf5c2e88 100644
--- a/electron/electron-env.d.ts
+++ b/electron/electron-env.d.ts
@@ -1,116 +1,220 @@
-/// <reference types="vite-plugin-electron/electron-env" />
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    /**
-     * The built directory structure
-     *
-     * ```tree
-     * ├─┬─┬ dist
-     * │ │ └── index.html
-     * │ │
-     * │ ├─┬ dist-electron
-     * │ │ ├── main.js
-     * │ │ └── preload.js
-     * │
-     * ```
-     */
-    APP_ROOT: string
-    /** /dist/ or /public/ */
-    VITE_PUBLIC: string
-  }
-}
-
-// Used in Renderer process, expose in `preload.ts`
-interface Window {
-  electronAPI: {
-    getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>
-    switchToEditor: () => Promise<void>
-    openSourceSelector: () => Promise<void>
-    selectSource: (source: any) => Promise<any>
-    getSelectedSource: () => Promise<any>
-    startNativeScreenRecording: (
-      source: any,
-      options?: {
-        capturesSystemAudio?: boolean
-        capturesMicrophone?: boolean
-        microphoneDeviceId?: string
-        microphoneLabel?: string
-      }
-    ) => Promise<{ success: boolean; path?: string; message?: string; error?: string }>
-    stopNativeScreenRecording: () => Promise<{ success: boolean; path?: string; message?: string; error?: string }>
-    startFfmpegRecording: (source: any) => Promise<{ success: boolean; path?: string; message?: string; error?: string }>
-    stopFfmpegRecording: () => Promise<{ success: boolean; path?: string; message?: string; error?: string }>
-    storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => Promise<{ success: boolean; path?: string; message?: string }>
-    getRecordedVideoPath: () => Promise<{ success: boolean; path?: string; message?: string }>
-    readLocalFile: (filePath: string) => Promise<{ success: boolean; data?: Uint8Array; error?: string }>
-    setRecordingState: (recording: boolean) => Promise<void>
-    getCursorTelemetry: (videoPath?: string) => Promise<{ success: boolean; samples: CursorTelemetryPoint[]; message?: string; error?: string }>
-    getSystemCursorAssets: () => Promise<{ success: boolean; cursors: Record<string, SystemCursorAsset>; error?: string }>
-    onStopRecordingFromTray: (callback: () => void) => () => void
-    onRecordingStateChanged: (callback: (state: { recording: boolean; sourceName: string }) => void) => () => void
-    onRecordingInterrupted: (callback: (state: { reason: string; message: string }) => void) => () => void
-    onCursorStateChanged: (callback: (state: { cursorType: CursorTelemetryPoint['cursorType'] }) => void) => () => void
-    openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>
-    getAccessibilityPermissionStatus: () => Promise<{ success: boolean; trusted: boolean; prompted: boolean; error?: string }>
-    requestAccessibilityPermission: () => Promise<{ success: boolean; trusted: boolean; prompted: boolean; error?: string }>
-    getScreenRecordingPermissionStatus: () => Promise<{ success: boolean; status: string; error?: string }>
-    openScreenRecordingPreferences: () => Promise<{ success: boolean; error?: string }>
-    openAccessibilityPreferences: () => Promise<{ success: boolean; error?: string }>
-    saveExportedVideo: (videoData: ArrayBuffer, fileName: string) => Promise<{ success: boolean; path?: string; message?: string; canceled?: boolean }>
-    openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>
-    setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>
-    getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>
-    clearCurrentVideoPath: () => Promise<{ success: boolean }>
-    saveProjectFile: (projectData: unknown, suggestedName?: string, existingProjectPath?: string) => Promise<{ success: boolean; path?: string; message?: string; canceled?: boolean; error?: string }>
-    loadProjectFile: () => Promise<{ success: boolean; path?: string; project?: unknown; message?: string; canceled?: boolean; error?: string }>
-    loadCurrentProjectFile: () => Promise<{ success: boolean; path?: string; project?: unknown; message?: string; canceled?: boolean; error?: string }>
-    onMenuLoadProject: (callback: () => void) => () => void
-    onMenuSaveProject: (callback: () => void) => () => void
-    onMenuSaveProjectAs: (callback: () => void) => () => void
-    getPlatform: () => Promise<string>
-    revealInFolder: (filePath: string) => Promise<{ success: boolean; error?: string; message?: string }>,
-    openRecordingsFolder: () => Promise<{ success: boolean; error?: string; message?: string }>,
-    getRecordingsDirectory: () => Promise<{ success: boolean; path: string; isDefault: boolean; error?: string }>
-    chooseRecordingsDirectory: () => Promise<{ success: boolean; canceled?: boolean; path?: string; isDefault?: boolean; message?: string; error?: string }>
-    getShortcuts: () => Promise<Record<string, unknown> | null>
-    saveShortcuts: (shortcuts: unknown) => Promise<{ success: boolean; error?: string }>
-    hudOverlayHide: () => void;
-    hudOverlayClose: () => void;
-    setHasUnsavedChanges: (hasChanges: boolean) => void
-    onRequestSaveBeforeClose: (callback: () => Promise<void>) => () => void
-    isWgcAvailable: () => Promise<{ available: boolean }>
-    muxWgcRecording: () => Promise<{ success: boolean; path?: string; message?: string; error?: string }>
-    /** Hide the OS cursor before browser capture starts. */
-    hideOsCursor: () => Promise<{ success: boolean }>
-  }
-}
-
-interface ProcessedDesktopSource {
-  id: string
-  name: string
-  display_id: string
-  thumbnail: string | null
-  appIcon: string | null
-  originalName?: string
-  sourceType?: 'screen' | 'window'
-  appName?: string
-  windowTitle?: string
-}
-
-interface CursorTelemetryPoint {
-  timeMs: number
-  cx: number
-  cy: number
-  interactionType?: 'move' | 'click' | 'double-click' | 'right-click' | 'middle-click' | 'mouseup'
-  cursorType?: 'arrow' | 'text' | 'pointer' | 'crosshair' | 'open-hand' | 'closed-hand' | 'resize-ew' | 'resize-ns' | 'not-allowed'
-}
-
-interface SystemCursorAsset {
-  dataUrl: string
-  hotspotX: number
-  hotspotY: number
-  width: number
-  height: number
-}
-
+/// <reference types="vite-plugin-electron/electron-env" />
+
+declare namespace NodeJS {
+	interface ProcessEnv {
+		/**
+		 * The built directory structure
+		 *
+		 * ```tree
+		 * ├─┬─┬ dist
+		 * │ │ └── index.html
+		 * │ │
+		 * │ ├─┬ dist-electron
+		 * │ │ ├── main.js
+		 * │ │ └── preload.js
+		 * │
+		 * ```
+		 */
+		APP_ROOT: string;
+		/** /dist/ or /public/ */
+		VITE_PUBLIC: string;
+	}
+}
+
+// Used in Renderer process, expose in `preload.ts`
+interface Window {
+	electronAPI: {
+		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
+		switchToEditor: () => Promise<void>;
+		openSourceSelector: () => Promise<void>;
+		selectSource: (source: any) => Promise<any>;
+		getSelectedSource: () => Promise<any>;
+		startNativeScreenRecording: (
+			source: any,
+			options?: {
+				capturesSystemAudio?: boolean;
+				capturesMicrophone?: boolean;
+				microphoneDeviceId?: string;
+				microphoneLabel?: string;
+			},
+		) => Promise<{ success: boolean; path?: string; message?: string; error?: string }>;
+		stopNativeScreenRecording: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		startFfmpegRecording: (
+			source: any,
+		) => Promise<{ success: boolean; path?: string; message?: string; error?: string }>;
+		stopFfmpegRecording: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		storeRecordedVideo: (
+			videoData: ArrayBuffer,
+			fileName: string,
+		) => Promise<{ success: boolean; path?: string; message?: string }>;
+		getRecordedVideoPath: () => Promise<{ success: boolean; path?: string; message?: string }>;
+		readLocalFile: (
+			filePath: string,
+		) => Promise<{ success: boolean; data?: Uint8Array; error?: string }>;
+		setRecordingState: (recording: boolean) => Promise<void>;
+		getCursorTelemetry: (videoPath?: string) => Promise<{
+			success: boolean;
+			samples: CursorTelemetryPoint[];
+			message?: string;
+			error?: string;
+		}>;
+		getSystemCursorAssets: () => Promise<{
+			success: boolean;
+			cursors: Record<string, SystemCursorAsset>;
+			error?: string;
+		}>;
+		onStopRecordingFromTray: (callback: () => void) => () => void;
+		onRecordingStateChanged: (
+			callback: (state: { recording: boolean; sourceName: string }) => void,
+		) => () => void;
+		onRecordingInterrupted: (
+			callback: (state: { reason: string; message: string }) => void,
+		) => () => void;
+		onCursorStateChanged: (
+			callback: (state: { cursorType: CursorTelemetryPoint["cursorType"] }) => void,
+		) => () => void;
+		openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>;
+		getAccessibilityPermissionStatus: () => Promise<{
+			success: boolean;
+			trusted: boolean;
+			prompted: boolean;
+			error?: string;
+		}>;
+		requestAccessibilityPermission: () => Promise<{
+			success: boolean;
+			trusted: boolean;
+			prompted: boolean;
+			error?: string;
+		}>;
+		getScreenRecordingPermissionStatus: () => Promise<{
+			success: boolean;
+			status: string;
+			error?: string;
+		}>;
+		openScreenRecordingPreferences: () => Promise<{ success: boolean; error?: string }>;
+		openAccessibilityPreferences: () => Promise<{ success: boolean; error?: string }>;
+		saveExportedVideo: (
+			videoData: ArrayBuffer,
+			fileName: string,
+		) => Promise<{ success: boolean; path?: string; message?: string; canceled?: boolean }>;
+		openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
+		setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
+		getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
+		clearCurrentVideoPath: () => Promise<{ success: boolean }>;
+		saveProjectFile: (
+			projectData: unknown,
+			suggestedName?: string,
+			existingProjectPath?: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		loadProjectFile: () => Promise<{
+			success: boolean;
+			path?: string;
+			project?: unknown;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		loadCurrentProjectFile: () => Promise<{
+			success: boolean;
+			path?: string;
+			project?: unknown;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		onMenuLoadProject: (callback: () => void) => () => void;
+		onMenuSaveProject: (callback: () => void) => () => void;
+		onMenuSaveProjectAs: (callback: () => void) => () => void;
+		getPlatform: () => Promise<string>;
+		revealInFolder: (
+			filePath: string,
+		) => Promise<{ success: boolean; error?: string; message?: string }>;
+		openRecordingsFolder: () => Promise<{ success: boolean; error?: string; message?: string }>;
+		getRecordingsDirectory: () => Promise<{
+			success: boolean;
+			path: string;
+			isDefault: boolean;
+			error?: string;
+		}>;
+		chooseRecordingsDirectory: () => Promise<{
+			success: boolean;
+			canceled?: boolean;
+			path?: string;
+			isDefault?: boolean;
+			message?: string;
+			error?: string;
+		}>;
+		getShortcuts: () => Promise<Record<string, unknown> | null>;
+		saveShortcuts: (shortcuts: unknown) => Promise<{ success: boolean; error?: string }>;
+		hudOverlayHide: () => void;
+		hudOverlayClose: () => void;
+		getHudOverlayCaptureProtection: () => Promise<{ success: boolean; enabled: boolean }>;
+		setHudOverlayCaptureProtection: (
+			enabled: boolean,
+		) => Promise<{ success: boolean; enabled: boolean }>;
+		setHasUnsavedChanges: (hasChanges: boolean) => void;
+		onRequestSaveBeforeClose: (callback: () => Promise<void>) => () => void;
+		isWgcAvailable: () => Promise<{ available: boolean }>;
+		muxWgcRecording: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		/** Hide the OS cursor before browser capture starts. */
+		hideOsCursor: () => Promise<{ success: boolean }>;
+	};
+}
+
+interface ProcessedDesktopSource {
+	id: string;
+	name: string;
+	display_id: string;
+	thumbnail: string | null;
+	appIcon: string | null;
+	originalName?: string;
+	sourceType?: "screen" | "window";
+	appName?: string;
+	windowTitle?: string;
+}
+
+interface CursorTelemetryPoint {
+	timeMs: number;
+	cx: number;
+	cy: number;
+	interactionType?: "move" | "click" | "double-click" | "right-click" | "middle-click" | "mouseup";
+	cursorType?:
+		| "arrow"
+		| "text"
+		| "pointer"
+		| "crosshair"
+		| "open-hand"
+		| "closed-hand"
+		| "resize-ew"
+		| "resize-ns"
+		| "not-allowed";
+}
+
+interface SystemCursorAsset {
+	dataUrl: string;
+	hotspotX: number;
+	hotspotY: number;
+	width: number;
+	height: number;
+}
diff --git a/electron/preload.ts b/electron/preload.ts
index ebc4fed1..d149dc91 100644
--- a/electron/preload.ts
+++ b/electron/preload.ts
@@ -1,186 +1,204 @@
-import { contextBridge, ipcRenderer } from 'electron'
+import { contextBridge, ipcRenderer } from "electron";
 
-contextBridge.exposeInMainWorld('electronAPI', {
-    hudOverlayHide: () => {
-      ipcRenderer.send('hud-overlay-hide');
-    },
-    hudOverlayClose: () => {
-      ipcRenderer.send('hud-overlay-close');
-    },
-  getAssetBasePath: async () => {
-    // ask main process for the correct base path (production vs dev)
-    return await ipcRenderer.invoke('get-asset-base-path')
-  },
-  readLocalFile: (filePath: string) => {
-    return ipcRenderer.invoke('read-local-file', filePath)
-  },
-  getSources: async (opts: Electron.SourcesOptions) => {
-    return await ipcRenderer.invoke('get-sources', opts)
-  },
-  switchToEditor: () => {
-    return ipcRenderer.invoke('switch-to-editor')
-  },
-  openSourceSelector: () => {
-    return ipcRenderer.invoke('open-source-selector')
-  },
-  selectSource: (source: any) => {
-    return ipcRenderer.invoke('select-source', source)
-  },
-  getSelectedSource: () => {
-    return ipcRenderer.invoke('get-selected-source')
-  },
-  startNativeScreenRecording: (
-    source: any,
-    options?: {
-      capturesSystemAudio?: boolean
-      capturesMicrophone?: boolean
-      microphoneDeviceId?: string
-      microphoneLabel?: string
-    },
-  ) => {
-    return ipcRenderer.invoke('start-native-screen-recording', source, options)
-  },
-  stopNativeScreenRecording: () => {
-    return ipcRenderer.invoke('stop-native-screen-recording')
-  },
-  startFfmpegRecording: (source: any) => {
-    return ipcRenderer.invoke('start-ffmpeg-recording', source)
-  },
-  stopFfmpegRecording: () => {
-    return ipcRenderer.invoke('stop-ffmpeg-recording')
-  },
+contextBridge.exposeInMainWorld("electronAPI", {
+	hudOverlayHide: () => {
+		ipcRenderer.send("hud-overlay-hide");
+	},
+	hudOverlayClose: () => {
+		ipcRenderer.send("hud-overlay-close");
+	},
+	getHudOverlayCaptureProtection: () => {
+		return ipcRenderer.invoke("get-hud-overlay-capture-protection");
+	},
+	setHudOverlayCaptureProtection: (enabled: boolean) => {
+		return ipcRenderer.invoke("set-hud-overlay-capture-protection", enabled);
+	},
+	getAssetBasePath: async () => {
+		// ask main process for the correct base path (production vs dev)
+		return await ipcRenderer.invoke("get-asset-base-path");
+	},
+	readLocalFile: (filePath: string) => {
+		return ipcRenderer.invoke("read-local-file", filePath);
+	},
+	getSources: async (opts: Electron.SourcesOptions) => {
+		return await ipcRenderer.invoke("get-sources", opts);
+	},
+	switchToEditor: () => {
+		return ipcRenderer.invoke("switch-to-editor");
+	},
+	openSourceSelector: () => {
+		return ipcRenderer.invoke("open-source-selector");
+	},
+	selectSource: (source: any) => {
+		return ipcRenderer.invoke("select-source", source);
+	},
+	getSelectedSource: () => {
+		return ipcRenderer.invoke("get-selected-source");
+	},
+	startNativeScreenRecording: (
+		source: any,
+		options?: {
+			capturesSystemAudio?: boolean;
+			capturesMicrophone?: boolean;
+			microphoneDeviceId?: string;
+			microphoneLabel?: string;
+		},
+	) => {
+		return ipcRenderer.invoke("start-native-screen-recording", source, options);
+	},
+	stopNativeScreenRecording: () => {
+		return ipcRenderer.invoke("stop-native-screen-recording");
+	},
+	startFfmpegRecording: (source: any) => {
+		return ipcRenderer.invoke("start-ffmpeg-recording", source);
+	},
+	stopFfmpegRecording: () => {
+		return ipcRenderer.invoke("stop-ffmpeg-recording");
+	},
 
-  storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
-    return ipcRenderer.invoke('store-recorded-video', videoData, fileName)
-  },
-
-  getRecordedVideoPath: () => {
-    return ipcRenderer.invoke('get-recorded-video-path')
-  },
-  setRecordingState: (recording: boolean) => {
-    return ipcRenderer.invoke('set-recording-state', recording)
-  },
-  setCursorScale: (scale: number) => {
-    return ipcRenderer.invoke('set-cursor-scale', scale)
-  },
-  getCursorTelemetry: (videoPath?: string) => {
-    return ipcRenderer.invoke('get-cursor-telemetry', videoPath)
-  },
-  getSystemCursorAssets: () => {
-    return ipcRenderer.invoke('get-system-cursor-assets')
-  },
-  onStopRecordingFromTray: (callback: () => void) => {
-    const listener = () => callback()
-    ipcRenderer.on('stop-recording-from-tray', listener)
-    return () => ipcRenderer.removeListener('stop-recording-from-tray', listener)
-  },
-  onRecordingStateChanged: (callback: (state: { recording: boolean; sourceName: string }) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, payload: { recording: boolean; sourceName: string }) => callback(payload)
-    ipcRenderer.on('recording-state-changed', listener)
-    return () => ipcRenderer.removeListener('recording-state-changed', listener)
-  },
-  onRecordingInterrupted: (callback: (state: { reason: string; message: string }) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, payload: { reason: string; message: string }) => callback(payload)
-    ipcRenderer.on('recording-interrupted', listener)
-    return () => ipcRenderer.removeListener('recording-interrupted', listener)
-  },
-  onCursorStateChanged: (callback: (state: { cursorType: CursorTelemetryPoint['cursorType'] }) => void) => {
-    const listener = (_event: Electron.IpcRendererEvent, payload: { cursorType: CursorTelemetryPoint['cursorType'] }) => callback(payload)
-    ipcRenderer.on('cursor-state-changed', listener)
-    return () => ipcRenderer.removeListener('cursor-state-changed', listener)
-  },
-  openExternalUrl: (url: string) => {
-    return ipcRenderer.invoke('open-external-url', url)
-  },
-  getAccessibilityPermissionStatus: () => {
-    return ipcRenderer.invoke('get-accessibility-permission-status')
-  },
-  requestAccessibilityPermission: () => {
-    return ipcRenderer.invoke('request-accessibility-permission')
-  },
-  getScreenRecordingPermissionStatus: () => {
-    return ipcRenderer.invoke('get-screen-recording-permission-status')
-  },
-  openScreenRecordingPreferences: () => {
-    return ipcRenderer.invoke('open-screen-recording-preferences')
-  },
-  openAccessibilityPreferences: () => {
-    return ipcRenderer.invoke('open-accessibility-preferences')
-  },
-  saveExportedVideo: (videoData: ArrayBuffer, fileName: string) => {
-    return ipcRenderer.invoke('save-exported-video', videoData, fileName)
-  },
-  openVideoFilePicker: () => {
-    return ipcRenderer.invoke('open-video-file-picker')
-  },
-  setCurrentVideoPath: (path: string) => {
-    return ipcRenderer.invoke('set-current-video-path', path)
-  },
-  getCurrentVideoPath: () => {
-    return ipcRenderer.invoke('get-current-video-path')
-  },
-  clearCurrentVideoPath: () => {
-    return ipcRenderer.invoke('clear-current-video-path')
-  },
-  saveProjectFile: (projectData: unknown, suggestedName?: string, existingProjectPath?: string) => {
-    return ipcRenderer.invoke('save-project-file', projectData, suggestedName, existingProjectPath)
-  },
-  loadProjectFile: () => {
-    return ipcRenderer.invoke('load-project-file')
-  },
-  loadCurrentProjectFile: () => {
-    return ipcRenderer.invoke('load-current-project-file')
-  },
-  onMenuLoadProject: (callback: () => void) => {
-    const listener = () => callback()
-    ipcRenderer.on('menu-load-project', listener)
-    return () => ipcRenderer.removeListener('menu-load-project', listener)
-  },
-  onMenuSaveProject: (callback: () => void) => {
-    const listener = () => callback()
-    ipcRenderer.on('menu-save-project', listener)
-    return () => ipcRenderer.removeListener('menu-save-project', listener)
-  },
-  onMenuSaveProjectAs: (callback: () => void) => {
-    const listener = () => callback()
-    ipcRenderer.on('menu-save-project-as', listener)
-    return () => ipcRenderer.removeListener('menu-save-project-as', listener)
-  },
-  getPlatform: () => {
-    return ipcRenderer.invoke('get-platform')
-  },
-  revealInFolder: (filePath: string) => {
-    return ipcRenderer.invoke('reveal-in-folder', filePath)
-  },
-  openRecordingsFolder: () => {
-    return ipcRenderer.invoke('open-recordings-folder')
-  },
-  getRecordingsDirectory: () => {
-    return ipcRenderer.invoke('get-recordings-directory')
-  },
-  chooseRecordingsDirectory: () => {
-    return ipcRenderer.invoke('choose-recordings-directory')
-  },
-  getShortcuts: () => {
-    return ipcRenderer.invoke('get-shortcuts')
-  },
-  saveShortcuts: (shortcuts: unknown) => {
-    return ipcRenderer.invoke('save-shortcuts', shortcuts)
-  },
-  setHasUnsavedChanges: (hasChanges: boolean) => {
-    ipcRenderer.send('set-has-unsaved-changes', hasChanges)
-  },
-  onRequestSaveBeforeClose: (callback: () => Promise<void>) => {
-    const listener = async () => {
-      await callback()
-      ipcRenderer.send('save-before-close-done')
-    }
-    ipcRenderer.on('request-save-before-close', listener)
-    return () => ipcRenderer.removeListener('request-save-before-close', listener)
-  },
-  isWgcAvailable: () => ipcRenderer.invoke('is-wgc-available'),
-  muxWgcRecording: () => ipcRenderer.invoke('mux-wgc-recording'),
-  // Cursor visibility control for cursor-free browser capture fallback
-  hideOsCursor: () => ipcRenderer.invoke('hide-cursor'),
-})
+	storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
+		return ipcRenderer.invoke("store-recorded-video", videoData, fileName);
+	},
 
+	getRecordedVideoPath: () => {
+		return ipcRenderer.invoke("get-recorded-video-path");
+	},
+	setRecordingState: (recording: boolean) => {
+		return ipcRenderer.invoke("set-recording-state", recording);
+	},
+	setCursorScale: (scale: number) => {
+		return ipcRenderer.invoke("set-cursor-scale", scale);
+	},
+	getCursorTelemetry: (videoPath?: string) => {
+		return ipcRenderer.invoke("get-cursor-telemetry", videoPath);
+	},
+	getSystemCursorAssets: () => {
+		return ipcRenderer.invoke("get-system-cursor-assets");
+	},
+	onStopRecordingFromTray: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("stop-recording-from-tray", listener);
+		return () => ipcRenderer.removeListener("stop-recording-from-tray", listener);
+	},
+	onRecordingStateChanged: (
+		callback: (state: { recording: boolean; sourceName: string }) => void,
+	) => {
+		const listener = (
+			_event: Electron.IpcRendererEvent,
+			payload: { recording: boolean; sourceName: string },
+		) => callback(payload);
+		ipcRenderer.on("recording-state-changed", listener);
+		return () => ipcRenderer.removeListener("recording-state-changed", listener);
+	},
+	onRecordingInterrupted: (callback: (state: { reason: string; message: string }) => void) => {
+		const listener = (
+			_event: Electron.IpcRendererEvent,
+			payload: { reason: string; message: string },
+		) => callback(payload);
+		ipcRenderer.on("recording-interrupted", listener);
+		return () => ipcRenderer.removeListener("recording-interrupted", listener);
+	},
+	onCursorStateChanged: (
+		callback: (state: { cursorType: CursorTelemetryPoint["cursorType"] }) => void,
+	) => {
+		const listener = (
+			_event: Electron.IpcRendererEvent,
+			payload: { cursorType: CursorTelemetryPoint["cursorType"] },
+		) => callback(payload);
+		ipcRenderer.on("cursor-state-changed", listener);
+		return () => ipcRenderer.removeListener("cursor-state-changed", listener);
+	},
+	openExternalUrl: (url: string) => {
+		return ipcRenderer.invoke("open-external-url", url);
+	},
+	getAccessibilityPermissionStatus: () => {
+		return ipcRenderer.invoke("get-accessibility-permission-status");
+	},
+	requestAccessibilityPermission: () => {
+		return ipcRenderer.invoke("request-accessibility-permission");
+	},
+	getScreenRecordingPermissionStatus: () => {
+		return ipcRenderer.invoke("get-screen-recording-permission-status");
+	},
+	openScreenRecordingPreferences: () => {
+		return ipcRenderer.invoke("open-screen-recording-preferences");
+	},
+	openAccessibilityPreferences: () => {
+		return ipcRenderer.invoke("open-accessibility-preferences");
+	},
+	saveExportedVideo: (videoData: ArrayBuffer, fileName: string) => {
+		return ipcRenderer.invoke("save-exported-video", videoData, fileName);
+	},
+	openVideoFilePicker: () => {
+		return ipcRenderer.invoke("open-video-file-picker");
+	},
+	setCurrentVideoPath: (path: string) => {
+		return ipcRenderer.invoke("set-current-video-path", path);
+	},
+	getCurrentVideoPath: () => {
+		return ipcRenderer.invoke("get-current-video-path");
+	},
+	clearCurrentVideoPath: () => {
+		return ipcRenderer.invoke("clear-current-video-path");
+	},
+	saveProjectFile: (projectData: unknown, suggestedName?: string, existingProjectPath?: string) => {
+		return ipcRenderer.invoke("save-project-file", projectData, suggestedName, existingProjectPath);
+	},
+	loadProjectFile: () => {
+		return ipcRenderer.invoke("load-project-file");
+	},
+	loadCurrentProjectFile: () => {
+		return ipcRenderer.invoke("load-current-project-file");
+	},
+	onMenuLoadProject: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("menu-load-project", listener);
+		return () => ipcRenderer.removeListener("menu-load-project", listener);
+	},
+	onMenuSaveProject: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("menu-save-project", listener);
+		return () => ipcRenderer.removeListener("menu-save-project", listener);
+	},
+	onMenuSaveProjectAs: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("menu-save-project-as", listener);
+		return () => ipcRenderer.removeListener("menu-save-project-as", listener);
+	},
+	getPlatform: () => {
+		return ipcRenderer.invoke("get-platform");
+	},
+	revealInFolder: (filePath: string) => {
+		return ipcRenderer.invoke("reveal-in-folder", filePath);
+	},
+	openRecordingsFolder: () => {
+		return ipcRenderer.invoke("open-recordings-folder");
+	},
+	getRecordingsDirectory: () => {
+		return ipcRenderer.invoke("get-recordings-directory");
+	},
+	chooseRecordingsDirectory: () => {
+		return ipcRenderer.invoke("choose-recordings-directory");
+	},
+	getShortcuts: () => {
+		return ipcRenderer.invoke("get-shortcuts");
+	},
+	saveShortcuts: (shortcuts: unknown) => {
+		return ipcRenderer.invoke("save-shortcuts", shortcuts);
+	},
+	setHasUnsavedChanges: (hasChanges: boolean) => {
+		ipcRenderer.send("set-has-unsaved-changes", hasChanges);
+	},
+	onRequestSaveBeforeClose: (callback: () => Promise<void>) => {
+		const listener = async () => {
+			await callback();
+			ipcRenderer.send("save-before-close-done");
+		};
+		ipcRenderer.on("request-save-before-close", listener);
+		return () => ipcRenderer.removeListener("request-save-before-close", listener);
+	},
+	isWgcAvailable: () => ipcRenderer.invoke("is-wgc-available"),
+	muxWgcRecording: () => ipcRenderer.invoke("mux-wgc-recording"),
+	// Cursor visibility control for cursor-free browser capture fallback
+	hideOsCursor: () => ipcRenderer.invoke("hide-cursor"),
+});
diff --git a/electron/windows.ts b/electron/windows.ts
index d2f7466d..2420743e 100644
--- a/electron/windows.ts
+++ b/electron/windows.ts
@@ -1,168 +1,191 @@
-import { BrowserWindow, ipcMain } from 'electron'
-import { createRequire } from 'node:module'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { BrowserWindow, ipcMain } from "electron";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const nodeRequire = createRequire(import.meta.url)
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const nodeRequire = createRequire(import.meta.url);
 
-const APP_ROOT = path.join(__dirname, '..')
-const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
-const RENDERER_DIST = path.join(APP_ROOT, 'dist')
-const WINDOW_ICON_PATH = path.join(process.env.VITE_PUBLIC || RENDERER_DIST, 'app-icons', 'recordly-512.png')
+const APP_ROOT = path.join(__dirname, "..");
+const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
+const RENDERER_DIST = path.join(APP_ROOT, "dist");
+const WINDOW_ICON_PATH = path.join(
+	process.env.VITE_PUBLIC || RENDERER_DIST,
+	"app-icons",
+	"recordly-512.png",
+);
 
 let hudOverlayWindow: BrowserWindow | null = null;
+let hudOverlayHiddenFromCapture = false;
 
 function getScreen() {
-  return nodeRequire('electron').screen as typeof import('electron').screen
+	return nodeRequire("electron").screen as typeof import("electron").screen;
 }
 
-ipcMain.on('hud-overlay-hide', () => {
-  if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
-    hudOverlayWindow.minimize();
-  }
+ipcMain.on("hud-overlay-hide", () => {
+	if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
+		hudOverlayWindow.minimize();
+	}
+});
+
+ipcMain.handle("get-hud-overlay-capture-protection", () => {
+	return {
+		success: true,
+		enabled: hudOverlayHiddenFromCapture,
+	};
+});
+
+ipcMain.handle("set-hud-overlay-capture-protection", (_event, enabled: boolean) => {
+	hudOverlayHiddenFromCapture = Boolean(enabled);
+
+	if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
+		hudOverlayWindow.setContentProtection(hudOverlayHiddenFromCapture);
+	}
+
+	return {
+		success: true,
+		enabled: hudOverlayHiddenFromCapture,
+	};
 });
 
 export function createHudOverlayWindow(): BrowserWindow {
-  const primaryDisplay = getScreen().getPrimaryDisplay();
-  const { workArea } = primaryDisplay;
+	const primaryDisplay = getScreen().getPrimaryDisplay();
+	const { workArea } = primaryDisplay;
 
+	const windowWidth = 660;
+	const windowHeight = 170;
 
-  const windowWidth = 600;
-  const windowHeight = 155;
+	const x = Math.floor(workArea.x + (workArea.width - windowWidth) / 2);
+	const y = Math.floor(workArea.y + workArea.height - windowHeight - 5);
 
-  const x = Math.floor(workArea.x + (workArea.width - windowWidth) / 2);
-  const y = Math.floor(workArea.y + workArea.height - windowHeight - 5);
+	const win = new BrowserWindow({
+		width: windowWidth,
+		height: windowHeight,
+		minWidth: windowWidth,
+		maxWidth: windowWidth,
+		minHeight: windowHeight,
+		maxHeight: windowHeight,
+		x: x,
+		y: y,
+		frame: false,
+		transparent: true,
+		resizable: false,
+		alwaysOnTop: true,
+		skipTaskbar: true,
+		hasShadow: false,
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			nodeIntegration: false,
+			contextIsolation: true,
+			backgroundThrottling: false,
+		},
+	});
 
-  const win = new BrowserWindow({
-    width: windowWidth,
-    height: windowHeight,
-    minWidth: 600,
-    maxWidth: 600,
-    minHeight: 155,
-    maxHeight: 155,
-    x: x,
-    y: y,
-    frame: false,
-    transparent: true,
-    resizable: false,
-    alwaysOnTop: true,
-    skipTaskbar: true,
-    hasShadow: false,
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.mjs'),
-      nodeIntegration: false,
-      contextIsolation: true,
-      backgroundThrottling: false,
-    },
-  })
+	win.setContentProtection(hudOverlayHiddenFromCapture);
 
+	win.webContents.on("did-finish-load", () => {
+		win?.webContents.send("main-process-message", new Date().toLocaleString());
+	});
 
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', (new Date).toLocaleString())
-  })
+	hudOverlayWindow = win;
 
-  hudOverlayWindow = win;
+	win.on("closed", () => {
+		if (hudOverlayWindow === win) {
+			hudOverlayWindow = null;
+		}
+	});
 
-  win.on('closed', () => {
-    if (hudOverlayWindow === win) {
-      hudOverlayWindow = null;
-    }
-  });
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(VITE_DEV_SERVER_URL + "?windowType=hud-overlay");
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "hud-overlay" },
+		});
+	}
 
-
-  if (VITE_DEV_SERVER_URL) {
-    win.loadURL(VITE_DEV_SERVER_URL + '?windowType=hud-overlay')
-  } else {
-    win.loadFile(path.join(RENDERER_DIST, 'index.html'), { 
-      query: { windowType: 'hud-overlay' } 
-    })
-  }
-
-  return win
+	return win;
 }
 
 export function createEditorWindow(): BrowserWindow {
-  const isMac = process.platform === 'darwin';
+	const isMac = process.platform === "darwin";
 
-  const win = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    minWidth: 800,
-    minHeight: 600,
-    ...(process.platform !== 'darwin' && {
-      icon: WINDOW_ICON_PATH,
-    }),
-    ...(isMac && {
-      titleBarStyle: 'hiddenInset',
-      trafficLightPosition: { x: 12, y: 12 },
-    }),
-    transparent: false,
-    resizable: true,
-    alwaysOnTop: false,
-    skipTaskbar: false,
-    title: 'Recordly',
-    backgroundColor: '#000000',
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.mjs'),
-      nodeIntegration: false,
-      contextIsolation: true,
-      webSecurity: false,
-      backgroundThrottling: false,
-    },
-  })
+	const win = new BrowserWindow({
+		width: 1200,
+		height: 800,
+		minWidth: 800,
+		minHeight: 600,
+		...(process.platform !== "darwin" && {
+			icon: WINDOW_ICON_PATH,
+		}),
+		...(isMac && {
+			titleBarStyle: "hiddenInset",
+			trafficLightPosition: { x: 12, y: 12 },
+		}),
+		transparent: false,
+		resizable: true,
+		alwaysOnTop: false,
+		skipTaskbar: false,
+		title: "Recordly",
+		backgroundColor: "#000000",
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			nodeIntegration: false,
+			contextIsolation: true,
+			webSecurity: false,
+			backgroundThrottling: false,
+		},
+	});
 
-  // Maximize the window by default
-  win.maximize();
+	// Maximize the window by default
+	win.maximize();
 
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', (new Date).toLocaleString())
-  })
+	win.webContents.on("did-finish-load", () => {
+		win?.webContents.send("main-process-message", new Date().toLocaleString());
+	});
 
-  if (VITE_DEV_SERVER_URL) {
-    win.loadURL(VITE_DEV_SERVER_URL + '?windowType=editor')
-  } else {
-    win.loadFile(path.join(RENDERER_DIST, 'index.html'), { 
-      query: { windowType: 'editor' } 
-    })
-  }
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(VITE_DEV_SERVER_URL + "?windowType=editor");
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "editor" },
+		});
+	}
 
-  return win
+	return win;
 }
 
 export function createSourceSelectorWindow(): BrowserWindow {
-  const { width, height } = getScreen().getPrimaryDisplay().workAreaSize
-  
-  const win = new BrowserWindow({
-    width: 620,
-    height: 420,
-    minHeight: 350,
-    maxHeight: 500,
-    x: Math.round((width - 620) / 2),
-    y: Math.round((height - 420) / 2),
-    frame: false,
-    resizable: false,
-    alwaysOnTop: true,
-    transparent: true,
-    ...(process.platform !== 'darwin' && {
-      icon: WINDOW_ICON_PATH,
-    }),
-    backgroundColor: '#00000000',
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.mjs'),
-      nodeIntegration: false,
-      contextIsolation: true,
-    },
-  })
+	const { width, height } = getScreen().getPrimaryDisplay().workAreaSize;
 
-  if (VITE_DEV_SERVER_URL) {
-    win.loadURL(VITE_DEV_SERVER_URL + '?windowType=source-selector')
-  } else {
-    win.loadFile(path.join(RENDERER_DIST, 'index.html'), { 
-      query: { windowType: 'source-selector' } 
-    })
-  }
+	const win = new BrowserWindow({
+		width: 620,
+		height: 420,
+		minHeight: 350,
+		maxHeight: 500,
+		x: Math.round((width - 620) / 2),
+		y: Math.round((height - 420) / 2),
+		frame: false,
+		resizable: false,
+		alwaysOnTop: true,
+		transparent: true,
+		...(process.platform !== "darwin" && {
+			icon: WINDOW_ICON_PATH,
+		}),
+		backgroundColor: "#00000000",
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			nodeIntegration: false,
+			contextIsolation: true,
+		},
+	});
 
-  return win
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(VITE_DEV_SERVER_URL + "?windowType=source-selector");
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "source-selector" },
+		});
+	}
+
+	return win;
 }
-
diff --git a/src/components/launch/LaunchWindow.tsx b/src/components/launch/LaunchWindow.tsx
index 20d121b0..f4f69e38 100644
--- a/src/components/launch/LaunchWindow.tsx
+++ b/src/components/launch/LaunchWindow.tsx
@@ -1,355 +1,441 @@
+import { Eye, EyeOff, Languages } from "lucide-react";
 import { useEffect, useState } from "react";
 import { BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
 import { MdMic, MdMicOff, MdMonitor, MdVideoFile, MdVolumeOff, MdVolumeUp } from "react-icons/md";
-import { Languages } from "lucide-react";
 import { RxDragHandleDots2 } from "react-icons/rx";
+import { useI18n } from "@/contexts/I18nContext";
+import type { AppLocale } from "@/i18n/config";
+import { SUPPORTED_LOCALES } from "@/i18n/config";
+import { useScopedT } from "../../contexts/I18nContext";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
 import { useScreenRecorder } from "../../hooks/useScreenRecorder";
-import { useScopedT } from "../../contexts/I18nContext";
-import { Button } from "../ui/button";
 import { AudioLevelMeter } from "../ui/audio-level-meter";
+import { Button } from "../ui/button";
 import { ContentClamp } from "../ui/content-clamp";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
-import { useI18n } from "@/contexts/I18nContext";
-import { SUPPORTED_LOCALES } from "@/i18n/config";
-import type { AppLocale } from "@/i18n/config";
 import styles from "./LaunchWindow.module.css";
 
 export function LaunchWindow() {
-  const { locale, setLocale } = useI18n();
-  const t = useScopedT('launch');
+	const { locale, setLocale } = useI18n();
+	const t = useScopedT("launch");
 
-  const LOCALE_LABELS: Record<string, string> = { en: "EN", es: "ES", "zh-CN": "中文" };
-  const {
-    recording,
-    toggleRecording,
-    microphoneEnabled,
-    setMicrophoneEnabled,
-    microphoneDeviceId,
-    setMicrophoneDeviceId,
-    systemAudioEnabled,
-    setSystemAudioEnabled,
-  } = useScreenRecorder();
-  const [recordingStart, setRecordingStart] = useState<number | null>(null);
-  const [elapsed, setElapsed] = useState(0);
-  const showMicControls = microphoneEnabled && !recording;
-  const { devices, selectedDeviceId, setSelectedDeviceId } = useMicrophoneDevices(microphoneEnabled);
-  const { level } = useAudioLevelMeter({
-    enabled: showMicControls,
-    deviceId: microphoneDeviceId,
-  });
+	const LOCALE_LABELS: Record<string, string> = { en: "EN", es: "ES", "zh-CN": "中文" };
+	const {
+		recording,
+		toggleRecording,
+		microphoneEnabled,
+		setMicrophoneEnabled,
+		microphoneDeviceId,
+		setMicrophoneDeviceId,
+		systemAudioEnabled,
+		setSystemAudioEnabled,
+	} = useScreenRecorder();
+	const [recordingStart, setRecordingStart] = useState<number | null>(null);
+	const [elapsed, setElapsed] = useState(0);
+	const showMicControls = microphoneEnabled && !recording;
+	const { devices, selectedDeviceId, setSelectedDeviceId } =
+		useMicrophoneDevices(microphoneEnabled);
+	const { level } = useAudioLevelMeter({
+		enabled: showMicControls,
+		deviceId: microphoneDeviceId,
+	});
 
-  useEffect(() => {
-    if (selectedDeviceId && selectedDeviceId !== "default") {
-      setMicrophoneDeviceId(selectedDeviceId);
-    }
-  }, [selectedDeviceId, setMicrophoneDeviceId]);
+	useEffect(() => {
+		if (selectedDeviceId && selectedDeviceId !== "default") {
+			setMicrophoneDeviceId(selectedDeviceId);
+		}
+	}, [selectedDeviceId, setMicrophoneDeviceId]);
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout | null = null;
-    if (recording) {
-      if (!recordingStart) setRecordingStart(Date.now());
-      timer = setInterval(() => {
-        if (recordingStart) {
-          setElapsed(Math.floor((Date.now() - recordingStart) / 1000));
-        }
-      }, 1000);
-    } else {
-      setRecordingStart(null);
-      setElapsed(0);
-      if (timer) clearInterval(timer);
-    }
-    return () => {
-      if (timer) clearInterval(timer);
-    };
-  }, [recording, recordingStart]);
+	useEffect(() => {
+		let timer: NodeJS.Timeout | null = null;
+		if (recording) {
+			if (!recordingStart) setRecordingStart(Date.now());
+			timer = setInterval(() => {
+				if (recordingStart) {
+					setElapsed(Math.floor((Date.now() - recordingStart) / 1000));
+				}
+			}, 1000);
+		} else {
+			setRecordingStart(null);
+			setElapsed(0);
+			if (timer) clearInterval(timer);
+		}
+		return () => {
+			if (timer) clearInterval(timer);
+		};
+	}, [recording, recordingStart]);
 
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60).toString().padStart(2, "0");
-    const s = (seconds % 60).toString().padStart(2, "0");
-    return `${m}:${s}`;
-  };
+	const formatTime = (seconds: number) => {
+		const m = Math.floor(seconds / 60)
+			.toString()
+			.padStart(2, "0");
+		const s = (seconds % 60).toString().padStart(2, "0");
+		return `${m}:${s}`;
+	};
 
-  const [selectedSource, setSelectedSource] = useState("Screen");
-  const [hasSelectedSource, setHasSelectedSource] = useState(false);
-  const [recordingsDirectory, setRecordingsDirectory] = useState<string | null>(null);
+	const [selectedSource, setSelectedSource] = useState("Screen");
+	const [hasSelectedSource, setHasSelectedSource] = useState(false);
+	const [recordingsDirectory, setRecordingsDirectory] = useState<string | null>(null);
+	const [hideHudFromCapture, setHideHudFromCapture] = useState(false);
 
-  useEffect(() => {
-    const checkSelectedSource = async () => {
-      if (window.electronAPI) {
-        const source = await window.electronAPI.getSelectedSource();
-        if (source) {
-          setSelectedSource(source.name);
-          setHasSelectedSource(true);
-        } else {
-          setSelectedSource("Screen");
-          setHasSelectedSource(false);
-        }
-      }
-    };
+	useEffect(() => {
+		const checkSelectedSource = async () => {
+			if (window.electronAPI) {
+				const source = await window.electronAPI.getSelectedSource();
+				if (source) {
+					setSelectedSource(source.name);
+					setHasSelectedSource(true);
+				} else {
+					setSelectedSource("Screen");
+					setHasSelectedSource(false);
+				}
+			}
+		};
 
-    void checkSelectedSource();
-    const interval = setInterval(checkSelectedSource, 500);
-    return () => clearInterval(interval);
-  }, []);
+		void checkSelectedSource();
+		const interval = setInterval(checkSelectedSource, 500);
+		return () => clearInterval(interval);
+	}, []);
 
-  const openSourceSelector = () => {
-    window.electronAPI?.openSourceSelector();
-  };
+	useEffect(() => {
+		let cancelled = false;
 
-  const openVideoFile = async () => {
-    const result = await window.electronAPI.openVideoFilePicker();
-    if (result.canceled) {
-      return;
-    }
+		const loadHudCaptureProtection = async () => {
+			try {
+				const result = await window.electronAPI.getHudOverlayCaptureProtection();
+				if (!cancelled && result.success) {
+					setHideHudFromCapture(result.enabled);
+				}
+			} catch (error) {
+				console.error("Failed to load HUD capture protection state:", error);
+			}
+		};
 
-    if (result.success && result.path) {
-      await window.electronAPI.setCurrentVideoPath(result.path);
-      await window.electronAPI.switchToEditor();
-    }
-  };
+		void loadHudCaptureProtection();
 
-  const openProjectFile = async () => {
-    const result = await window.electronAPI.loadProjectFile();
-    if (result.canceled || !result.success) {
-      return;
-    }
-    await window.electronAPI.switchToEditor();
-  };
+		return () => {
+			cancelled = true;
+		};
+	}, []);
 
-  const sendHudOverlayHide = () => {
-    window.electronAPI?.hudOverlayHide?.();
-  };
+	const openSourceSelector = () => {
+		window.electronAPI?.openSourceSelector();
+	};
 
-  const sendHudOverlayClose = () => {
-    window.electronAPI?.hudOverlayClose?.();
-  };
+	const openVideoFile = async () => {
+		const result = await window.electronAPI.openVideoFilePicker();
+		if (result.canceled) {
+			return;
+		}
 
-  const chooseRecordingsDirectory = async () => {
-    const result = await window.electronAPI.chooseRecordingsDirectory();
-    if (result.canceled) {
-      return;
-    }
-    if (result.success && result.path) {
-      setRecordingsDirectory(result.path);
-    }
-  };
+		if (result.success && result.path) {
+			await window.electronAPI.setCurrentVideoPath(result.path);
+			await window.electronAPI.switchToEditor();
+		}
+	};
 
-  useEffect(() => {
-    const loadRecordingsDirectory = async () => {
-      const result = await window.electronAPI.getRecordingsDirectory();
-      if (result.success) {
-        setRecordingsDirectory(result.path);
-      }
-    };
+	const openProjectFile = async () => {
+		const result = await window.electronAPI.loadProjectFile();
+		if (result.canceled || !result.success) {
+			return;
+		}
+		await window.electronAPI.switchToEditor();
+	};
 
-    void loadRecordingsDirectory();
-  }, []);
+	const sendHudOverlayHide = () => {
+		window.electronAPI?.hudOverlayHide?.();
+	};
 
-  const recordingsDirectoryName = recordingsDirectory
-    ? recordingsDirectory.split(/[\\/]/).filter(Boolean).pop() || recordingsDirectory
-    : "recordings";
-  const dividerClass = "mx-1 h-5 w-px shrink-0 bg-white/35";
+	const sendHudOverlayClose = () => {
+		window.electronAPI?.hudOverlayClose?.();
+	};
 
-  const toggleMicrophone = () => {
-    if (!recording) {
-      setMicrophoneEnabled(!microphoneEnabled);
-    }
-  };
+	const toggleHudCaptureProtection = async () => {
+		const nextValue = !hideHudFromCapture;
 
-  return (
-    <div className="w-full h-full flex items-end justify-center bg-transparent overflow-hidden">
-      <div className={`flex flex-col items-center gap-2 mx-auto ${styles.electronDrag}`}>
-        {showMicControls && (
-          <div
-            className={`flex items-center gap-2 rounded-full border border-white/15 bg-[rgba(18,18,26,0.92)] px-3 py-2 shadow-xl backdrop-blur-xl ${styles.electronNoDrag}`}
-          >
-            <select
-              value={microphoneDeviceId || selectedDeviceId}
-              onChange={(event) => {
-                setSelectedDeviceId(event.target.value);
-                setMicrophoneDeviceId(event.target.value);
-              }}
-              className={`max-w-[230px] rounded-full border border-white/15 bg-[#131722] px-3 py-1 text-xs text-slate-100 outline-none ${styles.micSelect}`}
-            >
-              {devices.map((device) => (
-                <option key={device.deviceId} value={device.deviceId}>
-                  {device.label}
-                </option>
-              ))}
-            </select>
-            <AudioLevelMeter level={level} className="w-24" />
-          </div>
-        )}
+		setHideHudFromCapture(nextValue);
 
-        <div
-          className={`w-full mx-auto flex items-center gap-1.5 px-3 py-2 ${styles.electronDrag} ${styles.hudBar}`}
-          style={{
-            borderRadius: 9999,
-            background: "linear-gradient(135deg, rgba(28,28,36,0.97) 0%, rgba(18,18,26,0.96) 100%)",
-            backdropFilter: "blur(16px) saturate(140%)",
-            WebkitBackdropFilter: "blur(16px) saturate(140%)",
-            border: "1px solid rgba(80,80,120,0.25)",
-            minHeight: 48,
-          }}
-        >
-          <div className={`flex items-center px-1 ${styles.electronDrag}`}>
-            <RxDragHandleDots2 size={16} className="text-white/35" />
-          </div>
+		try {
+			const result = await window.electronAPI.setHudOverlayCaptureProtection(nextValue);
 
-          <Button
-            variant="link"
-            size="sm"
-            className={`gap-1 text-white/80 bg-transparent hover:bg-transparent px-0 text-xs ${styles.electronNoDrag}`}
-            onClick={openSourceSelector}
-            disabled={recording}
-            title={selectedSource}
-          >
-            <MdMonitor size={14} className="text-white/80" />
-            <ContentClamp truncateLength={6}>{selectedSource}</ContentClamp>
-          </Button>
+			if (!result.success) {
+				setHideHudFromCapture(!nextValue);
+				return;
+			}
 
-          <div className={dividerClass} />
+			setHideHudFromCapture(result.enabled);
+		} catch (error) {
+			console.error("Failed to update HUD capture protection:", error);
+			setHideHudFromCapture(!nextValue);
+		}
+	};
 
-          <div className={`flex items-center gap-1 ${styles.electronNoDrag}`}>
-            <Button
-              variant="link"
-              size="icon"
-              onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
-              disabled={recording}
-              title={systemAudioEnabled ? t('recording.disableSystemAudio') : t('recording.enableSystemAudio')}
-              className="text-white/80 hover:bg-transparent"
-            >
-              {systemAudioEnabled ? <MdVolumeUp size={16} className="text-[#2563EB]" /> : <MdVolumeOff size={16} className="text-white/35" />}
-            </Button>
-            <Button
-              variant="link"
-              size="icon"
-              onClick={toggleMicrophone}
-              disabled={recording}
-              title={microphoneEnabled ? t('recording.disableMicrophone') : t('recording.enableMicrophone')}
-              className="text-white/80 hover:bg-transparent"
-            >
-              {microphoneEnabled ? <MdMic size={16} className="text-[#2563EB]" /> : <MdMicOff size={16} className="text-white/35" />}
-            </Button>
-          </div>
+	const chooseRecordingsDirectory = async () => {
+		const result = await window.electronAPI.chooseRecordingsDirectory();
+		if (result.canceled) {
+			return;
+		}
+		if (result.success && result.path) {
+			setRecordingsDirectory(result.path);
+		}
+	};
 
-          <div className={dividerClass} />
+	useEffect(() => {
+		const loadRecordingsDirectory = async () => {
+			const result = await window.electronAPI.getRecordingsDirectory();
+			if (result.success) {
+				setRecordingsDirectory(result.path);
+			}
+		};
 
-          <Button
-            variant="link"
-            size="sm"
-            onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
-            disabled={!hasSelectedSource && !recording}
-            className={`gap-1 text-white bg-transparent hover:bg-transparent px-0 text-xs ${styles.electronNoDrag}`}
-          >
-            {recording ? (
-              <>
-                <FaRegStopCircle size={14} className="text-red-400" />
-                <span className="text-red-400 font-medium tabular-nums">{formatTime(elapsed)}</span>
-              </>
-            ) : (
-              <>
-                <BsRecordCircle size={14} className={hasSelectedSource ? "text-white/85" : "text-white/35"} />
-                <span className={hasSelectedSource ? "text-white/80" : "text-white/35"}>{t('recording.record')}</span>
-              </>
-            )}
-          </Button>
+		void loadRecordingsDirectory();
+	}, []);
 
-          <Button
-            variant="link"
-            size="sm"
-            onClick={chooseRecordingsDirectory}
-            disabled={recording}
-            title={recordingsDirectory ? t('recording.recordingFolder', undefined, { path: recordingsDirectory }) : t('recording.chooseRecordingsFolder')}
-            className={`text-white/75 hover:bg-transparent px-1 text-[11px] underline decoration-white/45 underline-offset-2 ${styles.electronNoDrag}`}
-          >
-            <ContentClamp truncateLength={18}>{t('recording.folderPath', undefined, { name: recordingsDirectoryName })}</ContentClamp>
-          </Button>
+	const recordingsDirectoryName = recordingsDirectory
+		? recordingsDirectory.split(/[\\/]/).filter(Boolean).pop() || recordingsDirectory
+		: "recordings";
+	const dividerClass = "mx-1 h-5 w-px shrink-0 bg-white/35";
 
-          <div className="ml-auto flex items-center gap-0.5">
-            <div className={dividerClass} />
-            <Button
-              variant="link"
-              size="icon"
-              onClick={openVideoFile}
-              disabled={recording}
-              title={t('recording.openVideoFile')}
-              className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
-            >
-              <MdVideoFile size={15} />
-            </Button>
-            <Button
-              variant="link"
-              size="icon"
-              onClick={openProjectFile}
-              disabled={recording}
-              title={t('recording.openProject')}
-              className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
-            >
-              <FaFolderOpen size={14} />
-            </Button>
-            <DropdownMenu>
-              <DropdownMenuTrigger asChild>
-                <Button
-                  variant="link"
-                  size="icon"
-                  title="Language"
-                  className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
-                >
-                  <Languages size={14} />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                side="top"
-                align="end"
-                className="min-w-[90px] bg-[rgba(28,28,36,0.97)] border-white/15 text-white/90 backdrop-blur-xl"
-              >
-                {SUPPORTED_LOCALES.map((code) => (
-                  <DropdownMenuItem
-                    key={code}
-                    onSelect={() => setLocale(code as AppLocale)}
-                    className={`text-xs cursor-pointer ${
-                      locale === code ? "text-white font-medium" : "text-white/60"
-                    }`}
-                  >
-                    {LOCALE_LABELS[code] ?? code}
-                  </DropdownMenuItem>
-                ))}
-              </DropdownMenuContent>
-            </DropdownMenu>
-            <div className={dividerClass} />
-            <Button
-              variant="link"
-              size="icon"
-              onClick={sendHudOverlayHide}
-              title={t('recording.hideHud')}
-              className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
-            >
-              <FiMinus size={16} />
-            </Button>
-            <Button
-              variant="link"
-              size="icon"
-              onClick={sendHudOverlayClose}
-              title={t('recording.closeApp')}
-              className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
-            >
-              <FiX size={16} />
-            </Button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+	const toggleMicrophone = () => {
+		if (!recording) {
+			setMicrophoneEnabled(!microphoneEnabled);
+		}
+	};
+
+	return (
+		<div className="flex h-full w-full items-end justify-center overflow-hidden bg-transparent px-3 pb-3 pt-2">
+			<div className={`flex flex-col items-center gap-2 mx-auto ${styles.electronDrag}`}>
+				{showMicControls && (
+					<div
+						className={`flex items-center gap-2 rounded-full border border-white/15 bg-[rgba(18,18,26,0.92)] px-3 py-2 shadow-xl backdrop-blur-xl ${styles.electronNoDrag}`}
+					>
+						<select
+							value={microphoneDeviceId || selectedDeviceId}
+							onChange={(event) => {
+								setSelectedDeviceId(event.target.value);
+								setMicrophoneDeviceId(event.target.value);
+							}}
+							className={`max-w-[230px] rounded-full border border-white/15 bg-[#131722] px-3 py-1 text-xs text-slate-100 outline-none ${styles.micSelect}`}
+						>
+							{devices.map((device) => (
+								<option key={device.deviceId} value={device.deviceId}>
+									{device.label}
+								</option>
+							))}
+						</select>
+						<AudioLevelMeter level={level} className="w-24" />
+					</div>
+				)}
+
+				<div
+					className={`mx-auto inline-flex max-w-full items-center gap-1.5 px-3 py-2 ${styles.electronDrag} ${styles.hudBar}`}
+					style={{
+						borderRadius: 9999,
+						background: "linear-gradient(135deg, rgba(28,28,36,0.97) 0%, rgba(18,18,26,0.96) 100%)",
+						backdropFilter: "blur(16px) saturate(140%)",
+						WebkitBackdropFilter: "blur(16px) saturate(140%)",
+						border: "1px solid rgba(80,80,120,0.25)",
+						minHeight: 48,
+					}}
+				>
+					<div className={`flex items-center px-1 ${styles.electronDrag}`}>
+						<RxDragHandleDots2 size={16} className="text-white/35" />
+					</div>
+
+					<Button
+						variant="link"
+						size="sm"
+						className={`gap-1 text-white/80 bg-transparent hover:bg-transparent px-0 text-xs ${styles.electronNoDrag}`}
+						onClick={openSourceSelector}
+						disabled={recording}
+						title={selectedSource}
+					>
+						<MdMonitor size={14} className="text-white/80" />
+						<ContentClamp truncateLength={6}>{selectedSource}</ContentClamp>
+					</Button>
+
+					<div className={dividerClass} />
+
+					<div className={`flex items-center gap-1 ${styles.electronNoDrag}`}>
+						<Button
+							variant="link"
+							size="icon"
+							onClick={() => void toggleHudCaptureProtection()}
+							title={
+								hideHudFromCapture ? t("recording.showHudInVideo") : t("recording.hideHudFromVideo")
+							}
+							className="text-white/80 hover:bg-transparent"
+						>
+							{hideHudFromCapture ? (
+								<EyeOff size={16} className="text-[#2563EB]" />
+							) : (
+								<Eye size={16} className="text-white/35" />
+							)}
+						</Button>
+						<Button
+							variant="link"
+							size="icon"
+							onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
+							disabled={recording}
+							title={
+								systemAudioEnabled
+									? t("recording.disableSystemAudio")
+									: t("recording.enableSystemAudio")
+							}
+							className="text-white/80 hover:bg-transparent"
+						>
+							{systemAudioEnabled ? (
+								<MdVolumeUp size={16} className="text-[#2563EB]" />
+							) : (
+								<MdVolumeOff size={16} className="text-white/35" />
+							)}
+						</Button>
+						<Button
+							variant="link"
+							size="icon"
+							onClick={toggleMicrophone}
+							disabled={recording}
+							title={
+								microphoneEnabled
+									? t("recording.disableMicrophone")
+									: t("recording.enableMicrophone")
+							}
+							className="text-white/80 hover:bg-transparent"
+						>
+							{microphoneEnabled ? (
+								<MdMic size={16} className="text-[#2563EB]" />
+							) : (
+								<MdMicOff size={16} className="text-white/35" />
+							)}
+						</Button>
+					</div>
+
+					<div className={dividerClass} />
+
+					<Button
+						variant="link"
+						size="sm"
+						onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
+						disabled={!hasSelectedSource && !recording}
+						className={`gap-1 text-white bg-transparent hover:bg-transparent px-0 text-xs ${styles.electronNoDrag}`}
+					>
+						{recording ? (
+							<>
+								<FaRegStopCircle size={14} className="text-red-400" />
+								<span className="text-red-400 font-medium tabular-nums">{formatTime(elapsed)}</span>
+							</>
+						) : (
+							<>
+								<BsRecordCircle
+									size={14}
+									className={hasSelectedSource ? "text-white/85" : "text-white/35"}
+								/>
+								<span className={hasSelectedSource ? "text-white/80" : "text-white/35"}>
+									{t("recording.record")}
+								</span>
+							</>
+						)}
+					</Button>
+
+					<Button
+						variant="link"
+						size="sm"
+						onClick={chooseRecordingsDirectory}
+						disabled={recording}
+						title={
+							recordingsDirectory
+								? t("recording.recordingFolder", undefined, { path: recordingsDirectory })
+								: t("recording.chooseRecordingsFolder")
+						}
+						className={`text-white/75 hover:bg-transparent px-1 text-[11px] underline decoration-white/45 underline-offset-2 ${styles.electronNoDrag}`}
+					>
+						<ContentClamp truncateLength={18}>
+							{t("recording.folderPath", undefined, { name: recordingsDirectoryName })}
+						</ContentClamp>
+					</Button>
+
+					<div className="ml-auto flex items-center gap-0.5">
+						<div className={dividerClass} />
+						<Button
+							variant="link"
+							size="icon"
+							onClick={openVideoFile}
+							disabled={recording}
+							title={t("recording.openVideoFile")}
+							className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
+						>
+							<MdVideoFile size={15} />
+						</Button>
+						<Button
+							variant="link"
+							size="icon"
+							onClick={openProjectFile}
+							disabled={recording}
+							title={t("recording.openProject")}
+							className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
+						>
+							<FaFolderOpen size={14} />
+						</Button>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<Button
+									variant="link"
+									size="icon"
+									title="Language"
+									className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
+								>
+									<Languages size={14} />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								side="top"
+								align="end"
+								className="min-w-[90px] bg-[rgba(28,28,36,0.97)] border-white/15 text-white/90 backdrop-blur-xl"
+							>
+								{SUPPORTED_LOCALES.map((code) => (
+									<DropdownMenuItem
+										key={code}
+										onSelect={() => setLocale(code as AppLocale)}
+										className={`text-xs cursor-pointer ${
+											locale === code ? "text-white font-medium" : "text-white/60"
+										}`}
+									>
+										{LOCALE_LABELS[code] ?? code}
+									</DropdownMenuItem>
+								))}
+							</DropdownMenuContent>
+						</DropdownMenu>
+						<div className={dividerClass} />
+						<Button
+							variant="link"
+							size="icon"
+							onClick={sendHudOverlayHide}
+							title={t("recording.hideHud")}
+							className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
+						>
+							<FiMinus size={16} />
+						</Button>
+						<Button
+							variant="link"
+							size="icon"
+							onClick={sendHudOverlayClose}
+							title={t("recording.closeApp")}
+							className={`text-white/70 hover:bg-transparent ${styles.electronNoDrag}`}
+						>
+							<FiX size={16} />
+						</Button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }
-
diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index 131e974d..303fd9c4 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -1,1167 +1,1098 @@
-import { cn } from "@/lib/utils";
-import { useEffect, useRef } from "react";
-import { getAssetPath, getRenderableAssetUrl } from "@/lib/assetPath";
-import {
-  BUILT_IN_WALLPAPERS,
-  WALLPAPER_PATHS,
-  WALLPAPER_RELATIVE_PATHS,
-} from "@/lib/wallpapers";
-import { SliderControl } from "./SliderControl";
-import { Switch } from "@/components/ui/switch";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Button } from "@/components/ui/button";
-import { useState } from "react";
 import Block from "@uiw/react-color-block";
 import {
-  Trash2,
-  Download,
-  Crop,
-  X,
-  Bug,
-  Upload,
-  Star,
-  Film,
-  Image,
-  Sparkles,
-  Palette,
-  Save,
-  FolderOpen,
+	Bug,
+	Crop,
+	Download,
+	Film,
+	FolderOpen,
+	Image,
+	Palette,
+	Save,
+	Sparkles,
+	Star,
+	Trash2,
+	Upload,
+	X,
 } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
-import { useI18n, useScopedT } from "../../contexts/I18nContext";
-import type {
-  ZoomDepth,
-  CropRegion,
-  AnnotationRegion,
-  AnnotationType,
-  PlaybackSpeed,
-} from "./types";
 import {
-  SPEED_OPTIONS,
-  DEFAULT_CURSOR_SIZE,
-  DEFAULT_CURSOR_SMOOTHING,
-  DEFAULT_CURSOR_MOTION_BLUR,
-  DEFAULT_CURSOR_CLICK_BOUNCE,
-  DEFAULT_CURSOR_SWAY,
-  DEFAULT_ZOOM_MOTION_BLUR,
-} from "./types";
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
+} from "@/components/ui/accordion";
+import { Button } from "@/components/ui/button";
+import { Switch } from "@/components/ui/switch";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { getAssetPath, getRenderableAssetUrl } from "@/lib/assetPath";
+import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
+import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
+import { cn } from "@/lib/utils";
+import { BUILT_IN_WALLPAPERS, WALLPAPER_PATHS, WALLPAPER_RELATIVE_PATHS } from "@/lib/wallpapers";
+import { type AspectRatio } from "@/utils/aspectRatioUtils";
+import { useI18n, useScopedT } from "../../contexts/I18nContext";
+import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
 import { CropControl } from "./CropControl";
 import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
-import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
-import { type AspectRatio } from "@/utils/aspectRatioUtils";
+import { SliderControl } from "./SliderControl";
 import type {
-  ExportQuality,
-  ExportFormat,
-  GifFrameRate,
-  GifSizePreset,
-} from "@/lib/exporter";
-import { GIF_FRAME_RATES, GIF_SIZE_PRESETS } from "@/lib/exporter";
+	AnnotationRegion,
+	AnnotationType,
+	CropRegion,
+	PlaybackSpeed,
+	ZoomDepth,
+} from "./types";
 import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
+	DEFAULT_CURSOR_CLICK_BOUNCE,
+	DEFAULT_CURSOR_MOTION_BLUR,
+	DEFAULT_CURSOR_SIZE,
+	DEFAULT_CURSOR_SMOOTHING,
+	DEFAULT_CURSOR_SWAY,
+	DEFAULT_ZOOM_MOTION_BLUR,
+	SPEED_OPTIONS,
+} from "./types";
+import { fromCursorSwaySliderValue, toCursorSwaySliderValue } from "./videoPlayback/cursorSway";
+
 const GRADIENTS = [
-  "linear-gradient( 111.6deg,  rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
-  "linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)",
-  "radial-gradient( circle farthest-corner at 3.2% 49.6%,  rgba(80,12,139,0.87) 0%, rgba(161,10,144,0.72) 83.6% )",
-  "linear-gradient( 111.6deg,  rgba(0,56,68,1) 0%, rgba(163,217,185,1) 51.5%, rgba(231, 148, 6, 1) 88.6% )",
-  "linear-gradient( 107.7deg,  rgba(235,230,44,0.55) 8.4%, rgba(252,152,15,1) 90.3% )",
-  "linear-gradient( 91deg,  rgba(72,154,78,1) 5.2%, rgba(251,206,70,1) 95.9% )",
-  "radial-gradient( circle farthest-corner at 10% 20%,  rgba(2,37,78,1) 0%, rgba(4,56,126,1) 19.7%, rgba(85,245,221,1) 100.2% )",
-  "linear-gradient( 109.6deg,  rgba(15,2,2,1) 11.2%, rgba(36,163,190,1) 91.1% )",
-  "linear-gradient(135deg, #FBC8B4, #2447B1)",
-  "linear-gradient(109.6deg, #F635A6, #36D860)",
-  "linear-gradient(90deg, #FF0101, #4DFF01)",
-  "linear-gradient(315deg, #EC0101, #5044A9)",
-  "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)",
-  "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)",
-  "linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)",
-  "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)",
-  "linear-gradient(to right, #4facfe 0%, #00f2fe 100%)",
-  "linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)",
-  "linear-gradient(to right, #fa709a 0%, #fee140 100%)",
-  "linear-gradient(to top, #30cfd0 0%, #330867 100%)",
-  "linear-gradient(to top, #c471f5 0%, #fa71cd 100%)",
-  "linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)",
-  "linear-gradient(to top, #48c6ef 0%, #6f86d6 100%)",
-  "linear-gradient(to right, #0acffe 0%, #495aff 100%)",
+	"linear-gradient( 111.6deg,  rgba(114,167,232,1) 9.4%, rgba(253,129,82,1) 43.9%, rgba(253,129,82,1) 54.8%, rgba(249,202,86,1) 86.3% )",
+	"linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%)",
+	"radial-gradient( circle farthest-corner at 3.2% 49.6%,  rgba(80,12,139,0.87) 0%, rgba(161,10,144,0.72) 83.6% )",
+	"linear-gradient( 111.6deg,  rgba(0,56,68,1) 0%, rgba(163,217,185,1) 51.5%, rgba(231, 148, 6, 1) 88.6% )",
+	"linear-gradient( 107.7deg,  rgba(235,230,44,0.55) 8.4%, rgba(252,152,15,1) 90.3% )",
+	"linear-gradient( 91deg,  rgba(72,154,78,1) 5.2%, rgba(251,206,70,1) 95.9% )",
+	"radial-gradient( circle farthest-corner at 10% 20%,  rgba(2,37,78,1) 0%, rgba(4,56,126,1) 19.7%, rgba(85,245,221,1) 100.2% )",
+	"linear-gradient( 109.6deg,  rgba(15,2,2,1) 11.2%, rgba(36,163,190,1) 91.1% )",
+	"linear-gradient(135deg, #FBC8B4, #2447B1)",
+	"linear-gradient(109.6deg, #F635A6, #36D860)",
+	"linear-gradient(90deg, #FF0101, #4DFF01)",
+	"linear-gradient(315deg, #EC0101, #5044A9)",
+	"linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)",
+	"linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%)",
+	"linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%)",
+	"linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%)",
+	"linear-gradient(to right, #4facfe 0%, #00f2fe 100%)",
+	"linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%)",
+	"linear-gradient(to right, #fa709a 0%, #fee140 100%)",
+	"linear-gradient(to top, #30cfd0 0%, #330867 100%)",
+	"linear-gradient(to top, #c471f5 0%, #fa71cd 100%)",
+	"linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)",
+	"linear-gradient(to top, #48c6ef 0%, #6f86d6 100%)",
+	"linear-gradient(to right, #0acffe 0%, #495aff 100%)",
 ];
 
 interface SettingsPanelProps {
-  selected: string;
-  onWallpaperChange: (path: string) => void;
-  selectedZoomDepth?: ZoomDepth | null;
-  onZoomDepthChange?: (depth: ZoomDepth) => void;
-  selectedZoomId?: string | null;
-  onZoomDelete?: (id: string) => void;
-  selectedTrimId?: string | null;
-  onTrimDelete?: (id: string) => void;
-  shadowIntensity?: number;
-  onShadowChange?: (intensity: number) => void;
-  backgroundBlur?: number;
-  onBackgroundBlurChange?: (amount: number) => void;
-  zoomMotionBlur?: number;
-  onZoomMotionBlurChange?: (amount: number) => void;
-  connectZooms?: boolean;
-  onConnectZoomsChange?: (enabled: boolean) => void;
-  showCursor?: boolean;
-  onShowCursorChange?: (enabled: boolean) => void;
-  loopCursor?: boolean;
-  onLoopCursorChange?: (enabled: boolean) => void;
-  cursorSize?: number;
-  onCursorSizeChange?: (size: number) => void;
-  cursorSmoothing?: number;
-  onCursorSmoothingChange?: (smoothing: number) => void;
-  cursorMotionBlur?: number;
-  onCursorMotionBlurChange?: (amount: number) => void;
-  cursorClickBounce?: number;
-  onCursorClickBounceChange?: (amount: number) => void;
-  cursorSway?: number;
-  onCursorSwayChange?: (amount: number) => void;
-  borderRadius?: number;
-  onBorderRadiusChange?: (radius: number) => void;
-  padding?: number;
-  onPaddingChange?: (padding: number) => void;
-  cropRegion?: CropRegion;
-  onCropChange?: (region: CropRegion) => void;
-  aspectRatio: AspectRatio;
-  videoElement?: HTMLVideoElement | null;
-  exportQuality?: ExportQuality;
-  onExportQualityChange?: (quality: ExportQuality) => void;
-  // Export format settings
-  exportFormat?: ExportFormat;
-  onExportFormatChange?: (format: ExportFormat) => void;
-  gifFrameRate?: GifFrameRate;
-  onGifFrameRateChange?: (rate: GifFrameRate) => void;
-  gifLoop?: boolean;
-  onGifLoopChange?: (loop: boolean) => void;
-  gifSizePreset?: GifSizePreset;
-  onGifSizePresetChange?: (preset: GifSizePreset) => void;
-  gifOutputDimensions?: { width: number; height: number };
-  onSaveProject?: () => void;
-  onLoadProject?: () => void;
-  onExport?: () => void;
-  selectedAnnotationId?: string | null;
-  annotationRegions?: AnnotationRegion[];
-  onAnnotationContentChange?: (id: string, content: string) => void;
-  onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
-  onAnnotationStyleChange?: (
-    id: string,
-    style: Partial<AnnotationRegion["style"]>,
-  ) => void;
-  onAnnotationFigureDataChange?: (id: string, figureData: any) => void;
-  onAnnotationDelete?: (id: string) => void;
-  selectedSpeedId?: string | null;
-  selectedSpeedValue?: PlaybackSpeed | null;
-  onSpeedChange?: (speed: PlaybackSpeed) => void;
-  onSpeedDelete?: (id: string) => void;
+	selected: string;
+	onWallpaperChange: (path: string) => void;
+	selectedZoomDepth?: ZoomDepth | null;
+	onZoomDepthChange?: (depth: ZoomDepth) => void;
+	selectedZoomId?: string | null;
+	onZoomDelete?: (id: string) => void;
+	selectedTrimId?: string | null;
+	onTrimDelete?: (id: string) => void;
+	shadowIntensity?: number;
+	onShadowChange?: (intensity: number) => void;
+	backgroundBlur?: number;
+	onBackgroundBlurChange?: (amount: number) => void;
+	zoomMotionBlur?: number;
+	onZoomMotionBlurChange?: (amount: number) => void;
+	connectZooms?: boolean;
+	onConnectZoomsChange?: (enabled: boolean) => void;
+	showCursor?: boolean;
+	onShowCursorChange?: (enabled: boolean) => void;
+	loopCursor?: boolean;
+	onLoopCursorChange?: (enabled: boolean) => void;
+	cursorSize?: number;
+	onCursorSizeChange?: (size: number) => void;
+	cursorSmoothing?: number;
+	onCursorSmoothingChange?: (smoothing: number) => void;
+	cursorMotionBlur?: number;
+	onCursorMotionBlurChange?: (amount: number) => void;
+	cursorClickBounce?: number;
+	onCursorClickBounceChange?: (amount: number) => void;
+	cursorSway?: number;
+	onCursorSwayChange?: (amount: number) => void;
+	borderRadius?: number;
+	onBorderRadiusChange?: (radius: number) => void;
+	padding?: number;
+	onPaddingChange?: (padding: number) => void;
+	cropRegion?: CropRegion;
+	onCropChange?: (region: CropRegion) => void;
+	aspectRatio: AspectRatio;
+	videoElement?: HTMLVideoElement | null;
+	exportQuality?: ExportQuality;
+	onExportQualityChange?: (quality: ExportQuality) => void;
+	// Export format settings
+	exportFormat?: ExportFormat;
+	onExportFormatChange?: (format: ExportFormat) => void;
+	gifFrameRate?: GifFrameRate;
+	onGifFrameRateChange?: (rate: GifFrameRate) => void;
+	gifLoop?: boolean;
+	onGifLoopChange?: (loop: boolean) => void;
+	gifSizePreset?: GifSizePreset;
+	onGifSizePresetChange?: (preset: GifSizePreset) => void;
+	gifOutputDimensions?: { width: number; height: number };
+	onSaveProject?: () => void;
+	onLoadProject?: () => void;
+	onExport?: () => void;
+	selectedAnnotationId?: string | null;
+	annotationRegions?: AnnotationRegion[];
+	onAnnotationContentChange?: (id: string, content: string) => void;
+	onAnnotationTypeChange?: (id: string, type: AnnotationType) => void;
+	onAnnotationStyleChange?: (id: string, style: Partial<AnnotationRegion["style"]>) => void;
+	onAnnotationFigureDataChange?: (id: string, figureData: any) => void;
+	onAnnotationDelete?: (id: string) => void;
+	selectedSpeedId?: string | null;
+	selectedSpeedValue?: PlaybackSpeed | null;
+	onSpeedChange?: (speed: PlaybackSpeed) => void;
+	onSpeedDelete?: (id: string) => void;
 }
 
 export default SettingsPanel;
 
 const ZOOM_DEPTH_OPTIONS: Array<{ depth: ZoomDepth; label: string }> = [
-  { depth: 1, label: "1.25×" },
-  { depth: 2, label: "1.5×" },
-  { depth: 3, label: "1.8×" },
-  { depth: 4, label: "2.2×" },
-  { depth: 5, label: "3.5×" },
-  { depth: 6, label: "5×" },
+	{ depth: 1, label: "1.25×" },
+	{ depth: 2, label: "1.5×" },
+	{ depth: 3, label: "1.8×" },
+	{ depth: 4, label: "2.2×" },
+	{ depth: 5, label: "3.5×" },
+	{ depth: 6, label: "5×" },
 ];
 
 export function SettingsPanel({
-  selected,
-  onWallpaperChange,
-  selectedZoomDepth,
-  onZoomDepthChange,
-  selectedZoomId,
-  onZoomDelete,
-  selectedTrimId,
-  onTrimDelete,
-  shadowIntensity = 0.67,
-  onShadowChange,
-  backgroundBlur = 0,
-  onBackgroundBlurChange,
-  zoomMotionBlur = 0,
-  onZoomMotionBlurChange,
-  connectZooms = true,
-  onConnectZoomsChange,
-  showCursor = false,
-  onShowCursorChange,
-  loopCursor = false,
-  onLoopCursorChange,
-  cursorSize = 5,
-  onCursorSizeChange,
-  cursorSmoothing = 2,
-  onCursorSmoothingChange,
-  cursorMotionBlur = 0.35,
-  onCursorMotionBlurChange,
-  cursorClickBounce = 1,
-  onCursorClickBounceChange,
-  cursorSway = DEFAULT_CURSOR_SWAY,
-  onCursorSwayChange,
-  borderRadius = 12.5,
-  onBorderRadiusChange,
-  padding = 50,
-  onPaddingChange,
-  cropRegion,
-  onCropChange,
-  aspectRatio,
-  videoElement,
-  exportQuality = "good",
-  onExportQualityChange,
-  exportFormat = "mp4",
-  onExportFormatChange,
-  gifFrameRate = 15,
-  onGifFrameRateChange,
-  gifLoop = true,
-  onGifLoopChange,
-  gifSizePreset = "medium",
-  onGifSizePresetChange,
-  gifOutputDimensions = { width: 1280, height: 720 },
-  onSaveProject,
-  onLoadProject,
-  onExport,
-  selectedAnnotationId,
-  annotationRegions = [],
-  onAnnotationContentChange,
-  onAnnotationTypeChange,
-  onAnnotationStyleChange,
-  onAnnotationFigureDataChange,
-  onAnnotationDelete,
-  selectedSpeedId,
-  selectedSpeedValue,
-  onSpeedChange,
-  onSpeedDelete,
+	selected,
+	onWallpaperChange,
+	selectedZoomDepth,
+	onZoomDepthChange,
+	selectedZoomId,
+	onZoomDelete,
+	selectedTrimId,
+	onTrimDelete,
+	shadowIntensity = 0.67,
+	onShadowChange,
+	backgroundBlur = 0,
+	onBackgroundBlurChange,
+	zoomMotionBlur = 0,
+	onZoomMotionBlurChange,
+	connectZooms = true,
+	onConnectZoomsChange,
+	showCursor = false,
+	onShowCursorChange,
+	loopCursor = false,
+	onLoopCursorChange,
+	cursorSize = 5,
+	onCursorSizeChange,
+	cursorSmoothing = 2,
+	onCursorSmoothingChange,
+	cursorMotionBlur = 0.35,
+	onCursorMotionBlurChange,
+	cursorClickBounce = 1,
+	onCursorClickBounceChange,
+	cursorSway = DEFAULT_CURSOR_SWAY,
+	onCursorSwayChange,
+	borderRadius = 12.5,
+	onBorderRadiusChange,
+	padding = 50,
+	onPaddingChange,
+	cropRegion,
+	onCropChange,
+	aspectRatio,
+	videoElement,
+	exportQuality = "good",
+	onExportQualityChange,
+	exportFormat = "mp4",
+	onExportFormatChange,
+	gifFrameRate = 15,
+	onGifFrameRateChange,
+	gifLoop = true,
+	onGifLoopChange,
+	gifSizePreset = "medium",
+	onGifSizePresetChange,
+	gifOutputDimensions = { width: 1280, height: 720 },
+	onSaveProject,
+	onLoadProject,
+	onExport,
+	selectedAnnotationId,
+	annotationRegions = [],
+	onAnnotationContentChange,
+	onAnnotationTypeChange,
+	onAnnotationStyleChange,
+	onAnnotationFigureDataChange,
+	onAnnotationDelete,
+	selectedSpeedId,
+	selectedSpeedValue,
+	onSpeedChange,
+	onSpeedDelete,
 }: SettingsPanelProps) {
-  const tSettings = useScopedT("settings");
-  const { t } = useI18n();
-  const [wallpaperPreviewPaths, setWallpaperPreviewPaths] = useState<string[]>(
-    [],
-  );
-  const [customImages, setCustomImages] = useState<string[]>([]);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+	const tSettings = useScopedT("settings");
+	const { t } = useI18n();
+	const [wallpaperPreviewPaths, setWallpaperPreviewPaths] = useState<string[]>([]);
+	const [customImages, setCustomImages] = useState<string[]>([]);
+	const fileInputRef = useRef<HTMLInputElement>(null);
 
-  useEffect(() => {
-    let mounted = true;
-    (async () => {
-      try {
-        const resolved = await Promise.all(
-          WALLPAPER_RELATIVE_PATHS.map(async (path) =>
-            getRenderableAssetUrl(await getAssetPath(path)),
-          ),
-        );
-        if (mounted) setWallpaperPreviewPaths(resolved);
-      } catch (err) {
-        if (mounted) setWallpaperPreviewPaths(WALLPAPER_PATHS);
-      }
-    })();
-    return () => {
-      mounted = false;
-    };
-  }, []);
-  const colorPalette = [
-    "#FF0000",
-    "#FFD700",
-    "#00FF00",
-    "#FFFFFF",
-    "#0000FF",
-    "#FF6B00",
-    "#9B59B6",
-    "#E91E63",
-    "#00BCD4",
-    "#FF5722",
-    "#8BC34A",
-    "#FFC107",
-    "#2563EB",
-    "#000000",
-    "#607D8B",
-    "#795548",
-  ];
+	useEffect(() => {
+		let mounted = true;
+		(async () => {
+			try {
+				const resolved = await Promise.all(
+					WALLPAPER_RELATIVE_PATHS.map(async (path) =>
+						getRenderableAssetUrl(await getAssetPath(path)),
+					),
+				);
+				if (mounted) setWallpaperPreviewPaths(resolved);
+			} catch (err) {
+				if (mounted) setWallpaperPreviewPaths(WALLPAPER_PATHS);
+			}
+		})();
+		return () => {
+			mounted = false;
+		};
+	}, []);
+	const colorPalette = [
+		"#FF0000",
+		"#FFD700",
+		"#00FF00",
+		"#FFFFFF",
+		"#0000FF",
+		"#FF6B00",
+		"#9B59B6",
+		"#E91E63",
+		"#00BCD4",
+		"#FF5722",
+		"#8BC34A",
+		"#FFC107",
+		"#2563EB",
+		"#000000",
+		"#607D8B",
+		"#795548",
+	];
 
-  const [selectedColor, setSelectedColor] = useState("#ADADAD");
-  const [gradient, setGradient] = useState<string>(GRADIENTS[0]);
-  const [showCropModal, setShowCropModal] = useState(false);
-  const cropSnapshotRef = useRef<CropRegion | null>(null);
+	const [selectedColor, setSelectedColor] = useState("#ADADAD");
+	const [gradient, setGradient] = useState<string>(GRADIENTS[0]);
+	const [showCropModal, setShowCropModal] = useState(false);
+	const cropSnapshotRef = useRef<CropRegion | null>(null);
 
-  const zoomEnabled = Boolean(selectedZoomDepth);
-  const trimEnabled = Boolean(selectedTrimId);
+	const zoomEnabled = Boolean(selectedZoomDepth);
+	const trimEnabled = Boolean(selectedTrimId);
 
-  const handleDeleteClick = () => {
-    if (selectedZoomId && onZoomDelete) {
-      onZoomDelete(selectedZoomId);
-    }
-  };
+	const handleDeleteClick = () => {
+		if (selectedZoomId && onZoomDelete) {
+			onZoomDelete(selectedZoomId);
+		}
+	};
 
-  const handleTrimDeleteClick = () => {
-    if (selectedTrimId && onTrimDelete) {
-      onTrimDelete(selectedTrimId);
-    }
-  };
+	const handleTrimDeleteClick = () => {
+		if (selectedTrimId && onTrimDelete) {
+			onTrimDelete(selectedTrimId);
+		}
+	};
 
-  const handleCropToggle = () => {
-    if (!showCropModal && cropRegion) {
-      cropSnapshotRef.current = { ...cropRegion };
-    }
-    setShowCropModal(!showCropModal);
-  };
+	const handleCropToggle = () => {
+		if (!showCropModal && cropRegion) {
+			cropSnapshotRef.current = { ...cropRegion };
+		}
+		setShowCropModal(!showCropModal);
+	};
 
-  const handleCropCancel = () => {
-    if (cropSnapshotRef.current && onCropChange) {
-      onCropChange(cropSnapshotRef.current);
-    }
-    setShowCropModal(false);
-  };
+	const handleCropCancel = () => {
+		if (cropSnapshotRef.current && onCropChange) {
+			onCropChange(cropSnapshotRef.current);
+		}
+		setShowCropModal(false);
+	};
 
-  const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = event.target.files;
-    if (!files || files.length === 0) return;
+	const handleImageUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+		const files = event.target.files;
+		if (!files || files.length === 0) return;
 
-    const file = files[0];
+		const file = files[0];
 
-    // Validate file type - only allow JPG/JPEG
-    const validTypes = ["image/jpeg", "image/jpg"];
-    if (!validTypes.includes(file.type)) {
-      toast.error(tSettings("background.uploadError"), {
-        description: tSettings("background.uploadErrorDescription"),
-      });
-      event.target.value = "";
-      return;
-    }
+		// Validate file type - only allow JPG/JPEG
+		const validTypes = ["image/jpeg", "image/jpg"];
+		if (!validTypes.includes(file.type)) {
+			toast.error(tSettings("background.uploadError"), {
+				description: tSettings("background.uploadErrorDescription"),
+			});
+			event.target.value = "";
+			return;
+		}
 
-    const reader = new FileReader();
+		const reader = new FileReader();
 
-    reader.onload = (e) => {
-      const dataUrl = e.target?.result as string;
-      if (dataUrl) {
-        setCustomImages((prev) => [...prev, dataUrl]);
-        onWallpaperChange(dataUrl);
-        toast.success(tSettings("background.uploadSuccess"));
-      }
-    };
+		reader.onload = (e) => {
+			const dataUrl = e.target?.result as string;
+			if (dataUrl) {
+				setCustomImages((prev) => [...prev, dataUrl]);
+				onWallpaperChange(dataUrl);
+				toast.success(tSettings("background.uploadSuccess"));
+			}
+		};
 
-    reader.onerror = () => {
-      toast.error(t("common.failedToUploadImage"), {
-        description: t("common.errorReadingFile"),
-      });
-    };
+		reader.onerror = () => {
+			toast.error(t("common.failedToUploadImage"), {
+				description: t("common.errorReadingFile"),
+			});
+		};
 
-    reader.readAsDataURL(file);
-    // Reset input so the same file can be selected again
-    event.target.value = "";
-  };
+		reader.readAsDataURL(file);
+		// Reset input so the same file can be selected again
+		event.target.value = "";
+	};
 
-  const handleRemoveCustomImage = (
-    imageUrl: string,
-    event: React.MouseEvent,
-  ) => {
-    event.stopPropagation();
-    setCustomImages((prev) => prev.filter((img) => img !== imageUrl));
-    // If the removed image was selected, clear selection
-    if (selected === imageUrl) {
-      onWallpaperChange(WALLPAPER_PATHS[0]);
-    }
-  };
+	const handleRemoveCustomImage = (imageUrl: string, event: React.MouseEvent) => {
+		event.stopPropagation();
+		setCustomImages((prev) => prev.filter((img) => img !== imageUrl));
+		// If the removed image was selected, clear selection
+		if (selected === imageUrl) {
+			onWallpaperChange(WALLPAPER_PATHS[0]);
+		}
+	};
 
-  // Find selected annotation
-  const selectedAnnotation = selectedAnnotationId
-    ? annotationRegions.find((a) => a.id === selectedAnnotationId)
-    : null;
+	// Find selected annotation
+	const selectedAnnotation = selectedAnnotationId
+		? annotationRegions.find((a) => a.id === selectedAnnotationId)
+		: null;
 
-  // If an annotation is selected, show annotation settings instead
-  if (
-    selectedAnnotation &&
-    onAnnotationContentChange &&
-    onAnnotationTypeChange &&
-    onAnnotationStyleChange &&
-    onAnnotationDelete
-  ) {
-    return (
-      <AnnotationSettingsPanel
-        annotation={selectedAnnotation}
-        onContentChange={(content) =>
-          onAnnotationContentChange(selectedAnnotation.id, content)
-        }
-        onTypeChange={(type) =>
-          onAnnotationTypeChange(selectedAnnotation.id, type)
-        }
-        onStyleChange={(style) =>
-          onAnnotationStyleChange(selectedAnnotation.id, style)
-        }
-        onFigureDataChange={
-          onAnnotationFigureDataChange
-            ? (figureData) =>
-                onAnnotationFigureDataChange(selectedAnnotation.id, figureData)
-            : undefined
-        }
-        onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
-      />
-    );
-  }
+	// If an annotation is selected, show annotation settings instead
+	if (
+		selectedAnnotation &&
+		onAnnotationContentChange &&
+		onAnnotationTypeChange &&
+		onAnnotationStyleChange &&
+		onAnnotationDelete
+	) {
+		return (
+			<AnnotationSettingsPanel
+				annotation={selectedAnnotation}
+				onContentChange={(content) => onAnnotationContentChange(selectedAnnotation.id, content)}
+				onTypeChange={(type) => onAnnotationTypeChange(selectedAnnotation.id, type)}
+				onStyleChange={(style) => onAnnotationStyleChange(selectedAnnotation.id, style)}
+				onFigureDataChange={
+					onAnnotationFigureDataChange
+						? (figureData) => onAnnotationFigureDataChange(selectedAnnotation.id, figureData)
+						: undefined
+				}
+				onDelete={() => onAnnotationDelete(selectedAnnotation.id)}
+			/>
+		);
+	}
 
-  return (
-    <div className="flex-[2] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl flex flex-col shadow-xl h-full overflow-hidden">
-      <div className="flex-1 overflow-y-auto custom-scrollbar p-4 pb-0">
-        <div className="mb-4">
-          <div className="flex items-center justify-between mb-3">
-            <span className="text-sm font-medium text-slate-200">
-              {tSettings("zoom.level")}
-            </span>
-            <div className="flex items-center gap-2">
-              {zoomEnabled && selectedZoomDepth && (
-                <span className="text-[10px] uppercase tracking-wider font-medium text-[#2563EB] bg-[#2563EB]/10 px-2 py-0.5 rounded-full">
-                  {
-                    ZOOM_DEPTH_OPTIONS.find(
-                      (o) => o.depth === selectedZoomDepth,
-                    )?.label
-                  }
-                </span>
-              )}
-              <KeyboardShortcutsHelp />
-            </div>
-          </div>
-          <div className="grid grid-cols-6 gap-1.5">
-            {ZOOM_DEPTH_OPTIONS.map((option) => {
-              const isActive = selectedZoomDepth === option.depth;
-              return (
-                <Button
-                  key={option.depth}
-                  type="button"
-                  disabled={!zoomEnabled}
-                  onClick={() => onZoomDepthChange?.(option.depth)}
-                  className={cn(
-                    "h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all",
-                    "duration-200 ease-out",
-                    zoomEnabled
-                      ? "opacity-100 cursor-pointer"
-                      : "opacity-40 cursor-not-allowed",
-                    isActive
-                      ? "border-[#2563EB] bg-[#2563EB] text-white shadow-[#2563EB]/20"
-                      : "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
-                  )}
-                >
-                  <span className="text-xs font-semibold">{option.label}</span>
-                </Button>
-              );
-            })}
-          </div>
-          {!zoomEnabled && (
-            <p className="text-[10px] text-slate-500 mt-2 text-center">
-              {tSettings("zoom.selectRegion")}
-            </p>
-          )}
-          {zoomEnabled && (
-            <Button
-              onClick={handleDeleteClick}
-              variant="destructive"
-              size="sm"
-              className="mt-2 w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
-            >
-              <Trash2 className="w-3 h-3" />
-              {tSettings("zoom.deleteZoom")}
-            </Button>
-          )}
-        </div>
+	return (
+		<div className="flex-[2] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl flex flex-col shadow-xl h-full overflow-hidden">
+			<div className="flex-1 overflow-y-auto custom-scrollbar p-4 pb-0">
+				<div className="mb-4">
+					<div className="flex items-center justify-between mb-3">
+						<span className="text-sm font-medium text-slate-200">{tSettings("zoom.level")}</span>
+						<div className="flex items-center gap-2">
+							{zoomEnabled && selectedZoomDepth && (
+								<span className="text-[10px] uppercase tracking-wider font-medium text-[#2563EB] bg-[#2563EB]/10 px-2 py-0.5 rounded-full">
+									{ZOOM_DEPTH_OPTIONS.find((o) => o.depth === selectedZoomDepth)?.label}
+								</span>
+							)}
+							<KeyboardShortcutsHelp />
+						</div>
+					</div>
+					<div className="grid grid-cols-6 gap-1.5">
+						{ZOOM_DEPTH_OPTIONS.map((option) => {
+							const isActive = selectedZoomDepth === option.depth;
+							return (
+								<Button
+									key={option.depth}
+									type="button"
+									disabled={!zoomEnabled}
+									onClick={() => onZoomDepthChange?.(option.depth)}
+									className={cn(
+										"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all",
+										"duration-200 ease-out",
+										zoomEnabled ? "opacity-100 cursor-pointer" : "opacity-40 cursor-not-allowed",
+										isActive
+											? "border-[#2563EB] bg-[#2563EB] text-white shadow-[#2563EB]/20"
+											: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
+									)}
+								>
+									<span className="text-xs font-semibold">{option.label}</span>
+								</Button>
+							);
+						})}
+					</div>
+					{!zoomEnabled && (
+						<p className="text-[10px] text-slate-500 mt-2 text-center">
+							{tSettings("zoom.selectRegion")}
+						</p>
+					)}
+					{zoomEnabled && (
+						<Button
+							onClick={handleDeleteClick}
+							variant="destructive"
+							size="sm"
+							className="mt-2 w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+						>
+							<Trash2 className="w-3 h-3" />
+							{tSettings("zoom.deleteZoom")}
+						</Button>
+					)}
+				</div>
 
-        {trimEnabled && (
-          <div className="mb-4">
-            <Button
-              onClick={handleTrimDeleteClick}
-              variant="destructive"
-              size="sm"
-              className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
-            >
-              <Trash2 className="w-3 h-3" />
-              {tSettings("trim.deleteRegion")}
-            </Button>
-          </div>
-        )}
+				{trimEnabled && (
+					<div className="mb-4">
+						<Button
+							onClick={handleTrimDeleteClick}
+							variant="destructive"
+							size="sm"
+							className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+						>
+							<Trash2 className="w-3 h-3" />
+							{tSettings("trim.deleteRegion")}
+						</Button>
+					</div>
+				)}
 
-        <div className="mb-4">
-          <div className="flex items-center justify-between mb-3">
-            <span className="text-sm font-medium text-slate-200">
-              {tSettings("speed.playbackSpeed")}
-            </span>
-            {selectedSpeedId && selectedSpeedValue && (
-              <span className="text-[10px] uppercase tracking-wider font-medium text-[#d97706] bg-[#d97706]/10 px-2 py-0.5 rounded-full">
-                {SPEED_OPTIONS.find((o) => o.speed === selectedSpeedValue)
-                  ?.label ?? `${selectedSpeedValue}×`}
-              </span>
-            )}
-          </div>
-          <div className="grid grid-cols-7 gap-1.5">
-            {SPEED_OPTIONS.map((option) => {
-              const isActive = selectedSpeedValue === option.speed;
-              return (
-                <Button
-                  key={option.speed}
-                  type="button"
-                  disabled={!selectedSpeedId}
-                  onClick={() => onSpeedChange?.(option.speed)}
-                  className={cn(
-                    "h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all",
-                    "duration-200 ease-out",
-                    selectedSpeedId
-                      ? "opacity-100 cursor-pointer"
-                      : "opacity-40 cursor-not-allowed",
-                    isActive
-                      ? "border-[#d97706] bg-[#d97706] text-white shadow-[#d97706]/20"
-                      : "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
-                  )}
-                >
-                  <span className="text-xs font-semibold">{option.label}</span>
-                </Button>
-              );
-            })}
-          </div>
-          {!selectedSpeedId && (
-            <p className="text-[10px] text-slate-500 mt-2 text-center">
-              {tSettings("speed.selectRegion")}
-            </p>
-          )}
-          {selectedSpeedId && (
-            <Button
-              onClick={() =>
-                selectedSpeedId && onSpeedDelete?.(selectedSpeedId)
-              }
-              variant="destructive"
-              size="sm"
-              className="mt-2 w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
-            >
-              <Trash2 className="w-3 h-3" />
-              {tSettings("speed.deleteRegion")}
-            </Button>
-          )}
-        </div>
+				<div className="mb-4">
+					<div className="flex items-center justify-between mb-3">
+						<span className="text-sm font-medium text-slate-200">
+							{tSettings("speed.playbackSpeed")}
+						</span>
+						{selectedSpeedId && selectedSpeedValue && (
+							<span className="text-[10px] uppercase tracking-wider font-medium text-[#d97706] bg-[#d97706]/10 px-2 py-0.5 rounded-full">
+								{SPEED_OPTIONS.find((o) => o.speed === selectedSpeedValue)?.label ??
+									`${selectedSpeedValue}×`}
+							</span>
+						)}
+					</div>
+					<div className="grid grid-cols-7 gap-1.5">
+						{SPEED_OPTIONS.map((option) => {
+							const isActive = selectedSpeedValue === option.speed;
+							return (
+								<Button
+									key={option.speed}
+									type="button"
+									disabled={!selectedSpeedId}
+									onClick={() => onSpeedChange?.(option.speed)}
+									className={cn(
+										"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all",
+										"duration-200 ease-out",
+										selectedSpeedId
+											? "opacity-100 cursor-pointer"
+											: "opacity-40 cursor-not-allowed",
+										isActive
+											? "border-[#d97706] bg-[#d97706] text-white shadow-[#d97706]/20"
+											: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
+									)}
+								>
+									<span className="text-xs font-semibold">{option.label}</span>
+								</Button>
+							);
+						})}
+					</div>
+					{!selectedSpeedId && (
+						<p className="text-[10px] text-slate-500 mt-2 text-center">
+							{tSettings("speed.selectRegion")}
+						</p>
+					)}
+					{selectedSpeedId && (
+						<Button
+							onClick={() => selectedSpeedId && onSpeedDelete?.(selectedSpeedId)}
+							variant="destructive"
+							size="sm"
+							className="mt-2 w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all h-8 text-xs"
+						>
+							<Trash2 className="w-3 h-3" />
+							{tSettings("speed.deleteRegion")}
+						</Button>
+					)}
+				</div>
 
-        <Accordion
-          type="multiple"
-          defaultValue={["effects", "background"]}
-          className="space-y-1"
-        >
-          <AccordionItem
-            value="effects"
-            className="border-white/5 rounded-xl bg-white/[0.02] px-3"
-          >
-            <AccordionTrigger className="py-2.5 hover:no-underline">
-              <div className="flex items-center gap-2">
-                <Sparkles className="w-4 h-4 text-[#2563EB]" />
-                <span className="text-xs font-medium">
-                  {tSettings("effects.title")}
-                </span>
-              </div>
-            </AccordionTrigger>
-            <AccordionContent className="pb-3">
-              <div className="grid grid-cols-2 gap-2 mb-3">
-                <div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
-                  <div className="text-[10px] font-medium text-slate-300">
-                    {tSettings("effects.showCursor")}
-                  </div>
-                  <Switch
-                    checked={showCursor}
-                    onCheckedChange={onShowCursorChange}
-                    className="data-[state=checked]:bg-[#2563EB] scale-90"
-                  />
-                </div>
-                <div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
-                  <div>
-                    <div className="text-[10px] font-medium text-slate-300">
-                      {tSettings("effects.loopCursor")}
-                    </div>
-                  </div>
-                  <Switch
-                    checked={loopCursor}
-                    onCheckedChange={onLoopCursorChange}
-                    className="data-[state=checked]:bg-[#2563EB] scale-90"
-                  />
-                </div>
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.backgroundBlur")}
-                    value={backgroundBlur}
-                    defaultValue={0}
-                    min={0}
-                    max={8}
-                    step={0.25}
-                    onChange={(v) => onBackgroundBlurChange?.(v)}
-                    formatValue={(v) => `${v.toFixed(1)}px`}
-                    parseInput={(t) => parseFloat(t.replace(/px$/, ""))}
-                  />
-                </div>
-              </div>
+				<Accordion type="multiple" defaultValue={["effects", "background"]} className="space-y-1">
+					<AccordionItem value="effects" className="border-white/5 rounded-xl bg-white/[0.02] px-3">
+						<AccordionTrigger className="py-2.5 hover:no-underline">
+							<div className="flex items-center gap-2">
+								<Sparkles className="w-4 h-4 text-[#2563EB]" />
+								<span className="text-xs font-medium">{tSettings("effects.title")}</span>
+							</div>
+						</AccordionTrigger>
+						<AccordionContent className="pb-3">
+							<div className="grid grid-cols-2 gap-2 mb-3">
+								<div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
+									<div className="text-[10px] font-medium text-slate-300">
+										{tSettings("effects.showCursor")}
+									</div>
+									<Switch
+										checked={showCursor}
+										onCheckedChange={onShowCursorChange}
+										className="data-[state=checked]:bg-[#2563EB] scale-90"
+									/>
+								</div>
+								<div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
+									<div>
+										<div className="text-[10px] font-medium text-slate-300">
+											{tSettings("effects.loopCursor")}
+										</div>
+									</div>
+									<Switch
+										checked={loopCursor}
+										onCheckedChange={onLoopCursorChange}
+										className="data-[state=checked]:bg-[#2563EB] scale-90"
+									/>
+								</div>
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.backgroundBlur")}
+										value={backgroundBlur}
+										defaultValue={0}
+										min={0}
+										max={8}
+										step={0.25}
+										onChange={(v) => onBackgroundBlurChange?.(v)}
+										formatValue={(v) => `${v.toFixed(1)}px`}
+										parseInput={(t) => parseFloat(t.replace(/px$/, ""))}
+									/>
+								</div>
+							</div>
 
-              <div className="grid grid-cols-2 gap-2 mb-3">
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.zoomMotionBlur")}
-                    value={zoomMotionBlur}
-                    defaultValue={DEFAULT_ZOOM_MOTION_BLUR}
-                    min={0}
-                    max={2}
-                    step={0.05}
-                    onChange={(v) => onZoomMotionBlurChange?.(v)}
-                    formatValue={(v) => `${v.toFixed(2)}×`}
-                    parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
-                  />
-                </div>
+							<div className="grid grid-cols-2 gap-2 mb-3">
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.zoomMotionBlur")}
+										value={zoomMotionBlur}
+										defaultValue={DEFAULT_ZOOM_MOTION_BLUR}
+										min={0}
+										max={2}
+										step={0.05}
+										onChange={(v) => onZoomMotionBlurChange?.(v)}
+										formatValue={(v) => `${v.toFixed(2)}×`}
+										parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
+									/>
+								</div>
 
-                <div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
-                  <div className="text-[10px] font-medium text-slate-300">
-                    {tSettings("effects.connectZooms")}
-                  </div>
-                  <Switch
-                    checked={connectZooms}
-                    onCheckedChange={onConnectZoomsChange}
-                    className="data-[state=checked]:bg-[#2563EB] scale-90"
-                  />
-                </div>
-              </div>
+								<div className="flex items-center justify-between p-2 rounded-lg bg-white/5 border border-white/5">
+									<div className="text-[10px] font-medium text-slate-300">
+										{tSettings("effects.connectZooms")}
+									</div>
+									<Switch
+										checked={connectZooms}
+										onCheckedChange={onConnectZoomsChange}
+										className="data-[state=checked]:bg-[#2563EB] scale-90"
+									/>
+								</div>
+							</div>
 
-              <div className="grid grid-cols-2 gap-2 mb-3">
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.cursorSize")}
-                    value={cursorSize}
-                    defaultValue={DEFAULT_CURSOR_SIZE}
-                    min={0.5}
-                    max={10}
-                    step={0.05}
-                    onChange={(v) => onCursorSizeChange?.(v)}
-                    formatValue={(v) => `${v.toFixed(2)}×`}
-                    parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
-                  />
-                </div>
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.cursorSmoothing")}
-                    value={cursorSmoothing}
-                    defaultValue={DEFAULT_CURSOR_SMOOTHING}
-                    min={0}
-                    max={2}
-                    step={0.01}
-                    onChange={(v) => onCursorSmoothingChange?.(v)}
-                    formatValue={(v) => (v <= 0 ? "Off" : v.toFixed(2))}
-                    parseInput={(t) => parseFloat(t)}
-                  />
-                </div>
-              </div>
+							<div className="grid grid-cols-2 gap-2 mb-3">
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.cursorSize")}
+										value={cursorSize}
+										defaultValue={DEFAULT_CURSOR_SIZE}
+										min={0.5}
+										max={10}
+										step={0.05}
+										onChange={(v) => onCursorSizeChange?.(v)}
+										formatValue={(v) => `${v.toFixed(2)}×`}
+										parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
+									/>
+								</div>
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.cursorSmoothing")}
+										value={cursorSmoothing}
+										defaultValue={DEFAULT_CURSOR_SMOOTHING}
+										min={0}
+										max={2}
+										step={0.01}
+										onChange={(v) => onCursorSmoothingChange?.(v)}
+										formatValue={(v) => (v <= 0 ? "Off" : v.toFixed(2))}
+										parseInput={(t) => parseFloat(t)}
+									/>
+								</div>
+							</div>
 
-              <div className="grid grid-cols-2 gap-2 mb-3">
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.cursorMotionBlur")}
-                    value={cursorMotionBlur}
-                    defaultValue={DEFAULT_CURSOR_MOTION_BLUR}
-                    min={0}
-                    max={2}
-                    step={0.05}
-                    onChange={(v) => onCursorMotionBlurChange?.(v)}
-                    formatValue={(v) => `${v.toFixed(2)}×`}
-                    parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
-                  />
-                </div>
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.cursorClickBounce")}
-                    value={cursorClickBounce}
-                    defaultValue={DEFAULT_CURSOR_CLICK_BOUNCE}
-                    min={0}
-                    max={5}
-                    step={0.05}
-                    onChange={(v) => onCursorClickBounceChange?.(v)}
-                    formatValue={(v) => `${v.toFixed(2)}×`}
-                    parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
-                  />
-                </div>
-              </div>
+							<div className="grid grid-cols-2 gap-2 mb-3">
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.cursorMotionBlur")}
+										value={cursorMotionBlur}
+										defaultValue={DEFAULT_CURSOR_MOTION_BLUR}
+										min={0}
+										max={2}
+										step={0.05}
+										onChange={(v) => onCursorMotionBlurChange?.(v)}
+										formatValue={(v) => `${v.toFixed(2)}×`}
+										parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
+									/>
+								</div>
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.cursorClickBounce")}
+										value={cursorClickBounce}
+										defaultValue={DEFAULT_CURSOR_CLICK_BOUNCE}
+										min={0}
+										max={5}
+										step={0.05}
+										onChange={(v) => onCursorClickBounceChange?.(v)}
+										formatValue={(v) => `${v.toFixed(2)}×`}
+										parseInput={(t) => parseFloat(t.replace(/×$/, ""))}
+									/>
+								</div>
+							</div>
 
-              <div className="grid grid-cols-2 gap-2">
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.cursorSway")}
-                    value={cursorSway}
-                    defaultValue={DEFAULT_CURSOR_SWAY}
-                    min={0}
-                    max={2}
-                    step={0.05}
-                    onChange={(v) => onCursorSwayChange?.(v)}
-                    formatValue={(v) => (v <= 0 ? "Off" : `${v.toFixed(2)}×`)}
-                    parseInput={(t) => {
-                      const normalized = t.trim().toLowerCase();
-                      if (normalized === "off") {
-                        return 0;
-                      }
+							<div className="grid grid-cols-2 gap-2">
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.cursorSway")}
+										value={toCursorSwaySliderValue(cursorSway)}
+										defaultValue={toCursorSwaySliderValue(DEFAULT_CURSOR_SWAY)}
+										min={0}
+										max={toCursorSwaySliderValue(2)}
+										step={toCursorSwaySliderValue(0.05)}
+										onChange={(v) => onCursorSwayChange?.(fromCursorSwaySliderValue(v))}
+										formatValue={(v) => (v <= 0 ? "Off" : `${v.toFixed(2)}×`)}
+										parseInput={(t) => {
+											const normalized = t.trim().toLowerCase();
+											if (normalized === "off") {
+												return 0;
+											}
 
-                      return parseFloat(t.replace(/×$/, ""));
-                    }}
-                  />
-                </div>
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.shadow")}
-                    value={shadowIntensity}
-                    defaultValue={0}
-                    min={0}
-                    max={1}
-                    step={0.01}
-                    onChange={(v) => onShadowChange?.(v)}
-                    formatValue={(v) => `${Math.round(v * 100)}%`}
-                    parseInput={(t) => parseFloat(t.replace(/%$/, "")) / 100}
-                  />
-                </div>
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.roundness")}
-                    value={borderRadius}
-                    defaultValue={12.5}
-                    min={0}
-                    max={25}
-                    step={0.5}
-                    onChange={(v) => onBorderRadiusChange?.(v)}
-                    formatValue={(v) => `${v}px`}
-                    parseInput={(t) => parseFloat(t.replace(/px$/, ""))}
-                  />
-                </div>
-                <div className="p-2 rounded-lg bg-white/5 border border-white/5">
-                  <SliderControl
-                    label={tSettings("effects.padding")}
-                    value={padding}
-                    defaultValue={50}
-                    min={0}
-                    max={100}
-                    step={1}
-                    onChange={(v) => onPaddingChange?.(v)}
-                    formatValue={(v) => `${v}%`}
-                    parseInput={(t) => parseFloat(t.replace(/%$/, ""))}
-                  />
-                </div>
-              </div>
+											return parseFloat(t.replace(/×$/, ""));
+										}}
+									/>
+								</div>
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.shadow")}
+										value={shadowIntensity}
+										defaultValue={0}
+										min={0}
+										max={1}
+										step={0.01}
+										onChange={(v) => onShadowChange?.(v)}
+										formatValue={(v) => `${Math.round(v * 100)}%`}
+										parseInput={(t) => parseFloat(t.replace(/%$/, "")) / 100}
+									/>
+								</div>
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.roundness")}
+										value={borderRadius}
+										defaultValue={12.5}
+										min={0}
+										max={25}
+										step={0.5}
+										onChange={(v) => onBorderRadiusChange?.(v)}
+										formatValue={(v) => `${v}px`}
+										parseInput={(t) => parseFloat(t.replace(/px$/, ""))}
+									/>
+								</div>
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<SliderControl
+										label={tSettings("effects.padding")}
+										value={padding}
+										defaultValue={50}
+										min={0}
+										max={100}
+										step={1}
+										onChange={(v) => onPaddingChange?.(v)}
+										formatValue={(v) => `${v}%`}
+										parseInput={(t) => parseFloat(t.replace(/%$/, ""))}
+									/>
+								</div>
+							</div>
 
-              <Button
-                onClick={handleCropToggle}
-                variant="outline"
-                className="w-full mt-2 gap-1.5 bg-white/5 text-slate-200 border-white/10 hover:bg-white/10 hover:border-white/20 hover:text-white text-[10px] h-8 transition-all"
-              >
-                <Crop className="w-3 h-3" />
-                {tSettings("crop.title")}
-              </Button>
-            </AccordionContent>
-          </AccordionItem>
+							<Button
+								onClick={handleCropToggle}
+								variant="outline"
+								className="w-full mt-2 gap-1.5 bg-white/5 text-slate-200 border-white/10 hover:bg-white/10 hover:border-white/20 hover:text-white text-[10px] h-8 transition-all"
+							>
+								<Crop className="w-3 h-3" />
+								{tSettings("crop.title")}
+							</Button>
+						</AccordionContent>
+					</AccordionItem>
 
-          <AccordionItem
-            value="background"
-            className="border-white/5 rounded-xl bg-white/[0.02] px-3"
-          >
-            <AccordionTrigger className="py-2.5 hover:no-underline">
-              <div className="flex items-center gap-2">
-                <Palette className="w-4 h-4 text-[#2563EB]" />
-                <span className="text-xs font-medium">
-                  {tSettings("background.title")}
-                </span>
-              </div>
-            </AccordionTrigger>
-            <AccordionContent className="pb-3">
-              <Tabs defaultValue="image" className="w-full">
-                <TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
-                  <TabsTrigger
-                    value="image"
-                    className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
-                  >
-                    {tSettings("background.image")}
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="color"
-                    className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
-                  >
-                    {tSettings("background.color")}
-                  </TabsTrigger>
-                  <TabsTrigger
-                    value="gradient"
-                    className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
-                  >
-                    {tSettings("background.gradient")}
-                  </TabsTrigger>
-                </TabsList>
+					<AccordionItem
+						value="background"
+						className="border-white/5 rounded-xl bg-white/[0.02] px-3"
+					>
+						<AccordionTrigger className="py-2.5 hover:no-underline">
+							<div className="flex items-center gap-2">
+								<Palette className="w-4 h-4 text-[#2563EB]" />
+								<span className="text-xs font-medium">{tSettings("background.title")}</span>
+							</div>
+						</AccordionTrigger>
+						<AccordionContent className="pb-3">
+							<Tabs defaultValue="image" className="w-full">
+								<TabsList className="mb-2 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
+									<TabsTrigger
+										value="image"
+										className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+									>
+										{tSettings("background.image")}
+									</TabsTrigger>
+									<TabsTrigger
+										value="color"
+										className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+									>
+										{tSettings("background.color")}
+									</TabsTrigger>
+									<TabsTrigger
+										value="gradient"
+										className="data-[state=active]:bg-[#2563EB] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
+									>
+										{tSettings("background.gradient")}
+									</TabsTrigger>
+								</TabsList>
 
-                <div className="max-h-[min(200px,25vh)] overflow-y-auto custom-scrollbar">
-                  <TabsContent value="image" className="mt-0 space-y-2">
-                    <input
-                      type="file"
-                      ref={fileInputRef}
-                      onChange={handleImageUpload}
-                      accept=".jpg,.jpeg,image/jpeg"
-                      className="hidden"
-                    />
-                    <Button
-                      onClick={() => fileInputRef.current?.click()}
-                      variant="outline"
-                      className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#2563EB] hover:text-white hover:border-[#2563EB] transition-all h-7 text-[10px]"
-                    >
-                      <Upload className="w-3 h-3" />
-                      {tSettings("background.uploadCustom")}
-                    </Button>
+								<div className="max-h-[min(200px,25vh)] overflow-y-auto custom-scrollbar">
+									<TabsContent value="image" className="mt-0 space-y-2">
+										<input
+											type="file"
+											ref={fileInputRef}
+											onChange={handleImageUpload}
+											accept=".jpg,.jpeg,image/jpeg"
+											className="hidden"
+										/>
+										<Button
+											onClick={() => fileInputRef.current?.click()}
+											variant="outline"
+											className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#2563EB] hover:text-white hover:border-[#2563EB] transition-all h-7 text-[10px]"
+										>
+											<Upload className="w-3 h-3" />
+											{tSettings("background.uploadCustom")}
+										</Button>
 
-                    <div className="grid grid-cols-7 gap-1.5">
-                      {customImages.map((imageUrl, idx) => {
-                        const isSelected = selected === imageUrl;
-                        return (
-                          <div
-                            key={`custom-${idx}`}
-                            className={cn(
-                              "aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 relative group shadow-sm",
-                              isSelected
-                                ? "border-[#2563EB] ring-1 ring-[#2563EB]/30"
-                                : "border-white/10 hover:border-[#2563EB]/40 opacity-80 hover:opacity-100 bg-white/5",
-                            )}
-                            style={{
-                              backgroundImage: `url(${imageUrl})`,
-                              backgroundSize: "cover",
-                              backgroundPosition: "center",
-                            }}
-                            onClick={() => onWallpaperChange(imageUrl)}
-                            role="button"
-                          >
-                            <button
-                              onClick={(e) =>
-                                handleRemoveCustomImage(imageUrl, e)
-                              }
-                              className="absolute top-0.5 right-0.5 w-3 h-3 bg-red-500/90 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
-                            >
-                              <X className="w-2 h-2 text-white" />
-                            </button>
-                          </div>
-                        );
-                      })}
+										<div className="grid grid-cols-7 gap-1.5">
+											{customImages.map((imageUrl, idx) => {
+												const isSelected = selected === imageUrl;
+												return (
+													<div
+														key={`custom-${idx}`}
+														className={cn(
+															"aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 relative group shadow-sm",
+															isSelected
+																? "border-[#2563EB] ring-1 ring-[#2563EB]/30"
+																: "border-white/10 hover:border-[#2563EB]/40 opacity-80 hover:opacity-100 bg-white/5",
+														)}
+														style={{
+															backgroundImage: `url(${imageUrl})`,
+															backgroundSize: "cover",
+															backgroundPosition: "center",
+														}}
+														onClick={() => onWallpaperChange(imageUrl)}
+														role="button"
+													>
+														<button
+															onClick={(e) => handleRemoveCustomImage(imageUrl, e)}
+															className="absolute top-0.5 right-0.5 w-3 h-3 bg-red-500/90 hover:bg-red-500 rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity z-10"
+														>
+															<X className="w-2 h-2 text-white" />
+														</button>
+													</div>
+												);
+											})}
 
-                      {(wallpaperPreviewPaths.length > 0
-                        ? wallpaperPreviewPaths
-                        : WALLPAPER_PATHS
-                      ).map((previewPath, index) => {
-                        const wallpaper = BUILT_IN_WALLPAPERS[index];
-                        const wallpaperValue =
-                          WALLPAPER_PATHS[index] ?? previewPath;
-                        const isSelected = (() => {
-                          if (!selected) return false;
-                          if (
-                            selected === wallpaperValue ||
-                            selected === previewPath
-                          )
-                            return true;
-                          try {
-                            const clean = (s: string) =>
-                              s.replace(/^file:\/\//, "").replace(/^\//, "");
-                            if (clean(selected).endsWith(clean(wallpaperValue)))
-                              return true;
-                            if (clean(wallpaperValue).endsWith(clean(selected)))
-                              return true;
-                            if (clean(selected).endsWith(clean(previewPath)))
-                              return true;
-                            if (clean(previewPath).endsWith(clean(selected)))
-                              return true;
-                          } catch {}
-                          return false;
-                        })();
-                        return (
-                          <div
-                            key={wallpaperValue}
-                            className={cn(
-                              "aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
-                              isSelected
-                                ? "border-[#2563EB] ring-1 ring-[#2563EB]/30"
-                                : "border-white/10 hover:border-[#2563EB]/40 opacity-80 hover:opacity-100 bg-white/5",
-                            )}
-                            aria-label={
-                              wallpaper?.label ?? `Wallpaper ${index + 1}`
-                            }
-                            title={wallpaper?.label ?? `Wallpaper ${index + 1}`}
-                            style={{
-                              backgroundImage: `url(${previewPath})`,
-                              backgroundSize: "cover",
-                              backgroundPosition: "center",
-                            }}
-                            onClick={() => onWallpaperChange(wallpaperValue)}
-                            role="button"
-                          />
-                        );
-                      })}
-                    </div>
-                  </TabsContent>
+											{(wallpaperPreviewPaths.length > 0
+												? wallpaperPreviewPaths
+												: WALLPAPER_PATHS
+											).map((previewPath, index) => {
+												const wallpaper = BUILT_IN_WALLPAPERS[index];
+												const wallpaperValue = WALLPAPER_PATHS[index] ?? previewPath;
+												const isSelected = (() => {
+													if (!selected) return false;
+													if (selected === wallpaperValue || selected === previewPath) return true;
+													try {
+														const clean = (s: string) =>
+															s.replace(/^file:\/\//, "").replace(/^\//, "");
+														if (clean(selected).endsWith(clean(wallpaperValue))) return true;
+														if (clean(wallpaperValue).endsWith(clean(selected))) return true;
+														if (clean(selected).endsWith(clean(previewPath))) return true;
+														if (clean(previewPath).endsWith(clean(selected))) return true;
+													} catch {}
+													return false;
+												})();
+												return (
+													<div
+														key={wallpaperValue}
+														className={cn(
+															"aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
+															isSelected
+																? "border-[#2563EB] ring-1 ring-[#2563EB]/30"
+																: "border-white/10 hover:border-[#2563EB]/40 opacity-80 hover:opacity-100 bg-white/5",
+														)}
+														aria-label={wallpaper?.label ?? `Wallpaper ${index + 1}`}
+														title={wallpaper?.label ?? `Wallpaper ${index + 1}`}
+														style={{
+															backgroundImage: `url(${previewPath})`,
+															backgroundSize: "cover",
+															backgroundPosition: "center",
+														}}
+														onClick={() => onWallpaperChange(wallpaperValue)}
+														role="button"
+													/>
+												);
+											})}
+										</div>
+									</TabsContent>
 
-                  <TabsContent value="color" className="mt-0">
-                    <div className="p-1">
-                      <Block
-                        color={selectedColor}
-                        colors={colorPalette}
-                        onChange={(color) => {
-                          setSelectedColor(color.hex);
-                          onWallpaperChange(color.hex);
-                        }}
-                        style={{
-                          width: "100%",
-                          borderRadius: "8px",
-                        }}
-                      />
-                    </div>
-                  </TabsContent>
+									<TabsContent value="color" className="mt-0">
+										<div className="p-1">
+											<Block
+												color={selectedColor}
+												colors={colorPalette}
+												onChange={(color) => {
+													setSelectedColor(color.hex);
+													onWallpaperChange(color.hex);
+												}}
+												style={{
+													width: "100%",
+													borderRadius: "8px",
+												}}
+											/>
+										</div>
+									</TabsContent>
 
-                  <TabsContent value="gradient" className="mt-0">
-                    <div className="grid grid-cols-7 gap-1.5">
-                      {GRADIENTS.map((g, idx) => (
-                        <div
-                          key={g}
-                          className={cn(
-                            "aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
-                            gradient === g
-                              ? "border-[#2563EB] ring-1 ring-[#2563EB]/30"
-                              : "border-white/10 hover:border-[#2563EB]/40 opacity-80 hover:opacity-100 bg-white/5",
-                          )}
-                          style={{ background: g }}
-                          aria-label={`Gradient ${idx + 1}`}
-                          onClick={() => {
-                            setGradient(g);
-                            onWallpaperChange(g);
-                          }}
-                          role="button"
-                        />
-                      ))}
-                    </div>
-                  </TabsContent>
-                </div>
-              </Tabs>
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
+									<TabsContent value="gradient" className="mt-0">
+										<div className="grid grid-cols-7 gap-1.5">
+											{GRADIENTS.map((g, idx) => (
+												<div
+													key={g}
+													className={cn(
+														"aspect-square w-9 h-9 rounded-md border-2 overflow-hidden cursor-pointer transition-all duration-200 shadow-sm",
+														gradient === g
+															? "border-[#2563EB] ring-1 ring-[#2563EB]/30"
+															: "border-white/10 hover:border-[#2563EB]/40 opacity-80 hover:opacity-100 bg-white/5",
+													)}
+													style={{ background: g }}
+													aria-label={`Gradient ${idx + 1}`}
+													onClick={() => {
+														setGradient(g);
+														onWallpaperChange(g);
+													}}
+													role="button"
+												/>
+											))}
+										</div>
+									</TabsContent>
+								</div>
+							</Tabs>
+						</AccordionContent>
+					</AccordionItem>
+				</Accordion>
+			</div>
 
-      {showCropModal && cropRegion && onCropChange && (
-        <>
-          <div
-            className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 animate-in fade-in duration-200"
-            onClick={handleCropCancel}
-          />
-          <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-5xl max-h-[90vh] overflow-auto animate-in zoom-in-95 duration-200">
-            <div className="flex items-center justify-between mb-6">
-              <div>
-                <span className="text-xl font-bold text-slate-200">
-                  {tSettings("crop.title")}
-                </span>
-                <p className="text-sm text-slate-400 mt-2">
-                  {tSettings("crop.instruction")}
-                </p>
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={handleCropCancel}
-                className="hover:bg-white/10 text-slate-400 hover:text-white"
-              >
-                <X className="w-5 h-5" />
-              </Button>
-            </div>
-            <CropControl
-              videoElement={videoElement || null}
-              cropRegion={cropRegion}
-              onCropChange={onCropChange}
-              aspectRatio={aspectRatio}
-            />
-            <div className="mt-6 flex justify-end">
-              <Button
-                onClick={() => setShowCropModal(false)}
-                size="lg"
-                className="bg-[#2563EB] hover:bg-[#2563EB]/90 text-white"
-              >
-                {t("common.actions.done")}
-              </Button>
-            </div>
-          </div>
-        </>
-      )}
+			{showCropModal && cropRegion && onCropChange && (
+				<>
+					<div
+						className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 animate-in fade-in duration-200"
+						onClick={handleCropCancel}
+					/>
+					<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-5xl max-h-[90vh] overflow-auto animate-in zoom-in-95 duration-200">
+						<div className="flex items-center justify-between mb-6">
+							<div>
+								<span className="text-xl font-bold text-slate-200">{tSettings("crop.title")}</span>
+								<p className="text-sm text-slate-400 mt-2">{tSettings("crop.instruction")}</p>
+							</div>
+							<Button
+								variant="ghost"
+								size="icon"
+								onClick={handleCropCancel}
+								className="hover:bg-white/10 text-slate-400 hover:text-white"
+							>
+								<X className="w-5 h-5" />
+							</Button>
+						</div>
+						<CropControl
+							videoElement={videoElement || null}
+							cropRegion={cropRegion}
+							onCropChange={onCropChange}
+							aspectRatio={aspectRatio}
+						/>
+						<div className="mt-6 flex justify-end">
+							<Button
+								onClick={() => setShowCropModal(false)}
+								size="lg"
+								className="bg-[#2563EB] hover:bg-[#2563EB]/90 text-white"
+							>
+								{t("common.actions.done")}
+							</Button>
+						</div>
+					</div>
+				</>
+			)}
 
-      <div className="flex-shrink-0 p-4 pt-3 border-t border-white/5 bg-[#09090b]">
-        <div className="flex items-center gap-2 mb-3">
-          <button
-            onClick={() => onExportFormatChange?.("mp4")}
-            className={cn(
-              "flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
-              exportFormat === "mp4"
-                ? "bg-[#2563EB]/10 border-[#2563EB]/50 text-white"
-                : "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200",
-            )}
-          >
-            <Film className="w-3.5 h-3.5" />
-            {tSettings("export.mp4")}
-          </button>
-          <button
-            onClick={() => onExportFormatChange?.("gif")}
-            className={cn(
-              "flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
-              exportFormat === "gif"
-                ? "bg-[#2563EB]/10 border-[#2563EB]/50 text-white"
-                : "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200",
-            )}
-          >
-            <Image className="w-3.5 h-3.5" />
-            {tSettings("export.gif")}
-          </button>
-        </div>
+			<div className="flex-shrink-0 p-4 pt-3 border-t border-white/5 bg-[#09090b]">
+				<div className="flex items-center gap-2 mb-3">
+					<button
+						onClick={() => onExportFormatChange?.("mp4")}
+						className={cn(
+							"flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
+							exportFormat === "mp4"
+								? "bg-[#2563EB]/10 border-[#2563EB]/50 text-white"
+								: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200",
+						)}
+					>
+						<Film className="w-3.5 h-3.5" />
+						{tSettings("export.mp4")}
+					</button>
+					<button
+						onClick={() => onExportFormatChange?.("gif")}
+						className={cn(
+							"flex-1 flex items-center justify-center gap-1.5 py-2 rounded-lg border transition-all text-xs font-medium",
+							exportFormat === "gif"
+								? "bg-[#2563EB]/10 border-[#2563EB]/50 text-white"
+								: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:text-slate-200",
+						)}
+					>
+						<Image className="w-3.5 h-3.5" />
+						{tSettings("export.gif")}
+					</button>
+				</div>
 
-        {exportFormat === "mp4" && (
-          <div className="mb-3 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
-            <button
-              onClick={() => onExportQualityChange?.("medium")}
-              className={cn(
-                "rounded-md transition-all text-[10px] font-medium",
-                exportQuality === "medium"
-                  ? "bg-white text-black"
-                  : "text-slate-400 hover:text-slate-200",
-              )}
-            >
-              {tSettings("export.quality.low")}
-            </button>
-            <button
-              onClick={() => onExportQualityChange?.("good")}
-              className={cn(
-                "rounded-md transition-all text-[10px] font-medium",
-                exportQuality === "good"
-                  ? "bg-white text-black"
-                  : "text-slate-400 hover:text-slate-200",
-              )}
-            >
-              {tSettings("export.quality.medium")}
-            </button>
-            <button
-              onClick={() => onExportQualityChange?.("source")}
-              className={cn(
-                "rounded-md transition-all text-[10px] font-medium",
-                exportQuality === "source"
-                  ? "bg-white text-black"
-                  : "text-slate-400 hover:text-slate-200",
-              )}
-            >
-              {tSettings("export.quality.high")}
-            </button>
-          </div>
-        )}
+				{exportFormat === "mp4" && (
+					<div className="mb-3 bg-white/5 border border-white/5 p-0.5 w-full grid grid-cols-3 h-7 rounded-lg">
+						<button
+							onClick={() => onExportQualityChange?.("medium")}
+							className={cn(
+								"rounded-md transition-all text-[10px] font-medium",
+								exportQuality === "medium"
+									? "bg-white text-black"
+									: "text-slate-400 hover:text-slate-200",
+							)}
+						>
+							{tSettings("export.quality.low")}
+						</button>
+						<button
+							onClick={() => onExportQualityChange?.("good")}
+							className={cn(
+								"rounded-md transition-all text-[10px] font-medium",
+								exportQuality === "good"
+									? "bg-white text-black"
+									: "text-slate-400 hover:text-slate-200",
+							)}
+						>
+							{tSettings("export.quality.medium")}
+						</button>
+						<button
+							onClick={() => onExportQualityChange?.("source")}
+							className={cn(
+								"rounded-md transition-all text-[10px] font-medium",
+								exportQuality === "source"
+									? "bg-white text-black"
+									: "text-slate-400 hover:text-slate-200",
+							)}
+						>
+							{tSettings("export.quality.high")}
+						</button>
+					</div>
+				)}
 
-        {exportFormat === "gif" && (
-          <div className="mb-3 space-y-2">
-            <div className="flex items-center gap-2">
-              <div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-4 h-7 rounded-lg">
-                {GIF_FRAME_RATES.map((rate) => (
-                  <button
-                    key={rate.value}
-                    onClick={() => onGifFrameRateChange?.(rate.value)}
-                    className={cn(
-                      "rounded-md transition-all text-[10px] font-medium",
-                      gifFrameRate === rate.value
-                        ? "bg-white text-black"
-                        : "text-slate-400 hover:text-slate-200",
-                    )}
-                  >
-                    {rate.value}
-                  </button>
-                ))}
-              </div>
-              <div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-3 h-7 rounded-lg">
-                {Object.entries(GIF_SIZE_PRESETS).map(([key, _preset]) => (
-                  <button
-                    key={key}
-                    onClick={() =>
-                      onGifSizePresetChange?.(key as GifSizePreset)
-                    }
-                    className={cn(
-                      "rounded-md transition-all text-[10px] font-medium",
-                      gifSizePreset === key
-                        ? "bg-white text-black"
-                        : "text-slate-400 hover:text-slate-200",
-                    )}
-                  >
-                    {key === "original"
-                      ? "Orig"
-                      : key.charAt(0).toUpperCase() + key.slice(1, 3)}
-                  </button>
-                ))}
-              </div>
-            </div>
-            <div className="flex items-center justify-between">
-              <span className="text-[10px] text-slate-500">
-                {gifOutputDimensions.width} × {gifOutputDimensions.height}px
-              </span>
-              <div className="flex items-center gap-2">
-                <span className="text-[10px] text-slate-400">
-                  {tSettings("export.loop")}
-                </span>
-                <Switch
-                  checked={gifLoop}
-                  onCheckedChange={onGifLoopChange}
-                  className="data-[state=checked]:bg-[#2563EB] scale-75"
-                />
-              </div>
-            </div>
-          </div>
-        )}
+				{exportFormat === "gif" && (
+					<div className="mb-3 space-y-2">
+						<div className="flex items-center gap-2">
+							<div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-4 h-7 rounded-lg">
+								{GIF_FRAME_RATES.map((rate) => (
+									<button
+										key={rate.value}
+										onClick={() => onGifFrameRateChange?.(rate.value)}
+										className={cn(
+											"rounded-md transition-all text-[10px] font-medium",
+											gifFrameRate === rate.value
+												? "bg-white text-black"
+												: "text-slate-400 hover:text-slate-200",
+										)}
+									>
+										{rate.value}
+									</button>
+								))}
+							</div>
+							<div className="flex-1 bg-white/5 border border-white/5 p-0.5 grid grid-cols-3 h-7 rounded-lg">
+								{Object.entries(GIF_SIZE_PRESETS).map(([key, _preset]) => (
+									<button
+										key={key}
+										onClick={() => onGifSizePresetChange?.(key as GifSizePreset)}
+										className={cn(
+											"rounded-md transition-all text-[10px] font-medium",
+											gifSizePreset === key
+												? "bg-white text-black"
+												: "text-slate-400 hover:text-slate-200",
+										)}
+									>
+										{key === "original" ? "Orig" : key.charAt(0).toUpperCase() + key.slice(1, 3)}
+									</button>
+								))}
+							</div>
+						</div>
+						<div className="flex items-center justify-between">
+							<span className="text-[10px] text-slate-500">
+								{gifOutputDimensions.width} × {gifOutputDimensions.height}px
+							</span>
+							<div className="flex items-center gap-2">
+								<span className="text-[10px] text-slate-400">{tSettings("export.loop")}</span>
+								<Switch
+									checked={gifLoop}
+									onCheckedChange={onGifLoopChange}
+									className="data-[state=checked]:bg-[#2563EB] scale-75"
+								/>
+							</div>
+						</div>
+					</div>
+				)}
 
-        <div className="grid grid-cols-2 gap-2 mb-2">
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onLoadProject}
-            className="h-8 text-[10px] font-medium gap-1.5 bg-white/5 border-white/10 text-slate-300 hover:bg-white/10"
-          >
-            <FolderOpen className="w-3.5 h-3.5" />
-            {tSettings("export.loadProject")}
-          </Button>
-          <Button
-            type="button"
-            variant="outline"
-            onClick={onSaveProject}
-            className="h-8 text-[10px] font-medium gap-1.5 bg-white/5 border-white/10 text-slate-300 hover:bg-white/10"
-          >
-            <Save className="w-3.5 h-3.5" />
-            {tSettings("export.saveProject")}
-          </Button>
-        </div>
+				<div className="grid grid-cols-2 gap-2 mb-2">
+					<Button
+						type="button"
+						variant="outline"
+						onClick={onLoadProject}
+						className="h-8 text-[10px] font-medium gap-1.5 bg-white/5 border-white/10 text-slate-300 hover:bg-white/10"
+					>
+						<FolderOpen className="w-3.5 h-3.5" />
+						{tSettings("export.loadProject")}
+					</Button>
+					<Button
+						type="button"
+						variant="outline"
+						onClick={onSaveProject}
+						className="h-8 text-[10px] font-medium gap-1.5 bg-white/5 border-white/10 text-slate-300 hover:bg-white/10"
+					>
+						<Save className="w-3.5 h-3.5" />
+						{tSettings("export.saveProject")}
+					</Button>
+				</div>
 
-        <Button
-          type="button"
-          size="lg"
-          onClick={onExport}
-          className="w-full py-5 text-sm font-semibold flex items-center justify-center gap-2 bg-[#2563EB] text-white rounded-xl shadow-lg shadow-[#2563EB]/20 hover:bg-[#2563EB]/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
-        >
-          <Download className="w-4 h-4" />
-          {tSettings("export.exportVideo", undefined, {
-            format: exportFormat === "gif" ? "GIF" : "Video",
-          })}
-        </Button>
+				<Button
+					type="button"
+					size="lg"
+					onClick={onExport}
+					className="w-full py-5 text-sm font-semibold flex items-center justify-center gap-2 bg-[#2563EB] text-white rounded-xl shadow-lg shadow-[#2563EB]/20 hover:bg-[#2563EB]/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
+				>
+					<Download className="w-4 h-4" />
+					{tSettings("export.exportVideo", undefined, {
+						format: exportFormat === "gif" ? "GIF" : "Video",
+					})}
+				</Button>
 
-        <div className="flex gap-2 mt-3">
-          <button
-            type="button"
-            onClick={() => {
-              window.electronAPI?.openExternalUrl(
-                "https://github.com/webadderall/Recordly/issues/new/choose",
-              );
-            }}
-            className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
-          >
-            <Bug className="w-3 h-3 text-[#2563EB]" />
-            {tSettings("export.reportBug")}
-          </button>
-          <button
-            type="button"
-            onClick={() => {
-              window.electronAPI?.openExternalUrl(
-                "https://github.com/webadderall/Recordly",
-              );
-            }}
-            className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
-          >
-            <Star className="w-3 h-3 text-yellow-400" />
-            {tSettings("export.starOnGithub")}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
+				<div className="flex gap-2 mt-3">
+					<button
+						type="button"
+						onClick={() => {
+							window.electronAPI?.openExternalUrl(
+								"https://github.com/webadderall/Recordly/issues/new/choose",
+							);
+						}}
+						className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
+					>
+						<Bug className="w-3 h-3 text-[#2563EB]" />
+						{tSettings("export.reportBug")}
+					</button>
+					<button
+						type="button"
+						onClick={() => {
+							window.electronAPI?.openExternalUrl("https://github.com/webadderall/Recordly");
+						}}
+						className="flex-1 flex items-center justify-center gap-1.5 text-[10px] text-slate-500 hover:text-slate-300 py-1.5 transition-colors"
+					>
+						<Star className="w-3 h-3 text-yellow-400" />
+						{tSettings("export.starOnGithub")}
+					</button>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/src/components/video-editor/videoPlayback/cursorSway.test.ts b/src/components/video-editor/videoPlayback/cursorSway.test.ts
index 842eb020..1f10a51a 100644
--- a/src/components/video-editor/videoPlayback/cursorSway.test.ts
+++ b/src/components/video-editor/videoPlayback/cursorSway.test.ts
@@ -1,31 +1,37 @@
 import { describe, expect, it } from "vitest";
 
-import { computeCursorSwayRotation } from "./cursorSway";
+import {
+	computeCursorSwayRotation,
+	fromCursorSwaySliderValue,
+	toCursorSwaySliderValue,
+} from "./cursorSway";
 
 describe("computeCursorSwayRotation", () => {
-  it("returns zero when sway is disabled or there is no movement", () => {
-    expect(computeCursorSwayRotation(120, 0, 16, 0)).toBe(0);
-    expect(computeCursorSwayRotation(0, 0, 16, 1)).toBe(0);
-  });
+	it("returns zero when sway is disabled or there is no movement", () => {
+		expect(computeCursorSwayRotation(120, 0, 16, 0)).toBe(0);
+		expect(computeCursorSwayRotation(0, 0, 16, 1)).toBe(0);
+	});
 
-  it("leans opposite the motion direction", () => {
-    expect(computeCursorSwayRotation(120, 0, 16, 1)).toBeLessThan(0);
-    expect(computeCursorSwayRotation(-120, 0, 16, 1)).toBeGreaterThan(0);
-    expect(computeCursorSwayRotation(0, 120, 16, 1)).toBeLessThan(0);
-    expect(computeCursorSwayRotation(0, -120, 16, 1)).toBeGreaterThan(0);
-  });
+	it("leans with the motion direction", () => {
+		expect(computeCursorSwayRotation(120, 0, 16, 1)).toBeGreaterThan(0);
+		expect(computeCursorSwayRotation(-120, 0, 16, 1)).toBeLessThan(0);
+		expect(computeCursorSwayRotation(0, 120, 16, 1)).toBeGreaterThan(0);
+		expect(computeCursorSwayRotation(0, -120, 16, 1)).toBeLessThan(0);
+	});
 
-  it("increases with faster movement for the same direction", () => {
-    const slow = Math.abs(computeCursorSwayRotation(24, 0, 48, 1));
-    const fast = Math.abs(computeCursorSwayRotation(120, 0, 16, 1));
+	it("increases with faster movement for the same direction", () => {
+		const slow = Math.abs(computeCursorSwayRotation(24, 0, 48, 1));
+		const fast = Math.abs(computeCursorSwayRotation(120, 0, 16, 1));
 
-    expect(fast).toBeGreaterThan(slow);
-  });
+		expect(fast).toBeGreaterThan(slow);
+	});
 
-  it("maps a 2x slider value to a 6x sway intensity", () => {
-    expect(computeCursorSwayRotation(-140, 0, 100, 2)).toBeCloseTo(
-      Math.PI / 3,
-      6,
-    );
-  });
+	it("maps a 2x slider value to a 6x sway intensity", () => {
+		expect(computeCursorSwayRotation(-140, 0, 100, 2)).toBeCloseTo(-(Math.PI / 3), 6);
+	});
+
+	it("maps a 1x slider value to the previous 2x sway strength", () => {
+		expect(fromCursorSwaySliderValue(1)).toBe(2);
+		expect(toCursorSwaySliderValue(2)).toBe(1);
+	});
 });
diff --git a/src/components/video-editor/videoPlayback/cursorSway.ts b/src/components/video-editor/videoPlayback/cursorSway.ts
index 08c9c55e..dcbeef41 100644
--- a/src/components/video-editor/videoPlayback/cursorSway.ts
+++ b/src/components/video-editor/videoPlayback/cursorSway.ts
@@ -4,46 +4,38 @@ const CURSOR_SWAY_MAX_ROTATION = Math.PI / 18;
 const CURSOR_SWAY_SPEED_REFERENCE = 1400;
 const CURSOR_SWAY_VERTICAL_WEIGHT = 0.65;
 const CURSOR_SWAY_INTENSITY_SCALE = 3;
+export const CURSOR_SWAY_SLIDER_SCALE = 2;
 
 function clamp(value: number, min: number, max: number) {
-  return Math.min(max, Math.max(min, value));
+	return Math.min(max, Math.max(min, value));
 }
 
-export function computeCursorSwayRotation(
-  dx: number,
-  dy: number,
-  deltaMs: number,
-  sway: number,
-) {
-  if (sway <= 0) {
-    return 0;
-  }
+export function computeCursorSwayRotation(dx: number, dy: number, deltaMs: number, sway: number) {
+	if (sway <= 0) {
+		return 0;
+	}
 
-  const distance = Math.hypot(dx, dy);
-  if (!Number.isFinite(distance) || distance < 0.01) {
-    return 0;
-  }
+	const distance = Math.hypot(dx, dy);
+	if (!Number.isFinite(distance) || distance < 0.01) {
+		return 0;
+	}
 
-  const speedPxPerSecond = distance / (clampDeltaMs(deltaMs) / 1000);
-  const speedFactor = clamp(
-    speedPxPerSecond / CURSOR_SWAY_SPEED_REFERENCE,
-    0,
-    1,
-  );
-  if (speedFactor <= 0) {
-    return 0;
-  }
+	const speedPxPerSecond = distance / (clampDeltaMs(deltaMs) / 1000);
+	const speedFactor = clamp(speedPxPerSecond / CURSOR_SWAY_SPEED_REFERENCE, 0, 1);
+	if (speedFactor <= 0) {
+		return 0;
+	}
 
-  const directionalBias = clamp(
-    (-dx - dy * CURSOR_SWAY_VERTICAL_WEIGHT) / distance,
-    -1,
-    1,
-  );
-  return (
-    directionalBias *
-    speedFactor *
-    CURSOR_SWAY_MAX_ROTATION *
-    sway *
-    CURSOR_SWAY_INTENSITY_SCALE
-  );
+	const directionalBias = clamp((dx + dy * CURSOR_SWAY_VERTICAL_WEIGHT) / distance, -1, 1);
+	return (
+		directionalBias * speedFactor * CURSOR_SWAY_MAX_ROTATION * sway * CURSOR_SWAY_INTENSITY_SCALE
+	);
+}
+
+export function toCursorSwaySliderValue(sway: number) {
+	return sway / CURSOR_SWAY_SLIDER_SCALE;
+}
+
+export function fromCursorSwaySliderValue(sliderValue: number) {
+	return sliderValue * CURSOR_SWAY_SLIDER_SCALE;
 }
diff --git a/src/i18n/locales/en/launch.json b/src/i18n/locales/en/launch.json
index 4829693f..18ef6790 100644
--- a/src/i18n/locales/en/launch.json
+++ b/src/i18n/locales/en/launch.json
@@ -10,6 +10,8 @@
 		"folderPath": "Path: /{{name}}/",
 		"openVideoFile": "Open video file",
 		"openProject": "Open project",
+		"hideHudFromVideo": "Hide HUD from recording",
+		"showHudInVideo": "Show HUD in recording",
 		"hideHud": "Hide HUD",
 		"closeApp": "Close App"
 	},
diff --git a/src/i18n/locales/es/launch.json b/src/i18n/locales/es/launch.json
index 0bd6d05e..8bd42e14 100644
--- a/src/i18n/locales/es/launch.json
+++ b/src/i18n/locales/es/launch.json
@@ -10,6 +10,8 @@
 		"folderPath": "Ruta: /{{name}}/",
 		"openVideoFile": "Abrir archivo de video",
 		"openProject": "Abrir proyecto",
+		"hideHudFromVideo": "Ocultar HUD en la grabación",
+		"showHudInVideo": "Mostrar HUD en la grabación",
 		"hideHud": "Ocultar HUD",
 		"closeApp": "Cerrar aplicación"
 	},
diff --git a/src/i18n/locales/zh-CN/launch.json b/src/i18n/locales/zh-CN/launch.json
index 9ac43f3a..32f42328 100644
--- a/src/i18n/locales/zh-CN/launch.json
+++ b/src/i18n/locales/zh-CN/launch.json
@@ -10,6 +10,8 @@
 		"folderPath": "路径：/{{name}}/",
 		"openVideoFile": "打开视频文件",
 		"openProject": "打开项目",
+		"hideHudFromVideo": "在录制中隐藏 HUD",
+		"showHudInVideo": "在录制中显示 HUD",
 		"hideHud": "隐藏 HUD",
 		"closeApp": "关闭应用"
 	},
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
index 845f5960..b101b2fe 100644
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -1,151 +1,210 @@
-/// <reference types="vite/client" />
-/// <reference types="../electron/electron-env" />
-
-interface ProcessedDesktopSource {
-  id: string;
-  name: string;
-  display_id: string;
-  thumbnail: string | null;
-  appIcon: string | null;
-  originalName?: string;
-  sourceType?: 'screen' | 'window';
-  appName?: string;
-  windowTitle?: string;
-}
-
-interface CursorTelemetryPoint {
-  timeMs: number;
-  cx: number;
-  cy: number;
-  interactionType?: 'move' | 'click' | 'double-click' | 'right-click' | 'middle-click' | 'mouseup';
-  cursorType?: 'arrow' | 'text' | 'pointer' | 'crosshair' | 'open-hand' | 'closed-hand' | 'resize-ew' | 'resize-ns' | 'not-allowed';
-}
-
-interface SystemCursorAsset {
-  dataUrl: string;
-  hotspotX: number;
-  hotspotY: number;
-  width: number;
-  height: number;
-}
-
-interface Window {
-  electronAPI: {
-    getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>
-    switchToEditor: () => Promise<void>
-    openSourceSelector: () => Promise<void>
-    selectSource: (source: any) => Promise<any>
-    getSelectedSource: () => Promise<any>
-    startNativeScreenRecording: (source: any, options?: {
-      capturesSystemAudio?: boolean
-      capturesMicrophone?: boolean
-      microphoneDeviceId?: string
-      microphoneLabel?: string
-    }) => Promise<{
-      success: boolean
-      path?: string
-      message?: string
-      error?: string
-    }>
-    stopNativeScreenRecording: () => Promise<{
-      success: boolean
-      path?: string
-      message?: string
-      error?: string
-    }>
-    startFfmpegRecording: (source: any) => Promise<{
-      success: boolean
-      path?: string
-      message?: string
-      error?: string
-    }>
-    stopFfmpegRecording: () => Promise<{
-      success: boolean
-      path?: string
-      message?: string
-      error?: string
-    }>
-    storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => Promise<{
-      success: boolean
-      path?: string
-      message: string
-      error?: string
-    }>
-    getRecordedVideoPath: () => Promise<{
-      success: boolean
-      path?: string
-      message?: string
-      error?: string
-    }>
-    readLocalFile: (filePath: string) => Promise<{
-      success: boolean
-      data?: Uint8Array
-      error?: string
-    }>
-    getAssetBasePath: () => Promise<string | null>
-    setRecordingState: (recording: boolean) => Promise<void>
-    getCursorTelemetry: (videoPath?: string) => Promise<{
-      success: boolean
-      samples: CursorTelemetryPoint[]
-      message?: string
-      error?: string
-    }>
-    getSystemCursorAssets: () => Promise<{
-      success: boolean
-      cursors: Record<string, SystemCursorAsset>
-      error?: string
-    }>
-    onStopRecordingFromTray: (callback: () => void) => () => void
-    onRecordingStateChanged: (callback: (state: { recording: boolean; sourceName: string }) => void) => () => void
-    onRecordingInterrupted: (callback: (state: { reason: string; message: string }) => void) => () => void
-    onCursorStateChanged: (callback: (state: { cursorType: CursorTelemetryPoint['cursorType'] }) => void) => () => void
-    openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>
-    getAccessibilityPermissionStatus: () => Promise<{ success: boolean; trusted: boolean; prompted: boolean; error?: string }>
-    requestAccessibilityPermission: () => Promise<{ success: boolean; trusted: boolean; prompted: boolean; error?: string }>
-    getScreenRecordingPermissionStatus: () => Promise<{ success: boolean; status: string; error?: string }>
-    openScreenRecordingPreferences: () => Promise<{ success: boolean; error?: string }>
-    openAccessibilityPreferences: () => Promise<{ success: boolean; error?: string }>
-    saveExportedVideo: (videoData: ArrayBuffer, fileName: string) => Promise<{
-      success: boolean
-      path?: string
-      message?: string
-      canceled?: boolean
-    }>
-    openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>
-    setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>
-    getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>
-    clearCurrentVideoPath: () => Promise<{ success: boolean }>
-    saveProjectFile: (projectData: unknown, suggestedName?: string, existingProjectPath?: string) => Promise<{
-      success: boolean
-      path?: string
-      message?: string
-      canceled?: boolean
-      error?: string
-    }>
-    loadProjectFile: () => Promise<{
-      success: boolean
-      path?: string
-      project?: unknown
-      message?: string
-      canceled?: boolean
-      error?: string
-    }>
-    loadCurrentProjectFile: () => Promise<{
-      success: boolean
-      path?: string
-      project?: unknown
-      message?: string
-      canceled?: boolean
-      error?: string
-    }>
-    onMenuLoadProject: (callback: () => void) => () => void
-    onMenuSaveProject: (callback: () => void) => () => void
-    onMenuSaveProjectAs: (callback: () => void) => () => void
-    hideOsCursor: () => Promise<{ success: boolean }>
-    setHasUnsavedChanges: (hasChanges: boolean) => void
-    onRequestSaveBeforeClose: (callback: () => Promise<void>) => () => void
-    getRecordingsDirectory: () => Promise<{ success: boolean; path: string; isDefault: boolean; error?: string }>
-    chooseRecordingsDirectory: () => Promise<{ success: boolean; canceled?: boolean; path?: string; isDefault?: boolean; message?: string; error?: string }>
-  }
-}
-
+/// <reference types="vite/client" />
+/// <reference types="../electron/electron-env" />
+
+interface ProcessedDesktopSource {
+	id: string;
+	name: string;
+	display_id: string;
+	thumbnail: string | null;
+	appIcon: string | null;
+	originalName?: string;
+	sourceType?: "screen" | "window";
+	appName?: string;
+	windowTitle?: string;
+}
+
+interface CursorTelemetryPoint {
+	timeMs: number;
+	cx: number;
+	cy: number;
+	interactionType?: "move" | "click" | "double-click" | "right-click" | "middle-click" | "mouseup";
+	cursorType?:
+		| "arrow"
+		| "text"
+		| "pointer"
+		| "crosshair"
+		| "open-hand"
+		| "closed-hand"
+		| "resize-ew"
+		| "resize-ns"
+		| "not-allowed";
+}
+
+interface SystemCursorAsset {
+	dataUrl: string;
+	hotspotX: number;
+	hotspotY: number;
+	width: number;
+	height: number;
+}
+
+interface Window {
+	electronAPI: {
+		hudOverlayHide: () => void;
+		hudOverlayClose: () => void;
+		getHudOverlayCaptureProtection: () => Promise<{ success: boolean; enabled: boolean }>;
+		setHudOverlayCaptureProtection: (
+			enabled: boolean,
+		) => Promise<{ success: boolean; enabled: boolean }>;
+		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
+		switchToEditor: () => Promise<void>;
+		openSourceSelector: () => Promise<void>;
+		selectSource: (source: any) => Promise<any>;
+		getSelectedSource: () => Promise<any>;
+		startNativeScreenRecording: (
+			source: any,
+			options?: {
+				capturesSystemAudio?: boolean;
+				capturesMicrophone?: boolean;
+				microphoneDeviceId?: string;
+				microphoneLabel?: string;
+			},
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		stopNativeScreenRecording: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		startFfmpegRecording: (source: any) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		stopFfmpegRecording: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		storeRecordedVideo: (
+			videoData: ArrayBuffer,
+			fileName: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message: string;
+			error?: string;
+		}>;
+		getRecordedVideoPath: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		readLocalFile: (filePath: string) => Promise<{
+			success: boolean;
+			data?: Uint8Array;
+			error?: string;
+		}>;
+		getAssetBasePath: () => Promise<string | null>;
+		setRecordingState: (recording: boolean) => Promise<void>;
+		getCursorTelemetry: (videoPath?: string) => Promise<{
+			success: boolean;
+			samples: CursorTelemetryPoint[];
+			message?: string;
+			error?: string;
+		}>;
+		getSystemCursorAssets: () => Promise<{
+			success: boolean;
+			cursors: Record<string, SystemCursorAsset>;
+			error?: string;
+		}>;
+		onStopRecordingFromTray: (callback: () => void) => () => void;
+		onRecordingStateChanged: (
+			callback: (state: { recording: boolean; sourceName: string }) => void,
+		) => () => void;
+		onRecordingInterrupted: (
+			callback: (state: { reason: string; message: string }) => void,
+		) => () => void;
+		onCursorStateChanged: (
+			callback: (state: { cursorType: CursorTelemetryPoint["cursorType"] }) => void,
+		) => () => void;
+		openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>;
+		getAccessibilityPermissionStatus: () => Promise<{
+			success: boolean;
+			trusted: boolean;
+			prompted: boolean;
+			error?: string;
+		}>;
+		requestAccessibilityPermission: () => Promise<{
+			success: boolean;
+			trusted: boolean;
+			prompted: boolean;
+			error?: string;
+		}>;
+		getScreenRecordingPermissionStatus: () => Promise<{
+			success: boolean;
+			status: string;
+			error?: string;
+		}>;
+		openScreenRecordingPreferences: () => Promise<{ success: boolean; error?: string }>;
+		openAccessibilityPreferences: () => Promise<{ success: boolean; error?: string }>;
+		saveExportedVideo: (
+			videoData: ArrayBuffer,
+			fileName: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			canceled?: boolean;
+		}>;
+		openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
+		setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
+		getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
+		clearCurrentVideoPath: () => Promise<{ success: boolean }>;
+		saveProjectFile: (
+			projectData: unknown,
+			suggestedName?: string,
+			existingProjectPath?: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		loadProjectFile: () => Promise<{
+			success: boolean;
+			path?: string;
+			project?: unknown;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		loadCurrentProjectFile: () => Promise<{
+			success: boolean;
+			path?: string;
+			project?: unknown;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		onMenuLoadProject: (callback: () => void) => () => void;
+		onMenuSaveProject: (callback: () => void) => () => void;
+		onMenuSaveProjectAs: (callback: () => void) => () => void;
+		hideOsCursor: () => Promise<{ success: boolean }>;
+		setHasUnsavedChanges: (hasChanges: boolean) => void;
+		onRequestSaveBeforeClose: (callback: () => Promise<void>) => () => void;
+		getRecordingsDirectory: () => Promise<{
+			success: boolean;
+			path: string;
+			isDefault: boolean;
+			error?: string;
+		}>;
+		chooseRecordingsDirectory: () => Promise<{
+			success: boolean;
+			canceled?: boolean;
+			path?: string;
+			isDefault?: boolean;
+			message?: string;
+			error?: string;
+		}>;
+	};
+}