add winget-releaser workflow

Auto-publishes new releases to winget via vedantmgoyal9/winget-releaser.
On every "released" event (not pre-release), the action opens a PR against
microsoft/winget-pkgs bumping SiddharthVaddem.OpenScreen.

Requires:
- WINGET_ACC_TOKEN secret: classic PAT with public_repo scope
  (fine-grained PATs are NOT supported by the action).
- A fork of microsoft/winget-pkgs under siddharthvaddem (or pass fork-user
  if forked elsewhere).

Closes #299

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
@@ -94,6 +245,9 @@ jobs:
         uses: actions/upload-artifact@v4
         with:
           name: linux-installer
-          path: release/**/*.AppImage
+          path: |
+            release/**/*.AppImage
+            release/**/*.zsync
+            release/**/*.deb
+            release/**/*.pacman
           retention-days: 30
-

.github/workflows/ci.yml

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

.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,8 +27,19 @@ dist-ssr
 *.sw?
 release/**
 *.kiro/
+.claude/
 # npx electron-builder --mac --win
 
 # Playwright
 test-results
-playwright-report/
+playwright-report/
+
+# Vitest browser mode screenshots
+__screenshots__/
+
+# shell files
+/shell.sh
+# Nix
+result
+result-*
+.direnv/

README.md

@@ -5,9 +5,16 @@
   <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://dcbadge.limes.pink/api/server/https://discord.gg/yAQQhRaEeg?style=flat" alt="Join Discord" />
+  </a>
 </p>
 
 # <p align="center">OpenScreen</p>
@@ -21,21 +28,20 @@ Screen Studio is an awesome product and this is definitely not a 1:1 clone. Open
 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 !)
 
 <p align="center">
-	<img src="public/preview3.png" alt="OpenScreen App Preview 3" style="height: 320px; margin-right: 12px;" />
-	<img src="public/preview4.png" alt="OpenScreen App Preview 4" style="height: 320px; margin-right: 12px;" />
+	<img src="public/preview3.png" alt="OpenScreen App Preview 3" style="height: 0.2467; margin-right: 12px;" />
+	<img src="public/preview4.png" alt="OpenScreen App Preview 4" style="height: 0.1678; margin-right: 12px;" />
 </p>
 
 ## Core Features
-- Record your whole screen or specific windows.
-- Add Automatic zooms or manual zooms (customizable depth levels).
-- Record microphone audio and system audio capture.
-- Customize the duration and position of zooms however you please.
+- Record specific windows or your whole screen.
+- Add automatic or manual zooms (adjustable depth levels) and customize their durarion and position.
+- 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 speed at different segments.
+- Customize the speed of different segments.
 - Export in different aspect ratios and resolutions.
 
 ## Installation
@@ -44,7 +50,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
@@ -74,9 +93,9 @@ You may need to grant screen recording permissions depending on your desktop env
 
 System audio capture relies on Electron's [desktopCapturer](https://www.electronjs.org/docs/latest/api/desktop-capturer) and has some platform-specific quirks:
 
-- **macOS**: Requires macOS 13+. On macOS 14.2+ you'll be prompted to grant audio capture permission. macOS 12 and below does not support system audio (mic still work).
+- **macOS**: Requires macOS 13+. On macOS 14.2+ you'll be prompted to grant audio capture permission. macOS 12 and below does not support system audio (mic still works).
 - **Windows**: Works out of the box.
-- **Linux**: Needs PipeWire (default on Ubuntu 22.04+, Fedora 34+). Older PulseAudio-only setups may not support system audio (mic should still works).
+- **Linux**: Needs PipeWire (default on Ubuntu 22.04+, Fedora 34+). Older PulseAudio-only setups may not support system audio (mic should still work).
 
 ## Built with
 - Electron
@@ -90,10 +109,25 @@ 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)
+
 ## 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.
 
+## 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
 
 This project is licensed under the [MIT License](./LICENSE). By using this software, you agree that the authors are not liable for any issues, damages, or claims arising from its use.

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,15 +25,20 @@
     "!CONTRIBUTING.md",
     "!LICENSE"
   ],
+  // Asset layout contract: "wallpapers/" under resourcesPath must align with
+  // assetBaseDir in electron/preload.ts (packaged branch).
   "extraResources": [
     {
       "from": "public/wallpapers",
-      "to": "assets/wallpapers"
+      "to": "wallpapers"
     }
   ],
 
   "mac": {
-    "hardenedRuntime": false,
+    "notarize": false,
+    "hardenedRuntime": true,
+    "entitlements": "macos.entitlements",
+    "entitlementsInherit": "macos.entitlements",
     "target": [
       {
         "target": "dmg",
@@ -37,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

@@ -26,6 +26,8 @@ interface Window {
 	electronAPI: {
 		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
 		switchToEditor: () => Promise<void>;
+		switchToHud: () => Promise<void>;
+		startNewRecording: () => Promise<{ success: boolean; error?: string }>;
 		openSourceSelector: () => Promise<void>;
 		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
 		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;
@@ -35,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,
@@ -61,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: (
@@ -133,10 +157,22 @@ interface Window {
 		saveShortcuts: (shortcuts: unknown) => Promise<{ success: boolean; error?: string }>;
 		hudOverlayHide: () => void;
 		hudOverlayClose: () => 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,27 +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";
+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") {
+	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/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)
@@ -371,11 +510,23 @@ app.whenReady().then(async () => {
 	// Ensure recordings directory exists
 	await ensureRecordingsDir();
 
+	function switchToHudWrapper() {
+		if (mainWindow) {
+			isForceClosing = true;
+			mainWindow.close();
+			isForceClosing = false;
+			mainWindow = null;
+		}
+		showMainWindow();
+	}
+
 	registerIpcHandlers(
 		createEditorWindowWrapper,
 		createSourceSelectorWindowWrapper,
+		createCountdownOverlayWindowWrapper,
 		() => mainWindow,
 		() => sourceSelectorWindow,
+		() => countdownOverlayWindow,
 		(recording: boolean, sourceName: string) => {
 			selectedSourceName = sourceName;
 			if (!tray) createTray();
@@ -384,6 +535,7 @@ app.whenReady().then(async () => {
 				showMainWindow();
 			}
 		},
+		switchToHudWrapper,
 	);
 	createWindow();
 });

electron/preload.ts

@@ -1,23 +1,33 @@
 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");
-	},
 	getSources: async (opts: Electron.SourcesOptions) => {
 		return await ipcRenderer.invoke("get-sources", opts);
 	},
 	switchToEditor: () => {
 		return ipcRenderer.invoke("switch-to-editor");
 	},
+	switchToHud: () => {
+		return ipcRenderer.invoke("switch-to-hud");
+	},
+	startNewRecording: () => {
+		return ipcRenderer.invoke("start-new-recording");
+	},
 	openSourceSelector: () => {
 		return ipcRenderer.invoke("open-source-selector");
 	},
@@ -30,6 +40,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);
@@ -41,12 +54,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);
@@ -55,8 +71,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");
@@ -118,12 +137,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 {
@@ -136,4 +177,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,12 +24,17 @@ ipcMain.on("hud-overlay-hide", () => {
 	}
 });
 
+/**
+ * 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;
 
-	const windowWidth = 500;
-	const windowHeight = 155;
+	const windowWidth = 600;
+	const windowHeight = 160;
 
 	const x = Math.floor(workArea.x + (workArea.width - windowWidth) / 2);
 	const y = Math.floor(workArea.y + workArea.height - windowHeight - 5);
@@ -30,10 +42,10 @@ export function createHudOverlayWindow(): BrowserWindow {
 	const win = new BrowserWindow({
 		width: windowWidth,
 		height: windowHeight,
-		minWidth: 500,
-		maxWidth: 500,
-		minHeight: 155,
-		maxHeight: 155,
+		minWidth: 600,
+		maxWidth: 600,
+		minHeight: 160,
+		maxHeight: 160,
 		x: x,
 		y: y,
 		frame: false,
@@ -45,12 +57,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,
 		},
 	});
 
+	// 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 +93,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 +118,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 +144,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 +165,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 +187,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-i8QMhvd/ydFPww7qTG3Bz2LOAIFyp65n1NXakr3MTk8=";
+
+  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,13 +1,17 @@
 {
 	"name": "openscreen",
 	"private": true,
-	"version": "1.3.0",
+	"version": "1.4.0",
 	"type": "module",
 	"packageManager": "npm@10.9.4",
 	"engines": {
 		"node": "22.22.1",
 		"npm": "10.9.4"
 	},
+	"author": {
+		"name": "Sid",
+		"email": "svaddem@asu.edu"
+	},
 	"scripts": {
 		"dev": "vite",
 		"build": "tsc && vite build && electron-builder",
@@ -17,13 +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",
+		"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",
@@ -34,63 +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",
-		"@playwright/test": "^1.58.2",
-		"@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",
-		"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",
+		"@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": "^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",
-		"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,17 +1,15 @@
 #!/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
  */
-
 import fs from "node:fs";
 import path from "node:path";
 
 const LOCALES_DIR = path.resolve("src/i18n/locales");
 const BASE_LOCALE = "en";
-const COMPARE_LOCALES = ["zh-CN", "es"];
 
 function getKeys(obj, prefix = "") {
 	const keys = [];
@@ -34,12 +32,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 +82,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: 12rem;
+	padding: 0.375rem;
+	border-radius: 0.75rem;
+	border: 1px solid rgba(255, 255, 255, 0.14);
+	background: linear-gradient(160deg, rgba(28, 29, 42, 0.98), rgba(18, 19, 28, 0.98));
+	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
+	backdrop-filter: blur(14px);
+	pointer-events: auto;
+	box-sizing: border-box;
+}
+
+.languageMenuItem {
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.5rem 0.625rem;
+	border-radius: 0.5rem;
+	font-size: 11px;
+	color: rgba(255, 255, 255, 0.88);
+	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.1);
+	color: #ffffff;
+	outline: none;
+}
+
+.languageMenuItemActive {
+	background: rgba(255, 255, 255, 0.12);
+	color: #ffffff;
+}

src/components/launch/LaunchWindow.tsx

