fix homebrew cask audit warnings

- Use #{version} interpolation in URLs so brew detects them as versioned
  (silences "Use sha256 :no_check when URL is unversioned").
- Drop blank line between on_arm and on_intel (same stanza group).
- Alphabetize zap trash array.
- Add verified: stanza for the GitHub release URL.

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

@@ -1,15 +0,0 @@
-# These are supported funding model platforms
-
-github: siddharthvaddem
-patreon: # Replace with a single Patreon username
-open_collective: # Replace with a sissgle Open Collective username
-ko_fi: # Replace with a single Ko-fi username
-tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
-community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
-liberapay: # Replace with a single Liberapay username
-issuehunt: # Replace with a single IssueHunt username
-lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
-polar: # Replace with a single Polar username
-buy_me_a_coffee: siddharthvaddem
-thanks_dev: # Replace with a single thanks.dev username
-custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,38 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Desktop (please complete the following information):**
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Smartphone (please complete the following information):**
- - Device: [e.g. iPhone6]
- - OS: [e.g. iOS8.1]
- - Browser [e.g. stock browser, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -0,0 +1,149 @@
+name: Bug Report
+description: Create a report to help us improve
+title: "[Bug]: "
+labels: ["bug", "triage"]
+body:
+  - type: checkboxes
+    attributes:
+      label: Search existing issues
+      description: Please search to see if an issue already exists for the bug you encountered.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is.
+      placeholder: e.g., When I click submit, nothing happens...
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected-behavior
+    attributes:
+      label: Expected behavior
+      description: A clear and concise description of what you expected to happen.
+      placeholder: e.g., The form should submit and show a success message
+    validations:
+      required: true
+
+  - type: textarea
+    id: steps-to-reproduce
+    attributes:
+      label: To Reproduce
+      description: Steps to reproduce the behavior.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: false
+
+  - type: textarea
+    id: screenshots
+    attributes:
+      label: Screenshots
+      description: If applicable, add screenshots to help explain your problem.
+      placeholder: Drag and drop images here or paste them
+    validations:
+      required: false
+
+  - type: dropdown
+    id: os-type
+    attributes:
+      label: OS
+      description: Operating system
+      options:
+        - Windows
+        - macOS
+        - Linux
+        - iOS
+        - Android
+        - Other
+    validations:
+      required: false
+
+  - type: input
+    id: os-version
+    attributes:
+      label: OS Version
+      description: Please specify your OS version
+      placeholder: e.g., Windows 11, macOS Sonoma, Ubuntu 22.04
+    validations:
+      required: false
+
+  - type: input
+    id: os-other
+    attributes:
+      label: Other OS
+      description: If you selected "Other" for OS, please specify your operating system
+      placeholder: e.g., FreeBSD, Solaris
+    validations:
+      required: false
+
+  - type: dropdown
+    id: browser
+    attributes:
+      label: Browser
+      description: What browser are you using?
+      options:
+        - Chrome
+        - Firefox
+        - Safari
+        - Edge
+        - Other
+    validations:
+      required: false
+
+  - type: input
+    id: browser-version
+    attributes:
+      label: Browser Version
+      description: Please specify your browser version
+      placeholder: e.g., 120.0, 121.0.1
+    validations:
+      required: false
+
+  - type: input
+    id: browser-other
+    attributes:
+      label: Other Browser
+      description: If you selected "Other" for Browser, please specify your browser
+      placeholder: e.g., Brave, Vivaldi, Opera
+    validations:
+      required: false
+
+  - type: dropdown
+    id: device-type
+    attributes:
+      label: Device Type
+      description: Device category
+      options:
+        - Desktop
+        - Laptop
+        - Tablet
+        - Mobile
+        - Other
+    validations:
+      required: false
+
+  - type: input
+    id: device-other
+    attributes:
+      label: Other Device
+      description: If you selected "Other" for Device Type, please specify your device
+      placeholder: e.g., Smart TV, IoT device
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context about the problem here.
+      placeholder: Links, references, or any additional information
+    validations:
+      required: false

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: ''
-assignees: ''
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -0,0 +1,48 @@
+name: Feature Request
+description: Suggest an idea for this project
+title: "[Feature]: "
+labels: ["enhancement", "feature-request"]
+body:
+  - type: checkboxes
+    attributes:
+      label: Search existing issues
+      description: Please search to see if an issue already exists for this feature request.
+      options:
+        - label: I have searched the existing issues
+          required: true
+
+  - type: textarea
+    id: problem-description
+    attributes:
+      label: Is your feature request related to a problem?
+      description: A clear and concise description of what the problem is.
+      placeholder: e.g., I'm always frustrated when I have to...
+    validations:
+      required: true
+
+  - type: textarea
+    id: solution-description
+    attributes:
+      label: Describe the solution you'd like
+      description: A clear and concise description of what you want to happen.
+      placeholder: Describe the feature or change you're proposing
+    validations:
+      required: false
+
+  - type: textarea
+    id: alternatives
+    attributes:
+      label: Describe alternatives you've considered
+      description: A clear and concise description of any alternative solutions or features you've considered.
+      placeholder: Have you considered any workarounds or alternative approaches?
+    validations:
+      required: false
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Add any other context or screenshots about the feature request here.
+      placeholder: Links, mockups, or any additional information
+    validations:
+      required: false

.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,6 +43,182 @@ 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@v4
+
+      # ─── Setup Node.js ────────────────────────────────────────
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      # ─── Setup Python (needed by some native deps) ────────────
+      - name: Setup Python
+        uses: actions/setup-python@v5
+        with:
+          python-version: '3.11'
+
+      # ─── Install Dependencies ─────────────────────────────────
+      - name: Install dependencies
+        run: npm ci
+
+      # ─── 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 }}
+
+      # ─── 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: 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:
       - name: Checkout code
         uses: actions/checkout@v3
@@ -45,26 +228,26 @@ jobs:
         with:
           node-version: '22'
 
-      - name: Setup Python
-        uses: actions/setup-python@v4
-        with:
-          python-version: '3.11'
-
       - 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 macOS app
-        run: npm run build:mac
+      - name: Build Linux app
+        run: npm run build:linux
         env:
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Upload macOS build
+      - name: Upload Linux build
         uses: actions/upload-artifact@v4
         with:
-          name: macos-installer
-          path: release/**/*.dmg
+          name: linux-installer
+          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}",
+                  verified: "github.com/${REPO}/"
+            end
+            on_intel do
+              sha256 "${X64_SHA}"
+              url "https://github.com/${REPO}/releases/download/v#{version}/${X64_NAME}",
+                  verified: "github.com/${REPO}/"
+            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
@@ -23,5 +26,20 @@ dist-ssr
 *.sln
 *.sw?
 release/**
+*.kiro/
+.claude/
+# npx electron-builder --mac --win
 
-# 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

@@ -1,70 +1,120 @@
-<p align="center">
-	<img src="openscreen.png" alt="OpenScreen Logo" width="64" />
-</p>
-
-
-# <p align="center">OpenScreen</p>
-
-<p align="center"><strong>OpenScreen is your free, open-source alternative to Screen Studio (sort of).</strong></p>
-
-
-If you don't want to pay $29/month for Screen Studio but want a much simpler version that does what most people seem to need, making beautiful product demos and walkthroughs, here's a free-to-use app for you. OpenScreen does not offer all Screen Studio features, but covers the basics well!
-
-Screen Studio is an awesome product and this is definitely not a 1:1 clone. OpenScreen is a much simpler take, just the basics for folks who want control and don't want to pay. If you need all the fancy features, your best bet is to support Screen Studio (they really do a great job, haha). But if you just want something free (no gotchas) and open, this project does the job!
-
-OpenScreen is 100% free for personal and commercial use. Use it, modify it, distribute it. (Just be cool 😁 and give a shoutout if you feel like it !)
-
-
-
-**⚠️ DISCLAIMER: This is very much in beta and might be buggy here and there (but hope you have a good experience!).**
-
-</p>
-<p align="center">
-	<img src="preview.png" alt="OpenScreen App Preview" style="height: 320px; margin-right: 12px;" />
-	<img src="preview2.png" alt="OpenScreen App Preview 2" style="height: 320px; margin-right: 12px;" />
-	<img src="preview3.png" alt="OpenScreen App Preview 3" style="height: 320px; margin-right: 12px;" />
-	<img src="preview4.png" alt="OpenScreen App Preview 4" style="height: 320px; margin-right: 12px;" />
-	
-</p>
-</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
-
-## macOS Installation instructions
-
-Download the latest installer for your platform from the [GitHub Releases](https://github.com/siddharthvaddem/openscreen/releases) page.
-
-If you encounter issues with macOS Gatekeeper blocking the app (since it does not come with a developer certificate), you can bypass this by running the following command in your terminal after installation:
-
-```bash
-xattr -rd com.apple.quarantine /Applications/Openscreen.app
-```
-
-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.
-
-## Built with
-- Electron
-- React
-- TypeScript
-- Vite
-- PixiJS
-- dnd-timeline
-
----
-
-
-_I'm new to open source, idk what I'm doing lol. If something is wrong please raise an issue 🙏_
-
-## 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.
+> [!WARNING]
+> This is very much in beta and might be buggy here and there (but hope you have a good experience!).
+
+<p align="center">
+  <img src="public/openscreen.png" alt="OpenScreen Logo" width="64" />
+  <br />
+  <br />
+	<a href="https://trendshift.io/repositories/17427" target="_blank"><img src="https://trendshift.io/api/badge/repositories/17427" alt="siddharthvaddem%2Fopenscreen | Trendshift" style="width: 250px; height: 55px;" width="250" height="55"/></a>
+	<br />
+	<br />
+  <a href="https://deepwiki.com/siddharthvaddem/openscreen">
+    <img src="https://deepwiki.com/badge.svg" alt="Ask DeepWiki" />
+  </a>
+  &nbsp;
+  <a href="https://discord.gg/yAQQhRaEeg">
+    <img src="https://dcbadge.limes.pink/api/server/https://discord.gg/yAQQhRaEeg?style=flat" alt="Join Discord" />
+  </a>
+</p>
+
+# <p align="center">OpenScreen</p>
+
+<p align="center"><strong>OpenScreen is your free, open-source alternative to Screen Studio (sort of).</strong></p>
+
+If you don't want to pay $29/month for Screen Studio but want a much simpler version that does what most people seem to need, making beautiful product demos and walkthroughs, here's a free-to-use app for you. OpenScreen does not offer all Screen Studio features, but covers the basics well!
+
+Screen Studio is an awesome product and this is definitely not a 1:1 clone. OpenScreen is a much simpler take, just the basics for folks who want control and don't want to pay. If you need all the fancy features, your best bet is to support Screen Studio (they really do a great job, haha). But if you just want something free (no gotchas) and open, this project does the job!
+
+OpenScreen is 100% free for personal and commercial use. Use it, modify it, distribute it. (Just be cool 😁 and give a shoutout if you feel like it !)
+
+<p align="center">
+	<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 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
+
+Download the latest installer for your platform from the [GitHub Releases](https://github.com/siddharthvaddem/openscreen/releases) page.
+
+### macOS
+
+If you encounter issues with macOS Gatekeeper blocking the app (since it does not come with a developer certificate), you can bypass this by running the following command in your terminal after installation:
+
+```bash
+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
+
+Download the `.AppImage` file from the releases page. Make it executable and run:
+
+```bash
+chmod +x Openscreen-Linux-*.AppImage
+./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
+- TypeScript
+- Vite
+- PixiJS
+- dnd-timeline
+
+---
+
+_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,269 +0,0 @@
-import { ipcMain as n, screen as b, BrowserWindow as R, desktopCapturer as V, shell as O, app as d, dialog as S, nativeImage as W, Tray as k, Menu as L } from "electron";
-import { fileURLToPath as E } from "node:url";
-import o from "node:path";
-import P from "node:fs/promises";
-const _ = o.dirname(E(import.meta.url)), U = o.join(_, ".."), m = process.env.VITE_DEV_SERVER_URL, T = o.join(U, "dist");
-let f = null;
-n.on("hud-overlay-hide", () => {
-  f && !f.isDestroyed() && f.minimize();
-});
-function C() {
-  const r = b.getPrimaryDisplay(), { workArea: s } = r, c = 500, w = 100, y = Math.floor(s.x + (s.width - c) / 2), h = Math.floor(s.y + s.height - w - 5), e = new R({
-    width: c,
-    height: w,
-    minWidth: 500,
-    maxWidth: 500,
-    minHeight: 100,
-    maxHeight: 100,
-    x: y,
-    y: h,
-    frame: !1,
-    transparent: !0,
-    resizable: !1,
-    alwaysOnTop: !0,
-    skipTaskbar: !0,
-    hasShadow: !1,
-    webPreferences: {
-      preload: o.join(_, "preload.mjs"),
-      nodeIntegration: !1,
-      contextIsolation: !0,
-      backgroundThrottling: !1
-    }
-  });
-  return e.webContents.on("did-finish-load", () => {
-    e == null || e.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
-  }), f = e, e.on("closed", () => {
-    f === e && (f = null);
-  }), m ? e.loadURL(m + "?windowType=hud-overlay") : e.loadFile(o.join(T, "index.html"), {
-    query: { windowType: "hud-overlay" }
-  }), e;
-}
-function M() {
-  const r = new R({
-    width: 1200,
-    height: 800,
-    minWidth: 800,
-    minHeight: 600,
-    titleBarStyle: "hiddenInset",
-    trafficLightPosition: { x: 12, y: 12 },
-    transparent: !1,
-    resizable: !0,
-    alwaysOnTop: !1,
-    skipTaskbar: !1,
-    title: "OpenScreen",
-    backgroundColor: "#000000",
-    webPreferences: {
-      preload: o.join(_, "preload.mjs"),
-      nodeIntegration: !1,
-      contextIsolation: !0,
-      webSecurity: !1,
-      backgroundThrottling: !1
-    }
-  });
-  return r.maximize(), r.webContents.on("did-finish-load", () => {
-    r == null || r.webContents.send("main-process-message", (/* @__PURE__ */ new Date()).toLocaleString());
-  }), m ? r.loadURL(m + "?windowType=editor") : r.loadFile(o.join(T, "index.html"), {
-    query: { windowType: "editor" }
-  }), r;
-}
-function A() {
-  const { width: r, height: s } = b.getPrimaryDisplay().workAreaSize, c = new R({
-    width: 620,
-    height: 420,
-    minHeight: 350,
-    maxHeight: 500,
-    x: Math.round((r - 620) / 2),
-    y: Math.round((s - 420) / 2),
-    frame: !1,
-    resizable: !1,
-    alwaysOnTop: !0,
-    transparent: !0,
-    backgroundColor: "#00000000",
-    webPreferences: {
-      preload: o.join(_, "preload.mjs"),
-      nodeIntegration: !1,
-      contextIsolation: !0
-    }
-  });
-  return m ? c.loadURL(m + "?windowType=source-selector") : c.loadFile(o.join(T, "index.html"), {
-    query: { windowType: "source-selector" }
-  }), c;
-}
-let v = null;
-function H(r, s, c, w, y) {
-  n.handle("get-sources", async (e, a) => (await V.getSources(a)).map((t) => ({
-    id: t.id,
-    name: t.name,
-    display_id: t.display_id,
-    thumbnail: t.thumbnail ? t.thumbnail.toDataURL() : null,
-    appIcon: t.appIcon ? t.appIcon.toDataURL() : null
-  }))), n.handle("select-source", (e, a) => {
-    v = a;
-    const i = w();
-    return i && i.close(), v;
-  }), n.handle("get-selected-source", () => v), n.handle("open-source-selector", () => {
-    const e = w();
-    if (e) {
-      e.focus();
-      return;
-    }
-    s();
-  }), n.handle("switch-to-editor", () => {
-    const e = c();
-    e && e.close(), r();
-  }), n.handle("store-recorded-video", async (e, a, i) => {
-    try {
-      const t = o.join(p, i);
-      return await P.writeFile(t, Buffer.from(a)), h = t, {
-        success: !0,
-        path: t,
-        message: "Video stored successfully"
-      };
-    } catch (t) {
-      return console.error("Failed to store video:", t), {
-        success: !1,
-        message: "Failed to store video",
-        error: String(t)
-      };
-    }
-  }), n.handle("get-recorded-video-path", async () => {
-    try {
-      const a = (await P.readdir(p)).filter((j) => j.endsWith(".webm"));
-      if (a.length === 0)
-        return { success: !1, message: "No recorded video found" };
-      const i = a.sort().reverse()[0];
-      return { success: !0, path: o.join(p, i) };
-    } catch (e) {
-      return console.error("Failed to get video path:", e), { success: !1, message: "Failed to get video path", error: String(e) };
-    }
-  }), n.handle("set-recording-state", (e, a) => {
-    y && y(a, (v || { name: "Screen" }).name);
-  }), n.handle("open-external-url", async (e, a) => {
-    try {
-      return await O.openExternal(a), { success: !0 };
-    } catch (i) {
-      return console.error("Failed to open URL:", i), { success: !1, error: String(i) };
-    }
-  }), n.handle("get-asset-base-path", () => {
-    try {
-      return d.isPackaged ? o.join(process.resourcesPath, "assets") : o.join(d.getAppPath(), "public", "assets");
-    } catch (e) {
-      return console.error("Failed to resolve asset base path:", e), null;
-    }
-  }), n.handle("save-exported-video", async (e, a, i) => {
-    try {
-      const t = await S.showSaveDialog({
-        title: "Save Exported Video",
-        defaultPath: o.join(d.getPath("downloads"), i),
-        filters: [
-          { name: "MP4 Video", extensions: ["mp4"] }
-        ],
-        properties: ["createDirectory", "showOverwriteConfirmation"]
-      });
-      return t.canceled || !t.filePath ? {
-        success: !1,
-        cancelled: !0,
-        message: "Export cancelled"
-      } : (await P.writeFile(t.filePath, Buffer.from(a)), {
-        success: !0,
-        path: t.filePath,
-        message: "Video exported successfully"
-      });
-    } catch (t) {
-      return console.error("Failed to save exported video:", t), {
-        success: !1,
-        message: "Failed to save exported video",
-        error: String(t)
-      };
-    }
-  }), n.handle("open-video-file-picker", async () => {
-    try {
-      const e = await S.showOpenDialog({
-        title: "Select Video File",
-        defaultPath: p,
-        filters: [
-          { name: "Video Files", extensions: ["webm", "mp4", "mov", "avi", "mkv"] },
-          { name: "All Files", extensions: ["*"] }
-        ],
-        properties: ["openFile"]
-      });
-      return e.canceled || e.filePaths.length === 0 ? { success: !1, cancelled: !0 } : {
-        success: !0,
-        path: e.filePaths[0]
-      };
-    } catch (e) {
-      return console.error("Failed to open file picker:", e), {
-        success: !1,
-        message: "Failed to open file picker",
-        error: String(e)
-      };
-    }
-  });
-  let h = null;
-  n.handle("set-current-video-path", (e, a) => (h = a, { success: !0 })), n.handle("get-current-video-path", () => h ? { success: !0, path: h } : { success: !1 }), n.handle("clear-current-video-path", () => (h = null, { success: !0 })), n.handle("get-platform", () => process.platform);
-}
-const z = o.dirname(E(import.meta.url)), p = o.join(d.getPath("userData"), "recordings");
-async function N() {
-  try {
-    await P.mkdir(p, { recursive: !0 }), console.log("RECORDINGS_DIR:", p), console.log("User Data Path:", d.getPath("userData"));
-  } catch (r) {
-    console.error("Failed to create recordings directory:", r);
-  }
-}
-process.env.APP_ROOT = o.join(z, "..");
-const B = process.env.VITE_DEV_SERVER_URL, Y = o.join(process.env.APP_ROOT, "dist-electron"), D = o.join(process.env.APP_ROOT, "dist");
-process.env.VITE_PUBLIC = B ? o.join(process.env.APP_ROOT, "public") : D;
-let l = null, g = null, u = null, x = "";
-function I() {
-  l = C();
-}
-function q() {
-  const r = o.join(process.env.VITE_PUBLIC || D, "rec-button.png");
-  let s = W.createFromPath(r);
-  s = s.resize({ width: 24, height: 24, quality: "best" }), u = new k(s), F();
-}
-function F() {
-  if (!u) return;
-  const r = [
-    {
-      label: "Stop Recording",
-      click: () => {
-        l && !l.isDestroyed() && l.webContents.send("stop-recording-from-tray");
-      }
-    }
-  ], s = L.buildFromTemplate(r);
-  u.setContextMenu(s), u.setToolTip(`Recording: ${x}`);
-}
-function $() {
-  l && (l.close(), l = null), l = M();
-}
-function G() {
-  return g = A(), g.on("closed", () => {
-    g = null;
-  }), g;
-}
-d.on("window-all-closed", () => {
-});
-d.on("activate", () => {
-  R.getAllWindows().length === 0 && I();
-});
-d.whenReady().then(async () => {
-  const { ipcMain: r } = await import("electron");
-  r.on("hud-overlay-close", () => {
-    process.platform === "darwin" && d.quit();
-  }), await N(), H(
-    $,
-    G,
-    () => l,
-    () => g,
-    (s, c) => {
-      x = c, s ? (u || q(), F()) : (u && (u.destroy(), u = null), l && l.restore());
-    }
-  ), I();
-});
-export {
-  Y as MAIN_DIST,
-  p as RECORDINGS_DIR,
-  D as RENDERER_DIST,
-  B as VITE_DEV_SERVER_URL
-};

