Merge main into feat/copy-paste-for-timeline; resolve conflicts

- Move copy/paste props (canCopySelectedItem, canPasteTimelineItem,
  onCopySelectedItem, onPasteTimelineItem) to <TimelineEditor> where
  they belong; SettingsPanel was being mid-conflict due to line drift.
- Keep both timelineClipboard state (PR) and showCloseConfirmDialog
  state (main).
- Keep both useClipboardFeedback (PR) and effectiveCursorHighlight +
  useI18n destructuring (main).
- Add feedback.copied / feedback.pasted entries to ar, ja-JP, ru, vi
  timeline locales (kept synced with the en baseline added in the PR).
- Add zh-TW dialogs import to tutorialHelpTranslations.test.ts (was
  missing on main; SUPPORTED_LOCALES includes zh-TW so the test would
  hit undefined without it).
- Regenerate package-lock.json.

Verified: tsc --noEmit clean, npm test 129/129 pass, biome only flags
pre-existing useScreenRecorder warnings on main.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

.github/workflows/bump-nix-package.yml

@@ -0,0 +1,118 @@
+name: Bump Nix package on release
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Release tag to bump (e.g. v1.5.0)"
+        required: true
+        type: string
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  bump:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'workflow_dispatch' || !github.event.release.prerelease
+    steps:
+      - name: Resolve tag and version
+        id: meta
+        env:
+          GH_EVENT_TAG: ${{ github.event.release.tag_name }}
+          INPUT_TAG: ${{ inputs.tag }}
+        run: |
+          set -euo pipefail
+          TAG="${GH_EVENT_TAG:-$INPUT_TAG}"
+          if [[ -z "$TAG" ]]; then
+            echo "::error::No tag resolved from release event or workflow input"
+            exit 1
+          fi
+          VERSION="${TAG#v}"
+          BRANCH="chore/bump-nix-${VERSION}"
+          echo "tag=$TAG"         >> "$GITHUB_OUTPUT"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+          echo "branch=$BRANCH"   >> "$GITHUB_OUTPUT"
+
+      - name: Checkout main
+        uses: actions/checkout@v4
+        with:
+          ref: main
+          fetch-depth: 0
+
+      - name: Install Nix
+        uses: cachix/install-nix-action@v27
+        with:
+          nix_path: nixpkgs=channel:nixos-unstable
+          extra_nix_config: |
+            experimental-features = nix-command flakes
+
+      - name: Compute npmDepsHash
+        id: hash
+        run: |
+          set -euo pipefail
+          HASH=$(nix run nixpkgs#prefetch-npm-deps -- package-lock.json)
+          if [[ -z "$HASH" ]]; then
+            echo "::error::prefetch-npm-deps returned an empty hash"
+            exit 1
+          fi
+          echo "hash=$HASH" >> "$GITHUB_OUTPUT"
+          echo "Computed npmDepsHash: $HASH"
+
+      - name: Update nix/package.nix
+        env:
+          VERSION: ${{ steps.meta.outputs.version }}
+          HASH: ${{ steps.hash.outputs.hash }}
+        run: |
+          set -euo pipefail
+          # Update version line: `  version = "<anything>";`
+          sed -i -E "s|^([[:space:]]*version[[:space:]]*=[[:space:]]*)\"[^\"]*\";|\1\"${VERSION}\";|" nix/package.nix
+          # Update npmDepsHash line: `  npmDepsHash = "<anything>";`
+          sed -i -E "s|^([[:space:]]*npmDepsHash[[:space:]]*=[[:space:]]*)\"[^\"]*\";|\1\"${HASH}\";|" nix/package.nix
+
+          echo "=== diff ==="
+          git --no-pager diff nix/package.nix || true
+
+      - name: Create PR
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          VERSION: ${{ steps.meta.outputs.version }}
+          HASH: ${{ steps.hash.outputs.hash }}
+          BRANCH: ${{ steps.meta.outputs.branch }}
+          TAG: ${{ steps.meta.outputs.tag }}
+        run: |
+          set -euo pipefail
+
+          if git diff --quiet -- nix/package.nix; then
+            echo "nix/package.nix already at v${VERSION} with this hash — nothing to do."
+            exit 0
+          fi
+
+          git config user.name  "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+
+          # Replace any prior bump branch to keep the workflow idempotent.
+          git push origin --delete "$BRANCH" 2>/dev/null || true
+          git checkout -b "$BRANCH"
+          git add nix/package.nix
+          git commit -m "chore: bump nix package to v${VERSION}"
+          git push -u origin "$BRANCH"
+
+          gh pr create \
+            --title "chore: bump nix package to v${VERSION}" \
+            --base main \
+            --head "$BRANCH" \
+            --body "$(cat <<EOF
+          Automated bump triggered by release \`${TAG}\`.
+
+          - \`version\` → \`${VERSION}\`
+          - \`npmDepsHash\` → \`${HASH}\` (computed via \`prefetch-npm-deps package-lock.json\`)
+
+          Merge this so Nix users (NixOS, Home Manager, \`nix run github:siddharthvaddem/openscreen\`) pick up the new release.
+
+          > Note: PRs opened by \`GITHUB_TOKEN\` don't auto-trigger CI. The diff is two lines — review the change here, then merge. If you want CI to run, push an empty commit to this branch or close-and-reopen the PR.
+          EOF
+          )"

.github/workflows/publish-winget.yml

@@ -0,0 +1,26 @@
+name: Publish release to WinGet
+
+on:
+  release:
+    types: [released]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Release tag to publish to winget (e.g. v1.4.0)"
+        required: true
+        type: string
+
+jobs:
+  publish:
+    runs-on: windows-latest
+    if: github.event_name == 'workflow_dispatch' || !github.event.release.prerelease
+    steps:
+      - uses: vedantmgoyal9/winget-releaser@v2
+        with:
+          identifier: SiddharthVaddem.OpenScreen
+          # Match the Windows installer asset attached to each release.
+          # Today: "Openscreen.Setup.latest.exe". Adjust this regex if you
+          # ever rename the installer to include a version (e.g. "Setup\.\d+\.\d+\.\d+\.exe").
+          installers-regex: 'Setup\..*\.exe$'
+          release-tag: ${{ inputs.tag || github.event.release.tag_name }}
+          token: ${{ secrets.WINGET_ACC_TOKEN }}

README.md

@@ -1,5 +1,5 @@
 > [!WARNING]
-> This is very much in beta and might be buggy here and there (but hope you have a good experience!).
+> This started as a side project that took off — it's not production grade and you'll hit bugs, but hopefully it covers what you need.
 
 <p align="center">
   <img src="public/openscreen.png" alt="OpenScreen Logo" width="64" />
@@ -21,11 +21,11 @@
 
 <p align="center"><strong>OpenScreen is your free, open-source alternative to Screen Studio (sort of).</strong></p>
 
-If you don't want to pay $29/month for Screen Studio but want a much simpler version that does what most people seem to need, making beautiful product demos and walkthroughs, here's a free-to-use app for you. OpenScreen does not offer all Screen Studio features, but covers the basics well!
+If you don't want to pay $29/month for Screen Studio but want a much simpler version that does what most people seem to need - quick, polished product demos and walkthroughs you'd post on X, Reddit. OpenScreen does not offer all Screen Studio features, but covers the basics well!
 
 Screen Studio is an awesome product and this is definitely not a 1:1 clone. OpenScreen is a much simpler take, just the basics for folks who want control and don't want to pay. If you need all the fancy features, your best bet is to support Screen Studio (they really do a great job, haha). But if you just want something free (no gotchas) and open, this project does the job!
 
-OpenScreen is 100% free for personal and commercial use. Use it, modify it, distribute it. (Just be cool 😁 and give a shoutout if you feel like it !)
+**100% free** for both **personal** and **commercial** use. Use it, modify it, distribute it — just be cool 😁 and shout out the project if you feel like it.
 
 <p align="center">
 	<img src="public/preview3.png" alt="OpenScreen App Preview 3" style="height: 0.2467; margin-right: 12px;" />
@@ -33,16 +33,19 @@ OpenScreen is 100% free for personal and commercial use. Use it, modify it, dist
 </p>
 
 ## Core Features
-- Record specific windows or your whole screen.
-- Add automatic or manual zooms (adjustable depth levels) and customize their durarion and position.
+- Record a specific window, region, or your whole screen.
 - Record microphone and system audio.
-- Crop video recordings to hide parts.
-- Choose between wallpapers, solid colors, gradients or a custom background.
-- Motion blur for smoother pan and zoom effects.
-- Add annotations (text, arrows, images).
-- Trim sections of the clip.
-- Customize the speed of different segments.
-- Export in different aspect ratios and resolutions.
+- Webcam overlay with picture-in-picture, drag-to-position, and shape options.
+- Auto or manual zooms with adjustable depth, duration, easing, and pixel-precise position.
+- Wallpapers, solid colors, gradients, or a custom background.
+- Motion blur for smoother pan and zoom transitions.
+- Crop, trim, and per-segment speed control on the timeline.
+- Blur effects to hide sensitive parts of the screen.
+- Cursor and click highlighting.
+- Text, arrow, and image annotations.
+- Save and reopen projects without re-recording.
+- Export to MP4 or GIF in multiple aspect ratios and resolutions.
+- Translated into Arabic, English, Spanish, French, Japanese, Korean, Russian, Turkish, Vietnamese, Simplified Chinese, and Traditional Chinese.
 
 ## Installation
 
@@ -50,7 +53,20 @@ Download the latest installer for your platform from the [GitHub Releases](https
 
 ### macOS
 
-If you encounter issues with macOS Gatekeeper blocking the app (since it does not come with a developer certificate), you can bypass this by running the following command in your terminal after installation:
+The easiest way to install on macOS is via [Homebrew](https://brew.sh):
+
+```bash
+brew install --cask siddharthvaddem/openscreen/openscreen
+```
+
+Brew automatically picks the right build for Apple Silicon or Intel, and verifies the download against a notarized signature so Gatekeeper won't block it.
+
+To update later: `brew upgrade --cask openscreen`
+To uninstall: `brew uninstall --cask openscreen` (add `--zap` to also remove app data)
+
+#### Manual install (if you prefer)
+
+If you'd rather grab the `.dmg` directly from the [Releases page](https://github.com/siddharthvaddem/openscreen/releases) and encounter Gatekeeper blocking the app, you can bypass it by running the following command in your terminal after installation:
 
 ```bash
 xattr -rd com.apple.quarantine /Applications/Openscreen.app
@@ -60,18 +76,72 @@ Note: Give your terminal Full Disk Access in **System Settings > Privacy & Secur
 
 After running this command, proceed to **System Preferences > Security & Privacy** to grant the necessary permissions for "screen recording" and "accessibility". Once permissions are granted, you can launch the app.
 
+### Windows
+
+Install via [winget](https://learn.microsoft.com/en-us/windows/package-manager/winget/):
+
+```bash
+winget install SiddharthVaddem.OpenScreen
+```
+
+To update later: `winget upgrade SiddharthVaddem.OpenScreen`
+To uninstall: `winget uninstall SiddharthVaddem.OpenScreen`
+
+If you'd rather grab the `.exe` installer directly, download it from the [Releases page](https://github.com/siddharthvaddem/openscreen/releases).
+
 ### Linux
 
-Download the `.AppImage` file from the releases page. Make it executable and run:
+Three packages are published to the [Releases page](https://github.com/siddharthvaddem/openscreen/releases) for each version. Pick the one that matches your distro:
 
+**Debian / Ubuntu / Pop!_OS (`.deb`)**
+```bash
+sudo apt install ./Openscreen-Linux-latest.deb
+```
+
+**Arch / Manjaro (`.pacman`)**
+```bash
+sudo pacman -U Openscreen-Linux-latest.pacman
+```
+
+**Any distro (`.AppImage`)**
 ```bash
 chmod +x Openscreen-Linux-*.AppImage
 ./Openscreen-Linux-*.AppImage
 ```
 
+**NixOS / Nix (flake)**
+
+Try without installing:
+```bash
+nix run github:siddharthvaddem/openscreen
+```
+
+Install into your user profile:
+```bash
+nix profile install github:siddharthvaddem/openscreen
+```
+
+For a NixOS system config (flake):
+```nix
+{
+  inputs.openscreen.url = "github:siddharthvaddem/openscreen";
+
+  outputs = { nixpkgs, openscreen, ... }: {
+    nixosConfigurations.<host> = nixpkgs.lib.nixosSystem {
+      modules = [
+        openscreen.nixosModules.default
+        { programs.openscreen.enable = true; }
+      ];
+    };
+  };
+}
+```
+
+For Home Manager, use `openscreen.homeManagerModules.default` with the same `programs.openscreen.enable = true;`.
+
 You may need to grant screen recording permissions depending on your desktop environment.
 
-**Note:** If the app fails to launch due to a "sandbox" error, run it with --no-sandbox:
+**Sandbox error:** If the AppImage fails to launch with a "sandbox" error, run it with `--no-sandbox`:
 ```bash
 ./Openscreen-Linux-*.AppImage --no-sandbox
 ```
@@ -94,16 +164,16 @@ System audio capture relies on Electron's [desktopCapturer](https://www.electron
 
 ---
 
-_I'm new to open source, idk what I'm doing lol. If something is wrong please raise an issue 🙏_
 
 ## Documentation
 
 See the documentation here:
 [OpenScreen Docs](https://deepwiki.com/siddharthvaddem/openscreen)
+Refresh if outdated.
 
 ## Contributing
 
-Contributions are welcome! If you’d like to help out or see what’s currently being worked on, take a look at the open issues and the [project roadmap](https://github.com/users/siddharthvaddem/projects/3) to understand the current direction of the project and find ways to contribute.
+Contributions are welcome - please **include screenshots or a short video** for any UI change or new user-facing feature. If it touches what users see or do, show it. Skip only when it genuinely doesn't apply. PRs that don't follow this will be closed.
 
 ## Star History
 

electron/electron-env.d.ts

@@ -157,6 +157,7 @@ interface Window {
 		saveShortcuts: (shortcuts: unknown) => Promise<{ success: boolean; error?: string }>;
 		hudOverlayHide: () => void;
 		hudOverlayClose: () => void;
+		setHudOverlayIgnoreMouseEvents: (ignore: boolean) => void;
 		showCountdownOverlay: (value: number, runId: number) => Promise<void>;
 		setCountdownOverlayValue: (value: number, runId: number) => Promise<void>;
 		hideCountdownOverlay: (runId: number) => Promise<void>;

electron/preload.ts

@@ -16,6 +16,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	hudOverlayClose: () => {
 		ipcRenderer.send("hud-overlay-close");
 	},
+	setHudOverlayIgnoreMouseEvents: (ignore: boolean) => {
+		ipcRenderer.send("hud-overlay-ignore-mouse-events", ignore);
+	},
 	getSources: async (opts: Electron.SourcesOptions) => {
 		return await ipcRenderer.invoke("get-sources", opts);
 	},

electron/windows.ts

@@ -24,6 +24,12 @@ ipcMain.on("hud-overlay-hide", () => {
 	}
 });
 
+ipcMain.on("hud-overlay-ignore-mouse-events", (_event, ignore: boolean) => {
+	if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
+		hudOverlayWindow.setIgnoreMouseEvents(ignore, { forward: true });
+	}
+});
+
 /**
  * Creates the always-on-top HUD overlay window centred at the bottom of the
  * primary display. The window is frameless, transparent, and follows the user
@@ -63,6 +69,7 @@ export function createHudOverlayWindow(): BrowserWindow {
 			backgroundThrottling: false,
 		},
 	});
+	win.setIgnoreMouseEvents(true, { forward: true });
 
 	// Follow the user across macOS Spaces (virtual desktops).
 	// Without this the HUD stays pinned to the Space it was first opened on.

nix/package.nix

@@ -33,7 +33,7 @@ buildNpmPackage {
       );
     };
 
-  npmDepsHash = "sha256-i8QMhvd/ydFPww7qTG3Bz2LOAIFyp65n1NXakr3MTk8=";
+  npmDepsHash = "sha256-tOpoJPzaZDK3HJijGHpZ0+jWsbrYyQUuw1pO0Uxcifg=";
 
   env.ELECTRON_SKIP_BINARY_DOWNLOAD = "1";
 

package-lock.json

@@ -188,7 +188,6 @@
 			"integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@babel/code-frame": "^7.29.0",
 				"@babel/generator": "^7.29.0",
@@ -397,7 +396,6 @@
 			"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
 			"integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=6.9.0"
 			}
@@ -721,7 +719,6 @@
 				}
 			],
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=20.19.0"
 			},
@@ -770,7 +767,6 @@
 				}
 			],
 			"license": "MIT",
-			"peer": true,
 			"engines": {
 				"node": ">=20.19.0"
 			}
@@ -1202,6 +1198,7 @@
 			"dev": true,
 			"license": "BSD-2-Clause",
 			"optional": true,
+			"peer": true,
 			"dependencies": {
 				"cross-dirname": "^0.1.0",
 				"debug": "^4.3.4",
@@ -1223,6 +1220,7 @@
 			"dev": true,
 			"license": "MIT",
 			"optional": true,
+			"peer": true,
 			"dependencies": {
 				"graceful-fs": "^4.2.0",
 				"jsonfile": "^6.0.1",
@@ -1239,6 +1237,7 @@
 			"dev": true,
 			"license": "MIT",
 			"optional": true,
+			"peer": true,
 			"dependencies": {
 				"universalify": "^2.0.0"
 			},
@@ -1253,6 +1252,7 @@
 			"dev": true,
 			"license": "MIT",
 			"optional": true,
+			"peer": true,
 			"engines": {
 				"node": ">= 10.0.0"
 			}
@@ -1962,6 +1962,7 @@
 			"resolved": "https://registry.npmjs.org/@pixi/color/-/color-7.4.3.tgz",
 			"integrity": "sha512-a6R+bXKeXMDcRmjYQoBIK+v2EYqxSX49wcjAY579EYM/WrFKS98nSees6lqVUcLKrcQh2DT9srJHX7XMny3voQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@pixi/colord": "^2.9.6"
 			}
@@ -1976,7 +1977,8 @@
 			"version": "7.4.3",
 			"resolved": "https://registry.npmjs.org/@pixi/constants/-/constants-7.4.3.tgz",
 			"integrity": "sha512-QGmwJUNQy/vVEHzL6VGQvnwawLZ1wceZMI8HwJAT4/I2uAzbBeFDdmCS8WsTpSWLZjF/DszDc1D8BFp4pVJ5UQ==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/@pixi/core": {
 			"version": "7.4.3",
@@ -2003,7 +2005,8 @@
 			"version": "7.4.3",
 			"resolved": "https://registry.npmjs.org/@pixi/extensions/-/extensions-7.4.3.tgz",
 			"integrity": "sha512-FhoiYkHQEDYHUE7wXhqfsTRz6KxLXjuMbSiAwnLb9uG1vAgp6q6qd6HEsf4X30YaZbLFY8a4KY6hFZWjF+4Fdw==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/@pixi/filter-drop-shadow": {
 			"version": "5.2.0",
@@ -2030,19 +2033,22 @@
 			"version": "7.4.3",
 			"resolved": "https://registry.npmjs.org/@pixi/math/-/math-7.4.3.tgz",
 			"integrity": "sha512-/uJOVhR2DOZ+zgdI6Bs/CwcXT4bNRKsS+TqX3ekRIxPCwaLra+Qdm7aDxT5cTToDzdxbKL5+rwiLu3Y1egILDw==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/@pixi/runner": {
 			"version": "7.4.3",
 			"resolved": "https://registry.npmjs.org/@pixi/runner/-/runner-7.4.3.tgz",
 			"integrity": "sha512-TJyfp7y23u5vvRAyYhVSa7ytq0PdKSvPLXu4G3meoFh1oxTLHH6g/RIzLuxUAThPG2z7ftthuW3qWq6dRV+dhw==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/@pixi/settings": {
 			"version": "7.4.3",
 			"resolved": "https://registry.npmjs.org/@pixi/settings/-/settings-7.4.3.tgz",
 			"integrity": "sha512-SmGK8smc0PxRB9nr0UJioEtE9hl4gvj9OedCvZx3bxBwA3omA5BmP3CyhQfN8XJ29+o2OUL01r3zAPVol4l4lA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@pixi/constants": "7.4.3",
 				"@types/css-font-loading-module": "^0.0.12",
@@ -2054,6 +2060,7 @@
 			"resolved": "https://registry.npmjs.org/@pixi/ticker/-/ticker-7.4.3.tgz",
 			"integrity": "sha512-tHsAD0iOUb6QSGGw+c8cyRBvxsq/NlfzIFBZLEHhWZ+Bx4a0MmXup6I/yJDGmyPCYE+ctCcAfY13wKAzdiVFgQ==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@pixi/extensions": "7.4.3",
 				"@pixi/settings": "7.4.3",
@@ -2065,6 +2072,7 @@
 			"resolved": "https://registry.npmjs.org/@pixi/utils/-/utils-7.4.3.tgz",
 			"integrity": "sha512-NO3Y9HAn2UKS1YdxffqsPp+kDpVm8XWvkZcS/E+rBzY9VTLnNOI7cawSRm+dacdET3a8Jad3aDKEDZ0HmAqAFA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@pixi/color": "7.4.3",
 				"@pixi/constants": "7.4.3",
@@ -3643,7 +3651,8 @@
 			"resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz",
 			"integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==",
 			"dev": true,
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/@types/babel__core": {
 			"version": "7.20.5",
@@ -3718,7 +3727,8 @@
 			"version": "0.0.12",
 			"resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.12.tgz",
 			"integrity": "sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/@types/debug": {
 			"version": "4.1.13",
@@ -3756,7 +3766,8 @@
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@types/earcut/-/earcut-2.1.4.tgz",
 			"integrity": "sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/@types/estree": {
 			"version": "1.0.8",
@@ -3855,7 +3866,6 @@
 			"integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
 			"devOptional": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@types/prop-types": "*",
 				"csstype": "^3.2.2"
@@ -3867,7 +3877,6 @@
 			"integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
 			"devOptional": true,
 			"license": "MIT",
-			"peer": true,
 			"peerDependencies": {
 				"@types/react": "^18.0.0"
 			}
@@ -4149,7 +4158,6 @@
 			"integrity": "sha512-CWy0lBQJq97nionyJJdnaU4961IXTl43a7UCu5nHy51IoKxAt6PVIJLo+76rVl7KOOgcWHNkG4kbJu/pW7knvA==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@vitest/browser": "4.1.5",
 				"@vitest/mocker": "4.1.5",
@@ -4342,7 +4350,6 @@
 			"integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"fast-deep-equal": "^3.1.1",
 				"fast-json-stable-stringify": "^2.0.0",
@@ -4868,7 +4875,6 @@
 				}
 			],
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"baseline-browser-mapping": "^2.10.12",
 				"caniuse-lite": "^1.0.30001782",
@@ -5050,6 +5056,7 @@
 			"resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
 			"integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"call-bind-apply-helpers": "^1.0.2",
 				"get-intrinsic": "^1.3.0"
@@ -5400,7 +5407,8 @@
 			"integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
 			"dev": true,
 			"license": "MIT",
-			"optional": true
+			"optional": true,
+			"peer": true
 		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.6",
@@ -5690,7 +5698,6 @@
 			"integrity": "sha512-glMJgnTreo8CFINujtAhCgN96QAqApDMZ8Vl1r8f0QT8QprvC1UCltV4CcWj20YoIyLZx6IUskaJZ0NV8fokcg==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"app-builder-lib": "26.8.1",
 				"builder-util": "26.8.1",
@@ -5783,7 +5790,8 @@
 			"resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz",
 			"integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
 			"dev": true,
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/dotenv": {
 			"version": "16.6.1",
@@ -5832,7 +5840,8 @@
 			"version": "2.2.4",
 			"resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
 			"integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
-			"license": "ISC"
+			"license": "ISC",
+			"peer": true
 		},
 		"node_modules/ejs": {
 			"version": "3.1.10",
@@ -6015,6 +6024,7 @@
 			"dev": true,
 			"hasInstallScript": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"@electron/asar": "^3.2.1",
 				"debug": "^4.1.1",
@@ -6035,6 +6045,7 @@
 			"integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"graceful-fs": "^4.1.2",
 				"jsonfile": "^4.0.0",
@@ -6277,7 +6288,8 @@
 			"version": "4.0.7",
 			"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
 			"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/expect-type": {
 			"version": "1.3.0",
@@ -7689,6 +7701,7 @@
 			"integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"bin": {
 				"lz-string": "bin/bin.js"
 			}
@@ -7908,6 +7921,7 @@
 			"integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"minimist": "^1.2.6"
 			},
@@ -8221,6 +8235,7 @@
 			"resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
 			"integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">= 0.4"
 			},
@@ -8429,7 +8444,6 @@
 			"resolved": "https://registry.npmjs.org/pixi.js/-/pixi.js-8.18.1.tgz",
 			"integrity": "sha512-6LUPWYgulZhp/w4kam2XHXB0QedISZIqrJbRdHLLQ3csn5a38uzKxAp6B5j6s89QFYaIJbg95kvgTRcbgpO1ow==",
 			"license": "MIT",
-			"peer": true,
 			"workspaces": [
 				"examples",
 				"playground"
@@ -8475,7 +8489,6 @@
 			"integrity": "sha512-C8oWjPR3F81yljW9o5OxcWzfh6avkVwDD2VYdwIGqTkl+OGFISgypqzfu7dOe4QNLL2aqcWBmI3PMtLIK233lw==",
 			"dev": true,
 			"license": "Apache-2.0",
-			"peer": true,
 			"dependencies": {
 				"playwright-core": "1.59.1"
 			},
@@ -8546,7 +8559,6 @@
 				}
 			],
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"nanoid": "^3.3.11",
 				"picocolors": "^1.1.1",
@@ -8691,6 +8703,7 @@
 			"dev": true,
 			"license": "MIT",
 			"optional": true,
+			"peer": true,
 			"dependencies": {
 				"commander": "^9.4.0"
 			},
@@ -8708,6 +8721,7 @@
 			"dev": true,
 			"license": "MIT",
 			"optional": true,
+			"peer": true,
 			"engines": {
 				"node": "^12.20.0 || >=14"
 			}
@@ -8718,6 +8732,7 @@
 			"integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"ansi-regex": "^5.0.1",
 				"ansi-styles": "^5.0.0",
@@ -8733,6 +8748,7 @@
 			"integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"engines": {
 				"node": ">=10"
 			},
@@ -8846,6 +8862,7 @@
 			"resolved": "https://registry.npmjs.org/qs/-/qs-6.15.1.tgz",
 			"integrity": "sha512-6YHEFRL9mfgcAvql/XhwTvf5jKcOiiupt2FiJxHkiX1z4j7WL8J/jRHYLluORvc1XxB5rV20KoeK00gVJamspg==",
 			"license": "BSD-3-Clause",
+			"peer": true,
 			"dependencies": {
 				"side-channel": "^1.1.0"
 			},
@@ -8904,7 +8921,6 @@
 			"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
 			"integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0"
 			},
@@ -8917,7 +8933,6 @@
 			"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
 			"integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"loose-envify": "^1.1.0",
 				"scheduler": "^0.23.2"
@@ -8954,7 +8969,8 @@
 			"resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
 			"integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
 			"dev": true,
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/react-refresh": {
 			"version": "0.18.0",
@@ -9275,6 +9291,7 @@
 			"deprecated": "Rimraf versions prior to v4 are no longer supported",
 			"dev": true,
 			"license": "ISC",
+			"peer": true,
 			"dependencies": {
 				"glob": "^7.1.3"
 			},
@@ -9481,6 +9498,7 @@
 			"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
 			"integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"es-errors": "^1.3.0",
 				"object-inspect": "^1.13.3",
@@ -9500,6 +9518,7 @@
 			"resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.1.tgz",
 			"integrity": "sha512-mjn/0bi/oUURjc5Xl7IaWi/OJJJumuoJFQJfDDyO46+hBWsfaVM65TBHq2eoZBhzl9EchxOijpkbRC8SVBQU0w==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"es-errors": "^1.3.0",
 				"object-inspect": "^1.13.4"
@@ -9516,6 +9535,7 @@
 			"resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
 			"integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"call-bound": "^1.0.2",
 				"es-errors": "^1.3.0",
@@ -9534,6 +9554,7 @@
 			"resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
 			"integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"call-bound": "^1.0.2",
 				"es-errors": "^1.3.0",
@@ -9874,7 +9895,6 @@
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
 			"integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@alloc/quick-lru": "^5.2.0",
 				"arg": "^5.0.2",
@@ -9958,6 +9978,7 @@
 			"integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
 			"dev": true,
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"mkdirp": "^0.5.1",
 				"rimraf": "~2.6.2"
@@ -10358,6 +10379,7 @@
 			"resolved": "https://registry.npmjs.org/url/-/url-0.11.4.tgz",
 			"integrity": "sha512-oCwdVC7mTuWiPyjLUz/COz5TLk6wgp0RCsN+wHZ2Ekneac9w8uuV0njcbbie2ME+Vs+d6duwmYuR3HgQXs1fOg==",
 			"license": "MIT",
+			"peer": true,
 			"dependencies": {
 				"punycode": "^1.4.1",
 				"qs": "^6.12.3"
@@ -10370,7 +10392,8 @@
 			"version": "1.4.1",
 			"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
 			"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==",
-			"license": "MIT"
+			"license": "MIT",
+			"peer": true
 		},
 		"node_modules/use-callback-ref": {
 			"version": "1.3.3",
@@ -10463,7 +10486,6 @@
 			"integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"esbuild": "^0.27.0",
 				"fdir": "^6.5.0",
@@ -10553,8 +10575,7 @@
 			"resolved": "https://registry.npmjs.org/vite-plugin-electron-renderer/-/vite-plugin-electron-renderer-0.14.6.tgz",
 			"integrity": "sha512-oqkWFa7kQIkvHXG7+Mnl1RTroA4sP0yesKatmAy0gjZC4VwUqlvF9IvOpHd1fpLWsqYX/eZlVxlhULNtaQ78Jw==",
 			"dev": true,
-			"license": "MIT",
-			"peer": true
+			"license": "MIT"
 		},
 		"node_modules/vite/node_modules/fsevents": {
 			"version": "2.3.3",
@@ -10577,7 +10598,6 @@
 			"integrity": "sha512-9Xx1v3/ih3m9hN+SbfkUyy0JAs72ap3r7joc87XL6jwF0jGg6mFBvQ1SrwaX+h8BlkX6Hz9shdd1uo6AF+ZGpg==",
 			"dev": true,
 			"license": "MIT",
-			"peer": true,
 			"dependencies": {
 				"@vitest/expect": "4.1.5",
 				"@vitest/mocker": "4.1.5",

scripts/i18n-check.mjs

@@ -5,6 +5,7 @@
  *
  * Usage: node scripts/i18n-check.mjs
  */
+
 import fs from "node:fs";
 import path from "node:path";
 

src/components/launch/LaunchWindow.module.css

@@ -44,13 +44,13 @@
 	position: fixed;
 	right: 0;
 	top: 0;
-	width: 12rem;
-	padding: 0.375rem;
-	border-radius: 0.75rem;
-	border: 1px solid rgba(255, 255, 255, 0.14);
-	background: linear-gradient(160deg, rgba(28, 29, 42, 0.98), rgba(18, 19, 28, 0.98));
-	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
-	backdrop-filter: blur(14px);
+	width: 11rem;
+	padding: 0.25rem;
+	border-radius: 0.625rem;
+	border: 1px solid rgba(255, 255, 255, 0.1);
+	background: rgba(8, 9, 12, 0.96);
+	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.045);
+	backdrop-filter: blur(18px) saturate(140%);
 	pointer-events: auto;
 	box-sizing: border-box;
 }
@@ -60,10 +60,10 @@
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
-	padding: 0.5rem 0.625rem;
-	border-radius: 0.5rem;
+	padding: 0.425rem 0.5rem;
+	border-radius: 0.45rem;
 	font-size: 11px;
-	color: rgba(255, 255, 255, 0.88);
+	color: rgba(255, 255, 255, 0.72);
 	background: transparent;
 	border: 0;
 	cursor: pointer;
@@ -72,12 +72,12 @@
 
 .languageMenuItem:hover,
 .languageMenuItem:focus-visible {
-	background: rgba(255, 255, 255, 0.1);
+	background: rgba(255, 255, 255, 0.075);
 	color: #ffffff;
 	outline: none;
 }
 
 .languageMenuItemActive {
-	background: rgba(255, 255, 255, 0.12);
+	background: rgba(52, 178, 123, 0.14);
 	color: #ffffff;
 }

src/components/launch/LaunchWindow.tsx

@@ -62,16 +62,16 @@ function getIcon(name: IconName, className?: string) {
 }
 
 const hudGroupClasses =
-	"flex items-center gap-0.5 bg-white/5 rounded-full transition-colors duration-150 hover:bg-white/[0.08]";
+	"flex items-center gap-0.5 rounded-xl border border-white/[0.07] bg-white/[0.045] transition-colors duration-150 hover:bg-white/[0.075]";
 
 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";
+	"flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150 cursor-pointer text-white hover:bg-white/10 active:scale-95";
 
 const hudAuxIconBtnClasses =
-	"flex items-center justify-center p-1.5 rounded-full transition-colors duration-150 text-white/55 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed";
+	"flex h-7 w-7 items-center justify-center rounded-lg transition-colors duration-150 text-white/55 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed";
 
 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]";
+	"flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150 cursor-pointer opacity-50 hover:opacity-90 hover:bg-white/[0.08]";
 
 const hudSidebarClasses = "ml-0.5 pl-1.5 border-l border-white/10 flex items-center gap-0.5";
 
@@ -87,6 +87,7 @@ export function LaunchWindow() {
 		resolveSystemLocaleSuggestion,
 	} = useI18n();
 	const suggestedLanguageName = systemLocaleSuggestion ? getLocaleName(systemLocaleSuggestion) : "";
+	const activeLanguageLabel = getLocaleName(locale).split(/\s+/)[0] || locale.toUpperCase();
 
 	const {
 		recording,
@@ -248,6 +249,13 @@ export function LaunchWindow() {
 		return () => cancelAnimationFrame(id);
 	}, [isLanguageMenuOpen]);
 
+	useEffect(() => {
+		window.electronAPI?.setHudOverlayIgnoreMouseEvents?.(true);
+		return () => {
+			window.electronAPI?.setHudOverlayIgnoreMouseEvents?.(false);
+		};
+	}, []);
+
 	const [selectedSource, setSelectedSource] = useState("Screen");
 	const [hasSelectedSource, setHasSelectedSource] = useState(false);
 
@@ -320,6 +328,12 @@ export function LaunchWindow() {
 		// recording toolbar widened (issue #305).
 		<div
 			className={`h-full w-full min-w-0 max-w-full overflow-x-hidden overflow-y-hidden bg-transparent ${styles.electronDrag}`}
+			onPointerMove={(event) => {
+				const target = event.target as HTMLElement | null;
+				const shouldCapture = Boolean(target?.closest("[data-hud-interactive='true']"));
+				window.electronAPI?.setHudOverlayIgnoreMouseEvents?.(!shouldCapture);
+			}}
+			onPointerLeave={() => window.electronAPI?.setHudOverlayIgnoreMouseEvents?.(true)}
 		>
 			{systemLocaleSuggestion && (
 				<div
@@ -360,12 +374,13 @@ export function LaunchWindow() {
 			{/* 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}`}
+					data-hud-interactive="true"
+					className={`fixed bottom-[68px] 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"}`}
+							className={`flex h-9 items-center gap-2 overflow-hidden rounded-xl border border-white/[0.08] bg-[#0b0c10]/90 px-3 py-1.5 shadow-[0_18px_42px_rgba(0,0,0,0.4)] backdrop-blur-2xl transition-all duration-300 ${!micExpanded ? "opacity-60 grayscale-[0.5]" : "opacity-100"}`}
 							onMouseEnter={() => setIsMicHovered(true)}
 							onMouseLeave={() => setIsMicHovered(false)}
 							onFocus={() => setIsMicFocused(true)}
@@ -409,7 +424,7 @@ export function LaunchWindow() {
 					{/* 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"}`}
+							className={`flex h-9 items-center gap-2 overflow-hidden rounded-xl border border-white/[0.08] bg-[#0b0c10]/90 px-3 py-1.5 shadow-[0_18px_42px_rgba(0,0,0,0.4)] backdrop-blur-2xl transition-all duration-300 ${!webcamExpanded ? "opacity-60 grayscale-[0.5]" : "opacity-100"}`}
 							onMouseEnter={() => setIsWebcamHovered(true)}
 							onMouseLeave={() => setIsWebcamHovered(false)}
 							onFocus={() => setIsWebcamFocused(true)}
@@ -485,7 +500,8 @@ export function LaunchWindow() {
 
 			{/* 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)]`}
+				data-hud-interactive="true"
+				className={`fixed bottom-5 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-2xl border border-white/[0.10] bg-[#07080a]/90 px-2 py-1.5 shadow-[0_20px_60px_rgba(0,0,0,0.42),inset_0_1px_0_rgba(255,255,255,0.06)] backdrop-blur-2xl backdrop-saturate-[140%]`}
 			>
 				{/* Drag handle */}
 				<div className={`flex items-center px-1 ${styles.electronDrag}`}>
@@ -494,13 +510,15 @@ export function LaunchWindow() {
 
 				{/* Source selector */}
 				<button
-					className={`${hudGroupClasses} p-2 ${styles.electronNoDrag}`}
+					className={`${hudGroupClasses} h-8 px-2.5 ${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>
+					<span className="max-w-[86px] truncate text-[11px] font-medium text-white/75">
+						{selectedSource}
+					</span>
 				</button>
 
 				{/* Audio controls group */}
@@ -548,7 +566,7 @@ export function LaunchWindow() {
 							? paused
 								? "bg-amber-500/10 hover:bg-amber-500/15"
 								: "bg-red-500/12 hover:bg-red-500/16"
-							: "bg-white/5 hover:bg-white/[0.08]"
+							: "bg-white/[0.06] hover:bg-white/[0.10]"
 					}`}
 					onClick={toggleRecording}
 					disabled={!hasSelectedSource && !recording}
@@ -624,11 +642,12 @@ export function LaunchWindow() {
 							aria-expanded={isLanguageMenuOpen}
 							aria-haspopup="menu"
 							onClick={() => setIsLanguageMenuOpen((open) => !open)}
-							className={`h-8 w-8 rounded-lg border border-white/10 bg-white/5 text-white/85 shadow-none transition-colors hover:bg-white/10 ${styles.electronNoDrag}`}
+							className={`flex h-8 items-center gap-1.5 rounded-lg border border-white/10 bg-white/[0.045] px-2 text-white/85 shadow-none transition-colors hover:bg-white/10 ${styles.electronNoDrag}`}
 						>
-							<div className="flex w-full items-center justify-center">
-								<Languages size={13} className="text-white/75" />
-							</div>
+							<Languages size={13} className="text-white/70" />
+							<span className="max-w-[54px] truncate text-[10px] font-semibold text-white/75">
+								{activeLanguageLabel}
+							</span>
 						</button>
 					</div>
 

src/components/launch/SourceSelector.module.css

@@ -1,8 +1,8 @@
 .glassContainer {
-	background: linear-gradient(135deg, rgba(28, 28, 34, 0.92) 0%, rgba(18, 18, 22, 0.88) 100%);
-	backdrop-filter: blur(20px) saturate(160%);
-	-webkit-backdrop-filter: blur(20px) saturate(160%);
-	border-radius: 30px;
+	background: linear-gradient(145deg, rgba(13, 14, 17, 0.94) 0%, rgba(8, 9, 12, 0.9) 100%);
+	backdrop-filter: blur(24px) saturate(150%);
+	-webkit-backdrop-filter: blur(24px) saturate(150%);
+	border-radius: 24px;
 	corner-shape: squircle;
 	/*
 		Removed box-shadow here because electron doesn't round corners of the shadow, thereby leaving a square border shadow conflicting with the rounded corners of the SourceSelector.
@@ -11,34 +11,36 @@
 	/* box-shadow:
 		0 0px 16px 0 rgba(0, 0, 0, 0.32),
 		0 1px 3px 0 rgba(0, 0, 0, 0.18) inset; */
-	border: 1.5px solid rgba(60, 60, 80, 0.3);
+	border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .sourceCard {
 	corner-shape: squircle;
-	border-radius: 20px;
-	background: linear-gradient(120deg, rgba(38, 38, 48, 0.98) 0%, rgba(24, 24, 32, 0.96) 100%);
-	border: 1px solid rgba(60, 60, 80, 0.22);
-	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
+	border-radius: 13px;
+	background: rgba(255, 255, 255, 0.045);
+	border: 1px solid rgba(255, 255, 255, 0.07);
+	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
 	transition:
 		box-shadow 0.2s ease,
 		border-color 0.2s ease,
+		background-color 0.2s ease,
 		transform 0.2s ease;
 	cursor: pointer;
 }
 
 .sourceCard:hover {
-	border-color: rgba(120, 120, 160, 0.35);
+	background: rgba(255, 255, 255, 0.065);
+	border-color: rgba(255, 255, 255, 0.14);
 	transform: translateY(-1px);
-	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
+	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 .selected {
-	border: 1.5px solid #34b27b;
-	background: linear-gradient(120deg, rgba(52, 178, 123, 0.08) 0%, rgba(38, 38, 48, 0.98) 100%);
+	border-color: rgba(52, 178, 123, 0.68);
+	background: linear-gradient(145deg, rgba(52, 178, 123, 0.13), rgba(255, 255, 255, 0.045));
 	box-shadow:
-		0 0 12px rgba(52, 178, 123, 0.15),
-		0 0 4px rgba(52, 178, 123, 0.1);
+		0 0 0 1px rgba(52, 178, 123, 0.18) inset,
+		0 12px 28px rgba(0, 0, 0, 0.22);
 }
 
 .selected:hover {
@@ -46,16 +48,16 @@
 }
 
 .icon {
-	width: 13px;
-	height: 13px;
+	width: 12px;
+	height: 12px;
 	color: #c7d2fe;
 }
 
 .name {
-	font-size: 0.8rem;
+	font-size: 0.72rem;
 	color: #e4e4e7;
 	font-weight: 500;
-	letter-spacing: 0.01em;
+	letter-spacing: 0;
 }
 
 .cardText {
@@ -65,14 +67,14 @@
 
 /* Checkmark badge */
 .checkBadge {
-	width: 18px;
-	height: 18px;
+	width: 17px;
+	height: 17px;
 	background: #34b27b;
 	border-radius: 9999px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	box-shadow: 0 0 8px rgba(52, 178, 123, 0.4);
+	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
 }
 
 /* scrollbar */

src/components/launch/SourceSelector.tsx

@@ -77,24 +77,24 @@ export function SourceSelector() {
 		return (
 			<div
 				key={source.id}
-				className={`${styles.sourceCard} ${isSelected ? styles.selected : ""} p-2`}
+				className={`${styles.sourceCard} ${isSelected ? styles.selected : ""} p-1.5`}
 				onClick={() => handleSourceSelect(source)}
 			>
-				<div className="relative mb-1.5">
+				<div className="relative mb-1.5 overflow-hidden rounded-lg border border-white/[0.06] bg-black/30">
 					<img
 						src={source.thumbnail || ""}
 						alt={source.name}
-						className="w-full aspect-video object-cover rounded-xl [corner-shape:squircle] "
+						className="w-full aspect-video object-cover"
 					/>
 					{isSelected && (
-						<div className="absolute -top-1 -right-1">
+						<div className="absolute right-1.5 top-1.5">
 							<div className={styles.checkBadge}>
-								<MdCheck size={12} className="text-white" />
+								<MdCheck size={11} className="text-white" />
 							</div>
 						</div>
 					)}
 				</div>
-				<div className="flex items-center gap-1.5">
+				<div className="flex items-center gap-1.5 px-1 pb-0.5">
 					{source.appIcon && (
 						<img src={source.appIcon} alt="" className={`${styles.icon} flex-shrink-0`} />
 					)}
@@ -106,21 +106,21 @@ 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">
+			<div className="flex-1 flex flex-col w-full px-3.5 pt-3.5">
 				<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-[14px] squircle ">
+					<TabsList className="mb-3 grid h-8 grid-cols-2 rounded-xl border border-white/[0.06] bg-white/[0.04] p-0.5">
 						<TabsTrigger
 							value="screens"
-							className="data-[state=active]:bg-white/15 data-[state=active]:text-white text-zinc-400 rounded-[12px] squircle text-xs py-1.5 transition-all"
+							className="rounded-lg py-1 text-[11px] text-zinc-400 transition-all data-[state=active]:bg-white/[0.12] data-[state=active]:text-white"
 						>
 							{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-[12px] squircle text-xs py-1.5 transition-all"
+							className="rounded-lg py-1 text-[11px] text-zinc-400 transition-all data-[state=active]:bg-white/[0.12] data-[state=active]:text-white"
 						>
 							{t("sourceSelector.windows", { count: String(windowSources.length) })}
 						</TabsTrigger>
@@ -128,14 +128,14 @@ export function SourceSelector() {
 					<div className="flex-1 min-h-0">
 						<TabsContent value="screens" className="h-full mt-0">
 							<div
-								className={`grid grid-cols-2 gap-3 h-[280px] overflow-y-auto pt-1 pr-1.5 auto-rows-min ${styles.sourceGridScroll}`}
+								className={`grid h-[282px] auto-rows-min grid-cols-2 gap-2.5 overflow-y-auto pr-1.5 pt-1 ${styles.sourceGridScroll}`}
 							>
 								{screenSources.map(renderSourceCard)}
 							</div>
 						</TabsContent>
 						<TabsContent value="windows" className="h-full mt-0">
 							<div
-								className={`grid grid-cols-2 gap-3 h-[280px] overflow-y-auto pt-1 pr-1.5 auto-rows-min ${styles.sourceGridScroll}`}
+								className={`grid h-[282px] auto-rows-min grid-cols-2 gap-2.5 overflow-y-auto pr-1.5 pt-1 ${styles.sourceGridScroll}`}
 							>
 								{windowSources.map(renderSourceCard)}
 							</div>
@@ -143,18 +143,18 @@ export function SourceSelector() {
 					</div>
 				</Tabs>
 			</div>
-			<div className="p-3 justify-center flex gap-2">
+			<div className="flex justify-center gap-2 border-t border-white/[0.06] p-3">
 				<Button
 					variant="ghost"
 					onClick={() => window.close()}
-					className="px-5 py-1 text-xs text-zinc-400 hover:text-white active:scale-95 transition-transform duration-150 hover:bg-white/5 rounded-full"
+					className="h-8 rounded-lg px-5 text-[11px] text-zinc-400 transition-transform duration-150 hover:bg-white/5 hover:text-white active:scale-95"
 				>
 					{tc("actions.cancel")}
 				</Button>
 				<Button
 					onClick={handleShare}
 					disabled={!selectedSource}
-					className="px-5 py-1 text-xs bg-[#34B27B] text-white active:scale-95 transition-transform duration-150 hover:bg-[#34B27B]/80 disabled:opacity-30 disabled:bg-zinc-700 rounded-full"
+					className="h-8 rounded-lg bg-[#34B27B] px-5 text-[11px] font-semibold text-white transition-transform duration-150 hover:bg-[#34B27B]/85 active:scale-95 disabled:bg-zinc-700 disabled:opacity-30"
 				>
 					{tc("actions.share")}
 				</Button>

src/components/video-editor/AnnotationOverlay.tsx

@@ -82,7 +82,7 @@ export function AnnotationOverlay({
 	);
 	const [livePointerPoint, setLivePointerPoint] = useState<{ x: number; y: number } | null>(null);
 	const mosaicCanvasRef = useRef<HTMLCanvasElement | null>(null);
-	const blurType = annotation.type === "blur" ? (annotation.blurData?.type ?? "blur") : "blur";
+	const blurType = "mosaic";
 	const blurOverlayColor =
 		annotation.type === "blur" ? getBlurOverlayColor(annotation.blurData) : "";
 	const mosaicGridOverlayColor =
@@ -106,7 +106,7 @@ export function AnnotationOverlay({
 	const { x, y, width, height } = liveRect;
 
 	useEffect(() => {
-		if (annotation.type !== "blur" || blurType !== "mosaic") {
+		if (annotation.type !== "blur") {
 			return;
 		}
 		void previewFrameVersion;
@@ -173,7 +173,6 @@ export function AnnotationOverlay({
 		);
 	}, [
 		annotation,
-		blurType,
 		containerHeight,
 		containerWidth,
 		height,

src/components/video-editor/AnnotationSettingsPanel.tsx

@@ -7,7 +7,6 @@ import {
 	ChevronDown,
 	Copy,
 	Image as ImageIcon,
-	Info,
 	Italic,
 	Trash2,
 	Type,
@@ -148,39 +147,39 @@ export function AnnotationSettingsPanel({
 	};
 
 	return (
-		<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">{t("annotation.title")}</span>
-					<span className="text-[10px] uppercase tracking-wider font-medium text-[#34B27B] bg-[#34B27B]/10 px-2 py-1 rounded-full">
+		<div className="min-w-0 p-4 flex flex-col h-full overflow-y-auto custom-scrollbar">
+			<div className="mb-3">
+				<div className="mb-4">
+					<span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
 						{t("annotation.active")}
 					</span>
+					<div className="mt-1 text-xl font-semibold text-slate-100">{t("annotation.title")}</div>
 				</div>
 
 				{/* Type Selector */}
 				<Tabs
 					value={annotation.type}
 					onValueChange={(value) => onTypeChange(value as AnnotationType)}
-					className="mb-6"
+					className="mb-4"
 				>
-					<TabsList className="mb-4 bg-white/5 border border-white/5 p-1 w-full grid grid-cols-3 h-auto rounded-xl">
+					<TabsList className="mb-4 bg-white/[0.035] border border-white/[0.06] p-0.5 w-full grid grid-cols-3 h-9 rounded-xl">
 						<TabsTrigger
 							value="text"
-							className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2"
+							className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 rounded-lg transition-all gap-1.5 text-[11px]"
 						>
 							<Type className="w-4 h-4" />
 							{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"
+							className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 rounded-lg transition-all gap-1.5 text-[11px]"
 						>
 							<ImageIcon className="w-4 h-4" />
 							{t("annotation.typeImage")}
 						</TabsTrigger>
 						<TabsTrigger
 							value="figure"
-							className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 py-2 rounded-lg transition-all gap-2"
+							className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-slate-400 rounded-lg transition-all gap-1.5 text-[11px]"
 						>
 							<svg
 								className="w-4 h-4"
@@ -623,18 +622,6 @@ export function AnnotationSettingsPanel({
 						{t("annotation.deleteAnnotation")}
 					</Button>
 				</div>
-
-				<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">{t("annotation.shortcutsAndTips")}</span>
-					</div>
-					<ul className="text-[10px] text-slate-400 space-y-1.5 list-disc pl-3 leading-relaxed">
-						<li>{t("annotation.tipMovePlayhead")}</li>
-						<li>{t("annotation.tipTabCycle")}</li>
-						<li>{t("annotation.tipShiftTabCycle")}</li>
-					</ul>
-				</div>
 			</div>
 		</div>
 	);

src/components/video-editor/BlurSettingsPanel.tsx

@@ -1,12 +1,5 @@
-import { Info, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import {
-	Select,
-	SelectContent,
-	SelectItem,
-	SelectTrigger,
-	SelectValue,
-} from "@/components/ui/select";
 import { Slider } from "@/components/ui/slider";
 import { useScopedT } from "@/contexts/I18nContext";
 import { getBlurOverlayColor } from "@/lib/blurEffects";
@@ -19,9 +12,7 @@ import {
 	DEFAULT_BLUR_BLOCK_SIZE,
 	DEFAULT_BLUR_DATA,
 	MAX_BLUR_BLOCK_SIZE,
-	MAX_BLUR_INTENSITY,
 	MIN_BLUR_BLOCK_SIZE,
-	MIN_BLUR_INTENSITY,
 } from "./types";
 
 interface BlurSettingsPanelProps {
@@ -49,13 +40,15 @@ export function BlurSettingsPanel({
 	];
 
 	return (
-		<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">{t("annotation.blurShape")}</span>
-					<span className="text-[10px] uppercase tracking-wider font-medium text-[#34B27B] bg-[#34B27B]/10 px-2 py-1 rounded-full">
-						{t("annotation.active")}
+		<div className="min-w-0 p-4 flex flex-col h-full overflow-y-auto custom-scrollbar">
+			<div className="mb-3">
+				<div className="mb-4">
+					<span className="text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-500">
+						{t("annotation.blurTypeMosaic")}
 					</span>
+					<div className="mt-1 text-xl font-semibold text-slate-100">
+						{t("annotation.typeBlur")}
+					</div>
 				</div>
 
 				<div className="grid grid-cols-2 gap-2">
@@ -69,6 +62,7 @@ export function BlurSettingsPanel({
 									const nextBlurData: BlurData = {
 										...DEFAULT_BLUR_DATA,
 										...blurRegion.blurData,
+										type: "mosaic",
 										shape: shape.value,
 									};
 									onBlurDataChange(nextBlurData);
@@ -77,7 +71,7 @@ export function BlurSettingsPanel({
 									});
 								}}
 								className={cn(
-									"h-16 rounded-lg border flex flex-col items-center justify-center transition-all p-2 gap-1",
+									"h-12 rounded-lg border flex items-center justify-center transition-all p-2 gap-2",
 									isActive
 										? "bg-[#34B27B] border-[#34B27B]"
 										: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
@@ -99,7 +93,7 @@ export function BlurSettingsPanel({
 										)}
 									/>
 								)}
-								<span className="text-[10px] leading-none">
+								<span className="text-[10px] leading-none font-medium">
 									{t(`annotation.${shape.labelKey}`)}
 								</span>
 							</button>
@@ -107,34 +101,6 @@ export function BlurSettingsPanel({
 					})}
 				</div>
 
-				<div className="mt-4">
-					<label className="text-xs font-medium text-slate-300 mb-2 block">
-						{t("annotation.blurType")}
-					</label>
-					<Select
-						value={blurRegion.blurData?.type ?? DEFAULT_BLUR_DATA.type}
-						onValueChange={(value) => {
-							const nextBlurData: BlurData = {
-								...DEFAULT_BLUR_DATA,
-								...blurRegion.blurData,
-								type: value === "mosaic" ? "mosaic" : "blur",
-							};
-							onBlurDataChange(nextBlurData);
-							requestAnimationFrame(() => {
-								onBlurDataCommit?.();
-							});
-						}}
-					>
-						<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
-							<SelectValue />
-						</SelectTrigger>
-						<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200">
-							<SelectItem value="blur">{t("annotation.blurTypeBlur")}</SelectItem>
-							<SelectItem value="mosaic">{t("annotation.blurTypeMosaic")}</SelectItem>
-						</SelectContent>
-					</Select>
-				</div>
-
 				<div className="mt-4">
 					<label className="text-xs font-medium text-slate-300 mb-2 block">
 						{t("annotation.blurColor")}
@@ -150,6 +116,7 @@ export function BlurSettingsPanel({
 										const nextBlurData: BlurData = {
 											...DEFAULT_BLUR_DATA,
 											...blurRegion.blurData,
+											type: "mosaic",
 											color: option.value,
 										};
 										onBlurDataChange(nextBlurData);
@@ -183,40 +150,29 @@ export function BlurSettingsPanel({
 					</div>
 				</div>
 
-				<div className="mt-4 p-3 rounded-lg bg-white/5 border border-white/10">
+				<div className="mt-4 p-3 rounded-lg editor-control-surface">
 					<div className="flex items-center justify-between mb-2">
 						<span className="text-xs font-medium text-slate-300">
-							{blurRegion.blurData?.type === "mosaic"
-								? t("annotation.mosaicBlockSize")
-								: t("annotation.blurIntensity")}
+							{t("annotation.mosaicBlockSize")}
 						</span>
 						<span className="text-[10px] text-slate-400 font-mono">
-							{Math.round(
-								blurRegion.blurData?.type === "mosaic"
-									? (blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)
-									: (blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity),
-							)}
+							{Math.round(blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)}
 							px
 						</span>
 					</div>
 					<Slider
-						value={[
-							blurRegion.blurData?.type === "mosaic"
-								? (blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)
-								: (blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity),
-						]}
+						value={[blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE]}
 						onValueChange={(values) => {
 							onBlurDataChange({
 								...DEFAULT_BLUR_DATA,
 								...blurRegion.blurData,
-								...(blurRegion.blurData?.type === "mosaic"
-									? { blockSize: values[0] }
-									: { intensity: values[0] }),
+								type: "mosaic",
+								blockSize: values[0],
 							});
 						}}
 						onValueCommit={() => onBlurDataCommit?.()}
-						min={blurRegion.blurData?.type === "mosaic" ? MIN_BLUR_BLOCK_SIZE : MIN_BLUR_INTENSITY}
-						max={blurRegion.blurData?.type === "mosaic" ? MAX_BLUR_BLOCK_SIZE : MAX_BLUR_INTENSITY}
+						min={MIN_BLUR_BLOCK_SIZE}
+						max={MAX_BLUR_BLOCK_SIZE}
 						step={1}
 						className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
 					/>
@@ -231,16 +187,6 @@ export function BlurSettingsPanel({
 					<Trash2 className="w-4 h-4" />
 					{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">{t("annotation.shortcutsAndTips")}</span>
-					</div>
-					<ul className="text-[10px] text-slate-400 space-y-1.5 list-disc pl-3 leading-relaxed">
-						<li>{t("annotation.tipMovePlayhead")}</li>
-					</ul>
-				</div>
 			</div>
 		</div>
 	);

src/components/video-editor/VideoEditor.tsx

@@ -13,6 +13,7 @@ import {
 } from "@/components/ui/dialog";
 import { useI18n, useScopedT } from "@/contexts/I18nContext";
 import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { useClipboardFeedback } from "@/hooks/useClipboardFeedback";
 import { INITIAL_EDITOR_STATE, useEditorHistory } from "@/hooks/useEditorHistory";
 import { type Locale } from "@/i18n/config";
 import { getAvailableLocales, getLocaleName } from "@/i18n/loader";
@@ -58,6 +59,11 @@ import {
 } from "./projectPersistence";
 import { SettingsPanel } from "./SettingsPanel";
 import TimelineEditor from "./timeline/TimelineEditor";
+import {
+	cloneAnnotationRegion,
+	getPastedAnnotationPosition,
+	spansOverlap,
+} from "./timelineClipboardUtils";
 import {
 	type AnnotationRegion,
 	type BlurData,
@@ -84,6 +90,13 @@ import {
 import { UnsavedChangesDialog } from "./UnsavedChangesDialog";
 import VideoPlayback, { VideoPlaybackRef } from "./VideoPlayback";
 
+type TimelineClipboardItem =
+	| { kind: "zoom"; region: ZoomRegion }
+	| { kind: "trim"; region: TrimRegion }
+	| { kind: "speed"; region: SpeedRegion }
+	| { kind: "annotation"; region: AnnotationRegion }
+	| { kind: "blur"; region: AnnotationRegion };
+
 export default function VideoEditor() {
 	const {
 		state: editorState,
@@ -154,6 +167,7 @@ export default function VideoEditor() {
 		format: string;
 	} | null>(null);
 	const [isFullscreen, setIsFullscreen] = useState(false);
+	const [timelineClipboard, setTimelineClipboard] = useState<TimelineClipboardItem | null>(null);
 	const [showCloseConfirmDialog, setShowCloseConfirmDialog] = useState(false);
 
 	const playerContainerRef = useRef<HTMLDivElement>(null);
@@ -164,6 +178,7 @@ export default function VideoEditor() {
 	const nextSpeedIdRef = useRef(1);
 
 	const { shortcuts, isMac } = useShortcuts();
+	const { notifyCopied, notifyPasted } = useClipboardFeedback();
 	// Off-Mac doesn't have click telemetry, so force `onlyOnClicks` off for
 	// renderers while keeping the persisted value intact for round-tripping.
 	const effectiveCursorHighlight = useMemo(
@@ -173,6 +188,7 @@ export default function VideoEditor() {
 	const { locale, setLocale, t: rawT } = useI18n();
 	const t = useScopedT("editor");
 	const ts = useScopedT("settings");
+	const tt = useScopedT("timeline");
 	const availableLocales = getAvailableLocales();
 
 	const nextAnnotationIdRef = useRef(1);
@@ -1088,6 +1104,219 @@ export default function VideoEditor() {
 		[pushState],
 	);
 
+	const handleCopySelectedTimelineItem = useCallback(() => {
+		if (selectedAnnotationId) {
+			const region = annotationOnlyRegions.find((item) => item.id === selectedAnnotationId);
+			if (region) {
+				setTimelineClipboard({ kind: "annotation", region: cloneAnnotationRegion(region) });
+				notifyCopied();
+			}
+			return;
+		}
+
+		if (selectedBlurId) {
+			const region = blurRegions.find((item) => item.id === selectedBlurId);
+			if (region) {
+				setTimelineClipboard({ kind: "blur", region: cloneAnnotationRegion(region) });
+				notifyCopied();
+			}
+			return;
+		}
+
+		if (selectedZoomId) {
+			const region = zoomRegions.find((item) => item.id === selectedZoomId);
+			if (region) {
+				setTimelineClipboard({ kind: "zoom", region: { ...region, focus: { ...region.focus } } });
+				notifyCopied();
+			}
+			return;
+		}
+
+		if (selectedTrimId) {
+			const region = trimRegions.find((item) => item.id === selectedTrimId);
+			if (region) {
+				setTimelineClipboard({ kind: "trim", region: { ...region } });
+				notifyCopied();
+			}
+			return;
+		}
+
+		if (selectedSpeedId) {
+			const region = speedRegions.find((item) => item.id === selectedSpeedId);
+			if (region) {
+				setTimelineClipboard({ kind: "speed", region: { ...region } });
+				notifyCopied();
+			}
+		}
+	}, [
+		selectedAnnotationId,
+		selectedBlurId,
+		selectedZoomId,
+		selectedTrimId,
+		selectedSpeedId,
+		annotationOnlyRegions,
+		blurRegions,
+		zoomRegions,
+		trimRegions,
+		speedRegions,
+		notifyCopied,
+	]);
+
+	const handlePasteTimelineItem = useCallback(() => {
+		if (!timelineClipboard) return;
+
+		const totalMs = Math.max(0, Math.round(duration * 1000));
+		if (totalMs <= 0) return;
+
+		const sourceDuration = Math.max(
+			1,
+			timelineClipboard.region.endMs - timelineClipboard.region.startMs,
+		);
+		const pastedDuration = Math.min(sourceDuration, totalMs);
+		const currentTimeMs = Math.max(0, Math.round(currentTime * 1000));
+		const targetStart = Math.min(currentTimeMs, Math.max(0, totalMs - pastedDuration));
+		const targetEnd = Math.min(totalMs, targetStart + pastedDuration);
+
+		function clearTimelineSelection() {
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedAnnotationId(null);
+			setSelectedBlurId(null);
+			setSelectedSpeedId(null);
+		}
+
+		function pasteSpanRegion<T extends { id: string; startMs: number; endMs: number }>(config: {
+			existingRegions: T[];
+			createId: () => string;
+			createRegion: (id: string) => T;
+			pushRegion: (region: T) => void;
+			selectRegion: (id: string) => void;
+			errorTitle: string;
+			errorDescription: string;
+		}): void {
+			const hasConflict = config.existingRegions.some((region) =>
+				spansOverlap(region.startMs, region.endMs, targetStart, targetEnd),
+			);
+			if (hasConflict) {
+				toast.error(config.errorTitle, {
+					description: config.errorDescription,
+				});
+				return;
+			}
+
+			const id = config.createId();
+			config.pushRegion(config.createRegion(id));
+			clearTimelineSelection();
+			config.selectRegion(id);
+			notifyPasted();
+		}
+
+		if (timelineClipboard.kind === "annotation" || timelineClipboard.kind === "blur") {
+			const id = `annotation-${nextAnnotationIdRef.current++}`;
+			const zIndex = nextAnnotationZIndexRef.current++;
+			const source = cloneAnnotationRegion(timelineClipboard.region);
+			const pasted: AnnotationRegion = {
+				...source,
+				id,
+				startMs: targetStart,
+				endMs: targetEnd,
+				zIndex,
+				position: getPastedAnnotationPosition(source.position, source.size),
+			};
+
+			pushState((prev) => ({
+				annotationRegions: [...prev.annotationRegions, pasted],
+			}));
+
+			if (timelineClipboard.kind === "blur") {
+				setSelectedBlurId(id);
+				setSelectedAnnotationId(null);
+			} else {
+				setSelectedAnnotationId(id);
+				setSelectedBlurId(null);
+			}
+			setSelectedZoomId(null);
+			setSelectedTrimId(null);
+			setSelectedSpeedId(null);
+			notifyPasted();
+			return;
+		}
+
+		if (timelineClipboard.kind === "zoom") {
+			pasteSpanRegion({
+				existingRegions: zoomRegions,
+				createId: () => `zoom-${nextZoomIdRef.current++}`,
+				createRegion: (id) => ({
+					...timelineClipboard.region,
+					id,
+					startMs: targetStart,
+					endMs: targetEnd,
+					focus: { ...timelineClipboard.region.focus },
+				}),
+				pushRegion: (region) => {
+					pushState((prev) => ({
+						zoomRegions: [...prev.zoomRegions, region],
+					}));
+				},
+				selectRegion: setSelectedZoomId,
+				errorTitle: tt("errors.cannotPlaceZoom"),
+				errorDescription: tt("errors.zoomExistsAtLocation"),
+			});
+			return;
+		}
+
+		if (timelineClipboard.kind === "trim") {
+			pasteSpanRegion({
+				existingRegions: trimRegions,
+				createId: () => `trim-${nextTrimIdRef.current++}`,
+				createRegion: (id) => ({
+					...timelineClipboard.region,
+					id,
+					startMs: targetStart,
+					endMs: targetEnd,
+				}),
+				pushRegion: (region) => {
+					pushState((prev) => ({
+						trimRegions: [...prev.trimRegions, region],
+					}));
+				},
+				selectRegion: setSelectedTrimId,
+				errorTitle: tt("errors.cannotPlaceTrim"),
+				errorDescription: tt("errors.trimExistsAtLocation"),
+			});
+			return;
+		}
+
+		pasteSpanRegion({
+			existingRegions: speedRegions,
+			createId: () => `speed-${nextSpeedIdRef.current++}`,
+			createRegion: (id) => ({
+				...timelineClipboard.region,
+				id,
+				startMs: targetStart,
+				endMs: targetEnd,
+			}),
+			pushRegion: (region) => {
+				pushState((prev) => ({
+					speedRegions: [...prev.speedRegions, region],
+				}));
+			},
+			selectRegion: setSelectedSpeedId,
+			errorTitle: tt("errors.cannotPlaceSpeed"),
+			errorDescription: tt("errors.speedExistsAtLocation"),
+		});
+	}, [
+		timelineClipboard,
+		duration,
+		currentTime,
+		pushState,
+		zoomRegions,
+		trimRegions,
+		speedRegions,
+		tt,
+		notifyPasted,
+	]);
+
 	const handleAnnotationDelete = useCallback(
 		(id: string) => {
 			pushState((prev) => ({
@@ -1869,7 +2098,7 @@ export default function VideoEditor() {
 			</Dialog>
 
 			<div
-				className="h-10 flex-shrink-0 bg-[#09090b]/80 backdrop-blur-md border-b border-white/5 flex items-center justify-between px-6 z-50"
+				className="h-11 flex-shrink-0 bg-[#070809]/85 backdrop-blur-xl border-b border-white/[0.07] flex items-center justify-between px-5 z-50 shadow-[0_1px_0_rgba(255,255,255,0.03)]"
 				style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
 			>
 				<div
@@ -1877,7 +2106,7 @@ export default function VideoEditor() {
 					style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties}
 				>
 					<div
-						className={`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 ? "ml-14" : "ml-2"}`}
+						className={`flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 ${isMac ? "ml-14" : "ml-2"}`}
 					>
 						<Languages size={14} />
 						<select
@@ -1896,7 +2125,7 @@ export default function VideoEditor() {
 					<button
 						type="button"
 						onClick={() => setShowNewRecordingDialog(true)}
-						className="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 text-[11px] font-medium"
+						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 text-[11px] font-medium"
 					>
 						<Video size={14} />
 						{t("newRecording.title")}
@@ -1904,7 +2133,7 @@ export default function VideoEditor() {
 					<button
 						type="button"
 						onClick={handleLoadProject}
-						className="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 text-[11px] font-medium"
+						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 text-[11px] font-medium"
 					>
 						<FolderOpen size={14} />
 						{ts("project.load")}
@@ -1912,7 +2141,7 @@ export default function VideoEditor() {
 					<button
 						type="button"
 						onClick={handleSaveProject}
-						className="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 text-[11px] font-medium"
+						className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-white/50 hover:text-white/90 hover:bg-white/[0.08] transition-all duration-150 text-[11px] font-medium"
 					>
 						<Save size={14} />
 						{ts("project.save")}
@@ -1920,289 +2149,301 @@ export default function VideoEditor() {
 				</div>
 			</div>
 
-			<div className="flex-1 p-5 gap-4 flex min-h-0 relative">
-				{/* Left Column - Video & Timeline */}
-				<div className="flex-[7] flex flex-col gap-3 min-w-0 h-full">
-					<PanelGroup direction="vertical" className="gap-3">
-						{/* Top section: video preview and controls */}
-						<Panel defaultSize={70} maxSize={70} minSize={40}>
-							<div
-								ref={playerContainerRef}
-								className={
-									isFullscreen
-										? "fixed inset-0 z-[99999] w-full h-full flex flex-col items-center justify-center bg-[#09090b]"
-										: "w-full h-full flex flex-col items-center justify-center bg-black/40 rounded-2xl border border-white/5 shadow-2xl overflow-hidden relative"
-								}
-							>
-								{/* Video preview */}
-								<div className="w-full flex justify-center items-center flex-auto mt-1.5">
-									<div
-										className="relative flex justify-center items-center w-auto h-full max-w-full box-border"
-										style={{
-											aspectRatio:
-												aspectRatio === "native"
-													? getNativeAspectRatioValue(
-															videoPlaybackRef.current?.video?.videoWidth || 1920,
-															videoPlaybackRef.current?.video?.videoHeight || 1080,
-															cropRegion,
-														)
-													: getAspectRatioValue(aspectRatio),
-										}}
-									>
-										<VideoPlayback
-											key={`${videoPath || "no-video"}:${webcamVideoPath || "no-webcam"}`}
-											aspectRatio={aspectRatio}
-											ref={videoPlaybackRef}
-											videoPath={videoPath || ""}
-											webcamVideoPath={webcamVideoPath || undefined}
-											webcamLayoutPreset={webcamLayoutPreset}
-											webcamMaskShape={webcamMaskShape}
-											webcamSizePreset={webcamSizePreset}
-											webcamPosition={webcamPosition}
-											onWebcamPositionChange={(pos) => updateState({ webcamPosition: pos })}
-											onWebcamPositionDragEnd={commitState}
-											onDurationChange={setDuration}
-											onTimeUpdate={setCurrentTime}
-											currentTime={currentTime}
-											onPlayStateChange={setIsPlaying}
-											onError={setError}
-											wallpaper={wallpaper}
-											zoomRegions={zoomRegions}
-											selectedZoomId={selectedZoomId}
-											onSelectZoom={handleSelectZoom}
-											onZoomFocusChange={handleZoomFocusChange}
-											onZoomFocusDragEnd={commitState}
-											isPlaying={isPlaying}
-											showShadow={shadowIntensity > 0}
-											shadowIntensity={shadowIntensity}
-											showBlur={showBlur}
-											motionBlurAmount={motionBlurAmount}
-											borderRadius={borderRadius}
-											padding={padding}
-											cropRegion={cropRegion}
-											trimRegions={trimRegions}
-											speedRegions={speedRegions}
-											annotationRegions={annotationOnlyRegions}
-											selectedAnnotationId={selectedAnnotationId}
-											onSelectAnnotation={handleSelectAnnotation}
-											onAnnotationPositionChange={handleAnnotationPositionChange}
-											onAnnotationSizeChange={handleAnnotationSizeChange}
-											blurRegions={blurRegions}
-											selectedBlurId={selectedBlurId}
-											onSelectBlur={handleSelectBlur}
-											onBlurPositionChange={handleAnnotationPositionChange}
-											onBlurSizeChange={handleAnnotationSizeChange}
-											onBlurDataChange={handleBlurDataPreviewChange}
-											onBlurDataCommit={commitState}
-											cursorTelemetry={cursorTelemetry}
-											cursorHighlight={effectiveCursorHighlight}
-											cursorClickTimestamps={cursorClickTimestamps}
-										/>
+			<div className="editor-workspace flex-1 min-h-0 relative">
+				<PanelGroup direction="vertical" className="gap-3 min-h-0">
+					{/* Top section: preview and contextual settings */}
+					<Panel defaultSize={67} maxSize={76} minSize={46} className="min-h-[300px]">
+						<div className="editor-main-deck h-full min-h-0">
+							<div className="editor-preview-zone min-w-0 h-full">
+								<div
+									ref={playerContainerRef}
+									className={
+										isFullscreen
+											? "fixed inset-0 z-[99999] w-full h-full flex flex-col items-center justify-center bg-[#09090b]"
+											: "editor-preview-panel w-full h-full flex flex-col items-center justify-center overflow-hidden relative"
+									}
+								>
+									{/* Video preview */}
+									<div className="w-full min-h-0 flex justify-center items-center flex-auto px-4 pt-4">
+										<div
+											className="relative flex justify-center items-center w-auto h-full max-w-full box-border"
+											style={{
+												aspectRatio:
+													aspectRatio === "native"
+														? getNativeAspectRatioValue(
+																videoPlaybackRef.current?.video?.videoWidth || 1920,
+																videoPlaybackRef.current?.video?.videoHeight || 1080,
+																cropRegion,
+															)
+														: getAspectRatioValue(aspectRatio),
+											}}
+										>
+											<VideoPlayback
+												key={`${videoPath || "no-video"}:${webcamVideoPath || "no-webcam"}`}
+												aspectRatio={aspectRatio}
+												ref={videoPlaybackRef}
+												videoPath={videoPath || ""}
+												webcamVideoPath={webcamVideoPath || undefined}
+												webcamLayoutPreset={webcamLayoutPreset}
+												webcamMaskShape={webcamMaskShape}
+												webcamSizePreset={webcamSizePreset}
+												webcamPosition={webcamPosition}
+												onWebcamPositionChange={(pos) => updateState({ webcamPosition: pos })}
+												onWebcamPositionDragEnd={commitState}
+												onDurationChange={setDuration}
+												onTimeUpdate={setCurrentTime}
+												currentTime={currentTime}
+												onPlayStateChange={setIsPlaying}
+												onError={setError}
+												wallpaper={wallpaper}
+												zoomRegions={zoomRegions}
+												selectedZoomId={selectedZoomId}
+												onSelectZoom={handleSelectZoom}
+												onZoomFocusChange={handleZoomFocusChange}
+												onZoomFocusDragEnd={commitState}
+												isPlaying={isPlaying}
+												showShadow={shadowIntensity > 0}
+												shadowIntensity={shadowIntensity}
+												showBlur={showBlur}
+												motionBlurAmount={motionBlurAmount}
+												borderRadius={borderRadius}
+												padding={padding}
+												cropRegion={cropRegion}
+												trimRegions={trimRegions}
+												speedRegions={speedRegions}
+												annotationRegions={annotationOnlyRegions}
+												selectedAnnotationId={selectedAnnotationId}
+												onSelectAnnotation={handleSelectAnnotation}
+												onAnnotationPositionChange={handleAnnotationPositionChange}
+												onAnnotationSizeChange={handleAnnotationSizeChange}
+												blurRegions={blurRegions}
+												selectedBlurId={selectedBlurId}
+												onSelectBlur={handleSelectBlur}
+												onBlurPositionChange={handleAnnotationPositionChange}
+												onBlurSizeChange={handleAnnotationSizeChange}
+												onBlurDataChange={handleBlurDataPreviewChange}
+												onBlurDataCommit={commitState}
+												cursorTelemetry={cursorTelemetry}
+												cursorHighlight={effectiveCursorHighlight}
+												cursorClickTimestamps={cursorClickTimestamps}
+											/>
+										</div>
 									</div>
-								</div>
-								{/* Playback controls */}
-								<div className="w-full flex justify-center items-center h-12 flex-shrink-0 px-3 py-1.5 my-1.5">
-									<div className="w-full max-w-[700px]">
-										<PlaybackControls
-											isPlaying={isPlaying}
-											currentTime={currentTime}
-											duration={duration}
-											isFullscreen={isFullscreen}
-											onToggleFullscreen={toggleFullscreen}
-											onTogglePlayPause={togglePlayPause}
-											onSeek={handleSeek}
-										/>
+									{/* Playback controls */}
+									<div className="w-full flex justify-center items-center h-14 flex-shrink-0 px-4 py-2">
+										<div className="w-full max-w-[760px]">
+											<PlaybackControls
+												isPlaying={isPlaying}
+												currentTime={currentTime}
+												duration={duration}
+												isFullscreen={isFullscreen}
+												onToggleFullscreen={toggleFullscreen}
+												onTogglePlayPause={togglePlayPause}
+												onSeek={handleSeek}
+											/>
+										</div>
 									</div>
 								</div>
 							</div>
-						</Panel>
 
-						<PanelResizeHandle className="bg-[#09090b]/80 hover:bg-[#09090b] transition-colors rounded-full flex items-center justify-center">
-							<div className="w-8 h-1 bg-white/20 rounded-full"></div>
-						</PanelResizeHandle>
-
-						{/* Timeline section */}
-						<Panel defaultSize={30} maxSize={60} minSize={30}>
-							<div className="h-full bg-[#09090b] rounded-2xl border border-white/5 shadow-lg overflow-hidden flex flex-col">
-								<TimelineEditor
-									videoDuration={duration}
-									currentTime={currentTime}
-									onSeek={handleSeek}
-									cursorTelemetry={cursorTelemetry}
-									zoomRegions={zoomRegions}
-									onZoomAdded={handleZoomAdded}
-									onZoomSuggested={handleZoomSuggested}
-									onZoomSpanChange={handleZoomSpanChange}
-									onZoomDelete={handleZoomDelete}
+							<div className="editor-settings-rail min-w-0 h-full">
+								<SettingsPanel
+									cursorHighlight={cursorHighlight}
+									onCursorHighlightChange={(next) => pushState({ cursorHighlight: next })}
+									cursorHighlightSupportsClicks={isMac}
+									selected={wallpaper}
+									onWallpaperChange={(w) => pushState({ wallpaper: w })}
+									selectedZoomDepth={
+										selectedZoomId ? zoomRegions.find((z) => z.id === selectedZoomId)?.depth : null
+									}
+									onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
+									selectedZoomCustomScale={
+										selectedZoomId
+											? (zoomRegions.find((z) => z.id === selectedZoomId)?.customScale ?? null)
+											: null
+									}
+									onZoomCustomScaleChange={handleZoomCustomScaleChange}
+									onZoomCustomScaleCommit={handleZoomCustomScaleCommit}
+									selectedZoomFocusMode={
+										selectedZoomId
+											? (zoomRegions.find((z) => z.id === selectedZoomId)?.focusMode ?? "manual")
+											: null
+									}
+									onZoomFocusModeChange={(mode) =>
+										selectedZoomId && handleZoomFocusModeChange(mode)
+									}
+									selectedZoomFocus={
+										selectedZoomId
+											? (zoomRegions.find((z) => z.id === selectedZoomId)?.focus ?? null)
+											: null
+									}
+									onZoomFocusCoordinateChange={(focus) =>
+										selectedZoomId && handleZoomFocusChange(selectedZoomId, focus)
+									}
+									onZoomFocusCoordinateCommit={commitState}
+									hasCursorTelemetry={cursorTelemetry.length > 0}
 									selectedZoomId={selectedZoomId}
-									onSelectZoom={handleSelectZoom}
-									trimRegions={trimRegions}
-									onTrimAdded={handleTrimAdded}
-									onTrimSpanChange={handleTrimSpanChange}
-									onTrimDelete={handleTrimDelete}
+									onZoomDelete={handleZoomDelete}
+									selectedZoomRotationPreset={
+										selectedZoomId
+											? (zoomRegions.find((z) => z.id === selectedZoomId)?.rotationPreset ?? null)
+											: null
+									}
+									onZoomRotationPresetChange={handleZoomRotationPresetChange}
 									selectedTrimId={selectedTrimId}
-									onSelectTrim={handleSelectTrim}
-									speedRegions={speedRegions}
-									onSpeedAdded={handleSpeedAdded}
-									onSpeedSpanChange={handleSpeedSpanChange}
-									onSpeedDelete={handleSpeedDelete}
-									selectedSpeedId={selectedSpeedId}
-									onSelectSpeed={handleSelectSpeed}
-									annotationRegions={annotationOnlyRegions}
-									onAnnotationAdded={handleAnnotationAdded}
-									onAnnotationSpanChange={handleAnnotationSpanChange}
-									onAnnotationDelete={handleAnnotationDelete}
-									selectedAnnotationId={selectedAnnotationId}
-									onSelectAnnotation={handleSelectAnnotation}
-									blurRegions={blurRegions}
-									onBlurAdded={handleBlurAdded}
-									onBlurSpanChange={handleAnnotationSpanChange}
-									onBlurDelete={handleAnnotationDelete}
-									selectedBlurId={selectedBlurId}
-									onSelectBlur={handleSelectBlur}
+									onTrimDelete={handleTrimDelete}
+									shadowIntensity={shadowIntensity}
+									onShadowChange={(v) => updateState({ shadowIntensity: v })}
+									onShadowCommit={commitState}
+									showBlur={showBlur}
+									onBlurChange={(v) => pushState({ showBlur: v })}
+									motionBlurAmount={motionBlurAmount}
+									onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
+									onMotionBlurCommit={commitState}
+									borderRadius={borderRadius}
+									onBorderRadiusChange={(v) => updateState({ borderRadius: v })}
+									onBorderRadiusCommit={commitState}
+									padding={padding}
+									onPaddingChange={(v) => updateState({ padding: v })}
+									onPaddingCommit={commitState}
+									cropRegion={cropRegion}
+									onCropChange={(r) => pushState({ cropRegion: r })}
 									aspectRatio={aspectRatio}
-									onAspectRatioChange={(ar) =>
+									hasWebcam={Boolean(webcamVideoPath)}
+									webcamLayoutPreset={webcamLayoutPreset}
+									onWebcamLayoutPresetChange={(preset) =>
 										pushState({
-											aspectRatio: ar,
-											webcamLayoutPreset:
-												(isPortraitAspectRatio(ar) && webcamLayoutPreset === "dual-frame") ||
-												(!isPortraitAspectRatio(ar) && webcamLayoutPreset === "vertical-stack")
-													? "picture-in-picture"
-													: webcamLayoutPreset,
+											webcamLayoutPreset: preset,
+											webcamPosition: preset === "picture-in-picture" ? webcamPosition : null,
 										})
 									}
-								/>
-							</div>
-						</Panel>
-					</PanelGroup>
-				</div>
-
-				{/* Right section: settings panel */}
-				<div className="flex-[3] min-w-[280px] max-w-[420px] h-full">
-					<SettingsPanel
-						cursorHighlight={cursorHighlight}
-						onCursorHighlightChange={(next) => pushState({ cursorHighlight: next })}
-						cursorHighlightSupportsClicks={isMac}
-						selected={wallpaper}
-						onWallpaperChange={(w) => pushState({ wallpaper: w })}
-						selectedZoomDepth={
-							selectedZoomId ? zoomRegions.find((z) => z.id === selectedZoomId)?.depth : null
-						}
-						onZoomDepthChange={(depth) => selectedZoomId && handleZoomDepthChange(depth)}
-						selectedZoomCustomScale={
-							selectedZoomId
-								? (zoomRegions.find((z) => z.id === selectedZoomId)?.customScale ?? null)
-								: null
-						}
-						onZoomCustomScaleChange={handleZoomCustomScaleChange}
-						onZoomCustomScaleCommit={handleZoomCustomScaleCommit}
-						selectedZoomFocusMode={
-							selectedZoomId
-								? (zoomRegions.find((z) => z.id === selectedZoomId)?.focusMode ?? "manual")
-								: null
-						}
-						onZoomFocusModeChange={(mode) => selectedZoomId && handleZoomFocusModeChange(mode)}
-						selectedZoomFocus={
-							selectedZoomId
-								? (zoomRegions.find((z) => z.id === selectedZoomId)?.focus ?? null)
-								: null
-						}
-						onZoomFocusCoordinateChange={(focus) =>
-							selectedZoomId && handleZoomFocusChange(selectedZoomId, focus)
-						}
-						onZoomFocusCoordinateCommit={commitState}
-						hasCursorTelemetry={cursorTelemetry.length > 0}
-						selectedZoomId={selectedZoomId}
-						onZoomDelete={handleZoomDelete}
-						selectedZoomRotationPreset={
-							selectedZoomId
-								? (zoomRegions.find((z) => z.id === selectedZoomId)?.rotationPreset ?? null)
-								: null
-						}
-						onZoomRotationPresetChange={handleZoomRotationPresetChange}
-						selectedTrimId={selectedTrimId}
-						onTrimDelete={handleTrimDelete}
-						shadowIntensity={shadowIntensity}
-						onShadowChange={(v) => updateState({ shadowIntensity: v })}
-						onShadowCommit={commitState}
-						showBlur={showBlur}
-						onBlurChange={(v) => pushState({ showBlur: v })}
-						motionBlurAmount={motionBlurAmount}
-						onMotionBlurChange={(v) => updateState({ motionBlurAmount: v })}
-						onMotionBlurCommit={commitState}
-						borderRadius={borderRadius}
-						onBorderRadiusChange={(v) => updateState({ borderRadius: v })}
-						onBorderRadiusCommit={commitState}
-						padding={padding}
-						onPaddingChange={(v) => updateState({ padding: v })}
-						onPaddingCommit={commitState}
-						cropRegion={cropRegion}
-						onCropChange={(r) => pushState({ cropRegion: r })}
-						aspectRatio={aspectRatio}
-						hasWebcam={Boolean(webcamVideoPath)}
-						webcamLayoutPreset={webcamLayoutPreset}
-						onWebcamLayoutPresetChange={(preset) =>
-							pushState({
-								webcamLayoutPreset: preset,
-								webcamPosition: preset === "picture-in-picture" ? webcamPosition : null,
-							})
-						}
-						webcamMaskShape={webcamMaskShape}
-						onWebcamMaskShapeChange={(shape) => pushState({ webcamMaskShape: shape })}
-						webcamSizePreset={webcamSizePreset}
-						onWebcamSizePresetChange={(v) => updateState({ webcamSizePreset: v })}
-						onWebcamSizePresetCommit={commitState}
-						videoElement={videoPlaybackRef.current?.video || null}
-						exportQuality={exportQuality}
-						onExportQualityChange={setExportQuality}
-						exportFormat={exportFormat}
-						onExportFormatChange={setExportFormat}
-						gifFrameRate={gifFrameRate}
-						onGifFrameRateChange={setGifFrameRate}
-						gifLoop={gifLoop}
-						onGifLoopChange={setGifLoop}
-						gifSizePreset={gifSizePreset}
-						onGifSizePresetChange={setGifSizePreset}
-						gifOutputDimensions={calculateOutputDimensions(
-							videoPlaybackRef.current?.video?.videoWidth || 1920,
-							videoPlaybackRef.current?.video?.videoHeight || 1080,
-							gifSizePreset,
-							GIF_SIZE_PRESETS,
-							aspectRatio === "native"
-								? getNativeAspectRatioValue(
+									webcamMaskShape={webcamMaskShape}
+									onWebcamMaskShapeChange={(shape) => pushState({ webcamMaskShape: shape })}
+									webcamSizePreset={webcamSizePreset}
+									onWebcamSizePresetChange={(v) => updateState({ webcamSizePreset: v })}
+									onWebcamSizePresetCommit={commitState}
+									videoElement={videoPlaybackRef.current?.video || null}
+									exportQuality={exportQuality}
+									onExportQualityChange={setExportQuality}
+									exportFormat={exportFormat}
+									onExportFormatChange={setExportFormat}
+									gifFrameRate={gifFrameRate}
+									onGifFrameRateChange={setGifFrameRate}
+									gifLoop={gifLoop}
+									onGifLoopChange={setGifLoop}
+									gifSizePreset={gifSizePreset}
+									onGifSizePresetChange={setGifSizePreset}
+									gifOutputDimensions={calculateOutputDimensions(
 										videoPlaybackRef.current?.video?.videoWidth || 1920,
 										videoPlaybackRef.current?.video?.videoHeight || 1080,
-										cropRegion,
-									)
-								: getAspectRatioValue(aspectRatio),
-						)}
-						onExport={handleOpenExportDialog}
-						selectedAnnotationId={selectedAnnotationId}
-						annotationRegions={annotationOnlyRegions}
-						onAnnotationContentChange={handleAnnotationContentChange}
-						onAnnotationTypeChange={handleAnnotationTypeChange}
-						onAnnotationStyleChange={handleAnnotationStyleChange}
-						onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
-						onAnnotationDuplicate={handleAnnotationDuplicate}
-						onAnnotationDelete={handleAnnotationDelete}
-						selectedBlurId={selectedBlurId}
-						blurRegions={blurRegions}
-						onBlurDataChange={handleBlurDataPanelChange}
-						onBlurDataCommit={commitState}
-						onBlurDelete={handleAnnotationDelete}
-						selectedSpeedId={selectedSpeedId}
-						selectedSpeedValue={
-							selectedSpeedId
-								? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
-								: null
-						}
-						onSpeedChange={handleSpeedChange}
-						onSpeedDelete={handleSpeedDelete}
-						unsavedExport={unsavedExport}
-						onSaveUnsavedExport={handleSaveUnsavedExport}
-						onSaveDiagnostic={handleSaveDiagnostic}
-					/>
-				</div>
+										gifSizePreset,
+										GIF_SIZE_PRESETS,
+										aspectRatio === "native"
+											? getNativeAspectRatioValue(
+													videoPlaybackRef.current?.video?.videoWidth || 1920,
+													videoPlaybackRef.current?.video?.videoHeight || 1080,
+													cropRegion,
+												)
+											: getAspectRatioValue(aspectRatio),
+									)}
+									onExport={handleOpenExportDialog}
+									selectedAnnotationId={selectedAnnotationId}
+									annotationRegions={annotationOnlyRegions}
+									onAnnotationContentChange={handleAnnotationContentChange}
+									onAnnotationTypeChange={handleAnnotationTypeChange}
+									onAnnotationStyleChange={handleAnnotationStyleChange}
+									onAnnotationFigureDataChange={handleAnnotationFigureDataChange}
+									onAnnotationDuplicate={handleAnnotationDuplicate}
+									onAnnotationDelete={handleAnnotationDelete}
+									selectedBlurId={selectedBlurId}
+									blurRegions={blurRegions}
+									onBlurDataChange={handleBlurDataPanelChange}
+									onBlurDataCommit={commitState}
+									onBlurDelete={handleAnnotationDelete}
+									selectedSpeedId={selectedSpeedId}
+									selectedSpeedValue={
+										selectedSpeedId
+											? (speedRegions.find((r) => r.id === selectedSpeedId)?.speed ?? null)
+											: null
+									}
+									onSpeedChange={handleSpeedChange}
+									onSpeedDelete={handleSpeedDelete}
+									unsavedExport={unsavedExport}
+									onSaveUnsavedExport={handleSaveUnsavedExport}
+									onSaveDiagnostic={handleSaveDiagnostic}
+								/>
+							</div>
+						</div>
+					</Panel>
+
+					<PanelResizeHandle className="editor-resize-handle group">
+						<div className="w-10 h-1 bg-white/20 rounded-full transition-colors group-hover:bg-[#34B27B]/70"></div>
+					</PanelResizeHandle>
+
+					{/* Full-width timeline */}
+					<Panel defaultSize={33} maxSize={54} minSize={24} className="min-h-[210px]">
+						<div className="editor-timeline-panel h-full overflow-hidden flex flex-col">
+							<TimelineEditor
+								videoDuration={duration}
+								currentTime={currentTime}
+								onSeek={handleSeek}
+								cursorTelemetry={cursorTelemetry}
+								zoomRegions={zoomRegions}
+								onZoomAdded={handleZoomAdded}
+								onZoomSuggested={handleZoomSuggested}
+								onZoomSpanChange={handleZoomSpanChange}
+								onZoomDelete={handleZoomDelete}
+								selectedZoomId={selectedZoomId}
+								onSelectZoom={handleSelectZoom}
+								trimRegions={trimRegions}
+								onTrimAdded={handleTrimAdded}
+								onTrimSpanChange={handleTrimSpanChange}
+								onTrimDelete={handleTrimDelete}
+								selectedTrimId={selectedTrimId}
+								onSelectTrim={handleSelectTrim}
+								speedRegions={speedRegions}
+								onSpeedAdded={handleSpeedAdded}
+								onSpeedSpanChange={handleSpeedSpanChange}
+								onSpeedDelete={handleSpeedDelete}
+								selectedSpeedId={selectedSpeedId}
+								onSelectSpeed={handleSelectSpeed}
+								annotationRegions={annotationOnlyRegions}
+								onAnnotationAdded={handleAnnotationAdded}
+								onAnnotationSpanChange={handleAnnotationSpanChange}
+								onAnnotationDelete={handleAnnotationDelete}
+								selectedAnnotationId={selectedAnnotationId}
+								onSelectAnnotation={handleSelectAnnotation}
+								blurRegions={blurRegions}
+								onBlurAdded={handleBlurAdded}
+								onBlurSpanChange={handleAnnotationSpanChange}
+								onBlurDelete={handleAnnotationDelete}
+								selectedBlurId={selectedBlurId}
+								onSelectBlur={handleSelectBlur}
+								canCopySelectedItem={
+									!!selectedZoomId ||
+									!!selectedTrimId ||
+									!!selectedAnnotationId ||
+									!!selectedBlurId ||
+									!!selectedSpeedId
+								}
+								canPasteTimelineItem={!!timelineClipboard && duration > 0}
+								onCopySelectedItem={handleCopySelectedTimelineItem}
+								onPasteTimelineItem={handlePasteTimelineItem}
+								aspectRatio={aspectRatio}
+								onAspectRatioChange={(ar) =>
+									pushState({
+										aspectRatio: ar,
+										webcamLayoutPreset:
+											(isPortraitAspectRatio(ar) && webcamLayoutPreset === "dual-frame") ||
+											(!isPortraitAspectRatio(ar) && webcamLayoutPreset === "vertical-stack")
+												? "picture-in-picture"
+												: webcamLayoutPreset,
+									})
+								}
+							/>
+						</div>
+					</Panel>
+				</PanelGroup>
 			</div>
 
 			<ExportDialog

src/components/video-editor/VideoPlayback.tsx

@@ -80,6 +80,13 @@ import {
 	type MotionBlurState,
 } from "./videoPlayback/zoomTransform";
 
+type BlurPreviewCanvasSource = {
+	clientHeight?: number;
+	clientWidth?: number;
+	height: number;
+	width: number;
+};
+
 interface VideoPlaybackProps {
 	videoPath: string;
 	webcamVideoPath?: string;
@@ -256,6 +263,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const videoReadyRafRef = useRef<number | null>(null);
 		const smoothedAutoFocusRef = useRef<ZoomFocus | null>(null);
 		const prevTargetProgressRef = useRef(0);
+		const blurPreviewSnapshotRef = useRef<{
+			bucket: number;
+			canvas: BlurPreviewCanvasSource | null;
+			height: number;
+			width: number;
+		}>({ bucket: -1, canvas: null, height: 0, width: 0 });
 
 		const updateOverlayForRegion = useCallback(
 			(region: ZoomRegion | null, focusOverride?: ZoomFocus) => {
@@ -1448,15 +1461,32 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 										region: blurRegion,
 									})),
 								].sort((a, b) => a.region.zIndex - b.region.zIndex);
+								const previewSnapshotBucket = Math.floor(currentTime * 10);
 								const previewSnapshotCanvas =
 									filteredBlurRegions.length > 0
 										? (() => {
+												const cached = blurPreviewSnapshotRef.current;
+												if (
+													cached.bucket === previewSnapshotBucket &&
+													cached.width === overlaySize.width &&
+													cached.height === overlaySize.height
+												) {
+													return cached.canvas;
+												}
+
 												const app = appRef.current;
-												if (!app?.renderer?.extract) return null;
+												if (!app?.renderer?.extract) return cached.canvas;
 												try {
-													return app.renderer.extract.canvas(app.stage);
+													const canvas = app.renderer.extract.canvas(app.stage);
+													blurPreviewSnapshotRef.current = {
+														bucket: previewSnapshotBucket,
+														canvas,
+														height: overlaySize.height,
+														width: overlaySize.width,
+													};
+													return canvas;
 												} catch {
-													return null;
+													return cached.canvas;
 												}
 											})()
 										: null;
@@ -1528,7 +1558,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 												: item.region.id === selectedAnnotationId
 										}
 										previewSourceCanvas={previewSnapshotCanvas}
-										previewFrameVersion={Math.round(currentTime * 1000)}
+										previewFrameVersion={previewSnapshotBucket}
 									/>
 								));
 							})()}

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

@@ -132,7 +132,7 @@ describe("projectPersistence media compatibility", () => {
 		expect(editor.annotationRegions[0].blurData?.color).toBe("black");
 		expect(editor.annotationRegions[0].blurData?.intensity).toBe(40);
 		expect(editor.annotationRegions[0].blurData?.blockSize).toBe(48);
-		expect(editor.annotationRegions[1].blurData?.type).toBe("blur");
+		expect(editor.annotationRegions[1].blurData?.type).toBe("mosaic");
 		expect(editor.annotationRegions[1].blurData?.color).toBe("white");
 		expect(editor.annotationRegions[1].blurData?.blockSize).toBe(4);
 	});

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

@@ -101,7 +101,7 @@ export default function Item({
 						"w-full h-full overflow-hidden flex items-center justify-center gap-1.5 cursor-grab active:cursor-grabbing relative",
 						isSelected && glassStyles.selected,
 					)}
-					style={{ height: 40, color: "#fff", minWidth: 24 }}
+					style={{ height: 30, color: "#fff", minWidth: 24 }}
 					onClick={(event) => {
 						event.stopPropagation();
 						onSelect?.();
@@ -130,12 +130,12 @@ export default function Item({
 						title="Resize right"
 					/>
 					{/* Content */}
-					<div className="relative z-10 flex flex-col items-center justify-center text-white/90 opacity-80 group-hover:opacity-100 transition-opacity select-none overflow-hidden">
+					<div className="relative z-10 flex min-w-0 flex-col items-center justify-center text-white/90 opacity-85 group-hover:opacity-100 transition-opacity select-none overflow-hidden px-3">
 						<div className="flex items-center gap-1.5">
 							{isZoom ? (
 								<>
 									<ZoomIn className="w-3.5 h-3.5 shrink-0" />
-									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
+									<span className="text-[11px] font-semibold whitespace-nowrap">
 										{zoomCustomScale != null
 											? `${zoomCustomScale.toFixed(2)}×`
 											: ZOOM_LABELS[zoomDepth] || `${zoomDepth}×`}
@@ -150,21 +150,21 @@ export default function Item({
 							) : isTrim ? (
 								<>
 									<Scissors className="w-3.5 h-3.5 shrink-0" />
-									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
+									<span className="text-[11px] font-semibold whitespace-nowrap">
 										{t("labels.trim")}
 									</span>
 								</>
 							) : isSpeed ? (
 								<>
 									<Gauge className="w-3.5 h-3.5 shrink-0" />
-									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
+									<span className="text-[11px] font-semibold whitespace-nowrap">
 										{speedValue !== undefined ? `${speedValue}×` : t("labels.speed")}
 									</span>
 								</>
 							) : (
 								<>
 									<MessageSquare className="w-3.5 h-3.5 shrink-0" />
-									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
+									<span className="text-[11px] font-semibold truncate whitespace-nowrap">
 										{children}
 									</span>
 								</>

src/components/video-editor/timeline/ItemGlass.module.css

@@ -1,39 +1,39 @@
 .glassGreen {
 	position: relative;
-	border-radius: 8px;
+	border-radius: 10px;
 	-corner-smoothing: antialiased;
-	background: rgba(52, 178, 123, 0.15);
-	border: 1px solid rgba(52, 178, 123, 0.3);
-	box-shadow: 0 2px 12px 0 rgba(52, 178, 123, 0.1) inset;
-	margin: 2px 0;
-	backdrop-filter: blur(4px);
-	-webkit-backdrop-filter: blur(4px);
+	background: linear-gradient(180deg, rgba(52, 178, 123, 0.28), rgba(31, 115, 82, 0.2));
+	border: 1px solid rgba(77, 221, 157, 0.36);
+	box-shadow:
+		0 1px 0 rgba(255, 255, 255, 0.1) inset,
+		0 8px 22px rgba(0, 0, 0, 0.22);
+	margin: 3px 0;
 	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .glassGreen:hover {
-	background: rgba(52, 178, 123, 0.25);
-	border-color: rgba(52, 178, 123, 0.5);
-	box-shadow: 0 4px 20px 0 rgba(52, 178, 123, 0.2) inset;
+	background: linear-gradient(180deg, rgba(52, 178, 123, 0.36), rgba(31, 115, 82, 0.25));
+	border-color: rgba(77, 221, 157, 0.62);
 }
 
 .glassGreen.selected {
-	background: rgba(52, 178, 123, 0.35);
+	background: linear-gradient(180deg, rgba(52, 178, 123, 0.48), rgba(31, 115, 82, 0.32));
 	border-color: #34b27b;
 	box-shadow:
-		0 0 0 1px #34b27b,
-		0 4px 20px 0 rgba(52, 178, 123, 0.3) inset;
+		0 0 0 1px rgba(52, 178, 123, 0.95),
+		0 0 0 4px rgba(52, 178, 123, 0.14),
+		0 12px 26px rgba(0, 0, 0, 0.28);
 	z-index: 10;
 }
 
 .glassRed {
 	position: relative;
-	border-radius: 8px;
+	border-radius: 10px;
 	-corner-smoothing: antialiased;
 	background: rgba(239, 68, 68, 0.15);
 	border: 1px solid rgba(239, 68, 68, 0.3);
 	box-shadow: 0 2px 12px 0 rgba(239, 68, 68, 0.1) inset;
-	margin: 2px 0;
+	margin: 3px 0;
 	backdrop-filter: blur(4px);
 	-webkit-backdrop-filter: blur(4px);
 	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -56,12 +56,12 @@
 
 .glassYellow {
 	position: relative;
-	border-radius: 8px;
+	border-radius: 10px;
 	-corner-smoothing: antialiased;
 	background: rgba(180, 160, 70, 0.15);
 	border: 1px solid rgba(180, 160, 70, 0.3);
 	box-shadow: 0 2px 12px 0 rgba(180, 160, 70, 0.1) inset;
-	margin: 2px 0;
+	margin: 3px 0;
 	backdrop-filter: blur(4px);
 	-webkit-backdrop-filter: blur(4px);
 	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -84,12 +84,12 @@
 
 .glassAmber {
 	position: relative;
-	border-radius: 8px;
+	border-radius: 10px;
 	-corner-smoothing: antialiased;
 	background: rgba(245, 158, 11, 0.15);
 	border: 1px solid rgba(245, 158, 11, 0.3);
 	box-shadow: 0 2px 12px 0 rgba(245, 158, 11, 0.1) inset;
-	margin: 2px 0;
+	margin: 3px 0;
 	backdrop-filter: blur(4px);
 	-webkit-backdrop-filter: blur(4px);
 	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
@@ -137,13 +137,13 @@
 .zoomEndCap.left {
 	left: 0;
 	cursor: ew-resize;
-	border-top-left-radius: 7px;
-	border-bottom-left-radius: 7px;
+	border-top-left-radius: 9px;
+	border-bottom-left-radius: 9px;
 }
 
 .zoomEndCap.right {
 	right: 0;
 	cursor: ew-resize;
-	border-top-right-radius: 7px;
-	border-bottom-right-radius: 7px;
+	border-top-right-radius: 9px;
+	border-bottom-right-radius: 9px;
 }

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

@@ -3,31 +3,21 @@ import { useRow } from "dnd-timeline";
 
 interface RowProps extends RowDefinition {
 	children: React.ReactNode;
-	label?: string;
 	hint?: string;
 	isEmpty?: boolean;
-	labelColor?: string;
 }
 
-export default function Row({ id, children, label, hint, isEmpty, labelColor = "#666" }: RowProps) {
+export default function Row({ id, children, hint, isEmpty }: RowProps) {
 	const { setNodeRef, rowWrapperStyle, rowStyle } = useRow({ id });
 
 	return (
 		<div
-			className="border-b border-[#18181b] bg-[#18181b] relative"
-			style={{ ...rowWrapperStyle, minHeight: 48, marginBottom: 4 }}
+			className="border-b border-white/[0.055] bg-[#101116] relative overflow-hidden"
+			style={{ ...rowWrapperStyle, minHeight: 36 }}
 		>
-			{label && (
-				<div
-					className="absolute left-1.5 top-1/2 -translate-y-1/2 text-[9px] font-semibold uppercase tracking-widest z-20 pointer-events-none select-none"
-					style={{ color: labelColor, writingMode: "horizontal-tb" }}
-				>
-					{label}
-				</div>
-			)}
 			{isEmpty && hint && (
 				<div className="absolute inset-0 flex items-center justify-center pointer-events-none select-none z-10">
-					<span className="text-[11px] text-white/15 font-medium">{hint}</span>
+					<span className="text-[11px] text-white/[0.12] font-medium">{hint}</span>
 				</div>
 			)}
 			<div ref={setNodeRef} style={rowStyle}>

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

@@ -26,7 +26,6 @@ import { matchesShortcut } from "@/lib/shortcuts";
 import { cn } from "@/lib/utils";
 import { ASPECT_RATIOS, type AspectRatio, getAspectRatioLabel } from "@/utils/aspectRatioUtils";
 import { formatShortcut } from "@/utils/platformUtils";
-import { TutorialHelp } from "../TutorialHelp";
 import type {
 	AnnotationRegion,
 	CursorTelemetryPoint,
@@ -86,6 +85,10 @@ interface TimelineEditorProps {
 	onSpeedDelete?: (id: string) => void;
 	selectedSpeedId?: string | null;
 	onSelectSpeed?: (id: string | null) => void;
+	canCopySelectedItem?: boolean;
+	canPasteTimelineItem?: boolean;
+	onCopySelectedItem?: () => void;
+	onPasteTimelineItem?: () => void;
 	aspectRatio: AspectRatio;
 	onAspectRatioChange: (aspectRatio: AspectRatio) => void;
 }
@@ -378,7 +381,7 @@ function PlaybackCursor({
 			}}
 		>
 			<div
-				className="absolute top-0 bottom-0 w-[2px] bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.5)] cursor-ew-resize pointer-events-auto hover:shadow-[0_0_15px_rgba(52,178,123,0.7)] transition-shadow"
+				className="absolute top-0 bottom-0 w-[2px] bg-[#6C55FF] shadow-[0_0_18px_rgba(108,85,255,0.68)] cursor-ew-resize pointer-events-auto hover:shadow-[0_0_24px_rgba(108,85,255,0.85)] transition-shadow"
 				style={{
 					[sideProperty]: `${offset}px`,
 				}}
@@ -389,10 +392,10 @@ function PlaybackCursor({
 				}}
 			>
 				<div
-					className="absolute -top-1 left-1/2 -translate-x-1/2 hover:scale-125 transition-transform"
-					style={{ width: "16px", height: "16px" }}
+					className="absolute -top-2 left-1/2 -translate-x-1/2 hover:scale-110 transition-transform"
+					style={{ width: "20px", height: "20px" }}
 				>
-					<div className="w-3 h-3 mx-auto mt-[2px] bg-[#34B27B] rotate-45 rounded-sm shadow-lg border border-white/20" />
+					<div className="w-4 h-4 mx-auto mt-[2px] bg-[#6C55FF] rotate-45 rounded-[5px] shadow-lg shadow-[#6C55FF]/30 border border-white/30" />
 				</div>
 				{isDragging && (
 					<div className="absolute -top-6 left-1/2 -translate-x-1/2 px-1.5 py-0.5 rounded bg-black/80 text-[10px] text-white/90 font-medium tabular-nums whitespace-nowrap border border-white/10 shadow-lg pointer-events-none">
@@ -475,7 +478,7 @@ function TimelineAxis({
 
 	return (
 		<div
-			className="h-8 bg-[#09090b] border-b border-white/5 relative overflow-hidden select-none"
+			className="h-9 bg-[#0c0d10] border-b border-white/[0.07] relative overflow-hidden select-none"
 			style={{
 				[sideProperty === "right" ? "marginRight" : "marginLeft"]: `${sidebarWidth}px`,
 			}}
@@ -486,7 +489,7 @@ function TimelineAxis({
 				return (
 					<div
 						key={`minor-${time}`}
-						className="absolute bottom-0 h-1 w-[1px] bg-white/5"
+						className="absolute bottom-0 h-1.5 w-[1px] bg-white/[0.07]"
 						style={{ [sideProperty]: `${offset}px` }}
 					/>
 				);
@@ -508,7 +511,7 @@ function TimelineAxis({
 				return (
 					<div key={marker.time} style={markerStyle}>
 						<div className="flex flex-col items-center pb-1">
-							<div className="h-2 w-[1px] bg-white/20 mb-1" />
+							<div className="h-2.5 w-[1px] bg-white/20 mb-1" />
 							<span
 								className={cn(
 									"text-[10px] font-medium tabular-nums tracking-tight",
@@ -659,11 +662,11 @@ function Timeline({
 		<div
 			ref={setRefs}
 			style={style}
-			className="select-none bg-[#09090b] min-h-[140px] relative cursor-pointer group"
+			className="select-none bg-[#0b0c0f] min-h-[190px] 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" />
+			<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff05_1px,transparent_1px)] bg-[length:24px_100%] pointer-events-none" />
 			<TimelineAxis videoDurationMs={videoDurationMs} currentTimeMs={currentTimeMs} />
 			<PlaybackCursor
 				currentTimeMs={currentTimeMs}
@@ -801,6 +804,10 @@ export default function TimelineEditor({
 	onSpeedDelete,
 	selectedSpeedId,
 	onSelectSpeed,
+	canCopySelectedItem = false,
+	canPasteTimelineItem = false,
+	onCopySelectedItem,
+	onPasteTimelineItem,
 	aspectRatio,
 	onAspectRatioChange,
 }: TimelineEditorProps) {
@@ -1229,7 +1236,42 @@ export default function TimelineEditor({
 
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
-			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
+			const target = e.target;
+			const isEditableTarget =
+				target instanceof HTMLInputElement ||
+				target instanceof HTMLTextAreaElement ||
+				target instanceof HTMLSelectElement ||
+				(target instanceof HTMLElement && target.isContentEditable);
+			if (isEditableTarget) {
+				return;
+			}
+
+			const mod = isMac ? e.metaKey : e.ctrlKey;
+			const key = e.key.toLowerCase();
+
+			if (
+				mod &&
+				!e.shiftKey &&
+				!e.altKey &&
+				key === "c" &&
+				canCopySelectedItem &&
+				onCopySelectedItem
+			) {
+				e.preventDefault();
+				onCopySelectedItem();
+				return;
+			}
+
+			if (
+				mod &&
+				!e.shiftKey &&
+				!e.altKey &&
+				key === "v" &&
+				canPasteTimelineItem &&
+				onPasteTimelineItem
+			) {
+				e.preventDefault();
+				onPasteTimelineItem();
 				return;
 			}
 
@@ -1321,6 +1363,10 @@ export default function TimelineEditor({
 		onSelectAnnotation,
 		keyShortcuts,
 		isMac,
+		canCopySelectedItem,
+		canPasteTimelineItem,
+		onCopySelectedItem,
+		onPasteTimelineItem,
 	]);
 
 	const clampedRange = useMemo<Range>(() => {
@@ -1448,14 +1494,14 @@ export default function TimelineEditor({
 	}
 
 	return (
-		<div className="flex-1 flex flex-col bg-[#09090b] overflow-hidden">
-			<div className="flex items-center gap-2 px-4 py-2 border-b border-white/5 bg-[#09090b]">
-				<div className="flex items-center gap-1">
+		<div className="flex-1 min-h-0 flex flex-col bg-[#09090b] overflow-hidden">
+			<div className="flex items-center gap-2 px-3 py-1.5 border-b border-white/[0.06] bg-[#08090b]/95">
+				<div className="flex items-center gap-0.5 rounded-xl border border-white/[0.06] bg-white/[0.025] p-0.5">
 					<Button
 						onClick={handleAddZoom}
 						variant="ghost"
 						size="icon"
-						className="h-7 w-7 text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
 						title={t("buttons.addZoom")}
 					>
 						<ZoomIn className="w-4 h-4" />
@@ -1464,7 +1510,7 @@ export default function TimelineEditor({
 						onClick={handleSuggestZooms}
 						variant="ghost"
 						size="icon"
-						className="h-7 w-7 text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#34B27B] hover:bg-[#34B27B]/10 transition-all"
 						title={t("buttons.suggestZooms")}
 					>
 						<WandSparkles className="w-4 h-4" />
@@ -1473,7 +1519,7 @@ export default function TimelineEditor({
 						onClick={handleAddTrim}
 						variant="ghost"
 						size="icon"
-						className="h-7 w-7 text-slate-400 hover:text-[#ef4444] hover:bg-[#ef4444]/10 transition-all"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#ef4444] hover:bg-[#ef4444]/10 transition-all"
 						title={t("buttons.addTrim")}
 					>
 						<Scissors className="w-4 h-4" />
@@ -1482,7 +1528,7 @@ export default function TimelineEditor({
 						onClick={handleAddAnnotation}
 						variant="ghost"
 						size="icon"
-						className="h-7 w-7 text-slate-400 hover:text-[#B4A046] hover:bg-[#B4A046]/10 transition-all"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#B4A046] hover:bg-[#B4A046]/10 transition-all"
 						title={t("buttons.addAnnotation")}
 					>
 						<MessageSquare className="w-4 h-4" />
@@ -1491,7 +1537,7 @@ export default function TimelineEditor({
 						onClick={handleAddBlur}
 						variant="ghost"
 						size="icon"
-						className="h-7 w-7 text-slate-400 hover:text-[#7dd3fc] hover:bg-[#7dd3fc]/10 transition-all"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#7dd3fc] hover:bg-[#7dd3fc]/10 transition-all"
 						title={t("buttons.addBlur")}
 					>
 						<svg
@@ -1510,19 +1556,19 @@ export default function TimelineEditor({
 						onClick={handleAddSpeed}
 						variant="ghost"
 						size="icon"
-						className="h-7 w-7 text-slate-400 hover:text-[#d97706] hover:bg-[#d97706]/10 transition-all"
+						className="h-7 w-7 rounded-lg text-slate-400 hover:text-[#d97706] hover:bg-[#d97706]/10 transition-all"
 						title={t("buttons.addSpeed")}
 					>
 						<Gauge className="w-4 h-4" />
 					</Button>
 				</div>
-				<div className="flex items-center gap-2">
+				<div className="flex items-center gap-1.5 min-w-0">
 					<DropdownMenu>
 						<DropdownMenuTrigger asChild>
 							<Button
 								variant="ghost"
 								size="sm"
-								className="h-7 px-2 text-xs text-slate-400 hover:text-slate-200 hover:bg-white/10 transition-all gap-1"
+								className="h-7 px-2 rounded-lg text-[11px] text-slate-400 hover:text-slate-200 hover:bg-white/[0.07] transition-all gap-1"
 							>
 								<span className="font-medium">{getAspectRatioLabel(aspectRatio)}</span>
 								<ChevronDown className="w-3 h-3" />
@@ -1541,11 +1587,9 @@ export default function TimelineEditor({
 							))}
 						</DropdownMenuContent>
 					</DropdownMenu>
-					<div className="w-[1px] h-4 bg-white/10" />
-					<TutorialHelp />
 				</div>
 				<div className="flex-1" />
-				<div className="flex items-center gap-4 text-[10px] text-slate-500 font-medium">
+				<div className="hidden md:flex items-center gap-3 text-[10px] text-slate-500 font-medium">
 					<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.pan}
@@ -1562,7 +1606,7 @@ export default function TimelineEditor({
 			</div>
 			<div
 				ref={timelineContainerRef}
-				className="flex-1 overflow-hidden bg-[#09090b] relative"
+				className="flex-1 min-h-0 overflow-auto custom-scrollbar bg-[#09090b] relative"
 				onClick={() => setSelectedKeyframeId(null)}
 			>
 				<TimelineWrapper

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

@@ -0,0 +1,85 @@
+import { describe, expect, it } from "vitest";
+import {
+	cloneAnnotationRegion,
+	getPastedAnnotationPosition,
+	spansOverlap,
+} from "./timelineClipboardUtils";
+import type { AnnotationRegion } from "./types";
+
+function createAnnotationRegion(overrides: Partial<AnnotationRegion> = {}): AnnotationRegion {
+	return {
+		id: "annotation-1",
+		startMs: 100,
+		endMs: 600,
+		type: "blur",
+		content: "",
+		position: { x: 10, y: 15 },
+		size: { width: 30, height: 20 },
+		style: {
+			color: "#fff",
+			backgroundColor: "transparent",
+			fontSize: 32,
+			fontFamily: "Inter",
+			fontWeight: "bold",
+			fontStyle: "normal",
+			textDecoration: "none",
+			textAlign: "center",
+		},
+		zIndex: 1,
+		blurData: {
+			type: "mosaic",
+			shape: "freehand",
+			color: "white",
+			intensity: 12,
+			blockSize: 8,
+			freehandPoints: [
+				{ x: 10, y: 20 },
+				{ x: 30, y: 40 },
+			],
+		},
+		...overrides,
+	};
+}
+
+describe("timelineClipboardUtils", () => {
+	it("deep clones nested annotation data", () => {
+		const original = createAnnotationRegion();
+		const cloned = cloneAnnotationRegion(original);
+
+		expect(cloned).toEqual(original);
+		expect(cloned).not.toBe(original);
+		expect(cloned.position).not.toBe(original.position);
+		expect(cloned.size).not.toBe(original.size);
+		expect(cloned.style).not.toBe(original.style);
+		expect(cloned.blurData).not.toBe(original.blurData);
+		expect(cloned.blurData?.freehandPoints).not.toBe(original.blurData?.freehandPoints);
+		expect(cloned.blurData?.freehandPoints?.[0]).not.toBe(original.blurData?.freehandPoints?.[0]);
+	});
+
+	it("detects true overlaps but not adjacent spans", () => {
+		expect(spansOverlap(100, 200, 150, 250)).toBe(true);
+		expect(spansOverlap(100, 200, 200, 300)).toBe(false);
+		expect(spansOverlap(100, 200, 0, 100)).toBe(false);
+	});
+
+	it("preserves pasted annotation positions when they are already in bounds", () => {
+		expect(getPastedAnnotationPosition({ x: 10, y: 15 }, { width: 30, height: 20 })).toEqual({
+			x: 10,
+			y: 15,
+		});
+	});
+
+	it("clamps pasted annotation positions when the source would overflow its bounds", () => {
+		expect(getPastedAnnotationPosition({ x: 94, y: 93 }, { width: 12, height: 9 })).toEqual({
+			x: 88,
+			y: 91,
+		});
+	});
+
+	it("pins oversized pasted annotations to the visible origin", () => {
+		expect(getPastedAnnotationPosition({ x: 50, y: 50 }, { width: 140, height: 120 })).toEqual({
+			x: 0,
+			y: 0,
+		});
+	});
+});

src/components/video-editor/timelineClipboardUtils.ts

@@ -0,0 +1,38 @@
+import type { AnnotationPosition, AnnotationRegion, AnnotationSize } from "./types";
+
+function clamp(value: number, min: number, max: number): number {
+	return Math.min(max, Math.max(min, value));
+}
+
+export function cloneAnnotationRegion(region: AnnotationRegion): AnnotationRegion {
+	return {
+		...region,
+		position: { ...region.position },
+		size: { ...region.size },
+		style: { ...region.style },
+		figureData: region.figureData ? { ...region.figureData } : undefined,
+		blurData: region.blurData
+			? {
+					...region.blurData,
+					freehandPoints: region.blurData.freehandPoints?.map((point) => ({ ...point })),
+				}
+			: undefined,
+	};
+}
+
+export function spansOverlap(startA: number, endA: number, startB: number, endB: number): boolean {
+	return startA < endB && endA > startB;
+}
+
+export function getPastedAnnotationPosition(
+	position: AnnotationPosition,
+	size: AnnotationSize,
+): AnnotationPosition {
+	const maxX = Math.max(0, 100 - size.width);
+	const maxY = Math.max(0, 100 - size.height);
+
+	return {
+		x: clamp(position.x, 0, maxX),
+		y: clamp(position.y, 0, maxY),
+	};
+}

src/components/video-editor/types.ts

@@ -294,7 +294,7 @@ export const DEFAULT_BLUR_FREEHAND_POINTS: Array<{ x: number; y: number }> = [
 ];
 
 export const DEFAULT_BLUR_DATA: BlurData = {
-	type: "blur",
+	type: "mosaic",
 	shape: "rectangle",
 	color: "white",
 	intensity: DEFAULT_BLUR_INTENSITY,

src/hooks/useClipboardFeedback.ts

@@ -0,0 +1,30 @@
+import { useCallback } from "react";
+import { toast } from "sonner";
+import { useScopedT } from "@/contexts/I18nContext";
+
+export type ClipboardAction = "copy" | "paste";
+
+export function useClipboardFeedback() {
+	const t = useScopedT("timeline");
+
+	const notifyClipboardAction = useCallback(
+		(action: ClipboardAction) => {
+			toast.success(action === "copy" ? t("feedback.copied") : t("feedback.pasted"));
+		},
+		[t],
+	);
+
+	const notifyCopied = useCallback(() => {
+		notifyClipboardAction("copy");
+	}, [notifyClipboardAction]);
+
+	const notifyPasted = useCallback(() => {
+		notifyClipboardAction("paste");
+	}, [notifyClipboardAction]);
+
+	return {
+		notifyClipboardAction,
+		notifyCopied,
+		notifyPasted,
+	};
+}

src/i18n/__tests__/tutorialHelpTranslations.test.ts

@@ -1,14 +1,10 @@
 import { describe, expect, it } from "vitest";
 import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
-import arDialogs from "@/i18n/locales/ar/dialogs.json";
 import enDialogs from "@/i18n/locales/en/dialogs.json";
 import esDialogs from "@/i18n/locales/es/dialogs.json";
 import frDialogs from "@/i18n/locales/fr/dialogs.json";
-import jaJPDialogs from "@/i18n/locales/ja-JP/dialogs.json";
 import koKRDialogs from "@/i18n/locales/ko-KR/dialogs.json";
-import ruDialogs from "@/i18n/locales/ru/dialogs.json";
 import trDialogs from "@/i18n/locales/tr/dialogs.json";
-import viDialogs from "@/i18n/locales/vi/dialogs.json";
 import zhCNDialogs from "@/i18n/locales/zh-CN/dialogs.json";
 import zhTWDialogs from "@/i18n/locales/zh-TW/dialogs.json";
 
@@ -45,10 +41,6 @@ const dialogsByLocale = {
 	fr: frDialogs,
 	tr: trDialogs,
 	"ko-KR": koKRDialogs,
-	ru: ruDialogs,
-	"ja-JP": jaJPDialogs,
-	ar: arDialogs,
-	vi: viDialogs,
 } satisfies Record<Locale, { tutorial: Record<string, unknown> }>;
 
 describe("TutorialHelp translations", () => {

src/i18n/config.ts

@@ -1,17 +1,5 @@
 export const DEFAULT_LOCALE = "en" as const;
-export const SUPPORTED_LOCALES = [
-	"en",
-	"zh-CN",
-	"zh-TW",
-	"es",
-	"fr",
-	"tr",
-	"ko-KR",
-	"ja-JP",
-	"ar",
-	"ru",
-	"vi",
-] as const;
+export const SUPPORTED_LOCALES = ["en", "zh-CN", "zh-TW", "es", "fr", "tr", "ko-KR"] as const;
 export const I18N_NAMESPACES = [
 	"common",
 	"dialogs",

src/i18n/locales/ar/timeline.json

@@ -51,5 +51,9 @@
 	"success": {
 		"addedZoomSuggestions": "تمت إضافة {{count}} اقتراح تكبير بناءً على المؤشر",
 		"addedZoomSuggestionsPlural": "تمت إضافة {{count}} اقتراحات تكبير بناءً على المؤشر"
+	},
+	"feedback": {
+		"copied": "تم النسخ!",
+		"pasted": "تم اللصق!"
 	}
 }

src/i18n/locales/en/common.json

@@ -9,33 +9,12 @@
 		"open": "Open",
 		"upload": "Upload",
 		"export": "Export",
-		"showInFolder": "Show in Folder",
 		"file": "File",
 		"edit": "Edit",
 		"view": "View",
 		"window": "Window",
 		"quit": "Quit",
-		"stopRecording": "Stop Recording",
-		"undo": "Undo",
-		"redo": "Redo",
-		"cut": "Cut",
-		"copy": "Copy",
-		"paste": "Paste",
-		"selectAll": "Select All",
-		"minimize": "Minimize",
-		"reload": "Reload",
-		"forceReload": "Force Reload",
-		"toggleDevTools": "Toggle Developer Tools",
-		"actualSize": "Actual Size",
-		"zoomIn": "Zoom In",
-		"zoomOut": "Zoom Out",
-		"toggleFullScreen": "Toggle Full Screen",
-		"recordingStatus": "Recording: {{source}}",
-		"about": "About OpenScreen",
-		"services": "Services",
-		"hide": "Hide OpenScreen",
-		"hideOthers": "Hide Others",
-		"unhide": "Show All"
+		"stopRecording": "Stop Recording"
 	},
 	"playback": {
 		"play": "Play",

src/i18n/locales/en/editor.json

@@ -5,7 +5,6 @@
 		"cancel": "Cancel",
 		"confirm": "Confirm"
 	},
-	"loadingVideo": "Loading video...",
 	"errors": {
 		"noVideoLoaded": "No video loaded",
 		"videoNotReady": "Video not ready",
@@ -15,7 +14,6 @@
 		"failedToSaveVideo": "Failed to save video",
 		"exportFailed": "Export failed",
 		"exportFailedWithError": "Export failed: {{error}}",
-		"exportBackgroundLoadFailed": "Export failed: could not load background image ({{url}})",
 		"failedToSaveExport": "Failed to save export",
 		"failedToSaveExportedVideo": "Failed to save exported video",
 		"failedToRevealInFolder": "Error revealing in folder: {{error}}"

src/i18n/locales/en/settings.json

@@ -1,7 +1,6 @@
 {
 	"zoom": {
 		"level": "Zoom Level",
-		"customScale": "Custom Zoom",
 		"selectRegion": "Select a zoom region to adjust",
 		"deleteZoom": "Delete Zoom",
 		"focusMode": {
@@ -10,19 +9,12 @@
 			"auto": "Auto",
 			"autoDescription": "Camera follows the recorded cursor position"
 		},
-		"threeD": {
-			"title": "3D Rotation",
-			"preset": {
-				"iso": "Iso",
-				"left": "Left",
-				"right": "Right"
-			}
-		},
-		"position": {
-			"title": "Focus Position",
-			"x": "X (%)",
-			"y": "Y (%)",
-			"hint": "0 = leftmost / topmost, 100 = rightmost / bottommost"
+		"speed": {
+			"title": "Zoom Speed",
+			"instant": "Instant",
+			"fast": "Fast",
+			"smooth": "Smooth",
+			"lazy": "Lazy"
 		}
 	},
 	"speed": {
@@ -42,7 +34,6 @@
 		"pictureInPicture": "Picture in Picture",
 		"verticalStack": "Vertical Stack",
 		"dualFrame": "Dual Frame",
-		"noWebcam": "No Webcam",
 		"webcamShape": "Camera Shape",
 		"webcamSize": "Webcam Size"
 	},
@@ -51,23 +42,9 @@
 		"blurBg": "Blur BG",
 		"motionBlur": "Motion Blur",
 		"off": "off",
-		"on": "on",
 		"shadow": "Shadow",
 		"roundness": "Roundness",
-		"padding": "Padding",
-		"cursorHighlight": {
-			"title": "Cursor highlight",
-			"style": "Style",
-			"dot": "Dot",
-			"ring": "Ring",
-			"size": "Size",
-			"onlyOnClicks": "Only on clicks",
-			"color": "Color",
-			"offsetX": "Offset X (window recordings)",
-			"offsetY": "Offset Y",
-			"accessibilityPermissionTitle": "Accessibility permission needed",
-			"accessibilityPermissionDescription": "Open System Settings → Privacy & Security → Accessibility, enable Openscreen, then restart the app."
-		}
+		"padding": "Padding"
 	},
 	"background": {
 		"title": "Background",
@@ -75,9 +52,7 @@
 		"color": "Color",
 		"gradient": "Gradient",
 		"uploadCustom": "Upload Custom",
-		"gradientLabel": "Gradient {{index}}",
-		"colorWheel": "Color Wheel",
-		"colorPalette": "Color Palette"
+		"gradientLabel": "Gradient {{index}}"
 	},
 	"crop": {
 		"title": "Crop",
@@ -145,8 +120,6 @@
 		"background": "Background",
 		"none": "None",
 		"color": "Color",
-		"colorWheel": "Color Wheel",
-		"colorPalette": "Color Palette",
 		"clearBackground": "Clear Background",
 		"uploadImage": "Upload Image",
 		"supportedFormats": "Supported formats: JPG, PNG, GIF, WebP",

src/i18n/locales/en/timeline.json

@@ -17,8 +17,6 @@
 	"labels": {
 		"pan": "Pan",
 		"zoom": "Zoom",
-		"trim": "Trim",
-		"speed": "Speed",
 		"zoomItem": "Zoom {{index}}",
 		"trimItem": "Trim {{index}}",
 		"speedItem": "Speed {{index}}",
@@ -51,5 +49,9 @@
 	"success": {
 		"addedZoomSuggestions": "Added {{count}} cursor-based zoom suggestion",
 		"addedZoomSuggestionsPlural": "Added {{count}} cursor-based zoom suggestions"
+	},
+	"feedback": {
+		"copied": "Copied!",
+		"pasted": "Pasted!"
 	}
 }

src/i18n/locales/es/common.json

@@ -9,7 +9,6 @@
 		"open": "Abrir",
 		"upload": "Subir",
 		"export": "Exportar",
-		"showInFolder": "Mostrar en carpeta",
 		"file": "Archivo",
 		"edit": "Editar",
 		"view": "Vista",

src/i18n/locales/es/editor.json

@@ -8,7 +8,6 @@
 		"failedToSaveVideo": "Error al guardar el video",
 		"exportFailed": "La exportación falló",
 		"exportFailedWithError": "La exportación falló: {{error}}",
-		"exportBackgroundLoadFailed": "La exportación falló: no se pudo cargar la imagen de fondo ({{url}})",
 		"failedToSaveExport": "Error al guardar la exportación",
 		"failedToSaveExportedVideo": "Error al guardar el video exportado",
 		"failedToRevealInFolder": "Error al mostrar en la carpeta: {{error}}"
@@ -34,12 +33,5 @@
 		"cameraDisconnected": "Cámara web desconectada.",
 		"cameraNotFound": "Cámara no encontrada.",
 		"permissionDenied": "Permiso de grabación denegado. Por favor permite la grabación de pantalla."
-	},
-	"loadingVideo": "Cargando video...",
-	"newRecording": {
-		"title": "Volver a la grabadora",
-		"description": "Tu sesión actual ha sido guardada.",
-		"cancel": "Cancelar",
-		"confirm": "Confirmar"
 	}
 }

src/i18n/locales/es/settings.json

@@ -9,13 +9,12 @@
 			"auto": "Auto",
 			"autoDescription": "La cámara sigue la posición del cursor grabado"
 		},
-		"threeD": {
-			"title": "Rotación 3D",
-			"preset": {
-				"iso": "Iso",
-				"left": "Izquierda",
-				"right": "Derecha"
-			}
+		"speed": {
+			"title": "Velocidad de zoom",
+			"instant": "Instantáneo",
+			"fast": "Rápido",
+			"smooth": "Suave",
+			"lazy": "Lento"
 		}
 	},
 	"speed": {
@@ -53,9 +52,7 @@
 		"color": "Color",
 		"gradient": "Degradado",
 		"uploadCustom": "Subir personalizado",
-		"gradientLabel": "Degradado {{index}}",
-		"colorWheel": "Rueda de colores",
-		"colorPalette": "Paleta de colores"
+		"gradientLabel": "Degradado {{index}}"
 	},
 	"crop": {
 		"title": "Recortar",
@@ -123,8 +120,6 @@
 		"background": "Fondo",
 		"none": "Ninguno",
 		"color": "Color",
-		"colorWheel": "Rueda de colores",
-		"colorPalette": "Paleta de colores",
 		"clearBackground": "Quitar fondo",
 		"uploadImage": "Subir imagen",
 		"supportedFormats": "Formatos compatibles: JPG, PNG, GIF, WebP",

src/i18n/locales/es/timeline.json

@@ -17,8 +17,6 @@
 	"labels": {
 		"pan": "Desplazar",
 		"zoom": "Zoom",
-		"trim": "Recortar",
-		"speed": "Velocidad",
 		"zoomItem": "Zoom {{index}}",
 		"trimItem": "Recorte {{index}}",
 		"speedItem": "Velocidad {{index}}",
@@ -51,5 +49,9 @@
 	"success": {
 		"addedZoomSuggestions": "Se agregó {{count}} sugerencia de zoom basada en el cursor",
 		"addedZoomSuggestionsPlural": "Se agregaron {{count}} sugerencias de zoom basadas en el cursor"
+	},
+	"feedback": {
+		"copied": "¡Copiado!",
+		"pasted": "¡Pegado!"
 	}
 }

src/i18n/locales/fr/common.json

@@ -9,7 +9,6 @@
 		"open": "Ouvrir",
 		"upload": "Téléverser",
 		"export": "Exporter",
-		"showInFolder": "Afficher dans le dossier",
 		"file": "Fichier",
 		"edit": "Éditer",
 		"view": "Affichage",

src/i18n/locales/fr/dialogs.json

@@ -29,7 +29,7 @@
 		"description": "Comprendre comment supprimer les parties indésirables de votre vidéo.",
 		"explanationBefore": "L'outil Coupe fonctionne en définissant les segments que vous souhaitez",
 		"remove": "supprimer",
-		"explanationMiddle": " — tout ce qui est",
+		"explanationMiddle": " — tout élément",
 		"covered": "couvert",
 		"explanationAfter": "par un segment de coupe rouge sera coupé lors de l'export.",
 		"visualExample": "Exemple visuel",

src/i18n/locales/fr/editor.json

@@ -1,10 +1,4 @@
 {
-	"newRecording": {
-		"title": "Retour à l'enregistreur",
-		"description": "Votre session actuelle a été enregistrée.",
-		"cancel": "Annuler",
-		"confirm": "Confirmer"
-	},
 	"errors": {
 		"noVideoLoaded": "Aucune vidéo chargée",
 		"videoNotReady": "Vidéo non prête",
@@ -14,7 +8,6 @@
 		"failedToSaveVideo": "Échec de l'enregistrement de la vidéo",
 		"exportFailed": "L'export a échoué",
 		"exportFailedWithError": "L'export a échoué : {{error}}",
-		"exportBackgroundLoadFailed": "L'export a échoué : impossible de charger l'image d'arrière-plan ({{url}})",
 		"failedToSaveExport": "Échec de l'enregistrement de l'export",
 		"failedToSaveExportedVideo": "Échec de l'enregistrement de la vidéo exportée",
 		"failedToRevealInFolder": "Erreur lors de l'affichage dans le dossier : {{error}}"
@@ -37,9 +30,6 @@
 		"systemAudioUnavailable": "Audio système non disponible. Enregistrement sans audio système.",
 		"microphoneDenied": "Accès au microphone refusé. L'enregistrement continuera sans audio.",
 		"cameraDenied": "Accès à la caméra refusé. L'enregistrement continuera sans webcam.",
-		"cameraDisconnected": "Webcam déconnectée.",
-		"cameraNotFound": "Caméra introuvable.",
 		"permissionDenied": "Permission d'enregistrement refusée. Veuillez autoriser l'enregistrement d'écran."
-	},
-	"loadingVideo": "Chargement de la vidéo..."
+	}
 }

src/i18n/locales/fr/launch.json

@@ -33,11 +33,5 @@
 	"recording": {
 		"selectSource": "Veuillez sélectionner une source à enregistrer"
 	},
-	"language": "Langue",
-	"systemLanguagePrompt": {
-		"title": "Utiliser la langue de votre système ?",
-		"description": "Nous avons détecté {{language}} comme langue système. Voulez-vous passer OpenScreen en {{language}} ?",
-		"switch": "Passer en {{language}}",
-		"keepDefault": "Conserver la langue actuelle"
-	}
+	"language": "Langue"
 }

src/i18n/locales/fr/settings.json

@@ -8,29 +8,12 @@
 			"manual": "Manuel",
 			"auto": "Auto",
 			"autoDescription": "La caméra suit la position du curseur enregistré"
-		},
-		"speed": {
-			"title": "Vitesse du zoom",
-			"instant": "Instantané",
-			"fast": "Rapide",
-			"smooth": "Fluide",
-			"lazy": "Lent"
-		},
-		"threeD": {
-			"title": "Rotation 3D",
-			"preset": {
-				"iso": "Iso",
-				"left": "Gauche",
-				"right": "Droite"
-			}
 		}
 	},
 	"speed": {
 		"playbackSpeed": "Vitesse de lecture",
 		"selectRegion": "Sélectionnez une région de vitesse à ajuster",
-		"deleteRegion": "Supprimer la région de vitesse",
-		"customPlaybackSpeed": "Vitesse de lecture personnalisée",
-		"maxSpeedError": "La vitesse ne peut pas dépasser 16×"
+		"deleteRegion": "Supprimer la région de vitesse"
 	},
 	"trim": {
 		"deleteRegion": "Supprimer la région de coupe"
@@ -41,9 +24,7 @@
 		"selectPreset": "Choisir un préréglage",
 		"pictureInPicture": "Incrustation d'image",
 		"verticalStack": "Empilement vertical",
-		"dualFrame": "Double cadre",
-		"webcamShape": "Forme de la caméra",
-		"webcamSize": "Taille de la caméra"
+		"webcamShape": "Forme de la caméra"
 	},
 	"effects": {
 		"title": "Effets vidéo",
@@ -60,9 +41,7 @@
 		"color": "Couleur",
 		"gradient": "Dégradé",
 		"uploadCustom": "Téléverser une image",
-		"gradientLabel": "Dégradé {{index}}",
-		"colorWheel": "Roue chromatique",
-		"colorPalette": "Palette de couleurs"
+		"gradientLabel": "Dégradé {{index}}"
 	},
 	"crop": {
 		"title": "Recadrage",
@@ -130,8 +109,6 @@
 		"background": "Arrière-plan",
 		"none": "Aucun",
 		"color": "Couleur",
-		"colorWheel": "Roue chromatique",
-		"colorPalette": "Palette de couleurs",
 		"clearBackground": "Supprimer l'arrière-plan",
 		"uploadImage": "Téléverser une image",
 		"supportedFormats": "Formats supportés : JPG, PNG, GIF, WebP",

src/i18n/locales/fr/timeline.json

@@ -17,8 +17,6 @@
 	"labels": {
 		"pan": "Panoramique",
 		"zoom": "Zoom",
-		"trim": "Couper",
-		"speed": "Vitesse",
 		"zoomItem": "Zoom {{index}}",
 		"trimItem": "Coupe {{index}}",
 		"speedItem": "Vitesse {{index}}",
@@ -33,23 +31,27 @@
 	},
 	"errors": {
 		"cannotPlaceZoom": "Impossible de placer le zoom ici",
-		"zoomExistsAtLocation": "Un zoom existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant.",
+		"zoomExistsAtLocation": "Un zoom existe déjà à cet emplacement ou l'espace disponible est insuffisant.",
 		"zoomSuggestionUnavailable": "Gestionnaire de suggestions de zoom non disponible",
 		"noCursorTelemetry": "Aucune télémétrie de curseur disponible",
-		"noCursorTelemetryDescription": "Enregistrez d\u0027abord un screencast pour générer des suggestions basées sur le curseur.",
+		"noCursorTelemetryDescription": "Enregistrez d'abord un screencast pour générer des suggestions basées sur le curseur.",
 		"noUsableTelemetry": "Aucune télémétrie de curseur utilisable",
-		"noUsableTelemetryDescription": "L\u0027enregistrement ne contient pas suffisamment de données de mouvement du curseur.",
+		"noUsableTelemetryDescription": "L'enregistrement ne contient pas suffisamment de données de mouvement du curseur.",
 		"noDwellMoments": "Aucun moment de pause du curseur trouvé",
 		"noDwellMomentsDescription": "Essayez un enregistrement avec des pauses plus lentes du curseur sur les actions importantes.",
 		"noAutoZoomSlots": "Aucun emplacement de zoom automatique disponible",
 		"noAutoZoomSlotsDescription": "Les points de pause détectés chevauchent des régions de zoom existantes.",
 		"cannotPlaceTrim": "Impossible de placer la coupe ici",
-		"trimExistsAtLocation": "Une coupe existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant.",
+		"trimExistsAtLocation": "Une coupe existe déjà à cet emplacement ou l'espace disponible est insuffisant.",
 		"cannotPlaceSpeed": "Impossible de placer la vitesse ici",
-		"speedExistsAtLocation": "Une région de vitesse existe déjà à cet emplacement ou l\u0027espace disponible est insuffisant."
+		"speedExistsAtLocation": "Une région de vitesse existe déjà à cet emplacement ou l'espace disponible est insuffisant."
 	},
 	"success": {
 		"addedZoomSuggestions": "{{count}} suggestion de zoom basée sur le curseur ajoutée",
 		"addedZoomSuggestionsPlural": "{{count}} suggestions de zoom basées sur le curseur ajoutées"
+	},
+	"feedback": {
+		"copied": "Copié !",
+		"pasted": "Collé !"
 	}
 }

src/i18n/locales/ja-JP/timeline.json

@@ -51,5 +51,9 @@
 	"success": {
 		"addedZoomSuggestions": "カーソルに基づくズーム提案を {{count}} 件追加しました",
 		"addedZoomSuggestionsPlural": "カーソルに基づくズーム提案を {{count}} 件追加しました"
+	},
+	"feedback": {
+		"copied": "コピーしました!",
+		"pasted": "貼り付けました!"
 	}
 }

src/i18n/locales/ko-KR/common.json

@@ -9,7 +9,6 @@
 		"open": "열기",
 		"upload": "업로드",
 		"export": "내보내기",
-		"showInFolder": "폴더에 표시",
 		"file": "파일",
 		"edit": "편집",
 		"view": "보기",

src/i18n/locales/ko-KR/editor.json

@@ -5,7 +5,6 @@
 		"cancel": "취소",
 		"confirm": "확인"
 	},
-	"loadingVideo": "비디오 로드 중...",
 	"errors": {
 		"noVideoLoaded": "불러온 비디오가 없습니다",
 		"videoNotReady": "비디오가 준비되지 않았습니다",
@@ -15,7 +14,6 @@
 		"failedToSaveVideo": "비디오 저장에 실패했습니다",
 		"exportFailed": "내보내기에 실패했습니다",
 		"exportFailedWithError": "내보내기 실패: {{error}}",
-		"exportBackgroundLoadFailed": "내보내기 실패: 배경 이미지를 불러올 수 없습니다 ({{url}})",
 		"failedToSaveExport": "내보낸 파일 저장에 실패했습니다",
 		"failedToSaveExportedVideo": "내보낸 비디오 저장에 실패했습니다",
 		"failedToRevealInFolder": "폴더에서 파일 표시 오류: {{error}}"
@@ -38,8 +36,6 @@
 		"systemAudioUnavailable": "시스템 오디오를 사용할 수 없습니다. 시스템 오디오 없이 녹화합니다.",
 		"microphoneDenied": "마이크 접근이 거부되었습니다. 오디오 없이 녹화를 계속합니다.",
 		"cameraDenied": "카메라 접근이 거부되었습니다. 웹캠 없이 녹화를 계속합니다.",
-		"permissionDenied": "녹화 권한이 거부되었습니다. 화면 녹화를 허용해 주세요.",
-		"cameraDisconnected": "웹캠 연결이 끊어졌습니다.",
-		"cameraNotFound": "카메라를 찾을 수 없습니다."
+		"permissionDenied": "녹화 권한이 거부되었습니다. 화면 녹화를 허용해 주세요."
 	}
 }

src/i18n/locales/ko-KR/launch.json

@@ -33,11 +33,5 @@
 	"recording": {
 		"selectSource": "녹화할 소스를 선택해 주세요"
 	},
-	"language": "언어",
-	"systemLanguagePrompt": {
-		"title": "시스템 언어를 사용하시겠습니까?",
-		"description": "시스템 언어가 {{language}}(으)로 감지되었습니다. OpenScreen을 {{language}}(으)로 전환하시겠습니까?",
-		"switch": "{{language}}(으)로 전환",
-		"keepDefault": "현재 언어 유지"
-	}
+	"language": "언어"
 }

src/i18n/locales/ko-KR/settings.json

@@ -8,14 +8,6 @@
 			"manual": "수동",
 			"auto": "자동",
 			"autoDescription": "녹화된 커서 위치를 따라 카메라가 이동합니다"
-		},
-		"threeD": {
-			"title": "3D 회전",
-			"preset": {
-				"iso": "Iso",
-				"left": "왼쪽",
-				"right": "오른쪽"
-			}
 		}
 	},
 	"speed": {
@@ -35,8 +27,7 @@
 		"pictureInPicture": "화면 속 화면",
 		"verticalStack": "세로 배치",
 		"webcamShape": "카메라 모양",
-		"webcamSize": "웹캠 크기",
-		"dualFrame": "듀얼 프레임"
+		"webcamSize": "웹캠 크기"
 	},
 	"effects": {
 		"title": "비디오 효과",
@@ -53,9 +44,7 @@
 		"color": "색상",
 		"gradient": "그라디언트",
 		"uploadCustom": "직접 업로드",
-		"gradientLabel": "그라디언트 {{index}}",
-		"colorWheel": "색상 휠",
-		"colorPalette": "색상 팔레트"
+		"gradientLabel": "그라디언트 {{index}}"
 	},
 	"crop": {
 		"title": "자르기",
@@ -122,8 +111,6 @@
 		"background": "배경",
 		"none": "없음",
 		"color": "색상",
-		"colorWheel": "색상 휠",
-		"colorPalette": "색상 팔레트",
 		"clearBackground": "배경 지우기",
 		"uploadImage": "이미지 업로드",
 		"supportedFormats": "지원 형식: JPG, PNG, GIF, WebP",
@@ -138,20 +125,7 @@
 		"invalidImageType": "지원하지 않는 파일 형식입니다",
 		"imageFormatsOnly": "JPG, PNG, GIF 또는 WebP 이미지 파일을 업로드해 주세요.",
 		"imageUploadSuccess": "이미지가 성공적으로 업로드되었습니다!",
-		"failedImageUpload": "이미지 업로드에 실패했습니다",
-		"blurColor": "블러 색상",
-		"blurColorBlack": "검정",
-		"blurColorWhite": "흰색",
-		"blurIntensity": "블러 강도",
-		"blurShape": "블러 모양",
-		"blurShapeFreehand": "자유 곡선",
-		"blurShapeOval": "타원",
-		"blurShapeRectangle": "사각형",
-		"blurType": "블러 종류",
-		"blurTypeBlur": "블러",
-		"blurTypeMosaic": "모자이크 블러",
-		"mosaicBlockSize": "모자이크 블록 크기",
-		"typeBlur": "블러"
+		"failedImageUpload": "이미지 업로드에 실패했습니다"
 	},
 	"fontStyles": {
 		"classic": "클래식",

src/i18n/locales/ko-KR/shortcuts.json

@@ -20,8 +20,7 @@
 		"addAnnotation": "주석 추가",
 		"addKeyframe": "키프레임 추가",
 		"deleteSelected": "선택 항목 삭제",
-		"playPause": "재생 / 일시정지",
-		"addBlur": "블러 추가"
+		"playPause": "재생 / 일시정지"
 	},
 	"fixedActions": {
 		"undo": "실행 취소",

src/i18n/locales/ko-KR/timeline.json

@@ -4,28 +4,23 @@
 		"suggestZooms": "커서 기반 줌 제안",
 		"addTrim": "트림 추가 (T)",
 		"addAnnotation": "주석 추가 (A)",
-		"addSpeed": "속도 추가 (S)",
-		"addBlur": "블러 추가 (B)"
+		"addSpeed": "속도 추가 (S)"
 	},
 	"hints": {
 		"pressZoom": "Z를 눌러 줌 추가",
 		"pressTrim": "T를 눌러 트림 추가",
 		"pressAnnotation": "A를 눌러 주석 추가",
-		"pressSpeed": "S를 눌러 속도 추가",
-		"pressBlur": "B 키를 눌러 블러 영역을 추가하세요"
+		"pressSpeed": "S를 눌러 속도 추가"
 	},
 	"labels": {
 		"pan": "이동",
 		"zoom": "줌",
-		"trim": "트림",
-		"speed": "속도",
 		"zoomItem": "줌 {{index}}",
 		"trimItem": "트림 {{index}}",
 		"speedItem": "속도 {{index}}",
 		"annotationItem": "주석",
 		"imageItem": "이미지",
-		"emptyText": "빈 텍스트",
-		"blurItem": "블러 {{index}}"
+		"emptyText": "빈 텍스트"
 	},
 	"emptyState": {
 		"noVideo": "불러온 비디오 없음",
@@ -51,5 +46,9 @@
 	"success": {
 		"addedZoomSuggestions": "커서 기반 줌 제안 {{count}}개가 추가되었습니다",
 		"addedZoomSuggestionsPlural": "커서 기반 줌 제안 {{count}}개가 추가되었습니다"
+	},
+	"feedback": {
+		"copied": "복사됨!",
+		"pasted": "붙여넣음!"
 	}
 }

src/i18n/locales/ru/timeline.json

@@ -51,5 +51,9 @@
 	"success": {
 		"addedZoomSuggestions": "Добавлено {{count}} предложение масштабирования на основе курсора",
 		"addedZoomSuggestionsPlural": "Добавлено {{count}} предложений масштабирования на основе курсора"
+	},
+	"feedback": {
+		"copied": "Скопировано!",
+		"pasted": "Вставлено!"
 	}
 }

src/i18n/locales/tr/common.json

@@ -9,7 +9,6 @@
 		"open": "Aç",
 		"upload": "Yükle",
 		"export": "Dışa Aktar",
-		"showInFolder": "Klasörde Göster",
 		"file": "Dosya",
 		"edit": "Düzenle",
 		"view": "Görünüm",

src/i18n/locales/tr/editor.json

@@ -8,7 +8,6 @@
 		"failedToSaveVideo": "Video kaydedilemedi",
 		"exportFailed": "Dışa aktarım başarısız oldu",
 		"exportFailedWithError": "Dışa aktarım başarısız: {{error}}",
-		"exportBackgroundLoadFailed": "Dışa aktarım başarısız: arka plan görüntüsü yüklenemedi ({{url}})",
 		"failedToSaveExport": "Dışa aktarım kaydedilemedi",
 		"failedToSaveExportedVideo": "Dışa aktarılan video kaydedilemedi",
 		"failedToRevealInFolder": "Klasörde gösterme hatası: {{error}}"
@@ -31,15 +30,6 @@
 		"systemAudioUnavailable": "Sistem sesi kullanılamıyor. Sistem sesi olmadan kaydediliyor.",
 		"microphoneDenied": "Mikrofon erişimi reddedildi. Kayıt ses olmadan devam edecek.",
 		"cameraDenied": "Kamera erişimi reddedildi. Kayıt kamera olmadan devam edecek.",
-		"permissionDenied": "Kayıt izni reddedildi. Lütfen ekran kaydına izin verin.",
-		"cameraDisconnected": "Webcam bağlantısı kesildi.",
-		"cameraNotFound": "Kamera bulunamadı."
-	},
-	"loadingVideo": "Video yükleniyor...",
-	"newRecording": {
-		"title": "Kaydediciye Dön",
-		"description": "Mevcut oturumunuz kaydedildi.",
-		"cancel": "İptal",
-		"confirm": "Onayla"
+		"permissionDenied": "Kayıt izni reddedildi. Lütfen ekran kaydına izin verin."
 	}
 }

src/i18n/locales/tr/launch.json

@@ -44,11 +44,5 @@
 	"recording": {
 		"selectSource": "Lütfen kayıt için bir kaynak seçin"
 	},
-	"language": "Dil",
-	"systemLanguagePrompt": {
-		"title": "Sistem dilinizi kullanmak ister misiniz?",
-		"description": "Sistem diliniz {{language}} olarak algılandı. OpenScreen i {{language}} diline geçirmek ister misiniz?",
-		"switch": "{{language}} diline geç",
-		"keepDefault": "Mevcut dili koru"
-	}
+	"language": "Dil"
 }

src/i18n/locales/tr/settings.json

@@ -8,22 +8,12 @@
 			"manual": "Manuel",
 			"auto": "Otomatik",
 			"autoDescription": "Kamera kaydedilen imleç konumunu takip eder"
-		},
-		"threeD": {
-			"title": "3D Döndürme",
-			"preset": {
-				"iso": "Iso",
-				"left": "Sol",
-				"right": "Sağ"
-			}
 		}
 	},
 	"speed": {
 		"playbackSpeed": "Oynatma Hızı",
 		"selectRegion": "Ayarlamak için bir hız bölgesi seçin",
-		"deleteRegion": "Hız Bölgesini Sil",
-		"customPlaybackSpeed": "Özel Oynatma Hızı",
-		"maxSpeedError": "Hız 16× değerinden yüksek olamaz"
+		"deleteRegion": "Hız Bölgesini Sil"
 	},
 	"trim": {
 		"deleteRegion": "Kırpma Bölgesini Sil"
@@ -34,9 +24,7 @@
 		"selectPreset": "Ön ayar seçin",
 		"pictureInPicture": "Resim İçinde Resim",
 		"verticalStack": "Dikey Yığın",
-		"webcamShape": "Kamera Şekli",
-		"dualFrame": "Çift Kare",
-		"webcamSize": "Webcam Boyutu"
+		"webcamShape": "Kamera Şekli"
 	},
 	"effects": {
 		"title": "Video Efektleri",
@@ -53,9 +41,7 @@
 		"color": "Renk",
 		"gradient": "Gradyan",
 		"uploadCustom": "Özel Yükle",
-		"gradientLabel": "Gradyan {{index}}",
-		"colorWheel": "Renk çarkı",
-		"colorPalette": "Renk paleti"
+		"gradientLabel": "Gradyan {{index}}"
 	},
 	"crop": {
 		"title": "Kırpma",
@@ -123,8 +109,6 @@
 		"background": "Arka Plan",
 		"none": "Yok",
 		"color": "Renk",
-		"colorWheel": "Renk çarkı",
-		"colorPalette": "Renk paleti",
 		"clearBackground": "Arka Planı Temizle",
 		"uploadImage": "Görüntü Yükle",
 		"supportedFormats": "Desteklenen biçimler: JPG, PNG, GIF, WebP",
@@ -144,14 +128,7 @@
 		"invalidImageType": "Geçersiz dosya türü",
 		"imageFormatsOnly": "Lütfen bir JPG, PNG, GIF veya WebP görüntü dosyası yükleyin.",
 		"imageUploadSuccess": "Görüntü başarıyla yüklendi!",
-		"failedImageUpload": "Görüntü yüklenemedi",
-		"blurColor": "Bulanıklık Rengi",
-		"blurColorBlack": "Siyah",
-		"blurColorWhite": "Beyaz",
-		"blurType": "Bulanıklık Türü",
-		"blurTypeBlur": "Bulanık",
-		"blurTypeMosaic": "Mozaik Bulanıklık",
-		"mosaicBlockSize": "Mozaik Blok Boyutu"
+		"failedImageUpload": "Görüntü yüklenemedi"
 	},
 	"fontStyles": {
 		"classic": "Klasik",

src/i18n/locales/tr/timeline.json

@@ -17,8 +17,6 @@
 	"labels": {
 		"pan": "Kaydır",
 		"zoom": "Yakınlaştır",
-		"trim": "Kırp",
-		"speed": "Hız",
 		"zoomItem": "Yakınlaştırma {{index}}",
 		"trimItem": "Kırpma {{index}}",
 		"speedItem": "Hız {{index}}",
@@ -51,5 +49,9 @@
 	"success": {
 		"addedZoomSuggestions": "{{count}} imleç tabanlı yakınlaştırma önerisi eklendi",
 		"addedZoomSuggestionsPlural": "{{count}} imleç tabanlı yakınlaştırma önerisi eklendi"
+	},
+	"feedback": {
+		"copied": "Kopyalandı!",
+		"pasted": "Yapıştırıldı!"
 	}
 }

src/i18n/locales/vi/timeline.json

@@ -51,5 +51,9 @@
 	"success": {
 		"addedZoomSuggestions": "Đã thêm {{count}} đề xuất thu phóng dựa trên con trỏ",
 		"addedZoomSuggestionsPlural": "Đã thêm {{count}} đề xuất thu phóng dựa trên con trỏ"
+	},
+	"feedback": {
+		"copied": "Đã sao chép!",
+		"pasted": "Đã dán!"
 	}
 }

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

@@ -9,7 +9,6 @@
 		"open": "打开",
 		"upload": "上传",
 		"export": "导出",
-		"showInFolder": "在文件夹中显示",
 		"file": "文件",
 		"edit": "编辑",
 		"view": "视图",

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

@@ -5,7 +5,6 @@
 		"cancel": "取消",
 		"confirm": "确认"
 	},
-	"loadingVideo": "正在加载视频...",
 	"errors": {
 		"noVideoLoaded": "未加载视频",
 		"videoNotReady": "视频未就绪",
@@ -15,7 +14,6 @@
 		"failedToSaveVideo": "保存视频失败",
 		"exportFailed": "导出失败",
 		"exportFailedWithError": "导出失败：{{error}}",
-		"exportBackgroundLoadFailed": "导出失败：无法加载背景图片（{{url}}）",
 		"failedToSaveExport": "保存导出文件失败",
 		"failedToSaveExportedVideo": "保存导出的视频失败",
 		"failedToRevealInFolder": "在文件夹中显示时出错：{{error}}"

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

@@ -9,13 +9,12 @@
 			"auto": "自动",
 			"autoDescription": "摄像头跟随录制时的光标位置"
 		},
-		"threeD": {
-			"title": "3D 旋转",
-			"preset": {
-				"iso": "Iso",
-				"left": "左",
-				"right": "右"
-			}
+		"speed": {
+			"title": "缩放速度",
+			"instant": "即时",
+			"fast": "快速",
+			"smooth": "平滑",
+			"lazy": "缓慢"
 		}
 	},
 	"speed": {
@@ -53,9 +52,7 @@
 		"color": "颜色",
 		"gradient": "渐变",
 		"uploadCustom": "上传自定义",
-		"gradientLabel": "渐变 {{index}}",
-		"colorWheel": "颜色轮",
-		"colorPalette": "颜色调色板"
+		"gradientLabel": "渐变 {{index}}"
 	},
 	"crop": {
 		"title": "裁剪",
@@ -123,8 +120,6 @@
 		"background": "背景",
 		"none": "无",
 		"color": "颜色",
-		"colorWheel": "颜色轮",
-		"colorPalette": "颜色调色板",
 		"clearBackground": "清除背景",
 		"uploadImage": "上传图片",
 		"supportedFormats": "支持的格式：JPG、PNG、GIF、WebP",
@@ -144,14 +139,7 @@
 		"invalidImageType": "无效的文件类型",
 		"imageFormatsOnly": "请上传 JPG、PNG、GIF 或 WebP 格式的图片文件。",
 		"imageUploadSuccess": "图片上传成功！",
-		"failedImageUpload": "上传图片失败",
-		"blurColor": "模糊颜色",
-		"blurColorBlack": "黑色",
-		"blurColorWhite": "白色",
-		"blurType": "模糊类型",
-		"blurTypeBlur": "模糊",
-		"blurTypeMosaic": "马赛克模糊",
-		"mosaicBlockSize": "马赛克块大小"
+		"failedImageUpload": "上传图片失败"
 	},
 	"fontStyles": {
 		"classic": "经典",

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

@@ -17,8 +17,6 @@
 	"labels": {
 		"pan": "平移",
 		"zoom": "缩放",
-		"trim": "剪辑",
-		"speed": "速度",
 		"zoomItem": "缩放 {{index}}",
 		"trimItem": "剪辑 {{index}}",
 		"speedItem": "速度 {{index}}",
@@ -51,5 +49,9 @@
 	"success": {
 		"addedZoomSuggestions": "已添加 {{count}} 个基于光标的缩放建议",
 		"addedZoomSuggestionsPlural": "已添加 {{count}} 个基于光标的缩放建议"
+	},
+	"feedback": {
+		"copied": "已复制！",
+		"pasted": "已粘贴！"
 	}
 }

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

@@ -9,7 +9,6 @@
 		"open": "開啟",
 		"upload": "上傳",
 		"export": "匯出",
-		"showInFolder": "在資料夾中顯示",
 		"file": "檔案",
 		"edit": "編輯",
 		"view": "檢視",

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

@@ -5,7 +5,6 @@
 		"cancel": "取消",
 		"confirm": "確認"
 	},
-	"loadingVideo": "正在載入影片...",
 	"errors": {
 		"noVideoLoaded": "未載入影片",
 		"videoNotReady": "影片未就緒",
@@ -15,7 +14,6 @@
 		"failedToSaveVideo": "儲存影片失敗",
 		"exportFailed": "匯出失敗",
 		"exportFailedWithError": "匯出失敗：{{error}}",
-		"exportBackgroundLoadFailed": "匯出失敗：無法載入背景圖片（{{url}}）",
 		"failedToSaveExport": "儲存匯出檔案失敗",
 		"failedToSaveExportedVideo": "儲存匯出的影片失敗",
 		"failedToRevealInFolder": "在資料夾中顯示時出錯：{{error}}"
@@ -38,8 +36,6 @@
 		"systemAudioUnavailable": "系統音訊不可用。將在無系統音訊的情況下錄製。",
 		"microphoneDenied": "麥克風權限被拒絕。錄製將繼續，但不包含音訊。",
 		"cameraDenied": "攝影機權限被拒絕。錄製將繼續，但不包含攝影機畫面。",
-		"permissionDenied": "錄影權限被拒絕。請允許螢幕錄製。",
-		"cameraDisconnected": "網路攝影機已中斷連線。",
-		"cameraNotFound": "找不到攝影機。"
+		"permissionDenied": "錄影權限被拒絕。請允許螢幕錄製。"
 	}
 }

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

@@ -33,11 +33,5 @@
 	"recording": {
 		"selectSource": "請選擇要錄製的來源"
 	},
-	"language": "語言",
-	"systemLanguagePrompt": {
-		"title": "要使用系統語言嗎？",
-		"description": "偵測到系統語言為 {{language}}。要將 OpenScreen 切換為 {{language}} 嗎？",
-		"switch": "切換為 {{language}}",
-		"keepDefault": "保持目前語言"
-	}
+	"language": "語言"
 }

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

@@ -15,14 +15,6 @@
 			"fast": "快速",
 			"smooth": "平滑",
 			"lazy": "緩慢"
-		},
-		"threeD": {
-			"title": "3D 旋轉",
-			"preset": {
-				"iso": "Iso",
-				"left": "左",
-				"right": "右"
-			}
 		}
 	},
 	"speed": {
@@ -60,9 +52,7 @@
 		"color": "顏色",
 		"gradient": "漸層",
 		"uploadCustom": "上傳自訂",
-		"gradientLabel": "漸層 {{index}}",
-		"colorWheel": "色輪",
-		"colorPalette": "調色盤"
+		"gradientLabel": "漸層 {{index}}"
 	},
 	"crop": {
 		"title": "裁剪",
@@ -130,8 +120,6 @@
 		"background": "背景",
 		"none": "無",
 		"color": "顏色",
-		"colorWheel": "色輪",
-		"colorPalette": "調色盤",
 		"clearBackground": "清除背景",
 		"uploadImage": "上傳圖片",
 		"supportedFormats": "支援的格式：JPG、PNG、GIF、WebP",
@@ -151,14 +139,7 @@
 		"invalidImageType": "無效的檔案類型",
 		"imageFormatsOnly": "請上傳 JPG、PNG、GIF 或 WebP 格式的圖片檔案。",
 		"imageUploadSuccess": "圖片上傳成功！",
-		"failedImageUpload": "上傳圖片失敗",
-		"blurColor": "模糊顏色",
-		"blurColorBlack": "黑色",
-		"blurColorWhite": "白色",
-		"blurType": "模糊類型",
-		"blurTypeBlur": "模糊",
-		"blurTypeMosaic": "馬賽克模糊",
-		"mosaicBlockSize": "馬賽克區塊大小"
+		"failedImageUpload": "上傳圖片失敗"
 	},
 	"fontStyles": {
 		"classic": "經典",

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

@@ -17,8 +17,6 @@
 	"labels": {
 		"pan": "平移",
 		"zoom": "縮放",
-		"trim": "剪輯",
-		"speed": "速度",
 		"zoomItem": "縮放 {{index}}",
 		"trimItem": "剪輯 {{index}}",
 		"speedItem": "速度 {{index}}",
@@ -51,5 +49,9 @@
 	"success": {
 		"addedZoomSuggestions": "已新增 {{count}} 個基於游標的縮放建議",
 		"addedZoomSuggestionsPlural": "已新增 {{count}} 個基於游標的縮放建議"
+	},
+	"feedback": {
+		"copied": "已複製！",
+		"pasted": "已貼上！"
 	}
 }

src/index.css

@@ -66,11 +66,154 @@
 		@apply bg-background text-foreground;
 		-webkit-user-select: none;
 		user-select: none;
+		overflow: hidden;
+		text-rendering: geometricPrecision;
 	}
 }
 
 /* Smooth timeline cursor animations */
 @layer utilities {
+	.editor-workspace {
+		display: flex;
+		flex-direction: column;
+		padding: 14px;
+		background:
+			radial-gradient(circle at 18% 0%, rgba(52, 178, 123, 0.08), transparent 30%),
+			linear-gradient(180deg, #08090b 0%, #050606 100%);
+	}
+
+	.editor-main-deck {
+		display: grid;
+		grid-template-columns: minmax(0, 1fr) clamp(286px, 20vw, 352px);
+		gap: 14px;
+		min-height: 0;
+	}
+
+	.editor-preview-zone,
+	.editor-settings-rail {
+		min-width: 0;
+		min-height: 0;
+	}
+
+	.editor-preview-panel,
+	.editor-timeline-panel,
+	.editor-inspector-shell {
+		background:
+			linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
+			#090a0c;
+		border: 1px solid rgba(255, 255, 255, 0.075);
+		border-radius: 18px;
+		box-shadow:
+			0 24px 70px rgba(0, 0, 0, 0.42),
+			inset 0 1px 0 rgba(255, 255, 255, 0.045);
+	}
+
+	.editor-timeline-panel {
+		border-radius: 16px;
+		background:
+			linear-gradient(180deg, rgba(18, 20, 24, 0.96), rgba(8, 9, 11, 0.98)),
+			#090a0c;
+	}
+
+	.editor-resize-handle {
+		height: 12px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 999px;
+		transition:
+			background-color 160ms ease,
+			opacity 160ms ease;
+		opacity: 0.8;
+	}
+
+	.editor-resize-handle:hover {
+		background: rgba(255, 255, 255, 0.035);
+		opacity: 1;
+	}
+
+	.editor-panel-section {
+		border: 0;
+		border-radius: 0;
+		background: transparent;
+		box-shadow: none;
+	}
+
+	.editor-control-surface {
+		border: 1px solid rgba(255, 255, 255, 0.055);
+		border-radius: 10px;
+		background: rgba(255, 255, 255, 0.032);
+		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
+	}
+
+	.editor-inspector-shell {
+		color: #d9e2ee;
+	}
+
+	.editor-inspector-shell button,
+	.editor-inspector-shell [role="button"] {
+		letter-spacing: 0;
+	}
+
+	.editor-inspector-shell button:focus-visible,
+	.editor-inspector-shell [role="button"]:focus-visible {
+		outline: 1px solid rgba(52, 178, 123, 0.68);
+		outline-offset: 2px;
+	}
+
+	.editor-inspector-shell [data-radix-collection-item],
+	.editor-inspector-shell input,
+	.editor-inspector-shell textarea {
+		letter-spacing: 0;
+	}
+
+	.editor-inspector-shell [role="slider"] {
+		box-shadow: 0 0 0 4px rgba(52, 178, 123, 0.12);
+	}
+
+	.editor-inspector-shell .editor-panel-section > h3 {
+		display: none;
+	}
+
+	.editor-inspector-shell .editor-panel-section > div {
+		overflow: visible;
+	}
+
+	@media (max-width: 1240px) {
+		.editor-workspace {
+			gap: 10px;
+			padding: 10px;
+		}
+
+		.editor-main-deck {
+			grid-template-columns: minmax(0, 1fr) 286px;
+			gap: 10px;
+		}
+	}
+
+	@media (max-width: 1020px) {
+		.editor-main-deck {
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: minmax(0, 1fr) 180px;
+		}
+
+		.editor-settings-rail {
+			min-height: 180px;
+		}
+	}
+
+	@media (min-width: 1900px) {
+		.editor-workspace {
+			padding: 18px;
+			gap: 18px;
+		}
+
+		.editor-main-deck {
+			grid-template-columns: minmax(0, 1fr) 372px;
+			gap: 18px;
+		}
+	}
+
 	.timeline-cursor-smooth {
 		will-change: transform;
 		transition:
@@ -78,14 +221,31 @@
 			right 33ms linear;
 	}
 
-	/* Hidden scrollbar - still scrollable but invisible */
 	.custom-scrollbar {
-		scrollbar-width: none; /* Firefox */
-		-ms-overflow-style: none; /* IE/Edge */
+		scrollbar-width: thin;
+		scrollbar-color: rgba(148, 163, 184, 0.32) transparent;
 	}
 
 	.custom-scrollbar::-webkit-scrollbar {
-		display: none; /* Chrome, Safari, Opera */
+		width: 10px;
+		height: 10px;
+	}
+
+	.custom-scrollbar::-webkit-scrollbar-track {
+		background: transparent;
+	}
+
+	.custom-scrollbar::-webkit-scrollbar-thumb {
+		background: rgba(148, 163, 184, 0.22);
+		border: 3px solid transparent;
+		border-radius: 999px;
+		background-clip: content-box;
+	}
+
+	.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+		background: rgba(52, 178, 123, 0.55);
+		border: 3px solid transparent;
+		background-clip: content-box;
 	}
 
 	.squircle {

src/lib/blurEffects.test.ts

@@ -69,12 +69,12 @@ describe("blur color helpers", () => {
 	it("returns a dark overlay when black blur color is selected", () => {
 		expect(
 			getBlurOverlayColor({
-				type: "blur",
+				type: "mosaic",
 				shape: "rectangle",
 				color: "black",
 				intensity: 12,
 				blockSize: 12,
 			}),
-		).toBe("rgba(0, 0, 0, 0.56)");
+		).toBe("rgba(0, 0, 0, 0.72)");
 	});
 });

src/lib/blurEffects.ts

@@ -16,7 +16,8 @@ function clamp(value: number, min: number, max: number) {
 }
 
 export function normalizeBlurType(value: unknown): BlurType {
-	return value === "mosaic" ? "mosaic" : "blur";
+	void value;
+	return "mosaic";
 }
 
 export function normalizeBlurColor(value: unknown): BlurColor {
@@ -42,13 +43,8 @@ export function getNormalizedMosaicBlockSize(blurData?: BlurData | null, scaleFa
 
 export function getBlurOverlayColor(blurData?: BlurData | null): string {
 	const blurColor = normalizeBlurColor(blurData?.color);
-	const blurType = normalizeBlurType(blurData?.type);
 
-	if (blurColor === "black") {
-		return blurType === "mosaic" ? "rgba(0, 0, 0, 0.72)" : "rgba(0, 0, 0, 0.56)";
-	}
-
-	return blurType === "mosaic" ? "rgba(255, 255, 255, 0.06)" : "rgba(255, 255, 255, 0.02)";
+	return blurColor === "black" ? "rgba(0, 0, 0, 0.72)" : "rgba(255, 255, 255, 0.06)";
 }
 
 export function getMosaicGridOverlayColor(blurData?: BlurData | null): string {