@@ -1,10 +1,12 @@
-import { ChevronDown, Languages } from "lucide-react";
-import { useEffect, useState } from "react";
-import { BsRecordCircle } from "react-icons/bs";
+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";
 import { FiMinus, FiX } from "react-icons/fi";
 import {
+	MdCancel,
 	MdMic,
 	MdMicOff,
 	MdMonitor,
@@ -17,15 +19,15 @@ 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";
 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";
 
@@ -40,8 +42,11 @@ const ICON_CONFIG = {
 	micOff: { icon: MdMicOff, size: ICON_SIZE },
 	webcamOn: { icon: MdVideocam, size: ICON_SIZE },
 	webcamOff: { icon: MdVideocamOff, size: ICON_SIZE },
+	pause: { icon: BsPauseCircle, size: ICON_SIZE },
+	resume: { icon: BsPlayCircle, size: ICON_SIZE },
 	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
 	restart: { icon: MdRestartAlt, size: ICON_SIZE },
+	cancel: { icon: MdCancel, size: ICON_SIZE },
 	record: { icon: BsRecordCircle, size: ICON_SIZE },
 	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
 	folder: { icon: FaFolderOpen, size: ICON_SIZE },
@@ -62,22 +67,35 @@ const hudGroupClasses =
 const hudIconBtnClasses =
 	"flex items-center justify-center p-2 rounded-full transition-all duration-150 cursor-pointer text-white hover:bg-white/10 hover:scale-[1.08] active:scale-95";
 
+const hudAuxIconBtnClasses =
+	"flex items-center justify-center p-1.5 rounded-full transition-colors duration-150 text-white/55 hover:bg-white/10 disabled:opacity-30 disabled:cursor-not-allowed";
+
 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]";
 
+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 {
 		recording,
+		paused,
+		elapsedSeconds,
 		toggleRecording,
+		togglePaused,
 		restartRecording,
+		cancelRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
@@ -86,42 +104,74 @@ export function LaunchWindow() {
 		setSystemAudioEnabled,
 		webcamEnabled,
 		setWebcamEnabled,
+		webcamDeviceId,
+		setWebcamDeviceId,
 	} = useScreenRecorder();
-	const [recordingStart, setRecordingStart] = useState<number | null>(null);
-	const [elapsed, setElapsed] = useState(0);
 
 	const showMicControls = microphoneEnabled && !recording;
-	const { devices, selectedDeviceId, setSelectedDeviceId } =
-		useMicrophoneDevices(microphoneEnabled);
+	const showWebcamControls = webcamEnabled && !recording;
+
+	const [isMicHovered, setIsMicHovered] = useState(false);
+	const [isMicFocused, setIsMicFocused] = useState(false);
+	const micExpanded = isMicHovered || isMicFocused;
+
+	const [isWebcamHovered, setIsWebcamHovered] = useState(false);
+	const [isWebcamFocused, setIsWebcamFocused] = useState(false);
+	const webcamExpanded = isWebcamHovered || isWebcamFocused;
+	const [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,
+		selectedDeviceId: selectedMicId,
+		setSelectedDeviceId: setSelectedMicId,
+	} = useMicrophoneDevices(microphoneEnabled);
+	const {
+		devices: cameraDevices,
+		selectedDeviceId: selectedCameraId,
+		setSelectedDeviceId: setSelectedCameraId,
+		isLoading: isCameraDevicesLoading,
+		error: cameraDevicesError,
+	} = useCameraDevices(webcamEnabled);
+
+	const selectedMicLabel =
+		micDevices.find((d) => d.deviceId === (microphoneDeviceId || selectedMicId))?.label ||
+		t("audio.defaultMicrophone");
+	const selectedCameraLabel = isCameraDevicesLoading
+		? t("webcam.searching")
+		: cameraDevicesError
+			? t("webcam.unavailable")
+			: cameraDevices.length === 0
+				? t("webcam.noneFound")
+				: cameraDevices.find((d) => d.deviceId === (webcamDeviceId || selectedCameraId))?.label ||
+					t("webcam.defaultCamera");
+
 	const { level } = useAudioLevelMeter({
 		enabled: showMicControls,
 		deviceId: microphoneDeviceId,
 	});
 
 	useEffect(() => {
-		if (selectedDeviceId && selectedDeviceId !== "default") {
-			setMicrophoneDeviceId(selectedDeviceId);
+		if (selectedMicId && selectedMicId !== "default") {
+			setMicrophoneDeviceId(selectedMicId);
 		}
-	}, [selectedDeviceId, setMicrophoneDeviceId]);
+	}, [selectedMicId, setMicrophoneDeviceId]);
 
 	useEffect(() => {
-		let timer: NodeJS.Timeout | null = null;
-		if (recording) {
-			if (!recordingStart) setRecordingStart(Date.now());
-			timer = setInterval(() => {
-				if (recordingStart) {
-					setElapsed(Math.floor((Date.now() - recordingStart) / 1000));
-				}
-			}, 1000);
-		} else {
-			setRecordingStart(null);
-			setElapsed(0);
-			if (timer) clearInterval(timer);
+		if (selectedCameraId) {
+			setWebcamDeviceId(selectedCameraId);
 		}
-		return () => {
-			if (timer) clearInterval(timer);
-		};
-	}, [recording, recordingStart]);
+	}, [selectedCameraId, setWebcamDeviceId]);
 
 	useEffect(() => {
 		if (!import.meta.env.DEV) {
@@ -133,6 +183,71 @@ 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]);
+
 	const [selectedSource, setSelectedSource] = useState("Screen");
 	const [hasSelectedSource, setHasSelectedSource] = useState(false);
 
@@ -199,170 +314,365 @@ export function LaunchWindow() {
 	};
 
 	return (
-		<div className="w-full h-full flex items-end justify-center bg-transparent relative">
-			{/* Language switcher — top-left, beside traffic lights */}
-			<div
-				className={`absolute 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}`}
+		>
+			{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>
+			)}
 
-			<div className={`flex flex-col items-center gap-2 mx-auto ${styles.electronDrag}`}>
-				{/* Mic controls panel */}
-				{showMicControls && (
-					<div
-						className={`flex items-center gap-2 px-4 py-2 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)] rounded-2xl shadow-mic-panel animate-mic-panel-in ${styles.electronNoDrag}`}
-					>
-						<div className="relative flex-1" style={{ maxWidth: "70%" }}>
-							<select
-								value={microphoneDeviceId || selectedDeviceId}
-								onChange={(e) => {
-									setSelectedDeviceId(e.target.value);
-									setMicrophoneDeviceId(e.target.value);
-								}}
-								className="w-full appearance-none bg-white/10 text-white text-xs rounded-full pl-3 pr-7 py-2 border border-white/20 outline-none truncate"
-							>
-								{devices.map((device) => (
-									<option key={device.deviceId} value={device.deviceId}>
-										{device.label}
-									</option>
-								))}
-							</select>
-							<ChevronDown
-								size={14}
-								className="absolute right-2 top-1/2 -translate-y-1/2 text-white/60 pointer-events-none"
+			{/* Device selectors — fixed above HUD bar, viewport-relative, never clipped */}
+			{(showMicControls || showWebcamControls) && (
+				<div
+					className={`fixed bottom-[60px] left-1/2 -translate-x-1/2 flex items-center gap-2 animate-mic-panel-in ${styles.electronNoDrag}`}
+				>
+					{/* Mic selector */}
+					{showMicControls && (
+						<div
+							className={`flex items-center gap-2 px-3 py-1.5 h-[36px] bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[24px] border border-white/10 rounded-xl shadow-2xl transition-all duration-300 overflow-hidden ${!micExpanded ? "opacity-60 grayscale-[0.5]" : "opacity-100"}`}
+							onMouseEnter={() => setIsMicHovered(true)}
+							onMouseLeave={() => setIsMicHovered(false)}
+							onFocus={() => setIsMicFocused(true)}
+							onBlur={() => setIsMicFocused(false)}
+							style={{ width: micExpanded ? "240px" : "140px", transition: "width 300ms ease" }}
+						>
+							<div className="relative flex-1 min-w-0">
+								{!micExpanded && (
+									<div className="text-white/60 text-[10px] font-medium truncate">
+										{selectedMicLabel}
+									</div>
+								)}
+								<select
+									value={microphoneDeviceId || selectedMicId}
+									onChange={(e) => {
+										setSelectedMicId(e.target.value);
+										setMicrophoneDeviceId(e.target.value);
+									}}
+									className={`w-full appearance-none bg-white/5 text-white text-[11px] rounded-lg pl-2 pr-6 py-1 border border-white/10 outline-none hover:bg-white/10 transition-colors cursor-pointer ${!micExpanded ? "sr-only" : ""}`}
+								>
+									{micDevices.map((device) => (
+										<option key={device.deviceId} value={device.deviceId} className="bg-[#1c1c24]">
+											{device.label}
+										</option>
+									))}
+								</select>
+								{micExpanded && (
+									<ChevronDown
+										size={12}
+										className="absolute right-1.5 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none"
+									/>
+								)}
+							</div>
+							<AudioLevelMeter
+								level={level}
+								className={`${micExpanded ? "w-16" : "w-8"} h-2 transition-all duration-300`}
 							/>
 						</div>
-						<AudioLevelMeter level={level} className="w-24 h-4" />
-					</div>
-				)}
+					)}
 
-				{/* Main pill bar */}
-				<div className="flex items-center gap-1.5 px-2 py-1.5 isolate rounded-full shadow-hud-bar bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[16px] backdrop-saturate-[140%] border border-[rgba(80,80,120,0.25)]">
-					{/* Drag handle */}
-					<div className={`flex items-center px-1 ${styles.electronDrag}`}>
-						{getIcon("drag", "text-white/30")}
-					</div>
+					{/* Webcam selector */}
+					{showWebcamControls && (
+						<div
+							className={`flex items-center gap-2 px-3 py-1.5 h-[36px] bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[24px] border border-white/10 rounded-xl shadow-2xl transition-all duration-300 overflow-hidden ${!webcamExpanded ? "opacity-60 grayscale-[0.5]" : "opacity-100"}`}
+							onMouseEnter={() => setIsWebcamHovered(true)}
+							onMouseLeave={() => setIsWebcamHovered(false)}
+							onFocus={() => setIsWebcamFocused(true)}
+							onBlur={() => setIsWebcamFocused(false)}
+							style={{ width: webcamExpanded ? "240px" : "140px", transition: "width 300ms ease" }}
+						>
+							<div className="relative flex-1 min-w-0">
+								{!webcamExpanded && (
+									<div className="text-white/60 text-[10px] font-medium truncate">
+										{selectedCameraLabel}
+									</div>
+								)}
+								{webcamExpanded &&
+									(isCameraDevicesLoading ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.searching")}
+										</span>
+									) : cameraDevicesError ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.unavailable")}
+										</span>
+									) : cameraDevices.length === 0 ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.noneFound")}
+										</span>
+									) : (
+										<>
+											<select
+												value={webcamDeviceId || selectedCameraId}
+												onChange={(e) => {
+													setSelectedCameraId(e.target.value);
+													setWebcamDeviceId(e.target.value);
+												}}
+												className="w-full appearance-none bg-white/5 text-white text-[11px] rounded-lg pl-2 pr-6 py-1 border border-white/10 outline-none hover:bg-white/10 transition-colors cursor-pointer"
+											>
+												{cameraDevices.map((device) => (
+													<option
+														key={device.deviceId}
+														value={device.deviceId}
+														className="bg-[#1c1c24]"
+													>
+														{device.label}
+													</option>
+												))}
+											</select>
+											<ChevronDown
+												size={12}
+												className="absolute right-1.5 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none"
+											/>
+										</>
+									))}
+								{(!webcamExpanded || cameraDevices.length === 0) && (
+									<select
+										value={webcamDeviceId || selectedCameraId}
+										onChange={(e) => {
+											setSelectedCameraId(e.target.value);
+											setWebcamDeviceId(e.target.value);
+										}}
+										className="sr-only"
+									>
+										{cameraDevices.map((device) => (
+											<option key={device.deviceId} value={device.deviceId}>
+												{device.label}
+											</option>
+										))}
+									</select>
+								)}
+							</div>
+						</div>
+					)}
+				</div>
+			)}
 
-					{/* Source selector */}
+			{/* HUD bar — fixed at bottom center, viewport-relative, never moves */}
+			<div
+				className={`fixed bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2 py-1.5 rounded-full shadow-hud-bar bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[16px] backdrop-saturate-[140%] border border-[rgba(80,80,120,0.25)]`}
+			>
+				{/* Drag handle */}
+				<div className={`flex items-center px-1 ${styles.electronDrag}`}>
+					{getIcon("drag", "text-white/30")}
+				</div>
+
+				{/* Source selector */}
+				<button
+					className={`${hudGroupClasses} p-2 ${styles.electronNoDrag}`}
+					onClick={openSourceSelector}
+					disabled={recording}
+					title={selectedSource}
+				>
+					{getIcon("monitor", "text-white/80")}
+					<span className="text-white/70 text-[11px] max-w-[72px] truncate">{selectedSource}</span>
+				</button>
+
+				{/* Audio controls group */}
+				<div className={`${hudGroupClasses} ${styles.electronNoDrag}`}>
 					<button
-						className={`${hudGroupClasses} p-2 ${styles.electronNoDrag}`}
-						onClick={openSourceSelector}
+						className={`${hudIconBtnClasses} ${systemAudioEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
 						disabled={recording}
-						title={selectedSource}
+						title={
+							systemAudioEnabled ? t("audio.disableSystemAudio") : t("audio.enableSystemAudio")
+						}
 					>
-						{getIcon("monitor", "text-white/80")}
-						<span className="text-white/70 text-[11px] max-w-[72px] truncate">
-							{selectedSource}
-						</span>
+						{systemAudioEnabled
+							? getIcon("volumeOn", "text-green-400")
+							: getIcon("volumeOff", "text-white/40")}
 					</button>
-
-					{/* Audio controls group */}
-					<div className={`${hudGroupClasses} ${styles.electronNoDrag}`}>
-						<button
-							className={`${hudIconBtnClasses} ${systemAudioEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
-							onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
-							disabled={recording}
-							title={
-								systemAudioEnabled ? t("audio.disableSystemAudio") : t("audio.enableSystemAudio")
-							}
-						>
-							{systemAudioEnabled
-								? getIcon("volumeOn", "text-green-400")
-								: getIcon("volumeOff", "text-white/40")}
-						</button>
-						<button
-							className={`${hudIconBtnClasses} ${microphoneEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
-							onClick={toggleMicrophone}
-							disabled={recording}
-							title={microphoneEnabled ? t("audio.disableMicrophone") : t("audio.enableMicrophone")}
-						>
-							{microphoneEnabled
-								? getIcon("micOn", "text-green-400")
-								: getIcon("micOff", "text-white/40")}
-						</button>
-						<button
-							className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
-							onClick={async () => {
-								await setWebcamEnabled(!webcamEnabled);
-							}}
-							title={webcamEnabled ? t("webcam.disableWebcam") : t("webcam.enableWebcam")}
-						>
-							{webcamEnabled
-								? getIcon("webcamOn", "text-green-400")
-								: getIcon("webcamOff", "text-white/40")}
-						</button>
-					</div>
-
-					{/* Record/Stop group */}
 					<button
-						className={`flex items-center gap-0.5 rounded-full p-2 transition-colors duration-150 ${styles.electronNoDrag} ${
-							recording ? "animate-record-pulse bg-red-500/10" : "bg-white/5 hover:bg-white/[0.08]"
-						}`}
-						onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
-						disabled={!hasSelectedSource && !recording}
-						style={{ flex: "0 0 auto" }}
+						className={`${hudIconBtnClasses} ${microphoneEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={toggleMicrophone}
+						disabled={recording}
+						title={microphoneEnabled ? t("audio.disableMicrophone") : t("audio.enableMicrophone")}
 					>
-						{recording ? (
-							<>
-								{getIcon("stop", "text-red-400")}
-								<span className="text-red-400 text-xs font-semibold tabular-nums">
-									{formatTimePadded(elapsed)}
-								</span>
-							</>
-						) : (
-							getIcon("record", hasSelectedSource ? "text-white/80" : "text-white/30")
-						)}
+						{microphoneEnabled
+							? getIcon("micOn", "text-green-400")
+							: getIcon("micOff", "text-white/40")}
 					</button>
+					<button
+						className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={async () => {
+							await setWebcamEnabled(!webcamEnabled);
+						}}
+						disabled={recording}
+						title={webcamEnabled ? t("webcam.disableWebcam") : t("webcam.enableWebcam")}
+					>
+						{webcamEnabled
+							? getIcon("webcamOn", "text-green-400")
+							: getIcon("webcamOff", "text-white/40")}
+					</button>
+				</div>
 
-					{/* Restart recording */}
-					{recording && (
-						<Tooltip content={t("tooltips.restartRecording")}>
-							<button
-								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-								onClick={restartRecording}
+				{/* Record/Stop group */}
+				<button
+					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"
+								: "bg-red-500/12 hover:bg-red-500/16"
+							: "bg-white/5 hover:bg-white/[0.08]"
+					}`}
+					onClick={toggleRecording}
+					disabled={!hasSelectedSource && !recording}
+					style={{ flex: "0 0 auto" }}
+				>
+					<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"} inline-block w-[34px] text-left text-xs font-semibold tabular-nums`}
 							>
+								{formatTimePadded(elapsedSeconds)}
+							</span>
+						)}
+					</div>
+				</button>
+
+				{recording && (
+					<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
+						<Tooltip
+							content={paused ? t("tooltips.resumeRecording") : t("tooltips.pauseRecording")}
+						>
+							<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>
+				)}
 
-					{/* Open video file */}
-					<Tooltip content={t("tooltips.openVideoFile")}>
-						<button
-							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-							onClick={openVideoFile}
-							disabled={recording}
-						>
-							{getIcon("videoFile", "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")}>
+						{/* Open project */}
+						<Tooltip content={t("tooltips.openProject")}>
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={openProjectFile}
+							>
+								{getIcon("folder", "text-white/60")}
+							</button>
+						</Tooltip>
+					</>
+				)}
+
+				{/* Right sidebar controls */}
+				<div className={`${hudSidebarClasses} ${styles.electronNoDrag}`}>
+					<div className={`${styles.languageMenuContainer} ${styles.electronNoDrag}`}>
 						<button
-							className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
-							onClick={openProjectFile}
-							disabled={recording}
+							ref={languageTriggerRef}
+							type="button"
+							aria-label={t("language")}
+							aria-expanded={isLanguageMenuOpen}
+							aria-haspopup="menu"
+							onClick={() => setIsLanguageMenuOpen((open) => !open)}
+							className={`h-8 w-8 rounded-lg border border-white/10 bg-white/5 text-white/85 shadow-none transition-colors hover:bg-white/10 ${styles.electronNoDrag}`}
 						>
-							{getIcon("folder", "text-white/60")}
+							<div className="flex w-full items-center justify-center">
+								<Languages size={13} className="text-white/75" />
+							</div>
 						</button>
-					</Tooltip>
+					</div>
+
+					{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}
 
 					{/* Window controls */}
-					<div className={`flex items-center gap-0.5 ${styles.electronNoDrag}`}>
+					<div className="flex items-center gap-0.5">
 						<button
 							className={windowBtnClasses}
 							title={t("tooltips.hideHUD")}

src/components/launch/SourceSelector.module.css

@@ -2,15 +2,21 @@
 	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);