dist-electron/preload.mjs

@@ -1 +0,0 @@
-"use strict";const e=require("electron");e.contextBridge.exposeInMainWorld("electronAPI",{hudOverlayHide:()=>{e.ipcRenderer.send("hud-overlay-hide")},hudOverlayClose:()=>{e.ipcRenderer.send("hud-overlay-close")},getAssetBasePath:async()=>await e.ipcRenderer.invoke("get-asset-base-path"),getSources:async r=>await e.ipcRenderer.invoke("get-sources",r),switchToEditor:()=>e.ipcRenderer.invoke("switch-to-editor"),openSourceSelector:()=>e.ipcRenderer.invoke("open-source-selector"),selectSource:r=>e.ipcRenderer.invoke("select-source",r),getSelectedSource:()=>e.ipcRenderer.invoke("get-selected-source"),storeRecordedVideo:(r,t)=>e.ipcRenderer.invoke("store-recorded-video",r,t),getRecordedVideoPath:()=>e.ipcRenderer.invoke("get-recorded-video-path"),setRecordingState:r=>e.ipcRenderer.invoke("set-recording-state",r),onStopRecordingFromTray:r=>{const t=()=>r();return e.ipcRenderer.on("stop-recording-from-tray",t),()=>e.ipcRenderer.removeListener("stop-recording-from-tray",t)},openExternalUrl:r=>e.ipcRenderer.invoke("open-external-url",r),saveExportedVideo:(r,t)=>e.ipcRenderer.invoke("save-exported-video",r,t),openVideoFilePicker:()=>e.ipcRenderer.invoke("open-video-file-picker"),setCurrentVideoPath:r=>e.ipcRenderer.invoke("set-current-video-path",r),getCurrentVideoPath:()=>e.ipcRenderer.invoke("get-current-video-path"),clearCurrentVideoPath:()=>e.ipcRenderer.invoke("clear-current-video-path"),getPlatform:()=>e.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,10 +3,15 @@
   "$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,
-  "compression": "maximum",
+  "compression": "normal",
   "directories": {
     "output": "release/${version}"
   },
@@ -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,18 +46,33 @@
       }
     ],
     "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"
     ],
