fix: final homebrew cask style + audit cleanup

- Drop unnecessary verified: stanza (URL host matches homepage host).
- Add blank line between sha256 and url inside on_arm/on_intel
  (rubocop treats them as separate stanza groups).
- Keep no blank line between on_arm and on_intel blocks
  (same outer stanza group).

After re-running the bump workflow, the cask passes both
brew audit --cask and brew style --cask cleanly.

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

.editorconfig

@@ -0,0 +1,14 @@
+root = true
+
+[*]
+indent_style = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.{json,yml,yaml}]
+indent_size = 2
+
+[*.md]
+trim_trailing_whitespace = false

.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

.eslintrc.cjs

@@ -1,18 +0,0 @@
-module.exports = {
-  root: true,
-  env: { browser: true, es2020: true },
-  extends: [
-    'eslint:recommended',
-    'plugin:@typescript-eslint/recommended',
-    'plugin:react-hooks/recommended',
-  ],
-  ignorePatterns: ['dist', '.eslintrc.cjs'],
-  parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh'],
-  rules: {
-    'react-refresh/only-export-components': [
-      'warn',
-      { allowConstantExport: true },
-    ],
-  },
-}

.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

@@ -0,0 +1,58 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [main]
+  push:
+    branches: [main]
+
+jobs:
+  lint:
+    name: Lint
+    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 lint
+
+  typecheck:
+    name: Type Check
+    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 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
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+      - run: npm ci
+      - run: npx vite build

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

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

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.nvmrc

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

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,22 +28,21 @@ 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/preview.png" alt="OpenScreen App Preview" style="height: 320px; margin-right: 12px;" />
-	<img src="public/preview2.png" alt="OpenScreen App Preview 2" style="height: 320px; margin-right: 12px;" />
-	<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 apps
-- Add manual zooms (customizable depth levels)
-- Customize the duration and position of zooms however you please
-- Crop video recordings to hide parts
-- Choose between wallpapers, solid colors, gradients or your own picture for your background
-- Motion blur for smoother pan and zoom effects
-- Add annotations (text, arrows, images)
-- Trim sections of the clip
-- Export in different aspect ratios and resolutions
+- 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 the speed of different segments.
+- Export in different aspect ratios and resolutions.
 
 ## Installation
 
