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>

.env.example

@@ -0,0 +1,10 @@
+APP_NAME=Openscreen
+BUNDLE_ID=com.siddharthvaddem.openscreen
+
+APPLE_ID=
+TEAM_ID=
+SIGN_IDENTITY="Developer ID Application: Samir Patil ()"
+CSC_NAME="Samir Patil ()"
+
+NOTARY_PROFILE=OpenScreen-notary
+APPLE_APP_SPECIFIC_PASSWORD=

.envrc

@@ -0,0 +1 @@
+use flake

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @siddharthvaddem

.github/workflows/build.yml

@@ -3,6 +3,16 @@ name: Build Electron App
 
 on:
   workflow_dispatch:
+    inputs:
+      arch:
+        description: 'Architecture to build'
+        required: true
+        default: 'both'
+        type: choice
+        options:
+          - arm64
+          - x64
+          - both
 
 jobs:
   build-windows:
@@ -10,18 +20,15 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
-      
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
           node-version: '22'
-          
+
       - name: Install dependencies
         run: npm ci
-        
-      - name: Install app dependencies
-        run: npx electron-builder install-app-deps
-        
+
       - name: Build Windows app
         run: npm run build:win
         env:
@@ -36,38 +43,180 @@ jobs:
 
   build-macos:
     runs-on: macos-latest
+    strategy:
+      matrix:
+        arch: ${{ github.event.inputs.arch == 'both' && fromJSON('["arm64", "x64"]') || fromJSON(format('["{0}"]', github.event.inputs.arch)) }}
+    
     steps:
+      # ─── Checkout ─────────────────────────────────────────────
       - name: Checkout code
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
+      # ─── Setup Node.js ────────────────────────────────────────
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '22'
+          node-version: 22
+          cache: npm
 
+      # ─── Setup Python (needed by some native deps) ────────────
       - name: Setup Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: '3.11'
 
+      # ─── Install Dependencies ─────────────────────────────────
       - name: Install dependencies
         run: npm ci
 
-      - name: Install app dependencies
-        run: npx electron-builder install-app-deps
-
-      - name: Build macOS app
-        run: npm run build:mac
+      # ─── Import Code Signing Certificate ──────────────────────
+      # This is the KEY step that makes CI signing work.
+      # We create a temporary keychain, import the .p12 cert into it,
+      # and set it as the default so codesign can find it.
+      - name: Import code signing certificate
         env:
+          MAC_CERTIFICATE_P12: ${{ secrets.MAC_CERTIFICATE_P12 }}
+          MAC_CERTIFICATE_PASSWORD: ${{ secrets.MAC_CERTIFICATE_PASSWORD }}
+        run: |
+          # Create a temporary keychain
+          KEYCHAIN_PATH=$RUNNER_TEMP/build.keychain-db
+          KEYCHAIN_PASSWORD=$(openssl rand -base64 32)
+
+          # Create and configure keychain
+          security create-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
+          security set-keychain-settings -lut 21600 "$KEYCHAIN_PATH"
+          security unlock-keychain -p "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
+
+          # Decode and import certificate
+          echo "$MAC_CERTIFICATE_P12" | base64 --decode > $RUNNER_TEMP/certificate.p12
+          security import $RUNNER_TEMP/certificate.p12 \
+            -k "$KEYCHAIN_PATH" \
+            -P "$MAC_CERTIFICATE_PASSWORD" \
+            -T /usr/bin/codesign \
+            -T /usr/bin/security
+
+          # Allow codesign to access the keychain without UI prompt
+          security set-key-partition-list -S apple-tool:,apple: -k "$KEYCHAIN_PASSWORD" "$KEYCHAIN_PATH"
+
+          # Add to keychain search path (makes it the default)
+          security list-keychains -d user -s "$KEYCHAIN_PATH" $(security list-keychains -d user | tr -d '"')
+
+          # Verify the identity is available
+          security find-identity -v -p codesigning "$KEYCHAIN_PATH"
+
+          # Clean up the .p12 file
+          rm -f $RUNNER_TEMP/certificate.p12
+
+      # ─── Build Vite + Electron ────────────────────────────────
+      - name: Build Vite + Electron
+        run: npx tsc && npx vite build
+
+      # ─── Package with electron-builder ────────────────────────
+      # electron-builder handles deep codesigning the .app bundle
+      # "notarize: false" in electron-builder.json5 prevents it from
+      # trying its own notarization flow
+      - name: Package .app bundle
+        run: npx electron-builder --mac --${{ matrix.arch }} --dir
+        env:
+          CSC_NAME: "Samir Patil (N26FZ4GW28)"
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Upload macOS build
+      # ─── Read version from package.json ───────────────────────
+      - name: Get version
+        id: version
+        run: echo "version=$(node -p 'require(\"./package.json\").version')" >> $GITHUB_OUTPUT
+
+      # ─── Locate the .app bundle ───────────────────────────────
+      - name: Find .app bundle
+        id: find_app
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          echo "=== Release directory contents ==="
+          ls -laR "release/${VERSION}/" || echo "release/${VERSION}/ not found"
+          echo "=== Searching for .app bundle ==="
+          APP_BUNDLE=$(find "release/${VERSION}" -maxdepth 4 -name "*.app" -type d | head -n1)
+          if [ -z "$APP_BUNDLE" ]; then
+            echo "::error::No .app bundle found in release/${VERSION}/"
+            exit 1
+          fi
+          echo "app_bundle=$APP_BUNDLE" >> $GITHUB_OUTPUT
+          echo "Found: $APP_BUNDLE"
+
+      # ─── Verify .app signature ────────────────────────────────
+      - name: Verify .app code signature
+        run: codesign --verify --deep --strict "${{ steps.find_app.outputs.app_bundle }}"
+
+      # ─── Create DMG ───────────────────────────────────────────
+      - name: Create DMG
+        id: dmg
+        run: |
+          VERSION="${{ steps.version.outputs.version }}"
+          ARCH="${{ matrix.arch }}"
+          DMG_NAME="Openscreen-Mac-${ARCH}-${VERSION}.dmg"
+          RELEASE_DIR="release/${VERSION}"
+          DMG_OUTPUT="${RELEASE_DIR}/${DMG_NAME}"
+          STAGING="${RELEASE_DIR}/dmg-staging"
+
+          mkdir -p "$STAGING"
+          cp -R "${{ steps.find_app.outputs.app_bundle }}" "$STAGING/"
+          ln -s /Applications "$STAGING/Applications"
+
+          hdiutil create \
+            -srcfolder "$STAGING" \
+            -volname "Openscreen" \
+            -fs HFS+ \
+            -fsargs "-c c=64,a=16,e=16" \
+            -format UDBZ \
+            "$DMG_OUTPUT"
+
+          rm -rf "$STAGING"
+
+          echo "dmg_path=$DMG_OUTPUT" >> $GITHUB_OUTPUT
+          echo "dmg_name=$DMG_NAME" >> $GITHUB_OUTPUT
+
+      # ─── Sign DMG ─────────────────────────────────────────────
+      - name: Sign DMG
+        run: |
+          codesign --force \
+            --sign "Developer ID Application: Samir Patil (N26FZ4GW28)" \
+            --timestamp \
+            "${{ steps.dmg.outputs.dmg_path }}"
+
+      # ─── Notarize DMG ────────────────────────────────────────
+      # On CI we can't use keychain profiles for notarytool, so we
+      # pass credentials directly via env vars / flags
+      - name: Notarize DMG
+        run: |
+          xcrun notarytool submit "${{ steps.dmg.outputs.dmg_path }}" \
+            --apple-id "${{ secrets.APPLE_ID }}" \
+            --team-id "${{ secrets.APPLE_TEAM_ID }}" \
+            --password "${{ secrets.APPLE_APP_SPECIFIC_PASSWORD }}" \
+            --wait
+        timeout-minutes: 15
+
+      # ─── Staple ───────────────────────────────────────────────
+      - name: Staple notarization ticket
+        run: xcrun stapler staple "${{ steps.dmg.outputs.dmg_path }}"
+
+      # ─── Validate ─────────────────────────────────────────────
+      - name: Validate stapled DMG
+        run: |
+          xcrun stapler validate "${{ steps.dmg.outputs.dmg_path }}"
+          spctl -a -vv -t install "${{ steps.dmg.outputs.dmg_path }}"
+
+      # ─── Upload Artifact ──────────────────────────────────────
+      - name: Upload notarized DMG
         uses: actions/upload-artifact@v4
         with:
-          name: macos-installer
-          path: release/**/*.dmg
+          name: openscreen-mac-${{ matrix.arch }}
+          path: ${{ steps.dmg.outputs.dmg_path }}
           retention-days: 30
 
+      # ─── Cleanup Keychain ─────────────────────────────────────
+      - name: Cleanup keychain
+        if: always()
+        run: security delete-keychain $RUNNER_TEMP/build.keychain-db || true
+
   build-linux:
     runs-on: ubuntu-latest
     steps:
@@ -82,8 +231,10 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Install app dependencies
-        run: npx electron-builder install-app-deps
+      # bsdtar (from libarchive-tools) is required by fpm to build pacman
+      # packages. AppImage and deb don't need it; ubuntu-latest doesn't ship it.
+      - name: Install pacman build dependencies
+        run: sudo apt-get update && sudo apt-get install -y libarchive-tools
 
       - name: Build Linux app
         run: npm run build:linux
@@ -98,4 +249,5 @@ jobs:
             release/**/*.AppImage
             release/**/*.zsync
             release/**/*.deb
+            release/**/*.pacman
           retention-days: 30

.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/ci.yml

@@ -41,6 +41,7 @@ jobs:
           node-version: 22
           cache: npm
       - run: npm ci
+      - run: npm run test
       - run: npm run test:browser:install
       - run: npm run test:browser
 

.github/workflows/discord.yaml

@@ -0,0 +1,519 @@
+name: PR to Discord Forum
+
+on:
+  pull_request_target:
+    types: [opened, reopened, ready_for_review, converted_to_draft, synchronize, edited, labeled, unlabeled, closed]
+  pull_request_review:
+    types: [submitted]
+  issue_comment:
+    types: [created]
+  schedule:
+    - cron: "0 12 * * 1"
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pull-requests: write
+  issues: read
+
+jobs:
+  notify:
+    if: github.event_name != 'schedule' && github.actor != 'github-actions[bot]'
+    concurrency:
+      group: discord-pr-sync-${{ github.repository }}-${{ github.event.pull_request.number || github.event.issue.number || github.run_id }}
+      cancel-in-progress: false
+    runs-on: ubuntu-latest
+    steps:
+      - name: Sync PR activity to Discord forum thread
+        id: sync
+        uses: actions/github-script@v7
+        env:
+          DISCORD_WEBHOOK_URL: ${{ secrets.DISCORD_WEBHOOK_URL }}
+          DISCORD_PR_FORUM_WEBHOOK: ${{ secrets.DISCORD_PR_FORUM_WEBHOOK }}
+          DISCORD_WEBHOOK_USERNAME: ${{ secrets.DISCORD_WEBHOOK_USERNAME }}
+          DISCORD_WEBHOOK_AVATAR_URL: ${{ secrets.DISCORD_WEBHOOK_AVATAR_URL }}
+          DISCORD_BOT_TOKEN: ${{ secrets.DISCORD_BOT_TOKEN }}
+          DISCORD_REVIEWER_ROLE_ID: ${{ secrets.DISCORD_REVIEWER_ROLE_ID }}
+          DISCORD_ALERT_WEBHOOK_URL: ${{ secrets.DISCORD_ALERT_WEBHOOK_URL }}
+        with:
+          script: |
+            const WEBHOOK_USERNAME = (process.env.DISCORD_WEBHOOK_USERNAME || "OpenScreen").trim();
+            const WEBHOOK_AVATAR = (process.env.DISCORD_WEBHOOK_AVATAR_URL || "").trim();
+
+            const THREAD_MARKER_REGEX = /<!--\s*discord-thread-id:(\d+)\s*-->/i;
+            const webhookUrl = (process.env.DISCORD_WEBHOOK_URL || process.env.DISCORD_PR_FORUM_WEBHOOK || "").trim();
+            const botToken = (process.env.DISCORD_BOT_TOKEN || "").trim();
+            const reviewerRoleId = (process.env.DISCORD_REVIEWER_ROLE_ID || "").trim();
+            const alertWebhookUrl = (process.env.DISCORD_ALERT_WEBHOOK_URL || "").trim();
+
+            const TAGS = {
+              open: "1493976692967080096",
+              draft: "1493976782028935279",
+              ready: "1493976833626996756",
+              changes: "1493976909875515564",
+              approved: "1493976951038152764",
+              merged: "1493977049709281320",
+              closed: "1493977108102516786",
+            };
+
+            const labelTagMap = {
+              bug: "1493977562773458975",
+              enhancement: "1493977619216207993",
+              documentation: "1493978565153394830",
+            };
+
+            function cleanDescription(text, maxLen = 3500) {
+              if (!text) return "No description provided.";
+              const normalized = text
+                .replace(/\r\n/g, "\n")
+                .replace(/\n{3,}/g, "\n\n")
+                .trim();
+              if (normalized.length <= maxLen) return normalized;
+              return `${normalized.slice(0, maxLen - 1)}…`;
+            }
+
+            function trimThreadName(name) {
+              return name.length > 95 ? name.slice(0, 95) : name;
+            }
+
+            function extractThreadId(body) {
+              if (!body) return null;
+              const match = body.match(THREAD_MARKER_REGEX);
+              return match ? match[1] : null;
+            }
+
+            function upsertThreadMarker(body, threadId) {
+              const cleaned = (body || "").replace(THREAD_MARKER_REGEX, "").trim();
+              return `${cleaned}\n\n<!-- discord-thread-id:${threadId} -->`.trim();
+            }
+
+            async function discordPost(payload, options = {}) {
+              const endpoint = new URL(webhookUrl);
+              endpoint.searchParams.set("wait", "true");
+              if (options.threadId) endpoint.searchParams.set("thread_id", String(options.threadId));
+
+              const response = await fetch(endpoint.toString(), {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({
+                  username: WEBHOOK_USERNAME,
+                  avatar_url: WEBHOOK_AVATAR,
+                  allowed_mentions: { parse: [] },
+                  ...payload,
+                })
+              });
+
+              const contentType = (response.headers.get("content-type") || "").toLowerCase();
+              const text = await response.text();
+
+              if (!response.ok) {
+                throw new Error(`Discord API error ${response.status}: ${text}`);
+              }
+
+              if (!text) return {};
+              if (contentType.includes("application/json")) return JSON.parse(text);
+
+              // Some proxy/CDN edge responses may return HTML with 2xx; avoid crashing on JSON parse.
+              core.warning(`Discord webhook returned non-JSON response (content-type: ${contentType || "unknown"}).`);
+              return {};
+            }
+
+            async function patchDiscordThread(threadId, patchBody) {
+              if (!botToken || !threadId) return;
+              const response = await fetch(`https://discord.com/api/v10/channels/${threadId}`, {
+                method: "PATCH",
+                headers: {
+                  "Authorization": `Bot ${botToken}`,
+                  "Content-Type": "application/json",
+                },
+                body: JSON.stringify(patchBody),
+              });
+              if (!response.ok) {
+                const text = await response.text();
+                core.warning(`Discord thread patch failed (${response.status}): ${text}`);
+              }
+            }
+
+            function desiredStatusTag(prState) {
+              if (prState.merged && TAGS.merged) return TAGS.merged;
+              if (prState.closed && !prState.merged && TAGS.closed) return TAGS.closed;
+              if (prState.reviewState === "CHANGES_REQUESTED" && TAGS.changes) return TAGS.changes;
+              if (prState.reviewState === "APPROVED" && TAGS.approved) return TAGS.approved;
+              if (prState.draft && TAGS.draft) return TAGS.draft;
+              if (!prState.draft && TAGS.ready) return TAGS.ready;
+              return TAGS.open || null;
+            }
+
+            function tagIdsFromLabels(labels) {
+              const out = [];
+              for (const label of labels) {
+                const mapped = labelTagMap[label.toLowerCase()] || labelTagMap[label];
+                if (mapped) out.push(String(mapped));
+              }
+              return out;
+            }
+
+            async function getPullRequest() {
+              if (context.eventName === "pull_request_target" || context.eventName === "pull_request_review") {
+                return context.payload.pull_request || null;
+              }
+              if (context.eventName === "issue_comment") {
+                const issue = context.payload.issue;
+                if (!issue?.pull_request) return null;
+                const { data } = await github.rest.pulls.get({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  pull_number: issue.number,
+                });
+                return data;
+              }
+              return null;
+            }
+
+            async function getReviewState(owner, repo, pullNumber) {
+              const { data } = await github.rest.pulls.listReviews({ owner, repo, pull_number: pullNumber, per_page: 100 });
+              let hasChanges = false;
+              let hasApproved = false;
+              for (const r of data) {
+                const s = (r.state || "").toUpperCase();
+                if (s === "CHANGES_REQUESTED") hasChanges = true;
+                if (s === "APPROVED") hasApproved = true;
+              }
+              if (hasChanges) return "CHANGES_REQUESTED";
+              if (hasApproved) return "APPROVED";
+              return "NONE";
+            }
+
+            async function sendFailureAlert(message) {
+              if (!alertWebhookUrl) return;
+              try {
+                await fetch(alertWebhookUrl, {
+                  method: "POST",
+                  headers: { "Content-Type": "application/json" },
+                  body: JSON.stringify({
+                    username: "OpenScreen",
+                    avatar_url: WEBHOOK_AVATAR,
+                    content: `⚠️ PR Discord sync failed\n${message}\nRun: ${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`,
+                    allowed_mentions: { parse: [] }
+                  })
+                });
+              } catch {
+                core.warning("Failed to send failure alert webhook.");
+              }
+            }
+
+            try {
+              const pr = await getPullRequest();
+              if (!pr) {
+                core.info("No PR context found. Skipping.");
+                return;
+              }
+
+              if (!webhookUrl) {
+                const strictEvents = new Set(["pull_request_target", "workflow_dispatch"]);
+                const msg =
+                  `Discord sync skipped: webhook secret unavailable for event '${context.eventName}'. ` +
+                  "Set either DISCORD_WEBHOOK_URL or DISCORD_PR_FORUM_WEBHOOK in repository secrets.";
+                if (strictEvents.has(context.eventName)) {
+                  core.setFailed(msg);
+                } else {
+                  core.warning(msg);
+                }
+                return;
+              }
+
+              const action = context.payload.action || "";
+              const owner = context.repo.owner;
+              const repo = context.repo.repo;
+              const number = pr.number;
+              const title = pr.title;
+              const author = pr.user?.login || "unknown";
+              const url = pr.html_url;
+              const authorUrl = pr.user?.html_url || "";
+              const authorAvatar = pr.user?.avatar_url || "";
+              const base = pr.base?.ref || "";
+              const head = pr.head?.ref || "";
+              const repoFullName = pr.base?.repo?.full_name || `${owner}/${repo}`;
+              const labels = (pr.labels || []).map((l) => l.name);
+              const body = (pr.body || "").trim();
+              const reviewState = await getReviewState(owner, repo, number);
+
+              let threadId = extractThreadId(body);
+              const shouldCreateThread =
+                context.eventName === "pull_request_target" &&
+                ["opened", "reopened", "ready_for_review"].includes(action) &&
+                !threadId;
+
+              if (shouldCreateThread) {
+                const fields = [
+                  { name: "PR", value: `[#${number}](${url})`, inline: true },
+                  { name: "Author", value: `[${author}](${authorUrl || url})`, inline: true },
+                  { name: "Status", value: pr.draft ? "Draft" : "Open", inline: true },
+                  { name: "Branches", value: `\`${head}\` -> \`${base}\``, inline: true },
+                  { name: "Changes", value: `+${pr.additions} / -${pr.deletions}`, inline: true },
+                  { name: "Files Changed", value: String(pr.changed_files), inline: true }
+                ];
+
+                if (labels.length) {
+                  fields.push({
+                    name: "Labels",
+                    value: labels.map((l) => `\`${l}\``).join(" "),
+                    inline: false,
+                  });
+                }
+
+                const statusTag = desiredStatusTag({ draft: pr.draft, reviewState, merged: false, closed: false });
+                const mappedLabelTags = tagIdsFromLabels(labels);
+                const appliedTags = [...new Set([statusTag, ...mappedLabelTags].filter(Boolean))];
+
+                const createPayload = {
+                  content: action === "ready_for_review" ? "🔔 PR is now ready for review" : "🔔 New pull request opened",
+                  thread_name: trimThreadName(`PR #${number} - ${title}`),
+                  applied_tags: appliedTags,
+                  embeds: [
+                    {
+                      title: `PR #${number}: ${title}`,
+                      url,
+                      description: cleanDescription(body),
+                      color: pr.draft ? 15105570 : 1998671,
+                      author: {
+                        name: author,
+                        url: authorUrl || undefined,
+                        icon_url: authorAvatar || undefined,
+                      },
+                      fields,
+                      footer: { text: repoFullName },
+                      timestamp: new Date().toISOString(),
+                    },
+                  ],
+                };
+
+                const result = await discordPost(createPayload);
+                const createdThreadId = result.channel_id || null;
+                if (createdThreadId) {
+                  const updatedBody = upsertThreadMarker(body, createdThreadId);
+                  await github.rest.pulls.update({ owner, repo, pull_number: number, body: updatedBody });
+                  core.info(`Created Discord thread ${createdThreadId} and stored mapping.`);
+                } else {
+                  core.warning("Discord thread created but channel_id missing in response.");
+                }
+                return;
+              }
+
+              if (!threadId) {
+                core.info("No mapped Discord thread ID found; skipping update event.");
+                return;
+              }
+
+              if (context.eventName === "pull_request_target" && ["edited", "labeled", "unlabeled", "ready_for_review", "converted_to_draft"].includes(action)) {
+                const statusTag = desiredStatusTag({
+                  draft: action === "converted_to_draft" ? true : pr.draft,
+                  reviewState,
+                  merged: false,
+                  closed: false,
+                });
+                const mappedLabelTags = tagIdsFromLabels(labels);
+                const appliedTags = [...new Set([statusTag, ...mappedLabelTags].filter(Boolean))];
+                await patchDiscordThread(threadId, {
+                  name: trimThreadName(`PR #${number} - ${title}`),
+                  ...(appliedTags.length ? { applied_tags: appliedTags } : {}),
+                });
+              }
+
+              let updateMessage = null;
+              let updateEmbed = null;
+
+              if (context.eventName === "pull_request_target") {
+                if (action === "synchronize") {
+                  const { data: commits } = await github.rest.pulls.listCommits({ owner, repo, pull_number: number, per_page: 5 });
+                  const list = commits.map((c) => `- \`${c.sha.slice(0, 7)}\` ${c.commit.message.split("\n")[0]}`).join("\n") || "- No commit details";
+                  updateMessage = `🧩 New commits pushed to PR #${number}`;
+                  updateEmbed = {
+                    title: `Commit Update • PR #${number}`,
+                    url: `${url}/files`,
+                    description: `${list}`,
+                    color: 1998671,
+                    footer: { text: repoFullName },
+                    timestamp: new Date().toISOString(),
+                  };
+                } else if (action === "edited") {
+                  updateMessage = `✏️ PR #${number} details were edited`;
+                  updateEmbed = {
+                    title: `PR Updated • #${number}`,
+                    url,
+                    description: cleanDescription(body, 1200),
+                    color: 1998671,
+                    timestamp: new Date().toISOString(),
+                  };
+                } else if (action === "closed") {
+                  const isMerged = !!pr.merged;
+                  const statusTag = desiredStatusTag({ draft: false, reviewState, merged: isMerged, closed: true });
+                  const mappedLabelTags = tagIdsFromLabels(labels);
+                  const appliedTags = [...new Set([statusTag, ...mappedLabelTags].filter(Boolean))];
+                  await patchDiscordThread(threadId, {
+                    ...(appliedTags.length ? { applied_tags: appliedTags } : {}),
+                    ...(isMerged ? { archived: true, locked: true } : {}),
+                  });
+
+                  updateMessage = isMerged
+                    ? `✅ PR #${number} was merged`
+                    : `🛑 PR #${number} was closed without merge`;
+                  updateEmbed = {
+                    title: isMerged ? `Merged • PR #${number}` : `Closed • PR #${number}`,
+                    url,
+                    description: isMerged ? "This PR has been merged into the base branch." : "This PR was closed before merge.",
+                    color: isMerged ? 5763719 : 15158332,
+                    timestamp: new Date().toISOString(),
+                  };
+                } else if (action === "ready_for_review") {
+                  updateMessage = `🚀 PR #${number} moved from draft to ready for review`;
+                  if (reviewerRoleId) updateMessage += ` <@&${reviewerRoleId}>`;
+                } else if (action === "converted_to_draft") {
+                  updateMessage = `📝 PR #${number} converted to draft`;
+                }
+              } else if (context.eventName === "pull_request_review") {
+                const review = context.payload.review;
+                if (review) {
+                  const state = (review.state || "commented").toUpperCase();
+                  const reviewer = review.user?.login || "reviewer";
+                  updateMessage = `🧪 Review ${state} by **${reviewer}** on PR #${number}`;
+                  if (state === "CHANGES_REQUESTED" && reviewerRoleId) updateMessage += ` <@&${reviewerRoleId}>`;
+                  updateEmbed = {
+                    title: `Review ${state} • PR #${number}`,
+                    url: review.html_url || url,
+                    description: cleanDescription(review.body || "No review note.", 1000),
+                    color: state === "APPROVED" ? 5763719 : state === "CHANGES_REQUESTED" ? 15158332 : 1998671,
+                    timestamp: new Date().toISOString(),
+                  };
+
+                  if (state === "CHANGES_REQUESTED" || state === "APPROVED") {
+                    const statusTag = desiredStatusTag({ draft: pr.draft, reviewState: state, merged: false, closed: false });
+                    const mappedLabelTags = tagIdsFromLabels(labels);
+                    const appliedTags = [...new Set([statusTag, ...mappedLabelTags].filter(Boolean))];
+                    await patchDiscordThread(threadId, {
+                      ...(appliedTags.length ? { applied_tags: appliedTags } : {}),
+                    });
+                  }
+                }
+              } else if (context.eventName === "issue_comment") {
+                const comment = context.payload.comment;
+                if (comment) {
+                  const commenter = comment.user?.login || "user";
+                  updateMessage = `💬 New comment by **${commenter}** on PR #${number}`;
+                  updateEmbed = {
+                    title: `New PR Comment • #${number}`,
+                    url: comment.html_url || url,
+                    description: cleanDescription(comment.body || "No comment body.", 1000),
+                    color: 1998671,
+                    timestamp: new Date().toISOString(),
+                  };
+                }
+              }
+
+              if (!updateMessage && !updateEmbed) {
+                core.info("No Discord update message for this event/action. Skipping.");
+                return;
+              }
+
+              const payload = { content: updateMessage || "" };
+              if (updateEmbed) payload.embeds = [updateEmbed];
+              await discordPost(payload, { threadId });
+              core.info(`Posted update to Discord thread ${threadId}.`);
+            } catch (err) {
+              const msg = err && err.message ? err.message : String(err);
+              core.setFailed(msg);
+
+              const alertWebhook = process.env.DISCORD_ALERT_WEBHOOK_URL;
+              if (alertWebhook) {
+                try {
+                  await fetch(alertWebhook, {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify({
+                      username: "OpenScreen",
+                      avatar_url: WEBHOOK_AVATAR,
+                      content: `⚠️ PR->Discord sync failed\n${msg}\nRun: ${context.serverUrl}/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`,
+                      allowed_mentions: { parse: [] }
+                    })
+                  });
+                } catch {
+                  core.warning("Failed to send alert webhook.");
+                }
+              }
+            }
+
+  weekly-contributor-leaderboard:
+    if: github.event_name == 'schedule' || github.event_name == 'workflow_dispatch'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Post weekly contributor leaderboard
+        uses: actions/github-script@v7
+        env:
+          DISCORD_SPOTLIGHT_WEBHOOK_URL: ${{ secrets.DISCORD_SPOTLIGHT_WEBHOOK_URL }}
+          DISCORD_WEBHOOK_USERNAME: ${{ secrets.DISCORD_WEBHOOK_USERNAME }}
+          DISCORD_WEBHOOK_AVATAR_URL: ${{ secrets.DISCORD_WEBHOOK_AVATAR_URL }}
+        with:
+          script: |
+            const spotlightWebhook = (process.env.DISCORD_SPOTLIGHT_WEBHOOK_URL || "").trim();
+            const webhookUsername = (process.env.DISCORD_WEBHOOK_USERNAME || "OpenScreen").trim();
+            const webhookAvatar = (process.env.DISCORD_WEBHOOK_AVATAR_URL || "").trim();
+            if (!spotlightWebhook) {
+              core.info("DISCORD_SPOTLIGHT_WEBHOOK_URL missing. Skipping leaderboard post.");
+              return;
+            }
+
+            const since = new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString();
+            const owner = context.repo.owner;
+            const repo = context.repo.repo;
+
+            const q = `repo:${owner}/${repo} is:pr is:merged merged:>=${since.substring(0, 10)}`;
+            const search = await github.rest.search.issuesAndPullRequests({
+              q,
+              per_page: 100,
+            });
+
+            const counter = new Map();
+            for (const item of search.data.items) {
+              const login = item.user?.login;
+              if (!login) continue;
+              counter.set(login, (counter.get(login) || 0) + 1);
+            }
+
+            const ranked = [...counter.entries()]
+              .sort((a, b) => b[1] - a[1])
+              .slice(0, 10);
+
+            const totalMerged = search.data.items.length;
+            const lines = ranked.length
+              ? ranked.map(([user, count], idx) => `${idx + 1}. **${user}** - ${count} merged PR(s)`).join("\n")
+              : "No merged PRs this week.";
+
+            const payload = {
+              username: webhookUsername,
+              ...(webhookAvatar ? { avatar_url: webhookAvatar } : {}),
+              embeds: [
+                {
+                  title: "🌟 Weekly Contributor Leaderboard",
+                  description: lines,
+                  color: 1998671,
+                  fields: [
+                    { name: "Merged PRs (7d)", value: String(totalMerged), inline: true },
+                    { name: "Repository", value: `${owner}/${repo}`, inline: true },
+                    { name: "Period", value: "Last 7 days", inline: true }
+                  ],
+                  timestamp: new Date().toISOString()
+                }
+              ],
+              allowed_mentions: { parse: [] }
+            };
+
+            const res = await fetch(`${spotlightWebhook}?wait=true`, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(payload)
+            });
+
+            if (!res.ok) {
+              const txt = await res.text();
+              core.setFailed(`Leaderboard post failed ${res.status}: ${txt}`);
+            }

.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 }}

.github/workflows/update-homebrew-cask.yml

@@ -0,0 +1,168 @@
+name: Update Homebrew Cask
+
+on:
+  release:
+    types: [published]
+  workflow_dispatch:
+    inputs:
+      tag:
+        description: "Release tag to publish to the tap (e.g. v1.4.0)"
+        required: true
+        type: string
+
+permissions:
+  contents: read
+
+jobs:
+  update-cask:
+    runs-on: ubuntu-latest
+    if: github.event_name == 'workflow_dispatch' || !github.event.release.prerelease
+    env:
+      TAP_OWNER: siddharthvaddem
+      TAP_REPO: homebrew-openscreen
+      CASK_NAME: openscreen
+    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}"
+          echo "tag=$TAG"         >> "$GITHUB_OUTPUT"
+          echo "version=$VERSION" >> "$GITHUB_OUTPUT"
+
+      - name: Find macOS DMG assets
+        id: assets
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          TAG: ${{ steps.meta.outputs.tag }}
+          REPO: ${{ github.repository }}
+        run: |
+          set -euo pipefail
+
+          NAMES=$(gh release view "$TAG" --repo "$REPO" --json assets --jq '.assets[].name')
+
+          # arm64 DMG: explicit "arm64" / "apple silicon" / fallback to any .dmg
+          # whose name does NOT contain "x64" or non-mac platform markers.
+          ARM_NAME=$(echo "$NAMES" | grep -iE '\.dmg$' \
+            | grep -iE '(arm64|apple[-_. ]?silicon)' | head -n1 || true)
+          if [[ -z "$ARM_NAME" ]]; then
+            ARM_NAME=$(echo "$NAMES" | grep -iE '\.dmg$' \
+              | grep -iv 'x64' | grep -iv 'linux' | grep -iv 'win' | head -n1 || true)
+          fi
+
+          # x64 DMG
+          X64_NAME=$(echo "$NAMES" | grep -iE '\.dmg$' \
+            | grep -iE '(x64|x86[-_]?64|intel)' | head -n1 || true)
+
+          if [[ -z "$ARM_NAME" || -z "$X64_NAME" ]]; then
+            echo "::error::Could not locate both arm64 and x64 DMGs in release assets"
+            echo "Available assets:"
+            echo "$NAMES"
+            exit 1
+          fi
+
+          echo "arm_name=$ARM_NAME" >> "$GITHUB_OUTPUT"
+          echo "x64_name=$X64_NAME" >> "$GITHUB_OUTPUT"
+          echo "Found arm64 asset: $ARM_NAME"
+          echo "Found x64 asset:   $X64_NAME"
+
+      - name: Download DMGs and compute sha256
+        id: shas
+        env:
+          REPO: ${{ github.repository }}
+          TAG: ${{ steps.meta.outputs.tag }}
+          ARM_NAME: ${{ steps.assets.outputs.arm_name }}
+          X64_NAME: ${{ steps.assets.outputs.x64_name }}
+        run: |
+          set -euo pipefail
+          BASE="https://github.com/${REPO}/releases/download/${TAG}"
+          curl -fsSL --retry 3 -o /tmp/arm.dmg "${BASE}/${ARM_NAME}"
+          curl -fsSL --retry 3 -o /tmp/x64.dmg "${BASE}/${X64_NAME}"
+          ARM_SHA=$(sha256sum /tmp/arm.dmg | awk '{print $1}')
+          X64_SHA=$(sha256sum /tmp/x64.dmg | awk '{print $1}')
+          echo "arm_sha=$ARM_SHA" >> "$GITHUB_OUTPUT"
+          echo "x64_sha=$X64_SHA" >> "$GITHUB_OUTPUT"
+
+      - name: Checkout tap
+        uses: actions/checkout@v4
+        with:
+          repository: ${{ env.TAP_OWNER }}/${{ env.TAP_REPO }}
+          token: ${{ secrets.HOMEBREW_TAP_TOKEN }}
+          path: tap
+
+      - name: Write cask file
+        env:
+          REPO: ${{ github.repository }}
+          TAG: ${{ steps.meta.outputs.tag }}
+          VERSION: ${{ steps.meta.outputs.version }}
+          ARM_NAME: ${{ steps.assets.outputs.arm_name }}
+          X64_NAME: ${{ steps.assets.outputs.x64_name }}
+          ARM_SHA: ${{ steps.shas.outputs.arm_sha }}
+          X64_SHA: ${{ steps.shas.outputs.x64_sha }}
+        run: |
+          set -euo pipefail
+          mkdir -p tap/Casks
+          BASE="https://github.com/${REPO}/releases/download/${TAG}"
+
+          # #{version} is Ruby interpolation written literally to the cask
+          # file (bash heredoc leaves "#{...}" alone). \${VERSION}, \${ARM_SHA},
+          # etc. are bash variables expanded by the heredoc. The literal
+          # #{version} fixes Homebrew's "URL is unversioned" audit warning by
+          # making the version string statically detectable.
+          cat > "tap/Casks/${CASK_NAME}.rb" <<EOF
+          cask "${CASK_NAME}" do
+            version "${VERSION}"
+
+            on_arm do
+              sha256 "${ARM_SHA}"
+
+              url "https://github.com/${REPO}/releases/download/v#{version}/${ARM_NAME}"
+            end
+            on_intel do
+              sha256 "${X64_SHA}"
+
+              url "https://github.com/${REPO}/releases/download/v#{version}/${X64_NAME}"
+            end
+
+            name "Openscreen"
+            desc "Screen recorder and video editor"
+            homepage "https://github.com/${REPO}"
+
+            auto_updates false
+            depends_on macos: ">= :big_sur"
+
+            app "Openscreen.app"
+
+            zap trash: [
+              "~/Library/Application Support/Openscreen",
+              "~/Library/Caches/com.siddharthvaddem.openscreen",
+              "~/Library/Logs/Openscreen",
+              "~/Library/Preferences/com.siddharthvaddem.openscreen.plist",
+              "~/Library/Saved Application State/com.siddharthvaddem.openscreen.savedState",
+            ]
+          end
+          EOF
+
+      - name: Commit and push to tap
+        working-directory: tap
+        env:
+          VERSION: ${{ steps.meta.outputs.version }}
+        run: |
+          set -euo pipefail
+          git config user.name  "github-actions[bot]"
+          git config user.email "41898282+github-actions[bot]@users.noreply.github.com"
+          git add "Casks/${CASK_NAME}.rb"
+          if git diff --cached --quiet; then
+            echo "Cask already up to date for ${VERSION} — nothing to commit."
+            exit 0
+          fi
+          git commit -m "Bump ${CASK_NAME} to ${VERSION}"
+          git push

.gitignore

@@ -12,9 +12,11 @@ dist
 dist-electron
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*
+.zed/
 !.vscode/extensions.json
 .idea
 .DS_Store
@@ -25,6 +27,7 @@ dist-ssr
 *.sw?
 release/**
 *.kiro/
+.claude/
 # npx electron-builder --mac --win
 
 # Playwright
@@ -32,4 +35,11 @@ test-results
 playwright-report/
 
 # Vitest browser mode screenshots
-__screenshots__/
+__screenshots__/
+
+# shell files
+/shell.sh
+# Nix
+result
+result-*
+.direnv/

README.md

@@ -1,16 +1,19 @@
 > [!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" />
   <br />
   <br />
+	<a href="https://trendshift.io/repositories/17427" target="_blank"><img src="https://trendshift.io/api/badge/repositories/17427" alt="siddharthvaddem%2Fopenscreen | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+	<br />
+	<br />
   <a href="https://deepwiki.com/siddharthvaddem/openscreen">
     <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" />
   </a>
   &nbsp;
   <a href="https://discord.gg/yAQQhRaEeg">
-    <img src="https://img.shields.io/discord/pHAUbcqNd?logo=discord&label=Discord&color=5865F2" alt="Join Discord" />
+    <img src="https://dcbadge.limes.pink/api/server/https://discord.gg/yAQQhRaEeg?style=flat" alt="Join Discord" />
   </a>
 </p>
 
@@ -18,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;" />
@@ -30,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
 
@@ -47,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
@@ -57,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
 ```
@@ -91,11 +164,26 @@ 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
+
+<a href="https://www.star-history.com/?repos=siddharthvaddem%2Fopenscreen&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/chart?repos=siddharthvaddem/openscreen&type=date&theme=dark&legend=top-left" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/chart?repos=siddharthvaddem/openscreen&type=date&legend=top-left" />
+   <img alt="Star History Chart" src="https://api.star-history.com/chart?repos=siddharthvaddem/openscreen&type=date&legend=top-left" />
+ </picture>
+</a>
 
 ## License
 

biome.json

@@ -1,5 +1,5 @@
 {
-	"$schema": "https://biomejs.dev/schemas/2.3.13/schema.json",
+	"$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
 	"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
 	"files": { "ignoreUnknown": false, "includes": ["**", "!**/*.css"] },
 	"formatter": {

docs/tests/writing-tests.md

@@ -0,0 +1,149 @@
+# Writing Tests
+
+This project uses [Vitest](https://vitest.dev/) for both unit/integration tests and browser tests. There are two separate configs — each targets a different set of files.
+
+## Unit tests
+
+**Config:** `vitest.config.ts`  
+**Runs in:** jsdom (simulated DOM, no real browser)  
+**File pattern:** `src/**/*.test.ts` — anything that does **not** end in `.browser.test.ts`  
+**CI command:** `npm run test`
+
+Use unit tests for pure logic, utility functions, data transformations, and anything that doesn't need real browser APIs (Canvas, WebCodecs, MediaRecorder, etc.).
+
+### File placement
+
+Co-locate the test file next to the source file, or put it in a `__tests__/` folder in the same directory.
+
+```
+src/lib/compositeLayout.ts
+src/lib/compositeLayout.test.ts        # co-located
+
+src/i18n/__tests__/tutorialHelpTranslations.test.ts  # grouped
+```
+
+### Example
+
+```ts
+import { describe, expect, it } from "vitest";
+import { computeCompositeLayout } from "./compositeLayout";
+
+describe("computeCompositeLayout", () => {
+  it("anchors the overlay in the lower-right corner", () => {
+    const layout = computeCompositeLayout({
+      canvasSize: { width: 1920, height: 1080 },
+      screenSize: { width: 1920, height: 1080 },
+      webcamSize: { width: 1280, height: 720 },
+    });
+
+    expect(layout).not.toBeNull();
+    expect(layout!.webcamRect!.x).toBeGreaterThan(1920 / 2);
+    expect(layout!.webcamRect!.y).toBeGreaterThan(1080 / 2);
+  });
+});
+```
+
+### Path aliases
+
+The `@/` alias resolves to `src/`. Use it for imports that would otherwise need long relative paths.
+
+```ts
+import { SUPPORTED_LOCALES } from "@/i18n/config";
+```
+
+### Running locally
+
+```bash
+npm run test          # run once
+npm run test:watch    # watch mode
+```
+
+---
+
+## Browser tests
+
+**Config:** `vitest.browser.config.ts`  
+**Runs in:** real Chromium via Playwright (headless)  
+**File pattern:** `src/**/*.browser.test.ts`  
+**CI commands:** `npm run test:browser:install` then `npm run test:browser`
+
+Use browser tests when the code under test depends on real browser APIs that jsdom doesn't implement: `VideoDecoder`, `VideoEncoder`, `MediaRecorder`, `OffscreenCanvas`, `WebGL`, etc.
+
+### File placement
+
+Name the file `<subject>.browser.test.ts` and place it next to the source file.
+
+```
+src/lib/exporter/videoExporter.ts
+src/lib/exporter/videoExporter.browser.test.ts
+```
+
+### Loading fixture assets
+
+Static assets (video files, images) live in `tests/fixtures/`. Import them with Vite's `?url` suffix so Vite serves them through the dev server.
+
+```ts
+import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+```
+
+### Example
+
+```ts
+import { describe, expect, it } from "vitest";
+import sampleVideoUrl from "../../../tests/fixtures/sample.webm?url";
+import { VideoExporter } from "./videoExporter";
+
+describe("VideoExporter (real browser)", () => {
+  it("exports a valid MP4 blob from a real video", async () => {
+    const exporter = new VideoExporter({
+      videoUrl: sampleVideoUrl,
+      width: 320,
+      height: 180,
+      frameRate: 15,
+      bitrate: 1_000_000,
+      wallpaper: "#1a1a2e",
+      zoomRegions: [],
+      showShadow: false,
+      shadowIntensity: 0,
+      showBlur: false,
+      cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+    });
+
+    const result = await exporter.export();
+
+    expect(result.success, result.error).toBe(true);
+    expect(result.blob).toBeInstanceOf(Blob);
+  });
+});
+```
+
+### Timeouts
+
+Browser tests have a default timeout of 120 seconds per test and 30 seconds per hook (set in `vitest.browser.config.ts`). Export operations are slow — prefer small fixture dimensions (320×180) and low bitrates to keep tests fast.
+
+### Running locally
+
+First install the browser (one-time):
+
+```bash
+npm run test:browser:install
+```
+
+Then run the tests:
+
+```bash
+npm run test:browser
+```
+
+---
+
+## Choosing the right type
+
+| Situation | Use |
+|---|---|
+| Pure function / data transformation | Unit test |
+| i18n key coverage | Unit test |
+| React hook logic (no real browser APIs) | Unit test |
+| `VideoDecoder` / `VideoEncoder` / `MediaRecorder` | Browser test |
+| `OffscreenCanvas` / WebGL / Pixi.js rendering | Browser test |
+| File export producing a real `Blob` | Browser test |

electron-builder.json5

@@ -3,6 +3,11 @@
   "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
   "appId": "com.siddharthvaddem.openscreen",
   "asar": true,
+  // .node binaries can't be dlopen'd from inside an asar — must live unpacked.
+  "asarUnpack": [
+    "node_modules/uiohook-napi/**/*",
+    "**/*.node"
+  ],
   "productName": "Openscreen",
   "npmRebuild": true,
   "buildDependenciesFromSource": true,
@@ -20,16 +25,20 @@
     "!CONTRIBUTING.md",
     "!LICENSE"
   ],
-  "extraResources": [
-    {
-      "from": "public/wallpapers",
-      "to": "assets/wallpapers"
-    }
-  ],
-  "publish": [{"provider": "github"}],
-
-  "mac": {
-    "hardenedRuntime": false,
+  // Asset layout contract: "wallpapers/" under resourcesPath must align with
+  // assetBaseDir in electron/preload.ts (packaged branch).
+  "extraResources": [
+    {
+      "from": "public/wallpapers",
+      "to": "wallpapers"
+    }
+  ],
+
+  "mac": {
+    "notarize": false,
+    "hardenedRuntime": true,
+    "entitlements": "macos.entitlements",
+    "entitlementsInherit": "macos.entitlements",
     "target": [
       {
         "target": "dmg",
@@ -38,30 +47,32 @@
     ],
     "icon": "icons/icons/mac/icon.icns",
     "artifactName": "${productName}-Mac-${arch}-${version}-Installer.${ext}",
-    "extendInfo": {
-      "NSAudioCaptureUsageDescription": "OpenScreen needs audio capture permission to record system audio.",
-      "NSMicrophoneUsageDescription": "OpenScreen needs microphone access to record voice audio.",
-      "NSCameraUsageDescription": "OpenScreen needs camera access to record webcam video.",
-      "NSCameraUseContinuityCameraDeviceType": true,
-      "com.apple.security.device.audio-input": true
-    }
+    "extendInfo": {
+      "NSAudioCaptureUsageDescription": "OpenScreen needs audio capture permission to record system audio.",
+      "NSMicrophoneUsageDescription": "OpenScreen needs microphone access to record voice audio.",
+      "NSCameraUsageDescription": "OpenScreen needs camera access to record webcam video.",
+      "NSScreenCaptureUsageDescription": "OpenScreen needs screen recording permission to detect and capture windows.",
+      "NSCameraUseContinuityCameraDeviceType": true
+    }
   },
   "linux": {
     "target": [
-      "AppImage"
+      "AppImage",
+      "deb",
+      "pacman"
     ],
     "icon": "icons/icons/png",
     "artifactName": "${productName}-Linux-${version}.${ext}",
     "category": "AudioVideo"
   },
-  "win": {
-    "target": [
-      "nsis"
-    ],
-    "icon": "icons/icons/win/icon.ico"
-  },
-  "nsis": {
-    "oneClick": false,
-    "allowToChangeInstallationDirectory": true
-  }
-}
+  "win": {
+    "target": [
+      "nsis"
+    ],
+    "icon": "icons/icons/win/icon.ico"
+  },
+  "nsis": {
+    "oneClick": false,
+    "allowToChangeInstallationDirectory": true
+  }
+}

electron/electron-env.d.ts

@@ -37,7 +37,12 @@ interface Window {
 			status: string;
 			error?: string;
 		}>;
-		getAssetBasePath: () => Promise<string | null>;
+		requestAccessibilityAccess: () => Promise<{
+			success: boolean;
+			granted: boolean;
+			error?: string;
+		}>;
+		assetBaseUrl: string;
 		storeRecordedVideo: (
 			videoData: ArrayBuffer,
 			fileName: string,
@@ -63,19 +68,36 @@ interface Window {
 			message?: string;
 			error?: string;
 		}>;
-		setRecordingState: (recording: boolean) => Promise<void>;
+		setRecordingState: (recording: boolean, recordingId?: number) => Promise<void>;
+		discardCursorTelemetry: (recordingId: number) => Promise<void>;
 		getCursorTelemetry: (videoPath?: string) => Promise<{
 			success: boolean;
 			samples: CursorTelemetryPoint[];
+			clicks: number[];
 			message?: string;
 			error?: string;
 		}>;
 		onStopRecordingFromTray: (callback: () => void) => () => void;
 		openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>;
-		saveExportedVideo: (
-			videoData: ArrayBuffer,
+		pickExportSavePath: (
 			fileName: string,
-		) => Promise<{ success: boolean; path?: string; message?: string; canceled?: boolean }>;
+			exportFolder?: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		writeExportToPath: (
+			videoData: ArrayBuffer,
+			filePath: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
 		openVideoFilePicker: () => Promise<{ success: boolean; path?: string; canceled?: boolean }>;
 		setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>;
 		setCurrentRecordingSession: (
@@ -135,10 +157,23 @@ 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>;
+		onCountdownOverlayValue: (callback: (value: number | null) => void) => () => void;
 		setMicrophoneExpanded: (expanded: boolean) => void;
 		setHasUnsavedChanges: (hasChanges: boolean) => void;
 		onRequestSaveBeforeClose: (callback: () => Promise<boolean> | boolean) => () => void;
+		onRequestCloseConfirm: (callback: () => void) => () => void;
+		sendCloseConfirmResponse: (choice: "save" | "discard" | "cancel") => void;
 		setLocale: (locale: string) => Promise<void>;
+		saveDiagnostic: (payload: {
+			error: string;
+			stack?: string;
+			projectState: unknown;
+			logs: string[];
+		}) => Promise<{ success: boolean; path?: string; canceled?: boolean; error?: string }>;
 	};
 }
 

electron/i18n.ts

@@ -1,30 +1,59 @@
 // Lightweight i18n for the Electron main process.
 // Imports the same JSON translation files used by the renderer.
 
+import commonAr from "../src/i18n/locales/ar/common.json";
+import dialogsAr from "../src/i18n/locales/ar/dialogs.json";
 import commonEn from "../src/i18n/locales/en/common.json";
 import dialogsEn from "../src/i18n/locales/en/dialogs.json";
 import commonEs from "../src/i18n/locales/es/common.json";
 import dialogsEs from "../src/i18n/locales/es/dialogs.json";
 import commonFr from "../src/i18n/locales/fr/common.json";
 import dialogsFr from "../src/i18n/locales/fr/dialogs.json";
+import commonJa from "../src/i18n/locales/ja-JP/common.json";
+import dialogsJa from "../src/i18n/locales/ja-JP/dialogs.json";
+import commonKo from "../src/i18n/locales/ko-KR/common.json";
+import dialogsKo from "../src/i18n/locales/ko-KR/dialogs.json";
+import commonTr from "../src/i18n/locales/tr/common.json";
+import dialogsTr from "../src/i18n/locales/tr/dialogs.json";
+import commonVi from "../src/i18n/locales/vi/common.json";
+import dialogsVi from "../src/i18n/locales/vi/dialogs.json";
 import commonZh from "../src/i18n/locales/zh-CN/common.json";
 import dialogsZh from "../src/i18n/locales/zh-CN/dialogs.json";
+import commonZhTw from "../src/i18n/locales/zh-TW/common.json";
+import dialogsZhTw from "../src/i18n/locales/zh-TW/dialogs.json";
 
-type Locale = "en" | "zh-CN" | "es" | "fr";
+type Locale = "en" | "zh-CN" | "zh-TW" | "es" | "fr" | "ja-JP" | "ko-KR" | "tr" | "ar" | "vi";
 type Namespace = "common" | "dialogs";
 type MessageMap = Record<string, unknown>;
 
 const messages: Record<Locale, Record<Namespace, MessageMap>> = {
 	en: { common: commonEn, dialogs: dialogsEn },
 	"zh-CN": { common: commonZh, dialogs: dialogsZh },
+	"zh-TW": { common: commonZhTw, dialogs: dialogsZhTw },
 	es: { common: commonEs, dialogs: dialogsEs },
 	fr: { common: commonFr, dialogs: dialogsFr },
+	"ja-JP": { common: commonJa, dialogs: dialogsJa },
+	"ko-KR": { common: commonKo, dialogs: dialogsKo },
+	tr: { common: commonTr, dialogs: dialogsTr },
+	ar: { common: commonAr, dialogs: dialogsAr },
+	vi: { common: commonVi, dialogs: dialogsVi },
 };
 
 let currentLocale: Locale = "en";
 
 export function setMainLocale(locale: string) {
-	if (locale === "en" || locale === "zh-CN" || locale === "es" || locale === "fr") {
+	if (
+		locale === "en" ||
+		locale === "zh-CN" ||
+		locale === "zh-TW" ||
+		locale === "es" ||
+		locale === "fr" ||
+		locale === "ja-JP" ||
+		locale === "ko-KR" ||
+		locale === "tr" ||
+		locale === "ar" ||
+		locale === "vi"
+	) {
 		currentLocale = locale;
 	}
 }

electron/ipc/handlers.ts

@@ -1,6 +1,11 @@
 import fs from "node:fs/promises";
+import { createRequire } from "node:module";
+import os from "node:os";
 import path from "node:path";
-import { fileURLToPath, pathToFileURL } from "node:url";
+import { fileURLToPath } from "node:url";
+
+const nodeRequire = createRequire(import.meta.url);
+
 import {
 	app,
 	BrowserWindow,
@@ -11,6 +16,10 @@ import {
 	shell,
 	systemPreferences,
 } from "electron";
+import {
+	type CursorTelemetryPoint,
+	createCursorTelemetryBuffer,
+} from "../../src/lib/cursorTelemetryBuffer";
 import {
 	normalizeProjectMedia,
 	normalizeRecordingSession,
@@ -52,6 +61,21 @@ function isPathAllowed(filePath: string): boolean {
 	return getAllowedReadDirs().some((dir) => isPathWithinDir(resolved, dir));
 }
 
+/**
+ * Helper function to build dialog options with a parent window only when it's valid.
+ * This prevents passing stale or destroyed BrowserWindow references to dialog calls.
+ */
+function buildDialogOptions<T extends Electron.OpenDialogOptions | Electron.SaveDialogOptions>(
+	baseOptions: T,
+	parentWindow: BrowserWindow | null,
+): T & { parent?: BrowserWindow } {
+	const mainWindow = parentWindow;
+	if (mainWindow && !mainWindow.isDestroyed()) {
+		return { ...baseOptions, parent: mainWindow };
+	}
+	return baseOptions;
+}
+
 function hasAllowedImportVideoExtension(filePath: string): boolean {
 	return ALLOWED_IMPORT_VIDEO_EXTENSIONS.has(path.extname(filePath).toLowerCase());
 }
@@ -275,14 +299,28 @@ async function storeRecordedSessionFiles(payload: StoreRecordedSessionInput) {
 	currentProjectPath = null;
 
 	const telemetryPath = `${screenVideoPath}.cursor.json`;
-	if (pendingCursorSamples.length > 0) {
-		await fs.writeFile(
-			telemetryPath,
-			JSON.stringify({ version: CURSOR_TELEMETRY_VERSION, samples: pendingCursorSamples }, null, 2),
-			"utf-8",
-		);
+	const pendingBatch = cursorTelemetryBuffer.takeNextBatch();
+	const pendingClicks = takeCursorClickTimestamps();
+	if ((pendingBatch && pendingBatch.samples.length > 0) || pendingClicks.length > 0) {
+		try {
+			await fs.writeFile(
+				telemetryPath,
+				JSON.stringify(
+					{
+						version: CURSOR_TELEMETRY_VERSION,
+						samples: pendingBatch?.samples ?? [],
+						clicks: pendingClicks,
+					},
+					null,
+					2,
+				),
+				"utf-8",
+			);
+		} catch (err) {
+			if (pendingBatch) cursorTelemetryBuffer.prependBatch(pendingBatch);
+			throw err;
+		}
 	}
-	pendingCursorSamples = [];
 
 	const sessionManifestPath = path.join(
 		RECORDINGS_DIR,
@@ -302,26 +340,120 @@ const CURSOR_TELEMETRY_VERSION = 1;
 const CURSOR_SAMPLE_INTERVAL_MS = 100;
 const MAX_CURSOR_SAMPLES = 60 * 60 * 10; // 1 hour @ 10Hz
 
-interface CursorTelemetryPoint {
-	timeMs: number;
-	cx: number;
-	cy: number;
-}
-
 let cursorCaptureInterval: NodeJS.Timeout | null = null;
 let cursorCaptureStartTimeMs = 0;
-let activeCursorSamples: CursorTelemetryPoint[] = [];
-let pendingCursorSamples: CursorTelemetryPoint[] = [];
+const cursorTelemetryBuffer = createCursorTelemetryBuffer({
+	maxActiveSamples: MAX_CURSOR_SAMPLES,
+});
+
+// Mouse click timestamps (macOS only — uiohook-napi behind Accessibility).
+const MAX_CURSOR_CLICKS = 60 * 60 * 60; // ~1 click/sec for an hour
+let cursorClickTimestampsMs: number[] = [];
+let uioHookInstance: {
+	start: () => void;
+	stop: () => void;
+	on: (...a: unknown[]) => void;
+	off?: (...a: unknown[]) => void;
+	removeListener?: (...a: unknown[]) => void;
+} | null = null;
+let uioHookMouseDownHandler: ((event: { time?: number }) => void) | null = null;
+let uioHookFailureLogged = false;
 
 function clamp(value: number, min: number, max: number) {
 	return Math.min(max, Math.max(min, value));
 }
 
+function loadUioHookForClicks(): typeof uioHookInstance {
+	try {
+		// Dynamic require + try/catch so a broken native binary doesn't crash startup.
+		const mod = nodeRequire("uiohook-napi");
+		const candidate = mod.uIOhook ?? mod.default?.uIOhook ?? mod.uiohook ?? mod.default;
+		if (candidate && typeof candidate.start === "function" && typeof candidate.on === "function") {
+			return candidate;
+		}
+		return null;
+	} catch (error) {
+		if (!uioHookFailureLogged) {
+			uioHookFailureLogged = true;
+			console.warn("[clickCapture] uiohook-napi unavailable:", error);
+		}
+		return null;
+	}
+}
+
+function startClickCapture() {
+	if (process.platform !== "darwin") return;
+	if (uioHookInstance) return;
+
+	// Passive check — the prompt fires from the renderer when the user toggles
+	// "Only on clicks" so it doesn't stack with the screen-recording prompt.
+	try {
+		if (!systemPreferences.isTrustedAccessibilityClient(false)) {
+			if (!uioHookFailureLogged) {
+				uioHookFailureLogged = true;
+				console.warn(
+					"[clickCapture] Accessibility permission not granted — click capture disabled.",
+				);
+			}
+			return;
+		}
+	} catch {
+		// fall through; uiohook will fail defensively below
+	}
+
+	const hook = loadUioHookForClicks();
+	if (!hook) return;
+
+	uioHookMouseDownHandler = (event) => {
+		const elapsed = Math.max(0, Date.now() - cursorCaptureStartTimeMs);
+		void event;
+		if (cursorClickTimestampsMs.length >= MAX_CURSOR_CLICKS) return;
+		cursorClickTimestampsMs.push(elapsed);
+	};
+
+	try {
+		hook.on("mousedown", uioHookMouseDownHandler);
+		hook.start();
+		uioHookInstance = hook;
+	} catch (error) {
+		if (!uioHookFailureLogged) {
+			uioHookFailureLogged = true;
+			console.warn("[clickCapture] failed to start uiohook:", error);
+		}
+		uioHookMouseDownHandler = null;
+	}
+}
+
+function stopClickCapture() {
+	if (!uioHookInstance) return;
+	try {
+		if (uioHookMouseDownHandler) {
+			if (typeof uioHookInstance.off === "function") {
+				uioHookInstance.off("mousedown", uioHookMouseDownHandler);
+			} else if (typeof uioHookInstance.removeListener === "function") {
+				uioHookInstance.removeListener("mousedown", uioHookMouseDownHandler);
+			}
+		}
+		uioHookInstance.stop();
+	} catch (error) {
+		console.warn("[clickCapture] failed to stop uiohook:", error);
+	}
+	uioHookInstance = null;
+	uioHookMouseDownHandler = null;
+}
+
+function takeCursorClickTimestamps(): number[] {
+	const out = cursorClickTimestampsMs;
+	cursorClickTimestampsMs = [];
+	return out;
+}
+
 function stopCursorCapture() {
 	if (cursorCaptureInterval) {
 		clearInterval(cursorCaptureInterval);
 		cursorCaptureInterval = null;
 	}
+	stopClickCapture();
 }
 
 function sampleCursorPoint() {
@@ -338,29 +470,173 @@ function sampleCursorPoint() {
 	const cx = clamp((cursor.x - bounds.x) / width, 0, 1);
 	const cy = clamp((cursor.y - bounds.y) / height, 0, 1);
 
-	activeCursorSamples.push({
+	cursorTelemetryBuffer.push({
 		timeMs: Math.max(0, Date.now() - cursorCaptureStartTimeMs),
 		cx,
 		cy,
 	});
-
-	if (activeCursorSamples.length > MAX_CURSOR_SAMPLES) {
-		activeCursorSamples.shift();
-	}
 }
 
 export function registerIpcHandlers(
 	createEditorWindow: () => void,
 	createSourceSelectorWindow: () => BrowserWindow,
+	createCountdownOverlayWindow: () => BrowserWindow,
 	getMainWindow: () => BrowserWindow | null,
 	getSourceSelectorWindow: () => BrowserWindow | null,
+	getCountdownOverlayWindow: () => BrowserWindow | null,
 	onRecordingStateChange?: (recording: boolean, sourceName: string) => void,
 	switchToHud?: () => void,
 ) {
+	const supportsWindowOpacity = process.platform !== "linux";
+	const countdownOverlayState = {
+		visible: false,
+		value: null as number | null,
+		activeRunId: null as number | null,
+		hideCommitId: 0,
+		hideCommitTimer: null as ReturnType<typeof setTimeout> | null,
+	};
+	const COUNTDOWN_OVERLAY_HIDE_DEBOUNCE_MS = 1200;
+
+	const clearCountdownOverlayHideCommit = () => {
+		if (countdownOverlayState.hideCommitTimer) {
+			clearTimeout(countdownOverlayState.hideCommitTimer);
+			countdownOverlayState.hideCommitTimer = null;
+		}
+	};
+
+	const commitCountdownOverlayHide = (win: BrowserWindow, hideCommitId: number) => {
+		if (win.isDestroyed()) {
+			return;
+		}
+
+		if (countdownOverlayState.visible || countdownOverlayState.hideCommitId !== hideCommitId) {
+			return;
+		}
+
+		win.hide();
+		if (supportsWindowOpacity) {
+			// Reset baseline opacity for the next show cycle.
+			win.setOpacity(1);
+		}
+	};
+
+	const flushCountdownOverlayState = (win: BrowserWindow) => {
+		if (win.isDestroyed()) {
+			return;
+		}
+
+		clearCountdownOverlayHideCommit();
+		win.webContents.send("countdown-overlay-value", countdownOverlayState.value);
+		if (!countdownOverlayState.visible) {
+			return;
+		}
+
+		if (win.isVisible()) {
+			if (supportsWindowOpacity) {
+				win.setOpacity(1);
+			}
+			return;
+		}
+
+		setTimeout(() => {
+			if (!win.isDestroyed() && countdownOverlayState.visible && !win.isVisible()) {
+				if (supportsWindowOpacity) {
+					win.setOpacity(0);
+				}
+				win.showInactive();
+
+				if (supportsWindowOpacity) {
+					setTimeout(() => {
+						if (!win.isDestroyed() && countdownOverlayState.visible && win.isVisible()) {
+							win.setOpacity(1);
+						}
+					}, 0);
+				}
+			}
+		}, 16);
+	};
+
+	ipcMain.handle("countdown-overlay-show", (_, value: number, runId: number) => {
+		countdownOverlayState.activeRunId = runId;
+		countdownOverlayState.visible = true;
+		countdownOverlayState.value = value;
+
+		const win = getCountdownOverlayWindow() ?? createCountdownOverlayWindow();
+		if (win.isDestroyed()) {
+			return;
+		}
+
+		if (win.webContents.isLoading()) {
+			win.webContents.once("did-finish-load", () => {
+				if (!win.isDestroyed()) {
+					flushCountdownOverlayState(win);
+				}
+			});
+		} else {
+			flushCountdownOverlayState(win);
+		}
+	});
+
+	ipcMain.handle("countdown-overlay-set-value", (_, value: number, runId: number) => {
+		if (countdownOverlayState.activeRunId !== runId || !countdownOverlayState.visible) {
+			return;
+		}
+
+		countdownOverlayState.value = value;
+
+		const win = getCountdownOverlayWindow();
+		if (!win || win.isDestroyed()) {
+			return;
+		}
+
+		if (win.webContents.isLoading()) {
+			return;
+		}
+
+		win.webContents.send("countdown-overlay-value", value);
+	});
+
+	ipcMain.handle("countdown-overlay-hide", (_, runId: number) => {
+		if (countdownOverlayState.activeRunId !== runId) {
+			return;
+		}
+
+		countdownOverlayState.visible = false;
+		countdownOverlayState.hideCommitId += 1;
+		const hideCommitId = countdownOverlayState.hideCommitId;
+		clearCountdownOverlayHideCommit();
+
+		const win = getCountdownOverlayWindow();
+		if (!win || win.isDestroyed()) {
+			countdownOverlayState.value = null;
+			return;
+		}
+
+		if (supportsWindowOpacity) {
+			// Hide visually immediately to avoid hide/show compositor flashes on rapid restart.
+			win.setOpacity(0);
+		}
+
+		countdownOverlayState.value = null;
+		if (!win.webContents.isLoading()) {
+			win.webContents.send("countdown-overlay-value", countdownOverlayState.value);
+		}
+
+		if (!supportsWindowOpacity) {
+			win.hide();
+			return;
+		}
+
+		countdownOverlayState.hideCommitTimer = setTimeout(() => {
+			countdownOverlayState.hideCommitTimer = null;
+			commitCountdownOverlayHide(win, hideCommitId);
+		}, COUNTDOWN_OVERLAY_HIDE_DEBOUNCE_MS);
+	});
+
 	ipcMain.handle("switch-to-hud", () => {
 		if (switchToHud) switchToHud();
 	});
-	ipcMain.handle("start-new-recording", async () => {
+	ipcMain.handle("start-new-recording", () => {
 		try {
 			setCurrentRecordingSessionState(null);
 			if (switchToHud) {
@@ -374,14 +650,27 @@ export function registerIpcHandlers(
 	});
 
 	ipcMain.handle("get-sources", async (_, opts) => {
+		const ownWindowSourceIds = new Set(
+			BrowserWindow.getAllWindows()
+				.map((win) => {
+					try {
+						return win.getMediaSourceId();
+					} catch {
+						return null;
+					}
+				})
+				.filter((id): id is string => Boolean(id)),
+		);
 		const sources = await desktopCapturer.getSources(opts);
-		return sources.map((source) => ({
-			id: source.id,
-			name: source.name,
-			display_id: source.display_id,
-			thumbnail: source.thumbnail ? source.thumbnail.toDataURL() : null,
-			appIcon: source.appIcon ? source.appIcon.toDataURL() : null,
-		}));
+		return sources
+			.filter((source) => !ownWindowSourceIds.has(source.id))
+			.map((source) => ({
+				id: source.id,
+				name: source.name,
+				display_id: source.display_id,
+				thumbnail: source.thumbnail ? source.thumbnail.toDataURL() : null,
+				appIcon: source.appIcon ? source.appIcon.toDataURL() : null,
+			}));
 	});
 
 	ipcMain.handle("select-source", (_, source: SelectedSource) => {
@@ -429,6 +718,48 @@ export function registerIpcHandlers(
 		}
 	});
 
+	ipcMain.handle("request-screen-access", async () => {
+		if (process.platform !== "darwin") {
+			return { success: true, granted: true, status: "granted" };
+		}
+
+		try {
+			const status = systemPreferences.getMediaAccessStatus("screen");
+			if (status === "granted") {
+				return { success: true, granted: true, status };
+			}
+
+			// Screen recording has no askForMediaAccess equivalent — the TCC prompt
+			// is triggered by desktopCapturer.getSources(). Fire it and return so
+			// the renderer can re-check status after the user responds.
+			if (status === "not-determined") {
+				desktopCapturer.getSources({ types: ["screen"] }).catch(() => {});
+				return { success: true, granted: false, status: "not-determined" };
+			}
+
+			return { success: true, granted: false, status };
+		} catch (error) {
+			console.error("Failed to request screen access:", error);
+			return { success: false, granted: false, status: "unknown", error: String(error) };
+		}
+	});
+
+	// macOS Accessibility prompt for global click capture. First call shows the
+	// system dialog; the user has to toggle the app in System Settings (no
+	// programmatic grant exists for Accessibility).
+	ipcMain.handle("request-accessibility-access", () => {
+		if (process.platform !== "darwin") {
+			return { success: true, granted: true };
+		}
+		try {
+			const granted = systemPreferences.isTrustedAccessibilityClient(true);
+			return { success: true, granted };
+		} catch (error) {
+			console.error("Failed to request accessibility access:", error);
+			return { success: false, granted: false, error: String(error) };
+		}
+	});
+
 	ipcMain.handle("open-source-selector", () => {
 		const sourceSelectorWin = getSourceSelectorWindow();
 		if (sourceSelectorWin) {
@@ -490,7 +821,24 @@ export function registerIpcHandlers(
 				return { success: false, message: "No recorded video found" };
 			}
 
-			const latestVideo = videoFiles.sort().reverse()[0];
+			// Sort by most recently modified to reliably get the latest recording.
+			// Lexicographic sort is unreliable (e.g. recording-9.webm > recording-10.webm).
+			let latestVideo: string | null = null;
+			let latestMtimeMs = 0;
+			for (const file of videoFiles) {
+				try {
+					const stat = await fs.stat(path.join(RECORDINGS_DIR, file));
+					if (stat.mtimeMs > latestMtimeMs) {
+						latestMtimeMs = stat.mtimeMs;
+						latestVideo = file;
+					}
+				} catch {
+					// Skip inaccessible files.
+				}
+			}
+			if (!latestVideo) {
+				return { success: false, message: "No recorded video found" };
+			}
 			const videoPath = path.join(RECORDINGS_DIR, latestVideo);
 
 			return { success: true, path: videoPath };
@@ -531,18 +879,23 @@ export function registerIpcHandlers(
 		}
 	});
 
-	ipcMain.handle("set-recording-state", (_, recording: boolean) => {
+	ipcMain.handle("set-recording-state", (_, recording: boolean, recordingId?: number) => {
 		if (recording) {
 			stopCursorCapture();
-			activeCursorSamples = [];
-			pendingCursorSamples = [];
+			// The renderer is the source of truth for the recording id (it
+			// uses the same id as the saved fileName). Fall back to a
+			// timestamp only if the renderer didn't supply one, so the
+			// buffer always has a stable key per session.
+			const id = typeof recordingId === "number" ? recordingId : Date.now();
+			cursorTelemetryBuffer.startSession(id);
 			cursorCaptureStartTimeMs = Date.now();
+			cursorClickTimestampsMs = [];
+			startClickCapture();
 			sampleCursorPoint();
 			cursorCaptureInterval = setInterval(sampleCursorPoint, CURSOR_SAMPLE_INTERVAL_MS);
 		} else {
 			stopCursorCapture();
-			pendingCursorSamples = [...activeCursorSamples];
-			activeCursorSamples = [];
+			cursorTelemetryBuffer.endSession();
 		}
 
 		const source = selectedSource || { name: "Screen" };
@@ -551,6 +904,10 @@ export function registerIpcHandlers(
 		}
 	});
 
+	ipcMain.handle("discard-cursor-telemetry", (_, recordingId: number) => {
+		cursorTelemetryBuffer.discardBatch(recordingId);
+	});
+
 	ipcMain.handle("get-cursor-telemetry", async (_, videoPath?: string) => {
 		const targetVideoPath = normalizeVideoSourcePath(
 			videoPath ?? currentRecordingSession?.screenVideoPath,
@@ -598,11 +955,19 @@ export function registerIpcHandlers(
 				})
 				.sort((a: CursorTelemetryPoint, b: CursorTelemetryPoint) => a.timeMs - b.timeMs);
 
-			return { success: true, samples };
+			const rawClicks = Array.isArray(parsed?.clicks) ? parsed.clicks : [];
+			const clicks: number[] = rawClicks
+				.map((value: unknown) =>
+					typeof value === "number" && Number.isFinite(value) ? Math.max(0, value) : null,
+				)
+				.filter((v: number | null): v is number => v !== null)
+				.sort((a: number, b: number) => a - b);
+
+			return { success: true, samples, clicks };
 		} catch (error) {
 			const nodeError = error as NodeJS.ErrnoException;
 			if (nodeError.code === "ENOENT") {
-				return { success: true, samples: [] };
+				return { success: true, samples: [], clicks: [] };
 			}
 			console.error("Failed to load cursor telemetry:", error);
 			return {
@@ -610,13 +975,26 @@ export function registerIpcHandlers(
 				message: "Failed to load cursor telemetry",
 				error: String(error),
 				samples: [],
+				clicks: [],
 			};
 		}
 	});
 
 	ipcMain.handle("open-external-url", async (_, url: string) => {
 		try {
-			await shell.openExternal(url);
+			const ALLOWED_SCHEMES = ["http:", "https:", "mailto:"];
+			let parsed: URL;
+			try {
+				parsed = new URL(url);
+			} catch {
+				return { success: false, error: "Invalid URL" };
+			}
+
+			if (!ALLOWED_SCHEMES.includes(parsed.protocol)) {
+				return { success: false, error: `Unsupported URL scheme: ${parsed.protocol}` };
+			}
+
+			await shell.openExternal(parsed.toString());
 			return { success: true };
 		} catch (error) {
 			console.error("Failed to open URL:", error);
@@ -624,55 +1002,91 @@ export function registerIpcHandlers(
 		}
 	});
 
-	// Return base path for assets so renderer can resolve file:// paths in production
-	ipcMain.handle("get-asset-base-path", () => {
-		try {
-			if (app.isPackaged) {
-				const assetPath = path.join(process.resourcesPath, "assets");
-				return pathToFileURL(`${assetPath}${path.sep}`).toString();
-			}
-			const assetPath = path.join(app.getAppPath(), "public", "assets");
-			return pathToFileURL(`${assetPath}${path.sep}`).toString();
-		} catch (err) {
-			console.error("Failed to resolve asset base path:", err);
-			return null;
-		}
-	});
+	/**
+	 * Handles saving an exported video file.
+	 * Shows a save dialog, normalizes the file path for the current OS,
+	 * ensures the directory exists, and writes the video data.
+	 * @param _ - Unused event parameter.
+	 * @param videoData - The exported video as an ArrayBuffer.
+	 * @param fileName - Suggested filename for the save dialog.
+	 * @returns Object with success status, optional file path, and error details.
+	 */
 
-	ipcMain.handle("save-exported-video", async (_, videoData: ArrayBuffer, fileName: string) => {
+	ipcMain.handle("pick-export-save-path", async (_, fileName: string, exportFolder?: string) => {
 		try {
-			// Determine file type from extension
 			const isGif = fileName.toLowerCase().endsWith(".gif");
 			const filters = isGif
 				? [{ name: mainT("dialogs", "fileDialogs.gifImage"), extensions: ["gif"] }]
 				: [{ name: mainT("dialogs", "fileDialogs.mp4Video"), extensions: ["mp4"] }];
 
-			const result = await dialog.showSaveDialog({
-				title: isGif
-					? mainT("dialogs", "fileDialogs.saveGif")
-					: mainT("dialogs", "fileDialogs.saveVideo"),
-				defaultPath: path.join(app.getPath("downloads"), fileName),
-				filters,
-				properties: ["createDirectory", "showOverwriteConfirmation"],
-			});
+			// Prefer the user's last export folder if it still exists, otherwise fall
+			// back to ~/Downloads. Validation must happen here because the renderer
+			// can't stat the filesystem.
+			let defaultDir = app.getPath("downloads");
+			if (exportFolder) {
+				try {
+					const stats = await fs.stat(exportFolder);
+					if (stats.isDirectory()) {
+						defaultDir = exportFolder;
+					}
+				} catch (err) {
+					console.warn(
+						`Could not access remembered export folder "${exportFolder}", falling back to Downloads:`,
+						err,
+					);
+				}
+			}
+			const dialogOptions = buildDialogOptions(
+				{
+					title: isGif
+						? mainT("dialogs", "fileDialogs.saveGif")
+						: mainT("dialogs", "fileDialogs.saveVideo"),
+					defaultPath: path.join(defaultDir, fileName),
+					filters,
+					properties: ["createDirectory", "showOverwriteConfirmation"],
+				},
+				getMainWindow(),
+			);
+			const result = await dialog.showSaveDialog(dialogOptions);
 
 			if (result.canceled || !result.filePath) {
-				return {
-					success: false,
-					canceled: true,
-					message: "Export canceled",
-				};
+				return { success: false, canceled: true, message: "Export canceled" };
 			}
 
-			await fs.writeFile(result.filePath, Buffer.from(videoData));
+			return { success: true, path: path.normalize(result.filePath) };
+		} catch (error) {
+			console.error("Failed to show save dialog:", error);
+			return {
+				success: false,
+				message: "Failed to show save dialog",
+				error: String(error),
+			};
+		}
+	});
+
+	ipcMain.handle("write-export-to-path", async (_, videoData: ArrayBuffer, filePath: string) => {
+		try {
+			// Sanity-check the path. The renderer is trusted (contextIsolation is on),
+			// but a stale state bug shouldn't be able to clobber arbitrary files.
+			if (typeof filePath !== "string" || !path.isAbsolute(filePath)) {
+				return { success: false, message: "Invalid path" };
+			}
+			const lower = filePath.toLowerCase();
+			if (!lower.endsWith(".mp4") && !lower.endsWith(".gif")) {
+				return { success: false, message: "Invalid file type" };
+			}
+
+			const normalizedPath = path.normalize(filePath);
+			await fs.mkdir(path.dirname(normalizedPath), { recursive: true });
+			await fs.writeFile(normalizedPath, Buffer.from(videoData));
 
 			return {
 				success: true,
-				path: result.filePath,
+				path: normalizedPath,
 				message: "Video exported successfully",
 			};
 		} catch (error) {
-			console.error("Failed to save exported video:", error);
+			console.error("Failed to write exported video:", error);
 			return {
 				success: false,
 				message: "Failed to save exported video",
@@ -680,21 +1094,24 @@ export function registerIpcHandlers(
 			};
 		}
 	});
-
 	ipcMain.handle("open-video-file-picker", async () => {
 		try {
-			const result = await dialog.showOpenDialog({
-				title: mainT("dialogs", "fileDialogs.selectVideo"),
-				defaultPath: RECORDINGS_DIR,
-				filters: [
-					{
-						name: mainT("dialogs", "fileDialogs.videoFiles"),
-						extensions: ["webm", "mp4", "mov", "avi", "mkv"],
-					},
-					{ name: mainT("dialogs", "fileDialogs.allFiles"), extensions: ["*"] },
-				],
-				properties: ["openFile"],
-			});
+			const dialogOptions = buildDialogOptions(
+				{
+					title: mainT("dialogs", "fileDialogs.selectVideo"),
+					defaultPath: RECORDINGS_DIR,
+					filters: [
+						{
+							name: mainT("dialogs", "fileDialogs.videoFiles"),
+							extensions: ["webm", "mp4", "mov", "avi", "mkv"],
+						},
+						{ name: mainT("dialogs", "fileDialogs.allFiles"), extensions: ["*"] },
+					],
+					properties: ["openFile"],
+				},
+				getMainWindow(),
+			);
+			const result = await dialog.showOpenDialog(dialogOptions);
 
 			if (result.canceled || result.filePaths.length === 0) {
 				return { success: false, canceled: true };
@@ -773,18 +1190,22 @@ export function registerIpcHandlers(
 					? safeName
 					: `${safeName}.${PROJECT_FILE_EXTENSION}`;
 
-				const result = await dialog.showSaveDialog({
-					title: mainT("dialogs", "fileDialogs.saveProject"),
-					defaultPath: path.join(RECORDINGS_DIR, defaultName),
-					filters: [
-						{
-							name: mainT("dialogs", "fileDialogs.openscreenProject"),
-							extensions: [PROJECT_FILE_EXTENSION],
-						},
-						{ name: "JSON", extensions: ["json"] },
-					],
-					properties: ["createDirectory", "showOverwriteConfirmation"],
-				});
+				const dialogOptions = buildDialogOptions(
+					{
+						title: mainT("dialogs", "fileDialogs.saveProject"),
+						defaultPath: path.join(RECORDINGS_DIR, defaultName),
+						filters: [
+							{
+								name: mainT("dialogs", "fileDialogs.openscreenProject"),
+								extensions: [PROJECT_FILE_EXTENSION],
+							},
+							{ name: "JSON", extensions: ["json"] },
+						],
+						properties: ["createDirectory", "showOverwriteConfirmation"],
+					},
+					getMainWindow(),
+				);
+				const result = await dialog.showSaveDialog(dialogOptions);
 
 				if (result.canceled || !result.filePath) {
 					return {
@@ -815,19 +1236,23 @@ export function registerIpcHandlers(
 
 	ipcMain.handle("load-project-file", async () => {
 		try {
-			const result = await dialog.showOpenDialog({
-				title: mainT("dialogs", "fileDialogs.openProject"),
-				defaultPath: RECORDINGS_DIR,
-				filters: [
-					{
-						name: mainT("dialogs", "fileDialogs.openscreenProject"),
-						extensions: [PROJECT_FILE_EXTENSION],
-					},
-					{ name: "JSON", extensions: ["json"] },
-					{ name: mainT("dialogs", "fileDialogs.allFiles"), extensions: ["*"] },
-				],
-				properties: ["openFile"],
-			});
+			const dialogOptions = buildDialogOptions(
+				{
+					title: mainT("dialogs", "fileDialogs.openProject"),
+					defaultPath: RECORDINGS_DIR,
+					filters: [
+						{
+							name: mainT("dialogs", "fileDialogs.openscreenProject"),
+							extensions: [PROJECT_FILE_EXTENSION],
+						},
+						{ name: "JSON", extensions: ["json"] },
+						{ name: mainT("dialogs", "fileDialogs.allFiles"), extensions: ["*"] },
+					],
+					properties: ["openFile"],
+				},
+				getMainWindow(),
+			);
+			const result = await dialog.showOpenDialog(dialogOptions);
 
 			if (result.canceled || result.filePaths.length === 0) {
 				return { success: false, canceled: true, message: "Open project canceled" };
@@ -949,4 +1374,45 @@ export function registerIpcHandlers(
 			return { success: false, error: String(error) };
 		}
 	});
+
+	ipcMain.handle(
+		"save-diagnostic",
+		async (
+			_,
+			payload: { error: string; stack?: string; projectState: unknown; logs: string[] },
+		) => {
+			const { filePath, canceled } = await dialog.showSaveDialog({
+				title: "Save Diagnostic File",
+				defaultPath: `openscreen-diagnostic-${Date.now()}.json`,
+				filters: [{ name: "JSON", extensions: ["json"] }],
+			});
+
+			if (canceled || !filePath) return { success: false, canceled: true };
+
+			const diagnostic = {
+				timestamp: new Date().toISOString(),
+				appVersion: app.getVersion(),
+				platform: process.platform,
+				arch: process.arch,
+				osRelease: os.release(),
+				osVersion: os.version(),
+				totalMemoryMB: Math.round(os.totalmem() / 1024 / 1024),
+				nodeVersion: process.versions.node,
+				electronVersion: process.versions.electron,
+				chromeVersion: process.versions.chrome,
+				error: payload.error,
+				stack: payload.stack,
+				projectState: payload.projectState,
+				recentLogs: payload.logs,
+			};
+
+			try {
+				await fs.writeFile(filePath, JSON.stringify(diagnostic, null, 2), "utf-8");
+				return { success: true, path: filePath };
+			} catch (error) {
+				console.error("Failed to write diagnostic file:", error);
+				return { success: false, error: String(error) };
+			}
+		},
+	);
 }

electron/main.ts

@@ -4,7 +4,7 @@ import { fileURLToPath } from "node:url";
 import {
 	app,
 	BrowserWindow,
-	dialog,
+	desktopCapturer,
 	ipcMain,
 	Menu,
 	nativeImage,
@@ -14,7 +14,12 @@ import {
 } from "electron";
 import { mainT, setMainLocale } from "./i18n";
 import { registerIpcHandlers } from "./ipc/handlers";
-import { createEditorWindow, createHudOverlayWindow, createSourceSelectorWindow } from "./windows";
+import {
+	createCountdownOverlayWindow,
+	createEditorWindow,
+	createHudOverlayWindow,
+	createSourceSelectorWindow,
+} from "./windows";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
@@ -25,6 +30,18 @@ if (process.platform === "darwin") {
 	app.commandLine.appendSwitch("disable-features", "MacCatapLoopbackAudioForScreenShare");
 }
 
+// Enable Wayland support for proper screen capture and window management
+// on Wayland compositors (Hyprland, GNOME, KDE, etc.)
+if (process.platform === "linux") {
+	const isWayland =
+		process.env.XDG_SESSION_TYPE === "wayland" || process.env.WAYLAND_DISPLAY !== undefined;
+	if (isWayland) {
+		app.commandLine.appendSwitch("ozone-platform", "wayland");
+		// Enable WebRTCPipeWireCapturer for screen capture on Wayland
+		app.commandLine.appendSwitch("enable-features", "WaylandWindowDrag,WebRTCPipeWireCapturer");
+	}
+}
+
 export const RECORDINGS_DIR = path.join(app.getPath("userData"), "recordings");
 
 async function ensureRecordingsDir() {
@@ -60,12 +77,15 @@ process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
 // Window references
 let mainWindow: BrowserWindow | null = null;
 let sourceSelectorWindow: BrowserWindow | null = null;
+let countdownOverlayWindow: BrowserWindow | null = null;
 let tray: Tray | null = null;
 let selectedSourceName = "";
+const isMac = process.platform === "darwin";
+const trayIconSize = isMac ? 16 : 24;
 
 // Tray Icons
-const defaultTrayIcon = getTrayIcon("openscreen.png");
-const recordingTrayIcon = getTrayIcon("rec-button.png");
+const defaultTrayIcon = getTrayIcon("openscreen.png", trayIconSize);
+const recordingTrayIcon = getTrayIcon("rec-button.png", trayIconSize);
 
 function createWindow() {
 	mainWindow = createHudOverlayWindow();
@@ -116,15 +136,30 @@ function setupApplicationMenu() {
 		template.push({
 			label: app.name,
 			submenu: [
-				{ role: "about" },
+				{
+					role: "about",
+					label: mainT("common", "actions.about") || "About OpenScreen",
+				},
 				{ type: "separator" },
-				{ role: "services" },
+				{
+					role: "services",
+					label: mainT("common", "actions.services") || "Services",
+				},
 				{ type: "separator" },
-				{ role: "hide" },
-				{ role: "hideOthers" },
-				{ role: "unhide" },
+				{
+					role: "hide",
+					label: mainT("common", "actions.hide") || "Hide OpenScreen",
+				},
+				{
+					role: "hideOthers",
+					label: mainT("common", "actions.hideOthers") || "Hide Others",
+				},
+				{
+					role: "unhide",
+					label: mainT("common", "actions.unhide") || "Show All",
+				},
 				{ type: "separator" },
-				{ role: "quit" },
+				{ role: "quit", label: mainT("common", "actions.quit") || "Quit" },
 			],
 		});
 	}
@@ -148,40 +183,89 @@ function setupApplicationMenu() {
 					accelerator: "CmdOrCtrl+Shift+S",
 					click: () => sendEditorMenuAction("menu-save-project-as"),
 				},
-				...(isMac ? [] : [{ type: "separator" as const }, { role: "quit" as const }]),
+				...(isMac
+					? []
+					: [
+							{ type: "separator" as const },
+							{
+								role: "quit" as const,
+								label: mainT("common", "actions.quit") || "Quit",
+							},
+						]),
 			],
 		},
 		{
 			label: mainT("common", "actions.edit") || "Edit",
 			submenu: [
-				{ role: "undo" },
-				{ role: "redo" },
+				{ role: "undo", label: mainT("common", "actions.undo") || "Undo" },
+				{ role: "redo", label: mainT("common", "actions.redo") || "Redo" },
 				{ type: "separator" },
-				{ role: "cut" },
-				{ role: "copy" },
-				{ role: "paste" },
-				{ role: "selectAll" },
+				{ role: "cut", label: mainT("common", "actions.cut") || "Cut" },
+				{ role: "copy", label: mainT("common", "actions.copy") || "Copy" },
+				{ role: "paste", label: mainT("common", "actions.paste") || "Paste" },
+				{
+					role: "selectAll",
+					label: mainT("common", "actions.selectAll") || "Select All",
+				},
 			],
 		},
 		{
 			label: mainT("common", "actions.view") || "View",
 			submenu: [
-				{ role: "reload" },
-				{ role: "forceReload" },
-				{ role: "toggleDevTools" },
+				{
+					role: "reload",
+					label: mainT("common", "actions.reload") || "Reload",
+				},
+				{
+					role: "forceReload",
+					label: mainT("common", "actions.forceReload") || "Force Reload",
+				},
+				{
+					role: "toggleDevTools",
+					label: mainT("common", "actions.toggleDevTools") || "Toggle Developer Tools",
+				},
 				{ type: "separator" },
-				{ role: "resetZoom" },
-				{ role: "zoomIn" },
-				{ role: "zoomOut" },
+				{
+					role: "resetZoom",
+					label: mainT("common", "actions.actualSize") || "Actual Size",
+				},
+				{
+					role: "zoomIn",
+					label: mainT("common", "actions.zoomIn") || "Zoom In",
+				},
+				{
+					role: "zoomOut",
+					label: mainT("common", "actions.zoomOut") || "Zoom Out",
+				},
 				{ type: "separator" },
-				{ role: "togglefullscreen" },
+				{
+					role: "togglefullscreen",
+					label: mainT("common", "actions.toggleFullScreen") || "Toggle Full Screen",
+				},
 			],
 		},
 		{
 			label: mainT("common", "actions.window") || "Window",
 			submenu: isMac
-				? [{ role: "minimize" }, { role: "zoom" }, { type: "separator" }, { role: "front" }]
-				: [{ role: "minimize" }, { role: "close" }],
+				? [
+						{
+							role: "minimize",
+							label: mainT("common", "actions.minimize") || "Minimize",
+						},
+						{ role: "zoom" },
+						{ type: "separator" },
+						{ role: "front" },
+					]
+				: [
+						{
+							role: "minimize",
+							label: mainT("common", "actions.minimize") || "Minimize",
+						},
+						{
+							role: "close",
+							label: mainT("common", "actions.close") || "Close",
+						},
+					],
 		},
 	);
 
@@ -199,12 +283,12 @@ function createTray() {
 	});
 }
 
-function getTrayIcon(filename: string) {
+function getTrayIcon(filename: string, size: number) {
 	return nativeImage
 		.createFromPath(path.join(process.env.VITE_PUBLIC || RENDERER_DIST, filename))
 		.resize({
-			width: 24,
-			height: 24,
+			width: size,
+			height: size,
 			quality: "best",
 		});
 }
@@ -212,7 +296,11 @@ function getTrayIcon(filename: string) {
 function updateTrayMenu(recording: boolean = false) {
 	if (!tray) return;
 	const trayIcon = recording ? recordingTrayIcon : defaultTrayIcon;
-	const trayToolTip = recording ? `Recording: ${selectedSourceName}` : "OpenScreen";
+	const trayToolTip = recording
+		? mainT("common", "actions.recordingStatus", {
+				source: selectedSourceName,
+			}) || `Recording: ${selectedSourceName}`
+		: "OpenScreen";
 	const menuTemplate = recording
 		? [
 				{
@@ -245,6 +333,7 @@ function updateTrayMenu(recording: boolean = false) {
 
 let editorHasUnsavedChanges = false;
 let isForceClosing = false;
+let isCloseConfirmInFlight = false;
 
 ipcMain.on("set-has-unsaved-changes", (_, hasChanges: boolean) => {
 	editorHasUnsavedChanges = hasChanges;
@@ -276,39 +365,35 @@ function createEditorWindowWrapper() {
 	editorHasUnsavedChanges = false;
 
 	mainWindow.on("close", (event) => {
-		if (isForceClosing || !editorHasUnsavedChanges) return;
+		if (isForceClosing || !editorHasUnsavedChanges || isCloseConfirmInFlight) return;
 
 		event.preventDefault();
-
-		const choice = dialog.showMessageBoxSync(mainWindow!, {
-			type: "warning",
-			buttons: [
-				mainT("dialogs", "unsavedChanges.saveAndClose"),
-				mainT("dialogs", "unsavedChanges.discardAndClose"),
-				mainT("common", "actions.cancel"),
-			],
-			defaultId: 0,
-			cancelId: 2,
-			title: mainT("dialogs", "unsavedChanges.title"),
-			message: mainT("dialogs", "unsavedChanges.message"),
-			detail: mainT("dialogs", "unsavedChanges.detail"),
-		});
+		isCloseConfirmInFlight = true;
 
 		const windowToClose = mainWindow;
 		if (!windowToClose || windowToClose.isDestroyed()) return;
 
-		if (choice === 0) {
-			// Save & Close — tell renderer to save, then close
-			windowToClose.webContents.send("request-save-before-close");
-			ipcMain.once("save-before-close-done", (_, shouldClose: boolean) => {
-				if (!shouldClose) return;
+		// Ask renderer to show the custom in-app dialog
+		windowToClose.webContents.send("request-close-confirm");
+
+		ipcMain.once("close-confirm-response", (event, choice: "save" | "discard" | "cancel") => {
+			if (event.sender.id !== windowToClose?.webContents.id) return;
+			isCloseConfirmInFlight = false;
+			if (!windowToClose || windowToClose.isDestroyed()) return;
+
+			if (choice === "save") {
+				// Tell renderer to save the project, then close when done
+				windowToClose.webContents.send("request-save-before-close");
+				ipcMain.once("save-before-close-done", (event, shouldClose: boolean) => {
+					if (event.sender.id !== windowToClose?.webContents.id) return;
+					if (!shouldClose) return;
+					forceCloseEditorWindow(windowToClose);
+				});
+			} else if (choice === "discard") {
 				forceCloseEditorWindow(windowToClose);
-			});
-		} else if (choice === 1) {
-			// Discard & Close
-			forceCloseEditorWindow(windowToClose);
-		}
-		// choice === 2: Cancel — do nothing, window stays open
+			}
+			// "cancel": flag reset, window stays open
+		});
 	});
 }
 
@@ -320,39 +405,93 @@ function createSourceSelectorWindowWrapper() {
 	return sourceSelectorWindow;
 }
 
-// On macOS, applications and their menu bar stay active until the user quits
-// explicitly with Cmd + Q.
+function createCountdownOverlayWindowWrapper() {
+	if (countdownOverlayWindow && !countdownOverlayWindow.isDestroyed()) {
+		return countdownOverlayWindow;
+	}
+
+	countdownOverlayWindow = createCountdownOverlayWindow();
+	countdownOverlayWindow.on("closed", () => {
+		countdownOverlayWindow = null;
+	});
+	return countdownOverlayWindow;
+}
+
+// Closing every window quits the app entirely (tray icon goes too).
+// The in-app "Return to Recorder" button covers the editor → HUD round-trip,
+// so closing the last window is an explicit "I'm done" signal.
 app.on("window-all-closed", () => {
-	// Keep app running (macOS behavior)
+	app.quit();
 });
 
 app.on("activate", () => {
 	// On OS X it's common to re-create a window in the app when the
 	// dock icon is clicked and there are no other windows open.
-	if (BrowserWindow.getAllWindows().length === 0) {
-		createWindow();
+	const hasVisibleWindow = BrowserWindow.getAllWindows().some((window) => {
+		if (window.isDestroyed() || !window.isVisible()) {
+			return false;
+		}
+
+		const url = window.webContents.getURL();
+		const isCountdownOverlayWindow = url.includes("windowType=countdown-overlay");
+		return !isCountdownOverlayWindow;
+	});
+	if (!hasVisibleWindow) {
+		showMainWindow();
 	}
 });
 
 // Register all IPC handlers when app is ready
 app.whenReady().then(async () => {
-	// Allow microphone/media permission checks
+	// Force the app into "regular" activation policy so the Dock icon appears.
+	// The HUD overlay (transparent + frameless + skipTaskbar) is the first
+	// window we open, and AppKit otherwise classifies us as an accessory app.
+	if (process.platform === "darwin") {
+		app.dock?.show();
+	}
+
+	// Allow microphone/media/screen permission checks
 	session.defaultSession.setPermissionCheckHandler((_webContents, permission) => {
-		const allowed = ["media", "audioCapture", "microphone", "videoCapture", "camera"];
+		const allowed = [
+			"media",
+			"audioCapture",
+			"microphone",
+			"videoCapture",
+			"camera",
+			"screen",
+			"display-capture",
+		];
 		return allowed.includes(permission);
 	});
 
 	session.defaultSession.setPermissionRequestHandler((_webContents, permission, callback) => {
-		const allowed = ["media", "audioCapture", "microphone", "videoCapture", "camera"];
+		const allowed = [
+			"media",
+			"audioCapture",
+			"microphone",
+			"videoCapture",
+			"camera",
+			"screen",
+			"display-capture",
+		];
 		callback(allowed.includes(permission));
 	});
 
-	// Request microphone permission from macOS
+	// Request microphone and screen recording permissions from macOS
 	if (process.platform === "darwin") {
 		const micStatus = systemPreferences.getMediaAccessStatus("microphone");
 		if (micStatus !== "granted") {
 			await systemPreferences.askForMediaAccess("microphone");
 		}
+
+		// Screen recording has no askForMediaAccess equivalent — the TCC prompt is
+		// triggered by the first desktopCapturer.getSources() call. Firing it here
+		// at startup settles the permission state early and prevents repeated prompts
+		// driven by later getSources() calls (fixes repeated permission dialog).
+		const screenStatus = systemPreferences.getMediaAccessStatus("screen");
+		if (screenStatus === "not-determined") {
+			desktopCapturer.getSources({ types: ["screen"] }).catch(() => {});
+		}
 	}
 
 	// Listen for HUD overlay quit event (macOS only)
@@ -384,8 +523,10 @@ app.whenReady().then(async () => {
 	registerIpcHandlers(
 		createEditorWindowWrapper,
 		createSourceSelectorWindowWrapper,
+		createCountdownOverlayWindowWrapper,
 		() => mainWindow,
 		() => sourceSelectorWindow,
+		() => countdownOverlayWindow,
 		(recording: boolean, sourceName: string) => {
 			selectedSourceName = sourceName;
 			if (!tray) createTray();

electron/preload.ts

@@ -1,16 +1,23 @@
 import { contextBridge, ipcRenderer } from "electron";
 import type { RecordingSession, StoreRecordedSessionInput } from "../src/lib/recordingSession";
 
+// Asset base URL is passed from the main process via webPreferences.additionalArguments
+// (see windows.ts). Sandboxed preloads cannot import node:path / node:url, so we
+// can't compute it here.
+const ASSET_BASE_URL_ARG_PREFIX = "--asset-base-url=";
+const assetBaseUrlArg = process.argv.find((arg) => arg.startsWith(ASSET_BASE_URL_ARG_PREFIX));
+const assetBaseUrl = assetBaseUrlArg ? assetBaseUrlArg.slice(ASSET_BASE_URL_ARG_PREFIX.length) : "";
+
 contextBridge.exposeInMainWorld("electronAPI", {
+	assetBaseUrl,
 	hudOverlayHide: () => {
 		ipcRenderer.send("hud-overlay-hide");
 	},
 	hudOverlayClose: () => {
 		ipcRenderer.send("hud-overlay-close");
 	},
-	getAssetBasePath: async () => {
-		// ask main process for the correct base path (production vs dev)
-		return await ipcRenderer.invoke("get-asset-base-path");
+	setHudOverlayIgnoreMouseEvents: (ignore: boolean) => {
+		ipcRenderer.send("hud-overlay-ignore-mouse-events", ignore);
 	},
 	getSources: async (opts: Electron.SourcesOptions) => {
 		return await ipcRenderer.invoke("get-sources", opts);
@@ -36,6 +43,9 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	requestCameraAccess: () => {
 		return ipcRenderer.invoke("request-camera-access");
 	},
+	requestAccessibilityAccess: () => {
+		return ipcRenderer.invoke("request-accessibility-access");
+	},
 
 	storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
 		return ipcRenderer.invoke("store-recorded-video", videoData, fileName);
@@ -47,12 +57,15 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	getRecordedVideoPath: () => {
 		return ipcRenderer.invoke("get-recorded-video-path");
 	},
-	setRecordingState: (recording: boolean) => {
-		return ipcRenderer.invoke("set-recording-state", recording);
+	setRecordingState: (recording: boolean, recordingId?: number) => {
+		return ipcRenderer.invoke("set-recording-state", recording, recordingId);
 	},
 	getCursorTelemetry: (videoPath?: string) => {
 		return ipcRenderer.invoke("get-cursor-telemetry", videoPath);
 	},
+	discardCursorTelemetry: (recordingId: number) => {
+		return ipcRenderer.invoke("discard-cursor-telemetry", recordingId);
+	},
 	onStopRecordingFromTray: (callback: () => void) => {
 		const listener = () => callback();
 		ipcRenderer.on("stop-recording-from-tray", listener);
@@ -61,8 +74,11 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	openExternalUrl: (url: string) => {
 		return ipcRenderer.invoke("open-external-url", url);
 	},
-	saveExportedVideo: (videoData: ArrayBuffer, fileName: string) => {
-		return ipcRenderer.invoke("save-exported-video", videoData, fileName);
+	pickExportSavePath: (fileName: string, exportFolder?: string) => {
+		return ipcRenderer.invoke("pick-export-save-path", fileName, exportFolder);
+	},
+	writeExportToPath: (videoData: ArrayBuffer, filePath: string) => {
+		return ipcRenderer.invoke("write-export-to-path", videoData, filePath);
 	},
 	openVideoFilePicker: () => {
 		return ipcRenderer.invoke("open-video-file-picker");
@@ -124,12 +140,34 @@ contextBridge.exposeInMainWorld("electronAPI", {
 	setLocale: (locale: string) => {
 		return ipcRenderer.invoke("set-locale", locale);
 	},
+	saveDiagnostic: (payload: {
+		error: string;
+		stack?: string;
+		projectState: unknown;
+		logs: string[];
+	}) => {
+		return ipcRenderer.invoke("save-diagnostic", payload);
+	},
 	setMicrophoneExpanded: (expanded: boolean) => {
 		ipcRenderer.send("hud:setMicrophoneExpanded", expanded);
 	},
 	setHasUnsavedChanges: (hasChanges: boolean) => {
 		ipcRenderer.send("set-has-unsaved-changes", hasChanges);
 	},
+	showCountdownOverlay: (value: number, runId: number) => {
+		return ipcRenderer.invoke("countdown-overlay-show", value, runId);
+	},
+	setCountdownOverlayValue: (value: number, runId: number) => {
+		return ipcRenderer.invoke("countdown-overlay-set-value", value, runId);
+	},
+	hideCountdownOverlay: (runId: number) => {
+		return ipcRenderer.invoke("countdown-overlay-hide", runId);
+	},
+	onCountdownOverlayValue: (callback: (value: number | null) => void) => {
+		const listener = (_event: unknown, value: number | null) => callback(value);
+		ipcRenderer.on("countdown-overlay-value", listener);
+		return () => ipcRenderer.removeListener("countdown-overlay-value", listener);
+	},
 	onRequestSaveBeforeClose: (callback: () => Promise<boolean> | boolean) => {
 		const listener = async () => {
 			try {
@@ -142,4 +180,12 @@ contextBridge.exposeInMainWorld("electronAPI", {
 		ipcRenderer.on("request-save-before-close", listener);
 		return () => ipcRenderer.removeListener("request-save-before-close", listener);
 	},
+	onRequestCloseConfirm: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("request-close-confirm", listener);
+		return () => ipcRenderer.removeListener("request-close-confirm", listener);
+	},
+	sendCloseConfirmResponse: (choice: "save" | "discard" | "cancel") => {
+		ipcRenderer.send("close-confirm-response", choice);
+	},
 });

electron/windows.ts

@@ -1,5 +1,5 @@
 import path from "node:path";
-import { fileURLToPath } from "node:url";
+import { fileURLToPath, pathToFileURL } from "node:url";
 import { BrowserWindow, ipcMain, screen } from "electron";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -9,6 +9,13 @@ const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
 const RENDERER_DIST = path.join(APP_ROOT, "dist");
 const HEADLESS = process.env["HEADLESS"] === "true";
 
+// Asset base URL for renderer (wallpapers, etc.). Packaged: extraResources copies
+// public/wallpapers -> resources/wallpapers. Unpackaged: <appRoot>/public/.
+const ASSET_BASE_DIR = process.defaultApp
+	? path.join(__dirname, "..", "public")
+	: process.resourcesPath;
+const ASSET_BASE_URL_ARG = `--asset-base-url=${pathToFileURL(`${ASSET_BASE_DIR}${path.sep}`).toString()}`;
+
 let hudOverlayWindow: BrowserWindow | null = null;
 
 ipcMain.on("hud-overlay-hide", () => {
@@ -17,6 +24,17 @@ 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
+ * across macOS Spaces so it is never lost when switching virtual desktops.
+ */
 export function createHudOverlayWindow(): BrowserWindow {
 	const primaryDisplay = screen.getPrimaryDisplay();
 	const { workArea } = primaryDisplay;
@@ -45,11 +63,19 @@ export function createHudOverlayWindow(): BrowserWindow {
 		show: !HEADLESS,
 		webPreferences: {
 			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
 			nodeIntegration: false,
 			contextIsolation: true,
 			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.
+	if (process.platform === "darwin") {
+		win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+	}
 
 	win.webContents.on("did-finish-load", () => {
 		win?.webContents.send("main-process-message", new Date().toLocaleString());
@@ -74,6 +100,10 @@ export function createHudOverlayWindow(): BrowserWindow {
 	return win;
 }
 
+/**
+ * Creates the main editor window. Starts maximised with a hidden title bar on
+ * macOS. This window is not always-on-top and appears in the taskbar/dock.
+ */
 export function createEditorWindow(): BrowserWindow {
 	const isMac = process.platform === "darwin";
 
@@ -95,6 +125,7 @@ export function createEditorWindow(): BrowserWindow {
 		show: !HEADLESS,
 		webPreferences: {
 			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
 			nodeIntegration: false,
 			contextIsolation: true,
 			webSecurity: false,
@@ -120,6 +151,10 @@ export function createEditorWindow(): BrowserWindow {
 	return win;
 }
 
+/**
+ * Creates the floating source-selector window used to pick a screen or window
+ * to record. Frameless, transparent, and follows the user across macOS Spaces.
+ */
 export function createSourceSelectorWindow(): BrowserWindow {
 	const { width, height } = screen.getPrimaryDisplay().workAreaSize;
 
@@ -137,11 +172,18 @@ export function createSourceSelectorWindow(): BrowserWindow {
 		backgroundColor: "#00000000",
 		webPreferences: {
 			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
 			nodeIntegration: false,
 			contextIsolation: true,
 		},
 	});
 
+	// Follow the user across macOS Spaces so the selector appears on the
+	// active desktop regardless of where the HUD was originally opened.
+	if (process.platform === "darwin") {
+		win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+	}
+
 	if (VITE_DEV_SERVER_URL) {
 		win.loadURL(VITE_DEV_SERVER_URL + "?windowType=source-selector");
 	} else {
@@ -152,3 +194,56 @@ export function createSourceSelectorWindow(): BrowserWindow {
 
 	return win;
 }
+
+/**
+ * Creates a centered transparent countdown overlay window that sits above the
+ * HUD while recording pre-roll is running.
+ */
+export function createCountdownOverlayWindow(): BrowserWindow {
+	const { workArea } = screen.getPrimaryDisplay();
+	const overlayWidth = 420;
+	const overlayHeight = 260;
+
+	const win = new BrowserWindow({
+		width: overlayWidth,
+		height: overlayHeight,
+		minWidth: overlayWidth,
+		maxWidth: overlayWidth,
+		minHeight: overlayHeight,
+		maxHeight: overlayHeight,
+		x: Math.round(workArea.x + (workArea.width - overlayWidth) / 2),
+		y: Math.round(workArea.y + (workArea.height - overlayHeight) / 2),
+		frame: false,
+		resizable: false,
+		alwaysOnTop: true,
+		skipTaskbar: true,
+		focusable: false,
+		transparent: true,
+		backgroundColor: "#00000000",
+		hasShadow: false,
+		show: false,
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
+			nodeIntegration: false,
+			contextIsolation: true,
+			backgroundThrottling: false,
+		},
+	});
+
+	win.setIgnoreMouseEvents(true);
+
+	if (process.platform === "darwin") {
+		win.setVisibleOnAllWorkspaces(true, { visibleOnFullScreen: true });
+	}
+
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(VITE_DEV_SERVER_URL + "?windowType=countdown-overlay");
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "countdown-overlay" },
+		});
+	}
+
+	return win;
+}

flake.lock

@@ -0,0 +1,27 @@
+{
+  "nodes": {
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1775710090,
+        "narHash": "sha256-ar3rofg+awPB8QXDaFJhJ2jJhu+KqN/PRCXeyuXR76E=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "4c1018dae018162ec878d42fec712642d214fdfa",
+        "type": "github"
+      },
+      "original": {
+        "owner": "NixOS",
+        "ref": "nixos-unstable",
+        "repo": "nixpkgs",
+        "type": "github"
+      }
+    },
+    "root": {
+      "inputs": {
+        "nixpkgs": "nixpkgs"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,122 @@
+{
+  description = "OpenScreen — desktop screen recorder with built-in editor";
+
+  inputs = {
+    nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+  };
+
+  outputs =
+    { self, nixpkgs }:
+    let
+      systems = [
+        "x86_64-linux"
+        "aarch64-linux"
+      ];
+      forAllSystems = f: nixpkgs.lib.genAttrs systems (system: f nixpkgs.legacyPackages.${system});
+    in
+    {
+      # -- Per-system outputs (packages, dev shells) --
+
+      packages = forAllSystems (pkgs: {
+        openscreen = pkgs.callPackage ./nix/package.nix { };
+        default = self.packages.${pkgs.stdenv.hostPlatform.system}.openscreen;
+      });
+
+      devShells = forAllSystems (
+        pkgs:
+        let
+          electron = pkgs.electron;
+
+          # Libraries Electron needs at runtime on Linux
+          runtimeLibs = with pkgs; [
+            # X11
+            libx11
+            libxcomposite
+            libxdamage
+            libxext
+            libxfixes
+            libxrandr
+            libxtst
+            libxcb
+            libxshmfence
+
+            # Wayland
+            wayland
+
+            # GTK / UI toolkit
+            gtk3
+            glib
+            pango
+            cairo
+            gdk-pixbuf
+            atk
+            at-spi2-atk
+            at-spi2-core
+
+            # Graphics
+            mesa
+            libGL
+            libdrm
+            vulkan-loader
+
+            # Networking / crypto (NSS for Chromium)
+            nss
+            nspr
+
+            # Audio
+            alsa-lib
+            pipewire
+            pulseaudio
+
+            # System
+            dbus
+            cups
+            expat
+            libnotify
+            libsecret
+            util-linux # libuuid
+          ];
+        in
+        {
+          default = pkgs.mkShell {
+            packages = with pkgs; [
+              nodejs_22
+              electron
+
+              # Native module compilation
+              python3
+              pkg-config
+              gcc
+
+              # Playwright browser tests
+              playwright-driver.browsers
+            ];
+
+            # Electron's prebuilt binary needs these at runtime
+            LD_LIBRARY_PATH = pkgs.lib.makeLibraryPath runtimeLibs;
+
+            # Tell the npm `electron` package to use the Nix-provided binary
+            # instead of downloading its own. vite-plugin-electron respects this.
+            ELECTRON_OVERRIDE_DIST_PATH = "${electron}/libexec/electron";
+
+            # Playwright browser path for test:browser / test:e2e
+            PLAYWRIGHT_BROWSERS_PATH = "${pkgs.playwright-driver.browsers}";
+            PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD = "1";
+
+            shellHook = ''
+              echo "OpenScreen dev shell — node $(node --version), electron v$(electron --version 2>/dev/null | tr -d 'v')"
+            '';
+          };
+        }
+      );
+
+      # -- System-wide outputs (modules, overlay) --
+
+      overlays.default = final: _prev: {
+        openscreen = self.packages.${final.stdenv.hostPlatform.system}.openscreen;
+      };
+
+      nixosModules.default = import ./nix/module.nix self;
+      homeManagerModules.default = import ./nix/hm-module.nix self;
+    };
+}

macos.entitlements

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+    <!-- Required for Electron's V8 JIT compilation -->
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+
+    <!-- Required for Electron's native module loading -->
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+
+    <!-- Required for loading Electron's bundled frameworks/dylibs -->
+    <key>com.apple.security.cs.disable-library-validation</key>
+    <true/>
+
+    <!-- Audio input (microphone / system audio capture) -->
+    <key>com.apple.security.device.audio-input</key>
+    <true/>
+
+    <!-- Camera (webcam capture) -->
+    <key>com.apple.security.device.camera</key>
+    <true/>
+
+    <!-- Screen recording (required for desktopCapturer.getSources() on macOS 10.15+) -->
+    <key>com.apple.security.device.screen-capture</key>
+    <true/>
+</dict>
+</plist>

nix/hm-module.nix

@@ -0,0 +1,36 @@
+# Home Manager module for OpenScreen
+# Usage in flake-based Home Manager config:
+#
+#   inputs.openscreen.url = "github:siddharthvaddem/openscreen";
+#
+#   { inputs, ... }: {
+#     imports = [ inputs.openscreen.homeManagerModules.default ];
+#     programs.openscreen.enable = true;
+#   }
+self:
+{
+  config,
+  lib,
+  pkgs,
+  ...
+}:
+
+let
+  cfg = config.programs.openscreen;
+in
+{
+  options.programs.openscreen = {
+    enable = lib.mkEnableOption "OpenScreen screen recorder";
+
+    package = lib.mkOption {
+      type = lib.types.package;
+      default = self.packages.${pkgs.stdenv.hostPlatform.system}.openscreen;
+      defaultText = lib.literalExpression "inputs.openscreen.packages.\${pkgs.stdenv.hostPlatform.system}.openscreen";
+      description = "The OpenScreen package to use.";
+    };
+  };
+
+  config = lib.mkIf cfg.enable {
+    home.packages = [ cfg.package ];
+  };
+}

nix/module.nix

@@ -0,0 +1,42 @@
+# NixOS module for OpenScreen
+# Usage in flake-based NixOS config:
+#
+#   inputs.openscreen.url = "github:siddharthvaddem/openscreen";
+#
+#   { inputs, ... }: {
+#     imports = [ inputs.openscreen.nixosModules.default ];
+#     programs.openscreen.enable = true;
+#   }
+self:
+{
+  config,
+  lib,
+  pkgs,
+  ...
+}:
+
+let
+  cfg = config.programs.openscreen;
+in
+{
+  options.programs.openscreen = {
+    enable = lib.mkEnableOption "OpenScreen screen recorder";
+
+    package = lib.mkOption {
+      type = lib.types.package;
+      default = self.packages.${pkgs.stdenv.hostPlatform.system}.openscreen;
+      defaultText = lib.literalExpression "inputs.openscreen.packages.\${pkgs.stdenv.hostPlatform.system}.openscreen";
+      description = "The OpenScreen package to use.";
+    };
+  };
+
+  config = lib.mkIf cfg.enable {
+    environment.systemPackages = [ cfg.package ];
+
+    # Screen capture on Wayland requires xdg-desktop-portal.
+    # We enable the base portal; users should also enable a
+    # desktop-specific portal (e.g. xdg-desktop-portal-gtk,
+    # xdg-desktop-portal-hyprland) in their DE config.
+    xdg.portal.enable = lib.mkDefault true;
+  };
+}

nix/package.nix

@@ -0,0 +1,124 @@
+{
+  lib,
+  buildNpmPackage,
+  nodejs_22,
+  electron,
+  makeWrapper,
+  makeDesktopItem,
+  copyDesktopItems,
+}:
+
+buildNpmPackage {
+  nodejs = nodejs_22;
+  pname = "openscreen";
+  version = "1.4.0";
+
+  src =
+    let
+      fs = lib.fileset;
+      # gitTracked fails when source is already a store path (path: flake inputs).
+      # Detect this and fall back to cleanSource which handles both cases.
+      isStorePath = builtins.storeDir == builtins.substring 0 (builtins.stringLength builtins.storeDir) (toString ../.);
+      baseFiles = if isStorePath then fs.fromSource (lib.cleanSource ../.) else fs.gitTracked ../.;
+    in
+    fs.toSource {
+      root = ../.;
+      fileset = fs.difference baseFiles (
+        fs.unions [
+          ../nix
+          ../flake.nix
+          ../flake.lock
+          (fs.fileFilter (file: file.hasExt "md") ../.)
+        ]
+      );
+    };
+
+  npmDepsHash = "sha256-tOpoJPzaZDK3HJijGHpZ0+jWsbrYyQUuw1pO0Uxcifg=";
+
+  env.ELECTRON_SKIP_BINARY_DOWNLOAD = "1";
+
+  # electron-builder is not needed — we wrap system electron directly
+  npmFlags = [ "--ignore-scripts" ];
+  makeCacheWritable = true;
+
+  # vite-plugin-electron compiles electron/ sources into dist-electron/
+  # tsconfig has noEmit — tsc is type-check only
+  buildPhase = ''
+    runHook preBuild
+    npx vite build
+    runHook postBuild
+  '';
+
+  installPhase = ''
+    runHook preInstall
+
+    mkdir -p "$out/lib/openscreen"
+
+    # Renderer build output (index.html, JS chunks, copied public/ assets)
+    cp -r dist "$out/lib/openscreen/"
+
+    # Main process + preload (compiled by vite-plugin-electron)
+    cp -r dist-electron "$out/lib/openscreen/"
+
+    # Package manifest (electron reads "main" field to find entry point)
+    cp package.json "$out/lib/openscreen/"
+
+    # Strip devDependencies (electron, vitest, biome, playwright, etc.)
+    npm prune --omit=dev --no-save
+    cp -r node_modules "$out/lib/openscreen/"
+
+    # Asset resolution: when app.isPackaged is false, the main process resolves
+    # assets at <appPath>/public/. Place wallpapers at that root to match the
+    # packaged layout (electron-builder extraResources -> resources/wallpapers).
+    mkdir -p "$out/lib/openscreen/public"
+    cp -r public/wallpapers "$out/lib/openscreen/public/wallpapers"
+
+    # Wrap system electron with the app directory
+    mkdir -p "$out/bin"
+    makeWrapper "${electron}/bin/electron" "$out/bin/openscreen" \
+      --add-flags "$out/lib/openscreen" \
+      --set ELECTRON_IS_DEV 0
+
+    # Install icons to hicolor theme
+    for size in 16 24 32 48 64 128 256 512 1024; do
+      icon="icons/icons/png/''${size}x''${size}.png"
+      if [ -f "$icon" ]; then
+        install -Dm644 "$icon" \
+          "$out/share/icons/hicolor/''${size}x''${size}/apps/openscreen.png"
+      fi
+    done
+
+    runHook postInstall
+  '';
+
+  nativeBuildInputs = [
+    makeWrapper
+    copyDesktopItems
+  ];
+
+  desktopItems = [
+    (makeDesktopItem {
+      name = "openscreen";
+      desktopName = "OpenScreen";
+      genericName = "Screen Recorder";
+      exec = "openscreen %U";
+      icon = "openscreen";
+      comment = "Desktop screen recorder with built-in editor";
+      categories = [
+        "AudioVideo"
+        "Video"
+        "Recorder"
+      ];
+      startupWMClass = "Openscreen";
+      terminal = false;
+    })
+  ];
+
+  meta = {
+    description = "Desktop screen recorder with built-in editor";
+    homepage = "https://github.com/siddharthvaddem/openscreen";
+    license = lib.licenses.mit;
+    mainProgram = "openscreen";
+    platforms = lib.platforms.linux;
+  };
+}

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "openscreen",
 	"private": true,
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"type": "module",
 	"packageManager": "npm@10.9.4",
 	"engines": {
@@ -21,15 +21,17 @@
 		"i18n:check": "node scripts/i18n-check.mjs",
 		"preview": "vite preview",
 		"build:mac": "tsc && vite build && electron-builder --mac",
-		"build:win": "tsc && vite build && electron-builder --win",
-		"build:linux": "tsc && vite build && electron-builder --linux AppImage deb",
+		"build:win": "tsc && vite build && electron-builder --win --config.npmRebuild=false",
+		"build:linux": "tsc && vite build && electron-builder --linux AppImage deb pacman --config.npmRebuild=false",
 		"test": "vitest --run",
 		"test:watch": "vitest",
 		"build-vite": "tsc && vite build",
 		"test:browser": "vitest --config vitest.browser.config.ts --run",
 		"test:browser:install": "playwright install --with-deps chromium-headless-shell",
 		"test:e2e": "playwright test",
-		"prepare": "husky"
+		"prepare": "husky",
+		"rebuild:native": "node ./scripts/rebuild-native.mjs",
+		"postinstall": "npm run rebuild:native"
 	},
 	"dependencies": {
 		"@fix-webm-duration/fix": "^1.0.1",
@@ -40,69 +42,70 @@
 		"@radix-ui/react-popover": "^1.1.15",
 		"@radix-ui/react-select": "^2.2.6",
 		"@radix-ui/react-slider": "^1.3.6",
-		"@radix-ui/react-slot": "^1.2.3",
+		"@radix-ui/react-slot": "^1.2.4",
 		"@radix-ui/react-switch": "^1.2.6",
 		"@radix-ui/react-tabs": "^1.1.13",
 		"@radix-ui/react-toggle": "^1.1.10",
 		"@radix-ui/react-toggle-group": "^1.1.11",
 		"@radix-ui/react-tooltip": "^1.2.8",
 		"@types/gif.js": "^0.2.5",
-		"@uiw/color-convert": "^2.9.2",
-		"@uiw/react-color-block": "^2.9.2",
+		"@uiw/color-convert": "^2.10.1",
+		"@uiw/react-color-block": "^2.10.1",
+		"@uiw/react-color-colorful": "^2.9.2",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
-		"dnd-timeline": "^2.2.0",
-		"emoji-picker-react": "^4.16.1",
+		"dnd-timeline": "^2.4.0",
+		"emoji-picker-react": "^4.18.0",
 		"fix-webm-duration": "^1.0.6",
 		"gif.js": "^0.2.0",
-		"gsap": "^3.13.0",
+		"gsap": "^3.15.0",
 		"lucide-react": "^0.545.0",
-		"mediabunny": "^1.25.1",
-		"motion": "^12.23.24",
-		"mp4box": "^2.2.0",
+		"mediabunny": "^1.40.1",
+		"motion": "^12.38.0",
+		"mp4box": "^2.3.0",
 		"pixi-filters": "^6.1.5",
-		"pixi.js": "^8.14.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-icons": "^5.5.0",
+		"pixi.js": "^8.18.1",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"react-icons": "^5.6.0",
 		"react-resizable-panels": "^3.0.6",
-		"react-rnd": "^10.5.2",
+		"react-rnd": "^10.5.3",
 		"sonner": "^2.0.7",
-		"tailwind-merge": "^3.3.1",
+		"tailwind-merge": "^3.5.0",
 		"tailwindcss-animate": "^1.0.7",
+		"uiohook-napi": "^1.5.5",
 		"uuid": "^13.0.0",
 		"web-demuxer": "^4.0.0"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.3.13",
+		"@biomejs/biome": "^2.4.12",
+		"@electron/rebuild": "^4.0.4",
 		"@playwright/test": "^1.59.1",
 		"@testing-library/jest-dom": "^6.9.1",
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
-		"@types/node": "^25.0.3",
-		"@types/react": "^18.2.64",
-		"@types/react-dom": "^18.2.21",
-		"@types/uuid": "^10.0.0",
-		"@vitejs/plugin-react": "^4.2.1",
-		"@vitest/browser": "^4.0.16",
-		"@vitest/browser-playwright": "^4.0.16",
-		"autoprefixer": "^10.4.21",
-		"electron": "^39.2.7",
-		"electron-builder": "^26.7.0",
-		"electron-icon-builder": "^2.0.1",
-		"electron-rebuild": "^3.2.9",
-		"fast-check": "^4.5.2",
+		"@types/node": "^22.19.17",
+		"@types/react": "^18.3.28",
+		"@types/react-dom": "^18.3.7",
+		"@vitejs/plugin-react": "^5.2.0",
+		"@vitest/browser": "^4.1.4",
+		"@vitest/browser-playwright": "^4.1.4",
+		"autoprefixer": "^10.5.0",
+		"electron": "^41.2.1",
+		"electron-builder": "^26.8.1",
+		"esbuild": "^0.27.0",
+		"fast-check": "^4.7.0",
 		"husky": "^9.1.7",
-		"jsdom": "^29.0.1",
-		"lint-staged": "^16.3.2",
-		"postcss": "^8.5.6",
-		"tailwindcss": "^3.4.18",
-		"terser": "^5.44.1",
-		"typescript": "^5.2.2",
-		"vite": "^5.1.6",
-		"vite-plugin-electron": "^0.28.6",
-		"vite-plugin-electron-renderer": "^0.14.5",
-		"vitest": "^4.0.16"
+		"jsdom": "^29.0.2",
+		"lint-staged": "^16.4.0",
+		"postcss": "^8.5.10",
+		"tailwindcss": "^3.4.19",
+		"terser": "^5.46.1",
+		"typescript": "^5.9.3",
+		"vite": "^7.3.2",
+		"vite-plugin-electron": "^0.29.1",
+		"vite-plugin-electron-renderer": "^0.14.6",
+		"vitest": "^4.1.4"
 	},
 	"main": "dist-electron/main.js",
 	"lint-staged": {

scripts/build_macos.sh

@@ -0,0 +1,216 @@
+#!/bin/bash
+#
+# OpenScreen macOS Build Script
+# Produces: release/<version>/OpenScreen-Mac-<arch>-<version>.dmg
+#
+# Usage: chmod +x scripts/build_macos.sh && ./scripts/build_macos.sh
+#
+
+set -euo pipefail
+
+# ── Load .env ─────────────────────────────────────────────────────────
+PROJECT_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
+ENV_FILE="${PROJECT_ROOT}/.env"
+
+if [ -f "$ENV_FILE" ]; then
+    set -a
+    source "$ENV_FILE"
+    set +a
+else
+    echo "ERROR: .env file not found at ${ENV_FILE}"
+    echo "Create one with APP_NAME, SIGN_IDENTITY, NOTARY_PROFILE, etc."
+    exit 1
+fi
+
+# ── Config ────────────────────────────────────────────────────────────
+VERSION=$(node -p "require('${PROJECT_ROOT}/package.json').version")
+RELEASE_DIR="${PROJECT_ROOT}/release/${VERSION}"
+ENTITLEMENTS="${PROJECT_ROOT}/macos.entitlements"
+ARCHS=("arm64" "x64")
+
+# ── Colors ────────────────────────────────────────────────────────────
+RED='\033[0;31m'
+GREEN='\033[0;32m'
+YELLOW='\033[1;33m'
+CYAN='\033[0;36m'
+NC='\033[0m' # No Color
+BOLD='\033[1m'
+
+print_step() { echo -e "\n${CYAN}${BOLD}▸ $1${NC}"; }
+print_ok()   { echo -e "${GREEN}✓ $1${NC}"; }
+print_warn() { echo -e "${YELLOW}⚠ $1${NC}"; }
+print_err()  { echo -e "${RED}✗ $1${NC}"; }
+
+# ── Preflight ─────────────────────────────────────────────────────────
+echo -e "\n${BOLD}╔══════════════════════════════════════════╗${NC}"
+echo -e "${BOLD}║   ${APP_NAME} macOS Build Script v${VERSION}    ║${NC}"
+echo -e "${BOLD}╚══════════════════════════════════════════╝${NC}"
+
+print_step "Checking prerequisites..."
+
+if [[ "$(uname)" != "Darwin" ]]; then
+    print_err "This script must be run on macOS."
+    exit 1
+fi
+print_ok "Running on macOS ($(uname -m))"
+
+if ! command -v node &> /dev/null; then
+    print_err "Node.js not found. Please install Node.js first."
+    exit 1
+fi
+print_ok "Node.js found: $(node -v)"
+
+if ! command -v npm &> /dev/null; then
+    print_err "npm not found."
+    exit 1
+fi
+print_ok "npm found: $(npm -v)"
+
+# Check signing identity
+if ! security find-identity -v -p codesigning | grep -q "$SIGN_IDENTITY"; then
+    print_err "Signing identity not found: ${SIGN_IDENTITY}"
+    print_err "Run 'security find-identity -v -p codesigning' to see available identities."
+    exit 1
+fi
+print_ok "Signing identity found: ${SIGN_IDENTITY}"
+
+# Check notary profile
+if ! xcrun notarytool history --keychain-profile "$NOTARY_PROFILE" &> /dev/null; then
+    print_err "Notary profile '${NOTARY_PROFILE}' not found in keychain."
+    print_err "Run: xcrun notarytool store-credentials \"${NOTARY_PROFILE}\" --apple-id \"${APPLE_ID}\" --team-id \"${TEAM_ID}\""
+    exit 1
+fi
+print_ok "Notary profile found: ${NOTARY_PROFILE}"
+
+# Check entitlements
+if [ ! -f "$ENTITLEMENTS" ]; then
+    print_err "Entitlements file not found: ${ENTITLEMENTS}"
+    exit 1
+fi
+print_ok "Entitlements file found"
+
+# ── Clean ─────────────────────────────────────────────────────────────
+cd "$PROJECT_ROOT"
+
+print_step "Cleaning previous build artifacts..."
+rm -rf dist dist-electron "${RELEASE_DIR}"
+print_ok "Clean complete"
+
+# ── Install Dependencies ─────────────────────────────────────────────
+print_step "Installing dependencies..."
+npm ci
+print_ok "Dependencies installed"
+
+# ── Build Vite + Electron ────────────────────────────────────────────
+print_step "Building Vite + Electron... (this may take a minute)"
+npx tsc && npx vite build
+print_ok "Vite + Electron build complete"
+
+# ── Package, Sign, Notarize per Architecture ─────────────────────────
+for ARCH in "${ARCHS[@]}"; do
+    echo ""
+    echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+    echo -e "${BOLD}  Building for: ${ARCH}${NC}"
+    echo -e "${BOLD}━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━${NC}"
+
+    # ── Package with electron-builder ─────────────────────────────
+    print_step "[${ARCH}] Packaging with electron-builder..."
+
+    # Build .app only (--dir), electron-builder handles codesigning
+    # with hardenedRuntime + entitlements from electron-builder.json5
+    CSC_NAME="$CSC_NAME" npx electron-builder --mac --${ARCH} --dir
+
+    # Find the .app bundle
+    APP_BUNDLE=$(find "${RELEASE_DIR}" -maxdepth 2 -name "*.app" -type d | grep -i "${ARCH}\|mac" | head -n1)
+    if [ -z "$APP_BUNDLE" ]; then
+        # Fallback: find any .app in the output
+        APP_BUNDLE=$(find "${RELEASE_DIR}" -maxdepth 2 -name "*.app" -type d | head -n1)
+    fi
+
+    if [ -z "$APP_BUNDLE" ]; then
+        print_err "[${ARCH}] Could not find .app bundle in ${RELEASE_DIR}"
+        exit 1
+    fi
+    print_ok "[${ARCH}] App bundle: $(basename "$APP_BUNDLE")"
+
+    # ── Verify codesign on .app ───────────────────────────────────
+    print_step "[${ARCH}] Verifying .app code signature..."
+    codesign --verify --deep --strict "$APP_BUNDLE" 2>&1 || print_warn "[${ARCH}] Deep verify had warnings (may be expected pre-notarization)"
+    print_ok "[${ARCH}] .app signature verified"
+
+    # ── Create DMG ────────────────────────────────────────────────
+    DMG_NAME="${APP_NAME}-Mac-${ARCH}-${VERSION}.dmg"
+    DMG_OUTPUT="${RELEASE_DIR}/${DMG_NAME}"
+    DMG_STAGING="${RELEASE_DIR}/dmg-staging-${ARCH}"
+
+    print_step "[${ARCH}] Creating DMG..."
+
+    rm -f "$DMG_OUTPUT"
+    rm -rf "$DMG_STAGING"
+
+    # Stage: app + Applications shortcut for drag-to-install
+    mkdir -p "$DMG_STAGING"
+    cp -R "$APP_BUNDLE" "$DMG_STAGING/"
+    ln -s /Applications "$DMG_STAGING/Applications"
+
+    hdiutil create \
+        -srcfolder "$DMG_STAGING" \
+        -volname "${APP_NAME}" \
+        -fs HFS+ \
+        -fsargs "-c c=64,a=16,e=16" \
+        -format UDBZ \
+        "$DMG_OUTPUT"
+
+    print_ok "[${ARCH}] DMG created: ${DMG_NAME}"
+    rm -rf "$DMG_STAGING"
+
+    # ── Sign DMG ──────────────────────────────────────────────────
+    print_step "[${ARCH}] Signing DMG..."
+    codesign --force --sign "$SIGN_IDENTITY" --timestamp "$DMG_OUTPUT"
+    print_ok "[${ARCH}] DMG signed"
+
+    # ── Notarize DMG ──────────────────────────────────────────────
+    print_step "[${ARCH}] Notarizing DMG with Apple... (this may take several minutes)"
+    xcrun notarytool submit "$DMG_OUTPUT" \
+        --keychain-profile "$NOTARY_PROFILE" \
+        --wait
+    print_ok "[${ARCH}] DMG notarized"
+
+    # ── Staple ────────────────────────────────────────────────────
+    print_step "[${ARCH}] Stapling notarization ticket..."
+    xcrun stapler staple "$DMG_OUTPUT"
+    print_ok "[${ARCH}] Ticket stapled"
+
+    # ── Validate ──────────────────────────────────────────────────
+    print_step "[${ARCH}] Validating stapled DMG..."
+    xcrun stapler validate "$DMG_OUTPUT"
+    print_ok "[${ARCH}] Validation passed"
+
+done
+
+# ── Clean up unpacked dirs (keep only DMGs) ───────────────────────────
+print_step "Cleaning up intermediate directories..."
+find "${RELEASE_DIR}" -maxdepth 1 -type d ! -name "$(basename "$RELEASE_DIR")" -exec rm -rf {} + 2>/dev/null || true
+print_ok "Cleanup complete"
+
+# ── Done ──────────────────────────────────────────────────────────────
+echo ""
+echo -e "${GREEN}${BOLD}════════════════════════════════════════════${NC}"
+echo -e "${GREEN}${BOLD}  Build & Notarization Complete!${NC}"
+echo -e "${GREEN}${BOLD}════════════════════════════════════════════${NC}"
+echo ""
+
+for ARCH in "${ARCHS[@]}"; do
+    DMG_NAME="${APP_NAME}-Mac-${ARCH}-${VERSION}.dmg"
+    DMG_PATH="${RELEASE_DIR}/${DMG_NAME}"
+    if [ -f "$DMG_PATH" ]; then
+        DMG_SIZE=$(du -h "$DMG_PATH" | cut -f1)
+        echo -e "  📦 ${BOLD}${ARCH}:${NC}  ${DMG_PATH}"
+        echo -e "  📏 ${BOLD}Size:${NC} ${DMG_SIZE}"
+        echo ""
+    fi
+done
+
+echo -e "  ${GREEN}All DMGs are fully signed, notarized, and stapled!${NC}"
+echo -e "  ${GREEN}Ready for distribution outside the Mac App Store.${NC}"
+echo ""

scripts/i18n-check.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 /**
  * Validates that all locale translation files have identical key structures.
- * Compares zh-CN and es against the en baseline for every namespace.
+ * Compares all locale folders (except en) against the en baseline for every namespace.
  *
  * Usage: node scripts/i18n-check.mjs
  */
@@ -11,7 +11,6 @@ import path from "node:path";
 
 const LOCALES_DIR = path.resolve("src/i18n/locales");
 const BASE_LOCALE = "en";
-const COMPARE_LOCALES = ["zh-CN", "es", "tr"];
 
 function getKeys(obj, prefix = "") {
 	const keys = [];
@@ -34,12 +33,19 @@ const namespaces = fs
 	.filter((f) => f.endsWith(".json"))
 	.map((f) => f.replace(".json", ""));
 
+const compareLocales = fs
+	.readdirSync(LOCALES_DIR, { withFileTypes: true })
+	.filter((entry) => entry.isDirectory())
+	.map((entry) => entry.name)
+	.filter((locale) => locale !== BASE_LOCALE)
+	.sort((a, b) => a.localeCompare(b));
+
 for (const namespace of namespaces) {
 	const basePath = path.join(baseDir, `${namespace}.json`);
 	const baseData = JSON.parse(fs.readFileSync(basePath, "utf-8"));
 	const baseKeys = getKeys(baseData);
 
-	for (const locale of COMPARE_LOCALES) {
+	for (const locale of compareLocales) {
 		const localePath = path.join(LOCALES_DIR, locale, `${namespace}.json`);
 
 		if (!fs.existsSync(localePath)) {
@@ -77,6 +83,6 @@ if (hasErrors) {
 	process.exit(1);
 } else {
 	console.log(
-		`i18n check PASSED — all ${COMPARE_LOCALES.length} locales match ${BASE_LOCALE} across ${namespaces.length} namespaces.`,
+		`i18n check PASSED — all ${compareLocales.length} locales match ${BASE_LOCALE} across ${namespaces.length} namespaces.`,
 	);
 }

scripts/rebuild-native.mjs

@@ -0,0 +1,21 @@
+import { spawnSync } from "node:child_process";
+import process from "node:process";
+
+// uiohook-napi click capture is macOS-only at runtime (gated in
+// electron/ipc/handlers.ts). Skip the rebuild on other platforms so CI runners
+// without X11 dev headers don't fail npm install. The library's prebuilt
+// .node binaries are still bundled and loadable; we just don't need a fresh
+// build against Electron's ABI on platforms where we don't load it.
+if (process.platform !== "darwin") {
+	console.log(
+		`[rebuild:native] Skipping uiohook-napi rebuild on ${process.platform} (macOS-only).`,
+	);
+	process.exit(0);
+}
+
+const result = spawnSync(
+	process.execPath,
+	["./node_modules/@electron/rebuild/lib/cli.js", "--force", "--only", "uiohook-napi"],
+	{ stdio: "inherit" },
+);
+process.exit(result.status ?? 0);

src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { CountdownOverlay } from "./components/launch/CountdownOverlay.tsx";
 import { LaunchWindow } from "./components/launch/LaunchWindow";
 import { SourceSelector } from "./components/launch/SourceSelector";
 import { Toaster } from "./components/ui/sonner";
@@ -9,18 +10,38 @@ import { ShortcutsProvider } from "./contexts/ShortcutsContext";
 import { loadAllCustomFonts } from "./lib/customFonts";
 
 export default function App() {
-	const [windowType, setWindowType] = useState("");
+	const [windowType, setWindowType] = useState(
+		() => new URLSearchParams(window.location.search).get("windowType") || "",
+	);
 
 	useEffect(() => {
-		const params = new URLSearchParams(window.location.search);
-		const type = params.get("windowType") || "";
-		setWindowType(type);
-		if (type === "hud-overlay" || type === "source-selector") {
+		const type = new URLSearchParams(window.location.search).get("windowType") || "";
+		if (type !== windowType) {
+			setWindowType(type);
+		}
+
+		if (type === "hud-overlay" || type === "source-selector" || type === "countdown-overlay") {
 			document.body.style.background = "transparent";
 			document.documentElement.style.background = "transparent";
 			document.getElementById("root")?.style.setProperty("background", "transparent");
 		}
 
+		// HUD is a fixed-size BrowserWindow; pin the document shell and hide overflow
+		// so the renderer can't introduce scrollbars (see issue #305).
+		if (type === "hud-overlay") {
+			document.documentElement.style.height = "100%";
+			document.documentElement.style.overflow = "hidden";
+			document.body.style.height = "100%";
+			document.body.style.margin = "0";
+			document.body.style.overflow = "hidden";
+			const root = document.getElementById("root");
+			root?.style.setProperty("height", "100%");
+			root?.style.setProperty("min-height", "0");
+			root?.style.setProperty("overflow", "hidden");
+		}
+	}, [windowType]);
+
+	useEffect(() => {
 		// Load custom fonts on app initialization
 		loadAllCustomFonts().catch((error) => {
 			console.error("Failed to load custom fonts:", error);
@@ -33,6 +54,8 @@ export default function App() {
 				return <LaunchWindow />;
 			case "source-selector":
 				return <SourceSelector />;
+			case "countdown-overlay":
+				return <CountdownOverlay />;
 			case "editor":
 				return (
 					<ShortcutsProvider>

src/components/launch/CountdownOverlay.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+
+export function CountdownOverlay() {
+	const [value, setValue] = useState<number | null>(null);
+
+	useEffect(() => {
+		const unsubscribe = window.electronAPI.onCountdownOverlayValue((nextValue) => {
+			setValue(nextValue);
+		});
+
+		return () => unsubscribe();
+	}, []);
+
+	if (value === null) {
+		return null;
+	}
+
+	return (
+		<div className="w-screen h-screen bg-transparent flex items-center justify-center pointer-events-none select-none">
+			<div className="flex items-center justify-center w-40 h-40 rounded-full bg-black/50">
+				<div
+					className="text-white/90 text-[80px] font-bold leading-none tabular-nums"
+					style={{ textShadow: "0 4px 24px rgba(0, 0, 0, 0.65)" }}
+				>
+					{value}
+				</div>
+			</div>
+		</div>
+	);
+}

src/components/launch/LaunchWindow.module.css

@@ -6,3 +6,78 @@
 .electronNoDrag {
 	-webkit-app-region: no-drag;
 }
+
+.languageMenuScroll {
+	max-height: 16rem;
+	overflow-y: auto;
+	overflow-x: hidden;
+	overscroll-behavior: contain;
+	touch-action: pan-y;
+	-webkit-overflow-scrolling: touch;
+}
+
+.languageMenuScroll::-webkit-scrollbar {
+	width: 8px;
+}
+
+.languageMenuScroll::-webkit-scrollbar-track {
+	background: rgba(255, 255, 255, 0.04);
+	border-radius: 999px;
+}
+
+.languageMenuScroll::-webkit-scrollbar-thumb {
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0.2));
+	border-radius: 999px;
+	border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+.languageMenuScroll::-webkit-scrollbar-thumb:hover {
+	background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.3));
+}
+
+.languageMenuContainer {
+	position: relative;
+	z-index: 20;
+}
+
+.languageMenuPanel {
+	position: fixed;
+	right: 0;
+	top: 0;
+	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;
+}
+
+.languageMenuItem {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.425rem 0.5rem;
+	border-radius: 0.45rem;
+	font-size: 11px;
+	color: rgba(255, 255, 255, 0.72);
+	background: transparent;
+	border: 0;
+	cursor: pointer;
+	transition: background-color 120ms ease, color 120ms ease;
+}
+
+.languageMenuItem:hover,
+.languageMenuItem:focus-visible {
+	background: rgba(255, 255, 255, 0.075);
+	color: #ffffff;
+	outline: none;
+}
+
+.languageMenuItemActive {
+	background: rgba(52, 178, 123, 0.14);
+	color: #ffffff;
+}

src/components/launch/LaunchWindow.tsx

@@ -1,5 +1,6 @@
-import { ChevronDown, Languages } from "lucide-react";
-import { useEffect, useState } from "react";
+import { Check, ChevronDown, Languages } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { BsPauseCircle, BsPlayCircle, BsRecordCircle } from "react-icons/bs";
 import { FaRegStopCircle } from "react-icons/fa";
 import { FaFolderOpen } from "react-icons/fa6";
@@ -18,9 +19,7 @@ import {
 } from "react-icons/md";
 import { RxDragHandleDots2 } from "react-icons/rx";
 import { useI18n, useScopedT } from "@/contexts/I18nContext";
-import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
-import { getLocaleName } from "@/i18n/loader";
-import { isMac as getIsMac } from "@/utils/platformUtils";
+import { getAvailableLocales, getLocaleName } from "@/i18n/loader";
 import { useAudioLevelMeter } from "../../hooks/useAudioLevelMeter";
 import { useCameraDevices } from "../../hooks/useCameraDevices";
 import { useMicrophoneDevices } from "../../hooks/useMicrophoneDevices";
@@ -28,6 +27,7 @@ import { useScreenRecorder } from "../../hooks/useScreenRecorder";
 import { requestCameraAccess } from "../../lib/requestCameraAccess";
 import { formatTimePadded } from "../../utils/timeUtils";
 import { AudioLevelMeter } from "../ui/audio-level-meter";
+import { Button } from "../ui/button";
 import { Tooltip } from "../ui/tooltip";
 import styles from "./LaunchWindow.module.css";
 
@@ -62,22 +62,32 @@ 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 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";
 
 export function LaunchWindow() {
 	const t = useScopedT("launch");
-	const { locale, setLocale } = useI18n();
-	const [isMac, setIsMac] = useState(false);
-
-	useEffect(() => {
-		getIsMac().then(setIsMac);
-	}, []);
+	const availableLocales = getAvailableLocales();
+	const {
+		locale,
+		setLocale,
+		systemLocaleSuggestion,
+		acceptSystemLocaleSuggestion,
+		dismissSystemLocaleSuggestion,
+		resolveSystemLocaleSuggestion,
+	} = useI18n();
+	const suggestedLanguageName = systemLocaleSuggestion ? getLocaleName(systemLocaleSuggestion) : "";
+	const activeLanguageLabel = getLocaleName(locale).split(/\s+/)[0] || locale.toUpperCase();
 
 	const {
 		recording,
@@ -109,6 +119,18 @@ export function LaunchWindow() {
 	const [isWebcamHovered, setIsWebcamHovered] = useState(false);
 	const [isWebcamFocused, setIsWebcamFocused] = useState(false);
 	const webcamExpanded = isWebcamHovered || isWebcamFocused;
+	const [isLanguageMenuOpen, setIsLanguageMenuOpen] = useState(false);
+	const languageTriggerRef = useRef<HTMLButtonElement | null>(null);
+	const languageMenuPanelRef = useRef<HTMLDivElement | null>(null);
+	const [languageMenuStyle, setLanguageMenuStyle] = useState<{
+		right: number;
+		top: number;
+		maxHeight: number;
+	}>({
+		right: 12,
+		top: 12,
+		maxHeight: 240,
+	});
 
 	const {
 		devices: micDevices,
@@ -162,6 +184,78 @@ export function LaunchWindow() {
 		});
 	}, []);
 
+	useEffect(() => {
+		if (!isLanguageMenuOpen) return;
+
+		const handlePointerDown = (event: PointerEvent) => {
+			const target = event.target as Node;
+			const clickedTrigger = languageTriggerRef.current?.contains(target);
+			const clickedMenu = languageMenuPanelRef.current?.contains(target);
+			if (!clickedTrigger && !clickedMenu) {
+				setIsLanguageMenuOpen(false);
+			}
+		};
+
+		const handleEscape = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				setIsLanguageMenuOpen(false);
+			}
+		};
+
+		window.addEventListener("pointerdown", handlePointerDown);
+		window.addEventListener("keydown", handleEscape);
+
+		return () => {
+			window.removeEventListener("pointerdown", handlePointerDown);
+			window.removeEventListener("keydown", handleEscape);
+		};
+	}, [isLanguageMenuOpen]);
+
+	useEffect(() => {
+		if (!isLanguageMenuOpen || !languageTriggerRef.current) return;
+
+		const updatePosition = () => {
+			if (!languageTriggerRef.current) return;
+			const rect = languageTriggerRef.current.getBoundingClientRect();
+			const gap = 8;
+			const viewportPadding = 8;
+			const availableHeight = Math.max(80, rect.top - viewportPadding - gap);
+			const top = Math.max(viewportPadding, rect.top - gap - availableHeight);
+
+			setLanguageMenuStyle({
+				right: Math.max(viewportPadding, window.innerWidth - rect.right),
+				top,
+				maxHeight: availableHeight,
+			});
+		};
+
+		updatePosition();
+		window.addEventListener("resize", updatePosition);
+		window.addEventListener("scroll", updatePosition, true);
+
+		return () => {
+			window.removeEventListener("resize", updatePosition);
+			window.removeEventListener("scroll", updatePosition, true);
+		};
+	}, [isLanguageMenuOpen]);
+
+	useEffect(() => {
+		if (!isLanguageMenuOpen || !languageMenuPanelRef.current) return;
+		const id = requestAnimationFrame(() => {
+			if (languageMenuPanelRef.current) {
+				languageMenuPanelRef.current.scrollTop = 0;
+			}
+		});
+		return () => cancelAnimationFrame(id);
+	}, [isLanguageMenuOpen]);
+
+	useEffect(() => {
+		window.electronAPI?.setHudOverlayIgnoreMouseEvents?.(true);
+		return () => {
+			window.electronAPI?.setHudOverlayIgnoreMouseEvents?.(false);
+		};
+	}, []);
+
 	const [selectedSource, setSelectedSource] = useState("Screen");
 	const [hasSelectedSource, setHasSelectedSource] = useState(false);
 
@@ -228,35 +322,65 @@ export function LaunchWindow() {
 	};
 
 	return (
-		<div className={`w-screen h-screen bg-transparent ${styles.electronDrag}`}>
-			{/* Language switcher — top-left, beside traffic lights */}
-			<div
-				className={`fixed top-2 flex items-center gap-1 px-2 py-1 rounded-md text-white/50 hover:text-white/90 hover:bg-white/10 transition-all duration-150 ${isMac ? "left-[72px]" : "left-2"} ${styles.electronNoDrag}`}
-			>
-				<Languages size={14} />
-				<select
-					value={locale}
-					onChange={(e) => setLocale(e.target.value as Locale)}
-					className="bg-transparent text-[11px] font-medium outline-none cursor-pointer appearance-none pr-1"
-					style={{ color: "inherit" }}
+		// Root fills the HUD window only. Avoid w-screen/h-screen (100vw/100vh):
+		// 100vw can exceed the inner layout width when scrollbars affect the
+		// viewport (notably on Windows), causing a horizontal scrollbar once the
+		// 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
+					className={`fixed top-8 left-1/2 z-30 w-[calc(100vw-1rem)] max-w-[520px] -translate-x-1/2 rounded-xl border border-white/15 bg-[rgba(20,20,28,0.95)] p-3 shadow-2xl backdrop-blur-xl text-white animate-in fade-in-0 zoom-in-95 duration-200 ${styles.electronNoDrag}`}
 				>
-					{SUPPORTED_LOCALES.map((loc) => (
-						<option key={loc} value={loc} className="bg-[#1c1c24] text-white">
-							{getLocaleName(loc)}
-						</option>
-					))}
-				</select>
-			</div>
+					<div className="text-[13px] font-semibold text-white">
+						{t("systemLanguagePrompt.title")}
+					</div>
+					<div className="mt-1 text-[11px] leading-relaxed text-white/75">
+						{t("systemLanguagePrompt.description", {
+							language: suggestedLanguageName,
+						})}
+					</div>
+					<div className="mt-3 flex items-center justify-end gap-2">
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							onClick={dismissSystemLocaleSuggestion}
+							className="h-7 text-xs text-white/80 hover:bg-white/10 hover:text-white"
+						>
+							{t("systemLanguagePrompt.keepDefault")}
+						</Button>
+						<Button
+							type="button"
+							size="sm"
+							onClick={acceptSystemLocaleSuggestion}
+							className="h-7 text-xs bg-white text-[#10121b] hover:bg-white/90"
+						>
+							{t("systemLanguagePrompt.switch", {
+								language: suggestedLanguageName,
+							})}
+						</Button>
+					</div>
+				</div>
+			)}
 
 			{/* Device selectors — fixed above HUD bar, viewport-relative, never clipped */}
 			{(showMicControls || showWebcamControls) && (
 				<div
-					className={`fixed bottom-[60px] left-1/2 -translate-x-1/2 flex items-center gap-2 animate-mic-panel-in ${styles.electronNoDrag}`}
+					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)}
@@ -300,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)}
@@ -376,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}`}>
@@ -385,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 */}
@@ -423,6 +550,7 @@ export function LaunchWindow() {
 						onClick={async () => {
 							await setWebcamEnabled(!webcamEnabled);
 						}}
+						disabled={recording}
 						title={webcamEnabled ? t("webcam.disableWebcam") : t("webcam.enableWebcam")}
 					>
 						{webcamEnabled
@@ -433,104 +561,152 @@ export function LaunchWindow() {
 
 				{/* Record/Stop group */}
 				<button
-					className={`flex items-center gap-0.5 rounded-full p-2 transition-colors duration-150 ${styles.electronNoDrag} ${
+					className={`flex items-center justify-center rounded-full p-2 transition-[min-width,background-color] duration-150 ${recording ? "min-w-[78px]" : "min-w-[36px]"} ${styles.electronNoDrag} ${
 						recording
 							? paused
 								? "bg-amber-500/10 hover:bg-amber-500/15"
-								: "animate-record-pulse bg-red-500/10"
-							: "bg-white/5 hover:bg-white/[0.08]"
+								: "bg-red-500/12 hover:bg-red-500/16"
+							: "bg-white/[0.06] hover:bg-white/[0.10]"
 					}`}
 					onClick={toggleRecording}
 					disabled={!hasSelectedSource && !recording}
 					style={{ flex: "0 0 auto" }}
 				>
-					{recording ? (
-						<>
-							{getIcon("stop", paused ? "text-amber-400" : "text-red-400")}
+					<div className={`flex items-center justify-center ${recording ? "gap-1.5" : ""}`}>
+						{recording
+							? getIcon("stop", paused ? "text-amber-400" : "text-red-400")
+							: getIcon("record", hasSelectedSource ? "text-white/80" : "text-white/30")}
+						{recording && (
 							<span
-								className={`${paused ? "text-amber-400" : "text-red-400"} text-xs font-semibold tabular-nums`}
+								className={`${paused ? "text-amber-400" : "text-red-400"} inline-block w-[34px] text-left text-xs font-semibold tabular-nums`}
 							>
 								{formatTimePadded(elapsedSeconds)}
 							</span>
-						</>
-					) : (
-						getIcon("record", hasSelectedSource ? "text-white/80" : "text-white/30")
-					)}
+						)}
+					</div>
 				</button>
 
 				{recording && (
-					<Tooltip content={paused ? t("tooltips.resumeRecording") : t("tooltips.pauseRecording")}>
-						<button
-							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-							onClick={togglePaused}
+					<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
+						<Tooltip
+							content={paused ? t("tooltips.resumeRecording") : t("tooltips.pauseRecording")}
 						>
-							{getIcon(paused ? "resume" : "pause", paused ? "text-amber-400" : "text-white/60")}
-						</button>
-					</Tooltip>
+							<button className={hudAuxIconBtnClasses} onClick={togglePaused}>
+								{getIcon(paused ? "resume" : "pause", paused ? "text-amber-400" : "text-white/60")}
+							</button>
+						</Tooltip>
+						<Tooltip content={t("tooltips.restartRecording")}>
+							<button className={hudAuxIconBtnClasses} onClick={restartRecording}>
+								{getIcon("restart", "text-white/60")}
+							</button>
+						</Tooltip>
+						<Tooltip content={t("tooltips.cancelRecording")}>
+							<button className={hudAuxIconBtnClasses} onClick={cancelRecording}>
+								{getIcon("cancel", "text-white/60")}
+							</button>
+						</Tooltip>
+					</div>
 				)}
 
-				{/* Restart recording */}
-				{recording && (
-					<Tooltip content={t("tooltips.restartRecording")}>
-						<button
-							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-							onClick={restartRecording}
-						>
-							{getIcon("restart", "text-white/60")}
-						</button>
-					</Tooltip>
+				{!recording && (
+					<>
+						{/* Open video file */}
+						<Tooltip content={t("tooltips.openVideoFile")}>
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={openVideoFile}
+							>
+								{getIcon("videoFile", "text-white/60")}
+							</button>
+						</Tooltip>
+
+						{/* Open project */}
+						<Tooltip content={t("tooltips.openProject")}>
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={openProjectFile}
+							>
+								{getIcon("folder", "text-white/60")}
+							</button>
+						</Tooltip>
+					</>
 				)}
 
-				{/* Cancel recording */}
-				{recording && (
-					<Tooltip content={t("tooltips.cancelRecording")}>
+				{/* Right sidebar controls */}
+				<div className={`${hudSidebarClasses} ${styles.electronNoDrag}`}>
+					<div className={`${styles.languageMenuContainer} ${styles.electronNoDrag}`}>
 						<button
-							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-							onClick={cancelRecording}
+							ref={languageTriggerRef}
+							type="button"
+							aria-label={t("language")}
+							aria-expanded={isLanguageMenuOpen}
+							aria-haspopup="menu"
+							onClick={() => setIsLanguageMenuOpen((open) => !open)}
+							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}`}
 						>
-							{getIcon("cancel", "text-white/60")}
+							<Languages size={13} className="text-white/70" />
+							<span className="max-w-[54px] truncate text-[10px] font-semibold text-white/75">
+								{activeLanguageLabel}
+							</span>
 						</button>
-					</Tooltip>
-				)}
+					</div>
 
-				{/* Open video file */}
-				<Tooltip content={t("tooltips.openVideoFile")}>
-					<button
-						className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-						onClick={openVideoFile}
-						disabled={recording}
-					>
-						{getIcon("videoFile", "text-white/60")}
-					</button>
-				</Tooltip>
+					{isLanguageMenuOpen
+						? createPortal(
+								<div
+									ref={languageMenuPanelRef}
+									role="menu"
+									className={`${styles.languageMenuPanel} ${styles.languageMenuScroll} ${styles.electronNoDrag}`}
+									style={
+										{
+											WebkitAppRegion: "no-drag",
+											pointerEvents: "auto",
+											right: `${languageMenuStyle.right}px`,
+											top: `${languageMenuStyle.top}px`,
+											maxHeight: `${languageMenuStyle.maxHeight}px`,
+										} as React.CSSProperties
+									}
+									onPointerDown={(event) => event.stopPropagation()}
+								>
+									{availableLocales.map((loc) => (
+										<button
+											key={loc}
+											type="button"
+											role="menuitemradio"
+											aria-checked={loc === locale}
+											onClick={() => {
+												setLocale(loc);
+												resolveSystemLocaleSuggestion();
+												setIsLanguageMenuOpen(false);
+											}}
+											className={`${styles.languageMenuItem} ${loc === locale ? styles.languageMenuItemActive : ""}`}
+										>
+											<span className="truncate">{getLocaleName(loc)}</span>
+											{loc === locale ? <Check size={11} className="text-white/85" /> : null}
+										</button>
+									))}
+								</div>,
+								document.body,
+							)
+						: null}
 
-				{/* Open project */}
-				<Tooltip content={t("tooltips.openProject")}>
-					<button
-						className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-						onClick={openProjectFile}
-						disabled={recording}
-					>
-						{getIcon("folder", "text-white/60")}
-					</button>
-				</Tooltip>
-
-				{/* Window controls */}
-				<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
-					<button
-						className={windowBtnClasses}
-						title={t("tooltips.hideHUD")}
-						onClick={sendHudOverlayHide}
-					>
-						{getIcon("minimize", "text-white")}
-					</button>
-					<button
-						className={windowBtnClasses}
-						title={t("tooltips.closeApp")}
-						onClick={sendHudOverlayClose}
-					>
-						{getIcon("close", "text-white")}
-					</button>
+					{/* Window controls */}
+					<div className="flex items-center gap-0.5">
+						<button
+							className={windowBtnClasses}
+							title={t("tooltips.hideHUD")}
+							onClick={sendHudOverlayHide}
+						>
+							{getIcon("minimize", "text-white")}
+						</button>
+						<button
+							className={windowBtnClasses}
+							title={t("tooltips.closeApp")}
+							onClick={sendHudOverlayClose}
+						>
+							{getIcon("close", "text-white")}
+						</button>
+					</div>
 				</div>
 			</div>
 		</div>

src/components/launch/SourceSelector.module.css

@@ -1,38 +1,46 @@
 .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: 14px;
-	box-shadow:
-		0 4px 16px 0 rgba(0, 0, 0, 0.32),
-		0 1px 3px 0 rgba(0, 0, 0, 0.18) inset;
-	border: 1px solid rgba(60, 60, 80, 0.18);
+	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.
+		The result is easily visible when you place a white window just behind the SourceSelector
+	*/
+	/* box-shadow:
+		0 0px 16px 0 rgba(0, 0, 0, 0.32),
+		0 1px 3px 0 rgba(0, 0, 0, 0.18) inset; */
+	border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .sourceCard {
-	border-radius: 12px;
-	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);
+	corner-shape: squircle;
+	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: 2px 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 {
@@ -40,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 {
@@ -59,41 +67,38 @@
 
 /* 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 */
-.sourceGridScroll {
-	scrollbar-width: thin;
-	scrollbar-color: rgba(52, 178, 123, 0.5) rgba(40, 40, 50, 0.6);
-}
 
 .sourceGridScroll::-webkit-scrollbar {
-	width: 8px;
+	width: 3px;
 }
 
 .sourceGridScroll::-webkit-scrollbar-track {
-	background: rgba(30, 30, 38, 0.5);
+	background: rgba(30, 30, 38, 0.3);
 	border-radius: 4px;
-	margin: 4px 0;
 }
 
 .sourceGridScroll::-webkit-scrollbar-thumb {
-	background: rgba(80, 80, 100, 0.6);
-	border-radius: 4px;
+	background: rgba(52, 178, 123, 0.5);
+	border-radius: 10px;
 }
 
 .sourceGridScroll::-webkit-scrollbar-thumb:hover {
 	background: rgba(52, 178, 123, 0.6);
+	cursor: grab;
 }
 
 .sourceGridScroll::-webkit-scrollbar-thumb:active {
 	background: rgba(52, 178, 123, 0.8);
+	cursor: grabbing;
 }

src/components/launch/SourceSelector.tsx

@@ -65,7 +65,7 @@ export function SourceSelector() {
 				style={{ minHeight: "100vh" }}
 			>
 				<div className="text-center">
-					<div className="animate-spin rounded-full h-6 w-6 border-b-2 border-[#34B27B] mx-auto mb-2" />
+					<div className="animate-spin duration-500 rounded-[50%] h-6 w-6 border-2 border-b-transparent border-[#34B27B] mx-auto mb-2" />
 					<p className="text-xs text-zinc-400">{t("sourceSelector.loading")}</p>
 				</div>
 			</div>
@@ -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-lg"
+						className="w-full aspect-video object-cover"
 					/>
 					{isSelected && (
-						<div className="absolute -top-1.5 -right-1.5">
+						<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-full">
+					<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-full text-xs py-1 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-full text-xs py-1 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 pr-1 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 pr-1 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 flex justify-center 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 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 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/ui/accordion.tsx

@@ -52,4 +52,4 @@ const AccordionContent = React.forwardRef<
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

src/components/ui/card.tsx

@@ -52,4 +52,4 @@ const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
 );
 CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

src/components/ui/color-picker.tsx

@@ -0,0 +1,161 @@
+import { HsvaColor, hexToHsva } from "@uiw/color-convert";
+import Block from "@uiw/react-color-block";
+import Colorful from "@uiw/react-color-colorful";
+import { useEffect, useState } from "react";
+import { Button } from "./button";
+import { Input } from "./input";
+
+type BaseProps = {
+	selectedColor: string;
+	colorPalette: string[];
+	onUpdateColor: (color: string) => void;
+};
+
+type ColorPickerProps =
+	| (BaseProps & {
+			clearBackgroundOption?: false;
+			translations: Record<"colorWheel" | "colorPalette", string>;
+	  })
+	| (BaseProps & {
+			clearBackgroundOption: true;
+			translations: Record<"colorWheel" | "colorPalette" | "clearBackground", string>;
+	  });
+
+export default function ColorPicker(props: ColorPickerProps) {
+	const { selectedColor, colorPalette, translations, onUpdateColor } = props;
+	const [colorMode, setColorMode] = useState<"wheel" | "palette">("wheel");
+	const [hexInput, setHexInput] = useState(selectedColor);
+	const [transparentColorHSVA, setTransparentColorHSVA] = useState<HsvaColor>({
+		h: 0,
+		s: 0,
+		v: 0,
+		a: 0,
+	});
+
+	useEffect(() => {
+		setHexInput(selectedColor);
+	}, [selectedColor]);
+
+	const getTextColor = (color: string) => {
+		if (color === "transparent") return "#ffffff";
+		const r = parseInt(color.slice(1, 3), 16);
+		const g = parseInt(color.slice(3, 5), 16);
+		const b = parseInt(color.slice(5, 7), 16);
+		const luminance = 0.299 * r + 0.587 * g + 0.114 * b;
+		if (luminance > 186) return "#000000";
+		return "#ffffff";
+	};
+
+	// Normalize the hex input.
+	// Adds a # at the beginning of the input if it's not there.
+	const normalizeHexDraft = (raw: string) => {
+		const trimmed = raw.trim();
+		if (trimmed === "") return "";
+		if (/^[0-9A-Fa-f]/.test(trimmed[0])) return `#${trimmed}`;
+		return trimmed;
+	};
+
+	const handleColorInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		const normalized = normalizeHexDraft(e.target.value);
+		setHexInput(normalized);
+		// Check if the normalized hex is a valid hex color.
+		// It should follow the format #RRGGBB or #RGB.
+		const isValidHexColor =
+			/^#[0-9A-Fa-f]{3}$/.test(normalized) || /^#[0-9A-Fa-f]{6}$/.test(normalized);
+		if (isValidHexColor) {
+			onUpdateColor(normalized);
+		}
+	};
+
+	const toTransparent = (color: string) => {
+		if (color === "transparent") return;
+		const hsva = hexToHsva(color);
+		hsva.a = 0;
+		return hsva;
+	};
+	return (
+		<div className="p-1 flex flex-col gap-4 items-center">
+			<div className="flex items-center gap-2 w-full">
+				<Button
+					variant="outline"
+					size="sm"
+					className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
+					onClick={() => setColorMode("wheel")}
+					style={{
+						backgroundColor: colorMode === "wheel" ? "#34B27B" : "transparent",
+					}}
+				>
+					<span className="text-xs text-slate-300 truncate flex-1 text-left">
+						{translations.colorWheel}
+					</span>
+				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					className="w-full h-9 justify-start gap-2 bg-white/5 border-white/10 hover:bg-white/10 px-2"
+					onClick={() => setColorMode("palette")}
+					style={{
+						backgroundColor: colorMode === "palette" ? "#34B27B" : "transparent",
+					}}
+				>
+					<span className="text-xs text-slate-300 truncate flex-1 text-left">
+						{translations.colorPalette}
+					</span>
+				</Button>
+			</div>
+			{colorMode === "wheel" && (
+				<>
+					<div
+						className={`w-full h-20 flex items-center justify-center border border-white/10 rounded-lg`}
+						style={{ backgroundColor: selectedColor }}
+					>
+						<span style={{ color: getTextColor(selectedColor) }}>{selectedColor}</span>
+					</div>
+					<Colorful
+						color={selectedColor !== "transparent" ? selectedColor : transparentColorHSVA}
+						onChange={(color) => {
+							onUpdateColor(color.hex);
+						}}
+						style={{
+							borderRadius: "8px",
+						}}
+						disableAlpha={true}
+					/>
+					<Input
+						type="text"
+						value={hexInput}
+						className="w-full h-9 rounded-md border border-white/10 bg-white/5 px-2 text-xs text-slate-200 outline-none focus:border-[#34B27B]/50 focus:ring-1 focus:ring-[#34B27B]/30 [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none"
+						onChange={handleColorInputChange}
+					/>
+				</>
+			)}
+			{colorMode === "palette" && (
+				<Block
+					color={selectedColor !== "transparent" ? selectedColor : transparentColorHSVA}
+					colors={colorPalette}
+					onChange={(color) => {
+						onUpdateColor(color.hex);
+					}}
+					style={{
+						width: "100%",
+						borderRadius: "8px",
+					}}
+				/>
+			)}
+			{props.clearBackgroundOption === true && (
+				<Button
+					variant="ghost"
+					size="sm"
+					className="w-full mt-2 text-xs h-7 hover:bg-white/5 text-slate-400"
+					onClick={() => {
+						const hsva = toTransparent(selectedColor);
+						if (hsva) setTransparentColorHSVA(hsva);
+						onUpdateColor("transparent");
+					}}
+				>
+					{props.translations.clearBackground}
+				</Button>
+			)}
+		</div>
+	);
+}

src/components/ui/dialog.tsx

@@ -90,13 +90,13 @@ DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
 	Dialog,
-	DialogPortal,
-	DialogOverlay,
-	DialogTrigger,
 	DialogClose,
 	DialogContent,
-	DialogHeader,
-	DialogFooter,
-	DialogTitle,
 	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
 };

src/components/ui/dropdown-menu.tsx

@@ -54,9 +54,11 @@ DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayNam
 
 const DropdownMenuContent = React.forwardRef<
 	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-	<DropdownMenuPrimitive.Portal>
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+		portalled?: boolean;
+	}
+>(({ className, sideOffset = 4, portalled = true, ...props }, ref) => {
+	const content = (
 		<DropdownMenuPrimitive.Content
 			ref={ref}
 			sideOffset={sideOffset}
@@ -67,8 +69,14 @@ const DropdownMenuContent = React.forwardRef<
 			)}
 			{...props}
 		/>
-	</DropdownMenuPrimitive.Portal>
-));
+	);
+
+	if (!portalled) {
+		return content;
+	}
+
+	return <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>;
+});
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
@@ -169,18 +177,18 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
 	DropdownMenu,
-	DropdownMenuTrigger,
-	DropdownMenuContent,
-	DropdownMenuItem,
 	DropdownMenuCheckboxItem,
-	DropdownMenuRadioItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
 	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
 	DropdownMenuSeparator,
 	DropdownMenuShortcut,
-	DropdownMenuGroup,
-	DropdownMenuPortal,
 	DropdownMenuSub,
 	DropdownMenuSubContent,
 	DropdownMenuSubTrigger,
-	DropdownMenuRadioGroup,
+	DropdownMenuTrigger,
 };

src/components/ui/popover.tsx

@@ -57,4 +57,4 @@ function PopoverArrow({
 	);
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow };
+export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger };

src/components/ui/select.tsx

@@ -62,34 +62,50 @@ SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayNam
 
 const SelectContent = React.forwardRef<
 	React.ElementRef<typeof SelectPrimitive.Content>,
-	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
->(({ className, children, position = "popper", ...props }, ref) => (
-	<SelectPrimitive.Portal>
-		<SelectPrimitive.Content
-			ref={ref}
-			className={cn(
-				"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-				position === "popper" &&
-					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-				className,
-			)}
-			position={position}
-			{...props}
-		>
-			<SelectScrollUpButton />
-			<SelectPrimitive.Viewport
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> & {
+		showScrollButtons?: boolean;
+		viewportClassName?: string;
+	}
+>(
+	(
+		{
+			className,
+			children,
+			position = "popper",
+			showScrollButtons = true,
+			viewportClassName,
+			...props
+		},
+		ref,
+	) => (
+		<SelectPrimitive.Portal>
+			<SelectPrimitive.Content
+				ref={ref}
 				className={cn(
-					"p-1",
+					"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 					position === "popper" &&
-						"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+						"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1",
+					className,
 				)}
+				position={position}
+				{...props}
 			>
-				{children}
-			</SelectPrimitive.Viewport>
-			<SelectScrollDownButton />
-		</SelectPrimitive.Content>
-	</SelectPrimitive.Portal>
-));
+				{showScrollButtons ? <SelectScrollUpButton /> : null}
+				<SelectPrimitive.Viewport
+					className={cn(
+						"p-1",
+						position === "popper" &&
+							"max-h-[var(--radix-select-content-available-height)] w-full min-w-[var(--radix-select-trigger-width)]",
+						viewportClassName,
+					)}
+				>
+					{children}
+				</SelectPrimitive.Viewport>
+				{showScrollButtons ? <SelectScrollDownButton /> : null}
+			</SelectPrimitive.Content>
+		</SelectPrimitive.Portal>
+	),
+);
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
@@ -141,13 +157,13 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
 	Select,
-	SelectGroup,
-	SelectValue,
-	SelectTrigger,
 	SelectContent,
-	SelectLabel,
+	SelectGroup,
 	SelectItem,
-	SelectSeparator,
-	SelectScrollUpButton,
+	SelectLabel,
 	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
 };

src/components/ui/tabs.tsx

@@ -50,4 +50,4 @@ const TabsContent = React.forwardRef<
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsContent, TabsList, TabsTrigger };

src/components/ui/tooltip.tsx

@@ -67,4 +67,4 @@ function Tooltip({
 	);
 }
 
-export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent, Tooltip };
+export { Tooltip, TooltipContent, TooltipProvider, TooltipRoot, TooltipTrigger };

src/components/video-editor/AnnotationOverlay.tsx

@@ -1,15 +1,27 @@
-import { type CSSProperties, type PointerEvent, useRef, useState } from "react";
+import { type CSSProperties, type PointerEvent, useEffect, useRef, useState } from "react";
 import { Rnd } from "react-rnd";
+import {
+	getBlurOverlayColor,
+	getMosaicGridOverlayColor,
+	getNormalizedMosaicBlockSize,
+} from "@/lib/blurEffects";
 import { cn } from "@/lib/utils";
 import { getArrowComponent } from "./ArrowSvgs";
 import {
 	type AnnotationRegion,
 	type BlurData,
+	DEFAULT_BLUR_BLOCK_SIZE,
 	DEFAULT_BLUR_DATA,
 	DEFAULT_BLUR_INTENSITY,
 } from "./types";
 
 const FREEHAND_POINT_THRESHOLD = 1;
+type PreviewCanvasSource = {
+	width: number;
+	height: number;
+	clientWidth?: number;
+	clientHeight?: number;
+};
 
 function buildBlurPolygonClipPath(points: Array<{ x: number; y: number }>) {
 	if (points.length < 3) return undefined;
@@ -36,6 +48,8 @@ interface AnnotationOverlayProps {
 	onClick: (id: string) => void;
 	zIndex: number;
 	isSelectedBoost: boolean; // Boost z-index when selected for easy editing
+	previewSourceCanvas?: PreviewCanvasSource | null;
+	previewFrameVersion?: number;
 }
 
 export function AnnotationOverlay({
@@ -50,11 +64,13 @@ export function AnnotationOverlay({
 	onClick,
 	zIndex,
 	isSelectedBoost,
+	previewSourceCanvas,
+	previewFrameVersion,
 }: AnnotationOverlayProps) {
-	const x = (annotation.position.x / 100) * containerWidth;
-	const y = (annotation.position.y / 100) * containerHeight;
-	const width = (annotation.size.width / 100) * containerWidth;
-	const height = (annotation.size.height / 100) * containerHeight;
+	const committedX = (annotation.position.x / 100) * containerWidth;
+	const committedY = (annotation.position.y / 100) * containerHeight;
+	const committedWidth = (annotation.size.width / 100) * containerWidth;
+	const committedHeight = (annotation.size.height / 100) * containerHeight;
 	const blurShape = annotation.type === "blur" ? (annotation.blurData?.shape ?? "rectangle") : null;
 	const isSelectedFreehandBlur = isSelected && blurShape === "freehand";
 	const isDraggingRef = useRef(false);
@@ -65,6 +81,107 @@ export function AnnotationOverlay({
 		[],
 	);
 	const [livePointerPoint, setLivePointerPoint] = useState<{ x: number; y: number } | null>(null);
+	const mosaicCanvasRef = useRef<HTMLCanvasElement | null>(null);
+	const blurType = "mosaic";
+	const blurOverlayColor =
+		annotation.type === "blur" ? getBlurOverlayColor(annotation.blurData) : "";
+	const mosaicGridOverlayColor =
+		annotation.type === "blur" ? getMosaicGridOverlayColor(annotation.blurData) : "";
+	const [liveRect, setLiveRect] = useState({
+		x: committedX,
+		y: committedY,
+		width: committedWidth,
+		height: committedHeight,
+	});
+
+	useEffect(() => {
+		setLiveRect({
+			x: committedX,
+			y: committedY,
+			width: committedWidth,
+			height: committedHeight,
+		});
+	}, [committedHeight, committedWidth, committedX, committedY]);
+
+	const { x, y, width, height } = liveRect;
+
+	useEffect(() => {
+		if (annotation.type !== "blur") {
+			return;
+		}
+		void previewFrameVersion;
+
+		const canvas = mosaicCanvasRef.current;
+		const sourceCanvas = previewSourceCanvas;
+		if (!canvas || !sourceCanvas) {
+			return;
+		}
+
+		const sourceWidth = sourceCanvas.width;
+		const sourceHeight = sourceCanvas.height;
+		const sourceClientWidth = sourceCanvas.clientWidth || containerWidth || sourceWidth;
+		const sourceClientHeight = sourceCanvas.clientHeight || containerHeight || sourceHeight;
+		if (
+			sourceWidth <= 0 ||
+			sourceHeight <= 0 ||
+			sourceClientWidth <= 0 ||
+			sourceClientHeight <= 0
+		) {
+			return;
+		}
+
+		const drawWidth = Math.max(1, Math.round(width));
+		const drawHeight = Math.max(1, Math.round(height));
+		if (drawWidth <= 0 || drawHeight <= 0) {
+			return;
+		}
+
+		canvas.width = drawWidth;
+		canvas.height = drawHeight;
+
+		const context = canvas.getContext("2d", { willReadFrequently: true });
+		if (!context) {
+			return;
+		}
+
+		const scaleX = sourceWidth / sourceClientWidth;
+		const scaleY = sourceHeight / sourceClientHeight;
+		const sourceX = Math.max(0, Math.floor(x * scaleX));
+		const sourceY = Math.max(0, Math.floor(y * scaleY));
+		const sourceSampleWidth = Math.max(1, Math.ceil(drawWidth * scaleX));
+		const sourceSampleHeight = Math.max(1, Math.ceil(drawHeight * scaleY));
+		const clampedSampleWidth = Math.max(1, Math.min(sourceSampleWidth, sourceWidth - sourceX));
+		const clampedSampleHeight = Math.max(1, Math.min(sourceSampleHeight, sourceHeight - sourceY));
+		const blockSize = getNormalizedMosaicBlockSize(annotation.blurData);
+		const downscaledWidth = Math.max(1, Math.round(drawWidth / blockSize));
+		const downscaledHeight = Math.max(1, Math.round(drawHeight / blockSize));
+		canvas.width = downscaledWidth;
+		canvas.height = downscaledHeight;
+
+		context.clearRect(0, 0, downscaledWidth, downscaledHeight);
+		context.imageSmoothingEnabled = true;
+		context.drawImage(
+			sourceCanvas as CanvasImageSource,
+			sourceX,
+			sourceY,
+			clampedSampleWidth,
+			clampedSampleHeight,
+			0,
+			0,
+			downscaledWidth,
+			downscaledHeight,
+		);
+	}, [
+		annotation,
+		containerHeight,
+		containerWidth,
+		height,
+		previewFrameVersion,
+		previewSourceCanvas,
+		width,
+		x,
+		y,
+	]);
 
 	const renderArrow = () => {
 		const direction = annotation.figureData?.arrowDirection || "right";
@@ -240,6 +357,10 @@ export function AnnotationOverlay({
 					1,
 					Math.round(annotation.blurData?.intensity ?? DEFAULT_BLUR_INTENSITY),
 				);
+				const blockSize = Math.max(
+					1,
+					Math.round(annotation.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE),
+				);
 				const activeFreehandPoints =
 					shape === "freehand"
 						? isFreehandDrawing
@@ -292,12 +413,43 @@ export function AnnotationOverlay({
 								className="absolute inset-0"
 								style={{
 									...shapeMaskStyle,
-									backdropFilter: `blur(${blurIntensity}px)`,
-									WebkitBackdropFilter: `blur(${blurIntensity}px)`,
-									backgroundColor: "rgba(255, 255, 255, 0.02)",
+									backdropFilter: blurType === "mosaic" ? "none" : `blur(${blurIntensity}px)`,
+									WebkitBackdropFilter: blurType === "mosaic" ? "none" : `blur(${blurIntensity}px)`,
+									backgroundColor: blurOverlayColor,
 									opacity: shouldShowFreehandBlurFill ? 1 : 0,
 								}}
 							/>
+							{blurType === "mosaic" && shouldShowFreehandBlurFill && (
+								<canvas
+									ref={mosaicCanvasRef}
+									className="absolute inset-0 w-full h-full"
+									style={{
+										...shapeMaskStyle,
+										imageRendering: "pixelated",
+									}}
+								/>
+							)}
+							{blurType === "mosaic" && shouldShowFreehandBlurFill && (
+								<div
+									className="absolute inset-0 pointer-events-none"
+									style={{
+										...shapeMaskStyle,
+										backgroundColor: blurOverlayColor,
+									}}
+								/>
+							)}
+							{blurType === "mosaic" && (
+								<div
+									className="absolute inset-0 pointer-events-none"
+									style={{
+										...shapeMaskStyle,
+										backgroundImage: `linear-gradient(${mosaicGridOverlayColor} 1px, transparent 1px), linear-gradient(90deg, ${mosaicGridOverlayColor} 1px, transparent 1px)`,
+										backgroundSize: `${blockSize}px ${blockSize}px`,
+										mixBlendMode: "screen",
+										opacity: 0.35,
+									}}
+								/>
+							)}
 							{isSelected && shape !== "freehand" && (
 								<div
 									className="absolute inset-0 pointer-events-none border-2 border-[#34B27B]/80"
@@ -354,7 +506,19 @@ export function AnnotationOverlay({
 			onDragStart={() => {
 				isDraggingRef.current = true;
 			}}
+			onDrag={(_e, d) => {
+				setLiveRect((prev) => ({
+					...prev,
+					x: d.x,
+					y: d.y,
+				}));
+			}}
 			onDragStop={(_e, d) => {
+				setLiveRect((prev) => ({
+					...prev,
+					x: d.x,
+					y: d.y,
+				}));
 				const xPercent = (d.x / containerWidth) * 100;
 				const yPercent = (d.y / containerHeight) * 100;
 				onPositionChange(annotation.id, { x: xPercent, y: yPercent });
@@ -364,7 +528,21 @@ export function AnnotationOverlay({
 					isDraggingRef.current = false;
 				}, 100);
 			}}
+			onResize={(_e, _direction, ref, _delta, position) => {
+				setLiveRect({
+					x: position.x,
+					y: position.y,
+					width: ref.offsetWidth,
+					height: ref.offsetHeight,
+				});
+			}}
 			onResizeStop={(_e, _direction, ref, _delta, position) => {
+				setLiveRect({
+					x: position.x,
+					y: position.y,
+					width: ref.offsetWidth,
+					height: ref.offsetHeight,
+				});
 				const xPercent = (position.x / containerWidth) * 100;
 				const yPercent = (position.y / containerHeight) * 100;
 				const widthPercent = (ref.offsetWidth / containerWidth) * 100;

src/components/video-editor/AnnotationSettingsPanel.tsx

@@ -5,8 +5,8 @@ import {
 	AlignRight,
 	Bold,
 	ChevronDown,
+	Copy,
 	Image as ImageIcon,
-	Info,
 	Italic,
 	Trash2,
 	Type,
@@ -30,6 +30,7 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { useScopedT } from "@/contexts/I18nContext";
 import { type CustomFont, getCustomFonts } from "@/lib/customFonts";
 import { cn } from "@/lib/utils";
+import ColorPicker from "../ui/color-picker";
 import { AddCustomFontDialog } from "./AddCustomFontDialog";
 import { getArrowComponent } from "./ArrowSvgs";
 import {
@@ -45,6 +46,7 @@ interface AnnotationSettingsPanelProps {
 	onTypeChange: (type: AnnotationType) => void;
 	onStyleChange: (style: Partial<AnnotationRegion["style"]>) => void;
 	onFigureDataChange?: (figureData: FigureData) => void;
+	onDuplicate?: () => void;
 	onDelete: () => void;
 }
 
@@ -67,12 +69,12 @@ export function AnnotationSettingsPanel({
 	onTypeChange,
 	onStyleChange,
 	onFigureDataChange,
+	onDuplicate,
 	onDelete,
 }: AnnotationSettingsPanelProps) {
 	const t = useScopedT("settings");
 	const fileInputRef = useRef<HTMLInputElement>(null);
 	const [customFonts, setCustomFonts] = useState<CustomFont[]>([]);
-
 	const fontStyleLabels: Record<string, string> = {
 		classic: t("fontStyles.classic"),
 		editor: t("fontStyles.editor"),
@@ -145,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"
@@ -385,15 +387,19 @@ export function AnnotationSettingsPanel({
 												<ChevronDown className="h-3 w-3 opacity-50" />
 											</Button>
 										</PopoverTrigger>
-										<PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
-											<Block
-												color={annotation.style.color}
-												colors={colorPalette}
-												onChange={(color) => {
-													onStyleChange({ color: color.hex });
+										<PopoverContent
+											side="top"
+											className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl"
+										>
+											<ColorPicker
+												selectedColor={annotation.style.color}
+												colorPalette={colorPalette}
+												translations={{
+													colorWheel: t("annotation.colorWheel"),
+													colorPalette: t("annotation.colorPalette"),
 												}}
-												style={{
-													borderRadius: "8px",
+												onUpdateColor={(color) => {
+													onStyleChange({ color: color });
 												}}
 											/>
 										</PopoverContent>
@@ -424,31 +430,23 @@ export function AnnotationSettingsPanel({
 												<ChevronDown className="h-3 w-3 opacity-50" />
 											</Button>
 										</PopoverTrigger>
-										<PopoverContent className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl">
-											<Block
-												color={
-													annotation.style.backgroundColor === "transparent"
-														? "#000000"
-														: annotation.style.backgroundColor
-												}
-												colors={colorPalette}
-												onChange={(color) => {
-													onStyleChange({ backgroundColor: color.hex });
+										<PopoverContent
+											side="top"
+											className="w-[260px] p-3 bg-[#1a1a1c] border border-white/10 rounded-xl shadow-xl"
+										>
+											<ColorPicker
+												selectedColor={annotation.style.backgroundColor}
+												colorPalette={colorPalette}
+												translations={{
+													colorWheel: t("annotation.colorWheel"),
+													colorPalette: t("annotation.colorPalette"),
+													clearBackground: t("annotation.clearBackground"),
 												}}
-												style={{
-													borderRadius: "8px",
+												clearBackgroundOption={true}
+												onUpdateColor={(color) => {
+													onStyleChange({ backgroundColor: color });
 												}}
 											/>
-											<Button
-												variant="ghost"
-												size="sm"
-												className="w-full mt-2 text-xs h-7 hover:bg-white/5 text-slate-400"
-												onClick={() => {
-													onStyleChange({ backgroundColor: "transparent" });
-												}}
-											>
-												{t("annotation.clearBackground")}
-											</Button>
 										</PopoverContent>
 									</Popover>
 								</div>
@@ -602,26 +600,27 @@ export function AnnotationSettingsPanel({
 					</TabsContent>
 				</Tabs>
 
-				<Button
-					onClick={onDelete}
-					variant="destructive"
-					size="sm"
-					className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all mt-4"
-				>
-					<Trash2 className="w-4 h-4" />
-					{t("annotation.deleteAnnotation")}
-				</Button>
+				<div className="mt-4 grid grid-cols-2 gap-2">
+					<Button
+						onClick={() => onDuplicate?.()}
+						variant="outline"
+						size="sm"
+						disabled={!onDuplicate}
+						className="w-full gap-2 bg-white/5 text-slate-200 border border-white/10 hover:bg-white/10 hover:border-white/20 transition-all"
+					>
+						<Copy className="w-4 h-4" />
+						Duplicate
+					</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>
-						<li>{t("annotation.tipTabCycle")}</li>
-						<li>{t("annotation.tipShiftTabCycle")}</li>
-					</ul>
+					<Button
+						onClick={onDelete}
+						variant="destructive"
+						size="sm"
+						className="w-full gap-2 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all"
+					>
+						<Trash2 className="w-4 h-4" />
+						{t("annotation.deleteAnnotation")}
+					</Button>
 				</div>
 			</div>
 		</div>

src/components/video-editor/BlurSettingsPanel.tsx

@@ -1,15 +1,18 @@
-import { Info, Trash2 } from "lucide-react";
+import { Trash2 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
 import { useScopedT } from "@/contexts/I18nContext";
+import { getBlurOverlayColor } from "@/lib/blurEffects";
 import { cn } from "@/lib/utils";
 import {
 	type AnnotationRegion,
+	type BlurColor,
 	type BlurData,
 	type BlurShape,
+	DEFAULT_BLUR_BLOCK_SIZE,
 	DEFAULT_BLUR_DATA,
-	MAX_BLUR_INTENSITY,
-	MIN_BLUR_INTENSITY,
+	MAX_BLUR_BLOCK_SIZE,
+	MIN_BLUR_BLOCK_SIZE,
 } from "./types";
 
 interface BlurSettingsPanelProps {
@@ -31,15 +34,21 @@ export function BlurSettingsPanel({
 		{ value: "rectangle", labelKey: "blurShapeRectangle" },
 		{ value: "oval", labelKey: "blurShapeOval" },
 	];
+	const blurColorOptions: Array<{ value: BlurColor; labelKey: string }> = [
+		{ value: "white", labelKey: "blurColorWhite" },
+		{ value: "black", labelKey: "blurColorBlack" },
+	];
 
 	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">
@@ -53,6 +62,7 @@ export function BlurSettingsPanel({
 									const nextBlurData: BlurData = {
 										...DEFAULT_BLUR_DATA,
 										...blurRegion.blurData,
+										type: "mosaic",
 										shape: shape.value,
 									};
 									onBlurDataChange(nextBlurData);
@@ -61,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",
@@ -83,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>
@@ -91,27 +101,78 @@ export function BlurSettingsPanel({
 					})}
 				</div>
 
-				<div className="mt-4 p-3 rounded-lg bg-white/5 border border-white/10">
+				<div className="mt-4">
+					<label className="text-xs font-medium text-slate-300 mb-2 block">
+						{t("annotation.blurColor")}
+					</label>
+					<div className="grid grid-cols-2 gap-2">
+						{blurColorOptions.map((option) => {
+							const activeColor = blurRegion.blurData?.color ?? DEFAULT_BLUR_DATA.color;
+							const isActive = activeColor === option.value;
+							return (
+								<button
+									key={option.value}
+									onClick={() => {
+										const nextBlurData: BlurData = {
+											...DEFAULT_BLUR_DATA,
+											...blurRegion.blurData,
+											type: "mosaic",
+											color: option.value,
+										};
+										onBlurDataChange(nextBlurData);
+										requestAnimationFrame(() => {
+											onBlurDataCommit?.();
+										});
+									}}
+									className={cn(
+										"h-10 rounded-lg border flex items-center gap-2 px-3 transition-all",
+										isActive
+											? "bg-[#34B27B] border-[#34B27B]"
+											: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+									)}
+								>
+									<div
+										className="w-4 h-4 rounded-full border border-white/20"
+										style={{
+											backgroundColor: getBlurOverlayColor({
+												...DEFAULT_BLUR_DATA,
+												...blurRegion.blurData,
+												color: option.value,
+											}),
+										}}
+									/>
+									<span className="text-xs text-slate-200">
+										{t(`annotation.${option.labelKey}`)}
+									</span>
+								</button>
+							);
+						})}
+					</div>
+				</div>
+
+				<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">
-							{t("annotation.blurIntensity")}
+							{t("annotation.mosaicBlockSize")}
 						</span>
 						<span className="text-[10px] text-slate-400 font-mono">
-							{Math.round(blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity)}px
+							{Math.round(blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)}
+							px
 						</span>
 					</div>
 					<Slider
-						value={[blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity]}
+						value={[blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE]}
 						onValueChange={(values) => {
 							onBlurDataChange({
 								...DEFAULT_BLUR_DATA,
 								...blurRegion.blurData,
-								intensity: values[0],
+								type: "mosaic",
+								blockSize: values[0],
 							});
 						}}
 						onValueCommit={() => onBlurDataCommit?.()}
-						min={MIN_BLUR_INTENSITY}
-						max={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"
 					/>
@@ -126,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/ShortcutsConfigDialog.tsx

@@ -126,95 +126,99 @@ export function ShortcutsConfigDialog() {
 				if (!open) handleClose();
 			}}
 		>
-			<DialogContent className="bg-[#09090b] border-white/10 text-white max-w-[420px]">
-				<DialogHeader>
+			<DialogContent className="bg-[#09090b] border-white/10 text-white max-w-[420px] max-h-[85vh] flex flex-col">
+				<DialogHeader className="shrink-0">
 					<DialogTitle className="flex items-center gap-2 text-sm">
 						<Keyboard className="w-4 h-4 text-[#34B27B]" />
 						{t("title")}
 					</DialogTitle>
 				</DialogHeader>
 
-				<div className="space-y-0.5">
-					<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
-						{t("configurable")}
-					</p>
-					{SHORTCUT_ACTIONS.map((action) => {
-						const isCapturing = captureFor === action;
-						const hasConflict = conflict?.forAction === action;
-						return (
-							<div key={action}>
-								<div className="flex items-center justify-between py-1.5 px-1 border-b border-white/5">
-									<span className="text-sm text-slate-300">{t(`actions.${action}`)}</span>
-									<button
-										type="button"
-										onClick={() => {
-											setConflict(null);
-											setCaptureFor(isCapturing ? null : action);
-										}}
-										title={isCapturing ? t("pressEscToCancel") : t("clickToChange")}
-										className={[
-											"px-2 py-1 rounded text-xs font-mono border transition-all min-w-[90px] text-center select-none",
-											isCapturing
-												? "bg-[#34B27B]/20 border-[#34B27B] text-[#34B27B] animate-pulse"
-												: hasConflict
-													? "bg-amber-500/10 border-amber-500/50 text-amber-400"
-													: "bg-white/5 border-white/10 text-slate-200 hover:border-[#34B27B]/50 hover:text-[#34B27B] cursor-pointer",
-										].join(" ")}
-									>
-										{isCapturing ? t("pressKey") : formatBinding(draft[action], isMac)}
-									</button>
-								</div>
-								{hasConflict && conflict?.conflictWith.type === "configurable" && (
-									<div className="flex items-center justify-between px-1 py-1.5 mb-0.5 bg-amber-500/10 border border-amber-500/20 rounded text-xs">
-										<span className="text-amber-400">
-											⚠{" "}
-											{t("alreadyUsedBy", { action: t(`actions.${conflict.conflictWith.action}`) })}
-										</span>
-										<div className="flex gap-1.5">
-											<button
-												type="button"
-												onClick={handleSwap}
-												className="px-2 py-0.5 bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 rounded text-amber-300 font-medium transition-colors"
-											>
-												{t("swap")}
-											</button>
-											<button
-												type="button"
-												onClick={handleCancelConflict}
-												className="px-2 py-0.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded text-slate-400 transition-colors"
-											>
-												{tc("actions.cancel")}
-											</button>
-										</div>
+				<div className="flex-1 min-h-0 overflow-y-auto pr-1 -mr-1">
+					<div className="space-y-0.5">
+						<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
+							{t("configurable")}
+						</p>
+						{SHORTCUT_ACTIONS.map((action) => {
+							const isCapturing = captureFor === action;
+							const hasConflict = conflict?.forAction === action;
+							return (
+								<div key={action}>
+									<div className="flex items-center justify-between py-1.5 px-1 border-b border-white/5">
+										<span className="text-sm text-slate-300">{t(`actions.${action}`)}</span>
+										<button
+											type="button"
+											onClick={() => {
+												setConflict(null);
+												setCaptureFor(isCapturing ? null : action);
+											}}
+											title={isCapturing ? t("pressEscToCancel") : t("clickToChange")}
+											className={[
+												"px-2 py-1 rounded text-xs font-mono border transition-all min-w-[90px] text-center select-none",
+												isCapturing
+													? "bg-[#34B27B]/20 border-[#34B27B] text-[#34B27B] animate-pulse"
+													: hasConflict
+														? "bg-amber-500/10 border-amber-500/50 text-amber-400"
+														: "bg-white/5 border-white/10 text-slate-200 hover:border-[#34B27B]/50 hover:text-[#34B27B] cursor-pointer",
+											].join(" ")}
+										>
+											{isCapturing ? t("pressKey") : formatBinding(draft[action], isMac)}
+										</button>
 									</div>
-								)}
+									{hasConflict && conflict?.conflictWith.type === "configurable" && (
+										<div className="flex items-center justify-between px-1 py-1.5 mb-0.5 bg-amber-500/10 border border-amber-500/20 rounded text-xs">
+											<span className="text-amber-400">
+												⚠{" "}
+												{t("alreadyUsedBy", {
+													action: t(`actions.${conflict.conflictWith.action}`),
+												})}
+											</span>
+											<div className="flex gap-1.5">
+												<button
+													type="button"
+													onClick={handleSwap}
+													className="px-2 py-0.5 bg-amber-500/20 hover:bg-amber-500/30 border border-amber-500/40 rounded text-amber-300 font-medium transition-colors"
+												>
+													{t("swap")}
+												</button>
+												<button
+													type="button"
+													onClick={handleCancelConflict}
+													className="px-2 py-0.5 bg-white/5 hover:bg-white/10 border border-white/10 rounded text-slate-400 transition-colors"
+												>
+													{tc("actions.cancel")}
+												</button>
+											</div>
+										</div>
+									)}
+								</div>
+							);
+						})}
+					</div>
+
+					<div className="space-y-0.5 mt-2">
+						<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
+							{t("fixed")}
+						</p>
+						{FIXED_SHORTCUTS.map(({ i18nKey, label, display }) => (
+							<div
+								key={i18nKey}
+								className="flex items-center justify-between py-1.5 px-1 border-b border-white/5 last:border-0"
+							>
+								<span className="text-sm text-slate-400">
+									{t(`fixedActions.${i18nKey}`, { defaultValue: label })}
+								</span>
+								<kbd className="px-2 py-1 bg-white/5 border border-white/10 rounded text-xs font-mono text-slate-400 min-w-[90px] text-center">
+									{display}
+								</kbd>
 							</div>
-						);
-					})}
+						))}
+					</div>
+
+					<p className="text-[10px] text-slate-500 mt-1">{t("helpText")}</p>
 				</div>
 
-				<div className="space-y-0.5 mt-2">
-					<p className="text-[10px] text-slate-500 mb-2 uppercase tracking-wide font-semibold">
-						{t("fixed")}
-					</p>
-					{FIXED_SHORTCUTS.map(({ i18nKey, label, display }) => (
-						<div
-							key={i18nKey}
-							className="flex items-center justify-between py-1.5 px-1 border-b border-white/5 last:border-0"
-						>
-							<span className="text-sm text-slate-400">
-								{t(`fixedActions.${i18nKey}`, { defaultValue: label })}
-							</span>
-							<kbd className="px-2 py-1 bg-white/5 border border-white/10 rounded text-xs font-mono text-slate-400 min-w-[90px] text-center">
-								{display}
-							</kbd>
-						</div>
-					))}
-				</div>
-
-				<p className="text-[10px] text-slate-500 mt-1">{t("helpText")}</p>
-
-				<DialogFooter className="flex gap-2 sm:justify-between mt-2">
+				<DialogFooter className="shrink-0 flex gap-2 sm:justify-between mt-2">
 					<Button
 						variant="ghost"
 						size="sm"

src/components/video-editor/UnsavedChangesDialog.tsx

@@ -0,0 +1,77 @@
+import { Save, Trash2 } from "lucide-react";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
+
+interface UnsavedChangesDialogProps {
+	isOpen: boolean;
+	onSaveAndClose: () => void;
+	onDiscardAndClose: () => void;
+	onCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+	isOpen,
+	onSaveAndClose,
+	onDiscardAndClose,
+	onCancel,
+}: UnsavedChangesDialogProps) {
+	const td = useScopedT("dialogs");
+	const tc = useScopedT("common");
+
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => !open && onCancel()}>
+			<DialogContent className="bg-[#09090b] border-white/10 rounded-2xl max-w-sm p-6 gap-0">
+				<DialogHeader className="mb-5">
+					<div className="flex items-center gap-3">
+						<img
+							src="./openscreen.png"
+							alt=""
+							aria-hidden="true"
+							className="w-9 h-9 rounded-xl flex-shrink-0"
+						/>
+						<DialogTitle className="text-base font-semibold text-slate-200 leading-tight">
+							{td("unsavedChanges.title")}
+						</DialogTitle>
+					</div>
+				</DialogHeader>
+
+				<p className="text-sm text-slate-300 mb-1">{td("unsavedChanges.message")}</p>
+				<DialogDescription className="text-sm text-slate-500 mb-6">
+					{td("unsavedChanges.detail")}
+				</DialogDescription>
+
+				<div className="flex flex-col gap-2">
+					<button
+						type="button"
+						onClick={onSaveAndClose}
+						className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg bg-[#34B27B] hover:bg-[#2d9e6c] active:bg-[#27885c] text-white font-medium text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-[#34B27B] focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b]"
+					>
+						<Save className="w-4 h-4" />
+						{td("unsavedChanges.saveAndClose")}
+					</button>
+					<button
+						type="button"
+						onClick={onDiscardAndClose}
+						className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg bg-white/5 hover:bg-red-500/15 border border-white/10 hover:border-red-500/30 text-slate-300 hover:text-red-400 font-medium text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-white/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b]"
+					>
+						<Trash2 className="w-4 h-4" />
+						{td("unsavedChanges.discardAndClose")}
+					</button>
+					<button
+						type="button"
+						onClick={onCancel}
+						className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-lg hover:bg-white/5 text-slate-500 hover:text-slate-300 font-medium text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-[#09090b]"
+					>
+						{tc("actions.cancel")}
+					</button>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}

src/components/video-editor/VideoPlayback.tsx

@@ -18,7 +18,6 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { getAssetPath } from "@/lib/assetPath";
 import {
 	getWebcamLayoutCssBoxShadow,
 	type Size,
@@ -26,6 +25,7 @@ import {
 	type WebcamLayoutPreset,
 	type WebcamSizePreset,
 } from "@/lib/compositeLayout";
+import { classifyWallpaper, DEFAULT_WALLPAPER, resolveImageWallpaperUrl } from "@/lib/wallpaper";
 import { getCssClipPath } from "@/lib/webcamMaskShapes";
 import {
 	type AspectRatio,
@@ -36,10 +36,14 @@ import { AnnotationOverlay } from "./AnnotationOverlay";
 import {
 	type AnnotationRegion,
 	type BlurData,
+	computeRotation3DContainScale,
+	DEFAULT_ROTATION_3D,
+	getZoomScale,
+	isRotation3DIdentity,
+	lerpRotation3D,
+	rotation3DPerspective,
 	type SpeedRegion,
 	type TrimRegion,
-	ZOOM_DEPTH_SCALES,
-	type ZoomDepth,
 	type ZoomFocus,
 	type ZoomRegion,
 } from "./types";
@@ -51,8 +55,18 @@ import {
 	ZOOM_SCALE_DEADZONE,
 	ZOOM_TRANSLATION_DEADZONE_PX,
 } from "./videoPlayback/constants";
-import { adaptiveSmoothFactor, smoothCursorFocus } from "./videoPlayback/cursorFollowUtils";
-import { clampFocusToStage as clampFocusToStageUtil } from "./videoPlayback/focusUtils";
+import {
+	adaptiveSmoothFactor,
+	interpolateCursorAt,
+	smoothCursorFocus,
+} from "./videoPlayback/cursorFollowUtils";
+import {
+	type CursorHighlightConfig,
+	clickEmphasisAlpha,
+	DEFAULT_CURSOR_HIGHLIGHT,
+	drawCursorHighlightGraphics,
+} from "./videoPlayback/cursorHighlight";
+import { clampFocusToScale } from "./videoPlayback/focusUtils";
 import { layoutVideoContent as layoutVideoContentUtil } from "./videoPlayback/layoutUtils";
 import { clamp01 } from "./videoPlayback/mathUtils";
 import { updateOverlayIndicator } from "./videoPlayback/overlayUtils";
@@ -66,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;
@@ -110,6 +131,8 @@ interface VideoPlaybackProps {
 	onBlurDataChange?: (id: string, blurData: BlurData) => void;
 	onBlurDataCommit?: () => void;
 	cursorTelemetry?: import("./types").CursorTelemetryPoint[];
+	cursorHighlight?: CursorHighlightConfig;
+	cursorClickTimestamps?: number[];
 }
 
 export interface VideoPlaybackRef {
@@ -168,6 +191,8 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			onBlurDataChange,
 			onBlurDataCommit,
 			cursorTelemetry = [],
+			cursorHighlight = DEFAULT_CURSOR_HIGHLIGHT,
+			cursorClickTimestamps = [],
 		},
 		ref,
 	) => {
@@ -184,12 +209,18 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const [overlaySize, setOverlaySize] = useState({ width: 800, height: 600 });
 		const [overlayElement, setOverlayElement] = useState<HTMLDivElement | null>(null);
 		const overlayRef = useRef<HTMLDivElement | null>(null);
+
 		const focusIndicatorRef = useRef<HTMLDivElement | null>(null);
+		const composite3DRef = useRef<HTMLDivElement | null>(null);
+		const outerWrapperRef = useRef<HTMLDivElement | null>(null);
 		const [webcamLayout, setWebcamLayout] = useState<StyledRenderRect | null>(null);
 		const [webcamDimensions, setWebcamDimensions] = useState<Size | null>(null);
 		const currentTimeRef = useRef(0);
 		const zoomRegionsRef = useRef<ZoomRegion[]>([]);
 		const cursorTelemetryRef = useRef<import("./types").CursorTelemetryPoint[]>([]);
+		const cursorHighlightRef = useRef<CursorHighlightConfig>(DEFAULT_CURSOR_HIGHLIGHT);
+		const cursorClickTimestampsRef = useRef<number[]>([]);
+		const cursorHighlightGraphicsRef = useRef<Graphics | null>(null);
 		const selectedZoomIdRef = useRef<string | null>(null);
 		const animationStateRef = useRef({
 			scale: 1,
@@ -214,6 +245,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const maskGraphicsRef = useRef<Graphics | null>(null);
 		const isPlayingRef = useRef(isPlaying);
 		const isSeekingRef = useRef(false);
+		const isScrubbingRef = useRef(false);
+		const scrubEndTimerRef = useRef<number | null>(null);
+		const [isScrubbing, setIsScrubbing] = useState(false);
 		const allowPlaybackRef = useRef(false);
 		const lockedVideoDimensionsRef = useRef<{
 			width: number;
@@ -229,10 +263,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 		const videoReadyRafRef = useRef<number | null>(null);
 		const smoothedAutoFocusRef = useRef<ZoomFocus | null>(null);
 		const prevTargetProgressRef = useRef(0);
-
-		const clampFocusToStage = useCallback((focus: ZoomFocus, depth: ZoomDepth) => {
-			return clampFocusToStageUtil(focus, depth, stageSizeRef.current);
-		}, []);
+		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) => {
@@ -368,7 +404,10 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				if (!vid) return;
 				try {
 					allowPlaybackRef.current = true;
-					await vid.play();
+					await vid.play().catch((err) => {
+						console.log("PLAY ERROR:", err);
+						throw err;
+					});
 				} catch (error) {
 					allowPlaybackRef.current = false;
 					throw error;
@@ -411,7 +450,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				cx: clamp01(localX / stageWidth),
 				cy: clamp01(localY / stageHeight),
 			};
-			const clampedFocus = clampFocusToStage(unclampedFocus, region.depth);
+			const clampedFocus = clampFocusToScale(unclampedFocus, getZoomScale(region));
 
 			onZoomFocusChange(region.id, clampedFocus);
 			updateOverlayForRegion({ ...region, focus: clampedFocus }, clampedFocus);
@@ -511,6 +550,17 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			cursorTelemetryRef.current = cursorTelemetry;
 		}, [cursorTelemetry]);
 
+		useEffect(() => {
+			cursorHighlightRef.current = cursorHighlight;
+			if (cursorHighlightGraphicsRef.current) {
+				drawCursorHighlightGraphics(cursorHighlightGraphicsRef.current, cursorHighlight);
+			}
+		}, [cursorHighlight]);
+
+		useEffect(() => {
+			cursorClickTimestampsRef.current = cursorClickTimestamps;
+		}, [cursorClickTimestamps]);
+
 		useEffect(() => {
 			selectedZoomIdRef.current = selectedZoomId;
 		}, [selectedZoomId]);
@@ -541,84 +591,24 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 		useEffect(() => {
 			if (!pixiReady || !videoReady) return;
+			const el = overlayRef.current;
+			if (!el) return;
 
-			const app = appRef.current;
-			const cameraContainer = cameraContainerRef.current;
-			const video = videoRef.current;
+			// Seed immediately so overlays never start at 800×600
+			setOverlaySize({ width: el.clientWidth, height: el.clientHeight });
 
-			if (!app || !cameraContainer || !video) return;
-
-			const tickerWasStarted = app.ticker?.started || false;
-			if (tickerWasStarted && app.ticker) {
-				app.ticker.stop();
-			}
-
-			const wasPlaying = !video.paused;
-			if (wasPlaying) {
-				video.pause();
-			}
-
-			animationStateRef.current = {
-				scale: 1,
-				focusX: DEFAULT_FOCUS.cx,
-				focusY: DEFAULT_FOCUS.cy,
-				progress: 0,
-				x: 0,
-				y: 0,
-				appliedScale: 1,
-			};
-
-			// Reset motion blur state for clean transitions
-			motionBlurStateRef.current = createMotionBlurState();
-
-			if (blurFilterRef.current) {
-				blurFilterRef.current.blur = 0;
-			}
-
-			requestAnimationFrame(() => {
-				const container = cameraContainerRef.current;
-				const videoStage = videoContainerRef.current;
-				const sprite = videoSpriteRef.current;
-				const currentApp = appRef.current;
-				if (!container || !videoStage || !sprite || !currentApp) {
-					return;
-				}
-
-				container.scale.set(1);
-				container.position.set(0, 0);
-				videoStage.scale.set(1);
-				videoStage.position.set(0, 0);
-				sprite.scale.set(1);
-				sprite.position.set(0, 0);
-
-				layoutVideoContent();
-
-				applyZoomTransform({
-					cameraContainer: container,
-					blurFilter: blurFilterRef.current,
-					stageSize: stageSizeRef.current,
-					baseMask: baseMaskRef.current,
-					zoomScale: 1,
-					focusX: DEFAULT_FOCUS.cx,
-					focusY: DEFAULT_FOCUS.cy,
-					motionIntensity: 0,
-					isPlaying: false,
-					motionBlurAmount: motionBlurAmountRef.current,
-				});
-
-				requestAnimationFrame(() => {
-					const finalApp = appRef.current;
-					if (wasPlaying && video) {
-						video.play().catch(() => {
-							// Ignore autoplay restoration failures.
-						});
-					}
-					if (tickerWasStarted && finalApp?.ticker) {
-						finalApp.ticker.start();
-					}
+			const observer = new ResizeObserver((entries) => {
+				if (!entries[0]) return;
+				const { width, height } = entries[0].contentRect;
+				setOverlaySize((prev) => {
+					if (prev.width === width && prev.height === height) return prev;
+					return { width, height };
 				});
 			});
-		}, [pixiReady, videoReady, layoutVideoContent]);
+
+			observer.observe(el);
+			return () => observer.disconnect();
+		}, [pixiReady, videoReady]);
 
 		useEffect(() => {
 			if (!pixiReady || !videoReady) return;
@@ -639,6 +629,24 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			};
 		}, [pixiReady, videoReady, layoutVideoContent]);
 
+		// Drop the PIXI canvas resolution to 1.0 while scrubbing (the user is
+		// navigating, not previewing) and restore native DPR on play/idle so the
+		// preview stays faithful. Mutating renderer.resolution per-frame would
+		// thrash texture uploads; we only do it on scrub-state transitions.
+		useEffect(() => {
+			if (!pixiReady) return;
+			const app = appRef.current;
+			const container = containerRef.current;
+			if (!app || !container) return;
+
+			const targetResolution = isScrubbing ? 1 : window.devicePixelRatio || 1;
+			if (app.renderer.resolution === targetResolution) return;
+
+			app.renderer.resolution = targetResolution;
+			app.renderer.resize(container.clientWidth, container.clientHeight);
+			layoutVideoContentRef.current?.();
+		}, [isScrubbing, pixiReady]);
+
 		useEffect(() => {
 			if (!pixiReady || !videoReady) return;
 			updateOverlayForRegion(selectedZoom);
@@ -794,6 +802,12 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			videoContainer.mask = maskGraphics;
 			maskGraphicsRef.current = maskGraphics;
 
+			const cursorHighlightGraphics = new Graphics();
+			cursorHighlightGraphics.visible = false;
+			videoContainer.addChild(cursorHighlightGraphics);
+			cursorHighlightGraphicsRef.current = cursorHighlightGraphics;
+			drawCursorHighlightGraphics(cursorHighlightGraphics, cursorHighlightRef.current);
+
 			animationStateRef.current = {
 				scale: 1,
 				focusX: DEFAULT_FOCUS.cx,
@@ -809,7 +823,6 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			blurFilter.resolution = app.renderer.resolution;
 			blurFilter.blur = 0;
 			const motionBlurFilter = new MotionBlurFilter([0, 0], 5, 0);
-			videoContainer.filters = [blurFilter, motionBlurFilter];
 			blurFilterRef.current = blurFilter;
 			motionBlurFilterRef.current = motionBlurFilter;
 
@@ -827,6 +840,9 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				onTimeUpdate: (time) => onTimeUpdateRef.current(time),
 				trimRegionsRef,
 				speedRegionsRef,
+				isScrubbingRef,
+				scrubEndTimerRef,
+				onScrubChange: (scrubbing) => setIsScrubbing(scrubbing),
 			});
 
 			video.addEventListener("play", handlePlay);
@@ -854,10 +870,15 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					videoContainer.removeChild(maskGraphics);
 					maskGraphics.destroy();
 				}
+				if (cursorHighlightGraphicsRef.current) {
+					videoContainer.removeChild(cursorHighlightGraphicsRef.current);
+					cursorHighlightGraphicsRef.current.destroy();
+					cursorHighlightGraphicsRef.current = null;
+				}
 				videoContainer.mask = null;
 				maskGraphicsRef.current = null;
 				if (blurFilterRef.current) {
-					videoContainer.filters = [];
+					videoContainer.filters = null;
 					blurFilterRef.current.destroy();
 					blurFilterRef.current = null;
 				}
@@ -914,23 +935,16 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				state.appliedScale = appliedTransform.scale;
 			};
 
+			let lastMotionBlurActive: boolean | null = null;
+			let lastTransformIsIdentity = true;
+			let lastPerspectiveValue = 0;
 			const ticker = () => {
-				const bm = baseMaskRef.current;
-				const ss = stageSizeRef.current;
-				const viewportRatio =
-					bm.width > 0 && bm.height > 0
-						? {
-								widthRatio: ss.width / bm.width,
-								heightRatio: ss.height / bm.height,
-							}
-						: undefined;
-				const { region, strength, blendedScale, transition } = findDominantRegion(
+				const { region, strength, blendedScale, rotation3D, transition } = findDominantRegion(
 					zoomRegionsRef.current,
 					currentTimeRef.current,
 					{
 						connectZooms: true,
 						cursorTelemetry: cursorTelemetryRef.current,
-						viewportRatio,
 					},
 				);
 
@@ -945,7 +959,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 				const shouldShowUnzoomedView = hasSelectedZoom && !isPlayingRef.current;
 
 				if (region && strength > 0 && !shouldShowUnzoomedView) {
-					const zoomScale = blendedScale ?? ZOOM_DEPTH_SCALES[region.depth];
+					const zoomScale = blendedScale ?? getZoomScale(region);
 					const regionFocus = region.focus;
 
 					targetScaleFactor = zoomScale;
@@ -1081,6 +1095,95 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					motionIntensity,
 					motionVector,
 				);
+
+				const cursorGraphics = cursorHighlightGraphicsRef.current;
+				const cursorConfig = cursorHighlightRef.current;
+				const lockedDims = lockedVideoDimensionsRef.current;
+				if (cursorGraphics) {
+					if (cursorConfig.enabled && lockedDims && cursorTelemetryRef.current.length > 0) {
+						const emphasisAlpha = clickEmphasisAlpha(
+							currentTimeRef.current,
+							cursorClickTimestampsRef.current,
+							cursorConfig,
+						);
+						const cursorPoint =
+							emphasisAlpha > 0
+								? interpolateCursorAt(cursorTelemetryRef.current, currentTimeRef.current)
+								: null;
+						if (cursorPoint) {
+							const baseScale = baseScaleRef.current;
+							const baseOffset = baseOffsetRef.current;
+							const cx = cursorPoint.cx + cursorConfig.offsetXNorm;
+							const cy = cursorPoint.cy + cursorConfig.offsetYNorm;
+							cursorGraphics.position.set(
+								baseOffset.x + cx * lockedDims.width * baseScale,
+								baseOffset.y + cy * lockedDims.height * baseScale,
+							);
+							cursorGraphics.alpha = emphasisAlpha;
+							cursorGraphics.visible = true;
+						} else {
+							cursorGraphics.visible = false;
+						}
+					} else {
+						cursorGraphics.visible = false;
+					}
+				}
+
+				const isMotionBlurActive =
+					(motionBlurAmountRef.current || 0) > 0 && isPlayingRef.current && !isScrubbingRef.current;
+
+				if (isMotionBlurActive !== lastMotionBlurActive && videoContainerRef.current) {
+					if (isMotionBlurActive) {
+						if (blurFilterRef.current && motionBlurFilterRef.current) {
+							videoContainerRef.current.filters = [
+								blurFilterRef.current,
+								motionBlurFilterRef.current,
+							];
+							lastMotionBlurActive = true;
+						}
+					} else {
+						videoContainerRef.current.filters = null;
+						lastMotionBlurActive = false;
+					}
+				}
+
+				const composite3D = composite3DRef.current;
+				const outerWrapper = outerWrapperRef.current;
+				if (composite3D && outerWrapper) {
+					const effectiveRotation =
+						region && targetProgress > 0 && !shouldShowUnzoomedView
+							? lerpRotation3D(DEFAULT_ROTATION_3D, rotation3D, targetProgress)
+							: DEFAULT_ROTATION_3D;
+					const isIdentity = isRotation3DIdentity(effectiveRotation);
+					if (isIdentity) {
+						if (!lastTransformIsIdentity) {
+							composite3D.style.transform = "";
+							composite3D.style.willChange = "auto";
+							lastTransformIsIdentity = true;
+						}
+						if (lastPerspectiveValue !== 0) {
+							outerWrapper.style.perspective = "";
+							lastPerspectiveValue = 0;
+						}
+					} else {
+						const wrapperW = outerWrapper.clientWidth || 1;
+						const wrapperH = outerWrapper.clientHeight || 1;
+						const persp = rotation3DPerspective(wrapperW, wrapperH);
+						const containScale = computeRotation3DContainScale(
+							effectiveRotation,
+							wrapperW,
+							wrapperH,
+							persp,
+						);
+						composite3D.style.transform = `scale(${containScale}) rotateX(${effectiveRotation.rotationX}deg) rotateY(${effectiveRotation.rotationY}deg) rotateZ(${effectiveRotation.rotationZ}deg)`;
+						composite3D.style.willChange = "transform";
+						lastTransformIsIdentity = false;
+						if (persp !== lastPerspectiveValue) {
+							outerWrapper.style.perspective = `${persp}px`;
+							lastPerspectiveValue = persp;
+						}
+					}
+				}
 			};
 
 			app.ticker.add(ticker);
@@ -1118,7 +1221,17 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			videoReadyRafRef.current = requestAnimationFrame(waitForRenderableFrame);
 		};
 
-		const [resolvedWallpaper, setResolvedWallpaper] = useState<string | null>(null);
+		const resolvedWallpaper = useMemo<string | null>(() => {
+			const source = wallpaper || DEFAULT_WALLPAPER;
+			const classified = classifyWallpaper(source);
+			if (classified.kind !== "image") return classified.value;
+			try {
+				return resolveImageWallpaperUrl(classified.path);
+			} catch (err) {
+				console.warn("[VideoPlayback] wallpaper resolve failed:", err);
+				return null;
+			}
+		}, [wallpaper]);
 		const webcamCssBoxShadow = useMemo(
 			() => getWebcamLayoutCssBoxShadow(webcamLayoutPreset),
 			[webcamLayoutPreset],
@@ -1186,64 +1299,16 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 			webcamVideo.currentTime = 0;
 		}, [webcamVideoPath]);
 
-		useEffect(() => {
-			let mounted = true;
-			(async () => {
-				try {
-					if (!wallpaper) {
-						const def = await getAssetPath("wallpapers/wallpaper1.jpg");
-						if (mounted) setResolvedWallpaper(def);
-						return;
-					}
-
-					if (
-						wallpaper.startsWith("#") ||
-						wallpaper.startsWith("linear-gradient") ||
-						wallpaper.startsWith("radial-gradient")
-					) {
-						if (mounted) setResolvedWallpaper(wallpaper);
-						return;
-					}
-
-					// If it's a data URL (custom uploaded image), use as-is
-					if (wallpaper.startsWith("data:")) {
-						if (mounted) setResolvedWallpaper(wallpaper);
-						return;
-					}
-
-					// If it's an absolute web/http or file path, use as-is
-					if (
-						wallpaper.startsWith("http") ||
-						wallpaper.startsWith("file://") ||
-						wallpaper.startsWith("/")
-					) {
-						// If it's an absolute server path (starts with '/'), resolve via getAssetPath as well
-						if (wallpaper.startsWith("/")) {
-							const rel = wallpaper.replace(/^\//, "");
-							const p = await getAssetPath(rel);
-							if (mounted) setResolvedWallpaper(p);
-							return;
-						}
-						if (mounted) setResolvedWallpaper(wallpaper);
-						return;
-					}
-					const p = await getAssetPath(wallpaper.replace(/^\//, ""));
-					if (mounted) setResolvedWallpaper(p);
-				} catch (_err) {
-					if (mounted) setResolvedWallpaper(wallpaper || "/wallpapers/wallpaper1.jpg");
-				}
-			})();
-			return () => {
-				mounted = false;
-			};
-		}, [wallpaper]);
-
 		useEffect(() => {
 			return () => {
 				if (videoReadyRafRef.current) {
 					cancelAnimationFrame(videoReadyRafRef.current);
 					videoReadyRafRef.current = null;
 				}
+				if (scrubEndTimerRef.current !== null) {
+					window.clearTimeout(scrubEndTimerRef.current);
+					scrubEndTimerRef.current = null;
+				}
 			};
 		}, []);
 
@@ -1260,6 +1325,7 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 
 		return (
 			<div
+				ref={outerWrapperRef}
 				className="relative rounded-sm overflow-hidden"
 				style={{
 					width: "100%",
@@ -1284,175 +1350,221 @@ const VideoPlayback = forwardRef<VideoPlaybackRef, VideoPlaybackProps>(
 					}}
 				/>
 				<div
-					ref={containerRef}
+					ref={composite3DRef}
 					className="absolute inset-0"
 					style={{
-						filter:
-							showShadow && shadowIntensity > 0
-								? `drop-shadow(0 ${shadowIntensity * 12}px ${shadowIntensity * 48}px rgba(0,0,0,${shadowIntensity * 0.7})) drop-shadow(0 ${shadowIntensity * 4}px ${shadowIntensity * 16}px rgba(0,0,0,${shadowIntensity * 0.5})) drop-shadow(0 ${shadowIntensity * 2}px ${shadowIntensity * 8}px rgba(0,0,0,${shadowIntensity * 0.3}))`
-								: "none",
+						transformStyle: "preserve-3d",
+						transformOrigin: "center center",
 					}}
-				/>
-				{webcamVideoPath &&
-					(() => {
-						const clipPath = getCssClipPath(webcamLayout?.maskShape ?? "rectangle");
-						const useClipPath = !!clipPath;
-						return (
-							<div
-								className="absolute"
-								style={{
-									left: webcamLayout?.x ?? 0,
-									top: webcamLayout?.y ?? 0,
-									width: webcamLayout?.width ?? 0,
-									height: webcamLayout?.height ?? 0,
-									zIndex: 20,
-									opacity: webcamLayout ? 1 : 0,
-									filter:
-										useClipPath && webcamCssBoxShadow !== "none"
-											? `drop-shadow(${webcamCssBoxShadow})`
-											: undefined,
-								}}
-							>
-								<video
-									ref={webcamVideoRef}
-									src={webcamVideoPath}
-									className={`w-full h-full object-cover ${webcamLayoutPreset === "picture-in-picture" ? "cursor-grab active:cursor-grabbing" : "pointer-events-none"}`}
-									style={{
-										borderRadius: useClipPath ? 0 : (webcamLayout?.borderRadius ?? 0),
-										clipPath: clipPath ?? undefined,
-										boxShadow: useClipPath ? "none" : webcamCssBoxShadow,
-										backgroundColor: "#000",
-									}}
-									onPointerDown={handleWebcamPointerDown}
-									onPointerMove={handleWebcamPointerMove}
-									onPointerUp={handleWebcamPointerUp}
-									onPointerLeave={handleWebcamPointerUp}
-									muted
-									preload="metadata"
-									playsInline
-								/>
-							</div>
-						);
-					})()}
-				{/* Only render overlay after PIXI and video are fully initialized */}
-				{pixiReady && videoReady && (
+				>
 					<div
-						ref={setOverlayRefs}
-						className="absolute inset-0 select-none"
-						style={{ pointerEvents: "none", zIndex: 30 }}
-						onPointerDown={handleOverlayPointerDown}
-						onPointerMove={handleOverlayPointerMove}
-						onPointerUp={handleOverlayPointerUp}
-						onPointerLeave={handleOverlayPointerLeave}
-					>
-						<div
-							ref={focusIndicatorRef}
-							className="absolute rounded-md border border-[#34B27B]/80 bg-[#34B27B]/20 shadow-[0_0_0_1px_rgba(52,178,123,0.35)]"
-							style={{ display: "none", pointerEvents: "none" }}
-						/>
-						{(() => {
-							const filteredAnnotations = (annotationRegions || []).filter((annotation) => {
-								if (typeof annotation.startMs !== "number" || typeof annotation.endMs !== "number")
-									return false;
-
-								if (annotation.id === selectedAnnotationId) return true;
-
-								const timeMs = Math.round(currentTime * 1000);
-								return timeMs >= annotation.startMs && timeMs <= annotation.endMs;
-							});
-
-							const filteredBlurRegions = (blurRegions || []).filter((blurRegion) => {
-								if (typeof blurRegion.startMs !== "number" || typeof blurRegion.endMs !== "number")
-									return false;
-
-								if (blurRegion.id === selectedBlurId) return true;
-
-								const timeMs = Math.round(currentTime * 1000);
-								return timeMs >= blurRegion.startMs && timeMs <= blurRegion.endMs;
-							});
-
-							const sorted = [
-								...filteredAnnotations.map((annotation) => ({
-									kind: "annotation" as const,
-									region: annotation,
-								})),
-								...filteredBlurRegions.map((blurRegion) => ({
-									kind: "blur" as const,
-									region: blurRegion,
-								})),
-							].sort((a, b) => a.region.zIndex - b.region.zIndex);
-
-							// Handle click-through cycling: when clicking same annotation, cycle to next
-							const handleAnnotationClick = (clickedId: string) => {
-								if (!onSelectAnnotation) return;
-
-								// If clicking on already selected annotation and there are multiple overlapping
-								if (clickedId === selectedAnnotationId && filteredAnnotations.length > 1) {
-									// Find current index and cycle to next
-									const currentIndex = filteredAnnotations.findIndex((a) => a.id === clickedId);
-									const nextIndex = (currentIndex + 1) % filteredAnnotations.length;
-									onSelectAnnotation(filteredAnnotations[nextIndex].id);
-								} else {
-									// First click or clicking different annotation
-									onSelectAnnotation(clickedId);
-								}
-							};
-
-							const handleBlurClick = (clickedId: string) => {
-								if (!onSelectBlur) return;
-
-								if (clickedId === selectedBlurId && filteredBlurRegions.length > 1) {
-									const currentIndex = filteredBlurRegions.findIndex((a) => a.id === clickedId);
-									const nextIndex = (currentIndex + 1) % filteredBlurRegions.length;
-									onSelectBlur(filteredBlurRegions[nextIndex].id);
-								} else {
-									onSelectBlur(clickedId);
-								}
-							};
-
-							return sorted.map((item) => (
-								<AnnotationOverlay
-									key={
-										item.kind === "blur"
-											? `${item.region.id}-${overlaySize.width}-${overlaySize.height}-${item.region.blurData?.shape ?? "rectangle"}-${(item.region.blurData?.freehandPoints ?? []).map((p) => `${Math.round(p.x)}_${Math.round(p.y)}`).join("-")}`
-											: `${item.region.id}-${overlaySize.width}-${overlaySize.height}`
-									}
-									annotation={item.region}
-									isSelected={
-										item.kind === "blur"
-											? item.region.id === selectedBlurId
-											: item.region.id === selectedAnnotationId
-									}
-									containerWidth={overlaySize.width}
-									containerHeight={overlaySize.height}
-									onPositionChange={(id, position) =>
-										item.kind === "blur"
-											? onBlurPositionChange?.(id, position)
-											: onAnnotationPositionChange?.(id, position)
-									}
-									onSizeChange={(id, size) =>
-										item.kind === "blur"
-											? onBlurSizeChange?.(id, size)
-											: onAnnotationSizeChange?.(id, size)
-									}
-									onBlurDataChange={
-										item.kind === "blur"
-											? (id, blurData) => onBlurDataChange?.(id, blurData)
-											: undefined
-									}
-									onBlurDataCommit={item.kind === "blur" ? onBlurDataCommit : undefined}
-									onClick={item.kind === "blur" ? handleBlurClick : handleAnnotationClick}
-									zIndex={item.region.zIndex}
-									isSelectedBoost={
-										item.kind === "blur"
-											? item.region.id === selectedBlurId
-											: item.region.id === selectedAnnotationId
-									}
-								/>
-							));
+						ref={containerRef}
+						className="absolute inset-0"
+						style={{
+							filter:
+								showShadow && shadowIntensity > 0
+									? `drop-shadow(0 ${shadowIntensity * 12}px ${shadowIntensity * 48}px rgba(0,0,0,${shadowIntensity * 0.7})) drop-shadow(0 ${shadowIntensity * 4}px ${shadowIntensity * 16}px rgba(0,0,0,${shadowIntensity * 0.5})) drop-shadow(0 ${shadowIntensity * 2}px ${shadowIntensity * 8}px rgba(0,0,0,${shadowIntensity * 0.3}))`
+									: "none",
+						}}
+					/>
+					{webcamVideoPath &&
+						(() => {
+							const clipPath = getCssClipPath(webcamLayout?.maskShape ?? "rectangle");
+							const useClipPath = !!clipPath;
+							return (
+								<div
+									className="absolute"
+									style={{
+										left: webcamLayout?.x ?? 0,
+										top: webcamLayout?.y ?? 0,
+										width: webcamLayout?.width ?? 0,
+										height: webcamLayout?.height ?? 0,
+										zIndex: 20,
+										opacity: webcamLayout ? 1 : 0,
+										filter:
+											useClipPath && webcamCssBoxShadow !== "none"
+												? `drop-shadow(${webcamCssBoxShadow})`
+												: undefined,
+									}}
+								>
+									<video
+										ref={webcamVideoRef}
+										src={webcamVideoPath}
+										className={`w-full h-full object-cover ${webcamLayoutPreset === "picture-in-picture" ? "cursor-grab active:cursor-grabbing" : "pointer-events-none"}`}
+										style={{
+											borderRadius: useClipPath ? 0 : (webcamLayout?.borderRadius ?? 0),
+											clipPath: clipPath ?? undefined,
+											boxShadow: useClipPath ? "none" : webcamCssBoxShadow,
+											backgroundColor: "#000",
+										}}
+										onPointerDown={handleWebcamPointerDown}
+										onPointerMove={handleWebcamPointerMove}
+										onPointerUp={handleWebcamPointerUp}
+										onPointerLeave={handleWebcamPointerUp}
+										muted
+										preload="metadata"
+										playsInline
+									/>
+								</div>
+							);
 						})()}
-					</div>
-				)}
+					{/* Only render overlay after PIXI and video are fully initialized */}
+					{pixiReady && videoReady && (
+						<div
+							ref={setOverlayRefs}
+							className="absolute inset-0 select-none"
+							style={{ pointerEvents: "auto", zIndex: 30 }}
+							onPointerDown={handleOverlayPointerDown}
+							onPointerMove={handleOverlayPointerMove}
+							onPointerUp={handleOverlayPointerUp}
+							onPointerLeave={handleOverlayPointerLeave}
+						>
+							<div
+								ref={focusIndicatorRef}
+								className="absolute rounded-md border border-[#34B27B]/80 bg-[#34B27B]/20 shadow-[0_0_0_1px_rgba(52,178,123,0.35)]"
+								style={{ display: "none", pointerEvents: "none" }}
+							/>
+							{(() => {
+								const filteredAnnotations = (annotationRegions || []).filter((annotation) => {
+									if (
+										typeof annotation.startMs !== "number" ||
+										typeof annotation.endMs !== "number"
+									)
+										return false;
+
+									if (annotation.id === selectedAnnotationId) return true;
+
+									const timeMs = Math.round(currentTime * 1000);
+									return timeMs >= annotation.startMs && timeMs < annotation.endMs;
+								});
+
+								const filteredBlurRegions = (blurRegions || []).filter((blurRegion) => {
+									if (
+										typeof blurRegion.startMs !== "number" ||
+										typeof blurRegion.endMs !== "number"
+									)
+										return false;
+
+									if (blurRegion.id === selectedBlurId) return true;
+
+									const timeMs = Math.round(currentTime * 1000);
+									return timeMs >= blurRegion.startMs && timeMs < blurRegion.endMs;
+								});
+
+								const sorted = [
+									...filteredAnnotations.map((annotation) => ({
+										kind: "annotation" as const,
+										region: annotation,
+									})),
+									...filteredBlurRegions.map((blurRegion) => ({
+										kind: "blur" as const,
+										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 cached.canvas;
+												try {
+													const canvas = app.renderer.extract.canvas(app.stage);
+													blurPreviewSnapshotRef.current = {
+														bucket: previewSnapshotBucket,
+														canvas,
+														height: overlaySize.height,
+														width: overlaySize.width,
+													};
+													return canvas;
+												} catch {
+													return cached.canvas;
+												}
+											})()
+										: null;
+
+								// Handle click-through cycling: when clicking same annotation, cycle to next
+								const handleAnnotationClick = (clickedId: string) => {
+									if (!onSelectAnnotation) return;
+
+									// If clicking on already selected annotation and there are multiple overlapping
+									if (clickedId === selectedAnnotationId && filteredAnnotations.length > 1) {
+										// Find current index and cycle to next
+										const currentIndex = filteredAnnotations.findIndex((a) => a.id === clickedId);
+										const nextIndex = (currentIndex + 1) % filteredAnnotations.length;
+										onSelectAnnotation(filteredAnnotations[nextIndex].id);
+									} else {
+										// First click or clicking different annotation
+										onSelectAnnotation(clickedId);
+									}
+								};
+
+								const handleBlurClick = (clickedId: string) => {
+									if (!onSelectBlur) return;
+
+									if (clickedId === selectedBlurId && filteredBlurRegions.length > 1) {
+										const currentIndex = filteredBlurRegions.findIndex((a) => a.id === clickedId);
+										const nextIndex = (currentIndex + 1) % filteredBlurRegions.length;
+										onSelectBlur(filteredBlurRegions[nextIndex].id);
+									} else {
+										onSelectBlur(clickedId);
+									}
+								};
+
+								return sorted.map((item) => (
+									<AnnotationOverlay
+										key={
+											item.kind === "blur"
+												? `${item.region.id}-${overlaySize.width}-${overlaySize.height}-${item.region.blurData?.type ?? "blur"}-${item.region.blurData?.shape ?? "rectangle"}-${item.region.blurData?.color ?? "white"}-${Math.round(item.region.blurData?.blockSize ?? 0)}-${Math.round(item.region.blurData?.intensity ?? 0)}-${(item.region.blurData?.freehandPoints ?? []).map((p) => `${Math.round(p.x)}_${Math.round(p.y)}`).join("-")}`
+												: `${item.region.id}-${overlaySize.width}-${overlaySize.height}`
+										}
+										annotation={item.region}
+										isSelected={
+											item.kind === "blur"
+												? item.region.id === selectedBlurId
+												: item.region.id === selectedAnnotationId
+										}
+										containerWidth={overlaySize.width}
+										containerHeight={overlaySize.height}
+										onPositionChange={(id, position) =>
+											item.kind === "blur"
+												? onBlurPositionChange?.(id, position)
+												: onAnnotationPositionChange?.(id, position)
+										}
+										onSizeChange={(id, size) =>
+											item.kind === "blur"
+												? onBlurSizeChange?.(id, size)
+												: onAnnotationSizeChange?.(id, size)
+										}
+										onBlurDataChange={
+											item.kind === "blur"
+												? (id, blurData) => onBlurDataChange?.(id, blurData)
+												: undefined
+										}
+										onBlurDataCommit={item.kind === "blur" ? onBlurDataCommit : undefined}
+										onClick={item.kind === "blur" ? handleBlurClick : handleAnnotationClick}
+										zIndex={item.region.zIndex}
+										isSelectedBoost={
+											item.kind === "blur"
+												? item.region.id === selectedBlurId
+												: item.region.id === selectedAnnotationId
+										}
+										previewSourceCanvas={previewSnapshotCanvas}
+										previewFrameVersion={previewSnapshotBucket}
+									/>
+								));
+							})()}
+						</div>
+					)}
+				</div>
 				<video
 					ref={videoRef}
 					src={videoPath}

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

@@ -44,6 +44,7 @@ describe("projectPersistence media compatibility", () => {
 				aspectRatio: "16:9",
 				webcamLayoutPreset: "picture-in-picture",
 				webcamMaskShape: "circle",
+				webcamPosition: null,
 				exportQuality: "good",
 				exportFormat: "mp4",
 				gifFrameRate: 15,
@@ -66,6 +67,99 @@ describe("projectPersistence media compatibility", () => {
 			normalizeProjectEditor({ webcamMaskShape: "not-a-real-shape" as never }).webcamMaskShape,
 		).toBe("rectangle");
 	});
+
+	it("normalizes blur region type and mosaic block size safely", () => {
+		const editor = normalizeProjectEditor({
+			annotationRegions: [
+				{
+					id: "annotation-1",
+					startMs: 0,
+					endMs: 500,
+					type: "blur",
+					content: "",
+					position: { x: 10, y: 10 },
+					size: { width: 20, 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: "rectangle",
+						color: "black",
+						intensity: 999,
+						blockSize: 999,
+					},
+				},
+				{
+					id: "annotation-2",
+					startMs: 0,
+					endMs: 500,
+					type: "blur",
+					content: "",
+					position: { x: 10, y: 10 },
+					size: { width: 20, height: 20 },
+					style: {
+						color: "#fff",
+						backgroundColor: "transparent",
+						fontSize: 32,
+						fontFamily: "Inter",
+						fontWeight: "bold",
+						fontStyle: "normal",
+						textDecoration: "none",
+						textAlign: "center",
+					},
+					zIndex: 2,
+					blurData: {
+						type: "invalid" as never,
+						shape: "rectangle",
+						color: "invalid" as never,
+						intensity: 10,
+						blockSize: 0,
+					},
+				},
+			],
+		});
+
+		expect(editor.annotationRegions[0].blurData?.type).toBe("mosaic");
+		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("mosaic");
+		expect(editor.annotationRegions[1].blurData?.color).toBe("white");
+		expect(editor.annotationRegions[1].blurData?.blockSize).toBe(4);
+	});
+
+	it("accepts the dual frame webcam layout preset", () => {
+		expect(normalizeProjectEditor({ webcamLayoutPreset: "dual-frame" }).webcamLayoutPreset).toBe(
+			"dual-frame",
+		);
+	});
+
+	it("falls back from dual frame to picture in picture for portrait aspect ratios", () => {
+		expect(
+			normalizeProjectEditor({
+				aspectRatio: "9:16",
+				webcamLayoutPreset: "dual-frame",
+			}).webcamLayoutPreset,
+		).toBe("picture-in-picture");
+	});
+
+	it("clears webcamPosition when the normalized preset is not picture in picture", () => {
+		expect(
+			normalizeProjectEditor({
+				webcamLayoutPreset: "dual-frame",
+				webcamPosition: { cx: 0.2, cy: 0.8 },
+			}).webcamPosition,
+		).toBeNull();
+	});
 });
 
 it("creates stable snapshots for identical project state", () => {
@@ -103,3 +197,62 @@ it("detects unsaved changes from differing snapshots", () => {
 	expect(hasProjectUnsavedChanges("same", "same")).toBe(false);
 	expect(hasProjectUnsavedChanges("current", "baseline")).toBe(true);
 });
+
+describe("wallpaper legacy normalization", () => {
+	it("rewrites pre-fix packaged paths (resources/assets/wallpapers/…)", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///opt/Openscreen/resources/assets/wallpapers/wallpaper5.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper5.jpg");
+	});
+
+	it("rewrites new packaged layout (resources/wallpapers/…)", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///opt/Openscreen/resources/wallpapers/wallpaper3.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper3.jpg");
+	});
+
+	it("rewrites unpackaged dev layout (public/wallpapers/…)", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///home/user/project/public/wallpapers/wallpaper1.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper1.jpg");
+	});
+
+	it("rewrites Windows-style file URLs with drive letter", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///C:/Users/me/openscreen/resources/wallpapers/wallpaper2.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper2.jpg");
+	});
+
+	it("leaves canonical relative paths untouched", () => {
+		const normalized = normalizeProjectEditor({ wallpaper: "/wallpapers/wallpaper2.jpg" });
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper2.jpg");
+	});
+
+	it("leaves data URIs untouched", () => {
+		const dataUri = "data:image/png;base64,AAA";
+		expect(normalizeProjectEditor({ wallpaper: dataUri }).wallpaper).toBe(dataUri);
+	});
+
+	it("leaves colors and gradients untouched", () => {
+		expect(normalizeProjectEditor({ wallpaper: "#1a1a2e" }).wallpaper).toBe("#1a1a2e");
+		expect(
+			normalizeProjectEditor({ wallpaper: "linear-gradient(90deg, red, blue)" }).wallpaper,
+		).toBe("linear-gradient(90deg, red, blue)");
+	});
+
+	it("does NOT rewrite user files outside the known install layout", () => {
+		const userPath = "file:///home/user/Pictures/wallpapers/wallpaper1.jpg";
+		expect(normalizeProjectEditor({ wallpaper: userPath }).wallpaper).toBe(userPath);
+	});
+
+	it("falls back to default for bundled paths outside WALLPAPER_PATHS", () => {
+		const normalized = normalizeProjectEditor({
+			wallpaper: "file:///opt/Openscreen/resources/wallpapers/wallpaper99.jpg",
+		});
+		expect(normalized.wallpaper).toBe("/wallpapers/wallpaper1.jpg");
+	});
+});

src/components/video-editor/projectPersistence.ts

@@ -1,7 +1,9 @@
+import { normalizeBlurColor, normalizeBlurType } from "@/lib/blurEffects";
 import type { ExportFormat, ExportQuality, GifFrameRate, GifSizePreset } from "@/lib/exporter";
 import type { ProjectMedia } from "@/lib/recordingSession";
 import { normalizeProjectMedia } from "@/lib/recordingSession";
-import { ASPECT_RATIOS, type AspectRatio } from "@/utils/aspectRatioUtils";
+import { DEFAULT_WALLPAPER, WALLPAPER_PATHS } from "@/lib/wallpaper";
+import { ASPECT_RATIOS, type AspectRatio, isPortraitAspectRatio } from "@/utils/aspectRatioUtils";
 import {
 	type AnnotationRegion,
 	type CropRegion,
@@ -9,6 +11,7 @@ import {
 	DEFAULT_ANNOTATION_POSITION,
 	DEFAULT_ANNOTATION_SIZE,
 	DEFAULT_ANNOTATION_STYLE,
+	DEFAULT_BLUR_BLOCK_SIZE,
 	DEFAULT_BLUR_DATA,
 	DEFAULT_BLUR_FREEHAND_POINTS,
 	DEFAULT_BLUR_INTENSITY,
@@ -20,8 +23,10 @@ import {
 	DEFAULT_WEBCAM_POSITION,
 	DEFAULT_WEBCAM_SIZE_PRESET,
 	DEFAULT_ZOOM_DEPTH,
+	MAX_BLUR_BLOCK_SIZE,
 	MAX_BLUR_INTENSITY,
 	MAX_PLAYBACK_SPEED,
+	MIN_BLUR_BLOCK_SIZE,
 	MIN_BLUR_INTENSITY,
 	MIN_PLAYBACK_SPEED,
 	type SpeedRegion,
@@ -33,13 +38,23 @@ import {
 	type ZoomRegion,
 } from "./types";
 
-const WALLPAPER_COUNT = 18;
 const VALID_BLUR_SHAPES = new Set(["rectangle", "oval", "freehand"] as const);
 
-export const WALLPAPER_PATHS = Array.from(
-	{ length: WALLPAPER_COUNT },
-	(_, i) => `/wallpapers/wallpaper${i + 1}.jpg`,
-);
+// Pre-fix projects could persist resolved file:// URLs (machine-specific) for
+// bundled wallpapers. Rewrite only paths that match a known install layout
+// (resources/[assets/]wallpapers for packaged, public/wallpapers for dev) so
+// a legitimate user file that happens to live in a folder named "wallpapers"
+// elsewhere is never silently replaced.
+const LEGACY_FILE_WALLPAPER_RE =
+	/^file:\/\/.*?\/(?:resources\/(?:assets\/)?|public\/)wallpapers\/(wallpaper\d+\.jpg)$/i;
+const CANONICAL_WALLPAPERS = new Set(WALLPAPER_PATHS);
+
+function normalizeWallpaperValue(value: string): string {
+	const match = LEGACY_FILE_WALLPAPER_RE.exec(value);
+	if (!match) return value;
+	const canonical = `/wallpapers/${match[1]}`;
+	return CANONICAL_WALLPAPERS.has(canonical) ? canonical : DEFAULT_WALLPAPER;
+}
 
 export const PROJECT_VERSION = 2;
 
@@ -65,6 +80,7 @@ export interface ProjectEditorState {
 	gifFrameRate: GifFrameRate;
 	gifLoop: boolean;
 	gifSizePreset: GifSizePreset;
+	cursorHighlight: import("./videoPlayback/cursorHighlight").CursorHighlightConfig;
 }
 
 export interface EditorProjectData {
@@ -78,6 +94,27 @@ function isFiniteNumber(value: unknown): value is number {
 	return typeof value === "number" && Number.isFinite(value);
 }
 
+function computeNormalizedWebcamLayoutPreset(
+	webcamLayoutPreset: Partial<ProjectEditorState>["webcamLayoutPreset"],
+	normalizedAspectRatio: AspectRatio,
+): WebcamLayoutPreset {
+	switch (webcamLayoutPreset) {
+		case "picture-in-picture":
+		case "no-webcam":
+			return webcamLayoutPreset;
+		case "vertical-stack":
+			return isPortraitAspectRatio(normalizedAspectRatio)
+				? webcamLayoutPreset
+				: DEFAULT_WEBCAM_LAYOUT_PRESET;
+		case "dual-frame":
+			return isPortraitAspectRatio(normalizedAspectRatio)
+				? DEFAULT_WEBCAM_LAYOUT_PRESET
+				: webcamLayoutPreset;
+		default:
+			return DEFAULT_WEBCAM_LAYOUT_PRESET;
+	}
+}
+
 function clamp(value: number, min: number, max: number) {
 	return Math.min(max, Math.max(min, value));
 }
@@ -185,6 +222,26 @@ export function resolveProjectMedia(
 
 export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): ProjectEditorState {
 	const validAspectRatios = new Set<AspectRatio>(ASPECT_RATIOS);
+	const normalizedAspectRatio: AspectRatio = validAspectRatios.has(
+		editor.aspectRatio as AspectRatio,
+	)
+		? (editor.aspectRatio as AspectRatio)
+		: "16:9";
+	const normalizedWebcamLayoutPreset = computeNormalizedWebcamLayoutPreset(
+		editor.webcamLayoutPreset,
+		normalizedAspectRatio,
+	);
+	const normalizedWebcamPosition: WebcamPosition | null =
+		normalizedWebcamLayoutPreset === "picture-in-picture" &&
+		editor.webcamPosition &&
+		typeof editor.webcamPosition === "object" &&
+		isFiniteNumber((editor.webcamPosition as WebcamPosition).cx) &&
+		isFiniteNumber((editor.webcamPosition as WebcamPosition).cy)
+			? {
+					cx: clamp((editor.webcamPosition as WebcamPosition).cx, 0, 1),
+					cy: clamp((editor.webcamPosition as WebcamPosition).cy, 0, 1),
+				}
+			: DEFAULT_WEBCAM_POSITION;
 
 	const normalizedZoomRegions: ZoomRegion[] = Array.isArray(editor.zoomRegions)
 		? editor.zoomRegions
@@ -195,6 +252,12 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 					const startMs = Math.max(0, Math.min(rawStart, rawEnd));
 					const endMs = Math.max(startMs + 1, rawEnd);
 
+					const validPreset =
+						region.rotationPreset === "iso" ||
+						region.rotationPreset === "left" ||
+						region.rotationPreset === "right"
+							? region.rotationPreset
+							: undefined;
 					return {
 						id: region.id,
 						startMs,
@@ -205,6 +268,7 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 							cy: clamp(isFiniteNumber(region.focus?.cy) ? region.focus.cy : 0.5, 0, 1),
 						},
 						focusMode: region.focusMode === "auto" ? "auto" : "manual",
+						...(validPreset ? { rotationPreset: validPreset } : {}),
 					};
 				})
 		: [];
@@ -265,6 +329,8 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 						VALID_BLUR_SHAPES.has(region.blurData.shape)
 							? region.blurData.shape
 							: DEFAULT_BLUR_DATA.shape;
+					const blurType = normalizeBlurType(region.blurData?.type);
+					const blurColor = normalizeBlurColor(region.blurData?.color);
 
 					return {
 						id: region.id,
@@ -325,10 +391,15 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 								? {
 										...DEFAULT_BLUR_DATA,
 										...region.blurData,
+										type: blurType,
 										shape: blurShape,
+										color: blurColor,
 										intensity: isFiniteNumber(region.blurData.intensity)
 											? clamp(region.blurData.intensity, MIN_BLUR_INTENSITY, MAX_BLUR_INTENSITY)
 											: DEFAULT_BLUR_INTENSITY,
+										blockSize: isFiniteNumber(region.blurData.blockSize)
+											? clamp(region.blurData.blockSize, MIN_BLUR_BLOCK_SIZE, MAX_BLUR_BLOCK_SIZE)
+											: DEFAULT_BLUR_BLOCK_SIZE,
 										freehandPoints: Array.isArray(region.blurData.freehandPoints)
 											? region.blurData.freehandPoints
 													.filter(
@@ -374,7 +445,10 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 	const cropHeight = clamp(rawCropHeight, 0.01, 1 - cropY);
 
 	return {
-		wallpaper: typeof editor.wallpaper === "string" ? editor.wallpaper : WALLPAPER_PATHS[0],
+		wallpaper:
+			typeof editor.wallpaper === "string"
+				? normalizeWallpaperValue(editor.wallpaper)
+				: DEFAULT_WALLPAPER,
 		shadowIntensity: typeof editor.shadowIntensity === "number" ? editor.shadowIntensity : 0,
 		showBlur: typeof editor.showBlur === "boolean" ? editor.showBlur : false,
 		motionBlurAmount: isFiniteNumber(editor.motionBlurAmount)
@@ -396,13 +470,8 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 		trimRegions: normalizedTrimRegions,
 		speedRegions: normalizedSpeedRegions,
 		annotationRegions: normalizedAnnotationRegions,
-		aspectRatio:
-			editor.aspectRatio && validAspectRatios.has(editor.aspectRatio) ? editor.aspectRatio : "16:9",
-		webcamLayoutPreset:
-			editor.webcamLayoutPreset === "vertical-stack" ||
-			editor.webcamLayoutPreset === "picture-in-picture"
-				? editor.webcamLayoutPreset
-				: DEFAULT_WEBCAM_LAYOUT_PRESET,
+		aspectRatio: normalizedAspectRatio,
+		webcamLayoutPreset: normalizedWebcamLayoutPreset,
 		webcamMaskShape:
 			editor.webcamMaskShape === "rectangle" ||
 			editor.webcamMaskShape === "circle" ||
@@ -414,16 +483,7 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 			typeof editor.webcamSizePreset === "number" && isFiniteNumber(editor.webcamSizePreset)
 				? Math.max(10, Math.min(50, editor.webcamSizePreset))
 				: DEFAULT_WEBCAM_SIZE_PRESET,
-		webcamPosition:
-			editor.webcamPosition &&
-			typeof editor.webcamPosition === "object" &&
-			isFiniteNumber((editor.webcamPosition as WebcamPosition).cx) &&
-			isFiniteNumber((editor.webcamPosition as WebcamPosition).cy)
-				? {
-						cx: clamp((editor.webcamPosition as WebcamPosition).cx, 0, 1),
-						cy: clamp((editor.webcamPosition as WebcamPosition).cy, 0, 1),
-					}
-				: DEFAULT_WEBCAM_POSITION,
+		webcamPosition: normalizedWebcamPosition,
 		exportQuality:
 			editor.exportQuality === "medium" || editor.exportQuality === "source"
 				? editor.exportQuality
@@ -443,6 +503,52 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 			editor.gifSizePreset === "original"
 				? editor.gifSizePreset
 				: "medium",
+		cursorHighlight: normalizeCursorHighlight(editor.cursorHighlight),
+	};
+}
+
+function normalizeCursorHighlight(
+	value: unknown,
+): import("./videoPlayback/cursorHighlight").CursorHighlightConfig {
+	const fallback: import("./videoPlayback/cursorHighlight").CursorHighlightConfig = {
+		enabled: false,
+		style: "ring",
+		sizePx: 24,
+		color: "#FFD700",
+		opacity: 0.9,
+		onlyOnClicks: false,
+		clickEmphasisDurationMs: 350,
+		offsetXNorm: 0,
+		offsetYNorm: 0,
+	};
+	if (!value || typeof value !== "object") return fallback;
+	const v = value as Partial<import("./videoPlayback/cursorHighlight").CursorHighlightConfig>;
+	return {
+		enabled: typeof v.enabled === "boolean" ? v.enabled : fallback.enabled,
+		style: v.style === "dot" || v.style === "ring" ? v.style : fallback.style,
+		sizePx:
+			typeof v.sizePx === "number" && v.sizePx >= 10 && v.sizePx <= 36 ? v.sizePx : fallback.sizePx,
+		color:
+			typeof v.color === "string" && /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/.test(v.color)
+				? v.color
+				: fallback.color,
+		opacity:
+			typeof v.opacity === "number" && v.opacity >= 0 && v.opacity <= 1
+				? v.opacity
+				: fallback.opacity,
+		onlyOnClicks: typeof v.onlyOnClicks === "boolean" ? v.onlyOnClicks : fallback.onlyOnClicks,
+		clickEmphasisDurationMs:
+			typeof v.clickEmphasisDurationMs === "number" && v.clickEmphasisDurationMs > 0
+				? v.clickEmphasisDurationMs
+				: fallback.clickEmphasisDurationMs,
+		offsetXNorm:
+			typeof v.offsetXNorm === "number" && Number.isFinite(v.offsetXNorm)
+				? Math.max(-1, Math.min(1, v.offsetXNorm))
+				: fallback.offsetXNorm,
+		offsetYNorm:
+			typeof v.offsetYNorm === "number" && Number.isFinite(v.offsetYNorm)
+				? Math.max(-1, Math.min(1, v.offsetYNorm))
+				: fallback.offsetYNorm,
 	};
 }
 

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

@@ -1,7 +1,8 @@
 import type { Span } from "dnd-timeline";
 import { useItem } from "dnd-timeline";
-import { Gauge, MessageSquare, Scissors, ZoomIn } from "lucide-react";
+import { Gauge, MessageSquare, MousePointer2, Scissors, ZoomIn } from "lucide-react";
 import { useMemo } from "react";
+import { useScopedT } from "@/contexts/I18nContext";
 import { cn } from "@/lib/utils";
 import glassStyles from "./ItemGlass.module.css";
 
@@ -13,7 +14,9 @@ interface ItemProps {
 	isSelected?: boolean;
 	onSelect?: () => void;
 	zoomDepth?: number;
+	zoomCustomScale?: number;
 	speedValue?: number;
+	isAutoFocus?: boolean;
 	variant?: "zoom" | "trim" | "annotation" | "speed" | "blur";
 }
 
@@ -44,10 +47,13 @@ export default function Item({
 	isSelected = false,
 	onSelect,
 	zoomDepth = 1,
+	zoomCustomScale,
 	speedValue,
+	isAutoFocus = false,
 	variant = "zoom",
 	children,
 }: ItemProps) {
+	const t = useScopedT("timeline");
 	const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
 		id,
 		span,
@@ -95,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?.();
@@ -124,33 +130,41 @@ 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">
-										{ZOOM_LABELS[zoomDepth] || `${zoomDepth}×`}
+									<span className="text-[11px] font-semibold whitespace-nowrap">
+										{zoomCustomScale != null
+											? `${zoomCustomScale.toFixed(2)}×`
+											: ZOOM_LABELS[zoomDepth] || `${zoomDepth}×`}
 									</span>
+									{isAutoFocus && (
+										<MousePointer2
+											className="w-3 h-3 shrink-0 opacity-90"
+											aria-label="Cursor-follow"
+										/>
+									)}
 								</>
 							) : isTrim ? (
 								<>
 									<Scissors className="w-3.5 h-3.5 shrink-0" />
-									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
-										Trim
+									<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">
-										{speedValue !== undefined ? `${speedValue}×` : "Speed"}
+									<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;
 }
@@ -102,7 +105,9 @@ interface TimelineRenderItem {
 	span: Span;
 	label: string;
 	zoomDepth?: number;
+	zoomCustomScale?: number;
 	speedValue?: number;
+	isAutoFocus?: boolean;
 	variant: "zoom" | "trim" | "annotation" | "speed" | "blur";
 }
 
@@ -376,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`,
 				}}
@@ -387,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">
@@ -473,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`,
 			}}
@@ -484,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` }}
 					/>
 				);
@@ -506,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",
@@ -657,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}
@@ -682,6 +687,8 @@ function Timeline({
 						isSelected={item.id === selectedZoomId}
 						onSelect={() => onSelectZoom?.(item.id)}
 						zoomDepth={item.zoomDepth}
+						zoomCustomScale={item.zoomCustomScale}
+						isAutoFocus={item.isAutoFocus}
 						variant="zoom"
 					>
 						{item.label}
@@ -797,6 +804,10 @@ export default function TimelineEditor({
 	onSpeedDelete,
 	selectedSpeedId,
 	onSelectSpeed,
+	canCopySelectedItem = false,
+	canPasteTimelineItem = false,
+	onCopySelectedItem,
+	onPasteTimelineItem,
 	aspectRatio,
 	onAspectRatioChange,
 }: TimelineEditorProps) {
@@ -1225,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;
 			}
 
@@ -1313,11 +1359,14 @@ export default function TimelineEditor({
 		selectedBlurId,
 		selectedSpeedId,
 		annotationRegions,
-		blurRegions,
 		currentTime,
 		onSelectAnnotation,
 		keyShortcuts,
 		isMac,
+		canCopySelectedItem,
+		canPasteTimelineItem,
+		onCopySelectedItem,
+		onPasteTimelineItem,
 	]);
 
 	const clampedRange = useMemo<Range>(() => {
@@ -1338,6 +1387,8 @@ export default function TimelineEditor({
 			span: { start: region.startMs, end: region.endMs },
 			label: t("labels.zoomItem", { index: String(index + 1) }),
 			zoomDepth: region.depth,
+			zoomCustomScale: region.customScale,
+			isAutoFocus: region.focusMode === "auto",
 			variant: "zoom",
 		}));
 
@@ -1443,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" />
@@ -1459,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" />
@@ -1468,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" />
@@ -1477,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" />
@@ -1486,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
@@ -1505,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" />
@@ -1536,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}
@@ -1557,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/timeline/TimelineWrapper.tsx

@@ -57,7 +57,7 @@ export default function TimelineWrapper({
 			const duration = Math.min(Math.max(rawDuration, minDuration), totalMs);
 
 			const start = Math.max(0, Math.min(normalizedStart, totalMs - duration));
-			const end = start + duration;
+			const end = Math.min(start + duration, totalMs);
 
 			return { start, end };
 		},

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

@@ -26,6 +26,37 @@ export interface ZoomFocus {
 	cy: number; // normalized vertical center (0-1)
 }
 
+export interface Rotation3D {
+	rotationX: number;
+	rotationY: number;
+	rotationZ: number;
+}
+
+export const DEFAULT_ROTATION_3D: Rotation3D = {
+	rotationX: 0,
+	rotationY: 0,
+	rotationZ: 0,
+};
+
+export type Rotation3DPreset = "iso" | "left" | "right";
+
+export const ROTATION_3D_PRESETS: Record<Rotation3DPreset, Rotation3D> = {
+	iso: { rotationX: -10, rotationY: -16, rotationZ: 0 },
+	left: { rotationX: 0, rotationY: -22, rotationZ: 0 },
+	right: { rotationX: 0, rotationY: 22, rotationZ: 0 },
+};
+
+export const ROTATION_3D_PRESET_ORDER: Rotation3DPreset[] = ["iso", "left", "right"];
+
+/** Perspective distance in CSS px is computed at render-time as this factor times
+ * min(viewport width, viewport height). Same factor used in preview and export so
+ * the visual look is identical regardless of canvas resolution. */
+export const ROTATION_3D_PERSPECTIVE_FACTOR = 2.6;
+
+export function rotation3DPerspective(width: number, height: number): number {
+	return Math.min(width, height) * ROTATION_3D_PERSPECTIVE_FACTOR;
+}
+
 export interface ZoomRegion {
 	id: string;
 	startMs: number;
@@ -33,6 +64,106 @@ export interface ZoomRegion {
 	depth: ZoomDepth;
 	focus: ZoomFocus;
 	focusMode?: ZoomFocusMode;
+	rotationPreset?: Rotation3DPreset;
+	/** Custom scale overriding the preset depth (1.0–5.0, two decimal precision). */
+	customScale?: number;
+}
+
+export function getRotation3D(region: Pick<ZoomRegion, "rotationPreset">): Rotation3D {
+	if (!region.rotationPreset) return DEFAULT_ROTATION_3D;
+	return ROTATION_3D_PRESETS[region.rotationPreset];
+}
+
+export function isRotation3DIdentity(r: Rotation3D, eps = 0.01): boolean {
+	return Math.abs(r.rotationX) < eps && Math.abs(r.rotationY) < eps && Math.abs(r.rotationZ) < eps;
+}
+
+export function lerpRotation3D(a: Rotation3D, b: Rotation3D, t: number): Rotation3D {
+	return {
+		rotationX: a.rotationX + (b.rotationX - a.rotationX) * t,
+		rotationY: a.rotationY + (b.rotationY - a.rotationY) * t,
+		rotationZ: a.rotationZ + (b.rotationZ - a.rotationZ) * t,
+	};
+}
+
+/**
+ * Compute the maximum uniform scale that, when applied alongside `rot` and a perspective
+ * of `perspective` CSS px, keeps the projected bounding box of a `width × height` element
+ * inside its original `width × height` rectangle. Returns 1 when no scaling is needed.
+ *
+ * Math: project each rotated corner onto the screen via x' = x·P/(P−z); take the worst-case
+ * |x'|/|y'| against the half-extents and return the limiting ratio. This makes the rotated
+ * recording sit *inside* the zoom window instead of bleeding past it.
+ */
+export function computeRotation3DContainScale(
+	rot: Rotation3D,
+	width: number,
+	height: number,
+	perspective: number,
+): number {
+	const a = (rot.rotationX * Math.PI) / 180;
+	const b = (rot.rotationY * Math.PI) / 180;
+	const g = (rot.rotationZ * Math.PI) / 180;
+	const ca = Math.cos(a);
+	const sa = Math.sin(a);
+	const cb = Math.cos(b);
+	const sb = Math.sin(b);
+	const cg = Math.cos(g);
+	const sg = Math.sin(g);
+	const halfW = width / 2;
+	const halfH = height / 2;
+	const corners: Array<[number, number]> = [
+		[-halfW, -halfH],
+		[halfW, -halfH],
+		[halfW, halfH],
+		[-halfW, halfH],
+	];
+
+	let maxAbsX = 0;
+	let maxAbsY = 0;
+
+	for (const [x0, y0] of corners) {
+		// CSS "rotateX(α) rotateY(β) rotateZ(γ)" reads right-to-left: Z first, then Y, then X.
+		let px = x0;
+		let py = y0;
+		let pz = 0;
+
+		// rotateZ
+		const zx = px * cg - py * sg;
+		const zy = px * sg + py * cg;
+		px = zx;
+		py = zy;
+
+		// rotateY
+		const yx = px * cb + pz * sb;
+		const yz = -px * sb + pz * cb;
+		px = yx;
+		pz = yz;
+
+		// rotateX
+		const xy = py * ca - pz * sa;
+		const xz = py * sa + pz * ca;
+		py = xy;
+		pz = xz;
+
+		// Perspective projection: viewer at (0, 0, P), looking toward −z. A point at z=pz
+		// is scaled by P / (P − pz). When perspective ≤ 0 we treat as orthographic.
+		if (perspective > 0) {
+			const denom = perspective - pz;
+			if (denom <= 0) return 1; // pathological — skip scaling rather than crash
+			const f = perspective / denom;
+			px *= f;
+			py *= f;
+		}
+
+		if (Math.abs(px) > maxAbsX) maxAbsX = Math.abs(px);
+		if (Math.abs(py) > maxAbsY) maxAbsY = Math.abs(py);
+	}
+
+	if (maxAbsX === 0 || maxAbsY === 0) return 1;
+	const sx = halfW / maxAbsX;
+	const sy = halfH / maxAbsY;
+	return Math.min(sx, sy, 1);
 }
 
 export interface CursorTelemetryPoint {
@@ -66,14 +197,22 @@ export interface FigureData {
 }
 
 export type BlurShape = "rectangle" | "oval" | "freehand";
+export type BlurType = "blur" | "mosaic";
+export type BlurColor = "white" | "black";
 
 export const MIN_BLUR_INTENSITY = 2;
 export const MAX_BLUR_INTENSITY = 40;
 export const DEFAULT_BLUR_INTENSITY = 12;
+export const MIN_BLUR_BLOCK_SIZE = 4;
+export const MAX_BLUR_BLOCK_SIZE = 48;
+export const DEFAULT_BLUR_BLOCK_SIZE = 12;
 
 export interface BlurData {
+	type: BlurType;
 	shape: BlurShape;
+	color: BlurColor;
 	intensity: number;
+	blockSize: number;
 	// Points are normalized (0-100) within the annotation bounds.
 	freehandPoints?: Array<{ x: number; y: number }>;
 }
@@ -155,8 +294,11 @@ export const DEFAULT_BLUR_FREEHAND_POINTS: Array<{ x: number; y: number }> = [
 ];
 
 export const DEFAULT_BLUR_DATA: BlurData = {
+	type: "mosaic",
 	shape: "rectangle",
+	color: "white",
 	intensity: DEFAULT_BLUR_INTENSITY,
+	blockSize: DEFAULT_BLUR_BLOCK_SIZE,
 	freehandPoints: DEFAULT_BLUR_FREEHAND_POINTS,
 };
 
@@ -216,8 +358,20 @@ export const ZOOM_DEPTH_SCALES: Record<ZoomDepth, number> = {
 	6: 5.0,
 };
 
+export const MIN_ZOOM_SCALE = 1.0;
+export const MAX_ZOOM_SCALE = 5.0;
+
 export const DEFAULT_ZOOM_DEPTH: ZoomDepth = 3;
 
+/** Returns the effective zoom scale for a region, preferring customScale over the preset. */
+export function getZoomScale(region: ZoomRegion): number {
+	if (region.customScale != null) {
+		const clamped = Math.max(MIN_ZOOM_SCALE, Math.min(MAX_ZOOM_SCALE, region.customScale));
+		if (Number.isFinite(clamped)) return clamped;
+	}
+	return ZOOM_DEPTH_SCALES[region.depth];
+}
+
 export function clampFocusToDepth(focus: ZoomFocus, _depth: ZoomDepth): ZoomFocus {
 	return {
 		cx: clamp(focus.cx, 0, 1),

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

@@ -0,0 +1,125 @@
+import type { Graphics } from "pixi.js";
+
+export type CursorHighlightStyle = "dot" | "ring";
+
+export interface CursorHighlightConfig {
+	enabled: boolean;
+	style: CursorHighlightStyle;
+	sizePx: number;
+	color: string;
+	opacity: number;
+	// Show only on clicks (macOS — depends on click telemetry from uiohook).
+	onlyOnClicks: boolean;
+	clickEmphasisDurationMs: number;
+	// Per-recording manual nudge. Cursor telemetry is normalized to the display,
+	// but window recordings frame a subset of the display so the highlight
+	// lands offset. Users dial these in once to align with the actual cursor.
+	offsetXNorm: number;
+	offsetYNorm: number;
+}
+
+export const CURSOR_HIGHLIGHT_MIN_SIZE_PX = 10;
+export const CURSOR_HIGHLIGHT_MAX_SIZE_PX = 36;
+
+export const DEFAULT_CURSOR_HIGHLIGHT: CursorHighlightConfig = {
+	enabled: false,
+	style: "ring",
+	sizePx: 24,
+	color: "#FFD700",
+	opacity: 0.9,
+	onlyOnClicks: false,
+	clickEmphasisDurationMs: 350,
+	offsetXNorm: 0,
+	offsetYNorm: 0,
+};
+
+export const CURSOR_HIGHLIGHT_OFFSET_RANGE = 0.25; // ±25% of recorded surface
+
+// Alpha multiplier for the highlight at `timeMs`. Returns 1 when not in
+// click-only mode; in click-only mode fades 1→0 across each click's window.
+export function clickEmphasisAlpha(
+	timeMs: number,
+	clickTimestampsMs: number[] | undefined,
+	config: CursorHighlightConfig,
+): number {
+	if (!config.onlyOnClicks) return 1;
+	if (!clickTimestampsMs || clickTimestampsMs.length === 0) return 0;
+	const window = Math.max(1, config.clickEmphasisDurationMs);
+	for (let i = 0; i < clickTimestampsMs.length; i++) {
+		const dt = timeMs - clickTimestampsMs[i];
+		if (dt >= 0 && dt <= window) {
+			return 1 - dt / window;
+		}
+	}
+	return 0;
+}
+
+function parseHexColor(hex: string): number {
+	const cleaned = hex.replace("#", "");
+	if (cleaned.length === 3) {
+		const r = cleaned[0];
+		const g = cleaned[1];
+		const b = cleaned[2];
+		return Number.parseInt(`${r}${r}${g}${g}${b}${b}`, 16);
+	}
+	return Number.parseInt(cleaned.slice(0, 6), 16);
+}
+
+export function drawCursorHighlightGraphics(g: Graphics, config: CursorHighlightConfig): void {
+	g.clear();
+	if (!config.enabled) return;
+
+	const color = parseHexColor(config.color);
+	const radius = Math.max(1, config.sizePx / 2);
+	const alpha = Math.max(0, Math.min(1, config.opacity));
+
+	switch (config.style) {
+		case "dot": {
+			g.circle(0, 0, radius);
+			g.fill({ color, alpha });
+			break;
+		}
+		case "ring": {
+			g.circle(0, 0, radius);
+			g.stroke({ color, alpha, width: Math.max(2, radius * 0.18) });
+			break;
+		}
+	}
+}
+
+export function drawCursorHighlightCanvas(
+	ctx: CanvasRenderingContext2D,
+	cx: number,
+	cy: number,
+	config: CursorHighlightConfig,
+	pixelScale = 1,
+): void {
+	if (!config.enabled) return;
+
+	const radius = Math.max(1, (config.sizePx / 2) * pixelScale);
+	const alpha = Math.max(0, Math.min(1, config.opacity));
+	const color = config.color;
+
+	ctx.save();
+	ctx.globalAlpha = alpha;
+
+	switch (config.style) {
+		case "dot": {
+			ctx.fillStyle = color;
+			ctx.beginPath();
+			ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+			ctx.fill();
+			break;
+		}
+		case "ring": {
+			ctx.beginPath();
+			ctx.arc(cx, cy, radius, 0, Math.PI * 2);
+			ctx.strokeStyle = color;
+			ctx.lineWidth = Math.max(2, radius * 0.18);
+			ctx.stroke();
+			break;
+		}
+	}
+
+	ctx.restore();
+}

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

@@ -44,7 +44,7 @@ interface ViewportRatio {
 	heightRatio: number;
 }
 
-function getFocusBoundsForScale(zoomScale: number, viewportRatio?: ViewportRatio) {
+export function getFocusBoundsForScale(zoomScale: number, viewportRatio?: ViewportRatio) {
 	const wr = viewportRatio?.widthRatio ?? 1;
 	const hr = viewportRatio?.heightRatio ?? 1;
 	const marginX = Math.min(0.5, wr / (2 * zoomScale));

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

@@ -140,7 +140,7 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
 		screenRect.y,
 		screenRect.width,
 		screenRect.height,
-		compositeLayout.screenCover ? 0 : borderRadius,
+		compositeLayout.screenBorderRadius ?? (compositeLayout.screenCover ? 0 : borderRadius),
 	);
 	maskGraphics.fill({ color: 0xffffff });
 

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

@@ -1,5 +1,5 @@
-import { ZOOM_DEPTH_SCALES, type ZoomFocus, type ZoomRegion } from "../types";
-import { clampFocusToStage } from "./focusUtils";
+import { getZoomScale, type ZoomFocus, type ZoomRegion } from "../types";
+import { clampFocusToScale } from "./focusUtils";
 
 interface OverlayUpdateParams {
 	overlayEl: HTMLDivElement;
@@ -35,11 +35,8 @@ export function updateOverlayIndicator(params: OverlayUpdateParams) {
 		return;
 	}
 
-	const zoomScale = ZOOM_DEPTH_SCALES[region.depth];
-	const focus = clampFocusToStage(focusOverride ?? region.focus, region.depth, {
-		width: stageWidth,
-		height: stageHeight,
-	});
+	const zoomScale = getZoomScale(region);
+	const focus = clampFocusToScale(focusOverride ?? region.focus, zoomScale);
 
 	// Zoom window shows the stage area that will be visible after zooming (1/zoomScale of stage dimensions)
 	const indicatorWidth = stageWidth / zoomScale;

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

@@ -1,6 +1,11 @@
 import type React from "react";
 import type { SpeedRegion, TrimRegion } from "../types";
 
+// Keep "scrub mode" on for a brief tail after `seeked` — rapid drag-scrubbing
+// fires `seeking`/`seeked` dozens of times per second, and toggling effects
+// each time would flicker.
+const SCRUB_END_DEBOUNCE_MS = 150;
+
 interface VideoEventHandlersParams {
 	video: HTMLVideoElement;
 	isSeekingRef: React.MutableRefObject<boolean>;
@@ -12,6 +17,9 @@ interface VideoEventHandlersParams {
 	onTimeUpdate: (time: number) => void;
 	trimRegionsRef: React.MutableRefObject<TrimRegion[]>;
 	speedRegionsRef: React.MutableRefObject<SpeedRegion[]>;
+	isScrubbingRef?: React.MutableRefObject<boolean>;
+	scrubEndTimerRef?: React.MutableRefObject<number | null>;
+	onScrubChange?: (scrubbing: boolean) => void;
 }
 
 export function createVideoEventHandlers(params: VideoEventHandlersParams) {
@@ -26,8 +34,18 @@ export function createVideoEventHandlers(params: VideoEventHandlersParams) {
 		onTimeUpdate,
 		trimRegionsRef,
 		speedRegionsRef,
+		isScrubbingRef,
+		scrubEndTimerRef,
+		onScrubChange,
 	} = params;
 
+	const clearScrubEndTimer = () => {
+		if (scrubEndTimerRef && scrubEndTimerRef.current !== null) {
+			window.clearTimeout(scrubEndTimerRef.current);
+			scrubEndTimerRef.current = null;
+		}
+	};
+
 	const emitTime = (timeValue: number) => {
 		currentTimeRef.current = timeValue * 1000;
 		onTimeUpdate(timeValue);
@@ -113,6 +131,15 @@ export function createVideoEventHandlers(params: VideoEventHandlersParams) {
 	const handleSeeked = () => {
 		isSeekingRef.current = false;
 
+		if (isScrubbingRef && scrubEndTimerRef) {
+			clearScrubEndTimer();
+			scrubEndTimerRef.current = window.setTimeout(() => {
+				isScrubbingRef.current = false;
+				scrubEndTimerRef.current = null;
+				onScrubChange?.(false);
+			}, SCRUB_END_DEBOUNCE_MS);
+		}
+
 		const currentTimeMs = video.currentTime * 1000;
 		const activeTrimRegion = findActiveTrimRegion(currentTimeMs);
 
@@ -137,6 +164,14 @@ export function createVideoEventHandlers(params: VideoEventHandlersParams) {
 	const handleSeeking = () => {
 		isSeekingRef.current = true;
 
+		if (isScrubbingRef) {
+			clearScrubEndTimer();
+			if (!isScrubbingRef.current) {
+				isScrubbingRef.current = true;
+				onScrubChange?.(true);
+			}
+		}
+
 		if (!isPlayingRef.current && !video.paused) {
 			video.pause();
 		}

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

@@ -1,5 +1,5 @@
-import type { CursorTelemetryPoint, ZoomFocus, ZoomRegion } from "../types";
-import { ZOOM_DEPTH_SCALES } from "../types";
+import type { CursorTelemetryPoint, Rotation3D, ZoomFocus, ZoomRegion } from "../types";
+import { DEFAULT_ROTATION_3D, getRotation3D, getZoomScale, lerpRotation3D } from "../types";
 import { TRANSITION_WINDOW_MS, ZOOM_IN_TRANSITION_WINDOW_MS } from "./constants";
 import { interpolateCursorAt } from "./cursorFollowUtils";
 import { clampFocusToScale } from "./focusUtils";
@@ -155,7 +155,7 @@ function getActiveRegion(
 	}
 
 	const activeRegion = activeRegions[0].region;
-	const activeScale = ZOOM_DEPTH_SCALES[activeRegion.depth];
+	const activeScale = getZoomScale(activeRegion);
 
 	return {
 		region: {
@@ -164,6 +164,7 @@ function getActiveRegion(
 		},
 		strength: activeRegions[0].strength,
 		blendedScale: null,
+		rotation3D: getRotation3D(activeRegion),
 	};
 }
 
@@ -175,7 +176,7 @@ function getConnectedRegionHold(
 ) {
 	for (const pair of connectedPairs) {
 		if (timeMs > pair.transitionEnd && timeMs < pair.nextRegion.startMs) {
-			const nextScale = ZOOM_DEPTH_SCALES[pair.nextRegion.depth];
+			const nextScale = getZoomScale(pair.nextRegion);
 			return {
 				region: {
 					...pair.nextRegion,
@@ -189,6 +190,7 @@ function getConnectedRegionHold(
 				},
 				strength: 1,
 				blendedScale: null,
+				rotation3D: getRotation3D(pair.nextRegion),
 			};
 		}
 	}
@@ -212,8 +214,8 @@ function getConnectedRegionTransition(
 		const transitionProgress = easeConnectedPan(
 			clamp01((timeMs - transitionStart) / Math.max(1, transitionEnd - transitionStart)),
 		);
-		const currentScale = ZOOM_DEPTH_SCALES[currentRegion.depth];
-		const nextScale = ZOOM_DEPTH_SCALES[nextRegion.depth];
+		const currentScale = getZoomScale(currentRegion);
+		const nextScale = getZoomScale(nextRegion);
 		const transitionScale = lerp(currentScale, nextScale, transitionProgress);
 		// Both regions share the same timeMs, so interpolate cursor once and reuse.
 		const sharedCursorFocus =
@@ -233,6 +235,11 @@ function getConnectedRegionTransition(
 			viewportRatio,
 		);
 		const transitionFocus = getLinearFocus(currentFocus, nextFocus, transitionProgress);
+		const transitionRotation = lerpRotation3D(
+			getRotation3D(currentRegion),
+			getRotation3D(nextRegion),
+			transitionProgress,
+		);
 
 		return {
 			region: {
@@ -241,6 +248,7 @@ function getConnectedRegionTransition(
 			},
 			strength: 1,
 			blendedScale: transitionScale,
+			rotation3D: transitionRotation,
 			transition: {
 				progress: transitionProgress,
 				startFocus: currentFocus,
@@ -254,34 +262,92 @@ function getConnectedRegionTransition(
 	return null;
 }
 
+type DominantRegionResult = {
+	region: ZoomRegion | null;
+	strength: number;
+	blendedScale: number | null;
+	rotation3D: Rotation3D;
+	transition: ConnectedPanTransition | null;
+};
+
+// Single-slot cache: the ticker calls findDominantRegion at 60fps with mostly
+// unchanged inputs (especially while paused). Reusing the previous result when
+// inputs match avoids the per-frame O(N) region scan + allocations.
+let dominantRegionCache: {
+	regions: ZoomRegion[];
+	timeMsKey: number;
+	telemetry: CursorTelemetryPoint[] | undefined;
+	connectZooms: boolean;
+	viewportRatio: ViewportRatio | undefined;
+	result: DominantRegionResult;
+} | null = null;
+
 export function findDominantRegion(
 	regions: ZoomRegion[],
 	timeMs: number,
 	options: DominantRegionOptions = {},
-): {
-	region: ZoomRegion | null;
-	strength: number;
-	blendedScale: number | null;
-	transition: ConnectedPanTransition | null;
-} {
-	const connectedPairs = options.connectZooms ? getConnectedRegionPairs(regions) : [];
+): DominantRegionResult {
+	const connectZooms = !!options.connectZooms;
 	const telemetry = options.cursorTelemetry;
 	const vr = options.viewportRatio;
+	const timeMsKey = Math.round(timeMs);
 
-	if (options.connectZooms) {
-		const connectedTransition = getConnectedRegionTransition(connectedPairs, timeMs, telemetry, vr);
-		if (connectedTransition) {
-			return connectedTransition;
-		}
-
-		const connectedHold = getConnectedRegionHold(timeMs, connectedPairs, telemetry, vr);
-		if (connectedHold) {
-			return { ...connectedHold, transition: null };
-		}
+	if (
+		dominantRegionCache &&
+		dominantRegionCache.regions === regions &&
+		dominantRegionCache.timeMsKey === timeMsKey &&
+		dominantRegionCache.telemetry === telemetry &&
+		dominantRegionCache.connectZooms === connectZooms &&
+		dominantRegionCache.viewportRatio === vr
+	) {
+		return dominantRegionCache.result;
 	}
 
-	const activeRegion = getActiveRegion(regions, timeMs, connectedPairs, telemetry, vr);
-	return activeRegion
-		? { ...activeRegion, transition: null }
-		: { region: null, strength: 0, blendedScale: null, transition: null };
+	const connectedPairs = connectZooms ? getConnectedRegionPairs(regions) : [];
+
+	let result: DominantRegionResult;
+	if (connectZooms) {
+		const connectedTransition = getConnectedRegionTransition(connectedPairs, timeMs, telemetry, vr);
+		if (connectedTransition) {
+			result = connectedTransition;
+		} else {
+			const connectedHold = getConnectedRegionHold(timeMs, connectedPairs, telemetry, vr);
+			if (connectedHold) {
+				result = { ...connectedHold, transition: null };
+			} else {
+				const activeRegion = getActiveRegion(regions, timeMs, connectedPairs, telemetry, vr);
+				result = activeRegion
+					? { ...activeRegion, transition: null }
+					: {
+							region: null,
+							strength: 0,
+							blendedScale: null,
+							rotation3D: DEFAULT_ROTATION_3D,
+							transition: null,
+						};
+			}
+		}
+	} else {
+		const activeRegion = getActiveRegion(regions, timeMs, connectedPairs, telemetry, vr);
+		result = activeRegion
+			? { ...activeRegion, transition: null }
+			: {
+					region: null,
+					strength: 0,
+					blendedScale: null,
+					rotation3D: DEFAULT_ROTATION_3D,
+					transition: null,
+				};
+	}
+
+	dominantRegionCache = {
+		regions,
+		timeMsKey,
+		telemetry,
+		connectZooms,
+		viewportRatio: vr,
+		result,
+	};
+
+	return result;
 }

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

@@ -90,8 +90,10 @@ export function computeZoomTransform({
 	}
 
 	const progress = Math.min(1, Math.max(0, zoomProgress));
-	const focusStagePxX = baseMask.x + focusX * baseMask.width;
-	const focusStagePxY = baseMask.y + focusY * baseMask.height;
+	// Focus coordinates are stage-normalized (0-1 of full canvas),
+	// so map directly to stage pixels, not through baseMask.
+	const focusStagePxX = focusX * stageSize.width;
+	const focusStagePxY = focusY * stageSize.height;
 	const stageCenterX = stageSize.width / 2;
 	const stageCenterY = stageSize.height / 2;
 	const scale = 1 + (zoomScale - 1) * progress;
@@ -128,8 +130,8 @@ export function computeFocusFromTransform({
 	const focusStagePxY = (stageCenterY - y) / zoomScale;
 
 	return {
-		cx: (focusStagePxX - baseMask.x) / baseMask.width,
-		cy: (focusStagePxY - baseMask.y) / baseMask.height,
+		cx: focusStagePxX / stageSize.width,
+		cy: focusStagePxY / stageSize.height,
 	};
 }
 

src/contexts/I18nContext.tsx

@@ -5,16 +5,11 @@ import {
 	useContext,
 	useEffect,
 	useMemo,
+	useRef,
 	useState,
 } from "react";
-import {
-	DEFAULT_LOCALE,
-	type I18nNamespace,
-	LOCALE_STORAGE_KEY,
-	type Locale,
-	SUPPORTED_LOCALES,
-} from "@/i18n/config";
-import { translate } from "@/i18n/loader";
+import { DEFAULT_LOCALE, type I18nNamespace, LOCALE_STORAGE_KEY, type Locale } from "@/i18n/config";
+import { getAvailableLocales, translate } from "@/i18n/loader";
 
 type TranslateVars = Record<string, string | number>;
 
@@ -22,8 +17,14 @@ interface I18nContextValue {
 	locale: Locale;
 	setLocale: (locale: Locale) => void;
 	t: (qualifiedKey: string, vars?: TranslateVars) => string;
+	systemLocaleSuggestion: Locale | null;
+	acceptSystemLocaleSuggestion: () => void;
+	dismissSystemLocaleSuggestion: () => void;
+	resolveSystemLocaleSuggestion: () => void;
 }
 
+const SYSTEM_LANGUAGE_PROMPT_SEEN_KEY = "openscreen-system-language-prompt-seen";
+
 const I18nContext = createContext<I18nContextValue | null>(null);
 
 export function useI18n(): I18nContextValue {
@@ -41,7 +42,37 @@ export function useScopedT(namespace: I18nNamespace) {
 }
 
 function isSupportedLocale(value: string): value is Locale {
-	return (SUPPORTED_LOCALES as readonly string[]).includes(value);
+	return getAvailableLocales().includes(value);
+}
+
+function getSupportedSystemLocale(): Locale | null {
+	if (typeof navigator === "undefined") return null;
+	const availableLocales = getAvailableLocales();
+
+	const candidates =
+		Array.isArray(navigator.languages) && navigator.languages.length > 0
+			? navigator.languages
+			: [navigator.language];
+
+	for (const candidate of candidates) {
+		if (!candidate) continue;
+		if (isSupportedLocale(candidate)) return candidate;
+
+		const exactMatch = availableLocales.find(
+			(locale) => locale.toLowerCase() === candidate.toLowerCase(),
+		);
+		if (exactMatch) return exactMatch;
+
+		const baseLanguage = candidate.split("-")[0]?.toLowerCase();
+		if (!baseLanguage) continue;
+
+		if (baseLanguage === "zh" && availableLocales.includes("zh-CN")) return "zh-CN";
+
+		const baseMatch = availableLocales.find((locale) => locale.toLowerCase() === baseLanguage);
+		if (baseMatch) return baseMatch;
+	}
+
+	return null;
 }
 
 function getInitialLocale(): Locale {
@@ -56,6 +87,16 @@ function getInitialLocale(): Locale {
 
 export function I18nProvider({ children }: { children: ReactNode }) {
 	const [locale, setLocaleState] = useState<Locale>(getInitialLocale);
+	const [systemLocaleSuggestion, setSystemLocaleSuggestion] = useState<Locale | null>(null);
+	const hasRunSystemLocaleCheckRef = useRef(false);
+
+	const markPromptAsHandled = useCallback(() => {
+		try {
+			localStorage.setItem(SYSTEM_LANGUAGE_PROMPT_SEEN_KEY, "1");
+		} catch {
+			// localStorage may be unavailable
+		}
+	}, []);
 
 	const setLocale = useCallback((newLocale: Locale) => {
 		setLocaleState(newLocale);
@@ -73,6 +114,48 @@ export function I18nProvider({ children }: { children: ReactNode }) {
 		document.documentElement.lang = locale;
 	}, [locale]);
 
+	useEffect(() => {
+		if (hasRunSystemLocaleCheckRef.current) return;
+		hasRunSystemLocaleCheckRef.current = true;
+
+		let hasStoredLocale = false;
+		let hasHandledSystemPrompt = false;
+		try {
+			const stored = localStorage.getItem(LOCALE_STORAGE_KEY);
+			hasStoredLocale = Boolean(stored && isSupportedLocale(stored));
+			hasHandledSystemPrompt = localStorage.getItem(SYSTEM_LANGUAGE_PROMPT_SEEN_KEY) === "1";
+		} catch {
+			// localStorage may be unavailable
+		}
+
+		if (hasStoredLocale || hasHandledSystemPrompt) return;
+
+		const detectedSystemLocale = getSupportedSystemLocale();
+		if (!detectedSystemLocale || detectedSystemLocale === DEFAULT_LOCALE) {
+			markPromptAsHandled();
+			return;
+		}
+
+		setSystemLocaleSuggestion(detectedSystemLocale);
+	}, [markPromptAsHandled]);
+
+	const acceptSystemLocaleSuggestion = useCallback(() => {
+		if (!systemLocaleSuggestion) return;
+		setLocale(systemLocaleSuggestion);
+		setSystemLocaleSuggestion(null);
+		markPromptAsHandled();
+	}, [markPromptAsHandled, setLocale, systemLocaleSuggestion]);
+
+	const dismissSystemLocaleSuggestion = useCallback(() => {
+		setSystemLocaleSuggestion(null);
+		markPromptAsHandled();
+	}, [markPromptAsHandled]);
+
+	const resolveSystemLocaleSuggestion = useCallback(() => {
+		setSystemLocaleSuggestion(null);
+		markPromptAsHandled();
+	}, [markPromptAsHandled]);
+
 	const t = useCallback(
 		(qualifiedKey: string, vars?: TranslateVars): string => {
 			const dotIndex = qualifiedKey.indexOf(".");
@@ -84,7 +167,26 @@ export function I18nProvider({ children }: { children: ReactNode }) {
 		[locale],
 	);
 
-	const value = useMemo<I18nContextValue>(() => ({ locale, setLocale, t }), [locale, setLocale, t]);
+	const value = useMemo<I18nContextValue>(
+		() => ({
+			locale,
+			setLocale,
+			t,
+			systemLocaleSuggestion,
+			acceptSystemLocaleSuggestion,
+			dismissSystemLocaleSuggestion,
+			resolveSystemLocaleSuggestion,
+		}),
+		[
+			locale,
+			setLocale,
+			t,
+			systemLocaleSuggestion,
+			acceptSystemLocaleSuggestion,
+			dismissSystemLocaleSuggestion,
+			resolveSystemLocaleSuggestion,
+		],
+	);
 
 	return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
 }

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/hooks/useEditorHistory.ts

@@ -17,6 +17,11 @@ import {
 	DEFAULT_WEBCAM_POSITION,
 	DEFAULT_WEBCAM_SIZE_PRESET,
 } from "@/components/video-editor/types";
+import {
+	type CursorHighlightConfig,
+	DEFAULT_CURSOR_HIGHLIGHT,
+} from "@/components/video-editor/videoPlayback/cursorHighlight";
+import { DEFAULT_WALLPAPER } from "@/lib/wallpaper";
 import type { AspectRatio } from "@/utils/aspectRatioUtils";
 
 // Undoable state — selection IDs are intentionally excluded (undoing a
@@ -38,6 +43,7 @@ export interface EditorState {
 	webcamMaskShape: WebcamMaskShape;
 	webcamSizePreset: WebcamSizePreset;
 	webcamPosition: WebcamPosition | null;
+	cursorHighlight: CursorHighlightConfig;
 }
 
 export const INITIAL_EDITOR_STATE: EditorState = {
@@ -46,7 +52,7 @@ export const INITIAL_EDITOR_STATE: EditorState = {
 	speedRegions: [],
 	annotationRegions: [],
 	cropRegion: DEFAULT_CROP_REGION,
-	wallpaper: "/wallpapers/wallpaper1.jpg",
+	wallpaper: DEFAULT_WALLPAPER,
 	shadowIntensity: 0,
 	showBlur: false,
 	motionBlurAmount: 0,
@@ -57,6 +63,7 @@ export const INITIAL_EDITOR_STATE: EditorState = {
 	webcamMaskShape: DEFAULT_WEBCAM_MASK_SHAPE,
 	webcamSizePreset: DEFAULT_WEBCAM_SIZE_PRESET,
 	webcamPosition: DEFAULT_WEBCAM_POSITION,
+	cursorHighlight: DEFAULT_CURSOR_HIGHLIGHT,
 };
 
 type StateUpdate = Partial<EditorState> | ((prev: EditorState) => Partial<EditorState>);

src/hooks/useScreenRecorder.ts

@@ -110,6 +110,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const allowAutoFinalize = useRef(false);
 	const discardRecordingId = useRef<number | null>(null);
 	const restarting = useRef(false);
+	const countdownRunId = useRef(0);
+	const [countdownActive, setCountdownActive] = useState(false);
+	const webcamReady = useRef(false);
+	const webcamAcquireId = useRef(0);
 
 	const getRecordingDurationMs = useCallback(() => {
 		const segmentDuration =
@@ -118,11 +122,15 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	}, []);
 
 	const selectMimeType = () => {
+		// H.264 first: hardware-accelerated on all modern devices, gives sharp
+		// real-time output. AV1/VP9 are great for distribution but too
+		// CPU-intensive for live 60 fps capture — they produce blurry frames
+		// when the software encoder can't keep up.
 		const preferred = [
-			"video/webm;codecs=av1",
 			"video/webm;codecs=h264",
-			"video/webm;codecs=vp9",
 			"video/webm;codecs=vp8",
+			"video/webm;codecs=vp9",
+			"video/webm;codecs=av1",
 			"video/webm",
 		];
 
@@ -158,10 +166,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			microphoneStream.current.getTracks().forEach((track) => track.stop());
 			microphoneStream.current = null;
 		}
-		if (webcamStream.current) {
-			webcamStream.current.getTracks().forEach((track) => track.stop());
-			webcamStream.current = null;
-		}
 		if (mixingContext.current) {
 			mixingContext.current.close().catch(() => {
 				// Ignore close errors during recorder teardown.
@@ -194,6 +198,85 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		[t],
 	);
 
+	useEffect(() => {
+		if (!webcamEnabled) return;
+
+		let cancelled = false;
+		let acquiredStream: MediaStream | null = null;
+		const thisAcquireId = ++webcamAcquireId.current;
+		webcamReady.current = false;
+
+		const acquire = async () => {
+			try {
+				const stream = await navigator.mediaDevices.getUserMedia({
+					audio: false,
+					video: webcamDeviceId
+						? {
+								deviceId: { exact: webcamDeviceId },
+								width: { ideal: WEBCAM_TARGET_WIDTH },
+								height: { ideal: WEBCAM_TARGET_HEIGHT },
+								frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+							}
+						: {
+								width: { ideal: WEBCAM_TARGET_WIDTH },
+								height: { ideal: WEBCAM_TARGET_HEIGHT },
+								frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
+							},
+				});
+
+				if (cancelled || thisAcquireId !== webcamAcquireId.current) {
+					stream.getTracks().forEach((track) => {
+						track.onended = null;
+						track.stop();
+					});
+					return;
+				}
+
+				acquiredStream = stream;
+				stream.getVideoTracks().forEach((track) => {
+					track.onended = () => {
+						webcamStream.current = null;
+						if (!restarting.current) {
+							setWebcamEnabledState(false);
+							toast.error(t("recording.cameraDisconnected"));
+						}
+					};
+				});
+				webcamStream.current = stream;
+				webcamReady.current = true;
+			} catch (cameraError) {
+				if (!cancelled) {
+					console.warn("Failed to get webcam access:", cameraError);
+					setWebcamEnabledState(false);
+					const isDeviceError =
+						cameraError instanceof DOMException &&
+						[
+							"NotFoundError",
+							"DevicesNotFoundError",
+							"OverconstrainedError",
+							"NotReadableError",
+						].includes(cameraError.name);
+					toast.error(t(isDeviceError ? "recording.cameraNotFound" : "recording.cameraBlocked"));
+					webcamReady.current = true;
+				}
+			}
+		};
+
+		void acquire();
+
+		return () => {
+			cancelled = true;
+			webcamReady.current = false;
+			if (acquiredStream) {
+				acquiredStream.getTracks().forEach((track) => {
+					track.onended = null;
+					track.stop();
+				});
+				webcamStream.current = null;
+			}
+		};
+	}, [webcamEnabled, webcamDeviceId, t]);
+
 	const finalizeRecording = useCallback(
 		(
 			activeScreenRecorder: RecorderHandle,
@@ -225,6 +308,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				try {
 					const screenBlob = await activeScreenRecorder.recordedBlobPromise;
 					if (discardRecordingId.current === activeRecordingId) {
+						window.electronAPI?.discardCursorTelemetry(activeRecordingId);
 						return;
 					}
 					if (screenBlob.size === 0) {
@@ -334,7 +418,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 
 		return () => {
+			const activeRunId = countdownRunId.current;
 			if (cleanup) cleanup();
+			countdownRunId.current += 1;
+			void safeHideCountdownOverlay(activeRunId);
 			allowAutoFinalize.current = false;
 			restarting.current = false;
 			discardRecordingId.current = null;
@@ -365,7 +452,117 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		};
 	}, [teardownMedia]);
 
-	const startRecording = async () => {
+	const safeShowCountdownOverlay = async (value: number, runId: number) => {
+		try {
+			await window.electronAPI.showCountdownOverlay(value, runId);
+			return true;
+		} catch (error) {
+			console.warn("Failed to show countdown overlay:", error);
+			return false;
+		}
+	};
+
+	const cancelCountdown = () => {
+		const activeRunId = countdownRunId.current;
+		countdownRunId.current += 1;
+		setCountdownActive(false);
+		void safeHideCountdownOverlay(activeRunId);
+	};
+
+	const safeSetCountdownOverlayValue = async (value: number, runId: number) => {
+		try {
+			await window.electronAPI.setCountdownOverlayValue(value, runId);
+		} catch (error) {
+			console.warn("Failed to update countdown overlay value:", error);
+		}
+	};
+
+	const safeHideCountdownOverlay = async (runId: number) => {
+		try {
+			await window.electronAPI.hideCountdownOverlay(runId);
+		} catch (error) {
+			console.warn("Failed to hide countdown overlay:", error);
+		}
+	};
+
+	const isCountdownRunActive = (runId?: number) =>
+		runId === undefined || countdownRunId.current === runId;
+
+	const startRecordCountdown = async () => {
+		if (countdownActive || recording) {
+			return;
+		}
+
+		const runId = countdownRunId.current + 1;
+		countdownRunId.current = runId;
+		setCountdownActive(true);
+
+		let selectedSource: ProcessedDesktopSource | null = null;
+		try {
+			selectedSource = await window.electronAPI.getSelectedSource();
+		} catch (error) {
+			console.warn("Failed to read selected source before countdown:", error);
+		}
+
+		if (!isCountdownRunActive(runId)) {
+			return;
+		}
+
+		if (!selectedSource) {
+			if (countdownRunId.current === runId) {
+				setCountdownActive(false);
+			}
+			alert(t("recording.selectSource"));
+			return;
+		}
+
+		let overlayHiddenBeforeStart = false;
+		try {
+			const values = [3, 2, 1];
+			const overlayShown = await safeShowCountdownOverlay(values[0], runId);
+
+			if (countdownRunId.current !== runId) {
+				return;
+			}
+
+			for (const value of values) {
+				if (countdownRunId.current !== runId) {
+					return;
+				}
+
+				if (overlayShown && value !== values[0]) {
+					await safeSetCountdownOverlayValue(value, runId);
+
+					if (countdownRunId.current !== runId) {
+						return;
+					}
+				}
+
+				await new Promise((resolve) => window.setTimeout(resolve, 1000));
+			}
+
+			if (countdownRunId.current !== runId) {
+				return;
+			}
+
+			setCountdownActive(false);
+			await safeHideCountdownOverlay(runId);
+			overlayHiddenBeforeStart = true;
+
+			if (countdownRunId.current !== runId) {
+				return;
+			}
+
+			await startRecording(runId);
+		} finally {
+			if (!overlayHiddenBeforeStart && countdownRunId.current === runId) {
+				setCountdownActive(false);
+				await safeHideCountdownOverlay(runId);
+			}
+		}
+	};
+
+	const startRecording = async (countdownRunToken?: number) => {
 		try {
 			const selectedSource = await window.electronAPI.getSelectedSource();
 			if (!selectedSource) {
@@ -373,6 +570,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				return;
 			}
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			let screenMediaStream: MediaStream;
 
 			const videoConstraints = {
@@ -413,6 +615,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			}
 			screenStream.current = screenMediaStream;
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			if (microphoneEnabled) {
 				try {
 					microphoneStream.current = await navigator.mediaDevices.getUserMedia({
@@ -437,32 +644,35 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				}
 			}
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			if (webcamEnabled) {
-				try {
-					webcamStream.current = await navigator.mediaDevices.getUserMedia({
-						audio: false,
-						video: webcamDeviceId
-							? {
-									deviceId: { exact: webcamDeviceId },
-									width: { ideal: WEBCAM_TARGET_WIDTH },
-									height: { ideal: WEBCAM_TARGET_HEIGHT },
-									frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
-								}
-							: {
-									width: { ideal: WEBCAM_TARGET_WIDTH },
-									height: { ideal: WEBCAM_TARGET_HEIGHT },
-									frameRate: { ideal: WEBCAM_TARGET_FRAME_RATE, max: WEBCAM_TARGET_FRAME_RATE },
-								},
+				if (!webcamReady.current) {
+					await new Promise<void>((resolve) => {
+						const interval = setInterval(() => {
+							if (webcamReady.current) {
+								clearInterval(interval);
+								resolve();
+							}
+						}, 50);
+						setTimeout(() => {
+							clearInterval(interval);
+							resolve();
+						}, 5000);
 					});
-				} catch (cameraError) {
-					console.warn("Failed to get webcam access:", cameraError);
-					if (webcamStream.current) {
-						webcamStream.current.getTracks().forEach((track) => track.stop());
-						webcamStream.current = null;
-					}
-					setWebcamEnabledState(false);
-					toast.error(t("recording.cameraDenied"));
 				}
+				if (!webcamStream.current) {
+					webcamAcquireId.current++;
+					setWebcamEnabledState(false);
+				}
+			}
+
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
 			}
 
 			stream.current = new MediaStream();
@@ -505,6 +715,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				);
 			}
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			let {
 				width = DEFAULT_WIDTH,
 				height = DEFAULT_HEIGHT,
@@ -524,6 +739,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			);
 
 			const hasAudio = stream.current.getAudioTracks().length > 0;
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			screenRecorder.current = createRecorderHandle(stream.current, {
 				mimeType,
 				videoBitsPerSecond,
@@ -553,7 +773,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			setRecording(true);
 			setPaused(false);
 			setElapsedSeconds(0);
-			window.electronAPI?.setRecordingState(true);
+			window.electronAPI?.setRecordingState(true, recordingId.current);
 
 			const activeScreenRecorder = screenRecorder.current;
 			const activeWebcamRecorder = webcamRecorder.current;
@@ -635,7 +855,17 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	};
 
 	const toggleRecording = () => {
-		recording ? stopRecording.current() : startRecording();
+		if (recording) {
+			stopRecording.current();
+			return;
+		}
+
+		if (countdownActive) {
+			cancelCountdown();
+			return;
+		}
+
+		void startRecordCountdown();
 	};
 
 	const restartRecording = async () => {
@@ -649,7 +879,6 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
 		restarting.current = true;
 		discardRecordingId.current = activeRecordingId;
-		allowAutoFinalize.current = false;
 
 		const stopPromises = [
 			new Promise<void>((resolve) => {
@@ -700,13 +929,22 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
 	const cancelRecording = () => {
 		const activeScreenRecorder = screenRecorder.current;
-		if (!activeScreenRecorder || activeScreenRecorder.recorder.state !== "recording") return;
+		if (
+			activeScreenRecorder?.recorder.state === "recording" ||
+			activeScreenRecorder?.recorder.state === "paused"
+		) {
+			const activeRecordingId = recordingId.current;
+			discardRecordingId.current = activeRecordingId;
+			allowAutoFinalize.current = false;
 
-		const activeRecordingId = recordingId.current;
-		discardRecordingId.current = activeRecordingId;
-		allowAutoFinalize.current = false;
+			stopRecording.current();
+			return;
+		}
 
-		stopRecording.current();
+		if (countdownActive) {
+			cancelCountdown();
+			return;
+		}
 	};
 
 	return {

src/i18n/__tests__/tutorialHelpTranslations.test.ts

@@ -0,0 +1,61 @@
+import { describe, expect, it } from "vitest";
+import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
+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 koKRDialogs from "@/i18n/locales/ko-KR/dialogs.json";
+import trDialogs from "@/i18n/locales/tr/dialogs.json";
+import zhCNDialogs from "@/i18n/locales/zh-CN/dialogs.json";
+import zhTWDialogs from "@/i18n/locales/zh-TW/dialogs.json";
+
+const tutorialHelpKeys = [
+	"triggerLabel",
+	"title",
+	"description",
+	"explanationBefore",
+	"remove",
+	"explanationMiddle",
+	"covered",
+	"explanationAfter",
+	"visualExample",
+	"removed",
+	"kept",
+	"part1",
+	"part2",
+	"part3",
+	"finalVideo",
+	"step1Title",
+	"step1DescriptionBefore",
+	"step1DescriptionAfter",
+	"step2Title",
+	"step2Description",
+] as const;
+
+const keysThatMayBeEmpty = new Set<(typeof tutorialHelpKeys)[number]>(["step1DescriptionBefore"]);
+
+const dialogsByLocale = {
+	en: enDialogs,
+	"zh-CN": zhCNDialogs,
+	"zh-TW": zhTWDialogs,
+	es: esDialogs,
+	fr: frDialogs,
+	tr: trDialogs,
+	"ko-KR": koKRDialogs,
+} satisfies Record<Locale, { tutorial: Record<string, unknown> }>;
+
+describe("TutorialHelp translations", () => {
+	it("defines every tutorial help key for each supported locale", () => {
+		for (const locale of SUPPORTED_LOCALES) {
+			const tutorial = dialogsByLocale[locale].tutorial;
+
+			for (const key of tutorialHelpKeys) {
+				const message = tutorial[key];
+				const label = `${locale} dialogs.tutorial.${key}`;
+				expect(message, label).toEqual(expect.any(String));
+				if (!keysThatMayBeEmpty.has(key)) {
+					expect((message as string).trim().length, label).toBeGreaterThan(0);
+				}
+			}
+		}
+	});
+});

src/i18n/config.ts

@@ -1,5 +1,5 @@
 export const DEFAULT_LOCALE = "en" as const;
-export const SUPPORTED_LOCALES = ["en", "zh-CN", "es", "fr", "tr"] as const;
+export const SUPPORTED_LOCALES = ["en", "zh-CN", "zh-TW", "es", "fr", "tr", "ko-KR"] as const;
 export const I18N_NAMESPACES = [
 	"common",
 	"dialogs",
@@ -10,7 +10,7 @@ export const I18N_NAMESPACES = [
 	"timeline",
 ] as const;
 
-export type Locale = (typeof SUPPORTED_LOCALES)[number];
+export type Locale = string;
 export type I18nNamespace = (typeof I18N_NAMESPACES)[number];
 
 export const LOCALE_STORAGE_KEY = "openscreen-locale";

src/i18n/loader.ts

@@ -1,6 +1,10 @@
-import { DEFAULT_LOCALE, type I18nNamespace, type Locale } from "./config";
+import { DEFAULT_LOCALE, I18N_NAMESPACES, type I18nNamespace, type Locale } from "./config";
 
 type MessageMap = Record<string, unknown>;
+type LocaleValidationError = {
+	locale: string;
+	missingNamespaces: I18nNamespace[];
+};
 
 const modules = import.meta.glob("./locales/**/*.json", { eager: true }) as Record<
 	string,
@@ -18,6 +22,62 @@ for (const [path, mod] of Object.entries(modules)) {
 	messages[locale][namespace] = mod.default;
 }
 
+const REQUIRED_NAMESPACES = new Set<string>(I18N_NAMESPACES);
+
+const localeValidationErrors: LocaleValidationError[] = Object.keys(messages)
+	.map((locale) => {
+		const localeMessages = messages[locale] ?? {};
+		const missingNamespaces = I18N_NAMESPACES.filter((namespace) => !localeMessages[namespace]);
+		return {
+			locale,
+			missingNamespaces,
+		};
+	})
+	.filter((entry) => entry.missingNamespaces.length > 0);
+
+const invalidLocales = new Set(localeValidationErrors.map((entry) => entry.locale));
+
+const availableLocales = Object.keys(messages)
+	.filter((locale) => REQUIRED_NAMESPACES.size > 0 && hasRequiredNamespaces(messages[locale]))
+	.filter((locale) => !invalidLocales.has(locale))
+	.sort((a, b) => {
+		if (a === DEFAULT_LOCALE) return -1;
+		if (b === DEFAULT_LOCALE) return 1;
+		return a.localeCompare(b);
+	});
+
+if (localeValidationErrors.length > 0) {
+	console.error("[i18n] Incomplete locale folders were excluded:");
+	for (const entry of localeValidationErrors) {
+		console.error(
+			`[i18n] ${entry.locale}: missing ${entry.missingNamespaces.map((ns) => `${ns}.json`).join(", ")}`,
+		);
+	}
+}
+
+function hasRequiredNamespaces(localeMessages: Record<string, MessageMap> | undefined): boolean {
+	if (!localeMessages) return false;
+	for (const namespace of REQUIRED_NAMESPACES) {
+		if (!localeMessages[namespace]) return false;
+	}
+	return true;
+}
+
+function isAvailableLocale(locale: string): locale is Locale {
+	return availableLocales.includes(locale);
+}
+
+export function getAvailableLocales(): Locale[] {
+	if (availableLocales.length === 0) {
+		return [DEFAULT_LOCALE];
+	}
+	return availableLocales;
+}
+
+export function getLocaleValidationErrors(): LocaleValidationError[] {
+	return localeValidationErrors;
+}
+
 function getMessageValue(obj: unknown, dotPath: string): string | undefined {
 	const keys = dotPath.split(".");
 	let current: unknown = obj;
@@ -34,15 +94,18 @@ function interpolate(str: string, vars?: Record<string, string | number>): strin
 }
 
 export function getMessages(locale: Locale, namespace: I18nNamespace): MessageMap {
-	return messages[locale]?.[namespace] ?? {};
+	const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+	return messages[resolvedLocale]?.[namespace] ?? {};
 }
 
 export function getLocaleName(locale: Locale): string {
-	return getMessageValue(messages[locale]?.common, "locale.name") ?? locale;
+	const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+	return getMessageValue(messages[resolvedLocale]?.common, "locale.name") ?? locale;
 }
 
 export function getLocaleShort(locale: Locale): string {
-	return getMessageValue(messages[locale]?.common, "locale.short") ?? locale;
+	const resolvedLocale = isAvailableLocale(locale) ? locale : DEFAULT_LOCALE;
+	return getMessageValue(messages[resolvedLocale]?.common, "locale.short") ?? locale;
 }
 
 export function translate(
@@ -52,8 +115,10 @@ export function translate(
 	vars?: Record<string, string | number>,
 ): string {
 	const value =
-		getMessageValue(messages[locale]?.[namespace], key) ??
-		getMessageValue(messages[DEFAULT_LOCALE]?.[namespace], key);
+		getMessageValue(
+			messages[isAvailableLocale(locale) ? locale : DEFAULT_LOCALE]?.[namespace],
+			key,
+		) ?? getMessageValue(messages[DEFAULT_LOCALE]?.[namespace], key);
 
 	if (value == null) return `${namespace}.${key}`;
 	return interpolate(value, vars);

src/i18n/locales/ar/common.json

@@ -0,0 +1,50 @@
+{
+	"actions": {
+		"cancel": "الغاء",
+		"save": "حفظ",
+		"delete": "حذف",
+		"close": "اغلاق",
+		"share": "مشاركة",
+		"done": "تم",
+		"open": "فتح",
+		"upload": "رفع",
+		"export": "تصدير",
+		"showInFolder": "عرض في المجلد",
+		"file": "ملف",
+		"edit": "تعديل",
+		"view": "عرض",
+		"window": "نافذة",
+		"quit": "خروج",
+		"stopRecording": "إيقاف التسجيل",
+		"undo": "تراجع",
+		"redo": "إعادة",
+		"cut": "قص",
+		"copy": "نسخ",
+		"paste": "لصق",
+		"selectAll": "تحديد الكل",
+		"minimize": "تصغير",
+		"reload": "إعادة تحميل",
+		"forceReload": "إعادة تحميل إجبارية",
+		"toggleDevTools": "أدوات المطور",
+		"actualSize": "الحجم الفعلي",
+		"zoomIn": "تكبير",
+		"zoomOut": "تصغير",
+		"toggleFullScreen": "ملء الشاشة",
+		"recordingStatus": "جاري التسجيل: {{source}}",
+		"about": "حول OpenScreen",
+		"services": "خدمات",
+		"hide": "إخفاء OpenScreen",
+		"hideOthers": "إخفاء الآخرين",
+		"unhide": "إظهار الكل"
+	},
+	"playback": {
+		"play": "تشغيل",
+		"pause": "ايقاف مؤقت",
+		"fullscreen": "ملء الشاشة",
+		"exitFullscreen": "خروج من ملء الشاشة"
+	},
+	"locale": {
+		"name": "عربي",
+		"short": "AR"
+	}
+}

src/i18n/locales/ar/dialogs.json

@@ -0,0 +1,70 @@
+{
+	"export": {
+		"complete": "اكتمل التصدير",
+		"yourFormatReady": "{{format}} الخاص بك جاهز",
+		"showInFolder": "عرض في المجلد",
+		"finalizingVideo": "جاري إنهاء تصدير الفيديو...",
+		"compilingGifProgress": "جاري تجميع GIF... {{progress}}%",
+		"compilingGifWait": "جاري تجميع GIF... قد يستغرق هذا بعض الوقت",
+		"takeMoment": "قد يستغرق هذا لحظة...",
+		"failed": "فشل التصدير",
+		"tryAgain": "يرجى المحاولة مرة أخرى",
+		"finalizingVideoTitle": "إنهاء الفيديو",
+		"compilingGif": "تجميع GIF",
+		"exportingFormat": "تصدير {{format}}",
+		"compiling": "تجميع",
+		"renderingFrames": "تصيير الإطارات",
+		"processing": "جاري المعالجة...",
+		"finalizing": "جاري الإنهاء...",
+		"compilingStatus": "جاري التجميع...",
+		"status": "الحالة",
+		"format": "الصيغة",
+		"frames": "الإطارات",
+		"cancelExport": "إلغاء التصدير",
+		"savedSuccessfully": "تم حفظ {{format}} بنجاح!"
+	},
+	"tutorial": {
+		"triggerLabel": "كيف يعمل القص",
+		"title": "كيف يعمل القص",
+		"description": "فهم كيفية قص الأجزاء غير المرغوب فيها من الفيديو الخاص بك.",
+		"explanationBefore": "تعمل أداة القص من خلال تحديد المقاطع التي تريد",
+		"remove": "إزالتها",
+		"explanationMiddle": " — أي شيء",
+		"covered": "مغطى",
+		"explanationAfter": "بمقطع قص أحمر سيتم قصه عند التصدير.",
+		"visualExample": "مثال مرئي",
+		"removed": "مُزال",
+		"kept": "مُحتفظ به",
+		"part1": "الجزء 1",
+		"part2": "الجزء 2",
+		"part3": "الجزء 3",
+		"finalVideo": "الفيديو النهائي",
+		"step1Title": "1. إضافة قص",
+		"step1DescriptionBefore": "اضغط على ",
+		"step1DescriptionAfter": " أو انقر على أيقونة المقص لتحديد قسم لإزالته.",
+		"step2Title": "2. تعديل",
+		"step2Description": "اسحب حواف المنطقة الحمراء لتغطي بالضبط ما تريد قصه."
+	},
+	"unsavedChanges": {
+		"title": "تغييرات غير محفوظة",
+		"message": "لديك تغييرات غير محفوظة.",
+		"detail": "هل تريد حفظ مشروعك قبل الإغلاق؟",
+		"saveAndClose": "حفظ وإغلاق",
+		"discardAndClose": "تجاهل وإغلاق",
+		"loadProject": "تحميل مشروع...",
+		"saveProject": "حفظ المشروع...",
+		"saveProjectAs": "حفظ المشروع باسم..."
+	},
+	"fileDialogs": {
+		"saveGif": "حفظ GIF المصدر",
+		"saveVideo": "حفظ الفيديو المصدر",
+		"selectVideo": "حدد ملف فيديو",
+		"saveProject": "حفظ مشروع OpenScreen",
+		"openProject": "فتح مشروع OpenScreen",
+		"gifImage": "صورة GIF",
+		"mp4Video": "فيديو MP4",
+		"videoFiles": "ملفات فيديو",
+		"openscreenProject": "مشروع OpenScreen",
+		"allFiles": "جميع الملفات"
+	}
+}

src/i18n/locales/ar/editor.json

@@ -0,0 +1,45 @@
+{
+	"newRecording": {
+		"title": "العودة إلى المسجل",
+		"description": "تم حفظ جلستك الحالية.",
+		"cancel": "إلغاء",
+		"confirm": "تأكيد"
+	},
+	"loadingVideo": "جاري تحميل الفيديو...",
+	"errors": {
+		"noVideoLoaded": "لم يتم تحميل أي فيديو",
+		"videoNotReady": "الفيديو غير جاهز",
+		"unableToDetermineSourcePath": "تعذر تحديد مسار الفيديو المصدر",
+		"failedToSaveGif": "فشل حفظ GIF",
+		"gifExportFailed": "فشل تصدير GIF",
+		"failedToSaveVideo": "فشل حفظ الفيديو",
+		"exportFailed": "فشل التصدير",
+		"exportFailedWithError": "فشل التصدير: {{error}}",
+		"exportBackgroundLoadFailed": "فشل التصدير: تعذر تحميل صورة الخلفية ({{url}})",
+		"failedToSaveExport": "فشل حفظ التصدير",
+		"failedToSaveExportedVideo": "فشل حفظ الفيديو المُصدَّر",
+		"failedToRevealInFolder": "خطأ في الكشف في المجلد: {{error}}"
+	},
+	"export": {
+		"canceled": "تم إلغاء التصدير",
+		"exportedSuccessfully": "تم تصدير {{format}} بنجاح"
+	},
+	"project": {
+		"saveCanceled": "تم إلغاء حفظ المشروع",
+		"failedToSave": "فشل حفظ المشروع",
+		"savedTo": "تم حفظ المشروع في {{path}}",
+		"failedToLoad": "فشل تحميل المشروع",
+		"invalidFormat": "تنسيق ملف المشروع غير صالح",
+		"loadedFrom": "تم تحميل المشروع من {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "فشل طلب الوصول إلى الكاميرا.",
+		"cameraBlocked": "الوصول إلى الكاميرا محظور. قم بتمكينه في إعدادات النظام لاستخدام كاميرا الويب.",
+		"systemAudioUnavailable": "صوت النظام غير متوفر. يتم التسجيل بدون صوت النظام.",
+		"microphoneDenied": "تم رفض الوصول إلى الميكروفون. سيستمر التسجيل بدون صوت.",
+		"cameraDenied": "تم رفض الوصول إلى الكاميرا. سيستمر التسجيل بدون كاميرا الويب.",
+		"cameraDisconnected": "تم فصل كاميرا الويب.",
+		"cameraNotFound": "لم يتم العثور على كاميرا.",
+		"permissionDenied": "تم رفض إذن التسجيل. يرجى السماح بتسجيل الشاشة."
+	}
+}

src/i18n/locales/ar/launch.json

@@ -0,0 +1,43 @@
+{
+	"tooltips": {
+		"hideHUD": "إخفاء واجهة العرض",
+		"closeApp": "إغلاق التطبيق",
+		"restartRecording": "إعادة تشغيل التسجيل",
+		"cancelRecording": "إلغاء التسجيل",
+		"pauseRecording": "إيقاف التسجيل مؤقتاً",
+		"resumeRecording": "استئناف التسجيل",
+		"openVideoFile": "فتح ملف فيديو",
+		"openProject": "فتح مشروع"
+	},
+	"audio": {
+		"enableSystemAudio": "تفعيل صوت النظام",
+		"disableSystemAudio": "تعطيل صوت النظام",
+		"enableMicrophone": "تفعيل الميكروفون",
+		"disableMicrophone": "تعطيل الميكروفون",
+		"defaultMicrophone": "الميكروفون الافتراضي"
+	},
+	"webcam": {
+		"enableWebcam": "تفعيل كاميرا الويب",
+		"disableWebcam": "تعطيل كاميرا الويب",
+		"defaultCamera": "الكاميرا الافتراضية",
+		"searching": "جاري البحث...",
+		"noneFound": "لم يتم العثور على كاميرا",
+		"unavailable": "الكاميرا غير متوفرة"
+	},
+	"sourceSelector": {
+		"loading": "جاري تحميل المصادر...",
+		"screens": "الشاشات ({{count}})",
+		"windows": "النوافذ ({{count}})",
+		"defaultSourceName": "الشاشة"
+	},
+	"recording": {
+		"selectSource": "يرجى تحديد مصدر للتسجيل"
+	},
+	"language": "اللغة",
+	"systemLanguagePrompt": {
+		"title": "هل تريد استخدام لغة نظامك؟",
+		"description": "اكتشفنا أن {{language}} هي لغة نظامك. هل تريد تبديل OpenScreen إلى {{language}}؟",
+		"switch": "التبديل إلى {{language}}",
+		"keepDefault": "الاحتفاظ باللغة الحالية"
+	}
+}

src/i18n/locales/ar/settings.json

@@ -0,0 +1,194 @@
+{
+	"zoom": {
+		"level": "مستوى التكبير",
+		"selectRegion": "حدد منطقة التكبير للتعديل",
+		"deleteZoom": "حذف التكبير",
+		"focusMode": {
+			"title": "وضع التركيز",
+			"manual": "يدوي",
+			"auto": "تلقائي",
+			"autoDescription": "الكاميرا تتبع موضع المؤشر المسجل"
+		}
+	},
+	"speed": {
+		"playbackSpeed": "سرعة التشغيل",
+		"selectRegion": "حدد منطقة السرعة للتعديل",
+		"deleteRegion": "حذف منطقة السرعة",
+		"customPlaybackSpeed": "سرعة تشغيل مخصصة",
+		"maxSpeedError": "لا يمكن للسرعة أن تتجاوز 16×"
+	},
+	"trim": {
+		"deleteRegion": "حذف منطقة القص"
+	},
+	"layout": {
+		"title": "التخطيط",
+		"preset": "الإعداد المسبق",
+		"selectPreset": "حدد إعدادًا مسبقًا",
+		"pictureInPicture": "صورة داخل صورة",
+		"verticalStack": "تكدس عمودي",
+		"dualFrame": "إطار مزدوج",
+		"webcamShape": "شكل الكاميرا",
+		"webcamSize": "حجم كاميرا الويب"
+	},
+	"effects": {
+		"title": "تأثيرات الفيديو",
+		"blurBg": "تمويه الخلفية",
+		"motionBlur": "ضبابية الحركة",
+		"off": "إيقاف",
+		"on": "تشغيل",
+		"shadow": "ظل",
+		"roundness": "الاستدارة",
+		"padding": "المسافة البادئة",
+		"cursorHighlight": {
+			"title": "تمييز المؤشر",
+			"style": "النمط",
+			"dot": "نقطة",
+			"ring": "حلقة",
+			"size": "الحجم",
+			"onlyOnClicks": "عند النقر فقط",
+			"color": "اللون",
+			"offsetX": "إزاحة X (لتسجيلات النوافذ)",
+			"offsetY": "إزاحة Y",
+			"accessibilityPermissionTitle": "مطلوب إذن الوصول",
+			"accessibilityPermissionDescription": "افتح إعدادات النظام ← الخصوصية والأمان ← إمكانية الوصول، وقم بتفعيل Openscreen، ثم أعد تشغيل التطبيق."
+		}
+	},
+	"background": {
+		"title": "الخلفية",
+		"image": "صورة",
+		"color": "لون",
+		"gradient": "تدرج لوني",
+		"uploadCustom": "رفع صورة مخصصة",
+		"gradientLabel": "تدرج لوني {{index}}",
+		"colorWheel": "عجلة الألوان",
+		"colorPalette": "لوحة الألوان"
+	},
+	"crop": {
+		"title": "اقتصاص",
+		"cropVideo": "اقتصاص الفيديو",
+		"dragInstruction": "اسحب من كل جانب لضبط منطقة الاقتصاص",
+		"ratio": "النسبة",
+		"free": "حر",
+		"done": "تم",
+		"lockAspectRatio": "قفل نسبة العرض إلى الارتفاع",
+		"unlockAspectRatio": "إلغاء قفل نسبة العرض إلى الارتفاع"
+	},
+	"exportFormat": {
+		"mp4": "MP4",
+		"gif": "GIF",
+		"mp4Video": "فيديو MP4",
+		"mp4Description": "ملف فيديو عالي الجودة",
+		"gifAnimation": "صورة GIF متحركة",
+		"gifDescription": "صورة متحركة للمشاركة"
+	},
+	"exportQuality": {
+		"title": "جودة التصدير",
+		"low": "منخفضة",
+		"medium": "متوسطة",
+		"high": "عالية"
+	},
+	"gifSettings": {
+		"frameRate": "معدل إطارات GIF",
+		"size": "حجم GIF",
+		"loop": "تكرار GIF"
+	},
+	"project": {
+		"save": "حفظ المشروع",
+		"load": "تحميل المشروع"
+	},
+	"export": {
+		"videoButton": "تصدير الفيديو",
+		"gifButton": "تصدير GIF",
+		"chooseSaveLocation": "اختيار موقع الحفظ"
+	},
+	"links": {
+		"reportBug": "الإبلاغ عن خطأ",
+		"starOnGithub": "إعطاء نجمة على GitHub"
+	},
+	"imageUpload": {
+		"invalidFileType": "نوع ملف غير صالح",
+		"jpgOnly": "يرجى رفع ملف صورة JPG أو JPEG.",
+		"uploadSuccess": "تم رفع الصورة المخصصة بنجاح!",
+		"failedToUpload": "فشل رفع الصورة",
+		"errorReading": "حدث خطأ أثناء قراءة الملف."
+	},
+	"annotation": {
+		"title": "إعدادات الشروح",
+		"active": "نشط",
+		"typeText": "نص",
+		"typeImage": "صورة",
+		"typeArrow": "سهم",
+		"typeBlur": "تمويه",
+		"textContent": "محتوى النص",
+		"textPlaceholder": "أدخل النص هنا...",
+		"fontStyle": "نمط الخط",
+		"selectStyle": "حدد النمط",
+		"size": "الحجم",
+		"customFonts": "خطوط مخصصة",
+		"textColor": "لون النص",
+		"background": "الخلفية",
+		"none": "بدون",
+		"color": "لون",
+		"colorWheel": "عجلة الألوان",
+		"colorPalette": "لوحة الألوان",
+		"clearBackground": "مسح الخلفية",
+		"uploadImage": "رفع صورة",
+		"supportedFormats": "الصيغ المدعومة: JPG, PNG, GIF, WebP",
+		"arrowDirection": "اتجاه السهم",
+		"strokeWidth": "عرض الخط: {{width}}px",
+		"arrowColor": "لون السهم",
+		"blurType": "نوع التمويه",
+		"blurTypeBlur": "تمويه",
+		"blurTypeMosaic": "فسيفساء",
+		"blurColor": "لون التمويه",
+		"blurColorWhite": "أبيض",
+		"blurColorBlack": "أسود",
+		"blurShape": "شكل التمويه",
+		"blurIntensity": "كثافة التمويه",
+		"mosaicBlockSize": "حجم كتلة الفسيفساء",
+		"blurShapeRectangle": "مستطيل",
+		"blurShapeOval": "بيضاوي",
+		"blurShapeFreehand": "رسم حر",
+		"deleteAnnotation": "حذف الشرح",
+		"shortcutsAndTips": "اختصارات ونصائح",
+		"tipMovePlayhead": "انقل رأس التشغيل إلى قسم الشروح المتداخلة وحدد عنصرًا.",
+		"tipTabCycle": "استخدم Tab للتنقل بين العناصر المتداخلة.",
+		"tipShiftTabCycle": "استخدم Shift+Tab للتنقل للخلف.",
+		"invalidImageType": "نوع ملف غير صالح",
+		"imageFormatsOnly": "يرجى رفع ملف صورة JPG أو PNG أو GIF أو WebP.",
+		"imageUploadSuccess": "تم رفع الصورة بنجاح!",
+		"failedImageUpload": "فشل في رفع الصورة"
+	},
+	"fontStyles": {
+		"classic": "كلاسيكي",
+		"editor": "محرر",
+		"strong": "قوي",
+		"typewriter": "آلة كاتبة",
+		"deco": "ديكو",
+		"simple": "بسيط",
+		"modern": "حديث",
+		"clean": "نظيف"
+	},
+	"customFont": {
+		"dialogTitle": "إضافة خط Google",
+		"urlLabel": "رابط استيراد خطوط Google",
+		"urlPlaceholder": "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
+		"urlHelp": "احصل على هذا من خطوط Google: حدد خطًا → انقر على \"احصل على الخط\" → انسخ رابط `@import`",
+		"nameLabel": "اسم العرض",
+		"namePlaceholder": "خطي المخصص",
+		"nameHelp": "هكذا سيظهر الخط في محدد الخطوط",
+		"addButton": "إضافة خط",
+		"addingButton": "جاري الإضافة...",
+		"errorEmptyUrl": "يرجى إدخال رابط استيراد لخطوط Google",
+		"errorInvalidUrl": "يرجى إدخال رابط صحيح لخطوط Google",
+		"errorEmptyName": "يرجى إدخال اسم الخط",
+		"errorExtractFailed": "تعذر استخراج عائلة الخط من الرابط",
+		"successMessage": "تم إضافة الخط \"{{fontName}}\" بنجاح",
+		"failedToAdd": "فشل في إضافة الخط",
+		"errorTimeout": "استغرق تحميل الخط وقتًا طويلاً. يرجى التحقق من الرابط والمحاولة مرة أخرى.",
+		"errorLoadFailed": "تعذر تحميل الخط. يرجى التحقق من صحة رابط خطوط Google."
+	},
+	"language": {
+		"title": "اللغة"
+	}
+}

src/i18n/locales/ar/shortcuts.json

@@ -0,0 +1,37 @@
+{
+	"title": "اختصارات لوحة المفاتيح",
+	"customize": "تخصيص",
+	"configurable": "قابل للتكوين",
+	"fixed": "ثابت",
+	"pressKey": "اضغط على مفتاح...",
+	"clickToChange": "انقر للتغيير",
+	"pressEscToCancel": "اضغط على Esc للإلغاء",
+	"helpText": "انقر على اختصار ثم اضغط على مجموعة المفاتيح الجديدة. اضغط على Esc للإلغاء.",
+	"resetToDefaults": "إعادة تعيين إلى الافتراضيات",
+	"alreadyUsedBy": "مستخدم بالفعل بواسطة {{action}}",
+	"swap": "تبديل",
+	"reservedShortcut": "هذا الاختصار محجوز لـ \"{{label}}\" ولا يمكن إعادة تعيينه.",
+	"savedToast": "تم حفظ اختصارات لوحة المفاتيح",
+	"resetToast": "إعادة تعيين إلى الاختصارات الافتراضية — انقر فوق حفظ للتطبيق",
+	"actions": {
+		"addZoom": "إضافة تكبير",
+		"addTrim": "إضافة قص",
+		"addSpeed": "إضافة سرعة",
+		"addAnnotation": "إضافة شرح",
+		"addBlur": "إضافة تمويه",
+		"addKeyframe": "إضافة إطار رئيسي",
+		"deleteSelected": "حذف المحدد",
+		"playPause": "تشغيل / إيقاف مؤقت"
+	},
+	"fixedActions": {
+		"undo": "تراجع",
+		"redo": "إعادة",
+		"cycleAnnotationsForward": "التنقل بين الشروح للأمام",
+		"cycleAnnotationsBackward": "التنقل بين الشروح للخلف",
+		"deleteSelectedAlt": "حذف المحدد (alt)",
+		"panTimeline": "تحريك المخطط الزمني",
+		"zoomTimeline": "تكبير المخطط الزمني",
+		"frameBack": "إطار للخلف",
+		"frameForward": "إطار للأمام"
+	}
+}

src/i18n/locales/ar/timeline.json

@@ -0,0 +1,59 @@
+{
+	"buttons": {
+		"addZoom": "إضافة تكبير (Z)",
+		"suggestZooms": "اقتراح تكبير من المؤشر",
+		"addTrim": "إضافة قص (T)",
+		"addAnnotation": "إضافة شرح (A)",
+		"addBlur": "إضافة تمويه (B)",
+		"addSpeed": "إضافة سرعة (S)"
+	},
+	"hints": {
+		"pressZoom": "اضغط Z لإضافة تكبير",
+		"pressTrim": "اضغط T لإضافة قص",
+		"pressAnnotation": "اضغط A لإضافة شرح",
+		"pressBlur": "اضغط B لإضافة منطقة تمويه",
+		"pressSpeed": "اضغط S لإضافة سرعة"
+	},
+	"labels": {
+		"pan": "تحريك",
+		"zoom": "تكبير",
+		"trim": "قص",
+		"speed": "سرعة",
+		"zoomItem": "تكبير {{index}}",
+		"trimItem": "قص {{index}}",
+		"speedItem": "سرعة {{index}}",
+		"annotationItem": "شرح",
+		"blurItem": "تمويه {{index}}",
+		"imageItem": "صورة",
+		"emptyText": "نص فارغ"
+	},
+	"emptyState": {
+		"noVideo": "لم يتم تحميل أي فيديو",
+		"dragAndDrop": "اسحب وأفلت مقطع فيديو لبدء التعديل"
+	},
+	"errors": {
+		"cannotPlaceZoom": "لا يمكن وضع التكبير هنا",
+		"zoomExistsAtLocation": "يوجد تكبير بالفعل في هذا الموقع أو لا توجد مساحة كافية متاحة.",
+		"zoomSuggestionUnavailable": "معالج اقتراح التكبير غير متوفر",
+		"noCursorTelemetry": "لا تتوفر بيانات قياس المؤشر",
+		"noCursorTelemetryDescription": "قم بتسجيل الشاشة أولاً لإنشاء اقتراحات بناءً على المؤشر.",
+		"noUsableTelemetry": "لا توجد بيانات قياس مؤشر قابلة للاستخدام",
+		"noUsableTelemetryDescription": "التسجيل لا يتضمن بيانات حركة مؤشر كافية.",
+		"noDwellMoments": "لم يتم العثور على لحظات توقف واضحة للمؤشر",
+		"noDwellMomentsDescription": "جرب تسجيلاً مع توقفات مؤشر أبطأ عند الإجراءات المهمة.",
+		"noAutoZoomSlots": "لا تتوفر خانات تكبير تلقائي",
+		"noAutoZoomSlotsDescription": "نقاط التوقف المكتشفة تتداخل مع مناطق التكبير الحالية.",
+		"cannotPlaceTrim": "لا يمكن وضع القص هنا",
+		"trimExistsAtLocation": "يوجد قص بالفعل في هذا الموقع أو لا توجد مساحة كافية متاحة.",
+		"cannotPlaceSpeed": "لا يمكن وضع السرعة هنا",
+		"speedExistsAtLocation": "توجد منطقة سرعة بالفعل في هذا الموقع أو لا توجد مساحة كافية متاحة."
+	},
+	"success": {
+		"addedZoomSuggestions": "تمت إضافة {{count}} اقتراح تكبير بناءً على المؤشر",
+		"addedZoomSuggestionsPlural": "تمت إضافة {{count}} اقتراحات تكبير بناءً على المؤشر"
+	},
+	"feedback": {
+		"copied": "تم النسخ!",
+		"pasted": "تم اللصق!"
+	}
+}

src/i18n/locales/en/editor.json

@@ -36,6 +36,8 @@
 		"systemAudioUnavailable": "System audio not available. Recording without system audio.",
 		"microphoneDenied": "Microphone access denied. Recording will continue without audio.",
 		"cameraDenied": "Camera access denied. Recording will continue without webcam.",
+		"cameraDisconnected": "Webcam disconnected.",
+		"cameraNotFound": "Camera not found.",
 		"permissionDenied": "Recording permission denied. Please allow screen recording."
 	}
 }

src/i18n/locales/en/launch.json

@@ -33,5 +33,11 @@
 	"recording": {
 		"selectSource": "Please select a source to record"
 	},
-	"language": "Language"
+	"language": "Language",
+	"systemLanguagePrompt": {
+		"title": "Use your system language?",
+		"description": "We detected {{language}} as your system language. Do you want to switch OpenScreen to {{language}}?",
+		"switch": "Switch to {{language}}",
+		"keepDefault": "Keep current language"
+	}
 }

src/i18n/locales/en/settings.json

@@ -8,6 +8,13 @@
 			"manual": "Manual",
 			"auto": "Auto",
 			"autoDescription": "Camera follows the recorded cursor position"
+		},
+		"speed": {
+			"title": "Zoom Speed",
+			"instant": "Instant",
+			"fast": "Fast",
+			"smooth": "Smooth",
+			"lazy": "Lazy"
 		}
 	},
 	"speed": {
@@ -26,6 +33,7 @@
 		"selectPreset": "Select preset",
 		"pictureInPicture": "Picture in Picture",
 		"verticalStack": "Vertical Stack",
+		"dualFrame": "Dual Frame",
 		"webcamShape": "Camera Shape",
 		"webcamSize": "Webcam Size"
 	},
@@ -118,8 +126,15 @@
 		"arrowDirection": "Arrow Direction",
 		"strokeWidth": "Stroke Width: {{width}}px",
 		"arrowColor": "Arrow Color",
+		"blurType": "Blur Type",
+		"blurTypeBlur": "Blur",
+		"blurTypeMosaic": "Mosaic Blur",
+		"blurColor": "Blur Color",
+		"blurColorWhite": "White",
+		"blurColorBlack": "Black",
 		"blurShape": "Blur Shape",
 		"blurIntensity": "Blur Intensity",
+		"mosaicBlockSize": "Mosaic Block Size",
 		"blurShapeRectangle": "Rectangle",
 		"blurShapeOval": "Oval",
 		"blurShapeFreehand": "Freehand",

src/i18n/locales/en/timeline.json

@@ -49,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/editor.json

@@ -30,6 +30,8 @@
 		"systemAudioUnavailable": "Audio del sistema no disponible. Grabando sin audio del sistema.",
 		"microphoneDenied": "Acceso al micrófono denegado. La grabación continuará sin audio.",
 		"cameraDenied": "Acceso a la cámara denegado. La grabación continuará sin cámara web.",
+		"cameraDisconnected": "Cámara web desconectada.",
+		"cameraNotFound": "Cámara no encontrada.",
 		"permissionDenied": "Permiso de grabación denegado. Por favor permite la grabación de pantalla."
 	}
 }

src/i18n/locales/es/launch.json

@@ -33,5 +33,11 @@
 	"recording": {
 		"selectSource": "Por favor selecciona una fuente para grabar"
 	},
-	"language": "Idioma"
+	"language": "Idioma",
+	"systemLanguagePrompt": {
+		"title": "¿Usar el idioma del sistema?",
+		"description": "Detectamos {{language}} como idioma de tu sistema. ¿Quieres cambiar OpenScreen a {{language}}?",
+		"switch": "Cambiar a {{language}}",
+		"keepDefault": "Mantener idioma actual"
+	}
 }

src/i18n/locales/es/settings.json

@@ -8,6 +8,13 @@
 			"manual": "Manual",
 			"auto": "Auto",
 			"autoDescription": "La cámara sigue la posición del cursor grabado"
+		},
+		"speed": {
+			"title": "Velocidad de zoom",
+			"instant": "Instantáneo",
+			"fast": "Rápido",
+			"smooth": "Suave",
+			"lazy": "Lento"
 		}
 	},
 	"speed": {
@@ -26,6 +33,7 @@
 		"selectPreset": "Seleccionar predefinido",
 		"pictureInPicture": "Imagen en imagen",
 		"verticalStack": "Apilado vertical",
+		"dualFrame": "Marco dual",
 		"webcamShape": "Forma de cámara",
 		"webcamSize": "Tamaño de cámara"
 	},
@@ -118,8 +126,15 @@
 		"arrowDirection": "Dirección de la flecha",
 		"strokeWidth": "Grosor del trazo: {{width}}px",
 		"arrowColor": "Color de la flecha",
+		"blurType": "Tipo de desenfoque",
+		"blurTypeBlur": "Desenfoque",
+		"blurTypeMosaic": "Desenfoque mosaico",
+		"blurColor": "Color del desenfoque",
+		"blurColorWhite": "Blanco",
+		"blurColorBlack": "Negro",
 		"blurShape": "Forma del desenfoque",
 		"blurIntensity": "Intensidad del desenfoque",
+		"mosaicBlockSize": "Tamano del bloque mosaico",
 		"blurShapeRectangle": "Rectángulo",
 		"blurShapeOval": "Óvalo",
 		"blurShapeFreehand": "Mano alzada",

src/i18n/locales/es/timeline.json

@@ -49,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/dialogs.json

@@ -27,10 +27,11 @@
 		"triggerLabel": "Comment fonctionne la coupe",
 		"title": "Comment fonctionne la coupe",
 		"description": "Comprendre comment supprimer les parties indésirables de votre vidéo.",
-		"explanation": "L'outil Coupe fonctionne en définissant les segments que vous souhaitez",
-		"explanationRemove": "supprimer",
-		"explanationCovered": "couvert",
-		"explanationEnd": "par un segment de coupe rouge sera coupé lors de l'export.",
+		"explanationBefore": "L'outil Coupe fonctionne en définissant les segments que vous souhaitez",
+		"remove": "supprimer",
+		"explanationMiddle": " — tout élément",
+		"covered": "couvert",
+		"explanationAfter": "par un segment de coupe rouge sera coupé lors de l'export.",
 		"visualExample": "Exemple visuel",
 		"removed": "SUPPRIMÉ",
 		"kept": "Conservé",
@@ -39,7 +40,8 @@
 		"part3": "Partie 3",
 		"finalVideo": "Vidéo finale",
 		"step1Title": "1. Ajouter une coupe",
-		"step1Description": "Appuyez sur T ou cliquez sur l'icône ciseaux pour marquer une section à supprimer.",
+		"step1DescriptionBefore": "Appuyez sur ",
+		"step1DescriptionAfter": " ou cliquez sur l'icône ciseaux pour marquer une section à supprimer.",
 		"step2Title": "2. Ajuster",
 		"step2Description": "Faites glisser les bords de la région rouge pour couvrir exactement ce que vous souhaitez couper."
 	},

src/i18n/locales/fr/settings.json

@@ -115,8 +115,15 @@
 		"arrowDirection": "Direction de la flèche",
 		"strokeWidth": "Épaisseur du trait : {{width}}px",
 		"arrowColor": "Couleur de la flèche",
+		"blurType": "Type de flou",
+		"blurTypeBlur": "Flou",
+		"blurTypeMosaic": "Flou mosaique",
+		"blurColor": "Couleur du flou",
+		"blurColorWhite": "Blanc",
+		"blurColorBlack": "Noir",
 		"blurShape": "Forme du flou",
 		"blurIntensity": "Intensité du flou",
+		"mosaicBlockSize": "Taille des blocs de mosaique",
 		"blurShapeRectangle": "Rectangle",
 		"blurShapeOval": "Ovale",
 		"blurShapeFreehand": "Main levée",

src/i18n/locales/fr/timeline.json

@@ -31,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/common.json

@@ -0,0 +1,30 @@
+{
+	"actions": {
+		"cancel": "キャンセル",
+		"save": "保存",
+		"delete": "削除",
+		"close": "閉じる",
+		"share": "共有",
+		"done": "完了",
+		"open": "開く",
+		"upload": "読み込む",
+		"export": "エクスポート",
+		"showInFolder": "フォルダに表示",
+		"file": "ファイル",
+		"edit": "編集",
+		"view": "表示",
+		"window": "ウィンドウ",
+		"quit": "終了",
+		"stopRecording": "録画を停止"
+	},
+	"playback": {
+		"play": "再生",
+		"pause": "一時停止",
+		"fullscreen": "全画面表示",
+		"exitFullscreen": "全画面表示を終了"
+	},
+	"locale": {
+		"name": "日本語",
+		"short": "JA"
+	}
+}

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

@@ -0,0 +1,71 @@
+{
+	"export": {
+		"complete": "エクスポート完了",
+		"yourFormatReady": "{{format}}の準備ができました",
+		"showInFolder": "フォルダで表示",
+		"finalizingVideo": "動画のエクスポートを仕上げています...",
+		"compilingGifProgress": "GIFを生成中... {{progress}}%",
+		"compilingGifWait": "GIFを生成中... しばらくお待ちください",
+		"takeMoment": "少々お待ちください...",
+		"failed": "エクスポートに失敗しました",
+		"tryAgain": "もう一度お試しください",
+		"finalizingVideoTitle": "動画の仕上げ",
+		"compilingGif": "GIFを生成中",
+		"exportingFormat": "{{format}}をエクスポート中",
+		"compiling": "生成中",
+		"renderingFrames": "フレームをレンダリング中",
+		"processing": "処理中...",
+		"finalizing": "最終処理中...",
+		"compilingStatus": "生成中...",
+		"status": "ステータス",
+		"format": "フォーマット",
+		"frames": "フレーム",
+		"cancelExport": "エクスポートをキャンセル",
+		"savedSuccessfully": "{{format}}を正常に保存しました！"
+	},
+	"tutorial": {
+		"triggerLabel": "トリミングの仕組み",
+		"title": "トリミングの仕組み",
+		"description": "動画の不要な部分を削除する方法について解説します。",
+		"explanationBefore": "トリムツールは、動画から",
+		"remove": "「削除したい部分」",
+		"explanationMiddle": "を指定することで機能します。エクスポート時には、赤い枠で",
+		"covered": "囲まれた部分",
+		"explanationAfter": "がすべてカットされます。",
+		"visualExample": "視覚的な例",
+		"removed": "削除",
+		"kept": "保持",
+		"part1": "パート 1",
+		"part2": "パート 2",
+		"part3": "パート 3",
+		"finalVideo": "完成動画",
+		"step1Title": "1. 削除範囲を追加",
+		"step1DescriptionBefore": "キーボードの",
+		"step1DescriptionAfter": "、またはハサミのアイコンをクリックして、削除したい範囲を指定します。",
+
+		"step2Title": "2. 範囲を調整",
+		"step2Description": "赤い領域の両端をドラッグして、削除したい範囲を正確に調整します。"
+	},
+	"unsavedChanges": {
+		"title": "未保存の変更",
+		"message": "未保存の変更があります。",
+		"detail": "閉じる前にプロジェクトを保存しますか？",
+		"saveAndClose": "保存して閉じる",
+		"discardAndClose": "破棄して閉じる",
+		"loadProject": "プロジェクトを読み込む…",
+		"saveProject": "プロジェクトを保存…",
+		"saveProjectAs": "プロジェクトを名前を付けて保存…"
+	},
+	"fileDialogs": {
+		"saveGif": "エクスポートしたGIFを保存",
+		"saveVideo": "エクスポートした動画を保存",
+		"selectVideo": "動画ファイルを選択",
+		"saveProject": "OpenScreen プロジェクトを保存",
+		"openProject": "OpenScreen プロジェクトを開く",
+		"gifImage": "GIF 画像",
+		"mp4Video": "MP4 動画",
+		"videoFiles": "動画ファイル",
+		"openscreenProject": "OpenScreen プロジェクト",
+		"allFiles": "すべてのファイル"
+	}
+}

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

@@ -0,0 +1,45 @@
+{
+	"newRecording": {
+		"title": "レコーダーに戻る",
+		"description": "現在の作業内容が保存されました。",
+		"cancel": "キャンセル",
+		"confirm": "確認"
+	},
+	"loadingVideo": "動画を読み込み中...",
+	"errors": {
+		"noVideoLoaded": "動画が読み込まれていません",
+		"videoNotReady": "動画の準備ができていません",
+		"unableToDetermineSourcePath": "元動画のパスを特定できません",
+		"failedToSaveGif": "GIFの保存に失敗しました",
+		"gifExportFailed": "GIFのエクスポートに失敗しました",
+		"failedToSaveVideo": "動画の保存に失敗しました",
+		"exportFailed": "エクスポートに失敗しました",
+		"exportFailedWithError": "エクスポートに失敗しました: {{error}}",
+		"failedToSaveExport": "エクスポートの保存に失敗しました",
+		"failedToSaveExportedVideo": "エクスポートした動画の保存に失敗しました",
+		"failedToRevealInFolder": "フォルダの表示に失敗しました: {{error}}",
+		"exportBackgroundLoadFailed": "エクスポートに失敗しました: 背景画像を読み込めませんでした ({{url}})"
+	},
+	"export": {
+		"canceled": "エクスポートがキャンセルされました",
+		"exportedSuccessfully": "{{format}}を正常にエクスポートしました"
+	},
+	"project": {
+		"saveCanceled": "プロジェクトの保存がキャンセルされました",
+		"failedToSave": "プロジェクトの保存に失敗しました",
+		"savedTo": "プロジェクトを保存しました: {{path}}",
+		"failedToLoad": "プロジェクトの読み込みに失敗しました",
+		"invalidFormat": "無効なプロジェクトファイル形式です",
+		"loadedFrom": "プロジェクトを読み込みました: {{path}}"
+	},
+	"recording": {
+		"failedCameraAccess": "カメラのアクセス要求に失敗しました。",
+		"cameraBlocked": "カメラのアクセスがブロックされています。システム設定で有効にして、ウェブカメラを使用してください。",
+		"systemAudioUnavailable": "システム音声を利用できません。システム音声なしで録画します。",
+		"microphoneDenied": "マイクへのアクセスが拒否されました。音声なしで録画を続行します。",
+		"cameraDenied": "カメラのアクセスが拒否されました。ウェブカメラなしで録画を続行します。",
+		"permissionDenied": "録画の権限が拒否されました。画面録画を許可してください。",
+		"cameraDisconnected": "ウェブカメラが切断されました。",
+		"cameraNotFound": "カメラが見つかりません。"
+	}
+}