-    "artifactName": "${productName}-Linux-${version}.${ext}"
+    "icon": "icons/icons/png",
+    "artifactName": "${productName}-Linux-${version}.${ext}",
+    "category": "AudioVideo"
   },
   "win": {
     "target": [
       "nsis"
     ],
     "icon": "icons/icons/win/icon.ico"
+  },
+  "nsis": {
+    "oneClick": false,
+    "allowToChangeInstallationDirectory": true
   }
 }

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,112 +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", 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() {
-  const iconPath = path.join(process.env.VITE_PUBLIC || RENDERER_DIST, 'rec-button.png');
-  let icon = nativeImage.createFromPath(iconPath);
-  icon = icon.resize({ width: 24, height: 24, quality: 'best' });
-  tray = new Tray(icon);
-  updateTrayMenu();
+	tray = new Tray(defaultTrayIcon);
+	tray.on("click", () => {
+		showMainWindow();
+	});
+	tray.on("double-click", () => {
+		showMainWindow();
+	});
 }
 
-function updateTrayMenu() {
-  if (!tray) return;
-  const menuTemplate = [
-    {
-      label: 'Stop Recording',
-      click: () => {
-        if (mainWindow && !mainWindow.isDestroyed()) {
-          mainWindow.webContents.send('stop-recording-from-tray');
-        }
-      }
-    }
-  ];
-  const contextMenu = Menu.buildFromTemplate(menuTemplate);
-  tray.setContextMenu(contextMenu);
-  tray.setToolTip(`Recording: ${selectedSourceName}`);
+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
+		? 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', () => {
-      if (process.platform === 'darwin') {
-        app.quit();
-      }
-    });
-  // 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 (recording) {
-        if (!tray) createTray();
-        updateTrayMenu();
-      } else {
-        if (tray) {
-          tray.destroy();
-          tray = null;
-        }
-        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,151 +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 win = new BrowserWindow({
-    width: 1200,
-    height: 800,
-    minWidth: 800,
-    minHeight: 600,
-    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 isMac = process.platform === "darwin";
 
-  // Maximize the window by default
-  win.maximize();
+	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,
+		},
+	});
 
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', (new Date).toLocaleString())
-  })
+	// Maximize the window by default
+	win.maximize();
 