@@ -50,6 +56,8 @@ If you encounter issues with macOS Gatekeeper blocking the app (since it does no
 xattr -rd com.apple.quarantine /Applications/Openscreen.app
 ```
 
+Note: Give your terminal Full Disk Access in **System Settings > Privacy & Security** to grant you access and then run the above command.
+
 After running this command, proceed to **System Preferences > Security & Privacy** to grant the necessary permissions for "screen recording" and "accessibility". Once permissions are granted, you can launch the app.
 
 ### Linux
@@ -63,6 +71,19 @@ chmod +x Openscreen-Linux-*.AppImage
 
 You may need to grant screen recording permissions depending on your desktop environment.
 
+**Note:** If the app fails to launch due to a "sandbox" error, run it with --no-sandbox:
+```bash
+./Openscreen-Linux-*.AppImage --no-sandbox
+```
+
+### Limitations
+
+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 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 work).
+
 ## Built with
 - Electron
 - React
@@ -75,10 +96,25 @@ You may need to grant screen recording permissions depending on your desktop env
 
 _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

@@ -0,0 +1,134 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
+	"vcs": { "enabled": true, "clientKind": "git", "useIgnoreFile": true },
+	"files": { "ignoreUnknown": false, "includes": ["**", "!**/*.css"] },
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab",
+		"formatWithErrors": true,
+		"lineEnding": "lf",
+		"lineWidth": 100,
+		"attributePosition": "auto"
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": false,
+			"complexity": {
+				"noAdjacentSpacesInRegex": "error",
+				"noBannedTypes": "error",
+				"noExtraBooleanCast": "error",
+				"noUselessCatch": "error",
+				"noUselessEscapeInRegex": "error",
+				"noUselessThisAlias": "error",
+				"noUselessTypeConstraint": "error"
+			},
+			"correctness": {
+				"noConstAssign": "error",
+				"noConstantCondition": "error",
+				"noEmptyCharacterClassInRegex": "error",
+				"noEmptyPattern": "error",
+				"noGlobalObjectCalls": "error",
+				"noInnerDeclarations": "error",
+				"noInvalidConstructorSuper": "error",
+				"noNonoctalDecimalEscape": "error",
+				"noPrecisionLoss": "error",
+				"noSelfAssign": "error",
+				"noSetterReturn": "error",
+				"noSwitchDeclarations": "error",
+				"noUndeclaredVariables": "error",
+				"noUnreachable": "error",
+				"noUnreachableSuper": "error",
+				"noUnsafeFinally": "error",
+				"noUnsafeOptionalChaining": "error",
+				"noUnusedLabels": "error",
+				"noUnusedVariables": "error",
+				"useExhaustiveDependencies": "warn",
+				"useHookAtTopLevel": "error",
+				"useIsNan": "error",
+				"useValidForDirection": "error",
+				"useValidTypeof": "error",
+				"useYield": "error"
+			},
+			"style": {
+				"noNamespace": "off",
+				"useArrayLiterals": "error",
+				"useAsConstAssertion": "error",
+				"useComponentExportOnlyModules": "off"
+			},
+			"suspicious": {
+				"noAssignInExpressions": "error",
+				"noAsyncPromiseExecutor": "error",
+				"noCatchAssign": "error",
+				"noClassAssign": "error",
+				"noCompareNegZero": "error",
+				"noControlCharactersInRegex": "error",
+				"noDebugger": "error",
+				"noDuplicateCase": "error",
+				"noDuplicateClassMembers": "error",
+				"noDuplicateElseIf": "error",
+				"noDuplicateObjectKeys": "error",
+				"noDuplicateParameters": "error",
+				"noEmptyBlockStatements": "warn",
+				"noExplicitAny": "warn",
+				"noExtraNonNullAssertion": "error",
+				"noFallthroughSwitchClause": "error",
+				"noFunctionAssign": "error",
+				"noGlobalAssign": "error",
+				"noImportAssign": "error",
+				"noIrregularWhitespace": "error",
+				"noMisleadingCharacterClass": "error",
+				"noMisleadingInstantiator": "error",
+				"noNonNullAssertedOptionalChain": "error",
+				"noPrototypeBuiltins": "error",
+				"noRedeclare": "error",
+				"noShadowRestrictedNames": "error",
+				"noSparseArray": "error",
+				"noTsIgnore": "error",
+				"noUnsafeDeclarationMerging": "error",
+				"noUnsafeNegation": "error",
+				"noUselessRegexBackrefs": "error",
+				"noWith": "error",
+				"useGetterReturn": "error"
+			}
+		},
+		"includes": ["**", "**/dist", "**/.eslintrc.cjs", "!**/*.css"]
+	},
+	"javascript": { "formatter": { "quoteStyle": "double" } },
+	"overrides": [
+		{
+			"includes": ["*.ts", "*.tsx", "*.mts", "*.cts"],
+			"linter": {
+				"rules": {
+					"complexity": { "noArguments": "error" },
+					"correctness": {
+						"noConstAssign": "off",
+						"noGlobalObjectCalls": "off",
+						"noInvalidBuiltinInstantiation": "off",
+						"noInvalidConstructorSuper": "off",
+						"noSetterReturn": "off",
+						"noUndeclaredVariables": "off",
+						"noUnreachable": "off",
+						"noUnreachableSuper": "off"
+					},
+					"style": { "useConst": "error" },
+					"suspicious": {
+						"noDuplicateClassMembers": "off",
+						"noDuplicateObjectKeys": "off",
+						"noDuplicateParameters": "off",
+						"noFunctionAssign": "off",
+						"noImportAssign": "off",
+						"noRedeclare": "off",
+						"noUnsafeNegation": "off",
+						"noVar": "error",
+						"useGetterReturn": "off"
+					}
+				}
+			}
+		}
+	],
+	"assist": {
+		"enabled": true,
+		"actions": { "source": { "organizeImports": "on" } }
+	}
+}

components.json

@@ -1,22 +1,22 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": false,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.cjs",
-    "css": "src/index.css",
-    "baseColor": "stone",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "iconLibrary": "lucide",
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "registries": {}
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.cjs",
+		"css": "src/index.css",
+		"baseColor": "stone",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"iconLibrary": "lucide",
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"registries": {}
 }

dist-electron/main.js

@@ -1,422 +0,0 @@
-import { ipcMain, screen, BrowserWindow, desktopCapturer, shell, app, dialog, nativeImage, Tray, Menu } from "electron";
-import { fileURLToPath } from "node:url";
-import path from "node:path";
-import fs from "node:fs/promises";
-const __dirname$1 = path.dirname(fileURLToPath(import.meta.url));
-const APP_ROOT = path.join(__dirname$1, "..");
-const VITE_DEV_SERVER_URL$1 = process.env["VITE_DEV_SERVER_URL"];
-const RENDERER_DIST$1 = path.join(APP_ROOT, "dist");
-let hudOverlayWindow = null;
-ipcMain.on("hud-overlay-hide", () => {
-  if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
-    hudOverlayWindow.minimize();
-  }
-});
-function createHudOverlayWindow() {
-  const primaryDisplay = screen.getPrimaryDisplay();
-  const { workArea } = primaryDisplay;
-  const windowWidth = 500;
-  const windowHeight = 100;
-  const x = Math.floor(workArea.x + (workArea.width - windowWidth) / 2);
-  const y = Math.floor(workArea.y + workArea.height - windowHeight - 5);
-  const win = new BrowserWindow({
-    width: windowWidth,
-    height: windowHeight,
-    minWidth: 500,
-    maxWidth: 500,
-    minHeight: 100,
-    maxHeight: 100,
-    x,
-    y,
-    frame: false,
-    transparent: true,
-    resizable: false,
-    alwaysOnTop: true,
-    skipTaskbar: true,
-    hasShadow: false,
-    webPreferences: {
-      preload: path.join(__dirname$1, "preload.mjs"),
-      nodeIntegration: false,
-      contextIsolation: true,
-      backgroundThrottling: false
-    }
-  });
-  win.webContents.on("did-finish-load", () => {
-    win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
-  });
-  hudOverlayWindow = win;
-  win.on("closed", () => {
-    if (hudOverlayWindow === win) {
-      hudOverlayWindow = null;
-    }
-  });
-  if (VITE_DEV_SERVER_URL$1) {
-    win.loadURL(VITE_DEV_SERVER_URL$1 + "?windowType=hud-overlay");
-  } else {
-    win.loadFile(path.join(RENDERER_DIST$1, "index.html"), {
-      query: { windowType: "hud-overlay" }
-    });
-  }
-  return win;
-}
-function createEditorWindow() {
-  const isMac = process.platform === "darwin";
-  const win = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    minWidth: 800,
-    minHeight: 600,
-    ...isMac && {
-      titleBarStyle: "hiddenInset",
-      trafficLightPosition: { x: 12, y: 12 }
-    },
-    transparent: false,
-    resizable: true,
-    alwaysOnTop: false,
-    skipTaskbar: false,
-    title: "OpenScreen",
-    backgroundColor: "#000000",
-    webPreferences: {
-      preload: path.join(__dirname$1, "preload.mjs"),
-      nodeIntegration: false,
-      contextIsolation: true,
-      webSecurity: false,
-      backgroundThrottling: false
-    }
-  });
-  win.maximize();
-  win.webContents.on("did-finish-load", () => {
-    win == null ? void 0 : win.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
-  });
-  if (VITE_DEV_SERVER_URL$1) {
-    win.loadURL(VITE_DEV_SERVER_URL$1 + "?windowType=editor");
-  } else {
-    win.loadFile(path.join(RENDERER_DIST$1, "index.html"), {
-      query: { windowType: "editor" }
-    });
-  }
-  return win;
-}
-function createSourceSelectorWindow() {
-  const { width, height } = screen.getPrimaryDisplay().workAreaSize;
-  const win = new BrowserWindow({
-    width: 620,
-    height: 420,
-    minHeight: 350,
-    maxHeight: 500,
-    x: Math.round((width - 620) / 2),
-    y: Math.round((height - 420) / 2),
-    frame: false,
-    resizable: false,
-    alwaysOnTop: true,
-    transparent: true,
-    backgroundColor: "#00000000",
-    webPreferences: {
-      preload: path.join(__dirname$1, "preload.mjs"),
-      nodeIntegration: false,
-      contextIsolation: true
-    }
-  });
-  if (VITE_DEV_SERVER_URL$1) {
-    win.loadURL(VITE_DEV_SERVER_URL$1 + "?windowType=source-selector");
-  } else {
-    win.loadFile(path.join(RENDERER_DIST$1, "index.html"), {
-      query: { windowType: "source-selector" }
-    });
-  }
-  return win;
-}
-let selectedSource = null;
-function registerIpcHandlers(createEditorWindow2, createSourceSelectorWindow2, getMainWindow, getSourceSelectorWindow, onRecordingStateChange) {
-  ipcMain.handle("get-sources", async (_, opts) => {
-    const sources = await desktopCapturer.getSources(opts);
-    return sources.map((source) => ({
-      id: source.id,
-      name: source.name,
-      display_id: source.display_id,
-      thumbnail: source.thumbnail ? source.thumbnail.toDataURL() : null,
-      appIcon: source.appIcon ? source.appIcon.toDataURL() : null
-    }));
-  });
-  ipcMain.handle("select-source", (_, source) => {
-    selectedSource = source;
-    const sourceSelectorWin = getSourceSelectorWindow();
-    if (sourceSelectorWin) {
-      sourceSelectorWin.close();
-    }
-    return selectedSource;
-  });
-  ipcMain.handle("get-selected-source", () => {
-    return selectedSource;
-  });
-  ipcMain.handle("open-source-selector", () => {
-    const sourceSelectorWin = getSourceSelectorWindow();
-    if (sourceSelectorWin) {
-      sourceSelectorWin.focus();
-      return;
-    }
-    createSourceSelectorWindow2();
-  });
-  ipcMain.handle("switch-to-editor", () => {
-    const mainWin = getMainWindow();
-    if (mainWin) {
-      mainWin.close();
-    }
-    createEditorWindow2();
-  });
-  ipcMain.handle("store-recorded-video", async (_, videoData, fileName) => {
-    try {
-      const videoPath = path.join(RECORDINGS_DIR, fileName);
-      await fs.writeFile(videoPath, Buffer.from(videoData));
-      currentVideoPath = videoPath;
-      return {
-        success: true,
-        path: videoPath,
-        message: "Video stored successfully"
-      };
-    } catch (error) {
-      console.error("Failed to store video:", error);
-      return {
-        success: false,
-        message: "Failed to store video",
-        error: String(error)
-      };
-    }
-  });
-  ipcMain.handle("get-recorded-video-path", async () => {
-    try {
-      const files = await fs.readdir(RECORDINGS_DIR);
-      const videoFiles = files.filter((file) => file.endsWith(".webm"));
-      if (videoFiles.length === 0) {
-        return { success: false, message: "No recorded video found" };
-      }
-      const latestVideo = videoFiles.sort().reverse()[0];
-      const videoPath = path.join(RECORDINGS_DIR, latestVideo);
-      return { success: true, path: videoPath };
-    } catch (error) {
-      console.error("Failed to get video path:", error);
-      return { success: false, message: "Failed to get video path", error: String(error) };
-    }
-  });
-  ipcMain.handle("set-recording-state", (_, recording) => {
-    const source = selectedSource || { name: "Screen" };
-    if (onRecordingStateChange) {
-      onRecordingStateChange(recording, source.name);
-    }
-  });
-  ipcMain.handle("open-external-url", async (_, url) => {
-    try {
-      await shell.openExternal(url);
-      return { success: true };
-    } catch (error) {
-      console.error("Failed to open URL:", error);
-      return { success: false, error: String(error) };
-    }
-  });
-  ipcMain.handle("get-asset-base-path", () => {
-    try {
-      if (app.isPackaged) {
-        return path.join(process.resourcesPath, "assets");
-      }
-      return path.join(app.getAppPath(), "public", "assets");
-    } catch (err) {
-      console.error("Failed to resolve asset base path:", err);
-      return null;
-    }
-  });
-  ipcMain.handle("save-exported-video", async (_, videoData, fileName) => {
-    try {
-      const isGif = fileName.toLowerCase().endsWith(".gif");
-      const filters = isGif ? [{ name: "GIF Image", extensions: ["gif"] }] : [{ name: "MP4 Video", extensions: ["mp4"] }];
-      const result = await dialog.showSaveDialog({
-        title: isGif ? "Save Exported GIF" : "Save Exported Video",
-        defaultPath: path.join(app.getPath("downloads"), fileName),
-        filters,
-        properties: ["createDirectory", "showOverwriteConfirmation"]
-      });
-      if (result.canceled || !result.filePath) {
-        return {
-          success: false,
-          cancelled: true,
-          message: "Export cancelled"
-        };
-      }
-      await fs.writeFile(result.filePath, Buffer.from(videoData));
-      return {
-        success: true,
-        path: result.filePath,
-        message: "Video exported successfully"
-      };
-    } catch (error) {
-      console.error("Failed to save exported video:", error);
-      return {
-        success: false,
-        message: "Failed to save exported video",
-        error: String(error)
-      };
-    }
-  });
-  ipcMain.handle("open-video-file-picker", async () => {
-    try {
-      const result = await dialog.showOpenDialog({
-        title: "Select Video File",
-        defaultPath: RECORDINGS_DIR,
-        filters: [
-          { name: "Video Files", extensions: ["webm", "mp4", "mov", "avi", "mkv"] },
-          { name: "All Files", extensions: ["*"] }
-        ],
-        properties: ["openFile"]
-      });
-      if (result.canceled || result.filePaths.length === 0) {
-        return { success: false, cancelled: true };
-      }
-      return {
-        success: true,
-        path: result.filePaths[0]
-      };
-    } catch (error) {
-      console.error("Failed to open file picker:", error);
-      return {
-        success: false,
-        message: "Failed to open file picker",
-        error: String(error)
-      };
-    }
-  });
-  let currentVideoPath = null;
-  ipcMain.handle("set-current-video-path", (_, path2) => {
-    currentVideoPath = path2;
-    return { success: true };
-  });
-  ipcMain.handle("get-current-video-path", () => {
-    return currentVideoPath ? { success: true, path: currentVideoPath } : { success: false };
-  });
-  ipcMain.handle("clear-current-video-path", () => {
-    currentVideoPath = null;
-    return { success: true };
-  });
-  ipcMain.handle("get-platform", () => {
-    return process.platform;
-  });
-}
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const RECORDINGS_DIR = path.join(app.getPath("userData"), "recordings");
-async function ensureRecordingsDir() {
-  try {
-    await fs.mkdir(RECORDINGS_DIR, { recursive: true });
-    console.log("RECORDINGS_DIR:", RECORDINGS_DIR);
-    console.log("User Data Path:", app.getPath("userData"));
-  } catch (error) {
-    console.error("Failed to create recordings directory:", error);
-  }
-}
-process.env.APP_ROOT = path.join(__dirname, "..");
-const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
-const MAIN_DIST = path.join(process.env.APP_ROOT, "dist-electron");
-const RENDERER_DIST = path.join(process.env.APP_ROOT, "dist");
-process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, "public") : RENDERER_DIST;
-let mainWindow = null;
-let sourceSelectorWindow = null;
-let tray = null;
-let selectedSourceName = "";
-const defaultTrayIcon = getTrayIcon("openscreen.png");
-const recordingTrayIcon = getTrayIcon("rec-button.png");
-function createWindow() {
-  mainWindow = createHudOverlayWindow();
-}
-function createTray() {
-  tray = new Tray(defaultTrayIcon);
-}
-function getTrayIcon(filename) {
-  return nativeImage.createFromPath(path.join(process.env.VITE_PUBLIC || RENDERER_DIST, filename)).resize({
-    width: 24,
-    height: 24,
-    quality: "best"
-  });
-}
-function updateTrayMenu(recording = false) {
-  if (!tray) return;
-  const trayIcon = recording ? recordingTrayIcon : defaultTrayIcon;
-  const trayToolTip = recording ? `Recording: ${selectedSourceName}` : "OpenScreen";
-  const menuTemplate = recording ? [
-    {
-      label: "Stop Recording",
-      click: () => {
-        if (mainWindow && !mainWindow.isDestroyed()) {
-          mainWindow.webContents.send("stop-recording-from-tray");
-        }
-      }
-    }
-  ] : [
-    {
-      label: "Open",
-      click: () => {
-        if (mainWindow && !mainWindow.isDestroyed()) {
-          mainWindow.isMinimized() && mainWindow.restore();
-        } else {
-          createWindow();
-        }
-      }
-    },
-    {
-      label: "Quit",
-      click: () => {
-        app.quit();
-      }
-    }
-  ];
-  tray.setImage(trayIcon);
-  tray.setToolTip(trayToolTip);
-  tray.setContextMenu(Menu.buildFromTemplate(menuTemplate));
-}
-function createEditorWindowWrapper() {
-  if (mainWindow) {
-    mainWindow.close();
-    mainWindow = null;
-  }
-  mainWindow = createEditorWindow();
-}
-function createSourceSelectorWindowWrapper() {
-  sourceSelectorWindow = createSourceSelectorWindow();
-  sourceSelectorWindow.on("closed", () => {
-    sourceSelectorWindow = null;
-  });
-  return sourceSelectorWindow;
-}
-app.on("window-all-closed", () => {
-});
-app.on("activate", () => {
-  if (BrowserWindow.getAllWindows().length === 0) {
-    createWindow();
-  }
-});
-app.whenReady().then(async () => {
-  const { ipcMain: ipcMain2 } = await import("electron");
-  ipcMain2.on("hud-overlay-close", () => {
-    app.quit();
-  });
-  createTray();
-  updateTrayMenu();
-  await ensureRecordingsDir();
-  registerIpcHandlers(
-    createEditorWindowWrapper,
-    createSourceSelectorWindowWrapper,
-    () => mainWindow,
-    () => sourceSelectorWindow,
-    (recording, sourceName) => {
-      selectedSourceName = sourceName;
-      if (!tray) createTray();
-      updateTrayMenu(recording);
-      if (!recording) {
-        if (mainWindow) mainWindow.restore();
-      }
-    }
-  );
-  createWindow();
-});
-export {
-  MAIN_DIST,
-  RECORDINGS_DIR,
-  RENDERER_DIST,
-  VITE_DEV_SERVER_URL
-};

dist-electron/preload.mjs

@@ -1,63 +0,0 @@
-"use strict";
-const electron = require("electron");
-electron.contextBridge.exposeInMainWorld("electronAPI", {
-  hudOverlayHide: () => {
-    electron.ipcRenderer.send("hud-overlay-hide");
-  },
-  hudOverlayClose: () => {
-    electron.ipcRenderer.send("hud-overlay-close");
-  },
-  getAssetBasePath: async () => {
-    return await electron.ipcRenderer.invoke("get-asset-base-path");
-  },
-  getSources: async (opts) => {
-    return await electron.ipcRenderer.invoke("get-sources", opts);
-  },
-  switchToEditor: () => {
-    return electron.ipcRenderer.invoke("switch-to-editor");
-  },
-  openSourceSelector: () => {
-    return electron.ipcRenderer.invoke("open-source-selector");
-  },
-  selectSource: (source) => {
-    return electron.ipcRenderer.invoke("select-source", source);
-  },
-  getSelectedSource: () => {
-    return electron.ipcRenderer.invoke("get-selected-source");
-  },
-  storeRecordedVideo: (videoData, fileName) => {
-    return electron.ipcRenderer.invoke("store-recorded-video", videoData, fileName);
-  },
-  getRecordedVideoPath: () => {
-    return electron.ipcRenderer.invoke("get-recorded-video-path");
-  },
-  setRecordingState: (recording) => {
-    return electron.ipcRenderer.invoke("set-recording-state", recording);
-  },
-  onStopRecordingFromTray: (callback) => {
-    const listener = () => callback();
-    electron.ipcRenderer.on("stop-recording-from-tray", listener);
-    return () => electron.ipcRenderer.removeListener("stop-recording-from-tray", listener);
-  },
-  openExternalUrl: (url) => {
-    return electron.ipcRenderer.invoke("open-external-url", url);
-  },
-  saveExportedVideo: (videoData, fileName) => {
-    return electron.ipcRenderer.invoke("save-exported-video", videoData, fileName);
-  },
-  openVideoFilePicker: () => {
-    return electron.ipcRenderer.invoke("open-video-file-picker");
-  },
-  setCurrentVideoPath: (path) => {
-    return electron.ipcRenderer.invoke("set-current-video-path", path);
-  },
-  getCurrentVideoPath: () => {
-    return electron.ipcRenderer.invoke("get-current-video-path");
-  },
-  clearCurrentVideoPath: () => {
-    return electron.ipcRenderer.invoke("clear-current-video-path");
-  },
-  getPlatform: () => {
-    return electron.ipcRenderer.invoke("get-platform");
-  }
-});

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,14 +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": {
+    "notarize": false,
+    "hardenedRuntime": true,
+    "entitlements": "macos.entitlements",
+    "entitlementsInherit": "macos.entitlements",
     "target": [
       {
         "target": "dmg",
@@ -35,11 +46,20 @@
       }
     ],
     "icon": "icons/icons/mac/icon.icns",
-    "artifactName": "${productName}-Mac-${arch}-${version}-Installer.${ext}"
+    "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.",
+      "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}",
@@ -50,5 +70,9 @@
       "nsis"
     ],
     "icon": "icons/icons/win/icon.ico"
+  },
+  "nsis": {
+    "oneClick": false,
+    "allowToChangeInstallationDirectory": true
   }
 }

electron/electron-env.d.ts

@@ -1,54 +1,191 @@
-/// <reference types="vite-plugin-electron/electron-env" />
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    /**
-     * The built directory structure
-     *
-     * ```tree
-     * ├─┬─┬ dist
-     * │ │ └── index.html
-     * │ │
-     * │ ├─┬ dist-electron
-     * │ │ ├── main.js
-     * │ │ └── preload.js
-     * │
-     * ```
-     */
-    APP_ROOT: string
-    /** /dist/ or /public/ */
-    VITE_PUBLIC: string
-  }
-}
-
-// Used in Renderer process, expose in `preload.ts`
-interface Window {
-  electronAPI: {
-    getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>
-    switchToEditor: () => Promise<void>
-    openSourceSelector: () => Promise<void>
-    selectSource: (source: any) => Promise<any>
-    getSelectedSource: () => Promise<any>
-    storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => Promise<{ success: boolean; path?: string; message?: string }>
-    getRecordedVideoPath: () => Promise<{ success: boolean; path?: string; message?: string }>
-    setRecordingState: (recording: boolean) => Promise<void>
-    onStopRecordingFromTray: (callback: () => void) => () => void
-    openExternalUrl: (url: string) => Promise<{ success: boolean; error?: string }>
-    saveExportedVideo: (videoData: ArrayBuffer, fileName: string) => Promise<{ success: boolean; path?: string; message?: string; cancelled?: boolean }>
-    openVideoFilePicker: () => Promise<{ success: boolean; path?: string; cancelled?: boolean }>
-    setCurrentVideoPath: (path: string) => Promise<{ success: boolean }>
-    getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>
-    clearCurrentVideoPath: () => Promise<{ success: boolean }>
-    getPlatform: () => Promise<string>
-    hudOverlayHide: () => void;
-    hudOverlayClose: () => void;
-  }
-}
-
-interface ProcessedDesktopSource {
-  id: string
-  name: string
-  display_id: string
-  thumbnail: string | null
-  appIcon: string | null
-}
+/// <reference types="vite-plugin-electron/electron-env" />
+
+declare namespace NodeJS {
+	interface ProcessEnv {
+		/**
+		 * The built directory structure
+		 *
+		 * ```tree
+		 * ├─┬─┬ dist
+		 * │ │ └── index.html
+		 * │ │
+		 * │ ├─┬ dist-electron
+		 * │ │ ├── main.js
+		 * │ │ └── preload.js
+		 * │
+		 * ```
+		 */
+		APP_ROOT: string;
+		/** /dist/ or /public/ */
+		VITE_PUBLIC: string;
+	}
+}
+
+// Used in Renderer process, expose in `preload.ts`
+interface Window {
+	electronAPI: {
+		getSources: (opts: Electron.SourcesOptions) => Promise<ProcessedDesktopSource[]>;
+		switchToEditor: () => Promise<void>;
+		switchToHud: () => Promise<void>;
+		startNewRecording: () => Promise<{ success: boolean; error?: string }>;
+		openSourceSelector: () => Promise<void>;
+		selectSource: (source: ProcessedDesktopSource) => Promise<ProcessedDesktopSource | null>;
+		getSelectedSource: () => Promise<ProcessedDesktopSource | null>;
+		requestCameraAccess: () => Promise<{
+			success: boolean;
+			granted: boolean;
+			status: string;
+			error?: string;
+		}>;
+		requestAccessibilityAccess: () => Promise<{
+			success: boolean;
+			granted: boolean;
+			error?: string;
+		}>;
+		assetBaseUrl: string;
+		storeRecordedVideo: (
+			videoData: ArrayBuffer,
+			fileName: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+			message?: string;
+			error?: string;
+		}>;
+		storeRecordedSession: (
+			payload: import("../src/lib/recordingSession").StoreRecordedSessionInput,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+			message?: string;
+			error?: string;
+		}>;
+		getRecordedVideoPath: () => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		setRecordingState: (recording: boolean, 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 }>;
+		pickExportSavePath: (
+			fileName: string,
+			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: (
+			session: import("../src/lib/recordingSession").RecordingSession | null,
+		) => Promise<{
+			success: boolean;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+		}>;
+		getCurrentVideoPath: () => Promise<{ success: boolean; path?: string }>;
+		getCurrentRecordingSession: () => Promise<{
+			success: boolean;
+			session?: import("../src/lib/recordingSession").RecordingSession;
+		}>;
+		readBinaryFile: (filePath: string) => Promise<{
+			success: boolean;
+			data?: ArrayBuffer;
+			path?: string;
+			message?: string;
+			error?: string;
+		}>;
+		clearCurrentVideoPath: () => Promise<{ success: boolean }>;
+		saveProjectFile: (
+			projectData: unknown,
+			suggestedName?: string,
+			existingProjectPath?: string,
+		) => Promise<{
+			success: boolean;
+			path?: string;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		loadProjectFile: () => Promise<{
+			success: boolean;
+			path?: string;
+			project?: unknown;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		loadCurrentProjectFile: () => Promise<{
+			success: boolean;
+			path?: string;
+			project?: unknown;
+			message?: string;
+			canceled?: boolean;
+			error?: string;
+		}>;
+		onMenuLoadProject: (callback: () => void) => () => void;
+		onMenuSaveProject: (callback: () => void) => () => void;
+		onMenuSaveProjectAs: (callback: () => void) => () => void;
+		getPlatform: () => Promise<string>;
+		revealInFolder: (
+			filePath: string,
+		) => Promise<{ success: boolean; error?: string; message?: string }>;
+		getShortcuts: () => Promise<Record<string, unknown> | null>;
+		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 }>;
+	};
+}
+
+interface ProcessedDesktopSource {
+	id: string;
+	name: string;
+	display_id: string;
+	thumbnail: string | null;
+	appIcon: string | null;
+}
+
+interface CursorTelemetryPoint {
+	timeMs: number;
+	cx: number;
+	cy: number;
+}

electron/i18n.ts

@@ -0,0 +1,91 @@
+// 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" | "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 === "zh-TW" ||
+		locale === "es" ||
+		locale === "fr" ||
+		locale === "ja-JP" ||
+		locale === "ko-KR" ||
+		locale === "tr" ||
+		locale === "ar" ||
+		locale === "vi"
+	) {
+		currentLocale = locale;
+	}
+}
+
+export function getMainLocale(): Locale {
+	return currentLocale;
+}
+
+function getMessageValue(obj: unknown, dotPath: string): string | undefined {
+	const keys = dotPath.split(".");
+	let current: unknown = obj;
+	for (const key of keys) {
+		if (current == null || typeof current !== "object") return undefined;
+		current = (current as Record<string, unknown>)[key];
+	}
+	return typeof current === "string" ? current : undefined;
+}
+
+function interpolate(str: string, vars?: Record<string, string | number>): string {
+	if (!vars) return str;
+	return str.replace(/\{\{(\w+)\}\}/g, (_, key: string) => String(vars[key] ?? `{{${key}}}`));
+}
+
+export function mainT(
+	namespace: Namespace,
+	key: string,
+	vars?: Record<string, string | number>,
+): string {
+	const value =
+		getMessageValue(messages[currentLocale]?.[namespace], key) ??
+		getMessageValue(messages.en?.[namespace], key);
+
+	if (value == null) return `${namespace}.${key}`;
+	return interpolate(value, vars);
+}

electron/main.ts

@@ -1,24 +1,57 @@
-import { app, BrowserWindow, Tray, Menu, nativeImage } from 'electron'
-import { fileURLToPath } from 'node:url'
-import path from 'node:path'
-import fs from 'node:fs/promises'
-import { createHudOverlayWindow, createEditorWindow, createSourceSelectorWindow } from './windows'
-import { registerIpcHandlers } from './ipc/handlers'
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import {
+	app,
+	BrowserWindow,
+	desktopCapturer,
+	ipcMain,
+	Menu,
+	nativeImage,
+	session,
+	systemPreferences,
+	Tray,
+} from "electron";
+import { mainT, setMainLocale } from "./i18n";
+import { registerIpcHandlers } from "./ipc/handlers";
+import {
+	createCountdownOverlayWindow,
+	createEditorWindow,
+	createHudOverlayWindow,
+	createSourceSelectorWindow,
+} from "./windows";
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
+// Use Screen & System Audio Recording permissions instead of CoreAudio Tap API on macOS.
+// CoreAudio Tap requires NSAudioCaptureUsageDescription in the parent app's Info.plist,
+// which doesn't work when running from a terminal/IDE during development, makes my life easier
+if (process.platform === "darwin") {
+	app.commandLine.appendSwitch("disable-features", "MacCatapLoopbackAudioForScreenShare");
+}
 
-export const RECORDINGS_DIR = path.join(app.getPath('userData'), 'recordings')
+// 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() {
-  try {
-    await fs.mkdir(RECORDINGS_DIR, { recursive: true })
-    console.log('RECORDINGS_DIR:', RECORDINGS_DIR)
-    console.log('User Data Path:', app.getPath('userData'))
-  } catch (error) {
-    console.error('Failed to create recordings directory:', error)
-  }
+	try {
+		await fs.mkdir(RECORDINGS_DIR, { recursive: true });
+		console.log("RECORDINGS_DIR:", RECORDINGS_DIR);
+		console.log("User Data Path:", app.getPath("userData"));
+	} catch (error) {
+		console.error("Failed to create recordings directory:", error);
+	}
 }
 
 // The built directory structure
@@ -30,137 +63,479 @@ async function ensureRecordingsDir() {
 // │ │ ├── main.js
 // │ │ └── preload.mjs
 // │
-process.env.APP_ROOT = path.join(__dirname, '..')
+process.env.APP_ROOT = path.join(__dirname, "..");
 
 // Use ['ENV_NAME'] avoid vite:define plugin - Vite@2.x
-export const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
-export const MAIN_DIST = path.join(process.env.APP_ROOT, 'dist-electron')
-export const RENDERER_DIST = path.join(process.env.APP_ROOT, 'dist')
+export const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
+export const MAIN_DIST = path.join(process.env.APP_ROOT, "dist-electron");
+export const RENDERER_DIST = path.join(process.env.APP_ROOT, "dist");
 
-process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL ? path.join(process.env.APP_ROOT, 'public') : RENDERER_DIST
+process.env.VITE_PUBLIC = VITE_DEV_SERVER_URL
+	? path.join(process.env.APP_ROOT, "public")
+	: RENDERER_DIST;
 
 // Window references
-let mainWindow: BrowserWindow | null = null
-let sourceSelectorWindow: BrowserWindow | null = null
-let tray: Tray | null = null
-let selectedSourceName = ''
+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()
+	mainWindow = createHudOverlayWindow();
+}
+
+function showMainWindow() {
+	if (mainWindow && !mainWindow.isDestroyed()) {
+		if (mainWindow.isMinimized()) {
+			mainWindow.restore();
+		}
+		mainWindow.show();
+		mainWindow.focus();
+		return;
+	}
+
+	createWindow();
+}
+
+function isEditorWindow(window: BrowserWindow) {
+	return window.webContents.getURL().includes("windowType=editor");
+}
+
+function sendEditorMenuAction(
+	channel: "menu-load-project" | "menu-save-project" | "menu-save-project-as",
+) {
+	let targetWindow = BrowserWindow.getFocusedWindow() ?? mainWindow;
+
+	if (!targetWindow || targetWindow.isDestroyed() || !isEditorWindow(targetWindow)) {
+		createEditorWindowWrapper();
+		targetWindow = mainWindow;
+		if (!targetWindow || targetWindow.isDestroyed()) return;
+
+		targetWindow.webContents.once("did-finish-load", () => {
+			if (!targetWindow || targetWindow.isDestroyed()) return;
+			targetWindow.webContents.send(channel);
+		});
+		return;
+	}
+
+	targetWindow.webContents.send(channel);
+}
+
+function setupApplicationMenu() {
+	const isMac = process.platform === "darwin";
+	const template: Electron.MenuItemConstructorOptions[] = [];
+
+	if (isMac) {
+		template.push({
+			label: app.name,
+			submenu: [
+				{
+					role: "about",
+					label: mainT("common", "actions.about") || "About OpenScreen",
+				},
+				{ type: "separator" },
+				{
+					role: "services",
+					label: mainT("common", "actions.services") || "Services",
+				},
+				{ type: "separator" },
+				{
+					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", label: mainT("common", "actions.quit") || "Quit" },
+			],
+		});
+	}
+
+	template.push(
+		{
+			label: mainT("common", "actions.file") || "File",
+			submenu: [
+				{
+					label: mainT("dialogs", "unsavedChanges.loadProject") || "Load Project…",
+					accelerator: "CmdOrCtrl+O",
+					click: () => sendEditorMenuAction("menu-load-project"),
+				},
+				{
+					label: mainT("dialogs", "unsavedChanges.saveProject") || "Save Project…",
+					accelerator: "CmdOrCtrl+S",
+					click: () => sendEditorMenuAction("menu-save-project"),
+				},
+				{
+					label: mainT("dialogs", "unsavedChanges.saveProjectAs") || "Save Project As…",
+					accelerator: "CmdOrCtrl+Shift+S",
+					click: () => sendEditorMenuAction("menu-save-project-as"),
+				},
+				...(isMac
+					? []
+					: [
+							{ type: "separator" as const },
+							{
+								role: "quit" as const,
+								label: mainT("common", "actions.quit") || "Quit",
+							},
+						]),
+			],
+		},
+		{
+			label: mainT("common", "actions.edit") || "Edit",
+			submenu: [
+				{ role: "undo", label: mainT("common", "actions.undo") || "Undo" },
+				{ role: "redo", label: mainT("common", "actions.redo") || "Redo" },
+				{ type: "separator" },
+				{ 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",
+					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",
+					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",
+					label: mainT("common", "actions.toggleFullScreen") || "Toggle Full Screen",
+				},
+			],
+		},
+		{
+			label: mainT("common", "actions.window") || "Window",
+			submenu: isMac
+				? [
+						{
+							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",
+						},
+					],
+		},
+	);
+
+	const menu = Menu.buildFromTemplate(template);
+	Menu.setApplicationMenu(menu);
 }
 
 function createTray() {
-  tray = new Tray(defaultTrayIcon);
+	tray = new Tray(defaultTrayIcon);
+	tray.on("click", () => {
+		showMainWindow();
+	});
+	tray.on("double-click", () => {
+		showMainWindow();
+	});
 }
 
-function getTrayIcon(filename: string) {
-  return nativeImage.createFromPath(path.join(process.env.VITE_PUBLIC || RENDERER_DIST, filename)).resize({
-    width: 24,
-    height: 24,
-    quality: 'best'
-  });
+function getTrayIcon(filename: string, size: number) {
+	return nativeImage
+		.createFromPath(path.join(process.env.VITE_PUBLIC || RENDERER_DIST, filename))
+		.resize({
+			width: size,
+			height: size,
+			quality: "best",
+		});
 }
 
-
 function updateTrayMenu(recording: boolean = false) {
-  if (!tray) return;
-  const trayIcon = recording ? recordingTrayIcon : defaultTrayIcon;
-  const trayToolTip = recording ? `Recording: ${selectedSourceName}` : "OpenScreen";
-  const menuTemplate = recording
-    ? [
-        {
-          label: "Stop Recording",
-          click: () => {
-            if (mainWindow && !mainWindow.isDestroyed()) {
-              mainWindow.webContents.send("stop-recording-from-tray");
-            }
-          },
-        },
-      ]
-    : [
-        {
-          label: "Open",
-          click: () => {
-            if (mainWindow && !mainWindow.isDestroyed()) {
-              mainWindow.isMinimized() && mainWindow.restore();
-            } else {
-              createWindow();
-            }
-          },
-        },
-        {
-          label: "Quit",
-          click: () => {
-            app.quit();
-          },
-        },
-      ];
-  tray.setImage(trayIcon);
-  tray.setToolTip(trayToolTip);
-  tray.setContextMenu(Menu.buildFromTemplate(menuTemplate));
+	if (!tray) return;
+	const trayIcon = recording ? recordingTrayIcon : defaultTrayIcon;
+	const trayToolTip = recording
+		? mainT("common", "actions.recordingStatus", {
+				source: selectedSourceName,
+			}) || `Recording: ${selectedSourceName}`
+		: "OpenScreen";
+	const menuTemplate = recording
+		? [
+				{
+					label: mainT("common", "actions.stopRecording") || "Stop Recording",
+					click: () => {
+						if (mainWindow && !mainWindow.isDestroyed()) {
+							mainWindow.webContents.send("stop-recording-from-tray");
+						}
+					},
+				},
+			]
+		: [
+				{
+					label: mainT("common", "actions.open") || "Open",
+					click: () => {
+						showMainWindow();
+					},
+				},
+				{
+					label: mainT("common", "actions.quit") || "Quit",
+					click: () => {
+						app.quit();
+					},
+				},
+			];
+	tray.setImage(trayIcon);
+	tray.setToolTip(trayToolTip);
+	tray.setContextMenu(Menu.buildFromTemplate(menuTemplate));
+}
+
+let editorHasUnsavedChanges = false;
+let isForceClosing = false;
+let isCloseConfirmInFlight = false;
+
+ipcMain.on("set-has-unsaved-changes", (_, hasChanges: boolean) => {
+	editorHasUnsavedChanges = hasChanges;
+});
+
+function forceCloseEditorWindow(windowToClose: BrowserWindow | null) {
+	if (!windowToClose || windowToClose.isDestroyed()) return;
+
+	isForceClosing = true;
+	setImmediate(() => {
+		try {
+			if (!windowToClose.isDestroyed()) {
+				windowToClose.close();
+			}
+		} finally {
+			isForceClosing = false;
+		}
+	});
 }
 
 function createEditorWindowWrapper() {
-  if (mainWindow) {
-    mainWindow.close()
-    mainWindow = null
-  }
-  mainWindow = createEditorWindow()
+	if (mainWindow) {
+		isForceClosing = true;
+		mainWindow.close();
+		isForceClosing = false;
+		mainWindow = null;
+	}
+	mainWindow = createEditorWindow();
+	editorHasUnsavedChanges = false;
+
+	mainWindow.on("close", (event) => {
+		if (isForceClosing || !editorHasUnsavedChanges || isCloseConfirmInFlight) return;
+
+		event.preventDefault();
+		isCloseConfirmInFlight = true;
+
+		const windowToClose = mainWindow;
+		if (!windowToClose || windowToClose.isDestroyed()) 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);
+			}
+			// "cancel": flag reset, window stays open
+		});
+	});
 }
 
 function createSourceSelectorWindowWrapper() {
-  sourceSelectorWindow = createSourceSelectorWindow()
-  sourceSelectorWindow.on('closed', () => {
-    sourceSelectorWindow = null
-  })
-  return sourceSelectorWindow
+	sourceSelectorWindow = createSourceSelectorWindow();
+	sourceSelectorWindow.on("closed", () => {
+		sourceSelectorWindow = null;
+	});
+	return sourceSelectorWindow;
 }
 
-// On macOS, applications and their menu bar stay active until the user quits
-// explicitly with Cmd + Q.
-app.on('window-all-closed', () => {
-  // Keep app running (macOS behavior)
-})
+function createCountdownOverlayWindowWrapper() {
+	if (countdownOverlayWindow && !countdownOverlayWindow.isDestroyed()) {
+		return countdownOverlayWindow;
+	}
 
-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()
-  }
-})
+	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", () => {
+	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.
+	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 () => {
-    // Listen for HUD overlay quit event (macOS only)
-    const { ipcMain } = await import('electron');
-    ipcMain.on('hud-overlay-close', () => {
-      app.quit();
-    });
-    createTray()
-    updateTrayMenu()
-  // Ensure recordings directory exists
-  await ensureRecordingsDir()
+	// 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();
+	}
 
-  registerIpcHandlers(
-    createEditorWindowWrapper,
-    createSourceSelectorWindowWrapper,
-    () => mainWindow,
-    () => sourceSelectorWindow,
-    (recording: boolean, sourceName: string) => {
-      selectedSourceName = sourceName
-      if (!tray) createTray();
-      updateTrayMenu(recording);
-      if (!recording) {
-        if (mainWindow) mainWindow.restore();
-      }
-    }
-  )
-  createWindow()
-})
+	// Allow microphone/media/screen permission checks
+	session.defaultSession.setPermissionCheckHandler((_webContents, permission) => {
+		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",
+			"screen",
+			"display-capture",
+		];
+		callback(allowed.includes(permission));
+	});
+
+	// 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)
+	ipcMain.on("hud-overlay-close", () => {
+		app.quit();
+	});
+	ipcMain.handle("set-locale", (_, locale: string) => {
+		setMainLocale(locale);
+		setupApplicationMenu();
+		updateTrayMenu();
+	});
+
+	createTray();
+	updateTrayMenu();
+	setupApplicationMenu();
+	// 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();
+			updateTrayMenu(recording);
+			if (!recording) {
+				showMainWindow();
+			}
+		},
+		switchToHudWrapper,
+	);
+	createWindow();
+});

electron/preload.ts

@@ -1,66 +1,188 @@
-import { contextBridge, ipcRenderer } from 'electron'
+import { contextBridge, ipcRenderer } from "electron";
+import type { RecordingSession, StoreRecordedSessionInput } from "../src/lib/recordingSession";
 
-contextBridge.exposeInMainWorld('electronAPI', {
-    hudOverlayHide: () => {
-      ipcRenderer.send('hud-overlay-hide');
-    },
-    hudOverlayClose: () => {
-      ipcRenderer.send('hud-overlay-close');
-    },
-  getAssetBasePath: async () => {
-    // ask main process for the correct base path (production vs dev)
-    return await ipcRenderer.invoke('get-asset-base-path')
-  },
-  getSources: async (opts: Electron.SourcesOptions) => {
-    return await ipcRenderer.invoke('get-sources', opts)
-  },
-  switchToEditor: () => {
-    return ipcRenderer.invoke('switch-to-editor')
-  },
-  openSourceSelector: () => {
-    return ipcRenderer.invoke('open-source-selector')
-  },
-  selectSource: (source: any) => {
-    return ipcRenderer.invoke('select-source', source)
-  },
-  getSelectedSource: () => {
-    return ipcRenderer.invoke('get-selected-source')
-  },
+// 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) : "";
 
-  storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
-    return ipcRenderer.invoke('store-recorded-video', videoData, fileName)
-  },
+contextBridge.exposeInMainWorld("electronAPI", {
+	assetBaseUrl,
+	hudOverlayHide: () => {
+		ipcRenderer.send("hud-overlay-hide");
+	},
+	hudOverlayClose: () => {
+		ipcRenderer.send("hud-overlay-close");
+	},
+	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");
+	},
+	selectSource: (source: ProcessedDesktopSource) => {
+		return ipcRenderer.invoke("select-source", source);
+	},
+	getSelectedSource: () => {
+		return ipcRenderer.invoke("get-selected-source");
+	},
+	requestCameraAccess: () => {
+		return ipcRenderer.invoke("request-camera-access");
+	},
+	requestAccessibilityAccess: () => {
+		return ipcRenderer.invoke("request-accessibility-access");
+	},
 
-  getRecordedVideoPath: () => {
-    return ipcRenderer.invoke('get-recorded-video-path')
-  },
-  setRecordingState: (recording: boolean) => {
-    return ipcRenderer.invoke('set-recording-state', recording)
-  },
-  onStopRecordingFromTray: (callback: () => void) => {
-    const listener = () => callback()
-    ipcRenderer.on('stop-recording-from-tray', listener)
-    return () => ipcRenderer.removeListener('stop-recording-from-tray', listener)
-  },
-  openExternalUrl: (url: string) => {
-    return ipcRenderer.invoke('open-external-url', url)
-  },
-  saveExportedVideo: (videoData: ArrayBuffer, fileName: string) => {
-    return ipcRenderer.invoke('save-exported-video', videoData, fileName)
-  },
-  openVideoFilePicker: () => {
-    return ipcRenderer.invoke('open-video-file-picker')
-  },
-  setCurrentVideoPath: (path: string) => {
-    return ipcRenderer.invoke('set-current-video-path', path)
-  },
-  getCurrentVideoPath: () => {
-    return ipcRenderer.invoke('get-current-video-path')
-  },
-  clearCurrentVideoPath: () => {
-    return ipcRenderer.invoke('clear-current-video-path')
-  },
-  getPlatform: () => {
-    return ipcRenderer.invoke('get-platform')
-  },
-})
+	storeRecordedVideo: (videoData: ArrayBuffer, fileName: string) => {
+		return ipcRenderer.invoke("store-recorded-video", videoData, fileName);
+	},
+	storeRecordedSession: (payload: StoreRecordedSessionInput) => {
+		return ipcRenderer.invoke("store-recorded-session", payload);
+	},
+
+	getRecordedVideoPath: () => {
+		return ipcRenderer.invoke("get-recorded-video-path");
+	},
+	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);
+		return () => ipcRenderer.removeListener("stop-recording-from-tray", listener);
+	},
+	openExternalUrl: (url: string) => {
+		return ipcRenderer.invoke("open-external-url", url);
+	},
+	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");
+	},
+	setCurrentVideoPath: (path: string) => {
+		return ipcRenderer.invoke("set-current-video-path", path);
+	},
+	setCurrentRecordingSession: (session: RecordingSession | null) => {
+		return ipcRenderer.invoke("set-current-recording-session", session);
+	},
+	getCurrentVideoPath: () => {
+		return ipcRenderer.invoke("get-current-video-path");
+	},
+	getCurrentRecordingSession: () => {
+		return ipcRenderer.invoke("get-current-recording-session");
+	},
+	readBinaryFile: (filePath: string) => {
+		return ipcRenderer.invoke("read-binary-file", filePath);
+	},
+	clearCurrentVideoPath: () => {
+		return ipcRenderer.invoke("clear-current-video-path");
+	},
+	saveProjectFile: (projectData: unknown, suggestedName?: string, existingProjectPath?: string) => {
+		return ipcRenderer.invoke("save-project-file", projectData, suggestedName, existingProjectPath);
+	},
+	loadProjectFile: () => {
+		return ipcRenderer.invoke("load-project-file");
+	},
+	loadCurrentProjectFile: () => {
+		return ipcRenderer.invoke("load-current-project-file");
+	},
+	onMenuLoadProject: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("menu-load-project", listener);
+		return () => ipcRenderer.removeListener("menu-load-project", listener);
+	},
+	onMenuSaveProject: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("menu-save-project", listener);
+		return () => ipcRenderer.removeListener("menu-save-project", listener);
+	},
+	onMenuSaveProjectAs: (callback: () => void) => {
+		const listener = () => callback();
+		ipcRenderer.on("menu-save-project-as", listener);
+		return () => ipcRenderer.removeListener("menu-save-project-as", listener);
+	},
+	getPlatform: () => {
+		return ipcRenderer.invoke("get-platform");
+	},
+	revealInFolder: (filePath: string) => {
+		return ipcRenderer.invoke("reveal-in-folder", filePath);
+	},
+	getShortcuts: () => {
+		return ipcRenderer.invoke("get-shortcuts");
+	},
+	saveShortcuts: (shortcuts: unknown) => {
+		return ipcRenderer.invoke("save-shortcuts", shortcuts);
+	},
+	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 {
+				const shouldClose = await callback();
+				ipcRenderer.send("save-before-close-done", shouldClose);
+			} catch {
+				ipcRenderer.send("save-before-close-done", false);
+			}
+		};
+		ipcRenderer.on("request-save-before-close", listener);
+		return () => ipcRenderer.removeListener("request-save-before-close", listener);
+	},
+	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,155 +1,242 @@
-import { BrowserWindow, screen } from 'electron'
-import { ipcMain } from 'electron'
-import path from 'node:path'
-import { fileURLToPath } from 'node:url'
+import path from "node:path";
+import { fileURLToPath, pathToFileURL } from "node:url";
+import { BrowserWindow, ipcMain, screen } from "electron";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
-const APP_ROOT = path.join(__dirname, '..')
-const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
-const RENDERER_DIST = path.join(APP_ROOT, 'dist')
+const APP_ROOT = path.join(__dirname, "..");
+const VITE_DEV_SERVER_URL = process.env["VITE_DEV_SERVER_URL"];
+const RENDERER_DIST = path.join(APP_ROOT, "dist");
+const HEADLESS = process.env["HEADLESS"] === "true";
+
+// 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', () => {
-  if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
-    hudOverlayWindow.minimize();
-  }
+ipcMain.on("hud-overlay-hide", () => {
+	if (hudOverlayWindow && !hudOverlayWindow.isDestroyed()) {
+		hudOverlayWindow.minimize();
+	}
 });
 
+/**
+ * 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 primaryDisplay = screen.getPrimaryDisplay();
+	const { workArea } = primaryDisplay;
 
+	const windowWidth = 600;
+	const windowHeight = 160;
 
-  const windowWidth = 500;
-  const windowHeight = 100;
+	const x = Math.floor(workArea.x + (workArea.width - windowWidth) / 2);
+	const y = Math.floor(workArea.y + workArea.height - windowHeight - 5);
 
-  const x = Math.floor(workArea.x + (workArea.width - windowWidth) / 2);
-  const y = Math.floor(workArea.y + workArea.height - windowHeight - 5);
+	const win = new BrowserWindow({
+		width: windowWidth,
+		height: windowHeight,
+		minWidth: 600,
+		maxWidth: 600,
+		minHeight: 160,
+		maxHeight: 160,
+		x: x,
+		y: y,
+		frame: false,
+		transparent: true,
+		resizable: false,
+		alwaysOnTop: true,
+		skipTaskbar: true,
+		hasShadow: false,
+		show: !HEADLESS,
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
+			nodeIntegration: false,
+			contextIsolation: true,
+			backgroundThrottling: false,
+		},
+	});
 
-  const win = new BrowserWindow({
-    width: windowWidth,
-    height: windowHeight,
-    minWidth: 500,
-    maxWidth: 500,
-    minHeight: 100,
-    maxHeight: 100,
-    x: x,
-    y: y,
-    frame: false,
-    transparent: true,
-    resizable: false,
-    alwaysOnTop: true,
-    skipTaskbar: true,
-    hasShadow: false,
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.mjs'),
-      nodeIntegration: false,
-      contextIsolation: true,
-      backgroundThrottling: false,
-    },
-  })
+	// 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());
+	});
 
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', (new Date).toLocaleString())
-  })
+	hudOverlayWindow = win;
 
-  hudOverlayWindow = win;
+	win.on("closed", () => {
+		if (hudOverlayWindow === win) {
+			hudOverlayWindow = null;
+		}
+	});
 
-  win.on('closed', () => {
-    if (hudOverlayWindow === win) {
-      hudOverlayWindow = null;
-    }
-  });
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(VITE_DEV_SERVER_URL + "?windowType=hud-overlay");
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "hud-overlay" },
+		});
+	}
 
-
-  if (VITE_DEV_SERVER_URL) {
-    win.loadURL(VITE_DEV_SERVER_URL + '?windowType=hud-overlay')
-  } else {
-    win.loadFile(path.join(RENDERER_DIST, 'index.html'), { 
-      query: { windowType: 'hud-overlay' } 
-    })
-  }
-
-  return win
+	return win;
 }
 
+/**
+ * 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';
+	const isMac = process.platform === "darwin";
 
-  const win = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    minWidth: 800,
-    minHeight: 600,
-    ...(isMac && {
-      titleBarStyle: 'hiddenInset',
-      trafficLightPosition: { x: 12, y: 12 },
-    }),
-    transparent: false,
-    resizable: true,
-    alwaysOnTop: false,
-    skipTaskbar: false,
-    title: 'OpenScreen',
-    backgroundColor: '#000000',
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.mjs'),
-      nodeIntegration: false,
-      contextIsolation: true,
-      webSecurity: false,
-      backgroundThrottling: false,
-    },
-  })
+	const win = new BrowserWindow({
+		width: 1200,
+		height: 800,
+		minWidth: 800,
+		minHeight: 600,
+		...(isMac && {
+			titleBarStyle: "hiddenInset",
+			trafficLightPosition: { x: 12, y: 12 },
+		}),
+		transparent: false,
+		resizable: true,
+		alwaysOnTop: false,
+		skipTaskbar: false,
+		title: "OpenScreen",
+		backgroundColor: "#000000",
+		show: !HEADLESS,
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
+			nodeIntegration: false,
+			contextIsolation: true,
+			webSecurity: false,
+			backgroundThrottling: false,
+		},
+	});
 
-  // Maximize the window by default
-  win.maximize();
+	// Maximize the window by default
+	win.maximize();
 
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', (new Date).toLocaleString())
-  })
+	win.webContents.on("did-finish-load", () => {
+		win?.webContents.send("main-process-message", new Date().toLocaleString());
+	});
 
-  if (VITE_DEV_SERVER_URL) {
-    win.loadURL(VITE_DEV_SERVER_URL + '?windowType=editor')
-  } else {
-    win.loadFile(path.join(RENDERER_DIST, 'index.html'), { 
-      query: { windowType: 'editor' } 
-    })
-  }
+	if (VITE_DEV_SERVER_URL) {
+		win.loadURL(VITE_DEV_SERVER_URL + "?windowType=editor");
+	} else {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "editor" },
+		});
+	}
 
-  return win
+	return win;
 }
 
+/**
+ * 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
-  
-  const win = new BrowserWindow({
-    width: 620,
-    height: 420,
-    minHeight: 350,
-    maxHeight: 500,
-    x: Math.round((width - 620) / 2),
-    y: Math.round((height - 420) / 2),
-    frame: false,
-    resizable: false,
-    alwaysOnTop: true,
-    transparent: true,
-    backgroundColor: '#00000000',
-    webPreferences: {
-      preload: path.join(__dirname, 'preload.mjs'),
-      nodeIntegration: false,
-      contextIsolation: true,
-    },
-  })
+	const { width, height } = screen.getPrimaryDisplay().workAreaSize;
 
-  if (VITE_DEV_SERVER_URL) {
-    win.loadURL(VITE_DEV_SERVER_URL + '?windowType=source-selector')
-  } else {
-    win.loadFile(path.join(RENDERER_DIST, 'index.html'), { 
-      query: { windowType: 'source-selector' } 
-    })
-  }
+	const win = new BrowserWindow({
+		width: 620,
+		height: 420,
+		minHeight: 350,
+		maxHeight: 500,
+		x: Math.round((width - 620) / 2),
+		y: Math.round((height - 420) / 2),
+		frame: false,
+		resizable: false,
+		alwaysOnTop: true,
+		transparent: true,
+		backgroundColor: "#00000000",
+		webPreferences: {
+			preload: path.join(__dirname, "preload.mjs"),
+			additionalArguments: [ASSET_BASE_URL_ARG],
+			nodeIntegration: false,
+			contextIsolation: true,
+		},
+	});
 
-  return win
+	// 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 {
+		win.loadFile(path.join(RENDERER_DIST, "index.html"), {
+			query: { windowType: "source-selector" },
+		});
+	}
+
+	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,83 +1,114 @@
 {
-  "name": "openscreen",
-  "private": true,
-  "version": "1.1.1",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build && electron-builder",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "build:mac": "tsc && vite build && electron-builder --mac",
-    "build:win": "tsc && vite build && electron-builder --win",
-    "build:linux": "tsc && vite build && electron-builder --linux",
-    "test": "vitest --run",
-    "test:watch": "vitest"
-  },
-  "dependencies": {
-    "@fix-webm-duration/fix": "^1.0.1",
-    "@pixi/filter-drop-shadow": "^5.2.0",
-    "@radix-ui/react-accordion": "^1.2.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@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-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",
-    "@types/gif.js": "^0.2.5",
-    "@uiw/color-convert": "^2.9.2",
-    "@uiw/react-color-block": "^2.9.2",
-    "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "dnd-timeline": "^2.2.0",
-    "emoji-picker-react": "^4.16.1",
-    "fix-webm-duration": "^1.0.6",
-    "gif.js": "^0.2.0",
-    "gsap": "^3.13.0",
-    "lucide-react": "^0.545.0",
-    "mediabunny": "^1.25.1",
-    "motion": "^12.23.24",
-    "mp4box": "^2.2.0",
-    "pixi.js": "^8.14.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-icons": "^5.5.0",
-    "react-resizable-panels": "^3.0.6",
-    "react-rnd": "^10.5.2",
-    "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
-    "tailwindcss-animate": "^1.0.7",
-    "uuid": "^13.0.0"
-  },
-  "devDependencies": {
-    "@types/node": "^25.0.3",
-    "@types/react": "^18.2.64",
-    "@types/react-dom": "^18.2.21",
-    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.1.1",
-    "@typescript-eslint/parser": "^7.1.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "autoprefixer": "^10.4.21",
-    "electron": "^39.2.7",
-    "electron-builder": "^24.13.3",
-    "electron-icon-builder": "^2.0.1",
-    "electron-rebuild": "^3.2.9",
-    "eslint": "^8.57.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "fast-check": "^4.5.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"
-  },
-  "main": "dist-electron/main.js"
+	"name": "openscreen",
+	"private": true,
+	"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",
+		"lint": "biome check .",
+		"lint:fix": "biome check --write .",
+		"format": "biome format --write .",
+		"i18n:check": "node scripts/i18n-check.mjs",
+		"preview": "vite preview",
+		"build:mac": "tsc && vite build && electron-builder --mac",
+		"build:win": "tsc && vite build && electron-builder --win --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",
+		"rebuild:native": "node ./scripts/rebuild-native.mjs",
+		"postinstall": "npm run rebuild:native"
+	},
+	"dependencies": {
+		"@fix-webm-duration/fix": "^1.0.1",
+		"@pixi/filter-drop-shadow": "^5.2.0",
+		"@radix-ui/react-accordion": "^1.2.12",
+		"@radix-ui/react-dialog": "^1.1.15",
+		"@radix-ui/react-dropdown-menu": "^2.1.16",
+		"@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.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.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.4.0",
+		"emoji-picker-react": "^4.18.0",
+		"fix-webm-duration": "^1.0.6",
+		"gif.js": "^0.2.0",
+		"gsap": "^3.15.0",
+		"lucide-react": "^0.545.0",
+		"mediabunny": "^1.40.1",
+		"motion": "^12.38.0",
+		"mp4box": "^2.3.0",
+		"pixi-filters": "^6.1.5",
+		"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.3",
+		"sonner": "^2.0.7",
+		"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.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",
+		"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": {
+		"*.{ts,tsx,js,jsx,mts,cts,json}": "biome check --no-errors-on-unmatched"
+	}
 }

playwright.config.ts

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

postcss.config.cjs

@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};

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

@@ -0,0 +1,87 @@
+#!/usr/bin/env node
+/**
+ * Validates that all locale translation files have identical key structures.
+ * 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";
+
+function getKeys(obj, prefix = "") {
+	const keys = [];
+	for (const [key, value] of Object.entries(obj)) {
+		const fullKey = prefix ? `${prefix}.${key}` : key;
+		if (value && typeof value === "object" && !Array.isArray(value)) {
+			keys.push(...getKeys(value, fullKey));
+		} else {
+			keys.push(fullKey);
+		}
+	}
+	return keys.sort();
+}
+
+let hasErrors = false;
+
+const baseDir = path.join(LOCALES_DIR, BASE_LOCALE);
+const namespaces = fs
+	.readdirSync(baseDir)
+	.filter((f) => f.endsWith(".json"))
+	.map((f) => f.replace(".json", ""));
+
+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 compareLocales) {
+		const localePath = path.join(LOCALES_DIR, locale, `${namespace}.json`);
+
+		if (!fs.existsSync(localePath)) {
+			console.error(`MISSING: ${locale}/${namespace}.json does not exist`);
+			hasErrors = true;
+			continue;
+		}
+
+		const localeData = JSON.parse(fs.readFileSync(localePath, "utf-8"));
+		const localeKeys = getKeys(localeData);
+
+		const missing = baseKeys.filter((k) => !localeKeys.includes(k));
+		const extra = localeKeys.filter((k) => !baseKeys.includes(k));
+
+		if (missing.length > 0) {
+			console.error(`MISSING in ${locale}/${namespace}.json:`);
+			for (const key of missing) {
+				console.error(`  - ${key}`);
+			}
+			hasErrors = true;
+		}
+
+		if (extra.length > 0) {
+			console.error(`EXTRA in ${locale}/${namespace}.json:`);
+			for (const key of extra) {
+				console.error(`  + ${key}`);
+			}
+			hasErrors = true;
+		}
+	}
+}
+
+if (hasErrors) {
+	console.error("\ni18n check FAILED — translation files are out of sync.");
+	process.exit(1);
+} else {
+	console.log(
+		`i18n check PASSED — all ${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.css

@@ -1,42 +1,42 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
+#root {
+	max-width: 1280px;
+	margin: 0 auto;
+	padding: 2rem;
+	text-align: center;
+}
+
+.logo {
+	height: 6em;
+	padding: 1.5em;
+	will-change: filter;
+	transition: filter 300ms;
+}
+.logo:hover {
+	filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+	filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	a:nth-of-type(2) .logo {
+		animation: logo-spin infinite 20s linear;
+	}
+}
+
+.card {
+	padding: 2em;
+}
+
+.read-the-docs {
+	color: #888;
+}

src/App.tsx

@@ -1,34 +1,81 @@
-import { useEffect, useState } from "react";
-import { LaunchWindow } from "./components/launch/LaunchWindow";
-import { SourceSelector } from "./components/launch/SourceSelector";
-import VideoEditor from "./components/video-editor/VideoEditor";
-
-export default function App() {
-  const [windowType, setWindowType] = useState('');
-
-  useEffect(() => {
-    const params = new URLSearchParams(window.location.search);
-    const type = params.get('windowType') || '';
-    setWindowType(type);
-    if (type === 'hud-overlay' || type === 'source-selector') {
-      document.body.style.background = 'transparent';
-      document.documentElement.style.background = 'transparent';
-      document.getElementById('root')?.style.setProperty('background', 'transparent');
-    }
-  }, []);
-
-  switch (windowType) {
-    case 'hud-overlay':
-      return <LaunchWindow />;
-    case 'source-selector':
-      return <SourceSelector />;
-    case 'editor':
-      return <VideoEditor />;
-      default:
-      return (
-        <div className="w-full h-full bg-background text-foreground">
-          <h1>Openscreen</h1>
-        </div>
-      );
-  }
-}
+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";
+import { TooltipProvider } from "./components/ui/tooltip";
+import { ShortcutsConfigDialog } from "./components/video-editor/ShortcutsConfigDialog";
+import VideoEditor from "./components/video-editor/VideoEditor";
+import { ShortcutsProvider } from "./contexts/ShortcutsContext";
+import { loadAllCustomFonts } from "./lib/customFonts";
+
+export default function App() {
+	const [windowType, setWindowType] = useState(
+		() => new URLSearchParams(window.location.search).get("windowType") || "",
+	);
+
+	useEffect(() => {
+		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);
+		});
+	}, []);
+
+	const content = (() => {
+		switch (windowType) {
+			case "hud-overlay":
+				return <LaunchWindow />;
+			case "source-selector":
+				return <SourceSelector />;
+			case "countdown-overlay":
+				return <CountdownOverlay />;
+			case "editor":
+				return (
+					<ShortcutsProvider>
+						<VideoEditor />
+						<ShortcutsConfigDialog />
+					</ShortcutsProvider>
+				);
+			default:
+				return (
+					<div className="w-full h-full bg-background text-foreground">
+						<h1>Openscreen</h1>
+					</div>
+				);
+		}
+	})();
+
+	return (
+		<TooltipProvider>
+			{content}
+			<Toaster theme="dark" className="pointer-events-auto" />
+		</TooltipProvider>
+	);
+}

