feat: add interactive export frame preview

[saurabhhhcodes]

Description

Fixes #391

Adds a live export-frame preview so the editor shows the selected output aspect ratio before export instead of only drawing crop guide bars over a 16:9 player. Fill mode now supports horizontal and vertical crop-position sliders, and those values are passed into the FFmpeg crop expression so preview and export stay aligned.

Also fixes the local Vitest harness so the existing at-sign import alias and localStorage-dependent tests run reliably.

Type of Change

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• Manual smoke: started the app locally on http://localhost:3017 and generated a 2-second MP4 sample for visual follow-up testing
• npm exec vitest -- run src/lib/tests/videoFilter.test.ts -- 17 passed
• npm test -- --run -- 78 passed
• npx tsc --noEmit --pretty false
• npx next lint -- no warnings/errors
• npm run build
• git diff --check

Checklist:

• My code follows the Coding Guidelines.
• I have performed a self-review of my own code.
• I have NOT added useless AI-generated comments.
• I have NOT deleted existing unrelated comments.
• I have NOT modified files unrelated to this task.
• My changes generate no new warnings in lint/build.
• I have linked the issue I am working on.

Screenshots (if applicable)

No static screenshot attached yet; the local app is running and ready for visual proof if requested.

[vercel]

Someone is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @saurabhhhcodes!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @saurabhhhcodes

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[saurabhhhcodes]

Validation update: local checks are green on commit 66e34fc.

Passing locally:

• npm exec vitest -- run src/lib/tests/videoFilter.test.ts: 17 passed
• npm test -- --run: 78 passed
• npx tsc --noEmit --pretty false
• npx next lint: no warnings/errors
• npm run build
• git diff --check

The only red GitHub status I can see is Vercel authorization required for the maintainer project. Also, this PR closes assigned issue #391, which has gssoc:approved plus feature/design labels; please mirror the GSSoC scoring label if accepted.