+	border-radius: 30px;
+	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: 1.5px solid rgba(60, 60, 80, 0.3);
 }
 
 .sourceCard {
-	border-radius: 12px;
+	corner-shape: squircle;
+	border-radius: 20px;
 	background: linear-gradient(120deg, rgba(38, 38, 48, 0.98) 0%, rgba(24, 24, 32, 0.96) 100%);
 	border: 1px solid rgba(60, 60, 80, 0.22);
 	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
@@ -28,7 +34,7 @@
 }
 
 .selected {
-	border: 2px solid #34b27b;
+	border: 1.5px solid #34b27b;
 	background: linear-gradient(120deg, rgba(52, 178, 123, 0.08) 0%, rgba(38, 38, 48, 0.98) 100%);
 	box-shadow:
 		0 0 12px rgba(52, 178, 123, 0.15),
@@ -70,30 +76,27 @@
 }
 
 /* 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>
@@ -84,10 +84,10 @@ export function SourceSelector() {
 					<img
 						src={source.thumbnail || ""}
 						alt={source.name}
-						className="w-full aspect-video object-cover rounded-lg"
+						className="w-full aspect-video object-cover rounded-xl [corner-shape:squircle] "
 					/>
 					{isSelected && (
-						<div className="absolute -top-1.5 -right-1.5">
+						<div className="absolute -top-1 -right-1">
 							<div className={styles.checkBadge}>
 								<MdCheck size={12} className="text-white" />
 							</div>
@@ -111,16 +111,16 @@ export function SourceSelector() {
 					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="grid grid-cols-2 mb-3 bg-white/5 rounded-[14px] squircle ">
 						<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="data-[state=active]:bg-white/15 data-[state=active]:text-white text-zinc-400 rounded-[12px] squircle text-xs py-1.5 transition-all"
 						>
 							{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="data-[state=active]:bg-white/15 data-[state=active]:text-white text-zinc-400 rounded-[12px] squircle text-xs py-1.5 transition-all"
 						>
 							{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 grid-cols-2 gap-3 h-[280px] overflow-y-auto pt-1 pr-1.5 auto-rows-min ${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 grid-cols-2 gap-3 h-[280px] overflow-y-auto pt-1 pr-1.5 auto-rows-min ${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="p-3 justify-center flex gap-2">
 				<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="px-5 py-1 text-xs text-zinc-400 hover:text-white active:scale-95 transition-transform duration-150 hover:bg-white/5 rounded-full"
 				>
 					{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="px-5 py-1 text-xs bg-[#34B27B] text-white active:scale-95 transition-transform duration-150 hover:bg-[#34B27B]/80 disabled:opacity-30 disabled:bg-zinc-700 rounded-full"
 				>
 					{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,8 +1,40 @@
-import { useRef } 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 } from "./types";
+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;
+	const polygon = points.map((point) => `${point.x}% ${point.y}%`).join(", ");
+	return `polygon(${polygon})`;
+}
+
+function buildBlurFreehandPath(points: Array<{ x: number; y: number }>, closed = true) {
+	if (closed ? points.length < 3 : points.length < 2) return null;
+	const [firstPoint, ...rest] = points;
+	const path = `M ${firstPoint.x} ${firstPoint.y} ${rest.map((point) => `L ${point.x} ${point.y}`).join(" ")}`;
+	return closed ? `${path} Z` : path;
+}
 
 interface AnnotationOverlayProps {
 	annotation: AnnotationRegion;
@@ -11,9 +43,13 @@ interface AnnotationOverlayProps {
 	containerHeight: number;
 	onPositionChange: (id: string, position: { x: number; y: number }) => void;
 	onSizeChange: (id: string, size: { width: number; height: number }) => void;
+	onBlurDataChange?: (id: string, blurData: BlurData) => void;
+	onBlurDataCommit?: () => void;
 	onClick: (id: string) => void;
 	zIndex: number;
 	isSelectedBoost: boolean; // Boost z-index when selected for easy editing
+	previewSourceCanvas?: PreviewCanvasSource | null;
+	previewFrameVersion?: number;
 }
 
 export function AnnotationOverlay({
@@ -23,16 +59,130 @@ export function AnnotationOverlay({
 	containerHeight,
 	onPositionChange,
 	onSizeChange,
+	onBlurDataChange,
+	onBlurDataCommit,
 	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);
+	const isDrawingFreehandRef = useRef(false);
+	const freehandPointsRef = useRef<Array<{ x: number; y: number }>>([]);
+	const [isFreehandDrawing, setIsFreehandDrawing] = useState(false);
+	const [draftFreehandPoints, setDraftFreehandPoints] = useState<Array<{ x: number; y: number }>>(
+		[],
+	);
+	const [livePointerPoint, setLivePointerPoint] = useState<{ x: number; y: number } | null>(null);
+	const mosaicCanvasRef = useRef<HTMLCanvasElement | null>(null);
+	const blurType = annotation.type === "blur" ? (annotation.blurData?.type ?? "blur") : "blur";
+	const 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" || blurType !== "mosaic") {
+			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,
+		blurType,
+		containerHeight,
+		containerWidth,
+		height,
+		previewFrameVersion,
+		previewSourceCanvas,
+		width,
+		x,
+		y,
+	]);
 
 	const renderArrow = () => {
 		const direction = annotation.figureData?.arrowDirection || "right";
@@ -43,6 +193,95 @@ export function AnnotationOverlay({
 		return <ArrowComponent color={color} strokeWidth={strokeWidth} />;
 	};
 
+	const normalizePoint = (event: PointerEvent<HTMLDivElement>) => {
+		const rect = event.currentTarget.getBoundingClientRect();
+		const x = ((event.clientX - rect.left) / rect.width) * 100;
+		const y = ((event.clientY - rect.top) / rect.height) * 100;
+		return {
+			x: Math.max(0, Math.min(100, x)),
+			y: Math.max(0, Math.min(100, y)),
+		};
+	};
+
+	const appendFreehandPoint = (point: { x: number; y: number }) => {
+		const points = freehandPointsRef.current;
+		const lastPoint = points[points.length - 1];
+		if (!lastPoint) {
+			points.push(point);
+			return;
+		}
+		const dx = point.x - lastPoint.x;
+		const dy = point.y - lastPoint.y;
+		// Sample freehand points in annotation-space percent units to avoid overly dense paths.
+		if (Math.hypot(dx, dy) >= FREEHAND_POINT_THRESHOLD) {
+			points.push(point);
+		}
+	};
+
+	const handleFreehandPointerDown = (event: PointerEvent<HTMLDivElement>) => {
+		if (
+			!isSelected ||
+			annotation.type !== "blur" ||
+			annotation.blurData?.shape !== "freehand" ||
+			!onBlurDataChange
+		) {
+			return;
+		}
+		event.preventDefault();
+		event.stopPropagation();
+		event.currentTarget.setPointerCapture(event.pointerId);
+		isDrawingFreehandRef.current = true;
+		setIsFreehandDrawing(true);
+		const point = normalizePoint(event);
+		freehandPointsRef.current = [point];
+		setDraftFreehandPoints([point]);
+		setLivePointerPoint(point);
+	};
+
+	const handleFreehandPointerMove = (event: PointerEvent<HTMLDivElement>) => {
+		if (!isDrawingFreehandRef.current) return;
+		event.preventDefault();
+		event.stopPropagation();
+		const point = normalizePoint(event);
+		setLivePointerPoint(point);
+		appendFreehandPoint(point);
+		setDraftFreehandPoints([...freehandPointsRef.current]);
+	};
+
+	const finishFreehandPointer = (event: PointerEvent<HTMLDivElement>) => {
+		if (!isDrawingFreehandRef.current || !onBlurDataChange) return;
+		isDrawingFreehandRef.current = false;
+		setIsFreehandDrawing(false);
+		try {
+			event.currentTarget.releasePointerCapture(event.pointerId);
+		} catch {
+			// no-op if already released
+		}
+		const points = [...freehandPointsRef.current];
+		if (livePointerPoint) {
+			const last = points[points.length - 1];
+			if (!last || Math.hypot(last.x - livePointerPoint.x, last.y - livePointerPoint.y) > 0.001) {
+				points.push(livePointerPoint);
+			}
+		}
+		if (points.length >= 3) {
+			const closedPoints = [...points];
+			const first = closedPoints[0];
+			const last = closedPoints[closedPoints.length - 1];
+			if (Math.hypot(last.x - first.x, last.y - first.y) > 0.001) {
+				closedPoints.push({ ...first });
+			}
+			onBlurDataChange(annotation.id, {
+				...(annotation.blurData || { ...DEFAULT_BLUR_DATA, shape: "freehand" }),
+				shape: "freehand",
+				freehandPoints: closedPoints,
+			});
+			setDraftFreehandPoints(closedPoints);
+			onBlurDataCommit?.();
+		}
+		setLivePointerPoint(null);
+	};
+
 	const renderContent = () => {
 		switch (annotation.type) {
 			case "text":
@@ -113,6 +352,149 @@ export function AnnotationOverlay({
 					<div className="w-full h-full flex items-center justify-center p-2">{renderArrow()}</div>
 				);
 
+			case "blur": {
+				const shape = annotation.blurData?.shape ?? "rectangle";
+				const blurIntensity = Math.max(
+					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
+							? draftFreehandPoints
+							: (annotation.blurData?.freehandPoints ?? [])
+						: [];
+				const drawingPoints =
+					isFreehandDrawing && livePointerPoint
+						? (() => {
+								const last = activeFreehandPoints[activeFreehandPoints.length - 1];
+								if (!last) return [livePointerPoint];
+								const dx = livePointerPoint.x - last.x;
+								const dy = livePointerPoint.y - last.y;
+								return Math.hypot(dx, dy) > 0.01
+									? [...activeFreehandPoints, livePointerPoint]
+									: activeFreehandPoints;
+							})()
+						: activeFreehandPoints;
+				const clipPath =
+					shape === "freehand" ? buildBlurPolygonClipPath(activeFreehandPoints) : undefined;
+				const freehandPath =
+					shape === "freehand"
+						? buildBlurFreehandPath(
+								isFreehandDrawing ? drawingPoints : activeFreehandPoints,
+								!isFreehandDrawing,
+							)
+						: null;
+				const currentPointerPoint = isFreehandDrawing
+					? livePointerPoint || drawingPoints[drawingPoints.length - 1] || null
+					: null;
+				const shapeBorderRadius = shape === "oval" ? "50%" : shape === "rectangle" ? "8px" : "0";
+				const shouldShowFreehandBlurFill =
+					shape !== "freehand" || (!!clipPath && !isFreehandDrawing);
+				const shapeMaskStyle: CSSProperties = {
+					borderRadius: shapeBorderRadius,
+					clipPath: isFreehandDrawing ? undefined : clipPath,
+					WebkitClipPath: isFreehandDrawing ? undefined : clipPath,
+				};
+				const isFreehandSelected = isSelectedFreehandBlur;
+				return (
+					<div className="w-full h-full relative">
+						<div
+							className="absolute inset-0 overflow-hidden"
+							style={{
+								...shapeMaskStyle,
+								isolation: "isolate",
+							}}
+						>
+							<div
+								className="absolute inset-0"
+								style={{
+									...shapeMaskStyle,
+									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"
+									style={{ borderRadius: shapeBorderRadius }}
+								/>
+							)}
+						</div>
+						{isSelected && shape === "freehand" && freehandPath && (
+							<svg
+								viewBox="0 0 100 100"
+								preserveAspectRatio="none"
+								className="absolute inset-0 pointer-events-none"
+							>
+								<path
+									d={freehandPath}
+									fill="none"
+									stroke="#34B27B"
+									strokeWidth="0.55"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+								/>
+								{currentPointerPoint && (
+									<circle
+										cx={currentPointerPoint.x}
+										cy={currentPointerPoint.y}
+										r="0.6"
+										fill="#34B27B"
+									/>
+								)}
+							</svg>
+						)}
+						{isFreehandSelected && (
+							<div
+								className="absolute inset-0 cursor-crosshair"
+								onPointerDown={handleFreehandPointerDown}
+								onPointerMove={handleFreehandPointerMove}
+								onPointerUp={finishFreehandPointer}
+								onPointerCancel={finishFreehandPointer}
+							/>
+						)}
+					</div>
+				);
+			}
+
 			default:
 				return null;
 		}
@@ -125,7 +507,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 });
@@ -135,7 +529,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;
@@ -149,18 +557,23 @@ export function AnnotationOverlay({
 			}}
 			bounds="parent"
 			className={cn(
-				"cursor-move transition-all",
-				isSelected && "ring-2 ring-[#34B27B] ring-offset-2 ring-offset-transparent",
+				"cursor-move",
+				isSelected &&
+					annotation.type !== "blur" &&
+					"ring-2 ring-[#34B27B] ring-offset-2 ring-offset-transparent",
 			)}
 			style={{
 				zIndex: isSelectedBoost ? zIndex + 1000 : zIndex, // Boost selected annotation to ensure it's on top
 				pointerEvents: isSelected ? "auto" : "none",
-				border: isSelected ? "2px solid rgba(52, 178, 123, 0.8)" : "none",
-				backgroundColor: isSelected ? "rgba(52, 178, 123, 0.1)" : "transparent",
-				boxShadow: isSelected ? "0 0 0 1px rgba(52, 178, 123, 0.35)" : "none",
+				border:
+					isSelected && annotation.type !== "blur" ? "2px solid rgba(52, 178, 123, 0.8)" : "none",
+				backgroundColor:
+					isSelected && annotation.type !== "blur" ? "rgba(52, 178, 123, 0.1)" : "transparent",
+				boxShadow:
+					isSelected && annotation.type !== "blur" ? "0 0 0 1px rgba(52, 178, 123, 0.35)" : "none",
 			}}
-			enableResizing={isSelected}
-			disableDragging={!isSelected}
+			enableResizing={isSelected && !isSelectedFreehandBlur}
+			disableDragging={!isSelected || isSelectedFreehandBlur}
 			resizeHandleStyles={{
 				topLeft: {
 					width: "12px",
@@ -206,11 +619,13 @@ export function AnnotationOverlay({
 		>
 			<div
 				className={cn(
-					"w-full h-full rounded-lg",
+					"w-full h-full",
+					annotation.type !== "blur" && "rounded-lg",
 					annotation.type === "text" && "bg-transparent",
 					annotation.type === "image" && "bg-transparent",
 					annotation.type === "figure" && "bg-transparent",
-					isSelected && "shadow-lg",
+					annotation.type === "blur" && "bg-transparent",
+					isSelected && annotation.type !== "blur" && "shadow-lg",
 				)}
 			>
 				{renderContent()}

src/components/video-editor/AnnotationSettingsPanel.tsx

@@ -5,6 +5,7 @@ import {
 	AlignRight,
 	Bold,
 	ChevronDown,
+	Copy,
 	Image as ImageIcon,
 	Info,
 	Italic,
@@ -30,9 +31,15 @@ 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 type { AnnotationRegion, AnnotationType, ArrowDirection, FigureData } from "./types";
+import {
+	type AnnotationRegion,
+	type AnnotationType,
+	type ArrowDirection,
+	type FigureData,
+} from "./types";
 
 interface AnnotationSettingsPanelProps {
 	annotation: AnnotationRegion;
@@ -40,6 +47,7 @@ interface AnnotationSettingsPanelProps {
 	onTypeChange: (type: AnnotationType) => void;
 	onStyleChange: (style: Partial<AnnotationRegion["style"]>) => void;
 	onFigureDataChange?: (figureData: FigureData) => void;
+	onDuplicate?: () => void;
 	onDelete: () => void;
 }
 
@@ -62,12 +70,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"),
@@ -380,15 +388,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>
@@ -419,31 +431,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>
@@ -597,15 +601,28 @@ 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>
+
+					<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 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">

src/components/video-editor/BlurSettingsPanel.tsx

@@ -0,0 +1,247 @@
+import { Info, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Slider } from "@/components/ui/slider";
+import { useScopedT } from "@/contexts/I18nContext";
+import { getBlurOverlayColor } from "@/lib/blurEffects";
+import { cn } from "@/lib/utils";
+import {
+	type AnnotationRegion,
+	type BlurColor,
+	type BlurData,
+	type BlurShape,
+	DEFAULT_BLUR_BLOCK_SIZE,
+	DEFAULT_BLUR_DATA,
+	MAX_BLUR_BLOCK_SIZE,
+	MAX_BLUR_INTENSITY,
+	MIN_BLUR_BLOCK_SIZE,
+	MIN_BLUR_INTENSITY,
+} from "./types";
+
+interface BlurSettingsPanelProps {
+	blurRegion: AnnotationRegion;
+	onBlurDataChange: (blurData: BlurData) => void;
+	onBlurDataCommit?: () => void;
+	onDelete: () => void;
+}
+
+export function BlurSettingsPanel({
+	blurRegion,
+	onBlurDataChange,
+	onBlurDataCommit,
+	onDelete,
+}: BlurSettingsPanelProps) {
+	const t = useScopedT("settings");
+
+	const blurShapeOptions: Array<{ value: BlurShape; labelKey: string }> = [
+		{ 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")}
+					</span>
+				</div>
+
+				<div className="grid grid-cols-2 gap-2">
+					{blurShapeOptions.map((shape) => {
+						const activeShape = blurRegion.blurData?.shape || DEFAULT_BLUR_DATA.shape;
+						const isActive = activeShape === shape.value;
+						return (
+							<button
+								key={shape.value}
+								onClick={() => {
+									const nextBlurData: BlurData = {
+										...DEFAULT_BLUR_DATA,
+										...blurRegion.blurData,
+										shape: shape.value,
+									};
+									onBlurDataChange(nextBlurData);
+									requestAnimationFrame(() => {
+										onBlurDataCommit?.();
+									});
+								}}
+								className={cn(
+									"h-16 rounded-lg border flex flex-col items-center justify-center transition-all p-2 gap-1",
+									isActive
+										? "bg-[#34B27B] border-[#34B27B]"
+										: "bg-white/5 border-white/10 hover:bg-white/10 hover:border-white/20",
+								)}
+							>
+								{shape.value === "rectangle" && (
+									<div
+										className={cn(
+											"w-8 h-5 border-2 rounded-sm",
+											isActive ? "border-white" : "border-slate-400",
+										)}
+									/>
+								)}
+								{shape.value === "oval" && (
+									<div
+										className={cn(
+											"w-8 h-5 border-2 rounded-full",
+											isActive ? "border-white" : "border-slate-400",
+										)}
+									/>
+								)}
+								<span className="text-[10px] leading-none">
+									{t(`annotation.${shape.labelKey}`)}
+								</span>
+							</button>
+						);
+					})}
+				</div>
+
+				<div className="mt-4">
+					<label className="text-xs font-medium text-slate-300 mb-2 block">
+						{t("annotation.blurType")}
+					</label>
+					<Select
+						value={blurRegion.blurData?.type ?? DEFAULT_BLUR_DATA.type}
+						onValueChange={(value) => {
+							const nextBlurData: BlurData = {
+								...DEFAULT_BLUR_DATA,
+								...blurRegion.blurData,
+								type: value === "mosaic" ? "mosaic" : "blur",
+							};
+							onBlurDataChange(nextBlurData);
+							requestAnimationFrame(() => {
+								onBlurDataCommit?.();
+							});
+						}}
+					>
+						<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 h-9 text-xs">
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent className="bg-[#1a1a1c] border-white/10 text-slate-200">
+							<SelectItem value="blur">{t("annotation.blurTypeBlur")}</SelectItem>
+							<SelectItem value="mosaic">{t("annotation.blurTypeMosaic")}</SelectItem>
+						</SelectContent>
+					</Select>
+				</div>
+
+				<div className="mt-4">
+					<label className="text-xs font-medium text-slate-300 mb-2 block">
+						{t("annotation.blurColor")}
+					</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,
+											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 bg-white/5 border border-white/10">
+					<div className="flex items-center justify-between mb-2">
+						<span className="text-xs font-medium text-slate-300">
+							{blurRegion.blurData?.type === "mosaic"
+								? t("annotation.mosaicBlockSize")
+								: t("annotation.blurIntensity")}
+						</span>
+						<span className="text-[10px] text-slate-400 font-mono">
+							{Math.round(
+								blurRegion.blurData?.type === "mosaic"
+									? (blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)
+									: (blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity),
+							)}
+							px
+						</span>
+					</div>
+					<Slider
+						value={[
+							blurRegion.blurData?.type === "mosaic"
+								? (blurRegion.blurData?.blockSize ?? DEFAULT_BLUR_BLOCK_SIZE)
+								: (blurRegion.blurData?.intensity ?? DEFAULT_BLUR_DATA.intensity),
+						]}
+						onValueChange={(values) => {
+							onBlurDataChange({
+								...DEFAULT_BLUR_DATA,
+								...blurRegion.blurData,
+								...(blurRegion.blurData?.type === "mosaic"
+									? { blockSize: values[0] }
+									: { intensity: values[0] }),
+							});
+						}}
+						onValueCommit={() => onBlurDataCommit?.()}
+						min={blurRegion.blurData?.type === "mosaic" ? MIN_BLUR_BLOCK_SIZE : MIN_BLUR_INTENSITY}
+						max={blurRegion.blurData?.type === "mosaic" ? MAX_BLUR_BLOCK_SIZE : MAX_BLUR_INTENSITY}
+						step={1}
+						className="w-full [&_[role=slider]]:bg-[#34B27B] [&_[role=slider]]:border-[#34B27B] [&_[role=slider]]:h-3 [&_[role=slider]]:w-3"
+					/>
+				</div>
+
+				<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-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/KeyboardShortcutsHelp.tsx

@@ -37,8 +37,10 @@ export function KeyboardShortcutsHelp() {
 
 					<div className="pt-1 border-t border-white/5 mt-1 space-y-1.5">
 						{FIXED_SHORTCUTS.map((fixed) => (
-							<div key={fixed.label} className="flex items-center justify-between">
-								<span className="text-slate-400">{fixed.label}</span>
+							<div key={fixed.i18nKey} className="flex items-center justify-between">
+								<span className="text-slate-400">
+									{t(`fixedActions.${fixed.i18nKey}`, { defaultValue: fixed.label })}
+								</span>
 								<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
 									{isMac
 										? fixed.display

src/components/video-editor/ShortcutsConfigDialog.tsx

@@ -126,93 +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(({ label, display }) => (
-						<div
-							key={label}
-							className="flex items-center justify-between py-1.5 px-1 border-b border-white/5 last:border-0"
-						>
-							<span className="text-sm text-slate-400">{label}</span>
-							<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/projectPersistence.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, it } from "vitest";
 import {
 	createProjectData,
+	createProjectSnapshot,
+	hasProjectUnsavedChanges,
+	normalizeProjectEditor,
 	PROJECT_VERSION,
 	resolveProjectMedia,
 	validateProjectData,
@@ -40,6 +43,8 @@ describe("projectPersistence media compatibility", () => {
 				annotationRegions: [],
 				aspectRatio: "16:9",
 				webcamLayoutPreset: "picture-in-picture",
+				webcamMaskShape: "circle",
+				webcamPosition: null,
 				exportQuality: "good",
 				exportFormat: "mp4",
 				gifFrameRate: 15,
@@ -55,4 +60,199 @@ describe("projectPersistence media compatibility", () => {
 		});
 		expect(validateProjectData(project)).toBe(true);
 	});
+
+	it("normalizes webcam mask shape values safely", () => {
+		expect(normalizeProjectEditor({ webcamMaskShape: "rounded" }).webcamMaskShape).toBe("rounded");
+		expect(
+			normalizeProjectEditor({ webcamMaskShape: "not-a-real-shape" as never }).webcamMaskShape,
+		).toBe("rectangle");
+	});
+
+	it("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("blur");
+		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", () => {
+	const media = {
+		screenVideoPath: "/tmp/screen.webm",
+		webcamVideoPath: "/tmp/webcam.webm",
+	};
+	const editor = normalizeProjectEditor({
+		wallpaper: "/wallpapers/wallpaper1.jpg",
+		shadowIntensity: 0,
+		showBlur: false,
+		motionBlurAmount: 0,
+		borderRadius: 0,
+		padding: 50,
+		cropRegion: { x: 0, y: 0, width: 1, height: 1 },
+		zoomRegions: [],
+		trimRegions: [],
+		speedRegions: [],
+		annotationRegions: [],
+		aspectRatio: "16:9",
+		webcamLayoutPreset: "picture-in-picture",
+		webcamMaskShape: "circle",
+		exportQuality: "good",
+		exportFormat: "mp4",
+		gifFrameRate: 15,
+		gifLoop: true,
+		gifSizePreset: "medium",
+	});
+
+	expect(createProjectSnapshot(media, editor)).toBe(createProjectSnapshot(media, editor));
+});
+
+it("detects unsaved changes from differing snapshots", () => {
+	expect(hasProjectUnsavedChanges(null, null)).toBe(false);
+	expect(hasProjectUnsavedChanges("same", "same")).toBe(false);
+	expect(hasProjectUnsavedChanges("current", "baseline")).toBe(true);
+});
+
+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,32 +1,60 @@
+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,
+	clampPlaybackSpeed,
 	DEFAULT_ANNOTATION_POSITION,
 	DEFAULT_ANNOTATION_SIZE,
 	DEFAULT_ANNOTATION_STYLE,
+	DEFAULT_BLUR_BLOCK_SIZE,
+	DEFAULT_BLUR_DATA,
+	DEFAULT_BLUR_FREEHAND_POINTS,
+	DEFAULT_BLUR_INTENSITY,
 	DEFAULT_CROP_REGION,
 	DEFAULT_FIGURE_DATA,
 	DEFAULT_PLAYBACK_SPEED,
 	DEFAULT_WEBCAM_LAYOUT_PRESET,
+	DEFAULT_WEBCAM_MASK_SHAPE,
 	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,
 	type TrimRegion,
 	type WebcamLayoutPreset,
+	type WebcamMaskShape,
 	type WebcamPosition,
+	type WebcamSizePreset,
 	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;
 
@@ -44,12 +72,15 @@ export interface ProjectEditorState {
 	annotationRegions: AnnotationRegion[];
 	aspectRatio: AspectRatio;
 	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape: WebcamMaskShape;
+	webcamSizePreset: WebcamSizePreset;
 	webcamPosition: WebcamPosition | null;
 	exportQuality: ExportQuality;
 	exportFormat: ExportFormat;
 	gifFrameRate: GifFrameRate;
 	gifLoop: boolean;
 	gifSizePreset: GifSizePreset;
+	cursorHighlight: import("./videoPlayback/cursorHighlight").CursorHighlightConfig;
 }
 
 export interface EditorProjectData {
@@ -63,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));
 }
@@ -170,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
@@ -180,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,
@@ -189,6 +267,8 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 							cx: clamp(isFiniteNumber(region.focus?.cx) ? region.focus.cx : 0.5, 0, 1),
 							cy: clamp(isFiniteNumber(region.focus?.cy) ? region.focus.cy : 0.5, 0, 1),
 						},
+						focusMode: region.focusMode === "auto" ? "auto" : "manual",
+						...(validPreset ? { rotationPreset: validPreset } : {}),
 					};
 				})
 		: [];
@@ -219,14 +299,10 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 					const endMs = Math.max(startMs + 1, rawEnd);
 
 					const speed =
-						region.speed === 0.25 ||
-						region.speed === 0.5 ||
-						region.speed === 0.75 ||
-						region.speed === 1.25 ||
-						region.speed === 1.5 ||
-						region.speed === 1.75 ||
-						region.speed === 2
-							? region.speed
+						isFiniteNumber(region.speed) &&
+						region.speed >= MIN_PLAYBACK_SPEED &&
+						region.speed <= MAX_PLAYBACK_SPEED
+							? clampPlaybackSpeed(region.speed)
 							: DEFAULT_PLAYBACK_SPEED;
 
 					return {
@@ -248,12 +324,22 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 					const rawEnd = isFiniteNumber(region.endMs) ? Math.round(region.endMs) : rawStart + 1000;
 					const startMs = Math.max(0, Math.min(rawStart, rawEnd));
 					const endMs = Math.max(startMs + 1, rawEnd);
+					const blurShape =
+						typeof region.blurData?.shape === "string" &&
+						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,
 						startMs,
 						endMs,
-						type: region.type === "image" || region.type === "figure" ? region.type : "text",
+						type:
+							region.type === "image" || region.type === "figure" || region.type === "blur"
+								? region.type
+								: "text",
 						content: typeof region.content === "string" ? region.content : "",
 						textContent: typeof region.textContent === "string" ? region.textContent : undefined,
 						imageContent: typeof region.imageContent === "string" ? region.imageContent : undefined,
@@ -300,6 +386,42 @@ export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): Pro
 									...region.figureData,
 								}
 							: undefined,
+						blurData:
+							region.blurData && typeof region.blurData === "object"
+								? {
+										...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(
+														(
+															point,
+														): point is {
+															x: number;
+															y: number;
+														} =>
+															Boolean(
+																point &&
+																	isFiniteNumber((point as { x?: unknown }).x) &&
+																	isFiniteNumber((point as { y?: unknown }).y),
+															),
+													)
+													.map((point) => ({
+														x: clamp(point.x, 0, 100),
+														y: clamp(point.y, 0, 100),
+													}))
+											: DEFAULT_BLUR_FREEHAND_POINTS,
+									}
+								: undefined,
 					};
 				})
 		: [];
@@ -323,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)
@@ -345,23 +470,20 @@ 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,
-		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,
+		aspectRatio: normalizedAspectRatio,
+		webcamLayoutPreset: normalizedWebcamLayoutPreset,
+		webcamMaskShape:
+			editor.webcamMaskShape === "rectangle" ||
+			editor.webcamMaskShape === "circle" ||
+			editor.webcamMaskShape === "square" ||
+			editor.webcamMaskShape === "rounded"
+				? editor.webcamMaskShape
+				: DEFAULT_WEBCAM_MASK_SHAPE,
+		webcamSizePreset:
+			typeof editor.webcamSizePreset === "number" && isFiniteNumber(editor.webcamSizePreset)
+				? Math.max(10, Math.min(50, editor.webcamSizePreset))
+				: DEFAULT_WEBCAM_SIZE_PRESET,
+		webcamPosition: normalizedWebcamPosition,
 		exportQuality:
 			editor.exportQuality === "medium" || editor.exportQuality === "source"
 				? editor.exportQuality
@@ -381,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,
 	};
 }
 
@@ -394,3 +562,19 @@ export function createProjectData(
 		editor,
 	};
 }
+
+export function createProjectSnapshot(
+	media: ProjectMedia,
+	editor: Partial<ProjectEditorState>,
+): string {
+	return JSON.stringify(createProjectData(media, normalizeProjectEditor(editor)));
+}
+
+export function hasProjectUnsavedChanges(
+	currentSnapshot: string | null,
+	baselineSnapshot: string | null,
+): boolean {
+	return Boolean(
+		currentSnapshot !== null && baselineSnapshot !== null && currentSnapshot !== baselineSnapshot,
+	);
+}

src/components/video-editor/timeline/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,8 +14,10 @@ interface ItemProps {
 	isSelected?: boolean;
 	onSelect?: () => void;
 	zoomDepth?: number;
+	zoomCustomScale?: number;
 	speedValue?: number;
-	variant?: "zoom" | "trim" | "annotation" | "speed";
+	isAutoFocus?: boolean;
+	variant?: "zoom" | "trim" | "annotation" | "speed" | "blur";
 }
 
 // Map zoom depth to multiplier labels
@@ -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,
@@ -130,21 +136,29 @@ export default function Item({
 								<>
 									<ZoomIn className="w-3.5 h-3.5 shrink-0" />
 									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
-										{ZOOM_LABELS[zoomDepth] || `${zoomDepth}×`}
+										{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
+										{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"}
+										{speedValue !== undefined ? `${speedValue}×` : t("labels.speed")}
 									</span>
 								</>
 							) : (

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

@@ -44,6 +44,7 @@ import { detectZoomDwellCandidates, normalizeCursorTelemetry } from "./zoomSugge
 const ZOOM_ROW_ID = "row-zoom";
 const TRIM_ROW_ID = "row-trim";
 const ANNOTATION_ROW_ID = "row-annotation";
+const BLUR_ROW_ID = "row-blur";
 const SPEED_ROW_ID = "row-speed";
 const FALLBACK_RANGE_MS = 1000;
 const TARGET_MARKER_COUNT = 12;
@@ -73,6 +74,12 @@ interface TimelineEditorProps {
 	onAnnotationDelete?: (id: string) => void;
 	selectedAnnotationId?: string | null;
 	onSelectAnnotation?: (id: string | null) => void;
+	blurRegions?: AnnotationRegion[];
+	onBlurAdded?: (span: Span) => void;
+	onBlurSpanChange?: (id: string, span: Span) => void;
+	onBlurDelete?: (id: string) => void;
+	selectedBlurId?: string | null;
+	onSelectBlur?: (id: string | null) => void;
 	speedRegions?: SpeedRegion[];
 	onSpeedAdded?: (span: Span) => void;
 	onSpeedSpanChange?: (id: string, span: Span) => void;
@@ -95,8 +102,10 @@ interface TimelineRenderItem {
 	span: Span;
 	label: string;
 	zoomDepth?: number;
+	zoomCustomScale?: number;
 	speedValue?: number;
-	variant: "zoom" | "trim" | "annotation" | "speed";
+	isAutoFocus?: boolean;
+	variant: "zoom" | "trim" | "annotation" | "speed" | "blur";
 }
 
 const SCALE_CANDIDATES = [
@@ -525,10 +534,12 @@ function Timeline({
 	onSelectZoom,
 	onSelectTrim,
 	onSelectAnnotation,
+	onSelectBlur,
 	onSelectSpeed,
 	selectedZoomId,
 	selectedTrimId,
 	selectedAnnotationId,
+	selectedBlurId,
 	selectedSpeedId,
 	keyframes = [],
 }: {
@@ -540,10 +551,12 @@ function Timeline({
 	onSelectZoom?: (id: string | null) => void;
 	onSelectTrim?: (id: string | null) => void;
 	onSelectAnnotation?: (id: string | null) => void;
+	onSelectBlur?: (id: string | null) => void;
 	onSelectSpeed?: (id: string | null) => void;
 	selectedZoomId: string | null;
 	selectedTrimId?: string | null;
 	selectedAnnotationId?: string | null;
+	selectedBlurId?: string | null;
 	selectedSpeedId?: string | null;
 	keyframes?: { id: string; time: number }[];
 }) {
@@ -568,6 +581,7 @@ function Timeline({
 			onSelectZoom?.(null);
 			onSelectTrim?.(null);
 			onSelectAnnotation?.(null);
+			onSelectBlur?.(null);
 			onSelectSpeed?.(null);
 
 			const rect = e.currentTarget.getBoundingClientRect();
@@ -586,6 +600,7 @@ function Timeline({
 			onSelectZoom,
 			onSelectTrim,
 			onSelectAnnotation,
+			onSelectBlur,
 			onSelectSpeed,
 			videoDurationMs,
 			sidebarWidth,
@@ -637,6 +652,7 @@ function Timeline({
 	const zoomItems = items.filter((item) => item.rowId === ZOOM_ROW_ID);
 	const trimItems = items.filter((item) => item.rowId === TRIM_ROW_ID);
 	const annotationItems = items.filter((item) => item.rowId === ANNOTATION_ROW_ID);
+	const blurItems = items.filter((item) => item.rowId === BLUR_ROW_ID);
 	const speedItems = items.filter((item) => item.rowId === SPEED_ROW_ID);
 
 	return (
@@ -668,6 +684,8 @@ function Timeline({
 						isSelected={item.id === selectedZoomId}
 						onSelect={() => onSelectZoom?.(item.id)}
 						zoomDepth={item.zoomDepth}
+						zoomCustomScale={item.zoomCustomScale}
+						isAutoFocus={item.isAutoFocus}
 						variant="zoom"
 					>
 						{item.label}
@@ -711,6 +729,22 @@ function Timeline({
 				))}
 			</Row>
 
+			<Row id={BLUR_ROW_ID} isEmpty={blurItems.length === 0} hint={t("hints.pressBlur")}>
+				{blurItems.map((item) => (
+					<Item
+						id={item.id}
+						key={item.id}
+						rowId={item.rowId}
+						span={item.span}
+						isSelected={item.id === selectedBlurId}
+						onSelect={() => onSelectBlur?.(item.id)}
+						variant={item.variant}
+					>
+						{item.label}
+					</Item>
+				))}
+			</Row>
+
 			<Row id={SPEED_ROW_ID} isEmpty={speedItems.length === 0} hint={t("hints.pressSpeed")}>
 				{speedItems.map((item) => (
 					<Item
@@ -755,6 +789,12 @@ export default function TimelineEditor({
 	onAnnotationDelete,
 	selectedAnnotationId,
 	onSelectAnnotation,
+	blurRegions = [],
+	onBlurAdded,
+	onBlurSpanChange,
+	onBlurDelete,
+	selectedBlurId,
+	onSelectBlur,
 	speedRegions = [],
 	onSpeedAdded,
 	onSpeedSpanChange,
@@ -839,6 +879,12 @@ export default function TimelineEditor({
 		onSelectAnnotation(null);
 	}, [selectedAnnotationId, onAnnotationDelete, onSelectAnnotation]);
 
+	const deleteSelectedBlur = useCallback(() => {
+		if (!selectedBlurId || !onBlurDelete || !onSelectBlur) return;
+		onBlurDelete(selectedBlurId);
+		onSelectBlur(null);
+	}, [selectedBlurId, onBlurDelete, onSelectBlur]);
+
 	const deleteSelectedSpeed = useCallback(() => {
 		if (!selectedSpeedId || !onSpeedDelete || !onSelectSpeed) return;
 		onSpeedDelete(selectedSpeedId);
@@ -908,9 +954,10 @@ export default function TimelineEditor({
 			const isZoomItem = zoomRegions.some((r) => r.id === excludeId);
 			const isTrimItem = trimRegions.some((r) => r.id === excludeId);
 			const isAnnotationItem = annotationRegions.some((r) => r.id === excludeId);
+			const isBlurItem = blurRegions.some((r) => r.id === excludeId);
 			const isSpeedItem = speedRegions.some((r) => r.id === excludeId);
 
-			if (isAnnotationItem) {
+			if (isAnnotationItem || isBlurItem) {
 				return false;
 			}
 
@@ -937,7 +984,7 @@ export default function TimelineEditor({
 
 			return false;
 		},
-		[zoomRegions, trimRegions, annotationRegions, speedRegions],
+		[zoomRegions, trimRegions, annotationRegions, blurRegions, speedRegions],
 	);
 
 	// At least 5% of the timeline or 1000ms, whichever is larger, so the region
@@ -1165,6 +1212,21 @@ export default function TimelineEditor({
 		onAnnotationAdded({ start: startPos, end: endPos });
 	}, [videoDuration, totalMs, currentTimeMs, onAnnotationAdded, defaultRegionDurationMs]);
 
+	const handleAddBlur = useCallback(() => {
+		if (!videoDuration || videoDuration === 0 || totalMs === 0 || !onBlurAdded) {
+			return;
+		}
+
+		const defaultDuration = Math.min(defaultRegionDurationMs, totalMs);
+		if (defaultDuration <= 0) {
+			return;
+		}
+
+		const startPos = Math.max(0, Math.min(currentTimeMs, totalMs));
+		const endPos = Math.min(startPos + defaultDuration, totalMs);
+		onBlurAdded({ start: startPos, end: endPos });
+	}, [videoDuration, totalMs, currentTimeMs, onBlurAdded, defaultRegionDurationMs]);
+
 	useEffect(() => {
 		const handleKeyDown = (e: KeyboardEvent) => {
 			if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
@@ -1183,6 +1245,9 @@ export default function TimelineEditor({
 			if (matchesShortcut(e, keyShortcuts.addAnnotation, isMac)) {
 				handleAddAnnotation();
 			}
+			if (matchesShortcut(e, keyShortcuts.addBlur, isMac)) {
+				handleAddBlur();
+			}
 			if (matchesShortcut(e, keyShortcuts.addSpeed, isMac)) {
 				handleAddSpeed();
 			}
@@ -1223,6 +1288,8 @@ export default function TimelineEditor({
 					deleteSelectedTrim();
 				} else if (selectedAnnotationId) {
 					deleteSelectedAnnotation();
+				} else if (selectedBlurId) {
+					deleteSelectedBlur();
 				} else if (selectedSpeedId) {
 					deleteSelectedSpeed();
 				}
@@ -1235,16 +1302,19 @@ export default function TimelineEditor({
 		handleAddZoom,
 		handleAddTrim,
 		handleAddAnnotation,
+		handleAddBlur,
 		handleAddSpeed,
 		deleteSelectedKeyframe,
 		deleteSelectedZoom,
 		deleteSelectedTrim,
 		deleteSelectedAnnotation,
+		deleteSelectedBlur,
 		deleteSelectedSpeed,
 		selectedKeyframeId,
 		selectedZoomId,
 		selectedTrimId,
 		selectedAnnotationId,
+		selectedBlurId,
 		selectedSpeedId,
 		annotationRegions,
 		currentTime,
@@ -1271,6 +1341,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",
 		}));
 
@@ -1304,6 +1376,14 @@ export default function TimelineEditor({
 			};
 		});
 
+		const blurs: TimelineRenderItem[] = blurRegions.map((region, index) => ({
+			id: region.id,
+			rowId: BLUR_ROW_ID,
+			span: { start: region.startMs, end: region.endMs },
+			label: t("labels.blurItem", { index: String(index + 1) }),
+			variant: "blur",
+		}));
+
 		const speeds: TimelineRenderItem[] = speedRegions.map((region, index) => ({
 			id: region.id,
 			rowId: SPEED_ROW_ID,
@@ -1313,8 +1393,8 @@ export default function TimelineEditor({
 			variant: "speed",
 		}));
 
-		return [...zooms, ...trims, ...annotations, ...speeds];
-	}, [zoomRegions, trimRegions, annotationRegions, speedRegions, t]);
+		return [...zooms, ...trims, ...annotations, ...blurs, ...speeds];
+	}, [zoomRegions, trimRegions, annotationRegions, blurRegions, speedRegions, t]);
 
 	// Flat list of all non-annotation region spans for neighbour-clamping during drag/resize
 	const allRegionSpans = useMemo(() => {
@@ -1335,6 +1415,8 @@ export default function TimelineEditor({
 				onSpeedSpanChange?.(id, span);
 			} else if (annotationRegions.some((r) => r.id === id)) {
 				onAnnotationSpanChange?.(id, span);
+			} else if (blurRegions.some((r) => r.id === id)) {
+				onBlurSpanChange?.(id, span);
 			}
 		},
 		[
@@ -1342,10 +1424,12 @@ export default function TimelineEditor({
 			trimRegions,
 			speedRegions,
 			annotationRegions,
+			blurRegions,
 			onZoomSpanChange,
 			onTrimSpanChange,
 			onSpeedSpanChange,
 			onAnnotationSpanChange,
+			onBlurSpanChange,
 		],
 	);
 
@@ -1403,6 +1487,25 @@ export default function TimelineEditor({
 					>
 						<MessageSquare className="w-4 h-4" />
 					</Button>
+					<Button
+						onClick={handleAddBlur}
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 text-slate-400 hover:text-[#7dd3fc] hover:bg-[#7dd3fc]/10 transition-all"
+						title={t("buttons.addBlur")}
+					>
+						<svg
+							className="w-4 h-4"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							strokeWidth="2"
+						>
+							<circle cx="8" cy="12" r="3" />
+							<circle cx="16" cy="12" r="3" />
+							<path d="M6 6h12M6 18h12" />
+						</svg>
+					</Button>
 					<Button
 						onClick={handleAddSpeed}
 						variant="ghost"
@@ -1489,10 +1592,12 @@ export default function TimelineEditor({
 						onSelectZoom={onSelectZoom}
 						onSelectTrim={onSelectTrim}
 						onSelectAnnotation={onSelectAnnotation}
+						onSelectBlur={onSelectBlur}
 						onSelectSpeed={onSelectSpeed}
 						selectedZoomId={selectedZoomId}
 						selectedTrimId={selectedTrimId}
 						selectedAnnotationId={selectedAnnotationId}
+						selectedBlurId={selectedBlurId}
 						selectedSpeedId={selectedSpeedId}
 						keyframes={keyframes}
 					/>

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/types.ts

@@ -1,10 +1,19 @@
 import type { WebcamLayoutPreset } from "@/lib/compositeLayout";
 
 export type ZoomDepth = 1 | 2 | 3 | 4 | 5 | 6;
+export type ZoomFocusMode = "manual" | "auto";
 export type { WebcamLayoutPreset };
+/** Webcam size as a percentage of the canvas reference dimension (10–50). */
+export type WebcamSizePreset = number;
+
+export const DEFAULT_WEBCAM_SIZE_PRESET: WebcamSizePreset = 25;
 
 export const DEFAULT_WEBCAM_LAYOUT_PRESET: WebcamLayoutPreset = "picture-in-picture";
 