-  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' } 
-    })
-  }
+	win.webContents.on("did-finish-load", () => {
+		win?.webContents.send("main-process-message", new Date().toLocaleString());
+	});
 
-  return win
+	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;
 }
 
+/**
+ * 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,74 +1,114 @@
 {
-  "name": "openscreen",
-  "private": true,
-  "version": "1.0.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"
-  },
-  "dependencies": {
-    "@fix-webm-duration/fix": "^1.0.1",
-    "@pixi/filter-drop-shadow": "^5.2.0",
-    "@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",
-    "@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",
-    "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/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": "^30.0.1",
-    "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",
-    "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"
-  },
-  "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: {},
+	},
+};

public/electron-vite.animate.svg

@@ -1,34 +0,0 @@
-<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M63.9202 127.84C99.2223 127.84 127.84 99.2223 127.84 63.9202C127.84 28.6181 99.2223 0 63.9202 0C28.6181 0 0 28.6181 0 63.9202C0 99.2223 28.6181 127.84 63.9202 127.84Z" fill="url(#paint0_linear_103_2)"/>
-<g id="not-lightning" clip-path="url(#clip0_103_2)">
-<animateTransform
-  attributeName="transform"
-  attributeType="XML"
-  type="rotate"
-  from="0 64 64"
-  to="360 64 64"
-  dur="20s"
-  repeatCount="indefinite"/>
-<path d="M51.3954 39.5028C52.3733 39.6812 53.3108 39.033 53.4892 38.055C53.6676 37.0771 53.0194 36.1396 52.0414 35.9612L51.3954 39.5028ZM28.9393 60.9358C29.4332 61.7985 30.5329 62.0976 31.3957 61.6037C32.2585 61.1098 32.5575 60.0101 32.0636 59.1473L28.9393 60.9358ZM37.6935 66.7457C37.025 66.01 35.8866 65.9554 35.1508 66.6239C34.415 67.2924 34.3605 68.4308 35.029 69.1666L37.6935 66.7457ZM96.9206 89.515C97.7416 88.9544 97.9526 87.8344 97.3919 87.0135C96.8313 86.1925 95.7113 85.9815 94.8904 86.5422L96.9206 89.515ZM52.0414 35.9612C46.4712 34.9451 41.2848 34.8966 36.9738 35.9376C32.6548 36.9806 29.0841 39.1576 27.0559 42.6762L30.1748 44.4741C31.5693 42.0549 34.1448 40.3243 37.8188 39.4371C41.5009 38.5479 46.1547 38.5468 51.3954 39.5028L52.0414 35.9612ZM27.0559 42.6762C24.043 47.9029 25.2781 54.5399 28.9393 60.9358L32.0636 59.1473C28.6579 53.1977 28.1088 48.0581 30.1748 44.4741L27.0559 42.6762ZM35.029 69.1666C39.6385 74.24 45.7158 79.1355 52.8478 83.2597L54.6499 80.1432C47.8081 76.1868 42.0298 71.5185 37.6935 66.7457L35.029 69.1666ZM52.8478 83.2597C61.344 88.1726 70.0465 91.2445 77.7351 92.3608C85.359 93.4677 92.2744 92.6881 96.9206 89.515L94.8904 86.5422C91.3255 88.9767 85.4902 89.849 78.2524 88.7982C71.0793 87.7567 62.809 84.8612 54.6499 80.1432L52.8478 83.2597ZM105.359 84.9077C105.359 81.4337 102.546 78.6127 99.071 78.6127V82.2127C100.553 82.2127 101.759 83.4166 101.759 84.9077H105.359ZM99.071 78.6127C95.5956 78.6127 92.7831 81.4337 92.7831 84.9077H96.3831C96.3831 83.4166 97.5892 82.2127 99.071 82.2127V78.6127ZM92.7831 84.9077C92.7831 88.3817 95.5956 91.2027 99.071 91.2027V87.6027C97.5892 87.6027 96.3831 86.3988 96.3831 84.9077H92.7831ZM99.071 91.2027C102.546 91.2027 105.359 88.3817 105.359 84.9077H101.759C101.759 86.3988 100.553 87.6027 99.071 87.6027V91.2027Z" fill="#A2ECFB"/>
-<path d="M91.4873 65.382C90.8456 66.1412 90.9409 67.2769 91.7002 67.9186C92.4594 68.5603 93.5951 68.465 94.2368 67.7058L91.4873 65.382ZM84.507 35.2412C83.513 35.2282 82.6967 36.0236 82.6838 37.0176C82.6708 38.0116 83.4661 38.8279 84.4602 38.8409L84.507 35.2412ZM74.9407 39.8801C75.9127 39.6716 76.5315 38.7145 76.323 37.7425C76.1144 36.7706 75.1573 36.1517 74.1854 36.3603L74.9407 39.8801ZM25.5491 80.9047C25.6932 81.8883 26.6074 82.5688 27.5911 82.4247C28.5747 82.2806 29.2552 81.3664 29.1111 80.3828L25.5491 80.9047ZM94.2368 67.7058C97.8838 63.3907 100.505 58.927 101.752 54.678C103.001 50.4213 102.9 46.2472 100.876 42.7365L97.7574 44.5344C99.1494 46.9491 99.3603 50.0419 98.2974 53.6644C97.2323 57.2945 94.9184 61.3223 91.4873 65.382L94.2368 67.7058ZM100.876 42.7365C97.9119 37.5938 91.7082 35.335 84.507 35.2412L84.4602 38.8409C91.1328 38.9278 95.7262 41.0106 97.7574 44.5344L100.876 42.7365ZM74.1854 36.3603C67.4362 37.8086 60.0878 40.648 52.8826 44.8146L54.6847 47.931C61.5972 43.9338 68.5948 41.2419 74.9407 39.8801L74.1854 36.3603ZM52.8826 44.8146C44.1366 49.872 36.9669 56.0954 32.1491 62.3927C27.3774 68.63 24.7148 75.2115 25.5491 80.9047L29.1111 80.3828C28.4839 76.1026 30.4747 70.5062 35.0084 64.5802C39.496 58.7143 46.2839 52.7889 54.6847 47.931L52.8826 44.8146Z" fill="#A2ECFB"/>
-<path d="M49.0825 87.2295C48.7478 86.2934 47.7176 85.8059 46.7816 86.1406C45.8455 86.4753 45.358 87.5055 45.6927 88.4416L49.0825 87.2295ZM78.5635 96.4256C79.075 95.5732 78.7988 94.4675 77.9464 93.9559C77.0941 93.4443 75.9884 93.7205 75.4768 94.5729L78.5635 96.4256ZM79.5703 85.1795C79.2738 86.1284 79.8027 87.1379 80.7516 87.4344C81.7004 87.7308 82.71 87.2019 83.0064 86.2531L79.5703 85.1795ZM69.156 22.5301C68.2477 22.1261 67.1838 22.535 66.7799 23.4433C66.3759 24.3517 66.7848 25.4155 67.6931 25.8194L69.156 22.5301ZM45.6927 88.4416C47.5994 93.7741 50.1496 98.2905 53.2032 101.505C56.2623 104.724 59.9279 106.731 63.9835 106.731V103.131C61.1984 103.131 58.4165 101.765 55.8131 99.0249C53.2042 96.279 50.8768 92.2477 49.0825 87.2295L45.6927 88.4416ZM63.9835 106.731C69.8694 106.731 74.8921 102.542 78.5635 96.4256L75.4768 94.5729C72.0781 100.235 68.0122 103.131 63.9835 103.131V106.731ZM83.0064 86.2531C85.0269 79.7864 86.1832 72.1831 86.1832 64.0673H82.5832C82.5832 71.8536 81.4723 79.0919 79.5703 85.1795L83.0064 86.2531ZM86.1832 64.0673C86.1832 54.1144 84.4439 44.922 81.4961 37.6502C78.5748 30.4436 74.3436 24.8371 69.156 22.5301L67.6931 25.8194C71.6364 27.5731 75.3846 32.1564 78.1598 39.0026C80.9086 45.7836 82.5832 54.507 82.5832 64.0673H86.1832Z" fill="#A2ECFB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103.559 84.9077C103.559 82.4252 101.55 80.4127 99.071 80.4127C96.5924 80.4127 94.5831 82.4252 94.5831 84.9077C94.5831 87.3902 96.5924 89.4027 99.071 89.4027C101.55 89.4027 103.559 87.3902 103.559 84.9077Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.8143 89.4027C31.2929 89.4027 33.3023 87.3902 33.3023 84.9077C33.3023 82.4252 31.2929 80.4127 28.8143 80.4127C26.3357 80.4127 24.3264 82.4252 24.3264 84.9077C24.3264 87.3902 26.3357 89.4027 28.8143 89.4027Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path d="M63.9835 27.6986C66.4621 27.6986 68.4714 25.6861 68.4714 23.2036C68.4714 20.7211 66.4621 18.7086 63.9835 18.7086C61.5049 18.7086 59.4956 20.7211 59.4956 23.2036C59.4956 25.6861 61.5049 27.6986 63.9835 27.6986Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-</g>
-<path d="M70.7175 48.0096L56.3133 50.676C56.0766 50.7199 55.9013 50.9094 55.887 51.1369L55.001 65.2742C54.9801 65.6072 55.3038 65.8656 55.6478 65.7907L59.6582 64.9163C60.0334 64.8346 60.3724 65.1468 60.2953 65.5033L59.1038 71.0151C59.0237 71.386 59.3923 71.7032 59.7758 71.5932L62.2528 70.8822C62.6368 70.7721 63.0057 71.0902 62.9245 71.4615L61.031 80.1193C60.9126 80.6608 61.6751 80.9561 61.9931 80.4918L62.2055 80.1817L73.9428 58.053C74.1393 57.6825 73.8004 57.26 73.3696 57.3385L69.2417 58.0912C68.8538 58.1618 68.5237 57.8206 68.6332 57.462L71.3274 48.6385C71.437 48.2794 71.1058 47.9378 70.7175 48.0096Z" fill="url(#paint1_linear_103_2)"/>
-<defs>
-<linearGradient id="paint0_linear_103_2" x1="1.43824" y1="7.91009" x2="56.3296" y2="82.4569" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear_103_2" x1="60.3173" y1="48.7336" x2="64.237" y2="77.1962" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-<clipPath id="clip0_103_2">
-<rect width="128" height="128" fill="white"/>
-</clipPath>
-</defs>
-</svg>

public/electron-vite.svg

@@ -1,26 +0,0 @@
-<svg width="128" height="128" viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_103_2)">
-<path d="M63.9202 127.84C99.2223 127.84 127.84 99.2223 127.84 63.9202C127.84 28.6181 99.2223 0 63.9202 0C28.6181 0 0 28.6181 0 63.9202C0 99.2223 28.6181 127.84 63.9202 127.84Z" fill="url(#paint0_linear_103_2)"/>
-<path d="M51.3954 39.5028C52.3733 39.6812 53.3108 39.033 53.4892 38.055C53.6676 37.0771 53.0194 36.1396 52.0414 35.9612L51.3954 39.5028ZM28.9393 60.9358C29.4332 61.7985 30.5329 62.0976 31.3957 61.6037C32.2585 61.1098 32.5575 60.0101 32.0636 59.1473L28.9393 60.9358ZM37.6935 66.7457C37.025 66.01 35.8866 65.9554 35.1508 66.6239C34.415 67.2924 34.3605 68.4308 35.029 69.1666L37.6935 66.7457ZM96.9206 89.515C97.7416 88.9544 97.9526 87.8344 97.3919 87.0135C96.8313 86.1925 95.7113 85.9815 94.8904 86.5422L96.9206 89.515ZM52.0414 35.9612C46.4712 34.9451 41.2848 34.8966 36.9738 35.9376C32.6548 36.9806 29.0841 39.1576 27.0559 42.6762L30.1748 44.4741C31.5693 42.0549 34.1448 40.3243 37.8188 39.4371C41.5009 38.5479 46.1547 38.5468 51.3954 39.5028L52.0414 35.9612ZM27.0559 42.6762C24.043 47.9029 25.2781 54.5399 28.9393 60.9358L32.0636 59.1473C28.6579 53.1977 28.1088 48.0581 30.1748 44.4741L27.0559 42.6762ZM35.029 69.1666C39.6385 74.24 45.7158 79.1355 52.8478 83.2597L54.6499 80.1432C47.8081 76.1868 42.0298 71.5185 37.6935 66.7457L35.029 69.1666ZM52.8478 83.2597C61.344 88.1726 70.0465 91.2445 77.7351 92.3608C85.359 93.4677 92.2744 92.6881 96.9206 89.515L94.8904 86.5422C91.3255 88.9767 85.4902 89.849 78.2524 88.7982C71.0793 87.7567 62.809 84.8612 54.6499 80.1432L52.8478 83.2597ZM105.359 84.9077C105.359 81.4337 102.546 78.6127 99.071 78.6127V82.2127C100.553 82.2127 101.759 83.4166 101.759 84.9077H105.359ZM99.071 78.6127C95.5956 78.6127 92.7831 81.4337 92.7831 84.9077H96.3831C96.3831 83.4166 97.5892 82.2127 99.071 82.2127V78.6127ZM92.7831 84.9077C92.7831 88.3817 95.5956 91.2027 99.071 91.2027V87.6027C97.5892 87.6027 96.3831 86.3988 96.3831 84.9077H92.7831ZM99.071 91.2027C102.546 91.2027 105.359 88.3817 105.359 84.9077H101.759C101.759 86.3988 100.553 87.6027 99.071 87.6027V91.2027Z" fill="#A2ECFB"/>
-<path d="M91.4873 65.382C90.8456 66.1412 90.9409 67.2769 91.7002 67.9186C92.4594 68.5603 93.5951 68.465 94.2368 67.7058L91.4873 65.382ZM84.507 35.2412C83.513 35.2282 82.6967 36.0236 82.6838 37.0176C82.6708 38.0116 83.4661 38.8279 84.4602 38.8409L84.507 35.2412ZM74.9407 39.8801C75.9127 39.6716 76.5315 38.7145 76.323 37.7425C76.1144 36.7706 75.1573 36.1517 74.1854 36.3603L74.9407 39.8801ZM25.5491 80.9047C25.6932 81.8883 26.6074 82.5688 27.5911 82.4247C28.5747 82.2806 29.2552 81.3664 29.1111 80.3828L25.5491 80.9047ZM94.2368 67.7058C97.8838 63.3907 100.505 58.927 101.752 54.678C103.001 50.4213 102.9 46.2472 100.876 42.7365L97.7574 44.5344C99.1494 46.9491 99.3603 50.0419 98.2974 53.6644C97.2323 57.2945 94.9184 61.3223 91.4873 65.382L94.2368 67.7058ZM100.876 42.7365C97.9119 37.5938 91.7082 35.335 84.507 35.2412L84.4602 38.8409C91.1328 38.9278 95.7262 41.0106 97.7574 44.5344L100.876 42.7365ZM74.1854 36.3603C67.4362 37.8086 60.0878 40.648 52.8826 44.8146L54.6847 47.931C61.5972 43.9338 68.5948 41.2419 74.9407 39.8801L74.1854 36.3603ZM52.8826 44.8146C44.1366 49.872 36.9669 56.0954 32.1491 62.3927C27.3774 68.63 24.7148 75.2115 25.5491 80.9047L29.1111 80.3828C28.4839 76.1026 30.4747 70.5062 35.0084 64.5802C39.496 58.7143 46.2839 52.7889 54.6847 47.931L52.8826 44.8146Z" fill="#A2ECFB"/>
-<path d="M49.0825 87.2295C48.7478 86.2934 47.7176 85.8059 46.7816 86.1406C45.8455 86.4753 45.358 87.5055 45.6927 88.4416L49.0825 87.2295ZM78.5635 96.4256C79.075 95.5732 78.7988 94.4675 77.9464 93.9559C77.0941 93.4443 75.9884 93.7205 75.4768 94.5729L78.5635 96.4256ZM79.5703 85.1795C79.2738 86.1284 79.8027 87.1379 80.7516 87.4344C81.7004 87.7308 82.71 87.2019 83.0064 86.2531L79.5703 85.1795ZM69.156 22.5301C68.2477 22.1261 67.1838 22.535 66.7799 23.4433C66.3759 24.3517 66.7848 25.4155 67.6931 25.8194L69.156 22.5301ZM45.6927 88.4416C47.5994 93.7741 50.1496 98.2905 53.2032 101.505C56.2623 104.724 59.9279 106.731 63.9835 106.731V103.131C61.1984 103.131 58.4165 101.765 55.8131 99.0249C53.2042 96.279 50.8768 92.2477 49.0825 87.2295L45.6927 88.4416ZM63.9835 106.731C69.8694 106.731 74.8921 102.542 78.5635 96.4256L75.4768 94.5729C72.0781 100.235 68.0122 103.131 63.9835 103.131V106.731ZM83.0064 86.2531C85.0269 79.7864 86.1832 72.1831 86.1832 64.0673H82.5832C82.5832 71.8536 81.4723 79.0919 79.5703 85.1795L83.0064 86.2531ZM86.1832 64.0673C86.1832 54.1144 84.4439 44.922 81.4961 37.6502C78.5748 30.4436 74.3436 24.8371 69.156 22.5301L67.6931 25.8194C71.6364 27.5731 75.3846 32.1564 78.1598 39.0026C80.9086 45.7836 82.5832 54.507 82.5832 64.0673H86.1832Z" fill="#A2ECFB"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M103.559 84.9077C103.559 82.4252 101.55 80.4127 99.071 80.4127C96.5924 80.4127 94.5831 82.4252 94.5831 84.9077C94.5831 87.3902 96.5924 89.4027 99.071 89.4027C101.55 89.4027 103.559 87.3902 103.559 84.9077Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M28.8143 89.4027C31.2929 89.4027 33.3023 87.3902 33.3023 84.9077C33.3023 82.4252 31.2929 80.4127 28.8143 80.4127C26.3357 80.4127 24.3264 82.4252 24.3264 84.9077C24.3264 87.3902 26.3357 89.4027 28.8143 89.4027Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path d="M63.9835 27.6986C66.4621 27.6986 68.4714 25.6861 68.4714 23.2036C68.4714 20.7211 66.4621 18.7086 63.9835 18.7086C61.5049 18.7086 59.4956 20.7211 59.4956 23.2036C59.4956 25.6861 61.5049 27.6986 63.9835 27.6986Z" stroke="#A2ECFB" stroke-width="3.6" stroke-linecap="round"/>
-<path d="M70.7175 48.0096L56.3133 50.676C56.0766 50.7199 55.9013 50.9094 55.887 51.1369L55.001 65.2742C54.9801 65.6072 55.3038 65.8656 55.6478 65.7907L59.6582 64.9163C60.0334 64.8346 60.3724 65.1468 60.2953 65.5033L59.1038 71.0151C59.0237 71.386 59.3923 71.7032 59.7758 71.5932L62.2528 70.8822C62.6368 70.7721 63.0057 71.0902 62.9245 71.4615L61.031 80.1193C60.9126 80.6608 61.6751 80.9561 61.9931 80.4918L62.2055 80.1817L73.9428 58.053C74.1393 57.6825 73.8004 57.26 73.3696 57.3385L69.2417 58.0912C68.8538 58.1618 68.5237 57.8206 68.6332 57.462L71.3274 48.6385C71.437 48.2794 71.1058 47.9378 70.7175 48.0096Z" fill="url(#paint1_linear_103_2)"/>
-</g>
-<defs>
-<linearGradient id="paint0_linear_103_2" x1="1.43824" y1="7.91009" x2="56.3296" y2="82.4569" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear_103_2" x1="60.3173" y1="48.7336" x2="64.237" y2="77.1962" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-<clipPath id="clip0_103_2">
-<rect width="128" height="128" fill="white"/>
-</clipPath>
-</defs>
-</svg>

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,189 +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 {
+	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 truncateText = (text: string, maxLength: number = 6) => {
-    if (text.length <= maxLength) return text;
-    return text.substring(0, maxLength) + "...";
-  };
+	const {
+		devices: micDevices,
+		selectedDeviceId: selectedMicId,
+		setSelectedDeviceId: setSelectedMicId,
+	} = useMicrophoneDevices(microphoneEnabled);
+	const {
+		devices: cameraDevices,
+		selectedDeviceId: selectedCameraId,
+		setSelectedDeviceId: setSelectedCameraId,
+		isLoading: isCameraDevicesLoading,
+		error: cameraDevicesError,
+	} = useCameraDevices(webcamEnabled);
 
-  const openSourceSelector = () => {
-    if (window.electronAPI) {
-      window.electronAPI.openSourceSelector();
-    }
-  };
+	const selectedMicLabel =
+		micDevices.find((d) => d.deviceId === (microphoneDeviceId || selectedMicId))?.label ||
+		t("audio.defaultMicrophone");
+	const selectedCameraLabel = isCameraDevicesLoading
+		? t("webcam.searching")
+		: cameraDevicesError
+			? t("webcam.unavailable")
+			: cameraDevices.length === 0
+				? t("webcam.noneFound")
+				: cameraDevices.find((d) => d.deviceId === (webcamDeviceId || selectedCameraId))?.label ||
+					t("webcam.defaultCamera");
 
-  const 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 { level } = useAudioLevelMeter({
+		enabled: showMicControls,
+		deviceId: microphoneDeviceId,
+	});
 
-  // 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();
-    }
-  };
+	useEffect(() => {
+		if (selectedMicId && selectedMicId !== "default") {
+			setMicrophoneDeviceId(selectedMicId);
+		}
+	}, [selectedMicId, setMicrophoneDeviceId]);
 
-  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 (selectedCameraId) {
+			setWebcamDeviceId(selectedCameraId);
+		}
+	}, [selectedCameraId, setWebcamDeviceId]);
 
-        <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" />
-          {truncateText(selectedSource, 6)}
-        </Button>
+	useEffect(() => {
+		if (!import.meta.env.DEV) {
+			return;
+		}
 
-        <div className="w-px h-6 bg-white/30" />
+		void requestCameraAccess().catch((error) => {
+			console.warn("Failed to trigger camera access request during development:", error);
+		});
+	}, []);
 
-        <Button
-          variant="link"
-          size="sm"
-          onClick={hasSelectedSource ? toggleRecording : openSourceSelector}
-          disabled={!hasSelectedSource && !recording}
-          className={`gap-1 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>
-        
+	useEffect(() => {
+		if (!isLanguageMenuOpen) return;
 
-        <div className="w-px h-6 bg-white/30" />
+		const handlePointerDown = (event: PointerEvent) => {
+			const target = event.target as Node;
+			const clickedTrigger = languageTriggerRef.current?.contains(target);
+			const clickedMenu = languageMenuPanelRef.current?.contains(target);
+			if (!clickedTrigger && !clickedMenu) {
+				setIsLanguageMenuOpen(false);
+			}
+		};
 
+		const handleEscape = (event: KeyboardEvent) => {
+			if (event.key === "Escape") {
+				setIsLanguageMenuOpen(false);
+			}
+		};
 
-        <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>
+		window.addEventListener("pointerdown", handlePointerDown);
+		window.addEventListener("keydown", handleEscape);
 
-         {/* 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>
+		return () => {
+			window.removeEventListener("pointerdown", handlePointerDown);
+			window.removeEventListener("keydown", handleEscape);
+		};
+	}, [isLanguageMenuOpen]);
 
-        <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>
-  );
+	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-60 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

@@ -0,0 +1,55 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+	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";
+
+const AccordionTrigger = React.forwardRef<
+	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;
+
+const AccordionContent = React.forwardRef<
+	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;
+
+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

@@ -0,0 +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 };

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,48 +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,
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
-  return (
-    <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground 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 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  )
+	className,
+	align = "center",
+	sideOffset = 4,
+	animated = true,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+	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>
+	);
 }
 
-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} />;
 }
 
-export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
+function PopoverArrow({
+	className,
+	...props
+}: React.ComponentProps<typeof PopoverPrimitive.Arrow>) {
+	return (
+		<PopoverPrimitive.Arrow
+			data-slot="popover-arrow"
+			className={cn("fill-popover", className)}
+			{...props}
+		/>
+	);
+}
+
+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,149 +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;
+	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,
+	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);
 
-  useEffect(() => {
-    if (!isExporting && progress && progress.percentage >= 100 && !error) {
-      setShowSuccess(true);
-      const timer = setTimeout(() => {
-        setShowSuccess(false);
-        onClose();
-      }, 2000);
-      return () => clearTimeout(timer);
-    }
-  }, [isExporting, progress, error, onClose]);
+	// Reset showSuccess when a new export starts or dialog reopens
+	useEffect(() => {
+		if (isExporting) {
+			setShowSuccess(false);
+		}
+	}, [isExporting]);
 
-  if (!isOpen) return null;
+	// Reset showSuccess when dialog opens fresh
+	useEffect(() => {
+		if (isOpen && !isExporting && !progress) {
+			setShowSuccess(false);
+		}
+	}, [isOpen, isExporting, progress]);
 
-  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-8">
-          <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 video 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">
-                    {error ? 'Export Failed' : isExporting ? 'Exporting Video' : 'Export Video'}
-                  </span>
-                  <span className="text-sm text-slate-400">
-                    {error ? 'Please try again' : isExporting ? 'This may take a moment...' : 'Ready to start'}
-                  </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>
+	useEffect(() => {
+		if (!isExporting && progress && progress.percentage >= 100 && !error) {
+			setShowSuccess(true);
+			const timer = setTimeout(() => {
+				setShowSuccess(false);
+				onClose();
+			}, 2000);
+			return () => clearTimeout(timer);
+		}
+	}, [isExporting, progress, error, onClose]);
 
-        {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>
-        )}
+	if (!isOpen) return null;
 
-        {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>Progress</span>
-                <span className="font-mono text-slate-200">{progress.percentage.toFixed(0)}%</span>
-              </div>
-              <div className="h-2 bg-white/5 rounded-full overflow-hidden border border-white/5">
-                <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>
+	const formatLabel = exportFormat === "gif" ? "GIF" : "Video";
 
-            <div className="grid grid-cols-1 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">Status</div>
-                <div className="text-slate-200 font-medium text-sm flex items-center gap-2 h-[28px]">
-                  <span className="w-2 h-2 rounded-full bg-[#34B27B] animate-pulse" />
-                  Processing
-                </div>
-              </div>
-            </div>
+	// 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;
 
-            {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>
-        )}
+	// 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");
+	};
 
-        {showSuccess && (
-          <div className="text-center py-4 animate-in zoom-in-95">
-            <p className="text-lg text-slate-200 font-medium">Video saved successfully!</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 });
+	};
+
+	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 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"
+								>
+									{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">
+							{t("export.savedSuccessfully", { format: formatLabel })}
+						</p>
+					</div>
+				)}
+			</div>
+		</>
+	);
 }

src/components/video-editor/FormatSelector.tsx

@@ -0,0 +1,69 @@
+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;
+}
+
+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,
+}: FormatSelectorProps) {
+	const t = useScopedT("settings");
+
+	const formatLabels: Record<ExportFormat, { label: string; description: string }> = {
+		mp4: { label: t("exportFormat.mp4Video"), description: t("exportFormat.mp4Description") },
+		gif: { label: t("exportFormat.gifAnimation"), description: t("exportFormat.gifDescription") },
+	};
+
+	return (
+		<div className="grid grid-cols-2 gap-3">
+			{formatOptions.map((option) => {
+				const isSelected = selectedFormat === option.value;
+				const labels = formatLabels[option.value];
+				return (
+					<button
+						key={option.value}
+						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

@@ -0,0 +1,111 @@
+import {
+	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;
+}
+
+export function GifOptionsPanel({
+	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,
+	}));
+
+	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>
+
+			{/* 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

@@ -0,0 +1,133 @@
+import { ArrowRight, HelpCircle, Scissors } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { useScopedT } from "@/contexts/I18nContext";
+
+export function TutorialHelp() {
+	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");
+	});
+});