src/components/launch/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

@@ -1,37 +1,83 @@
+/* Electron-specific: no Tailwind equivalent for -webkit-app-region */
 .electronDrag {
-  -webkit-app-region: drag;
+	-webkit-app-region: drag;
 }
 
 .electronNoDrag {
-  -webkit-app-region: no-drag;
+	-webkit-app-region: no-drag;
 }
 
-
-.folderButton {
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 4px;
+.languageMenuScroll {
+	max-height: 16rem;
+	overflow-y: auto;
+	overflow-x: hidden;
+	overscroll-behavior: contain;
+	touch-action: pan-y;
+	-webkit-overflow-scrolling: touch;
 }
 
-.folderText {
-  color: #cbd5e1;
-  transition: text-decoration 0.15s;
+.languageMenuScroll::-webkit-scrollbar {
+	width: 8px;
 }
 
-.folderButton:hover .folderText {
-  text-decoration: underline;
+.languageMenuScroll::-webkit-scrollbar-track {
+	background: rgba(255, 255, 255, 0.04);
+	border-radius: 999px;
 }
 
-.hudOverlayButton {
-  cursor: pointer;
-  background: none;
-  border: none;
-  color: #fff;
-  opacity: 0.7;
-  transition: opacity 0.15s;
+.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;
 }
-.hudOverlayButton:hover {
-  opacity: 0.7;
-  background: none !important;
-}

src/components/launch/LaunchWindow.tsx

@@ -1,185 +1,695 @@
-import { useState, useEffect } from "react";
-import styles from "./LaunchWindow.module.css";
-import { useScreenRecorder } from "../../hooks/useScreenRecorder";
-import { Button } from "../ui/button";
-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 { MdMonitor } from "react-icons/md";
-import { RxDragHandleDots2 } from "react-icons/rx";
-import { FaFolderMinus } from "react-icons/fa6";
+import { FaFolderOpen } from "react-icons/fa6";
 import { FiMinus, FiX } from "react-icons/fi";
-import { ContentClamp } from "../ui/content-clamp";
+import {
+	MdCancel,
+	MdMic,
+	MdMicOff,
+	MdMonitor,
+	MdRestartAlt,
+	MdVideocam,
+	MdVideocamOff,
+	MdVideoFile,
+	MdVolumeOff,
+	MdVolumeUp,
+} from "react-icons/md";
+import { RxDragHandleDots2 } from "react-icons/rx";
+import { useI18n, useScopedT } from "@/contexts/I18nContext";
+import { 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";
+
+const ICON_SIZE = 20;
+
+const ICON_CONFIG = {
+	drag: { icon: RxDragHandleDots2, size: ICON_SIZE },
+	monitor: { icon: MdMonitor, size: ICON_SIZE },
+	volumeOn: { icon: MdVolumeUp, size: ICON_SIZE },
+	volumeOff: { icon: MdVolumeOff, size: ICON_SIZE },
+	micOn: { icon: MdMic, size: ICON_SIZE },
+	micOff: { icon: MdMicOff, size: ICON_SIZE },
+	webcamOn: { icon: MdVideocam, size: ICON_SIZE },
+	webcamOff: { icon: MdVideocamOff, size: ICON_SIZE },
+	pause: { icon: BsPauseCircle, size: ICON_SIZE },
+	resume: { icon: BsPlayCircle, size: ICON_SIZE },
+	stop: { icon: FaRegStopCircle, size: ICON_SIZE },
+	restart: { icon: MdRestartAlt, size: ICON_SIZE },
+	cancel: { icon: MdCancel, size: ICON_SIZE },
+	record: { icon: BsRecordCircle, size: ICON_SIZE },
+	videoFile: { icon: MdVideoFile, size: ICON_SIZE },
+	folder: { icon: FaFolderOpen, size: ICON_SIZE },
+	minimize: { icon: FiMinus, size: ICON_SIZE },
+	close: { icon: FiX, size: ICON_SIZE },
+} as const;
+
+type IconName = keyof typeof ICON_CONFIG;
+
+function getIcon(name: IconName, className?: string) {
+	const { icon: Icon, size } = ICON_CONFIG[name];
+	return <Icon size={size} className={className} />;
+}
+
+const hudGroupClasses =
+	"flex items-center gap-0.5 bg-white/5 rounded-full transition-colors duration-150 hover:bg-white/[0.08]";
+
+const hudIconBtnClasses =
+	"flex items-center justify-center p-2 rounded-full transition-all duration-150 cursor-pointer text-white hover:bg-white/10 hover:scale-[1.08] active:scale-95";
+
+const 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 { recording, toggleRecording } = useScreenRecorder();
-  const [recordingStart, setRecordingStart] = useState<number | null>(null);
-  const [elapsed, setElapsed] = useState(0);
+	const t = useScopedT("launch");
+	const availableLocales = getAvailableLocales();
+	const {
+		locale,
+		setLocale,
+		systemLocaleSuggestion,
+		acceptSystemLocaleSuggestion,
+		dismissSystemLocaleSuggestion,
+		resolveSystemLocaleSuggestion,
+	} = useI18n();
+	const suggestedLanguageName = systemLocaleSuggestion ? getLocaleName(systemLocaleSuggestion) : "";
 
-  useEffect(() => {
-    let timer: NodeJS.Timeout | null = null;
-    if (recording) {
-      if (!recordingStart) setRecordingStart(Date.now());
-      timer = setInterval(() => {
-        if (recordingStart) {
-          setElapsed(Math.floor((Date.now() - recordingStart) / 1000));
-        }
-      }, 1000);
-    } else {
-      setRecordingStart(null);
-      setElapsed(0);
-      if (timer) clearInterval(timer);
-    }
-    return () => {
-      if (timer) clearInterval(timer);
-    };
-  }, [recording, recordingStart]);
+	const {
+		recording,
+		paused,
+		elapsedSeconds,
+		toggleRecording,
+		togglePaused,
+		restartRecording,
+		cancelRecording,
+		microphoneEnabled,
+		setMicrophoneEnabled,
+		microphoneDeviceId,
+		setMicrophoneDeviceId,
+		systemAudioEnabled,
+		setSystemAudioEnabled,
+		webcamEnabled,
+		setWebcamEnabled,
+		webcamDeviceId,
+		setWebcamDeviceId,
+	} = useScreenRecorder();
 
-  const formatTime = (seconds: number) => {
-    const m = Math.floor(seconds / 60).toString().padStart(2, '0');
-    const s = (seconds % 60).toString().padStart(2, '0');
-    return `${m}:${s}`;
-  };
-  const [selectedSource, setSelectedSource] = useState("Screen");
-  const [hasSelectedSource, setHasSelectedSource] = useState(false);
+	const showMicControls = microphoneEnabled && !recording;
+	const showWebcamControls = webcamEnabled && !recording;
 
-  useEffect(() => {
-    const checkSelectedSource = async () => {
-      if (window.electronAPI) {
-        const source = await window.electronAPI.getSelectedSource();
-        if (source) {
-          setSelectedSource(source.name);
-          setHasSelectedSource(true);
-        } else {
-          setSelectedSource("Screen");
-          setHasSelectedSource(false);
-        }
-      }
-    };
+	const [isMicHovered, setIsMicHovered] = useState(false);
+	const [isMicFocused, setIsMicFocused] = useState(false);
+	const micExpanded = isMicHovered || isMicFocused;
 
-    checkSelectedSource();
-    
-    const interval = setInterval(checkSelectedSource, 500);
-    return () => clearInterval(interval);
-  }, []);
+	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 openSourceSelector = () => {
-    if (window.electronAPI) {
-      window.electronAPI.openSourceSelector();
-    }
-  };
+	const {
+		devices: micDevices,
+		selectedDeviceId: selectedMicId,
+		setSelectedDeviceId: setSelectedMicId,
+	} = useMicrophoneDevices(microphoneEnabled);
+	const {
+		devices: cameraDevices,
+		selectedDeviceId: selectedCameraId,
+		setSelectedDeviceId: setSelectedCameraId,
+		isLoading: isCameraDevicesLoading,
+		error: cameraDevicesError,
+	} = useCameraDevices(webcamEnabled);
 
-  const openVideoFile = async () => {
-    const result = await window.electronAPI.openVideoFilePicker();
-    
-    if (result.cancelled) {
-      return;
-    }
-    
-    if (result.success && result.path) {
-      await window.electronAPI.setCurrentVideoPath(result.path);
-      await window.electronAPI.switchToEditor();
-    }
-  };
+	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");
 
-  // IPC events for hide/close
-  const sendHudOverlayHide = () => {
-    if (window.electronAPI && window.electronAPI.hudOverlayHide) {
-      window.electronAPI.hudOverlayHide();
-    }
-  };
-  const sendHudOverlayClose = () => {
-    if (window.electronAPI && window.electronAPI.hudOverlayClose) {
-      window.electronAPI.hudOverlayClose();
-    }
-  };
+	const { level } = useAudioLevelMeter({
+		enabled: showMicControls,
+		deviceId: microphoneDeviceId,
+	});
 
-  return (
-    <div className="w-full h-full flex items-center bg-transparent">
-      <div
-        className={`w-full max-w-[500px] mx-auto flex items-center justify-between px-4 py-2 ${styles.electronDrag}`}
-        style={{
-          borderRadius: 16,
-          background: 'linear-gradient(135deg, rgba(30,30,40,0.92) 0%, rgba(20,20,30,0.85) 100%)',
-          backdropFilter: 'blur(32px) saturate(180%)',
-          WebkitBackdropFilter: 'blur(32px) saturate(180%)',
-          boxShadow: '0 4px 24px 0 rgba(0,0,0,0.28), 0 1px 3px 0 rgba(0,0,0,0.14) inset',
-          border: '1px solid rgba(80,80,120,0.22)',
-          minHeight: 44,
-        }}
-      >
-        <div className={`flex items-center gap-1 ${styles.electronDrag}`}> <RxDragHandleDots2 size={18} className="text-white/40" /> </div>
+	useEffect(() => {
+		if (selectedMicId && selectedMicId !== "default") {
+			setMicrophoneDeviceId(selectedMicId);
+		}
+	}, [selectedMicId, setMicrophoneDeviceId]);
 
-        <Button
-          variant="link"
-          size="sm"
-          className={`gap-1 text-white bg-transparent hover:bg-transparent px-0 flex-1 text-left text-xs ${styles.electronNoDrag}`}
-          onClick={openSourceSelector}
-          disabled={recording}
-        >
-          <MdMonitor size={14} className="text-white" />
-          <ContentClamp truncateLength={6}>{selectedSource}</ContentClamp>
-        </Button>
+	useEffect(() => {
+		if (selectedCameraId) {
+			setWebcamDeviceId(selectedCameraId);
+		}
+	}, [selectedCameraId, setWebcamDeviceId]);
 
-        <div className="w-px h-6 bg-white/30" />
+	useEffect(() => {
+		if (!import.meta.env.DEV) {
+			return;
+		}
 
-        <Button
-          variant="link"
-          size="sm"
-          onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
-          disabled={!hasSelectedSource && !recording}
-          className={`gap-1 text-white bg-transparent hover:bg-transparent px-0 flex-1 text-center text-xs ${styles.electronNoDrag}`}
-        >
-          {recording ? (
-            <>
-              <FaRegStopCircle size={14} className="text-red-400" />
-              <span className="text-red-400">{formatTime(elapsed)}</span>
-            </>
-          ) : (
-            <>
-              <BsRecordCircle size={14} className={hasSelectedSource ? "text-white" : "text-white/50"} />
-              <span className={hasSelectedSource ? "text-white" : "text-white/50"}>Record</span>
-            </>
-          )}
-        </Button>
-        
+		void requestCameraAccess().catch((error) => {
+			console.warn("Failed to trigger camera access request during development:", error);
+		});
+	}, []);
 
-        <div className="w-px h-6 bg-white/30" />
+	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);
+			}
+		};
 
-        <Button
-          variant="link"
-          size="sm"
-          onClick={openVideoFile}
-          className={`gap-1 text-white bg-transparent hover:bg-transparent px-0 flex-1 text-right text-xs ${styles.electronNoDrag} ${styles.folderButton}`}
-          disabled={recording}
-        >
-          <FaFolderMinus size={14} className="text-white" />
-          <span className={styles.folderText}>Open</span>
-        </Button>
+		const handleEscape = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				setIsLanguageMenuOpen(false);
+			}
+		};
 
-         {/* Separator before hide/close buttons */}
-        <div className="w-px h-6 bg-white/30 mx-2" />
-        <Button
-          variant="link"
-          size="icon"
-          className={`ml-2 ${styles.electronNoDrag} hudOverlayButton`}
-          title="Hide HUD"
-          onClick={sendHudOverlayHide}
-        >
-          <FiMinus size={18} style={{ color: '#fff', opacity: 0.7 }} />
-          
-        </Button>
+		window.addEventListener("pointerdown", handlePointerDown);
+		window.addEventListener("keydown", handleEscape);
 