+export type WebcamMaskShape = "rectangle" | "circle" | "square" | "rounded";
+
+export const DEFAULT_WEBCAM_MASK_SHAPE: WebcamMaskShape = "rectangle";
+
 export interface WebcamPosition {
 	cx: number; // normalized horizontal center (0-1)
 	cy: number; // normalized vertical center (0-1)
@@ -17,12 +26,144 @@ 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;
 	endMs: number;
 	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 {
@@ -37,7 +178,7 @@ export interface TrimRegion {
 	endMs: number;
 }
 
-export type AnnotationType = "text" | "image" | "figure";
+export type AnnotationType = "text" | "image" | "figure" | "blur";
 
 export type ArrowDirection =
 	| "up"
@@ -55,6 +196,27 @@ export interface FigureData {
 	strokeWidth: number;
 }
 
+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 }>;
+}
+
 export interface AnnotationPosition {
 	x: number;
 	y: number;
@@ -89,6 +251,7 @@ export interface AnnotationRegion {
 	style: AnnotationTextStyle;
 	zIndex: number;
 	figureData?: FigureData;
+	blurData?: BlurData;
 }
 
 export const DEFAULT_ANNOTATION_POSITION: AnnotationPosition = {
@@ -118,6 +281,27 @@ export const DEFAULT_FIGURE_DATA: FigureData = {
 	strokeWidth: 4,
 };
 
+export const DEFAULT_BLUR_FREEHAND_POINTS: Array<{ x: number; y: number }> = [
+	{ x: 10, y: 30 },
+	{ x: 25, y: 10 },
+	{ x: 55, y: 8 },
+	{ x: 82, y: 20 },
+	{ x: 90, y: 45 },
+	{ x: 78, y: 72 },
+	{ x: 52, y: 90 },
+	{ x: 22, y: 84 },
+	{ x: 8, y: 58 },
+];
+
+export const DEFAULT_BLUR_DATA: BlurData = {
+	type: "blur",
+	shape: "rectangle",
+	color: "white",
+	intensity: DEFAULT_BLUR_INTENSITY,
+	blockSize: DEFAULT_BLUR_BLOCK_SIZE,
+	freehandPoints: DEFAULT_BLUR_FREEHAND_POINTS,
+};
+
 export interface CropRegion {
 	x: number;
 	y: number;
@@ -132,7 +316,16 @@ export const DEFAULT_CROP_REGION: CropRegion = {
 	height: 1,
 };
 
-export type PlaybackSpeed = 0.25 | 0.5 | 0.75 | 1.25 | 1.5 | 1.75 | 2;
+export type PlaybackSpeed = number;
+
+export const MIN_PLAYBACK_SPEED = 0.1;
+// Anything above 16x causes the playhead to stall during preview
+// due to the video decoder not being able to keep up.
+export const MAX_PLAYBACK_SPEED = 16;
+
+export function clampPlaybackSpeed(speed: number): PlaybackSpeed {
+	return Math.round(Math.min(MAX_PLAYBACK_SPEED, Math.max(MIN_PLAYBACK_SPEED, speed)) * 100) / 100;
+}
 
 export interface SpeedRegion {
 	id: string;
@@ -149,6 +342,9 @@ export const SPEED_OPTIONS: Array<{ speed: PlaybackSpeed; label: string }> = [
 	{ speed: 1.5, label: "1.5×" },
 	{ speed: 1.75, label: "1.75×" },
 	{ speed: 2, label: "2×" },
+	{ speed: 3, label: "3×" },
+	{ speed: 4, label: "4×" },
+	{ speed: 5, label: "5×" },
 ];
 
 export const DEFAULT_PLAYBACK_SPEED: PlaybackSpeed = 1.5;
@@ -162,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/constants.ts

@@ -8,3 +8,6 @@ export const VIEWPORT_SCALE = 0.8;
 export const SMOOTHING_FACTOR = 0.12;
 export const ZOOM_TRANSLATION_DEADZONE_PX = 1.25;
 export const ZOOM_SCALE_DEADZONE = 0.002;
+export const AUTO_FOLLOW_SMOOTHING_FACTOR = 0.1;
+export const AUTO_FOLLOW_SMOOTHING_FACTOR_MAX = 0.25;
+export const AUTO_FOLLOW_RAMP_DISTANCE = 0.15;

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

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

src/components/video-editor/videoPlayback/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

@@ -39,9 +39,16 @@ function getFocusBounds(depth: ZoomDepth) {
 	return getFocusBoundsForScale(zoomScale);
 }
 
-function getFocusBoundsForScale(zoomScale: number) {
-	const marginX = 1 / (2 * zoomScale);
-	const marginY = 1 / (2 * zoomScale);
+interface ViewportRatio {
+	widthRatio: number;
+	heightRatio: number;
+}
+
+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));
+	const marginY = Math.min(0.5, hr / (2 * zoomScale));
 
 	return {
 		minX: marginX,
@@ -65,12 +72,16 @@ export function clampFocusToStage(
 	};
 }
 
-export function clampFocusToScale(focus: ZoomFocus, zoomScale: number): ZoomFocus {
+export function clampFocusToScale(
+	focus: ZoomFocus,
+	zoomScale: number,
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
 	const baseFocus = {
 		cx: clamp(focus.cx, 0, 1),
 		cy: clamp(focus.cy, 0, 1),
 	};
-	const bounds = getFocusBoundsForScale(zoomScale);
+	const bounds = getFocusBoundsForScale(zoomScale, viewportRatio);
 
 	return {
 		cx: clamp(baseFocus.cx, bounds.minX, bounds.maxX),
@@ -78,12 +89,16 @@ export function clampFocusToScale(focus: ZoomFocus, zoomScale: number): ZoomFocu
 	};
 }
 
-export function softenFocusToScale(focus: ZoomFocus, zoomScale: number): ZoomFocus {
+export function softenFocusToScale(
+	focus: ZoomFocus,
+	zoomScale: number,
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
 	const baseFocus = {
 		cx: clamp(focus.cx, 0, 1),
 		cy: clamp(focus.cy, 0, 1),
 	};
-	const bounds = getFocusBoundsForScale(zoomScale);
+	const bounds = getFocusBoundsForScale(zoomScale, viewportRatio);
 	const horizontalRange = bounds.maxX - bounds.minX;
 	const verticalRange = bounds.maxY - bounds.minY;
 	const horizontalSoftness = Math.min(0.12, horizontalRange * 0.35);

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

@@ -5,8 +5,9 @@ import {
 	type Size,
 	type StyledRenderRect,
 	type WebcamLayoutPreset,
+	type WebcamSizePreset,
 } from "@/lib/compositeLayout";
-import type { CropRegion } from "../types";
+import type { CropRegion, WebcamMaskShape } from "../types";
 
 interface LayoutParams {
 	container: HTMLDivElement;
@@ -20,7 +21,9 @@ interface LayoutParams {
 	padding?: number;
 	webcamDimensions?: Size | null;
 	webcamLayoutPreset?: WebcamLayoutPreset;
+	webcamSizePreset?: WebcamSizePreset;
 	webcamPosition?: { cx: number; cy: number } | null;
+	webcamMaskShape?: WebcamMaskShape;
 }
 
 interface LayoutResult {
@@ -46,7 +49,9 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
 		padding = 0,
 		webcamDimensions,
 		webcamLayoutPreset,
+		webcamSizePreset,
 		webcamPosition,
+		webcamMaskShape,
 	} = params;
 
 	const videoWidth = lockedVideoDimensions?.width || videoElement.videoWidth;
@@ -93,7 +98,9 @@ export function layoutVideoContent(params: LayoutParams): LayoutResult | null {
 		screenSize: { width: croppedVideoWidth, height: croppedVideoHeight },
 		webcamSize: webcamDimensions,
 		layoutPreset: webcamLayoutPreset,
+		webcamSizePreset,
 		webcamPosition,
+		webcamMaskShape,
 	});
 
 	if (!compositeLayout) {
@@ -133,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;
@@ -14,7 +14,7 @@ interface OverlayUpdateParams {
 export function updateOverlayIndicator(params: OverlayUpdateParams) {
 	const { overlayEl, indicatorEl, region, focusOverride, videoSize, baseScale, isPlaying } = params;
 
-	if (!region) {
+	if (!region || region.focusMode === "auto") {
 		indicatorEl.style.display = "none";
 		overlayEl.style.pointerEvents = "none";
 		return;
@@ -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,6 +1,7 @@
-import type { 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";
 import { clamp01, cubicBezier, easeOutScreenStudio } from "./mathUtils";
 
@@ -10,6 +11,8 @@ const ZOOM_IN_OVERLAP_MS = 500;
 
 type DominantRegionOptions = {
 	connectZooms?: boolean;
+	cursorTelemetry?: CursorTelemetryPoint[];
+	viewportRatio?: ViewportRatio;
 };
 
 type ConnectedRegionPair = {
@@ -64,8 +67,33 @@ function getLinearFocus(start: ZoomFocus, end: ZoomFocus, amount: number): ZoomF
 	};
 }
 
-function getResolvedFocus(region: ZoomRegion, zoomScale: number): ZoomFocus {
-	return clampFocusToScale(region.focus, zoomScale);
+interface ViewportRatio {
+	widthRatio: number;
+	heightRatio: number;
+}
+
+function getResolvedFocus(
+	region: ZoomRegion,
+	zoomScale: number,
+	timeMs?: number,
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+): ZoomFocus {
+	let focus = region.focus;
+
+	if (
+		region.focusMode === "auto" &&
+		cursorTelemetry &&
+		cursorTelemetry.length > 0 &&
+		timeMs !== undefined
+	) {
+		const cursorFocus = interpolateCursorAt(cursorTelemetry, timeMs);
+		if (cursorFocus) {
+			focus = cursorFocus;
+		}
+	}
+
+	return clampFocusToScale(focus, zoomScale, viewportRatio);
 }
 
 function getConnectedRegionPairs(regions: ZoomRegion[]) {
@@ -96,6 +124,8 @@ function getActiveRegion(
 	regions: ZoomRegion[],
 	timeMs: number,
 	connectedPairs: ConnectedRegionPair[],
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
 ) {
 	const activeRegions = regions
 		.map((region) => {
@@ -125,29 +155,42 @@ function getActiveRegion(
 	}
 
 	const activeRegion = activeRegions[0].region;
-	const activeScale = ZOOM_DEPTH_SCALES[activeRegion.depth];
+	const activeScale = getZoomScale(activeRegion);
 
 	return {
 		region: {
 			...activeRegion,
-			focus: getResolvedFocus(activeRegion, activeScale),
+			focus: getResolvedFocus(activeRegion, activeScale, timeMs, cursorTelemetry, viewportRatio),
 		},
 		strength: activeRegions[0].strength,
 		blendedScale: null,
+		rotation3D: getRotation3D(activeRegion),
 	};
 }
 
-function getConnectedRegionHold(timeMs: number, connectedPairs: ConnectedRegionPair[]) {
+function getConnectedRegionHold(
+	timeMs: number,
+	connectedPairs: ConnectedRegionPair[],
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
 	for (const pair of connectedPairs) {
 		if (timeMs > pair.transitionEnd && timeMs < pair.nextRegion.startMs) {
-			const nextScale = ZOOM_DEPTH_SCALES[pair.nextRegion.depth];
+			const nextScale = getZoomScale(pair.nextRegion);
 			return {
 				region: {
 					...pair.nextRegion,
-					focus: getResolvedFocus(pair.nextRegion, nextScale),
+					focus: getResolvedFocus(
+						pair.nextRegion,
+						nextScale,
+						timeMs,
+						cursorTelemetry,
+						viewportRatio,
+					),
 				},
 				strength: 1,
 				blendedScale: null,
+				rotation3D: getRotation3D(pair.nextRegion),
 			};
 		}
 	}
@@ -155,7 +198,12 @@ function getConnectedRegionHold(timeMs: number, connectedPairs: ConnectedRegionP
 	return null;
 }
 
-function getConnectedRegionTransition(connectedPairs: ConnectedRegionPair[], timeMs: number) {
+function getConnectedRegionTransition(
+	connectedPairs: ConnectedRegionPair[],
+	timeMs: number,
+	cursorTelemetry?: CursorTelemetryPoint[],
+	viewportRatio?: ViewportRatio,
+) {
 	for (const pair of connectedPairs) {
 		const { currentRegion, nextRegion, transitionStart, transitionEnd } = pair;
 
@@ -166,12 +214,32 @@ function getConnectedRegionTransition(connectedPairs: ConnectedRegionPair[], tim
 		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);
-		const currentFocus = getResolvedFocus(currentRegion, currentScale);
-		const nextFocus = getResolvedFocus(nextRegion, nextScale);
+		// Both regions share the same timeMs, so interpolate cursor once and reuse.
+		const sharedCursorFocus =
+			cursorTelemetry && cursorTelemetry.length > 0
+				? interpolateCursorAt(cursorTelemetry, timeMs)
+				: null;
+		const currentFocus = clampFocusToScale(
+			currentRegion.focusMode === "auto" && sharedCursorFocus
+				? sharedCursorFocus
+				: currentRegion.focus,
+			currentScale,
+			viewportRatio,
+		);
+		const nextFocus = clampFocusToScale(
+			nextRegion.focusMode === "auto" && sharedCursorFocus ? sharedCursorFocus : nextRegion.focus,
+			nextScale,
+			viewportRatio,
+		);
 		const transitionFocus = getLinearFocus(currentFocus, nextFocus, transitionProgress);
+		const transitionRotation = lerpRotation3D(
+			getRotation3D(currentRegion),
+			getRotation3D(nextRegion),
+			transitionProgress,
+		);
 
 		return {
 			region: {
@@ -180,6 +248,7 @@ function getConnectedRegionTransition(connectedPairs: ConnectedRegionPair[], tim
 			},
 			strength: 1,
 			blendedScale: transitionScale,
+			rotation3D: transitionRotation,
 			transition: {
 				progress: transitionProgress,
 				startFocus: currentFocus,
@@ -193,32 +262,92 @@ function getConnectedRegionTransition(connectedPairs: ConnectedRegionPair[], tim
 	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);
-		if (connectedTransition) {
-			return connectedTransition;
-		}
-
-		const connectedHold = getConnectedRegionHold(timeMs, connectedPairs);
-		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);
-	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/useCameraDevices.test.ts

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

src/hooks/useCameraDevices.ts

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

src/hooks/useEditorHistory.ts

@@ -5,14 +5,23 @@ import type {
 	SpeedRegion,
 	TrimRegion,
 	WebcamLayoutPreset,
+	WebcamMaskShape,
 	WebcamPosition,
+	WebcamSizePreset,
 	ZoomRegion,
 } from "@/components/video-editor/types";
 import {
 	DEFAULT_CROP_REGION,
 	DEFAULT_WEBCAM_LAYOUT_PRESET,
+	DEFAULT_WEBCAM_MASK_SHAPE,
 	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
@@ -31,7 +40,10 @@ export interface EditorState {
 	padding: number;
 	aspectRatio: AspectRatio;
 	webcamLayoutPreset: WebcamLayoutPreset;
+	webcamMaskShape: WebcamMaskShape;
+	webcamSizePreset: WebcamSizePreset;
 	webcamPosition: WebcamPosition | null;
+	cursorHighlight: CursorHighlightConfig;
 }
 
 export const INITIAL_EDITOR_STATE: EditorState = {
@@ -40,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,
@@ -48,7 +60,10 @@ export const INITIAL_EDITOR_STATE: EditorState = {
 	padding: 50,
 	aspectRatio: "16:9",
 	webcamLayoutPreset: DEFAULT_WEBCAM_LAYOUT_PRESET,
+	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

@@ -41,12 +41,18 @@ const WEBCAM_TARGET_FRAME_RATE = 30;
 
 type UseScreenRecorderReturn = {
 	recording: boolean;
+	paused: boolean;
+	elapsedSeconds: number;
 	toggleRecording: () => void;
+	togglePaused: () => void;
 	restartRecording: () => void;
+	cancelRecording: () => void;
 	microphoneEnabled: boolean;
 	setMicrophoneEnabled: (enabled: boolean) => void;
 	microphoneDeviceId: string | undefined;
 	setMicrophoneDeviceId: (deviceId: string | undefined) => void;
+	webcamDeviceId: string | undefined;
+	setWebcamDeviceId: (deviceId: string | undefined) => void;
 	systemAudioEnabled: boolean;
 	setSystemAudioEnabled: (enabled: boolean) => void;
 	webcamEnabled: boolean;
@@ -83,8 +89,11 @@ function createRecorderHandle(stream: MediaStream, options: MediaRecorderOptions
 export function useScreenRecorder(): UseScreenRecorderReturn {
 	const t = useScopedT("editor");
 	const [recording, setRecording] = useState(false);
+	const [paused, setPaused] = useState(false);
+	const [elapsedSeconds, setElapsedSeconds] = useState(0);
 	const [microphoneEnabled, setMicrophoneEnabled] = useState(false);
 	const [microphoneDeviceId, setMicrophoneDeviceId] = useState<string | undefined>(undefined);
+	const [webcamDeviceId, setWebcamDeviceId] = useState<string | undefined>(undefined);
 	const [systemAudioEnabled, setSystemAudioEnabled] = useState(false);
 	const [webcamEnabled, setWebcamEnabledState] = useState(false);
 	const screenRecorder = useRef<RecorderHandle | null>(null);
@@ -94,19 +103,34 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 	const microphoneStream = useRef<MediaStream | null>(null);
 	const webcamStream = useRef<MediaStream | null>(null);
 	const mixingContext = useRef<AudioContext | null>(null);
-	const startTime = useRef<number>(0);
 	const recordingId = useRef<number>(0);
+	const accumulatedDurationMs = useRef(0);
+	const segmentStartedAt = useRef<number | null>(null);
 	const finalizingRecordingId = useRef<number | null>(null);
 	const allowAutoFinalize = useRef(false);
 	const discardRecordingId = useRef<number | null>(null);
 	const restarting = useRef(false);
+	const countdownRunId = useRef(0);
+	const [countdownActive, setCountdownActive] = useState(false);
+	const webcamReady = useRef(false);
+	const webcamAcquireId = useRef(0);
+
+	const getRecordingDurationMs = useCallback(() => {
+		const segmentDuration =
+			segmentStartedAt.current === null ? 0 : Date.now() - segmentStartedAt.current;
+		return accumulatedDurationMs.current + segmentDuration;
+	}, []);
 
 	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",
 		];
 
@@ -142,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.
@@ -178,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,
@@ -199,12 +298,17 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 
 			teardownMedia();
 			setRecording(false);
+			setPaused(false);
+			setElapsedSeconds(0);
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = null;
 			window.electronAPI?.setRecordingState(false);
 
 			void (async () => {
 				try {
 					const screenBlob = await activeScreenRecorder.recordedBlobPromise;
 					if (discardRecordingId.current === activeRecordingId) {
+						window.electronAPI?.discardCursorTelemetry(activeRecordingId);
 						return;
 					}
 					if (screenBlob.size === 0) {
@@ -270,7 +374,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 
 		const activeWebcamRecorder = webcamRecorder.current;
-		const duration = Date.now() - startTime.current;
+		const duration = getRecordingDurationMs();
 		const activeRecordingId = recordingId.current;
 
 		finalizeRecording(
@@ -280,7 +384,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			activeRecordingId,
 		);
 
-		if (activeScreenRecorder.recorder.state === "recording") {
+		if (
+			activeScreenRecorder.recorder.state === "recording" ||
+			activeScreenRecorder.recorder.state === "paused"
+		) {
 			try {
 				activeScreenRecorder.recorder.stop();
 			} catch {
@@ -288,7 +395,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			}
 		}
 		if (activeWebcamRecorder) {
-			if (activeWebcamRecorder.recorder.state === "recording") {
+			if (
+				activeWebcamRecorder.recorder.state === "recording" ||
+				activeWebcamRecorder.recorder.state === "paused"
+			) {
 				try {
 					activeWebcamRecorder.recorder.stop();
 				} catch {
@@ -308,19 +418,28 @@ 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;
 
-			if (screenRecorder.current?.recorder.state === "recording") {
+			if (
+				screenRecorder.current?.recorder.state === "recording" ||
+				screenRecorder.current?.recorder.state === "paused"
+			) {
 				try {
 					screenRecorder.current.recorder.stop();
 				} catch {
 					// Ignore recorder teardown errors during cleanup.
 				}
 			}
-			if (webcamRecorder.current?.recorder.state === "recording") {
+			if (
+				webcamRecorder.current?.recorder.state === "recording" ||
+				webcamRecorder.current?.recorder.state === "paused"
+			) {
 				try {
 					webcamRecorder.current.recorder.stop();
 				} catch {
@@ -333,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) {
@@ -341,6 +570,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				return;
 			}
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			let screenMediaStream: MediaStream;
 
 			const videoConstraints = {
@@ -381,6 +615,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			}
 			screenStream.current = screenMediaStream;
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			if (microphoneEnabled) {
 				try {
 					microphoneStream.current = await navigator.mediaDevices.getUserMedia({
@@ -405,25 +644,35 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				}
 			}
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			if (webcamEnabled) {
-				try {
-					webcamStream.current = await navigator.mediaDevices.getUserMedia({
-						audio: false,
-						video: {
-							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();
@@ -466,6 +715,11 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				);
 			}
 
+			if (!isCountdownRunActive(countdownRunToken)) {
+				teardownMedia();
+				return;
+			}
+
 			let {
 				width = DEFAULT_WIDTH,
 				height = DEFAULT_HEIGHT,
@@ -485,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,
@@ -508,10 +767,13 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			}
 
 			recordingId.current = Date.now();
-			startTime.current = recordingId.current;
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = Date.now();
 			allowAutoFinalize.current = true;
 			setRecording(true);
-			window.electronAPI?.setRecordingState(true);
+			setPaused(false);
+			setElapsedSeconds(0);
+			window.electronAPI?.setRecordingState(true, recordingId.current);
 
 			const activeScreenRecorder = screenRecorder.current;
 			const activeWebcamRecorder = webcamRecorder.current;
@@ -526,7 +788,7 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 						finalizeRecording(
 							activeScreenRecorder,
 							activeWebcamRecorder ?? null,
-							Math.max(0, Date.now() - startTime.current),
+							Math.max(0, getRecordingDurationMs()),
 							activeRecordingId,
 						);
 					},
@@ -542,21 +804,75 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 				toast.error(errorMsg);
 			}
 			setRecording(false);
+			setPaused(false);
+			setElapsedSeconds(0);
+			accumulatedDurationMs.current = 0;
+			segmentStartedAt.current = null;
 			screenRecorder.current = null;
 			webcamRecorder.current = null;
 			teardownMedia();
 		}
 	};
 
+	const togglePaused = () => {
+		const activeScreenRecorder = screenRecorder.current?.recorder;
+		if (!activeScreenRecorder || activeScreenRecorder.state === "inactive") {
+			return;
+		}
+
+		const activeWebcamRecorder = webcamRecorder.current?.recorder;
+
+		if (activeScreenRecorder.state === "paused") {
+			try {
+				activeScreenRecorder.resume();
+				if (activeWebcamRecorder?.state === "paused") {
+					activeWebcamRecorder.resume();
+				}
+				segmentStartedAt.current = Date.now();
+				setPaused(false);
+			} catch (error) {
+				console.error("Failed to resume recording:", error);
+			}
+			return;
+		}
+
+		if (activeScreenRecorder.state !== "recording") {
+			return;
+		}
+
+		try {
+			accumulatedDurationMs.current = getRecordingDurationMs();
+			segmentStartedAt.current = null;
+			setElapsedSeconds(Math.floor(accumulatedDurationMs.current / 1000));
+			activeScreenRecorder.pause();
+			if (activeWebcamRecorder?.state === "recording") {
+				activeWebcamRecorder.pause();
+			}
+			setPaused(true);
+		} catch (error) {
+			console.error("Failed to pause recording:", error);
+		}
+	};
+
 	const toggleRecording = () => {
-		recording ? stopRecording.current() : startRecording();
+		if (recording) {
+			stopRecording.current();
+			return;
+		}
+
+		if (countdownActive) {
+			cancelCountdown();
+			return;
+		}
+
+		void startRecordCountdown();
 	};
 
 	const restartRecording = async () => {
 		if (restarting.current) return;
 
 		const activeScreenRecorder = screenRecorder.current;
-		if (!activeScreenRecorder || activeScreenRecorder.recorder.state !== "recording") return;
+		if (!activeScreenRecorder || activeScreenRecorder.recorder.state === "inactive") return;
 
 		const activeWebcamRecorder = webcamRecorder.current;
 		const activeRecordingId = recordingId.current;
@@ -570,7 +886,10 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 			}),
 		];
 
-		if (activeWebcamRecorder?.recorder.state === "recording") {
+		if (
+			activeWebcamRecorder?.recorder.state === "recording" ||
+			activeWebcamRecorder?.recorder.state === "paused"
+		) {
 			stopPromises.push(
 				new Promise<void>((resolve) => {
 					activeWebcamRecorder.recorder.addEventListener("stop", () => resolve(), {
@@ -590,14 +909,58 @@ export function useScreenRecorder(): UseScreenRecorderReturn {
 		}
 	};
 
+	useEffect(() => {
+		if (!recording) {
+			setElapsedSeconds(0);
+			return;
+		}
+
+		setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+		if (paused) {
+			return;
+		}
+
+		const interval = window.setInterval(() => {
+			setElapsedSeconds(Math.floor(getRecordingDurationMs() / 1000));
+		}, 250);
+
+		return () => window.clearInterval(interval);
+	}, [getRecordingDurationMs, paused, recording]);
+
+	const cancelRecording = () => {
+		const activeScreenRecorder = screenRecorder.current;
+		if (
+			activeScreenRecorder?.recorder.state === "recording" ||
+			activeScreenRecorder?.recorder.state === "paused"
+		) {
+			const activeRecordingId = recordingId.current;
+			discardRecordingId.current = activeRecordingId;
+			allowAutoFinalize.current = false;
+
+			stopRecording.current();
+			return;
+		}
+
+		if (countdownActive) {
+			cancelCountdown();
+			return;
+		}
+	};
+
 	return {
 		recording,
+		paused,
+		elapsedSeconds,
 		toggleRecording,
+		togglePaused,
 		restartRecording,
+		cancelRecording,
 		microphoneEnabled,
 		setMicrophoneEnabled,
 		microphoneDeviceId,
 		setMicrophoneDeviceId,
+		webcamDeviceId,
+		setWebcamDeviceId,
 		systemAudioEnabled,
 		setSystemAudioEnabled,
 		webcamEnabled,

src/i18n/__tests__/tutorialHelpTranslations.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { type Locale, SUPPORTED_LOCALES } from "@/i18n/config";
+import arDialogs from "@/i18n/locales/ar/dialogs.json";
+import enDialogs from "@/i18n/locales/en/dialogs.json";
+import esDialogs from "@/i18n/locales/es/dialogs.json";
+import frDialogs from "@/i18n/locales/fr/dialogs.json";
+import jaJPDialogs from "@/i18n/locales/ja-JP/dialogs.json";
+import koKRDialogs from "@/i18n/locales/ko-KR/dialogs.json";
+import ruDialogs from "@/i18n/locales/ru/dialogs.json";
+import trDialogs from "@/i18n/locales/tr/dialogs.json";
+import viDialogs from "@/i18n/locales/vi/dialogs.json";
+import zhCNDialogs from "@/i18n/locales/zh-CN/dialogs.json";
+import zhTWDialogs from "@/i18n/locales/zh-TW/dialogs.json";
+
+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,
+	ru: ruDialogs,
+	"ja-JP": jaJPDialogs,
+	ar: arDialogs,
+	vi: viDialogs,
+} 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,17 @@
 export const DEFAULT_LOCALE = "en" as const;
-export const SUPPORTED_LOCALES = ["en", "zh-CN", "es"] as const;
+export const SUPPORTED_LOCALES = [
+	"en",
+	"zh-CN",
+	"zh-TW",
+	"es",
+	"fr",
+	"tr",
+	"ko-KR",
+	"ja-JP",
+	"ar",
+	"ru",
+	"vi",
+] as const;
 export const I18N_NAMESPACES = [
 	"common",
 	"dialogs",
@@ -10,7 +22,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,55 @@
+{
+	"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}} اقتراحات تكبير بناءً على المؤشر"
+	}
+}

src/i18n/locales/en/common.json

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

src/i18n/locales/en/dialogs.json

@@ -27,10 +27,11 @@
 		"triggerLabel": "How trimming works",
 		"title": "How Trimming Works",
 		"description": "Understanding how to cut out unwanted parts of your video.",
-		"explanation": "The Trim tool works by defining the segments you want to",
-		"explanationRemove": "remove",
-		"explanationCovered": "covered",
-		"explanationEnd": "by a red trim segment will be cut out when you export.",
+		"explanationBefore": "The Trim tool works by defining the segments you want to",
+		"remove": "remove",
+		"explanationMiddle": " — anything",
+		"covered": "covered",
+		"explanationAfter": "by a red trim segment will be cut out when you export.",
 		"visualExample": "Visual Example",
 		"removed": "REMOVED",
 		"kept": "Kept",
@@ -39,7 +40,9 @@
 		"part3": "Part 3",
 		"finalVideo": "Final Video",
 		"step1Title": "1. Add Trim",
-		"step1Description": "Press T or click the scissors icon to mark a section for removal.",
+		"step1DescriptionBefore": "Press ",
+		"step1DescriptionAfter": " or click the scissors icon to mark a section for removal.",
+
 		"step2Title": "2. Adjust",
 		"step2Description": "Drag the edges of the red region to cover exactly what you want to cut out."
 	},

src/i18n/locales/en/editor.json

@@ -1,4 +1,11 @@
 {
+	"newRecording": {
+		"title": "Return to Recorder",
+		"description": "Your current session has been saved.",
+		"cancel": "Cancel",
+		"confirm": "Confirm"
+	},
+	"loadingVideo": "Loading video...",
 	"errors": {
 		"noVideoLoaded": "No video loaded",
 		"videoNotReady": "Video not ready",
@@ -8,6 +15,7 @@
 		"failedToSaveVideo": "Failed to save video",
 		"exportFailed": "Export failed",
 		"exportFailedWithError": "Export failed: {{error}}",
+		"exportBackgroundLoadFailed": "Export failed: could not load background image ({{url}})",
 		"failedToSaveExport": "Failed to save export",
 		"failedToSaveExportedVideo": "Failed to save exported video",
 		"failedToRevealInFolder": "Error revealing in folder: {{error}}"
@@ -30,6 +38,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

@@ -3,6 +3,9 @@
 		"hideHUD": "Hide HUD",
 		"closeApp": "Close App",
 		"restartRecording": "Restart recording",
+		"cancelRecording": "Cancel recording",
+		"pauseRecording": "Pause recording",
+		"resumeRecording": "Resume recording",
 		"openVideoFile": "Open video file",
 		"openProject": "Open project"
 	},
@@ -10,11 +13,16 @@
 		"enableSystemAudio": "Enable system audio",
 		"disableSystemAudio": "Disable system audio",
 		"enableMicrophone": "Enable microphone",
-		"disableMicrophone": "Disable microphone"
+		"disableMicrophone": "Disable microphone",
+		"defaultMicrophone": "Default Microphone"
 	},
 	"webcam": {
 		"enableWebcam": "Enable webcam",
-		"disableWebcam": "Disable webcam"
+		"disableWebcam": "Disable webcam",
+		"defaultCamera": "Default Camera",
+		"searching": "Searching...",
+		"noneFound": "No camera found",
+		"unavailable": "Camera unavailable"
 	},
 	"sourceSelector": {
 		"loading": "Loading sources...",
@@ -25,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

@@ -1,13 +1,36 @@
 {
 	"zoom": {
 		"level": "Zoom Level",
+		"customScale": "Custom Zoom",
 		"selectRegion": "Select a zoom region to adjust",
-		"deleteZoom": "Delete Zoom"
+		"deleteZoom": "Delete Zoom",
+		"focusMode": {
+			"title": "Focus Mode",
+			"manual": "Manual",
+			"auto": "Auto",
+			"autoDescription": "Camera follows the recorded cursor position"
+		},
+		"threeD": {
+			"title": "3D Rotation",
+			"preset": {
+				"iso": "Iso",
+				"left": "Left",
+				"right": "Right"
+			}
+		},
+		"position": {
+			"title": "Focus Position",
+			"x": "X (%)",
+			"y": "Y (%)",
+			"hint": "0 = leftmost / topmost, 100 = rightmost / bottommost"
+		}
 	},
 	"speed": {
 		"playbackSpeed": "Playback Speed",
 		"selectRegion": "Select a speed region to adjust",
-		"deleteRegion": "Delete Speed Region"
+		"deleteRegion": "Delete Speed Region",
+		"customPlaybackSpeed": "Custom Playback Speed",
+		"maxSpeedError": "Speed can't go higher than 16×"
 	},
 	"trim": {
 		"deleteRegion": "Delete Trim Region"
@@ -17,16 +40,34 @@
 		"preset": "Preset",
 		"selectPreset": "Select preset",
 		"pictureInPicture": "Picture in Picture",
-		"verticalStack": "Vertical Stack"
+		"verticalStack": "Vertical Stack",
+		"dualFrame": "Dual Frame",
+		"noWebcam": "No Webcam",
+		"webcamShape": "Camera Shape",
+		"webcamSize": "Webcam Size"
 	},
 	"effects": {
 		"title": "Video Effects",
 		"blurBg": "Blur BG",
 		"motionBlur": "Motion Blur",
 		"off": "off",
+		"on": "on",
 		"shadow": "Shadow",
 		"roundness": "Roundness",
-		"padding": "Padding"
+		"padding": "Padding",
+		"cursorHighlight": {
+			"title": "Cursor highlight",
+			"style": "Style",
+			"dot": "Dot",
+			"ring": "Ring",
+			"size": "Size",
+			"onlyOnClicks": "Only on clicks",
+			"color": "Color",
+			"offsetX": "Offset X (window recordings)",
+			"offsetY": "Offset Y",
+			"accessibilityPermissionTitle": "Accessibility permission needed",
+			"accessibilityPermissionDescription": "Open System Settings → Privacy & Security → Accessibility, enable Openscreen, then restart the app."
+		}
 	},
 	"background": {
 		"title": "Background",
@@ -34,7 +75,9 @@
 		"color": "Color",
 		"gradient": "Gradient",
 		"uploadCustom": "Upload Custom",
-		"gradientLabel": "Gradient {{index}}"
+		"gradientLabel": "Gradient {{index}}",
+		"colorWheel": "Color Wheel",
+		"colorPalette": "Color Palette"
 	},
 	"crop": {
 		"title": "Crop",
@@ -91,6 +134,7 @@
 		"typeText": "Text",
 		"typeImage": "Image",
 		"typeArrow": "Arrow",
+		"typeBlur": "Blur",
 		"textContent": "Text Content",
 		"textPlaceholder": "Enter your text...",
 		"fontStyle": "Font Style",
@@ -101,12 +145,26 @@
 		"background": "Background",
 		"none": "None",
 		"color": "Color",
+		"colorWheel": "Color Wheel",
+		"colorPalette": "Color Palette",
 		"clearBackground": "Clear Background",
 		"uploadImage": "Upload Image",
 		"supportedFormats": "Supported formats: JPG, PNG, GIF, WebP",
 		"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",
 		"deleteAnnotation": "Delete Annotation",
 		"shortcutsAndTips": "Shortcuts & Tips",
 		"tipMovePlayhead": "Move playhead to overlapping annotation section and select an item.",

src/i18n/locales/en/shortcuts.json

@@ -18,6 +18,7 @@
 		"addTrim": "Add Trim",
 		"addSpeed": "Add Speed",
 		"addAnnotation": "Add Annotation",
+		"addBlur": "Add Blur",
 		"addKeyframe": "Add Keyframe",
 		"deleteSelected": "Delete Selected",
 		"playPause": "Play / Pause"
@@ -29,6 +30,8 @@
 		"cycleAnnotationsBackward": "Cycle Annotations Backward",
 		"deleteSelectedAlt": "Delete Selected (alt)",
 		"panTimeline": "Pan Timeline",
-		"zoomTimeline": "Zoom Timeline"
+		"zoomTimeline": "Zoom Timeline",
+		"frameBack": "Frame Back",
+		"frameForward": "Frame Forward"
 	}
 }

src/i18n/locales/en/timeline.json

@@ -4,21 +4,26 @@
 		"suggestZooms": "Suggest Zooms from Cursor",
 		"addTrim": "Add Trim (T)",
 		"addAnnotation": "Add Annotation (A)",
+		"addBlur": "Add Blur (B)",
 		"addSpeed": "Add Speed (S)"
 	},
 	"hints": {
 		"pressZoom": "Press Z to add zoom",
 		"pressTrim": "Press T to add trim",
 		"pressAnnotation": "Press A to add annotation",
+		"pressBlur": "Press B to add blur region",
 		"pressSpeed": "Press S to add speed"
 	},
 	"labels": {
 		"pan": "Pan",
 		"zoom": "Zoom",
+		"trim": "Trim",
+		"speed": "Speed",
 		"zoomItem": "Zoom {{index}}",
 		"trimItem": "Trim {{index}}",
 		"speedItem": "Speed {{index}}",
 		"annotationItem": "Annotation",
+		"blurItem": "Blur {{index}}",
 		"imageItem": "Image",
 		"emptyText": "Empty text"
 	},

src/i18n/locales/es/common.json

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

src/i18n/locales/es/dialogs.json

@@ -27,10 +27,11 @@
 		"triggerLabel": "Cómo funciona el recorte",
 		"title": "Cómo funciona el recorte",
 		"description": "Aprende a eliminar las partes no deseadas de tu video.",
-		"explanation": "La herramienta de recorte funciona definiendo los segmentos que deseas",
-		"explanationRemove": "eliminar",
-		"explanationCovered": "cubierto",
-		"explanationEnd": "por un segmento rojo de recorte será eliminado al exportar.",
+		"explanationBefore": "La herramienta de recorte funciona definiendo los segmentos que deseas",
+		"remove": "eliminar",
+		"explanationMiddle": " — cualquier parte",
+		"covered": "cubierta",
+		"explanationAfter": "por un segmento rojo será eliminada al exportar.",
 		"visualExample": "Ejemplo visual",
 		"removed": "ELIMINADO",
 		"kept": "Conservado",
@@ -39,7 +40,8 @@
 		"part3": "Parte 3",
 		"finalVideo": "Video final",
 		"step1Title": "1. Agregar recorte",
-		"step1Description": "Presiona T o haz clic en el ícono de tijeras para marcar una sección a eliminar.",
+		"step1DescriptionBefore": "Presiona ",
+		"step1DescriptionAfter": " o haz clic en el ícono de tijeras para marcar una sección a eliminar.",
 		"step2Title": "2. Ajustar",
 		"step2Description": "Arrastra los bordes de la región roja para cubrir exactamente lo que deseas eliminar."
 	},

src/i18n/locales/es/editor.json

@@ -8,6 +8,7 @@
 		"failedToSaveVideo": "Error al guardar el video",
 		"exportFailed": "La exportación falló",
 		"exportFailedWithError": "La exportación falló: {{error}}",
+		"exportBackgroundLoadFailed": "La exportación falló: no se pudo cargar la imagen de fondo ({{url}})",
 		"failedToSaveExport": "Error al guardar la exportación",
 		"failedToSaveExportedVideo": "Error al guardar el video exportado",
 		"failedToRevealInFolder": "Error al mostrar en la carpeta: {{error}}"
@@ -30,6 +31,15 @@
 		"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."
+	},
+	"loadingVideo": "Cargando video...",
+	"newRecording": {
+		"title": "Volver a la grabadora",
+		"description": "Tu sesión actual ha sido guardada.",
+		"cancel": "Cancelar",
+		"confirm": "Confirmar"
 	}
 }

src/i18n/locales/es/launch.json

@@ -3,6 +3,9 @@
 		"hideHUD": "Ocultar HUD",
 		"closeApp": "Cerrar aplicación",
 		"restartRecording": "Reiniciar grabación",
+		"cancelRecording": "Cancelar grabación",
+		"pauseRecording": "Pausar grabación",
+		"resumeRecording": "Reanudar grabación",
 		"openVideoFile": "Abrir archivo de video",
 		"openProject": "Abrir proyecto"
 	},
@@ -10,11 +13,16 @@
 		"enableSystemAudio": "Activar audio del sistema",
 		"disableSystemAudio": "Desactivar audio del sistema",
 		"enableMicrophone": "Activar micrófono",
-		"disableMicrophone": "Desactivar micrófono"
+		"disableMicrophone": "Desactivar micrófono",
+		"defaultMicrophone": "Micrófono predeterminado"
 	},
 	"webcam": {
 		"enableWebcam": "Activar cámara web",
-		"disableWebcam": "Desactivar cámara web"
+		"disableWebcam": "Desactivar cámara web",
+		"defaultCamera": "Cámara predeterminada",
+		"searching": "Buscando...",
+		"noneFound": "No se encontró cámara",
+		"unavailable": "Cámara no disponible"
 	},
 	"sourceSelector": {
 		"loading": "Cargando fuentes...",
@@ -25,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

@@ -2,12 +2,28 @@
 	"zoom": {
 		"level": "Nivel de zoom",
 		"selectRegion": "Selecciona una región de zoom para ajustar",
-		"deleteZoom": "Eliminar zoom"
+		"deleteZoom": "Eliminar zoom",
+		"focusMode": {
+			"title": "Modo de enfoque",
+			"manual": "Manual",
+			"auto": "Auto",
+			"autoDescription": "La cámara sigue la posición del cursor grabado"
+		},
+		"threeD": {
+			"title": "Rotación 3D",
+			"preset": {
+				"iso": "Iso",
+				"left": "Izquierda",
+				"right": "Derecha"
+			}
+		}
 	},
 	"speed": {
 		"playbackSpeed": "Velocidad de reproducción",
 		"selectRegion": "Selecciona una región de velocidad para ajustar",
-		"deleteRegion": "Eliminar región de velocidad"
+		"deleteRegion": "Eliminar región de velocidad",
+		"customPlaybackSpeed": "Velocidad personalizada",
+		"maxSpeedError": "La velocidad no puede superar 16×"
 	},
 	"trim": {
 		"deleteRegion": "Eliminar región de recorte"
@@ -17,7 +33,10 @@
 		"preset": "Predefinido",
 		"selectPreset": "Seleccionar predefinido",
 		"pictureInPicture": "Imagen en imagen",
-		"verticalStack": "Apilado vertical"
+		"verticalStack": "Apilado vertical",
+		"dualFrame": "Marco dual",
+		"webcamShape": "Forma de cámara",
+		"webcamSize": "Tamaño de cámara"
 	},
 	"effects": {
 		"title": "Efectos de video",
@@ -34,7 +53,9 @@
 		"color": "Color",
 		"gradient": "Degradado",
 		"uploadCustom": "Subir personalizado",
-		"gradientLabel": "Degradado {{index}}"
+		"gradientLabel": "Degradado {{index}}",
+		"colorWheel": "Rueda de colores",
+		"colorPalette": "Paleta de colores"
 	},
 	"crop": {
 		"title": "Recortar",
@@ -91,6 +112,7 @@
 		"typeText": "Texto",
 		"typeImage": "Imagen",
 		"typeArrow": "Flecha",
+		"typeBlur": "Desenfoque",
 		"textContent": "Contenido de texto",
 		"textPlaceholder": "Escribe tu texto...",
 		"fontStyle": "Estilo de fuente",
@@ -101,12 +123,26 @@
 		"background": "Fondo",
 		"none": "Ninguno",
 		"color": "Color",
+		"colorWheel": "Rueda de colores",
+		"colorPalette": "Paleta de colores",
 		"clearBackground": "Quitar fondo",
 		"uploadImage": "Subir imagen",
 		"supportedFormats": "Formatos compatibles: JPG, PNG, GIF, WebP",
 		"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",
 		"deleteAnnotation": "Eliminar anotación",
 		"shortcutsAndTips": "Atajos y consejos",
 		"tipMovePlayhead": "Mueve el cabezal de reproducción a la sección de anotación superpuesta y selecciona un elemento.",

src/i18n/locales/es/shortcuts.json

@@ -18,6 +18,7 @@
 		"addTrim": "Agregar recorte",
 		"addSpeed": "Agregar velocidad",
 		"addAnnotation": "Agregar anotación",
+		"addBlur": "Agregar desenfoque",
 		"addKeyframe": "Agregar fotograma clave",
 		"deleteSelected": "Eliminar seleccionado",
 		"playPause": "Reproducir / Pausar"
@@ -29,6 +30,8 @@
 		"cycleAnnotationsBackward": "Recorrer anotaciones hacia atrás",
 		"deleteSelectedAlt": "Eliminar seleccionado (alt)",
 		"panTimeline": "Desplazar línea de tiempo",
-		"zoomTimeline": "Zoom en línea de tiempo"
+		"zoomTimeline": "Zoom en línea de tiempo",
+		"frameBack": "Fotograma anterior",
+		"frameForward": "Fotograma siguiente"
 	}
 }

src/i18n/locales/es/timeline.json

@@ -4,23 +4,28 @@
 		"suggestZooms": "Sugerir zooms desde el cursor",
 		"addTrim": "Agregar recorte (T)",
 		"addAnnotation": "Agregar anotación (A)",
-		"addSpeed": "Agregar velocidad (S)"
+		"addSpeed": "Agregar velocidad (S)",
+		"addBlur": "Agregar desenfoque (B)"
 	},
 	"hints": {
 		"pressZoom": "Presiona Z para agregar zoom",
 		"pressTrim": "Presiona T para agregar recorte",
 		"pressAnnotation": "Presiona A para agregar anotación",
-		"pressSpeed": "Presiona S para agregar velocidad"
+		"pressSpeed": "Presiona S para agregar velocidad",
+		"pressBlur": "Presiona B para agregar una región de desenfoque"
 	},
 	"labels": {
 		"pan": "Desplazar",
 		"zoom": "Zoom",
+		"trim": "Recortar",
+		"speed": "Velocidad",
 		"zoomItem": "Zoom {{index}}",
 		"trimItem": "Recorte {{index}}",
 		"speedItem": "Velocidad {{index}}",
 		"annotationItem": "Anotación",
 		"imageItem": "Imagen",
-		"emptyText": "Texto vacío"
+		"emptyText": "Texto vacío",
+		"blurItem": "Desenfoque {{index}}"
 	},
 	"emptyState": {
 		"noVideo": "No hay video cargado",

src/i18n/locales/fr/common.json

@@ -0,0 +1,30 @@
+{
+	"actions": {
+		"cancel": "Annuler",
+		"save": "Enregistrer",
+		"delete": "Supprimer",
+		"close": "Fermer",
+		"share": "Partager",
+		"done": "Terminer",
+		"open": "Ouvrir",
+		"upload": "Téléverser",
+		"export": "Exporter",
+		"showInFolder": "Afficher dans le dossier",
+		"file": "Fichier",
+		"edit": "Éditer",
+		"view": "Affichage",
+		"window": "Fenêtre",
+		"quit": "Quitter",
+		"stopRecording": "Arrêter l'enregistrement"
+	},
+	"playback": {
+		"play": "Lecture",
+		"pause": "Pause",
+		"fullscreen": "Plein écran",
+		"exitFullscreen": "Quitter le plein écran"
+	},
+	"locale": {
+		"name": "Français",
+		"short": "FR"
+	}
+}