fix: resolve type error, formatting, and import order from PR #321

added a new Feature that allows user to pause/resume while screen rec…

.github/workflows/build.yml

@@ -94,6 +94,7 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: linux-installer
-          path: release/**/*.AppImage
+          path: |
+            release/**/*.AppImage
+            release/**/*.zsync
           retention-days: 30
-

.github/workflows/ci.yml

@@ -42,3 +42,26 @@ jobs:
           cache: npm
       - run: npm ci
       - run: npx vite build
+
+  e2e:
+    name: E2E Tests
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npx playwright install --with-deps chromium
+      # Install Electron system dependencies not covered by Playwright's chromium deps
+      - run: npx electron . --version || sudo apt-get install -y libgbm-dev
+      - run: npm run build-vite
+      # xvfb provides a virtual display; Electron needs one on Linux even with show:false
+      - run: xvfb-run --auto-servernum npm run test:e2e
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7

.gitignore

@@ -25,4 +25,8 @@ dist-ssr
 *.sw?
 release/**
 *.kiro/
-# npx electron-builder --mac --win
+# npx electron-builder --mac --win
+
+# Playwright
+test-results
+playwright-report/

.nvmrc

@@ -0,0 +1 @@
+22.22.1

README.md

@@ -8,6 +8,10 @@
   <a href="https://deepwiki.com/siddharthvaddem/openscreen">
     <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" />
   </a>
+  &nbsp;
+  <a href="https://discord.gg/yAQQhRaEeg">
+    <img src="https://img.shields.io/discord/pHAUbcqNd?logo=discord&label=Discord&color=5865F2" alt="Join Discord" />
+  </a>
 </p>
 
 # <p align="center">OpenScreen</p>

electron-builder.json5

@@ -20,14 +20,16 @@
     "!CONTRIBUTING.md",
     "!LICENSE"
   ],
-  "extraResources": [
-    {
-      "from": "public/wallpapers",
-      "to": "assets/wallpapers"
-    }
-  ],
-
-  "mac": {
+  "extraResources": [
+    {
+      "from": "public/wallpapers",
+      "to": "assets/wallpapers"
+    }
+  ],
+  "publish": [{"provider": "github"}],
+
+  "mac": {
+    "hardenedRuntime": false,
     "target": [
       {
         "target": "dmg",
@@ -36,10 +38,13 @@
     ],
     "icon": "icons/icons/mac/icon.icns",
     "artifactName": "${productName}-Mac-${arch}-${version}-Installer.${ext}",
-    "extendInfo": {
-      "NSAudioCaptureUsageDescription": "OpenScreen needs audio capture permission to record system audio.",
-      "NSCameraUseContinuityCameraDeviceType": true
-    }
+    "extendInfo": {
+      "NSAudioCaptureUsageDescription": "OpenScreen needs audio capture permission to record system audio.",
+      "NSMicrophoneUsageDescription": "OpenScreen needs microphone access to record voice audio.",
+      "NSCameraUsageDescription": "OpenScreen needs camera access to record webcam video.",
+      "NSCameraUseContinuityCameraDeviceType": true,
+      "com.apple.security.device.audio-input": true
+    }
   },
   "linux": {
     "target": [
@@ -49,10 +54,14 @@
     "artifactName": "${productName}-Linux-${version}.${ext}",
     "category": "AudioVideo"
   },
-  "win": {
-    "target": [
-      "nsis"
-    ],
-    "icon": "icons/icons/win/icon.ico"
-  }
-}
+  "win": {
+    "target": [
+      "nsis"
+    ],
+    "icon": "icons/icons/win/icon.ico"
+  },
+  "nsis": {
+    "oneClick": false,
+    "allowToChangeInstallationDirectory": true
+  }
+}

electron/electron-env.d.ts

@@ -27,13 +27,40 @@ interface Window {
 		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
 		switchToEditor: () => Promise<void>;
 		openSourceSelector: () => Promise<void>;
-		selectSource: (source: any) => Promise<any>;
-		getSelectedSource: () => Promise<any>;
+		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
+		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;
+		requestCameraAccess: () => Promise<{
+			success: boolean;
+			granted: boolean;
+			status: string;
+			error?: string;
+		}>;
+		getAssetBasePath: () => Promise<string | null>;
 		storeRecordedVideo: (
 			videoData: ArrayBuffer,
 			fileName: string,
-		) => Promise<{ success: boolean; path?: string; message?: string }>;
-		getRecordedVideoPath: () => Promise<{ success: boolean; path?: string; message?: string }>;
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+			message?: string;
+			error?: string;
+		}>;
+		storeRecordedSession: (
+			payload: import("../src/lib/recordingSession").StoreRecordedSessionInput,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+			message?: string;
+			error?: string;
+		}>;
+		getRecordedVideoPath: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
 		setRecordingState: (recording: boolean) => Promise<void>;
 		getCursorTelemetry: (videoPath?: string) => Promise<{
 			success: boolean;
@@ -49,7 +76,24 @@ interface Window {
 		) => Promise<{ success: boolean; path?: string; message?: string; canceled?: boolean }>;
 		openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
 		setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
+		setCurrentRecordingSession: (
+			session: import("../src/lib/recordingSession").RecordingSession | null,
+		) => Promise<{
+			success: boolean;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+		}>;
 		getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
+		getCurrentRecordingSession: () => Promise<{
+			success: boolean;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+		}>;
+		readBinaryFile: (filePath: string) => Promise<{
+			success: boolean;
+			data?: ArrayBuffer;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
 		clearCurrentVideoPath: () => Promise<{ success: boolean }>;
 		saveProjectFile: (
 			projectData: unknown,
@@ -91,7 +135,8 @@ interface Window {
 		hudOverlayClose: () => void;
 		setMicrophoneExpanded: (expanded: boolean) => void;
 		setHasUnsavedChanges: (hasChanges: boolean) => void;
-		onRequestSaveBeforeClose: (callback: () => Promise<void>) => () => void;
+		onRequestSaveBeforeClose: (callback: () => Promise<boolean> | boolean) => () => void;
+		setLocale: (locale: string) => Promise<void>;
 	};
 }
 

electron/i18n.ts

@@ -0,0 +1,59 @@
+// Lightweight i18n for the Electron main process.
+// Imports the same JSON translation files used by the renderer.
+
+import commonEn from "../src/i18n/locales/en/common.json";
+import dialogsEn from "../src/i18n/locales/en/dialogs.json";
+import commonEs from "../src/i18n/locales/es/common.json";
+import dialogsEs from "../src/i18n/locales/es/dialogs.json";
+import commonZh from "../src/i18n/locales/zh-CN/common.json";
+import dialogsZh from "../src/i18n/locales/zh-CN/dialogs.json";
+
+type Locale = "en" | "zh-CN" | "es";
+type Namespace = "common" | "dialogs";
+type MessageMap = Record<string, unknown>;
+
+const messages: Record<Locale, Record<Namespace, MessageMap>> = {
+	en: { common: commonEn, dialogs: dialogsEn },
+	"zh-CN": { common: commonZh, dialogs: dialogsZh },
+	es: { common: commonEs, dialogs: dialogsEs },
+};
+
+let currentLocale: Locale = "en";
+
+export function setMainLocale(locale: string) {
+	if (locale === "en" || locale === "zh-CN" || locale === "es") {
+		currentLocale = locale;
+	}
+}
+
+export function getMainLocale(): Locale {
+	return currentLocale;
+}
+
+function getMessageValue(obj: unknown, dotPath: string): string | undefined {
+	const keys = dotPath.split(".");
+	let current: unknown = obj;
+	for (const key of keys) {
+		if (current == null || typeof current !== "object") return undefined;
+		current = (current as Record<string, unknown>)[key];
+	}
+	return typeof current === "string" ? current : undefined;
+}
+
+function interpolate(str: string, vars?: Record<string, string | number>): string {
+	if (!vars) return str;
+	return str.replace(/\{\{(\w+)\}\}/g, (_, key: string) => String(vars[key] ?? `{{${key}}}`));
+}
+
+export function mainT(
+	namespace: Namespace,
+	key: string,
+	vars?: Record<string, string | number>,
+): string {
+	const value =
+		getMessageValue(messages[currentLocale]?.[namespace], key) ??
+		getMessageValue(messages.en?.[namespace], key);
+
+	if (value == null) return `${namespace}.${key}`;
+	return interpolate(value, vars);
+}

electron/ipc/handlers.ts

@@ -1,10 +1,28 @@
 import fs from "node:fs/promises";
 import path from "node:path";
-import { app, BrowserWindow, desktopCapturer, dialog, ipcMain, screen, shell } from "electron";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import {
+	app,
+	BrowserWindow,
+	desktopCapturer,
+	dialog,
+	ipcMain,
+	screen,
+	shell,
+	systemPreferences,
+} from "electron";
+import {
+	normalizeProjectMedia,
+	normalizeRecordingSession,
+	type RecordingSession,
+	type StoreRecordedSessionInput,
+} from "../../src/lib/recordingSession";
+import { mainT } from "../i18n";
 import { RECORDINGS_DIR } from "../main";
 
 const PROJECT_FILE_EXTENSION = "openscreen";
 const SHORTCUTS_FILE = path.join(app.getPath("userData"), "shortcuts.json");
+const RECORDING_SESSION_SUFFIX = ".session.json";
 
 type SelectedSource = {
 	name: string;
@@ -13,11 +31,33 @@ type SelectedSource = {
 
 let selectedSource: SelectedSource | null = null;
 let currentProjectPath: string | null = null;
+let currentRecordingSession: RecordingSession | null = null;
 
 function normalizePath(filePath: string) {
 	return path.resolve(filePath);
 }
 
+function normalizeVideoSourcePath(videoPath?: string | null): string | null {
+	if (typeof videoPath !== "string") {
+		return null;
+	}
+
+	const trimmed = videoPath.trim();
+	if (!trimmed) {
+		return null;
+	}
+
+	if (/^file:\/\//i.test(trimmed)) {
+		try {
+			return fileURLToPath(trimmed);
+		} catch {
+			// Fall through and keep best-effort string path below.
+		}
+	}
+
+	return trimmed;
+}
+
 function isTrustedProjectPath(filePath?: string | null) {
 	if (!filePath || !currentProjectPath) {
 		return false;
@@ -25,6 +65,101 @@ function isTrustedProjectPath(filePath?: string | null) {
 	return normalizePath(filePath) === normalizePath(currentProjectPath);
 }
 
+function setCurrentRecordingSessionState(session: RecordingSession | null) {
+	currentRecordingSession = session;
+}
+
+function getSessionManifestPathForVideo(videoPath: string) {
+	const parsed = path.parse(videoPath);
+	const baseName = parsed.name.endsWith("-webcam")
+		? parsed.name.slice(0, -"-webcam".length)
+		: parsed.name;
+	return path.join(parsed.dir, `${baseName}${RECORDING_SESSION_SUFFIX}`);
+}
+
+async function loadRecordedSessionForVideoPath(
+	videoPath: string,
+): Promise<RecordingSession | null> {
+	const normalizedVideoPath = normalizeVideoSourcePath(videoPath);
+	if (!normalizedVideoPath) {
+		return null;
+	}
+
+	try {
+		const manifestPath = getSessionManifestPathForVideo(normalizedVideoPath);
+		const content = await fs.readFile(manifestPath, "utf-8");
+		const session = normalizeRecordingSession(JSON.parse(content));
+		if (!session) {
+			return null;
+		}
+
+		const normalizedSession: RecordingSession = {
+			...session,
+			screenVideoPath: normalizeVideoSourcePath(session.screenVideoPath) ?? session.screenVideoPath,
+			...(session.webcamVideoPath
+				? {
+						webcamVideoPath:
+							normalizeVideoSourcePath(session.webcamVideoPath) ?? session.webcamVideoPath,
+					}
+				: {}),
+		};
+
+		const targetPath = normalizePath(normalizedVideoPath);
+		const screenMatches = normalizePath(normalizedSession.screenVideoPath) === targetPath;
+		const webcamMatches = normalizedSession.webcamVideoPath
+			? normalizePath(normalizedSession.webcamVideoPath) === targetPath
+			: false;
+
+		return screenMatches || webcamMatches ? normalizedSession : null;
+	} catch {
+		return null;
+	}
+}
+
+async function storeRecordedSessionFiles(payload: StoreRecordedSessionInput) {
+	const createdAt =
+		typeof payload.createdAt === "number" && Number.isFinite(payload.createdAt)
+			? payload.createdAt
+			: Date.now();
+	const screenVideoPath = path.join(RECORDINGS_DIR, payload.screen.fileName);
+	await fs.writeFile(screenVideoPath, Buffer.from(payload.screen.videoData));
+
+	let webcamVideoPath: string | undefined;
+	if (payload.webcam) {
+		webcamVideoPath = path.join(RECORDINGS_DIR, payload.webcam.fileName);
+		await fs.writeFile(webcamVideoPath, Buffer.from(payload.webcam.videoData));
+	}
+
+	const session: RecordingSession = webcamVideoPath
+		? { screenVideoPath, webcamVideoPath, createdAt }
+		: { screenVideoPath, createdAt };
+	setCurrentRecordingSessionState(session);
+	currentProjectPath = null;
+
+	const telemetryPath = `${screenVideoPath}.cursor.json`;
+	if (pendingCursorSamples.length > 0) {
+		await fs.writeFile(
+			telemetryPath,
+			JSON.stringify({ version: CURSOR_TELEMETRY_VERSION, samples: pendingCursorSamples }, null, 2),
+			"utf-8",
+		);
+	}
+	pendingCursorSamples = [];
+
+	const sessionManifestPath = path.join(
+		RECORDINGS_DIR,
+		`${path.parse(payload.screen.fileName).name}${RECORDING_SESSION_SUFFIX}`,
+	);
+	await fs.writeFile(sessionManifestPath, JSON.stringify(session, null, 2), "utf-8");
+
+	return {
+		success: true,
+		path: screenVideoPath,
+		session,
+		message: "Recording session stored successfully",
+	};
+}
+
 const CURSOR_TELEMETRY_VERSION = 1;
 const CURSOR_SAMPLE_INTERVAL_MS = 100;
 const MAX_CURSOR_SAMPLES = 60 * 60 * 10; // 1 hour @ 10Hz
@@ -107,6 +242,38 @@ export function registerIpcHandlers(
 		return selectedSource;
 	});
 
+	ipcMain.handle("request-camera-access", async () => {
+		if (process.platform !== "darwin") {
+			return { success: true, granted: true, status: "granted" };
+		}
+
+		try {
+			const status = systemPreferences.getMediaAccessStatus("camera");
+			if (status === "granted") {
+				return { success: true, granted: true, status };
+			}
+
+			if (status === "not-determined") {
+				const granted = await systemPreferences.askForMediaAccess("camera");
+				return {
+					success: true,
+					granted,
+					status: granted ? "granted" : systemPreferences.getMediaAccessStatus("camera"),
+				};
+			}
+
+			return { success: true, granted: false, status };
+		} catch (error) {
+			console.error("Failed to request camera access:", error);
+			return {
+				success: false,
+				granted: false,
+				status: "unknown",
+				error: String(error),
+			};
+		}
+	});
+
 	ipcMain.handle("open-source-selector", () => {
 		const sourceSelectorWin = getSourceSelectorWindow();
 		if (sourceSelectorWin) {
@@ -124,36 +291,30 @@ export function registerIpcHandlers(
 		createEditorWindow();
 	});
 
-	ipcMain.handle("store-recorded-video", async (_, videoData: ArrayBuffer, fileName: string) => {
+	ipcMain.handle("store-recorded-session", async (_, payload: StoreRecordedSessionInput) => {
 		try {
-			const videoPath = path.join(RECORDINGS_DIR, fileName);
-			await fs.writeFile(videoPath, Buffer.from(videoData));
-			currentProjectPath = null;
-
-			const telemetryPath = `${videoPath}.cursor.json`;
-			if (pendingCursorSamples.length > 0) {
-				await fs.writeFile(
-					telemetryPath,
-					JSON.stringify(
-						{ version: CURSOR_TELEMETRY_VERSION, samples: pendingCursorSamples },
-						null,
-						2,
-					),
-					"utf-8",
-				);
-			}
-			pendingCursorSamples = [];
-
-			return {
-				success: true,
-				path: videoPath,
-				message: "Video stored successfully",
-			};
+			return await storeRecordedSessionFiles(payload);
 		} catch (error) {
-			console.error("Failed to store video:", error);
+			console.error("Failed to store recording session:", error);
 			return {
 				success: false,
-				message: "Failed to store video",
+				message: "Failed to store recording session",
+				error: String(error),
+			};
+		}
+	});
+
+	ipcMain.handle("store-recorded-video", async (_, videoData: ArrayBuffer, fileName: string) => {
+		try {
+			return await storeRecordedSessionFiles({
+				screen: { videoData, fileName },
+				createdAt: Date.now(),
+			});
+		} catch (error) {
+			console.error("Failed to store recorded video:", error);
+			return {
+				success: false,
+				message: "Failed to store recorded video",
 				error: String(error),
 			};
 		}
@@ -161,8 +322,14 @@ export function registerIpcHandlers(
 
 	ipcMain.handle("get-recorded-video-path", async () => {
 		try {
+			if (currentRecordingSession?.screenVideoPath) {
+				return { success: true, path: currentRecordingSession.screenVideoPath };
+			}
+
 			const files = await fs.readdir(RECORDINGS_DIR);
-			const videoFiles = files.filter((file) => file.endsWith(".webm"));
+			const videoFiles = files.filter(
+				(file) => file.endsWith(".webm") && !file.endsWith("-webcam.webm"),
+			);
 
 			if (videoFiles.length === 0) {
 				return { success: false, message: "No recorded video found" };
@@ -178,6 +345,29 @@ export function registerIpcHandlers(
 		}
 	});
 
+	ipcMain.handle("read-binary-file", async (_, inputPath: string) => {
+		try {
+			const normalizedPath = normalizeVideoSourcePath(inputPath);
+			if (!normalizedPath) {
+				return { success: false, message: "Invalid file path" };
+			}
+
+			const data = await fs.readFile(normalizedPath);
+			return {
+				success: true,
+				data: data.buffer.slice(data.byteOffset, data.byteOffset + data.byteLength),
+				path: normalizedPath,
+			};
+		} catch (error) {
+			console.error("Failed to read binary file:", error);
+			return {
+				success: false,
+				message: "Failed to read binary file",
+				error: String(error),
+			};
+		}
+	});
+
 	ipcMain.handle("set-recording-state", (_, recording: boolean) => {
 		if (recording) {
 			stopCursorCapture();
@@ -199,7 +389,9 @@ export function registerIpcHandlers(
 	});
 
 	ipcMain.handle("get-cursor-telemetry", async (_, videoPath?: string) => {
-		const targetVideoPath = videoPath ?? currentVideoPath;
+		const targetVideoPath = normalizeVideoSourcePath(
+			videoPath ?? currentRecordingSession?.screenVideoPath,
+		);
 		if (!targetVideoPath) {
 			return { success: true, samples: [] };
 		}
@@ -265,9 +457,11 @@ export function registerIpcHandlers(
 	ipcMain.handle("get-asset-base-path", () => {
 		try {
 			if (app.isPackaged) {
-				return path.join(process.resourcesPath, "assets");
+				const assetPath = path.join(process.resourcesPath, "assets");
+				return pathToFileURL(`${assetPath}${path.sep}`).toString();
 			}
-			return path.join(app.getAppPath(), "public", "assets");
+			const assetPath = path.join(app.getAppPath(), "public", "assets");
+			return pathToFileURL(`${assetPath}${path.sep}`).toString();
 		} catch (err) {
 			console.error("Failed to resolve asset base path:", err);
 			return null;
@@ -279,11 +473,13 @@ export function registerIpcHandlers(
 			// Determine file type from extension
 			const isGif = fileName.toLowerCase().endsWith(".gif");
 			const filters = isGif
-				? [{ name: "GIF Image", extensions: ["gif"] }]
-				: [{ name: "MP4 Video", extensions: ["mp4"] }];
+				? [{ name: mainT("dialogs", "fileDialogs.gifImage"), extensions: ["gif"] }]
+				: [{ name: mainT("dialogs", "fileDialogs.mp4Video"), extensions: ["mp4"] }];
 
 			const result = await dialog.showSaveDialog({
-				title: isGif ? "Save Exported GIF" : "Save Exported Video",
+				title: isGif
+					? mainT("dialogs", "fileDialogs.saveGif")
+					: mainT("dialogs", "fileDialogs.saveVideo"),
 				defaultPath: path.join(app.getPath("downloads"), fileName),
 				filters,
 				properties: ["createDirectory", "showOverwriteConfirmation"],
@@ -317,11 +513,14 @@ export function registerIpcHandlers(
 	ipcMain.handle("open-video-file-picker", async () => {
 		try {
 			const result = await dialog.showOpenDialog({
-				title: "Select Video File",
+				title: mainT("dialogs", "fileDialogs.selectVideo"),
 				defaultPath: RECORDINGS_DIR,
 				filters: [
-					{ name: "Video Files", extensions: ["webm", "mp4", "mov", "avi", "mkv"] },
-					{ name: "All Files", extensions: ["*"] },
+					{
+						name: mainT("dialogs", "fileDialogs.videoFiles"),
+						extensions: ["webm", "mp4", "mov", "avi", "mkv"],
+					},
+					{ name: mainT("dialogs", "fileDialogs.allFiles"), extensions: ["*"] },
 				],
 				properties: ["openFile"],
 			});
@@ -369,7 +568,6 @@ export function registerIpcHandlers(
 		}
 	});
 
-	let currentVideoPath: string | null = null;
 	ipcMain.handle(
 		"save-project-file",
 		async (_, projectData: unknown, suggestedName?: string, existingProjectPath?: string) => {
@@ -398,10 +596,13 @@ export function registerIpcHandlers(
 					: `${safeName}.${PROJECT_FILE_EXTENSION}`;
 
 				const result = await dialog.showSaveDialog({
-					title: "Save OpenScreen Project",
+					title: mainT("dialogs", "fileDialogs.saveProject"),
 					defaultPath: path.join(RECORDINGS_DIR, defaultName),
 					filters: [
-						{ name: "OpenScreen Project", extensions: [PROJECT_FILE_EXTENSION] },
+						{
+							name: mainT("dialogs", "fileDialogs.openscreenProject"),
+							extensions: [PROJECT_FILE_EXTENSION],
+						},
 						{ name: "JSON", extensions: ["json"] },
 					],
 					properties: ["createDirectory", "showOverwriteConfirmation"],
@@ -437,12 +638,15 @@ export function registerIpcHandlers(
 	ipcMain.handle("load-project-file", async () => {
 		try {
 			const result = await dialog.showOpenDialog({
-				title: "Open OpenScreen Project",
+				title: mainT("dialogs", "fileDialogs.openProject"),
 				defaultPath: RECORDINGS_DIR,
 				filters: [
-					{ name: "OpenScreen Project", extensions: [PROJECT_FILE_EXTENSION] },
+					{
+						name: mainT("dialogs", "fileDialogs.openscreenProject"),
+						extensions: [PROJECT_FILE_EXTENSION],
+					},
 					{ name: "JSON", extensions: ["json"] },
-					{ name: "All Files", extensions: ["*"] },
+					{ name: mainT("dialogs", "fileDialogs.allFiles"), extensions: ["*"] },
 				],
 				properties: ["openFile"],
 			});
@@ -455,8 +659,17 @@ export function registerIpcHandlers(
 			const content = await fs.readFile(filePath, "utf-8");
 			const project = JSON.parse(content);
 			currentProjectPath = filePath;
-			if (project && typeof project === "object" && typeof project.videoPath === "string") {
-				currentVideoPath = project.videoPath;
+			if (project && typeof project === "object") {
+				const rawProject = project as { media?: unknown; videoPath?: unknown };
+				const media =
+					normalizeProjectMedia(rawProject.media) ??
+					(typeof rawProject.videoPath === "string"
+						? {
+								screenVideoPath:
+									normalizeVideoSourcePath(rawProject.videoPath) ?? rawProject.videoPath,
+							}
+						: null);
+				setCurrentRecordingSessionState(media ? { ...media, createdAt: Date.now() } : null);
 			}
 
 			return {
@@ -482,8 +695,17 @@ export function registerIpcHandlers(
 
 			const content = await fs.readFile(currentProjectPath, "utf-8");
 			const project = JSON.parse(content);
-			if (project && typeof project === "object" && typeof project.videoPath === "string") {
-				currentVideoPath = project.videoPath;
+			if (project && typeof project === "object") {
+				const rawProject = project as { media?: unknown; videoPath?: unknown };
+				const media =
+					normalizeProjectMedia(rawProject.media) ??
+					(typeof rawProject.videoPath === "string"
+						? {
+								screenVideoPath:
+									normalizeVideoSourcePath(rawProject.videoPath) ?? rawProject.videoPath,
+							}
+						: null);
+				setCurrentRecordingSessionState(media ? { ...media, createdAt: Date.now() } : null);
 			}
 			return {
 				success: true,
@@ -499,18 +721,41 @@ export function registerIpcHandlers(
 			};
 		}
 	});
-	ipcMain.handle("set-current-video-path", (_, path: string) => {
-		currentVideoPath = path;
+	ipcMain.handle("set-current-recording-session", (_, session: RecordingSession | null) => {
+		const normalized = normalizeRecordingSession(session);
+		setCurrentRecordingSessionState(normalized);
+		currentProjectPath = null;
+		return { success: true, session: normalized ?? undefined };
+	});
+
+	ipcMain.handle("get-current-recording-session", () => {
+		return currentRecordingSession
+			? { success: true, session: currentRecordingSession }
+			: { success: false };
+	});
+
+	ipcMain.handle("set-current-video-path", async (_, path: string) => {
+		const restoredSession = await loadRecordedSessionForVideoPath(path);
+		if (restoredSession) {
+			setCurrentRecordingSessionState(restoredSession);
+		} else {
+			setCurrentRecordingSessionState({
+				screenVideoPath: normalizeVideoSourcePath(path) ?? path,
+				createdAt: Date.now(),
+			});
+		}
 		currentProjectPath = null;
 		return { success: true };
 	});
 
 	ipcMain.handle("get-current-video-path", () => {
-		return currentVideoPath ? { success: true, path: currentVideoPath } : { success: false };
+		return currentRecordingSession?.screenVideoPath
+			? { success: true, path: currentRecordingSession.screenVideoPath }
+			: { success: false };
 	});
 
 	ipcMain.handle("clear-current-video-path", () => {
-		currentVideoPath = null;
+		setCurrentRecordingSessionState(null);
 		return { success: true };
 	});
 

electron/main.ts

@@ -1,7 +1,18 @@
 import fs from "node:fs/promises";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
-import { app, BrowserWindow, dialog, ipcMain, Menu, nativeImage, Tray } from "electron";
+import {
+	app,
+	BrowserWindow,
+	dialog,
+	ipcMain,
+	Menu,
+	nativeImage,
+	session,
+	systemPreferences,
+	Tray,
+} from "electron";
+import { mainT, setMainLocale } from "./i18n";
 import { registerIpcHandlers } from "./ipc/handlers";
 import { createEditorWindow, createHudOverlayWindow, createSourceSelectorWindow } from "./windows";
 
@@ -60,6 +71,19 @@ function createWindow() {
 	mainWindow = createHudOverlayWindow();
 }
 
+function showMainWindow() {
+	if (mainWindow && !mainWindow.isDestroyed()) {
+		if (mainWindow.isMinimized()) {
+			mainWindow.restore();
+		}
+		mainWindow.show();
+		mainWindow.focus();
+		return;
+	}
+
+	createWindow();
+}
+
 function isEditorWindow(window: BrowserWindow) {
 	return window.webContents.getURL().includes("windowType=editor");
 }
@@ -107,20 +131,20 @@ function setupApplicationMenu() {
 
 	template.push(
 		{
-			label: "File",
+			label: mainT("common", "actions.file") || "File",
 			submenu: [
 				{
-					label: "Load Project…",
+					label: mainT("dialogs", "unsavedChanges.loadProject") || "Load Project…",
 					accelerator: "CmdOrCtrl+O",
 					click: () => sendEditorMenuAction("menu-load-project"),
 				},
 				{
-					label: "Save Project…",
+					label: mainT("dialogs", "unsavedChanges.saveProject") || "Save Project…",
 					accelerator: "CmdOrCtrl+S",
 					click: () => sendEditorMenuAction("menu-save-project"),
 				},
 				{
-					label: "Save Project As…",
+					label: mainT("dialogs", "unsavedChanges.saveProjectAs") || "Save Project As…",
 					accelerator: "CmdOrCtrl+Shift+S",
 					click: () => sendEditorMenuAction("menu-save-project-as"),
 				},
@@ -128,7 +152,7 @@ function setupApplicationMenu() {
 			],
 		},
 		{
-			label: "Edit",
+			label: mainT("common", "actions.edit") || "Edit",
 			submenu: [
 				{ role: "undo" },
 				{ role: "redo" },
@@ -140,7 +164,7 @@ function setupApplicationMenu() {
 			],
 		},
 		{
-			label: "View",
+			label: mainT("common", "actions.view") || "View",
 			submenu: [
 				{ role: "reload" },
 				{ role: "forceReload" },
@@ -154,7 +178,7 @@ function setupApplicationMenu() {
 			],
 		},
 		{
-			label: "Window",
+			label: mainT("common", "actions.window") || "Window",
 			submenu: isMac
 				? [{ role: "minimize" }, { role: "zoom" }, { type: "separator" }, { role: "front" }]
 				: [{ role: "minimize" }, { role: "close" }],
@@ -167,6 +191,12 @@ function setupApplicationMenu() {
 
 function createTray() {
 	tray = new Tray(defaultTrayIcon);
+	tray.on("click", () => {
+		showMainWindow();
+	});
+	tray.on("double-click", () => {
+		showMainWindow();
+	});
 }
 
 function getTrayIcon(filename: string) {
@@ -186,7 +216,7 @@ function updateTrayMenu(recording: boolean = false) {
 	const menuTemplate = recording
 		? [
 				{
-					label: "Stop Recording",
+					label: mainT("common", "actions.stopRecording") || "Stop Recording",
 					click: () => {
 						if (mainWindow && !mainWindow.isDestroyed()) {
 							mainWindow.webContents.send("stop-recording-from-tray");
@@ -196,17 +226,13 @@ function updateTrayMenu(recording: boolean = false) {
 			]
 		: [
 				{
-					label: "Open",
+					label: mainT("common", "actions.open") || "Open",
 					click: () => {
-						if (mainWindow && !mainWindow.isDestroyed()) {
-							mainWindow.isMinimized() && mainWindow.restore();
-						} else {
-							createWindow();
-						}
+						showMainWindow();
 					},
 				},
 				{
-					label: "Quit",
+					label: mainT("common", "actions.quit") || "Quit",
 					click: () => {
 						app.quit();
 					},
@@ -224,6 +250,21 @@ ipcMain.on("set-has-unsaved-changes", (_, hasChanges: boolean) => {
 	editorHasUnsavedChanges = hasChanges;
 });
 
+function forceCloseEditorWindow(windowToClose: BrowserWindow | null) {
+	if (!windowToClose || windowToClose.isDestroyed()) return;
+
+	isForceClosing = true;
+	setImmediate(() => {
+		try {
+			if (!windowToClose.isDestroyed()) {
+				windowToClose.close();
+			}
+		} finally {
+			isForceClosing = false;
+		}
+	});
+}
+
 function createEditorWindowWrapper() {
 	if (mainWindow) {
 		isForceClosing = true;
@@ -241,27 +282,31 @@ function createEditorWindowWrapper() {
 
 		const choice = dialog.showMessageBoxSync(mainWindow!, {
 			type: "warning",
-			buttons: ["Save & Close", "Discard & Close", "Cancel"],
+			buttons: [
+				mainT("dialogs", "unsavedChanges.saveAndClose"),
+				mainT("dialogs", "unsavedChanges.discardAndClose"),
+				mainT("common", "actions.cancel"),
+			],
 			defaultId: 0,
 			cancelId: 2,
-			title: "Unsaved Changes",
-			message: "You have unsaved changes.",
-			detail: "Do you want to save your project before closing?",
+			title: mainT("dialogs", "unsavedChanges.title"),
+			message: mainT("dialogs", "unsavedChanges.message"),
+			detail: mainT("dialogs", "unsavedChanges.detail"),
 		});
 
+		const windowToClose = mainWindow;
+		if (!windowToClose || windowToClose.isDestroyed()) return;
+
 		if (choice === 0) {
 			// Save & Close — tell renderer to save, then close
-			mainWindow!.webContents.send("request-save-before-close");
-			ipcMain.once("save-before-close-done", () => {
-				isForceClosing = true;
-				mainWindow?.close();
-				isForceClosing = false;
+			windowToClose.webContents.send("request-save-before-close");
+			ipcMain.once("save-before-close-done", (_, shouldClose: boolean) => {
+				if (!shouldClose) return;
+				forceCloseEditorWindow(windowToClose);
 			});
 		} else if (choice === 1) {
 			// Discard & Close
-			isForceClosing = true;
-			mainWindow?.close();
-			isForceClosing = false;
+			forceCloseEditorWindow(windowToClose);
 		}
 		// choice === 2: Cancel — do nothing, window stays open
 	});
@@ -291,10 +336,35 @@ app.on("activate", () => {
 
 // Register all IPC handlers when app is ready
 app.whenReady().then(async () => {
+	// Allow microphone/media permission checks
+	session.defaultSession.setPermissionCheckHandler((_webContents, permission) => {
+		const allowed = ["media", "audioCapture", "microphone", "videoCapture", "camera"];
+		return allowed.includes(permission);
+	});
+
+	session.defaultSession.setPermissionRequestHandler((_webContents, permission, callback) => {
+		const allowed = ["media", "audioCapture", "microphone", "videoCapture", "camera"];
+		callback(allowed.includes(permission));
+	});
+
+	// Request microphone permission from macOS
+	if (process.platform === "darwin") {
+		const micStatus = systemPreferences.getMediaAccessStatus("microphone");
+		if (micStatus !== "granted") {
+			await systemPreferences.askForMediaAccess("microphone");
+		}
+	}
+
 	// Listen for HUD overlay quit event (macOS only)
 	ipcMain.on("hud-overlay-close", () => {
 		app.quit();
 	});
+	ipcMain.handle("set-locale", (_, locale: string) => {
+		setMainLocale(locale);
+		setupApplicationMenu();
+		updateTrayMenu();
+	});
+
 	createTray();
 	updateTrayMenu();
 	setupApplicationMenu();
@@ -311,7 +381,7 @@ app.whenReady().then(async () => {
 			if (!tray) createTray();
 			updateTrayMenu(recording);
 			if (!recording) {
-				if (mainWindow) mainWindow.restore();
+				showMainWindow();
 			}
 		},
 	);

electron/preload.ts

@@ -1,4 +1,5 @@
 import { contextBridge, ipcRenderer } from "electron";
+import type { RecordingSession, StoreRecordedSessionInput } from "../src/lib/recordingSession";
 
 contextBridge.exposeInMainWorld("electronAPI", {
 	hudOverlayHide: () => {
@@ -20,16 +21,22 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	openSourceSelector: () => {
 		return ipcRenderer.invoke("open-source-selector");
 	},
-	selectSource: (source: any) => {
+	selectSource: (source: ProcessedDesktopSource) => {
 		return ipcRenderer.invoke("select-source", source);
 	},
 	getSelectedSource: () => {
 		return ipcRenderer.invoke("get-selected-source");
 	},
+	requestCameraAccess: () => {
+		return ipcRenderer.invoke("request-camera-access");
+	},
 
 	storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
 		return ipcRenderer.invoke("store-recorded-video", videoData, fileName);
 	},
+	storeRecordedSession: (payload: StoreRecordedSessionInput) => {
+		return ipcRenderer.invoke("store-recorded-session", payload);
+	},
 
 	getRecordedVideoPath: () => {
 		return ipcRenderer.invoke("get-recorded-video-path");
@@ -57,9 +64,18 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	setCurrentVideoPath: (path: string) => {
 		return ipcRenderer.invoke("set-current-video-path", path);
 	},
+	setCurrentRecordingSession: (session: RecordingSession | null) => {
+		return ipcRenderer.invoke("set-current-recording-session", session);
+	},
 	getCurrentVideoPath: () => {
 		return ipcRenderer.invoke("get-current-video-path");
 	},
+	getCurrentRecordingSession: () => {
+		return ipcRenderer.invoke("get-current-recording-session");
+	},
+	readBinaryFile: (filePath: string) => {
+		return ipcRenderer.invoke("read-binary-file", filePath);
+	},
 	clearCurrentVideoPath: () => {
 		return ipcRenderer.invoke("clear-current-video-path");
 	},
@@ -99,16 +115,23 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	saveShortcuts: (shortcuts: unknown) => {
 		return ipcRenderer.invoke("save-shortcuts", shortcuts);
 	},
+	setLocale: (locale: string) => {
+		return ipcRenderer.invoke("set-locale", locale);
+	},
 	setMicrophoneExpanded: (expanded: boolean) => {
 		ipcRenderer.send("hud:setMicrophoneExpanded", expanded);
 	},
 	setHasUnsavedChanges: (hasChanges: boolean) => {
 		ipcRenderer.send("set-has-unsaved-changes", hasChanges);
 	},
-	onRequestSaveBeforeClose: (callback: () => Promise<void>) => {
+	onRequestSaveBeforeClose: (callback: () => Promise<boolean> | boolean) => {
 		const listener = async () => {
-			await callback();
-			ipcRenderer.send("save-before-close-done");
+			try {
+				const shouldClose = await callback();
+				ipcRenderer.send("save-before-close-done", shouldClose);
+			} catch {
+				ipcRenderer.send("save-before-close-done", false);
+			}
 		};
 		ipcRenderer.on("request-save-before-close", listener);
 		return () => ipcRenderer.removeListener("request-save-before-close", listener);

electron/windows.ts

@@ -7,6 +7,7 @@ const __dirname = path.dirname(fileURLToPath(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 HEADLESS = process.env["HEADLESS"] === "true";
 
 let hudOverlayWindow: BrowserWindow | null = null;
 
@@ -20,8 +21,8 @@ export function createHudOverlayWindow(): BrowserWindow {
 	const primaryDisplay = screen.getPrimaryDisplay();
 	const { workArea } = primaryDisplay;
 
-	const windowWidth = 500;
-	const windowHeight = 155;
+	const windowWidth = 600;
+	const windowHeight = 160;
 
 	const x = Math.floor(workArea.x + (workArea.width - windowWidth) / 2);
 	const y = Math.floor(workArea.y + workArea.height - windowHeight - 5);
@@ -29,10 +30,10 @@ export function createHudOverlayWindow(): BrowserWindow {
 	const win = new BrowserWindow({
 		width: windowWidth,
 		height: windowHeight,
-		minWidth: 500,
-		maxWidth: 500,
-		minHeight: 155,
-		maxHeight: 155,
+		minWidth: 600,
+		maxWidth: 600,
+		minHeight: 160,
+		maxHeight: 160,
 		x: x,
 		y: y,
 		frame: false,
@@ -41,6 +42,7 @@ export function createHudOverlayWindow(): BrowserWindow {
 		alwaysOnTop: true,
 		skipTaskbar: true,
 		hasShadow: false,
+		show: !HEADLESS,
 		webPreferences: {
 			preload: path.join(__dirname, "preload.mjs"),
 			nodeIntegration: false,
@@ -90,6 +92,7 @@ export function createEditorWindow(): BrowserWindow {
 		skipTaskbar: false,
 		title: "OpenScreen",
 		backgroundColor: "#000000",
+		show: !HEADLESS,
 		webPreferences: {
 			preload: path.join(__dirname, "preload.mjs"),
 			nodeIntegration: false,

package.json

@@ -1,20 +1,28 @@
 {
 	"name": "openscreen",
 	"private": true,
-	"version": "1.2.0",
+	"version": "1.3.0",
 	"type": "module",
+	"packageManager": "npm@10.9.4",
+	"engines": {
+		"node": "22.22.1",
+		"npm": "10.9.4"
+	},
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build && electron-builder",
 		"lint": "biome check .",
 		"lint:fix": "biome check --write .",
 		"format": "biome format --write .",
+		"i18n:check": "node scripts/i18n-check.mjs",
 		"preview": "vite preview",
 		"build:mac": "tsc && vite build && electron-builder --mac",
 		"build:win": "tsc && vite build && electron-builder --win",
 		"build:linux": "tsc && vite build && electron-builder --linux",
 		"test": "vitest --run",
 		"test:watch": "vitest",
+		"build-vite": "tsc && vite build",
+		"test:e2e": "playwright test",
 		"prepare": "husky"
 	},
 	"dependencies": {
@@ -31,6 +39,7 @@
 		"@radix-ui/react-tabs": "^1.1.13",
 		"@radix-ui/react-toggle": "^1.1.10",
 		"@radix-ui/react-toggle-group": "^1.1.11",
+		"@radix-ui/react-tooltip": "^1.2.8",
 		"@types/gif.js": "^0.2.5",
 		"@uiw/color-convert": "^2.9.2",
 		"@uiw/react-color-block": "^2.9.2",
@@ -45,6 +54,7 @@
 		"mediabunny": "^1.25.1",
 		"motion": "^12.23.24",
 		"mp4box": "^2.2.0",
+		"pixi-filters": "^6.1.5",
 		"pixi.js": "^8.14.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
@@ -59,6 +69,10 @@
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.3.13",
+		"@playwright/test": "^1.58.2",
+		"@testing-library/jest-dom": "^6.9.1",
+		"@testing-library/react": "^16.3.2",
+		"@testing-library/user-event": "^14.6.1",
 		"@types/node": "^25.0.3",
 		"@types/react": "^18.2.64",
 		"@types/react-dom": "^18.2.21",
@@ -71,6 +85,7 @@
 		"electron-rebuild": "^3.2.9",
 		"fast-check": "^4.5.2",
 		"husky": "^9.1.7",
+		"jsdom": "^29.0.1",
 		"lint-staged": "^16.3.2",
 		"postcss": "^8.5.6",
 		"tailwindcss": "^3.4.18",

playwright.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+	testDir: "./tests/e2e",
+	timeout: 120_000, // GIF encoding is CPU-bound; give it room
+	retries: 0,
+	reporter: "list",
+});

scripts/i18n-check.mjs

@@ -0,0 +1,82 @@
+#!/usr/bin/env node
+/**
+ * Validates that all locale translation files have identical key structures.
+ * Compares zh-CN and es against the en baseline for every namespace.
+ *
+ * Usage: node scripts/i18n-check.mjs
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+const LOCALES_DIR = path.resolve("src/i18n/locales");
+const BASE_LOCALE = "en";
+const COMPARE_LOCALES = ["zh-CN", "es"];
+
+function getKeys(obj, prefix = "") {
+	const keys = [];
+	for (const [key, value] of Object.entries(obj)) {
+		const fullKey = prefix ? `${prefix}.${key}` : key;
+		if (value && typeof value === "object" && !Array.isArray(value)) {
+			keys.push(...getKeys(value, fullKey));
+		} else {
+			keys.push(fullKey);
+		}
+	}
+	return keys.sort();
+}
+
+let hasErrors = false;
+
+const baseDir = path.join(LOCALES_DIR, BASE_LOCALE);
+const namespaces = fs
+	.readdirSync(baseDir)
+	.filter((f) => f.endsWith(".json"))
+	.map((f) => f.replace(".json", ""));
+
+for (const namespace of namespaces) {
+	const basePath = path.join(baseDir, `${namespace}.json`);
+	const baseData = JSON.parse(fs.readFileSync(basePath, "utf-8"));
+	const baseKeys = getKeys(baseData);
+
+	for (const locale of COMPARE_LOCALES) {
+		const localePath = path.join(LOCALES_DIR, locale, `${namespace}.json`);
+
+		if (!fs.existsSync(localePath)) {
+			console.error(`MISSING: ${locale}/${namespace}.json does not exist`);
+			hasErrors = true;
+			continue;
+		}
+
+		const localeData = JSON.parse(fs.readFileSync(localePath, "utf-8"));
+		const localeKeys = getKeys(localeData);
+
+		const missing = baseKeys.filter((k) => !localeKeys.includes(k));
+		const extra = localeKeys.filter((k) => !baseKeys.includes(k));
+
+		if (missing.length > 0) {
+			console.error(`MISSING in ${locale}/${namespace}.json:`);
+			for (const key of missing) {
+				console.error(`  - ${key}`);
+			}
+			hasErrors = true;
+		}
+
+		if (extra.length > 0) {
+			console.error(`EXTRA in ${locale}/${namespace}.json:`);
+			for (const key of extra) {
+				console.error(`  + ${key}`);
+			}
+			hasErrors = true;
+		}
+	}
+}
+
+if (hasErrors) {
+	console.error("\ni18n check FAILED — translation files are out of sync.");
+	process.exit(1);
+} else {
+	console.log(
+		`i18n check PASSED — all ${COMPARE_LOCALES.length} locales match ${BASE_LOCALE} across ${namespaces.length} namespaces.`,
+	);
+}

src/App.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useState } from "react";
 import { LaunchWindow } from "./components/launch/LaunchWindow";
 import { SourceSelector } from "./components/launch/SourceSelector";
+import { Toaster } from "./components/ui/sonner";
+import { TooltipProvider } from "./components/ui/tooltip";
 import { ShortcutsConfigDialog } from "./components/video-editor/ShortcutsConfigDialog";
 import VideoEditor from "./components/video-editor/VideoEditor";
 import { ShortcutsProvider } from "./contexts/ShortcutsContext";
@@ -25,23 +27,32 @@ export default function App() {
 		});
 	}, []);
 
-	switch (windowType) {
-		case "hud-overlay":
-			return <LaunchWindow />;
-		case "source-selector":
-			return <SourceSelector />;
-		case "editor":
-			return (
-				<ShortcutsProvider>
-					<VideoEditor />
-					<ShortcutsConfigDialog />
-				</ShortcutsProvider>
-			);
-		default:
-			return (
-				<div className="w-full h-full bg-background text-foreground">
-					<h1>Openscreen</h1>
-				</div>
-			);
-	}
+	const content = (() => {
+		switch (windowType) {
+			case "hud-overlay":
+				return <LaunchWindow />;
+			case "source-selector":
+				return <SourceSelector />;
+			case "editor":
+				return (
+					<ShortcutsProvider>
+						<VideoEditor />
+						<ShortcutsConfigDialog />
+					</ShortcutsProvider>
+				);
+			default:
+				return (
+					<div className="w-full h-full bg-background text-foreground">
+						<h1>Openscreen</h1>
+					</div>
+				);
+		}
+	})();
+
+	return (
+		<TooltipProvider>
+			{content}
+			<Toaster theme="dark" className="pointer-events-auto" />
+		</TooltipProvider>
+	);
 }

src/components/launch/LaunchWindow.module.css

@@ -1,3 +1,4 @@
+/* Electron-specific: no Tailwind equivalent for -webkit-app-region */
 .electronDrag {
 	-webkit-app-region: drag;
 }
@@ -5,129 +6,3 @@
 .electronNoDrag {
 	-webkit-app-region: no-drag;
 }
-
-.hudBar {
-	isolation: isolate;
-	box-shadow:
-		0 2px 16px rgba(0, 0, 0, 0.25),
-		0 0 40px rgba(100, 80, 200, 0.08);
-}
-
-/* Sub-pill group container */
-.hudGroup {
-	display: flex;
-	align-items: center;
-	gap: 2px;
-	background: rgba(255, 255, 255, 0.05);
-	border-radius: 9999px;
-	padding: 4px 8px;
-	transition: background 0.15s ease;
-}
-
-.hudGroup:hover {
-	background: rgba(255, 255, 255, 0.08);
-}
-
-/* Icon button within groups */
-.hudIconBtn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 4px;
-	border-radius: 9999px;
-	transition: all 0.15s ease;
-	cursor: pointer;
-	background: transparent;
-	border: none;
-	color: #fff;
-}
-
-.hudIconBtn:hover {
-	background: rgba(255, 255, 255, 0.1);
-	transform: scale(1.08);
-}
-
-.hudIconBtn:active {
-	transform: scale(0.95);
-}
-
-/* Active icon glow (green) for enabled audio toggles */
-.hudIconActive {
-	filter: drop-shadow(0 0 4px rgba(74, 222, 128, 0.4));
-}
-
-/* Recording pulse animation on the record group */
-@keyframes recordPulse {
-	0%,
-	100% {
-		box-shadow: 0 0 8px rgba(239, 68, 68, 0.15);
-	}
-	50% {
-		box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
-	}
-}
-
-.recordingPulse {
-	animation: recordPulse 1.5s ease-in-out infinite;
-	background: rgba(239, 68, 68, 0.1) !important;
-}
-
-/* Mic panel above the bar */
-.micPanel {
-	background: linear-gradient(135deg, rgba(28, 28, 36, 0.97) 0%, rgba(18, 18, 26, 0.96) 100%);
-	backdrop-filter: blur(16px) saturate(140%);
-	-webkit-backdrop-filter: blur(16px) saturate(140%);
-	border: 1px solid rgba(80, 80, 120, 0.25);
-	border-radius: 16px;
-	box-shadow:
-		0 2px 12px rgba(0, 0, 0, 0.2),
-		0 0 30px rgba(100, 80, 200, 0.06);
-	animation: micPanelIn 0.15s ease-out;
-}
-
-@keyframes micPanelIn {
-	from {
-		opacity: 0;
-		transform: translateY(4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-/* Window control buttons */
-.windowBtn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 3px;
-	border-radius: 9999px;
-	transition: all 0.15s ease;
-	cursor: pointer;
-	background: transparent;
-	border: none;
-	opacity: 0.5;
-}
-
-.windowBtn:hover {
-	opacity: 0.9;
-	background: rgba(255, 255, 255, 0.08);
-}
-
-/* Folder button */
-.folderButton {
-	cursor: pointer;
-	display: flex;
-	align-items: center;
-	gap: 4px;
-}
-
-.folderText {
-	color: #cbd5e1;
-	transition: text-decoration 0.15s;
-}
-
-.folderButton:hover .folderText {
-	text-decoration: underline;
-}

src/components/launch/LaunchWindow.tsx

@@ -1,70 +1,167 @@
+import { ChevronDown, Languages } from "lucide-react";
 import { useEffect, useState } from "react";
-import { BsRecordCircle } from "react-icons/bs";
+import { BsPauseCircle, BsPlayCircle, 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 {
+	MdCancel,
+	MdMic,
+	MdMicOff,
+	MdMonitor,
+	MdRestartAlt,
+	MdVideocam,
+	MdVideocamOff,
+	MdVideoFile,
+	MdVolumeOff,
+	MdVolumeUp,
+} from "react-icons/md";
 import { RxDragHandleDots2 } from "react-icons/rx";
+import { useI18n, useScopedT } from "@/contexts/I18nContext";
+import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
+import { getLocaleName } from "@/i18n/loader";
+import { isMac as getIsMac } from "@/utils/platformUtils";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
+import { useCameraDevices } from "../../hooks/useCameraDevices";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
 import { useScreenRecorder } from "../../hooks/useScreenRecorder";
+import { requestCameraAccess } from "../../lib/requestCameraAccess";
+import { formatTimePadded } from "../../utils/timeUtils";
 import { AudioLevelMeter } from "../ui/audio-level-meter";
+import { Tooltip } from "../ui/tooltip";
 import styles from "./LaunchWindow.module.css";
 
+const ICON_SIZE = 20;
+
+const ICON_CONFIG = {
+	drag: { icon: RxDragHandleDots2, size: ICON_SIZE },
+	monitor: { icon: MdMonitor, size: ICON_SIZE },
+	volumeOn: { icon: MdVolumeUp, size: ICON_SIZE },
+	volumeOff: { icon: MdVolumeOff, size: ICON_SIZE },
+	micOn: { icon: MdMic, size: ICON_SIZE },
+	micOff: { icon: MdMicOff, size: ICON_SIZE },
+	webcamOn: { icon: MdVideocam, size: ICON_SIZE },
+	webcamOff: { icon: MdVideocamOff, size: ICON_SIZE },
+	pause: { icon: BsPauseCircle, size: ICON_SIZE },
+	resume: { icon: BsPlayCircle, size: ICON_SIZE },
+	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
+	restart: { icon: MdRestartAlt, size: ICON_SIZE },
+	cancel: { icon: MdCancel, size: ICON_SIZE },
+	record: { icon: BsRecordCircle, size: ICON_SIZE },
+	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
+	folder: { icon: FaFolderOpen, size: ICON_SIZE },
+	minimize: { icon: FiMinus, size: ICON_SIZE },
+	close: { icon: FiX, size: ICON_SIZE },
+} as const;
+
+type IconName = keyof typeof ICON_CONFIG;
+
+function getIcon(name: IconName, className?: string) {
+	const { icon: Icon, size } = ICON_CONFIG[name];
+	return <Icon size={size} className={className} />;
+}
+
+const hudGroupClasses =
+	"flex items-center gap-0.5 bg-white/5 rounded-full transition-colors duration-150 hover:bg-white/[0.08]";
+
+const hudIconBtnClasses =
+	"flex items-center justify-center p-2 rounded-full transition-all duration-150 cursor-pointer text-white hover:bg-white/10 hover:scale-[1.08] active:scale-95";
+
+const windowBtnClasses =
+	"flex items-center justify-center p-2 rounded-full transition-all duration-150 cursor-pointer opacity-50 hover:opacity-90 hover:bg-white/[0.08]";
+
 export function LaunchWindow() {
+	const t = useScopedT("launch");
+	const { locale, setLocale } = useI18n();
+	const [isMac, setIsMac] = useState(false);
+
+	useEffect(() => {
+		getIsMac().then(setIsMac);
+	}, []);
+
 	const {
 		recording,
+		paused,
+		elapsedSeconds,
 		toggleRecording,
+		togglePaused,
+		restartRecording,
+		cancelRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
 		setMicrophoneDeviceId,
 		systemAudioEnabled,
 		setSystemAudioEnabled,
+		webcamEnabled,
+		setWebcamEnabled,
+		webcamDeviceId,
+		setWebcamDeviceId,
 	} = useScreenRecorder();
-	const [recordingStart, setRecordingStart] = useState<number | null>(null);
-	const [elapsed, setElapsed] = useState(0);
 
 	const showMicControls = microphoneEnabled && !recording;
-	const { devices, selectedDeviceId, setSelectedDeviceId } =
-		useMicrophoneDevices(microphoneEnabled);
+	const showWebcamControls = webcamEnabled && !recording;
+
+	const [isMicHovered, setIsMicHovered] = useState(false);
+	const [isMicFocused, setIsMicFocused] = useState(false);
+	const micExpanded = isMicHovered || isMicFocused;
+
+	const [isWebcamHovered, setIsWebcamHovered] = useState(false);
+	const [isWebcamFocused, setIsWebcamFocused] = useState(false);
+	const webcamExpanded = isWebcamHovered || isWebcamFocused;
+
+	const {
+		devices: micDevices,
+		selectedDeviceId: selectedMicId,
+		setSelectedDeviceId: setSelectedMicId,
+	} = useMicrophoneDevices(microphoneEnabled);
+	const {
+		devices: cameraDevices,
+		selectedDeviceId: selectedCameraId,
+		setSelectedDeviceId: setSelectedCameraId,
+		isLoading: isCameraDevicesLoading,
+		error: cameraDevicesError,
+	} = useCameraDevices(webcamEnabled);
+
+	const selectedMicLabel =
+		micDevices.find((d) => d.deviceId === (microphoneDeviceId || selectedMicId))?.label ||
+		t("audio.defaultMicrophone");
+	const selectedCameraLabel = isCameraDevicesLoading
+		? t("webcam.searching")
+		: cameraDevicesError
+			? t("webcam.unavailable")
+			: cameraDevices.length === 0
+				? t("webcam.noneFound")
+				: cameraDevices.find((d) => d.deviceId === (webcamDeviceId || selectedCameraId))?.label ||
+					t("webcam.defaultCamera");
+
 	const { level } = useAudioLevelMeter({
 		enabled: showMicControls,
 		deviceId: microphoneDeviceId,
 	});
 
 	useEffect(() => {
-		if (selectedDeviceId && selectedDeviceId !== "default") {
-			setMicrophoneDeviceId(selectedDeviceId);
+		if (selectedMicId && selectedMicId !== "default") {
+			setMicrophoneDeviceId(selectedMicId);
 		}
-	}, [selectedDeviceId, setMicrophoneDeviceId]);
+	}, [selectedMicId, 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);
+		if (selectedCameraId) {
+			setWebcamDeviceId(selectedCameraId);
 		}
-		return () => {
-			if (timer) clearInterval(timer);
-		};
-	}, [recording, recordingStart]);
+	}, [selectedCameraId, setWebcamDeviceId]);
+
+	useEffect(() => {
+		if (!import.meta.env.DEV) {
+			return;
+		}
+
+		void requestCameraAccess().catch((error) => {
+			console.warn("Failed to trigger camera access request during development:", error);
+		});
+	}, []);
 
-	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);
 
@@ -131,140 +228,309 @@ export function LaunchWindow() {
 	};
 
 	return (
-		<div className="w-full h-full flex items-end justify-center bg-transparent">
-			<div className={`flex flex-col items-center gap-2 mx-auto ${styles.electronDrag}`}>
-				{/* Mic controls panel */}
-				{showMicControls && (
-					<div
-						className={`flex items-center gap-2 px-4 py-2 ${styles.micPanel} ${styles.electronNoDrag}`}
-					>
-						<select
-							value={microphoneDeviceId || selectedDeviceId}
-							onChange={(e) => {
-								setSelectedDeviceId(e.target.value);
-								setMicrophoneDeviceId(e.target.value);
-							}}
-							className="flex-1 bg-white/10 text-white text-xs rounded-full px-3 py-1 border border-white/20 outline-none truncate"
-							style={{ maxWidth: "70%" }}
+		<div className={`w-screen h-screen bg-transparent ${styles.electronDrag}`}>
+			{/* Language switcher — top-left, beside traffic lights */}
+			<div
+				className={`fixed top-2 flex items-center gap-1 px-2 py-1 rounded-md text-white/50 hover:text-white/90 hover:bg-white/10 transition-all duration-150 ${isMac ? "left-[72px]" : "left-2"} ${styles.electronNoDrag}`}
+			>
+				<Languages size={14} />
+				<select
+					value={locale}
+					onChange={(e) => setLocale(e.target.value as Locale)}
+					className="bg-transparent text-[11px] font-medium outline-none cursor-pointer appearance-none pr-1"
+					style={{ color: "inherit" }}
+				>
+					{SUPPORTED_LOCALES.map((loc) => (
+						<option key={loc} value={loc} className="bg-[#1c1c24] text-white">
+							{getLocaleName(loc)}
+						</option>
+					))}
+				</select>
+			</div>
+
+			{/* Device selectors — fixed above HUD bar, viewport-relative, never clipped */}
+			{(showMicControls || showWebcamControls) && (
+				<div
+					className={`fixed bottom-[60px] left-1/2 -translate-x-1/2 flex items-center gap-2 animate-mic-panel-in ${styles.electronNoDrag}`}
+				>
+					{/* Mic selector */}
+					{showMicControls && (
+						<div
+							className={`flex items-center gap-2 px-3 py-1.5 h-[36px] bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[24px] border border-white/10 rounded-xl shadow-2xl transition-all duration-300 overflow-hidden ${!micExpanded ? "opacity-60 grayscale-[0.5]" : "opacity-100"}`}
+							onMouseEnter={() => setIsMicHovered(true)}
+							onMouseLeave={() => setIsMicHovered(false)}
+							onFocus={() => setIsMicFocused(true)}
+							onBlur={() => setIsMicFocused(false)}
+							style={{ width: micExpanded ? "240px" : "140px", transition: "width 300ms ease" }}
 						>
-							{devices.map((device) => (
-								<option key={device.deviceId} value={device.deviceId}>
-									{device.label}
-								</option>
-							))}
-						</select>
-						<AudioLevelMeter level={level} className="w-24 h-4" />
-					</div>
+							<div className="relative flex-1 min-w-0">
+								{!micExpanded && (
+									<div className="text-white/60 text-[10px] font-medium truncate">
+										{selectedMicLabel}
+									</div>
+								)}
+								<select
+									value={microphoneDeviceId || selectedMicId}
+									onChange={(e) => {
+										setSelectedMicId(e.target.value);
+										setMicrophoneDeviceId(e.target.value);
+									}}
+									className={`w-full appearance-none bg-white/5 text-white text-[11px] rounded-lg pl-2 pr-6 py-1 border border-white/10 outline-none hover:bg-white/10 transition-colors cursor-pointer ${!micExpanded ? "sr-only" : ""}`}
+								>
+									{micDevices.map((device) => (
+										<option key={device.deviceId} value={device.deviceId} className="bg-[#1c1c24]">
+											{device.label}
+										</option>
+									))}
+								</select>
+								{micExpanded && (
+									<ChevronDown
+										size={12}
+										className="absolute right-1.5 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none"
+									/>
+								)}
+							</div>
+							<AudioLevelMeter
+								level={level}
+								className={`${micExpanded ? "w-16" : "w-8"} h-2 transition-all duration-300`}
+							/>
+						</div>
+					)}
+
+					{/* Webcam selector */}
+					{showWebcamControls && (
+						<div
+							className={`flex items-center gap-2 px-3 py-1.5 h-[36px] bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[24px] border border-white/10 rounded-xl shadow-2xl transition-all duration-300 overflow-hidden ${!webcamExpanded ? "opacity-60 grayscale-[0.5]" : "opacity-100"}`}
+							onMouseEnter={() => setIsWebcamHovered(true)}
+							onMouseLeave={() => setIsWebcamHovered(false)}
+							onFocus={() => setIsWebcamFocused(true)}
+							onBlur={() => setIsWebcamFocused(false)}
+							style={{ width: webcamExpanded ? "240px" : "140px", transition: "width 300ms ease" }}
+						>
+							<div className="relative flex-1 min-w-0">
+								{!webcamExpanded && (
+									<div className="text-white/60 text-[10px] font-medium truncate">
+										{selectedCameraLabel}
+									</div>
+								)}
+								{webcamExpanded &&
+									(isCameraDevicesLoading ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.searching")}
+										</span>
+									) : cameraDevicesError ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.unavailable")}
+										</span>
+									) : cameraDevices.length === 0 ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.noneFound")}
+										</span>
+									) : (
+										<>
+											<select
+												value={webcamDeviceId || selectedCameraId}
+												onChange={(e) => {
+													setSelectedCameraId(e.target.value);
+													setWebcamDeviceId(e.target.value);
+												}}
+												className="w-full appearance-none bg-white/5 text-white text-[11px] rounded-lg pl-2 pr-6 py-1 border border-white/10 outline-none hover:bg-white/10 transition-colors cursor-pointer"
+											>
+												{cameraDevices.map((device) => (
+													<option
+														key={device.deviceId}
+														value={device.deviceId}
+														className="bg-[#1c1c24]"
+													>
+														{device.label}
+													</option>
+												))}
+											</select>
+											<ChevronDown
+												size={12}
+												className="absolute right-1.5 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none"
+											/>
+										</>
+									))}
+								{(!webcamExpanded || cameraDevices.length === 0) && (
+									<select
+										value={webcamDeviceId || selectedCameraId}
+										onChange={(e) => {
+											setSelectedCameraId(e.target.value);
+											setWebcamDeviceId(e.target.value);
+										}}
+										className="sr-only"
+									>
+										{cameraDevices.map((device) => (
+											<option key={device.deviceId} value={device.deviceId}>
+												{device.label}
+											</option>
+										))}
+									</select>
+								)}
+							</div>
+						</div>
+					)}
+				</div>
+			)}
+
+			{/* HUD bar — fixed at bottom center, viewport-relative, never moves */}
+			<div
+				className={`fixed bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2 py-1.5 rounded-full shadow-hud-bar bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[16px] backdrop-saturate-[140%] border border-[rgba(80,80,120,0.25)]`}
+			>
+				{/* Drag handle */}
+				<div className={`flex items-center px-1 ${styles.electronDrag}`}>
+					{getIcon("drag", "text-white/30")}
+				</div>
+
+				{/* Source selector */}
+				<button
+					className={`${hudGroupClasses} p-2 ${styles.electronNoDrag}`}
+					onClick={openSourceSelector}
+					disabled={recording}
+					title={selectedSource}
+				>
+					{getIcon("monitor", "text-white/80")}
+					<span className="text-white/70 text-[11px] max-w-[72px] truncate">{selectedSource}</span>
+				</button>
+
+				{/* Audio controls group */}
+				<div className={`${hudGroupClasses} ${styles.electronNoDrag}`}>
+					<button
+						className={`${hudIconBtnClasses} ${systemAudioEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
+						disabled={recording}
+						title={
+							systemAudioEnabled ? t("audio.disableSystemAudio") : t("audio.enableSystemAudio")
+						}
+					>
+						{systemAudioEnabled
+							? getIcon("volumeOn", "text-green-400")
+							: getIcon("volumeOff", "text-white/40")}
+					</button>
+					<button
+						className={`${hudIconBtnClasses} ${microphoneEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={toggleMicrophone}
+						disabled={recording}
+						title={microphoneEnabled ? t("audio.disableMicrophone") : t("audio.enableMicrophone")}
+					>
+						{microphoneEnabled
+							? getIcon("micOn", "text-green-400")
+							: getIcon("micOff", "text-white/40")}
+					</button>
+					<button
+						className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={async () => {
+							await setWebcamEnabled(!webcamEnabled);
+						}}
+						title={webcamEnabled ? t("webcam.disableWebcam") : t("webcam.enableWebcam")}
+					>
+						{webcamEnabled
+							? getIcon("webcamOn", "text-green-400")
+							: getIcon("webcamOff", "text-white/40")}
+					</button>
+				</div>
+
+				{/* Record/Stop group */}
+				<button
+					className={`flex items-center gap-0.5 rounded-full p-2 transition-colors duration-150 ${styles.electronNoDrag} ${
+						recording
+							? paused
+								? "bg-amber-500/10 hover:bg-amber-500/15"
+								: "animate-record-pulse bg-red-500/10"
+							: "bg-white/5 hover:bg-white/[0.08]"
+					}`}
+					onClick={toggleRecording}
+					disabled={!hasSelectedSource && !recording}
+					style={{ flex: "0 0 auto" }}
+				>
+					{recording ? (
+						<>
+							{getIcon("stop", paused ? "text-amber-400" : "text-red-400")}
+							<span
+								className={`${paused ? "text-amber-400" : "text-red-400"} text-xs font-semibold tabular-nums`}
+							>
+								{formatTimePadded(elapsedSeconds)}
+							</span>
+						</>
+					) : (
+						getIcon("record", hasSelectedSource ? "text-white/80" : "text-white/30")
+					)}
+				</button>
+
+				{recording && (
+					<Tooltip content={paused ? t("tooltips.resumeRecording") : t("tooltips.pauseRecording")}>
+						<button
+							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+							onClick={togglePaused}
+						>
+							{getIcon(paused ? "resume" : "pause", paused ? "text-amber-400" : "text-white/60")}
+						</button>
+					</Tooltip>
 				)}
 
-				{/* Main pill bar */}
-				<div
-					className={`flex items-center gap-1.5 px-2 py-1.5 ${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)",
-					}}
-				>
-					{/* Drag handle */}
-					<div className={`flex items-center px-1 ${styles.electronDrag}`}>
-						<RxDragHandleDots2 size={16} className="text-white/30" />
-					</div>
-
-					{/* Source selector */}
-					<button
-						className={`${styles.hudGroup} ${styles.electronNoDrag}`}
-						onClick={openSourceSelector}
-						disabled={recording}
-						title={selectedSource}
-					>
-						<MdMonitor size={14} className="text-white/80" />
-						<span className="text-white/70 text-[11px] max-w-[72px] truncate">
-							{selectedSource}
-						</span>
-					</button>
-
-					{/* Audio controls group */}
-					<div className={`${styles.hudGroup} ${styles.electronNoDrag}`}>
+				{/* Restart recording */}
+				{recording && (
+					<Tooltip content={t("tooltips.restartRecording")}>
 						<button
-							className={`${styles.hudIconBtn} ${systemAudioEnabled ? styles.hudIconActive : ""}`}
-							onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
-							disabled={recording}
-							title={systemAudioEnabled ? "Disable system audio" : "Enable system audio"}
+							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+							onClick={restartRecording}
 						>
-							{systemAudioEnabled ? (
-								<MdVolumeUp size={15} className="text-green-400" />
-							) : (
-								<MdVolumeOff size={15} className="text-white/40" />
-							)}
+							{getIcon("restart", "text-white/60")}
 						</button>
+					</Tooltip>
+				)}
+
+				{/* Cancel recording */}
+				{recording && (
+					<Tooltip content={t("tooltips.cancelRecording")}>
 						<button
-							className={`${styles.hudIconBtn} ${microphoneEnabled ? styles.hudIconActive : ""}`}
-							onClick={toggleMicrophone}
-							disabled={recording}
-							title={microphoneEnabled ? "Disable microphone" : "Enable microphone"}
+							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+							onClick={cancelRecording}
 						>
-							{microphoneEnabled ? (
-								<MdMic size={15} className="text-green-400" />
-							) : (
-								<MdMicOff size={15} className="text-white/40" />
-							)}
+							{getIcon("cancel", "text-white/60")}
 						</button>
-					</div>
+					</Tooltip>
+				)}
 
-					{/* Record/Stop group */}
+				{/* Open video file */}
+				<Tooltip content={t("tooltips.openVideoFile")}>
 					<button
-						className={`${styles.hudGroup} ${styles.electronNoDrag} ${recording ? styles.recordingPulse : ""}`}
-						onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
-						disabled={!hasSelectedSource && !recording}
-						style={{ flex: "0 0 auto" }}
-					>
-						{recording ? (
-							<>
-								<FaRegStopCircle size={13} className="text-red-400" />
-								<span className="text-red-400 text-xs font-semibold tabular-nums">
-									{formatTime(elapsed)}
-								</span>
-							</>
-						) : (
-							<BsRecordCircle
-								size={14}
-								className={hasSelectedSource ? "text-white/80" : "text-white/30"}
-							/>
-						)}
-					</button>
-
-					{/* Open video file */}
-					<button
-						className={`${styles.hudIconBtn} ${styles.electronNoDrag}`}
+						className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
 						onClick={openVideoFile}
 						disabled={recording}
-						title="Open video file"
 					>
-						<MdVideoFile size={14} className="text-white/60" />
+						{getIcon("videoFile", "text-white/60")}
 					</button>
+				</Tooltip>
 
-					{/* Open project */}
+				{/* Open project */}
+				<Tooltip content={t("tooltips.openProject")}>
 					<button
-						className={`${styles.hudIconBtn} ${styles.electronNoDrag}`}
+						className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
 						onClick={openProjectFile}
 						disabled={recording}
-						title="Open project"
 					>
-						<FaFolderOpen size={14} className="text-white/60" />
+						{getIcon("folder", "text-white/60")}
 					</button>
+				</Tooltip>
 
-					{/* Window controls */}
-					<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
-						<button className={styles.windowBtn} title="Hide HUD" onClick={sendHudOverlayHide}>
-							<FiMinus size={14} className="text-white" />
-						</button>
-						<button className={styles.windowBtn} title="Close App" onClick={sendHudOverlayClose}>
-							<FiX size={14} className="text-white" />
-						</button>
-					</div>
+				{/* Window controls */}
+				<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
+					<button
+						className={windowBtnClasses}
+						title={t("tooltips.hideHUD")}
+						onClick={sendHudOverlayHide}
+					>
+						{getIcon("minimize", "text-white")}
+					</button>
+					<button
+						className={windowBtnClasses}
+						title={t("tooltips.closeApp")}
+						onClick={sendHudOverlayClose}
+					>
+						{getIcon("close", "text-white")}
+					</button>
 				</div>
 			</div>
 		</div>

src/components/launch/SourceSelector.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { MdCheck } from "react-icons/md";
+import { useScopedT } from "@/contexts/I18nContext";
 import { Button } from "../ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import styles from "./SourceSelector.module.css";
@@ -13,6 +14,8 @@ interface DesktopSource {
 }
 
 export function SourceSelector() {
+	const t = useScopedT("launch");
+	const tc = useScopedT("common");
 	const [sources, setSources] = useState<DesktopSource[]>([]);
 	const [selectedSource, setSelectedSource] = useState<DesktopSource | null>(null);
 	const [loading, setLoading] = useState(true);
@@ -63,7 +66,7 @@ export function SourceSelector() {
 			>
 				<div className="text-center">
 					<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#34B27B] mx-auto mb-2" />
-					<p className="text-xs text-zinc-400">Loading sources...</p>
+					<p className="text-xs text-zinc-400">{t("sourceSelector.loading")}</p>
 				</div>
 			</div>
 		);
@@ -104,19 +107,22 @@ export function SourceSelector() {
 	return (
 		<div className={`min-h-screen flex flex-col ${styles.glassContainer}`}>
 			<div className="flex-1 flex flex-col w-full px-4 pt-4">
-				<Tabs defaultValue="screens" className="flex-1 flex flex-col">
+				<Tabs
+					defaultValue={screenSources.length === 0 ? "windows" : "screens"}
+					className="flex-1 flex flex-col"
+				>
 					<TabsList className="grid grid-cols-2 mb-3 bg-white/5 rounded-full">
 						<TabsTrigger
 							value="screens"
 							className="data-[state=active]:bg-white/15 data-[state=active]:text-white text-zinc-400 rounded-full text-xs py-1 transition-all"
 						>
-							Screens
+							{t("sourceSelector.screens", { count: String(screenSources.length) })}
 						</TabsTrigger>
 						<TabsTrigger
 							value="windows"
 							className="data-[state=active]:bg-white/15 data-[state=active]:text-white text-zinc-400 rounded-full text-xs py-1 transition-all"
 						>
-							Windows
+							{t("sourceSelector.windows", { count: String(windowSources.length) })}
 						</TabsTrigger>
 					</TabsList>
 					<div className="flex-1 min-h-0">
@@ -143,14 +149,14 @@ export function SourceSelector() {
 					onClick={() => window.close()}
 					className="px-5 py-1 text-xs text-zinc-400 hover:text-white hover:bg-white/5 rounded-full"
 				>
-					Cancel
+					{tc("actions.cancel")}
 				</Button>
 				<Button
 					onClick={handleShare}
 					disabled={!selectedSource}
 					className="px-5 py-1 text-xs bg-[#34B27B] text-white hover:bg-[#34B27B]/80 disabled:opacity-30 disabled:bg-zinc-700 rounded-full"
 				>
-					Share
+					{tc("actions.share")}
 				</Button>
 			</div>
 		</div>

src/components/ui/tooltip.tsx

@@ -0,0 +1,70 @@
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+	delayDuration = 200,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
+}
+
+function TooltipRoot({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 6,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					"px-2 py-1 text-[11px] leading-none text-white/90 bg-black/85 border border-white/10 rounded-md z-50",
+					"animate-in fade-in-0 zoom-in-95",
+					"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+					className,
+				)}
+				{...props}
+			/>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+function Tooltip({
+	children,
+	content,
+	side,
+	className,
+}: {
+	children: React.ReactNode;
+	content: React.ReactNode;
+	side?: "top" | "right" | "bottom" | "left";
+	className?: string;
+}) {
+	return (
+		<TooltipRoot>
+			<TooltipTrigger asChild>{children}</TooltipTrigger>
+			<TooltipContent side={side} className={className}>
+				{content}
+			</TooltipContent>
+		</TooltipRoot>
+	);
+}
+
+export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent, Tooltip };

src/components/video-editor/AddCustomFontDialog.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
+import { useScopedT } from "@/contexts/I18nContext";
 import {
 	addCustomFont,
 	type CustomFont,
@@ -25,6 +26,8 @@ interface AddCustomFontDialogProps {
 }
 
 export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
+	const t = useScopedT("settings");
+	const tc = useScopedT("common");
 	const [open, setOpen] = useState(false);
 	const [importUrl, setImportUrl] = useState("");
 	const [fontName, setFontName] = useState("");
@@ -45,17 +48,17 @@ export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
 	const handleAdd = async () => {
 		// Validate inputs
 		if (!importUrl.trim()) {
-			toast.error("Please enter a Google Fonts import URL");
+			toast.error(t("customFont.errorEmptyUrl"));
 			return;
 		}
 
 		if (!isValidGoogleFontsUrl(importUrl)) {
-			toast.error("Please enter a valid Google Fonts URL");
+			toast.error(t("customFont.errorInvalidUrl"));
 			return;
 		}
 
 		if (!fontName.trim()) {
-			toast.error("Please enter a font name");
+			toast.error(t("customFont.errorEmptyName"));
 			return;
 		}
 
@@ -65,7 +68,7 @@ export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
 			// Extract font family from URL
 			const fontFamily = parseFontFamilyFromImport(importUrl);
 			if (!fontFamily) {
-				toast.error("Could not extract font family from URL");
+				toast.error(t("customFont.errorExtractFailed"));
 				setLoading(false);
 				return;
 			}
@@ -86,7 +89,7 @@ export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
 				onFontAdded(newFont);
 			}
 
-			toast.success(`Font "${fontName}" added successfully`);
+			toast.success(t("customFont.successMessage", { fontName }));
 
 			// Reset and close
 			setImportUrl("");
@@ -95,10 +98,10 @@ export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
 		} catch (error) {
 			console.error("Failed to add custom font:", error);
 			const errorMessage = error instanceof Error ? error.message : "Failed to load font";
-			toast.error("Failed to add font", {
+			toast.error(t("customFont.failedToAdd"), {
 				description: errorMessage.includes("timeout")
-					? "Font took too long to load. Please check the URL and try again."
-					: "The font could not be loaded. Please verify the Google Fonts URL is correct.",
+					? t("customFont.errorTimeout")
+					: t("customFont.errorLoadFailed"),
 			});
 		} finally {
 			setLoading(false);
@@ -114,12 +117,12 @@ export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
 					className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10 h-9 text-xs"
 				>
 					<Plus className="w-3 h-3 mr-1" />
-					Add Google Font
+					{t("customFont.dialogTitle")}
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="bg-[#1a1a1c] border-white/10 text-slate-200">
 				<DialogHeader>
-					<DialogTitle>Add Google Font</DialogTitle>
+					<DialogTitle>{t("customFont.dialogTitle")}</DialogTitle>
 					<DialogDescription className="text-slate-400">
 						Add a custom font from Google Fonts to use in your annotations.
 					</DialogDescription>
@@ -128,34 +131,30 @@ export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
 				<div className="space-y-4 mt-4">
 					<div className="space-y-2">
 						<Label htmlFor="import-url" className="text-slate-200">
-							Google Fonts Import URL
+							{t("customFont.urlLabel")}
 						</Label>
 						<Input
 							id="import-url"
-							placeholder="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
+							placeholder={t("customFont.urlPlaceholder")}
 							value={importUrl}
 							onChange={(e) => handleImportUrlChange(e.target.value)}
 							className="bg-white/5 border-white/10 text-slate-200"
 						/>
-						<p className="text-xs text-slate-400">
-							Get this from Google Fonts: Select a font → Click "Get font" → Copy the @import URL
-						</p>
+						<p className="text-xs text-slate-400">{t("customFont.urlHelp")}</p>
 					</div>
 
 					<div className="space-y-2">
 						<Label htmlFor="font-name" className="text-slate-200">
-							Display Name
+							{t("customFont.nameLabel")}
 						</Label>
 						<Input
 							id="font-name"
-							placeholder="My Custom Font"
+							placeholder={t("customFont.namePlaceholder")}
 							value={fontName}
 							onChange={(e) => setFontName(e.target.value)}
 							className="bg-white/5 border-white/10 text-slate-200"
 						/>
-						<p className="text-xs text-slate-400">
-							This is how the font will appear in the font selector
-						</p>
+						<p className="text-xs text-slate-400">{t("customFont.nameHelp")}</p>
 					</div>
 
 					<div className="flex justify-end gap-2 mt-6">
@@ -164,14 +163,14 @@ export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
 							onClick={() => setOpen(false)}
 							className="bg-white/5 border-white/10 text-slate-200 hover:bg-white/10"
 						>
-							Cancel
+							{tc("actions.cancel")}
 						</Button>
 						<Button
 							onClick={handleAdd}
 							disabled={loading}
 							className="bg-blue-600 hover:bg-blue-700 text-white"
 						>
-							{loading ? "Adding..." : "Add Font"}
+							{loading ? t("customFont.addingButton") : t("customFont.addButton")}
 						</Button>
 					</div>
 				</div>

src/components/video-editor/AnnotationSettingsPanel.tsx

@@ -27,6 +27,7 @@ import {
 import { Slider } from "@/components/ui/slider";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { useScopedT } from "@/contexts/I18nContext";
 import { type CustomFont, getCustomFonts } from "@/lib/customFonts";
 import { cn } from "@/lib/utils";
 import { AddCustomFontDialog } from "./AddCustomFontDialog";
@@ -43,14 +44,14 @@ interface AnnotationSettingsPanelProps {
 }
 
 const FONT_FAMILIES = [
-	{ value: "system-ui, -apple-system, sans-serif", label: "Classic" },
-	{ value: "Georgia, serif", label: "Editor" },
-	{ value: "Impact, Arial Black, sans-serif", label: "Strong" },
-	{ value: "Courier New, monospace", label: "Typewriter" },
-	{ value: "Brush Script MT, cursive", label: "Deco" },
-	{ value: "Arial, sans-serif", label: "Simple" },
-	{ value: "Verdana, sans-serif", label: "Modern" },
-	{ value: "Trebuchet MS, sans-serif", label: "Clean" },
+	{ value: "system-ui, -apple-system, sans-serif", labelKey: "classic" },
+	{ value: "Georgia, serif", labelKey: "editor" },
+	{ value: "Impact, Arial Black, sans-serif", labelKey: "strong" },
+	{ value: "Courier New, monospace", labelKey: "typewriter" },
+	{ value: "Brush Script MT, cursive", labelKey: "deco" },
+	{ value: "Arial, sans-serif", labelKey: "simple" },
+	{ value: "Verdana, sans-serif", labelKey: "modern" },
+	{ value: "Trebuchet MS, sans-serif", labelKey: "clean" },
 ];
 
 const FONT_SIZES = [12, 14, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 80, 96, 128];
@@ -63,9 +64,21 @@ export function AnnotationSettingsPanel({
 	onFigureDataChange,
 	onDelete,
 }: AnnotationSettingsPanelProps) {
+	const t = useScopedT("settings");
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const [customFonts, setCustomFonts] = useState<CustomFont[]>([]);
 
+	const fontStyleLabels: Record<string, string> = {
+		classic: t("fontStyles.classic"),
+		editor: t("fontStyles.editor"),
+		strong: t("fontStyles.strong"),
+		typewriter: t("fontStyles.typewriter"),
+		deco: t("fontStyles.deco"),
+		simple: t("fontStyles.simple"),
+		modern: t("fontStyles.modern"),
+		clean: t("fontStyles.clean"),
+	};
+
 	// Load custom fonts on mount
 	useEffect(() => {
 		setCustomFonts(getCustomFonts());
@@ -99,8 +112,8 @@ export function AnnotationSettingsPanel({
 		// Validate file type
 		const validTypes = ["image/jpeg", "image/jpg", "image/png", "image/gif", "image/webp"];
 		if (!validTypes.includes(file.type)) {
-			toast.error("Invalid file type", {
-				description: "Please upload a JPG, PNG, GIF, or WebP image file.",
+			toast.error(t("annotation.invalidImageType"), {
+				description: t("annotation.imageFormatsOnly"),
 			});
 			event.target.value = "";
 			return;
@@ -112,12 +125,12 @@ export function AnnotationSettingsPanel({
 			const dataUrl = e.target?.result as string;
 			if (dataUrl) {
 				onContentChange(dataUrl);
-				toast.success("Image uploaded successfully!");
+				toast.success(t("annotation.imageUploadSuccess"));
 			}
 		};
 
 		reader.onerror = () => {
-			toast.error("Failed to upload image", {
+			toast.error(t("annotation.failedImageUpload"), {
 				description: "There was an error reading the file.",
 			});
 		};
@@ -130,9 +143,9 @@ export function AnnotationSettingsPanel({
 		<div className="flex-[2] min-w-0 bg-[#09090b] border border-white/5 rounded-2xl p-4 flex flex-col shadow-xl h-full overflow-y-auto custom-scrollbar">
 			<div className="mb-6">
 				<div className="flex items-center justify-between mb-4">
-					<span className="text-sm font-medium text-slate-200">Annotation Settings</span>
+					<span className="text-sm font-medium text-slate-200">{t("annotation.title")}</span>
 					<span className="text-[10px] uppercase tracking-wider font-medium text-[#34B27B] bg-[#34B27B]/10 px-2 py-1 rounded-full">
-						Active
+						{t("annotation.active")}
 					</span>
 				</div>
 
@@ -148,14 +161,14 @@ export function AnnotationSettingsPanel({
 							className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2"
 						>
 							<Type className="w-4 h-4" />
-							Text
+							{t("annotation.typeText")}
 						</TabsTrigger>
 						<TabsTrigger
 							value="image"
 							className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2"
 						>
 							<ImageIcon className="w-4 h-4" />
-							Image
+							{t("annotation.typeImage")}
 						</TabsTrigger>
 						<TabsTrigger
 							value="figure"
@@ -170,18 +183,20 @@ export function AnnotationSettingsPanel({
 							>
 								<path d="M4 12h16m0 0l-6-6m6 6l-6 6" strokeLinecap="round" strokeLinejoin="round" />
 							</svg>
-							Arrow
+							{t("annotation.typeArrow")}
 						</TabsTrigger>
 					</TabsList>
 
 					{/* Text Content */}
 					<TabsContent value="text" className="mt-0 space-y-4">
 						<div>
-							<label className="text-xs font-medium text-slate-200 mb-2 block">Text Content</label>
+							<label className="text-xs font-medium text-slate-200 mb-2 block">
+								{t("annotation.textContent")}
+							</label>
 							<textarea
 								value={annotation.textContent || annotation.content}
 								onChange={(e) => onContentChange(e.target.value)}
-								placeholder="Enter your text..."
+								placeholder={t("annotation.textPlaceholder")}
 								rows={5}
 								className="w-full px-3 py-2 bg-white/5 border border-white/10 rounded-lg text-slate-200 text-sm placeholder:text-slate-500 focus:outline-none focus:ring-2 focus:ring-[#34B27B] focus:border-transparent resize-none"
 							/>
@@ -193,14 +208,14 @@ export function AnnotationSettingsPanel({
 							<div className="grid grid-cols-2 gap-2">
 								<div>
 									<label className="text-xs font-medium text-slate-200 mb-2 block">
-										Font Style
+										{t("annotation.fontStyle")}
 									</label>
 									<Select
 										value={annotation.style.fontFamily}
 										onValueChange={(value) => onStyleChange({ fontFamily: value })}
 									>
 										<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
-											<SelectValue placeholder="Select style" />
+											<SelectValue placeholder={t("annotation.selectStyle")} />
 										</SelectTrigger>
 										<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[300px]">
 											{FONT_FAMILIES.map((font) => (
@@ -209,13 +224,13 @@ export function AnnotationSettingsPanel({
 													value={font.value}
 													style={{ fontFamily: font.value }}
 												>
-													{font.label}
+													{fontStyleLabels[font.labelKey]}
 												</SelectItem>
 											))}
 											{customFonts.length > 0 && (
 												<>
 													<div className="px-2 py-1.5 text-[10px] font-medium text-slate-400 uppercase tracking-wider">
-														Custom Fonts
+														{t("annotation.customFonts")}
 													</div>
 													{customFonts.map((font) => (
 														<SelectItem
@@ -232,13 +247,15 @@ export function AnnotationSettingsPanel({
 									</Select>
 								</div>
 								<div>
-									<label className="text-xs font-medium text-slate-200 mb-2 block">Size</label>
+									<label className="text-xs font-medium text-slate-200 mb-2 block">
+										{t("annotation.size")}
+									</label>
 									<Select
 										value={annotation.style.fontSize.toString()}
 										onValueChange={(value) => onStyleChange({ fontSize: parseInt(value) })}
 									>
 										<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
-											<SelectValue placeholder="Size" />
+											<SelectValue placeholder={t("annotation.size")} />
 										</SelectTrigger>
 										<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200 max-h-[200px]">
 											{FONT_SIZES.map((size) => (
@@ -345,7 +362,7 @@ export function AnnotationSettingsPanel({
 							<div className="grid grid-cols-2 gap-4">
 								<div>
 									<label className="text-xs font-medium text-slate-200 mb-2 block">
-										Text Color
+										{t("annotation.textColor")}
 									</label>
 									<Popover>
 										<PopoverTrigger asChild>
@@ -379,7 +396,7 @@ export function AnnotationSettingsPanel({
 								</div>
 								<div>
 									<label className="text-xs font-medium text-slate-200 mb-2 block">
-										Background
+										{t("annotation.background")}
 									</label>
 									<Popover>
 										<PopoverTrigger asChild>
@@ -395,7 +412,9 @@ export function AnnotationSettingsPanel({
 													/>
 												</div>
 												<span className="text-xs text-slate-300 truncate flex-1 text-left">
-													{annotation.style.backgroundColor === "transparent" ? "None" : "Color"}
+													{annotation.style.backgroundColor === "transparent"
+														? t("annotation.none")
+														: t("annotation.color")}
 												</span>
 												<ChevronDown className="h-3 w-3 opacity-50" />
 											</Button>
@@ -423,7 +442,7 @@ export function AnnotationSettingsPanel({
 													onStyleChange({ backgroundColor: "transparent" });
 												}}
 											>
-												Clear Background
+												{t("annotation.clearBackground")}
 											</Button>
 										</PopoverContent>
 									</Popover>
@@ -447,7 +466,7 @@ export function AnnotationSettingsPanel({
 							className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#34B27B] hover:text-white hover:border-[#34B27B] transition-all py-8"
 						>
 							<Upload className="w-5 h-5" />
-							Upload Image
+							{t("annotation.uploadImage")}
 						</Button>
 
 						{annotation.content && annotation.content.startsWith("data:image") && (
@@ -461,14 +480,14 @@ export function AnnotationSettingsPanel({
 						)}
 
 						<p className="text-xs text-slate-500 text-center leading-relaxed">
-							Supported formats: JPG, PNG, GIF, WebP
+							{t("annotation.supportedFormats")}
 						</p>
 					</TabsContent>
 
 					<TabsContent value="figure" className="mt-0 space-y-4">
 						<div>
 							<label className="text-xs font-medium text-slate-200 mb-3 block">
-								Arrow Direction
+								{t("annotation.arrowDirection")}
 							</label>
 							<div className="grid grid-cols-4 gap-2">
 								{(
@@ -517,7 +536,9 @@ export function AnnotationSettingsPanel({
 
 						<div>
 							<label className="text-xs font-medium text-slate-200 mb-2 block">
-								Stroke Width: {annotation.figureData?.strokeWidth || 4}px
+								{t("annotation.strokeWidth", {
+									width: String(annotation.figureData?.strokeWidth || 4),
+								})}
 							</label>
 							<Slider
 								value={[annotation.figureData?.strokeWidth || 4]}
@@ -536,7 +557,9 @@ export function AnnotationSettingsPanel({
 						</div>
 
 						<div>
-							<label className="text-xs font-medium text-slate-200 mb-2 block">Arrow Color</label>
+							<label className="text-xs font-medium text-slate-200 mb-2 block">
+								{t("annotation.arrowColor")}
+							</label>
 							<Popover>
 								<PopoverTrigger asChild>
 									<Button
@@ -581,28 +604,18 @@ export function AnnotationSettingsPanel({
 					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 mt-4"
 				>
 					<Trash2 className="w-4 h-4" />
-					Delete Annotation
+					{t("annotation.deleteAnnotation")}
 				</Button>
 
 				<div className="mt-6 p-3 bg-white/5 rounded-lg border border-white/5">
 					<div className="flex items-center gap-2 mb-2 text-slate-300">
 						<Info className="w-3.5 h-3.5" />
-						<span className="text-xs font-medium">Shortcuts & Tips</span>
+						<span className="text-xs font-medium">{t("annotation.shortcutsAndTips")}</span>
 					</div>
 					<ul className="text-[10px] text-slate-400 space-y-1.5 list-disc pl-3 leading-relaxed">
-						<li>Move playhead to overlapping annotation section and select an item.</li>
-						<li>
-							Use{" "}
-							<kbd className="px-1 py-0.5 bg-white/10 rounded text-slate-300 font-mono">Tab</kbd> to
-							cycle through overlapping items.
-						</li>
-						<li>
-							Use{" "}
-							<kbd className="px-1 py-0.5 bg-white/10 rounded text-slate-300 font-mono">
-								Shift+Tab
-							</kbd>{" "}
-							to cycle backwards.
-						</li>
+						<li>{t("annotation.tipMovePlayhead")}</li>
+						<li>{t("annotation.tipTabCycle")}</li>
+						<li>{t("annotation.tipShiftTabCycle")}</li>
 					</ul>
 				</div>
 			</div>

src/components/video-editor/CropControl.tsx

@@ -16,7 +16,7 @@ interface CropControlProps {
 	aspectRatio: AspectRatio;
 }
 
-type DragHandle = "top" | "right" | "bottom" | "left" | null;
+type DragHandle = "top" | "right" | "bottom" | "left" | "move" | null;
 
 export function CropControl({ videoElement, cropRegion, onCropChange }: CropControlProps) {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
@@ -99,6 +99,11 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont
 			case "right":
 				newCrop.width = Math.max(0.1, Math.min(initialCrop.width + deltaX, 1 - initialCrop.x));
 				break;
+			case "move": {
+				newCrop.x = Math.max(0, Math.min(initialCrop.x + deltaX, 1 - initialCrop.width));
+				newCrop.y = Math.max(0, Math.min(initialCrop.y + deltaY, 1 - initialCrop.height));
+				break;
+			}
 		}
 
 		onCropChange(newCrop);
@@ -108,7 +113,9 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont
 		if (isDragging) {
 			try {
 				e.currentTarget.releasePointerCapture(e.pointerId);
-			} catch {}
+			} catch {
+				// Pointer may already be released; ignore.
+			}
 		}
 		setIsDragging(null);
 	};
@@ -176,6 +183,18 @@ export function CropControl({ videoElement, cropRegion, onCropChange }: CropCont
 					</svg>
 				</div>
 
+				<div
+					className="absolute z-10 pointer-events-auto cursor-move"
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY}%`,
+						width: `${cropPixelWidth}%`,
+						height: `${cropPixelHeight}%`,
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "move")}
+				/>
+
 				<div
 					className={cn("absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#34B27B]")}
 					style={{

src/components/video-editor/ExportDialog.tsx

@@ -1,7 +1,7 @@
 import { Download, Loader2, X } from "lucide-react";
 import { useEffect, useState } from "react";
-import { toast } from "sonner"; // Add this import
 import { Button } from "@/components/ui/button";
+import { useScopedT } from "@/contexts/I18nContext";
 import type { ExportProgress } from "@/lib/exporter";
 
 interface ExportDialogProps {
@@ -13,6 +13,7 @@ interface ExportDialogProps {
 	onCancel?: () => void;
 	exportFormat?: "mp4" | "gif";
 	exportedFilePath?: string;
+	onShowInFolder?: () => void;
 }
 
 export function ExportDialog({
@@ -23,8 +24,10 @@ export function ExportDialog({
 	error,
 	onCancel,
 	exportFormat = "mp4",
-	exportedFilePath, // Add this line
+	exportedFilePath,
+	onShowInFolder,
 }: ExportDialogProps) {
+	const t = useScopedT("dialogs");
 	const [showSuccess, setShowSuccess] = useState(false);
 
 	// Reset showSuccess when a new export starts or dialog reopens
@@ -64,38 +67,25 @@ export function ExportDialog({
 
 	// Get status message based on phase
 	const getStatusMessage = () => {
-		if (error) return "Please try again";
+		if (error) return t("export.tryAgain");
 		if (isCompiling || isFinalizing) {
-			if (renderProgress !== undefined && renderProgress > 0) {
-				return `Compiling GIF... ${renderProgress}%`;
+			if (exportFormat === "mp4") {
+				return t("export.finalizingVideo");
 			}
-			return "Compiling GIF... This may take a while";
+			if (renderProgress !== undefined && renderProgress > 0) {
+				return t("export.compilingGifProgress", { progress: String(renderProgress) });
+			}
+			return t("export.compilingGifWait");
 		}
-		return "This may take a moment...";
+		return t("export.takeMoment");
 	};
 
 	// Get title based on phase
 	const getTitle = () => {
-		if (error) return "Export Failed";
-		if (isCompiling || isFinalizing) return "Compiling GIF";
-		return `Exporting ${formatLabel}`;
-	};
-
-	const handleClickShowInFolder = async () => {
-		if (exportedFilePath) {
-			try {
-				const result = await window.electronAPI.revealInFolder(exportedFilePath);
-				if (!result.success) {
-					const errorMessage = result.error || result.message || "Failed to reveal item in folder.";
-					console.error("Failed to reveal in folder:", errorMessage);
-					toast.error(errorMessage);
-				}
-			} catch (err) {
-				const errorMessage = String(err);
-				console.error("Error calling revealInFolder IPC:", errorMessage);
-				toast.error(`Error revealing in folder: ${errorMessage}`);
-			}
-		}
+		if (error) return t("export.failed");
+		if (isFinalizing && exportFormat === "mp4") return t("export.finalizingVideoTitle");
+		if (isCompiling || isFinalizing) return t("export.compilingGif");
+		return t("export.exportingFormat", { format: formatLabel });
 	};
 
 	return (
@@ -113,17 +103,19 @@ export function ExportDialog({
 									<Download className="w-6 h-6 text-[#34B27B]" />
 								</div>
 								<div className="flex flex-col gap-2">
-									<span className="text-xl font-bold text-slate-200 block">Export Complete</span>
+									<span className="text-xl font-bold text-slate-200 block">
+										{t("export.complete")}
+									</span>
 									<span className="text-sm text-slate-400">
-										Your {formatLabel.toLowerCase()} is ready
+										{t("export.yourFormatReady", { format: formatLabel.toLowerCase() })}
 									</span>
 									{exportedFilePath && (
 										<Button
 											variant="secondary"
-											onClick={handleClickShowInFolder}
+											onClick={onShowInFolder}
 											className="mt-2 w-fit px-3 py-1 text-sm rounded-md bg-white/10 hover:bg-white/20 text-slate-200"
 										>
-											Show in Folder
+											{t("export.showInFolder")}
 										</Button>
 									)}
 									{exportedFilePath && (
@@ -178,7 +170,11 @@ export function ExportDialog({
 					<div className="space-y-6">
 						<div className="space-y-2">
 							<div className="flex justify-between text-xs font-medium text-slate-400 uppercase tracking-wider">
-								<span>{isCompiling || isFinalizing ? "Compiling" : "Rendering Frames"}</span>
+								<span>
+									{isCompiling || isFinalizing
+										? t("export.compiling")
+										: t("export.renderingFrames")}
+								</span>
 								<span className="font-mono text-slate-200">
 									{isCompiling || isFinalizing ? (
 										renderProgress !== undefined && renderProgress > 0 ? (
@@ -186,7 +182,7 @@ export function ExportDialog({
 										) : (
 											<span className="flex items-center gap-2">
 												<Loader2 className="w-3 h-3 animate-spin" />
-												Processing...
+												{t("export.processing")}
 											</span>
 										)
 									) : (
@@ -230,15 +226,19 @@ export function ExportDialog({
 						<div className="grid grid-cols-2 gap-4">
 							<div className="bg-white/5 rounded-xl p-3 border border-white/5">
 								<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
-									{isCompiling || isFinalizing ? "Status" : "Format"}
+									{isCompiling || isFinalizing ? t("export.status") : t("export.format")}
 								</div>
 								<div className="text-slate-200 font-medium text-sm">
-									{isCompiling || isFinalizing ? "Compiling..." : formatLabel}
+									{isFinalizing && exportFormat === "mp4"
+										? t("export.finalizing")
+										: isCompiling || isFinalizing
+											? t("export.compilingStatus")
+											: formatLabel}
 								</div>
 							</div>
 							<div className="bg-white/5 rounded-xl p-3 border border-white/5">
 								<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
-									Frames
+									{t("export.frames")}
 								</div>
 								<div className="text-slate-200 font-medium text-sm">
 									{progress.currentFrame} / {progress.totalFrames}
@@ -253,7 +253,7 @@ export function ExportDialog({
 									variant="destructive"
 									className="w-full py-6 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all rounded-xl"
 								>
-									Cancel Export
+									{t("export.cancelExport")}
 								</Button>
 							</div>
 						)}
@@ -262,7 +262,9 @@ export function ExportDialog({
 
 				{showSuccess && (
 					<div className="text-center py-4 animate-in zoom-in-95">
-						<p className="text-lg text-slate-200 font-medium">{formatLabel} saved successfully!</p>
+						<p className="text-lg text-slate-200 font-medium">
+							{t("export.savedSuccessfully", { format: formatLabel })}
+						</p>
 					</div>
 				)}
 			</div>

src/components/video-editor/FormatSelector.tsx

@@ -1,4 +1,5 @@
 import { Film, Image } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
 import type { ExportFormat } from "@/lib/exporter/types";
 import { cn } from "@/lib/utils";
 
@@ -8,26 +9,9 @@ interface FormatSelectorProps {
 	disabled?: boolean;
 }
 
-interface FormatOption {
-	value: ExportFormat;
-	label: string;
-	description: string;
-	icon: React.ReactNode;
-}
-
-const formatOptions: FormatOption[] = [
-	{
-		value: "mp4",
-		label: "MP4 Video",
-		description: "High quality video file",
-		icon: <Film className="w-5 h-5" />,
-	},
-	{
-		value: "gif",
-		label: "GIF Animation",
-		description: "Animated image for sharing",
-		icon: <Image className="w-5 h-5" />,
-	},
+const formatOptions: Array<{ value: ExportFormat; icon: React.ReactNode }> = [
+	{ value: "mp4", icon: <Film className="w-5 h-5" /> },
+	{ value: "gif", icon: <Image className="w-5 h-5" /> },
 ];
 
 export function FormatSelector({
@@ -35,10 +19,18 @@ export function FormatSelector({
 	onFormatChange,
 	disabled = false,
 }: FormatSelectorProps) {
+	const t = useScopedT("settings");
+
+	const formatLabels: Record<ExportFormat, { label: string; description: string }> = {
+		mp4: { label: t("exportFormat.mp4Video"), description: t("exportFormat.mp4Description") },
+		gif: { label: t("exportFormat.gifAnimation"), description: t("exportFormat.gifDescription") },
+	};
+
 	return (
 		<div className="grid grid-cols-2 gap-3">
 			{formatOptions.map((option) => {
 				const isSelected = selectedFormat === option.value;
+				const labels = formatLabels[option.value];
 				return (
 					<button
 						key={option.value}
@@ -63,8 +55,8 @@ export function FormatSelector({
 							{option.icon}
 						</div>
 						<div className="text-center">
-							<div className="font-medium text-sm">{option.label}</div>
-							<div className="text-xs text-slate-500 mt-0.5">{option.description}</div>
+							<div className="font-medium text-sm">{labels.label}</div>
+							<div className="text-xs text-slate-500 mt-0.5">{labels.description}</div>
 						</div>
 						{isSelected && (
 							<div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34B27B]" />

src/components/video-editor/KeyboardShortcutsHelp.tsx

@@ -1,23 +1,11 @@
 import { HelpCircle, Settings2 } from "lucide-react";
-import { useEffect, useState } from "react";
+import { useScopedT } from "@/contexts/I18nContext";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
-import { formatBinding, SHORTCUT_ACTIONS, SHORTCUT_LABELS } from "@/lib/shortcuts";
-import { formatShortcut } from "@/utils/platformUtils";
+import { FIXED_SHORTCUTS, formatBinding, SHORTCUT_ACTIONS } from "@/lib/shortcuts";
 
 export function KeyboardShortcutsHelp() {
 	const { shortcuts, isMac, openConfig } = useShortcuts();
-
-	const [scrollLabels, setScrollLabels] = useState({
-		pan: "Shift + Ctrl + Scroll",
-		zoom: "Ctrl + Scroll",
-	});
-
-	useEffect(() => {
-		Promise.all([
-			formatShortcut(["shift", "mod", "Scroll"]),
-			formatShortcut(["mod", "Scroll"]),
-		]).then(([pan, zoom]) => setScrollLabels({ pan, zoom }));
-	}, []);
+	const t = useScopedT("shortcuts");
 
 	return (
 		<div className="relative group">
@@ -25,7 +13,7 @@ export function KeyboardShortcutsHelp() {
 
 			<div className="absolute right-0 top-full mt-2 w-64 bg-[#09090b] border border-white/10 rounded-lg p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-xl z-50">
 				<div className="flex items-center justify-between mb-2">
-					<span className="text-xs font-semibold text-slate-200">Keyboard Shortcuts</span>
+					<span className="text-xs font-semibold text-slate-200">{t("title")}</span>
 					<button
 						type="button"
 						onClick={openConfig}
@@ -33,39 +21,36 @@ export function KeyboardShortcutsHelp() {
 						className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-[#34B27B] transition-colors"
 					>
 						<Settings2 className="w-3 h-3" />
-						Customize
+						{t("customize")}
 					</button>
 				</div>
 
 				<div className="space-y-1.5 text-[10px]">
 					{SHORTCUT_ACTIONS.map((action) => (
 						<div key={action} className="flex items-center justify-between">
-							<span className="text-slate-400">{SHORTCUT_LABELS[action]}</span>
+							<span className="text-slate-400">{t(`actions.${action}`)}</span>
 							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
 								{formatBinding(shortcuts[action], isMac)}
 							</kbd>
 						</div>
 					))}
 
-					<div className="pt-1 border-t border-white/5 mt-1">
-						<div className="flex items-center justify-between">
-							<span className="text-slate-400">Pan Timeline</span>
-							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
-								{scrollLabels.pan}
-							</kbd>
-						</div>
-						<div className="flex items-center justify-between mt-1.5">
-							<span className="text-slate-400">Zoom Timeline</span>
-							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
-								{scrollLabels.zoom}
-							</kbd>
-						</div>
-						<div className="flex items-center justify-between mt-1.5">
-							<span className="text-slate-400">Cycle Annotations</span>
-							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
-								Tab
-							</kbd>
-						</div>
+					<div className="pt-1 border-t border-white/5 mt-1 space-y-1.5">
+						{FIXED_SHORTCUTS.map((fixed) => (
+							<div key={fixed.i18nKey} className="flex items-center justify-between">
+								<span className="text-slate-400">
+									{t(`fixedActions.${fixed.i18nKey}`, { defaultValue: fixed.label })}
+								</span>
+								<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
+									{isMac
+										? fixed.display
+												.replace(/Ctrl/g, "⌘")
+												.replace(/Shift/g, "⇧")
+												.replace(/Alt/g, "⌥")
+										: fixed.display}
+								</kbd>
+							</div>
+						))}
 					</div>
 				</div>
 			</div>

src/components/video-editor/PlaybackControls.tsx

@@ -1,4 +1,5 @@
-import { Pause, Play } from "lucide-react";
+import { Maximize, Minimize, Pause, Play } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
 import { cn } from "@/lib/utils";
 import { Button } from "../ui/button";
 
@@ -6,6 +7,8 @@ interface PlaybackControlsProps {
 	isPlaying: boolean;
 	currentTime: number;
 	duration: number;
+	isFullscreen?: boolean;
+	onToggleFullscreen?: () => void;
 	onTogglePlayPause: () => void;
 	onSeek: (time: number) => void;
 }
@@ -14,9 +17,13 @@ export default function PlaybackControls({
 	isPlaying,
 	currentTime,
 	duration,
+	isFullscreen = false,
+	onToggleFullscreen,
 	onTogglePlayPause,
 	onSeek,
 }: PlaybackControlsProps) {
+	const t = useScopedT("common");
+
 	function formatTime(seconds: number) {
 		if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) return "0:00";
 		const mins = Math.floor(seconds / 60);
@@ -41,7 +48,7 @@ export default function PlaybackControls({
 						? "bg-white/10 text-white hover:bg-white/20"
 						: "bg-white text-black hover:bg-white/90 hover:scale-105 shadow-[0_0_15px_rgba(255,255,255,0.3)]",
 				)}
-				aria-label={isPlaying ? "Pause" : "Play"}
+				aria-label={isPlaying ? t("playback.pause") : t("playback.play")}
 			>
 				{isPlaying ? (
 					<Pause className="w-3.5 h-3.5 fill-current" />
@@ -84,6 +91,21 @@ export default function PlaybackControls({
 			<span className="text-[9px] font-medium text-slate-500 tabular-nums w-[30px]">
 				{formatTime(duration)}
 			</span>
+
+			{onToggleFullscreen && (
+				<Button
+					onClick={onToggleFullscreen}
+					size="icon"
+					className="w-7 h-7 rounded-full transition-all duration-200 border border-transparent hover:bg-white/10 text-white hover:border-white/10 shrink-0 shadow-none ml-0.5"
+					aria-label={isFullscreen ? t("playback.exitFullscreen") : t("playback.fullscreen")}
+				>
+					{isFullscreen ? (
+						<Minimize className="w-3.5 h-3.5" />
+					) : (
+						<Maximize className="w-3.5 h-3.5" />
+					)}
+				</Button>
+			)}
 		</div>
 	);
 }

src/components/video-editor/SettingsPanel.tsx

@@ -4,17 +4,17 @@ import {
 	Crop,
 	Download,
 	Film,
-	FolderOpen,
 	Image,
+	Lock,
 	Palette,
-	Save,
 	Sparkles,
 	Star,
 	Trash2,
+	Unlock,
 	Upload,
 	X,
 } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 import {
 	Accordion,
@@ -23,14 +23,24 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Button } from "@/components/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
 import { Switch } from "@/components/ui/switch";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useScopedT } from "@/contexts/I18nContext";
 import { getAssetPath } from "@/lib/assetPath";
+import { WEBCAM_LAYOUT_PRESETS } from "@/lib/compositeLayout";
 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 { type AspectRatio } from "@/utils/aspectRatioUtils";
+import { type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
+import { getTestId } from "@/utils/getTestId";
 import { AnnotationSettingsPanel } from "./AnnotationSettingsPanel";
 import { CropControl } from "./CropControl";
 import { KeyboardShortcutsHelp } from "./KeyboardShortcutsHelp";
@@ -38,8 +48,12 @@ import type {
 	AnnotationRegion,
 	AnnotationType,
 	CropRegion,
+	FigureData,
 	PlaybackSpeed,
+	WebcamLayoutPreset,
+	WebcamMaskShape,
 	ZoomDepth,
+	ZoomFocusMode,
 } from "./types";
 import { SPEED_OPTIONS } from "./types";
 
@@ -80,20 +94,27 @@ interface SettingsPanelProps {
 	onWallpaperChange: (path: string) => void;
 	selectedZoomDepth?: ZoomDepth | null;
 	onZoomDepthChange?: (depth: ZoomDepth) => void;
+	selectedZoomFocusMode?: ZoomFocusMode | null;
+	onZoomFocusModeChange?: (mode: ZoomFocusMode) => void;
+	hasCursorTelemetry?: boolean;
 	selectedZoomId?: string | null;
 	onZoomDelete?: (id: string) => void;
 	selectedTrimId?: string | null;
 	onTrimDelete?: (id: string) => void;
 	shadowIntensity?: number;
 	onShadowChange?: (intensity: number) => void;
+	onShadowCommit?: () => void;
 	showBlur?: boolean;
 	onBlurChange?: (showBlur: boolean) => void;
-	motionBlurEnabled?: boolean;
-	onMotionBlurChange?: (enabled: boolean) => void;
+	motionBlurAmount?: number;
+	onMotionBlurChange?: (amount: number) => void;
+	onMotionBlurCommit?: () => void;
 	borderRadius?: number;
 	onBorderRadiusChange?: (radius: number) => void;
+	onBorderRadiusCommit?: () => void;
 	padding?: number;
 	onPaddingChange?: (padding: number) => void;
+	onPaddingCommit?: () => void;
 	cropRegion?: CropRegion;
 	onCropChange?: (region: CropRegion) => void;
 	aspectRatio: AspectRatio;
@@ -110,20 +131,25 @@ interface SettingsPanelProps {
 	gifSizePreset?: GifSizePreset;
 	onGifSizePresetChange?: (preset: GifSizePreset) => void;
 	gifOutputDimensions?: { width: number; height: number };
-	onSaveProject?: () => void;
-	onLoadProject?: () => void;
 	onExport?: () => void;
+	unsavedExport?: { arrayBuffer: ArrayBuffer; fileName: string; format: string } | null;
+	onSaveUnsavedExport?: () => 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;
+	onAnnotationFigureDataChange?: (id: string, figureData: FigureData) => void;
 	onAnnotationDelete?: (id: string) => void;
 	selectedSpeedId?: string | null;
 	selectedSpeedValue?: PlaybackSpeed | null;
 	onSpeedChange?: (speed: PlaybackSpeed) => void;
 	onSpeedDelete?: (id: string) => void;
+	hasWebcam?: boolean;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	onWebcamLayoutPresetChange?: (preset: WebcamLayoutPreset) => void;
+	webcamMaskShape?: import("./types").WebcamMaskShape;
+	onWebcamMaskShapeChange?: (shape: import("./types").WebcamMaskShape) => void;
 }
 
 export default SettingsPanel;
@@ -142,20 +168,27 @@ export function SettingsPanel({
 	onWallpaperChange,
 	selectedZoomDepth,
 	onZoomDepthChange,
+	selectedZoomFocusMode,
+	onZoomFocusModeChange,
+	hasCursorTelemetry = false,
 	selectedZoomId,
 	onZoomDelete,
 	selectedTrimId,
 	onTrimDelete,
 	shadowIntensity = 0,
 	onShadowChange,
+	onShadowCommit,
 	showBlur,
 	onBlurChange,
-	motionBlurEnabled = false,
+	motionBlurAmount = 0,
 	onMotionBlurChange,
+	onMotionBlurCommit,
 	borderRadius = 0,
 	onBorderRadiusChange,
+	onBorderRadiusCommit,
 	padding = 50,
 	onPaddingChange,
+	onPaddingCommit,
 	cropRegion,
 	onCropChange,
 	aspectRatio,
@@ -171,9 +204,9 @@ export function SettingsPanel({
 	gifSizePreset = "medium",
 	onGifSizePresetChange,
 	gifOutputDimensions = { width: 1280, height: 720 },
-	onSaveProject,
-	onLoadProject,
 	onExport,
+	unsavedExport,
+	onSaveUnsavedExport,
 	selectedAnnotationId,
 	annotationRegions = [],
 	onAnnotationContentChange,
@@ -185,7 +218,13 @@ export function SettingsPanel({
 	selectedSpeedValue,
 	onSpeedChange,
 	onSpeedDelete,
+	hasWebcam = false,
+	webcamLayoutPreset = "picture-in-picture",
+	onWebcamLayoutPresetChange,
+	webcamMaskShape = "rectangle",
+	onWebcamMaskShapeChange,
 }: SettingsPanelProps) {
+	const t = useScopedT("settings");
 	const [wallpaperPaths, setWallpaperPaths] = useState<string[]>([]);
 	const [customImages, setCustomImages] = useState<string[]>([]);
 	const fileInputRef = useRef<HTMLInputElement>(null);
@@ -196,7 +235,7 @@ export function SettingsPanel({
 			try {
 				const resolved = await Promise.all(WALLPAPER_RELATIVE.map((p) => getAssetPath(p)));
 				if (mounted) setWallpaperPaths(resolved);
-			} catch {
+			} catch (_err) {
 				if (mounted) setWallpaperPaths(WALLPAPER_RELATIVE.map((p) => `/${p}`));
 			}
 		})();
@@ -225,7 +264,107 @@ export function SettingsPanel({
 
 	const [selectedColor, setSelectedColor] = useState("#ADADAD");
 	const [gradient, setGradient] = useState<string>(GRADIENTS[0]);
-	const [showCropDropdown, setShowCropDropdown] = useState(false);
+	const [showCropModal, setShowCropModal] = useState(false);
+	const cropSnapshotRef = useRef<CropRegion | null>(null);
+	const [cropAspectLocked, setCropAspectLocked] = useState(false);
+	const [cropAspectRatio, setCropAspectRatio] = useState("");
+
+	const videoWidth = videoElement?.videoWidth || 1920;
+	const videoHeight = videoElement?.videoHeight || 1080;
+
+	const handleCropNumericChange = useCallback(
+		(field: "x" | "y" | "width" | "height", pixelValue: number) => {
+			if (!cropRegion || !onCropChange) return;
+
+			const next = { ...cropRegion };
+			switch (field) {
+				case "x":
+					next.x = Math.max(0, Math.min(pixelValue / videoWidth, 1 - next.width));
+					break;
+				case "y":
+					next.y = Math.max(0, Math.min(pixelValue / videoHeight, 1 - next.height));
+					break;
+				case "width": {
+					const newWidth = Math.max(0.05, Math.min(pixelValue / videoWidth, 1 - next.x));
+					if (cropAspectLocked && next.width > 0 && next.height > 0) {
+						const ratio = next.width / next.height;
+						const newHeight = newWidth / ratio;
+						if (next.y + newHeight <= 1) {
+							next.width = newWidth;
+							next.height = newHeight;
+						}
+					} else {
+						next.width = newWidth;
+					}
+					break;
+				}
+				case "height": {
+					const newHeight = Math.max(0.05, Math.min(pixelValue / videoHeight, 1 - next.y));
+					if (cropAspectLocked && next.width > 0 && next.height > 0) {
+						const ratio = next.width / next.height;
+						const newWidth = newHeight * ratio;
+						if (next.x + newWidth <= 1) {
+							next.height = newHeight;
+							next.width = newWidth;
+						}
+					} else {
+						next.height = newHeight;
+					}
+					break;
+				}
+			}
+
+			onCropChange(next);
+		},
+		[cropRegion, onCropChange, videoWidth, videoHeight, cropAspectLocked],
+	);
+
+	const applyCropAspectPreset = useCallback(
+		(preset: string) => {
+			if (!cropRegion || !onCropChange) return;
+
+			setCropAspectRatio(preset);
+			if (preset === "") {
+				setCropAspectLocked(false);
+				return;
+			}
+
+			const [wStr, hStr] = preset.split(":");
+			const targetRatio = Number(wStr) / Number(hStr);
+			const next = { ...cropRegion };
+
+			const nextHeight = (next.width * videoWidth) / (targetRatio * videoHeight);
+			if (next.y + nextHeight <= 1 && nextHeight >= 0.05) {
+				next.height = nextHeight;
+			} else {
+				const nextWidth = (next.height * videoHeight * targetRatio) / videoWidth;
+				if (next.x + nextWidth <= 1 && nextWidth >= 0.05) {
+					next.width = nextWidth;
+				}
+			}
+
+			onCropChange(next);
+			setCropAspectLocked(true);
+		},
+		[cropRegion, onCropChange, videoWidth, videoHeight],
+	);
+
+	const getCropPixelValue = useCallback(
+		(field: "x" | "y" | "width" | "height"): number => {
+			if (!cropRegion) return 0;
+			switch (field) {
+				case "x":
+					return Math.round(cropRegion.x * videoWidth);
+				case "y":
+					return Math.round(cropRegion.y * videoHeight);
+				case "width":
+					return Math.round(cropRegion.width * videoWidth);
+				case "height":
+					return Math.round(cropRegion.height * videoHeight);
+			}
+		},
+		[cropRegion, videoWidth, videoHeight],
+	);
 
 	const zoomEnabled = Boolean(selectedZoomDepth);
 	const trimEnabled = Boolean(selectedTrimId);
@@ -251,8 +390,8 @@ export function SettingsPanel({
 		// Validate file type - only allow JPG/JPEG
 		const validTypes = ["image/jpeg", "image/jpg"];
 		if (!validTypes.includes(file.type)) {
-			toast.error("Invalid file type", {
-				description: "Please upload a JPG or JPEG image file.",
+			toast.error(t("imageUpload.invalidFileType"), {
+				description: t("imageUpload.jpgOnly"),
 			});
 			event.target.value = "";
 			return;
@@ -265,13 +404,13 @@ export function SettingsPanel({
 			if (dataUrl) {
 				setCustomImages((prev) => [...prev, dataUrl]);
 				onWallpaperChange(dataUrl);
-				toast.success("Custom image uploaded successfully!");
+				toast.success(t("imageUpload.uploadSuccess"));
 			}
 		};
 
 		reader.onerror = () => {
-			toast.error("Failed to upload image", {
-				description: "There was an error reading the file.",
+			toast.error(t("imageUpload.failedToUpload"), {
+				description: t("imageUpload.errorReading"),
 			});
 		};
 
@@ -289,6 +428,20 @@ export function SettingsPanel({
 		}
 	};
 
+	const handleCropToggle = () => {
+		if (!showCropModal && cropRegion) {
+			cropSnapshotRef.current = { ...cropRegion };
+		}
+		setShowCropModal(!showCropModal);
+	};
+
+	const handleCropCancel = () => {
+		if (cropSnapshotRef.current && onCropChange) {
+			onCropChange(cropSnapshotRef.current);
+		}
+		setShowCropModal(false);
+	};
+
 	// Find selected annotation
 	const selectedAnnotation = selectedAnnotationId
 		? annotationRegions.find((a) => a.id === selectedAnnotationId)
@@ -323,7 +476,7 @@ export function SettingsPanel({
 			<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">Zoom Level</span>
+						<span className="text-sm font-medium text-slate-200">{t("zoom.level")}</span>
 						<div className="flex items-center gap-2">
 							{zoomEnabled && selectedZoomDepth && (
 								<span className="text-[10px] uppercase tracking-wider font-medium text-[#34B27B] bg-[#34B27B]/10 px-2 py-0.5 rounded-full">
@@ -357,9 +510,42 @@ export function SettingsPanel({
 						})}
 					</div>
 					{!zoomEnabled && (
-						<p className="text-[10px] text-slate-500 mt-2 text-center">
-							Select a zoom region to adjust
-						</p>
+						<p className="text-[10px] text-slate-500 mt-2 text-center">{t("zoom.selectRegion")}</p>
+					)}
+					{zoomEnabled && hasCursorTelemetry && (
+						<div className="mt-3">
+							<span className="text-sm font-medium text-slate-200 mb-2 block">
+								{t("zoom.focusMode.title")}
+							</span>
+							<div className="grid grid-cols-2 gap-1.5">
+								{(["manual", "auto"] as const).map((mode) => {
+									const isActive = selectedZoomFocusMode === mode;
+									return (
+										<Button
+											key={mode}
+											type="button"
+											onClick={() => onZoomFocusModeChange?.(mode)}
+											className={cn(
+												"h-auto w-full rounded-lg border px-2 py-2 text-center shadow-sm transition-all",
+												"duration-200 ease-out cursor-pointer",
+												isActive
+													? "border-[#34B27B] bg-[#34B27B] text-white shadow-[#34B27B]/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 capitalize">
+												{t(`zoom.focusMode.${mode}`)}
+											</span>
+										</Button>
+									);
+								})}
+							</div>
+							{selectedZoomFocusMode === "auto" && (
+								<p className="text-[10px] text-slate-500 mt-1.5">
+									{t("zoom.focusMode.autoDescription")}
+								</p>
+							)}
+						</div>
 					)}
 					{zoomEnabled && (
 						<Button
@@ -369,7 +555,7 @@ export function SettingsPanel({
 							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" />
-							Delete Zoom
+							{t("zoom.deleteZoom")}
 						</Button>
 					)}
 				</div>
@@ -383,14 +569,14 @@ export function SettingsPanel({
 							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" />
-							Delete Trim Region
+							{t("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">Playback Speed</span>
+						<span className="text-sm font-medium text-slate-200">{t("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 ??
@@ -424,9 +610,7 @@ export function SettingsPanel({
 						})}
 					</div>
 					{!selectedSpeedId && (
-						<p className="text-[10px] text-slate-500 mt-2 text-center">
-							Select a speed region to adjust
-						</p>
+						<p className="text-[10px] text-slate-500 mt-2 text-center">{t("speed.selectRegion")}</p>
 					)}
 					{selectedSpeedId && (
 						<Button
@@ -436,31 +620,154 @@ export function SettingsPanel({
 							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" />
-							Delete Speed Region
+							{t("speed.deleteRegion")}
 						</Button>
 					)}
 				</div>
 
-				<Accordion type="multiple" defaultValue={["effects", "background"]} className="space-y-1">
+				<Accordion
+					type="multiple"
+					defaultValue={hasWebcam ? ["layout", "effects", "background"] : ["effects", "background"]}
+					className="space-y-1"
+				>
+					{hasWebcam && (
+						<AccordionItem
+							value="layout"
+							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-[#34B27B]" />
+									<span className="text-xs font-medium">{t("layout.title")}</span>
+								</div>
+							</AccordionTrigger>
+							<AccordionContent className="pb-3">
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<div className="text-[10px] font-medium text-slate-300 mb-1.5">
+										{t("layout.preset")}
+									</div>
+									<Select
+										value={webcamLayoutPreset}
+										onValueChange={(value: WebcamLayoutPreset) =>
+											onWebcamLayoutPresetChange?.(value)
+										}
+									>
+										<SelectTrigger className="h-8 bg-black/20 border-white/10 text-xs">
+											<SelectValue placeholder={t("layout.selectPreset")} />
+										</SelectTrigger>
+										<SelectContent>
+											{WEBCAM_LAYOUT_PRESETS.filter(
+												(preset) =>
+													preset.value === "picture-in-picture" ||
+													isPortraitAspectRatio(aspectRatio),
+											).map((preset) => (
+												<SelectItem key={preset.value} value={preset.value} className="text-xs">
+													{preset.value === "picture-in-picture"
+														? t("layout.pictureInPicture")
+														: t("layout.verticalStack")}
+												</SelectItem>
+											))}
+										</SelectContent>
+									</Select>
+								</div>
+								{webcamLayoutPreset === "picture-in-picture" && (
+									<div className="mt-2 p-2 rounded-lg bg-white/5 border border-white/5">
+										<div className="text-[10px] font-medium text-slate-300 mb-1.5">
+											{t("layout.webcamShape")}
+										</div>
+										<div className="grid grid-cols-4 gap-1.5">
+											{(
+												[
+													{ value: "rectangle", label: "Rect" },
+													{ value: "circle", label: "Circle" },
+													{ value: "square", label: "Square" },
+													{ value: "rounded", label: "Rounded" },
+												] as Array<{ value: WebcamMaskShape; label: string }>
+											).map((shape) => (
+												<button
+													key={shape.value}
+													type="button"
+													onClick={() => onWebcamMaskShapeChange?.(shape.value)}
+													className={cn(
+														"h-10 rounded-lg border flex flex-col items-center justify-center gap-0.5 transition-all",
+														webcamMaskShape === shape.value
+															? "bg-[#34B27B] border-[#34B27B] text-white"
+															: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20 text-slate-400",
+													)}
+												>
+													<svg
+														width="16"
+														height="16"
+														viewBox="0 0 16 16"
+														fill="none"
+														xmlns="http://www.w3.org/2000/svg"
+													>
+														{shape.value === "rectangle" && (
+															<rect
+																x="1"
+																y="3"
+																width="14"
+																height="10"
+																rx="2"
+																stroke="currentColor"
+																strokeWidth="1.5"
+															/>
+														)}
+														{shape.value === "circle" && (
+															<circle
+																cx="8"
+																cy="8"
+																r="6.5"
+																stroke="currentColor"
+																strokeWidth="1.5"
+															/>
+														)}
+														{shape.value === "square" && (
+															<rect
+																x="2"
+																y="2"
+																width="12"
+																height="12"
+																rx="1"
+																stroke="currentColor"
+																strokeWidth="1.5"
+															/>
+														)}
+														{shape.value === "rounded" && (
+															<rect
+																x="1"
+																y="3"
+																width="14"
+																height="10"
+																rx="5"
+																stroke="currentColor"
+																strokeWidth="1.5"
+															/>
+														)}
+													</svg>
+													<span className="text-[8px] leading-none">{shape.label}</span>
+												</button>
+											))}
+										</div>
+									</div>
+								)}
+							</AccordionContent>
+						</AccordionItem>
+					)}
+
 					<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-[#34B27B]" />
-								<span className="text-xs font-medium">Video Effects</span>
+								<span className="text-xs font-medium">{t("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">Motion Blur</div>
-									<Switch
-										checked={motionBlurEnabled}
-										onCheckedChange={onMotionBlurChange}
-										className="data-[state=checked]:bg-[#34B27B] scale-90"
-									/>
-								</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">Blur BG</div>
+									<div className="text-[10px] font-medium text-slate-300">
+										{t("effects.blurBg")}
+									</div>
 									<Switch
 										checked={showBlur}
 										onCheckedChange={onBlurChange}
@@ -472,14 +779,17 @@ export function SettingsPanel({
 							<div className="grid grid-cols-2 gap-2">
 								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
 									<div className="flex items-center justify-between mb-1">
-										<div className="text-[10px] font-medium text-slate-300">Shadow</div>
+										<div className="text-[10px] font-medium text-slate-300">
+											{t("effects.motionBlur")}
+										</div>
 										<span className="text-[10px] text-slate-500 font-mono">
-											{Math.round(shadowIntensity * 100)}%
+											{motionBlurAmount === 0 ? t("effects.off") : motionBlurAmount.toFixed(2)}
 										</span>
 									</div>
 									<Slider
-										value={[shadowIntensity]}
-										onValueChange={(values) => onShadowChange?.(values[0])}
+										value={[motionBlurAmount]}
+										onValueChange={(values) => onMotionBlurChange?.(values[0])}
+										onValueCommit={() => onMotionBlurCommit?.()}
 										min={0}
 										max={1}
 										step={0.01}
@@ -488,41 +798,71 @@ export function SettingsPanel({
 								</div>
 								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
 									<div className="flex items-center justify-between mb-1">
-										<div className="text-[10px] font-medium text-slate-300">Roundness</div>
+										<div className="text-[10px] font-medium text-slate-300">
+											{t("effects.shadow")}
+										</div>
+										<span className="text-[10px] text-slate-500 font-mono">
+											{Math.round(shadowIntensity * 100)}%
+										</span>
+									</div>
+									<Slider
+										value={[shadowIntensity]}
+										onValueChange={(values) => onShadowChange?.(values[0])}
+										onValueCommit={() => onShadowCommit?.()}
+										min={0}
+										max={1}
+										step={0.01}
+										className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+									/>
+								</div>
+								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+									<div className="flex items-center justify-between mb-1">
+										<div className="text-[10px] font-medium text-slate-300">
+											{t("effects.roundness")}
+										</div>
 										<span className="text-[10px] text-slate-500 font-mono">{borderRadius}px</span>
 									</div>
 									<Slider
 										value={[borderRadius]}
 										onValueChange={(values) => onBorderRadiusChange?.(values[0])}
+										onValueCommit={() => onBorderRadiusCommit?.()}
 										min={0}
 										max={16}
 										step={0.5}
 										className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
 									/>
 								</div>
-								<div className="p-2 rounded-lg bg-white/5 border border-white/5">
+								<div
+									className={`p-2 rounded-lg bg-white/5 border border-white/5 ${webcamLayoutPreset === "vertical-stack" ? "opacity-40 pointer-events-none" : ""}`}
+								>
 									<div className="flex items-center justify-between mb-1">
-										<div className="text-[10px] font-medium text-slate-300">Padding</div>
-										<span className="text-[10px] text-slate-500 font-mono">{padding}%</span>
+										<div className="text-[10px] font-medium text-slate-300">
+											{t("effects.padding")}
+										</div>
+										<span className="text-[10px] text-slate-500 font-mono">
+											{webcamLayoutPreset === "vertical-stack" ? "—" : `${padding}%`}
+										</span>
 									</div>
 									<Slider
-										value={[padding]}
+										value={[webcamLayoutPreset === "vertical-stack" ? 0 : padding]}
 										onValueChange={(values) => onPaddingChange?.(values[0])}
+										onValueCommit={() => onPaddingCommit?.()}
 										min={0}
 										max={100}
 										step={1}
+										disabled={webcamLayoutPreset === "vertical-stack"}
 										className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
 									/>
 								</div>
 							</div>
 
 							<Button
-								onClick={() => setShowCropDropdown(!showCropDropdown)}
+								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" />
-								Crop Video
+								{t("crop.cropVideo")}
 							</Button>
 						</AccordionContent>
 					</AccordionItem>
@@ -534,7 +874,7 @@ export function SettingsPanel({
 						<AccordionTrigger className="py-2.5 hover:no-underline">
 							<div className="flex items-center gap-2">
 								<Palette className="w-4 h-4 text-[#34B27B]" />
-								<span className="text-xs font-medium">Background</span>
+								<span className="text-xs font-medium">{t("background.title")}</span>
 							</div>
 						</AccordionTrigger>
 						<AccordionContent className="pb-3">
@@ -544,19 +884,19 @@ export function SettingsPanel({
 										value="image"
 										className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
 									>
-										Image
+										{t("background.image")}
 									</TabsTrigger>
 									<TabsTrigger
 										value="color"
 										className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
 									>
-										Color
+										{t("background.color")}
 									</TabsTrigger>
 									<TabsTrigger
 										value="gradient"
 										className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 text-[10px] py-1 rounded-md transition-all"
 									>
-										Gradient
+										{t("background.gradient")}
 									</TabsTrigger>
 								</TabsList>
 
@@ -575,7 +915,7 @@ export function SettingsPanel({
 											className="w-full gap-2 bg-white/5 text-slate-200 border-white/10 hover:bg-[#34B27B] hover:text-white hover:border-[#34B27B] transition-all h-7 text-[10px]"
 										>
 											<Upload className="w-3 h-3" />
-											Upload Custom
+											{t("background.uploadCustom")}
 										</Button>
 
 										<div className="grid grid-cols-7 gap-1.5">
@@ -620,7 +960,9 @@ export function SettingsPanel({
 															s.replace(/^file:\/\//, "").replace(/^\//, "");
 														if (clean(selected).endsWith(clean(path))) return true;
 														if (clean(path).endsWith(clean(selected))) return true;
-													} catch {}
+													} catch {
+														// Best-effort comparison; fallback to strict match.
+													}
 													return false;
 												})();
 												return (
@@ -674,7 +1016,7 @@ export function SettingsPanel({
 															: "border-white/10 hover:border-[#34B27B]/40 opacity-80 hover:opacity-100 bg-white/5",
 													)}
 													style={{ background: g }}
-													aria-label={`Gradient ${idx + 1}`}
+													aria-label={t("background.gradientLabel", { index: idx + 1 })}
 													onClick={() => {
 														setGradient(g);
 														onWallpaperChange(g);
@@ -691,24 +1033,22 @@ export function SettingsPanel({
 				</Accordion>
 			</div>
 
-			{showCropDropdown && cropRegion && onCropChange && (
+			{showCropModal && cropRegion && onCropChange && (
 				<>
 					<div
 						className="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 animate-in fade-in duration-200"
-						onClick={() => setShowCropDropdown(false)}
+						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">Crop Video</span>
-								<p className="text-sm text-slate-400 mt-2">
-									Drag on each side to adjust the crop area
-								</p>
+								<span className="text-xl font-bold text-slate-200">{t("crop.cropVideo")}</span>
+								<p className="text-sm text-slate-400 mt-2">{t("crop.dragInstruction")}</p>
 							</div>
 							<Button
 								variant="ghost"
 								size="icon"
-								onClick={() => setShowCropDropdown(false)}
+								onClick={handleCropCancel}
 								className="hover:bg-white/10 text-slate-400 hover:text-white"
 							>
 								<X className="w-5 h-5" />
@@ -720,14 +1060,97 @@ export function SettingsPanel({
 							onCropChange={onCropChange}
 							aspectRatio={aspectRatio}
 						/>
-						<div className="mt-6 flex justify-end">
-							<Button
-								onClick={() => setShowCropDropdown(false)}
-								size="lg"
-								className="bg-[#34B27B] hover:bg-[#34B27B]/90 text-white"
-							>
-								Done
-							</Button>
+						<div className="mt-6 space-y-4">
+							<div className="flex flex-wrap items-end gap-3">
+								{[
+									{ label: "X", field: "x" as const, max: videoWidth },
+									{ label: "Y", field: "y" as const, max: videoHeight },
+									{ label: "W", field: "width" as const, max: videoWidth },
+									{ label: "H", field: "height" as const, max: videoHeight },
+								].map(({ label, field, max }) => (
+									<div key={field} className="flex flex-col gap-1">
+										<label className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+											{label}
+										</label>
+										<input
+											type="number"
+											min={0}
+											max={max}
+											value={getCropPixelValue(field)}
+											onChange={(e) => handleCropNumericChange(field, Number(e.target.value))}
+											className="w-[90px] h-8 rounded-md border border-white/10 bg-white/5 px-2 text-xs text-slate-200 outline-none focus:border-[#34B27B]/50 focus:ring-1 focus:ring-[#34B27B]/30 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+										/>
+									</div>
+								))}
+
+								<div className="flex flex-col gap-1">
+									<label className="text-[10px] font-medium text-slate-400 uppercase tracking-wider">
+										{t("crop.ratio")}
+									</label>
+									<div className="flex items-center gap-1.5">
+										<select
+											value={cropAspectRatio}
+											onChange={(e) => applyCropAspectPreset(e.target.value)}
+											className="h-8 rounded-md border border-white/10 bg-[#1a1a1f] px-2 text-xs text-slate-200 outline-none focus:border-[#34B27B]/50 cursor-pointer"
+										>
+											<option value="" className="bg-[#1a1a1f] text-slate-200">
+												{t("crop.free")}
+											</option>
+											<option value="16:9" className="bg-[#1a1a1f] text-slate-200">
+												16:9
+											</option>
+											<option value="9:16" className="bg-[#1a1a1f] text-slate-200">
+												9:16
+											</option>
+											<option value="4:3" className="bg-[#1a1a1f] text-slate-200">
+												4:3
+											</option>
+											<option value="3:4" className="bg-[#1a1a1f] text-slate-200">
+												3:4
+											</option>
+											<option value="1:1" className="bg-[#1a1a1f] text-slate-200">
+												1:1
+											</option>
+											<option value="21:9" className="bg-[#1a1a1f] text-slate-200">
+												21:9
+											</option>
+										</select>
+										<button
+											type="button"
+											onClick={() => setCropAspectLocked((prev) => !prev)}
+											className={cn(
+												"h-8 w-8 flex items-center justify-center rounded-md border transition-all",
+												cropAspectLocked
+													? "border-[#34B27B]/50 bg-[#34B27B]/10 text-[#34B27B]"
+													: "border-white/10 bg-white/5 text-slate-400 hover:text-slate-200",
+											)}
+											title={
+												cropAspectLocked ? t("crop.unlockAspectRatio") : t("crop.lockAspectRatio")
+											}
+										>
+											{cropAspectLocked ? (
+												<Lock className="w-3.5 h-3.5" />
+											) : (
+												<Unlock className="w-3.5 h-3.5" />
+											)}
+										</button>
+									</div>
+								</div>
+
+								<p className="text-[10px] text-slate-500 self-center ml-2">
+									{videoWidth} × {videoHeight}px
+								</p>
+							</div>
+
+							<div className="flex justify-end">
+								<Button
+									onClick={() => setShowCropModal(false)}
+									size="lg"
+									className="bg-[#34B27B] hover:bg-[#34B27B]/90 text-white"
+								>
+									{t("crop.done")}
+								</Button>
+							</div>
 						</div>
 					</div>
 				</>
@@ -745,9 +1168,10 @@ export function SettingsPanel({
 						)}
 					>
 						<Film className="w-3.5 h-3.5" />
-						MP4
+						{t("exportFormat.mp4")}
 					</button>
 					<button
+						data-testid={getTestId("gif-format-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",
@@ -757,7 +1181,7 @@ export function SettingsPanel({
 						)}
 					>
 						<Image className="w-3.5 h-3.5" />
-						GIF
+						{t("exportFormat.gif")}
 					</button>
 				</div>
 
@@ -772,7 +1196,7 @@ export function SettingsPanel({
 									: "text-slate-400 hover:text-slate-200",
 							)}
 						>
-							Low
+							{t("exportQuality.low")}
 						</button>
 						<button
 							onClick={() => onExportQualityChange?.("good")}
@@ -783,7 +1207,7 @@ export function SettingsPanel({
 									: "text-slate-400 hover:text-slate-200",
 							)}
 						>
-							Medium
+							{t("exportQuality.medium")}
 						</button>
 						<button
 							onClick={() => onExportQualityChange?.("source")}
@@ -794,7 +1218,7 @@ export function SettingsPanel({
 									: "text-slate-400 hover:text-slate-200",
 							)}
 						>
-							High
+							{t("exportQuality.high")}
 						</button>
 					</div>
 				)}
@@ -822,6 +1246,7 @@ export function SettingsPanel({
 								{Object.entries(GIF_SIZE_PRESETS).map(([key, _preset]) => (
 									<button
 										key={key}
+										data-testid={getTestId(`gif-size-button-${key}`)}
 										onClick={() => onGifSizePresetChange?.(key as GifSizePreset)}
 										className={cn(
 											"rounded-md transition-all text-[10px] font-medium",
@@ -840,7 +1265,7 @@ export function SettingsPanel({
 								{gifOutputDimensions.width} × {gifOutputDimensions.height}px
 							</span>
 							<div className="flex items-center gap-2">
-								<span className="text-[10px] text-slate-400">Loop</span>
+								<span className="text-[10px] text-slate-400">{t("gifSettings.loop")}</span>
 								<Switch
 									checked={gifLoop}
 									onCheckedChange={onGifLoopChange}
@@ -851,35 +1276,26 @@ export function SettingsPanel({
 					</div>
 				)}
 
-				<div className="grid grid-cols-2 gap-2 mb-2">
+				{unsavedExport && (
 					<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"
+						size="lg"
+						onClick={onSaveUnsavedExport}
+						className="w-full mb-2 py-5 text-sm font-semibold flex items-center justify-center gap-2 bg-indigo-500 text-white rounded-xl shadow-lg shadow-indigo-500/20 hover:bg-indigo-500/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
 					>
-						<FolderOpen className="w-3.5 h-3.5" />
-						Load Project
+						<Download className="w-4 h-4" />
+						{t("export.chooseSaveLocation")}
 					</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" />
-						Save Project
-					</Button>
-				</div>
-
+				)}
 				<Button
+					data-testid={getTestId("export-button")}
 					type="button"
 					size="lg"
 					onClick={onExport}
 					className="w-full py-5 text-sm font-semibold flex items-center justify-center gap-2 bg-[#34B27B] text-white rounded-xl shadow-lg shadow-[#34B27B]/20 hover:bg-[#34B27B]/90 hover:scale-[1.02] active:scale-[0.98] transition-all duration-200"
 				>
 					<Download className="w-4 h-4" />
-					Export {exportFormat === "gif" ? "GIF" : "Video"}
+					{exportFormat === "gif" ? t("export.gifButton") : t("export.videoButton")}
 				</Button>
 
 				<div className="flex gap-2 mt-3">
@@ -893,7 +1309,7 @@ export function SettingsPanel({
 						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-[#34B27B]" />
-						Report Bug
+						{t("links.reportBug")}
 					</button>
 					<button
 						type="button"
@@ -903,7 +1319,7 @@ export function SettingsPanel({
 						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" />
-						Star on GitHub
+						{t("links.starOnGithub")}
 					</button>
 				</div>
 			</div>

src/components/video-editor/ShortcutsConfigDialog.tsx

@@ -9,6 +9,7 @@ import {
 	DialogHeader,
 	DialogTitle,
 } from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
 import {
 	DEFAULT_SHORTCUTS,
@@ -16,7 +17,6 @@ import {
 	findConflict,
 	formatBinding,
 	SHORTCUT_ACTIONS,
-	SHORTCUT_LABELS,
 	type ShortcutAction,
 	type ShortcutBinding,
 	type ShortcutConflict,
@@ -28,6 +28,8 @@ const MODIFIER_KEYS = new Set(["Control", "Shift", "Alt", "Meta"]);
 export function ShortcutsConfigDialog() {
 	const { shortcuts, isMac, isConfigOpen, closeConfig, setShortcuts, persistShortcuts } =
 		useShortcuts();
+	const t = useScopedT("shortcuts");
+	const tc = useScopedT("common");
 
 	const [draft, setDraft] = useState<ShortcutsConfig>(shortcuts);
 	const [captureFor, setCaptureFor] = useState<ShortcutAction | null>(null);
@@ -70,7 +72,7 @@ export function ShortcutsConfigDialog() {
 			setCaptureFor(null);
 
 			if (found?.type === "fixed") {
-				toast.error(`This shortcut is reserved for "${found.label}" and cannot be reassigned.`);
+				toast.error(t("reservedShortcut", { label: found.label }));
 				return;
 			}
 
@@ -84,7 +86,7 @@ export function ShortcutsConfigDialog() {
 
 		window.addEventListener("keydown", handleCapture, { capture: true });
 		return () => window.removeEventListener("keydown", handleCapture, { capture: true });
-	}, [captureFor]);
+	}, [captureFor, draft, t]);
 
 	const handleSwap = useCallback(() => {
 		if (!conflict || conflict.conflictWith.type !== "configurable") return;
@@ -102,14 +104,14 @@ export function ShortcutsConfigDialog() {
 	const handleSave = useCallback(async () => {
 		setShortcuts(draft);
 		await persistShortcuts(draft);
-		toast.success("Keyboard shortcuts saved");
+		toast.success(t("savedToast"));
 		closeConfig();
-	}, [draft, setShortcuts, persistShortcuts, closeConfig]);
+	}, [draft, setShortcuts, persistShortcuts, closeConfig, t]);
 
 	const handleReset = useCallback(() => {
 		setDraft({ ...DEFAULT_SHORTCUTS });
-		toast.info("Reset to default shortcuts — click Save to apply");
-	}, []);
+		toast.info(t("resetToast"));
+	}, [t]);
 
 	const handleClose = useCallback(() => {
 		setCaptureFor(null);
@@ -128,13 +130,13 @@ export function ShortcutsConfigDialog() {
 				<DialogHeader>
 					<DialogTitle className="flex items-center gap-2 text-sm">
 						<Keyboard className="w-4 h-4 text-[#34B27B]" />
-						Keyboard Shortcuts
+						{t("title")}
 					</DialogTitle>
 				</DialogHeader>
 
 				<div className="space-y-0.5">
 					<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
-						Configurable
+						{t("configurable")}
 					</p>
 					{SHORTCUT_ACTIONS.map((action) => {
 						const isCapturing = captureFor === action;
@@ -142,14 +144,14 @@ export function ShortcutsConfigDialog() {
 						return (
 							<div key={action}>
 								<div className="flex items-center justify-between py-1.5 px-1 border-b border-white/5">
-									<span className="text-sm text-slate-300">{SHORTCUT_LABELS[action]}</span>
+									<span className="text-sm text-slate-300">{t(`actions.${action}`)}</span>
 									<button
 										type="button"
 										onClick={() => {
 											setConflict(null);
 											setCaptureFor(isCapturing ? null : action);
 										}}
-										title={isCapturing ? "Press Esc to cancel" : "Click to change"}
+										title={isCapturing ? t("pressEscToCancel") : t("clickToChange")}
 										className={[
 											"px-2 py-1 rounded text-xs font-mono border transition-all min-w-[90px] text-center select-none",
 											isCapturing
@@ -159,14 +161,14 @@ export function ShortcutsConfigDialog() {
 													: "bg-white/5 border-white/10 text-slate-200 hover:border-[#34B27B]/50 hover:text-[#34B27B] cursor-pointer",
 										].join(" ")}
 									>
-										{isCapturing ? "Press a key…" : formatBinding(draft[action], isMac)}
+										{isCapturing ? t("pressKey") : formatBinding(draft[action], isMac)}
 									</button>
 								</div>
 								{hasConflict && conflict?.conflictWith.type === "configurable" && (
 									<div className="flex items-center justify-between px-1 py-1.5 mb-0.5 bg-amber-500/10 border border-amber-500/20 rounded text-xs">
 										<span className="text-amber-400">
-											⚠ Already used by{" "}
-											<strong>{SHORTCUT_LABELS[conflict.conflictWith.action]}</strong>
+											⚠{" "}
+											{t("alreadyUsedBy", { action: t(`actions.${conflict.conflictWith.action}`) })}
 										</span>
 										<div className="flex gap-1.5">
 											<button
@@ -174,14 +176,14 @@ export function ShortcutsConfigDialog() {
 												onClick={handleSwap}
 												className="px-2 py-0.5 bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 rounded text-amber-300 font-medium transition-colors"
 											>
-												Swap
+												{t("swap")}
 											</button>
 											<button
 												type="button"
 												onClick={handleCancelConflict}
 												className="px-2 py-0.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded text-slate-400 transition-colors"
 											>
-												Cancel
+												{tc("actions.cancel")}
 											</button>
 										</div>
 									</div>
@@ -193,14 +195,16 @@ export function ShortcutsConfigDialog() {
 
 				<div className="space-y-0.5 mt-2">
 					<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
-						Fixed
+						{t("fixed")}
 					</p>
-					{FIXED_SHORTCUTS.map(({ label, display }) => (
+					{FIXED_SHORTCUTS.map(({ i18nKey, label, display }) => (
 						<div
-							key={label}
+							key={i18nKey}
 							className="flex items-center justify-between py-1.5 px-1 border-b border-white/5 last:border-0"
 						>
-							<span className="text-sm text-slate-400">{label}</span>
+							<span className="text-sm text-slate-400">
+								{t(`fixedActions.${i18nKey}`, { defaultValue: label })}
+							</span>
 							<kbd className="px-2 py-1 bg-white/5 border border-white/10 rounded text-xs font-mono text-slate-400 min-w-[90px] text-center">
 								{display}
 							</kbd>
@@ -208,10 +212,7 @@ export function ShortcutsConfigDialog() {
 					))}
 				</div>
 
-				<p className="text-[10px] text-slate-500 mt-1">
-					Click a shortcut then press the new key combination. Press{" "}
-					<span className="font-mono border border-white/10 rounded px-1">Esc</span> to cancel.
-				</p>
+				<p className="text-[10px] text-slate-500 mt-1">{t("helpText")}</p>
 
 				<DialogFooter className="flex gap-2 sm:justify-between mt-2">
 					<Button
@@ -221,18 +222,18 @@ export function ShortcutsConfigDialog() {
 						onClick={handleReset}
 					>
 						<RotateCcw className="w-3 h-3" />
-						Reset to defaults
+						{t("resetToDefaults")}
 					</Button>
 					<div className="flex gap-2">
 						<Button variant="ghost" size="sm" onClick={handleClose}>
-							Cancel
+							{tc("actions.cancel")}
 						</Button>
 						<Button
 							size="sm"
 							className="bg-[#34B27B] hover:bg-[#2d9e6c] text-white"
 							onClick={handleSave}
 						>
-							Save
+							{tc("actions.save")}
 						</Button>
 					</div>
 				</DialogFooter>

src/components/video-editor/TutorialHelp.tsx

@@ -8,8 +8,10 @@ import {
 	DialogTitle,
 	DialogTrigger,
 } from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
 
 export function TutorialHelp() {
+	const t = useScopedT("dialogs");
 	return (
 		<Dialog>
 			<DialogTrigger asChild>
@@ -19,33 +21,33 @@ export function TutorialHelp() {
 					className="h-7 px-2 text-xs text-slate-400 hover:text-slate-200 hover:bg-white/10 transition-all gap-1.5"
 				>
 					<HelpCircle className="w-3.5 h-3.5" />
-					<span className="font-medium">How trimming works</span>
+					<span className="font-medium">{t("tutorial.triggerLabel")}</span>
 				</Button>
 			</DialogTrigger>
 			<DialogContent className="max-w-2xl bg-[#09090b] border-white/10 [&>button]:text-slate-400 [&>button:hover]:text-white">
 				<DialogHeader>
 					<DialogTitle className="text-xl font-semibold text-slate-200 flex items-center gap-2">
-						<Scissors className="w-5 h-5 text-[#ef4444]" /> How Trimming Works
+						<Scissors className="w-5 h-5 text-[#ef4444]" /> {t("tutorial.title")}
 					</DialogTitle>
 					<DialogDescription className="text-slate-400">
-						Understanding how to cut out unwanted parts of your video.
+						{t("tutorial.description")}
 					</DialogDescription>
 				</DialogHeader>
 				<div className="mt-4 space-y-8">
 					{/* Explanation */}
 					<div className="bg-white/5 rounded-lg p-4 border border-white/5">
 						<p className="text-slate-300 leading-relaxed">
-							The Trim tool works by defining the segments you want to
-							<span className="text-[#ef4444] font-bold"> remove</span>. Any part of the timeline
-							that is
-							<span className="text-[#ef4444] font-bold"> covered</span> by a red trim segment will
-							be cut out when you export.
+							{t("tutorial.explanationBefore")}
+							<span className="text-[#ef4444] font-bold"> {t("tutorial.remove")}</span>
+							{t("tutorial.explanationMiddle")}
+							<span className="text-[#ef4444] font-bold"> {t("tutorial.covered")}</span>
+							{t("tutorial.explanationAfter")}
 						</p>
 					</div>
 					{/* Visual Illustration */}
 					<div className="space-y-2">
 						<h3 className="text-sm font-medium text-slate-400 uppercase tracking-wider">
-							Visual Example
+							{t("tutorial.visualExample")}
 						</h3>
 						<div className="relative h-24 bg-[#000] rounded-lg border border-white/10 flex items-center px-4 overflow-hidden select-none">
 							{/* Background track (Kept parts) */}
@@ -58,7 +60,7 @@ export function TutorialHelp() {
 								style={{ width: "20%" }}
 							>
 								<span className="text-[10px] font-bold text-[#ef4444] bg-black/50 px-1 rounded">
-									REMOVED
+									{t("tutorial.removed")}
 								</span>
 							</div>
 							{/* Removed Segment 2 */}
@@ -67,13 +69,19 @@ export function TutorialHelp() {
 								style={{ width: "15%" }}
 							>
 								<span className="text-[10px] font-bold text-[#ef4444] bg-black/50 px-1 rounded">
-									REMOVED
+									{t("tutorial.removed")}
 								</span>
 							</div>
 							{/* Labels for kept parts */}
-							<div className="absolute left-[5%] text-[10px] text-slate-400 font-medium">Kept</div>
-							<div className="absolute left-[50%] text-[10px] text-slate-400 font-medium">Kept</div>
-							<div className="absolute left-[90%] text-[10px] text-slate-400 font-medium">Kept</div>
+							<div className="absolute left-[5%] text-[10px] text-slate-400 font-medium">
+								{t("tutorial.kept")}
+							</div>
+							<div className="absolute left-[50%] text-[10px] text-slate-400 font-medium">
+								{t("tutorial.kept")}
+							</div>
+							<div className="absolute left-[90%] text-[10px] text-slate-400 font-medium">
+								{t("tutorial.kept")}
+							</div>
 						</div>
 						<div className="flex justify-center mt-2">
 							<ArrowRight className="w-4 h-4 text-slate-600 rotate-90" />
@@ -84,38 +92,38 @@ export function TutorialHelp() {
 								className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
 								style={{ width: "30%" }}
 							>
-								<span className="text-[10px] text-white font-medium">Part 1</span>
+								<span className="text-[10px] text-white font-medium">{t("tutorial.part1")}</span>
 							</div>
 							<div
 								className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
 								style={{ width: "30%" }}
 							>
-								<span className="text-[10px] text-white font-medium">Part 2</span>
+								<span className="text-[10px] text-white font-medium">{t("tutorial.part2")}</span>
 							</div>
 							<div
 								className="h-8 bg-slate-700 rounded flex items-center justify-center opacity-80"
 								style={{ width: "30%" }}
 							>
-								<span className="text-[10px] text-white font-medium">Part 3</span>
+								<span className="text-[10px] text-white font-medium">{t("tutorial.part3")}</span>
 							</div>
-							<span className="absolute right-4 text-xs text-slate-400">Final Video</span>
+							<span className="absolute right-4 text-xs text-slate-400">
+								{t("tutorial.finalVideo")}
+							</span>
 						</div>
 					</div>
 					{/* Steps */}
 					<div className="grid grid-cols-2 gap-4">
 						<div className="p-3 rounded bg-white/5 border border-white/5">
-							<div className="text-[#ef4444] font-bold mb-1">1. Add Trim</div>
+							<div className="text-[#ef4444] font-bold mb-1">{t("tutorial.step1Title")}</div>
 							<p className="text-xs text-slate-400">
-								Press
+								{t("tutorial.step1DescriptionBefore")}
 								<kbd className="bg-white/10 px-1 rounded text-slate-300">T</kbd>
-								or click the scissors icon to mark a section for removal.
+								{t("tutorial.step1DescriptionAfter")}
 							</p>
 						</div>
 						<div className="p-3 rounded bg-white/5 border border-white/5">
-							<div className="text-[#ef4444] font-bold mb-1">2. Adjust</div>
-							<p className="text-xs text-slate-400">
-								Drag the edges of the red region to cover exactly what you want to cut out.
-							</p>
+							<div className="text-[#ef4444] font-bold mb-1">{t("tutorial.step2Title")}</div>
+							<p className="text-xs text-slate-400">{t("tutorial.step2Description")}</p>
 						</div>
 					</div>
 				</div>

src/components/video-editor/VideoPlayback.tsx

@@ -7,6 +7,7 @@ import {
 	Texture,
 	VideoSource,
 } from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
 import type React from "react";
 import {
 	forwardRef,
@@ -18,7 +19,18 @@ import {
 	useState,
 } from "react";
 import { getAssetPath } from "@/lib/assetPath";
-import { type AspectRatio, formatAspectRatioForCSS } from "@/utils/aspectRatioUtils";
+import {
+	getWebcamLayoutCssBoxShadow,
+	type Size,
+	type StyledRenderRect,
+	type WebcamLayoutPreset,
+} from "@/lib/compositeLayout";
+import { getCssClipPath } from "@/lib/webcamMaskShapes";
+import {
+	type AspectRatio,
+	formatAspectRatioForCSS,
+	getNativeAspectRatioValue,
+} from "@/utils/aspectRatioUtils";
 import { AnnotationOverlay } from "./AnnotationOverlay";
 import {
 	type AnnotationRegion,
@@ -29,17 +41,37 @@ import {
 	type ZoomFocus,
 	type ZoomRegion,
 } from "./types";
-import { DEFAULT_FOCUS, MIN_DELTA, SMOOTHING_FACTOR } from "./videoPlayback/constants";
+import {
+	AUTO_FOLLOW_RAMP_DISTANCE,
+	AUTO_FOLLOW_SMOOTHING_FACTOR,
+	AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+	DEFAULT_FOCUS,
+	ZOOM_SCALE_DEADZONE,
+	ZOOM_TRANSLATION_DEADZONE_PX,
+} from "./videoPlayback/constants";
+import { adaptiveSmoothFactor, smoothCursorFocus } from "./videoPlayback/cursorFollowUtils";
 import { clampFocusToStage as clampFocusToStageUtil } from "./videoPlayback/focusUtils";
 import { layoutVideoContent as layoutVideoContentUtil } from "./videoPlayback/layoutUtils";
 import { clamp01 } from "./videoPlayback/mathUtils";
 import { updateOverlayIndicator } from "./videoPlayback/overlayUtils";
 import { createVideoEventHandlers } from "./videoPlayback/videoEventHandlers";
 import { findDominantRegion } from "./videoPlayback/zoomRegionUtils";
-import { applyZoomTransform } from "./videoPlayback/zoomTransform";
+import {
+	applyZoomTransform,
+	computeFocusFromTransform,
+	computeZoomTransform,
+	createMotionBlurState,
+	type MotionBlurState,
+} from "./videoPlayback/zoomTransform";
 
 interface VideoPlaybackProps {
 	videoPath: string;
+	webcamVideoPath?: string;
+	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape?: import("./types").WebcamMaskShape;
+	webcamPosition?: { cx: number; cy: number } | null;
+	onWebcamPositionChange?: (position: { cx: number; cy: number }) => void;
+	onWebcamPositionDragEnd?: () => void;
 	onDurationChange: (duration: number) => void;
 	onTimeUpdate: (time: number) => void;
 	currentTime: number;
@@ -50,11 +82,12 @@ interface VideoPlaybackProps {
 	selectedZoomId: string | null;
 	onSelectZoom: (id: string | null) => void;
 	onZoomFocusChange: (id: string, focus: ZoomFocus) => void;
+	onZoomFocusDragEnd?: () => void;
 	isPlaying: boolean;
 	showShadow?: boolean;
 	shadowIntensity?: number;
 	showBlur?: boolean;
-	motionBlurEnabled?: boolean;
+	motionBlurAmount?: number;
 	borderRadius?: number;
 	padding?: number;
 	cropRegion?: import("./types").CropRegion;
@@ -66,6 +99,7 @@ interface VideoPlaybackProps {
 	onSelectAnnotation?: (id: string | null) => void;
 	onAnnotationPositionChange?: (id: string, position: { x: number; y: number }) => void;
 	onAnnotationSizeChange?: (id: string, size: { width: number; height: number }) => void;
+	cursorTelemetry?: import("./types").CursorTelemetryPoint[];
 }
 
 export interface VideoPlaybackRef {
@@ -82,6 +116,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 	(
 		{
 			videoPath,
+			webcamVideoPath,
+			webcamLayoutPreset,
+			webcamMaskShape,
+			webcamPosition,
+			onWebcamPositionChange,
+			onWebcamPositionDragEnd,
 			onDurationChange,
 			onTimeUpdate,
 			currentTime,
@@ -92,11 +132,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			selectedZoomId,
 			onSelectZoom,
 			onZoomFocusChange,
+			onZoomFocusDragEnd,
 			isPlaying,
 			showShadow,
 			shadowIntensity = 0,
 			showBlur,
-			motionBlurEnabled = false,
+			motionBlurAmount = 0,
 			borderRadius = 0,
 			padding = 50,
 			cropRegion,
@@ -108,10 +149,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			onSelectAnnotation,
 			onAnnotationPositionChange,
 			onAnnotationSizeChange,
+			cursorTelemetry = [],
 		},
 		ref,
 	) => {
 		const videoRef = useRef<HTMLVideoElement | null>(null);
+		const webcamVideoRef = useRef<HTMLVideoElement | null>(null);
 		const containerRef = useRef<HTMLDivElement | null>(null);
 		const appRef = useRef<Application | null>(null);
 		const videoSpriteRef = useRef<Sprite | null>(null);
@@ -122,16 +165,26 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const [videoReady, setVideoReady] = useState(false);
 		const overlayRef = useRef<HTMLDivElement | null>(null);
 		const focusIndicatorRef = useRef<HTMLDivElement | null>(null);
+		const [webcamLayout, setWebcamLayout] = useState<StyledRenderRect | null>(null);
+		const [webcamDimensions, setWebcamDimensions] = useState<Size | null>(null);
 		const currentTimeRef = useRef(0);
 		const zoomRegionsRef = useRef<ZoomRegion[]>([]);
+		const cursorTelemetryRef = useRef<import("./types").CursorTelemetryPoint[]>([]);
 		const selectedZoomIdRef = useRef<string | null>(null);
 		const animationStateRef = useRef({
 			scale: 1,
 			focusX: DEFAULT_FOCUS.cx,
 			focusY: DEFAULT_FOCUS.cy,
+			progress: 0,
+			x: 0,
+			y: 0,
+			appliedScale: 1,
 		});
 		const blurFilterRef = useRef<BlurFilter | null>(null);
+		const motionBlurFilterRef = useRef<MotionBlurFilter | null>(null);
 		const isDraggingFocusRef = useRef(false);
+		const isDraggingWebcamRef = useRef(false);
+		const webcamDragOffsetRef = useRef({ dx: 0, dy: 0 });
 		const stageSizeRef = useRef({ width: 0, height: 0 });
 		const videoSizeRef = useRef({ width: 0, height: 0 });
 		const baseScaleRef = useRef(1);
@@ -146,8 +199,13 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const layoutVideoContentRef = useRef<(() => void) | null>(null);
 		const trimRegionsRef = useRef<TrimRegion[]>([]);
 		const speedRegionsRef = useRef<SpeedRegion[]>([]);
-		const motionBlurEnabledRef = useRef(motionBlurEnabled);
+		const motionBlurAmountRef = useRef(motionBlurAmount);
+		const motionBlurStateRef = useRef<MotionBlurState>(createMotionBlurState());
+		const onTimeUpdateRef = useRef(onTimeUpdate);
+		const onPlayStateChangeRef = useRef(onPlayStateChange);
 		const videoReadyRafRef = useRef<number | null>(null);
+		const smoothedAutoFocusRef = useRef<ZoomFocus | null>(null);
+		const prevTargetProgressRef = useRef(0);
 
 		const clampFocusToStage = useCallback((focus: ZoomFocus, depth: ZoomDepth) => {
 			return clampFocusToStageUtil(focus, depth, stageSizeRef.current);
@@ -223,6 +281,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				lockedVideoDimensions: lockedVideoDimensionsRef.current,
 				borderRadius,
 				padding,
+				webcamDimensions,
+				webcamLayoutPreset,
+				webcamPosition,
+				webcamMaskShape,
 			});
 
 			if (result) {
@@ -232,6 +294,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				baseOffsetRef.current = result.baseOffset;
 				baseMaskRef.current = result.maskRect;
 				cropBoundsRef.current = result.cropBounds;
+				setWebcamLayout(result.webcamRect);
 
 				// Reset camera container to identity
 				cameraContainer.scale.set(1);
@@ -244,7 +307,16 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 				updateOverlayForRegion(activeRegion);
 			}
-		}, [updateOverlayForRegion, cropRegion, borderRadius, padding]);
+		}, [
+			updateOverlayForRegion,
+			cropRegion,
+			borderRadius,
+			padding,
+			webcamDimensions,
+			webcamLayoutPreset,
+			webcamPosition,
+			webcamMaskShape,
+		]);
 
 		useEffect(() => {
 			layoutVideoContentRef.current = layoutVideoContent;
@@ -321,6 +393,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			if (!regionId) return;
 			const region = zoomRegionsRef.current.find((r) => r.id === regionId);
 			if (!region) return;
+			if (region.focusMode === "auto") return;
 			onSelectZoom(region.id);
 			event.preventDefault();
 			isDraggingFocusRef.current = true;
@@ -339,7 +412,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			isDraggingFocusRef.current = false;
 			try {
 				event.currentTarget.releasePointerCapture(event.pointerId);
-			} catch {}
+			} catch {
+				// Pointer may already be released.
+			}
+			onZoomFocusDragEnd?.();
 		};
 
 		const handleOverlayPointerUp = (event: React.PointerEvent<HTMLDivElement>) => {
@@ -350,10 +426,61 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			endFocusDrag(event);
 		};
 
+		// ── Webcam PiP drag handlers ──
+
+		const handleWebcamPointerDown = (event: React.PointerEvent<HTMLVideoElement>) => {
+			if (isPlayingRef.current) return;
+			if (webcamLayoutPreset !== "picture-in-picture") return;
+			event.preventDefault();
+			event.stopPropagation();
+			isDraggingWebcamRef.current = true;
+			event.currentTarget.setPointerCapture(event.pointerId);
+
+			const webcamEl = event.currentTarget;
+			const webcamRect = webcamEl.getBoundingClientRect();
+			webcamDragOffsetRef.current = {
+				dx: event.clientX - (webcamRect.left + webcamRect.width / 2),
+				dy: event.clientY - (webcamRect.top + webcamRect.height / 2),
+			};
+		};
+
+		const handleWebcamPointerMove = (event: React.PointerEvent<HTMLVideoElement>) => {
+			if (!isDraggingWebcamRef.current) return;
+			event.preventDefault();
+			event.stopPropagation();
+
+			const containerEl = containerRef.current;
+			if (!containerEl || !onWebcamPositionChange) return;
+
+			const containerRect = containerEl.getBoundingClientRect();
+			const cx = clamp01(
+				(event.clientX - webcamDragOffsetRef.current.dx - containerRect.left) / containerRect.width,
+			);
+			const cy = clamp01(
+				(event.clientY - webcamDragOffsetRef.current.dy - containerRect.top) / containerRect.height,
+			);
+			onWebcamPositionChange({ cx, cy });
+		};
+
+		const handleWebcamPointerUp = (event: React.PointerEvent<HTMLVideoElement>) => {
+			if (!isDraggingWebcamRef.current) return;
+			isDraggingWebcamRef.current = false;
+			try {
+				event.currentTarget.releasePointerCapture(event.pointerId);
+			} catch {
+				// Pointer may already be released.
+			}
+			onWebcamPositionDragEnd?.();
+		};
+
 		useEffect(() => {
 			zoomRegionsRef.current = zoomRegions;
 		}, [zoomRegions]);
 
+		useEffect(() => {
+			cursorTelemetryRef.current = cursorTelemetry;
+		}, [cursorTelemetry]);
+
 		useEffect(() => {
 			selectedZoomIdRef.current = selectedZoomId;
 		}, [selectedZoomId]);
@@ -371,8 +498,16 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		}, [speedRegions]);
 
 		useEffect(() => {
-			motionBlurEnabledRef.current = motionBlurEnabled;
-		}, [motionBlurEnabled]);
+			motionBlurAmountRef.current = motionBlurAmount;
+		}, [motionBlurAmount]);
+
+		useEffect(() => {
+			onTimeUpdateRef.current = onTimeUpdate;
+		}, [onTimeUpdate]);
+
+		useEffect(() => {
+			onPlayStateChangeRef.current = onPlayStateChange;
+		}, [onPlayStateChange]);
 
 		useEffect(() => {
 			if (!pixiReady || !videoReady) return;
@@ -397,8 +532,15 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				scale: 1,
 				focusX: DEFAULT_FOCUS.cx,
 				focusY: DEFAULT_FOCUS.cy,
+				progress: 0,
+				x: 0,
+				y: 0,
+				appliedScale: 1,
 			};
 
+			// Reset motion blur state for clean transitions
+			motionBlurStateRef.current = createMotionBlurState();
+
 			if (blurFilterRef.current) {
 				blurFilterRef.current.blur = 0;
 			}
@@ -431,20 +573,22 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					focusY: DEFAULT_FOCUS.cy,
 					motionIntensity: 0,
 					isPlaying: false,
-					motionBlurEnabled: motionBlurEnabledRef.current,
+					motionBlurAmount: motionBlurAmountRef.current,
 				});
 
 				requestAnimationFrame(() => {
 					const finalApp = appRef.current;
 					if (wasPlaying && video) {
-						video.play().catch(() => {});
+						video.play().catch(() => {
+							// Ignore autoplay restoration failures.
+						});
 					}
 					if (tickerWasStarted && finalApp?.ticker) {
 						finalApp.ticker.start();
 					}
 				});
 			});
-		}, [pixiReady, videoReady, layoutVideoContent, cropRegion]);
+		}, [pixiReady, videoReady, layoutVideoContent]);
 
 		useEffect(() => {
 			if (!pixiReady || !videoReady) return;
@@ -538,6 +682,11 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		}, []);
 
 		useEffect(() => {
+			if (!videoPath) {
+				setVideoReady(false);
+				return;
+			}
+
 			const video = videoRef.current;
 			if (!video) return;
 			video.pause();
@@ -583,16 +732,22 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				scale: 1,
 				focusX: DEFAULT_FOCUS.cx,
 				focusY: DEFAULT_FOCUS.cy,
+				progress: 0,
+				x: 0,
+				y: 0,
+				appliedScale: 1,
 			};
 
 			const blurFilter = new BlurFilter();
 			blurFilter.quality = 3;
 			blurFilter.resolution = app.renderer.resolution;
 			blurFilter.blur = 0;
-			videoContainer.filters = [blurFilter];
+			const motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
+			videoContainer.filters = [blurFilter, motionBlurFilter];
 			blurFilterRef.current = blurFilter;
+			motionBlurFilterRef.current = motionBlurFilter;
 
-			layoutVideoContent();
+			layoutVideoContentRef.current?.();
 			video.pause();
 
 			const { handlePlay, handlePause, handleSeeked, handleSeeking } = createVideoEventHandlers({
@@ -602,8 +757,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				allowPlaybackRef,
 				currentTimeRef,
 				timeUpdateAnimationRef,
-				onPlayStateChange,
-				onTimeUpdate,
+				onPlayStateChange: (playing) => onPlayStateChangeRef.current(playing),
+				onTimeUpdate: (time) => onTimeUpdateRef.current(time),
 				trimRegionsRef,
 				speedRegionsRef,
 			});
@@ -640,11 +795,15 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					blurFilterRef.current.destroy();
 					blurFilterRef.current = null;
 				}
+				if (motionBlurFilterRef.current) {
+					motionBlurFilterRef.current.destroy();
+					motionBlurFilterRef.current = null;
+				}
 				videoTexture.destroy(true);
 
 				videoSpriteRef.current = null;
 			};
-		}, [pixiReady, videoReady, onTimeUpdate, updateOverlayForRegion]);
+		}, [pixiReady, videoReady]);
 
 		useEffect(() => {
 			if (!pixiReady || !videoReady) return;
@@ -654,97 +813,201 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			const videoContainer = videoContainerRef.current;
 			if (!app || !videoSprite || !videoContainer) return;
 
-			const applyTransform = (motionIntensity: number) => {
+			const applyTransformFn = (
+				transform: { scale: number; x: number; y: number },
+				targetFocus: ZoomFocus,
+				motionIntensity: number,
+				motionVector: { x: number; y: number },
+			) => {
 				const cameraContainer = cameraContainerRef.current;
 				if (!cameraContainer) return;
 
 				const state = animationStateRef.current;
 
-				applyZoomTransform({
+				const appliedTransform = applyZoomTransform({
 					cameraContainer,
 					blurFilter: blurFilterRef.current,
+					motionBlurFilter: motionBlurFilterRef.current,
 					stageSize: stageSizeRef.current,
 					baseMask: baseMaskRef.current,
 					zoomScale: state.scale,
-					focusX: state.focusX,
-					focusY: state.focusY,
+					zoomProgress: state.progress,
+					focusX: targetFocus.cx,
+					focusY: targetFocus.cy,
 					motionIntensity,
+					motionVector,
 					isPlaying: isPlayingRef.current,
-					motionBlurEnabled: motionBlurEnabledRef.current,
+					motionBlurAmount: motionBlurAmountRef.current,
+					transformOverride: transform,
+					motionBlurState: motionBlurStateRef.current,
+					frameTimeMs: performance.now(),
 				});
+
+				state.x = appliedTransform.x;
+				state.y = appliedTransform.y;
+				state.appliedScale = appliedTransform.scale;
 			};
 
 			const ticker = () => {
-				const { region, strength } = findDominantRegion(
+				const bm = baseMaskRef.current;
+				const ss = stageSizeRef.current;
+				const viewportRatio =
+					bm.width > 0 && bm.height > 0
+						? { widthRatio: ss.width / bm.width, heightRatio: ss.height / bm.height }
+						: undefined;
+				const { region, strength, blendedScale, transition } = findDominantRegion(
 					zoomRegionsRef.current,
 					currentTimeRef.current,
+					{ connectZooms: true, cursorTelemetry: cursorTelemetryRef.current, viewportRatio },
 				);
 
 				const defaultFocus = DEFAULT_FOCUS;
 				let targetScaleFactor = 1;
 				let targetFocus = defaultFocus;
+				let targetProgress = 0;
 
 				// If a zoom is selected but video is not playing, show default unzoomed view
-				// (the overlay will show where the zoom will be)
 				const selectedId = selectedZoomIdRef.current;
 				const hasSelectedZoom = selectedId !== null;
 				const shouldShowUnzoomedView = hasSelectedZoom && !isPlayingRef.current;
 
 				if (region && strength > 0 && !shouldShowUnzoomedView) {
-					const zoomScale = ZOOM_DEPTH_SCALES[region.depth];
-					const regionFocus = clampFocusToStage(region.focus, region.depth);
+					const zoomScale = blendedScale ?? ZOOM_DEPTH_SCALES[region.depth];
+					const regionFocus = region.focus;
 
-					// Interpolate scale and focus based on region strength
-					targetScaleFactor = 1 + (zoomScale - 1) * strength;
-					targetFocus = {
-						cx: defaultFocus.cx + (regionFocus.cx - defaultFocus.cx) * strength,
-						cy: defaultFocus.cy + (regionFocus.cy - defaultFocus.cy) * strength,
-					};
+					targetScaleFactor = zoomScale;
+					targetFocus = regionFocus;
+					targetProgress = strength;
+
+					// Apply adaptive smoothing for auto-follow mode
+					if (region.focusMode === "auto" && !transition) {
+						const raw = targetFocus;
+						const isZoomingIn =
+							targetProgress < 0.999 && targetProgress >= prevTargetProgressRef.current;
+						if (targetProgress >= 0.999) {
+							// Full zoom: adaptive smoothing — moves faster when far, decelerates when close
+							const prev = smoothedAutoFocusRef.current ?? raw;
+							const factor = adaptiveSmoothFactor(
+								raw,
+								prev,
+								AUTO_FOLLOW_SMOOTHING_FACTOR,
+								AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+								AUTO_FOLLOW_RAMP_DISTANCE,
+							);
+							const smoothed = smoothCursorFocus(raw, prev, factor);
+							smoothedAutoFocusRef.current = smoothed;
+							targetFocus = smoothed;
+						} else if (isZoomingIn) {
+							// Zoom-in: track cursor directly so zoom always aims at current cursor
+							// position; keep ref in sync to avoid snap when full-zoom begins
+							smoothedAutoFocusRef.current = raw;
+						} else {
+							// Zoom-out: keep smoothing for continuity — avoids snap at zoom-out start
+							const prev = smoothedAutoFocusRef.current ?? raw;
+							const factor = adaptiveSmoothFactor(
+								raw,
+								prev,
+								AUTO_FOLLOW_SMOOTHING_FACTOR,
+								AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+								AUTO_FOLLOW_RAMP_DISTANCE,
+							);
+							const smoothed = smoothCursorFocus(raw, prev, factor);
+							smoothedAutoFocusRef.current = smoothed;
+							targetFocus = smoothed;
+						}
+					} else if (region.focusMode !== "auto") {
+						smoothedAutoFocusRef.current = null;
+					}
+					prevTargetProgressRef.current = targetProgress;
+
+					// Handle connected zoom transitions (pan between adjacent zoom regions)
+					if (transition) {
+						const startTransform = computeZoomTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: transition.startScale,
+							zoomProgress: 1,
+							focusX: transition.startFocus.cx,
+							focusY: transition.startFocus.cy,
+						});
+						const endTransform = computeZoomTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: transition.endScale,
+							zoomProgress: 1,
+							focusX: transition.endFocus.cx,
+							focusY: transition.endFocus.cy,
+						});
+
+						const interpolatedTransform = {
+							scale:
+								startTransform.scale +
+								(endTransform.scale - startTransform.scale) * transition.progress,
+							x: startTransform.x + (endTransform.x - startTransform.x) * transition.progress,
+							y: startTransform.y + (endTransform.y - startTransform.y) * transition.progress,
+						};
+
+						targetScaleFactor = interpolatedTransform.scale;
+						targetFocus = computeFocusFromTransform({
+							stageSize: stageSizeRef.current,
+							baseMask: baseMaskRef.current,
+							zoomScale: interpolatedTransform.scale,
+							x: interpolatedTransform.x,
+							y: interpolatedTransform.y,
+						});
+						targetProgress = 1;
+					}
 				}
 
 				const state = animationStateRef.current;
+				const prevScale = state.appliedScale;
+				const prevX = state.x;
+				const prevY = state.y;
 
-				const prevScale = state.scale;
-				const prevFocusX = state.focusX;
-				const prevFocusY = state.focusY;
+				state.scale = targetScaleFactor;
+				state.focusX = targetFocus.cx;
+				state.focusY = targetFocus.cy;
+				state.progress = targetProgress;
 
-				const scaleDelta = targetScaleFactor - state.scale;
-				const focusXDelta = targetFocus.cx - state.focusX;
-				const focusYDelta = targetFocus.cy - state.focusY;
+				const projectedTransform = computeZoomTransform({
+					stageSize: stageSizeRef.current,
+					baseMask: baseMaskRef.current,
+					zoomScale: state.scale,
+					zoomProgress: state.progress,
+					focusX: state.focusX,
+					focusY: state.focusY,
+				});
 
-				let nextScale = prevScale;
-				let nextFocusX = prevFocusX;
-				let nextFocusY = prevFocusY;
-
-				if (Math.abs(scaleDelta) > MIN_DELTA) {
-					nextScale = prevScale + scaleDelta * SMOOTHING_FACTOR;
-				} else {
-					nextScale = targetScaleFactor;
-				}
-
-				if (Math.abs(focusXDelta) > MIN_DELTA) {
-					nextFocusX = prevFocusX + focusXDelta * SMOOTHING_FACTOR;
-				} else {
-					nextFocusX = targetFocus.cx;
-				}
-
-				if (Math.abs(focusYDelta) > MIN_DELTA) {
-					nextFocusY = prevFocusY + focusYDelta * SMOOTHING_FACTOR;
-				} else {
-					nextFocusY = targetFocus.cy;
-				}
-
-				state.scale = nextScale;
-				state.focusX = nextFocusX;
-				state.focusY = nextFocusY;
+				const appliedScale =
+					Math.abs(projectedTransform.scale - prevScale) < ZOOM_SCALE_DEADZONE
+						? projectedTransform.scale
+						: projectedTransform.scale;
+				const appliedX =
+					Math.abs(projectedTransform.x - prevX) < ZOOM_TRANSLATION_DEADZONE_PX
+						? projectedTransform.x
+						: projectedTransform.x;
+				const appliedY =
+					Math.abs(projectedTransform.y - prevY) < ZOOM_TRANSLATION_DEADZONE_PX
+						? projectedTransform.y
+						: projectedTransform.y;
 
 				const motionIntensity = Math.max(
-					Math.abs(nextScale - prevScale),
-					Math.abs(nextFocusX - prevFocusX),
-					Math.abs(nextFocusY - prevFocusY),
+					Math.abs(appliedScale - prevScale),
+					Math.abs(appliedX - prevX) / Math.max(1, stageSizeRef.current.width),
+					Math.abs(appliedY - prevY) / Math.max(1, stageSizeRef.current.height),
 				);
 
-				applyTransform(motionIntensity);
+				const motionVector = {
+					x: appliedX - prevX,
+					y: appliedY - prevY,
+				};
+
+				applyTransformFn(
+					{ scale: appliedScale, x: appliedX, y: appliedY },
+					targetFocus,
+					motionIntensity,
+					motionVector,
+				);
 			};
 
 			app.ticker.add(ticker);
@@ -753,7 +1016,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					app.ticker.remove(ticker);
 				}
 			};
-		}, [pixiReady, videoReady, clampFocusToStage]);
+		}, [pixiReady, videoReady]);
 
 		const handleLoadedMetadata = (e: React.SyntheticEvent<HTMLVideoElement, Event>) => {
 			const video = e.currentTarget;
@@ -783,6 +1046,72 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		};
 
 		const [resolvedWallpaper, setResolvedWallpaper] = useState<string | null>(null);
+		const webcamCssBoxShadow = useMemo(
+			() => getWebcamLayoutCssBoxShadow(webcamLayoutPreset),
+			[webcamLayoutPreset],
+		);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				setWebcamDimensions(null);
+				return;
+			}
+
+			const handleLoadedMetadata = () => {
+				if (webcamVideo.videoWidth > 0 && webcamVideo.videoHeight > 0) {
+					setWebcamDimensions({
+						width: webcamVideo.videoWidth,
+						height: webcamVideo.videoHeight,
+					});
+				}
+			};
+
+			webcamVideo.addEventListener("loadedmetadata", handleLoadedMetadata);
+			handleLoadedMetadata();
+			return () => {
+				webcamVideo.removeEventListener("loadedmetadata", handleLoadedMetadata);
+			};
+		}, [webcamVideoPath]);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				return;
+			}
+
+			const activeSpeedRegion =
+				speedRegions.find(
+					(region) => currentTime * 1000 >= region.startMs && currentTime * 1000 < region.endMs,
+				) ?? null;
+			webcamVideo.playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+
+			if (!isPlaying) {
+				webcamVideo.pause();
+				if (Math.abs(webcamVideo.currentTime - currentTime) > 0.05) {
+					webcamVideo.currentTime = currentTime;
+				}
+				return;
+			}
+
+			if (Math.abs(webcamVideo.currentTime - currentTime) > 0.15) {
+				webcamVideo.currentTime = currentTime;
+			}
+
+			webcamVideo.play().catch(() => {
+				// Ignore webcam autoplay restoration failures.
+			});
+		}, [currentTime, isPlaying, speedRegions, webcamVideoPath]);
+
+		useEffect(() => {
+			const webcamVideo = webcamVideoRef.current;
+			if (!webcamVideo || !webcamVideoPath) {
+				return;
+			}
+
+			webcamVideo.pause();
+			webcamVideo.currentTime = 0;
+		}, [webcamVideoPath]);
 
 		useEffect(() => {
 			let mounted = true;
@@ -827,7 +1156,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					}
 					const p = await getAssetPath(wallpaper.replace(/^\//, ""));
 					if (mounted) setResolvedWallpaper(p);
-				} catch {
+				} catch (_err) {
 					if (mounted) setResolvedWallpaper(wallpaper || "/wallpapers/wallpaper1.jpg");
 				}
 			})();
@@ -859,7 +1188,19 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		return (
 			<div
 				className="relative rounded-sm overflow-hidden"
-				style={{ width: "100%", aspectRatio: formatAspectRatioForCSS(aspectRatio) }}
+				style={{
+					width: "100%",
+					aspectRatio: formatAspectRatioForCSS(
+						aspectRatio,
+						aspectRatio === "native"
+							? getNativeAspectRatioValue(
+									lockedVideoDimensionsRef.current?.width || 1920,
+									lockedVideoDimensionsRef.current?.height || 1080,
+									cropRegion,
+								)
+							: undefined,
+					),
+				}}
 			>
 				{/* Background layer - always render as DOM element with blur */}
 				<div
@@ -879,12 +1220,53 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 								: "none",
 					}}
 				/>
+				{webcamVideoPath &&
+					(() => {
+						const clipPath = getCssClipPath(webcamLayout?.maskShape ?? "rectangle");
+						const useClipPath = !!clipPath;
+						return (
+							<div
+								className="absolute"
+								style={{
+									left: webcamLayout?.x ?? 0,
+									top: webcamLayout?.y ?? 0,
+									width: webcamLayout?.width ?? 0,
+									height: webcamLayout?.height ?? 0,
+									zIndex: 20,
+									opacity: webcamLayout ? 1 : 0,
+									filter:
+										useClipPath && webcamCssBoxShadow !== "none"
+											? `drop-shadow(${webcamCssBoxShadow})`
+											: undefined,
+								}}
+							>
+								<video
+									ref={webcamVideoRef}
+									src={webcamVideoPath}
+									className={`w-full h-full object-cover ${webcamLayoutPreset === "picture-in-picture" ? "cursor-grab active:cursor-grabbing" : "pointer-events-none"}`}
+									style={{
+										borderRadius: useClipPath ? 0 : (webcamLayout?.borderRadius ?? 0),
+										clipPath: clipPath ?? undefined,
+										boxShadow: useClipPath ? "none" : webcamCssBoxShadow,
+										backgroundColor: "#000",
+									}}
+									onPointerDown={handleWebcamPointerDown}
+									onPointerMove={handleWebcamPointerMove}
+									onPointerUp={handleWebcamPointerUp}
+									onPointerLeave={handleWebcamPointerUp}
+									muted
+									preload="metadata"
+									playsInline
+								/>
+							</div>
+						);
+					})()}
 				{/* Only render overlay after PIXI and video are fully initialized */}
 				{pixiReady && videoReady && (
 					<div
 						ref={overlayRef}
 						className="absolute inset-0 select-none"
-						style={{ pointerEvents: "none" }}
+						style={{ pointerEvents: "none", zIndex: 30 }}
 						onPointerDown={handleOverlayPointerDown}
 						onPointerMove={handleOverlayPointerMove}
 						onPointerUp={handleOverlayPointerUp}

src/components/video-editor/projectPersistence.test.ts

@@ -0,0 +1,105 @@
+import { describe, expect, it } from "vitest";
+import {
+	createProjectData,
+	createProjectSnapshot,
+	hasProjectUnsavedChanges,
+	normalizeProjectEditor,
+	PROJECT_VERSION,
+	resolveProjectMedia,
+	validateProjectData,
+} from "./projectPersistence";
+
+describe("projectPersistence media compatibility", () => {
+	it("accepts legacy projects with a single videoPath", () => {
+		const project = {
+			version: 1,
+			videoPath: "/tmp/screen.webm",
+			editor: {},
+		};
+
+		expect(validateProjectData(project)).toBe(true);
+		expect(resolveProjectMedia(project)).toEqual({
+			screenVideoPath: "/tmp/screen.webm",
+		});
+	});
+
+	it("creates version 2 projects with explicit media", () => {
+		const project = createProjectData(
+			{
+				screenVideoPath: "/tmp/screen.webm",
+				webcamVideoPath: "/tmp/webcam.webm",
+			},
+			{
+				wallpaper: "/wallpapers/wallpaper1.jpg",
+				shadowIntensity: 0,
+				showBlur: false,
+				motionBlurAmount: 0,
+				borderRadius: 0,
+				padding: 50,
+				cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+				zoomRegions: [],
+				trimRegions: [],
+				speedRegions: [],
+				annotationRegions: [],
+				aspectRatio: "16:9",
+				webcamLayoutPreset: "picture-in-picture",
+				webcamMaskShape: "circle",
+				exportQuality: "good",
+				exportFormat: "mp4",
+				gifFrameRate: 15,
+				gifLoop: true,
+				gifSizePreset: "medium",
+			},
+		);
+
+		expect(project.version).toBe(PROJECT_VERSION);
+		expect(project.media).toEqual({
+			screenVideoPath: "/tmp/screen.webm",
+			webcamVideoPath: "/tmp/webcam.webm",
+		});
+		expect(validateProjectData(project)).toBe(true);
+	});
+
+	it("normalizes webcam mask shape values safely", () => {
+		expect(normalizeProjectEditor({ webcamMaskShape: "rounded" }).webcamMaskShape).toBe("rounded");
+		expect(
+			normalizeProjectEditor({ webcamMaskShape: "not-a-real-shape" as never }).webcamMaskShape,
+		).toBe("rectangle");
+	});
+});
+
+it("creates stable snapshots for identical project state", () => {
+	const media = {
+		screenVideoPath: "/tmp/screen.webm",
+		webcamVideoPath: "/tmp/webcam.webm",
+	};
+	const editor = normalizeProjectEditor({
+		wallpaper: "/wallpapers/wallpaper1.jpg",
+		shadowIntensity: 0,
+		showBlur: false,
+		motionBlurAmount: 0,
+		borderRadius: 0,
+		padding: 50,
+		cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		zoomRegions: [],
+		trimRegions: [],
+		speedRegions: [],
+		annotationRegions: [],
+		aspectRatio: "16:9",
+		webcamLayoutPreset: "picture-in-picture",
+		webcamMaskShape: "circle",
+		exportQuality: "good",
+		exportFormat: "mp4",
+		gifFrameRate: 15,
+		gifLoop: true,
+		gifSizePreset: "medium",
+	});
+
+	expect(createProjectSnapshot(media, editor)).toBe(createProjectSnapshot(media, editor));
+});
+
+it("detects unsaved changes from differing snapshots", () => {
+	expect(hasProjectUnsavedChanges(null, null)).toBe(false);
+	expect(hasProjectUnsavedChanges("same", "same")).toBe(false);
+	expect(hasProjectUnsavedChanges("current", "baseline")).toBe(true);
+});

src/components/video-editor/projectPersistence.ts

@@ -1,4 +1,6 @@
 import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
+import type { ProjectMedia } from "@/lib/recordingSession";
+import { normalizeProjectMedia } from "@/lib/recordingSession";
 import { ASPECT_RATIOS, type AspectRatio } from "@/utils/aspectRatioUtils";
 import {
 	type AnnotationRegion,
@@ -9,9 +11,15 @@ import {
 	DEFAULT_CROP_REGION,
 	DEFAULT_FIGURE_DATA,
 	DEFAULT_PLAYBACK_SPEED,
+	DEFAULT_WEBCAM_LAYOUT_PRESET,
+	DEFAULT_WEBCAM_MASK_SHAPE,
+	DEFAULT_WEBCAM_POSITION,
 	DEFAULT_ZOOM_DEPTH,
 	type SpeedRegion,
 	type TrimRegion,
+	type WebcamLayoutPreset,
+	type WebcamMaskShape,
+	type WebcamPosition,
 	type ZoomRegion,
 } from "./types";
 
@@ -22,13 +30,13 @@ export const WALLPAPER_PATHS = Array.from(
 	(_, i) => `/wallpapers/wallpaper${i + 1}.jpg`,
 );
 
-export const PROJECT_VERSION = 1;
+export const PROJECT_VERSION = 2;
 
 export interface ProjectEditorState {
 	wallpaper: string;
 	shadowIntensity: number;
 	showBlur: boolean;
-	motionBlurEnabled: boolean;
+	motionBlurAmount: number;
 	borderRadius: number;
 	padding: number;
 	cropRegion: CropRegion;
@@ -37,6 +45,9 @@ export interface ProjectEditorState {
 	speedRegions: SpeedRegion[];
 	annotationRegions: AnnotationRegion[];
 	aspectRatio: AspectRatio;
+	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape: WebcamMaskShape;
+	webcamPosition: WebcamPosition | null;
 	exportQuality: ExportQuality;
 	exportFormat: ExportFormat;
 	gifFrameRate: GifFrameRate;
@@ -46,8 +57,9 @@ export interface ProjectEditorState {
 
 export interface EditorProjectData {
 	version: number;
-	videoPath: string;
+	media?: ProjectMedia;
 	editor: ProjectEditorState;
+	videoPath?: string;
 }
 
 function isFiniteNumber(value: unknown): value is number {
@@ -58,24 +70,70 @@ function clamp(value: number, min: number, max: number) {
 	return Math.min(max, Math.max(min, value));
 }
 
+function isFileUrl(value: string): boolean {
+	return /^file:\/\//i.test(value);
+}
+
+function encodePathSegments(pathname: string, keepWindowsDrive = false): string {
+	return pathname
+		.split("/")
+		.map((segment, index) => {
+			if (!segment) return "";
+			if (keepWindowsDrive && index === 1 && /^[a-zA-Z]:$/.test(segment)) {
+				return segment;
+			}
+			return encodeURIComponent(segment);
+		})
+		.join("/");
+}
+
 export function toFileUrl(filePath: string): string {
 	const normalized = filePath.replace(/\\/g, "/");
-	if (normalized.match(/^[a-zA-Z]:/)) {
-		return `file:///${normalized}`;
+
+	// Windows drive path: C:/Users/...
+	if (/^[a-zA-Z]:\//.test(normalized)) {
+		return `file://${encodePathSegments(`/${normalized}`, true)}`;
 	}
-	return `file://${normalized}`;
+
+	// UNC path: //server/share/...
+	if (normalized.startsWith("//")) {
+		const [host, ...pathParts] = normalized.replace(/^\/+/, "").split("/");
+		const encodedPath = pathParts.map((part) => encodeURIComponent(part)).join("/");
+		return encodedPath ? `file://${host}/${encodedPath}` : `file://${host}/`;
+	}
+
+	const absolutePath = normalized.startsWith("/") ? normalized : `/${normalized}`;
+	return `file://${encodePathSegments(absolutePath)}`;
 }
 
 export function fromFileUrl(fileUrl: string): string {
-	if (!fileUrl.startsWith("file://")) {
+	const value = fileUrl.trim();
+	if (!isFileUrl(value)) {
 		return fileUrl;
 	}
 
 	try {
-		const url = new URL(fileUrl);
-		return decodeURIComponent(url.pathname);
+		const url = new URL(value);
+		const pathname = decodeURIComponent(url.pathname);
+
+		if (url.host && url.host !== "localhost") {
+			return `//${url.host}${pathname}`;
+		}
+
+		if (/^\/[a-zA-Z]:/.test(pathname)) {
+			return pathname.slice(1);
+		}
+
+		return pathname;
 	} catch {
-		return fileUrl.replace(/^file:\/\//, "");
+		const rawFallbackPath = value.replace(/^file:\/\//i, "");
+		let fallbackPath = rawFallbackPath;
+		try {
+			fallbackPath = decodeURIComponent(rawFallbackPath);
+		} catch {
+			// Keep raw best-effort path if percent decoding fails.
+		}
+		return fallbackPath.replace(/^\/([a-zA-Z]:)/, "$1");
 	}
 }
 
@@ -93,11 +151,26 @@ export function validateProjectData(candidate: unknown): candidate is EditorProj
 	if (!candidate || typeof candidate !== "object") return false;
 	const project = candidate as Partial<EditorProjectData>;
 	if (typeof project.version !== "number") return false;
-	if (typeof project.videoPath !== "string" || !project.videoPath) return false;
+	if (!resolveProjectMedia(project)) return false;
 	if (!project.editor || typeof project.editor !== "object") return false;
 	return true;
 }
 
+export function resolveProjectMedia(
+	candidate: Partial<EditorProjectData> | { media?: unknown; videoPath?: unknown },
+): ProjectMedia | null {
+	const media = normalizeProjectMedia(candidate.media);
+	if (media) {
+		return media;
+	}
+
+	if (typeof candidate.videoPath === "string" && candidate.videoPath.trim()) {
+		return { screenVideoPath: candidate.videoPath };
+	}
+
+	return null;
+}
+
 export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): ProjectEditorState {
 	const validAspectRatios = new Set<AspectRatio>(ASPECT_RATIOS);
 
@@ -119,6 +192,7 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 							cx: clamp(isFiniteNumber(region.focus?.cx) ? region.focus.cx : 0.5, 0, 1),
 							cy: clamp(isFiniteNumber(region.focus?.cy) ? region.focus.cy : 0.5, 0, 1),
 						},
+						focusMode: region.focusMode === "auto" ? "auto" : "manual",
 					};
 				})
 		: [];
@@ -256,8 +330,13 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 		wallpaper: typeof editor.wallpaper === "string" ? editor.wallpaper : WALLPAPER_PATHS[0],
 		shadowIntensity: typeof editor.shadowIntensity === "number" ? editor.shadowIntensity : 0,
 		showBlur: typeof editor.showBlur === "boolean" ? editor.showBlur : false,
-		motionBlurEnabled:
-			typeof editor.motionBlurEnabled === "boolean" ? editor.motionBlurEnabled : false,
+		motionBlurAmount: isFiniteNumber(editor.motionBlurAmount)
+			? clamp(editor.motionBlurAmount, 0, 1)
+			: typeof (editor as { motionBlurEnabled?: unknown }).motionBlurEnabled === "boolean"
+				? (editor as { motionBlurEnabled?: boolean }).motionBlurEnabled
+					? 0.35
+					: 0
+				: 0,
 		borderRadius: typeof editor.borderRadius === "number" ? editor.borderRadius : 0,
 		padding: isFiniteNumber(editor.padding) ? clamp(editor.padding, 0, 100) : 50,
 		cropRegion: {
@@ -272,6 +351,28 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 		annotationRegions: normalizedAnnotationRegions,
 		aspectRatio:
 			editor.aspectRatio && validAspectRatios.has(editor.aspectRatio) ? editor.aspectRatio : "16:9",
+		webcamLayoutPreset:
+			editor.webcamLayoutPreset === "vertical-stack" ||
+			editor.webcamLayoutPreset === "picture-in-picture"
+				? editor.webcamLayoutPreset
+				: DEFAULT_WEBCAM_LAYOUT_PRESET,
+		webcamMaskShape:
+			editor.webcamMaskShape === "rectangle" ||
+			editor.webcamMaskShape === "circle" ||
+			editor.webcamMaskShape === "square" ||
+			editor.webcamMaskShape === "rounded"
+				? editor.webcamMaskShape
+				: DEFAULT_WEBCAM_MASK_SHAPE,
+		webcamPosition:
+			editor.webcamPosition &&
+			typeof editor.webcamPosition === "object" &&
+			isFiniteNumber((editor.webcamPosition as WebcamPosition).cx) &&
+			isFiniteNumber((editor.webcamPosition as WebcamPosition).cy)
+				? {
+						cx: clamp((editor.webcamPosition as WebcamPosition).cx, 0, 1),
+						cy: clamp((editor.webcamPosition as WebcamPosition).cy, 0, 1),
+					}
+				: DEFAULT_WEBCAM_POSITION,
 		exportQuality:
 			editor.exportQuality === "medium" || editor.exportQuality === "source"
 				? editor.exportQuality
@@ -295,12 +396,28 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 }
 
 export function createProjectData(
-	videoPath: string,
+	media: ProjectMedia,
 	editor: ProjectEditorState,
 ): EditorProjectData {
 	return {
 		version: PROJECT_VERSION,
-		videoPath,
+		media,
 		editor,
 	};
 }
+
+export function createProjectSnapshot(
+	media: ProjectMedia,
+	editor: Partial<ProjectEditorState>,
+): string {
+	return JSON.stringify(createProjectData(media, normalizeProjectEditor(editor)));
+}
+
+export function hasProjectUnsavedChanges(
+	currentSnapshot: string | null,
+	baselineSnapshot: string | null,
+): boolean {
+	return Boolean(
+		currentSnapshot !== null && baselineSnapshot !== null && currentSnapshot !== baselineSnapshot,
+	);
+}

src/components/video-editor/timeline/TimelineEditor.tsx

@@ -20,6 +20,7 @@ import {
 	DropdownMenuItem,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { useScopedT } from "@/contexts/I18nContext";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
 import { matchesShortcut } from "@/lib/shortcuts";
 import { cn } from "@/lib/utils";
@@ -169,6 +170,33 @@ function createInitialRange(totalMs: number): Range {
 	return { start: 0, end: FALLBACK_RANGE_MS };
 }
 
+function clampVisibleRange(candidate: Range, totalMs: number): Range {
+	if (totalMs <= 0) {
+		return candidate;
+	}
+
+	const span = Math.max(candidate.end - candidate.start, 1);
+
+	if (span >= totalMs) {
+		return { start: 0, end: totalMs };
+	}
+
+	const start = Math.max(0, Math.min(candidate.start, totalMs - span));
+	return { start, end: start + span };
+}
+
+function normalizeWheelDelta(delta: number, deltaMode: number, pageSizePx: number): number {
+	if (deltaMode === WheelEvent.DOM_DELTA_LINE) {
+		return delta * 16;
+	}
+
+	if (deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+		return delta * pageSizePx;
+	}
+
+	return delta;
+}
+
 function formatTimeLabel(milliseconds: number, intervalMs: number) {
 	const totalSeconds = milliseconds / 1000;
 	const hours = Math.floor(totalSeconds / 3600);
@@ -204,18 +232,21 @@ function PlaybackCursor({
 	currentTimeMs,
 	videoDurationMs,
 	onSeek,
+	onRangeChange,
 	timelineRef,
 	keyframes = [],
 }: {
 	currentTimeMs: number;
 	videoDurationMs: number;
 	onSeek?: (time: number) => void;
+	onRangeChange?: (updater: (previous: Range) => Range) => void;
 	timelineRef: React.RefObject<HTMLDivElement>;
 	keyframes?: { id: string; time: number }[];
 }) {
 	const { sidebarWidth, direction, range, valueToPixels, pixelsToValue } = useTimelineContext();
 	const sideProperty = direction === "rtl" ? "right" : "left";
 	const [isDragging, setIsDragging] = useState(false);
+	const [dragPreviewTimeMs, setDragPreviewTimeMs] = useState<number | null>(null);
 
 	useEffect(() => {
 		if (!isDragging) return;
@@ -225,6 +256,7 @@ function PlaybackCursor({
 
 			const rect = timelineRef.current.getBoundingClientRect();
 			const clickX = e.clientX - rect.left - sidebarWidth;
+			const contentWidth = Math.max(rect.width - sidebarWidth, 1);
 
 			// Allow dragging outside to 0 or max, but clamp the value
 			const relativeMs = pixelsToValue(clickX);
@@ -243,11 +275,51 @@ function PlaybackCursor({
 				absoluteMs = nearbyKeyframe.time;
 			}
 
+			setDragPreviewTimeMs(absoluteMs);
+
+			const visibleMs = range.end - range.start;
+			if (onRangeChange && visibleMs > 0 && videoDurationMs > visibleMs) {
+				const msPerPixel = visibleMs / contentWidth;
+				const overflowLeftPx = Math.max(0, -clickX);
+				const overflowRightPx = Math.max(0, clickX - contentWidth);
+
+				if (overflowLeftPx > 0 && range.start > 0) {
+					const shiftMs = overflowLeftPx * msPerPixel;
+					onRangeChange((previous) => {
+						const nextRange = clampVisibleRange(
+							{
+								start: previous.start - shiftMs,
+								end: previous.end - shiftMs,
+							},
+							videoDurationMs,
+						);
+						return nextRange.start === previous.start && nextRange.end === previous.end
+							? previous
+							: nextRange;
+					});
+				} else if (overflowRightPx > 0 && range.end < videoDurationMs) {
+					const shiftMs = overflowRightPx * msPerPixel;
+					onRangeChange((previous) => {
+						const nextRange = clampVisibleRange(
+							{
+								start: previous.start + shiftMs,
+								end: previous.end + shiftMs,
+							},
+							videoDurationMs,
+						);
+						return nextRange.start === previous.start && nextRange.end === previous.end
+							? previous
+							: nextRange;
+					});
+				}
+			}
+
 			onSeek(absoluteMs / 1000);
 		};
 
 		const handleMouseUp = () => {
 			setIsDragging(false);
+			setDragPreviewTimeMs(null);
 			document.body.style.cursor = "";
 		};
 
@@ -263,6 +335,7 @@ function PlaybackCursor({
 	}, [
 		isDragging,
 		onSeek,
+		onRangeChange,
 		timelineRef,
 		sidebarWidth,
 		range.start,
@@ -272,11 +345,14 @@ function PlaybackCursor({
 		keyframes,
 	]);
 
-	if (videoDurationMs <= 0 || currentTimeMs < 0) {
+	const displayTimeMs =
+		isDragging && dragPreviewTimeMs !== null ? dragPreviewTimeMs : currentTimeMs;
+
+	if (videoDurationMs <= 0 || displayTimeMs < 0) {
 		return null;
 	}
 
-	const clampedTime = Math.min(currentTimeMs, videoDurationMs);
+	const clampedTime = Math.min(displayTimeMs, videoDurationMs);
 
 	if (clampedTime < range.start || clampedTime > range.end) {
 		return null;
@@ -299,6 +375,7 @@ function PlaybackCursor({
 				}}
 				onMouseDown={(e) => {
 					e.stopPropagation(); // Prevent timeline click
+					setDragPreviewTimeMs(currentTimeMs);
 					setIsDragging(true);
 				}}
 			>
@@ -444,6 +521,7 @@ function Timeline({
 	videoDurationMs,
 	currentTimeMs,
 	onSeek,
+	onRangeChange,
 	onSelectZoom,
 	onSelectTrim,
 	onSelectAnnotation,
@@ -458,6 +536,7 @@ function Timeline({
 	videoDurationMs: number;
 	currentTimeMs: number;
 	onSeek?: (time: number) => void;
+	onRangeChange?: (updater: (previous: Range) => Range) => void;
 	onSelectZoom?: (id: string | null) => void;
 	onSelectTrim?: (id: string | null) => void;
 	onSelectAnnotation?: (id: string | null) => void;
@@ -468,6 +547,7 @@ function Timeline({
 	selectedSpeedId?: string | null;
 	keyframes?: { id: string; time: number }[];
 }) {
+	const t = useScopedT("timeline");
 	const { setTimelineRef, style, sidebarWidth, range, pixelsToValue } = useTimelineContext();
 	const localTimelineRef = useRef<HTMLDivElement | null>(null);
 
@@ -514,6 +594,46 @@ function Timeline({
 		],
 	);
 
+	const handleTimelineWheel = useCallback(
+		(event: React.WheelEvent<HTMLDivElement>) => {
+			if (!onRangeChange || event.ctrlKey || event.metaKey || videoDurationMs <= 0) {
+				return;
+			}
+
+			const visibleMs = range.end - range.start;
+			if (visibleMs <= 0 || videoDurationMs <= visibleMs) {
+				return;
+			}
+
+			const dominantDelta =
+				Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+			if (dominantDelta === 0) {
+				return;
+			}
+
+			event.preventDefault();
+
+			const pageWidthPx = Math.max(event.currentTarget.clientWidth - sidebarWidth, 1);
+			const normalizedDeltaPx = normalizeWheelDelta(dominantDelta, event.deltaMode, pageWidthPx);
+			const shiftMs = pixelsToValue(normalizedDeltaPx);
+
+			onRangeChange((previous) => {
+				const nextRange = clampVisibleRange(
+					{
+						start: previous.start + shiftMs,
+						end: previous.end + shiftMs,
+					},
+					videoDurationMs,
+				);
+
+				return nextRange.start === previous.start && nextRange.end === previous.end
+					? previous
+					: nextRange;
+			});
+		},
+		[onRangeChange, videoDurationMs, range.end, range.start, sidebarWidth, pixelsToValue],
+	);
+
 	const zoomItems = items.filter((item) => item.rowId === ZOOM_ROW_ID);
 	const trimItems = items.filter((item) => item.rowId === TRIM_ROW_ID);
 	const annotationItems = items.filter((item) => item.rowId === ANNOTATION_ROW_ID);
@@ -525,6 +645,7 @@ function Timeline({
 			style={style}
 			className="select-none bg-[#09090b] min-h-[140px] relative cursor-pointer group"
 			onClick={handleTimelineClick}
+			onWheel={handleTimelineWheel}
 		>
 			<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px)] bg-[length:20px_100%] pointer-events-none" />
 			<TimelineAxis videoDurationMs={videoDurationMs} currentTimeMs={currentTimeMs} />
@@ -532,11 +653,12 @@ function Timeline({
 				currentTimeMs={currentTimeMs}
 				videoDurationMs={videoDurationMs}
 				onSeek={onSeek}
+				onRangeChange={onRangeChange}
 				timelineRef={localTimelineRef}
 				keyframes={keyframes}
 			/>
 
-			<Row id={ZOOM_ROW_ID} isEmpty={zoomItems.length === 0} hint="Press Z to add zoom">
+			<Row id={ZOOM_ROW_ID} isEmpty={zoomItems.length === 0} hint={t("hints.pressZoom")}>
 				{zoomItems.map((item) => (
 					<Item
 						id={item.id}
@@ -553,7 +675,7 @@ function Timeline({
 				))}
 			</Row>
 
-			<Row id={TRIM_ROW_ID} isEmpty={trimItems.length === 0} hint="Press T to add trim">
+			<Row id={TRIM_ROW_ID} isEmpty={trimItems.length === 0} hint={t("hints.pressTrim")}>
 				{trimItems.map((item) => (
 					<Item
 						id={item.id}
@@ -572,7 +694,7 @@ function Timeline({
 			<Row
 				id={ANNOTATION_ROW_ID}
 				isEmpty={annotationItems.length === 0}
-				hint="Press A to add annotation"
+				hint={t("hints.pressAnnotation")}
 			>
 				{annotationItems.map((item) => (
 					<Item
@@ -589,7 +711,7 @@ function Timeline({
 				))}
 			</Row>
 
-			<Row id={SPEED_ROW_ID} isEmpty={speedItems.length === 0} hint="Press S to add speed">
+			<Row id={SPEED_ROW_ID} isEmpty={speedItems.length === 0} hint={t("hints.pressSpeed")}>
 				{speedItems.map((item) => (
 					<Item
 						id={item.id}
@@ -642,6 +764,7 @@ export default function TimelineEditor({
 	aspectRatio,
 	onAspectRatioChange,
 }: TimelineEditorProps) {
+	const t = useScopedT("timeline");
 	const totalMs = useMemo(() => Math.max(0, Math.round(videoDuration * 1000)), [videoDuration]);
 	const currentTimeMs = useMemo(() => Math.round(currentTime * 1000), [currentTime]);
 	const timelineScale = useMemo(() => calculateTimelineScale(videoDuration), [videoDuration]);
@@ -657,17 +780,15 @@ export default function TimelineEditor({
 	const [keyframes, setKeyframes] = useState<{ id: string; time: number }[]>([]);
 	const [selectedKeyframeId, setSelectedKeyframeId] = useState<string | null>(null);
 	const [scrollLabels, setScrollLabels] = useState({
-		pan: "Shift + Ctrl + Scroll",
+		pan: "Scroll",
 		zoom: "Ctrl + Scroll",
 	});
 	const timelineContainerRef = useRef<HTMLDivElement>(null);
 	const { shortcuts: keyShortcuts, isMac } = useShortcuts();
 
 	useEffect(() => {
-		formatShortcut(["shift", "mod", "Scroll"]).then((pan) => {
-			formatShortcut(["mod", "Scroll"]).then((zoom) => {
-				setScrollLabels({ pan, zoom });
-			});
+		formatShortcut(["mod", "Scroll"]).then((zoom) => {
+			setScrollLabels({ pan: "Scroll", zoom });
 		});
 	}, []);
 
@@ -848,15 +969,15 @@ export default function TimelineEditor({
 			(region) => startPos >= region.startMs && startPos < region.endMs,
 		);
 		if (isOverlapping || gapToNext <= 0) {
-			toast.error("Cannot place zoom here", {
-				description: "Zoom already exists at this location or not enough space available.",
+			toast.error(t("errors.cannotPlaceZoom"), {
+				description: t("errors.zoomExistsAtLocation"),
 			});
 			return;
 		}
 
 		const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
 		onZoomAdded({ start: startPos, end: startPos + actualDuration });
-	}, [videoDuration, totalMs, currentTimeMs, zoomRegions, onZoomAdded, defaultRegionDurationMs]);
+	}, [videoDuration, totalMs, currentTimeMs, zoomRegions, onZoomAdded, defaultRegionDurationMs, t]);
 
 	const handleSuggestZooms = useCallback(() => {
 		if (!videoDuration || videoDuration === 0 || totalMs === 0) {
@@ -864,13 +985,13 @@ export default function TimelineEditor({
 		}
 
 		if (!onZoomSuggested) {
-			toast.error("Zoom suggestion handler unavailable");
+			toast.error(t("errors.zoomSuggestionUnavailable"));
 			return;
 		}
 
 		if (cursorTelemetry.length < 2) {
-			toast.info("No cursor telemetry available", {
-				description: "Record a screencast first to generate cursor-based suggestions.",
+			toast.info(t("errors.noCursorTelemetry"), {
+				description: t("errors.noCursorTelemetryDescription"),
 			});
 			return;
 		}
@@ -887,8 +1008,8 @@ export default function TimelineEditor({
 		const normalizedSamples = normalizeCursorTelemetry(cursorTelemetry, totalMs);
 
 		if (normalizedSamples.length < 2) {
-			toast.info("No usable cursor telemetry", {
-				description: "The recording does not include enough cursor movement data.",
+			toast.info(t("errors.noUsableTelemetry"), {
+				description: t("errors.noUsableTelemetryDescription"),
 			});
 			return;
 		}
@@ -896,8 +1017,8 @@ export default function TimelineEditor({
 		const dwellCandidates = detectZoomDwellCandidates(normalizedSamples);
 
 		if (dwellCandidates.length === 0) {
-			toast.info("No clear cursor dwell moments found", {
-				description: "Try a recording with slower cursor pauses on important actions.",
+			toast.info(t("errors.noDwellMoments"), {
+				description: t("errors.noDwellMomentsDescription"),
 			});
 			return;
 		}
@@ -934,13 +1055,17 @@ export default function TimelineEditor({
 		});
 
 		if (addedCount === 0) {
-			toast.info("No auto-zoom slots available", {
-				description: "Detected dwell points overlap existing zoom regions.",
+			toast.info(t("errors.noAutoZoomSlots"), {
+				description: t("errors.noAutoZoomSlotsDescription"),
 			});
 			return;
 		}
 
-		toast.success(`Added ${addedCount} cursor-based zoom suggestion${addedCount === 1 ? "" : "s"}`);
+		toast.success(
+			addedCount === 1
+				? t("success.addedZoomSuggestions", { count: String(addedCount) })
+				: t("success.addedZoomSuggestionsPlural", { count: String(addedCount) }),
+		);
 	}, [
 		videoDuration,
 		totalMs,
@@ -948,6 +1073,7 @@ export default function TimelineEditor({
 		zoomRegions,
 		onZoomSuggested,
 		cursorTelemetry,
+		t,
 	]);
 
 	const handleAddTrim = useCallback(() => {
@@ -972,15 +1098,15 @@ export default function TimelineEditor({
 			(region) => startPos >= region.startMs && startPos < region.endMs,
 		);
 		if (isOverlapping || gapToNext <= 0) {
-			toast.error("Cannot place trim here", {
-				description: "Trim already exists at this location or not enough space available.",
+			toast.error(t("errors.cannotPlaceTrim"), {
+				description: t("errors.trimExistsAtLocation"),
 			});
 			return;
 		}
 
 		const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
 		onTrimAdded({ start: startPos, end: startPos + actualDuration });
-	}, [videoDuration, totalMs, currentTimeMs, trimRegions, onTrimAdded, defaultRegionDurationMs]);
+	}, [videoDuration, totalMs, currentTimeMs, trimRegions, onTrimAdded, defaultRegionDurationMs, t]);
 
 	const handleAddSpeed = useCallback(() => {
 		if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onSpeedAdded) {
@@ -1004,15 +1130,23 @@ export default function TimelineEditor({
 			(region) => startPos >= region.startMs && startPos < region.endMs,
 		);
 		if (isOverlapping || gapToNext <= 0) {
-			toast.error("Cannot place speed here", {
-				description: "Speed region already exists at this location or not enough space available.",
+			toast.error(t("errors.cannotPlaceSpeed"), {
+				description: t("errors.speedExistsAtLocation"),
 			});
 			return;
 		}
 
 		const actualDuration = Math.min(defaultRegionDurationMs, gapToNext);
 		onSpeedAdded({ start: startPos, end: startPos + actualDuration });
-	}, [videoDuration, totalMs, currentTimeMs, speedRegions, onSpeedAdded, defaultRegionDurationMs]);
+	}, [
+		videoDuration,
+		totalMs,
+		currentTimeMs,
+		speedRegions,
+		onSpeedAdded,
+		defaultRegionDurationMs,
+		t,
+	]);
 
 	const handleAddAnnotation = useCallback(() => {
 		if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onAnnotationAdded) {
@@ -1135,7 +1269,7 @@ export default function TimelineEditor({
 			id: region.id,
 			rowId: ZOOM_ROW_ID,
 			span: { start: region.startMs, end: region.endMs },
-			label: `Zoom ${index + 1}`,
+			label: t("labels.zoomItem", { index: String(index + 1) }),
 			zoomDepth: region.depth,
 			variant: "zoom",
 		}));
@@ -1144,7 +1278,7 @@ export default function TimelineEditor({
 			id: region.id,
 			rowId: TRIM_ROW_ID,
 			span: { start: region.startMs, end: region.endMs },
-			label: `Trim ${index + 1}`,
+			label: t("labels.trimItem", { index: String(index + 1) }),
 			variant: "trim",
 		}));
 
@@ -1153,12 +1287,12 @@ export default function TimelineEditor({
 
 			if (region.type === "text") {
 				// Show text preview
-				const preview = region.content.trim() || "Empty text";
+				const preview = region.content.trim() || t("labels.emptyText");
 				label = preview.length > 20 ? `${preview.substring(0, 20)}...` : preview;
 			} else if (region.type === "image") {
-				label = "Image";
+				label = t("labels.imageItem");
 			} else {
-				label = "Annotation";
+				label = t("labels.annotationItem");
 			}
 
 			return {
@@ -1174,13 +1308,13 @@ export default function TimelineEditor({
 			id: region.id,
 			rowId: SPEED_ROW_ID,
 			span: { start: region.startMs, end: region.endMs },
-			label: `Speed ${index + 1}`,
+			label: t("labels.speedItem", { index: String(index + 1) }),
 			speedValue: region.speed,
 			variant: "speed",
 		}));
 
 		return [...zooms, ...trims, ...annotations, ...speeds];
-	}, [zoomRegions, trimRegions, annotationRegions, speedRegions]);
+	}, [zoomRegions, trimRegions, annotationRegions, speedRegions, t]);
 
 	// Flat list of all non-annotation region spans for neighbour-clamping during drag/resize
 	const allRegionSpans = useMemo(() => {
@@ -1222,8 +1356,8 @@ export default function TimelineEditor({
 					<Plus className="w-6 h-6 text-slate-600" />
 				</div>
 				<div className="text-center">
-					<p className="text-sm font-medium text-slate-300">No Video Loaded</p>
-					<p className="text-xs text-slate-500 mt-1">Drag and drop a video to start editing</p>
+					<p className="text-sm font-medium text-slate-300">{t("emptyState.noVideo")}</p>
+					<p className="text-xs text-slate-500 mt-1">{t("emptyState.dragAndDrop")}</p>
 				</div>
 			</div>
 		);
@@ -1238,7 +1372,7 @@ export default function TimelineEditor({
 						variant="ghost"
 						size="icon"
 						className="h-7 w-7 text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
-						title="Add Zoom (Z)"
+						title={t("buttons.addZoom")}
 					>
 						<ZoomIn className="w-4 h-4" />
 					</Button>
@@ -1247,7 +1381,7 @@ export default function TimelineEditor({
 						variant="ghost"
 						size="icon"
 						className="h-7 w-7 text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
-						title="Suggest Zooms from Cursor"
+						title={t("buttons.suggestZooms")}
 					>
 						<WandSparkles className="w-4 h-4" />
 					</Button>
@@ -1256,7 +1390,7 @@ export default function TimelineEditor({
 						variant="ghost"
 						size="icon"
 						className="h-7 w-7 text-slate-400 hover:text-[#ef4444] hover:bg-[#ef4444]/10 transition-all"
-						title="Add Trim (T)"
+						title={t("buttons.addTrim")}
 					>
 						<Scissors className="w-4 h-4" />
 					</Button>
@@ -1265,7 +1399,7 @@ export default function TimelineEditor({
 						variant="ghost"
 						size="icon"
 						className="h-7 w-7 text-slate-400 hover:text-[#B4A046] hover:bg-[#B4A046]/10 transition-all"
-						title="Add Annotation (A)"
+						title={t("buttons.addAnnotation")}
 					>
 						<MessageSquare className="w-4 h-4" />
 					</Button>
@@ -1274,7 +1408,7 @@ export default function TimelineEditor({
 						variant="ghost"
 						size="icon"
 						className="h-7 w-7 text-slate-400 hover:text-[#d97706] hover:bg-[#d97706]/10 transition-all"
-						title="Add Speed (S)"
+						title={t("buttons.addSpeed")}
 					>
 						<Gauge className="w-4 h-4" />
 					</Button>
@@ -1313,13 +1447,13 @@ export default function TimelineEditor({
 						<kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">
 							{scrollLabels.pan}
 						</kbd>
-						<span>Pan</span>
+						<span>{t("labels.pan")}</span>
 					</span>
 					<span className="flex items-center gap-1.5">
 						<kbd className="px-1.5 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-sans">
 							{scrollLabels.zoom}
 						</kbd>
-						<span>Zoom</span>
+						<span>{t("labels.zoom")}</span>
 					</span>
 				</div>
 			</div>
@@ -1351,6 +1485,7 @@ export default function TimelineEditor({
 						videoDurationMs={totalMs}
 						currentTimeMs={currentTimeMs}
 						onSeek={onSeek}
+						onRangeChange={setRange}
 						onSelectZoom={onSelectZoom}
 						onSelectTrim={onSelectTrim}
 						onSelectAnnotation={onSelectAnnotation}

src/components/video-editor/timeline/TimelineWrapper.tsx

@@ -187,12 +187,12 @@ export default function TimelineWrapper({
 	// Drag/resize tooltip (direct DOM updates, no re-renders)
 	const tooltipRef = useRef<HTMLDivElement>(null);
 
-	const formatTooltipMs = (ms: number) => {
+	const formatTooltipMs = useCallback((ms: number) => {
 		const s = ms / 1000;
 		const min = Math.floor(s / 60);
 		const sec = s % 60;
 		return min > 0 ? `${min}:${sec.toFixed(1).padStart(4, "0")}` : `${sec.toFixed(1)}s`;
-	};
+	}, []);
 
 	const showTooltip = useCallback(
 		(span: { start: number; end: number } | null, screenX?: number) => {
@@ -213,7 +213,7 @@ export default function TimelineWrapper({
 				}
 			}
 		},
-		[],
+		[formatTooltipMs],
 	);
 
 	const onDragStart = useCallback(

src/components/video-editor/types.ts

@@ -1,4 +1,21 @@
+import type { WebcamLayoutPreset } from "@/lib/compositeLayout";
+
 export type ZoomDepth = 1 | 2 | 3 | 4 | 5 | 6;
+export type ZoomFocusMode = "manual" | "auto";
+export type { WebcamLayoutPreset };
+
+export const DEFAULT_WEBCAM_LAYOUT_PRESET: WebcamLayoutPreset = "picture-in-picture";
+
+export type WebcamMaskShape = "rectangle" | "circle" | "square" | "rounded";
+
+export const DEFAULT_WEBCAM_MASK_SHAPE: WebcamMaskShape = "rectangle";
+
+export interface WebcamPosition {
+	cx: number; // normalized horizontal center (0-1)
+	cy: number; // normalized vertical center (0-1)
+}
+
+export const DEFAULT_WEBCAM_POSITION: WebcamPosition | null = null;
 
 export interface ZoomFocus {
 	cx: number; // normalized horizontal center (0-1)
@@ -11,6 +28,7 @@ export interface ZoomRegion {
 	endMs: number;
 	depth: ZoomDepth;
 	focus: ZoomFocus;
+	focusMode?: ZoomFocusMode;
 }
 
 export interface CursorTelemetryPoint {

src/components/video-editor/videoPlayback/constants.ts

@@ -1,7 +1,13 @@
 import type { ZoomFocus } from "../types";
 
 export const DEFAULT_FOCUS: ZoomFocus = { cx: 0.5, cy: 0.5 };
-export const TRANSITION_WINDOW_MS = 320;
-export const SMOOTHING_FACTOR = 0.12;
+export const TRANSITION_WINDOW_MS = 1015.05;
+export const ZOOM_IN_TRANSITION_WINDOW_MS = TRANSITION_WINDOW_MS * 1.5;
 export const MIN_DELTA = 0.0001;
 export const VIEWPORT_SCALE = 0.8;
+export const SMOOTHING_FACTOR = 0.12;
+export const ZOOM_TRANSLATION_DEADZONE_PX = 1.25;
+export const ZOOM_SCALE_DEADZONE = 0.002;
+export const AUTO_FOLLOW_SMOOTHING_FACTOR = 0.1;
+export const AUTO_FOLLOW_SMOOTHING_FACTOR_MAX = 0.25;
+export const AUTO_FOLLOW_RAMP_DISTANCE = 0.15;

src/components/video-editor/videoPlayback/cursorFollowUtils.ts

@@ -0,0 +1,73 @@
+import type { CursorTelemetryPoint, ZoomFocus } from "../types";
+
+/**
+ * Binary-search the sorted telemetry array and linearly interpolate
+ * the cursor position at the given playback time.
+ */
+export function interpolateCursorAt(
+	telemetry: CursorTelemetryPoint[],
+	timeMs: number,
+): ZoomFocus | null {
+	if (telemetry.length === 0) return null;
+
+	if (timeMs <= telemetry[0].timeMs) {
+		return { cx: telemetry[0].cx, cy: telemetry[0].cy };
+	}
+
+	const last = telemetry[telemetry.length - 1];
+	if (timeMs >= last.timeMs) {
+		return { cx: last.cx, cy: last.cy };
+	}
+
+	let lo = 0;
+	let hi = telemetry.length - 1;
+
+	while (lo < hi - 1) {
+		const mid = (lo + hi) >>> 1;
+		if (telemetry[mid].timeMs <= timeMs) {
+			lo = mid;
+		} else {
+			hi = mid;
+		}
+	}
+
+	const before = telemetry[lo];
+	const after = telemetry[hi];
+	const span = after.timeMs - before.timeMs;
+	const t = span > 0 ? (timeMs - before.timeMs) / span : 0;
+
+	return {
+		cx: before.cx + (after.cx - before.cx) * t,
+		cy: before.cy + (after.cy - before.cy) * t,
+	};
+}
+
+/**
+ * Exponential smoothing to reduce jitter from high-frequency cursor data.
+ * Lower factor = smoother / more lag, higher = more responsive.
+ */
+export function smoothCursorFocus(raw: ZoomFocus, prev: ZoomFocus, factor: number): ZoomFocus {
+	return {
+		cx: prev.cx + (raw.cx - prev.cx) * factor,
+		cy: prev.cy + (raw.cy - prev.cy) * factor,
+	};
+}
+
+/**
+ * Compute an adaptive smoothing factor that scales with distance:
+ * far from target → faster (maxFactor), close → slower (minFactor).
+ * This replaces the hard deadzone with a natural deceleration curve.
+ */
+export function adaptiveSmoothFactor(
+	raw: ZoomFocus,
+	prev: ZoomFocus,
+	minFactor: number,
+	maxFactor: number,
+	rampDistance: number,
+): number {
+	const dx = raw.cx - prev.cx;
+	const dy = raw.cy - prev.cy;
+	const distance = Math.sqrt(dx * dx + dy * dy);
+	const t = Math.min(1, distance / rampDistance);
+	return minFactor + (maxFactor - minFactor) * t;
+}

src/components/video-editor/videoPlayback/focusUtils.ts

@@ -5,28 +5,108 @@ interface StageSize {
 	height: number;
 }
 
+function clamp(value: number, min: number, max: number) {
+	return Math.max(min, Math.min(max, value));
+}
+
+function easeIntoBoundary(normalized: number) {
+	const t = clamp(normalized, 0, 1);
+	return -t * t * t + 2 * t * t;
+}
+
+function softClampToRange(value: number, min: number, max: number, softness: number) {
+	const clamped = clamp(value, min, max);
+
+	if (softness <= 0 || max <= min) {
+		return clamped;
+	}
+
+	if (clamped < min + softness) {
+		const normalized = (clamped - min) / softness;
+		return min + softness * easeIntoBoundary(normalized);
+	}
+
+	if (clamped > max - softness) {
+		const normalized = (max - clamped) / softness;
+		return max - softness * easeIntoBoundary(normalized);
+	}
+
+	return clamped;
+}
+
+function getFocusBounds(depth: ZoomDepth) {
+	const zoomScale = ZOOM_DEPTH_SCALES[depth];
+	return getFocusBoundsForScale(zoomScale);
+}
+
+interface ViewportRatio {
+	widthRatio: number;
+	heightRatio: number;
+}
+
+function getFocusBoundsForScale(zoomScale: number, viewportRatio?: ViewportRatio) {
+	const wr = viewportRatio?.widthRatio ?? 1;
+	const hr = viewportRatio?.heightRatio ?? 1;
+	const marginX = Math.min(0.5, wr / (2 * zoomScale));
+	const marginY = Math.min(0.5, hr / (2 * zoomScale));
+
+	return {
+		minX: marginX,
+		maxX: 1 - marginX,
+		minY: marginY,
+		maxY: 1 - marginY,
+	};
+}
+
 export function clampFocusToStage(
 	focus: ZoomFocus,
 	depth: ZoomDepth,
-	stageSize: StageSize,
+	_stageSize: StageSize,
 ): ZoomFocus {
-	if (!stageSize.width || !stageSize.height) {
-		return clampFocusToDepth(focus, depth);
-	}
-
-	const zoomScale = ZOOM_DEPTH_SCALES[depth];
-
-	const windowWidth = stageSize.width / zoomScale;
-	const windowHeight = stageSize.height / zoomScale;
-
-	const marginX = windowWidth / (2 * stageSize.width);
-	const marginY = windowHeight / (2 * stageSize.height);
-
 	const baseFocus = clampFocusToDepth(focus, depth);
+	const bounds = getFocusBounds(depth);
 
 	return {
-		cx: Math.max(marginX, Math.min(1 - marginX, baseFocus.cx)),
-		cy: Math.max(marginY, Math.min(1 - marginY, baseFocus.cy)),
+		cx: clamp(baseFocus.cx, bounds.minX, bounds.maxX),
+		cy: clamp(baseFocus.cy, bounds.minY, bounds.maxY),
+	};
+}
+
+export function clampFocusToScale(
+	focus: ZoomFocus,
+	zoomScale: number,
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
+	const baseFocus = {
+		cx: clamp(focus.cx, 0, 1),
+		cy: clamp(focus.cy, 0, 1),
+	};
+	const bounds = getFocusBoundsForScale(zoomScale, viewportRatio);
+
+	return {
+		cx: clamp(baseFocus.cx, bounds.minX, bounds.maxX),
+		cy: clamp(baseFocus.cy, bounds.minY, bounds.maxY),
+	};
+}
+
+export function softenFocusToScale(
+	focus: ZoomFocus,
+	zoomScale: number,
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
+	const baseFocus = {
+		cx: clamp(focus.cx, 0, 1),
+		cy: clamp(focus.cy, 0, 1),
+	};
+	const bounds = getFocusBoundsForScale(zoomScale, viewportRatio);
+	const horizontalRange = bounds.maxX - bounds.minX;
+	const verticalRange = bounds.maxY - bounds.minY;
+	const horizontalSoftness = Math.min(0.12, horizontalRange * 0.35);
+	const verticalSoftness = Math.min(0.12, verticalRange * 0.35);
+
+	return {
+		cx: softClampToRange(baseFocus.cx, bounds.minX, bounds.maxX, horizontalSoftness),
+		cy: softClampToRange(baseFocus.cy, bounds.minY, bounds.maxY, verticalSoftness),
 	};
 }
 

src/components/video-editor/videoPlayback/layoutUtils.ts

@@ -1,5 +1,12 @@
 import { Application, Graphics, Sprite } from "pixi.js";
-import type { CropRegion } from "../types";
+import {
+	computeCompositeLayout,
+	type RenderRect,
+	type Size,
+	type StyledRenderRect,
+	type WebcamLayoutPreset,
+} from "@/lib/compositeLayout";
+import type { CropRegion, WebcamMaskShape } from "../types";
 
 interface LayoutParams {
 	container: HTMLDivElement;
@@ -11,6 +18,10 @@ interface LayoutParams {
 	lockedVideoDimensions?: { width: number; height: number } | null;
 	borderRadius?: number;
 	padding?: number;
+	webcamDimensions?: Size | null;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	webcamMaskShape?: WebcamMaskShape;
 }
 
 interface LayoutResult {
@@ -18,7 +29,8 @@ interface LayoutResult {
 	videoSize: { width: number; height: number };
 	baseScale: number;
 	baseOffset: { x: number; y: number };
-	maskRect: { x: number; y: number; width: number; height: number };
+	maskRect: RenderRect;
+	webcamRect: StyledRenderRect | null;
 	cropBounds: { startX: number; endX: number; startY: number; endY: number };
 }
 
@@ -33,6 +45,10 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
 		lockedVideoDimensions,
 		borderRadius = 0,
 		padding = 0,
+		webcamDimensions,
+		webcamLayoutPreset,
+		webcamPosition,
+		webcamMaskShape,
 	} = params;
 
 	const videoWidth = lockedVideoDimensions?.width || videoElement.videoWidth;
@@ -67,15 +83,35 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
 
 	// Calculate scale to fit the cropped area in the viewport
 	// Padding is a percentage (0-100), where 50 matches the original VIEWPORT_SCALE of 0.8
-	const paddingScale = 1.0 - (padding / 100) * 0.4;
+	// Vertical stack ignores padding — it's full-bleed
+	const effectivePadding = webcamLayoutPreset === "vertical-stack" ? 0 : padding;
+	const paddingScale = 1.0 - (effectivePadding / 100) * 0.4;
 	const maxDisplayWidth = width * paddingScale;
 	const maxDisplayHeight = height * paddingScale;
 
-	const scale = Math.min(
-		maxDisplayWidth / croppedVideoWidth,
-		maxDisplayHeight / croppedVideoHeight,
-		1,
-	);
+	const compositeLayout = computeCompositeLayout({
+		canvasSize: { width, height },
+		maxContentSize: { width: maxDisplayWidth, height: maxDisplayHeight },
+		screenSize: { width: croppedVideoWidth, height: croppedVideoHeight },
+		webcamSize: webcamDimensions,
+		layoutPreset: webcamLayoutPreset,
+		webcamPosition,
+		webcamMaskShape,
+	});
+
+	if (!compositeLayout) {
+		return null;
+	}
+
+	const screenRect = compositeLayout.screenRect;
+
+	// Cover mode: scale to fill the rect (may crop), otherwise fit-to-width
+	let scale: number;
+	if (compositeLayout.screenCover) {
+		scale = Math.max(screenRect.width / croppedVideoWidth, screenRect.height / croppedVideoHeight);
+	} else {
+		scale = screenRect.width / croppedVideoWidth;
+	}
 
 	videoSprite.scale.set(scale);
 
@@ -83,31 +119,25 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
 	const fullVideoDisplayWidth = videoWidth * scale;
 	const fullVideoDisplayHeight = videoHeight * scale;
 
-	// Calculate display size of just the cropped region
+	// Position the video so the cropped region is centered within the screenRect
 	const croppedDisplayWidth = croppedVideoWidth * scale;
 	const croppedDisplayHeight = croppedVideoHeight * scale;
-
-	// Center the cropped region in the container
-	const centerOffsetX = (width - croppedDisplayWidth) / 2;
-	const centerOffsetY = (height - croppedDisplayHeight) / 2;
-
-	// Position the full video sprite so that when we apply the mask,
-	// the cropped region appears centered
-	// The crop starts at (crop.x * videoWidth, crop.y * videoHeight) in video coordinates
-	// In display coordinates, that's (crop.x * fullVideoDisplayWidth, crop.y * fullVideoDisplayHeight)
-	// We want that point to be at centerOffsetX, centerOffsetY
-	const spriteX = centerOffsetX - crop.x * fullVideoDisplayWidth;
-	const spriteY = centerOffsetY - crop.y * fullVideoDisplayHeight;
+	const offsetX = screenRect.x + (screenRect.width - croppedDisplayWidth) / 2;
+	const offsetY = screenRect.y + (screenRect.height - croppedDisplayHeight) / 2;
+	const spriteX = offsetX - crop.x * fullVideoDisplayWidth;
+	const spriteY = offsetY - crop.y * fullVideoDisplayHeight;
 
 	videoSprite.position.set(spriteX, spriteY);
 
-	// Create a mask that only shows the cropped region (centered in container)
-	const maskX = centerOffsetX;
-	const maskY = centerOffsetY;
-
-	// Apply border radius
+	// Apply border radius — mask clips the video to the screenRect
 	maskGraphics.clear();
-	maskGraphics.roundRect(maskX, maskY, croppedDisplayWidth, croppedDisplayHeight, borderRadius);
+	maskGraphics.roundRect(
+		screenRect.x,
+		screenRect.y,
+		screenRect.width,
+		screenRect.height,
+		compositeLayout.screenCover ? 0 : borderRadius,
+	);
 	maskGraphics.fill({ color: 0xffffff });
 
 	return {
@@ -115,7 +145,8 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
 		videoSize: { width: croppedVideoWidth, height: croppedVideoHeight },
 		baseScale: scale,
 		baseOffset: { x: spriteX, y: spriteY },
-		maskRect: { x: maskX, y: maskY, width: croppedDisplayWidth, height: croppedDisplayHeight },
+		maskRect: compositeLayout.screenRect,
+		webcamRect: compositeLayout.webcamRect,
 		cropBounds: { startX: cropStartX, endX: cropEndX, startY: cropStartY, endY: cropEndY },
 	};
 }

src/components/video-editor/videoPlayback/mathUtils.ts

@@ -2,7 +2,85 @@ export function clamp01(value: number) {
 	return Math.max(0, Math.min(1, value));
 }
 
+function sampleCubicBezier(a1: number, a2: number, t: number) {
+	const oneMinusT = 1 - t;
+	return 3 * a1 * oneMinusT * oneMinusT * t + 3 * a2 * oneMinusT * t * t + t * t * t;
+}
+
+function sampleCubicBezierDerivative(a1: number, a2: number, t: number) {
+	const oneMinusT = 1 - t;
+	return 3 * a1 * oneMinusT * oneMinusT + 6 * (a2 - a1) * oneMinusT * t + 3 * (1 - a2) * t * t;
+}
+
+export function cubicBezier(x1: number, y1: number, x2: number, y2: number, t: number) {
+	const targetX = clamp01(t);
+	let solvedT = targetX;
+
+	for (let i = 0; i < 8; i += 1) {
+		const currentX = sampleCubicBezier(x1, x2, solvedT) - targetX;
+		const currentDerivative = sampleCubicBezierDerivative(x1, x2, solvedT);
+
+		if (Math.abs(currentX) < 1e-6 || Math.abs(currentDerivative) < 1e-6) {
+			break;
+		}
+
+		solvedT -= currentX / currentDerivative;
+	}
+
+	let lower = 0;
+	let upper = 1;
+	solvedT = clamp01(solvedT);
+
+	for (let i = 0; i < 10; i += 1) {
+		const currentX = sampleCubicBezier(x1, x2, solvedT);
+		if (Math.abs(currentX - targetX) < 1e-6) {
+			break;
+		}
+
+		if (currentX < targetX) {
+			lower = solvedT;
+		} else {
+			upper = solvedT;
+		}
+
+		solvedT = (lower + upper) / 2;
+	}
+
+	return sampleCubicBezier(y1, y2, solvedT);
+}
+
+export function easeOutExpo(t: number) {
+	const clamped = clamp01(t);
+	if (clamped === 1) {
+		return 1;
+	}
+
+	return 1 - Math.pow(2, -7 * clamped);
+}
+
+export function easeOutScreenStudio(t: number) {
+	return cubicBezier(0.16, 1, 0.3, 1, t);
+}
+
 export function smoothStep(t: number) {
 	const clamped = clamp01(t);
 	return clamped * clamped * (3 - 2 * clamped);
 }
+
+/**
+ * Gentle ease-in-out cubic — slow start, smooth middle, gentle landing.
+ * Used for zoom-in transitions.
+ */
+export function easeInOutCubic(t: number) {
+	const x = clamp01(t);
+	return x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+}
+
+/**
+ * Ease-out cubic — starts at speed, then decelerates to a gentle stop.
+ * Used for zoom-out transitions so strength eases smoothly to zero.
+ */
+export function easeOutCubic(t: number) {
+	const x = clamp01(t);
+	return 1 - Math.pow(1 - x, 3);
+}

src/components/video-editor/videoPlayback/overlayUtils.ts

@@ -14,7 +14,7 @@ interface OverlayUpdateParams {
 export function updateOverlayIndicator(params: OverlayUpdateParams) {
 	const { overlayEl, indicatorEl, region, focusOverride, videoSize, baseScale, isPlaying } = params;
 
-	if (!region) {
+	if (!region || region.focusMode === "auto") {
 		indicatorEl.style.display = "none";
 		overlayEl.style.pointerEvents = "none";
 		return;

src/components/video-editor/videoPlayback/zoomRegionUtils.ts

@@ -1,31 +1,287 @@
-import type { ZoomRegion } from "../types";
-import { TRANSITION_WINDOW_MS } from "./constants";
-import { smoothStep } from "./mathUtils";
+import type { CursorTelemetryPoint, ZoomFocus, ZoomRegion } from "../types";
+import { ZOOM_DEPTH_SCALES } from "../types";
+import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS } from "./constants";
+import { interpolateCursorAt } from "./cursorFollowUtils";
+import { clampFocusToScale } from "./focusUtils";
+import { clamp01, cubicBezier, easeOutScreenStudio } from "./mathUtils";
+
+const CHAINED_ZOOM_PAN_GAP_MS = 1500;
+const CONNECTED_ZOOM_PAN_DURATION_MS = 1000;
+const ZOOM_IN_OVERLAP_MS = 500;
+
+type DominantRegionOptions = {
+	connectZooms?: boolean;
+	cursorTelemetry?: CursorTelemetryPoint[];
+	viewportRatio?: ViewportRatio;
+};
+
+type ConnectedRegionPair = {
+	currentRegion: ZoomRegion;
+	nextRegion: ZoomRegion;
+	transitionStart: number;
+	transitionEnd: number;
+};
+
+type ConnectedPanTransition = {
+	progress: number;
+	startFocus: ZoomFocus;
+	endFocus: ZoomFocus;
+	startScale: number;
+	endScale: number;
+};
+
+function lerp(start: number, end: number, amount: number) {
+	return start + (end - start) * amount;
+}
+
+function easeConnectedPan(value: number) {
+	return cubicBezier(0.1, 0.0, 0.2, 1.0, value);
+}
 
 export function computeRegionStrength(region: ZoomRegion, timeMs: number) {
-	const leadInStart = region.startMs - TRANSITION_WINDOW_MS;
+	const zoomInEnd = region.startMs + ZOOM_IN_OVERLAP_MS;
+	const leadInStart = zoomInEnd - ZOOM_IN_TRANSITION_WINDOW_MS;
 	const leadOutEnd = region.endMs + TRANSITION_WINDOW_MS;
 
 	if (timeMs < leadInStart || timeMs > leadOutEnd) {
 		return 0;
 	}
 
-	const fadeIn = smoothStep((timeMs - leadInStart) / TRANSITION_WINDOW_MS);
-	const fadeOut = smoothStep((leadOutEnd - timeMs) / TRANSITION_WINDOW_MS);
-	return Math.min(fadeIn, fadeOut);
+	if (timeMs < zoomInEnd) {
+		const progress = (timeMs - leadInStart) / ZOOM_IN_TRANSITION_WINDOW_MS;
+		return easeOutScreenStudio(progress);
+	}
+
+	if (timeMs <= region.endMs) {
+		return 1;
+	}
+
+	const progress = clamp01((timeMs - region.endMs) / TRANSITION_WINDOW_MS);
+	return 1 - easeOutScreenStudio(progress);
 }
 
-export function findDominantRegion(regions: ZoomRegion[], timeMs: number) {
-	let bestRegion: ZoomRegion | null = null;
-	let bestStrength = 0;
+function getLinearFocus(start: ZoomFocus, end: ZoomFocus, amount: number): ZoomFocus {
+	return {
+		cx: lerp(start.cx, end.cx, amount),
+		cy: lerp(start.cy, end.cy, amount),
+	};
+}
 
-	for (const region of regions) {
-		const strength = computeRegionStrength(region, timeMs);
-		if (strength > bestStrength) {
-			bestStrength = strength;
-			bestRegion = region;
+interface ViewportRatio {
+	widthRatio: number;
+	heightRatio: number;
+}
+
+function getResolvedFocus(
+	region: ZoomRegion,
+	zoomScale: number,
+	timeMs?: number,
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
+	let focus = region.focus;
+
+	if (
+		region.focusMode === "auto" &&
+		cursorTelemetry &&
+		cursorTelemetry.length > 0 &&
+		timeMs !== undefined
+	) {
+		const cursorFocus = interpolateCursorAt(cursorTelemetry, timeMs);
+		if (cursorFocus) {
+			focus = cursorFocus;
 		}
 	}
 
-	return { region: bestRegion, strength: bestStrength };
+	return clampFocusToScale(focus, zoomScale, viewportRatio);
+}
+
+function getConnectedRegionPairs(regions: ZoomRegion[]) {
+	const sortedRegions = [...regions].sort((a, b) => a.startMs - b.startMs);
+	const pairs: ConnectedRegionPair[] = [];
+
+	for (let index = 0; index < sortedRegions.length - 1; index += 1) {
+		const currentRegion = sortedRegions[index];
+		const nextRegion = sortedRegions[index + 1];
+		const gapMs = nextRegion.startMs - currentRegion.endMs;
+
+		if (gapMs > CHAINED_ZOOM_PAN_GAP_MS) {
+			continue;
+		}
+
+		pairs.push({
+			currentRegion,
+			nextRegion,
+			transitionStart: currentRegion.endMs,
+			transitionEnd: currentRegion.endMs + CONNECTED_ZOOM_PAN_DURATION_MS,
+		});
+	}
+
+	return pairs;
+}
+
+function getActiveRegion(
+	regions: ZoomRegion[],
+	timeMs: number,
+	connectedPairs: ConnectedRegionPair[],
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
+	const activeRegions = regions
+		.map((region) => {
+			const outgoingPair = connectedPairs.find((pair) => pair.currentRegion.id === region.id);
+			if (outgoingPair && timeMs > outgoingPair.currentRegion.endMs) {
+				return { region, strength: 0 };
+			}
+
+			const incomingPair = connectedPairs.find((pair) => pair.nextRegion.id === region.id);
+			if (incomingPair && timeMs < incomingPair.transitionEnd) {
+				return { region, strength: 0 };
+			}
+
+			return { region, strength: computeRegionStrength(region, timeMs) };
+		})
+		.filter((entry) => entry.strength > 0)
+		.sort((left, right) => {
+			if (right.strength !== left.strength) {
+				return right.strength - left.strength;
+			}
+
+			return right.region.startMs - left.region.startMs;
+		});
+
+	if (activeRegions.length === 0) {
+		return null;
+	}
+
+	const activeRegion = activeRegions[0].region;
+	const activeScale = ZOOM_DEPTH_SCALES[activeRegion.depth];
+
+	return {
+		region: {
+			...activeRegion,
+			focus: getResolvedFocus(activeRegion, activeScale, timeMs, cursorTelemetry, viewportRatio),
+		},
+		strength: activeRegions[0].strength,
+		blendedScale: null,
+	};
+}
+
+function getConnectedRegionHold(
+	timeMs: number,
+	connectedPairs: ConnectedRegionPair[],
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
+	for (const pair of connectedPairs) {
+		if (timeMs > pair.transitionEnd && timeMs < pair.nextRegion.startMs) {
+			const nextScale = ZOOM_DEPTH_SCALES[pair.nextRegion.depth];
+			return {
+				region: {
+					...pair.nextRegion,
+					focus: getResolvedFocus(
+						pair.nextRegion,
+						nextScale,
+						timeMs,
+						cursorTelemetry,
+						viewportRatio,
+					),
+				},
+				strength: 1,
+				blendedScale: null,
+			};
+		}
+	}
+
+	return null;
+}
+
+function getConnectedRegionTransition(
+	connectedPairs: ConnectedRegionPair[],
+	timeMs: number,
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
+	for (const pair of connectedPairs) {
+		const { currentRegion, nextRegion, transitionStart, transitionEnd } = pair;
+
+		if (timeMs < transitionStart || timeMs > transitionEnd) {
+			continue;
+		}
+
+		const transitionProgress = easeConnectedPan(
+			clamp01((timeMs - transitionStart) / Math.max(1, transitionEnd - transitionStart)),
+		);
+		const currentScale = ZOOM_DEPTH_SCALES[currentRegion.depth];
+		const nextScale = ZOOM_DEPTH_SCALES[nextRegion.depth];
+		const transitionScale = lerp(currentScale, nextScale, transitionProgress);
+		// Both regions share the same timeMs, so interpolate cursor once and reuse.
+		const sharedCursorFocus =
+			cursorTelemetry && cursorTelemetry.length > 0
+				? interpolateCursorAt(cursorTelemetry, timeMs)
+				: null;
+		const currentFocus = clampFocusToScale(
+			currentRegion.focusMode === "auto" && sharedCursorFocus
+				? sharedCursorFocus
+				: currentRegion.focus,
+			currentScale,
+			viewportRatio,
+		);
+		const nextFocus = clampFocusToScale(
+			nextRegion.focusMode === "auto" && sharedCursorFocus ? sharedCursorFocus : nextRegion.focus,
+			nextScale,
+			viewportRatio,
+		);
+		const transitionFocus = getLinearFocus(currentFocus, nextFocus, transitionProgress);
+
+		return {
+			region: {
+				...nextRegion,
+				focus: transitionFocus,
+			},
+			strength: 1,
+			blendedScale: transitionScale,
+			transition: {
+				progress: transitionProgress,
+				startFocus: currentFocus,
+				endFocus: nextFocus,
+				startScale: currentScale,
+				endScale: nextScale,
+			},
+		};
+	}
+
+	return null;
+}
+
+export function findDominantRegion(
+	regions: ZoomRegion[],
+	timeMs: number,
+	options: DominantRegionOptions = {},
+): {
+	region: ZoomRegion | null;
+	strength: number;
+	blendedScale: number | null;
+	transition: ConnectedPanTransition | null;
+} {
+	const connectedPairs = options.connectZooms ? getConnectedRegionPairs(regions) : [];
+	const telemetry = options.cursorTelemetry;
+	const vr = options.viewportRatio;
+
+	if (options.connectZooms) {
+		const connectedTransition = getConnectedRegionTransition(connectedPairs, timeMs, telemetry, vr);
+		if (connectedTransition) {
+			return connectedTransition;
+		}
+
+		const connectedHold = getConnectedRegionHold(timeMs, connectedPairs, telemetry, vr);
+		if (connectedHold) {
+			return { ...connectedHold, transition: null };
+		}
+	}
+
+	const activeRegion = getActiveRegion(regions, timeMs, connectedPairs, telemetry, vr);
+	return activeRegion
+		? { ...activeRegion, transition: null }
+		: { region: null, strength: 0, blendedScale: null, transition: null };
 }

src/components/video-editor/videoPlayback/zoomTransform.ts

@@ -1,61 +1,249 @@
 import { BlurFilter, Container } from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
+
+const PEAK_VELOCITY_PPS = 1400;
+const MAX_BLUR_PX = 14;
+const VELOCITY_THRESHOLD_PPS = 12;
+const MAX_AMOUNT_BOOST = 2.2;
+
+function getMotionBlurAmountResponse(motionBlurAmount: number) {
+	const clampedAmount = Math.min(1, Math.max(0, motionBlurAmount));
+	// Keep the low end usable while giving the top of the slider substantially more headroom.
+	return clampedAmount * (1 + (MAX_AMOUNT_BOOST - 1) * clampedAmount);
+}
+
+export interface MotionBlurState {
+	lastFrameTimeMs: number;
+	prevCamX: number;
+	prevCamY: number;
+	prevCamScale: number;
+	initialized: boolean;
+}
+
+export function createMotionBlurState(): MotionBlurState {
+	return {
+		lastFrameTimeMs: 0,
+		prevCamX: 0,
+		prevCamY: 0,
+		prevCamScale: 1,
+		initialized: false,
+	};
+}
 
 interface TransformParams {
 	cameraContainer: Container;
 	blurFilter: BlurFilter | null;
+	motionBlurFilter?: MotionBlurFilter | null;
 	stageSize: { width: number; height: number };
 	baseMask: { x: number; y: number; width: number; height: number };
 	zoomScale: number;
+	zoomProgress?: number;
 	focusX: number;
 	focusY: number;
 	motionIntensity: number;
+	motionVector?: { x: number; y: number };
 	isPlaying: boolean;
-	motionBlurEnabled?: boolean;
+	motionBlurAmount?: number;
+	transformOverride?: AppliedTransform;
+	motionBlurState?: MotionBlurState;
+	frameTimeMs?: number;
 }
 
-export function applyZoomTransform({
-	cameraContainer,
-	blurFilter,
+interface AppliedTransform {
+	scale: number;
+	x: number;
+	y: number;
+}
+
+interface FocusFromTransformGeometry {
+	stageSize: { width: number; height: number };
+	baseMask: { x: number; y: number; width: number; height: number };
+	zoomScale: number;
+	x: number;
+	y: number;
+}
+
+interface ZoomTransformGeometry {
+	stageSize: { width: number; height: number };
+	baseMask: { x: number; y: number; width: number; height: number };
+	zoomScale: number;
+	zoomProgress?: number;
+	focusX: number;
+	focusY: number;
+}
+
+export function computeZoomTransform({
 	stageSize,
 	baseMask,
 	zoomScale,
+	zoomProgress = 1,
 	focusX,
 	focusY,
-	motionIntensity,
-	isPlaying,
-	motionBlurEnabled = false,
-}: TransformParams) {
+}: ZoomTransformGeometry): AppliedTransform {
 	if (
 		stageSize.width <= 0 ||
 		stageSize.height <= 0 ||
 		baseMask.width <= 0 ||
 		baseMask.height <= 0
 	) {
-		return;
+		return { scale: 1, x: 0, y: 0 };
 	}
 
-	// The focus point in stage coordinates (where the user clicked/selected)
-	const focusStagePxX = focusX * stageSize.width;
-	const focusStagePxY = focusY * stageSize.height;
-
-	// Stage center (where we want the focus to end up after zoom)
+	const progress = Math.min(1, Math.max(0, zoomProgress));
+	const focusStagePxX = baseMask.x + focusX * baseMask.width;
+	const focusStagePxY = baseMask.y + focusY * baseMask.height;
 	const stageCenterX = stageSize.width / 2;
 	const stageCenterY = stageSize.height / 2;
+	const scale = 1 + (zoomScale - 1) * progress;
+	const finalX = stageCenterX - focusStagePxX * zoomScale;
+	const finalY = stageCenterY - focusStagePxY * zoomScale;
 
-	// Apply zoom scale to camera container
-	cameraContainer.scale.set(zoomScale);
+	return {
+		scale,
+		x: finalX * progress,
+		y: finalY * progress,
+	};
+}
 
-	// Calculate camera position to keep focus point centered
-	// After scaling, the focus point moves to (focusX * zoomScale, focusY * zoomScale)
-	// We want it at stage center, so offset = center - (focus * scale)
-	const cameraX = stageCenterX - focusStagePxX * zoomScale;
-	const cameraY = stageCenterY - focusStagePxY * zoomScale;
+export function computeFocusFromTransform({
+	stageSize,
+	baseMask,
+	zoomScale,
+	x,
+	y,
+}: FocusFromTransformGeometry) {
+	if (
+		stageSize.width <= 0 ||
+		stageSize.height <= 0 ||
+		baseMask.width <= 0 ||
+		baseMask.height <= 0 ||
+		zoomScale <= 0
+	) {
+		return { cx: 0.5, cy: 0.5 };
+	}
+
+	const stageCenterX = stageSize.width / 2;
+	const stageCenterY = stageSize.height / 2;
+	const focusStagePxX = (stageCenterX - x) / zoomScale;
+	const focusStagePxY = (stageCenterY - y) / zoomScale;
+
+	return {
+		cx: (focusStagePxX - baseMask.x) / baseMask.width,
+		cy: (focusStagePxY - baseMask.y) / baseMask.height,
+	};
+}
+
+export function applyZoomTransform({
+	cameraContainer,
+	blurFilter,
+	motionBlurFilter,
+	stageSize,
+	baseMask,
+	zoomScale,
+	zoomProgress = 1,
+	focusX,
+	focusY,
+	motionIntensity: _motionIntensity,
+	motionVector: _motionVector,
+	isPlaying,
+	motionBlurAmount = 0,
+	transformOverride,
+	motionBlurState,
+	frameTimeMs,
+}: TransformParams): AppliedTransform {
+	if (
+		stageSize.width <= 0 ||
+		stageSize.height <= 0 ||
+		baseMask.width <= 0 ||
+		baseMask.height <= 0
+	) {
+		return { scale: 1, x: 0, y: 0 };
+	}
+
+	const transform =
+		transformOverride ??
+		computeZoomTransform({
+			stageSize,
+			baseMask,
+			zoomScale,
+			zoomProgress,
+			focusX,
+			focusY,
+		});
+
+	// Apply position & scale to camera container
+	cameraContainer.scale.set(transform.scale);
+	cameraContainer.position.set(transform.x, transform.y);
 
-	cameraContainer.position.set(cameraX, cameraY);
+	if (motionBlurState && motionBlurFilter && motionBlurAmount > 0 && isPlaying) {
+		const now = frameTimeMs ?? performance.now();
 
-	if (blurFilter) {
-		const shouldBlur = motionBlurEnabled && isPlaying && motionIntensity > 0.0005;
-		const motionBlur = shouldBlur ? Math.min(6, motionIntensity * 120) : 0;
-		blurFilter.blur = motionBlur;
+		if (!motionBlurState.initialized) {
+			motionBlurState.prevCamX = transform.x;
+			motionBlurState.prevCamY = transform.y;
+			motionBlurState.prevCamScale = transform.scale;
+			motionBlurState.lastFrameTimeMs = now;
+			motionBlurState.initialized = true;
+			motionBlurFilter.velocity = { x: 0, y: 0 };
+			motionBlurFilter.kernelSize = 5;
+			motionBlurFilter.offset = 0;
+			if (blurFilter) blurFilter.blur = 0;
+		} else {
+			const dtMs = Math.min(80, Math.max(1, now - motionBlurState.lastFrameTimeMs));
+			const dtSeconds = dtMs / 1000;
+			motionBlurState.lastFrameTimeMs = now;
+			const amountResponse = getMotionBlurAmountResponse(motionBlurAmount);
+
+			// Camera displacement this frame (stage-px)
+			const dx = transform.x - motionBlurState.prevCamX;
+			const dy = transform.y - motionBlurState.prevCamY;
+			const dScale = transform.scale - motionBlurState.prevCamScale;
+
+			motionBlurState.prevCamX = transform.x;
+			motionBlurState.prevCamY = transform.y;
+			motionBlurState.prevCamScale = transform.scale;
+
+			// Velocity in px/s (translation + scale-change contribution)
+			const velocityX = dx / dtSeconds;
+			const velocityY = dy / dtSeconds;
+			const scaleVelocity =
+				Math.abs(dScale / dtSeconds) * Math.max(stageSize.width, stageSize.height) * 0.5;
+			const speed = Math.sqrt(velocityX * velocityX + velocityY * velocityY) + scaleVelocity;
+
+			const normalised = Math.min(1, speed / PEAK_VELOCITY_PPS);
+			const targetBlur =
+				speed < VELOCITY_THRESHOLD_PPS ? 0 : normalised * normalised * MAX_BLUR_PX * amountResponse;
+
+			const dirMag = Math.sqrt(velocityX * velocityX + velocityY * velocityY) || 1;
+			const velocityScale = targetBlur * 2.4;
+			motionBlurFilter.velocity =
+				targetBlur > 0
+					? { x: (velocityX / dirMag) * velocityScale, y: (velocityY / dirMag) * velocityScale }
+					: { x: 0, y: 0 };
+			motionBlurFilter.kernelSize = targetBlur > 8 ? 15 : targetBlur > 4 ? 11 : 7;
+			motionBlurFilter.offset = targetBlur > 0.5 ? -0.2 : 0;
+
+			if (blurFilter) {
+				blurFilter.blur = 0;
+			}
+		}
+	} else {
+		if (motionBlurFilter) {
+			motionBlurFilter.velocity = { x: 0, y: 0 };
+			motionBlurFilter.kernelSize = 5;
+			motionBlurFilter.offset = 0;
+		}
+		if (blurFilter) {
+			blurFilter.blur = 0;
+		}
+		if (motionBlurState) {
+			motionBlurState.initialized = false;
+		}
 	}
+
+	return {
+		scale: transform.scale,
+		x: transform.x,
+		y: transform.y,
+	};
 }

src/contexts/I18nContext.tsx

@@ -0,0 +1,90 @@
+import {
+	createContext,
+	type ReactNode,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useState,
+} from "react";
+import {
+	DEFAULT_LOCALE,
+	type I18nNamespace,
+	LOCALE_STORAGE_KEY,
+	type Locale,
+	SUPPORTED_LOCALES,
+} from "@/i18n/config";
+import { translate } from "@/i18n/loader";
+
+type TranslateVars = Record<string, string | number>;
+
+interface I18nContextValue {
+	locale: Locale;
+	setLocale: (locale: Locale) => void;
+	t: (qualifiedKey: string, vars?: TranslateVars) => string;
+}
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+export function useI18n(): I18nContextValue {
+	const ctx = useContext(I18nContext);
+	if (!ctx) throw new Error("useI18n must be used within <I18nProvider>");
+	return ctx;
+}
+
+export function useScopedT(namespace: I18nNamespace) {
+	const { locale } = useI18n();
+	return useCallback(
+		(key: string, vars?: TranslateVars): string => translate(locale, namespace, key, vars),
+		[locale, namespace],
+	);
+}
+
+function isSupportedLocale(value: string): value is Locale {
+	return (SUPPORTED_LOCALES as readonly string[]).includes(value);
+}
+
+function getInitialLocale(): Locale {
+	try {
+		const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
+		if (stored && isSupportedLocale(stored)) return stored;
+	} catch {
+		// localStorage may be unavailable
+	}
+	return DEFAULT_LOCALE;
+}
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+	const [locale, setLocaleState] = useState<Locale>(getInitialLocale);
+
+	const setLocale = useCallback((newLocale: Locale) => {
+		setLocaleState(newLocale);
+		try {
+			localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
+		} catch {
+			// localStorage may be unavailable
+		}
+		document.documentElement.lang = newLocale;
+		// Notify Electron main process
+		window.electronAPI?.setLocale?.(newLocale);
+	}, []);
+
+	useEffect(() => {
+		document.documentElement.lang = locale;
+	}, [locale]);
+
+	const t = useCallback(
+		(qualifiedKey: string, vars?: TranslateVars): string => {
+			const dotIndex = qualifiedKey.indexOf(".");
+			if (dotIndex === -1) return qualifiedKey;
+			const namespace = qualifiedKey.slice(0, dotIndex) as I18nNamespace;
+			const key = qualifiedKey.slice(dotIndex + 1);
+			return translate(locale, namespace, key, vars);
+		},
+		[locale],
+	);
+
+	const value = useMemo<I18nContextValue>(() => ({ locale, setLocale, t }), [locale, setLocale, t]);
+
+	return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}

src/contexts/ShortcutsContext.tsx

@@ -36,7 +36,9 @@ export function ShortcutsProvider({ children }: { children: ReactNode }) {
 	useEffect(() => {
 		getIsMac()
 			.then(setIsMac)
-			.catch(() => {});
+			.catch(() => {
+				// Keep default non-mac fallback if detection fails.
+			});
 
 		window.electronAPI
 			.getShortcuts?.()
@@ -45,7 +47,9 @@ export function ShortcutsProvider({ children }: { children: ReactNode }) {
 					setShortcuts(mergeWithDefaults(saved as Partial<ShortcutsConfig>));
 				}
 			})
-			.catch(() => {});
+			.catch(() => {
+				// Keep default shortcuts if persisted settings can't be loaded.
+			});
 	}, []);
 
 	const persistShortcuts = useCallback(

src/hooks/useAudioLevelMeter.ts

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 
 export interface AudioLevelMeterOptions {
 	enabled: boolean;
@@ -13,6 +13,22 @@ export function useAudioLevelMeter(options: AudioLevelMeterOptions) {
 	const streamRef = useRef<MediaStream | null>(null);
 	const animationFrameRef = useRef<number | null>(null);
 
+	const cleanup = useCallback(() => {
+		if (animationFrameRef.current) {
+			cancelAnimationFrame(animationFrameRef.current);
+			animationFrameRef.current = null;
+		}
+		if (streamRef.current) {
+			streamRef.current.getTracks().forEach((track) => track.stop());
+			streamRef.current = null;
+		}
+		if (audioContextRef.current) {
+			audioContextRef.current.close();
+			audioContextRef.current = null;
+		}
+		analyserRef.current = null;
+	}, []);
+
 	useEffect(() => {
 		if (!options.enabled) {
 			cleanup();
@@ -39,6 +55,9 @@ export function useAudioLevelMeter(options: AudioLevelMeterOptions) {
 				streamRef.current = stream;
 
 				const audioContext = new AudioContext();
+				if (audioContext.state === "suspended") {
+					await audioContext.resume();
+				}
 				audioContextRef.current = audioContext;
 
 				const analyser = audioContext.createAnalyser();
@@ -82,23 +101,7 @@ export function useAudioLevelMeter(options: AudioLevelMeterOptions) {
 			mounted = false;
 			cleanup();
 		};
-	}, [options.enabled, options.deviceId, options.smoothingFactor]);
-
-	const cleanup = () => {
-		if (animationFrameRef.current) {
-			cancelAnimationFrame(animationFrameRef.current);
-			animationFrameRef.current = null;
-		}
-		if (streamRef.current) {
-			streamRef.current.getTracks().forEach((track) => track.stop());
-			streamRef.current = null;
-		}
-		if (audioContextRef.current) {
-			audioContextRef.current.close();
-			audioContextRef.current = null;
-		}
-		analyserRef.current = null;
-	};
+	}, [options.enabled, options.deviceId, options.smoothingFactor, cleanup]);
 
 	return { level };
 }

src/hooks/useCameraDevices.test.ts

@@ -0,0 +1,113 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { useCameraDevices } from "./useCameraDevices";
+
+// Mock navigator.mediaDevices
+const mockDevices = [
+	{ kind: "videoinput", deviceId: "cam1", label: "Camera 1", groupId: "group1" },
+	{ kind: "videoinput", deviceId: "cam2", label: "Camera 2", groupId: "group1" },
+	{ kind: "audioinput", deviceId: "mic1", label: "Mic 1", groupId: "group2" },
+];
+
+const mockGetUserMedia = vi.fn().mockResolvedValue({
+	getTracks: () => [{ stop: vi.fn() }],
+});
+
+const mockEnumerateDevices = vi.fn().mockResolvedValue(mockDevices);
+
+Object.defineProperty(global.navigator, "mediaDevices", {
+	value: {
+		enumerateDevices: mockEnumerateDevices,
+		getUserMedia: mockGetUserMedia,
+		addEventListener: vi.fn(),
+		removeEventListener: vi.fn(),
+	},
+	configurable: true,
+});
+
+describe("useCameraDevices", () => {
+	beforeEach(() => {
+		vi.clearAllMocks();
+		mockEnumerateDevices.mockResolvedValue(mockDevices);
+		mockGetUserMedia.mockResolvedValue({
+			getTracks: () => [{ stop: vi.fn() }],
+		});
+	});
+
+	afterEach(() => {
+		vi.resetAllMocks();
+	});
+
+	it("should list video input devices", async () => {
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.devices).toHaveLength(2);
+		});
+
+		expect(result.current.devices[0].label).toBe("Camera 1");
+		expect(result.current.devices[1].deviceId).toBe("cam2");
+	});
+
+	it("should set first device as default", async () => {
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.selectedDeviceId).toBe("cam1");
+		});
+	});
+
+	it("should use device ID as fallback label when label is missing", async () => {
+		mockEnumerateDevices.mockResolvedValueOnce([
+			{ kind: "videoinput", deviceId: "cam1abc123456", label: "", groupId: "group1" },
+		]);
+
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.devices[0]?.label).toBe("Camera cam1abc1");
+		});
+
+		expect(mockGetUserMedia).not.toHaveBeenCalled();
+	});
+
+	it("should set error state when enumeration fails", async () => {
+		mockEnumerateDevices.mockRejectedValueOnce(new Error("Permission denied"));
+
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.error).toBe("Permission denied");
+		});
+
+		expect(result.current.devices).toHaveLength(0);
+		expect(result.current.isLoading).toBe(false);
+	});
+
+	it("should fall back to first available device when selected device is unplugged", async () => {
+		const { result } = renderHook(() => useCameraDevices(true));
+
+		await waitFor(() => {
+			expect(result.current.selectedDeviceId).toBe("cam1");
+		});
+
+		// Simulate cam1 being unplugged — only cam2 remains
+		const cam2Only = [
+			{ kind: "videoinput", deviceId: "cam2", label: "Camera 2", groupId: "group1" },
+		];
+		mockEnumerateDevices.mockResolvedValueOnce(cam2Only);
+
+		// Trigger devicechange event via the registered handler
+		const devicechangeHandler = (
+			navigator.mediaDevices.addEventListener as ReturnType<typeof vi.fn>
+		).mock.calls[0]?.[1] as (() => void) | undefined;
+
+		await act(async () => {
+			devicechangeHandler?.();
+		});
+
+		await waitFor(() => {
+			expect(result.current.selectedDeviceId).toBe("cam2");
+		});
+	});
+});

src/hooks/useCameraDevices.ts

@@ -0,0 +1,64 @@
+import { useEffect, useRef, useState } from "react";
+
+export interface CameraDevice {
+	deviceId: string;
+	label: string;
+	groupId: string;
+}
+
+export function useCameraDevices(enabled: boolean = false) {
+	const [devices, setDevices] = useState<CameraDevice[]>([]);
+	const [selectedDeviceId, setSelectedDeviceId] = useState<string>("");
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const selectedDeviceIdRef = useRef(selectedDeviceId);
+	selectedDeviceIdRef.current = selectedDeviceId;
+
+	useEffect(() => {
+		if (!enabled) return;
+		let mounted = true;
+
+		const loadDevices = async () => {
+			try {
+				setIsLoading(true);
+				setError(null);
+
+				// Enumerate without requesting a second stream — the recorder handles
+				// the real acquisition; unlabeled devices fall back to their device ID.
+				const allDevices = await navigator.mediaDevices.enumerateDevices();
+				const videoInputs = allDevices
+					.filter((device) => device.kind === "videoinput")
+					.map((device) => ({
+						deviceId: device.deviceId,
+						label: device.label || `Camera ${device.deviceId.slice(0, 8)}`,
+						groupId: device.groupId,
+					}));
+
+				if (mounted) {
+					setDevices(videoInputs);
+					const currentId = selectedDeviceIdRef.current;
+					const stillAvailable = videoInputs.some((d) => d.deviceId === currentId);
+					if (!currentId || !stillAvailable) {
+						setSelectedDeviceId(videoInputs[0]?.deviceId ?? "");
+					}
+					setIsLoading(false);
+				}
+			} catch (err) {
+				if (mounted) {
+					setError(err instanceof Error ? err.message : "Failed to load cameras");
+					setIsLoading(false);
+				}
+			}
+		};
+
+		loadDevices();
+
+		navigator.mediaDevices.addEventListener("devicechange", loadDevices);
+		return () => {
+			mounted = false;
+			navigator.mediaDevices.removeEventListener("devicechange", loadDevices);
+		};
+	}, [enabled]);
+
+	return { devices, selectedDeviceId, setSelectedDeviceId, isLoading, error };
+}

src/hooks/useEditorHistory.ts

@@ -0,0 +1,138 @@
+import { useCallback, useRef, useState } from "react";
+import type {
+	AnnotationRegion,
+	CropRegion,
+	SpeedRegion,
+	TrimRegion,
+	WebcamLayoutPreset,
+	WebcamMaskShape,
+	WebcamPosition,
+	ZoomRegion,
+} from "@/components/video-editor/types";
+import {
+	DEFAULT_CROP_REGION,
+	DEFAULT_WEBCAM_LAYOUT_PRESET,
+	DEFAULT_WEBCAM_MASK_SHAPE,
+	DEFAULT_WEBCAM_POSITION,
+} from "@/components/video-editor/types";
+import type { AspectRatio } from "@/utils/aspectRatioUtils";
+
+// Undoable state — selection IDs are intentionally excluded (undoing a
+// selection change would feel surprising to the user).
+export interface EditorState {
+	zoomRegions: ZoomRegion[];
+	trimRegions: TrimRegion[];
+	speedRegions: SpeedRegion[];
+	annotationRegions: AnnotationRegion[];
+	cropRegion: CropRegion;
+	wallpaper: string;
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount: number;
+	borderRadius: number;
+	padding: number;
+	aspectRatio: AspectRatio;
+	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape: WebcamMaskShape;
+	webcamPosition: WebcamPosition | null;
+}
+
+export const INITIAL_EDITOR_STATE: EditorState = {
+	zoomRegions: [],
+	trimRegions: [],
+	speedRegions: [],
+	annotationRegions: [],
+	cropRegion: DEFAULT_CROP_REGION,
+	wallpaper: "/wallpapers/wallpaper1.jpg",
+	shadowIntensity: 0,
+	showBlur: false,
+	motionBlurAmount: 0,
+	borderRadius: 0,
+	padding: 50,
+	aspectRatio: "16:9",
+	webcamLayoutPreset: DEFAULT_WEBCAM_LAYOUT_PRESET,
+	webcamMaskShape: DEFAULT_WEBCAM_MASK_SHAPE,
+	webcamPosition: DEFAULT_WEBCAM_POSITION,
+};
+
+type StateUpdate = Partial<EditorState> | ((prev: EditorState) => Partial<EditorState>);
+
+interface History {
+	past: EditorState[];
+	present: EditorState;
+	future: EditorState[];
+}
+
+const MAX_HISTORY = 80;
+
+function resolve(present: EditorState, update: StateUpdate): EditorState {
+	const partial = typeof update === "function" ? update(present) : update;
+	return { ...present, ...partial };
+}
+
+function withCheckpoint(history: History, newPresent: EditorState): History {
+	return {
+		past: [...history.past.slice(-(MAX_HISTORY - 1)), history.present],
+		present: newPresent,
+		future: [],
+	};
+}
+
+export function useEditorHistory(initial: EditorState = INITIAL_EDITOR_STATE) {
+	const [history, setHistory] = useState<History>({ past: [], present: initial, future: [] });
+
+	// Tracks whether a live-update series (e.g. slider drag) is in progress.
+	// The first updateState call saves the pre-interaction state as a checkpoint.
+	const dirtyRef = useRef(false);
+
+	const pushState = useCallback((update: StateUpdate) => {
+		setHistory((prev) => withCheckpoint(prev, resolve(prev.present, update)));
+		dirtyRef.current = false;
+	}, []);
+
+	const updateState = useCallback((update: StateUpdate) => {
+		const isFirst = !dirtyRef.current;
+		dirtyRef.current = true;
+		setHistory((prev) => {
+			const next = resolve(prev.present, update);
+			return isFirst ? withCheckpoint(prev, next) : { ...prev, present: next };
+		});
+	}, []);
+
+	const commitState = useCallback(() => {
+		dirtyRef.current = false;
+	}, []);
+
+	const undo = useCallback(() => {
+		setHistory((prev) => {
+			if (!prev.past.length) return prev;
+			const previous = prev.past[prev.past.length - 1];
+			return {
+				past: prev.past.slice(0, -1),
+				present: previous,
+				future: [prev.present, ...prev.future],
+			};
+		});
+		dirtyRef.current = false;
+	}, []);
+
+	const redo = useCallback(() => {
+		setHistory((prev) => {
+			if (!prev.future.length) return prev;
+			const [next, ...remainingFuture] = prev.future;
+			return { past: [...prev.past, prev.present], present: next, future: remainingFuture };
+		});
+		dirtyRef.current = false;
+	}, []);
+
+	return {
+		state: history.present,
+		pushState,
+		updateState,
+		commitState,
+		undo,
+		redo,
+		canUndo: history.past.length > 0,
+		canRedo: history.future.length > 0,
+	};
+}

src/hooks/useMicrophoneDevices.ts

@@ -69,7 +69,7 @@ export function useMicrophoneDevices(enabled: boolean = true) {
 			mounted = false;
 			navigator.mediaDevices.removeEventListener("devicechange", handleDeviceChange);
 		};
-	}, [enabled]);
+	}, [enabled, selectedDeviceId]);
 
 	return {
 		devices,

src/hooks/useScreenRecorder.ts

@@ -1,8 +1,9 @@
 import { fixWebmDuration } from "@fix-webm-duration/fix";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
+import { useScopedT } from "@/contexts/I18nContext";
+import { requestCameraAccess } from "@/lib/requestCameraAccess";
 
-// Target visually lossless 4K @ 60fps; fall back gracefully when hardware cannot keep up
 const TARGET_FRAME_RATE = 60;
 const MIN_FRAME_RATE = 30;
 const TARGET_WIDTH = 3840;
@@ -12,18 +13,15 @@ const QHD_WIDTH = 2560;
 const QHD_HEIGHT = 1440;
 const QHD_PIXELS = QHD_WIDTH * QHD_HEIGHT;
 
-// Bitrates (bits per second) per resolution tier
 const BITRATE_4K = 45_000_000;
 const BITRATE_QHD = 28_000_000;
 const BITRATE_BASE = 18_000_000;
 const HIGH_FRAME_RATE_THRESHOLD = 60;
 const HIGH_FRAME_RATE_BOOST = 1.7;
 
-// Fallback track settings when the driver reports nothing
 const DEFAULT_WIDTH = 1920;
 const DEFAULT_HEIGHT = 1080;
 
-// Codec alignment: VP9/AV1 require dimensions divisible by 2
 const CODEC_ALIGNMENT = 2;
 
 const RECORDER_TIMESLICE_MS = 1000;
@@ -31,36 +29,93 @@ const BITS_PER_MEGABIT = 1_000_000;
 const CHROME_MEDIA_SOURCE = "desktop";
 const RECORDING_FILE_PREFIX = "recording-";
 const VIDEO_FILE_EXTENSION = ".webm";
+const WEBCAM_FILE_SUFFIX = "-webcam";
 
 const AUDIO_BITRATE_VOICE = 128_000;
 const AUDIO_BITRATE_SYSTEM = 192_000;
 
-// Boost mic slightly when mixing with system audio so voice isn't drowned out
 const MIC_GAIN_BOOST = 1.4;
+const WEBCAM_TARGET_WIDTH = 1280;
+const WEBCAM_TARGET_HEIGHT = 720;
+const WEBCAM_TARGET_FRAME_RATE = 30;
 
 type UseScreenRecorderReturn = {
 	recording: boolean;
+	paused: boolean;
+	elapsedSeconds: number;
 	toggleRecording: () => void;
+	togglePaused: () => void;
+	restartRecording: () => void;
+	cancelRecording: () => void;
 	microphoneEnabled: boolean;
 	setMicrophoneEnabled: (enabled: boolean) => void;
 	microphoneDeviceId: string | undefined;
 	setMicrophoneDeviceId: (deviceId: string | undefined) => void;
+	webcamDeviceId: string | undefined;
+	setWebcamDeviceId: (deviceId: string | undefined) => void;
 	systemAudioEnabled: boolean;
 	setSystemAudioEnabled: (enabled: boolean) => void;
+	webcamEnabled: boolean;
+	setWebcamEnabled: (enabled: boolean) => Promise<boolean>;
 };
 
+type RecorderHandle = {
+	recorder: MediaRecorder;
+	recordedBlobPromise: Promise<Blob>;
+};
+
+function createRecorderHandle(stream: MediaStream, options: MediaRecorderOptions): RecorderHandle {
+	const recorder = new MediaRecorder(stream, options);
+	const chunks: Blob[] = [];
+	const mimeType = options.mimeType || "video/webm";
+	const recordedBlobPromise = new Promise<Blob>((resolve, reject) => {
+		recorder.ondataavailable = (event: BlobEvent) => {
+			if (event.data && event.data.size > 0) {
+				chunks.push(event.data);
+			}
+		};
+		recorder.onerror = () => {
+			reject(new Error("Recording failed"));
+		};
+		recorder.onstop = () => {
+			resolve(new Blob(chunks, { type: mimeType }));
+		};
+	});
+
+	recorder.start(RECORDER_TIMESLICE_MS);
+	return { recorder, recordedBlobPromise };
+}
+
 export function useScreenRecorder(): UseScreenRecorderReturn {
+	const t = useScopedT("editor");
 	const [recording, setRecording] = useState(false);
+	const [paused, setPaused] = useState(false);
+	const [elapsedSeconds, setElapsedSeconds] = useState(0);
 	const [microphoneEnabled, setMicrophoneEnabled] = useState(false);
 	const [microphoneDeviceId, setMicrophoneDeviceId] = useState<string | undefined>(undefined);
+	const [webcamDeviceId, setWebcamDeviceId] = useState<string | undefined>(undefined);
 	const [systemAudioEnabled, setSystemAudioEnabled] = useState(false);
-	const mediaRecorder = useRef<MediaRecorder | null>(null);
+	const [webcamEnabled, setWebcamEnabledState] = useState(false);
+	const screenRecorder = useRef<RecorderHandle | null>(null);
+	const webcamRecorder = useRef<RecorderHandle | null>(null);
 	const stream = useRef<MediaStream | null>(null);
 	const screenStream = useRef<MediaStream | null>(null);
 	const microphoneStream = useRef<MediaStream | null>(null);
+	const webcamStream = useRef<MediaStream | null>(null);
 	const mixingContext = useRef<AudioContext | null>(null);
-	const chunks = useRef<Blob[]>([]);
-	const startTime = useRef<number>(0);
+	const recordingId = useRef<number>(0);
+	const accumulatedDurationMs = useRef(0);
+	const segmentStartedAt = useRef<number | null>(null);
+	const finalizingRecordingId = useRef<number | null>(null);
+	const allowAutoFinalize = useRef(false);
+	const discardRecordingId = useRef<number | null>(null);
+	const restarting = useRef(false);
+
+	const getRecordingDurationMs = useCallback(() => {
+		const segmentDuration =
+			segmentStartedAt.current === null ? 0 : Date.now() - segmentStartedAt.current;
+		return accumulatedDurationMs.current + segmentDuration;
+	}, []);
 
 	const selectMimeType = () => {
 		const preferred = [
@@ -90,27 +145,182 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		return Math.round(BITRATE_BASE * highFrameRateBoost);
 	};
 
-	const stopRecording = useRef(() => {
-		if (mediaRecorder.current?.state === "recording") {
-			if (stream.current) {
-				stream.current.getTracks().forEach((track) => track.stop());
-			}
-			if (screenStream.current) {
-				screenStream.current.getTracks().forEach((track) => track.stop());
-				screenStream.current = null;
-			}
-			if (microphoneStream.current) {
-				microphoneStream.current.getTracks().forEach((track) => track.stop());
-				microphoneStream.current = null;
-			}
-			if (mixingContext.current) {
-				mixingContext.current.close().catch(() => {});
-				mixingContext.current = null;
-			}
-			mediaRecorder.current.stop();
-			setRecording(false);
+	const teardownMedia = useCallback(() => {
+		if (stream.current) {
+			stream.current.getTracks().forEach((track) => track.stop());
+			stream.current = null;
+		}
+		if (screenStream.current) {
+			screenStream.current.getTracks().forEach((track) => track.stop());
+			screenStream.current = null;
+		}
+		if (microphoneStream.current) {
+			microphoneStream.current.getTracks().forEach((track) => track.stop());
+			microphoneStream.current = null;
+		}
+		if (webcamStream.current) {
+			webcamStream.current.getTracks().forEach((track) => track.stop());
+			webcamStream.current = null;
+		}
+		if (mixingContext.current) {
+			mixingContext.current.close().catch(() => {
+				// Ignore close errors during recorder teardown.
+			});
+			mixingContext.current = null;
+		}
+	}, []);
 
+	const setWebcamEnabled = useCallback(
+		async (enabled: boolean) => {
+			if (!enabled) {
+				setWebcamEnabledState(false);
+				return true;
+			}
+
+			const accessResult = await requestCameraAccess();
+			if (!accessResult.success) {
+				toast.error(t("recording.failedCameraAccess"));
+				return false;
+			}
+
+			if (!accessResult.granted) {
+				toast.error(t("recording.cameraBlocked"));
+				return false;
+			}
+
+			setWebcamEnabledState(true);
+			return true;
+		},
+		[t],
+	);
+
+	const finalizeRecording = useCallback(
+		(
+			activeScreenRecorder: RecorderHandle,
+			activeWebcamRecorder: RecorderHandle | null,
+			duration: number,
+			activeRecordingId: number,
+		) => {
+			if (finalizingRecordingId.current === activeRecordingId) {
+				return;
+			}
+			finalizingRecordingId.current = activeRecordingId;
+
+			if (screenRecorder.current === activeScreenRecorder) {
+				screenRecorder.current = null;
+			}
+			if (activeWebcamRecorder && webcamRecorder.current === activeWebcamRecorder) {
+				webcamRecorder.current = null;
+			}
+
+			teardownMedia();
+			setRecording(false);
+			setPaused(false);
+			setElapsedSeconds(0);
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = null;
 			window.electronAPI?.setRecordingState(false);
+
+			void (async () => {
+				try {
+					const screenBlob = await activeScreenRecorder.recordedBlobPromise;
+					if (discardRecordingId.current === activeRecordingId) {
+						return;
+					}
+					if (screenBlob.size === 0) {
+						return;
+					}
+
+					const fixedScreenBlob = await fixWebmDuration(screenBlob, duration);
+					let fixedWebcamBlob: Blob | null = null;
+					if (activeWebcamRecorder) {
+						const webcamBlob = await activeWebcamRecorder.recordedBlobPromise.catch(() => null);
+						if (webcamBlob && webcamBlob.size > 0) {
+							fixedWebcamBlob = await fixWebmDuration(webcamBlob, duration);
+						}
+					}
+
+					const screenFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${VIDEO_FILE_EXTENSION}`;
+					const webcamFileName = `${RECORDING_FILE_PREFIX}${activeRecordingId}${WEBCAM_FILE_SUFFIX}${VIDEO_FILE_EXTENSION}`;
+					const result = await window.electronAPI.storeRecordedSession({
+						screen: {
+							videoData: await fixedScreenBlob.arrayBuffer(),
+							fileName: screenFileName,
+						},
+						webcam: fixedWebcamBlob
+							? {
+									videoData: await fixedWebcamBlob.arrayBuffer(),
+									fileName: webcamFileName,
+								}
+							: undefined,
+						createdAt: activeRecordingId,
+					});
+
+					if (!result.success) {
+						console.error("Failed to store recording session:", result.message);
+						return;
+					}
+
+					if (result.session) {
+						await window.electronAPI.setCurrentRecordingSession(result.session);
+					} else if (result.path) {
+						await window.electronAPI.setCurrentVideoPath(result.path);
+					}
+
+					await window.electronAPI.switchToEditor();
+				} catch (error) {
+					console.error("Error saving recording:", error);
+				} finally {
+					if (finalizingRecordingId.current === activeRecordingId) {
+						finalizingRecordingId.current = null;
+					}
+					if (discardRecordingId.current === activeRecordingId) {
+						discardRecordingId.current = null;
+					}
+				}
+			})();
+		},
+		[teardownMedia],
+	);
+
+	const stopRecording = useRef(() => {
+		const activeScreenRecorder = screenRecorder.current;
+		if (!activeScreenRecorder) {
+			return;
+		}
+
+		const activeWebcamRecorder = webcamRecorder.current;
+		const duration = getRecordingDurationMs();
+		const activeRecordingId = recordingId.current;
+
+		finalizeRecording(
+			activeScreenRecorder,
+			activeWebcamRecorder ?? null,
+			duration,
+			activeRecordingId,
+		);
+
+		if (
+			activeScreenRecorder.recorder.state === "recording" ||
+			activeScreenRecorder.recorder.state === "paused"
+		) {
+			try {
+				activeScreenRecorder.recorder.stop();
+			} catch {
+				// Recorder may already be stopping.
+			}
+		}
+		if (activeWebcamRecorder) {
+			if (
+				activeWebcamRecorder.recorder.state === "recording" ||
+				activeWebcamRecorder.recorder.state === "paused"
+			) {
+				try {
+					activeWebcamRecorder.recorder.stop();
+				} catch {
+					// Recorder may already be stopping.
+				}
+			}
 		}
 	});
 
@@ -125,34 +335,41 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
 		return () => {
 			if (cleanup) cleanup();
+			allowAutoFinalize.current = false;
+			restarting.current = false;
+			discardRecordingId.current = null;
 
-			if (mediaRecorder.current?.state === "recording") {
-				mediaRecorder.current.stop();
+			if (
+				screenRecorder.current?.recorder.state === "recording" ||
+				screenRecorder.current?.recorder.state === "paused"
+			) {
+				try {
+					screenRecorder.current.recorder.stop();
+				} catch {
+					// Ignore recorder teardown errors during cleanup.
+				}
 			}
-			if (stream.current) {
-				stream.current.getTracks().forEach((track) => track.stop());
-				stream.current = null;
-			}
-			if (screenStream.current) {
-				screenStream.current.getTracks().forEach((track) => track.stop());
-				screenStream.current = null;
-			}
-			if (microphoneStream.current) {
-				microphoneStream.current.getTracks().forEach((track) => track.stop());
-				microphoneStream.current = null;
-			}
-			if (mixingContext.current) {
-				mixingContext.current.close().catch(() => {});
-				mixingContext.current = null;
+			if (
+				webcamRecorder.current?.recorder.state === "recording" ||
+				webcamRecorder.current?.recorder.state === "paused"
+			) {
+				try {
+					webcamRecorder.current.recorder.stop();
+				} catch {
+					// Ignore recorder teardown errors during cleanup.
+				}
 			}
+			screenRecorder.current = null;
+			webcamRecorder.current = null;
+			teardownMedia();
 		};
-	}, []);
+	}, [teardownMedia]);
 
 	const startRecording = async () => {
 		try {
 			const selectedSource = await window.electronAPI.getSelectedSource();
 			if (!selectedSource) {
-				alert("Please select a source to record");
+				alert(t("recording.selectSource"));
 				return;
 			}
 
@@ -171,7 +388,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
 			if (systemAudioEnabled) {
 				try {
-					screenMediaStream = await (navigator.mediaDevices as any).getUserMedia({
+					screenMediaStream = await navigator.mediaDevices.getUserMedia({
 						audio: {
 							mandatory: {
 								chromeMediaSource: CHROME_MEDIA_SOURCE,
@@ -179,24 +396,23 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 							},
 						},
 						video: videoConstraints,
-					});
+					} as unknown as MediaStreamConstraints);
 				} catch (audioErr) {
 					console.warn("System audio capture failed, falling back to video-only:", audioErr);
-					toast.error("System audio not available. Recording without system audio.");
-					screenMediaStream = await (navigator.mediaDevices as any).getUserMedia({
+					toast.error(t("recording.systemAudioUnavailable"));
+					screenMediaStream = await navigator.mediaDevices.getUserMedia({
 						audio: false,
 						video: videoConstraints,
-					});
+					} as unknown as MediaStreamConstraints);
 				}
 			} else {
-				screenMediaStream = await (navigator.mediaDevices as any).getUserMedia({
+				screenMediaStream = await navigator.mediaDevices.getUserMedia({
 					audio: false,
 					video: videoConstraints,
-				});
+				} as unknown as MediaStreamConstraints);
 			}
 			screenStream.current = screenMediaStream;
 
-			// If microphone is enabled, request mic stream
 			if (microphoneEnabled) {
 				try {
 					microphoneStream.current = await navigator.mediaDevices.getUserMedia({
@@ -216,12 +432,39 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 					});
 				} catch (audioError) {
 					console.warn("Failed to get microphone access:", audioError);
-					toast.error("Microphone access denied. Recording will continue without audio.");
+					toast.error(t("recording.microphoneDenied"));
 					setMicrophoneEnabled(false);
 				}
 			}
 
-			// Combine streams
+			if (webcamEnabled) {
+				try {
+					webcamStream.current = await navigator.mediaDevices.getUserMedia({
+						audio: false,
+						video: webcamDeviceId
+							? {
+									deviceId: { exact: webcamDeviceId },
+									width: { ideal: WEBCAM_TARGET_WIDTH },
+									height: { ideal: WEBCAM_TARGET_HEIGHT },
+									frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+								}
+							: {
+									width: { ideal: WEBCAM_TARGET_WIDTH },
+									height: { ideal: WEBCAM_TARGET_HEIGHT },
+									frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+								},
+					});
+				} catch (cameraError) {
+					console.warn("Failed to get webcam access:", cameraError);
+					if (webcamStream.current) {
+						webcamStream.current.getTracks().forEach((track) => track.stop());
+						webcamStream.current = null;
+					}
+					setWebcamEnabledState(false);
+					toast.error(t("recording.cameraDenied"));
+				}
+			}
+
 			stream.current = new MediaStream();
 			const videoTrack = screenMediaStream.getVideoTracks()[0];
 			if (!videoTrack) {
@@ -233,7 +476,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			const micAudioTrack = microphoneStream.current?.getAudioTracks()[0];
 
 			if (systemAudioTrack && micAudioTrack) {
-				// Mix system audio + mic using Web Audio API
 				const ctx = new AudioContext();
 				mixingContext.current = ctx;
 				const systemSource = ctx.createMediaStreamSource(new MediaStream([systemAudioTrack]));
@@ -249,6 +491,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			} else if (micAudioTrack) {
 				stream.current.addTrack(micAudioTrack);
 			}
+
 			try {
 				await videoTrack.applyConstraints({
 					frameRate: { ideal: TARGET_FRAME_RATE, max: TARGET_FRAME_RATE },
@@ -268,7 +511,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				frameRate = TARGET_FRAME_RATE,
 			} = videoTrack.getSettings();
 
-			// Ensure dimensions are divisible by 2 for VP9/AV1 codec compatibility
 			width = Math.floor(width / CODEC_ALIGNMENT) * CODEC_ALIGNMENT;
 			height = Math.floor(height / CODEC_ALIGNMENT) * CODEC_ALIGNMENT;
 
@@ -282,81 +524,113 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			);
 
 			const hasAudio = stream.current.getAudioTracks().length > 0;
-
-			chunks.current = [];
-			const recorder = new MediaRecorder(stream.current, {
+			screenRecorder.current = createRecorderHandle(stream.current, {
 				mimeType,
 				videoBitsPerSecond,
 				...(hasAudio
 					? { audioBitsPerSecond: systemAudioTrack ? AUDIO_BITRATE_SYSTEM : AUDIO_BITRATE_VOICE }
 					: {}),
 			});
-			mediaRecorder.current = recorder;
-			recorder.ondataavailable = (e) => {
-				if (e.data && e.data.size > 0) chunks.current.push(e.data);
-			};
-			recorder.onstop = async () => {
-				stream.current = null;
-				if (chunks.current.length === 0) return;
-				const duration = Date.now() - startTime.current;
-				const recordedChunks = chunks.current;
-				const buggyBlob = new Blob(recordedChunks, { type: mimeType });
-				// Clear chunks early to free memory immediately after blob creation
-				chunks.current = [];
-				const timestamp = Date.now();
-				const videoFileName = `${RECORDING_FILE_PREFIX}${timestamp}${VIDEO_FILE_EXTENSION}`;
+			screenRecorder.current.recorder.addEventListener(
+				"error",
+				() => {
+					setRecording(false);
+				},
+				{ once: true },
+			);
 
-				try {
-					const videoBlob = await fixWebmDuration(buggyBlob, duration);
-					const arrayBuffer = await videoBlob.arrayBuffer();
-					const videoResult = await window.electronAPI.storeRecordedVideo(
-						arrayBuffer,
-						videoFileName,
-					);
-					if (!videoResult.success) {
-						console.error("Failed to store video:", videoResult.message);
-						return;
-					}
+			if (webcamStream.current) {
+				webcamRecorder.current = createRecorderHandle(webcamStream.current, {
+					mimeType,
+					videoBitsPerSecond: Math.min(videoBitsPerSecond, BITRATE_BASE),
+				});
+			}
 
-					if (videoResult.path) {
-						await window.electronAPI.setCurrentVideoPath(videoResult.path);
-					}
-
-					await window.electronAPI.switchToEditor();
-				} catch (error) {
-					console.error("Error saving recording:", error);
-				}
-			};
-			recorder.onerror = () => setRecording(false);
-			recorder.start(RECORDER_TIMESLICE_MS);
-			startTime.current = Date.now();
+			recordingId.current = Date.now();
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = Date.now();
+			allowAutoFinalize.current = true;
 			setRecording(true);
+			setPaused(false);
+			setElapsedSeconds(0);
 			window.electronAPI?.setRecordingState(true);
+
+			const activeScreenRecorder = screenRecorder.current;
+			const activeWebcamRecorder = webcamRecorder.current;
+			const activeRecordingId = recordingId.current;
+			if (activeScreenRecorder) {
+				activeScreenRecorder.recorder.addEventListener(
+					"stop",
+					() => {
+						if (!allowAutoFinalize.current) {
+							return;
+						}
+						finalizeRecording(
+							activeScreenRecorder,
+							activeWebcamRecorder ?? null,
+							Math.max(0, getRecordingDurationMs()),
+							activeRecordingId,
+						);
+					},
+					{ once: true },
+				);
+			}
 		} catch (error) {
 			console.error("Failed to start recording:", error);
 			const errorMsg = error instanceof Error ? error.message : "Failed to start recording";
 			if (errorMsg.includes("Permission denied") || errorMsg.includes("NotAllowedError")) {
-				toast.error("Recording permission denied. Please allow screen recording.");
+				toast.error(t("recording.permissionDenied"));
 			} else {
 				toast.error(errorMsg);
 			}
 			setRecording(false);
-			if (stream.current) {
-				stream.current.getTracks().forEach((track) => track.stop());
-				stream.current = null;
+			setPaused(false);
+			setElapsedSeconds(0);
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = null;
+			screenRecorder.current = null;
+			webcamRecorder.current = null;
+			teardownMedia();
+		}
+	};
+
+	const togglePaused = () => {
+		const activeScreenRecorder = screenRecorder.current?.recorder;
+		if (!activeScreenRecorder || activeScreenRecorder.state === "inactive") {
+			return;
+		}
+
+		const activeWebcamRecorder = webcamRecorder.current?.recorder;
+
+		if (activeScreenRecorder.state === "paused") {
+			try {
+				activeScreenRecorder.resume();
+				if (activeWebcamRecorder?.state === "paused") {
+					activeWebcamRecorder.resume();
+				}
+				segmentStartedAt.current = Date.now();
+				setPaused(false);
+			} catch (error) {
+				console.error("Failed to resume recording:", error);
 			}
-			if (screenStream.current) {
-				screenStream.current.getTracks().forEach((track) => track.stop());
-				screenStream.current = null;
-			}
-			if (microphoneStream.current) {
-				microphoneStream.current.getTracks().forEach((track) => track.stop());
-				microphoneStream.current = null;
-			}
-			if (mixingContext.current) {
-				mixingContext.current.close().catch(() => {});
-				mixingContext.current = null;
+			return;
+		}
+
+		if (activeScreenRecorder.state !== "recording") {
+			return;
+		}
+
+		try {
+			accumulatedDurationMs.current = getRecordingDurationMs();
+			segmentStartedAt.current = null;
+			setElapsedSeconds(Math.floor(accumulatedDurationMs.current / 1000));
+			activeScreenRecorder.pause();
+			if (activeWebcamRecorder?.state === "recording") {
+				activeWebcamRecorder.pause();
 			}
+			setPaused(true);
+		} catch (error) {
+			console.error("Failed to pause recording:", error);
 		}
 	};
 
@@ -364,14 +638,94 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		recording ? stopRecording.current() : startRecording();
 	};
 
+	const restartRecording = async () => {
+		if (restarting.current) return;
+
+		const activeScreenRecorder = screenRecorder.current;
+		if (!activeScreenRecorder || activeScreenRecorder.recorder.state === "inactive") return;
+
+		const activeWebcamRecorder = webcamRecorder.current;
+		const activeRecordingId = recordingId.current;
+
+		restarting.current = true;
+		discardRecordingId.current = activeRecordingId;
+		allowAutoFinalize.current = false;
+
+		const stopPromises = [
+			new Promise<void>((resolve) => {
+				activeScreenRecorder.recorder.addEventListener("stop", () => resolve(), { once: true });
+			}),
+		];
+
+		if (
+			activeWebcamRecorder?.recorder.state === "recording" ||
+			activeWebcamRecorder?.recorder.state === "paused"
+		) {
+			stopPromises.push(
+				new Promise<void>((resolve) => {
+					activeWebcamRecorder.recorder.addEventListener("stop", () => resolve(), {
+						once: true,
+					});
+				}),
+			);
+		}
+
+		stopRecording.current();
+		await Promise.all(stopPromises);
+
+		try {
+			await startRecording();
+		} finally {
+			restarting.current = false;
+		}
+	};
+
+	useEffect(() => {
+		if (!recording) {
+			setElapsedSeconds(0);
+			return;
+		}
+
+		setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+		if (paused) {
+			return;
+		}
+
+		const interval = window.setInterval(() => {
+			setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+		}, 250);
+
+		return () => window.clearInterval(interval);
+	}, [getRecordingDurationMs, paused, recording]);
+
+	const cancelRecording = () => {
+		const activeScreenRecorder = screenRecorder.current;
+		if (!activeScreenRecorder || activeScreenRecorder.recorder.state !== "recording") return;
+
+		const activeRecordingId = recordingId.current;
+		discardRecordingId.current = activeRecordingId;
+		allowAutoFinalize.current = false;
+
+		stopRecording.current();
+	};
+
 	return {
 		recording,
+		paused,
+		elapsedSeconds,
 		toggleRecording,
+		togglePaused,
+		restartRecording,
+		cancelRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
 		setMicrophoneDeviceId,
+		webcamDeviceId,
+		setWebcamDeviceId,
 		systemAudioEnabled,
 		setSystemAudioEnabled,
+		webcamEnabled,
+		setWebcamEnabled,
 	};
 }

src/i18n/config.ts

@@ -0,0 +1,16 @@
+export const DEFAULT_LOCALE = "en" as const;
+export const SUPPORTED_LOCALES = ["en", "zh-CN", "es"] as const;
+export const I18N_NAMESPACES = [
+	"common",
+	"dialogs",
+	"editor",
+	"launch",
+	"settings",
+	"shortcuts",
+	"timeline",
+] as const;
+
+export type Locale = (typeof SUPPORTED_LOCALES)[number];
+export type I18nNamespace = (typeof I18N_NAMESPACES)[number];
+
+export const LOCALE_STORAGE_KEY = "openscreen-locale";

src/i18n/loader.ts

@@ -0,0 +1,60 @@
+import { DEFAULT_LOCALE, type I18nNamespace, type Locale } from "./config";
+
+type MessageMap = Record<string, unknown>;
+
+const modules = import.meta.glob("./locales/**/*.json", { eager: true }) as Record<
+	string,
+	{ default: MessageMap }
+>;
+
+const messages: Record<string, Record<string, MessageMap>> = {};
+
+for (const [path, mod] of Object.entries(modules)) {
+	// path looks like "./locales/en/common.json"
+	const parts = path.replace("./locales/", "").replace(".json", "").split("/");
+	const locale = parts[0];
+	const namespace = parts[1];
+	if (!messages[locale]) messages[locale] = {};
+	messages[locale][namespace] = mod.default;
+}
+
+function getMessageValue(obj: unknown, dotPath: string): string | undefined {
+	const keys = dotPath.split(".");
+	let current: unknown = obj;
+	for (const key of keys) {
+		if (current == null || typeof current !== "object") return undefined;
+		current = (current as Record<string, unknown>)[key];
+	}
+	return typeof current === "string" ? current : undefined;
+}
+
+function interpolate(str: string, vars?: Record<string, string | number>): string {
+	if (!vars) return str;
+	return str.replace(/\{\{(\w+)\}\}/g, (_, key: string) => String(vars[key] ?? `{{${key}}}`));
+}
+
+export function getMessages(locale: Locale, namespace: I18nNamespace): MessageMap {
+	return messages[locale]?.[namespace] ?? {};
+}
+
+export function getLocaleName(locale: Locale): string {
+	return getMessageValue(messages[locale]?.common, "locale.name") ?? locale;
+}
+
+export function getLocaleShort(locale: Locale): string {
+	return getMessageValue(messages[locale]?.common, "locale.short") ?? locale;
+}
+
+export function translate(
+	locale: Locale,
+	namespace: I18nNamespace,
+	key: string,
+	vars?: Record<string, string | number>,
+): string {
+	const value =
+		getMessageValue(messages[locale]?.[namespace], key) ??
+		getMessageValue(messages[DEFAULT_LOCALE]?.[namespace], key);
+
+	if (value == null) return `${namespace}.${key}`;
+	return interpolate(value, vars);
+}

src/i18n/locales/en/common.json

@@ -0,0 +1,29 @@
+{
+	"actions": {
+		"cancel": "Cancel",
+		"save": "Save",
+		"delete": "Delete",
+		"close": "Close",
+		"share": "Share",
+		"done": "Done",
+		"open": "Open",
+		"upload": "Upload",
+		"export": "Export",
+		"file": "File",
+		"edit": "Edit",
+		"view": "View",
+		"window": "Window",
+		"quit": "Quit",
+		"stopRecording": "Stop Recording"
+	},
+	"playback": {
+		"play": "Play",
+		"pause": "Pause",
+		"fullscreen": "Fullscreen",
+		"exitFullscreen": "Exit Fullscreen"
+	},
+	"locale": {
+		"name": "English",
+		"short": "EN"
+	}
+}

src/i18n/locales/en/dialogs.json

@@ -0,0 +1,68 @@
+{
+	"export": {
+		"complete": "Export Complete",
+		"yourFormatReady": "Your {{format}} is ready",
+		"showInFolder": "Show in Folder",
+		"finalizingVideo": "Finalizing video export...",
+		"compilingGifProgress": "Compiling GIF... {{progress}}%",
+		"compilingGifWait": "Compiling GIF... This may take a while",
+		"takeMoment": "This may take a moment...",
+		"failed": "Export Failed",
+		"tryAgain": "Please try again",
+		"finalizingVideoTitle": "Finalizing Video",
+		"compilingGif": "Compiling GIF",
+		"exportingFormat": "Exporting {{format}}",
+		"compiling": "Compiling",
+		"renderingFrames": "Rendering Frames",
+		"processing": "Processing...",
+		"finalizing": "Finalizing...",
+		"compilingStatus": "Compiling...",
+		"status": "Status",
+		"format": "Format",
+		"frames": "Frames",
+		"cancelExport": "Cancel Export",
+		"savedSuccessfully": "{{format}} saved successfully!"
+	},
+	"tutorial": {
+		"triggerLabel": "How trimming works",
+		"title": "How Trimming Works",
+		"description": "Understanding how to cut out unwanted parts of your video.",
+		"explanation": "The Trim tool works by defining the segments you want to",
+		"explanationRemove": "remove",
+		"explanationCovered": "covered",
+		"explanationEnd": "by a red trim segment will be cut out when you export.",
+		"visualExample": "Visual Example",
+		"removed": "REMOVED",
+		"kept": "Kept",
+		"part1": "Part 1",
+		"part2": "Part 2",
+		"part3": "Part 3",
+		"finalVideo": "Final Video",
+		"step1Title": "1. Add Trim",
+		"step1Description": "Press T or click the scissors icon to mark a section for removal.",
+		"step2Title": "2. Adjust",
+		"step2Description": "Drag the edges of the red region to cover exactly what you want to cut out."
+	},
+	"unsavedChanges": {
+		"title": "Unsaved Changes",
+		"message": "You have unsaved changes.",
+		"detail": "Do you want to save your project before closing?",
+		"saveAndClose": "Save & Close",
+		"discardAndClose": "Discard & Close",
+		"loadProject": "Load Project…",
+		"saveProject": "Save Project…",
+		"saveProjectAs": "Save Project As…"
+	},
+	"fileDialogs": {
+		"saveGif": "Save Exported GIF",
+		"saveVideo": "Save Exported Video",
+		"selectVideo": "Select Video File",
+		"saveProject": "Save OpenScreen Project",
+		"openProject": "Open OpenScreen Project",
+		"gifImage": "GIF Image",
+		"mp4Video": "MP4 Video",
+		"videoFiles": "Video Files",
+		"openscreenProject": "OpenScreen Project",
+		"allFiles": "All Files"
+	}
+}

src/i18n/locales/en/editor.json

@@ -0,0 +1,35 @@
+{
+	"errors": {
+		"noVideoLoaded": "No video loaded",
+		"videoNotReady": "Video not ready",
+		"unableToDetermineSourcePath": "Unable to determine source video path",
+		"failedToSaveGif": "Failed to save GIF",
+		"gifExportFailed": "GIF export failed",
+		"failedToSaveVideo": "Failed to save video",
+		"exportFailed": "Export failed",
+		"exportFailedWithError": "Export failed: {{error}}",
+		"failedToSaveExport": "Failed to save export",
+		"failedToSaveExportedVideo": "Failed to save exported video",
+		"failedToRevealInFolder": "Error revealing in folder: {{error}}"
+	},
+	"export": {
+		"canceled": "Export canceled",
+		"exportedSuccessfully": "{{format}} exported successfully"
+	},
+	"project": {
+		"saveCanceled": "Project save canceled",
+		"failedToSave": "Failed to save project",
+		"savedTo": "Project saved to {{path}}",
+		"failedToLoad": "Failed to load project",
+		"invalidFormat": "Invalid project file format",
+		"loadedFrom": "Project loaded from {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Failed to request camera access.",
+		"cameraBlocked": "Camera access is blocked. Enable it in system settings to use the webcam.",
+		"systemAudioUnavailable": "System audio not available. Recording without system audio.",
+		"microphoneDenied": "Microphone access denied. Recording will continue without audio.",
+		"cameraDenied": "Camera access denied. Recording will continue without webcam.",
+		"permissionDenied": "Recording permission denied. Please allow screen recording."
+	}
+}

src/i18n/locales/en/launch.json

@@ -0,0 +1,37 @@
+{
+	"tooltips": {
+		"hideHUD": "Hide HUD",
+		"closeApp": "Close App",
+		"restartRecording": "Restart recording",
+		"cancelRecording": "Cancel recording",
+		"pauseRecording": "Pause recording",
+		"resumeRecording": "Resume recording",
+		"openVideoFile": "Open video file",
+		"openProject": "Open project"
+	},
+	"audio": {
+		"enableSystemAudio": "Enable system audio",
+		"disableSystemAudio": "Disable system audio",
+		"enableMicrophone": "Enable microphone",
+		"disableMicrophone": "Disable microphone",
+		"defaultMicrophone": "Default Microphone"
+	},
+	"webcam": {
+		"enableWebcam": "Enable webcam",
+		"disableWebcam": "Disable webcam",
+		"defaultCamera": "Default Camera",
+		"searching": "Searching...",
+		"noneFound": "No camera found",
+		"unavailable": "Camera unavailable"
+	},
+	"sourceSelector": {
+		"loading": "Loading sources...",
+		"screens": "Screens ({{count}})",
+		"windows": "Windows ({{count}})",
+		"defaultSourceName": "Screen"
+	},
+	"recording": {
+		"selectSource": "Please select a source to record"
+	},
+	"language": "Language"
+}

src/i18n/locales/en/settings.json

@@ -0,0 +1,159 @@
+{
+	"zoom": {
+		"level": "Zoom Level",
+		"selectRegion": "Select a zoom region to adjust",
+		"deleteZoom": "Delete Zoom",
+		"focusMode": {
+			"title": "Focus Mode",
+			"manual": "Manual",
+			"auto": "Auto",
+			"autoDescription": "Camera follows the recorded cursor position"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Playback Speed",
+		"selectRegion": "Select a speed region to adjust",
+		"deleteRegion": "Delete Speed Region"
+	},
+	"trim": {
+		"deleteRegion": "Delete Trim Region"
+	},
+	"layout": {
+		"title": "Layout",
+		"preset": "Preset",
+		"selectPreset": "Select preset",
+		"pictureInPicture": "Picture in Picture",
+		"verticalStack": "Vertical Stack",
+		"webcamShape": "Camera Shape"
+	},
+	"effects": {
+		"title": "Video Effects",
+		"blurBg": "Blur BG",
+		"motionBlur": "Motion Blur",
+		"off": "off",
+		"shadow": "Shadow",
+		"roundness": "Roundness",
+		"padding": "Padding"
+	},
+	"background": {
+		"title": "Background",
+		"image": "Image",
+		"color": "Color",
+		"gradient": "Gradient",
+		"uploadCustom": "Upload Custom",
+		"gradientLabel": "Gradient {{index}}"
+	},
+	"crop": {
+		"title": "Crop",
+		"cropVideo": "Crop Video",
+		"dragInstruction": "Drag on each side to adjust the crop area",
+		"ratio": "Ratio",
+		"free": "Free",
+		"done": "Done",
+		"lockAspectRatio": "Lock aspect ratio",
+		"unlockAspectRatio": "Unlock aspect ratio"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 Video",
+		"mp4Description": "High quality video file",
+		"gifAnimation": "GIF Animation",
+		"gifDescription": "Animated image for sharing"
+	},
+	"exportQuality": {
+		"title": "Export Quality",
+		"low": "Low",
+		"medium": "Medium",
+		"high": "High"
+	},
+	"gifSettings": {
+		"frameRate": "GIF Frame Rate",
+		"size": "GIF Size",
+		"loop": "Loop GIF"
+	},
+	"project": {
+		"save": "Save Project",
+		"load": "Load Project"
+	},
+	"export": {
+		"videoButton": "Export Video",
+		"gifButton": "Export GIF",
+		"chooseSaveLocation": "Choose Save Location"
+	},
+	"links": {
+		"reportBug": "Report Bug",
+		"starOnGithub": "Star on GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Invalid file type",
+		"jpgOnly": "Please upload a JPG or JPEG image file.",
+		"uploadSuccess": "Custom image uploaded successfully!",
+		"failedToUpload": "Failed to upload image",
+		"errorReading": "There was an error reading the file."
+	},
+	"annotation": {
+		"title": "Annotation Settings",
+		"active": "Active",
+		"typeText": "Text",
+		"typeImage": "Image",
+		"typeArrow": "Arrow",
+		"textContent": "Text Content",
+		"textPlaceholder": "Enter your text...",
+		"fontStyle": "Font Style",
+		"selectStyle": "Select style",
+		"size": "Size",
+		"customFonts": "Custom Fonts",
+		"textColor": "Text Color",
+		"background": "Background",
+		"none": "None",
+		"color": "Color",
+		"clearBackground": "Clear Background",
+		"uploadImage": "Upload Image",
+		"supportedFormats": "Supported formats: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Arrow Direction",
+		"strokeWidth": "Stroke Width: {{width}}px",
+		"arrowColor": "Arrow Color",
+		"deleteAnnotation": "Delete Annotation",
+		"shortcutsAndTips": "Shortcuts & Tips",
+		"tipMovePlayhead": "Move playhead to overlapping annotation section and select an item.",
+		"tipTabCycle": "Use Tab to cycle through overlapping items.",
+		"tipShiftTabCycle": "Use Shift+Tab to cycle backwards.",
+		"invalidImageType": "Invalid file type",
+		"imageFormatsOnly": "Please upload a JPG, PNG, GIF, or WebP image file.",
+		"imageUploadSuccess": "Image uploaded successfully!",
+		"failedImageUpload": "Failed to upload image"
+	},
+	"fontStyles": {
+		"classic": "Classic",
+		"editor": "Editor",
+		"strong": "Strong",
+		"typewriter": "Typewriter",
+		"deco": "Deco",
+		"simple": "Simple",
+		"modern": "Modern",
+		"clean": "Clean"
+	},
+	"customFont": {
+		"dialogTitle": "Add Google Font",
+		"urlLabel": "Google Fonts Import URL",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Get this from Google Fonts: Select a font → Click \"Get font\" → Copy the @import URL",
+		"nameLabel": "Display Name",
+		"namePlaceholder": "My Custom Font",
+		"nameHelp": "This is how the font will appear in the font selector",
+		"addButton": "Add Font",
+		"addingButton": "Adding...",
+		"errorEmptyUrl": "Please enter a Google Fonts import URL",
+		"errorInvalidUrl": "Please enter a valid Google Fonts URL",
+		"errorEmptyName": "Please enter a font name",
+		"errorExtractFailed": "Could not extract font family from URL",
+		"successMessage": "Font \"{{fontName}}\" added successfully",
+		"failedToAdd": "Failed to add font",
+		"errorTimeout": "Font took too long to load. Please check the URL and try again.",
+		"errorLoadFailed": "The font could not be loaded. Please verify the Google Fonts URL is correct."
+	},
+	"language": {
+		"title": "Language"
+	}
+}

src/i18n/locales/en/shortcuts.json

@@ -0,0 +1,36 @@
+{
+	"title": "Keyboard Shortcuts",
+	"customize": "Customize",
+	"configurable": "Configurable",
+	"fixed": "Fixed",
+	"pressKey": "Press a key…",
+	"clickToChange": "Click to change",
+	"pressEscToCancel": "Press Esc to cancel",
+	"helpText": "Click a shortcut then press the new key combination. Press Esc to cancel.",
+	"resetToDefaults": "Reset to defaults",
+	"alreadyUsedBy": "Already used by {{action}}",
+	"swap": "Swap",
+	"reservedShortcut": "This shortcut is reserved for \"{{label}}\" and cannot be reassigned.",
+	"savedToast": "Keyboard shortcuts saved",
+	"resetToast": "Reset to default shortcuts — click Save to apply",
+	"actions": {
+		"addZoom": "Add Zoom",
+		"addTrim": "Add Trim",
+		"addSpeed": "Add Speed",
+		"addAnnotation": "Add Annotation",
+		"addKeyframe": "Add Keyframe",
+		"deleteSelected": "Delete Selected",
+		"playPause": "Play / Pause"
+	},
+	"fixedActions": {
+		"undo": "Undo",
+		"redo": "Redo",
+		"cycleAnnotationsForward": "Cycle Annotations Forward",
+		"cycleAnnotationsBackward": "Cycle Annotations Backward",
+		"deleteSelectedAlt": "Delete Selected (alt)",
+		"panTimeline": "Pan Timeline",
+		"zoomTimeline": "Zoom Timeline",
+		"frameBack": "Frame Back",
+		"frameForward": "Frame Forward"
+	}
+}

src/i18n/locales/en/timeline.json

@@ -0,0 +1,50 @@
+{
+	"buttons": {
+		"addZoom": "Add Zoom (Z)",
+		"suggestZooms": "Suggest Zooms from Cursor",
+		"addTrim": "Add Trim (T)",
+		"addAnnotation": "Add Annotation (A)",
+		"addSpeed": "Add Speed (S)"
+	},
+	"hints": {
+		"pressZoom": "Press Z to add zoom",
+		"pressTrim": "Press T to add trim",
+		"pressAnnotation": "Press A to add annotation",
+		"pressSpeed": "Press S to add speed"
+	},
+	"labels": {
+		"pan": "Pan",
+		"zoom": "Zoom",
+		"zoomItem": "Zoom {{index}}",
+		"trimItem": "Trim {{index}}",
+		"speedItem": "Speed {{index}}",
+		"annotationItem": "Annotation",
+		"imageItem": "Image",
+		"emptyText": "Empty text"
+	},
+	"emptyState": {
+		"noVideo": "No Video Loaded",
+		"dragAndDrop": "Drag and drop a video to start editing"
+	},
+	"errors": {
+		"cannotPlaceZoom": "Cannot place zoom here",
+		"zoomExistsAtLocation": "Zoom already exists at this location or not enough space available.",
+		"zoomSuggestionUnavailable": "Zoom suggestion handler unavailable",
+		"noCursorTelemetry": "No cursor telemetry available",
+		"noCursorTelemetryDescription": "Record a screencast first to generate cursor-based suggestions.",
+		"noUsableTelemetry": "No usable cursor telemetry",
+		"noUsableTelemetryDescription": "The recording does not include enough cursor movement data.",
+		"noDwellMoments": "No clear cursor dwell moments found",
+		"noDwellMomentsDescription": "Try a recording with slower cursor pauses on important actions.",
+		"noAutoZoomSlots": "No auto-zoom slots available",
+		"noAutoZoomSlotsDescription": "Detected dwell points overlap existing zoom regions.",
+		"cannotPlaceTrim": "Cannot place trim here",
+		"trimExistsAtLocation": "Trim already exists at this location or not enough space available.",
+		"cannotPlaceSpeed": "Cannot place speed here",
+		"speedExistsAtLocation": "Speed region already exists at this location or not enough space available."
+	},
+	"success": {
+		"addedZoomSuggestions": "Added {{count}} cursor-based zoom suggestion",
+		"addedZoomSuggestionsPlural": "Added {{count}} cursor-based zoom suggestions"
+	}
+}

src/i18n/locales/es/common.json

@@ -0,0 +1,29 @@
+{
+	"actions": {
+		"cancel": "Cancelar",
+		"save": "Guardar",
+		"delete": "Eliminar",
+		"close": "Cerrar",
+		"share": "Compartir",
+		"done": "Listo",
+		"open": "Abrir",
+		"upload": "Subir",
+		"export": "Exportar",
+		"file": "Archivo",
+		"edit": "Editar",
+		"view": "Vista",
+		"window": "Ventana",
+		"quit": "Salir",
+		"stopRecording": "Detener grabación"
+	},
+	"playback": {
+		"play": "Reproducir",
+		"pause": "Pausar",
+		"fullscreen": "Pantalla completa",
+		"exitFullscreen": "Salir de pantalla completa"
+	},
+	"locale": {
+		"name": "Español",
+		"short": "ES"
+	}
+}

src/i18n/locales/es/dialogs.json

@@ -0,0 +1,68 @@
+{
+	"export": {
+		"complete": "Exportación completada",
+		"yourFormatReady": "Tu {{format}} está listo",
+		"showInFolder": "Mostrar en carpeta",
+		"finalizingVideo": "Finalizando exportación de video...",
+		"compilingGifProgress": "Compilando GIF... {{progress}}%",
+		"compilingGifWait": "Compilando GIF... Esto puede tardar un rato",
+		"takeMoment": "Esto puede tardar un momento...",
+		"failed": "La exportación falló",
+		"tryAgain": "Por favor intenta de nuevo",
+		"finalizingVideoTitle": "Finalizando video",
+		"compilingGif": "Compilando GIF",
+		"exportingFormat": "Exportando {{format}}",
+		"compiling": "Compilando",
+		"renderingFrames": "Renderizando cuadros",
+		"processing": "Procesando...",
+		"finalizing": "Finalizando...",
+		"compilingStatus": "Compilando...",
+		"status": "Estado",
+		"format": "Formato",
+		"frames": "Cuadros",
+		"cancelExport": "Cancelar exportación",
+		"savedSuccessfully": "¡{{format}} guardado exitosamente!"
+	},
+	"tutorial": {
+		"triggerLabel": "Cómo funciona el recorte",
+		"title": "Cómo funciona el recorte",
+		"description": "Aprende a eliminar las partes no deseadas de tu video.",
+		"explanation": "La herramienta de recorte funciona definiendo los segmentos que deseas",
+		"explanationRemove": "eliminar",
+		"explanationCovered": "cubierto",
+		"explanationEnd": "por un segmento rojo de recorte será eliminado al exportar.",
+		"visualExample": "Ejemplo visual",
+		"removed": "ELIMINADO",
+		"kept": "Conservado",
+		"part1": "Parte 1",
+		"part2": "Parte 2",
+		"part3": "Parte 3",
+		"finalVideo": "Video final",
+		"step1Title": "1. Agregar recorte",
+		"step1Description": "Presiona T o haz clic en el ícono de tijeras para marcar una sección a eliminar.",
+		"step2Title": "2. Ajustar",
+		"step2Description": "Arrastra los bordes de la región roja para cubrir exactamente lo que deseas eliminar."
+	},
+	"unsavedChanges": {
+		"title": "Cambios sin guardar",
+		"message": "Tienes cambios sin guardar.",
+		"detail": "¿Deseas guardar tu proyecto antes de cerrar?",
+		"saveAndClose": "Guardar y cerrar",
+		"discardAndClose": "Descartar y cerrar",
+		"loadProject": "Cargar proyecto…",
+		"saveProject": "Guardar proyecto…",
+		"saveProjectAs": "Guardar proyecto como…"
+	},
+	"fileDialogs": {
+		"saveGif": "Guardar GIF exportado",
+		"saveVideo": "Guardar video exportado",
+		"selectVideo": "Seleccionar archivo de video",
+		"saveProject": "Guardar proyecto OpenScreen",
+		"openProject": "Abrir proyecto OpenScreen",
+		"gifImage": "Imagen GIF",
+		"mp4Video": "Video MP4",
+		"videoFiles": "Archivos de video",
+		"openscreenProject": "Proyecto OpenScreen",
+		"allFiles": "Todos los archivos"
+	}
+}

src/i18n/locales/es/editor.json

@@ -0,0 +1,35 @@
+{
+	"errors": {
+		"noVideoLoaded": "No hay video cargado",
+		"videoNotReady": "El video no está listo",
+		"unableToDetermineSourcePath": "No se pudo determinar la ruta del video de origen",
+		"failedToSaveGif": "Error al guardar el GIF",
+		"gifExportFailed": "La exportación de GIF falló",
+		"failedToSaveVideo": "Error al guardar el video",
+		"exportFailed": "La exportación falló",
+		"exportFailedWithError": "La exportación falló: {{error}}",
+		"failedToSaveExport": "Error al guardar la exportación",
+		"failedToSaveExportedVideo": "Error al guardar el video exportado",
+		"failedToRevealInFolder": "Error al mostrar en la carpeta: {{error}}"
+	},
+	"export": {
+		"canceled": "Exportación cancelada",
+		"exportedSuccessfully": "{{format}} exportado exitosamente"
+	},
+	"project": {
+		"saveCanceled": "Guardado de proyecto cancelado",
+		"failedToSave": "Error al guardar el proyecto",
+		"savedTo": "Proyecto guardado en {{path}}",
+		"failedToLoad": "Error al cargar el proyecto",
+		"invalidFormat": "Formato de archivo de proyecto no válido",
+		"loadedFrom": "Proyecto cargado desde {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "Error al solicitar acceso a la cámara.",
+		"cameraBlocked": "El acceso a la cámara está bloqueado. Actívalo en la configuración del sistema para usar la cámara web.",
+		"systemAudioUnavailable": "Audio del sistema no disponible. Grabando sin audio del sistema.",
+		"microphoneDenied": "Acceso al micrófono denegado. La grabación continuará sin audio.",
+		"cameraDenied": "Acceso a la cámara denegado. La grabación continuará sin cámara web.",
+		"permissionDenied": "Permiso de grabación denegado. Por favor permite la grabación de pantalla."
+	}
+}

src/i18n/locales/es/launch.json

@@ -0,0 +1,37 @@
+{
+	"tooltips": {
+		"hideHUD": "Ocultar HUD",
+		"closeApp": "Cerrar aplicación",
+		"restartRecording": "Reiniciar grabación",
+		"cancelRecording": "Cancelar grabación",
+		"pauseRecording": "Pausar grabación",
+		"resumeRecording": "Reanudar grabación",
+		"openVideoFile": "Abrir archivo de video",
+		"openProject": "Abrir proyecto"
+	},
+	"audio": {
+		"enableSystemAudio": "Activar audio del sistema",
+		"disableSystemAudio": "Desactivar audio del sistema",
+		"enableMicrophone": "Activar micrófono",
+		"disableMicrophone": "Desactivar micrófono",
+		"defaultMicrophone": "Micrófono predeterminado"
+	},
+	"webcam": {
+		"enableWebcam": "Activar cámara web",
+		"disableWebcam": "Desactivar cámara web",
+		"defaultCamera": "Cámara predeterminada",
+		"searching": "Buscando...",
+		"noneFound": "No se encontró cámara",
+		"unavailable": "Cámara no disponible"
+	},
+	"sourceSelector": {
+		"loading": "Cargando fuentes...",
+		"screens": "Pantallas ({{count}})",
+		"windows": "Ventanas ({{count}})",
+		"defaultSourceName": "Pantalla"
+	},
+	"recording": {
+		"selectSource": "Por favor selecciona una fuente para grabar"
+	},
+	"language": "Idioma"
+}

src/i18n/locales/es/settings.json

@@ -0,0 +1,159 @@
+{
+	"zoom": {
+		"level": "Nivel de zoom",
+		"selectRegion": "Selecciona una región de zoom para ajustar",
+		"deleteZoom": "Eliminar zoom",
+		"focusMode": {
+			"title": "Modo de enfoque",
+			"manual": "Manual",
+			"auto": "Auto",
+			"autoDescription": "La cámara sigue la posición del cursor grabado"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "Velocidad de reproducción",
+		"selectRegion": "Selecciona una región de velocidad para ajustar",
+		"deleteRegion": "Eliminar región de velocidad"
+	},
+	"trim": {
+		"deleteRegion": "Eliminar región de recorte"
+	},
+	"layout": {
+		"title": "Diseño",
+		"preset": "Predefinido",
+		"selectPreset": "Seleccionar predefinido",
+		"pictureInPicture": "Imagen en imagen",
+		"verticalStack": "Apilado vertical",
+		"webcamShape": "Forma de cámara"
+	},
+	"effects": {
+		"title": "Efectos de video",
+		"blurBg": "Desenfocar fondo",
+		"motionBlur": "Desenfoque de movimiento",
+		"off": "desactivado",
+		"shadow": "Sombra",
+		"roundness": "Redondez",
+		"padding": "Relleno"
+	},
+	"background": {
+		"title": "Fondo",
+		"image": "Imagen",
+		"color": "Color",
+		"gradient": "Degradado",
+		"uploadCustom": "Subir personalizado",
+		"gradientLabel": "Degradado {{index}}"
+	},
+	"crop": {
+		"title": "Recortar",
+		"cropVideo": "Recortar video",
+		"dragInstruction": "Arrastra cada lado para ajustar el área de recorte",
+		"ratio": "Proporción",
+		"free": "Libre",
+		"done": "Listo",
+		"lockAspectRatio": "Bloquear relación de aspecto",
+		"unlockAspectRatio": "Desbloquear relación de aspecto"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "Video MP4",
+		"mp4Description": "Archivo de video de alta calidad",
+		"gifAnimation": "Animación GIF",
+		"gifDescription": "Imagen animada para compartir"
+	},
+	"exportQuality": {
+		"title": "Calidad de exportación",
+		"low": "Baja",
+		"medium": "Media",
+		"high": "Alta"
+	},
+	"gifSettings": {
+		"frameRate": "Velocidad de cuadros del GIF",
+		"size": "Tamaño del GIF",
+		"loop": "Repetir GIF"
+	},
+	"project": {
+		"save": "Guardar proyecto",
+		"load": "Cargar proyecto"
+	},
+	"export": {
+		"videoButton": "Exportar video",
+		"gifButton": "Exportar GIF",
+		"chooseSaveLocation": "Elegir ubicación de guardado"
+	},
+	"links": {
+		"reportBug": "Reportar error",
+		"starOnGithub": "Dar estrella en GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "Tipo de archivo no válido",
+		"jpgOnly": "Por favor sube un archivo de imagen JPG o JPEG.",
+		"uploadSuccess": "¡Imagen personalizada subida exitosamente!",
+		"failedToUpload": "Error al subir la imagen",
+		"errorReading": "Hubo un error al leer el archivo."
+	},
+	"annotation": {
+		"title": "Configuración de anotaciones",
+		"active": "Activo",
+		"typeText": "Texto",
+		"typeImage": "Imagen",
+		"typeArrow": "Flecha",
+		"textContent": "Contenido de texto",
+		"textPlaceholder": "Escribe tu texto...",
+		"fontStyle": "Estilo de fuente",
+		"selectStyle": "Seleccionar estilo",
+		"size": "Tamaño",
+		"customFonts": "Fuentes personalizadas",
+		"textColor": "Color de texto",
+		"background": "Fondo",
+		"none": "Ninguno",
+		"color": "Color",
+		"clearBackground": "Quitar fondo",
+		"uploadImage": "Subir imagen",
+		"supportedFormats": "Formatos compatibles: JPG, PNG, GIF, WebP",
+		"arrowDirection": "Dirección de la flecha",
+		"strokeWidth": "Grosor del trazo: {{width}}px",
+		"arrowColor": "Color de la flecha",
+		"deleteAnnotation": "Eliminar anotación",
+		"shortcutsAndTips": "Atajos y consejos",
+		"tipMovePlayhead": "Mueve el cabezal de reproducción a la sección de anotación superpuesta y selecciona un elemento.",
+		"tipTabCycle": "Usa Tab para recorrer los elementos superpuestos.",
+		"tipShiftTabCycle": "Usa Shift+Tab para recorrer hacia atrás.",
+		"invalidImageType": "Tipo de archivo no válido",
+		"imageFormatsOnly": "Por favor sube un archivo de imagen JPG, PNG, GIF o WebP.",
+		"imageUploadSuccess": "¡Imagen subida exitosamente!",
+		"failedImageUpload": "Error al subir la imagen"
+	},
+	"fontStyles": {
+		"classic": "Clásico",
+		"editor": "Editor",
+		"strong": "Fuerte",
+		"typewriter": "Máquina de escribir",
+		"deco": "Deco",
+		"simple": "Simple",
+		"modern": "Moderno",
+		"clean": "Limpio"
+	},
+	"customFont": {
+		"dialogTitle": "Agregar fuente de Google",
+		"urlLabel": "URL de importación de Google Fonts",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "Obtén esto de Google Fonts: Selecciona una fuente → Haz clic en \"Get font\" → Copia la URL de @import",
+		"nameLabel": "Nombre para mostrar",
+		"namePlaceholder": "Mi fuente personalizada",
+		"nameHelp": "Así aparecerá la fuente en el selector de fuentes",
+		"addButton": "Agregar fuente",
+		"addingButton": "Agregando...",
+		"errorEmptyUrl": "Por favor ingresa una URL de importación de Google Fonts",
+		"errorInvalidUrl": "Por favor ingresa una URL válida de Google Fonts",
+		"errorEmptyName": "Por favor ingresa un nombre de fuente",
+		"errorExtractFailed": "No se pudo extraer la familia de fuentes de la URL",
+		"successMessage": "Fuente \"{{fontName}}\" agregada exitosamente",
+		"failedToAdd": "Error al agregar la fuente",
+		"errorTimeout": "La fuente tardó demasiado en cargarse. Por favor verifica la URL e intenta de nuevo.",
+		"errorLoadFailed": "No se pudo cargar la fuente. Por favor verifica que la URL de Google Fonts sea correcta."
+	},
+	"language": {
+		"title": "Idioma"
+	}
+}

src/i18n/locales/es/shortcuts.json

@@ -0,0 +1,36 @@
+{
+	"title": "Atajos de teclado",
+	"customize": "Personalizar",
+	"configurable": "Configurables",
+	"fixed": "Fijos",
+	"pressKey": "Presiona una tecla…",
+	"clickToChange": "Haz clic para cambiar",
+	"pressEscToCancel": "Presiona Esc para cancelar",
+	"helpText": "Haz clic en un atajo y luego presiona la nueva combinación de teclas. Presiona Esc para cancelar.",
+	"resetToDefaults": "Restablecer valores predeterminados",
+	"alreadyUsedBy": "Ya está en uso por {{action}}",
+	"swap": "Intercambiar",
+	"reservedShortcut": "Este atajo está reservado para \"{{label}}\" y no se puede reasignar.",
+	"savedToast": "Atajos de teclado guardados",
+	"resetToast": "Restablecido a los atajos predeterminados — haz clic en Guardar para aplicar",
+	"actions": {
+		"addZoom": "Agregar zoom",
+		"addTrim": "Agregar recorte",
+		"addSpeed": "Agregar velocidad",
+		"addAnnotation": "Agregar anotación",
+		"addKeyframe": "Agregar fotograma clave",
+		"deleteSelected": "Eliminar seleccionado",
+		"playPause": "Reproducir / Pausar"
+	},
+	"fixedActions": {
+		"undo": "Deshacer",
+		"redo": "Rehacer",
+		"cycleAnnotationsForward": "Recorrer anotaciones hacia adelante",
+		"cycleAnnotationsBackward": "Recorrer anotaciones hacia atrás",
+		"deleteSelectedAlt": "Eliminar seleccionado (alt)",
+		"panTimeline": "Desplazar línea de tiempo",
+		"zoomTimeline": "Zoom en línea de tiempo",
+		"frameBack": "Fotograma anterior",
+		"frameForward": "Fotograma siguiente"
+	}
+}

src/i18n/locales/es/timeline.json

@@ -0,0 +1,50 @@
+{
+	"buttons": {
+		"addZoom": "Agregar zoom (Z)",
+		"suggestZooms": "Sugerir zooms desde el cursor",
+		"addTrim": "Agregar recorte (T)",
+		"addAnnotation": "Agregar anotación (A)",
+		"addSpeed": "Agregar velocidad (S)"
+	},
+	"hints": {
+		"pressZoom": "Presiona Z para agregar zoom",
+		"pressTrim": "Presiona T para agregar recorte",
+		"pressAnnotation": "Presiona A para agregar anotación",
+		"pressSpeed": "Presiona S para agregar velocidad"
+	},
+	"labels": {
+		"pan": "Desplazar",
+		"zoom": "Zoom",
+		"zoomItem": "Zoom {{index}}",
+		"trimItem": "Recorte {{index}}",
+		"speedItem": "Velocidad {{index}}",
+		"annotationItem": "Anotación",
+		"imageItem": "Imagen",
+		"emptyText": "Texto vacío"
+	},
+	"emptyState": {
+		"noVideo": "No hay video cargado",
+		"dragAndDrop": "Arrastra y suelta un video para comenzar a editar"
+	},
+	"errors": {
+		"cannotPlaceZoom": "No se puede colocar el zoom aquí",
+		"zoomExistsAtLocation": "Ya existe un zoom en esta ubicación o no hay suficiente espacio disponible.",
+		"zoomSuggestionUnavailable": "El controlador de sugerencias de zoom no está disponible",
+		"noCursorTelemetry": "No hay telemetría de cursor disponible",
+		"noCursorTelemetryDescription": "Graba una captura de pantalla primero para generar sugerencias basadas en el cursor.",
+		"noUsableTelemetry": "No hay telemetría de cursor utilizable",
+		"noUsableTelemetryDescription": "La grabación no incluye suficientes datos de movimiento del cursor.",
+		"noDwellMoments": "No se encontraron momentos claros de pausa del cursor",
+		"noDwellMomentsDescription": "Intenta una grabación con pausas más lentas del cursor en acciones importantes.",
+		"noAutoZoomSlots": "No hay espacios de auto-zoom disponibles",
+		"noAutoZoomSlotsDescription": "Los puntos de pausa detectados se superponen con regiones de zoom existentes.",
+		"cannotPlaceTrim": "No se puede colocar el recorte aquí",
+		"trimExistsAtLocation": "Ya existe un recorte en esta ubicación o no hay suficiente espacio disponible.",
+		"cannotPlaceSpeed": "No se puede colocar la velocidad aquí",
+		"speedExistsAtLocation": "Ya existe una región de velocidad en esta ubicación o no hay suficiente espacio disponible."
+	},
+	"success": {
+		"addedZoomSuggestions": "Se agregó {{count}} sugerencia de zoom basada en el cursor",
+		"addedZoomSuggestionsPlural": "Se agregaron {{count}} sugerencias de zoom basadas en el cursor"
+	}
+}

src/i18n/locales/zh-CN/common.json

@@ -0,0 +1,29 @@
+{
+	"actions": {
+		"cancel": "取消",
+		"save": "保存",
+		"delete": "删除",
+		"close": "关闭",
+		"share": "分享",
+		"done": "完成",
+		"open": "打开",
+		"upload": "上传",
+		"export": "导出",
+		"file": "文件",
+		"edit": "编辑",
+		"view": "视图",
+		"window": "窗口",
+		"quit": "退出",
+		"stopRecording": "停止录制"
+	},
+	"playback": {
+		"play": "播放",
+		"pause": "暂停",
+		"fullscreen": "全屏",
+		"exitFullscreen": "退出全屏"
+	},
+	"locale": {
+		"name": "中文",
+		"short": "中文"
+	}
+}

src/i18n/locales/zh-CN/dialogs.json

@@ -0,0 +1,68 @@
+{
+	"export": {
+		"complete": "导出完成",
+		"yourFormatReady": "您的 {{format}} 已准备就绪",
+		"showInFolder": "在文件夹中显示",
+		"finalizingVideo": "正在完成视频导出...",
+		"compilingGifProgress": "正在编译 GIF... {{progress}}%",
+		"compilingGifWait": "正在编译 GIF... 这可能需要一些时间",
+		"takeMoment": "这可能需要一点时间...",
+		"failed": "导出失败",
+		"tryAgain": "请重试",
+		"finalizingVideoTitle": "正在完成视频",
+		"compilingGif": "正在编译 GIF",
+		"exportingFormat": "正在导出 {{format}}",
+		"compiling": "编译中",
+		"renderingFrames": "渲染帧",
+		"processing": "处理中...",
+		"finalizing": "正在完成...",
+		"compilingStatus": "编译中...",
+		"status": "状态",
+		"format": "格式",
+		"frames": "帧",
+		"cancelExport": "取消导出",
+		"savedSuccessfully": "{{format}} 保存成功！"
+	},
+	"tutorial": {
+		"triggerLabel": "剪辑功能说明",
+		"title": "剪辑功能说明",
+		"description": "了解如何剪掉视频中不需要的部分。",
+		"explanation": "剪辑工具通过定义您要",
+		"explanationRemove": "移除",
+		"explanationCovered": "覆盖",
+		"explanationEnd": "的片段来工作。被红色剪辑区域覆盖的部分将在导出时被剪掉。",
+		"visualExample": "示例演示",
+		"removed": "已移除",
+		"kept": "保留",
+		"part1": "第 1 部分",
+		"part2": "第 2 部分",
+		"part3": "第 3 部分",
+		"finalVideo": "最终视频",
+		"step1Title": "1. 添加剪辑",
+		"step1Description": "按 T 或点击剪刀图标来标记要移除的片段。",
+		"step2Title": "2. 调整",
+		"step2Description": "拖动红色区域的边缘，精确覆盖您要剪掉的部分。"
+	},
+	"unsavedChanges": {
+		"title": "未保存的更改",
+		"message": "您有未保存的更改。",
+		"detail": "是否在关闭前保存项目？",
+		"saveAndClose": "保存并关闭",
+		"discardAndClose": "放弃并关闭",
+		"loadProject": "加载项目…",
+		"saveProject": "保存项目…",
+		"saveProjectAs": "项目另存为…"
+	},
+	"fileDialogs": {
+		"saveGif": "保存导出的 GIF",
+		"saveVideo": "保存导出的视频",
+		"selectVideo": "选择视频文件",
+		"saveProject": "保存 OpenScreen 项目",
+		"openProject": "打开 OpenScreen 项目",
+		"gifImage": "GIF 图片",
+		"mp4Video": "MP4 视频",
+		"videoFiles": "视频文件",
+		"openscreenProject": "OpenScreen 项目",
+		"allFiles": "所有文件"
+	}
+}

src/i18n/locales/zh-CN/editor.json

@@ -0,0 +1,35 @@
+{
+	"errors": {
+		"noVideoLoaded": "未加载视频",
+		"videoNotReady": "视频未就绪",
+		"unableToDetermineSourcePath": "无法确定源视频路径",
+		"failedToSaveGif": "保存 GIF 失败",
+		"gifExportFailed": "GIF 导出失败",
+		"failedToSaveVideo": "保存视频失败",
+		"exportFailed": "导出失败",
+		"exportFailedWithError": "导出失败：{{error}}",
+		"failedToSaveExport": "保存导出文件失败",
+		"failedToSaveExportedVideo": "保存导出的视频失败",
+		"failedToRevealInFolder": "在文件夹中显示时出错：{{error}}"
+	},
+	"export": {
+		"canceled": "导出已取消",
+		"exportedSuccessfully": "{{format}} 导出成功"
+	},
+	"project": {
+		"saveCanceled": "项目保存已取消",
+		"failedToSave": "保存项目失败",
+		"savedTo": "项目已保存至 {{path}}",
+		"failedToLoad": "加载项目失败",
+		"invalidFormat": "无效的项目文件格式",
+		"loadedFrom": "项目已从 {{path}} 加载"
+	},
+	"recording": {
+		"failedCameraAccess": "请求摄像头权限失败。",
+		"cameraBlocked": "摄像头权限已被阻止。请在系统设置中启用以使用摄像头。",
+		"systemAudioUnavailable": "系统音频不可用。将在无系统音频的情况下录制。",
+		"microphoneDenied": "麦克风权限被拒绝。录制将继续，但不包含音频。",
+		"cameraDenied": "摄像头权限被拒绝。录制将继续，但不包含摄像头画面。",
+		"permissionDenied": "录屏权限被拒绝。请允许屏幕录制。"
+	}
+}

src/i18n/locales/zh-CN/launch.json

@@ -0,0 +1,37 @@
+{
+	"tooltips": {
+		"hideHUD": "隐藏控制面板",
+		"closeApp": "关闭应用",
+		"restartRecording": "重新开始录制",
+		"cancelRecording": "取消录制",
+		"pauseRecording": "暂停录制",
+		"resumeRecording": "继续录制",
+		"openVideoFile": "打开视频文件",
+		"openProject": "打开项目"
+	},
+	"audio": {
+		"enableSystemAudio": "启用系统音频",
+		"disableSystemAudio": "禁用系统音频",
+		"enableMicrophone": "启用麦克风",
+		"disableMicrophone": "禁用麦克风",
+		"defaultMicrophone": "默认麦克风"
+	},
+	"webcam": {
+		"enableWebcam": "启用摄像头",
+		"disableWebcam": "禁用摄像头",
+		"defaultCamera": "默认摄像头",
+		"searching": "正在搜索...",
+		"noneFound": "未找到摄像头",
+		"unavailable": "摄像头不可用"
+	},
+	"sourceSelector": {
+		"loading": "正在加载源...",
+		"screens": "屏幕 ({{count}})",
+		"windows": "窗口 ({{count}})",
+		"defaultSourceName": "屏幕"
+	},
+	"recording": {
+		"selectSource": "请选择要录制的源"
+	},
+	"language": "语言"
+}

src/i18n/locales/zh-CN/settings.json

@@ -0,0 +1,159 @@
+{
+	"zoom": {
+		"level": "缩放级别",
+		"selectRegion": "选择要调整的缩放区域",
+		"deleteZoom": "删除缩放",
+		"focusMode": {
+			"title": "对焦模式",
+			"manual": "手动",
+			"auto": "自动",
+			"autoDescription": "摄像头跟随录制时的光标位置"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "播放速度",
+		"selectRegion": "选择要调整的速度区域",
+		"deleteRegion": "删除速度区域"
+	},
+	"trim": {
+		"deleteRegion": "删除剪辑区域"
+	},
+	"layout": {
+		"title": "布局",
+		"preset": "预设",
+		"selectPreset": "选择预设",
+		"pictureInPicture": "画中画",
+		"verticalStack": "垂直堆叠",
+		"webcamShape": "摄像头形状"
+	},
+	"effects": {
+		"title": "视频效果",
+		"blurBg": "模糊背景",
+		"motionBlur": "运动模糊",
+		"off": "关",
+		"shadow": "阴影",
+		"roundness": "圆角",
+		"padding": "内边距"
+	},
+	"background": {
+		"title": "背景",
+		"image": "图片",
+		"color": "颜色",
+		"gradient": "渐变",
+		"uploadCustom": "上传自定义",
+		"gradientLabel": "渐变 {{index}}"
+	},
+	"crop": {
+		"title": "裁剪",
+		"cropVideo": "裁剪视频",
+		"dragInstruction": "拖动每一侧来调整裁剪区域",
+		"ratio": "比例",
+		"free": "自由",
+		"done": "完成",
+		"lockAspectRatio": "锁定宽高比",
+		"unlockAspectRatio": "解锁宽高比"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "MP4 视频",
+		"mp4Description": "高质量视频文件",
+		"gifAnimation": "GIF 动画",
+		"gifDescription": "可分享的动态图片"
+	},
+	"exportQuality": {
+		"title": "导出质量",
+		"low": "低",
+		"medium": "中",
+		"high": "高"
+	},
+	"gifSettings": {
+		"frameRate": "GIF 帧率",
+		"size": "GIF 尺寸",
+		"loop": "循环 GIF"
+	},
+	"project": {
+		"save": "保存项目",
+		"load": "加载项目"
+	},
+	"export": {
+		"videoButton": "导出视频",
+		"gifButton": "导出 GIF",
+		"chooseSaveLocation": "选择保存位置"
+	},
+	"links": {
+		"reportBug": "报告错误",
+		"starOnGithub": "在 GitHub 上加星"
+	},
+	"imageUpload": {
+		"invalidFileType": "无效的文件类型",
+		"jpgOnly": "请上传 JPG 或 JPEG 格式的图片文件。",
+		"uploadSuccess": "自定义图片上传成功！",
+		"failedToUpload": "上传图片失败",
+		"errorReading": "读取文件时出错。"
+	},
+	"annotation": {
+		"title": "标注设置",
+		"active": "活动",
+		"typeText": "文本",
+		"typeImage": "图片",
+		"typeArrow": "箭头",
+		"textContent": "文本内容",
+		"textPlaceholder": "输入您的文本...",
+		"fontStyle": "字体样式",
+		"selectStyle": "选择样式",
+		"size": "大小",
+		"customFonts": "自定义字体",
+		"textColor": "文本颜色",
+		"background": "背景",
+		"none": "无",
+		"color": "颜色",
+		"clearBackground": "清除背景",
+		"uploadImage": "上传图片",
+		"supportedFormats": "支持的格式：JPG、PNG、GIF、WebP",
+		"arrowDirection": "箭头方向",
+		"strokeWidth": "描边宽度：{{width}}px",
+		"arrowColor": "箭头颜色",
+		"deleteAnnotation": "删除标注",
+		"shortcutsAndTips": "快捷键与提示",
+		"tipMovePlayhead": "将播放头移动到重叠的标注区域并选择一个项目。",
+		"tipTabCycle": "使用 Tab 键在重叠项目之间循环切换。",
+		"tipShiftTabCycle": "使用 Shift+Tab 反向循环切换。",
+		"invalidImageType": "无效的文件类型",
+		"imageFormatsOnly": "请上传 JPG、PNG、GIF 或 WebP 格式的图片文件。",
+		"imageUploadSuccess": "图片上传成功！",
+		"failedImageUpload": "上传图片失败"
+	},
+	"fontStyles": {
+		"classic": "经典",
+		"editor": "编辑器",
+		"strong": "粗体",
+		"typewriter": "打字机",
+		"deco": "装饰",
+		"simple": "简约",
+		"modern": "现代",
+		"clean": "简洁"
+	},
+	"customFont": {
+		"dialogTitle": "添加 Google 字体",
+		"urlLabel": "Google Fonts 导入 URL",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "从 Google Fonts 获取：选择字体 → 点击 \"Get font\" → 复制 @import URL",
+		"nameLabel": "显示名称",
+		"namePlaceholder": "我的自定义字体",
+		"nameHelp": "这是字体在字体选择器中显示的名称",
+		"addButton": "添加字体",
+		"addingButton": "添加中...",
+		"errorEmptyUrl": "请输入 Google Fonts 导入 URL",
+		"errorInvalidUrl": "请输入有效的 Google Fonts URL",
+		"errorEmptyName": "请输入字体名称",
+		"errorExtractFailed": "无法从 URL 中提取字体系列",
+		"successMessage": "字体 \"{{fontName}}\" 添加成功",
+		"failedToAdd": "添加字体失败",
+		"errorTimeout": "字体加载时间过长。请检查 URL 并重试。",
+		"errorLoadFailed": "无法加载该字体。请确认 Google Fonts URL 是否正确。"
+	},
+	"language": {
+		"title": "语言"
+	}
+}

src/i18n/locales/zh-CN/shortcuts.json

@@ -0,0 +1,36 @@
+{
+	"title": "键盘快捷键",
+	"customize": "自定义",
+	"configurable": "可配置",
+	"fixed": "固定",
+	"pressKey": "请按下按键…",
+	"clickToChange": "点击以更改",
+	"pressEscToCancel": "按 Esc 取消",
+	"helpText": "点击一个快捷键，然后按下新的组合键。按 Esc 取消。",
+	"resetToDefaults": "恢复默认设置",
+	"alreadyUsedBy": "已被 \"{{action}}\" 使用",
+	"swap": "交换",
+	"reservedShortcut": "此快捷键已保留给 \"{{label}}\"，无法重新分配。",
+	"savedToast": "键盘快捷键已保存",
+	"resetToast": "已恢复默认快捷键 — 点击保存以应用",
+	"actions": {
+		"addZoom": "添加缩放",
+		"addTrim": "添加剪辑",
+		"addSpeed": "添加速度",
+		"addAnnotation": "添加标注",
+		"addKeyframe": "添加关键帧",
+		"deleteSelected": "删除所选",
+		"playPause": "播放 / 暂停"
+	},
+	"fixedActions": {
+		"undo": "撤销",
+		"redo": "重做",
+		"cycleAnnotationsForward": "向前切换标注",
+		"cycleAnnotationsBackward": "向后切换标注",
+		"deleteSelectedAlt": "删除所选（替代）",
+		"panTimeline": "平移时间轴",
+		"zoomTimeline": "缩放时间轴",
+		"frameBack": "上一帧",
+		"frameForward": "下一帧"
+	}
+}

src/i18n/locales/zh-CN/timeline.json

@@ -0,0 +1,50 @@
+{
+	"buttons": {
+		"addZoom": "添加缩放 (Z)",
+		"suggestZooms": "根据光标建议缩放",
+		"addTrim": "添加剪辑 (T)",
+		"addAnnotation": "添加标注 (A)",
+		"addSpeed": "添加速度 (S)"
+	},
+	"hints": {
+		"pressZoom": "按 Z 添加缩放",
+		"pressTrim": "按 T 添加剪辑",
+		"pressAnnotation": "按 A 添加标注",
+		"pressSpeed": "按 S 添加速度"
+	},
+	"labels": {
+		"pan": "平移",
+		"zoom": "缩放",
+		"zoomItem": "缩放 {{index}}",
+		"trimItem": "剪辑 {{index}}",
+		"speedItem": "速度 {{index}}",
+		"annotationItem": "标注",
+		"imageItem": "图片",
+		"emptyText": "空文本"
+	},
+	"emptyState": {
+		"noVideo": "未加载视频",
+		"dragAndDrop": "拖放视频以开始编辑"
+	},
+	"errors": {
+		"cannotPlaceZoom": "无法在此处放置缩放",
+		"zoomExistsAtLocation": "此位置已存在缩放或没有足够的空间。",
+		"zoomSuggestionUnavailable": "缩放建议处理器不可用",
+		"noCursorTelemetry": "无可用的光标遥测数据",
+		"noCursorTelemetryDescription": "请先录制一段屏幕录像以生成基于光标的建议。",
+		"noUsableTelemetry": "无可用的光标遥测数据",
+		"noUsableTelemetryDescription": "录制内容没有包含足够的光标移动数据。",
+		"noDwellMoments": "未找到明确的光标停留时刻",
+		"noDwellMomentsDescription": "请尝试在重要操作上进行较慢光标停留的录制。",
+		"noAutoZoomSlots": "无可用的自动缩放位置",
+		"noAutoZoomSlotsDescription": "检测到的停留点与现有缩放区域重叠。",
+		"cannotPlaceTrim": "无法在此处放置剪辑",
+		"trimExistsAtLocation": "此位置已存在剪辑或没有足够的空间。",
+		"cannotPlaceSpeed": "无法在此处放置速度",
+		"speedExistsAtLocation": "此位置已存在速度区域或没有足够的空间。"
+	},
+	"success": {
+		"addedZoomSuggestions": "已添加 {{count}} 个基于光标的缩放建议",
+		"addedZoomSuggestionsPlural": "已添加 {{count}} 个基于光标的缩放建议"
+	}
+}

src/lib/__tests__/frameStepNavigation.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, it } from "vitest";
+
+import { computeFrameStepTime, FRAME_DURATION_SEC } from "@/lib/frameStep";
+
+describe("computeFrameStepTime", () => {
+	const duration = 10;
+
+	it("moves forward by one frame from the middle", () => {
+		const result = computeFrameStepTime(5, duration, "forward");
+		expect(result).toBeCloseTo(5 + FRAME_DURATION_SEC, 10);
+	});
+
+	it("moves backward by one frame from the middle", () => {
+		const result = computeFrameStepTime(5, duration, "backward");
+		expect(result).toBeCloseTo(5 - FRAME_DURATION_SEC, 10);
+	});
+
+	it("clamps to 0 when stepping backward at the beginning", () => {
+		const result = computeFrameStepTime(0, duration, "backward");
+		expect(result).toBe(0);
+	});
+
+	it("clamps to 0 when stepping backward near the beginning", () => {
+		const result = computeFrameStepTime(FRAME_DURATION_SEC / 2, duration, "backward");
+		expect(result).toBe(0);
+	});
+
+	it("clamps to duration when stepping forward at the end", () => {
+		const result = computeFrameStepTime(duration, duration, "forward");
+		expect(result).toBe(duration);
+	});
+
+	it("clamps to duration when stepping forward near the end", () => {
+		const result = computeFrameStepTime(duration - FRAME_DURATION_SEC / 2, duration, "forward");
+		expect(result).toBe(duration);
+	});
+
+	it("handles duration of 0 gracefully", () => {
+		expect(computeFrameStepTime(0, 0, "forward")).toBe(0);
+		expect(computeFrameStepTime(0, 0, "backward")).toBe(0);
+	});
+});

src/lib/assetPath.ts

@@ -1,4 +1,19 @@
+function encodeRelativeAssetPath(relativePath: string): string {
+	return relativePath
+		.replace(/^\/+/, "")
+		.split("/")
+		.filter(Boolean)
+		.map((part) => encodeURIComponent(part))
+		.join("/");
+}
+
+function ensureTrailingSlash(value: string): string {
+	return value.endsWith("/") ? value : `${value}/`;
+}
+
 export async function getAssetPath(relativePath: string): Promise<string> {
+	const encodedRelativePath = encodeRelativeAssetPath(relativePath);
+
 	try {
 		if (typeof window !== "undefined") {
 			// If running in a dev server (http/https), prefer the web-served path
@@ -7,17 +22,13 @@ export async function getAssetPath(relativePath: string): Promise<string> {
 				window.location.protocol &&
 				window.location.protocol.startsWith("http")
 			) {
-				return `/${relativePath.replace(/^\//, "")}`;
+				return `/${encodedRelativePath}`;
 			}
 
-			if (
-				(window as any).electronAPI &&
-				typeof (window as any).electronAPI.getAssetBasePath === "function"
-			) {
-				const base = await (window as any).electronAPI.getAssetBasePath();
+			if (window.electronAPI && typeof window.electronAPI.getAssetBasePath === "function") {
+				const base = await window.electronAPI.getAssetBasePath();
 				if (base) {
-					const normalized = base.replace(/\\/g, "/");
-					return `file://${normalized}/${relativePath}`;
+					return new URL(encodedRelativePath, ensureTrailingSlash(base)).toString();
 				}
 			}
 		}
@@ -26,7 +37,7 @@ export async function getAssetPath(relativePath: string): Promise<string> {
 	}
 
 	// Fallback for web/dev server: public/wallpapers are served at '/wallpapers/...'
-	return `/${relativePath.replace(/^\//, "")}`;
+	return `/${encodedRelativePath}`;
 }
 
 export default getAssetPath;

src/lib/compositeLayout.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it } from "vitest";
+import { computeCompositeLayout } from "./compositeLayout";
+
+describe("computeCompositeLayout", () => {
+	it("anchors the overlay in the lower-right corner", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout!.webcamRect).not.toBeNull();
+		expect(layout!.webcamRect!.x + layout!.webcamRect!.width).toBeLessThanOrEqual(1920);
+		expect(layout!.webcamRect!.y + layout!.webcamRect!.height).toBeLessThanOrEqual(1080);
+		expect(layout!.webcamRect!.x).toBeGreaterThan(1920 / 2);
+		expect(layout!.webcamRect!.y).toBeGreaterThan(1080 / 2);
+	});
+
+	it("keeps the overlay within the configured stage fraction while preserving aspect ratio", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1280, height: 720 },
+			screenSize: { width: 1280, height: 720 },
+			webcamSize: { width: 1920, height: 1080 },
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout!.webcamRect).not.toBeNull();
+		expect(layout!.webcamRect!.width).toBeLessThanOrEqual(Math.round(1280 * 0.18) + 1);
+		expect(layout!.webcamRect!.height).toBeLessThanOrEqual(Math.round(720 * 0.18) + 1);
+		expect(
+			Math.abs(layout!.webcamRect!.width * 1080 - layout!.webcamRect!.height * 1920),
+		).toBeLessThanOrEqual(1920);
+	});
+
+	it("uses cover-style full-width stacking in vertical stack mode", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			maxContentSize: { width: 1536, height: 864 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			layoutPreset: "vertical-stack",
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout?.screenRect).toEqual({
+			x: 0,
+			y: 0,
+			width: 1920,
+			height: 0,
+		});
+		expect(layout?.webcamRect).toEqual({
+			x: 0,
+			y: 0,
+			width: 1920,
+			height: 1080,
+			borderRadius: 0,
+		});
+		expect(layout?.screenCover).toBe(true);
+	});
+
+	it("fills the canvas with the screen when vertical stack has no webcam", () => {
+		const layout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			maxContentSize: { width: 1536, height: 864 },
+			screenSize: { width: 1920, height: 1080 },
+			layoutPreset: "vertical-stack",
+		});
+
+		expect(layout).not.toBeNull();
+		expect(layout?.screenRect).toEqual({
+			x: 0,
+			y: 0,
+			width: 1920,
+			height: 1080,
+		});
+		expect(layout?.webcamRect).toBeNull();
+		expect(layout?.screenCover).toBe(true);
+	});
+
+	it("forces circular and square masks to use square dimensions", () => {
+		const circularLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "circle",
+		});
+		const squareLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "square",
+		});
+
+		expect(circularLayout?.webcamRect).not.toBeNull();
+		expect(squareLayout?.webcamRect).not.toBeNull();
+		expect(circularLayout?.webcamRect?.width).toBe(circularLayout?.webcamRect?.height);
+		expect(squareLayout?.webcamRect?.width).toBe(squareLayout?.webcamRect?.height);
+		expect(circularLayout?.webcamRect?.maskShape).toBe("circle");
+		expect(squareLayout?.webcamRect?.maskShape).toBe("square");
+	});
+
+	it("applies larger rounding for the rounded webcam mask", () => {
+		const roundedLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "rounded",
+		});
+		const rectangleLayout = computeCompositeLayout({
+			canvasSize: { width: 1920, height: 1080 },
+			screenSize: { width: 1920, height: 1080 },
+			webcamSize: { width: 1280, height: 720 },
+			webcamMaskShape: "rectangle",
+		});
+
+		expect(roundedLayout?.webcamRect).not.toBeNull();
+		expect(rectangleLayout?.webcamRect).not.toBeNull();
+		expect(roundedLayout?.webcamRect?.borderRadius).toBeGreaterThan(
+			rectangleLayout?.webcamRect?.borderRadius ?? 0,
+		);
+		expect(roundedLayout?.webcamRect?.maskShape).toBe("rounded");
+	});
+});

src/lib/compositeLayout.ts

@@ -0,0 +1,274 @@
+export interface RenderRect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
+export interface StyledRenderRect extends RenderRect {
+	borderRadius: number;
+	maskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+}
+
+export interface Size {
+	width: number;
+	height: number;
+}
+
+export type WebcamLayoutPreset = "picture-in-picture" | "vertical-stack";
+
+export interface WebcamLayoutShadow {
+	color: string;
+	blur: number;
+	offsetX: number;
+	offsetY: number;
+}
+
+interface BorderRadiusRule {
+	max: number;
+	min: number;
+	fraction: number;
+}
+
+interface OverlayTransform {
+	type: "overlay";
+	maxStageFraction: number;
+	marginFraction: number;
+	minMargin: number;
+	minSize: number;
+}
+
+interface StackTransform {
+	type: "stack";
+	gap: number;
+}
+
+export interface WebcamLayoutPresetDefinition {
+	label: string;
+	transform: OverlayTransform | StackTransform;
+	borderRadius: BorderRadiusRule;
+	shadow: WebcamLayoutShadow | null;
+}
+
+export interface WebcamCompositeLayout {
+	screenRect: RenderRect;
+	webcamRect: StyledRenderRect | null;
+	/** When true, the video should be scaled to cover screenRect (cropping overflow). */
+	screenCover?: boolean;
+}
+
+const MAX_STAGE_FRACTION = 0.18;
+const MARGIN_FRACTION = 0.02;
+const MAX_BORDER_RADIUS = 24;
+const WEBCAM_LAYOUT_PRESET_MAP: Record<WebcamLayoutPreset, WebcamLayoutPresetDefinition> = {
+	"picture-in-picture": {
+		label: "Picture in Picture",
+		transform: {
+			type: "overlay",
+			maxStageFraction: MAX_STAGE_FRACTION,
+			marginFraction: MARGIN_FRACTION,
+			minMargin: 0,
+			minSize: 0,
+		},
+		borderRadius: {
+			max: MAX_BORDER_RADIUS,
+			min: 12,
+			fraction: 0.12,
+		},
+		shadow: {
+			color: "rgba(0,0,0,0.35)",
+			blur: 24,
+			offsetX: 0,
+			offsetY: 10,
+		},
+	},
+	"vertical-stack": {
+		label: "Vertical Stack",
+		transform: {
+			type: "stack",
+			gap: 0,
+		},
+		borderRadius: {
+			max: 0,
+			min: 0,
+			fraction: 0,
+		},
+		shadow: null,
+	},
+};
+
+export const WEBCAM_LAYOUT_PRESETS = Object.entries(WEBCAM_LAYOUT_PRESET_MAP).map(
+	([value, preset]) => ({
+		value: value as WebcamLayoutPreset,
+		label: preset.label,
+	}),
+);
+
+export function getWebcamLayoutPresetDefinition(
+	preset: WebcamLayoutPreset = "picture-in-picture",
+): WebcamLayoutPresetDefinition {
+	return WEBCAM_LAYOUT_PRESET_MAP[preset];
+}
+
+export function getWebcamLayoutCssBoxShadow(
+	preset: WebcamLayoutPreset = "picture-in-picture",
+): string {
+	const shadow = getWebcamLayoutPresetDefinition(preset).shadow;
+	return shadow
+		? `${shadow.offsetX}px ${shadow.offsetY}px ${shadow.blur}px ${shadow.color}`
+		: "none";
+}
+
+export function computeCompositeLayout(params: {
+	canvasSize: Size;
+	maxContentSize?: Size;
+	screenSize: Size;
+	webcamSize?: Size | null;
+	layoutPreset?: WebcamLayoutPreset;
+	webcamPosition?: { cx: number; cy: number } | null;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+}): WebcamCompositeLayout | null {
+	const {
+		canvasSize,
+		maxContentSize = canvasSize,
+		screenSize,
+		webcamSize,
+		layoutPreset = "picture-in-picture",
+		webcamPosition,
+		webcamMaskShape = "rectangle",
+	} = params;
+	const { width: canvasWidth, height: canvasHeight } = canvasSize;
+	const { width: screenWidth, height: screenHeight } = screenSize;
+	const webcamWidth = webcamSize?.width;
+	const webcamHeight = webcamSize?.height;
+	const preset = getWebcamLayoutPresetDefinition(layoutPreset);
+
+	if (canvasWidth <= 0 || canvasHeight <= 0 || screenWidth <= 0 || screenHeight <= 0) {
+		return null;
+	}
+
+	if (preset.transform.type === "stack") {
+		if (!webcamWidth || !webcamHeight || webcamWidth <= 0 || webcamHeight <= 0) {
+			// No webcam — screen fills the entire canvas (cover mode)
+			return {
+				screenRect: { x: 0, y: 0, width: canvasWidth, height: canvasHeight },
+				webcamRect: null,
+				screenCover: true,
+			};
+		}
+
+		// Webcam: full width at the bottom, maintaining its aspect ratio
+		const webcamAspect = webcamWidth / webcamHeight;
+		const resolvedWebcamWidth = canvasWidth;
+		const resolvedWebcamHeight = Math.round(canvasWidth / webcamAspect);
+
+		// Screen: fills remaining space at the top (cover mode — may crop sides)
+		const screenRectHeight = canvasHeight - resolvedWebcamHeight;
+
+		return {
+			screenRect: {
+				x: 0,
+				y: 0,
+				width: canvasWidth,
+				height: Math.max(0, screenRectHeight),
+			},
+			webcamRect: {
+				x: 0,
+				y: Math.max(0, screenRectHeight),
+				width: resolvedWebcamWidth,
+				height: resolvedWebcamHeight,
+				borderRadius: 0,
+			},
+			screenCover: true,
+		};
+	}
+
+	const transform = preset.transform;
+	const screenRect = centerRect({
+		canvasSize,
+		size: screenSize,
+		maxSize: maxContentSize,
+	});
+
+	if (!webcamWidth || !webcamHeight || webcamWidth <= 0 || webcamHeight <= 0) {
+		return { screenRect, webcamRect: null };
+	}
+
+	const margin = Math.max(
+		transform.minMargin,
+		Math.round(Math.min(canvasWidth, canvasHeight) * transform.marginFraction),
+	);
+	const maxWidth = Math.max(transform.minSize, canvasWidth * transform.maxStageFraction);
+	const maxHeight = Math.max(transform.minSize, canvasHeight * transform.maxStageFraction);
+	const scale = Math.min(maxWidth / webcamWidth, maxHeight / webcamHeight);
+	let width = Math.round(webcamWidth * scale);
+	let height = Math.round(webcamHeight * scale);
+
+	// Shape-specific dimension adjustments
+	if (webcamMaskShape === "circle" || webcamMaskShape === "square") {
+		const side = Math.min(width, height);
+		width = side;
+		height = side;
+	}
+
+	let webcamX: number;
+	let webcamY: number;
+
+	if (webcamPosition) {
+		// Custom position: cx/cy represent the center of the webcam as a fraction of the canvas
+		webcamX = Math.round(webcamPosition.cx * canvasWidth - width / 2);
+		webcamY = Math.round(webcamPosition.cy * canvasHeight - height / 2);
+		// Clamp to stay within canvas bounds
+		webcamX = Math.max(0, Math.min(canvasWidth - width, webcamX));
+		webcamY = Math.max(0, Math.min(canvasHeight - height, webcamY));
+	} else {
+		// Default: bottom-right with margin
+		webcamX = Math.max(0, Math.round(canvasWidth - margin - width));
+		webcamY = Math.max(0, Math.round(canvasHeight - margin - height));
+	}
+
+	// Shape-specific border radius
+	let borderRadius: number;
+	if (webcamMaskShape === "rounded") {
+		borderRadius = Math.round(Math.min(width, height) * 0.3);
+	} else if (webcamMaskShape === "circle") {
+		borderRadius = Math.round(Math.min(width, height) / 2);
+	} else {
+		borderRadius = Math.min(
+			preset.borderRadius.max,
+			Math.max(
+				preset.borderRadius.min,
+				Math.round(Math.min(width, height) * preset.borderRadius.fraction),
+			),
+		);
+	}
+
+	return {
+		screenRect,
+		webcamRect: {
+			x: webcamX,
+			y: webcamY,
+			width,
+			height,
+			borderRadius,
+			maskShape: webcamMaskShape,
+		},
+	};
+}
+
+function centerRect(params: { canvasSize: Size; size: Size; maxSize: Size }): RenderRect {
+	const { canvasSize, size, maxSize } = params;
+	const { width: canvasWidth, height: canvasHeight } = canvasSize;
+	const { width, height } = size;
+	const { width: maxWidth, height: maxHeight } = maxSize;
+	const scale = Math.min(maxWidth / width, maxHeight / height, 1);
+	const resolvedWidth = Math.round(width * scale);
+	const resolvedHeight = Math.round(height * scale);
+
+	return {
+		x: Math.max(0, Math.floor((canvasWidth - resolvedWidth) / 2)),
+		y: Math.max(0, Math.floor((canvasHeight - resolvedHeight) / 2)),
+		width: resolvedWidth,
+		height: resolvedHeight,
+	};
+}

src/lib/exporter/asyncVideoFrameQueue.ts

@@ -0,0 +1,77 @@
+type PendingConsumer = {
+	resolve: (frame: VideoFrame | null) => void;
+	reject: (error: Error) => void;
+};
+
+export class AsyncVideoFrameQueue {
+	private frames: VideoFrame[] = [];
+	private consumers: PendingConsumer[] = [];
+	private error: Error | null = null;
+	private closed = false;
+
+	get length() {
+		return this.frames.length;
+	}
+
+	enqueue(frame: VideoFrame) {
+		if (this.closed) {
+			frame.close();
+			return;
+		}
+
+		const consumer = this.consumers.shift();
+		if (consumer) {
+			consumer.resolve(frame);
+			return;
+		}
+
+		this.frames.push(frame);
+	}
+
+	fail(error: Error) {
+		this.error = error;
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.reject(error);
+		}
+		for (const frame of this.frames) {
+			frame.close();
+		}
+		this.frames = [];
+	}
+
+	close() {
+		this.closed = true;
+		const consumers = this.consumers.splice(0);
+		for (const consumer of consumers) {
+			consumer.resolve(null);
+		}
+	}
+
+	async dequeue(): Promise<VideoFrame | null> {
+		if (this.error) {
+			throw this.error;
+		}
+
+		if (this.frames.length > 0) {
+			return this.frames.shift() ?? null;
+		}
+
+		if (this.closed) {
+			return null;
+		}
+
+		return await new Promise<VideoFrame | null>((resolve, reject) => {
+			this.consumers.push({ resolve, reject });
+		});
+	}
+
+	destroy() {
+		this.close();
+		for (const frame of this.frames) {
+			frame.close();
+		}
+		this.frames = [];
+	}
+}

src/lib/exporter/audioEncoder.ts

@@ -1,14 +1,58 @@
-import type { WebDemuxer } from "web-demuxer";
-import type { TrimRegion } from "@/components/video-editor/types";
+import { WebDemuxer } from "web-demuxer";
+import type { SpeedRegion, TrimRegion } from "@/components/video-editor/types";
 import type { VideoMuxer } from "./muxer";
 
 const AUDIO_BITRATE = 128_000;
 const DECODE_BACKPRESSURE_LIMIT = 20;
+const MIN_SPEED_REGION_DELTA_MS = 0.0001;
 
 export class AudioProcessor {
 	private cancelled = false;
 
-	async process(demuxer: WebDemuxer, muxer: VideoMuxer, trimRegions?: TrimRegion[]): Promise<void> {
+	/**
+	 * Audio export has two modes:
+	 * 1) no speed regions -> fast WebCodecs trim-only pipeline
+	 * 2) speed regions present -> pitch-preserving rendered timeline pipeline
+	 */
+	async process(
+		demuxer: WebDemuxer,
+		muxer: VideoMuxer,
+		videoUrl: string,
+		trimRegions?: TrimRegion[],
+		speedRegions?: SpeedRegion[],
+		readEndSec?: number,
+	): Promise<void> {
+		const sortedTrims = trimRegions ? [...trimRegions].sort((a, b) => a.startMs - b.startMs) : [];
+		const sortedSpeedRegions = speedRegions
+			? [...speedRegions]
+					.filter((region) => region.endMs - region.startMs > MIN_SPEED_REGION_DELTA_MS)
+					.sort((a, b) => a.startMs - b.startMs)
+			: [];
+
+		// Speed edits must use timeline playback to preserve pitch
+		if (sortedSpeedRegions.length > 0) {
+			const renderedAudioBlob = await this.renderPitchPreservedTimelineAudio(
+				videoUrl,
+				sortedTrims,
+				sortedSpeedRegions,
+			);
+			if (!this.cancelled) {
+				await this.muxRenderedAudioBlob(renderedAudioBlob, muxer);
+				return;
+			}
+		}
+
+		// No speed edits: keep the original demux/decode/encode path with trim timestamp remap.
+		await this.processTrimOnlyAudio(demuxer, muxer, sortedTrims, readEndSec);
+	}
+
+	// Legacy trim-only path. This is still used for projects without speed regions.
+	private async processTrimOnlyAudio(
+		demuxer: WebDemuxer,
+		muxer: VideoMuxer,
+		sortedTrims: TrimRegion[],
+		readEndSec?: number,
+	): Promise<void> {
 		let audioConfig: AudioDecoderConfig;
 		try {
 			audioConfig = (await demuxer.getDecoderConfig("audio")) as AudioDecoderConfig;
@@ -23,8 +67,6 @@ export class AudioProcessor {
 			return;
 		}
 
-		const sortedTrims = trimRegions ? [...trimRegions].sort((a, b) => a.startMs - b.startMs) : [];
-
 		// Phase 1: Decode audio from source, skipping trimmed regions
 		const decodedFrames: AudioData[] = [];
 
@@ -34,19 +76,36 @@ export class AudioProcessor {
 		});
 		decoder.configure(audioConfig);
 
-		const reader = (demuxer.read("audio") as ReadableStream<EncodedAudioChunk>).getReader();
+		const safeReadEndSec =
+			typeof readEndSec === "number" && Number.isFinite(readEndSec)
+				? Math.max(0, readEndSec)
+				: undefined;
+		const audioStream = (
+			safeReadEndSec !== undefined
+				? demuxer.read("audio", 0, safeReadEndSec)
+				: demuxer.read("audio")
+		) as ReadableStream<EncodedAudioChunk>;
+		const reader = audioStream.getReader();
 
-		while (!this.cancelled) {
-			const { done, value: chunk } = await reader.read();
-			if (done || !chunk) break;
+		try {
+			while (!this.cancelled) {
+				const { done, value: chunk } = await reader.read();
+				if (done || !chunk) break;
 
-			const timestampMs = chunk.timestamp / 1000;
-			if (this.isInTrimRegion(timestampMs, sortedTrims)) continue;
+				const timestampMs = chunk.timestamp / 1000;
+				if (this.isInTrimRegion(timestampMs, sortedTrims)) continue;
 
-			decoder.decode(chunk);
+				decoder.decode(chunk);
 
-			while (decoder.decodeQueueSize > DECODE_BACKPRESSURE_LIMIT && !this.cancelled) {
-				await new Promise((resolve) => setTimeout(resolve, 1));
+				while (decoder.decodeQueueSize > DECODE_BACKPRESSURE_LIMIT && !this.cancelled) {
+					await new Promise((resolve) => setTimeout(resolve, 1));
+				}
+			}
+		} finally {
+			try {
+				await reader.cancel();
+			} catch {
+				/* reader already closed */
 			}
 		}
 
@@ -56,7 +115,7 @@ export class AudioProcessor {
 		}
 
 		if (this.cancelled || decodedFrames.length === 0) {
-			for (const f of decodedFrames) f.close();
+			for (const frame of decodedFrames) frame.close();
 			return;
 		}
 
@@ -83,7 +142,7 @@ export class AudioProcessor {
 		const encodeSupport = await AudioEncoder.isConfigSupported(encodeConfig);
 		if (!encodeSupport.supported) {
 			console.warn("[AudioProcessor] Opus encoding not supported, skipping audio");
-			for (const f of decodedFrames) f.close();
+			for (const frame of decodedFrames) frame.close();
 			return;
 		}
 
@@ -122,20 +181,297 @@ export class AudioProcessor {
 		);
 	}
 
+	// Speed-aware path that mirrors preview semantics (trim skipping + playbackRate regions)
+	// preserve pitch through browser media playback behavior to avoid chipmunk effect.
+	private async renderPitchPreservedTimelineAudio(
+		videoUrl: string,
+		trimRegions: TrimRegion[],
+		speedRegions: SpeedRegion[],
+	): Promise<Blob> {
+		const media = document.createElement("audio");
+		media.src = videoUrl;
+		media.preload = "auto";
+
+		const pitchMedia = media as HTMLMediaElement & {
+			preservesPitch?: boolean;
+			mozPreservesPitch?: boolean;
+			webkitPreservesPitch?: boolean;
+		};
+		pitchMedia.preservesPitch = true;
+		pitchMedia.mozPreservesPitch = true;
+		pitchMedia.webkitPreservesPitch = true;
+
+		await this.waitForLoadedMetadata(media);
+		if (this.cancelled) {
+			throw new Error("Export cancelled");
+		}
+
+		const audioContext = new AudioContext();
+		const sourceNode = audioContext.createMediaElementSource(media);
+		const destinationNode = audioContext.createMediaStreamDestination();
+		sourceNode.connect(destinationNode);
+
+		const { recorder, recordedBlobPromise } = this.startAudioRecording(destinationNode.stream);
+		let rafId: number | null = null;
+
+		try {
+			if (audioContext.state === "suspended") {
+				await audioContext.resume();
+			}
+
+			await this.seekTo(media, 0);
+			await media.play();
+
+			await new Promise<void>((resolve, reject) => {
+				const cleanup = () => {
+					if (rafId !== null) {
+						cancelAnimationFrame(rafId);
+						rafId = null;
+					}
+					media.removeEventListener("error", onError);
+					media.removeEventListener("ended", onEnded);
+				};
+
+				const onError = () => {
+					cleanup();
+					reject(new Error("Failed while rendering speed-adjusted audio timeline"));
+				};
+
+				const onEnded = () => {
+					cleanup();
+					resolve();
+				};
+
+				const tick = () => {
+					if (this.cancelled) {
+						cleanup();
+						resolve();
+						return;
+					}
+
+					const currentTimeMs = media.currentTime * 1000;
+					const activeTrimRegion = this.findActiveTrimRegion(currentTimeMs, trimRegions);
+
+					if (activeTrimRegion && !media.paused && !media.ended) {
+						const skipToTime = activeTrimRegion.endMs / 1000;
+						if (skipToTime >= media.duration) {
+							media.pause();
+							cleanup();
+							resolve();
+							return;
+						}
+						media.currentTime = skipToTime;
+					} else {
+						const activeSpeedRegion = this.findActiveSpeedRegion(currentTimeMs, speedRegions);
+						const playbackRate = activeSpeedRegion ? activeSpeedRegion.speed : 1;
+						if (Math.abs(media.playbackRate - playbackRate) > 0.0001) {
+							media.playbackRate = playbackRate;
+						}
+					}
+
+					if (!media.paused && !media.ended) {
+						rafId = requestAnimationFrame(tick);
+					} else {
+						cleanup();
+						resolve();
+					}
+				};
+
+				media.addEventListener("error", onError, { once: true });
+				media.addEventListener("ended", onEnded, { once: true });
+				rafId = requestAnimationFrame(tick);
+			});
+		} finally {
+			if (rafId !== null) {
+				cancelAnimationFrame(rafId);
+			}
+			media.pause();
+			if (recorder.state !== "inactive") {
+				recorder.stop();
+			}
+			destinationNode.stream.getTracks().forEach((track) => track.stop());
+			sourceNode.disconnect();
+			destinationNode.disconnect();
+			await audioContext.close();
+			media.src = "";
+			media.load();
+		}
+
+		const recordedBlob = await recordedBlobPromise;
+		if (this.cancelled) {
+			throw new Error("Export cancelled");
+		}
+		return recordedBlob;
+	}
+
+	// Demuxes the rendered speed-adjusted blob and feeds encoded chunks into the MP4 muxer.
+	private async muxRenderedAudioBlob(blob: Blob, muxer: VideoMuxer): Promise<void> {
+		if (this.cancelled) return;
+
+		const file = new File([blob], "speed-audio.webm", { type: blob.type || "audio/webm" });
+		const wasmUrl = new URL("./wasm/web-demuxer.wasm", window.location.href).href;
+		const demuxer = new WebDemuxer({ wasmFilePath: wasmUrl });
+
+		try {
+			await demuxer.load(file);
+			const audioConfig = (await demuxer.getDecoderConfig("audio")) as AudioDecoderConfig;
+			const reader = (demuxer.read("audio") as ReadableStream<EncodedAudioChunk>).getReader();
+			let isFirstChunk = true;
+
+			try {
+				while (!this.cancelled) {
+					const { done, value: chunk } = await reader.read();
+					if (done || !chunk) break;
+					if (isFirstChunk) {
+						await muxer.addAudioChunk(chunk, { decoderConfig: audioConfig });
+						isFirstChunk = false;
+					} else {
+						await muxer.addAudioChunk(chunk);
+					}
+				}
+			} finally {
+				try {
+					await reader.cancel();
+				} catch {
+					/* reader already closed */
+				}
+			}
+		} finally {
+			try {
+				demuxer.destroy();
+			} catch {
+				/* ignore */
+			}
+		}
+	}
+
+	private startAudioRecording(stream: MediaStream): {
+		recorder: MediaRecorder;
+		recordedBlobPromise: Promise<Blob>;
+	} {
+		const mimeType = this.getSupportedAudioMimeType();
+		const options: MediaRecorderOptions = {
+			audioBitsPerSecond: AUDIO_BITRATE,
+			...(mimeType ? { mimeType } : {}),
+		};
+
+		const recorder = new MediaRecorder(stream, options);
+		const chunks: Blob[] = [];
+
+		const recordedBlobPromise = new Promise<Blob>((resolve, reject) => {
+			recorder.ondataavailable = (event: BlobEvent) => {
+				if (event.data && event.data.size > 0) {
+					chunks.push(event.data);
+				}
+			};
+			recorder.onerror = () => {
+				reject(new Error("MediaRecorder failed while capturing speed-adjusted audio"));
+			};
+			recorder.onstop = () => {
+				const type = mimeType || chunks[0]?.type || "audio/webm";
+				resolve(new Blob(chunks, { type }));
+			};
+		});
+
+		recorder.start();
+		return { recorder, recordedBlobPromise };
+	}
+
+	private getSupportedAudioMimeType(): string | undefined {
+		const candidates = ["audio/webm;codecs=opus", "audio/webm"];
+		for (const candidate of candidates) {
+			if (MediaRecorder.isTypeSupported(candidate)) {
+				return candidate;
+			}
+		}
+		return undefined;
+	}
+
+	private waitForLoadedMetadata(media: HTMLMediaElement): Promise<void> {
+		if (Number.isFinite(media.duration) && media.readyState >= HTMLMediaElement.HAVE_METADATA) {
+			return Promise.resolve();
+		}
+
+		return new Promise<void>((resolve, reject) => {
+			const onLoaded = () => {
+				cleanup();
+				resolve();
+			};
+			const onError = () => {
+				cleanup();
+				reject(new Error("Failed to load media metadata for speed-adjusted audio"));
+			};
+			const cleanup = () => {
+				media.removeEventListener("loadedmetadata", onLoaded);
+				media.removeEventListener("error", onError);
+			};
+
+			media.addEventListener("loadedmetadata", onLoaded);
+			media.addEventListener("error", onError, { once: true });
+		});
+	}
+
+	private seekTo(media: HTMLMediaElement, targetSec: number): Promise<void> {
+		if (Math.abs(media.currentTime - targetSec) < 0.0001) {
+			return Promise.resolve();
+		}
+
+		return new Promise<void>((resolve, reject) => {
+			const onSeeked = () => {
+				cleanup();
+				resolve();
+			};
+			const onError = () => {
+				cleanup();
+				reject(new Error("Failed to seek media for speed-adjusted audio"));
+			};
+			const cleanup = () => {
+				media.removeEventListener("seeked", onSeeked);
+				media.removeEventListener("error", onError);
+			};
+
+			media.addEventListener("seeked", onSeeked, { once: true });
+			media.addEventListener("error", onError, { once: true });
+			media.currentTime = targetSec;
+		});
+	}
+
+	private findActiveTrimRegion(
+		currentTimeMs: number,
+		trimRegions: TrimRegion[],
+	): TrimRegion | null {
+		return (
+			trimRegions.find(
+				(region) => currentTimeMs >= region.startMs && currentTimeMs < region.endMs,
+			) || null
+		);
+	}
+
+	private findActiveSpeedRegion(
+		currentTimeMs: number,
+		speedRegions: SpeedRegion[],
+	): SpeedRegion | null {
+		return (
+			speedRegions.find(
+				(region) => currentTimeMs >= region.startMs && currentTimeMs < region.endMs,
+			) || null
+		);
+	}
+
 	private cloneWithTimestamp(src: AudioData, newTimestamp: number): AudioData {
 		const isPlanar = src.format?.includes("planar") ?? false;
 		const numPlanes = isPlanar ? src.numberOfChannels : 1;
 
 		let totalSize = 0;
-		for (let p = 0; p < numPlanes; p++) {
-			totalSize += src.allocationSize({ planeIndex: p });
+		for (let planeIndex = 0; planeIndex < numPlanes; planeIndex++) {
+			totalSize += src.allocationSize({ planeIndex });
 		}
 
 		const buffer = new ArrayBuffer(totalSize);
 		let offset = 0;
-		for (let p = 0; p < numPlanes; p++) {
-			const planeSize = src.allocationSize({ planeIndex: p });
-			src.copyTo(new Uint8Array(buffer, offset, planeSize), { planeIndex: p });
+		for (let planeIndex = 0; planeIndex < numPlanes; planeIndex++) {
+			const planeSize = src.allocationSize({ planeIndex });
+			src.copyTo(new Uint8Array(buffer, offset, planeSize), { planeIndex });
 			offset += planeSize;
 		}
 
@@ -150,7 +486,7 @@ export class AudioProcessor {
 	}
 
 	private isInTrimRegion(timestampMs: number, trims: TrimRegion[]): boolean {
-		return trims.some((t) => timestampMs >= t.startMs && timestampMs < t.endMs);
+		return trims.some((trim) => timestampMs >= trim.startMs && timestampMs < trim.endMs);
 	}
 
 	private computeTrimOffset(timestampMs: number, trims: TrimRegion[]): number {

src/lib/exporter/frameRenderer.ts

@@ -1,20 +1,57 @@
-import { Application, BlurFilter, Container, Graphics, Sprite, Texture } from "pixi.js";
+import {
+	Application,
+	BlurFilter,
+	Container,
+	Graphics,
+	Sprite,
+	Texture,
+	type TextureSourceLike,
+} from "pixi.js";
+import { MotionBlurFilter } from "pixi-filters/motion-blur";
 import type {
 	AnnotationRegion,
 	CropRegion,
 	SpeedRegion,
+	WebcamLayoutPreset,
+	ZoomDepth,
 	ZoomRegion,
 } from "@/components/video-editor/types";
 import { ZOOM_DEPTH_SCALES } from "@/components/video-editor/types";
 import {
+	AUTO_FOLLOW_RAMP_DISTANCE,
+	AUTO_FOLLOW_SMOOTHING_FACTOR,
+	AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
 	DEFAULT_FOCUS,
-	MIN_DELTA,
-	SMOOTHING_FACTOR,
+	ZOOM_SCALE_DEADZONE,
+	ZOOM_TRANSLATION_DEADZONE_PX,
 } from "@/components/video-editor/videoPlayback/constants";
+import {
+	adaptiveSmoothFactor,
+	smoothCursorFocus,
+} from "@/components/video-editor/videoPlayback/cursorFollowUtils";
 import { clampFocusToStage as clampFocusToStageUtil } from "@/components/video-editor/videoPlayback/focusUtils";
 import { findDominantRegion } from "@/components/video-editor/videoPlayback/zoomRegionUtils";
-import { applyZoomTransform } from "@/components/video-editor/videoPlayback/zoomTransform";
+import {
+	applyZoomTransform,
+	computeFocusFromTransform,
+	computeZoomTransform,
+	createMotionBlurState,
+	type MotionBlurState,
+} from "@/components/video-editor/videoPlayback/zoomTransform";
+import {
+	computeCompositeLayout,
+	getWebcamLayoutPresetDefinition,
+	type Size,
+	type StyledRenderRect,
+} from "@/lib/compositeLayout";
+import { drawCanvasClipPath } from "@/lib/webcamMaskShapes";
 import { renderAnnotations } from "./annotationRenderer";
+import {
+	getLinearGradientPoints,
+	getRadialGradientShape,
+	parseCssGradient,
+	resolveLinearGradientAngle,
+} from "./gradientParser";
 
 interface FrameRenderConfig {
 	width: number;
@@ -24,22 +61,40 @@ interface FrameRenderConfig {
 	showShadow: boolean;
 	shadowIntensity: number;
 	showBlur: boolean;
-	motionBlurEnabled?: boolean;
+	motionBlurAmount?: number;
 	borderRadius?: number;
 	padding?: number;
 	cropRegion: CropRegion;
 	videoWidth: number;
 	videoHeight: number;
+	webcamSize?: Size | null;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+	webcamPosition?: { cx: number; cy: number } | null;
 	annotationRegions?: AnnotationRegion[];
 	speedRegions?: SpeedRegion[];
 	previewWidth?: number;
 	previewHeight?: number;
+	cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
 }
 
 interface AnimationState {
 	scale: number;
 	focusX: number;
 	focusY: number;
+	progress: number;
+	x: number;
+	y: number;
+	appliedScale: number;
+}
+
+interface LayoutCache {
+	stageSize: { width: number; height: number };
+	videoSize: { width: number; height: number };
+	baseScale: number;
+	baseOffset: { x: number; y: number };
+	maskRect: { x: number; y: number; width: number; height: number };
+	webcamRect: StyledRenderRect | null;
 }
 
 // Renders video frames with all effects (background, zoom, crop, blur, shadow) to an offscreen canvas for export.
@@ -49,17 +104,22 @@ export class FrameRenderer {
 	private cameraContainer: Container | null = null;
 	private videoContainer: Container | null = null;
 	private videoSprite: Sprite | null = null;
-	private backgroundSprite: Sprite | null = null;
+	private backgroundSprite: HTMLCanvasElement | null = null;
 	private maskGraphics: Graphics | null = null;
 	private blurFilter: BlurFilter | null = null;
+	private motionBlurFilter: MotionBlurFilter | null = null;
 	private shadowCanvas: HTMLCanvasElement | null = null;
 	private shadowCtx: CanvasRenderingContext2D | null = null;
 	private compositeCanvas: HTMLCanvasElement | null = null;
 	private compositeCtx: CanvasRenderingContext2D | null = null;
 	private config: FrameRenderConfig;
 	private animationState: AnimationState;
-	private layoutCache: any = null;
+	private layoutCache: LayoutCache | null = null;
 	private currentVideoTime = 0;
+	private motionBlurState: MotionBlurState = createMotionBlurState();
+	private smoothedAutoFocus: { cx: number; cy: number } | null = null;
+	private prevAnimationTimeMs: number | null = null;
+	private prevTargetProgress = 0;
 
 	constructor(config: FrameRenderConfig) {
 		this.config = config;
@@ -67,6 +127,10 @@ export class FrameRenderer {
 			scale: 1,
 			focusX: DEFAULT_FOCUS.cx,
 			focusY: DEFAULT_FOCUS.cy,
+			progress: 0,
+			x: 0,
+			y: 0,
+			appliedScale: 1,
 		};
 	}
 
@@ -112,13 +176,16 @@ export class FrameRenderer {
 		this.blurFilter.quality = 5;
 		this.blurFilter.resolution = this.app.renderer.resolution;
 		this.blurFilter.blur = 0;
-		this.videoContainer.filters = [this.blurFilter];
+		this.motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
+		this.videoContainer.filters = [this.blurFilter, this.motionBlurFilter];
 
 		// Setup composite canvas for final output with shadows
 		this.compositeCanvas = document.createElement("canvas");
 		this.compositeCanvas.width = this.config.width;
 		this.compositeCanvas.height = this.config.height;
-		this.compositeCtx = this.compositeCanvas.getContext("2d", { willReadFrequently: false });
+		this.compositeCtx = this.compositeCanvas.getContext("2d", {
+			willReadFrequently: false,
+		});
 
 		if (!this.compositeCtx) {
 			throw new Error("Failed to get 2D context for composite canvas");
@@ -129,7 +196,9 @@ export class FrameRenderer {
 			this.shadowCanvas = document.createElement("canvas");
 			this.shadowCanvas.width = this.config.width;
 			this.shadowCanvas.height = this.config.height;
-			this.shadowCtx = this.shadowCanvas.getContext("2d", { willReadFrequently: false });
+			this.shadowCtx = this.shadowCanvas.getContext("2d", {
+				willReadFrequently: false,
+			});
 
 			if (!this.shadowCtx) {
 				throw new Error("Failed to get 2D context for shadow canvas");
@@ -210,40 +279,39 @@ export class FrameRenderer {
 				wallpaper.startsWith("linear-gradient") ||
 				wallpaper.startsWith("radial-gradient")
 			) {
-				const gradientMatch = wallpaper.match(/(linear|radial)-gradient\((.+)\)/);
-				if (gradientMatch) {
-					const [, type, params] = gradientMatch;
-					const parts = params.split(",").map((s) => s.trim());
+				const parsedGradient = parseCssGradient(wallpaper);
+				if (parsedGradient) {
+					const gradient =
+						parsedGradient.type === "linear"
+							? (() => {
+									const points = getLinearGradientPoints(
+										resolveLinearGradientAngle(parsedGradient.descriptor),
+										this.config.width,
+										this.config.height,
+									);
 
-					let gradient: CanvasGradient;
+									return bgCtx.createLinearGradient(points.x0, points.y0, points.x1, points.y1);
+								})()
+							: (() => {
+									const shape = getRadialGradientShape(
+										parsedGradient.descriptor,
+										this.config.width,
+										this.config.height,
+									);
 
-					if (type === "linear") {
-						gradient = bgCtx.createLinearGradient(0, 0, 0, this.config.height);
-						parts.forEach((part, index) => {
-							if (part.startsWith("to ") || part.includes("deg")) return;
+									return bgCtx.createRadialGradient(
+										shape.cx,
+										shape.cy,
+										0,
+										shape.cx,
+										shape.cy,
+										shape.radius,
+									);
+								})();
 
-							const colorMatch = part.match(/^(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|[a-z]+)/);
-							if (colorMatch) {
-								const color = colorMatch[1];
-								const position = index / (parts.length - 1);
-								gradient.addColorStop(position, color);
-							}
-						});
-					} else {
-						const cx = this.config.width / 2;
-						const cy = this.config.height / 2;
-						const radius = Math.max(this.config.width, this.config.height) / 2;
-						gradient = bgCtx.createRadialGradient(cx, cy, 0, cx, cy, radius);
-
-						parts.forEach((part, index) => {
-							const colorMatch = part.match(/^(#[0-9a-fA-F]{3,8}|rgba?\([^)]+\)|[a-z]+)/);
-							if (colorMatch) {
-								const color = colorMatch[1];
-								const position = index / (parts.length - 1);
-								gradient.addColorStop(position, color);
-							}
-						});
-					}
+					parsedGradient.stops.forEach((stop) => {
+						gradient.addColorStop(stop.offset, stop.color);
+					});
 
 					bgCtx.fillStyle = gradient;
 					bgCtx.fillRect(0, 0, this.config.width, this.config.height);
@@ -263,10 +331,14 @@ export class FrameRenderer {
 		}
 
 		// Store the background canvas for compositing
-		this.backgroundSprite = bgCanvas as any;
+		this.backgroundSprite = bgCanvas;
 	}
 
-	async renderFrame(videoFrame: VideoFrame, timestamp: number): Promise<void> {
+	async renderFrame(
+		videoFrame: VideoFrame,
+		timestamp: number,
+		webcamFrame?: VideoFrame | null,
+	): Promise<void> {
 		if (!this.app || !this.videoContainer || !this.cameraContainer) {
 			throw new Error("Renderer not initialized");
 		}
@@ -275,19 +347,19 @@ export class FrameRenderer {
 
 		// Create or update video sprite from VideoFrame
 		if (!this.videoSprite) {
-			const texture = Texture.from(videoFrame as any);
+			const texture = Texture.from(videoFrame as unknown as TextureSourceLike);
 			this.videoSprite = new Sprite(texture);
 			this.videoContainer.addChild(this.videoSprite);
 		} else {
 			// Destroy old texture to avoid memory leaks, then create new one
 			const oldTexture = this.videoSprite.texture;
-			const newTexture = Texture.from(videoFrame as any);
+			const newTexture = Texture.from(videoFrame as unknown as TextureSourceLike);
 			this.videoSprite.texture = newTexture;
 			oldTexture.destroy(true);
 		}
 
 		// Apply layout
-		this.updateLayout();
+		this.updateLayout(webcamFrame);
 
 		const timeMs = this.currentVideoTime * 1000;
 		const TICKS_PER_FRAME = 1;
@@ -298,25 +370,34 @@ export class FrameRenderer {
 			maxMotionIntensity = Math.max(maxMotionIntensity, motionIntensity);
 		}
 
+		const layoutCache = this.layoutCache;
+		if (!layoutCache) {
+			throw new Error("Layout cache not initialized");
+		}
+
 		// Apply transform once with maximum motion intensity from all ticks
 		applyZoomTransform({
 			cameraContainer: this.cameraContainer,
 			blurFilter: this.blurFilter,
-			stageSize: this.layoutCache.stageSize,
-			baseMask: this.layoutCache.maskRect,
+			motionBlurFilter: this.motionBlurFilter,
+			stageSize: layoutCache.stageSize,
+			baseMask: layoutCache.maskRect,
 			zoomScale: this.animationState.scale,
+			zoomProgress: this.animationState.progress,
 			focusX: this.animationState.focusX,
 			focusY: this.animationState.focusY,
 			motionIntensity: maxMotionIntensity,
 			isPlaying: true,
-			motionBlurEnabled: this.config.motionBlurEnabled ?? false,
+			motionBlurAmount: this.config.motionBlurAmount ?? 0,
+			motionBlurState: this.motionBlurState,
+			frameTimeMs: timeMs,
 		});
 
 		// Render the PixiJS stage to its canvas (video only, transparent background)
 		this.app.renderer.render(this.app.stage);
 
 		// Composite with shadows to final output canvas
-		this.compositeWithShadows();
+		this.compositeWithShadows(webcamFrame);
 
 		// Render annotations on top if present
 		if (
@@ -342,7 +423,7 @@ export class FrameRenderer {
 		}
 	}
 
-	private updateLayout(): void {
+	private updateLayout(webcamFrame?: VideoFrame | null): void {
 		if (!this.app || !this.videoSprite || !this.maskGraphics || !this.videoContainer) return;
 
 		const { width, height } = this.config;
@@ -361,42 +442,62 @@ export class FrameRenderer {
 
 		// Calculate scale to fit in viewport
 		// Padding is a percentage (0-100), where 50% ~ 0.8 scale
-		const paddingScale = 1.0 - (padding / 100) * 0.4;
+		// Vertical stack ignores padding — it's full-bleed
+		const effectivePadding = this.config.webcamLayoutPreset === "vertical-stack" ? 0 : padding;
+		const paddingScale = 1.0 - (effectivePadding / 100) * 0.4;
 		const viewportWidth = width * paddingScale;
 		const viewportHeight = height * paddingScale;
-		const scale = Math.min(viewportWidth / croppedVideoWidth, viewportHeight / croppedVideoHeight);
+		const compositeLayout = computeCompositeLayout({
+			canvasSize: { width, height },
+			maxContentSize: { width: viewportWidth, height: viewportHeight },
+			screenSize: { width: croppedVideoWidth, height: croppedVideoHeight },
+			webcamSize: webcamFrame ? this.config.webcamSize : null,
+			layoutPreset: this.config.webcamLayoutPreset,
+			webcamPosition: this.config.webcamPosition,
+			webcamMaskShape: this.config.webcamMaskShape,
+		});
+		if (!compositeLayout) return;
+
+		const screenRect = compositeLayout.screenRect;
+
+		// Cover mode: scale to fill the rect (may crop), otherwise fit-to-width
+		let scale: number;
+		if (compositeLayout.screenCover) {
+			scale = Math.max(
+				screenRect.width / croppedVideoWidth,
+				screenRect.height / croppedVideoHeight,
+			);
+		} else {
+			scale = screenRect.width / croppedVideoWidth;
+		}
 
 		// Position video sprite
 		this.videoSprite.width = videoWidth * scale;
 		this.videoSprite.height = videoHeight * scale;
 
-		const cropPixelX = cropStartX * videoWidth * scale;
-		const cropPixelY = cropStartY * videoHeight * scale;
-		this.videoSprite.x = -cropPixelX;
-		this.videoSprite.y = -cropPixelY;
-
-		// Position video container
+		// Center the cropped region within the screenRect
 		const croppedDisplayWidth = croppedVideoWidth * scale;
 		const croppedDisplayHeight = croppedVideoHeight * scale;
-		const centerOffsetX = (width - croppedDisplayWidth) / 2;
-		const centerOffsetY = (height - croppedDisplayHeight) / 2;
-		this.videoContainer.x = centerOffsetX;
-		this.videoContainer.y = centerOffsetY;
+		const coverOffsetX = (screenRect.width - croppedDisplayWidth) / 2;
+		const coverOffsetY = (screenRect.height - croppedDisplayHeight) / 2;
+
+		const cropPixelX = cropStartX * videoWidth * scale;
+		const cropPixelY = cropStartY * videoHeight * scale;
+		this.videoSprite.x = -cropPixelX + coverOffsetX;
+		this.videoSprite.y = -cropPixelY + coverOffsetY;
+
+		// Position video container
+		this.videoContainer.x = screenRect.x;
+		this.videoContainer.y = screenRect.y;
 
 		// scale border radius by export/preview canvas ratio
 		const previewWidth = this.config.previewWidth || 1920;
 		const previewHeight = this.config.previewHeight || 1080;
 		const canvasScaleFactor = Math.min(width / previewWidth, height / previewHeight);
-		const scaledBorderRadius = borderRadius * canvasScaleFactor;
+		const scaledBorderRadius = compositeLayout.screenCover ? 0 : borderRadius * canvasScaleFactor;
 
 		this.maskGraphics.clear();
-		this.maskGraphics.roundRect(
-			0,
-			0,
-			croppedDisplayWidth,
-			croppedDisplayHeight,
-			scaledBorderRadius,
-		);
+		this.maskGraphics.roundRect(0, 0, screenRect.width, screenRect.height, scaledBorderRadius);
 		this.maskGraphics.fill({ color: 0xffffff });
 
 		// Cache layout info
@@ -404,83 +505,177 @@ export class FrameRenderer {
 			stageSize: { width, height },
 			videoSize: { width: croppedVideoWidth, height: croppedVideoHeight },
 			baseScale: scale,
-			baseOffset: { x: centerOffsetX, y: centerOffsetY },
-			maskRect: { x: 0, y: 0, width: croppedDisplayWidth, height: croppedDisplayHeight },
+			baseOffset: { x: compositeLayout.screenRect.x, y: compositeLayout.screenRect.y },
+			maskRect: compositeLayout.screenRect,
+			webcamRect: compositeLayout.webcamRect,
 		};
 	}
 
 	private clampFocusToStage(
 		focus: { cx: number; cy: number },
-		depth: number,
+		depth: ZoomDepth,
 	): { cx: number; cy: number } {
 		if (!this.layoutCache) return focus;
-		return clampFocusToStageUtil(focus, depth as any, this.layoutCache.stageSize);
+		return clampFocusToStageUtil(focus, depth, this.layoutCache.stageSize);
 	}
 
 	private updateAnimationState(timeMs: number): number {
 		if (!this.cameraContainer || !this.layoutCache) return 0;
 
-		const { region, strength } = findDominantRegion(this.config.zoomRegions, timeMs);
+		const bmEx = this.layoutCache.maskRect;
+		const ssEx = this.layoutCache.stageSize;
+		const viewportRatio =
+			bmEx.width > 0 && bmEx.height > 0
+				? { widthRatio: ssEx.width / bmEx.width, heightRatio: ssEx.height / bmEx.height }
+				: undefined;
+		const { region, strength, blendedScale, transition } = findDominantRegion(
+			this.config.zoomRegions,
+			timeMs,
+			{ connectZooms: true, cursorTelemetry: this.config.cursorTelemetry, viewportRatio },
+		);
 
 		const defaultFocus = DEFAULT_FOCUS;
 		let targetScaleFactor = 1;
 		let targetFocus = { ...defaultFocus };
+		let targetProgress = 0;
 
 		if (region && strength > 0) {
-			const zoomScale = ZOOM_DEPTH_SCALES[region.depth];
+			const zoomScale = blendedScale ?? ZOOM_DEPTH_SCALES[region.depth];
 			const regionFocus = this.clampFocusToStage(region.focus, region.depth);
 
-			targetScaleFactor = 1 + (zoomScale - 1) * strength;
-			targetFocus = {
-				cx: defaultFocus.cx + (regionFocus.cx - defaultFocus.cx) * strength,
-				cy: defaultFocus.cy + (regionFocus.cy - defaultFocus.cy) * strength,
-			};
+			targetScaleFactor = zoomScale;
+			targetFocus = regionFocus;
+			targetProgress = strength;
+
+			// Apply adaptive smoothing for auto-follow mode
+			if (region.focusMode === "auto" && !transition) {
+				const raw = targetFocus;
+				const dtMs = this.prevAnimationTimeMs != null ? timeMs - this.prevAnimationTimeMs : 0;
+				const framesElapsed = dtMs > 0 ? dtMs / (1000 / 60) : 1;
+				const isZoomingIn = targetProgress < 0.999 && targetProgress >= this.prevTargetProgress;
+				if (targetProgress >= 0.999) {
+					// Full zoom: adaptive smoothing — moves faster when far, decelerates when close
+					const prev = this.smoothedAutoFocus ?? raw;
+					const baseFactor = adaptiveSmoothFactor(
+						raw,
+						prev,
+						AUTO_FOLLOW_SMOOTHING_FACTOR,
+						AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+						AUTO_FOLLOW_RAMP_DISTANCE,
+					);
+					const factor = 1 - Math.pow(1 - baseFactor, Math.max(1, framesElapsed));
+					const smoothed = smoothCursorFocus(raw, prev, factor);
+					this.smoothedAutoFocus = smoothed;
+					targetFocus = smoothed;
+				} else if (isZoomingIn) {
+					// Zoom-in: track cursor directly so zoom always aims at current cursor
+					// position; keep ref in sync to avoid snap when full-zoom begins
+					this.smoothedAutoFocus = raw;
+				} else {
+					// Zoom-out: keep smoothing for continuity — avoids snap at zoom-out start
+					const prev = this.smoothedAutoFocus ?? raw;
+					const baseFactor = adaptiveSmoothFactor(
+						raw,
+						prev,
+						AUTO_FOLLOW_SMOOTHING_FACTOR,
+						AUTO_FOLLOW_SMOOTHING_FACTOR_MAX,
+						AUTO_FOLLOW_RAMP_DISTANCE,
+					);
+					const factor = 1 - Math.pow(1 - baseFactor, Math.max(1, framesElapsed));
+					const smoothed = smoothCursorFocus(raw, prev, factor);
+					this.smoothedAutoFocus = smoothed;
+					targetFocus = smoothed;
+				}
+			} else if (region.focusMode !== "auto") {
+				this.smoothedAutoFocus = null;
+			}
+			this.prevTargetProgress = targetProgress;
+
+			if (transition) {
+				const startTransform = computeZoomTransform({
+					stageSize: this.layoutCache.stageSize,
+					baseMask: this.layoutCache.maskRect,
+					zoomScale: transition.startScale,
+					zoomProgress: 1,
+					focusX: transition.startFocus.cx,
+					focusY: transition.startFocus.cy,
+				});
+				const endTransform = computeZoomTransform({
+					stageSize: this.layoutCache.stageSize,
+					baseMask: this.layoutCache.maskRect,
+					zoomScale: transition.endScale,
+					zoomProgress: 1,
+					focusX: transition.endFocus.cx,
+					focusY: transition.endFocus.cy,
+				});
+
+				const interpolatedTransform = {
+					scale:
+						startTransform.scale +
+						(endTransform.scale - startTransform.scale) * transition.progress,
+					x: startTransform.x + (endTransform.x - startTransform.x) * transition.progress,
+					y: startTransform.y + (endTransform.y - startTransform.y) * transition.progress,
+				};
+
+				targetScaleFactor = interpolatedTransform.scale;
+				targetFocus = computeFocusFromTransform({
+					stageSize: this.layoutCache.stageSize,
+					baseMask: this.layoutCache.maskRect,
+					zoomScale: interpolatedTransform.scale,
+					x: interpolatedTransform.x,
+					y: interpolatedTransform.y,
+				});
+				targetProgress = 1;
+			}
 		}
 
 		const state = this.animationState;
 
-		const prevScale = state.scale;
-		const prevFocusX = state.focusX;
-		const prevFocusY = state.focusY;
+		const prevScale = state.appliedScale;
+		const prevX = state.x;
+		const prevY = state.y;
 
-		const scaleDelta = targetScaleFactor - state.scale;
-		const focusXDelta = targetFocus.cx - state.focusX;
-		const focusYDelta = targetFocus.cy - state.focusY;
+		state.scale = targetScaleFactor;
+		state.focusX = targetFocus.cx;
+		state.focusY = targetFocus.cy;
+		state.progress = targetProgress;
 
-		let nextScale = prevScale;
-		let nextFocusX = prevFocusX;
-		let nextFocusY = prevFocusY;
+		const projectedTransform = computeZoomTransform({
+			stageSize: this.layoutCache.stageSize,
+			baseMask: this.layoutCache.maskRect,
+			zoomScale: state.scale,
+			zoomProgress: state.progress,
+			focusX: state.focusX,
+			focusY: state.focusY,
+		});
 
-		if (Math.abs(scaleDelta) > MIN_DELTA) {
-			nextScale = prevScale + scaleDelta * SMOOTHING_FACTOR;
-		} else {
-			nextScale = targetScaleFactor;
-		}
+		const appliedScale =
+			Math.abs(projectedTransform.scale - prevScale) < ZOOM_SCALE_DEADZONE
+				? projectedTransform.scale
+				: projectedTransform.scale;
+		const appliedX =
+			Math.abs(projectedTransform.x - prevX) < ZOOM_TRANSLATION_DEADZONE_PX
+				? projectedTransform.x
+				: projectedTransform.x;
+		const appliedY =
+			Math.abs(projectedTransform.y - prevY) < ZOOM_TRANSLATION_DEADZONE_PX
+				? projectedTransform.y
+				: projectedTransform.y;
 
-		if (Math.abs(focusXDelta) > MIN_DELTA) {
-			nextFocusX = prevFocusX + focusXDelta * SMOOTHING_FACTOR;
-		} else {
-			nextFocusX = targetFocus.cx;
-		}
+		state.x = appliedX;
+		state.y = appliedY;
+		state.appliedScale = appliedScale;
 
-		if (Math.abs(focusYDelta) > MIN_DELTA) {
-			nextFocusY = prevFocusY + focusYDelta * SMOOTHING_FACTOR;
-		} else {
-			nextFocusY = targetFocus.cy;
-		}
-
-		state.scale = nextScale;
-		state.focusX = nextFocusX;
-		state.focusY = nextFocusY;
+		this.prevAnimationTimeMs = timeMs;
 
 		return Math.max(
-			Math.abs(nextScale - prevScale),
-			Math.abs(nextFocusX - prevFocusX),
-			Math.abs(nextFocusY - prevFocusY),
+			Math.abs(appliedScale - prevScale),
+			Math.abs(appliedX - prevX) / Math.max(1, this.layoutCache.stageSize.width),
+			Math.abs(appliedY - prevY) / Math.max(1, this.layoutCache.stageSize.height),
 		);
 	}
 
-	private compositeWithShadows(): void {
+	private compositeWithShadows(webcamFrame?: VideoFrame | null): void {
 		if (!this.compositeCanvas || !this.compositeCtx || !this.app) return;
 
 		const videoCanvas = this.app.canvas as HTMLCanvasElement;
@@ -493,7 +688,7 @@ export class FrameRenderer {
 
 		// Step 1: Draw background layer (with optional blur, not affected by zoom)
 		if (this.backgroundSprite) {
-			const bgCanvas = this.backgroundSprite as any as HTMLCanvasElement;
+			const bgCanvas = this.backgroundSprite;
 
 			if (this.config.showBlur) {
 				ctx.save();
@@ -535,6 +730,39 @@ export class FrameRenderer {
 		} else {
 			ctx.drawImage(videoCanvas, 0, 0, w, h);
 		}
+
+		const webcamRect = this.layoutCache?.webcamRect ?? null;
+		if (webcamFrame && webcamRect) {
+			const preset = getWebcamLayoutPresetDefinition(this.config.webcamLayoutPreset);
+			const shape = webcamRect.maskShape ?? this.config.webcamMaskShape ?? "rectangle";
+			ctx.save();
+			drawCanvasClipPath(
+				ctx,
+				webcamRect.x,
+				webcamRect.y,
+				webcamRect.width,
+				webcamRect.height,
+				shape,
+				webcamRect.borderRadius,
+			);
+			if (preset.shadow) {
+				ctx.shadowColor = preset.shadow.color;
+				ctx.shadowBlur = preset.shadow.blur;
+				ctx.shadowOffsetX = preset.shadow.offsetX;
+				ctx.shadowOffsetY = preset.shadow.offsetY;
+			}
+			ctx.fillStyle = "#000000";
+			ctx.fill();
+			ctx.clip();
+			ctx.drawImage(
+				webcamFrame as unknown as CanvasImageSource,
+				webcamRect.x,
+				webcamRect.y,
+				webcamRect.width,
+				webcamRect.height,
+			);
+			ctx.restore();
+		}
 	}
 
 	getCanvas(): HTMLCanvasElement {
@@ -551,13 +779,18 @@ export class FrameRenderer {
 		}
 		this.backgroundSprite = null;
 		if (this.app) {
-			this.app.destroy(true, { children: true, texture: true, textureSource: true });
+			this.app.destroy(true, {
+				children: true,
+				texture: true,
+				textureSource: true,
+			});
 			this.app = null;
 		}
 		this.cameraContainer = null;
 		this.videoContainer = null;
 		this.maskGraphics = null;
 		this.blurFilter = null;
+		this.motionBlurFilter = null;
 		this.shadowCanvas = null;
 		this.shadowCtx = null;
 		this.compositeCanvas = null;

src/lib/exporter/gifExporter.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from "vitest";
+import { calculateOutputDimensions } from "./gifExporter";
+import { GIF_SIZE_PRESETS } from "./types";
+
+describe("calculateOutputDimensions", () => {
+	it("uses the selected aspect ratio for scaled GIF exports", () => {
+		expect(calculateOutputDimensions(1080, 1920, "medium", GIF_SIZE_PRESETS, 16 / 9)).toEqual({
+			width: 1280,
+			height: 720,
+		});
+	});
+
+	it("fits original-size GIF exports within the source bounds at the selected aspect ratio", () => {
+		expect(calculateOutputDimensions(1080, 1920, "original", GIF_SIZE_PRESETS, 16 / 9)).toEqual({
+			width: 1080,
+			height: 606,
+		});
+	});
+});

src/lib/exporter/gifExporter.ts

@@ -4,8 +4,10 @@ import type {
 	CropRegion,
 	SpeedRegion,
 	TrimRegion,
+	WebcamLayoutPreset,
 	ZoomRegion,
 } from "@/components/video-editor/types";
+import { AsyncVideoFrameQueue } from "./asyncVideoFrameQueue";
 import { FrameRenderer } from "./frameRenderer";
 import { StreamingVideoDecoder } from "./streamingDecoder";
 import type {
@@ -20,6 +22,7 @@ const GIF_WORKER_URL = new URL("gif.js/dist/gif.worker.js", import.meta.url).toS
 
 interface GifExporterConfig {
 	videoUrl: string;
+	webcamVideoUrl?: string;
 	width: number;
 	height: number;
 	frameRate: GifFrameRate;
@@ -32,14 +35,18 @@ interface GifExporterConfig {
 	showShadow: boolean;
 	shadowIntensity: number;
 	showBlur: boolean;
-	motionBlurEnabled?: boolean;
+	motionBlurAmount?: number;
 	borderRadius?: number;
 	padding?: number;
 	videoPadding?: number;
 	cropRegion: CropRegion;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+	webcamPosition?: { cx: number; cy: number } | null;
 	annotationRegions?: AnnotationRegion[];
 	previewWidth?: number;
 	previewHeight?: number;
+	cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
 	onProgress?: (progress: ExportProgress) => void;
 }
 
@@ -56,30 +63,46 @@ export function calculateOutputDimensions(
 	sourceHeight: number,
 	sizePreset: GifSizePreset,
 	sizePresets: typeof GIF_SIZE_PRESETS,
+	targetAspectRatio = sourceWidth / sourceHeight,
 ): { width: number; height: number } {
 	const preset = sizePresets[sizePreset];
 	const maxHeight = preset.maxHeight;
+	const aspectRatio =
+		Number.isFinite(targetAspectRatio) && targetAspectRatio > 0
+			? targetAspectRatio
+			: sourceWidth / sourceHeight;
 
-	// If original is smaller than max height or preset is 'original', use source dimensions
-	if (sourceHeight <= maxHeight || sizePreset === "original") {
-		return { width: sourceWidth, height: sourceHeight };
+	const toEven = (value: number) => {
+		const evenValue = Math.max(2, Math.floor(value / 2) * 2);
+		return evenValue;
+	};
+
+	if (sizePreset === "original") {
+		const sourceAspect = sourceWidth / sourceHeight;
+		if (aspectRatio >= sourceAspect) {
+			const width = toEven(sourceWidth);
+			const height = toEven(width / aspectRatio);
+			return { width, height };
+		}
+
+		const height = toEven(sourceHeight);
+		const width = toEven(height * aspectRatio);
+		return { width, height };
 	}
 
-	// Calculate scaled dimensions preserving aspect ratio
-	const aspectRatio = sourceWidth / sourceHeight;
-	const newHeight = maxHeight;
-	const newWidth = Math.round(newHeight * aspectRatio);
+	const targetHeight = maxHeight;
+	const targetWidth = Math.round(targetHeight * aspectRatio);
 
-	// Ensure dimensions are even (required for some encoders)
 	return {
-		width: newWidth % 2 === 0 ? newWidth : newWidth + 1,
-		height: newHeight % 2 === 0 ? newHeight : newHeight + 1,
+		width: toEven(targetWidth),
+		height: toEven(targetHeight),
 	};
 }
 
 export class GifExporter {
 	private config: GifExporterConfig;
 	private streamingDecoder: StreamingVideoDecoder | null = null;
+	private webcamDecoder: StreamingVideoDecoder | null = null;
 	private renderer: FrameRenderer | null = null;
 	private gif: GIF | null = null;
 	private cancelled = false;
@@ -89,6 +112,7 @@ export class GifExporter {
 	}
 
 	async export(): Promise<ExportResult> {
+		let webcamFrameQueue: AsyncVideoFrameQueue | null = null;
 		try {
 			this.cleanup();
 			this.cancelled = false;
@@ -96,6 +120,11 @@ export class GifExporter {
 			// Initialize streaming decoder and load video metadata
 			this.streamingDecoder = new StreamingVideoDecoder();
 			const videoInfo = await this.streamingDecoder.loadMetadata(this.config.videoUrl);
+			let webcamInfo: Awaited<ReturnType<StreamingVideoDecoder["loadMetadata"]>> | null = null;
+			if (this.config.webcamVideoUrl) {
+				this.webcamDecoder = new StreamingVideoDecoder();
+				webcamInfo = await this.webcamDecoder.loadMetadata(this.config.webcamVideoUrl);
+			}
 
 			// Initialize frame renderer
 			this.renderer = new FrameRenderer({
@@ -106,25 +135,31 @@ export class GifExporter {
 				showShadow: this.config.showShadow,
 				shadowIntensity: this.config.shadowIntensity,
 				showBlur: this.config.showBlur,
-				motionBlurEnabled: this.config.motionBlurEnabled,
+				motionBlurAmount: this.config.motionBlurAmount,
 				borderRadius: this.config.borderRadius,
 				padding: this.config.padding,
 				cropRegion: this.config.cropRegion,
 				videoWidth: videoInfo.width,
 				videoHeight: videoInfo.height,
+				webcamSize: webcamInfo ? { width: webcamInfo.width, height: webcamInfo.height } : null,
+				webcamLayoutPreset: this.config.webcamLayoutPreset,
+				webcamMaskShape: this.config.webcamMaskShape,
+				webcamPosition: this.config.webcamPosition,
 				annotationRegions: this.config.annotationRegions,
 				speedRegions: this.config.speedRegions,
 				previewWidth: this.config.previewWidth,
 				previewHeight: this.config.previewHeight,
+				cursorTelemetry: this.config.cursorTelemetry,
 			});
 			await this.renderer.initialize();
 
 			// Initialize GIF encoder
 			// Loop: 0 = infinite loop, 1 = play once (no loop)
 			const repeat = this.config.loop ? 0 : 1;
-
+			const cores = navigator.hardwareConcurrency || 4;
+			const WORKER_COUNT = Math.max(1, Math.min(8, cores - 1));
 			this.gif = new GIF({
-				workers: 4,
+				workers: WORKER_COUNT,
 				quality: 10,
 				width: this.config.width,
 				height: this.config.height,
@@ -154,6 +189,42 @@ export class GifExporter {
 			console.log("[GifExporter] Using streaming decode (web-demuxer + VideoDecoder)");
 
 			let frameIndex = 0;
+			webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			let stopWebcamDecode = false;
+			let webcamDecodeError: Error | null = null;
+			const webcamDecodePromise =
+				this.webcamDecoder && webcamFrameQueue
+					? (() => {
+							const queue = webcamFrameQueue;
+							return this.webcamDecoder
+								.decodeAll(
+									this.config.frameRate,
+									this.config.trimRegions,
+									this.config.speedRegions,
+									async (webcamFrame) => {
+										while (queue.length >= 12 && !this.cancelled && !stopWebcamDecode) {
+											await new Promise((resolve) => setTimeout(resolve, 2));
+										}
+										if (this.cancelled || stopWebcamDecode) {
+											webcamFrame.close();
+											return;
+										}
+										queue.enqueue(webcamFrame);
+									},
+								)
+								.catch((error) => {
+									webcamDecodeError = error instanceof Error ? error : new Error(String(error));
+									throw error;
+								})
+								.finally(() => {
+									if (webcamDecodeError) {
+										queue.fail(webcamDecodeError);
+									} else {
+										queue.close();
+									}
+								});
+						})()
+					: null;
 
 			// Stream decode and process frames — no seeking!
 			await this.streamingDecoder.decodeAll(
@@ -161,32 +232,42 @@ export class GifExporter {
 				this.config.trimRegions,
 				this.config.speedRegions,
 				async (videoFrame, _exportTimestampUs, sourceTimestampMs) => {
-					if (this.cancelled) {
+					let webcamFrame: VideoFrame | null = null;
+					try {
+						if (this.cancelled) {
+							return;
+						}
+
+						webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
+						const renderer = this.renderer;
+						if (this.cancelled || !renderer) {
+							return;
+						}
+
+						// Render the frame with all effects using source timestamp
+						const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
+						await renderer.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
+
+						// Get the rendered canvas and add to GIF
+						const canvas = renderer.getCanvas();
+
+						// Add frame to GIF encoder with delay
+						this.gif!.addFrame(canvas, { delay: frameDelay, copy: true });
+
+						frameIndex++;
+
+						// Update progress
+						if (this.config.onProgress) {
+							this.config.onProgress({
+								currentFrame: frameIndex,
+								totalFrames,
+								percentage: (frameIndex / totalFrames) * 100,
+								estimatedTimeRemaining: 0,
+							});
+						}
+					} finally {
 						videoFrame.close();
-						return;
-					}
-
-					// Render the frame with all effects using source timestamp
-					const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
-					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs);
-					videoFrame.close();
-
-					// Get the rendered canvas and add to GIF
-					const canvas = this.renderer!.getCanvas();
-
-					// Add frame to GIF encoder with delay
-					this.gif!.addFrame(canvas, { delay: frameDelay, copy: true });
-
-					frameIndex++;
-
-					// Update progress
-					if (this.config.onProgress) {
-						this.config.onProgress({
-							currentFrame: frameIndex,
-							totalFrames,
-							percentage: (frameIndex / totalFrames) * 100,
-							estimatedTimeRemaining: 0,
-						});
+						webcamFrame?.close();
 					}
 				},
 			);
@@ -195,6 +276,11 @@ export class GifExporter {
 				return { success: false, error: "Export cancelled" };
 			}
 
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			this.webcamDecoder?.cancel();
+			await webcamDecodePromise;
+
 			// Update progress to show we're now in the finalizing phase
 			if (this.config.onProgress) {
 				this.config.onProgress({
@@ -238,6 +324,7 @@ export class GifExporter {
 				error: error instanceof Error ? error.message : String(error),
 			};
 		} finally {
+			webcamFrameQueue?.destroy();
 			this.cleanup();
 		}
 	}
@@ -247,6 +334,9 @@ export class GifExporter {
 		if (this.streamingDecoder) {
 			this.streamingDecoder.cancel();
 		}
+		if (this.webcamDecoder) {
+			this.webcamDecoder.cancel();
+		}
 		if (this.gif) {
 			this.gif.abort();
 		}
@@ -263,6 +353,15 @@ export class GifExporter {
 			this.streamingDecoder = null;
 		}
 
+		if (this.webcamDecoder) {
+			try {
+				this.webcamDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying webcam decoder:", e);
+			}
+			this.webcamDecoder = null;
+		}
+
 		if (this.renderer) {
 			try {
 				this.renderer.destroy();

src/lib/exporter/gradientParser.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from "vitest";
+import {
+	getLinearGradientPoints,
+	getRadialGradientShape,
+	parseCssGradient,
+	resolveLinearGradientAngle,
+} from "./gradientParser";
+
+describe("parseCssGradient", () => {
+	it("parses rgba-based gradient presets without splitting inside color functions", () => {
+		const parsed = parseCssGradient(
+			"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% )",
+		);
+
+		expect(parsed?.type).toBe("linear");
+		expect(parsed?.descriptor).toBe("111.6deg");
+		expect(parsed?.stops).toHaveLength(4);
+		expect(parsed?.stops.map((stop) => stop.color)).toEqual([
+			"rgba(114,167,232,1)",
+			"rgba(253,129,82,1)",
+			"rgba(253,129,82,1)",
+			"rgba(249,202,86,1)",
+		]);
+		expect(parsed?.stops[0]?.offset).toBeCloseTo(0.094);
+		expect(parsed?.stops[1]?.offset).toBeCloseTo(0.439);
+		expect(parsed?.stops[2]?.offset).toBeCloseTo(0.548);
+		expect(parsed?.stops[3]?.offset).toBeCloseTo(0.863);
+	});
+
+	it("fills missing stop positions for simple hex gradients", () => {
+		const parsed = parseCssGradient("linear-gradient(135deg, #FBC8B4, #2447B1)");
+
+		expect(parsed?.stops).toEqual([
+			{ color: "#FBC8B4", offset: 0 },
+			{ color: "#2447B1", offset: 1 },
+		]);
+	});
+});
+
+describe("gradient geometry", () => {
+	it("maps linear directions to canvas endpoints", () => {
+		const angle = resolveLinearGradientAngle("to right");
+		const points = getLinearGradientPoints(angle, 1920, 1080);
+
+		expect(points.x0).toBeCloseTo(0);
+		expect(points.y0).toBeCloseTo(540);
+		expect(points.x1).toBeCloseTo(1920);
+		expect(points.y1).toBeCloseTo(540);
+	});
+
+	it("uses radial positions from the descriptor", () => {
+		const shape = getRadialGradientShape("circle farthest-corner at 10% 20%", 1000, 500);
+
+		expect(shape.cx).toBe(100);
+		expect(shape.cy).toBe(100);
+		expect(shape.radius).toBeCloseTo(Math.hypot(900, 400));
+	});
+});

src/lib/exporter/gradientParser.ts

@@ -0,0 +1,236 @@
+export interface ParsedGradientStop {
+	color: string;
+	offset: number;
+}
+
+export interface ParsedGradient {
+	type: "linear" | "radial";
+	descriptor: string | null;
+	stops: ParsedGradientStop[];
+}
+
+const COLOR_TOKEN_RE = /^(#[0-9a-fA-F]{3,8}|(?:rgba?|hsla?)\([^)]*\)|[a-zA-Z-]+)/;
+
+export function parseCssGradient(input: string): ParsedGradient | null {
+	const gradientMatch = input.match(/^(linear|radial)-gradient\((.*)\)$/i);
+	if (!gradientMatch) {
+		return null;
+	}
+
+	const type = gradientMatch[1].toLowerCase() as ParsedGradient["type"];
+	const rawArgs = splitGradientArgs(gradientMatch[2]);
+	if (rawArgs.length === 0) {
+		return null;
+	}
+
+	let descriptor: string | null = null;
+	let stopArgs = rawArgs;
+
+	if (isGradientDescriptor(type, rawArgs[0])) {
+		descriptor = rawArgs[0];
+		stopArgs = rawArgs.slice(1);
+	}
+
+	const parsedStops = stopArgs
+		.map((part) => parseColorStop(part))
+		.filter((stop): stop is { color: string; offset: number | null } => stop !== null);
+
+	if (parsedStops.length === 0) {
+		return null;
+	}
+
+	return {
+		type,
+		descriptor,
+		stops: normalizeStopOffsets(parsedStops),
+	};
+}
+
+export function getLinearGradientPoints(angleDeg: number, width: number, height: number) {
+	const radians = (angleDeg * Math.PI) / 180;
+	const vx = Math.sin(radians);
+	const vy = -Math.cos(radians);
+	const halfSpan = (Math.abs(vx) * width + Math.abs(vy) * height) / 2;
+	const cx = width / 2;
+	const cy = height / 2;
+
+	return {
+		x0: cx - vx * halfSpan,
+		y0: cy - vy * halfSpan,
+		x1: cx + vx * halfSpan,
+		y1: cy + vy * halfSpan,
+	};
+}
+
+export function resolveLinearGradientAngle(descriptor: string | null): number {
+	if (!descriptor) {
+		return 180;
+	}
+
+	const angleMatch = descriptor.match(/(-?\d*\.?\d+)deg/i);
+	if (angleMatch) {
+		return Number.parseFloat(angleMatch[1]);
+	}
+
+	const normalized = descriptor.trim().toLowerCase().replace(/\s+/g, " ");
+	const directionMap: Record<string, number> = {
+		"to top": 0,
+		"to top right": 45,
+		"to right": 90,
+		"to bottom right": 135,
+		"to bottom": 180,
+		"to bottom left": 225,
+		"to left": 270,
+		"to top left": 315,
+	};
+
+	return directionMap[normalized] ?? 180;
+}
+
+export function getRadialGradientShape(descriptor: string | null, width: number, height: number) {
+	const atMatch = descriptor?.match(/at\s+(-?\d*\.?\d+)%\s+(-?\d*\.?\d+)%/i);
+	const cx = atMatch ? (Number.parseFloat(atMatch[1]) / 100) * width : width / 2;
+	const cy = atMatch ? (Number.parseFloat(atMatch[2]) / 100) * height : height / 2;
+
+	const distances = [
+		Math.hypot(cx, cy),
+		Math.hypot(width - cx, cy),
+		Math.hypot(cx, height - cy),
+		Math.hypot(width - cx, height - cy),
+	];
+
+	return {
+		cx,
+		cy,
+		radius: Math.max(...distances),
+	};
+}
+
+function splitGradientArgs(input: string): string[] {
+	const parts: string[] = [];
+	let current = "";
+	let depth = 0;
+
+	for (const char of input) {
+		if (char === "(") {
+			depth += 1;
+			current += char;
+			continue;
+		}
+
+		if (char === ")") {
+			depth = Math.max(0, depth - 1);
+			current += char;
+			continue;
+		}
+
+		if (char === "," && depth === 0) {
+			const trimmed = current.trim();
+			if (trimmed) {
+				parts.push(trimmed);
+			}
+			current = "";
+			continue;
+		}
+
+		current += char;
+	}
+
+	const trimmed = current.trim();
+	if (trimmed) {
+		parts.push(trimmed);
+	}
+
+	return parts;
+}
+
+function isGradientDescriptor(type: ParsedGradient["type"], part: string) {
+	if (type === "linear") {
+		return /^\s*to\s+/i.test(part) || /-?\d*\.?\d+deg/i.test(part);
+	}
+
+	return /\b(circle|ellipse|closest|farthest)\b/i.test(part) || /\bat\b/i.test(part);
+}
+
+function parseColorStop(part: string): { color: string; offset: number | null } | null {
+	const match = part.trim().match(COLOR_TOKEN_RE);
+	if (!match) {
+		return null;
+	}
+
+	const color = match[1];
+	const rest = part.slice(match[0].length);
+	const percentMatch = rest.match(/(-?\d*\.?\d+)%/);
+	const offset = percentMatch ? clamp(Number.parseFloat(percentMatch[1]) / 100, 0, 1) : null;
+
+	return { color, offset };
+}
+
+function normalizeStopOffsets(
+	stops: Array<{ color: string; offset: number | null }>,
+): ParsedGradientStop[] {
+	const explicitCount = stops.filter((stop) => stop.offset !== null).length;
+	if (explicitCount === 0) {
+		if (stops.length === 1) {
+			return [{ color: stops[0].color, offset: 0 }];
+		}
+
+		return stops.map((stop, index) => ({
+			color: stop.color,
+			offset: index / (stops.length - 1),
+		}));
+	}
+
+	const resolved = stops.map((stop) => stop.offset);
+	const firstExplicit = resolved.findIndex((offset) => offset !== null);
+	const lastExplicit = findLastDefinedIndex(resolved);
+
+	for (let index = 0; index < firstExplicit; index += 1) {
+		const end = resolved[firstExplicit] ?? 0;
+		resolved[index] = firstExplicit === 0 ? end : (end * index) / firstExplicit;
+	}
+
+	for (let index = lastExplicit + 1; index < resolved.length; index += 1) {
+		const start = resolved[lastExplicit] ?? 1;
+		const denominator = resolved.length - 1 - lastExplicit;
+		resolved[index] =
+			denominator <= 0 ? start : start + ((1 - start) * (index - lastExplicit)) / denominator;
+	}
+
+	let runStart = firstExplicit;
+	while (runStart < lastExplicit) {
+		const nextExplicit = resolved.findIndex((offset, index) => index > runStart && offset !== null);
+		if (nextExplicit === -1) {
+			break;
+		}
+
+		const start = resolved[runStart] ?? 0;
+		const end = resolved[nextExplicit] ?? start;
+		const gap = nextExplicit - runStart;
+
+		for (let index = runStart + 1; index < nextExplicit; index += 1) {
+			resolved[index] = start + ((end - start) * (index - runStart)) / gap;
+		}
+
+		runStart = nextExplicit;
+	}
+
+	return stops.map((stop, index) => ({
+		color: stop.color,
+		offset: clamp(resolved[index] ?? 0, 0, 1),
+	}));
+}
+
+function clamp(value: number, min: number, max: number) {
+	return Math.min(max, Math.max(min, value));
+}
+
+function findLastDefinedIndex(values: Array<number | null>) {
+	for (let index = values.length - 1; index >= 0; index -= 1) {
+		if (values[index] !== null) {
+			return index;
+		}
+	}
+
+	return -1;
+}

src/lib/exporter/streamingDecoder.test.ts

@@ -0,0 +1,47 @@
+import { describe, expect, it } from "vitest";
+import { shouldFailDecodeEndedEarly } from "./streamingDecoder";
+
+describe("shouldFailDecodeEndedEarly", () => {
+	it("does not fail once every segment has been satisfied", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: 5.33,
+				requiredEndSec: 6.498,
+				streamDurationSec: 5.33,
+			}),
+		).toBe(false);
+	});
+
+	it("fails when decode stops far before the required end", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: 5.33,
+				requiredEndSec: 10,
+				streamDurationSec: 5.33,
+			}),
+		).toBe(true);
+	});
+
+	it("fails when no frame could be decoded for a non-empty timeline", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: null,
+				requiredEndSec: 1,
+			}),
+		).toBe(true);
+	});
+
+	it("fails when the decoder has not reached the reported stream end", () => {
+		expect(
+			shouldFailDecodeEndedEarly({
+				cancelled: false,
+				lastDecodedFrameSec: 4.9,
+				requiredEndSec: 6.498,
+				streamDurationSec: 5.33,
+			}),
+		).toBe(true);
+	});
+});

src/lib/exporter/streamingDecoder.ts

@@ -1,16 +1,68 @@
 import { WebDemuxer } from "web-demuxer";
 import type { SpeedRegion, TrimRegion } from "@/components/video-editor/types";
 
+const SOURCE_LOAD_TIMEOUT_MS = 60_000;
+
 export interface DecodedVideoInfo {
 	width: number;
 	height: number;
 	duration: number; // seconds
+	streamDuration?: number; // seconds
 	frameRate: number;
 	codec: string;
 	hasAudio: boolean;
 	audioCodec?: string;
 }
 
+type EarlyDecodeEndCheck = {
+	cancelled: boolean;
+	lastDecodedFrameSec: number | null;
+	requiredEndSec: number;
+	streamDurationSec?: number;
+};
+
+const EARLY_DECODE_END_THRESHOLD_SEC = 1;
+const METADATA_TAIL_TOLERANCE_SEC = 1.5;
+const STREAM_DURATION_MATCH_TOLERANCE_SEC = 0.25;
+
+export function shouldFailDecodeEndedEarly({
+	cancelled,
+	lastDecodedFrameSec,
+	requiredEndSec,
+	streamDurationSec,
+}: EarlyDecodeEndCheck): boolean {
+	if (cancelled || requiredEndSec <= 0) {
+		return false;
+	}
+
+	if (lastDecodedFrameSec === null) {
+		return true;
+	}
+
+	const decodeGapSec = requiredEndSec - lastDecodedFrameSec;
+	if (decodeGapSec <= EARLY_DECODE_END_THRESHOLD_SEC) {
+		return false;
+	}
+
+	if (typeof streamDurationSec !== "number" || !Number.isFinite(streamDurationSec)) {
+		return true;
+	}
+
+	const metadataTailSec = requiredEndSec - streamDurationSec;
+	const decodedNearStreamEnd =
+		Math.abs(lastDecodedFrameSec - streamDurationSec) <= STREAM_DURATION_MATCH_TOLERANCE_SEC;
+
+	if (
+		decodedNearStreamEnd &&
+		metadataTailSec > 0 &&
+		metadataTailSec <= METADATA_TAIL_TOLERANCE_SEC
+	) {
+		return false;
+	}
+
+	return true;
+}
+
 /** Caller must close the VideoFrame after use. */
 type OnFrameCallback = (
 	frame: VideoFrame,
@@ -23,7 +75,7 @@ type OnFrameCallback = (
  * Way faster than seeking an HTMLVideoElement per frame.
  *
  * Frames in trimmed regions are decoded (needed for P/B-frame state) but discarded.
- * Non-trimmed frames get buffered per segment and resampled to the target frame rate.
+ * Kept frames are resampled to the target frame rate in a streaming pass.
  */
 export class StreamingVideoDecoder {
 	private demuxer: WebDemuxer | null = null;
@@ -31,18 +83,64 @@ export class StreamingVideoDecoder {
 	private cancelled = false;
 	private metadata: DecodedVideoInfo | null = null;
 
-	async loadMetadata(videoUrl: string): Promise<DecodedVideoInfo> {
-		const response = await fetch(videoUrl);
-		const blob = await response.blob();
+	private async loadSourceFile(videoUrl: string): Promise<{ file: File; blob: Blob }> {
+		const isRemoteUrl = /^(https?:|blob:|data:)/i.test(videoUrl);
+
+		if (!isRemoteUrl && window.electronAPI?.readBinaryFile) {
+			const result = await this.withTimeout(
+				window.electronAPI.readBinaryFile(videoUrl),
+				SOURCE_LOAD_TIMEOUT_MS,
+				"Timed out while loading the source video.",
+			);
+			if (!result.success || !result.data) {
+				throw new Error(result.message || result.error || "Failed to read source video");
+			}
+
+			const filename = (result.path || videoUrl).split(/[\\/]/).pop() || "video";
+			const blob = new Blob([result.data]);
+			return {
+				blob,
+				file: new File([blob], filename, { type: blob.type || "application/octet-stream" }),
+			};
+		}
+
+		const response = await this.withTimeout(
+			fetch(videoUrl),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while loading the source video.",
+		);
+		if (!response.ok) {
+			throw new Error(`Failed to fetch source video: ${response.status} ${response.statusText}`);
+		}
+		const blob = await this.withTimeout(
+			response.blob(),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while reading the source video.",
+		);
 		const filename = videoUrl.split("/").pop() || "video";
-		const file = new File([blob], filename, { type: blob.type });
+		return {
+			blob,
+			file: new File([blob], filename, { type: blob.type }),
+		};
+	}
+
+	async loadMetadata(videoUrl: string): Promise<DecodedVideoInfo> {
+		const { file } = await this.loadSourceFile(videoUrl);
 
 		// Relative URL so it resolves correctly in both dev (http) and packaged (file://) builds
 		const wasmUrl = new URL("./wasm/web-demuxer.wasm", window.location.href).href;
 		this.demuxer = new WebDemuxer({ wasmFilePath: wasmUrl });
-		await this.demuxer.load(file);
+		await this.withTimeout(
+			this.demuxer.load(file),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while parsing the source video.",
+		);
 
-		const mediaInfo = await this.demuxer.getMediaInfo();
+		const mediaInfo = await this.withTimeout(
+			this.demuxer.getMediaInfo(),
+			SOURCE_LOAD_TIMEOUT_MS,
+			"Timed out while reading video metadata.",
+		);
 		const videoStream = mediaInfo.streams.find((s) => s.codec_type_string === "video");
 
 		let frameRate = 60;
@@ -61,6 +159,10 @@ export class StreamingVideoDecoder {
 			width: videoStream?.width || 1920,
 			height: videoStream?.height || 1080,
 			duration: mediaInfo.duration,
+			streamDuration:
+				typeof videoStream?.duration === "number" && Number.isFinite(videoStream.duration)
+					? videoStream.duration
+					: undefined,
 			frameRate,
 			codec: videoStream?.codec_string || "unknown",
 			hasAudio: !!audioStream,
@@ -81,11 +183,17 @@ export class StreamingVideoDecoder {
 		}
 
 		const decoderConfig = await this.demuxer.getDecoderConfig("video");
+		const codec = this.metadata.codec.toLowerCase();
+		const shouldPreferSoftwareDecode = codec.includes("av01") || codec.includes("av1");
 		const segments = this.splitBySpeed(
 			this.computeSegments(this.metadata.duration, trimRegions),
 			speedRegions,
 		);
+		const segmentOutputFrameCounts = segments.map((segment) =>
+			Math.ceil(((segment.endSec - segment.startSec) / segment.speed) * targetFrameRate),
+		);
 		const frameDurationUs = 1_000_000 / targetFrameRate;
+		const epsilonSec = 0.001;
 
 		// Async frame queue — decoder pushes, consumer pulls
 		const pendingFrames: VideoFrame[] = [];
@@ -112,7 +220,22 @@ export class StreamingVideoDecoder {
 				}
 			},
 		});
-		this.decoder.configure(decoderConfig);
+		const preferredDecoderConfig = shouldPreferSoftwareDecode
+			? {
+					...decoderConfig,
+					hardwareAcceleration: "prefer-software" as const,
+				}
+			: decoderConfig;
+
+		try {
+			this.decoder.configure(preferredDecoderConfig);
+		} catch (error) {
+			if (!shouldPreferSoftwareDecode) {
+				throw error;
+			}
+			// Fall back to default decoder config if software preference isn't supported.
+			this.decoder.configure(decoderConfig);
+		}
 
 		const getNextFrame = (): Promise<VideoFrame | null> => {
 			if (decodeError) throw decodeError;
@@ -123,8 +246,10 @@ export class StreamingVideoDecoder {
 			});
 		};
 
-		// One forward stream through the whole file
-		const reader = this.demuxer.read("video").getReader();
+		// One forward stream through the whole file.
+		// Pass explicit range because some containers are truncated when no end is provided.
+		const readEndSec = Math.max(this.metadata.duration, this.metadata.streamDuration ?? 0) + 0.5;
+		const reader = this.demuxer.read("video", 0, readEndSec).getReader();
 
 		// Feed chunks to decoder in background with backpressure
 		const feedPromise = (async () => {
@@ -133,7 +258,11 @@ export class StreamingVideoDecoder {
 					const { done, value: chunk } = await reader.read();
 					if (done || !chunk) break;
 
-					while (this.decoder!.decodeQueueSize > 10 && !this.cancelled) {
+					// Backpressure on both decode queue and decoded frame backlog.
+					while (
+						(this.decoder!.decodeQueueSize > 10 || pendingFrames.length > 24) &&
+						!this.cancelled
+					) {
 						await new Promise((resolve) => setTimeout(resolve, 1));
 					}
 					if (this.cancelled) break;
@@ -158,65 +287,131 @@ export class StreamingVideoDecoder {
 
 		// Route decoded frames into segments by timestamp, then deliver with VFR→CFR resampling
 		let segmentIdx = 0;
+		let segmentFrameIndex = 0;
 		let exportFrameIndex = 0;
-		let segmentBuffer: VideoFrame[] = [];
+		let lastDecodedFrameSec: number | null = null;
+		let heldFrame: VideoFrame | null = null;
+		let heldFrameSec = 0;
+
+		const emitHeldFrameForTarget = async (segment: {
+			startSec: number;
+			endSec: number;
+			speed: number;
+		}) => {
+			if (!heldFrame) return false;
+			const segmentFrameCount = segmentOutputFrameCounts[segmentIdx];
+			if (segmentFrameIndex >= segmentFrameCount) return false;
+
+			const sourceTimeSec =
+				segment.startSec + (segmentFrameIndex / targetFrameRate) * segment.speed;
+			if (sourceTimeSec >= segment.endSec - epsilonSec) return false;
+
+			const clone = new VideoFrame(heldFrame, { timestamp: heldFrame.timestamp });
+			await onFrame(clone, exportFrameIndex * frameDurationUs, sourceTimeSec * 1000);
+			segmentFrameIndex++;
+			exportFrameIndex++;
+			return true;
+		};
 
 		while (!this.cancelled && segmentIdx < segments.length) {
 			const frame = await getNextFrame();
 			if (!frame) break;
 
 			const frameTimeSec = frame.timestamp / 1_000_000;
-			const currentSegment = segments[segmentIdx];
+			lastDecodedFrameSec = frameTimeSec;
 
-			// Before current segment — trimmed or pre-video
-			if (frameTimeSec < currentSegment.startSec - 0.001) {
+			// Finalize completed segments before handling this frame.
+			while (
+				segmentIdx < segments.length &&
+				frameTimeSec >= segments[segmentIdx].endSec - epsilonSec
+			) {
+				const segment = segments[segmentIdx];
+				while (!this.cancelled && (await emitHeldFrameForTarget(segment))) {
+					// Keep emitting remaining output frames for this segment from the last known frame.
+				}
+
+				segmentIdx++;
+				segmentFrameIndex = 0;
+				if (
+					heldFrame &&
+					segmentIdx < segments.length &&
+					heldFrameSec < segments[segmentIdx].startSec - epsilonSec
+				) {
+					heldFrame.close();
+					heldFrame = null;
+				}
+			}
+
+			if (segmentIdx >= segments.length) {
 				frame.close();
 				continue;
 			}
 
-			// Past current segment — flush buffer and advance
-			if (frameTimeSec >= currentSegment.endSec - 0.001) {
-				exportFrameIndex = await this.deliverSegment(
-					segmentBuffer,
-					currentSegment,
-					targetFrameRate,
-					frameDurationUs,
-					exportFrameIndex,
-					onFrame,
-				);
-				for (const f of segmentBuffer) f.close();
-				segmentBuffer = [];
+			const currentSegment = segments[segmentIdx];
 
-				segmentIdx++;
-				while (
-					segmentIdx < segments.length &&
-					frameTimeSec >= segments[segmentIdx].endSec - 0.001
-				) {
-					segmentIdx++;
-				}
-
-				if (segmentIdx < segments.length && frameTimeSec >= segments[segmentIdx].startSec - 0.001) {
-					segmentBuffer.push(frame);
-				} else {
-					frame.close();
-				}
+			// Before current segment (trimmed region or pre-roll).
+			if (frameTimeSec < currentSegment.startSec - epsilonSec) {
+				frame.close();
 				continue;
 			}
 
-			segmentBuffer.push(frame);
+			if (!heldFrame) {
+				heldFrame = frame;
+				heldFrameSec = frameTimeSec;
+				continue;
+			}
+
+			// Any target timestamp before this midpoint is closer to heldFrame than current frame.
+			const handoffBoundarySec = (heldFrameSec + frameTimeSec) / 2;
+			while (!this.cancelled) {
+				const segmentFrameCount = segmentOutputFrameCounts[segmentIdx];
+				if (segmentFrameIndex >= segmentFrameCount) {
+					break;
+				}
+
+				const sourceTimeSec =
+					currentSegment.startSec + (segmentFrameIndex / targetFrameRate) * currentSegment.speed;
+				if (sourceTimeSec >= currentSegment.endSec - epsilonSec) {
+					break;
+				}
+				if (sourceTimeSec > handoffBoundarySec) {
+					break;
+				}
+
+				const clone = new VideoFrame(heldFrame, { timestamp: heldFrame.timestamp });
+				await onFrame(clone, exportFrameIndex * frameDurationUs, sourceTimeSec * 1000);
+				segmentFrameIndex++;
+				exportFrameIndex++;
+			}
+
+			heldFrame.close();
+			heldFrame = frame;
+			heldFrameSec = frameTimeSec;
 		}
 
-		// Flush last segment
-		if (segmentBuffer.length > 0 && segmentIdx < segments.length) {
-			exportFrameIndex = await this.deliverSegment(
-				segmentBuffer,
-				segments[segmentIdx],
-				targetFrameRate,
-				frameDurationUs,
-				exportFrameIndex,
-				onFrame,
-			);
-			for (const f of segmentBuffer) f.close();
+		// Flush remaining output frames for the last decoded frame.
+		if (heldFrame && segmentIdx < segments.length) {
+			while (!this.cancelled && segmentIdx < segments.length) {
+				const segment = segments[segmentIdx];
+				if (heldFrameSec < segment.startSec - epsilonSec) {
+					break;
+				}
+
+				while (!this.cancelled && (await emitHeldFrameForTarget(segment))) {
+					// Keep emitting output frames for the active segment.
+				}
+
+				segmentIdx++;
+				segmentFrameIndex = 0;
+				if (
+					segmentIdx < segments.length &&
+					heldFrameSec < segments[segmentIdx].startSec - epsilonSec
+				) {
+					break;
+				}
+			}
+			heldFrame.close();
+			heldFrame = null;
 		}
 
 		// Drain leftover decoded frames
@@ -239,39 +434,22 @@ export class StreamingVideoDecoder {
 			this.decoder.close();
 		}
 		this.decoder = null;
-	}
 
-	/**
-	 * Resample buffered frames to fill the target frame count for this segment.
-	 * Handles VFR sources by duplicating/decimating as needed.
-	 */
-	private async deliverSegment(
-		frames: VideoFrame[],
-		segment: { startSec: number; endSec: number; speed: number },
-		targetFrameRate: number,
-		frameDurationUs: number,
-		startExportFrameIndex: number,
-		onFrame: OnFrameCallback,
-	): Promise<number> {
-		if (frames.length === 0) return startExportFrameIndex;
-
-		const segmentFrameCount = Math.ceil(
-			((segment.endSec - segment.startSec) / segment.speed) * targetFrameRate,
-		);
-		let exportFrameIndex = startExportFrameIndex;
-
-		for (let i = 0; i < segmentFrameCount && !this.cancelled; i++) {
-			const sourceIdx = Math.min(
-				Math.floor((i * frames.length) / segmentFrameCount),
-				frames.length - 1,
+		const requiredEndSec = segments.length > 0 ? segments[segments.length - 1].endSec : 0;
+		if (
+			shouldFailDecodeEndedEarly({
+				cancelled: this.cancelled,
+				lastDecodedFrameSec,
+				requiredEndSec,
+				streamDurationSec: this.metadata.streamDuration,
+			})
+		) {
+			const decodedAtLabel =
+				lastDecodedFrameSec === null ? "no decoded frame" : `${lastDecodedFrameSec.toFixed(3)}s`;
+			throw new Error(
+				`Video decode ended early at ${decodedAtLabel} (needed ${requiredEndSec.toFixed(3)}s).`,
 			);
-			const sourceFrame = frames[sourceIdx];
-			const clone = new VideoFrame(sourceFrame, { timestamp: sourceFrame.timestamp });
-			await onFrame(clone, exportFrameIndex * frameDurationUs, sourceFrame.timestamp / 1000);
-			exportFrameIndex++;
 		}
-
-		return exportFrameIndex;
 	}
 
 	private computeSegments(
@@ -364,8 +542,26 @@ export class StreamingVideoDecoder {
 		if (this.demuxer) {
 			try {
 				this.demuxer.destroy();
-			} catch {}
+			} catch {
+				/* ignore */
+			}
 			this.demuxer = null;
 		}
 	}
+
+	private withTimeout<T>(promise: Promise<T>, timeoutMs: number, message: string): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			const timer = window.setTimeout(() => reject(new Error(message)), timeoutMs);
+			promise.then(
+				(value) => {
+					window.clearTimeout(timer);
+					resolve(value);
+				},
+				(error) => {
+					window.clearTimeout(timer);
+					reject(error);
+				},
+			);
+		});
+	}
 }

src/lib/exporter/videoExporter.ts

@@ -3,16 +3,22 @@ import type {
 	CropRegion,
 	SpeedRegion,
 	TrimRegion,
+	WebcamLayoutPreset,
 	ZoomRegion,
 } from "@/components/video-editor/types";
+import { AsyncVideoFrameQueue } from "./asyncVideoFrameQueue";
 import { AudioProcessor } from "./audioEncoder";
 import { FrameRenderer } from "./frameRenderer";
 import { VideoMuxer } from "./muxer";
 import { StreamingVideoDecoder } from "./streamingDecoder";
 import type { ExportConfig, ExportProgress, ExportResult } from "./types";
 
+const ENCODER_STALL_TIMEOUT_MS = 15_000;
+const ENCODER_FLUSH_TIMEOUT_MS = 20_000;
+
 interface VideoExporterConfig extends ExportConfig {
 	videoUrl: string;
+	webcamVideoUrl?: string;
 	wallpaper: string;
 	zoomRegions: ZoomRegion[];
 	trimRegions?: TrimRegion[];
@@ -20,14 +26,18 @@ interface VideoExporterConfig extends ExportConfig {
 	showShadow: boolean;
 	shadowIntensity: number;
 	showBlur: boolean;
-	motionBlurEnabled?: boolean;
+	motionBlurAmount?: number;
 	borderRadius?: number;
 	padding?: number;
 	videoPadding?: number;
 	cropRegion: CropRegion;
+	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamMaskShape?: import("@/components/video-editor/types").WebcamMaskShape;
+	webcamPosition?: { cx: number; cy: number } | null;
 	annotationRegions?: AnnotationRegion[];
 	previewWidth?: number;
 	previewHeight?: number;
+	cursorTelemetry?: import("@/components/video-editor/types").CursorTelemetryPoint[];
 	onProgress?: (progress: ExportProgress) => void;
 }
 
@@ -38,31 +48,79 @@ export class VideoExporter {
 	private encoder: VideoEncoder | null = null;
 	private muxer: VideoMuxer | null = null;
 	private audioProcessor: AudioProcessor | null = null;
+	private webcamDecoder: StreamingVideoDecoder | null = null;
 	private cancelled = false;
 	private encodeQueue = 0;
-	// Increased queue size for better throughput with hardware encoding
+	// Keep a smaller queue for software encoding so Windows does not balloon memory.
 	private readonly MAX_ENCODE_QUEUE = 120;
 	private videoDescription: Uint8Array | undefined;
 	private videoColorSpace: VideoColorSpaceInit | undefined;
-	// Track muxing promises for parallel processing
 	private muxingPromises: Promise<void>[] = [];
 	private chunkCount = 0;
+	private lastEncoderOutputAt = 0;
+	private fatalEncoderError: Error | null = null;
 
 	constructor(config: VideoExporterConfig) {
 		this.config = config;
 	}
 
 	async export(): Promise<ExportResult> {
+		const encoderPreferences = this.getEncoderPreferences();
+		let lastError: Error | null = null;
+
+		for (const encoderPreference of encoderPreferences) {
+			try {
+				return await this.exportWithEncoderPreference(encoderPreference);
+			} catch (error) {
+				const normalizedError = error instanceof Error ? error : new Error(String(error));
+				lastError = normalizedError;
+
+				if (this.cancelled) {
+					return { success: false, error: "Export cancelled" };
+				}
+
+				if (encoderPreferences.length > 1) {
+					console.warn(
+						`[VideoExporter] ${encoderPreference} export attempt failed:`,
+						normalizedError,
+					);
+				}
+			} finally {
+				this.cleanup();
+			}
+		}
+
+		return {
+			success: false,
+			error: lastError?.message || "Export failed",
+		};
+	}
+
+	private async exportWithEncoderPreference(
+		encoderPreference: HardwareAcceleration,
+	): Promise<ExportResult> {
+		let webcamFrameQueue: AsyncVideoFrameQueue | null = null;
+		let stopWebcamDecode = false;
+		let webcamDecodeError: Error | null = null;
+		let webcamDecodePromise: Promise<void> | null = null;
+		let webcamDecoder: StreamingVideoDecoder | null = null;
+
+		this.cleanup();
+		this.cancelled = false;
+		this.fatalEncoderError = null;
+
 		try {
-			this.cleanup();
-			this.cancelled = false;
+			const streamingDecoder = new StreamingVideoDecoder();
+			this.streamingDecoder = streamingDecoder;
+			const videoInfo = await streamingDecoder.loadMetadata(this.config.videoUrl);
+			let webcamInfo: Awaited<ReturnType<StreamingVideoDecoder["loadMetadata"]>> | null = null;
+			if (this.config.webcamVideoUrl) {
+				webcamDecoder = new StreamingVideoDecoder();
+				this.webcamDecoder = webcamDecoder;
+				webcamInfo = await webcamDecoder.loadMetadata(this.config.webcamVideoUrl);
+			}
 
-			// Initialize streaming decoder and load video metadata
-			this.streamingDecoder = new StreamingVideoDecoder();
-			const videoInfo = await this.streamingDecoder.loadMetadata(this.config.videoUrl);
-
-			// Initialize frame renderer
-			this.renderer = new FrameRenderer({
+			const renderer = new FrameRenderer({
 				width: this.config.width,
 				height: this.config.height,
 				wallpaper: this.config.wallpaper,
@@ -70,103 +128,169 @@ export class VideoExporter {
 				showShadow: this.config.showShadow,
 				shadowIntensity: this.config.shadowIntensity,
 				showBlur: this.config.showBlur,
-				motionBlurEnabled: this.config.motionBlurEnabled,
+				motionBlurAmount: this.config.motionBlurAmount,
 				borderRadius: this.config.borderRadius,
 				padding: this.config.padding,
 				cropRegion: this.config.cropRegion,
 				videoWidth: videoInfo.width,
 				videoHeight: videoInfo.height,
+				webcamSize: webcamInfo ? { width: webcamInfo.width, height: webcamInfo.height } : null,
+				webcamLayoutPreset: this.config.webcamLayoutPreset,
+				webcamMaskShape: this.config.webcamMaskShape,
+				webcamPosition: this.config.webcamPosition,
 				annotationRegions: this.config.annotationRegions,
 				speedRegions: this.config.speedRegions,
 				previewWidth: this.config.previewWidth,
 				previewHeight: this.config.previewHeight,
+				cursorTelemetry: this.config.cursorTelemetry,
 			});
-			await this.renderer.initialize();
+			this.renderer = renderer;
+			await renderer.initialize();
 
-			// Initialize video encoder
-			await this.initializeEncoder();
+			await this.initializeEncoder(encoderPreference);
 
-			// Initialize muxer (with audio if source has an audio track)
 			const hasAudio = videoInfo.hasAudio;
-			this.muxer = new VideoMuxer(this.config, hasAudio);
-			await this.muxer.initialize();
+			const muxer = new VideoMuxer(this.config, hasAudio);
+			this.muxer = muxer;
+			await muxer.initialize();
 
-			// Calculate effective duration and frame count (excluding trim regions)
-			const effectiveDuration = this.streamingDecoder.getEffectiveDuration(
+			const effectiveDuration = streamingDecoder.getEffectiveDuration(
 				this.config.trimRegions,
 				this.config.speedRegions,
 			);
 			const totalFrames = Math.ceil(effectiveDuration * this.config.frameRate);
+			const readEndSec = Math.max(videoInfo.duration, videoInfo.streamDuration ?? 0) + 0.5;
 
 			console.log("[VideoExporter] Original duration:", videoInfo.duration, "s");
 			console.log("[VideoExporter] Effective duration:", effectiveDuration, "s");
 			console.log("[VideoExporter] Total frames to export:", totalFrames);
 			console.log("[VideoExporter] Using streaming decode (web-demuxer + VideoDecoder)");
 
-			const frameDuration = 1_000_000 / this.config.frameRate; // in microseconds
+			const frameDuration = 1_000_000 / this.config.frameRate;
 			let frameIndex = 0;
+			const maxEncodeQueue =
+				encoderPreference === "prefer-software"
+					? Math.min(this.MAX_ENCODE_QUEUE, 32)
+					: this.MAX_ENCODE_QUEUE;
 
-			// Stream decode and process frames — no seeking!
-			await this.streamingDecoder.decodeAll(
+			webcamFrameQueue = this.config.webcamVideoUrl ? new AsyncVideoFrameQueue() : null;
+			webcamDecodePromise =
+				webcamDecoder && webcamFrameQueue
+					? (() => {
+							const queue = webcamFrameQueue;
+							return webcamDecoder
+								.decodeAll(
+									this.config.frameRate,
+									this.config.trimRegions,
+									this.config.speedRegions,
+									async (webcamFrame) => {
+										while (queue.length >= 12 && !this.cancelled && !stopWebcamDecode) {
+											await new Promise((resolve) => setTimeout(resolve, 2));
+										}
+										if (this.cancelled || stopWebcamDecode) {
+											webcamFrame.close();
+											return;
+										}
+										queue.enqueue(webcamFrame);
+									},
+								)
+								.catch((error) => {
+									webcamDecodeError = error instanceof Error ? error : new Error(String(error));
+									throw webcamDecodeError;
+								})
+								.finally(() => {
+									if (webcamDecodeError) {
+										queue.fail(webcamDecodeError);
+									} else {
+										queue.close();
+									}
+								});
+						})()
+					: null;
+
+			await streamingDecoder.decodeAll(
 				this.config.frameRate,
 				this.config.trimRegions,
 				this.config.speedRegions,
 				async (videoFrame, _exportTimestampUs, sourceTimestampMs) => {
-					if (this.cancelled) {
-						videoFrame.close();
-						return;
-					}
+					let webcamFrame: VideoFrame | null = null;
+					try {
+						if (this.cancelled) {
+							return;
+						}
 
-					const timestamp = frameIndex * frameDuration;
+						if (this.fatalEncoderError) {
+							throw this.fatalEncoderError;
+						}
 
-					// Render the frame with all effects using source timestamp
-					const sourceTimestampUs = sourceTimestampMs * 1000; // Convert to microseconds
-					await this.renderer!.renderFrame(videoFrame, sourceTimestampUs);
-					videoFrame.close();
+						const timestamp = frameIndex * frameDuration;
+						webcamFrame = webcamFrameQueue ? await webcamFrameQueue.dequeue() : null;
+						if (this.cancelled) {
+							return;
+						}
 
-					const canvas = this.renderer!.getCanvas();
+						const sourceTimestampUs = sourceTimestampMs * 1000;
+						await renderer.renderFrame(videoFrame, sourceTimestampUs, webcamFrame);
 
-					// Create VideoFrame from canvas on GPU without reading pixels
-					// @ts-expect-error - colorSpace not in TypeScript definitions but works at runtime
-					const exportFrame = new VideoFrame(canvas, {
-						timestamp,
-						duration: frameDuration,
-						colorSpace: {
-							primaries: "bt709",
-							transfer: "iec61966-2-1",
-							matrix: "rgb",
-							fullRange: true,
-						},
-					});
+						const canvas = renderer.getCanvas();
 
-					// Check encoder queue before encoding to keep it full
-					while (
-						this.encoder &&
-						this.encoder.encodeQueueSize >= this.MAX_ENCODE_QUEUE &&
-						!this.cancelled
-					) {
-						await new Promise((resolve) => setTimeout(resolve, 5));
-					}
+						// Read raw pixels from the canvas instead of passing
+						// the canvas directly to VideoFrame. On some Linux
+						// systems the GPU shared-image path (EGL/Ozone) fails
+						// silently, producing empty frames.
+						const canvasCtx = canvas.getContext("2d")!;
+						const imageData = canvasCtx.getImageData(0, 0, canvas.width, canvas.height);
+						const exportFrame = new VideoFrame(imageData.data.buffer, {
+							format: "RGBA",
+							codedWidth: canvas.width,
+							codedHeight: canvas.height,
+							timestamp,
+							duration: frameDuration,
+							colorSpace: {
+								primaries: "bt709",
+								transfer: "iec61966-2-1",
+								matrix: "rgb",
+								fullRange: true,
+							},
+						});
 
-					if (this.encoder && this.encoder.state === "configured") {
-						this.encodeQueue++;
-						this.encoder.encode(exportFrame, { keyFrame: frameIndex % 150 === 0 });
-					} else {
-						console.warn(`[Frame ${frameIndex}] Encoder not ready! State: ${this.encoder?.state}`);
-					}
+						while (
+							this.encoder &&
+							this.encoder.encodeQueueSize >= maxEncodeQueue &&
+							!this.cancelled
+						) {
+							if (Date.now() - this.lastEncoderOutputAt > ENCODER_STALL_TIMEOUT_MS) {
+								exportFrame.close();
+								throw new Error(
+									encoderPreference === "prefer-hardware"
+										? "The hardware video encoder stopped responding. Retrying with a safer encoder."
+										: "The video encoder stopped responding during export.",
+								);
+							}
+							await new Promise((resolve) => setTimeout(resolve, 5));
+						}
 
-					exportFrame.close();
+						if (this.encoder && this.encoder.state === "configured") {
+							this.encodeQueue++;
+							this.encoder.encode(exportFrame, { keyFrame: frameIndex % 150 === 0 });
+						} else {
+							console.warn(
+								`[Frame ${frameIndex}] Encoder not ready! State: ${this.encoder?.state}`,
+							);
+						}
 
-					frameIndex++;
+						exportFrame.close();
+						frameIndex++;
 
-					// Update progress
-					if (this.config.onProgress) {
-						this.config.onProgress({
+						this.reportProgress({
 							currentFrame: frameIndex,
 							totalFrames,
 							percentage: (frameIndex / totalFrames) * 100,
 							estimatedTimeRemaining: 0,
 						});
+					} finally {
+						videoFrame.close();
+						webcamFrame?.close();
 					}
 				},
 			);
@@ -175,66 +299,99 @@ export class VideoExporter {
 				return { success: false, error: "Export cancelled" };
 			}
 
-			// Finalize encoding
+			if (this.fatalEncoderError) {
+				throw this.fatalEncoderError;
+			}
+
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			webcamDecoder?.cancel();
+			await webcamDecodePromise;
+
 			if (this.encoder && this.encoder.state === "configured") {
-				await this.encoder.flush();
+				await this.withTimeout(
+					this.encoder.flush(),
+					ENCODER_FLUSH_TIMEOUT_MS,
+					encoderPreference === "prefer-hardware"
+						? "The hardware video encoder stopped responding while finalizing the export."
+						: "The video encoder stopped responding while finalizing the export.",
+				);
+			}
+
+			if (this.fatalEncoderError) {
+				throw this.fatalEncoderError;
 			}
 
-			// Wait for all video muxing operations to complete
 			await Promise.all(this.muxingPromises);
 
-			// Process audio track if present
+			this.reportProgress({
+				currentFrame: totalFrames,
+				totalFrames,
+				percentage: 100,
+				estimatedTimeRemaining: 0,
+				phase: "finalizing",
+			});
+
 			if (hasAudio && !this.cancelled) {
-				const demuxer = this.streamingDecoder!.getDemuxer();
+				const demuxer = streamingDecoder.getDemuxer();
 				if (demuxer) {
 					console.log("[VideoExporter] Processing audio track...");
 					this.audioProcessor = new AudioProcessor();
-					await this.audioProcessor.process(demuxer, this.muxer!, this.config.trimRegions);
+					await this.audioProcessor.process(
+						demuxer,
+						muxer,
+						this.config.videoUrl,
+						this.config.trimRegions,
+						this.config.speedRegions,
+						readEndSec,
+					);
 				}
 			}
 
-			// Finalize muxer and get output blob
-			const blob = await this.muxer!.finalize();
-
+			const blob = await muxer.finalize();
 			return { success: true, blob };
-		} catch (error) {
-			console.error("Export error:", error);
-			return {
-				success: false,
-				error: error instanceof Error ? error.message : String(error),
-			};
 		} finally {
-			this.cleanup();
+			stopWebcamDecode = true;
+			webcamFrameQueue?.destroy();
+			webcamDecoder?.cancel();
+			if (webcamDecodePromise) {
+				await webcamDecodePromise.catch(() => undefined);
+			}
 		}
 	}
 
-	private async initializeEncoder(): Promise<void> {
+	private async initializeEncoder(hardwareAcceleration: HardwareAcceleration): Promise<void> {
 		this.encodeQueue = 0;
 		this.muxingPromises = [];
 		this.chunkCount = 0;
+		this.lastEncoderOutputAt = Date.now();
+		this.fatalEncoderError = null;
 		let videoDescription: Uint8Array | undefined;
 
 		this.encoder = new VideoEncoder({
 			output: (chunk, meta) => {
-				// Capture decoder config metadata from encoder output
+				this.lastEncoderOutputAt = Date.now();
+
 				if (meta?.decoderConfig?.description && !videoDescription) {
 					const desc = meta.decoderConfig.description;
-					videoDescription = new Uint8Array(desc instanceof ArrayBuffer ? desc : (desc as any));
+					if (desc instanceof ArrayBuffer || desc instanceof SharedArrayBuffer) {
+						videoDescription = new Uint8Array(desc);
+					} else if (ArrayBuffer.isView(desc)) {
+						videoDescription = new Uint8Array(desc.buffer, desc.byteOffset, desc.byteLength);
+					}
 					this.videoDescription = videoDescription;
 				}
-				// Capture colorSpace from encoder metadata if provided
+
 				if (meta?.decoderConfig?.colorSpace && !this.videoColorSpace) {
 					this.videoColorSpace = meta.decoderConfig.colorSpace;
 				}
 
-				// Stream chunk to muxer immediately (parallel processing)
 				const isFirstChunk = this.chunkCount === 0;
 				this.chunkCount++;
 
 				const muxingPromise = (async () => {
 					try {
 						if (isFirstChunk && this.videoDescription) {
-							// Add decoder config for the first chunk
 							const colorSpace = this.videoColorSpace || {
 								primaries: "bt709",
 								transfer: "iec61966-2-1",
@@ -266,43 +423,37 @@ export class VideoExporter {
 			},
 			error: (error) => {
 				console.error("[VideoExporter] Encoder error:", error);
-				// Stop export encoding failed
-				this.cancelled = true;
+				this.fatalEncoderError =
+					error instanceof Error ? error : new Error(`Video encoder error: ${String(error)}`);
+				this.streamingDecoder?.cancel();
+				this.webcamDecoder?.cancel();
 			},
 		});
 
-		const codec = this.config.codec || "avc1.640033";
-
 		const encoderConfig: VideoEncoderConfig = {
-			codec,
+			codec: this.config.codec || "avc1.640033",
 			width: this.config.width,
 			height: this.config.height,
 			bitrate: this.config.bitrate,
 			framerate: this.config.frameRate,
-			latencyMode: "quality", // Changed from 'realtime' to 'quality' for better throughput
+			latencyMode: "quality",
 			bitrateMode: "variable",
-			hardwareAcceleration: "prefer-hardware",
+			hardwareAcceleration,
 		};
 
-		// Check hardware support first
-		const hardwareSupport = await VideoEncoder.isConfigSupported(encoderConfig);
-
-		if (hardwareSupport.supported) {
-			// Use hardware encoding
-			console.log("[VideoExporter] Using hardware acceleration");
-			this.encoder.configure(encoderConfig);
-		} else {
-			// Fall back to software encoding
-			console.log("[VideoExporter] Hardware not supported, using software encoding");
-			encoderConfig.hardwareAcceleration = "prefer-software";
-
-			const softwareSupport = await VideoEncoder.isConfigSupported(encoderConfig);
-			if (!softwareSupport.supported) {
-				throw new Error("Video encoding not supported on this system");
-			}
-
-			this.encoder.configure(encoderConfig);
+		const support = await VideoEncoder.isConfigSupported(encoderConfig);
+		if (!support.supported) {
+			throw new Error(
+				hardwareAcceleration === "prefer-hardware"
+					? "Hardware video encoding is not supported on this system."
+					: "Software video encoding is not supported on this system.",
+			);
 		}
+
+		console.log(
+			`[VideoExporter] Using ${hardwareAcceleration === "prefer-hardware" ? "hardware" : "software"} acceleration`,
+		);
+		this.encoder.configure(encoderConfig);
 	}
 
 	cancel(): void {
@@ -310,6 +461,9 @@ export class VideoExporter {
 		if (this.streamingDecoder) {
 			this.streamingDecoder.cancel();
 		}
+		if (this.webcamDecoder) {
+			this.webcamDecoder.cancel();
+		}
 		if (this.audioProcessor) {
 			this.audioProcessor.cancel();
 		}
@@ -337,6 +491,15 @@ export class VideoExporter {
 			this.streamingDecoder = null;
 		}
 
+		if (this.webcamDecoder) {
+			try {
+				this.webcamDecoder.destroy();
+			} catch (e) {
+				console.warn("Error destroying webcam decoder:", e);
+			}
+			this.webcamDecoder = null;
+		}
+
 		if (this.renderer) {
 			try {
 				this.renderer.destroy();
@@ -353,5 +516,34 @@ export class VideoExporter {
 		this.chunkCount = 0;
 		this.videoDescription = undefined;
 		this.videoColorSpace = undefined;
+		this.lastEncoderOutputAt = 0;
+		this.fatalEncoderError = null;
+	}
+
+	private getEncoderPreferences(): HardwareAcceleration[] {
+		if (typeof navigator !== "undefined" && /\bWindows\b/i.test(navigator.userAgent)) {
+			return ["prefer-software", "prefer-hardware"];
+		}
+		return ["prefer-hardware", "prefer-software"];
+	}
+
+	private reportProgress(progress: ExportProgress): void {
+		this.config.onProgress?.(progress);
+	}
+
+	private withTimeout<T>(promise: Promise<T>, timeoutMs: number, message: string): Promise<T> {
+		return new Promise<T>((resolve, reject) => {
+			const timer = window.setTimeout(() => reject(new Error(message)), timeoutMs);
+			promise.then(
+				(value) => {
+					window.clearTimeout(timer);
+					resolve(value);
+				},
+				(error) => {
+					window.clearTimeout(timer);
+					reject(error);
+				},
+			);
+		});
 	}
 }

src/lib/frameStep.ts

@@ -0,0 +1,15 @@
+/** Duration of a single frame in seconds at 60 FPS (~16.67ms). */
+export const FRAME_DURATION_SEC = 1 / 60;
+
+/**
+ * Compute the new playhead time after stepping one frame forward or backward.
+ * The result is clamped to the range [0, duration].
+ */
+export function computeFrameStepTime(
+	currentTime: number,
+	duration: number,
+	direction: "forward" | "backward",
+): number {
+	const delta = direction === "forward" ? FRAME_DURATION_SEC : -FRAME_DURATION_SEC;
+	return Math.min(duration, Math.max(0, currentTime + delta));
+}

src/lib/recordingSession.ts

@@ -0,0 +1,69 @@
+export interface ProjectMedia {
+	screenVideoPath: string;
+	webcamVideoPath?: string;
+}
+
+export interface RecordingSession extends ProjectMedia {
+	createdAt: number;
+}
+
+export interface RecordedVideoAssetInput {
+	fileName: string;
+	videoData: ArrayBuffer;
+}
+
+export interface StoreRecordedSessionInput {
+	screen: RecordedVideoAssetInput;
+	webcam?: RecordedVideoAssetInput;
+	createdAt?: number;
+}
+
+function normalizePath(value: unknown): string | undefined {
+	if (typeof value !== "string") {
+		return undefined;
+	}
+
+	const trimmed = value.trim();
+	return trimmed ? trimmed : undefined;
+}
+
+export function normalizeProjectMedia(candidate: unknown): ProjectMedia | null {
+	if (!candidate || typeof candidate !== "object") {
+		return null;
+	}
+
+	const raw = candidate as Partial<ProjectMedia>;
+	const screenVideoPath = normalizePath(raw.screenVideoPath);
+
+	if (!screenVideoPath) {
+		return null;
+	}
+
+	const webcamVideoPath = normalizePath(raw.webcamVideoPath);
+
+	return webcamVideoPath
+		? { screenVideoPath, webcamVideoPath }
+		: {
+				screenVideoPath,
+			};
+}
+
+export function normalizeRecordingSession(candidate: unknown): RecordingSession | null {
+	if (!candidate || typeof candidate !== "object") {
+		return null;
+	}
+
+	const raw = candidate as Partial<RecordingSession>;
+	const media = normalizeProjectMedia(raw);
+	if (!media) {
+		return null;
+	}
+
+	return {
+		...media,
+		createdAt:
+			typeof raw.createdAt === "number" && Number.isFinite(raw.createdAt)
+				? raw.createdAt
+				: Date.now(),
+	};
+}

src/lib/requestCameraAccess.ts

@@ -0,0 +1,57 @@
+export type CameraAccessResult = {
+	success: boolean;
+	granted: boolean;
+	status: string;
+	error?: string;
+};
+
+function getDeniedStatus(error: unknown) {
+	if (error instanceof DOMException) {
+		return error.name;
+	}
+
+	return "unknown";
+}
+
+export async function requestCameraAccess(): Promise<CameraAccessResult> {
+	if (window.electronAPI?.requestCameraAccess) {
+		try {
+			const electronResult = await window.electronAPI.requestCameraAccess();
+			if (!electronResult.success || !electronResult.granted) {
+				return electronResult;
+			}
+		} catch (error) {
+			return {
+				success: false,
+				granted: false,
+				status: "error",
+				error: String(error),
+			};
+		}
+	}
+
+	if (!navigator.mediaDevices?.getUserMedia) {
+		return {
+			success: false,
+			granted: false,
+			status: "unsupported",
+			error: "Camera access is not supported in this runtime.",
+		};
+	}
+
+	try {
+		const stream = await navigator.mediaDevices.getUserMedia({
+			audio: false,
+			video: true,
+		});
+		stream.getTracks().forEach((track) => track.stop());
+		return { success: true, granted: true, status: "granted" };
+	} catch (error) {
+		return {
+			success: true,
+			granted: false,
+			status: getDeniedStatus(error),
+			error: String(error),
+		};
+	}
+}

src/lib/shortcuts.ts

@@ -21,25 +21,55 @@ export interface ShortcutBinding {
 export type ShortcutsConfig = Record<ShortcutAction, ShortcutBinding>;
 
 export interface FixedShortcut {
+	i18nKey: string;
 	label: string;
 	display: string;
 	bindings: ShortcutBinding[];
 }
 
 export const FIXED_SHORTCUTS: FixedShortcut[] = [
-	{ label: "Cycle Annotations Forward", display: "Tab", bindings: [{ key: "tab" }] },
+	{ i18nKey: "undo", label: "Undo", display: "Ctrl + Z", bindings: [{ key: "z", ctrl: true }] },
 	{
+		i18nKey: "redo",
+		label: "Redo",
+		display: "Ctrl + Shift + Z / Ctrl + Y",
+		bindings: [
+			{ key: "z", ctrl: true, shift: true },
+			{ key: "y", ctrl: true },
+		],
+	},
+	{
+		i18nKey: "cycleAnnotationsForward",
+		label: "Cycle Annotations Forward",
+		display: "Tab",
+		bindings: [{ key: "tab" }],
+	},
+	{
+		i18nKey: "cycleAnnotationsBackward",
 		label: "Cycle Annotations Backward",
 		display: "Shift + Tab",
 		bindings: [{ key: "tab", shift: true }],
 	},
 	{
+		i18nKey: "deleteSelectedAlt",
 		label: "Delete Selected (alt)",
 		display: "Del / ⌫",
 		bindings: [{ key: "delete" }, { key: "backspace" }],
 	},
-	{ label: "Pan Timeline", display: "Shift + Ctrl + Scroll", bindings: [] },
-	{ label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
+	{
+		i18nKey: "panTimeline",
+		label: "Pan Timeline",
+		display: "Shift + Ctrl + Scroll",
+		bindings: [],
+	},
+	{ i18nKey: "zoomTimeline", label: "Zoom Timeline", display: "Ctrl + Scroll", bindings: [] },
+	{ i18nKey: "frameBack", label: "Frame Back", display: "←", bindings: [{ key: "arrowleft" }] },
+	{
+		i18nKey: "frameForward",
+		label: "Frame Forward",
+		display: "→",
+		bindings: [{ key: "arrowright" }],
+	},
 ];
 
 export type ShortcutConflict =

src/lib/webcamMaskShapes.ts

@@ -0,0 +1,48 @@
+import type { WebcamMaskShape } from "@/components/video-editor/types";
+
+/**
+ * Returns a CSS clip-path value for the given shape, or null if borderRadius alone suffices.
+ */
+export function getCssClipPath(shape: WebcamMaskShape): string | null {
+	switch (shape) {
+		case "circle":
+			return "circle(50% at 50% 50%)";
+		case "rectangle":
+		case "rounded":
+		case "square":
+		default:
+			return null;
+	}
+}
+
+/**
+ * Draws a Canvas 2D clip path for the given webcam mask shape.
+ * Call ctx.beginPath() is handled internally; caller should call ctx.clip() after.
+ */
+export function drawCanvasClipPath(
+	ctx: CanvasRenderingContext2D,
+	x: number,
+	y: number,
+	w: number,
+	h: number,
+	shape: WebcamMaskShape,
+	borderRadius: number,
+): void {
+	ctx.beginPath();
+	switch (shape) {
+		case "circle": {
+			const cx = x + w / 2;
+			const cy = y + h / 2;
+			const r = Math.min(w, h) / 2;
+			ctx.arc(cx, cy, r, 0, Math.PI * 2);
+			break;
+		}
+		case "rectangle":
+		case "rounded":
+		case "square":
+		default:
+			ctx.roundRect(x, y, w, h, borderRadius);
+			break;
+	}
+	ctx.closePath();
+}

src/main.tsx

@@ -1,10 +1,13 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
+import { I18nProvider } from "./contexts/I18nContext";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
 	<React.StrictMode>
-		<App />
+		<I18nProvider>
+			<App />
+		</I18nProvider>
 	</React.StrictMode>,
 );

src/utils/aspectRatioUtils.ts

@@ -1,11 +1,20 @@
-export const ASPECT_RATIOS = ["16:9", "9:16", "1:1", "4:3", "4:5", "16:10", "10:16"] as const;
+export const ASPECT_RATIOS = [
+	"16:9",
+	"9:16",
+	"1:1",
+	"4:3",
+	"4:5",
+	"16:10",
+	"10:16",
+	"native",
+] as const;
 
 export type AspectRatio = (typeof ASPECT_RATIOS)[number];
 
 /**
  * Returns the numeric value of an aspect ratio.
- * Uses exhaustive type checking to ensure all AspectRatio cases are handled.
- * If TypeScript errors here, a new ratio was added to the type but not handled.
+ * For "native", returns a fallback ratio of 16/9.
+ * Callers with source/crop context should use getNativeAspectRatioValue().
  */
 export function getAspectRatioValue(aspectRatio: AspectRatio): number {
 	switch (aspectRatio) {
@@ -23,14 +32,25 @@ export function getAspectRatioValue(aspectRatio: AspectRatio): number {
 			return 16 / 10;
 		case "10:16":
 			return 10 / 16;
+		case "native":
+			return 16 / 9;
 		default: {
-			// Ensures all cases are handled - TypeScript errors if missing
 			const _exhaustiveCheck: never = aspectRatio;
 			return _exhaustiveCheck;
 		}
 	}
 }
 
+export function getNativeAspectRatioValue(
+	videoWidth: number,
+	videoHeight: number,
+	cropRegion?: { x: number; y: number; width: number; height: number },
+): number {
+	const cropW = cropRegion?.width ?? 1;
+	const cropH = cropRegion?.height ?? 1;
+	return (videoWidth * cropW) / (videoHeight * cropH);
+}
+
 export function getAspectRatioDimensions(
 	aspectRatio: AspectRatio,
 	baseWidth: number,
@@ -43,9 +63,15 @@ export function getAspectRatioDimensions(
 }
 
 export function getAspectRatioLabel(aspectRatio: AspectRatio): string {
+	if (aspectRatio === "native") return "Native";
 	return aspectRatio;
 }
 
-export function formatAspectRatioForCSS(aspectRatio: AspectRatio): string {
+export function isPortraitAspectRatio(aspectRatio: AspectRatio): boolean {
+	return getAspectRatioValue(aspectRatio) < 1;
+}
+
+export function formatAspectRatioForCSS(aspectRatio: AspectRatio, nativeRatio?: number): string {
+	if (aspectRatio === "native") return String(nativeRatio ?? 16 / 9);
 	return aspectRatio.replace(":", "/");
 }

src/utils/getTestId.ts

@@ -0,0 +1,5 @@
+export type TestId = `gif-size-button-${string}` | "export-button" | `gif-format-button`;
+
+export function getTestId(testId: TestId) {
+	return `testId-${testId}`;
+}

src/utils/timeUtils.ts

@@ -0,0 +1,7 @@
+export function formatTimePadded(seconds: number) {
+	const m = Math.floor(seconds / 60)
+		.toString()
+		.padStart(2, "0");
+	const s = (seconds % 60).toString().padStart(2, "0");
+	return `${m}:${s}`;
+}