-        <Button
-          variant="link"
-          size="icon"
-          className={`ml-1 ${styles.electronNoDrag} hudOverlayButton`}
-          title="Close App"
-          onClick={sendHudOverlayClose}
-        >
-          <FiX size={18} style={{ color: '#fff', opacity: 0.7 }} />
-        </Button>
-      </div>
-    </div>
-  );
+		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);
+
+	useEffect(() => {
+		const checkSelectedSource = async () => {
+			if (window.electronAPI) {
+				const source = await window.electronAPI.getSelectedSource();
+				if (source) {
+					setSelectedSource(source.name);
+					setHasSelectedSource(true);
+				} else {
+					setSelectedSource("Screen");
+					setHasSelectedSource(false);
+				}
+			}
+		};
+
+		checkSelectedSource();
+
+		const interval = setInterval(checkSelectedSource, 500);
+		return () => clearInterval(interval);
+	}, []);
+
+	const openSourceSelector = () => {
+		if (window.electronAPI) {
+			window.electronAPI.openSourceSelector();
+		}
+	};
+
+	const openVideoFile = async () => {
+		const result = await window.electronAPI.openVideoFilePicker();
+
+		if (result.canceled) {
+			return;
+		}
+
+		if (result.success && result.path) {
+			await window.electronAPI.setCurrentVideoPath(result.path);
+			await window.electronAPI.switchToEditor();
+		}
+	};
+
+	const openProjectFile = async () => {
+		const result = await window.electronAPI.loadProjectFile();
+		if (result.canceled || !result.success) return;
+		await window.electronAPI.switchToEditor();
+	};
+
+	const sendHudOverlayHide = () => {
+		if (window.electronAPI && window.electronAPI.hudOverlayHide) {
+			window.electronAPI.hudOverlayHide();
+		}
+	};
+	const sendHudOverlayClose = () => {
+		if (window.electronAPI && window.electronAPI.hudOverlayClose) {
+			window.electronAPI.hudOverlayClose();
+		}
+	};
+
+	const toggleMicrophone = () => {
+		if (!recording) {
+			setMicrophoneEnabled(!microphoneEnabled);
+		}
+	};
+
+	return (
+		// 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}`}
+				>
+					<div className="text-[13px] font-semibold text-white">
+						{t("systemLanguagePrompt.title")}
+					</div>
+					<div className="mt-1 text-[11px] leading-relaxed text-white/75">
+						{t("systemLanguagePrompt.description", {
+							language: suggestedLanguageName,
+						})}
+					</div>
+					<div className="mt-3 flex items-center justify-end gap-2">
+						<Button
+							type="button"
+							variant="ghost"
+							size="sm"
+							onClick={dismissSystemLocaleSuggestion}
+							className="h-7 text-xs text-white/80 hover:bg-white/10 hover:text-white"
+						>
+							{t("systemLanguagePrompt.keepDefault")}
+						</Button>
+						<Button
+							type="button"
+							size="sm"
+							onClick={acceptSystemLocaleSuggestion}
+							className="h-7 text-xs bg-white text-[#10121b] hover:bg-white/90"
+						>
+							{t("systemLanguagePrompt.switch", {
+								language: suggestedLanguageName,
+							})}
+						</Button>
+					</div>
+				</div>
+			)}
+
+			{/* Device selectors — fixed above HUD bar, viewport-relative, never clipped */}
+			{(showMicControls || showWebcamControls) && (
+				<div
+					className={`fixed bottom-[60px] left-1/2 -translate-x-1/2 flex items-center gap-2 animate-mic-panel-in ${styles.electronNoDrag}`}
+				>
+					{/* 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>
+					)}
+
+					{/* Webcam selector */}
+					{showWebcamControls && (
+						<div
+							className={`flex items-center gap-2 px-3 py-1.5 h-[36px] bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[24px] border border-white/10 rounded-xl shadow-2xl transition-all duration-300 overflow-hidden ${!webcamExpanded ? "opacity-60 grayscale-[0.5]" : "opacity-100"}`}
+							onMouseEnter={() => setIsWebcamHovered(true)}
+							onMouseLeave={() => setIsWebcamHovered(false)}
+							onFocus={() => setIsWebcamFocused(true)}
+							onBlur={() => setIsWebcamFocused(false)}
+							style={{ width: webcamExpanded ? "240px" : "140px", transition: "width 300ms ease" }}
+						>
+							<div className="relative flex-1 min-w-0">
+								{!webcamExpanded && (
+									<div className="text-white/60 text-[10px] font-medium truncate">
+										{selectedCameraLabel}
+									</div>
+								)}
+								{webcamExpanded &&
+									(isCameraDevicesLoading ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.searching")}
+										</span>
+									) : cameraDevicesError ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.unavailable")}
+										</span>
+									) : cameraDevices.length === 0 ? (
+										<span className="text-white/40 text-[10px] italic">
+											{t("webcam.noneFound")}
+										</span>
+									) : (
+										<>
+											<select
+												value={webcamDeviceId || selectedCameraId}
+												onChange={(e) => {
+													setSelectedCameraId(e.target.value);
+													setWebcamDeviceId(e.target.value);
+												}}
+												className="w-full appearance-none bg-white/5 text-white text-[11px] rounded-lg pl-2 pr-6 py-1 border border-white/10 outline-none hover:bg-white/10 transition-colors cursor-pointer"
+											>
+												{cameraDevices.map((device) => (
+													<option
+														key={device.deviceId}
+														value={device.deviceId}
+														className="bg-[#1c1c24]"
+													>
+														{device.label}
+													</option>
+												))}
+											</select>
+											<ChevronDown
+												size={12}
+												className="absolute right-1.5 top-1/2 -translate-y-1/2 text-white/40 pointer-events-none"
+											/>
+										</>
+									))}
+								{(!webcamExpanded || cameraDevices.length === 0) && (
+									<select
+										value={webcamDeviceId || selectedCameraId}
+										onChange={(e) => {
+											setSelectedCameraId(e.target.value);
+											setWebcamDeviceId(e.target.value);
+										}}
+										className="sr-only"
+									>
+										{cameraDevices.map((device) => (
+											<option key={device.deviceId} value={device.deviceId}>
+												{device.label}
+											</option>
+										))}
+									</select>
+								)}
+							</div>
+						</div>
+					)}
+				</div>
+			)}
+
+			{/* HUD bar — fixed at bottom center, viewport-relative, never moves */}
+			<div
+				className={`fixed bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-1.5 px-2 py-1.5 rounded-full shadow-hud-bar bg-gradient-to-br from-[rgba(28,28,36,0.97)] to-[rgba(18,18,26,0.96)] backdrop-blur-[16px] backdrop-saturate-[140%] border border-[rgba(80,80,120,0.25)]`}
+			>
+				{/* Drag handle */}
+				<div className={`flex items-center px-1 ${styles.electronDrag}`}>
+					{getIcon("drag", "text-white/30")}
+				</div>
+
+				{/* Source selector */}
+				<button
+					className={`${hudGroupClasses} p-2 ${styles.electronNoDrag}`}
+					onClick={openSourceSelector}
+					disabled={recording}
+					title={selectedSource}
+				>
+					{getIcon("monitor", "text-white/80")}
+					<span className="text-white/70 text-[11px] max-w-[72px] truncate">{selectedSource}</span>
+				</button>
+
+				{/* Audio controls group */}
+				<div className={`${hudGroupClasses} ${styles.electronNoDrag}`}>
+					<button
+						className={`${hudIconBtnClasses} ${systemAudioEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={() => !recording && setSystemAudioEnabled(!systemAudioEnabled)}
+						disabled={recording}
+						title={
+							systemAudioEnabled ? t("audio.disableSystemAudio") : t("audio.enableSystemAudio")
+						}
+					>
+						{systemAudioEnabled
+							? getIcon("volumeOn", "text-green-400")
+							: getIcon("volumeOff", "text-white/40")}
+					</button>
+					<button
+						className={`${hudIconBtnClasses} ${microphoneEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={toggleMicrophone}
+						disabled={recording}
+						title={microphoneEnabled ? t("audio.disableMicrophone") : t("audio.enableMicrophone")}
+					>
+						{microphoneEnabled
+							? getIcon("micOn", "text-green-400")
+							: getIcon("micOff", "text-white/40")}
+					</button>
+					<button
+						className={`${hudIconBtnClasses} ${webcamEnabled ? "drop-shadow-[0_0_4px_rgba(74,222,128,0.4)]" : ""}`}
+						onClick={async () => {
+							await setWebcamEnabled(!webcamEnabled);
+						}}
+						disabled={recording}
+						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 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>
+				)}
+
+				{!recording && (
+					<>
+						{/* Open video file */}
+						<Tooltip content={t("tooltips.openVideoFile")}>
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={openVideoFile}
+							>
+								{getIcon("videoFile", "text-white/60")}
+							</button>
+						</Tooltip>
+
+						{/* Open project */}
+						<Tooltip content={t("tooltips.openProject")}>
+							<button
+								className={`${hudIconBtnClasses} ${styles.electronNoDrag}`}
+								onClick={openProjectFile}
+							>
+								{getIcon("folder", "text-white/60")}
+							</button>
+						</Tooltip>
+					</>
+				)}
+
+				{/* Right sidebar controls */}
+				<div className={`${hudSidebarClasses} ${styles.electronNoDrag}`}>
+					<div className={`${styles.languageMenuContainer} ${styles.electronNoDrag}`}>
+						<button
+							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}`}
+						>
+							<div className="flex w-full items-center justify-center">
+								<Languages size={13} className="text-white/75" />
+							</div>
+						</button>
+					</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">
+						<button
+							className={windowBtnClasses}
+							title={t("tooltips.hideHUD")}
+							onClick={sendHudOverlayHide}
+						>
+							{getIcon("minimize", "text-white")}
+						</button>
+						<button
+							className={windowBtnClasses}
+							title={t("tooltips.closeApp")}
+							onClick={sendHudOverlayClose}
+						>
+							{getIcon("close", "text-white")}
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }

src/components/launch/SourceSelector.module.css

@@ -1,41 +1,102 @@
-
 .glassContainer {
-  background: linear-gradient(135deg, rgba(28,28,34,0.92) 0%, rgba(18,18,22,0.88) 100%);
-  backdrop-filter: blur(20px) saturate(160%);
-  -webkit-backdrop-filter: blur(20px) saturate(160%);
-  border-radius: 14px;
-  box-shadow: 0 4px 16px 0 rgba(0,0,0,0.32), 0 1px 3px 0 rgba(0,0,0,0.18) inset;
-  border: 1px solid rgba(60,60,80,0.18);
+	background: linear-gradient(135deg, rgba(28, 28, 34, 0.92) 0%, rgba(18, 18, 22, 0.88) 100%);
+	backdrop-filter: blur(20px) saturate(160%);
+	-webkit-backdrop-filter: blur(20px) saturate(160%);
+	border-radius: 30px;
+	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: 10px;
-  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);
-  transition: box-shadow 0.2s, border 0.2s, background 0.2s;
+	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);
+	transition:
+		box-shadow 0.2s ease,
+		border-color 0.2s ease,
+		transform 0.2s ease;
+	cursor: pointer;
+}
+
+.sourceCard:hover {
+	border-color: rgba(120, 120, 160, 0.35);
+	transform: translateY(-1px);
+	box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);
 }
 
 .selected {
-  border: 2px solid #34B27B;
-  background: linear-gradient(120deg, rgba(91,33,182,0.18) 0%, rgba(38,38,48,0.98) 100%);
-  box-shadow: 0 0 0 2px #34B27B33;
+	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),
+		0 0 4px rgba(52, 178, 123, 0.1);
+}
+
+.selected:hover {
+	transform: translateY(0);
 }
 
 .icon {
-  width: 13px;
-  height: 13px;
-  color: #c7d2fe;
+	width: 13px;
+	height: 13px;
+	color: #c7d2fe;
 }
 
 .name {
-  font-size: 0.85rem;
-  color: #f3f4f6;
-  font-weight: 500;
-  letter-spacing: 0.01em;
+	font-size: 0.8rem;
+	color: #e4e4e7;
+	font-weight: 500;
+	letter-spacing: 0.01em;
 }
 
 .cardText {
-  color: #a1a1aa;
-  font-size: 0.75rem;
+	color: #a1a1aa;
+	font-size: 0.75rem;
+}
+
+/* Checkmark badge */
+.checkBadge {
+	width: 18px;
+	height: 18px;
+	background: #34b27b;
+	border-radius: 9999px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	box-shadow: 0 0 8px rgba(52, 178, 123, 0.4);
+}
+
+/* scrollbar */
+
+.sourceGridScroll::-webkit-scrollbar {
+	width: 3px;
+}
+
+.sourceGridScroll::-webkit-scrollbar-track {
+	background: rgba(30, 30, 38, 0.3);
+	border-radius: 4px;
+}
+
+.sourceGridScroll::-webkit-scrollbar-thumb {
+	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

@@ -1,159 +1,164 @@
-import { useState, useEffect } from "react";
-import { Button } from "../ui/button";
+import { useEffect, useState } from "react";
 import { MdCheck } from "react-icons/md";
+import { useScopedT } from "@/contexts/I18nContext";
+import { Button } from "../ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import { Card } from "../ui/card";
 import styles from "./SourceSelector.module.css";
 
 interface DesktopSource {
-  id: string;
-  name: string;
-  thumbnail: string | null;
-  display_id: string;
-  appIcon: string | null;
+	id: string;
+	name: string;
+	thumbnail: string | null;
+	display_id: string;
+	appIcon: string | null;
 }
 
 export function SourceSelector() {
-  const [sources, setSources] = useState<DesktopSource[]>([]);
-  const [selectedSource, setSelectedSource] = useState<DesktopSource | null>(null);
-  const [loading, setLoading] = useState(true);
+	const t = useScopedT("launch");
+	const tc = useScopedT("common");
+	const [sources, setSources] = useState<DesktopSource[]>([]);
+	const [selectedSource, setSelectedSource] = useState<DesktopSource | null>(null);
+	const [loading, setLoading] = useState(true);
 
-  useEffect(() => {
-    async function fetchSources() {
-      setLoading(true);
-      try {
-        const rawSources = await window.electronAPI.getSources({
-          types: ['screen', 'window'],
-          thumbnailSize: { width: 320, height: 180 },
-          fetchWindowIcons: true
-        });
-        setSources(
-          rawSources.map(source => ({
-            id: source.id,
-            name:
-              source.id.startsWith('window:') && source.name.includes(' — ')
-                ? source.name.split(' — ')[1] || source.name
-                : source.name,
-            thumbnail: source.thumbnail,
-            display_id: source.display_id,
-            appIcon: source.appIcon
-          }))
-        );
-      } catch (error) {
-        console.error('Error loading sources:', error);
-      } finally {
-        setLoading(false);
-      }
-    }
-    fetchSources();
-  }, []);
+	useEffect(() => {
+		async function fetchSources() {
+			setLoading(true);
+			try {
+				const rawSources = await window.electronAPI.getSources({
+					types: ["screen", "window"],
+					thumbnailSize: { width: 320, height: 180 },
+					fetchWindowIcons: true,
+				});
+				setSources(
+					rawSources.map((source) => ({
+						id: source.id,
+						name:
+							source.id.startsWith("window:") && source.name.includes(" — ")
+								? source.name.split(" — ")[1] || source.name
+								: source.name,
+						thumbnail: source.thumbnail,
+						display_id: source.display_id,
+						appIcon: source.appIcon,
+					})),
+				);
+			} catch (error) {
+				console.error("Error loading sources:", error);
+			} finally {
+				setLoading(false);
+			}
+		}
+		fetchSources();
+	}, []);
 
-  const screenSources = sources.filter(s => s.id.startsWith('screen:'));
-  const windowSources = sources.filter(s => s.id.startsWith('window:'));
+	const screenSources = sources.filter((s) => s.id.startsWith("screen:"));
+	const windowSources = sources.filter((s) => s.id.startsWith("window:"));
 
-  const handleSourceSelect = (source: DesktopSource) => setSelectedSource(source);
-  const handleShare = async () => {
-    if (selectedSource) await window.electronAPI.selectSource(selectedSource);
-  };
+	const handleSourceSelect = (source: DesktopSource) => setSelectedSource(source);
+	const handleShare = async () => {
+		if (selectedSource) await window.electronAPI.selectSource(selectedSource);
+	};
 
-  if (loading) {
-    return (
-      <div className={`h-full flex items-center justify-center ${styles.glassContainer}`} style={{ minHeight: '100vh' }}>
-        <div className="text-center">
-          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-zinc-600 mx-auto mb-2" />
-          <p className="text-xs text-zinc-300">Loading sources...</p>
-        </div>
-      </div>
-    );
-  }
+	if (loading) {
+		return (
+			<div
+				className={`h-full flex items-center justify-center ${styles.glassContainer}`}
+				style={{ minHeight: "100vh" }}
+			>
+				<div className="text-center">
+					<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>
+		);
+	}
 
-  return (
-    <div className={`min-h-screen flex flex-col items-center justify-center ${styles.glassContainer}`}>
-      <div className="flex-1 flex flex-col w-full max-w-xl" style={{ padding: 0 }}>
-        <Tabs defaultValue="screens">
-          <TabsList className="grid grid-cols-2 mb-3 bg-zinc-900/40 rounded-full">
-            <TabsTrigger value="screens" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Screens</TabsTrigger>
-            <TabsTrigger value="windows" className="data-[state=active]:bg-[#34B27B] data-[state=active]:text-white text-zinc-200 rounded-full text-xs py-1">Windows</TabsTrigger>
-          </TabsList>
-            <div className="h-72 flex flex-col justify-stretch">
-            <TabsContent value="screens" className="h-full">
-              <div className="grid grid-cols-2 gap-2 h-full overflow-y-auto pr-1 relative">
-                {screenSources.map(source => (
-                  <Card
-                    key={source.id}
-                    className={`${styles.sourceCard} ${selectedSource?.id === source.id ? styles.selected : ''} cursor-pointer h-fit p-2 scale-95`}
-                    style={{ margin: 8, width: '90%', maxWidth: 220 }}
-                    onClick={() => handleSourceSelect(source)}
-                  >
-                    <div className="p-1">
-                      <div className="relative mb-1">
-                        <img
-                          src={source.thumbnail || ''}
-                          alt={source.name}
-                          className="w-full aspect-video object-cover rounded border border-zinc-800"
-                        />
-                        {selectedSource?.id === source.id && (
-                          <div className="absolute -top-1 -right-1">
-                            <div className="w-4 h-4 bg-[#34B27B] rounded-full flex items-center justify-center shadow-md">
-                              <MdCheck className={styles.icon} />
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                      <div className={styles.name + " truncate"}>{source.name}</div>
-                    </div>
-                  </Card>
-                ))}
-              </div>
-            </TabsContent>
-            <TabsContent value="windows" className="h-full">
-              <div className="grid grid-cols-2 gap-2 h-full overflow-y-auto pr-1 relative">
-                {windowSources.map(source => (
-                  <Card
-                    key={source.id}
-                    className={`${styles.sourceCard} ${selectedSource?.id === source.id ? styles.selected : ''} cursor-pointer h-fit p-2 scale-95`}
-                    style={{ margin: 8, width: '90%', maxWidth: 220 }}
-                    onClick={() => handleSourceSelect(source)}
-                  >
-                    <div className="p-1">
-                      <div className="relative mb-1">
-                        <img
-                          src={source.thumbnail || ''}
-                          alt={source.name}
-                          className="w-full aspect-video object-cover rounded border border-gray-700"
-                        />
-                        {selectedSource?.id === source.id && (
-                          <div className="absolute -top-1 -right-1">
-                            <div className="w-4 h-4 bg-blue-600 rounded-full flex items-center justify-center shadow-md">
-                              <MdCheck className={styles.icon} />
-                            </div>
-                          </div>
-                        )}
-                      </div>
-                      <div className="flex items-center gap-1">
-                        {source.appIcon && (
-                          <img
-                            src={source.appIcon}
-                            alt="App icon"
-                            className={styles.icon + " flex-shrink-0"}
-                          />
-                        )}
-                        <div className={styles.name + " truncate"}>{source.name}</div>
-                      </div>
-                    </div>
-                  </Card>
-                ))}
-              </div>
-            </TabsContent>
-          </div>
-        </Tabs>
-      </div>
-      <div className="border-t border-zinc-800 p-2 w-full max-w-xl">
-        <div className="flex justify-center gap-2">
-          <Button variant="outline" onClick={() => window.close()} className="px-4 py-1 text-xs bg-zinc-800 border-zinc-700 text-zinc-200 hover:bg-zinc-700">Cancel</Button>
-          <Button onClick={handleShare} disabled={!selectedSource} className="px-4 py-1 text-xs bg-[#34B27B] text-white hover:bg-[#34B27B]/80 disabled:opacity-50 disabled:bg-zinc-700">Share</Button>
-        </div>
-      </div>
-    </div>
-  );
+	const renderSourceCard = (source: DesktopSource) => {
+		const isSelected = selectedSource?.id === source.id;
+		return (
+			<div
+				key={source.id}
+				className={`${styles.sourceCard} ${isSelected ? styles.selected : ""} p-2`}
+				onClick={() => handleSourceSelect(source)}
+			>
+				<div className="relative mb-1.5">
+					<img
+						src={source.thumbnail || ""}
+						alt={source.name}
+						className="w-full aspect-video object-cover rounded-xl [corner-shape:squircle] "
+					/>
+					{isSelected && (
+						<div className="absolute -top-1 -right-1">
+							<div className={styles.checkBadge}>
+								<MdCheck size={12} className="text-white" />
+							</div>
+						</div>
+					)}
+				</div>
+				<div className="flex items-center gap-1.5">
+					{source.appIcon && (
+						<img src={source.appIcon} alt="" className={`${styles.icon} flex-shrink-0`} />
+					)}
+					<div className={`${styles.name} truncate`}>{source.name}</div>
+				</div>
+			</div>
+		);
+	};
+
+	return (
+		<div className={`min-h-screen flex flex-col ${styles.glassContainer}`}>
+			<div className="flex-1 flex flex-col w-full px-4 pt-4">
+				<Tabs
+					defaultValue={screenSources.length === 0 ? "windows" : "screens"}
+					className="flex-1 flex flex-col"
+				>
+					<TabsList className="grid grid-cols-2 mb-3 bg-white/5 rounded-[14px] squircle ">
+						<TabsTrigger
+							value="screens"
+							className="data-[state=active]:bg-white/15 data-[state=active]:text-white text-zinc-400 rounded-[12px] squircle text-xs py-1.5 transition-all"
+						>
+							{t("sourceSelector.screens", { count: String(screenSources.length) })}
+						</TabsTrigger>
+						<TabsTrigger
+							value="windows"
+							className="data-[state=active]:bg-white/15 data-[state=active]:text-white text-zinc-400 rounded-[12px] squircle text-xs py-1.5 transition-all"
+						>
+							{t("sourceSelector.windows", { count: String(windowSources.length) })}
+						</TabsTrigger>
+					</TabsList>
+					<div className="flex-1 min-h-0">
+						<TabsContent value="screens" className="h-full mt-0">
+							<div
+								className={`grid grid-cols-2 gap-3 h-[280px] overflow-y-auto pt-1 pr-1.5 auto-rows-min ${styles.sourceGridScroll}`}
+							>
+								{screenSources.map(renderSourceCard)}
+							</div>
+						</TabsContent>
+						<TabsContent value="windows" className="h-full mt-0">
+							<div
+								className={`grid grid-cols-2 gap-3 h-[280px] overflow-y-auto pt-1 pr-1.5 auto-rows-min ${styles.sourceGridScroll}`}
+							>
+								{windowSources.map(renderSourceCard)}
+							</div>
+						</TabsContent>
+					</div>
+				</Tabs>
+			</div>
+			<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 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 active:scale-95 transition-transform duration-150 hover:bg-[#34B27B]/80 disabled:opacity-30 disabled:bg-zinc-700 rounded-full"
+				>
+					{tc("actions.share")}
+				</Button>
+			</div>
+		</div>
+	);
 }

src/components/ui/accordion.tsx

@@ -1,55 +1,55 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+	React.ElementRef<typeof AccordionPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b border-white/5", className)}
-    {...props}
-  />
-))
-AccordionItem.displayName = "AccordionItem"
+	<AccordionPrimitive.Item
+		ref={ref}
+		className={cn("border-b border-white/5", className)}
+		{...props}
+	/>
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+	React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 items-center justify-between py-3 text-sm font-medium text-slate-200 transition-all hover:text-white [&[data-state=open]>svg]:rotate-180",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="h-4 w-4 shrink-0 text-slate-400 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				"flex flex-1 items-center justify-between py-3 text-sm font-medium text-slate-200 transition-all hover:text-white [&[data-state=open]>svg]:rotate-180",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDown className="h-4 w-4 shrink-0 text-slate-400 transition-transform duration-200" />
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+	React.ElementRef<typeof AccordionPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
-    {...props}
-  >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
-  </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+	<AccordionPrimitive.Content
+		ref={ref}
+		className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+		{...props}
+	>
+		<div className={cn("pb-4 pt-0", className)}>{children}</div>
+	</AccordionPrimitive.Content>
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

src/components/ui/audio-level-meter.tsx

@@ -0,0 +1,37 @@
+interface AudioLevelMeterProps {
+	level: number; // 0-100
+	className?: string;
+}
+
+const bars = [
+	{ threshold: 10, height: "30%" },
+	{ threshold: 25, height: "45%" },
+	{ threshold: 45, height: "60%" },
+	{ threshold: 65, height: "75%" },
+	{ threshold: 85, height: "90%" },
+];
+
+function getBarColor(level: number, threshold: number) {
+	if (!level || level < threshold) return "bg-slate-700";
+	if (threshold > 80) return "bg-red-500";
+	if (threshold > 60) return "bg-yellow-500";
+	if (threshold > 40) return "bg-green-500";
+	return "bg-emerald-500";
+}
+
+export function AudioLevelMeter({ level, className = "" }: AudioLevelMeterProps) {
+	return (
+		<div className={`flex items-end justify-between gap-1.5 h-6 ${className}`}>
+			{bars.map((bar, index) => (
+				<div
+					key={index}
+					className={`flex-1 rounded-sm transition-all duration-100 ease-out ${getBarColor(level, bar.threshold)}`}
+					style={{
+						height: level >= bar.threshold ? bar.height : "15%",
+						opacity: level >= bar.threshold ? 1 : 0.4,
+					}}
+				/>
+			))}
+		</div>
+	);
+}

src/components/ui/button.tsx

@@ -1,57 +1,50 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+				destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+				outline:
+					"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+				ghost: "hover:bg-accent hover:text-accent-foreground",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-md px-3 text-xs",
+				lg: "h-10 rounded-md px-8",
+				icon: "h-9 w-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? Slot : "button";
+		return (
+			<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+		);
+	},
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };

src/components/ui/card.tsx

@@ -1,76 +1,55 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
-      className
-    )}
-    {...props}
-  />
-))
-Card.displayName = "Card"
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+			{...props}
+		/>
+	),
+);
+Card.displayName = "Card";
 
-const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
-))
-CardHeader.displayName = "CardHeader"
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+	),
+);
+CardHeader.displayName = "CardHeader";
 
-const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-))
-CardTitle.displayName = "CardTitle"
+const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div
+			ref={ref}
+			className={cn("font-semibold leading-none tracking-tight", className)}
+			{...props}
+		/>
+	),
+);
+CardTitle.displayName = "CardTitle";
 
-const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-CardDescription.displayName = "CardDescription"
+const CardDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
+	),
+);
+CardDescription.displayName = "CardDescription";
 
-const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+	),
+);
+CardContent.displayName = "CardContent";
 
-const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
-))
-CardFooter.displayName = "CardFooter"
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+	({ className, ...props }, ref) => (
+		<div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+	),
+);
+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/content-clamp.tsx

@@ -1,86 +1,81 @@
-"use client"
-
-import * as React from "react"
-
-import { cn } from "@/lib/utils"
-import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "./popover"
-
-interface ContentClampProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-  truncateLength?: number
-}
-
-function ContentClamp({
-  children,
-  className,
-  truncateLength = 50,
-  ...props
-}: ContentClampProps) {
-  const text = typeof children === "string" ? children : String(children ?? "")
-  const isTruncated = text.length > truncateLength
-
-  const [open, setOpen] = React.useState(false)
-  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null)
-
-  const handleMouseEnter = () => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current)
-      timeoutRef.current = null
-    }
-    setOpen(true)
-  }
-
-  const handleMouseLeave = () => {
-    timeoutRef.current = setTimeout(() => {
-      setOpen(false)
-    }, 100)
-  }
-
-  React.useEffect(() => {
-    return () => {
-      if (timeoutRef.current) {
-        clearTimeout(timeoutRef.current)
-      }
-    }
-  }, [])
-
-  if (!isTruncated) {
-    return (
-      <div className={cn("inline", className)} {...props}>
-        {children}
-      </div>
-    )
-  }
-
-  const truncatedText = text.slice(0, truncateLength) + "..."
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <span
-          className={className}
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-          onClick={(e) => e.preventDefault()}
-          {...props}
-        >
-          {truncatedText}
-        </span>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-auto max-w-sm rounded-lg border border-white bg-popover p-3 text-sm text-popover-foreground"
-        sideOffset={8}
-        animated={false}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        onPointerDownOutside={(e) => e.preventDefault()}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <PopoverArrow className="fill-white" />
-        {children}
-      </PopoverContent>
-    </Popover>
-  )
-}
-
-export { ContentClamp }
+"use client";
+
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+import { Popover, PopoverArrow, PopoverContent, PopoverTrigger } from "./popover";
+
+interface ContentClampProps extends React.HTMLAttributes<HTMLDivElement> {
+	children: React.ReactNode;
+	truncateLength?: number;
+}
+
+function ContentClamp({ children, className, truncateLength = 50, ...props }: ContentClampProps) {
+	const text = typeof children === "string" ? children : String(children ?? "");
+	const isTruncated = text.length > truncateLength;
+
+	const [open, setOpen] = React.useState(false);
+	const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
+
+	const handleMouseEnter = () => {
+		if (timeoutRef.current) {
+			clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+		setOpen(true);
+	};
+
+	const handleMouseLeave = () => {
+		timeoutRef.current = setTimeout(() => {
+			setOpen(false);
+		}, 100);
+	};
+
+	React.useEffect(() => {
+		return () => {
+			if (timeoutRef.current) {
+				clearTimeout(timeoutRef.current);
+			}
+		};
+	}, []);
+
+	if (!isTruncated) {
+		return (
+			<div className={cn("inline", className)} {...props}>
+				{children}
+			</div>
+		);
+	}
+
+	const truncatedText = text.slice(0, truncateLength) + "...";
+
+	return (
+		<Popover open={open} onOpenChange={setOpen}>
+			<PopoverTrigger asChild>
+				<span
+					className={className}
+					onMouseEnter={handleMouseEnter}
+					onMouseLeave={handleMouseLeave}
+					onClick={(e) => e.preventDefault()}
+					{...props}
+				>
+					{truncatedText}
+				</span>
+			</PopoverTrigger>
+			<PopoverContent
+				className="w-auto max-w-sm rounded-lg border border-white bg-popover p-3 text-sm text-popover-foreground"
+				sideOffset={8}
+				animated={false}
+				onMouseEnter={handleMouseEnter}
+				onMouseLeave={handleMouseLeave}
+				onPointerDownOutside={(e) => e.preventDefault()}
+				onClick={(e) => e.stopPropagation()}
+			>
+				<PopoverArrow className="fill-white" />
+				{children}
+			</PopoverContent>
+		</Popover>
+	);
+}
+
+export { ContentClamp };

src/components/ui/dialog.tsx

@@ -1,120 +1,102 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
-    )}
-    {...props}
-  />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-[9999] bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-[10000] grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
-    {...props}
-  />
-)
-DialogFooter.displayName = "DialogFooter"
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
-    )}
-    {...props}
-  />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold leading-none tracking-tight", className)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-}
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogOverlay,
+	DialogPortal,
+	DialogTitle,
+	DialogTrigger,
+};

src/components/ui/dropdown-menu.tsx

@@ -1,199 +1,194 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
 >(({ className, inset, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
-))
-DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto" />
+	</DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 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 origin-[--radix-dropdown-menu-content-transform-origin]",
-        className
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+		portalled?: boolean;
+	}
+>(({ className, sideOffset = 4, portalled = true, ...props }, ref) => {
+	const content = (
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 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 origin-[--radix-dropdown-menu-content-transform-origin]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+
+	if (!portalled) {
+		return content;
+	}
+
+	return <DropdownMenuPrimitive.Portal>{content}</DropdownMenuPrimitive.Portal>;
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.CheckboxItem>
-))
-DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className="h-2 w-2 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className
-    )}
-    {...props}
-  />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+		{...props}
+	/>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
-const DropdownMenuShortcut = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span className={cn("ml-auto text-xs tracking-widest opacity-60", className)} {...props} />
+	);
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
-}
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuPortal,
+	DropdownMenuRadioGroup,
+	DropdownMenuRadioItem,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuTrigger,
+};

src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					"flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+					className,
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
+
+export { Input };

src/components/ui/item-content.tsx

@@ -15,4 +15,4 @@ function ItemContent({ children, classes }: ItemContentProps) {
 	);
 }
 
-export default ItemContent;
+export default ItemContent;

src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(({ className, ...props }, ref) => {
+	return (
+		<label
+			ref={ref}
+			className={cn(
+				"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+Label.displayName = "Label";
+
+export { Label };

src/components/ui/popover.tsx

@@ -1,66 +1,60 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+	return <PopoverPrimitive.Root data-slot="popover" {...props} />;
 }
 
-function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+function PopoverTrigger({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+	return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
 }
 
 function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  animated = true,
-  ...props
+	className,
+	align = "center",
+	sideOffset = 4,
+	animated = true,
+	...props
 }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
-  animated?: boolean
+	animated?: boolean;
 }) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
-          animated &&
-            "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 origin-(--radix-popover-content-transform-origin)",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
+	return (
+		<PopoverPrimitive.Portal>
+			<PopoverPrimitive.Content
+				data-slot="popover-content"
+				align={align}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+					animated &&
+						"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 origin-(--radix-popover-content-transform-origin)",
+					className,
+				)}
+				{...props}
+			/>
+		</PopoverPrimitive.Portal>
+	);
 }
 
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+	return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
 }
 
 function PopoverArrow({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof PopoverPrimitive.Arrow>) {
-  return (
-    <PopoverPrimitive.Arrow
-      data-slot="popover-arrow"
-      className={cn("fill-popover", className)}
-      {...props}
-    />
-  )
+	return (
+		<PopoverPrimitive.Arrow
+			data-slot="popover-arrow"
+			className={cn("fill-popover", className)}
+			{...props}
+		/>
+	);
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverArrow }
+export { Popover, PopoverAnchor, PopoverArrow, PopoverContent, PopoverTrigger };

src/components/ui/select.tsx

@@ -1,160 +1,169 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="h-4 w-4 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn("flex cursor-default items-center justify-center py-1", className)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 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
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	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(
+					"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",
+					className,
+				)}
+				position={position}
+				{...props}
+			>
+				{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<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
-    {...props}
-  />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+		{...props}
+	/>
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
 
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
-    {...props}
-  />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
-}
+	Select,
+	SelectContent,
+	SelectGroup,
+	SelectItem,
+	SelectLabel,
+	SelectScrollDownButton,
+	SelectScrollUpButton,
+	SelectSeparator,
+	SelectTrigger,
+	SelectValue,
+};

src/components/ui/slider.tsx

@@ -1,26 +1,23 @@
-import * as React from "react"
-import * as SliderPrimitive from "@radix-ui/react-slider"
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none select-none items-center",
-      className
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-white/10">
-      <SliderPrimitive.Range className="absolute h-full bg-[#34B27B]" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-[#34B27B] bg-[#34B27B] shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#34B27B]/50 disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
-))
-Slider.displayName = SliderPrimitive.Root.displayName
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn("relative flex w-full touch-none select-none items-center", className)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-white/10">
+			<SliderPrimitive.Range className="absolute h-full bg-[#34B27B]" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border-2 border-[#34B27B] bg-[#34B27B] shadow transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#34B27B]/50 disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
 
-export { Slider }
+export { Slider };

src/components/ui/sonner.tsx

@@ -3,25 +3,23 @@ import { Toaster as Sonner } from "sonner";
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  return (
-    <Sonner
-      theme="light"
-      className="toaster group"
-      duration={3000}
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      {...props}
-    />
-  );
+	return (
+		<Sonner
+			theme="light"
+			className="toaster group"
+			duration={3000}
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton: "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton: "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			{...props}
+		/>
+	);
 };
 
 export { Toaster };

src/components/ui/switch.tsx

@@ -1,30 +1,30 @@
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-      "data-[state=checked]:bg-[#34B27B] data-[state=unchecked]:bg-[#23232a]",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform",
-        "bg-[#f5f5f7] dark:bg-[#23232a]",
-        "data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+			"data-[state=checked]:bg-[#34B27B] data-[state=unchecked]:bg-[#23232a]",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform",
+				"bg-[#f5f5f7] dark:bg-[#23232a]",
+				"data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };

src/components/ui/tabs.tsx

@@ -1,53 +1,53 @@
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
-      className
-    )}
-    {...props}
-  />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
-    )}
-    {...props}
-  />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+			className,
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsContent, TabsList, TabsTrigger };

src/components/ui/toggle-group.tsx

@@ -1,61 +1,56 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
-import { type VariantProps } from "class-variance-authority"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { toggleVariants } from "@/components/ui/toggle";
+import { cn } from "@/lib/utils";
 
-import { cn } from "@/lib/utils"
-import { toggleVariants } from "@/components/ui/toggle"
-
-const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
->({
-  size: "default",
-  variant: "default",
-})
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+	size: "default",
+	variant: "default",
+});
 
 const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
-))
+	<ToggleGroupPrimitive.Root
+		ref={ref}
+		className={cn("flex items-center justify-center gap-1", className)}
+		{...props}
+	>
+		<ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
+	</ToggleGroupPrimitive.Root>
+));
 
-ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
 const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+		VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext)
+	const context = React.useContext(ToggleGroupContext);
 
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  )
-})
+	return (
+		<ToggleGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
+});
 
-ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
-export { ToggleGroup, ToggleGroupItem }
+export { ToggleGroup, ToggleGroupItem };

src/components/ui/toggle.tsx

@@ -1,45 +1,43 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TogglePrimitive from "@radix-ui/react-toggle"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as TogglePrimitive from "@radix-ui/react-toggle";
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-10 px-3",
-        sm: "h-9 px-2.5",
-        lg: "h-11 px-5",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+	"inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-10 px-3",
+				sm: "h-9 px-2.5",
+				lg: "h-11 px-5",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
 
 const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof TogglePrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
-))
+	<TogglePrimitive.Root
+		ref={ref}
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>
+));
 
-Toggle.displayName = TogglePrimitive.Root.displayName
+Toggle.displayName = TogglePrimitive.Root.displayName;
 
-export { Toggle, toggleVariants }
+export { Toggle, toggleVariants };

src/components/ui/tooltip.tsx

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

src/components/video-editor/AddCustomFontDialog.tsx

@@ -0,0 +1,180 @@
+import { Plus } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useScopedT } from "@/contexts/I18nContext";
+import {
+	addCustomFont,
+	type CustomFont,
+	generateFontId,
+	isValidGoogleFontsUrl,
+	parseFontFamilyFromImport,
+} from "@/lib/customFonts";
+
+interface AddCustomFontDialogProps {
+	onFontAdded?: (font: CustomFont) => void;
+}
+
+export function AddCustomFontDialog({ onFontAdded }: AddCustomFontDialogProps) {
+	const t = useScopedT("settings");
+	const tc = useScopedT("common");
+	const [open, setOpen] = useState(false);
+	const [importUrl, setImportUrl] = useState("");
+	const [fontName, setFontName] = useState("");
+	const [loading, setLoading] = useState(false);
+
+	const handleImportUrlChange = (url: string) => {
+		setImportUrl(url);
+
+		// Auto-extract font name if valid Google Fonts URL
+		if (isValidGoogleFontsUrl(url)) {
+			const extracted = parseFontFamilyFromImport(url);
+			if (extracted && !fontName) {
+				setFontName(extracted);
+			}
+		}
+	};
+
+	const handleAdd = async () => {
+		// Validate inputs
+		if (!importUrl.trim()) {
+			toast.error(t("customFont.errorEmptyUrl"));
+			return;
+		}
+
+		if (!isValidGoogleFontsUrl(importUrl)) {
+			toast.error(t("customFont.errorInvalidUrl"));
+			return;
+		}
+
+		if (!fontName.trim()) {
+			toast.error(t("customFont.errorEmptyName"));
+			return;
+		}
+
+		setLoading(true);
+
+		try {
+			// Extract font family from URL
+			const fontFamily = parseFontFamilyFromImport(importUrl);
+			if (!fontFamily) {
+				toast.error(t("customFont.errorExtractFailed"));
+				setLoading(false);
+				return;
+			}
+
+			// Create custom font object
+			const newFont: CustomFont = {
+				id: generateFontId(fontName),
+				name: fontName.trim(),
+				fontFamily: fontFamily,
+				importUrl: importUrl.trim(),
+			};
+
+			// Add font (this will load and verify it) - throws if it fails
+			await addCustomFont(newFont);
+
+			// Notify parent
+			if (onFontAdded) {
+				onFontAdded(newFont);
+			}
+
+			toast.success(t("customFont.successMessage", { fontName }));
+
+			// Reset and close
+			setImportUrl("");
+			setFontName("");
+			setOpen(false);
+		} catch (error) {
+			console.error("Failed to add custom font:", error);
+			const errorMessage = error instanceof Error ? error.message : "Failed to load font";
+			toast.error(t("customFont.failedToAdd"), {
+				description: errorMessage.includes("timeout")
+					? t("customFont.errorTimeout")
+					: t("customFont.errorLoadFailed"),
+			});
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button
+					variant="outline"
+					size="sm"
+					className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10 h-9 text-xs"
+				>
+					<Plus className="w-3 h-3 mr-1" />
+					{t("customFont.dialogTitle")}
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="bg-[#1a1a1c] border-white/10 text-slate-200">
+				<DialogHeader>
+					<DialogTitle>{t("customFont.dialogTitle")}</DialogTitle>
+					<DialogDescription className="text-slate-400">
+						Add a custom font from Google Fonts to use in your annotations.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-4 mt-4">
+					<div className="space-y-2">
+						<Label htmlFor="import-url" className="text-slate-200">
+							{t("customFont.urlLabel")}
+						</Label>
+						<Input
+							id="import-url"
+							placeholder={t("customFont.urlPlaceholder")}
+							value={importUrl}
+							onChange={(e) => handleImportUrlChange(e.target.value)}
+							className="bg-white/5 border-white/10 text-slate-200"
+						/>
+						<p className="text-xs text-slate-400">{t("customFont.urlHelp")}</p>
+					</div>
+
+					<div className="space-y-2">
+						<Label htmlFor="font-name" className="text-slate-200">
+							{t("customFont.nameLabel")}
+						</Label>
+						<Input
+							id="font-name"
+							placeholder={t("customFont.namePlaceholder")}
+							value={fontName}
+							onChange={(e) => setFontName(e.target.value)}
+							className="bg-white/5 border-white/10 text-slate-200"
+						/>
+						<p className="text-xs text-slate-400">{t("customFont.nameHelp")}</p>
+					</div>
+
+					<div className="flex justify-end gap-2 mt-6">
+						<Button
+							variant="outline"
+							onClick={() => setOpen(false)}
+							className="bg-white/5 border-white/10 text-slate-200 hover:bg-white/10"
+						>
+							{tc("actions.cancel")}
+						</Button>
+						<Button
+							onClick={handleAdd}
+							disabled={loading}
+							className="bg-blue-600 hover:bg-blue-700 text-white"
+						>
+							{loading ? t("customFont.addingButton") : t("customFont.addButton")}
+						</Button>
+					</div>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}

src/components/video-editor/AnnotationOverlay.tsx

@@ -1,218 +1,635 @@
-import { useRef } from "react";
+import { type CSSProperties, type PointerEvent, useEffect, useRef, useState } from "react";
 import { Rnd } from "react-rnd";
-import type { AnnotationRegion } from "./types";
+import {
+	getBlurOverlayColor,
+	getMosaicGridOverlayColor,
+	getNormalizedMosaicBlockSize,
+} from "@/lib/blurEffects";
 import { cn } from "@/lib/utils";
 import { getArrowComponent } from "./ArrowSvgs";
+import {
+	type AnnotationRegion,
+	type BlurData,
+	DEFAULT_BLUR_BLOCK_SIZE,
+	DEFAULT_BLUR_DATA,
+	DEFAULT_BLUR_INTENSITY,
+} from "./types";
+
+const FREEHAND_POINT_THRESHOLD = 1;
+type PreviewCanvasSource = {
+	width: number;
+	height: number;
+	clientWidth?: number;
+	clientHeight?: number;
+};
+
+function buildBlurPolygonClipPath(points: Array<{ x: number; y: number }>) {
+	if (points.length < 3) return undefined;
+	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;
-  isSelected: boolean;
-  containerWidth: number;
-  containerHeight: number;
-  onPositionChange: (id: string, position: { x: number; y: number }) => void;
-  onSizeChange: (id: string, size: { width: number; height: number }) => void;
-  onClick: (id: string) => void;
-  zIndex: number;
-  isSelectedBoost: boolean; // Boost z-index when selected for easy editing
+	annotation: AnnotationRegion;
+	isSelected: boolean;
+	containerWidth: number;
+	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({
-  annotation,
-  isSelected,
-  containerWidth,
-  containerHeight,
-  onPositionChange,
-  onSizeChange,
-  onClick,
-  zIndex,
-  isSelectedBoost,
+	annotation,
+	isSelected,
+	containerWidth,
+	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,
+	});
 
-  const isDraggingRef = useRef(false);
+	useEffect(() => {
+		setLiveRect({
+			x: committedX,
+			y: committedY,
+			width: committedWidth,
+			height: committedHeight,
+		});
+	}, [committedHeight, committedWidth, committedX, committedY]);
 
-  const renderArrow = () => {
-    const direction = annotation.figureData?.arrowDirection || 'right';
-    const color = annotation.figureData?.color || '#34B27B';
-    const strokeWidth = annotation.figureData?.strokeWidth || 4;
+	const { x, y, width, height } = liveRect;
 
-    const ArrowComponent = getArrowComponent(direction);
-    return <ArrowComponent color={color} strokeWidth={strokeWidth} />;
-  };
+	useEffect(() => {
+		if (annotation.type !== "blur" || blurType !== "mosaic") {
+			return;
+		}
+		void previewFrameVersion;
 
-  const renderContent = () => {
-    switch (annotation.type) {
-      case 'text':
-        return (
-          <div
-            className="w-full h-full flex items-center p-2 overflow-hidden"
-            style={{
-              justifyContent: annotation.style.textAlign === 'left' ? 'flex-start' : 
-                            annotation.style.textAlign === 'right' ? 'flex-end' : 'center',
-              alignItems: 'center',
-            }}
-          >
-            <span
-              style={{
-                color: annotation.style.color,
-                backgroundColor: annotation.style.backgroundColor,
-                fontSize: `${annotation.style.fontSize}px`,
-                fontFamily: annotation.style.fontFamily,
-                fontWeight: annotation.style.fontWeight,
-                fontStyle: annotation.style.fontStyle,
-                textDecoration: annotation.style.textDecoration,
-                textAlign: annotation.style.textAlign,
-                wordBreak: 'break-word',
-                whiteSpace: 'pre-wrap',
-                boxDecorationBreak: 'clone',
-                WebkitBoxDecorationBreak: 'clone',
-                padding: '0.1em 0.2em',
-                borderRadius: '4px',
-                lineHeight: '1.4',
-              }}
-            >
-              {annotation.content}
-            </span>
-          </div>
-        );
+		const canvas = mosaicCanvasRef.current;
+		const sourceCanvas = previewSourceCanvas;
+		if (!canvas || !sourceCanvas) {
+			return;
+		}
 
-      case 'image':
-        if (annotation.content && annotation.content.startsWith('data:image')) {
-          return (
-            <img
-              src={annotation.content}
-              alt="Annotation"
-              className="w-full h-full object-contain"
-              draggable={false}
-            />
-          );
-        }
-        return (
-          <div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
-            No image
-          </div>
-        );
+		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;
+		}
 
-      case 'figure':
-        if (!annotation.figureData) {
-          return (
-            <div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
-              No arrow data
-            </div>
-          );
-        }
+		const drawWidth = Math.max(1, Math.round(width));
+		const drawHeight = Math.max(1, Math.round(height));
+		if (drawWidth <= 0 || drawHeight <= 0) {
+			return;
+		}
 
-        return (
-          <div className="w-full h-full flex items-center justify-center p-2">
-            {renderArrow()}
-          </div>
-        );
+		canvas.width = drawWidth;
+		canvas.height = drawHeight;
 
-      default:
-        return null;
-    }
-  };
+		const context = canvas.getContext("2d", { willReadFrequently: true });
+		if (!context) {
+			return;
+		}
 
-  return (
-    <Rnd
-      position={{ x, y }}
-      size={{ width, height }}
-      onDragStart={() => {
-        isDraggingRef.current = true;
-      }}
-      onDragStop={(_e, d) => {
-        const xPercent = (d.x / containerWidth) * 100;
-        const yPercent = (d.y / containerHeight) * 100;
-        onPositionChange(annotation.id, { x: xPercent, y: yPercent });
-        
-        // Reset dragging flag after a short delay to prevent click event
-        setTimeout(() => {
-          isDraggingRef.current = false;
-        }, 100);
-      }}
-      onResizeStop={(_e, _direction, ref, _delta, position) => {
-        const xPercent = (position.x / containerWidth) * 100;
-        const yPercent = (position.y / containerHeight) * 100;
-        const widthPercent = (ref.offsetWidth / containerWidth) * 100;
-        const heightPercent = (ref.offsetHeight / containerHeight) * 100;
-        onPositionChange(annotation.id, { x: xPercent, y: yPercent });
-        onSizeChange(annotation.id, { width: widthPercent, height: heightPercent });
-      }}
-      onClick={() => {
-        if (isDraggingRef.current) return;
-        onClick(annotation.id);
-      }}
-      bounds="parent"
-      className={cn(
-        "cursor-move transition-all",
-        isSelected && "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',
-      }}
-      enableResizing={isSelected}
-      disableDragging={!isSelected}
-      resizeHandleStyles={{
-        topLeft: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #34B27B' : 'none',
-          borderRadius: '50%',
-          left: '-6px',
-          top: '-6px',
-          cursor: 'nwse-resize',
-        },
-        topRight: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #34B27B' : 'none',
-          borderRadius: '50%',
-          right: '-6px',
-          top: '-6px',
-          cursor: 'nesw-resize',
-        },
-        bottomLeft: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #34B27B' : 'none',
-          borderRadius: '50%',
-          left: '-6px',
-          bottom: '-6px',
-          cursor: 'nesw-resize',
-        },
-        bottomRight: {
-          width: '12px',
-          height: '12px',
-          backgroundColor: isSelected ? 'white' : 'transparent',
-          border: isSelected ? '2px solid #34B27B' : 'none',
-          borderRadius: '50%',
-          right: '-6px',
-          bottom: '-6px',
-          cursor: 'nwse-resize',
-        },
-      }}
-    >
-      <div
-        className={cn(
-          "w-full h-full rounded-lg",
-          annotation.type === 'text' && "bg-transparent",
-          annotation.type === 'image' && "bg-transparent",
-          annotation.type === 'figure' && "bg-transparent",
-          isSelected && "shadow-lg"
-        )}
-      >
-        {renderContent()}
-      </div>
-    </Rnd>
-  );
+		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";
+		const color = annotation.figureData?.color || "#34B27B";
+		const strokeWidth = annotation.figureData?.strokeWidth || 4;
+
+		const ArrowComponent = getArrowComponent(direction);
+		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":
+				return (
+					<div
+						className="w-full h-full flex items-center p-2 overflow-hidden"
+						style={{
+							justifyContent:
+								annotation.style.textAlign === "left"
+									? "flex-start"
+									: annotation.style.textAlign === "right"
+										? "flex-end"
+										: "center",
+							alignItems: "center",
+						}}
+					>
+						<span
+							style={{
+								color: annotation.style.color,
+								backgroundColor: annotation.style.backgroundColor,
+								fontSize: `${annotation.style.fontSize}px`,
+								fontFamily: annotation.style.fontFamily,
+								fontWeight: annotation.style.fontWeight,
+								fontStyle: annotation.style.fontStyle,
+								textDecoration: annotation.style.textDecoration,
+								textAlign: annotation.style.textAlign,
+								wordBreak: "break-word",
+								whiteSpace: "pre-wrap",
+								boxDecorationBreak: "clone",
+								WebkitBoxDecorationBreak: "clone",
+								padding: "0.1em 0.2em",
+								borderRadius: "4px",
+								lineHeight: "1.4",
+							}}
+						>
+							{annotation.content}
+						</span>
+					</div>
+				);
+
+			case "image":
+				if (annotation.content && annotation.content.startsWith("data:image")) {
+					return (
+						<img
+							src={annotation.content}
+							alt="Annotation"
+							className="w-full h-full object-contain"
+							draggable={false}
+						/>
+					);
+				}
+				return (
+					<div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
+						No image
+					</div>
+				);
+
+			case "figure":
+				if (!annotation.figureData) {
+					return (
+						<div className="w-full h-full flex items-center justify-center text-slate-400 text-sm">
+							No arrow data
+						</div>
+					);
+				}
+
+				return (
+					<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;
+		}
+	};
+
+	return (
+		<Rnd
+			position={{ x, y }}
+			size={{ width, height }}
+			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 });
+
+				// Reset dragging flag after a short delay to prevent click event
+				setTimeout(() => {
+					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;
+				const heightPercent = (ref.offsetHeight / containerHeight) * 100;
+				onPositionChange(annotation.id, { x: xPercent, y: yPercent });
+				onSizeChange(annotation.id, { width: widthPercent, height: heightPercent });
+			}}
+			onClick={() => {
+				if (isDraggingRef.current) return;
+				onClick(annotation.id);
+			}}
+			bounds="parent"
+			className={cn(
+				"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 && 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 && !isSelectedFreehandBlur}
+			disableDragging={!isSelected || isSelectedFreehandBlur}
+			resizeHandleStyles={{
+				topLeft: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #34B27B" : "none",
+					borderRadius: "50%",
+					left: "-6px",
+					top: "-6px",
+					cursor: "nwse-resize",
+				},
+				topRight: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #34B27B" : "none",
+					borderRadius: "50%",
+					right: "-6px",
+					top: "-6px",
+					cursor: "nesw-resize",
+				},
+				bottomLeft: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #34B27B" : "none",
+					borderRadius: "50%",
+					left: "-6px",
+					bottom: "-6px",
+					cursor: "nesw-resize",
+				},
+				bottomRight: {
+					width: "12px",
+					height: "12px",
+					backgroundColor: isSelected ? "white" : "transparent",
+					border: isSelected ? "2px solid #34B27B" : "none",
+					borderRadius: "50%",
+					right: "-6px",
+					bottom: "-6px",
+					cursor: "nwse-resize",
+				},
+			}}
+		>
+			<div
+				className={cn(
+					"w-full h-full",
+					annotation.type !== "blur" && "rounded-lg",
+					annotation.type === "text" && "bg-transparent",
+					annotation.type === "image" && "bg-transparent",
+					annotation.type === "figure" && "bg-transparent",
+					annotation.type === "blur" && "bg-transparent",
+					isSelected && annotation.type !== "blur" && "shadow-lg",
+				)}
+			>
+				{renderContent()}
+			</div>
+		</Rnd>
+	);
 }

src/components/video-editor/ArrowSvgs.tsx

@@ -1,9 +1,9 @@
-import type { ArrowDirection } from './types';
+import type { ArrowDirection } from "./types";
 
 interface ArrowSvgProps {
-  color: string;
-  strokeWidth: number;
-  className?: string;
+	color: string;
+	strokeWidth: number;
+	className?: string;
 }
 
 /**
@@ -13,182 +13,190 @@ interface ArrowSvgProps {
  */
 
 export function ArrowUp({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 50 20 L 50 80 M 50 20 L 35 35 M 50 20 L 65 35"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 50 20 L 50 80 M 50 20 L 35 35 M 50 20 L 65 35"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function ArrowDown({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 50 20 L 50 80 M 50 80 L 35 65 M 50 80 L 65 65"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 50 20 L 50 80 M 50 80 L 35 65 M 50 80 L 65 65"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function ArrowLeft({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 80 50 L 20 50 M 20 50 L 35 35 M 20 50 L 35 65"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 80 50 L 20 50 M 20 50 L 35 35 M 20 50 L 35 65"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function ArrowRight({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 20 50 L 80 50 M 80 50 L 65 35 M 80 50 L 65 65"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 20 50 L 80 50 M 80 50 L 65 35 M 80 50 L 65 65"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function ArrowUpRight({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 25 75 L 75 25 M 75 25 L 60 30 M 75 25 L 70 40"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 25 75 L 75 25 M 75 25 L 60 30 M 75 25 L 70 40"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function ArrowUpLeft({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 75 75 L 25 25 M 25 25 L 40 30 M 25 25 L 30 40"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 75 75 L 25 25 M 25 25 L 40 30 M 25 25 L 30 40"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function ArrowDownRight({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 25 25 L 75 75 M 75 75 L 70 60 M 75 75 L 60 70"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 25 25 L 75 75 M 75 75 L 70 60 M 75 75 L 60 70"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function ArrowDownLeft({ color, strokeWidth, className }: ArrowSvgProps) {
-  return (
-    <svg viewBox="0 0 100 100" className={className} style={{ width: '100%', height: '100%' }}>
-      <defs>
-        <filter id="arrow-shadow">
-          <feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
-        </filter>
-      </defs>
-      <path
-        d="M 75 25 L 25 75 M 25 75 L 30 60 M 25 75 L 40 70"
-        stroke={color}
-        strokeWidth={strokeWidth}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        fill="none"
-        filter="url(#arrow-shadow)"
-      />
-    </svg>
-  );
+	return (
+		<svg viewBox="0 0 100 100" className={className} style={{ width: "100%", height: "100%" }}>
+			<defs>
+				<filter id="arrow-shadow">
+					<feDropShadow dx="0" dy="2" stdDeviation="4" floodOpacity="0.3" />
+				</filter>
+			</defs>
+			<path
+				d="M 75 25 L 25 75 M 25 75 L 30 60 M 25 75 L 40 70"
+				stroke={color}
+				strokeWidth={strokeWidth}
+				strokeLinecap="round"
+				strokeLinejoin="round"
+				fill="none"
+				filter="url(#arrow-shadow)"
+			/>
+		</svg>
+	);
 }
 
 export function getArrowComponent(direction: ArrowDirection) {
-  switch (direction) {
-    case 'up': return ArrowUp;
-    case 'down': return ArrowDown;
-    case 'left': return ArrowLeft;
-    case 'right': return ArrowRight;
-    case 'up-right': return ArrowUpRight;
-    case 'up-left': return ArrowUpLeft;
-    case 'down-right': return ArrowDownRight;
-    case 'down-left': return ArrowDownLeft;
-  }
+	switch (direction) {
+		case "up":
+			return ArrowUp;
+		case "down":
+			return ArrowDown;
+		case "left":
+			return ArrowLeft;
+		case "right":
+			return ArrowRight;
+		case "up-right":
+			return ArrowUpRight;
+		case "up-left":
+			return ArrowUpLeft;
+		case "down-right":
+			return ArrowDownRight;
+		case "down-left":
+			return ArrowDownLeft;
+	}
 }

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/CropControl.tsx

@@ -3,231 +3,250 @@ import { cn } from "@/lib/utils";
 import { type AspectRatio } from "@/utils/aspectRatioUtils";
 
 interface CropRegion {
-  x: number; // 0-1 normalized
-  y: number; // 0-1 normalized
-  width: number; // 0-1 normalized
-  height: number; // 0-1 normalized
+	x: number; // 0-1 normalized
+	y: number; // 0-1 normalized
+	width: number; // 0-1 normalized
+	height: number; // 0-1 normalized
 }
 
 interface CropControlProps {
-  videoElement: HTMLVideoElement | null;
-  cropRegion: CropRegion;
-  onCropChange: (region: CropRegion) => void;
-  aspectRatio: AspectRatio;
+	videoElement: HTMLVideoElement | null;
+	cropRegion: CropRegion;
+	onCropChange: (region: CropRegion) => void;
+	aspectRatio: AspectRatio;
 }
 
-type DragHandle = 'top' | 'right' | 'bottom' | 'left' | null;
+type DragHandle = "top" | "right" | "bottom" | "left" | "move" | null;
 
 export function CropControl({ videoElement, cropRegion, onCropChange }: CropControlProps) {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [isDragging, setIsDragging] = useState<DragHandle>(null);
-  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
-  const [initialCrop, setInitialCrop] = useState<CropRegion>(cropRegion);
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [isDragging, setIsDragging] = useState<DragHandle>(null);
+	const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+	const [initialCrop, setInitialCrop] = useState<CropRegion>(cropRegion);
 
-  useEffect(() => {
-    if (!videoElement || !canvasRef.current) return;
+	useEffect(() => {
+		if (!videoElement || !canvasRef.current) return;
 
-    const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d', { alpha: false });
-    if (!ctx) return;
+		const canvas = canvasRef.current;
+		const ctx = canvas.getContext("2d", { alpha: false });
+		if (!ctx) return;
 
-    canvas.width = videoElement.videoWidth || 1920;
-    canvas.height = videoElement.videoHeight || 1080;
+		canvas.width = videoElement.videoWidth || 1920;
+		canvas.height = videoElement.videoHeight || 1080;
 
-    const draw = () => {
-      if (videoElement.readyState >= 2) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
-      }
-      requestAnimationFrame(draw);
-    };
+		const draw = () => {
+			if (videoElement.readyState >= 2) {
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+			}
+			requestAnimationFrame(draw);
+		};
 
-    const rafId = requestAnimationFrame(draw);
-    return () => cancelAnimationFrame(rafId);
-  }, [videoElement]);
+		const rafId = requestAnimationFrame(draw);
+		return () => cancelAnimationFrame(rafId);
+	}, [videoElement]);
 
-  const getContainerRect = () => {
-    return containerRef.current?.getBoundingClientRect() || { width: 0, height: 0, left: 0, top: 0 };
-  };
+	const getContainerRect = () => {
+		return (
+			containerRef.current?.getBoundingClientRect() || { width: 0, height: 0, left: 0, top: 0 }
+		);
+	};
 
-  const handlePointerDown = (e: React.PointerEvent, handle: DragHandle) => {
-    e.stopPropagation();
-    e.preventDefault();
-    setIsDragging(handle);
-    const rect = getContainerRect();
-    setDragStart({
-      x: (e.clientX - rect.left) / rect.width,
-      y: (e.clientY - rect.top) / rect.height,
-    });
-    setInitialCrop(cropRegion);
-    
-    e.currentTarget.setPointerCapture(e.pointerId);
-  };
+	const handlePointerDown = (e: React.PointerEvent, handle: DragHandle) => {
+		e.stopPropagation();
+		e.preventDefault();
+		setIsDragging(handle);
+		const rect = getContainerRect();
+		setDragStart({
+			x: (e.clientX - rect.left) / rect.width,
+			y: (e.clientY - rect.top) / rect.height,
+		});
+		setInitialCrop(cropRegion);
 
-  const handlePointerMove = (e: React.PointerEvent) => {
-    if (!isDragging) return;
+		e.currentTarget.setPointerCapture(e.pointerId);
+	};
 
-    const rect = getContainerRect();
-    const currentX = (e.clientX - rect.left) / rect.width;
-    const currentY = (e.clientY - rect.top) / rect.height;
-    const deltaX = currentX - dragStart.x;
-    const deltaY = currentY - dragStart.y;
+	const handlePointerMove = (e: React.PointerEvent) => {
+		if (!isDragging) return;
 
-    let newCrop = { ...initialCrop };
+		const rect = getContainerRect();
+		const currentX = (e.clientX - rect.left) / rect.width;
+		const currentY = (e.clientY - rect.top) / rect.height;
+		const deltaX = currentX - dragStart.x;
+		const deltaY = currentY - dragStart.y;
 
-    switch (isDragging) {
-      case 'top': {
-        const newY = Math.max(0, initialCrop.y + deltaY);
-        const bottom = initialCrop.y + initialCrop.height;
-        newCrop.y = Math.min(newY, bottom - 0.1);
-        newCrop.height = bottom - newCrop.y;
-        break;
-      }
-      case 'bottom':
-        newCrop.height = Math.max(0.1, Math.min(initialCrop.height + deltaY, 1 - initialCrop.y));
-        break;
-      case 'left': {
-        const newX = Math.max(0, initialCrop.x + deltaX);
-        const right = initialCrop.x + initialCrop.width;
-        newCrop.x = Math.min(newX, right - 0.1);
-        newCrop.width = right - newCrop.x;
-        break;
-      }
-      case 'right':
-        newCrop.width = Math.max(0.1, Math.min(initialCrop.width + deltaX, 1 - initialCrop.x));
-        break;
-    }
+		let newCrop = { ...initialCrop };
 
-    onCropChange(newCrop);
-  };
+		switch (isDragging) {
+			case "top": {
+				const newY = Math.max(0, initialCrop.y + deltaY);
+				const bottom = initialCrop.y + initialCrop.height;
+				newCrop.y = Math.min(newY, bottom - 0.1);
+				newCrop.height = bottom - newCrop.y;
+				break;
+			}
+			case "bottom":
+				newCrop.height = Math.max(0.1, Math.min(initialCrop.height + deltaY, 1 - initialCrop.y));
+				break;
+			case "left": {
+				const newX = Math.max(0, initialCrop.x + deltaX);
+				const right = initialCrop.x + initialCrop.width;
+				newCrop.x = Math.min(newX, right - 0.1);
+				newCrop.width = right - newCrop.x;
+				break;
+			}
+			case "right":
+				newCrop.width = Math.max(0.1, Math.min(initialCrop.width + deltaX, 1 - initialCrop.x));
+				break;
+			case "move": {
+				newCrop.x = Math.max(0, Math.min(initialCrop.x + deltaX, 1 - initialCrop.width));
+				newCrop.y = Math.max(0, Math.min(initialCrop.y + deltaY, 1 - initialCrop.height));
+				break;
+			}
+		}
 
-  const handlePointerUp = (e: React.PointerEvent) => {
-    if (isDragging) {
-      try {
-        e.currentTarget.releasePointerCapture(e.pointerId);
-      } catch {
-      }
-    }
-    setIsDragging(null);
-  };
+		onCropChange(newCrop);
+	};
 
-  const cropPixelX = cropRegion.x * 100;
-  const cropPixelY = cropRegion.y * 100;
-  const cropPixelWidth = cropRegion.width * 100;
-  const cropPixelHeight = cropRegion.height * 100;
-  const videoAspectRatio = videoElement ? videoElement.videoWidth / videoElement.videoHeight : 16/9;
-  const isVideoPortrait = videoAspectRatio < 1;
-  const maxContainerWidth = isVideoPortrait ? '40vw' : '75vw';
-  const maxContainerHeight = '75vh';
+	const handlePointerUp = (e: React.PointerEvent) => {
+		if (isDragging) {
+			try {
+				e.currentTarget.releasePointerCapture(e.pointerId);
+			} catch {
+				// Pointer may already be released; ignore.
+			}
+		}
+		setIsDragging(null);
+	};
 
-  return (
-    <div className="w-full p-8">
-      <div
-        ref={containerRef}
-        className="relative w-full bg-black rounded-lg overflow-visible cursor-default select-none shadow-2xl"
-        style={{ 
-          aspectRatio: videoAspectRatio,
-          maxWidth: maxContainerWidth,
-          maxHeight: maxContainerHeight,
-          margin: '0 auto',
-        }}
-        onPointerMove={handlePointerMove}
-        onPointerUp={handlePointerUp}
-        onPointerLeave={handlePointerUp}
-      >
-        <canvas
-          ref={canvasRef}
-          className="w-full h-full rounded-lg"
-          style={{ imageRendering: 'auto' }}
-        />
-        
-        <div className="absolute inset-0 pointer-events-none" style={{ transition: 'none' }}>
-          <svg width="100%" height="100%" className="absolute inset-0" style={{ transition: 'none' }}>
-            <defs>
-              <mask id="cropMask">
-                <rect width="100%" height="100%" fill="white" />
-                <rect
-                  x={`${cropPixelX}%`}
-                  y={`${cropPixelY}%`}
-                  width={`${cropPixelWidth}%`}
-                  height={`${cropPixelHeight}%`}
-                  fill="black"
-                  style={{ transition: 'none' }}
-                />
-              </mask>
-            </defs>
-            <rect 
-              width="100%" 
-              height="100%" 
-              fill="black" 
-              fillOpacity="0.6" 
-              mask="url(#cropMask)" 
-              style={{ transition: 'none' }}
-            />
-          </svg>
-        </div>
+	const cropPixelX = cropRegion.x * 100;
+	const cropPixelY = cropRegion.y * 100;
+	const cropPixelWidth = cropRegion.width * 100;
+	const cropPixelHeight = cropRegion.height * 100;
+	const videoAspectRatio = videoElement
+		? videoElement.videoWidth / videoElement.videoHeight
+		: 16 / 9;
+	const isVideoPortrait = videoAspectRatio < 1;
+	const maxContainerWidth = isVideoPortrait ? "40vw" : "75vw";
+	const maxContainerHeight = "75vh";
 
-        <div
-          className={cn(
-            "absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#34B27B]"
-          )}
-          style={{
-            left: `${cropPixelX}%`,
-            top: `${cropPixelY}%`,
-            width: `${cropPixelWidth}%`,
-            transform: 'translateY(-50%)',
-            willChange: 'transform',
-            transition: 'none',
-          }}
-          onPointerDown={(e) => handlePointerDown(e, 'top')}
-        />
+	return (
+		<div className="w-full p-8">
+			<div
+				ref={containerRef}
+				className="relative w-full bg-black rounded-lg overflow-visible cursor-default select-none shadow-2xl"
+				style={{
+					aspectRatio: videoAspectRatio,
+					maxWidth: maxContainerWidth,
+					maxHeight: maxContainerHeight,
+					margin: "0 auto",
+				}}
+				onPointerMove={handlePointerMove}
+				onPointerUp={handlePointerUp}
+				onPointerLeave={handlePointerUp}
+			>
+				<canvas
+					ref={canvasRef}
+					className="w-full h-full rounded-lg"
+					style={{ imageRendering: "auto" }}
+				/>
 
-        <div
-          className={cn(
-            "absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#34B27B]"
-          )}
-          style={{
-            left: `${cropPixelX}%`,
-            top: `${cropPixelY + cropPixelHeight}%`,
-            width: `${cropPixelWidth}%`,
-            transform: 'translateY(-50%)',
-            willChange: 'transform',
-            transition: 'none',
-          }}
-          onPointerDown={(e) => handlePointerDown(e, 'bottom')}
-        />
+				<div className="absolute inset-0 pointer-events-none" style={{ transition: "none" }}>
+					<svg
+						width="100%"
+						height="100%"
+						className="absolute inset-0"
+						style={{ transition: "none" }}
+					>
+						<defs>
+							<mask id="cropMask">
+								<rect width="100%" height="100%" fill="white" />
+								<rect
+									x={`${cropPixelX}%`}
+									y={`${cropPixelY}%`}
+									width={`${cropPixelWidth}%`}
+									height={`${cropPixelHeight}%`}
+									fill="black"
+									style={{ transition: "none" }}
+								/>
+							</mask>
+						</defs>
+						<rect
+							width="100%"
+							height="100%"
+							fill="black"
+							fillOpacity="0.6"
+							mask="url(#cropMask)"
+							style={{ transition: "none" }}
+						/>
+					</svg>
+				</div>
 
-        <div
-          className={cn(
-            "absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#34B27B]"
-          )}
-          style={{
-            left: `${cropPixelX}%`,
-            top: `${cropPixelY}%`,
-            height: `${cropPixelHeight}%`,
-            transform: 'translateX(-50%)',
-            willChange: 'transform',
-            transition: 'none',
-          }}
-          onPointerDown={(e) => handlePointerDown(e, 'left')}
-        />
+				<div
+					className="absolute z-10 pointer-events-auto cursor-move"
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY}%`,
+						width: `${cropPixelWidth}%`,
+						height: `${cropPixelHeight}%`,
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "move")}
+				/>
 
-        <div
-          className={cn(
-            "absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#34B27B]"
-          )}
-          style={{
-            left: `${cropPixelX + cropPixelWidth}%`,
-            top: `${cropPixelY}%`,
-            height: `${cropPixelHeight}%`,
-            transform: 'translateX(-50%)',
-            willChange: 'transform',
-            transition: 'none',
-          }}
-          onPointerDown={(e) => handlePointerDown(e, 'right')}
-        />
-      </div>
-    </div>
-  );
+				<div
+					className={cn("absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY}%`,
+						width: `${cropPixelWidth}%`,
+						transform: "translateY(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "top")}
+				/>
+
+				<div
+					className={cn("absolute h-[3px] cursor-ns-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY + cropPixelHeight}%`,
+						width: `${cropPixelWidth}%`,
+						transform: "translateY(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "bottom")}
+				/>
+
+				<div
+					className={cn("absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX}%`,
+						top: `${cropPixelY}%`,
+						height: `${cropPixelHeight}%`,
+						transform: "translateX(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "left")}
+				/>
+
+				<div
+					className={cn("absolute w-[3px] cursor-ew-resize z-20 pointer-events-auto bg-[#34B27B]")}
+					style={{
+						left: `${cropPixelX + cropPixelWidth}%`,
+						top: `${cropPixelY}%`,
+						height: `${cropPixelHeight}%`,
+						transform: "translateX(-50%)",
+						willChange: "transform",
+						transition: "none",
+					}}
+					onPointerDown={(e) => handlePointerDown(e, "right")}
+				/>
+			</div>
+		</div>
+	);
 }

src/components/video-editor/ExportDialog.tsx

@@ -1,238 +1,273 @@
-import { useEffect, useState } from 'react';
-import { X, Download, Loader2 } from 'lucide-react';
-import { Button } from '@/components/ui/button';
-import type { ExportProgress } from '@/lib/exporter';
+import { Download, Loader2, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { useScopedT } from "@/contexts/I18nContext";
+import type { ExportProgress } from "@/lib/exporter";
 
 interface ExportDialogProps {
-  isOpen: boolean;
-  onClose: () => void;
-  progress: ExportProgress | null;
-  isExporting: boolean;
-  error: string | null;
-  onCancel?: () => void;
-  exportFormat?: 'mp4' | 'gif';
+	isOpen: boolean;
+	onClose: () => void;
+	progress: ExportProgress | null;
+	isExporting: boolean;
+	error: string | null;
+	onCancel?: () => void;
+	exportFormat?: "mp4" | "gif";
+	exportedFilePath?: string;
+	onShowInFolder?: () => void;
 }
 
 export function ExportDialog({
-  isOpen,
-  onClose,
-  progress,
-  isExporting,
-  error,
-  onCancel,
-  exportFormat = 'mp4',
+	isOpen,
+	onClose,
+	progress,
+	isExporting,
+	error,
+	onCancel,
+	exportFormat = "mp4",
+	exportedFilePath,
+	onShowInFolder,
 }: ExportDialogProps) {
-  const [showSuccess, setShowSuccess] = useState(false);
+	const t = useScopedT("dialogs");
+	const [showSuccess, setShowSuccess] = useState(false);
 
-  // Reset showSuccess when a new export starts or dialog reopens
-  useEffect(() => {
-    if (isExporting) {
-      setShowSuccess(false);
-    }
-  }, [isExporting]);
+	// Reset showSuccess when a new export starts or dialog reopens
+	useEffect(() => {
+		if (isExporting) {
+			setShowSuccess(false);
+		}
+	}, [isExporting]);
 
-  // Reset showSuccess when dialog opens fresh
-  useEffect(() => {
-    if (isOpen && !isExporting && !progress) {
-      setShowSuccess(false);
-    }
-  }, [isOpen, isExporting, progress]);
+	// Reset showSuccess when dialog opens fresh
+	useEffect(() => {
+		if (isOpen && !isExporting && !progress) {
+			setShowSuccess(false);
+		}
+	}, [isOpen, isExporting, progress]);
 
-  useEffect(() => {
-    if (!isExporting && progress && progress.percentage >= 100 && !error) {
-      setShowSuccess(true);
-      const timer = setTimeout(() => {
-        setShowSuccess(false);
-        onClose();
-      }, 2000);
-      return () => clearTimeout(timer);
-    }
-  }, [isExporting, progress, error, onClose]);
+	useEffect(() => {
+		if (!isExporting && progress && progress.percentage >= 100 && !error) {
+			setShowSuccess(true);
+			const timer = setTimeout(() => {
+				setShowSuccess(false);
+				onClose();
+			}, 2000);
+			return () => clearTimeout(timer);
+		}
+	}, [isExporting, progress, error, onClose]);
 
-  if (!isOpen) return null;
+	if (!isOpen) return null;
 
-  const formatLabel = exportFormat === 'gif' ? 'GIF' : 'Video';
-  
-  // Determine if we're in the compiling phase (frames done but still exporting)
-  const isCompiling = isExporting && progress && progress.percentage >= 100 && exportFormat === 'gif';
-  const isFinalizing = progress?.phase === 'finalizing';
-  const renderProgress = progress?.renderProgress;
-  
-  // Get status message based on phase
-  const getStatusMessage = () => {
-    if (error) return 'Please try again';
-    if (isCompiling || isFinalizing) {
-      if (renderProgress !== undefined && renderProgress > 0) {
-        return `Compiling GIF... ${renderProgress}%`;
-      }
-      return 'Compiling GIF... This may take a while';
-    }
-    return 'This may take a moment...';
-  };
+	const formatLabel = exportFormat === "gif" ? "GIF" : "Video";
 
-  // Get title based on phase
-  const getTitle = () => {
-    if (error) return 'Export Failed';
-    if (isCompiling || isFinalizing) return 'Compiling GIF';
-    return `Exporting ${formatLabel}`;
-  };
+	// Determine if we're in the compiling phase (frames done but still exporting)
+	const isCompiling =
+		isExporting && progress && progress.percentage >= 100 && exportFormat === "gif";
+	const isFinalizing = progress?.phase === "finalizing";
+	const renderProgress = progress?.renderProgress;
 
-  return (
-    <>
-      <div 
-        className="fixed inset-0 bg-black/80 backdrop-blur-md z-50 animate-in fade-in duration-200"
-        onClick={isExporting ? undefined : onClose}
-      />
-      <div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-md animate-in zoom-in-95 duration-200">
-        <div className="flex items-center justify-between mb-6">
-          <div className="flex items-center gap-4">
-            {showSuccess ? (
-              <>
-                <div className="w-12 h-12 rounded-full bg-[#34B27B]/20 flex items-center justify-center ring-1 ring-[#34B27B]/50">
-                  <Download className="w-6 h-6 text-[#34B27B]" />
-                </div>
-                <div>
-                  <span className="text-xl font-bold text-slate-200 block">Export Complete</span>
-                  <span className="text-sm text-slate-400">Your {formatLabel.toLowerCase()} is ready</span>
-                </div>
-              </>
-            ) : (
-              <>
-                {isExporting ? (
-                  <div className="w-12 h-12 rounded-full bg-[#34B27B]/10 flex items-center justify-center">
-                    <Loader2 className="w-6 h-6 text-[#34B27B] animate-spin" />
-                  </div>
-                ) : (
-                  <div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10">
-                    <Download className="w-6 h-6 text-slate-200" />
-                  </div>
-                )}
-                <div>
-                  <span className="text-xl font-bold text-slate-200 block">
-                    {getTitle()}
-                  </span>
-                  <span className="text-sm text-slate-400">
-                    {getStatusMessage()}
-                  </span>
-                </div>
-              </>
-            )}
-          </div>
-          {!isExporting && (
-            <Button
-              variant="ghost"
-              size="icon"
-              onClick={onClose}
-              className="hover:bg-white/10 text-slate-400 hover:text-white rounded-full"
-            >
-              <X className="w-5 h-5" />
-            </Button>
-          )}
-        </div>
+	// Get status message based on phase
+	const getStatusMessage = () => {
+		if (error) return t("export.tryAgain");
+		if (isCompiling || isFinalizing) {
+			if (exportFormat === "mp4") {
+				return t("export.finalizingVideo");
+			}
+			if (renderProgress !== undefined && renderProgress > 0) {
+				return t("export.compilingGifProgress", { progress: String(renderProgress) });
+			}
+			return t("export.compilingGifWait");
+		}
+		return t("export.takeMoment");
+	};
 
-        {error && (
-          <div className="mb-6 animate-in slide-in-from-top-2">
-            <div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4 flex items-start gap-3">
-              <div className="p-1 bg-red-500/20 rounded-full">
-                <X className="w-3 h-3 text-red-400" />
-              </div>
-              <p className="text-sm text-red-400 leading-relaxed">{error}</p>
-            </div>
-          </div>
-        )}
+	// Get title based on phase
+	const getTitle = () => {
+		if (error) return t("export.failed");
+		if (isFinalizing && exportFormat === "mp4") return t("export.finalizingVideoTitle");
+		if (isCompiling || isFinalizing) return t("export.compilingGif");
+		return t("export.exportingFormat", { format: formatLabel });
+	};
 
-        {isExporting && progress && (
-          <div className="space-y-6">
-            <div className="space-y-2">
-              <div className="flex justify-between text-xs font-medium text-slate-400 uppercase tracking-wider">
-                <span>{isCompiling || isFinalizing ? 'Compiling' : 'Rendering Frames'}</span>
-                <span className="font-mono text-slate-200">
-                  {isCompiling || isFinalizing ? (
-                    renderProgress !== undefined && renderProgress > 0 ? (
-                      `${renderProgress}%`
-                    ) : (
-                      <span className="flex items-center gap-2">
-                        <Loader2 className="w-3 h-3 animate-spin" />
-                        Processing...
-                      </span>
-                    )
-                  ) : (
-                    `${progress.percentage.toFixed(0)}%`
-                  )}
-                </span>
-              </div>
-              <div className="h-2 bg-white/5 rounded-full overflow-hidden border border-white/5">
-                {isCompiling || isFinalizing ? (
-                  // Show render progress if available, otherwise animated indeterminate bar
-                  renderProgress !== undefined && renderProgress > 0 ? (
-                    <div
-                      className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
-                      style={{ width: `${renderProgress}%` }}
-                    />
-                  ) : (
-                    <div className="h-full w-full relative overflow-hidden">
-                      <div 
-                        className="absolute h-full w-1/3 bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)]"
-                        style={{
-                          animation: 'indeterminate 1.5s ease-in-out infinite',
-                        }}
-                      />
-                      <style>{`
+	return (
+		<>
+			<div
+				className="fixed inset-0 bg-black/80 backdrop-blur-md z-50 animate-in fade-in duration-200"
+				onClick={isExporting ? undefined : onClose}
+			/>
+			<div className="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[60] bg-[#09090b] rounded-2xl shadow-2xl border border-white/10 p-8 w-[90vw] max-w-md animate-in zoom-in-95 duration-200">
+				<div className="flex items-center justify-between mb-6">
+					<div className="flex items-center gap-4">
+						{showSuccess ? (
+							<>
+								<div className="w-12 h-12 rounded-full bg-[#34B27B]/20 flex items-center justify-center ring-1 ring-[#34B27B]/50">
+									<Download className="w-6 h-6 text-[#34B27B]" />
+								</div>
+								<div className="flex flex-col gap-2">
+									<span className="text-xl font-bold text-slate-200 block">
+										{t("export.complete")}
+									</span>
+									<span className="text-sm text-slate-400">
+										{t("export.yourFormatReady", { format: formatLabel.toLowerCase() })}
+									</span>
+									{exportedFilePath && (
+										<Button
+											variant="secondary"
+											onClick={onShowInFolder}
+											className="mt-2 w-fit px-3 py-1 text-sm rounded-md bg-white/10 hover:bg-white/20 text-slate-200"
+										>
+											{t("export.showInFolder")}
+										</Button>
+									)}
+									{exportedFilePath && (
+										<span className="text-xs text-slate-500 break-all max-w-xs mt-1">
+											{exportedFilePath.split("/").pop()}
+										</span>
+									)}
+								</div>
+							</>
+						) : (
+							<>
+								{isExporting ? (
+									<div className="w-12 h-12 rounded-full bg-[#34B27B]/10 flex items-center justify-center">
+										<Loader2 className="w-6 h-6 text-[#34B27B] animate-spin" />
+									</div>
+								) : (
+									<div className="w-12 h-12 rounded-full bg-white/5 flex items-center justify-center border border-white/10">
+										<Download className="w-6 h-6 text-slate-200" />
+									</div>
+								)}
+								<div>
+									<span className="text-xl font-bold text-slate-200 block">{getTitle()}</span>
+									<span className="text-sm text-slate-400">{getStatusMessage()}</span>
+								</div>
+							</>
+						)}
+					</div>
+					{!isExporting && (
+						<Button
+							variant="ghost"
+							size="icon"
+							onClick={onClose}
+							className="hover:bg-white/10 text-slate-400 hover:text-white rounded-full"
+						>
+							<X className="w-5 h-5" />
+						</Button>
+					)}
+				</div>
+
+				{error && (
+					<div className="mb-6 animate-in slide-in-from-top-2">
+						<div className="bg-red-500/10 border border-red-500/20 rounded-xl p-4 flex items-start gap-3">
+							<div className="p-1 bg-red-500/20 rounded-full">
+								<X className="w-3 h-3 text-red-400" />
+							</div>
+							<p className="text-sm text-red-400 leading-relaxed">{error}</p>
+						</div>
+					</div>
+				)}
+
+				{isExporting && progress && (
+					<div className="space-y-6">
+						<div className="space-y-2">
+							<div className="flex justify-between text-xs font-medium text-slate-400 uppercase tracking-wider">
+								<span>
+									{isCompiling || isFinalizing
+										? t("export.compiling")
+										: t("export.renderingFrames")}
+								</span>
+								<span className="font-mono text-slate-200">
+									{isCompiling || isFinalizing ? (
+										renderProgress !== undefined && renderProgress > 0 ? (
+											`${renderProgress}%`
+										) : (
+											<span className="flex items-center gap-2">
+												<Loader2 className="w-3 h-3 animate-spin" />
+												{t("export.processing")}
+											</span>
+										)
+									) : (
+										`${progress.percentage.toFixed(0)}%`
+									)}
+								</span>
+							</div>
+							<div className="h-2 bg-white/5 rounded-full overflow-hidden border border-white/5">
+								{isCompiling || isFinalizing ? (
+									// Show render progress if available, otherwise animated indeterminate bar
+									renderProgress !== undefined && renderProgress > 0 ? (
+										<div
+											className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
+											style={{ width: `${renderProgress}%` }}
+										/>
+									) : (
+										<div className="h-full w-full relative overflow-hidden">
+											<div
+												className="absolute h-full w-1/3 bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)]"
+												style={{
+													animation: "indeterminate 1.5s ease-in-out infinite",
+												}}
+											/>
+											<style>{`
                         @keyframes indeterminate {
                           0% { transform: translateX(-100%); }
                           100% { transform: translateX(400%); }
                         }
                       `}</style>
-                    </div>
-                  )
-                ) : (
-                  <div
-                    className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
-                    style={{ width: `${Math.min(progress.percentage, 100)}%` }}
-                  />
-                )}
-              </div>
-            </div>
+										</div>
+									)
+								) : (
+									<div
+										className="h-full bg-[#34B27B] shadow-[0_0_10px_rgba(52,178,123,0.3)] transition-all duration-300 ease-out"
+										style={{ width: `${Math.min(progress.percentage, 100)}%` }}
+									/>
+								)}
+							</div>
+						</div>
 
-            <div className="grid grid-cols-2 gap-4">
-              <div className="bg-white/5 rounded-xl p-3 border border-white/5">
-                <div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
-                  {isCompiling || isFinalizing ? 'Status' : 'Format'}
-                </div>
-                <div className="text-slate-200 font-medium text-sm">
-                  {isCompiling || isFinalizing ? 'Compiling...' : formatLabel}
-                </div>
-              </div>
-              <div className="bg-white/5 rounded-xl p-3 border border-white/5">
-                <div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">Frames</div>
-                <div className="text-slate-200 font-medium text-sm">
-                  {progress.currentFrame} / {progress.totalFrames}
-                </div>
-              </div>
-            </div>
+						<div className="grid grid-cols-2 gap-4">
+							<div className="bg-white/5 rounded-xl p-3 border border-white/5">
+								<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
+									{isCompiling || isFinalizing ? t("export.status") : t("export.format")}
+								</div>
+								<div className="text-slate-200 font-medium text-sm">
+									{isFinalizing && exportFormat === "mp4"
+										? t("export.finalizing")
+										: isCompiling || isFinalizing
+											? t("export.compilingStatus")
+											: formatLabel}
+								</div>
+							</div>
+							<div className="bg-white/5 rounded-xl p-3 border border-white/5">
+								<div className="text-[10px] text-slate-500 uppercase tracking-wider mb-1">
+									{t("export.frames")}
+								</div>
+								<div className="text-slate-200 font-medium text-sm">
+									{progress.currentFrame} / {progress.totalFrames}
+								</div>
+							</div>
+						</div>
 
-            {onCancel && (
-              <div className="pt-2">
-                <Button
-                  onClick={onCancel}
-                  variant="destructive"
-                  className="w-full py-6 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all rounded-xl"
-                >
-                  Cancel Export
-                </Button>
-              </div>
-            )}
-          </div>
-        )}
+						{onCancel && (
+							<div className="pt-2">
+								<Button
+									onClick={onCancel}
+									variant="destructive"
+									className="w-full py-6 bg-red-500/10 text-red-400 border border-red-500/20 hover:bg-red-500/20 hover:border-red-500/30 transition-all rounded-xl"
+								>
+									{t("export.cancelExport")}
+								</Button>
+							</div>
+						)}
+					</div>
+				)}
 
-        {showSuccess && (
-          <div className="text-center py-4 animate-in zoom-in-95">
-            <p className="text-lg text-slate-200 font-medium">
-              {formatLabel} saved successfully!
-            </p>
-          </div>
-        )}
-      </div>
-    </>
-  );
+				{showSuccess && (
+					<div className="text-center py-4 animate-in zoom-in-95">
+						<p className="text-lg text-slate-200 font-medium">
+							{t("export.savedSuccessfully", { format: formatLabel })}
+						</p>
+					</div>
+				)}
+			</div>
+		</>
+	);
 }

src/components/video-editor/FormatSelector.tsx

@@ -1,77 +1,69 @@
-import { Film, Image } from 'lucide-react';
-import { cn } from '@/lib/utils';
-import type { ExportFormat } from '@/lib/exporter/types';
+import { Film, Image } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
+import type { ExportFormat } from "@/lib/exporter/types";
+import { cn } from "@/lib/utils";
 
 interface FormatSelectorProps {
-  selectedFormat: ExportFormat;
-  onFormatChange: (format: ExportFormat) => void;
-  disabled?: boolean;
+	selectedFormat: ExportFormat;
+	onFormatChange: (format: ExportFormat) => void;
+	disabled?: boolean;
 }
 
-interface FormatOption {
-  value: ExportFormat;
-  label: string;
-  description: string;
-  icon: React.ReactNode;
-}
-
-const formatOptions: FormatOption[] = [
-  {
-    value: 'mp4',
-    label: 'MP4 Video',
-    description: 'High quality video file',
-    icon: <Film className="w-5 h-5" />,
-  },
-  {
-    value: 'gif',
-    label: 'GIF Animation',
-    description: 'Animated image for sharing',
-    icon: <Image className="w-5 h-5" />,
-  },
+const formatOptions: Array<{ value: ExportFormat; icon: React.ReactNode }> = [
+	{ value: "mp4", icon: <Film className="w-5 h-5" /> },
+	{ value: "gif", icon: <Image className="w-5 h-5" /> },
 ];
 
 export function FormatSelector({
-  selectedFormat,
-  onFormatChange,
-  disabled = false,
+	selectedFormat,
+	onFormatChange,
+	disabled = false,
 }: FormatSelectorProps) {
-  return (
-    <div className="grid grid-cols-2 gap-3">
-      {formatOptions.map((option) => {
-        const isSelected = selectedFormat === option.value;
-        return (
-          <button
-            key={option.value}
-            type="button"
-            disabled={disabled}
-            onClick={() => onFormatChange(option.value)}
-            className={cn(
-              'relative flex flex-col items-center gap-2 p-4 rounded-xl border transition-all duration-200',
-              'focus:outline-none focus:ring-2 focus:ring-[#34B27B]/50 focus:ring-offset-2 focus:ring-offset-[#09090b]',
-              isSelected
-                ? 'bg-[#34B27B]/10 border-[#34B27B]/50 text-white'
-                : 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20 hover:text-slate-200',
-              disabled && 'opacity-50 cursor-not-allowed'
-            )}
-          >
-            <div
-              className={cn(
-                'w-10 h-10 rounded-full flex items-center justify-center transition-colors',
-                isSelected ? 'bg-[#34B27B]/20 text-[#34B27B]' : 'bg-white/5'
-              )}
-            >
-              {option.icon}
-            </div>
-            <div className="text-center">
-              <div className="font-medium text-sm">{option.label}</div>
-              <div className="text-xs text-slate-500 mt-0.5">{option.description}</div>
-            </div>
-            {isSelected && (
-              <div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34B27B]" />
-            )}
-          </button>
-        );
-      })}
-    </div>
-  );
+	const t = useScopedT("settings");
+
+	const formatLabels: Record<ExportFormat, { label: string; description: string }> = {
+		mp4: { label: t("exportFormat.mp4Video"), description: t("exportFormat.mp4Description") },
+		gif: { label: t("exportFormat.gifAnimation"), description: t("exportFormat.gifDescription") },
+	};
+
+	return (
+		<div className="grid grid-cols-2 gap-3">
+			{formatOptions.map((option) => {
+				const isSelected = selectedFormat === option.value;
+				const labels = formatLabels[option.value];
+				return (
+					<button
+						key={option.value}
+						type="button"
+						disabled={disabled}
+						onClick={() => onFormatChange(option.value)}
+						className={cn(
+							"relative flex flex-col items-center gap-2 p-4 rounded-xl border transition-all duration-200",
+							"focus:outline-none focus:ring-2 focus:ring-[#34B27B]/50 focus:ring-offset-2 focus:ring-offset-[#09090b]",
+							isSelected
+								? "bg-[#34B27B]/10 border-[#34B27B]/50 text-white"
+								: "bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20 hover:text-slate-200",
+							disabled && "opacity-50 cursor-not-allowed",
+						)}
+					>
+						<div
+							className={cn(
+								"w-10 h-10 rounded-full flex items-center justify-center transition-colors",
+								isSelected ? "bg-[#34B27B]/20 text-[#34B27B]" : "bg-white/5",
+							)}
+						>
+							{option.icon}
+						</div>
+						<div className="text-center">
+							<div className="font-medium text-sm">{labels.label}</div>
+							<div className="text-xs text-slate-500 mt-0.5">{labels.description}</div>
+						</div>
+						{isSelected && (
+							<div className="absolute top-2 right-2 w-2 h-2 rounded-full bg-[#34B27B]" />
+						)}
+					</button>
+				);
+			})}
+		</div>
+	);
 }

src/components/video-editor/GifOptionsPanel.tsx

@@ -1,110 +1,111 @@
-import { Switch } from '@/components/ui/switch';
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui/select';
-import { GIF_FRAME_RATES, GIF_SIZE_PRESETS, type GifFrameRate, type GifSizePreset } from '@/lib/exporter/types';
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import {
+	GIF_FRAME_RATES,
+	GIF_SIZE_PRESETS,
+	type GifFrameRate,
+	type GifSizePreset,
+} from "@/lib/exporter/types";
 
 interface GifOptionsPanelProps {
-  frameRate: GifFrameRate;
-  onFrameRateChange: (rate: GifFrameRate) => void;
-  loop: boolean;
-  onLoopChange: (loop: boolean) => void;
-  sizePreset: GifSizePreset;
-  onSizePresetChange: (preset: GifSizePreset) => void;
-  outputDimensions: { width: number; height: number };
-  disabled?: boolean;
+	frameRate: GifFrameRate;
+	onFrameRateChange: (rate: GifFrameRate) => void;
+	loop: boolean;
+	onLoopChange: (loop: boolean) => void;
+	sizePreset: GifSizePreset;
+	onSizePresetChange: (preset: GifSizePreset) => void;
+	outputDimensions: { width: number; height: number };
+	disabled?: boolean;
 }
 
 export function GifOptionsPanel({
-  frameRate,
-  onFrameRateChange,
-  loop,
-  onLoopChange,
-  sizePreset,
-  onSizePresetChange,
-  outputDimensions,
-  disabled = false,
+	frameRate,
+	onFrameRateChange,
+	loop,
+	onLoopChange,
+	sizePreset,
+	onSizePresetChange,
+	outputDimensions,
+	disabled = false,
 }: GifOptionsPanelProps) {
-  const sizePresetOptions = Object.entries(GIF_SIZE_PRESETS).map(([key, value]) => ({
-    value: key as GifSizePreset,
-    label: value.label,
-  }));
+	const sizePresetOptions = Object.entries(GIF_SIZE_PRESETS).map(([key, value]) => ({
+		value: key as GifSizePreset,
+		label: value.label,
+	}));
 
-  return (
-    <div className="space-y-4 animate-in slide-in-from-bottom-2 duration-200">
-      {/* Frame Rate */}
-      <div className="space-y-2">
-        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
-          Frame Rate
-        </label>
-        <Select
-          value={String(frameRate)}
-          onValueChange={(value) => onFrameRateChange(Number(value) as GifFrameRate)}
-          disabled={disabled}
-        >
-          <SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
-            {GIF_FRAME_RATES.map((rate) => (
-              <SelectItem
-                key={rate.value}
-                value={String(rate.value)}
-                className="text-slate-200 focus:bg-white/10 focus:text-white"
-              >
-                {rate.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-      </div>
+	return (
+		<div className="space-y-4 animate-in slide-in-from-bottom-2 duration-200">
+			{/* Frame Rate */}
+			<div className="space-y-2">
+				<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
+					Frame Rate
+				</label>
+				<Select
+					value={String(frameRate)}
+					onValueChange={(value) => onFrameRateChange(Number(value) as GifFrameRate)}
+					disabled={disabled}
+				>
+					<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
+						{GIF_FRAME_RATES.map((rate) => (
+							<SelectItem
+								key={rate.value}
+								value={String(rate.value)}
+								className="text-slate-200 focus:bg-white/10 focus:text-white"
+							>
+								{rate.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</div>
 
-      {/* Size Preset */}
-      <div className="space-y-2">
-        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
-          Output Size
-        </label>
-        <Select
-          value={sizePreset}
-          onValueChange={(value) => onSizePresetChange(value as GifSizePreset)}
-          disabled={disabled}
-        >
-          <SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
-            <SelectValue />
-          </SelectTrigger>
-          <SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
-            {sizePresetOptions.map((option) => (
-              <SelectItem
-                key={option.value}
-                value={option.value}
-                className="text-slate-200 focus:bg-white/10 focus:text-white"
-              >
-                {option.label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
-        <div className="text-xs text-slate-500">
-          Output: {outputDimensions.width} × {outputDimensions.height}px
-        </div>
-      </div>
+			{/* Size Preset */}
+			<div className="space-y-2">
+				<label className="text-xs font-medium text-slate-400 uppercase tracking-wider">
+					Output Size
+				</label>
+				<Select
+					value={sizePreset}
+					onValueChange={(value) => onSizePresetChange(value as GifSizePreset)}
+					disabled={disabled}
+				>
+					<SelectTrigger className="w-full bg-white/5 border-white/10 text-slate-200 hover:bg-white/10">
+						<SelectValue />
+					</SelectTrigger>
+					<SelectContent className="bg-[#1a1a1f] border-white/10 z-[100]">
+						{sizePresetOptions.map((option) => (
+							<SelectItem
+								key={option.value}
+								value={option.value}
+								className="text-slate-200 focus:bg-white/10 focus:text-white"
+							>
+								{option.label}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+				<div className="text-xs text-slate-500">
+					Output: {outputDimensions.width} × {outputDimensions.height}px
+				</div>
+			</div>
 
-      {/* Loop Toggle */}
-      <div className="flex items-center justify-between py-2">
-        <div>
-          <label className="text-sm font-medium text-slate-200">Loop Animation</label>
-          <p className="text-xs text-slate-500">GIF will play continuously</p>
-        </div>
-        <Switch
-          checked={loop}
-          onCheckedChange={onLoopChange}
-          disabled={disabled}
-        />
-      </div>
-    </div>
-  );
+			{/* Loop Toggle */}
+			<div className="flex items-center justify-between py-2">
+				<div>
+					<label className="text-sm font-medium text-slate-200">Loop Animation</label>
+					<p className="text-xs text-slate-500">GIF will play continuously</p>
+				</div>
+				<Switch checked={loop} onCheckedChange={onLoopChange} disabled={disabled} />
+			</div>
+		</div>
+	);
 }

src/components/video-editor/KeyboardShortcutsHelp.tsx

@@ -1,68 +1,59 @@
-import { HelpCircle } from "lucide-react";
-import { useState, useEffect } from "react";
-import { formatShortcut } from "@/utils/platformUtils";
+import { HelpCircle, Settings2 } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import { FIXED_SHORTCUTS, formatBinding, SHORTCUT_ACTIONS } from "@/lib/shortcuts";
 
 export function KeyboardShortcutsHelp() {
-  const [shortcuts, setShortcuts] = useState({
-    delete: 'Ctrl + D',
-    pan: 'Shift + Ctrl + Scroll',
-    zoom: 'Ctrl + Scroll'
-  });
+	const { shortcuts, isMac, openConfig } = useShortcuts();
+	const t = useScopedT("shortcuts");
 
-  useEffect(() => {
-    Promise.all([
-      formatShortcut(['mod', 'D']),
-      formatShortcut(['shift', 'mod', 'Scroll']),
-      formatShortcut(['mod', 'Scroll'])
-    ]).then(([deleteKey, panKey, zoomKey]) => {
-      setShortcuts({
-        delete: deleteKey,
-        pan: panKey,
-        zoom: zoomKey
-      });
-    });
-  }, []);
+	return (
+		<div className="relative group">
+			<HelpCircle className="w-4 h-4 text-slate-500 hover:text-[#34B27B] transition-colors cursor-help" />
 
-  return (
-    <div className="relative group">
-      <HelpCircle className="w-4 h-4 text-slate-500 hover:text-[#34B27B] transition-colors cursor-help" />
-      <div className="absolute right-0 top-full mt-2 w-64 bg-[#09090b] border border-white/10 rounded-lg p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-xl z-50">
-        <div className="text-xs font-semibold text-slate-200 mb-2">Keyboard Shortcuts</div>
-        <div className="space-y-1.5 text-[10px]">
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Zoom</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">Z</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Annotation</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">A</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Keyframe</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">F</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Add Trim</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">T</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Delete Selected</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{shortcuts.delete}</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Pan Timeline</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{shortcuts.pan}</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Zoom Timeline</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">{shortcuts.zoom}</kbd>
-          </div>
-          <div className="flex items-center justify-between">
-            <span className="text-slate-400">Pause/Play</span>
-            <kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">Space</kbd>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+			<div className="absolute right-0 top-full mt-2 w-64 bg-[#09090b] border border-white/10 rounded-lg p-3 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 shadow-xl z-50">
+				<div className="flex items-center justify-between mb-2">
+					<span className="text-xs font-semibold text-slate-200">{t("title")}</span>
+					<button
+						type="button"
+						onClick={openConfig}
+						title="Customize shortcuts"
+						className="flex items-center gap-1 text-[10px] text-slate-500 hover:text-[#34B27B] transition-colors"
+					>
+						<Settings2 className="w-3 h-3" />
+						{t("customize")}
+					</button>
+				</div>
+
+				<div className="space-y-1.5 text-[10px]">
+					{SHORTCUT_ACTIONS.map((action) => (
+						<div key={action} className="flex items-center justify-between">
+							<span className="text-slate-400">{t(`actions.${action}`)}</span>
+							<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
+								{formatBinding(shortcuts[action], isMac)}
+							</kbd>
+						</div>
+					))}
+
+					<div className="pt-1 border-t border-white/5 mt-1 space-y-1.5">
+						{FIXED_SHORTCUTS.map((fixed) => (
+							<div key={fixed.i18nKey} className="flex items-center justify-between">
+								<span className="text-slate-400">
+									{t(`fixedActions.${fixed.i18nKey}`, { defaultValue: fixed.label })}
+								</span>
+								<kbd className="px-1 py-0.5 bg-white/5 border border-white/10 rounded text-[#34B27B] font-mono">
+									{isMac
+										? fixed.display
+												.replace(/Ctrl/g, "⌘")
+												.replace(/Shift/g, "⇧")
+												.replace(/Alt/g, "⌥")
+										: fixed.display}
+								</kbd>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
 }

src/components/video-editor/PlaybackControls.tsx

@@ -1,92 +1,111 @@
-import { Button } from "../ui/button";
-import { Play, Pause } from "lucide-react";
+import { Maximize, Minimize, Pause, Play } from "lucide-react";
+import { useScopedT } from "@/contexts/I18nContext";
 import { cn } from "@/lib/utils";
+import { Button } from "../ui/button";
 
 interface PlaybackControlsProps {
-  isPlaying: boolean;
-  currentTime: number;
-  duration: number;
-  onTogglePlayPause: () => void;
-  onSeek: (time: number) => void;
+	isPlaying: boolean;
+	currentTime: number;
+	duration: number;
+	isFullscreen?: boolean;
+	onToggleFullscreen?: () => void;
+	onTogglePlayPause: () => void;
+	onSeek: (time: number) => void;
 }
 
 export default function PlaybackControls({
-  isPlaying,
-  currentTime,
-  duration,
-  onTogglePlayPause,
-  onSeek,
+	isPlaying,
+	currentTime,
+	duration,
+	isFullscreen = false,
+	onToggleFullscreen,
+	onTogglePlayPause,
+	onSeek,
 }: PlaybackControlsProps) {
-  function formatTime(seconds: number) {
-    if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) return '0:00';
-    const mins = Math.floor(seconds / 60);
-    const secs = Math.floor(seconds % 60);
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  }
+	const t = useScopedT("common");
 
-  function handleSeekChange(e: React.ChangeEvent<HTMLInputElement>) {
-    onSeek(parseFloat(e.target.value));
-  }
+	function formatTime(seconds: number) {
+		if (!isFinite(seconds) || isNaN(seconds) || seconds < 0) return "0:00";
+		const mins = Math.floor(seconds / 60);
+		const secs = Math.floor(seconds % 60);
+		return `${mins}:${secs.toString().padStart(2, "0")}`;
+	}
 
-  const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+	function handleSeekChange(e: React.ChangeEvent<HTMLInputElement>) {
+		onSeek(parseFloat(e.target.value));
+	}
 
-  return (
-    <div className="flex items-center gap-2 px-1 py-0.5 rounded-full bg-black/60 backdrop-blur-md border border-white/10 shadow-xl transition-all duration-300 hover:bg-black/70 hover:border-white/20">
-      <Button
-        onClick={onTogglePlayPause}
-        size="icon"
-        className={cn(
-          "w-8 h-8 rounded-full transition-all duration-200 border border-white/10",
-          isPlaying 
-            ? "bg-white/10 text-white hover:bg-white/20" 
-            : "bg-white text-black hover:bg-white/90 hover:scale-105 shadow-[0_0_15px_rgba(255,255,255,0.3)]"
-        )}
-        aria-label={isPlaying ? 'Pause' : 'Play'}
-      >
-        {isPlaying ? (
-          <Pause className="w-3.5 h-3.5 fill-current" />
-        ) : (
-          <Play className="w-3.5 h-3.5 fill-current ml-0.5" />
-        )}
-      </Button>
-      
-      <span className="text-[9px] font-medium text-slate-300 tabular-nums w-[30px] text-right">
-        {formatTime(currentTime)}
-      </span>
-      
-      <div className="flex-1 relative h-6 flex items-center group">
-        {/* Custom Track Background */}
-        <div className="absolute left-0 right-0 h-0.5 bg-white/10 rounded-full overflow-hidden">
-          <div 
-            className="h-full bg-[#34B27B] rounded-full"
-            style={{ width: `${progress}%` }}
-          />
-        </div>
-        
-        {/* Interactive Input */}
-        <input
-          type="range"
-          min="0"
-          max={duration || 100}
-          value={currentTime}
-          onChange={handleSeekChange}
-          step="0.01"
-          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
-        />
-        
-        {/* Custom Thumb (visual only, follows progress) */}
-        <div 
-          className="absolute w-2.5 h-2.5 bg-white rounded-full shadow-lg pointer-events-none group-hover:scale-125 transition-transform duration-100"
-          style={{ 
-            left: `${progress}%`,
-            transform: 'translateX(-50%)'
-          }}
-        />
-      </div>
-      
-      <span className="text-[9px] font-medium text-slate-500 tabular-nums w-[30px]">
-        {formatTime(duration)}
-      </span>
-    </div>
-  );
+	const progress = duration > 0 ? (currentTime / duration) * 100 : 0;
+
+	return (
+		<div className="flex items-center gap-2 px-1 py-0.5 rounded-full bg-black/60 backdrop-blur-md border border-white/10 shadow-xl transition-all duration-300 hover:bg-black/70 hover:border-white/20">
+			<Button
+				onClick={onTogglePlayPause}
+				size="icon"
+				className={cn(
+					"w-8 h-8 rounded-full transition-all duration-200 border border-white/10",
+					isPlaying
+						? "bg-white/10 text-white hover:bg-white/20"
+						: "bg-white text-black hover:bg-white/90 hover:scale-105 shadow-[0_0_15px_rgba(255,255,255,0.3)]",
+				)}
+				aria-label={isPlaying ? t("playback.pause") : t("playback.play")}
+			>
+				{isPlaying ? (
+					<Pause className="w-3.5 h-3.5 fill-current" />
+				) : (
+					<Play className="w-3.5 h-3.5 fill-current ml-0.5" />
+				)}
+			</Button>
+
+			<span className="text-[9px] font-medium text-slate-300 tabular-nums w-[30px] text-right">
+				{formatTime(currentTime)}
+			</span>
+
+			<div className="flex-1 relative h-6 flex items-center group">
+				{/* Custom Track Background */}
+				<div className="absolute left-0 right-0 h-0.5 bg-white/10 rounded-full overflow-hidden">
+					<div className="h-full bg-[#34B27B] rounded-full" style={{ width: `${progress}%` }} />
+				</div>
+
+				{/* Interactive Input */}
+				<input
+					type="range"
+					min="0"
+					max={duration || 100}
+					value={currentTime}
+					onChange={handleSeekChange}
+					step="0.01"
+					className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10"
+				/>
+
+				{/* Custom Thumb (visual only, follows progress) */}
+				<div
+					className="absolute w-2.5 h-2.5 bg-white rounded-full shadow-lg pointer-events-none group-hover:scale-125 transition-transform duration-100"
+					style={{
+						left: `${progress}%`,
+						transform: "translateX(-50%)",
+					}}
+				/>
+			</div>
+
+			<span className="text-[9px] font-medium text-slate-500 tabular-nums w-[30px]">
+				{formatTime(duration)}
+			</span>
+
+			{onToggleFullscreen && (
+				<Button
+					onClick={onToggleFullscreen}
+					size="icon"
+					className="w-7 h-7 rounded-full transition-all duration-200 border border-transparent hover:bg-white/10 text-white hover:border-white/10 shrink-0 shadow-none ml-0.5"
+					aria-label={isFullscreen ? t("playback.exitFullscreen") : t("playback.fullscreen")}
+				>
+					{isFullscreen ? (
+						<Minimize className="w-3.5 h-3.5" />
+					) : (
+						<Maximize className="w-3.5 h-3.5" />
+					)}
+				</Button>
+			)}
+		</div>
+	);
 }

src/components/video-editor/ShortcutsConfigDialog.tsx

@@ -0,0 +1,247 @@
+import { Keyboard, RotateCcw } from "lucide-react";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
+import { useShortcuts } from "@/contexts/ShortcutsContext";
+import {
+	DEFAULT_SHORTCUTS,
+	FIXED_SHORTCUTS,
+	findConflict,
+	formatBinding,
+	SHORTCUT_ACTIONS,
+	type ShortcutAction,
+	type ShortcutBinding,
+	type ShortcutConflict,
+	type ShortcutsConfig,
+} from "@/lib/shortcuts";
+
+const MODIFIER_KEYS = new Set(["Control", "Shift", "Alt", "Meta"]);
+
+export function ShortcutsConfigDialog() {
+	const { shortcuts, isMac, isConfigOpen, closeConfig, setShortcuts, persistShortcuts } =
+		useShortcuts();
+	const t = useScopedT("shortcuts");
+	const tc = useScopedT("common");
+
+	const [draft, setDraft] = useState<ShortcutsConfig>(shortcuts);
+	const [captureFor, setCaptureFor] = useState<ShortcutAction | null>(null);
+	const [conflict, setConflict] = useState<{
+		forAction: ShortcutAction;
+		pending: ShortcutBinding;
+		conflictWith: ShortcutConflict;
+	} | null>(null);
+
+	useEffect(() => {
+		if (isConfigOpen) {
+			setDraft(shortcuts);
+			setCaptureFor(null);
+			setConflict(null);
+		}
+	}, [isConfigOpen, shortcuts]);
+
+	useEffect(() => {
+		if (!captureFor) return;
+
+		const handleCapture = (e: KeyboardEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
+
+			if (e.key === "Escape") {
+				setCaptureFor(null);
+				return;
+			}
+
+			if (MODIFIER_KEYS.has(e.key)) return;
+
+			const binding: ShortcutBinding = {
+				key: e.key.toLowerCase(),
+				...(e.ctrlKey || e.metaKey ? { ctrl: true } : {}),
+				...(e.shiftKey ? { shift: true } : {}),
+				...(e.altKey ? { alt: true } : {}),
+			};
+
+			const found = findConflict(binding, captureFor, draft);
+			setCaptureFor(null);
+
+			if (found?.type === "fixed") {
+				toast.error(t("reservedShortcut", { label: found.label }));
+				return;
+			}
+
+			if (found?.type === "configurable") {
+				setConflict({ forAction: captureFor, pending: binding, conflictWith: found });
+				return;
+			}
+
+			setDraft((prev: ShortcutsConfig) => ({ ...prev, [captureFor]: binding }));
+		};
+
+		window.addEventListener("keydown", handleCapture, { capture: true });
+		return () => window.removeEventListener("keydown", handleCapture, { capture: true });
+	}, [captureFor, draft, t]);
+
+	const handleSwap = useCallback(() => {
+		if (!conflict || conflict.conflictWith.type !== "configurable") return;
+		const { forAction, pending, conflictWith } = conflict;
+		setDraft((prev: ShortcutsConfig) => ({
+			...prev,
+			[forAction]: pending,
+			[conflictWith.action]: prev[forAction],
+		}));
+		setConflict(null);
+	}, [conflict]);
+
+	const handleCancelConflict = useCallback(() => setConflict(null), []);
+
+	const handleSave = useCallback(async () => {
+		setShortcuts(draft);
+		await persistShortcuts(draft);
+		toast.success(t("savedToast"));
+		closeConfig();
+	}, [draft, setShortcuts, persistShortcuts, closeConfig, t]);
+
+	const handleReset = useCallback(() => {
+		setDraft({ ...DEFAULT_SHORTCUTS });
+		toast.info(t("resetToast"));
+	}, [t]);
+
+	const handleClose = useCallback(() => {
+		setCaptureFor(null);
+		setConflict(null);
+		closeConfig();
+	}, [closeConfig]);
+
+	return (
+		<Dialog
+			open={isConfigOpen}
+			onOpenChange={(open: boolean) => {
+				if (!open) handleClose();
+			}}
+		>
+			<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="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>
+
+				<DialogFooter className="shrink-0 flex gap-2 sm:justify-between mt-2">
+					<Button
+						variant="ghost"
+						size="sm"
+						className="text-slate-400 hover:text-white gap-1.5"
+						onClick={handleReset}
+					>
+						<RotateCcw className="w-3 h-3" />
+						{t("resetToDefaults")}
+					</Button>
+					<div className="flex gap-2">
+						<Button variant="ghost" size="sm" onClick={handleClose}>
+							{tc("actions.cancel")}
+						</Button>
+						<Button
+							size="sm"
+							className="bg-[#34B27B] hover:bg-[#2d9e6c] text-white"
+							onClick={handleSave}
+						>
+							{tc("actions.save")}
+						</Button>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

src/components/video-editor/TutorialHelp.tsx

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

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

@@ -1,5 +1,5 @@
-export { default as VideoEditor } from './VideoEditor';
-export { default as VideoPlayback } from './VideoPlayback';
-export { default as PlaybackControls } from './PlaybackControls';
-export { default as TimelineEditor } from './timeline/TimelineEditor';
-export { default as SettingsPanel } from './SettingsPanel';
+export { default as PlaybackControls } from "./PlaybackControls";
+export { default as SettingsPanel } from "./SettingsPanel";
+export { default as TimelineEditor } from "./timeline/TimelineEditor";
+export { default as VideoEditor } from "./VideoEditor";
+export { default as VideoPlayback } from "./VideoPlayback";

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

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

@@ -0,0 +1,580 @@
+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 { 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 VALID_BLUR_SHAPES = new Set(["rectangle", "oval", "freehand"] as const);
+
+// 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;
+
+export interface ProjectEditorState {
+	wallpaper: string;
+	shadowIntensity: number;
+	showBlur: boolean;
+	motionBlurAmount: number;
+	borderRadius: number;
+	padding: number;
+	cropRegion: CropRegion;
+	zoomRegions: ZoomRegion[];
+	trimRegions: TrimRegion[];
+	speedRegions: SpeedRegion[];
+	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 {
+	version: number;
+	media?: ProjectMedia;
+	editor: ProjectEditorState;
+	videoPath?: string;
+}
+
+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));
+}
+
+function isFileUrl(value: string): boolean {
+	return /^file:\/\//i.test(value);
+}
+
+function encodePathSegments(pathname: string, keepWindowsDrive = false): string {
+	return pathname
+		.split("/")
+		.map((segment, index) => {
+			if (!segment) return "";
+			if (keepWindowsDrive && index === 1 && /^[a-zA-Z]:$/.test(segment)) {
+				return segment;
+			}
+			return encodeURIComponent(segment);
+		})
+		.join("/");
+}
+
+export function toFileUrl(filePath: string): string {
+	const normalized = filePath.replace(/\\/g, "/");
+
+	// Windows drive path: C:/Users/...
+	if (/^[a-zA-Z]:\//.test(normalized)) {
+		return `file://${encodePathSegments(`/${normalized}`, true)}`;
+	}
+
+	// UNC path: //server/share/...
+	if (normalized.startsWith("//")) {
+		const [host, ...pathParts] = normalized.replace(/^\/+/, "").split("/");
+		const encodedPath = pathParts.map((part) => encodeURIComponent(part)).join("/");
+		return encodedPath ? `file://${host}/${encodedPath}` : `file://${host}/`;
+	}
+
+	const absolutePath = normalized.startsWith("/") ? normalized : `/${normalized}`;
+	return `file://${encodePathSegments(absolutePath)}`;
+}
+
+export function fromFileUrl(fileUrl: string): string {
+	const value = fileUrl.trim();
+	if (!isFileUrl(value)) {
+		return fileUrl;
+	}
+
+	try {
+		const url = new URL(value);
+		const pathname = decodeURIComponent(url.pathname);
+
+		if (url.host && url.host !== "localhost") {
+			return `//${url.host}${pathname}`;
+		}
+
+		if (/^\/[a-zA-Z]:/.test(pathname)) {
+			return pathname.slice(1);
+		}
+
+		return pathname;
+	} catch {
+		const rawFallbackPath = value.replace(/^file:\/\//i, "");
+		let fallbackPath = rawFallbackPath;
+		try {
+			fallbackPath = decodeURIComponent(rawFallbackPath);
+		} catch {
+			// Keep raw best-effort path if percent decoding fails.
+		}
+		return fallbackPath.replace(/^\/([a-zA-Z]:)/, "$1");
+	}
+}
+
+export function deriveNextId(prefix: string, ids: string[]): number {
+	const max = ids.reduce((acc, id) => {
+		const match = id.match(new RegExp(`^${prefix}-(\\d+)$`));
+		if (!match) return acc;
+		const value = Number(match[1]);
+		return Number.isFinite(value) ? Math.max(acc, value) : acc;
+	}, 0);
+	return max + 1;
+}
+
+export function validateProjectData(candidate: unknown): candidate is EditorProjectData {
+	if (!candidate || typeof candidate !== "object") return false;
+	const project = candidate as Partial<EditorProjectData>;
+	if (typeof project.version !== "number") return false;
+	if (!resolveProjectMedia(project)) return false;
+	if (!project.editor || typeof project.editor !== "object") return false;
+	return true;
+}
+
+export function resolveProjectMedia(
+	candidate: Partial<EditorProjectData> | { media?: unknown; videoPath?: unknown },
+): ProjectMedia | null {
+	const media = normalizeProjectMedia(candidate.media);
+	if (media) {
+		return media;
+	}
+
+	if (typeof candidate.videoPath === "string" && candidate.videoPath.trim()) {
+		return { screenVideoPath: candidate.videoPath };
+	}
+
+	return null;
+}
+
+export function normalizeProjectEditor(editor: Partial<ProjectEditorState>): ProjectEditorState {
+	const validAspectRatios = new Set<AspectRatio>(ASPECT_RATIOS);
+	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
+				.filter((region): region is ZoomRegion => Boolean(region && typeof region.id === "string"))
+				.map((region) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					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 validPreset =
+						region.rotationPreset === "iso" ||
+						region.rotationPreset === "left" ||
+						region.rotationPreset === "right"
+							? region.rotationPreset
+							: undefined;
+					return {
+						id: region.id,
+						startMs,
+						endMs,
+						depth: [1, 2, 3, 4, 5, 6].includes(region.depth) ? region.depth : DEFAULT_ZOOM_DEPTH,
+						focus: {
+							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 } : {}),
+					};
+				})
+		: [];
+
+	const normalizedTrimRegions: TrimRegion[] = Array.isArray(editor.trimRegions)
+		? editor.trimRegions
+				.filter((region): region is TrimRegion => Boolean(region && typeof region.id === "string"))
+				.map((region) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					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);
+					return {
+						id: region.id,
+						startMs,
+						endMs,
+					};
+				})
+		: [];
+
+	const normalizedSpeedRegions: SpeedRegion[] = Array.isArray(editor.speedRegions)
+		? editor.speedRegions
+				.filter((region): region is SpeedRegion => Boolean(region && typeof region.id === "string"))
+				.map((region) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					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 speed =
+						isFiniteNumber(region.speed) &&
+						region.speed >= MIN_PLAYBACK_SPEED &&
+						region.speed <= MAX_PLAYBACK_SPEED
+							? clampPlaybackSpeed(region.speed)
+							: DEFAULT_PLAYBACK_SPEED;
+
+					return {
+						id: region.id,
+						startMs,
+						endMs,
+						speed,
+					};
+				})
+		: [];
+
+	const normalizedAnnotationRegions: AnnotationRegion[] = Array.isArray(editor.annotationRegions)
+		? editor.annotationRegions
+				.filter((region): region is AnnotationRegion =>
+					Boolean(region && typeof region.id === "string"),
+				)
+				.map((region, index) => {
+					const rawStart = isFiniteNumber(region.startMs) ? Math.round(region.startMs) : 0;
+					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 === "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,
+						position: {
+							x: clamp(
+								isFiniteNumber(region.position?.x)
+									? region.position.x
+									: DEFAULT_ANNOTATION_POSITION.x,
+								0,
+								100,
+							),
+							y: clamp(
+								isFiniteNumber(region.position?.y)
+									? region.position.y
+									: DEFAULT_ANNOTATION_POSITION.y,
+								0,
+								100,
+							),
+						},
+						size: {
+							width: clamp(
+								isFiniteNumber(region.size?.width)
+									? region.size.width
+									: DEFAULT_ANNOTATION_SIZE.width,
+								1,
+								200,
+							),
+							height: clamp(
+								isFiniteNumber(region.size?.height)
+									? region.size.height
+									: DEFAULT_ANNOTATION_SIZE.height,
+								1,
+								200,
+							),
+						},
+						style: {
+							...DEFAULT_ANNOTATION_STYLE,
+							...(region.style && typeof region.style === "object" ? region.style : {}),
+						},
+						zIndex: isFiniteNumber(region.zIndex) ? region.zIndex : index + 1,
+						figureData: region.figureData
+							? {
+									...DEFAULT_FIGURE_DATA,
+									...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,
+					};
+				})
+		: [];
+
+	const rawCropX = isFiniteNumber(editor.cropRegion?.x)
+		? editor.cropRegion.x
+		: DEFAULT_CROP_REGION.x;
+	const rawCropY = isFiniteNumber(editor.cropRegion?.y)
+		? editor.cropRegion.y
+		: DEFAULT_CROP_REGION.y;
+	const rawCropWidth = isFiniteNumber(editor.cropRegion?.width)
+		? editor.cropRegion.width
+		: DEFAULT_CROP_REGION.width;
+	const rawCropHeight = isFiniteNumber(editor.cropRegion?.height)
+		? editor.cropRegion.height
+		: DEFAULT_CROP_REGION.height;
+
+	const cropX = clamp(rawCropX, 0, 1);
+	const cropY = clamp(rawCropY, 0, 1);
+	const cropWidth = clamp(rawCropWidth, 0.01, 1 - cropX);
+	const cropHeight = clamp(rawCropHeight, 0.01, 1 - cropY);
+
+	return {
+		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)
+			? clamp(editor.motionBlurAmount, 0, 1)
+			: typeof (editor as { motionBlurEnabled?: unknown }).motionBlurEnabled === "boolean"
+				? (editor as { motionBlurEnabled?: boolean }).motionBlurEnabled
+					? 0.35
+					: 0
+				: 0,
+		borderRadius: typeof editor.borderRadius === "number" ? editor.borderRadius : 0,
+		padding: isFiniteNumber(editor.padding) ? clamp(editor.padding, 0, 100) : 50,
+		cropRegion: {
+			x: cropX,
+			y: cropY,
+			width: cropWidth,
+			height: cropHeight,
+		},
+		zoomRegions: normalizedZoomRegions,
+		trimRegions: normalizedTrimRegions,
+		speedRegions: normalizedSpeedRegions,
+		annotationRegions: normalizedAnnotationRegions,
+		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
+				: "good",
+		exportFormat: editor.exportFormat === "gif" ? "gif" : "mp4",
+		gifFrameRate:
+			editor.gifFrameRate === 15 ||
+			editor.gifFrameRate === 20 ||
+			editor.gifFrameRate === 25 ||
+			editor.gifFrameRate === 30
+				? editor.gifFrameRate
+				: 15,
+		gifLoop: typeof editor.gifLoop === "boolean" ? editor.gifLoop : true,
+		gifSizePreset:
+			editor.gifSizePreset === "medium" ||
+			editor.gifSizePreset === "large" ||
+			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,
+	};
+}
+
+export function createProjectData(
+	media: ProjectMedia,
+	editor: ProjectEditorState,
+): EditorProjectData {
+	return {
+		version: PROJECT_VERSION,
+		media,
+		editor,
+	};
+}
+
+export function createProjectSnapshot(
+	media: ProjectMedia,
+	editor: Partial<ProjectEditorState>,
+): string {
+	return JSON.stringify(createProjectData(media, normalizeProjectEditor(editor)));
+}
+
+export function hasProjectUnsavedChanges(
+	currentSnapshot: string | null,
+	baselineSnapshot: string | null,
+): boolean {
+	return Boolean(
+		currentSnapshot !== null && baselineSnapshot !== null && currentSnapshot !== baselineSnapshot,
+	);
+}

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

@@ -1,120 +1,185 @@
-import { useItem } from "dnd-timeline";
 import type { Span } from "dnd-timeline";
+import { useItem } from "dnd-timeline";
+import { Gauge, MessageSquare, MousePointer2, Scissors, ZoomIn } from "lucide-react";
+import { useMemo } from "react";
+import { useScopedT } from "@/contexts/I18nContext";
 import { cn } from "@/lib/utils";
-import { ZoomIn, Scissors, MessageSquare } from "lucide-react";
 import glassStyles from "./ItemGlass.module.css";
 
 interface ItemProps {
-  id: string;
-  span: Span;
-  rowId: string;
-  children: React.ReactNode;
-  isSelected?: boolean;
-  onSelect?: () => void;
-  zoomDepth?: number;
-  variant?: 'zoom' | 'trim' | 'annotation';
+	id: string;
+	span: Span;
+	rowId: string;
+	children: React.ReactNode;
+	isSelected?: boolean;
+	onSelect?: () => void;
+	zoomDepth?: number;
+	zoomCustomScale?: number;
+	speedValue?: number;
+	isAutoFocus?: boolean;
+	variant?: "zoom" | "trim" | "annotation" | "speed" | "blur";
 }
 
 // Map zoom depth to multiplier labels
 const ZOOM_LABELS: Record<number, string> = {
-  1: "1.25×",
-  2: "1.5×",
-  3: "1.8×",
-  4: "2.2×",
-  5: "3.5×",
-  6: "5×",
+	1: "1.25×",
+	2: "1.5×",
+	3: "1.8×",
+	4: "2.2×",
+	5: "3.5×",
+	6: "5×",
 };
 
-export default function Item({ 
-  id, 
-  span, 
-  rowId, 
-  isSelected = false, 
-  onSelect, 
-  zoomDepth = 1,
-  variant = 'zoom',
-  children
+function formatMs(ms: number): string {
+	const totalSeconds = ms / 1000;
+	const minutes = Math.floor(totalSeconds / 60);
+	const seconds = totalSeconds % 60;
+	if (minutes > 0) {
+		return `${minutes}:${seconds.toFixed(1).padStart(4, "0")}`;
+	}
+	return `${seconds.toFixed(1)}s`;
+}
+
+export default function Item({
+	id,
+	span,
+	rowId,
+	isSelected = false,
+	onSelect,
+	zoomDepth = 1,
+	zoomCustomScale,
+	speedValue,
+	isAutoFocus = false,
+	variant = "zoom",
+	children,
 }: ItemProps) {
-  const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
-    id,
-    span,
-    data: { rowId },
-  });
+	const t = useScopedT("timeline");
+	const { setNodeRef, attributes, listeners, itemStyle, itemContentStyle } = useItem({
+		id,
+		span,
+		data: { rowId },
+	});
 
-  const isZoom = variant === 'zoom';
-  const isTrim = variant === 'trim';
-  
-  const glassClass = isZoom 
-    ? glassStyles.glassGreen 
-    : isTrim 
-    ? glassStyles.glassRed 
-    : glassStyles.glassYellow;
-    
-  const endCapColor = isZoom 
-    ? '#21916A' 
-    : isTrim 
-    ? '#ef4444' 
-    : '#B4A046';
+	const isZoom = variant === "zoom";
+	const isTrim = variant === "trim";
+	const isSpeed = variant === "speed";
 
-  return (
-    <div
-      ref={setNodeRef}
-      style={itemStyle}
-      {...listeners}
-      {...attributes}
-      onPointerDownCapture={() => onSelect?.()}
-      className="group"
-    >
-      <div style={itemContentStyle}>
-        <div
-          className={cn(
-            glassClass,
-            "w-full h-full overflow-hidden flex items-center justify-center gap-1.5 cursor-grab active:cursor-grabbing relative",
-            isSelected && glassStyles.selected
-          )}
-          style={{ height: 40, color: '#fff' }}
-          onClick={(event) => {
-            event.stopPropagation();
-            onSelect?.();
-          }}
-        >
-          <div
-            className={cn(glassStyles.zoomEndCap, glassStyles.left)}
-            style={{ cursor: 'col-resize', pointerEvents: 'auto', width: 8, opacity: 0.9, background: endCapColor }}
-            title="Resize left"
-          />
-          <div
-            className={cn(glassStyles.zoomEndCap, glassStyles.right)}
-            style={{ cursor: 'col-resize', pointerEvents: 'auto', width: 8, opacity: 0.9, background: endCapColor }}
-            title="Resize right"
-          />
-          {/* Content */}
-          <div className="relative z-10 flex items-center gap-1.5 text-white/90 opacity-80 group-hover:opacity-100 transition-opacity select-none">
-            {isZoom ? (
-              <>
-                <ZoomIn className="w-3.5 h-3.5" />
-                <span className="text-[11px] font-semibold tracking-tight">
-                  {ZOOM_LABELS[zoomDepth] || `${zoomDepth}×`}
-                </span>
-              </>
-            ) : isTrim ? (
-              <>
-                <Scissors className="w-3.5 h-3.5" />
-                <span className="text-[11px] font-semibold tracking-tight">
-                  Trim
-                </span>
-              </>
-            ) : (
-              <>
-                <MessageSquare className="w-3.5 h-3.5" />
-                <span className="text-[11px] font-semibold tracking-tight">
-                  {children}
-                </span>
-              </>
-            )}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
+	const glassClass = isZoom
+		? glassStyles.glassGreen
+		: isTrim
+			? glassStyles.glassRed
+			: isSpeed
+				? glassStyles.glassAmber
+				: glassStyles.glassYellow;
+
+	const endCapColor = isZoom ? "#21916A" : isTrim ? "#ef4444" : isSpeed ? "#d97706" : "#B4A046";
+
+	const timeLabel = useMemo(
+		() => `${formatMs(span.start)} – ${formatMs(span.end)}`,
+		[span.start, span.end],
+	);
+
+	// Minimum clickable width on the outer wrapper.
+	// Kept small (6px) so items visually distinguish their real positions;
+	// users should zoom in to interact with sub-second items precisely.
+	const MIN_ITEM_PX = 6;
+	const safeItemStyle = { ...itemStyle, minWidth: MIN_ITEM_PX };
+
+	return (
+		<div
+			ref={setNodeRef}
+			style={safeItemStyle}
+			{...listeners}
+			{...attributes}
+			onPointerDownCapture={() => onSelect?.()}
+			className="group"
+		>
+			<div style={{ ...itemContentStyle, minWidth: 24 }}>
+				<div
+					className={cn(
+						glassClass,
+						"w-full h-full overflow-hidden flex items-center justify-center gap-1.5 cursor-grab active:cursor-grabbing relative",
+						isSelected && glassStyles.selected,
+					)}
+					style={{ height: 40, color: "#fff", minWidth: 24 }}
+					onClick={(event) => {
+						event.stopPropagation();
+						onSelect?.();
+					}}
+				>
+					<div
+						className={cn(glassStyles.zoomEndCap, glassStyles.left)}
+						style={{
+							cursor: "col-resize",
+							pointerEvents: "auto",
+							width: 8,
+							opacity: 0.9,
+							background: endCapColor,
+						}}
+						title="Resize left"
+					/>
+					<div
+						className={cn(glassStyles.zoomEndCap, glassStyles.right)}
+						style={{
+							cursor: "col-resize",
+							pointerEvents: "auto",
+							width: 8,
+							opacity: 0.9,
+							background: endCapColor,
+						}}
+						title="Resize right"
+					/>
+					{/* Content */}
+					<div className="relative z-10 flex flex-col items-center justify-center text-white/90 opacity-80 group-hover:opacity-100 transition-opacity select-none overflow-hidden">
+						<div className="flex items-center gap-1.5">
+							{isZoom ? (
+								<>
+									<ZoomIn className="w-3.5 h-3.5 shrink-0" />
+									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
+										{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">
+										{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}×` : t("labels.speed")}
+									</span>
+								</>
+							) : (
+								<>
+									<MessageSquare className="w-3.5 h-3.5 shrink-0" />
+									<span className="text-[11px] font-semibold tracking-tight whitespace-nowrap">
+										{children}
+									</span>
+								</>
+							)}
+						</div>
+						<span
+							className={`text-[9px] tabular-nums tracking-tight whitespace-nowrap transition-opacity ${
+								isSelected ? "opacity-60" : "opacity-0 group-hover:opacity-40"
+							}`}
+						>
+							{timeLabel}
+						</span>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

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

@@ -1,90 +1,126 @@
 .glassGreen {
-  position: relative;
-  border-radius: 8px;
-  -corner-smoothing: antialiased;
-  background: rgba(52, 178, 123, 0.15);
-  border: 1px solid rgba(52, 178, 123, 0.3);
-  box-shadow: 0 2px 12px 0 rgba(52, 178, 123, 0.1) inset;
-  margin: 2px 0;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	position: relative;
+	border-radius: 8px;
+	-corner-smoothing: antialiased;
+	background: rgba(52, 178, 123, 0.15);
+	border: 1px solid rgba(52, 178, 123, 0.3);
+	box-shadow: 0 2px 12px 0 rgba(52, 178, 123, 0.1) inset;
+	margin: 2px 0;
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .glassGreen:hover {
-  background: rgba(52, 178, 123, 0.25);
-  border-color: rgba(52, 178, 123, 0.5);
-  box-shadow: 0 4px 20px 0 rgba(52, 178, 123, 0.2) inset;
+	background: rgba(52, 178, 123, 0.25);
+	border-color: rgba(52, 178, 123, 0.5);
+	box-shadow: 0 4px 20px 0 rgba(52, 178, 123, 0.2) inset;
 }
 
 .glassGreen.selected {
-  background: rgba(52, 178, 123, 0.35);
-  border-color: #34B27B;
-  box-shadow: 0 0 0 1px #34B27B, 0 4px 20px 0 rgba(52, 178, 123, 0.3) inset;
-  z-index: 10;
+	background: rgba(52, 178, 123, 0.35);
+	border-color: #34b27b;
+	box-shadow:
+		0 0 0 1px #34b27b,
+		0 4px 20px 0 rgba(52, 178, 123, 0.3) inset;
+	z-index: 10;
 }
 
 .glassRed {
-  position: relative;
-  border-radius: 8px;
-  -corner-smoothing: antialiased;
-  background: rgba(239, 68, 68, 0.15);
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  box-shadow: 0 2px 12px 0 rgba(239, 68, 68, 0.1) inset;
-  margin: 2px 0;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	position: relative;
+	border-radius: 8px;
+	-corner-smoothing: antialiased;
+	background: rgba(239, 68, 68, 0.15);
+	border: 1px solid rgba(239, 68, 68, 0.3);
+	box-shadow: 0 2px 12px 0 rgba(239, 68, 68, 0.1) inset;
+	margin: 2px 0;
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .glassRed:hover {
-  background: rgba(239, 68, 68, 0.25);
-  border-color: rgba(239, 68, 68, 0.5);
-  box-shadow: 0 4px 20px 0 rgba(239, 68, 68, 0.2) inset;
+	background: rgba(239, 68, 68, 0.25);
+	border-color: rgba(239, 68, 68, 0.5);
+	box-shadow: 0 4px 20px 0 rgba(239, 68, 68, 0.2) inset;
 }
 
 .glassRed.selected {
-  background: rgba(239, 68, 68, 0.35);
-  border-color: #ef4444;
-  box-shadow: 0 0 0 1px #ef4444, 0 4px 20px 0 rgba(239, 68, 68, 0.3) inset;
-  z-index: 10;
+	background: rgba(239, 68, 68, 0.35);
+	border-color: #ef4444;
+	box-shadow:
+		0 0 0 1px #ef4444,
+		0 4px 20px 0 rgba(239, 68, 68, 0.3) inset;
+	z-index: 10;
 }
 
 .glassYellow {
-  position: relative;
-  border-radius: 8px;
-  -corner-smoothing: antialiased;
-  background: rgba(180, 160, 70, 0.15);
-  border: 1px solid rgba(180, 160, 70, 0.3);
-  box-shadow: 0 2px 12px 0 rgba(180, 160, 70, 0.1) inset;
-  margin: 2px 0;
-  backdrop-filter: blur(4px);
-  -webkit-backdrop-filter: blur(4px);
-  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+	position: relative;
+	border-radius: 8px;
+	-corner-smoothing: antialiased;
+	background: rgba(180, 160, 70, 0.15);
+	border: 1px solid rgba(180, 160, 70, 0.3);
+	box-shadow: 0 2px 12px 0 rgba(180, 160, 70, 0.1) inset;
+	margin: 2px 0;
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .glassYellow:hover {
-  background: rgba(180, 160, 70, 0.25);
-  border-color: rgba(180, 160, 70, 0.5);
-  box-shadow: 0 4px 20px 0 rgba(180, 160, 70, 0.2) inset;
+	background: rgba(180, 160, 70, 0.25);
+	border-color: rgba(180, 160, 70, 0.5);
+	box-shadow: 0 4px 20px 0 rgba(180, 160, 70, 0.2) inset;
 }
 
 .glassYellow.selected {
-  background: rgba(180, 160, 70, 0.35);
-  border-color: #B4A046;
-  box-shadow: 0 0 0 1px #B4A046, 0 4px 20px 0 rgba(180, 160, 70, 0.3) inset;
-  z-index: 10;
+	background: rgba(180, 160, 70, 0.35);
+	border-color: #b4a046;
+	box-shadow:
+		0 0 0 1px #b4a046,
+		0 4px 20px 0 rgba(180, 160, 70, 0.3) inset;
+	z-index: 10;
+}
+
+.glassAmber {
+	position: relative;
+	border-radius: 8px;
+	-corner-smoothing: antialiased;
+	background: rgba(245, 158, 11, 0.15);
+	border: 1px solid rgba(245, 158, 11, 0.3);
+	box-shadow: 0 2px 12px 0 rgba(245, 158, 11, 0.1) inset;
+	margin: 2px 0;
+	backdrop-filter: blur(4px);
+	-webkit-backdrop-filter: blur(4px);
+	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.glassAmber:hover {
+	background: rgba(245, 158, 11, 0.25);
+	border-color: rgba(245, 158, 11, 0.5);
+	box-shadow: 0 4px 20px 0 rgba(245, 158, 11, 0.2) inset;
+}
+
+.glassAmber.selected {
+	background: rgba(245, 158, 11, 0.35);
+	border-color: #f59e0b;
+	box-shadow:
+		0 0 0 1px #f59e0b,
+		0 4px 20px 0 rgba(245, 158, 11, 0.3) inset;
+	z-index: 10;
 }
 
 .zoomEndCap {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  pointer-events: none;
-  z-index: 2;
-  opacity: 0;
-  transition: opacity 0.2s, width 0.2s;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	pointer-events: none;
+	z-index: 2;
+	opacity: 0.45;
+	transition:
+		opacity 0.2s,
+		width 0.2s;
 }
 
 .glassGreen:hover .zoomEndCap,
@@ -92,20 +128,22 @@
 .glassRed:hover .zoomEndCap,
 .glassRed.selected .zoomEndCap,
 .glassYellow:hover .zoomEndCap,
-.glassYellow.selected .zoomEndCap {
-  opacity: 1;
+.glassYellow.selected .zoomEndCap,
+.glassAmber:hover .zoomEndCap,
+.glassAmber.selected .zoomEndCap {
+	opacity: 1;
 }
 
 .zoomEndCap.left {
-  left: 0;
-  cursor: ew-resize;
-  border-top-left-radius: 7px;
-  border-bottom-left-radius: 7px;
+	left: 0;
+	cursor: ew-resize;
+	border-top-left-radius: 7px;
+	border-bottom-left-radius: 7px;
 }
 
 .zoomEndCap.right {
-  right: 0;
-  cursor: ew-resize;
-  border-top-right-radius: 7px;
-  border-bottom-right-radius: 7px;
-}
+	right: 0;
+	cursor: ew-resize;
+	border-top-right-radius: 7px;
+	border-bottom-right-radius: 7px;
+}

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

@@ -1,50 +1,114 @@
-import React from "react";
 import { useTimelineContext } from "dnd-timeline";
+import React, { useEffect, useState } from "react";
 
 interface Keyframe {
-  id: string;
-  time: number;
+	id: string;
+	time: number;
 }
 
 interface KeyframeMarkersProps {
-  keyframes: Keyframe[];
-  selectedKeyframeId: string | null;
-  setSelectedKeyframeId: (id: string | null) => void;
+	keyframes: Keyframe[];
+	selectedKeyframeId: string | null;
+	setSelectedKeyframeId: (id: string | null) => void;
+	onKeyframeMove: (id: string, newTime: number) => void;
+	videoDurationMs: number;
+	timelineRef: React.RefObject<HTMLDivElement>;
 }
 
-const KeyframeMarkers: React.FC<KeyframeMarkersProps> = ({ keyframes, selectedKeyframeId, setSelectedKeyframeId }) => {
-  const { sidebarWidth, range, valueToPixels } = useTimelineContext();
-  return (
-    <>
-      {keyframes.map(kf => {
-        const offset = valueToPixels(kf.time - range.start);
-        const isSelected = kf.id === selectedKeyframeId;
-        return (
-          <div
-            key={kf.id}
-            className={`absolute top-8 cursor-pointer ${isSelected ? 'ring-2 ring-[#34B27B]' : ''}`}
-            style={{ left: `${sidebarWidth + offset - 8}px`, zIndex: 40 }}
-            onClick={e => {
-              e.stopPropagation();
-              setSelectedKeyframeId(kf.id);
-            }}
-            title={`Keyframe @ ${kf.time}ms`}
-          >
-            <div style={{
-              width: '10px',
-              height: '10px',
-              background: '#ffe100ff',
-              transform: 'rotate(45deg)',
-              border: 'none',
-             
-              opacity: isSelected ? 1 : 0.6,
-              transition: 'opacity 0.15s',
-            }} />
-          </div>
-        );
-      })}
-    </>
-  );
+const KeyframeMarkers: React.FC<KeyframeMarkersProps> = ({
+	keyframes,
+	selectedKeyframeId,
+	setSelectedKeyframeId,
+	onKeyframeMove,
+	videoDurationMs,
+	timelineRef,
+}) => {
+	const { sidebarWidth, range, valueToPixels, pixelsToValue } = useTimelineContext();
+	const [draggingKeyframeId, setDraggingKeyframeId] = useState<string | null>(null);
+
+	useEffect(() => {
+		if (!draggingKeyframeId) return;
+
+		const handleMouseMove = (e: MouseEvent) => {
+			if (!timelineRef.current) return;
+
+			const rect = timelineRef.current.getBoundingClientRect();
+			const clickX = e.clientX - rect.left - sidebarWidth;
+			const relativeMs = pixelsToValue(clickX);
+			const absoluteMs = Math.max(0, Math.min(range.start + relativeMs, videoDurationMs));
+
+			// Update the keyframe position in real-time
+			onKeyframeMove(draggingKeyframeId, absoluteMs);
+		};
+
+		const handleMouseUp = () => {
+			setDraggingKeyframeId(null);
+			document.body.style.cursor = "";
+		};
+
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
+		document.body.style.cursor = "ew-resize";
+
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+			document.body.style.cursor = "";
+		};
+	}, [
+		draggingKeyframeId,
+		onKeyframeMove,
+		timelineRef,
+		sidebarWidth,
+		range.start,
+		videoDurationMs,
+		pixelsToValue,
+	]);
+
+	return (
+		<>
+			{keyframes.map((kf) => {
+				const offset = valueToPixels(kf.time - range.start);
+				const isSelected = kf.id === selectedKeyframeId;
+				const isDragging = kf.id === draggingKeyframeId;
+
+				return (
+					<div
+						key={kf.id}
+						className={`absolute top-8 cursor-grab active:cursor-grabbing ${isSelected ? "ring-2 ring-[#34B27B]" : ""}`}
+						style={{
+							left: `${sidebarWidth + offset - 8}px`,
+							zIndex: isDragging ? 50 : 40,
+							transition: isDragging ? "none" : "left 0.1s ease-out",
+						}}
+						onMouseDown={(e) => {
+							e.stopPropagation();
+							setSelectedKeyframeId(kf.id);
+							setDraggingKeyframeId(kf.id);
+						}}
+						onContextMenu={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							setSelectedKeyframeId(kf.id);
+						}}
+						title={`Keyframe @ ${Math.round(kf.time)}ms (drag to move, Delete/Backspace to remove)`}
+					>
+						<div
+							style={{
+								width: "10px",
+								height: "10px",
+								background: "#ffe100ff",
+								transform: "rotate(45deg)",
+								border: "none",
+								opacity: isSelected ? 1 : 0.6,
+								transition: "opacity 0.15s",
+							}}
+						/>
+					</div>
+				);
+			})}
+		</>
+	);
 };
 
 export default KeyframeMarkers;

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

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

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

@@ -1,12 +1,17 @@
 import { cn } from "@/lib/utils";
+
 interface SubrowProps {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 export default function Subrow({ children }: SubrowProps) {
-  return (
-    <div className={cn("flex items-center min-h-[32px] gap-1 px-2 py-0.5 bg-[#23232a] rounded-md text-slate-300")}>
-      {children}
-    </div>
-  );
-}
+	return (
+		<div
+			className={cn(
+				"flex items-center min-h-[32px] gap-1 px-2 py-0.5 bg-[#23232a] rounded-md text-slate-300",
+			)}
+		>
+			{children}
+		</div>
+	);
+}

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

@@ -1,163 +1,317 @@
-import { useCallback } from "react";
-import type { Dispatch, ReactNode, SetStateAction } from "react";
+import type {
+	DragEndEvent,
+	DragMoveEvent,
+	DragStartEvent,
+	Range,
+	ResizeEndEvent,
+	ResizeMoveEvent,
+	Span,
+} from "dnd-timeline";
 import { TimelineContext } from "dnd-timeline";
-import type { DragEndEvent, Range, ResizeEndEvent, Span } from "dnd-timeline";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import { useCallback, useRef } from "react";
 
 interface TimelineWrapperProps {
-  children: ReactNode;
-  range: Range;
-  videoDuration: number;
-  hasOverlap: (newSpan: Span, excludeId?: string) => boolean;
-  onRangeChange: Dispatch<SetStateAction<Range>>;
-  minItemDurationMs: number;
-  minVisibleRangeMs: number;
-  gridSizeMs: number;
-  onItemSpanChange: (id: string, span: Span) => void;
+	children: ReactNode;
+	range: Range;
+	videoDuration: number;
+	hasOverlap: (newSpan: Span, excludeId?: string) => boolean;
+	onRangeChange: Dispatch<SetStateAction<Range>>;
+	minItemDurationMs: number;
+	minVisibleRangeMs: number;
+	gridSizeMs?: number;
+	onItemSpanChange: (id: string, span: Span) => void;
+	allRegionSpans?: { id: string; start: number; end: number }[];
 }
 
 export default function TimelineWrapper({
-  children,
-  range,
-  videoDuration,
-  hasOverlap,
-  onRangeChange,
-  minItemDurationMs,
-  minVisibleRangeMs,
-  gridSizeMs: _gridSizeMs,
-  onItemSpanChange,
+	children,
+	range,
+	videoDuration,
+	hasOverlap,
+	onRangeChange,
+	minItemDurationMs,
+	minVisibleRangeMs,
+	gridSizeMs: _gridSizeMs,
+	onItemSpanChange,
+	allRegionSpans = [],
 }: TimelineWrapperProps) {
-  const totalMs = Math.max(0, Math.round(videoDuration * 1000));
+	const totalMs = Math.max(0, Math.round(videoDuration * 1000));
 
-  const clampSpanToBounds = useCallback(
-    (span: Span): Span => {
-      const rawDuration = Math.max(span.end - span.start, 0);
-      const normalizedStart = Number.isFinite(span.start) ? span.start : 0;
+	const clampSpanToBounds = useCallback(
+		(span: Span): Span => {
+			const rawDuration = Math.max(span.end - span.start, 0);
+			const normalizedStart = Number.isFinite(span.start) ? span.start : 0;
 
-      if (totalMs === 0) {
-        const minDuration = Math.max(minItemDurationMs, 1);
-        const duration = Math.max(rawDuration, minDuration);
-        const start = Math.max(0, normalizedStart);
-        return {
-          start,
-          end: start + duration,
-        };
-      }
+			if (totalMs === 0) {
+				const minDuration = Math.max(minItemDurationMs, 1);
+				const duration = Math.max(rawDuration, minDuration);
+				const start = Math.max(0, normalizedStart);
+				return {
+					start,
+					end: start + duration,
+				};
+			}
 
-      const minDuration = Math.min(Math.max(minItemDurationMs, 1), totalMs);
-      const duration = Math.min(Math.max(rawDuration, minDuration), totalMs);
+			const minDuration = Math.min(Math.max(minItemDurationMs, 1), totalMs);
+			const duration = Math.min(Math.max(rawDuration, minDuration), totalMs);
 
-      const start = Math.max(0, Math.min(normalizedStart, totalMs - duration));
-      const end = start + duration;
+			const start = Math.max(0, Math.min(normalizedStart, totalMs - duration));
+			const end = Math.min(start + duration, totalMs);
 
-      return { start, end };
-    },
-    [minItemDurationMs, totalMs],
-  );
+			return { start, end };
+		},
+		[minItemDurationMs, totalMs],
+	);
 
-  const clampRange = useCallback(
-    (candidate: Range): Range => {
-      if (totalMs === 0) {
-        const minSpan = Math.max(minVisibleRangeMs, 1);
-        const span = Math.max(candidate.end - candidate.start, minSpan);
-        const start = Math.max(0, Math.min(candidate.start, candidate.end - span));
-        return { start, end: start + span };
-      }
+	const clampRange = useCallback(
+		(candidate: Range): Range => {
+			if (totalMs === 0) {
+				const minSpan = Math.max(minVisibleRangeMs, 1);
+				const span = Math.max(candidate.end - candidate.start, minSpan);
+				const start = Math.max(0, Math.min(candidate.start, candidate.end - span));
+				return { start, end: start + span };
+			}
 
-      const rawStart = Math.max(0, candidate.start);
-      const rawEnd = candidate.end;
-      const clampedEnd = Math.min(rawEnd, totalMs);
-      
-      const minSpan = Math.min(Math.max(minVisibleRangeMs, 1), totalMs);
-      const desiredSpan = clampedEnd - rawStart;
-      const span = Math.min(Math.max(desiredSpan, minSpan), totalMs);
-      
-      let finalStart = rawStart;
-      let finalEnd = finalStart + span;
-      
-      if (finalEnd > totalMs) {
-        finalEnd = totalMs;
-        finalStart = Math.max(0, finalEnd - span);
-      }
+			const rawStart = Math.max(0, candidate.start);
+			const rawEnd = candidate.end;
+			const clampedEnd = Math.min(rawEnd, totalMs);
 
-      return { start: finalStart, end: finalEnd };
-    },
-    [minVisibleRangeMs, totalMs],
-  );
+			const minSpan = Math.min(Math.max(minVisibleRangeMs, 1), totalMs);
+			const desiredSpan = clampedEnd - rawStart;
+			const span = Math.min(Math.max(desiredSpan, minSpan), totalMs);
 
-  const onResizeEnd = useCallback(
-    (event: ResizeEndEvent) => {
-      const updatedSpan = event.active.data.current.getSpanFromResizeEvent?.(event);
-      if (!updatedSpan) return;
-      
-      const activeItemId = event.active.id as string;
-      const clampedSpan = clampSpanToBounds(updatedSpan);
+			let finalStart = rawStart;
+			let finalEnd = finalStart + span;
 
-      if (clampedSpan.end - clampedSpan.start < Math.min(minItemDurationMs, totalMs || minItemDurationMs)) {
-        return;
-      }
-      
-      if (hasOverlap(clampedSpan, activeItemId)) {
-        return;
-      }
+			if (finalEnd > totalMs) {
+				finalEnd = totalMs;
+				finalStart = Math.max(0, finalEnd - span);
+			}
 
-      onItemSpanChange(activeItemId, clampedSpan);
-    },
-    [clampSpanToBounds, hasOverlap, minItemDurationMs, onItemSpanChange, totalMs]
-  );
+			return { start: finalStart, end: finalEnd };
+		},
+		[minVisibleRangeMs, totalMs],
+	);
 
-  const onDragEnd = useCallback(
-    (event: DragEndEvent) => {
-      const activeRowId = event.over?.id as string;
-      const updatedSpan = event.active.data.current.getSpanFromDragEvent?.(event);
-      if (!updatedSpan || !activeRowId) return;
-      
-      const activeItemId = event.active.id as string;
-      const clampedSpan = clampSpanToBounds(updatedSpan);
-      
-      if (hasOverlap(clampedSpan, activeItemId)) {
-        return;
-      }
+	// When a span overlaps neighbours, clamp it to the nearest boundary
+	const clampToNeighbours = useCallback(
+		(span: Span, activeItemId: string): Span => {
+			const siblings = allRegionSpans.filter((r) => r.id !== activeItemId);
+			let { start, end } = span;
 
-      onItemSpanChange(activeItemId, clampedSpan);
-    },
-    [clampSpanToBounds, hasOverlap, onItemSpanChange]
-  );
+			for (const r of siblings) {
+				// Span's right edge crossed into a region to the right
+				if (end > r.start && start < r.start) {
+					end = r.start;
+				}
+				// Span's left edge crossed into a region to the left
+				if (start < r.end && end > r.end) {
+					start = r.end;
+				}
+			}
 
-  const handleRangeChange = useCallback(
-    (updater: (previous: Range) => Range) => {
-      onRangeChange((prev) => {
-        const normalized = totalMs > 0 ? clampRange(prev) : prev;
-        const desired = updater(normalized);
-        
-        if (totalMs > 0) {
-          const clamped = clampRange(desired);
-          
-          if (clamped.end > totalMs) {
-            const span = Math.min(clamped.end - clamped.start, totalMs);
-            return {
-              start: Math.max(0, totalMs - span),
-              end: totalMs,
-            };
-          }
-          
-          return clamped;
-        }
-        
-        return desired;
-      });
-    },
-    [clampRange, onRangeChange, totalMs],
-  );
+			// Ensure minimum duration after clamping
+			const minDur = Math.min(minItemDurationMs, totalMs || minItemDurationMs);
+			if (end - start < minDur) {
+				// Try extending in the direction that has room
+				if (end + minDur - (end - start) <= totalMs) {
+					end = start + minDur;
+				} else {
+					start = end - minDur;
+				}
+			}
 
-  return (
-    <TimelineContext
-      range={range}
-      onRangeChanged={handleRangeChange}
-      onResizeEnd={onResizeEnd}
-      onDragEnd={onDragEnd}
-      autoScroll={{ enabled: false }}
-    >
-      {children}
-    </TimelineContext>
-  );
-}
+			return { start: Math.max(0, start), end: Math.min(end, totalMs || end) };
+		},
+		[allRegionSpans, minItemDurationMs, totalMs],
+	);
+
+	const onResizeEnd = useCallback(
+		(event: ResizeEndEvent) => {
+			const updatedSpan = event.active.data.current.getSpanFromResizeEvent?.(event);
+			if (!updatedSpan) return;
+
+			const activeItemId = event.active.id as string;
+			let clampedSpan = clampSpanToBounds(updatedSpan);
+
+			const effectiveMinDuration =
+				totalMs > 0 ? Math.min(minItemDurationMs, totalMs) : minItemDurationMs;
+			if (clampedSpan.end - clampedSpan.start < effectiveMinDuration) {
+				return;
+			}
+
+			// Clamp to neighbour boundaries instead of rejecting
+			if (hasOverlap(clampedSpan, activeItemId)) {
+				clampedSpan = clampToNeighbours(clampedSpan, activeItemId);
+				// If still overlapping after clamping, fall back to original position
+				if (hasOverlap(clampedSpan, activeItemId)) {
+					return;
+				}
+			}
+
+			onItemSpanChange(activeItemId, clampedSpan);
+		},
+		[
+			clampSpanToBounds,
+			clampToNeighbours,
+			hasOverlap,
+			minItemDurationMs,
+			onItemSpanChange,
+			totalMs,
+		],
+	);
+
+	const onDragEnd = useCallback(
+		(event: DragEndEvent) => {
+			const activeRowId = event.over?.id as string;
+			const updatedSpan = event.active.data.current.getSpanFromDragEvent?.(event);
+			if (!updatedSpan || !activeRowId) return;
+
+			const activeItemId = event.active.id as string;
+			let clampedSpan = clampSpanToBounds(updatedSpan);
+
+			// Clamp to neighbour boundaries instead of rejecting
+			if (hasOverlap(clampedSpan, activeItemId)) {
+				clampedSpan = clampToNeighbours(clampedSpan, activeItemId);
+				if (hasOverlap(clampedSpan, activeItemId)) {
+					return;
+				}
+			}
+
+			onItemSpanChange(activeItemId, clampedSpan);
+		},
+		[clampSpanToBounds, clampToNeighbours, hasOverlap, onItemSpanChange],
+	);
+
+	// Drag/resize tooltip (direct DOM updates, no re-renders)
+	const tooltipRef = useRef<HTMLDivElement>(null);
+
+	const formatTooltipMs = useCallback((ms: number) => {
+		const s = ms / 1000;
+		const min = Math.floor(s / 60);
+		const sec = s % 60;
+		return min > 0 ? `${min}:${sec.toFixed(1).padStart(4, "0")}` : `${sec.toFixed(1)}s`;
+	}, []);
+
+	const showTooltip = useCallback(
+		(span: { start: number; end: number } | null, screenX?: number) => {
+			const el = tooltipRef.current;
+			if (!el) return;
+			if (!span) {
+				el.style.opacity = "0";
+				return;
+			}
+			el.textContent = `${formatTooltipMs(span.start)} – ${formatTooltipMs(span.end)}`;
+			el.style.opacity = "1";
+			if (screenX !== undefined) {
+				const parent = el.parentElement;
+				if (parent) {
+					const rect = parent.getBoundingClientRect();
+					const x = Math.max(0, Math.min(screenX - rect.left, rect.width - 100));
+					el.style.left = `${x}px`;
+				}
+			}
+		},
+		[formatTooltipMs],
+	);
+
+	const onDragStart = useCallback(
+		(event: DragStartEvent) => {
+			const span = event.active.data.current.getSpanFromDragEvent?.(event);
+			if (span) showTooltip(span);
+		},
+		[showTooltip],
+	);
+
+	const onDragMove = useCallback(
+		(event: DragMoveEvent) => {
+			const span = event.active.data.current.getSpanFromDragEvent?.(event);
+			const screenX =
+				event.activatorEvent && "clientX" in event.activatorEvent
+					? (event.activatorEvent as PointerEvent).clientX + (event.delta?.x ?? 0)
+					: undefined;
+			if (span) showTooltip(span, screenX);
+		},
+		[showTooltip],
+	);
+
+	const onResizeMove = useCallback(
+		(event: ResizeMoveEvent) => {
+			const span = event.active.data.current.getSpanFromResizeEvent?.(event);
+			const screenX =
+				event.activatorEvent && "clientX" in event.activatorEvent
+					? (event.activatorEvent as PointerEvent).clientX + (event.delta?.x ?? 0)
+					: undefined;
+			if (span) showTooltip(span, screenX);
+		},
+		[showTooltip],
+	);
+
+	const hideTooltip = useCallback(() => showTooltip(null), [showTooltip]);
+
+	const onResizeEndWithTooltip = useCallback(
+		(event: ResizeEndEvent) => {
+			hideTooltip();
+			onResizeEnd(event);
+		},
+		[hideTooltip, onResizeEnd],
+	);
+
+	const onDragEndWithTooltip = useCallback(
+		(event: DragEndEvent) => {
+			hideTooltip();
+			onDragEnd(event);
+		},
+		[hideTooltip, onDragEnd],
+	);
+
+	const handleRangeChange = useCallback(
+		(updater: (previous: Range) => Range) => {
+			onRangeChange((prev) => {
+				const normalized = totalMs > 0 ? clampRange(prev) : prev;
+				const desired = updater(normalized);
+
+				if (totalMs > 0) {
+					const clamped = clampRange(desired);
+
+					if (clamped.end > totalMs) {
+						const span = Math.min(clamped.end - clamped.start, totalMs);
+						return {
+							start: Math.max(0, totalMs - span),
+							end: totalMs,
+						};
+					}
+
+					return clamped;
+				}
+
+				return desired;
+			});
+		},
+		[clampRange, onRangeChange, totalMs],
+	);
+
+	return (
+		<TimelineContext
+			range={range}
+			onRangeChanged={handleRangeChange}
+			onResizeEnd={onResizeEndWithTooltip}
+			onResizeMove={onResizeMove}
+			onDragStart={onDragStart}
+			onDragMove={onDragMove}
+			onDragEnd={onDragEndWithTooltip}
+			autoScroll={{ enabled: false }}
+		>
+			<div className="relative">
+				{children}
+				{/* Floating tooltip shown during drag/resize */}
+				<div
+					ref={tooltipRef}
+					className="absolute top-1 pointer-events-none z-[60] px-1.5 py-0.5 rounded bg-black/80 text-[10px] text-white/90 font-medium tabular-nums whitespace-nowrap border border-white/10 shadow-lg"
+					style={{ opacity: 0, transition: "opacity 0.1s" }}
+				/>
+			</div>
+		</TimelineContext>
+	);
+}

src/components/video-editor/timeline/zoomSuggestionUtils.ts

@@ -0,0 +1,81 @@
+import type { CursorTelemetryPoint, ZoomFocus } from "../types";
+
+export const MIN_DWELL_DURATION_MS = 450;
+export const MAX_DWELL_DURATION_MS = 2600;
+export const DWELL_MOVE_THRESHOLD = 0.02;
+
+export interface ZoomDwellCandidate {
+	centerTimeMs: number;
+	focus: ZoomFocus;
+	strength: number;
+}
+
+function normalizeTelemetrySample(
+	sample: CursorTelemetryPoint,
+	totalMs: number,
+): CursorTelemetryPoint {
+	return {
+		timeMs: Math.max(0, Math.min(sample.timeMs, totalMs)),
+		cx: Math.max(0, Math.min(sample.cx, 1)),
+		cy: Math.max(0, Math.min(sample.cy, 1)),
+	};
+}
+
+export function normalizeCursorTelemetry(
+	telemetry: CursorTelemetryPoint[],
+	totalMs: number,
+): CursorTelemetryPoint[] {
+	return [...telemetry]
+		.filter(
+			(sample) =>
+				Number.isFinite(sample.timeMs) && Number.isFinite(sample.cx) && Number.isFinite(sample.cy),
+		)
+		.sort((a, b) => a.timeMs - b.timeMs)
+		.map((sample) => normalizeTelemetrySample(sample, totalMs));
+}
+
+export function detectZoomDwellCandidates(samples: CursorTelemetryPoint[]): ZoomDwellCandidate[] {
+	if (samples.length < 2) {
+		return [];
+	}
+
+	const dwellCandidates: ZoomDwellCandidate[] = [];
+	let runStart = 0;
+
+	const pushRunIfDwell = (startIndex: number, endIndexExclusive: number) => {
+		if (endIndexExclusive - startIndex < 2) {
+			return;
+		}
+
+		const start = samples[startIndex];
+		const end = samples[endIndexExclusive - 1];
+		const runDuration = end.timeMs - start.timeMs;
+		if (runDuration < MIN_DWELL_DURATION_MS || runDuration > MAX_DWELL_DURATION_MS) {
+			return;
+		}
+
+		const runSamples = samples.slice(startIndex, endIndexExclusive);
+		const avgCx = runSamples.reduce((sum, sample) => sum + sample.cx, 0) / runSamples.length;
+		const avgCy = runSamples.reduce((sum, sample) => sum + sample.cy, 0) / runSamples.length;
+
+		dwellCandidates.push({
+			centerTimeMs: Math.round((start.timeMs + end.timeMs) / 2),
+			focus: { cx: avgCx, cy: avgCy },
+			strength: runDuration,
+		});
+	};
+
+	for (let index = 1; index < samples.length; index += 1) {
+		const prev = samples[index - 1];
+		const curr = samples[index];
+		const distance = Math.hypot(curr.cx - prev.cx, curr.cy - prev.cy);
+
+		if (distance > DWELL_MOVE_THRESHOLD) {
+			pushRunIfDwell(runStart, index);
+			runStart = index;
+		}
+	}
+	pushRunIfDwell(runStart, samples.length);
+
+	return dwellCandidates;
+}

src/components/video-editor/types.ts

@@ -1,132 +1,385 @@
+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)
+}
+
+export const DEFAULT_WEBCAM_POSITION: WebcamPosition | null = null;
 
 export interface ZoomFocus {
-  cx: number; // normalized horizontal center (0-1)
-  cy: number; // normalized vertical center (0-1)
+	cx: number; // normalized horizontal center (0-1)
+	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;
+	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 {
+	timeMs: number;
+	cx: number;
+	cy: number;
 }
 
 export interface TrimRegion {
-  id: string;
-  startMs: number;
-  endMs: number;
+	id: string;
+	startMs: number;
+	endMs: number;
 }
 
-export type AnnotationType = 'text' | 'image' | 'figure';
+export type AnnotationType = "text" | "image" | "figure" | "blur";
 
-export type ArrowDirection = 'up' | 'down' | 'left' | 'right' | 'up-right' | 'up-left' | 'down-right' | 'down-left';
+export type ArrowDirection =
+	| "up"
+	| "down"
+	| "left"
+	| "right"
+	| "up-right"
+	| "up-left"
+	| "down-right"
+	| "down-left";
 
 export interface FigureData {
-  arrowDirection: ArrowDirection;
-  color: string;
-  strokeWidth: number;
+	arrowDirection: ArrowDirection;
+	color: string;
+	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;
+	x: number;
+	y: number;
 }
 
 export interface AnnotationSize {
-  width: number;
-  height: number;
+	width: number;
+	height: number;
 }
 
 export interface AnnotationTextStyle {
-  color: string;
-  backgroundColor: string;
-  fontSize: number; // pixels
-  fontFamily: string;
-  fontWeight: 'normal' | 'bold';
-  fontStyle: 'normal' | 'italic';
-  textDecoration: 'none' | 'underline';
-  textAlign: 'left' | 'center' | 'right';
+	color: string;
+	backgroundColor: string;
+	fontSize: number; // pixels
+	fontFamily: string;
+	fontWeight: "normal" | "bold";
+	fontStyle: "normal" | "italic";
+	textDecoration: "none" | "underline";
+	textAlign: "left" | "center" | "right";
 }
 
 export interface AnnotationRegion {
-  id: string;
-  startMs: number;
-  endMs: number;
-  type: AnnotationType;
-  content: string; // Legacy - still used for current type
-  textContent?: string; // Separate storage for text
-  imageContent?: string; // Separate storage for image data URL
-  position: AnnotationPosition;
-  size: AnnotationSize;
-  style: AnnotationTextStyle;
-  zIndex: number;
-  figureData?: FigureData;
+	id: string;
+	startMs: number;
+	endMs: number;
+	type: AnnotationType;
+	content: string; // Legacy - still used for current type
+	textContent?: string; // Separate storage for text
+	imageContent?: string; // Separate storage for image data URL
+	position: AnnotationPosition;
+	size: AnnotationSize;
+	style: AnnotationTextStyle;
+	zIndex: number;
+	figureData?: FigureData;
+	blurData?: BlurData;
 }
 
 export const DEFAULT_ANNOTATION_POSITION: AnnotationPosition = {
-  x: 50,
-  y: 50,
+	x: 50,
+	y: 50,
 };
 
 export const DEFAULT_ANNOTATION_SIZE: AnnotationSize = {
-  width: 30,
-  height: 20,
+	width: 30,
+	height: 20,
 };
 
 export const DEFAULT_ANNOTATION_STYLE: AnnotationTextStyle = {
-  color: '#ffffff',
-  backgroundColor: 'transparent',
-  fontSize: 32,
-  fontFamily: 'Inter',
-  fontWeight: 'bold',
-  fontStyle: 'normal',
-  textDecoration: 'none',
-  textAlign: 'center',
+	color: "#ffffff",
+	backgroundColor: "transparent",
+	fontSize: 32,
+	fontFamily: "Inter",
+	fontWeight: "bold",
+	fontStyle: "normal",
+	textDecoration: "none",
+	textAlign: "center",
 };
 
 export const DEFAULT_FIGURE_DATA: FigureData = {
-  arrowDirection: 'right',
-  color: '#34B27B',
-  strokeWidth: 4,
+	arrowDirection: "right",
+	color: "#34B27B",
+	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; 
-  width: number; 
-  height: number; 
+	x: number;
+	y: number;
+	width: number;
+	height: number;
 }
 
 export const DEFAULT_CROP_REGION: CropRegion = {
-  x: 0,
-  y: 0,
-  width: 1,
-  height: 1,
+	x: 0,
+	y: 0,
+	width: 1,
+	height: 1,
 };
 
+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;
+	startMs: number;
+	endMs: number;
+	speed: PlaybackSpeed;
+}
+
+export const SPEED_OPTIONS: Array<{ speed: PlaybackSpeed; label: string }> = [
+	{ speed: 0.25, label: "0.25×" },
+	{ speed: 0.5, label: "0.5×" },
+	{ speed: 0.75, label: "0.75×" },
+	{ speed: 1.25, label: "1.25×" },
+	{ 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;
+
 export const ZOOM_DEPTH_SCALES: Record<ZoomDepth, number> = {
-  1: 1.25,
-  2: 1.5,
-  3: 1.8,
-  4: 2.2,
-  5: 3.5,
-  6: 5.0,
+	1: 1.25,
+	2: 1.5,
+	3: 1.8,
+	4: 2.2,
+	5: 3.5,
+	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),
-    cy: clamp(focus.cy, 0, 1),
-  };
+	return {
+		cx: clamp(focus.cx, 0, 1),
+		cy: clamp(focus.cy, 0, 1),
+	};
 }
 
 function clamp(value: number, min: number, max: number) {
-  if (Number.isNaN(value)) return (min + max) / 2;
-  return Math.min(max, Math.max(min, value));
+	if (Number.isNaN(value)) return (min + max) / 2;
+	return Math.min(max, Math.max(min, value));
 }