docs: add ripple editing to 0.2.0 changelog

This implements the foundational architecture for video effects, starting with a multi-pass WebGL rendering pipeline and a customizable Gaussian Blur effect.

Key changes:
- WebGL Engine: Added `raw-loader` for `.glsl` shaders, multi-pass framebuffer rendering, and live offscreen canvas previews.
- Node Architecture: Replaced hardcoded background blur with `CompositeEffectNode` and added `EffectLayerNode` to apply effects to specific visual elements.
- Timeline & DND: Added a new `effect` track type. Upgraded drag-and-drop to support dropping effects directly onto the timeline. Consolidated track constants into a cleaner `TRACK_CONFIG`.
- UI/UX: Added an Effects tab in the assets panel with live previews. Added an Effect Properties panel with sliders and inputs for fine-tuning parameters.
- Data Model: Added `sourceDuration` to video and audio elements, and wrote a v8 storage migration to update existing projects to the new schema.
- Docs: Added `CHANGELOG.md` tracking v0.1.0 and v0.2.0, plus `docs/effects-renderer.md` to document the new WebGL pipeline.

.cursor/commands/review.md

@@ -0,0 +1,164 @@
+# Code Review Checklist
+
+Review every point below carefully to ensure files follow consistent code style and best practices.
+
+---
+
+## Function Signatures & Parameters
+
+- [ ] Every function accepts a single object parameter with destructuring in the signature (for readability and future extensibility)
+  - Exception: tiny one-liner callbacks (e.g. `array.find(x => ...)`, `map`, `filter`, `sort`) do not need destructuring if it hurts readability
+
+  ```tsx
+  // ❌ wrong
+  function formatTime(seconds: number, fps: number) { ... }
+
+  // ✅ correct
+  function formatTime({ seconds, fps }: { seconds: number; fps: number }) { ... }
+  ```
+
+## TypeScript & Type Safety
+
+- [ ] No `any` references
+- [ ] General interfaces are in the `types` folder, not scattered in components
+  - Example: `TimelineTrack` interface belongs in `src/types/timeline.ts`, not `src/components/timeline/index.tsx`
+
+## JSX & Components
+
+- [ ] JSX is clean — no comments explaining what each part does
+- [ ] Complex/reusable JSX is extracted into sub-components (placed below the main component)
+- [ ] Components shared across multiple files are in separate files
+- [ ] File order: constants specific to file (top) -> utils specific to file -> main component → sub-components (bottom)
+- [ ] Components render UI only — domain logic lives in hooks, utilities, or managers
+  - Simple interaction logic (gestures, modifier keys) can stay if not complex
+
+## Code Organization & File Structure
+
+- [ ] Each file has one single purpose/responsibility
+  - Example: `timeline/index.tsx` should not define `validateElementTrackCompatibility` — that belongs in a lib file
+  - Example: `lib/timeline-utils.ts` should not declare `TRACK_COLORS` — that belongs in `constants/`
+- [ ] File name accurately reflects what the file contains — a misleading name is a bug waiting to happen
+- [ ] Business logic lives in either `src/lib`, `src/core` or `src/services` folder
+
+## Comments
+
+- [ ] No AI comments — only human comments that explain _why_, not _what_
+  - Bad: changelog-style comments, explaining readable code, using more words than necessary
+- [ ] All comments are lowercase
+
+## Naming Conventions
+
+- [ ] Readability over brevity — use `element` not `el`, `event` not `e`
+- [ ] Booleans are named `isSomething`, `hasSomething`, or `shouldSomething` — not `something`
+- [ ] No title case for multi-word text/UI — use `Hello world` not `Hello World`
+
+## Tailwind & Styling
+
+- [ ] Use `gap-*` instead of `mb-*` or `mt-*` for consistent spacing
+- [ ] Use `size-*` instead of `h-* w-*` when width and height are the same
+- [ ] When using `size-*` on icons inside `<Button>`, use `!` modifier to override default `size-4`
+  ```tsx
+  <Button>
+    <PlusIcon className="!size-6" /> {/* ✅ correct */}
+    <PlusIcon className="size-6" /> {/* ❌ wrong */}
+    <PlusIcon className="!size-4" /> {/* ❌ unnecessary, size-4 is default */}
+    <PlusIcon className="size-4" />{" "}
+    {/* ❌ completely wrong, 1) doesn't override and 2) size-4 is default */}
+  </Button>
+  ```
+
+## State Management (Zustand)
+
+- [ ] React components never use `someStore.getState()` — use the `useSomeStore` hook instead
+- [ ] High-frequency stores (timeline, playback, selections) use selectors — `useStore((s) => s.value)` not `const { value } = useStore()`
+- [ ] Store/manager methods are not passed as props — sub-components access them directly
+
+  ```tsx
+  // ❌ wrong
+  function Parent() {
+    const { selectedElements } = useTimelineStore();
+    return <Child selectedElements={selectedElements} />;
+  }
+
+  // ✅ correct
+  function Parent() {
+    return <Child />;
+  }
+  function Child() {
+    const { selectedElements } = useTimelineStore();
+  }
+  ```
+
+- [ ] Components and hooks should use the `useEditor` hook. Only use `EditorCore.getInstance()` if you are outside of a react component/hook. Eg: in a utility function, event handler.
+
+## Code Quality
+
+- [ ] Code is scannable — use variables and helper functions to make intent clear at a glance
+- [ ] Complex logic is extracted into well-named variables or helpers
+- [ ] No magic numbers or magic values — extract inline literals into named constants
+  - Applies to colors, durations, thresholds, sizes, config values, etc.
+  - If it's domain-specific to one file, a `const` at the top of that file is fine
+  - If it's generic enough, it belongs in `constants/`
+
+- [ ] No redundant single/plural function variants — if a function can operate on multiple items, it should accept an array and handle both cases. Don't create `doThing()` + `doThings()`.
+
+  ```tsx
+  // ❌ wrong — redundant variants
+  function updateElement({ element }: { element: Element }) { ... }
+  function updateElements({ elements }: { elements: Element[] }) { ... }
+
+  // ✅ correct — one function, accepts array
+  function updateElements({ elements }: { elements: Element[] }) { ... }
+  ```
+
+---
+
+## Function Keywords
+
+| Context                           | Keyword                   |
+| --------------------------------- | ------------------------- |
+| Next.js page components           | `export default function` |
+| Main react component              | `export function`         |
+| Sub-components                    | `function`                |
+| Utility functions                 | `export function`         |
+| Functions inside react components | `const`                   |
+
+---
+
+## Review Methodology
+
+Do NOT review by reading the file top-to-bottom and noting what jumps out. Instead:
+
+1. Go through each checklist section **one at a time**
+2. For each section, scan the **entire file** for violations of that specific rule
+3. Only move to the next section after you've exhausted the current one
+4. After all sections are checked, do a final pass: re-read every checklist item and confirm you didn't skip it
+
+Before outputting the review, list each checklist section and confirm you checked it:
+`Signatures ✓ | TypeScript ✓ | JSX ✓ | Organization ✓ | File Names ✓ | Comments ✓ | Naming ✓ | Tailwind ✓ | State ✓ | Quality ✓ | Keywords ✓`
+
+---
+
+## IMPORTANT: Review Rules
+
+- **ONLY** flag issues that are explicitly covered by a checklist item above.
+- Do **NOT** invent your own rules, suggestions, or "nice to haves" as primary issues.
+- The review output must be a list of issues, each one mapping to a specific checklist item.
+- If something looks off but isn't covered by the checklist, you can mention it as a brief side note at the end — but keep it clearly separate from the actual review. Always default to fixing the issues covered by the checklist above, unless the user says otherwise.
+
+> You WILL miss things if you try to review the whole file in one pass. Iterate rule by rule.
+
+---
+
+## Think Bigger
+
+After the checklist review, step back and ask the hard questions. The biggest architectural problems get solved by the biggest questions.
+
+- Does this abstraction actually need to exist? Could it be deleted entirely?
+- Is this the right layer for this logic? (wrong layer = future pain)
+- Is this solving a real problem, or a problem we invented?
+- Would a simpler data model make this whole file unnecessary?
+- Are we adding complexity to work around a bad decision made earlier?
+- Could this field be derived from other existing fields? Redundant data in a model is a source of bugs.
+
+Don't be shy about flagging these. A "why does this exist?" question is often worth more than 10 style fixes.

.cursor/rules/comments.mdc

@@ -0,0 +1,35 @@
+---
+alwaysApply: true
+---
+
+# Comment Guidelines
+
+## Good Comments (Human-style)
+- Explain WHY, not WHAT
+- Document non-obvious behavior or edge cases
+- Warn about performance implications or side effects
+- Explain business logic that isn't clear from code
+
+Examples:
+```javascript
+// transfer, not copy; sender buffer detaches
+// satisfies: check shape; keep literals  
+// keep multibyte across chunks
+// timingSafeEqual throws on length mismatch
+```
+
+## Bad Comments (AI-style)
+- Don't explain what the code literally does
+- Don't add changelog-style comments in code
+- Don't comment every line or obvious operations
+
+Avoid:
+```javascript
+// Prevent duplicate initialization
+// Check if project is already loaded  
+// Mark as initializing to prevent race conditions
+// (changed from blah to blah)
+```
+
+## Rule
+Only add comments when there's genuinely non-obvious behavior, performance considerations, or business logic that needs context. Code should be self-documenting through naming and structure.

.cursor/rules/handling-uncertainty.mdc

@@ -0,0 +1,21 @@
+---
+alwaysApply: true
+---
+
+# Handling Uncertainty
+
+## Principle
+If you can't confidently respond due to missing context, data access, or ambiguity (multiple interpretations), report it instead of guessing. Seek clarification to avoid errors.
+
+Apply when: query lacks details, no access to info/tools, or unclear intent.
+
+## How to Report
+1. **Description**: Why uncertain and what you need.
+2. **Questions**: 1-3 targeted ones.
+3. **Assumptions** (opt.): State if proceeding; omit otherwise.
+
+Direct and concise.
+
+**Assumptions**: None.
+
+Builds transparency.

.cursor/rules/readability.mdc

@@ -0,0 +1,9 @@
+---
+alwaysApply: true
+---
+
+# Readability First
+
+Optimize code for AI agents to understand and modify.
+
+Never abbreviate. `event` not `e`, `element` not `el`. If it's easy to read, it's correct. In this case, "config" is better than "configuration" because it's shorter and is **still very readable**. "El" is not very readable.

.cursor/rules/separation-of-concerns.mdc

@@ -0,0 +1,52 @@
+---
+alwaysApply: true
+---
+
+# Separation of Concerns
+
+## Core Principle
+
+Each file should have one single purpose/responsibility. Related functionality should be grouped together, unrelated functionality should be separated.
+
+## Good Separation
+
+- One file per major concern (auth, validation, data transformation)
+- Group related utilities together
+- Extract shared logic into dedicated files
+- Keep API routes focused on their specific endpoint logic
+
+Examples:
+
+```javascript
+// ✅ Good: Each file has clear responsibility
+/lib/rate-limit.ts          // Rate limiting utilities
+/lib/validation.ts          // Input validation schemas
+/lib/freesound-api.ts       // External API integration
+/api/sounds/search/route.ts // Route handler only
+```
+
+## Bad Mixing of Concerns
+
+Avoid cramming multiple responsibilities into one file:
+
+```javascript
+// ❌ Bad: Route file doing everything
+/api/sounds/search/route.ts
+- Rate limiting logic
+- Validation schemas
+- API transformation
+- External API calls
+- Response formatting
+- Error handling utilities
+```
+
+## When to Separate
+
+- File is getting long (>500 lines)
+- Multiple distinct responsibilities in one file
+- Logic could be reused elsewhere
+- Complex utilities that distract from main purpose
+
+## Rule
+
+One file, one responsibility. Extract shared concerns into focused utility files

.cursor/rules/ultracite.mdc

@@ -0,0 +1,104 @@
+---
+description: Ultracite Rules - AI-Ready Formatter and Linter
+globs: "**/*.{ts,tsx,js,jsx}"
+alwaysApply: true
+---
+
+# Project Context
+
+Ultracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's formatter.
+
+## Key Principles
+
+- Zero configuration required
+- Subsecond performance
+- Maximum type safety
+- AI-friendly code generation
+
+## Before Writing Code
+
+1. Analyze existing patterns in the codebase
+2. Consider edge cases and error scenarios
+3. Follow the rules below strictly
+4. Validate accessibility requirements
+5. Avoid code duplication
+
+## Rules
+
+### Accessibility (a11y)
+
+- Always include a `title` element for icons unless there's text beside the icon.
+- Accompany `onClick` with at least one of: `onKeyUp`, `onKeyDown`, or `onKeyPress`.
+- Accompany `onMouseOver`/`onMouseOut` with `onFocus`/`onBlur`.
+
+### Code Complexity and Quality
+
+- Don't use primitive type aliases or misleading types.
+- Don't use the comma operator.
+- Use for...of statements instead of Array.forEach.
+- Don't initialize variables to undefined.
+- Use .flatMap() instead of map().flat() when possible.
+
+### React and JSX Best Practices
+
+- Don't import `React` itself.
+- Don't use both `children` and `dangerouslySetInnerHTML` props on the same element.
+- Don't insert comments as text nodes.
+- Use `<>...</>` instead of `<Fragment>...</Fragment>`.
+
+### Function Parameters and Props
+
+- Always use destructured props objects instead of individual parameters in functions.
+- Example: `function helloWorld({ prop }: { prop: string })` instead of `function helloWorld(param: string)`.
+- This applies to all functions, not just React components.
+
+### Correctness and Safety
+
+- Don't assign a value to itself.
+- Avoid unused imports and variables.
+- Don't use await inside loops.
+- Don't hardcode sensitive data like API keys and tokens.
+- Don't use the TypeScript directive @ts-ignore.
+- Make sure the `preconnect` attribute is used when using Google Fonts.
+- Don't use the `delete` operator.
+- Don't use `require()` in TypeScript/ES modules - use proper `import` statements.
+
+### TypeScript Best Practices
+
+- Don't use TypeScript enums.
+- Use either `T[]` or `Array<T>` consistently.
+- Don't use the `any` type.
+
+### Style and Consistency
+
+- Don't use global `eval()`.
+- Use `String.slice()` instead of `String.substr()` and `String.substring()`.
+- Don't use `else` blocks when the `if` block breaks early.
+- Put default function parameters and optional function parameters last.
+- Use `new` when throwing an error.
+- Use `String.trimStart()` and `String.trimEnd()` over `String.trimLeft()` and `String.trimRight()`.
+
+### Next.js Specific Rules
+
+- Don't use `<img>` elements in Next.js projects.
+- Don't use `<head>` elements in Next.js projects.
+
+## Example: Error Handling
+
+```typescript
+// ✅ Good: Comprehensive error handling
+try {
+  const result = await fetchData();
+  return { success: true, data: result };
+} catch (error) {
+  console.error("API call failed:", error);
+  return { success: false, error: error.message };
+}
+
+// ❌ Bad: Swallowing errors
+try {
+  return await fetchData();
+} catch (e) {
+  console.log(e);
+}
+```

.cursor/rules/writing-scannable-code.mdc

@@ -0,0 +1,53 @@
+---
+alwaysApply: true
+---
+
+# Scannable Code Guidelines/Separating Concerns.
+
+## Core Principle
+
+Code should be scannable through proper abstraction, not comments. Use variables and helper functions to make intent clear at a glance.
+
+## Good Scannable Code
+
+- Extract complex logic into well-named variables
+- Create helper functions for multi-step operations
+- Use descriptive names that explain intent
+
+Examples:
+
+```javascript
+// ✅ Scannable: Intent is clear from variable names
+const isValidUser = user.isActive && user.hasPermissions;
+const shouldProcessPayment = amount > 0 && !order.isPaid;
+
+// ✅ Scannable: Complex logic extracted to helper
+const searchParams = buildFreesoundSearchParams({ query, filters, pagination });
+const transformedResults = transformFreesoundResults({ rawResults });
+```
+
+## Bad Unscannable Code
+
+Avoid:
+
+```javascript
+// ❌ Hard to scan: What does this condition mean?
+if (type === "effects" || !type) {
+  params.append("filter", "duration:[* TO 30.0]");
+  params.append("filter", `avg_rating:[${min_rating} TO *]`);
+  if (commercial_only) {
+    params.append("filter", 'license:("Attribution" OR "Creative Commons 0")');
+  }
+}
+
+// ❌ Hard to scan: Complex ternary
+const sortParam = query
+  ? sort === "score"
+    ? "score"
+    : `${sort}_desc`
+  : `${sort}_desc`;
+```
+
+## Rule
+
+Make code scannable by extracting intent into variables and helper functions. If you need to think about what code does, extract it. The reader should understand the flow without diving into implementation details.

.cursor/settings.json

@@ -0,0 +1,7 @@
+{
+	"plugins": {
+		"figma": {
+			"enabled": true
+		}
+	}
+}

.cursor/skills/design/SKILL.md

@@ -0,0 +1,45 @@
+---
+name: frontend-design
+description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
+license: Complete terms in LICENSE.txt
+---
+
+This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.
+
+The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.
+
+## Design Thinking
+
+Before coding, understand the context and commit to a BOLD aesthetic direction:
+
+- **Purpose**: What problem does this interface solve? Who uses it?
+- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
+- **Constraints**: Technical requirements (framework, performance, accessibility).
+- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?
+
+**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.
+
+Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
+
+- Production-grade and functional
+- Visually striking and memorable
+- Cohesive with a clear aesthetic point-of-view
+- Meticulously refined in every detail
+
+## Frontend Aesthetics Guidelines
+
+Focus on:
+
+- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
+- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
+- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
+- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
+- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.
+
+NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.
+
+Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.
+
+**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.
+
+Remember: Claude is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

.cursorignore

@@ -1 +0,0 @@
-!apps/web/.env.example

.dockerignore

@@ -0,0 +1,15 @@
+node_modules
+.next
+.git
+.gitignore
+*.md
+.env*
+!.env.example
+.cursor
+.vscode
+diffs
+docs
+agent-transcripts
+mcps
+terminals
+apps/web/.font-cache

.github/CODE_OF_CONDUCT.md

@@ -17,23 +17,23 @@ diverse, inclusive, and healthy community.
 Examples of behavior that contributes to a positive environment for our
 community include:
 
-* Demonstrating empathy and kindness toward other people
-* Being respectful of differing opinions, viewpoints, and experiences
-* Giving and gracefully accepting constructive feedback
-* Accepting responsibility and apologizing to those affected by our mistakes,
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes,
   and learning from the experience
-* Focusing on what is best not just for us as individuals, but for the overall
+- Focusing on what is best not just for us as individuals, but for the overall
   community
 
 Examples of unacceptable behavior include:
 
-* The use of sexualized language or imagery, and sexual attention or advances of
+- The use of sexualized language or imagery, and sexual attention or advances of
   any kind
-* Trolling, insulting or derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or email address,
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address,
   without their explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
+- Other conduct which could reasonably be considered inappropriate in a
   professional setting
 
 ## Enforcement Responsibilities
@@ -59,8 +59,7 @@ representative at an online or offline event.
 ## Enforcement
 
 Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported to the community leaders responsible for enforcement at
-[INSERT CONTACT METHOD].
+reported to the community leaders responsible for enforcement at our discord server.
 All complaints will be reviewed and investigated promptly and fairly.
 
 All community leaders are obligated to respect the privacy and security of the
@@ -87,4 +86,4 @@ version 2.1, available at
 [https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].
 
 [homepage]: https://www.contributor-covenant.org
-[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html

.github/CONTRIBUTING.md

@@ -1,5 +1,15 @@
 # Contributing to OpenCut
 
+⚠️ We are currently NOT accepting feature PRs while we build out the core editor.
+
+If you want to contribute:
+
+1. Open an issue first to discuss
+2. Wait for maintainer approval
+3. Only then start coding
+
+Critical bug fixes may be accepted on a case-by-case basis.
+
 Thank you for your interest in contributing to OpenCut! This document provides guidelines and instructions for contributing.
 
 ## Getting Started
@@ -98,11 +108,11 @@ If you're unsure whether your idea falls into the preview category, feel free to
 
    ```bash
    # Database (matches docker-compose.yaml)
-   DATABASE_URL="postgresql://opencut:opencutthegoat@localhost:5432/opencut"
+   DATABASE_URL="postgresql://opencut:opencut@localhost:5432/opencut"
 
    # Generate a secure secret for Better Auth
    BETTER_AUTH_SECRET="your-generated-secret-here"
-   NEXT_PUBLIC_BETTER_AUTH_URL="http://localhost:3000"
+   NEXT_PUBLIC_SITE_URL="http://localhost:3000"
 
    # Redis (matches docker-compose.yaml)
    UPSTASH_REDIS_REST_URL="http://localhost:8079"

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,6 +1,6 @@
 name: Bug report
 description: Create a report to help us improve
-title: '[BUG] '
+title: "[BUG] "
 labels: bug
 body:
   - type: input
@@ -15,7 +15,7 @@ body:
     id: Browser
     attributes:
       label: Browser
-      description:  Please enter the browser on which you encountered the bug.
+      description: Please enter the browser on which you encountered the bug.
       placeholder: e.g. Chrome 137, Firefox 137, Safari 17
     validations:
       required: true
@@ -67,4 +67,4 @@ body:
 
         Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
     validations:
-      required: false
+      required: false

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -1,6 +1,6 @@
 name: Feature request
 description: Suggest an idea for OpenCut
-title: '[FEATURE] '
+title: "[FEATURE] "
 labels: enhancement
 body:
   - type: markdown
@@ -39,4 +39,4 @@ body:
 
         Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
     validations:
-      required: false
+      required: false

.github/SECURITY.md

@@ -25,4 +25,4 @@ Please do not report security vulnerabilities through public GitHub issues.
 - We will provide a detailed response within 5 business days
 - We will keep you updated on our progress
 
-Thank you for helping keep OpenCut secure! 
+Thank you for helping keep OpenCut secure!

.github/SUPPORT.md

@@ -3,21 +3,25 @@
 Thanks for using OpenCut! If you need help, here are your options:
 
 ## Documentation
+
 - Check our [README](../README.md) for basic setup instructions
 - Review the [Contributing Guidelines](CONTRIBUTING.md) for development setup
 
 ## Issues
+
 - **Bug reports**: Use the bug report template
 - **Feature requests**: Use the feature request template
 - **Questions**: Use GitHub Discussions for general questions
 
 ## Community
+
 - Join our discussions on GitHub
 - Follow the [Code of Conduct](CODE_OF_CONDUCT.md)
 
 ## Response Times
+
 - Issues are typically triaged within 2-3 business days
 - Feature requests may take longer to evaluate
 - Security issues are handled with priority
 
-We appreciate your patience and contributions to making OpenCut better! 
+We appreciate your patience and contributions to making OpenCut better!

.github/copilot-instructions.md

@@ -3,15 +3,18 @@ applyTo: "**/*.{ts,tsx,js,jsx}"
 ---
 
 # Project Context
+
 Ultracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's lightning-fast formatter and linter.
 
 ## Key Principles
+
 - Zero configuration required
 - Subsecond performance
 - Maximum type safety
 - AI-friendly code generation
 
 ## Before Writing Code
+
 1. Analyze existing patterns in the codebase
 2. Consider edge cases and error scenarios
 3. Follow the rules below strictly
@@ -20,6 +23,7 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 ## Rules
 
 ### Accessibility (a11y)
+
 - Don't use `accessKey` attribute on any HTML element.
 - Don't set `aria-hidden="true"` on focusable elements.
 - Don't add ARIA roles, states, and properties to elements that don't support them.
@@ -56,6 +60,7 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 - Use correct ISO language/country codes for the `lang` attribute.
 
 ### Code Complexity and Quality
+
 - Don't use consecutive spaces in regular expression literals.
 - Don't use the `arguments` object.
 - Don't use primitive type aliases or misleading types.
@@ -111,6 +116,7 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 - Don't use literal numbers that lose precision.
 
 ### React and JSX Best Practices
+
 - Don't use the return value of React.render.
 - Make sure all dependencies are correctly specified in React hooks.
 - Make sure all React hooks are called from the top level of component functions.
@@ -129,6 +135,7 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 - Watch out for possible "wrong" semicolons inside JSX elements.
 
 ### Correctness and Safety
+
 - Don't assign a value to itself.
 - Don't return a value from a setter.
 - Don't compare expressions that modify string case with non-compliant values.
@@ -153,7 +160,7 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 - Don't use bitwise operators.
 - Don't use expressions where the operation doesn't change the value.
 - Make sure Promise-like statements are handled appropriately.
-- Don't use __dirname and __filename in the global scope.
+- Don't use **dirname and **filename in the global scope.
 - Prevent import cycles.
 - Don't use configured elements.
 - Don't hardcode sensitive data like API keys and tokens.
@@ -184,6 +191,7 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 - Don't use `target="_blank"` without `rel="noopener"`.
 
 ### TypeScript Best Practices
+
 - Don't use TypeScript enums.
 - Don't export imported variables.
 - Don't add type annotations to variables, parameters, and class properties that are initialized with literal expressions.
@@ -208,6 +216,7 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 - Use the namespace keyword instead of the module keyword to declare TypeScript namespaces.
 
 ### Style and Consistency
+
 - Don't use global `eval()`.
 - Don't use callbacks in asynchronous tests and hooks.
 - Don't use negation in `if` statements that have `else` clauses.
@@ -295,30 +304,34 @@ Ultracite enforces strict type safety, accessibility standards, and consistent c
 - Make sure to use the "use strict" directive in script files.
 
 ### Next.js Specific Rules
+
 - Don't use `<img>` elements in Next.js projects.
 - Don't use `<head>` elements in Next.js projects.
-- Don't import next/document outside of pages/_document.jsx in Next.js projects.
-- Don't use the next/head module in pages/_document.js on Next.js projects.
+- Don't import next/document outside of pages/\_document.jsx in Next.js projects.
+- Don't use the next/head module in pages/\_document.js on Next.js projects.
 
 ### Testing Best Practices
+
 - Don't use export or module.exports in test files.
 - Don't use focused tests.
 - Make sure the assertion function, like expect, is placed inside an it() function call.
 - Don't use disabled tests.
 
 ## Common Tasks
+
 - `npx ultracite init` - Initialize Ultracite in your project
 - `npx ultracite format` - Format and fix code automatically
 - `npx ultracite lint` - Check for issues without fixing
 
 ## Example: Error Handling
+
 ```typescript
 // ✅ Good: Comprehensive error handling
 try {
   const result = await fetchData();
   return { success: true, data: result };
 } catch (error) {
-  console.error('API call failed:', error);
+  console.error("API call failed:", error);
   return { success: false, error: error.message };
 }
 
@@ -328,4 +341,4 @@ try {
 } catch (e) {
   console.log(e);
 }
-```
+```

.github/pull_request_template.md

@@ -1,49 +1,11 @@
-## Description
+⚠️ READ BEFORE SUBMITTING ⚠️
 
-Please include a summary of the changes and the related issue. Please also include relevant motivation and context.
+We are not currently accepting PRs except for critical bugs.
 
-Fixes # (issue)
+If this is a bug fix:
+- [ ] I've opened an issue first
+- [ ] This was approved by a maintainer
 
-## Type of change
+If this is a feature:
 
-Please delete options that are not relevant.
-
-- [ ] Bug fix (non-breaking change which fixes an issue)
-- [ ] New feature (non-breaking change which adds functionality)
-- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
-- [ ] This change requires a documentation update
-- [ ] Performance improvement
-- [ ] Code refactoring
-- [ ] Tests
-
-## How Has This Been Tested?
-
-Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration
-
-- [ ] Test A
-- [ ] Test B
-
-**Test Configuration**:
-* Node version:
-* Browser (if applicable):
-* Operating System:
-
-## Screenshots (if applicable)
-
-Add screenshots to help explain your changes.
-
-## Checklist:
-
-- [ ] My code follows the style guidelines of this project
-- [ ] I have performed a self-review of my code
-- [ ] I have added screenshots if ui has been changed
-- [ ] I have commented my code, particularly in hard-to-understand areas
-- [ ] I have made corresponding changes to the documentation
-- [ ] My changes generate no new warnings
-- [ ] I have added tests that prove my fix is effective or that my feature works
-- [ ] New and existing unit tests pass locally with my changes
-- [ ] Any dependent changes have been merged and published in downstream modules
-
-## Additional context
-
-Add any other context about the pull request here. 
+This PR will be closed. Please open an issue to discuss first.

.github/workflows/bun-ci.yml

@@ -22,12 +22,21 @@ jobs:
         os: [ubuntu-latest, windows-latest, macos-latest]
 
     env:
-      DATABASE_URL: "postgresql://opencut:opencutthegoat@localhost:5432/opencut"
+      DATABASE_URL: "postgresql://opencut:opencut@localhost:5432/opencut"
       BETTER_AUTH_SECRET: "supersecret"
-      NEXT_PUBLIC_BETTER_AUTH_URL: "http://localhost:3000"
+      NEXT_PUBLIC_SITE_URL: "http://localhost:3000"
       UPSTASH_REDIS_REST_URL: "https://your-upstash-redis-url"
       UPSTASH_REDIS_REST_TOKEN: "your-upstash-redis-token"
-
+      NEXT_PUBLIC_MARBLE_API_URL: "https://placeholder.example.com"
+      MARBLE_WORKSPACE_KEY: "placeholder"
+      FREESOUND_CLIENT_ID: "placeholder"
+      FREESOUND_API_KEY: "placeholder"
+      CLOUDFLARE_ACCOUNT_ID: "placeholder"
+      R2_ACCESS_KEY_ID: "placeholder"
+      R2_SECRET_ACCESS_KEY: "placeholder"
+      R2_BUCKET_NAME: "placeholder"
+      MODAL_TRANSCRIPTION_URL: "https://placeholder.example.com"
+    
     steps:
       - name: Checkout repository
         uses: actions/checkout@v4

.gitignore

@@ -1,22 +1,5 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
-# dependencies
-/apps/web/node_modules
-
-# next.js
-/apps/web/.next/
-/apps/web/out/
-
-# debug
-/apps/web/npm-debug.log*
-
-# env files (can opt-in for committing if needed)
-/apps/web/.env*
-!/apps/web/.env.example
-
-# typescript
-/apps/web/next-env.d.ts
-
 # asdf version management
 .tool-versions
 
@@ -24,9 +7,14 @@ node_modules
 .cursorignore
 .turbo
 
-*.env
+.env*
+!*.env.example
 
 # cursor
+bun.lockb
 
-.cursor/
-bun.lockb
+# content-collections
+.content-collections
+
+# Twiggy
+.cursor/rules/file-structure.mdc

.husky/commit-msg

@@ -1 +0,0 @@
-bunx commitlint --edit $1

.husky/pre-commit

@@ -1 +0,0 @@
-bunx ultracite format

.vscode/settings.json

@@ -0,0 +1,20 @@
+{
+	"editor.defaultFormatter": "esbenp.prettier-vscode",
+	"[javascript][typescript][javascriptreact][typescriptreact][json][jsonc][css][graphql]": {
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"editor.formatOnSave": true,
+	"editor.formatOnPaste": true,
+	"editor.codeActionsOnSave": {
+		"source.fixAll.biome": "explicit",
+		"source.organizeImports.biome": "explicit"
+	},
+	"emmet.showExpandedAbbreviation": "never",
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	},
+	"[typescript]": {
+		"editor.defaultFormatter": "biomejs.biome"
+	}
+}

AGENTS.md

@@ -0,0 +1,121 @@
+# AGENTS.md
+
+## Overview
+
+Privacy-first video editor, with a focus on simplicity and ease of use.
+
+## Lib vs Utils
+
+- `lib/` - domain logic (specific to this app)
+- `utils/` - small helper utils (generic, could be copy-pasted into any other app)
+
+## Core Editor System
+
+The editor uses a **singleton EditorCore** that manages all editor state through specialized managers.
+
+### Architecture
+
+```
+EditorCore (singleton)
+├── playback: PlaybackManager
+├── timeline: TimelineManager
+├── scene: SceneManager
+├── project: ProjectManager
+├── media: MediaManager
+└── renderer: RendererManager
+```
+
+### When to Use What
+
+#### In React Components
+
+**Always use the `useEditor()` hook:**
+
+```typescript
+import { useEditor } from '@/hooks/use-editor';
+
+function MyComponent() {
+  const editor = useEditor();
+  const tracks = editor.timeline.getTracks();
+
+  // Call methods
+  editor.timeline.addTrack({ type: 'media' });
+
+  // Display data (auto re-renders on changes)
+  return <div>{tracks.length} tracks</div>;
+}
+```
+
+The hook:
+
+- Returns the singleton instance
+- Subscribes to all manager changes
+- Automatically re-renders when state changes
+
+#### Outside React Components
+
+**Use `EditorCore.getInstance()` directly:**
+
+```typescript
+// In utilities, event handlers, or non-React code
+import { EditorCore } from "@/core";
+
+const editor = EditorCore.getInstance();
+await editor.export({ format: "mp4", quality: "high" });
+```
+
+## Actions System
+
+Actions are the trigger layer for user-initiated operations. The single source of truth is `@/lib/actions/definitions.ts`.
+
+**To add a new action:**
+
+1. Add it to `ACTIONS` in `@/lib/actions/definitions.ts`:
+
+```typescript
+export const ACTIONS = {
+  "my-action": {
+    description: "What the action does",
+    category: "editing",
+    defaultShortcuts: ["ctrl+m"],
+  },
+  // ...
+};
+```
+
+2. Add handler in `@/hooks/use-editor-actions.ts`:
+
+```typescript
+useActionHandler(
+  "my-action",
+  () => {
+    // implementation
+  },
+  undefined,
+);
+```
+
+**In components, use `invokeAction()` for user-triggered operations:**
+
+```typescript
+import { invokeAction } from '@/lib/actions';
+
+// Good - uses action system
+const handleSplit = () => invokeAction("split-selected");
+
+// Avoid - bypasses UX layer (toasts, validation feedback)
+const handleSplit = () => editor.timeline.splitElements({ ... });
+```
+
+Direct `editor.xxx()` calls are for internal use (commands, tests, complex multi-step operations).
+
+## Commands System
+
+Commands handle undo/redo. They live in `@/lib/commands/` organized by domain (timeline, media, scene).
+
+Each command extends `Command` from `@/lib/commands/base-command` and implements:
+
+- `execute()` - saves current state, then does the mutation
+- `undo()` - restores the saved state
+
+Actions and commands work together: actions are "what triggered this", commands are "how to do it (and undo it)".

README.md

@@ -1,19 +1,31 @@
 <table width="100%">
   <tr>
     <td align="left" width="120">
-      <img src="apps/web/public/logo.png" alt="OpenCut Logo" width="100" />
+      <img src="apps/web/public/logos/opencut/1k/logo-white-black.png" alt="OpenCut Logo" width="100" />
     </td>
     <td align="right">
-      <h1>OpenCut <span style="font-size: 0.7em; font-weight: normal;">(prev AppCut)</span></h1>
+      <h1>OpenCut</span></h1>
       <h3 style="margin-top: -10px;">A free, open-source video editor for web, desktop, and mobile.</h3>
     </td>
   </tr>
 </table>
 
+## Sponsors
+
+Thanks to [Vercel](https://vercel.com?utm_source=github-opencut&utm_campaign=oss) and [fal.ai](https://fal.ai?utm_source=github-opencut&utm_campaign=oss) for their support of open-source software.
+
+<a href="https://vercel.com/oss">
+  <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
+</a>
+
+<a href="https://fal.ai">
+  <img alt="Powered by fal.ai" src="https://img.shields.io/badge/Powered%20by-fal.ai-000000?style=flat&logo=data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEyIDJMMTMuMDkgOC4yNkwyMCAxMEwxMy4wOSAxNS43NEwxMiAyMkwxMC45MSAxNS43NEw0IDEwTDEwLjkxIDguMjZMMTIgMloiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=" />
+</a>
+
 ## Why?
 
 - **Privacy**: Your videos stay on your device
-- **Free features**: Every basic feature of CapCut is paywalled now
+- **Free features**: Most basic CapCut features are now paywalled 
 - **Simple**: People want editors that are easy to use - CapCut proved that
 
 ## Features
@@ -38,110 +50,52 @@
 
 ### Prerequisites
 
-Before you begin, ensure you have the following installed on your system:
-
-- [Node.js](https://nodejs.org/en/) (v18 or later)
 - [Bun](https://bun.sh/docs/installation)
-  (for `npm` alternative)
 - [Docker](https://docs.docker.com/get-docker/) and [Docker Compose](https://docs.docker.com/compose/install/)
 
-> **Note:** Docker is optional, but it's essential for running the local database and Redis services. If you're planning to run the frontend or want to contribute to frontend features, you can skip the Docker setup. If you have followed the steps below in [Setup](#setup), you're all set to go!
+> **Note:** Docker is optional but recommended for running the local database and Redis. If you only want to work on frontend features, you can skip it.
 
 ### Setup
 
-1. Fork the repository
-2. Clone your fork locally
-3. Navigate to the web app directory: `cd apps/web`
-4. Copy `.env.example` to `.env.local`:
+1. Fork and clone the repository
+
+2. Copy the environment file:
 
    ```bash
    # Unix/Linux/Mac
-   cp .env.example .env.local
-
-   # Windows Command Prompt
-   copy .env.example .env.local
+   cp apps/web/.env.example apps/web/.env.local
 
    # Windows PowerShell
-   Copy-Item .env.example .env.local
+   Copy-Item apps/web/.env.example apps/web/.env.local
    ```
 
-5. Install dependencies: `bun install`
-6. Start the development server: `bun dev`
-
-## Development Setup
-
-### Local Development
-
-1. Start the database and Redis services:
+3. Start the database and Redis:
 
    ```bash
-   # From project root
-   docker-compose up -d
+   docker compose up -d db redis serverless-redis-http
    ```
 
-2. Navigate to the web app directory:
+4. Install dependencies and start the dev server:
 
    ```bash
-   cd apps/web
+   bun install
+   bun dev:web
    ```
 
-3. Copy `.env.example` to `.env.local`:
-
-   ```bash
-   # Unix/Linux/Mac
-   cp .env.example .env.local
-
-   # Windows Command Prompt
-   copy .env.example .env.local
-
-   # Windows PowerShell
-   Copy-Item .env.example .env.local
-   ```
-
-4. Configure required environment variables in `.env.local`:
-
-   **Required Variables:**
-
-   ```bash
-   # Database (matches docker-compose.yaml)
-   DATABASE_URL="postgresql://opencut:opencutthegoat@localhost:5432/opencut"
-
-   # Generate a secure secret for Better Auth
-   BETTER_AUTH_SECRET="your-generated-secret-here"
-   BETTER_AUTH_URL="http://localhost:3000"
-
-   # Redis (matches docker-compose.yaml)
-   UPSTASH_REDIS_REST_URL="http://localhost:8079"
-   UPSTASH_REDIS_REST_TOKEN="example_token"
-
-   # Marble Blog
-   MARBLE_WORKSPACE_KEY=cm6ytuq9x0000i803v0isidst # example organization key
-   NEXT_PUBLIC_MARBLE_API_URL=https://api.marblecms.com
-
-   # Development
-   NODE_ENV="development"
-   ```
-
-   **Generate BETTER_AUTH_SECRET:**
-
-   ```bash
-   # Unix/Linux/Mac
-   openssl rand -base64 32
-
-   # Windows PowerShell (simple method)
-   [System.Web.Security.Membership]::GeneratePassword(32, 0)
-
-   # Cross-platform (using Node.js)
-   node -e "console.log(require('crypto').randomBytes(32).toString('base64'))"
-
-   # Or use an online generator: https://generate-secret.vercel.app/32
-   ```
-
-5. Run database migrations: `bun run db:migrate` from (inside apps/web)
-6. Start the development server: `bun run dev` from (inside apps/web)
-
 The application will be available at [http://localhost:3000](http://localhost:3000).
 
+The `.env.example` has sensible defaults that match the Docker Compose config — it should work out of the box.
+
+### Self-Hosting with Docker
+
+To run everything (including a production build of the app) in Docker:
+
+```bash
+docker compose up -d
+```
+
+The app will be available at [http://localhost:3100](http://localhost:3100).
+
 ## Contributing
 
 We welcome contributions! While we're actively developing and refactoring certain areas, there are plenty of opportunities to contribute effectively.
@@ -158,16 +112,6 @@ See our [Contributing Guide](.github/CONTRIBUTING.md) for detailed setup instruc
 - Follow the setup instructions in CONTRIBUTING.md
 - Create a feature branch and submit a PR
 
-## Sponsors
-
-Thanks to [Vercel](https://vercel.com?utm_source=github-opencut&utm_campaign=oss) for their support of open-source software.
-
-<a href="https://vercel.com/oss">
-  <img alt="Vercel OSS Program" src="https://vercel.com/oss/program-badge.svg" />
-</a>
-
-[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2FOpenCut-app%2FOpenCut&project-name=opencut&repository-name=opencut)
-
 ## License
 
 [MIT LICENSE](LICENSE)

apps/web/.env.example

@@ -1,19 +1,28 @@
-# Environment Variables Example
+# Environment variables example
 # Copy this file to .env.local and update the values as needed
 
-DATABASE_URL="postgresql://opencut:opencutthegoat@localhost:5432/opencut"
-
-# Better Auth
-NEXT_PUBLIC_BETTER_AUTH_URL=http://localhost:3000
-BETTER_AUTH_SECRET=your-secret-key-here
-
-# Development Environment
+# Node
 NODE_ENV=development
 
-# Redis
+# Public
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+NEXT_PUBLIC_MARBLE_API_URL=https://api.marblecms.com
+
+# Server
+DATABASE_URL="postgresql://opencut:opencut@localhost:5432/opencut"
+BETTER_AUTH_SECRET=your_better_auth_secret
+
 UPSTASH_REDIS_REST_URL=http://localhost:8079
 UPSTASH_REDIS_REST_TOKEN=example_token
 
-# Marble Blog
-MARBLE_WORKSPACE_KEY=cm6ytuq9x0000i803v0isidst # example organization key
-NEXT_PUBLIC_MARBLE_API_URL=https://api.marblecms.com
+MARBLE_WORKSPACE_KEY=your_workspace_key_here
+
+FREESOUND_CLIENT_ID=your_client_id_here
+FREESOUND_API_KEY=your_api_key_here
+
+CLOUDFLARE_ACCOUNT_ID=your_account_id_here
+R2_ACCESS_KEY_ID=your_access_key_here
+R2_SECRET_ACCESS_KEY=your_secret_key_here
+R2_BUCKET_NAME=opencut-transcription # whatever you named your r2 bucket
+
+MODAL_TRANSCRIPTION_URL=your_modal_url_here

apps/web/.gitignore

@@ -1,2 +1,10 @@
 # Turborepo
-.turbo
+.turbo
+
+# Env vars
+.env*
+!.env.example
+
+.next/
+
+.font-cache/

apps/web/Dockerfile

@@ -1,57 +1,70 @@
-FROM oven/bun:alpine AS base
-
-# Install dependencies and build the application
-FROM base AS builder
-
-WORKDIR /app
-
-COPY package.json package.json
-COPY bun.lock bun.lock
-COPY turbo.json turbo.json
-
-COPY apps/web/package.json apps/web/package.json
-COPY packages/db/package.json packages/db/package.json
-COPY packages/auth/package.json packages/auth/package.json
-
-RUN bun install
-
-COPY apps/web/ apps/web/
-COPY packages/db/ packages/db/
-COPY packages/auth/ packages/auth/
-
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
-# Set build-time environment variables for validation
-ENV DATABASE_URL="postgresql://opencut:opencutthegoat@localhost:5432/opencut"
-ENV BETTER_AUTH_SECRET="build-time-secret"
-ENV UPSTASH_REDIS_REST_URL="http://localhost:8079"
-ENV UPSTASH_REDIS_REST_TOKEN="example_token"
-ENV NEXT_PUBLIC_BETTER_AUTH_URL="http://localhost:3000"
-
-WORKDIR /app/apps/web
-RUN bun run build
-
-# Production image
-FROM base AS runner
-WORKDIR /app
-
-ENV NODE_ENV production
-ENV NEXT_TELEMETRY_DISABLED 1
-
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
-COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
-COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
-
-RUN chown nextjs:nodejs apps
-
-USER nextjs
-
-EXPOSE 3000
-
-ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
-
-CMD ["bun", "apps/web/server.js"]
+FROM oven/bun:alpine AS base
+
+FROM base AS builder
+
+WORKDIR /app
+
+ARG FREESOUND_CLIENT_ID
+ARG FREESOUND_API_KEY
+
+COPY package.json package.json
+COPY bun.lock bun.lock
+COPY turbo.json turbo.json
+
+COPY apps/web/package.json apps/web/package.json
+COPY packages/env/package.json packages/env/package.json
+COPY packages/ui/package.json packages/ui/package.json
+
+RUN bun install
+
+COPY apps/web/ apps/web/
+COPY packages/env/ packages/env/
+COPY packages/ui/ packages/ui/
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+# Build-time env stubs to pass zod validation
+ENV DATABASE_URL="postgresql://opencut:opencut@localhost:5432/opencut"
+ENV BETTER_AUTH_SECRET="build-time-secret"
+ENV UPSTASH_REDIS_REST_URL="http://localhost:8079"
+ENV UPSTASH_REDIS_REST_TOKEN="example_token"
+ENV NEXT_PUBLIC_SITE_URL="http://localhost:3000"
+ENV NEXT_PUBLIC_MARBLE_API_URL="https://api.marblecms.com"
+ENV MARBLE_WORKSPACE_KEY="build-placeholder"
+ENV CLOUDFLARE_ACCOUNT_ID="build-placeholder"
+ENV R2_ACCESS_KEY_ID="build-placeholder"
+ENV R2_SECRET_ACCESS_KEY="build-placeholder"
+ENV R2_BUCKET_NAME="build-placeholder"
+ENV MODAL_TRANSCRIPTION_URL="http://localhost:0"
+
+ENV FREESOUND_CLIENT_ID=$FREESOUND_CLIENT_ID
+ENV FREESOUND_API_KEY=$FREESOUND_API_KEY
+
+WORKDIR /app/apps/web
+RUN bun run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/public ./apps/web/public
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/apps/web/.next/static ./apps/web/.next/static
+
+RUN chown nextjs:nodejs apps
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT=3000
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["bun", "apps/web/server.js"]

apps/web/components.json

@@ -1,21 +1,21 @@
 {
-  "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
-  "rsc": true,
-  "tsx": true,
-  "tailwind": {
-    "config": "tailwind.config.ts",
-    "css": "src/app/globals.css",
-    "baseColor": "neutral",
-    "cssVariables": true,
-    "prefix": ""
-  },
-  "aliases": {
-    "components": "@/components",
-    "utils": "@/lib/utils",
-    "ui": "@/components/ui",
-    "lib": "@/lib",
-    "hooks": "@/hooks"
-  },
-  "iconLibrary": "lucide"
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "new-york",
+	"rsc": true,
+	"tsx": true,
+	"tailwind": {
+		"config": "",
+		"css": "src/app/globals.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
 }

apps/web/content-collections.ts

@@ -0,0 +1,32 @@
+import { defineCollection, defineConfig } from "@content-collections/core";
+import { z } from "zod";
+
+const changelog = defineCollection({
+	name: "changelog",
+	directory: "content/changelog",
+	include: "*.md",
+	schema: z.object({
+		version: z.string(),
+		date: z.string(),
+		title: z.string(),
+		description: z.string().optional(),
+		changes: z.array(
+			z.object({
+				type: z.string(),
+				text: z.string(),
+			}),
+		),
+	}),
+	transform: async (doc, { collection }) => {
+		const allDocs = await collection.documents();
+		const sorted = [...allDocs].sort((a, b) =>
+			b.version.localeCompare(a.version, undefined, { numeric: true }),
+		);
+		const isLatest = sorted[0]?.version === doc.version;
+		return { ...doc, isLatest };
+	},
+});
+
+export default defineConfig({
+	content: [changelog],
+});

apps/web/content/changelog/0.1.0.md

@@ -0,0 +1,35 @@
+---
+version: "0.1.0"
+date: "2026-02-23"
+title: "Editor foundation"
+description: "This first release focuses on making editing faster, clearer, and more reliable for day-to-day use."
+changes:
+  - type: new
+    text: "Rebuilt the properties panel from scratch. Number inputs now support math expressions and click-drag scrubbing instead of just typing values in."
+  - type: new
+    text: "The properties panel went from a flat list of basic text styles to organized sections: transform, blending, typography, spacing, and background controls. Text elements finally have position, scale, and rotation."
+  - type: new
+    text: "New color picker with eyedropper, opacity control, and multiple color formats."
+  - type: new
+    text: "Bookmarks now support notes, color labels, and optional duration to plan scenes more clearly."
+  - type: new
+    text: "Move, scale, and rotate elements directly in the preview panel."
+  - type: new
+    text: "Blend modes (Multiply, Screen, Overlay, etc). Only available on text elements for now."
+  - type: new
+    text: "Paste images, videos, or audio from your clipboard straight into the editor."
+  - type: new
+    text: "Hold Shift while moving or resizing to temporarily turn off snapping."
+  - type: improved
+    text: "Expanded font selection from 7 to over 1,000."
+  - type: improved
+    text: "Fonts load much faster."
+  - type: improved
+    text: "All asset panel tabs now share a consistent layout."
+  - type: improved
+    text: "Text rendering properly supports multiple lines, line height, and letter spacing."
+  - type: improved
+    text: "Better contrast in the dark theme."
+  - type: fixed
+    text: "Fixed undo/redo for drag-and-drop so dropped items are reliably undoable."
+---

apps/web/content/changelog/0.2.0.md

@@ -0,0 +1,17 @@
+---
+version: "0.2.0"
+date: "2026-02-29"
+title: "Motion & effects"
+description: "This release adds the foundation for motion and effects."
+changes:
+  - type: new
+    text: "Keyframe animation system, starting with transform properties (position, scale, rotation)."
+  - type: new
+    text: "Effects system (with our first effect: Blur!)"
+  - type: new
+    text: "Ripple editing mode. Delete or split an element and everything after it automatically snaps to fill the gap."
+  - type: fixed
+    text: "Fixed an issue where click-and-drag selection on one timeline track could accidentally select items from the track below."
+  - type: fixed
+    text: "Audio could flicker or cut out at the start of playback when certain elements were selected. The scheduler now recovers from timing slips without losing audio."
+---

apps/web/drizzle.config.ts

@@ -1,19 +1,23 @@
-import * as dotenv from "dotenv";
 import type { Config } from "drizzle-kit";
+import * as dotenv from "dotenv";
+import { webEnv } from "@opencut/env/web";
 
 // Load the right env file based on environment
-if (process.env.NODE_ENV === "production") {
+if (webEnv.NODE_ENV === "production") {
 	dotenv.config({ path: ".env.production" });
 } else {
 	dotenv.config({ path: ".env.local" });
 }
 
 export default {
-	schema: "../../packages/db/src/schema.ts",
+	schema: "./src/schema.ts",
 	dialect: "postgresql",
+	migrations: {
+		table: "drizzle_migrations",
+	},
 	dbCredentials: {
-		url: process.env.DATABASE_URL!,
+		url: webEnv.DATABASE_URL,
 	},
 	out: "./migrations",
-	strict: process.env.NODE_ENV === "production",
+	strict: webEnv.NODE_ENV === "production",
 } satisfies Config;

apps/web/migrations/0000_hot_the_fallen.sql

@@ -1,54 +0,0 @@
-CREATE TABLE "accounts" (
-	"id" text PRIMARY KEY NOT NULL,
-	"account_id" text NOT NULL,
-	"provider_id" text NOT NULL,
-	"user_id" text NOT NULL,
-	"access_token" text,
-	"refresh_token" text,
-	"id_token" text,
-	"access_token_expires_at" timestamp,
-	"refresh_token_expires_at" timestamp,
-	"scope" text,
-	"password" text,
-	"created_at" timestamp NOT NULL,
-	"updated_at" timestamp NOT NULL
-);
---> statement-breakpoint
-ALTER TABLE "accounts" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
-CREATE TABLE "sessions" (
-	"id" text PRIMARY KEY NOT NULL,
-	"expires_at" timestamp NOT NULL,
-	"token" text NOT NULL,
-	"created_at" timestamp NOT NULL,
-	"updated_at" timestamp NOT NULL,
-	"ip_address" text,
-	"user_agent" text,
-	"user_id" text NOT NULL,
-	CONSTRAINT "sessions_token_unique" UNIQUE("token")
-);
---> statement-breakpoint
-ALTER TABLE "sessions" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
-CREATE TABLE "users" (
-	"id" text PRIMARY KEY NOT NULL,
-	"name" text NOT NULL,
-	"email" text NOT NULL,
-	"email_verified" boolean NOT NULL,
-	"image" text,
-	"created_at" timestamp NOT NULL,
-	"updated_at" timestamp NOT NULL,
-	CONSTRAINT "users_email_unique" UNIQUE("email")
-);
---> statement-breakpoint
-ALTER TABLE "users" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
-CREATE TABLE "verifications" (
-	"id" text PRIMARY KEY NOT NULL,
-	"identifier" text NOT NULL,
-	"value" text NOT NULL,
-	"expires_at" timestamp NOT NULL,
-	"created_at" timestamp,
-	"updated_at" timestamp
-);
---> statement-breakpoint
-ALTER TABLE "verifications" ENABLE ROW LEVEL SECURITY;--> statement-breakpoint
-ALTER TABLE "accounts" ADD CONSTRAINT "accounts_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
-ALTER TABLE "sessions" ADD CONSTRAINT "sessions_user_id_users_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."users"("id") ON DELETE cascade ON UPDATE no action;

apps/web/migrations/0001_tricky_jackpot.sql

@@ -1,8 +0,0 @@
-CREATE TABLE "waitlist" (
-	"id" text PRIMARY KEY NOT NULL,
-	"email" text NOT NULL,
-	"created_at" timestamp NOT NULL,
-	CONSTRAINT "waitlist_email_unique" UNIQUE("email")
-);
---> statement-breakpoint
-ALTER TABLE "waitlist" ENABLE ROW LEVEL SECURITY;

apps/web/migrations/0002_cuddly_pretty_boy.sql

@@ -1 +0,0 @@
-ALTER TABLE "users" ALTER COLUMN "email_verified" SET DEFAULT false;

apps/web/migrations/meta/0000_snapshot.json

@@ -1,307 +1,344 @@
 {
-  "id": "4440fb90-cf0e-4cb2-afad-08250ce3dc1e",
-  "prevId": "00000000-0000-0000-0000-000000000000",
-  "version": "7",
-  "dialect": "postgresql",
-  "tables": {
-    "public.accounts": {
-      "name": "accounts",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "account_id": {
-          "name": "account_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "provider_id": {
-          "name": "provider_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "access_token": {
-          "name": "access_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "refresh_token": {
-          "name": "refresh_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "id_token": {
-          "name": "id_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "access_token_expires_at": {
-          "name": "access_token_expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "refresh_token_expires_at": {
-          "name": "refresh_token_expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "scope": {
-          "name": "scope",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "password": {
-          "name": "password",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "accounts_user_id_users_id_fk": {
-          "name": "accounts_user_id_users_id_fk",
-          "tableFrom": "accounts",
-          "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.sessions": {
-      "name": "sessions",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "token": {
-          "name": "token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "ip_address": {
-          "name": "ip_address",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_agent": {
-          "name": "user_agent",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "sessions_user_id_users_id_fk": {
-          "name": "sessions_user_id_users_id_fk",
-          "tableFrom": "sessions",
-          "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "sessions_token_unique": {
-          "name": "sessions_token_unique",
-          "nullsNotDistinct": false,
-          "columns": ["token"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.users": {
-      "name": "users",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email_verified": {
-          "name": "email_verified",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "image": {
-          "name": "image",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "users_email_unique": {
-          "name": "users_email_unique",
-          "nullsNotDistinct": false,
-          "columns": ["email"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.verifications": {
-      "name": "verifications",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "identifier": {
-          "name": "identifier",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    }
-  },
-  "enums": {},
-  "schemas": {},
-  "sequences": {},
-  "roles": {},
-  "policies": {},
-  "views": {},
-  "_meta": {
-    "columns": {},
-    "schemas": {},
-    "tables": {}
-  }
+	"id": "33a6742f-89da-4ac5-958f-421aa1cf9bd6",
+	"prevId": "00000000-0000-0000-0000-000000000000",
+	"version": "7",
+	"dialect": "postgresql",
+	"tables": {
+		"public.accounts": {
+			"name": "accounts",
+			"schema": "",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"account_id": {
+					"name": "account_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"provider_id": {
+					"name": "provider_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"access_token": {
+					"name": "access_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"refresh_token": {
+					"name": "refresh_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"id_token": {
+					"name": "id_token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"access_token_expires_at": {
+					"name": "access_token_expires_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"refresh_token_expires_at": {
+					"name": "refresh_token_expires_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"scope": {
+					"name": "scope",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"password": {
+					"name": "password",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"accounts_user_id_users_id_fk": {
+					"name": "accounts_user_id_users_id_fk",
+					"tableFrom": "accounts",
+					"tableTo": "users",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": true
+		},
+		"public.sessions": {
+			"name": "sessions",
+			"schema": "",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"token": {
+					"name": "token",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"ip_address": {
+					"name": "ip_address",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"user_agent": {
+					"name": "user_agent",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"user_id": {
+					"name": "user_id",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {
+				"sessions_user_id_users_id_fk": {
+					"name": "sessions_user_id_users_id_fk",
+					"tableFrom": "sessions",
+					"tableTo": "users",
+					"columnsFrom": ["user_id"],
+					"columnsTo": ["id"],
+					"onDelete": "cascade",
+					"onUpdate": "no action"
+				}
+			},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"sessions_token_unique": {
+					"name": "sessions_token_unique",
+					"nullsNotDistinct": false,
+					"columns": ["token"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": true
+		},
+		"public.users": {
+			"name": "users",
+			"schema": "",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"name": {
+					"name": "name",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"email": {
+					"name": "email",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"email_verified": {
+					"name": "email_verified",
+					"type": "boolean",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"image": {
+					"name": "image",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"users_email_unique": {
+					"name": "users_email_unique",
+					"nullsNotDistinct": false,
+					"columns": ["email"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": true
+		},
+		"public.verifications": {
+			"name": "verifications",
+			"schema": "",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"identifier": {
+					"name": "identifier",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"value": {
+					"name": "value",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"expires_at": {
+					"name": "expires_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": false
+				},
+				"updated_at": {
+					"name": "updated_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": false
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": true
+		},
+		"public.waitlist": {
+			"name": "waitlist",
+			"schema": "",
+			"columns": {
+				"id": {
+					"name": "id",
+					"type": "text",
+					"primaryKey": true,
+					"notNull": true
+				},
+				"email": {
+					"name": "email",
+					"type": "text",
+					"primaryKey": false,
+					"notNull": true
+				},
+				"created_at": {
+					"name": "created_at",
+					"type": "timestamp",
+					"primaryKey": false,
+					"notNull": true
+				}
+			},
+			"indexes": {},
+			"foreignKeys": {},
+			"compositePrimaryKeys": {},
+			"uniqueConstraints": {
+				"waitlist_email_unique": {
+					"name": "waitlist_email_unique",
+					"nullsNotDistinct": false,
+					"columns": ["email"]
+				}
+			},
+			"policies": {},
+			"checkConstraints": {},
+			"isRLSEnabled": true
+		}
+	},
+	"enums": {},
+	"schemas": {},
+	"sequences": {},
+	"roles": {},
+	"policies": {},
+	"views": {},
+	"_meta": {
+		"columns": {},
+		"schemas": {},
+		"tables": {}
+	}
 }

apps/web/migrations/meta/0001_snapshot.json

@@ -1,344 +0,0 @@
-{
-  "id": "b7d920ca-6dd0-430f-8ee6-1d38fdf3e80f",
-  "prevId": "4440fb90-cf0e-4cb2-afad-08250ce3dc1e",
-  "version": "7",
-  "dialect": "postgresql",
-  "tables": {
-    "public.accounts": {
-      "name": "accounts",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "account_id": {
-          "name": "account_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "provider_id": {
-          "name": "provider_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "access_token": {
-          "name": "access_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "refresh_token": {
-          "name": "refresh_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "id_token": {
-          "name": "id_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "access_token_expires_at": {
-          "name": "access_token_expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "refresh_token_expires_at": {
-          "name": "refresh_token_expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "scope": {
-          "name": "scope",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "password": {
-          "name": "password",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "accounts_user_id_users_id_fk": {
-          "name": "accounts_user_id_users_id_fk",
-          "tableFrom": "accounts",
-          "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.sessions": {
-      "name": "sessions",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "token": {
-          "name": "token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "ip_address": {
-          "name": "ip_address",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_agent": {
-          "name": "user_agent",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "sessions_user_id_users_id_fk": {
-          "name": "sessions_user_id_users_id_fk",
-          "tableFrom": "sessions",
-          "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "sessions_token_unique": {
-          "name": "sessions_token_unique",
-          "nullsNotDistinct": false,
-          "columns": ["token"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.users": {
-      "name": "users",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email_verified": {
-          "name": "email_verified",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "image": {
-          "name": "image",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "users_email_unique": {
-          "name": "users_email_unique",
-          "nullsNotDistinct": false,
-          "columns": ["email"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.verifications": {
-      "name": "verifications",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "identifier": {
-          "name": "identifier",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.waitlist": {
-      "name": "waitlist",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "waitlist_email_unique": {
-          "name": "waitlist_email_unique",
-          "nullsNotDistinct": false,
-          "columns": ["email"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    }
-  },
-  "enums": {},
-  "schemas": {},
-  "sequences": {},
-  "roles": {},
-  "policies": {},
-  "views": {},
-  "_meta": {
-    "columns": {},
-    "schemas": {},
-    "tables": {}
-  }
-}

apps/web/migrations/meta/0002_snapshot.json

@@ -1,345 +0,0 @@
-{
-  "id": "1b9148ed-497b-4e53-8cf6-f556c8fe7f7f",
-  "prevId": "b7d920ca-6dd0-430f-8ee6-1d38fdf3e80f",
-  "version": "7",
-  "dialect": "postgresql",
-  "tables": {
-    "public.accounts": {
-      "name": "accounts",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "account_id": {
-          "name": "account_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "provider_id": {
-          "name": "provider_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "access_token": {
-          "name": "access_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "refresh_token": {
-          "name": "refresh_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "id_token": {
-          "name": "id_token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "access_token_expires_at": {
-          "name": "access_token_expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "refresh_token_expires_at": {
-          "name": "refresh_token_expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "scope": {
-          "name": "scope",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "password": {
-          "name": "password",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "accounts_user_id_users_id_fk": {
-          "name": "accounts_user_id_users_id_fk",
-          "tableFrom": "accounts",
-          "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.sessions": {
-      "name": "sessions",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "token": {
-          "name": "token",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "ip_address": {
-          "name": "ip_address",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_agent": {
-          "name": "user_agent",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "user_id": {
-          "name": "user_id",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {
-        "sessions_user_id_users_id_fk": {
-          "name": "sessions_user_id_users_id_fk",
-          "tableFrom": "sessions",
-          "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
-          "onDelete": "cascade",
-          "onUpdate": "no action"
-        }
-      },
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "sessions_token_unique": {
-          "name": "sessions_token_unique",
-          "nullsNotDistinct": false,
-          "columns": ["token"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.users": {
-      "name": "users",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "name": {
-          "name": "name",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "email_verified": {
-          "name": "email_verified",
-          "type": "boolean",
-          "primaryKey": false,
-          "notNull": true,
-          "default": false
-        },
-        "image": {
-          "name": "image",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "users_email_unique": {
-          "name": "users_email_unique",
-          "nullsNotDistinct": false,
-          "columns": ["email"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.verifications": {
-      "name": "verifications",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "identifier": {
-          "name": "identifier",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "value": {
-          "name": "value",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "expires_at": {
-          "name": "expires_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        },
-        "updated_at": {
-          "name": "updated_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": false
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {},
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    },
-    "public.waitlist": {
-      "name": "waitlist",
-      "schema": "",
-      "columns": {
-        "id": {
-          "name": "id",
-          "type": "text",
-          "primaryKey": true,
-          "notNull": true
-        },
-        "email": {
-          "name": "email",
-          "type": "text",
-          "primaryKey": false,
-          "notNull": true
-        },
-        "created_at": {
-          "name": "created_at",
-          "type": "timestamp",
-          "primaryKey": false,
-          "notNull": true
-        }
-      },
-      "indexes": {},
-      "foreignKeys": {},
-      "compositePrimaryKeys": {},
-      "uniqueConstraints": {
-        "waitlist_email_unique": {
-          "name": "waitlist_email_unique",
-          "nullsNotDistinct": false,
-          "columns": ["email"]
-        }
-      },
-      "policies": {},
-      "checkConstraints": {},
-      "isRLSEnabled": true
-    }
-  },
-  "enums": {},
-  "schemas": {},
-  "sequences": {},
-  "roles": {},
-  "policies": {},
-  "views": {},
-  "_meta": {
-    "columns": {},
-    "schemas": {},
-    "tables": {}
-  }
-}

apps/web/migrations/meta/_journal.json

@@ -1,27 +1,13 @@
 {
-  "version": "7",
-  "dialect": "postgresql",
-  "entries": [
-    {
-      "idx": 0,
-      "version": "7",
-      "when": 1750581188229,
-      "tag": "0000_hot_the_fallen",
-      "breakpoints": true
-    },
-    {
-      "idx": 1,
-      "version": "7",
-      "when": 1750689835736,
-      "tag": "0001_tricky_jackpot",
-      "breakpoints": true
-    },
-    {
-      "idx": 2,
-      "version": "7",
-      "when": 1752569400809,
-      "tag": "0002_cuddly_pretty_boy",
-      "breakpoints": true
-    }
-  ]
+	"version": "7",
+	"dialect": "postgresql",
+	"entries": [
+		{
+			"idx": 0,
+			"version": "7",
+			"when": 1750753385927,
+			"tag": "0000_brainy_saracen",
+			"breakpoints": true
+		}
+	]
 }

apps/web/next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+import "./.next/dev/types/routes.d.ts";
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/web/next.config.ts

@@ -1,7 +1,16 @@
-import { withBotId } from "botid/next/config";
 import type { NextConfig } from "next";
+import { withBotId } from "botid/next/config";
+import { withContentCollections } from "@content-collections/next";
 
 const nextConfig: NextConfig = {
+	turbopack: {
+		rules: {
+			"*.glsl": {
+				loaders: [require.resolve("raw-loader")],
+				as: "*.js",
+			},
+		},
+	},
 	compiler: {
 		removeConsole: process.env.NODE_ENV === "production",
 	},
@@ -30,8 +39,20 @@ const nextConfig: NextConfig = {
 				protocol: "https",
 				hostname: "avatars.githubusercontent.com",
 			},
+			{
+				protocol: "https",
+				hostname: "api.iconify.design",
+			},
+			{
+				protocol: "https",
+				hostname: "api.simplesvg.com",
+			},
+			{
+				protocol: "https",
+				hostname: "api.unisvg.com",
+			},
 		],
 	},
 };
 
-export default withBotId(nextConfig);
+export default withContentCollections(withBotId(nextConfig));

apps/web/package.json

@@ -1,10 +1,10 @@
 {
-  "name": "opencut",
+  "name": "@opencut/web",
   "version": "0.1.0",
   "private": true,
   "packageManager": "bun@1.2.18",
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev --turbopack",
     "build": "next build",
     "start": "next start",
     "lint": "biome check src/",
@@ -21,40 +21,55 @@
     "@ffmpeg/util": "^0.12.2",
     "@hello-pangea/dnd": "^18.0.1",
     "@hookform/resolvers": "^3.9.1",
-    "@opencut/auth": "workspace:*",
-    "@opencut/db": "workspace:*",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@t3-oss/env-core": "^0.13.8",
-    "@t3-oss/env-nextjs": "^0.13.8",
-    "@upstash/ratelimit": "^2.0.5",
-    "@upstash/redis": "^1.35.0",
+    "@hugeicons/core-free-icons": "^3.1.1",
+    "@hugeicons/react": "^1.1.4",
+    "@huggingface/transformers": "^3.8.1",
+    "@opencut/env": "workspace:*",
+    "@opencut/ui": "workspace:*",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-primitive": "^2.1.4",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@types/culori": "^4.0.1",
+    "@upstash/ratelimit": "^2.0.6",
+    "@upstash/redis": "^1.35.4",
     "@vercel/analytics": "^1.4.1",
+    "aws4fetch": "^1.0.20",
     "better-auth": "^1.2.7",
     "botid": "^1.4.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
+    "culori": "^4.0.2",
     "dayjs": "^1.11.13",
-    "dotenv": "^16.5.0",
     "drizzle-orm": "^0.44.2",
     "embla-carousel-react": "^8.5.1",
+    "eventemitter3": "^5.0.1",
     "feed": "^5.1.0",
-    "framer-motion": "^11.13.1",
     "input-otp": "^1.4.1",
-    "lucide-react": "^0.468.0",
+    "lucide-react": "^0.562.0",
+    "mediabunny": "^1.29.1",
     "motion": "^12.18.1",
-    "next": "^15.4.3",
+    "nanoid": "^5.1.5",
+    "next": "16.1.3",
     "next-themes": "^0.4.4",
     "pg": "^8.16.2",
-    "radix-ui": "^1.4.2",
-    "react": "^18.2.0",
+    "postgres": "^3.4.5",
+    "radix-ui": "^1.4.3",
+    "react": "^19.0.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^19.0.0",
     "react-hook-form": "^7.54.0",
     "react-icons": "^5.4.0",
     "react-markdown": "^10.1.0",
     "react-phone-number-input": "^3.4.11",
     "react-resizable-panels": "^2.1.7",
+    "react-window": "^2.2.7",
     "recharts": "^2.14.1",
     "rehype-autolink-headings": "^7.1.0",
     "rehype-parse": "^9.0.1",
@@ -65,20 +80,30 @@
     "tailwind-merge": "^2.5.5",
     "tailwindcss-animate": "^1.0.7",
     "unified": "^11.0.5",
-    "vaul": "^1.1.1",
+    "use-deep-compare-effect": "^1.8.1",
+    "vaul": "^1.1.2",
+    "wavesurfer.js": "^7.9.8",
     "zod": "^3.25.67",
     "zustand": "^5.0.2"
   },
   "devDependencies": {
+    "@content-collections/core": "^0.14.1",
+    "@content-collections/next": "^0.2.11",
+    "@napi-rs/canvas": "^0.1.92",
+    "@tailwindcss/postcss": "^4.1.11",
     "@tailwindcss/typography": "^0.5.16",
     "@types/bun": "latest",
+    "@types/node": "^24.2.1",
     "@types/pg": "^8.15.4",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
     "cross-env": "^7.0.3",
+    "dotenv": "^16.5.0",
     "drizzle-kit": "^0.31.4",
     "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "raw-loader": "^4.0.2",
+    "sharp": "^0.34.5",
+    "tailwindcss": "^4.1.11",
     "tsx": "^4.7.1",
     "typescript": "^5.8.3"
   }

apps/web/postcss.config.mjs

@@ -1,8 +1,8 @@
 /** @type {import('postcss-load-config').Config} */
 const config = {
-  plugins: {
-    tailwindcss: {},
-  },
+	plugins: {
+		"@tailwindcss/postcss": {},
+	},
 };
 
 export default config;

apps/web/public/frame.svg

@@ -1,10 +0,0 @@
-<svg width="459" height="77" viewBox="0 0 459 77" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect x="0.5" y="1.15625" width="458" height="75" rx="15.5" fill="#101010"/>
-<rect x="0.5" y="1.15625" width="458" height="75" rx="15.5" stroke="#FFCC00"/>
-<rect x="0.5" y="1.15625" width="31" height="75" rx="15.5" fill="#2A2A2A"/>
-<rect x="0.5" y="1.15625" width="31" height="75" rx="15.5" stroke="#FFCC00"/>
-<rect x="13" y="20.6562" width="6" height="36" rx="3" fill="#FFCC00"/>
-<rect x="427.5" y="1.15625" width="31" height="75" rx="15.5" fill="#2A2A2A"/>
-<rect x="427.5" y="1.15625" width="31" height="75" rx="15.5" stroke="#FFCC00"/>
-<rect x="440" y="20.6562" width="6" height="36" rx="3" fill="#FFCC00"/>
-</svg>

apps/web/public/logos/others/fal.svg

@@ -0,0 +1,3 @@
+<svg width="512" height="513" viewBox="0 0 512 513" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M330.144 0.740479C339.014 0.740479 346.122 7.95256 346.971 16.7816C354.534 95.534 417.207 158.206 495.959 165.769C504.788 166.618 512 173.726 512 182.596V330.886C512 339.755 504.788 346.863 495.959 347.712C417.207 355.275 354.534 417.947 346.971 496.7C346.122 505.529 339.014 512.74 330.144 512.74H181.856C172.986 512.74 165.878 505.529 165.029 496.7C157.467 417.947 94.7934 355.275 16.041 347.712C7.21212 346.863 0 339.755 0 330.886V182.596C0 173.726 7.21216 166.618 16.0411 165.769C94.7935 158.206 157.467 95.534 165.029 16.7816C165.878 7.95256 172.986 0.740479 181.856 0.740479H330.144ZM102.8 256.307C102.8 341.495 171.781 410.554 256.874 410.554C341.966 410.554 410.948 341.495 410.948 256.307C410.948 171.119 341.966 102.06 256.874 102.06C171.781 102.06 102.8 171.119 102.8 256.307Z" fill="black"/>
+</svg>

apps/web/public/logos/others/vercel.svg

@@ -0,0 +1,3 @@
+<svg width="588" height="512" viewBox="0 0 588 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M294 0L588 512H0L294 0Z" fill="black"/>
+</svg>

apps/web/public/manifest.json

@@ -1,44 +1,44 @@
 {
-  "name": "OpenCut",
-  "description": "A simple but powerful video editor that gets the job done. In your browser.",
-  "display": "standalone",
-  "start_url": "/",
-  "icons": [
-    {
-      "src": "/icons/android-icon-36x36.png",
-      "sizes": "36x36",
-      "type": "image\/png",
-      "density": "0.75"
-    },
-    {
-      "src": "/icons/android-icon-48x48.png",
-      "sizes": "48x48",
-      "type": "image\/png",
-      "density": "1.0"
-    },
-    {
-      "src": "/icons/android-icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image\/png",
-      "density": "1.5"
-    },
-    {
-      "src": "/icons/android-icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image\/png",
-      "density": "2.0"
-    },
-    {
-      "src": "/icons/android-icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image\/png",
-      "density": "3.0"
-    },
-    {
-      "src": "/icons/android-icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image\/png",
-      "density": "4.0"
-    }
-  ]
+	"name": "OpenCut",
+	"description": "A simple but powerful video editor that gets the job done. In your browser.",
+	"display": "standalone",
+	"start_url": "/",
+	"icons": [
+		{
+			"src": "/icons/android-icon-36x36.png",
+			"sizes": "36x36",
+			"type": "image\/png",
+			"density": "0.75"
+		},
+		{
+			"src": "/icons/android-icon-48x48.png",
+			"sizes": "48x48",
+			"type": "image\/png",
+			"density": "1.0"
+		},
+		{
+			"src": "/icons/android-icon-72x72.png",
+			"sizes": "72x72",
+			"type": "image\/png",
+			"density": "1.5"
+		},
+		{
+			"src": "/icons/android-icon-96x96.png",
+			"sizes": "96x96",
+			"type": "image\/png",
+			"density": "2.0"
+		},
+		{
+			"src": "/icons/android-icon-144x144.png",
+			"sizes": "144x144",
+			"type": "image\/png",
+			"density": "3.0"
+		},
+		{
+			"src": "/icons/android-icon-192x192.png",
+			"sizes": "192x192",
+			"type": "image\/png",
+			"density": "4.0"
+		}
+	]
 }

apps/web/public/shapes/circle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <circle cx="50" cy="50" r="44" fill="currentColor" />
+</svg>

apps/web/public/shapes/diamond.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon points="50,6 94,50 50,94 6,50" fill="currentColor" />
+</svg>

apps/web/public/shapes/hexagon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon points="28,8 72,8 94,50 72,92 28,92 6,50" fill="currentColor" />
+</svg>

apps/web/public/shapes/square.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <rect x="10" y="10" width="80" height="80" fill="currentColor" />
+</svg>

apps/web/public/shapes/star.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon points="50,6 61,37 94,37 67,56 77,88 50,68 23,88 33,56 6,37 39,37" fill="currentColor" />
+</svg>

apps/web/public/shapes/triangle.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <polygon points="50,8 94,92 6,92" fill="currentColor" />
+</svg>

apps/web/scripts/generate-font-sprites.ts

@@ -0,0 +1,281 @@
+/**
+ * Generates font sprite atlas for the font picker.
+ *
+ * Downloads Google Fonts from Fontsource, renders each font name as a sprite,
+ * packs them into chunk images, and outputs a JSON atlas + AVIF images.
+ *
+ * Run: npx tsx scripts/generate-font-sprites.ts
+ * Deps: @napi-rs/canvas sharp (install as devDependencies)
+ */
+
+import { createCanvas, GlobalFonts } from "@napi-rs/canvas";
+import sharp from "sharp";
+import { mkdir, writeFile, readFile } from "node:fs/promises";
+import { existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const FONT_SIZE = 24;
+const ROW_HEIGHT = 40;
+const CANVAS_WIDTH = 1200;
+const MAX_CHUNK_HEIGHT = 800;
+const PADDING_X = 14;
+const WIDTH_BUFFER = 8;
+const CONCURRENT_DOWNLOADS = 30;
+
+const OUTPUT_DIR = join(__dirname, "..", "public", "fonts");
+const CACHE_DIR = join(__dirname, "..", ".font-cache");
+const FONTSOURCE_API = "https://api.fontsource.org/v1/fonts";
+
+interface FontsourceFont {
+	id: string;
+	family: string;
+	subsets: string[];
+	weights: number[];
+	styles: string[];
+	category: string;
+	type: string;
+}
+
+interface MeasuredFont {
+	family: string;
+	width: number;
+	styles: string[];
+}
+
+interface PackedFont {
+	family: string;
+	x: number;
+	y: number;
+	w: number;
+}
+
+interface AtlasEntry {
+	x: number;
+	y: number;
+	w: number;
+	ch: number;
+	s: string[];
+}
+
+async function fetchFontList(): Promise<FontsourceFont[]> {
+	console.log("Fetching font list from Fontsource...");
+	const response = await fetch(FONTSOURCE_API);
+	if (!response.ok) throw new Error(`Fontsource API error: ${response.status}`);
+
+	const data: FontsourceFont[] = await response.json();
+	const filtered = data.filter(
+		(font) =>
+			font.type === "google" &&
+			font.subsets.includes("latin") &&
+			font.weights.includes(400),
+	);
+
+	console.log(
+		`  ${filtered.length} Google fonts with Latin subset + 400 weight`,
+	);
+	return filtered;
+}
+
+async function downloadFont({ id }: { id: string }): Promise<Buffer | null> {
+	const cachePath = join(CACHE_DIR, `${id}.woff2`);
+
+	if (existsSync(cachePath)) {
+		return readFile(cachePath);
+	}
+
+	// Fontsource CDN serves woff2 for all Google fonts
+	const url = `https://cdn.jsdelivr.net/fontsource/fonts/${id}@latest/latin-400-normal.woff2`;
+	try {
+		const response = await fetch(url);
+		if (!response.ok) throw new Error(`HTTP ${response.status}`);
+		const buffer = Buffer.from(await response.arrayBuffer());
+		await writeFile(cachePath, buffer);
+		return buffer;
+	} catch {
+		return null;
+	}
+}
+
+async function downloadAllFonts({
+	fonts,
+	concurrency,
+}: {
+	fonts: FontsourceFont[];
+	concurrency: number;
+}): Promise<Map<string, Buffer>> {
+	console.log(
+		`Downloading ${fonts.length} font files (${concurrency} concurrent)...`,
+	);
+	const results = new Map<string, Buffer>();
+	let nextIndex = 0;
+	let completed = 0;
+
+	async function worker() {
+		while (nextIndex < fonts.length) {
+			const index = nextIndex++;
+			const font = fonts[index];
+			const buffer = await downloadFont({ id: font.id });
+			if (buffer) results.set(font.id, buffer);
+			completed++;
+			if (completed % 100 === 0 || completed === fonts.length) {
+				process.stdout.write(`\r  ${completed}/${fonts.length}`);
+			}
+		}
+	}
+
+	await Promise.all(Array.from({ length: concurrency }, () => worker()));
+	console.log(`\n  Downloaded ${results.size}/${fonts.length} fonts`);
+	return results;
+}
+
+function measureFonts({
+	fonts,
+	fontBuffers,
+}: {
+	fonts: FontsourceFont[];
+	fontBuffers: Map<string, Buffer>;
+}): MeasuredFont[] {
+	console.log("Registering fonts and measuring text...");
+	const measured: MeasuredFont[] = [];
+	const canvas = createCanvas(CANVAS_WIDTH, ROW_HEIGHT);
+	const ctx = canvas.getContext("2d");
+
+	for (const font of fonts) {
+		const buffer = fontBuffers.get(font.id);
+		if (!buffer) continue;
+
+		try {
+			const ok = GlobalFonts.register(buffer, font.family);
+			if (!ok) continue;
+
+			ctx.font = `${FONT_SIZE}px "${font.family}"`;
+			const metrics = ctx.measureText(font.family);
+			const width = Math.ceil(metrics.width) + WIDTH_BUFFER;
+
+			const styles: string[] = [];
+			for (const weight of font.weights) {
+				if (font.styles.includes("normal")) styles.push(String(weight));
+				if (font.styles.includes("italic")) styles.push(`${weight}i`);
+			}
+
+			measured.push({ family: font.family, width, styles });
+		} catch {
+			// skip fonts that fail to register
+		}
+	}
+
+	measured.sort((a, b) => a.family.localeCompare(b.family));
+	console.log(`  ${measured.length} fonts measured`);
+	return measured;
+}
+
+function packIntoChunks({ measured }: { measured: MeasuredFont[] }): {
+	atlas: Record<string, AtlasEntry>;
+	chunks: PackedFont[][];
+} {
+	console.log("Packing into sprite chunks...");
+	const atlas: Record<string, AtlasEntry> = {};
+	const chunks: PackedFont[][] = [[]];
+	let chunkIndex = 0;
+	let cursorX = 0;
+	let cursorY = 0;
+
+	for (const font of measured) {
+		// New row if doesn't fit horizontally
+		if (cursorX + font.width > CANVAS_WIDTH) {
+			cursorX = 0;
+			cursorY += ROW_HEIGHT;
+		}
+
+		// New chunk if doesn't fit vertically
+		if (cursorY + ROW_HEIGHT > MAX_CHUNK_HEIGHT) {
+			chunkIndex++;
+			chunks.push([]);
+			cursorX = 0;
+			cursorY = 0;
+		}
+
+		// Same data goes to BOTH the atlas and the chunk render list
+		const x = cursorX;
+		const y = cursorY;
+
+		atlas[font.family] = {
+			x,
+			y,
+			w: font.width,
+			ch: chunkIndex,
+			s: font.styles,
+		};
+		chunks[chunkIndex].push({ family: font.family, x, y, w: font.width });
+
+		cursorX += font.width + PADDING_X;
+	}
+
+	console.log(`  ${chunks.length} chunks`);
+	return { atlas, chunks };
+}
+
+async function renderChunks({
+	chunks,
+}: {
+	chunks: PackedFont[][];
+}): Promise<void> {
+	console.log("Rendering sprite chunks...");
+
+	for (let i = 0; i < chunks.length; i++) {
+		const chunk = chunks[i];
+		const chunkHeight = Math.max(...chunk.map((f) => f.y)) + ROW_HEIGHT;
+
+		const canvas = createCanvas(CANVAS_WIDTH, chunkHeight);
+		const ctx = canvas.getContext("2d");
+
+		for (const font of chunk) {
+			ctx.font = `${FONT_SIZE}px "${font.family}"`;
+			ctx.fillStyle = "#000000";
+			ctx.textBaseline = "middle";
+			ctx.fillText(font.family, font.x, font.y + ROW_HEIGHT / 2);
+		}
+
+		const pngBuffer = canvas.toBuffer("image/png");
+		await sharp(pngBuffer)
+			.avif({ quality: 80 })
+			.toFile(join(OUTPUT_DIR, `font-chunk-${i}.avif`));
+
+		console.log(
+			`  Chunk ${i}: ${chunk.length} fonts, ${CANVAS_WIDTH}×${chunkHeight}`,
+		);
+	}
+}
+
+async function main() {
+	await mkdir(OUTPUT_DIR, { recursive: true });
+	await mkdir(CACHE_DIR, { recursive: true });
+
+	const fonts = await fetchFontList();
+	const fontBuffers = await downloadAllFonts({
+		fonts,
+		concurrency: CONCURRENT_DOWNLOADS,
+	});
+	const measured = measureFonts({ fonts, fontBuffers });
+	const { atlas, chunks } = packIntoChunks({ measured });
+	await renderChunks({ chunks });
+
+	// Write atlas JSON (compact for smaller file size)
+	await writeFile(
+		join(OUTPUT_DIR, "font-atlas.json"),
+		JSON.stringify({ fonts: atlas }),
+	);
+
+	const totalFonts = Object.keys(atlas).length;
+	console.log(
+		`\nDone! ${totalFonts} fonts in ${chunks.length} chunks → ${OUTPUT_DIR}`,
+	);
+}
+
+main().catch((error) => {
+	console.error("Failed:", error);
+	process.exit(1);
+});

apps/web/src/app/(auth)/login/page.tsx

@@ -1,146 +0,0 @@
-"use client";
-
-import { ArrowLeft, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { memo, Suspense } from "react";
-import { GoogleIcon } from "@/components/icons";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { useLogin } from "@/hooks/auth/useLogin";
-
-const LoginPage = () => {
-	const router = useRouter();
-	const {
-		email,
-		setEmail,
-		password,
-		setPassword,
-		error,
-		isAnyLoading,
-		isEmailLoading,
-		isGoogleLoading,
-		handleLogin,
-		handleGoogleLogin,
-	} = useLogin();
-
-	return (
-		<div className="relative flex h-screen items-center justify-center">
-			<Button
-				className="absolute top-6 left-6"
-				onClick={() => router.back()}
-				variant="text"
-			>
-				<ArrowLeft className="h-5 w-5" /> Back
-			</Button>
-			<Card className="w-[400px] border-0 shadow-lg">
-				<CardHeader className="pb-4 text-center">
-					<CardTitle className="font-semibold text-2xl">Welcome back</CardTitle>
-					<CardDescription className="text-base">
-						Sign in to your account to continue
-					</CardDescription>
-				</CardHeader>
-				<CardContent className="pt-0">
-					<Suspense
-						fallback={
-							<div className="text-center">
-								<Loader2 className="animate-spin" />
-							</div>
-						}
-					>
-						<div className="flex flex-col space-y-6">
-							{error && (
-								<Alert variant="destructive">
-									<AlertTitle>Error</AlertTitle>
-									<AlertDescription>{error}</AlertDescription>
-								</Alert>
-							)}
-
-							<Button
-								disabled={isAnyLoading}
-								onClick={handleGoogleLogin}
-								size="lg"
-								variant="outline"
-							>
-								{isGoogleLoading ? (
-									<Loader2 className="animate-spin" />
-								) : (
-									<GoogleIcon />
-								)}{" "}
-								Continue with Google
-							</Button>
-							<div className="relative">
-								<div className="absolute inset-0 flex items-center">
-									<Separator className="w-full" />
-								</div>
-								<div className="relative flex justify-center text-xs uppercase">
-									<span className="bg-background px-2 text-muted-foreground">
-										Or continue with
-									</span>
-								</div>
-							</div>
-							<div className="space-y-4">
-								<div className="space-y-2">
-									<Label htmlFor="email">Email</Label>
-									<Input
-										className="h-11"
-										disabled={isAnyLoading}
-										id="email"
-										onChange={(e) => setEmail(e.target.value)}
-										placeholder="m@example.com"
-										type="email"
-										value={email}
-									/>
-								</div>
-								<div className="space-y-2">
-									<Label htmlFor="password">Password</Label>
-									<Input
-										className="h-11"
-										disabled={isAnyLoading}
-										id="password"
-										onChange={(e) => setPassword(e.target.value)}
-										type="password"
-										value={password}
-									/>
-								</div>
-								<Button
-									className="h-11 w-full"
-									disabled={isAnyLoading || !email || !password}
-									onClick={handleLogin}
-									size="lg"
-								>
-									{isEmailLoading ? (
-										<Loader2 className="animate-spin" />
-									) : (
-										"Sign in"
-									)}
-								</Button>
-							</div>
-						</div>
-						<div className="mt-6 text-center text-sm">
-							Don't have an account?{" "}
-							<Link
-								className="font-medium text-primary underline-offset-4 hover:underline"
-								href="/signup"
-							>
-								Sign up
-							</Link>
-						</div>
-					</Suspense>
-				</CardContent>
-			</Card>
-		</div>
-	);
-};
-
-export default memo(LoginPage);

apps/web/src/app/(auth)/signup/page.tsx

@@ -1,162 +0,0 @@
-"use client";
-
-import { ArrowLeft, Loader2 } from "lucide-react";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import { memo, Suspense } from "react";
-import { GoogleIcon } from "@/components/icons";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Button } from "@/components/ui/button";
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardHeader,
-	CardTitle,
-} from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { Separator } from "@/components/ui/separator";
-import { useSignUp } from "@/hooks/auth/useSignUp";
-
-const SignUpPage = () => {
-	const router = useRouter();
-	const {
-		name,
-		setName,
-		email,
-		setEmail,
-		password,
-		setPassword,
-		error,
-		isAnyLoading,
-		isEmailLoading,
-		isGoogleLoading,
-		handleSignUp,
-		handleGoogleSignUp,
-	} = useSignUp();
-
-	return (
-		<div className="relative flex h-screen items-center justify-center">
-			<Button
-				className="absolute top-6 left-6"
-				onClick={() => router.back()}
-				variant="text"
-			>
-				<ArrowLeft className="h-5 w-5" /> Back
-			</Button>
-			<Card className="w-[400px] border-0 shadow-lg">
-				<CardHeader className="pb-4 text-center">
-					<CardTitle className="font-semibold text-2xl">
-						Create your account
-					</CardTitle>
-					<CardDescription className="text-base">
-						Get started with your free account today
-					</CardDescription>
-				</CardHeader>
-				<CardContent className="pt-0">
-					<Suspense
-						fallback={
-							<div className="text-center">
-								<Loader2 className="animate-spin" />
-							</div>
-						}
-					>
-						<div className="flex flex-col space-y-6">
-							{error && (
-								<Alert variant="destructive">
-									<AlertTitle>Error</AlertTitle>
-									<AlertDescription>{error}</AlertDescription>
-								</Alert>
-							)}
-							<Button
-								disabled={isAnyLoading}
-								onClick={handleGoogleSignUp}
-								size="lg"
-								variant="outline"
-							>
-								{isGoogleLoading ? (
-									<Loader2 className="animate-spin" />
-								) : (
-									<GoogleIcon />
-								)}{" "}
-								Continue with Google
-							</Button>
-							<div className="relative">
-								<div className="absolute inset-0 flex items-center">
-									<Separator className="w-full" />
-								</div>
-								<div className="relative flex justify-center text-xs uppercase">
-									<span className="bg-background px-2 text-muted-foreground">
-										Or continue with
-									</span>
-								</div>
-							</div>
-							<div className="space-y-4">
-								<div className="space-y-2">
-									<Label htmlFor="name">Full Name</Label>
-									<Input
-										className="h-11"
-										disabled={isAnyLoading}
-										id="name"
-										onChange={(e) => setName(e.target.value)}
-										placeholder="John Doe"
-										type="text"
-										value={name}
-									/>
-								</div>
-								<div className="space-y-2">
-									<Label htmlFor="email">Email</Label>
-									<Input
-										className="h-11"
-										disabled={isAnyLoading}
-										id="email"
-										onChange={(e) => setEmail(e.target.value)}
-										placeholder="m@example.com"
-										type="email"
-										value={email}
-									/>
-								</div>
-								<div className="space-y-2">
-									<Label htmlFor="password">Password</Label>
-									<Input
-										className="h-11"
-										disabled={isAnyLoading}
-										id="password"
-										onChange={(e) => setPassword(e.target.value)}
-										placeholder="Create a strong password"
-										type="password"
-										value={password}
-									/>
-								</div>
-								<Button
-									className="h-11 w-full"
-									disabled={isAnyLoading || !name || !email || !password}
-									onClick={handleSignUp}
-									size="lg"
-								>
-									{isEmailLoading ? (
-										<Loader2 className="animate-spin" />
-									) : (
-										"Create account"
-									)}
-								</Button>
-							</div>
-						</div>
-						<div className="mt-6 text-center text-sm">
-							Already have an account?{" "}
-							<Link
-								className="font-medium text-primary underline-offset-4 hover:underline"
-								href="/login"
-							>
-								Sign in
-							</Link>
-						</div>
-					</Suspense>
-				</CardContent>
-			</Card>
-		</div>
-	);
-};
-
-export default memo(SignUpPage);

apps/web/src/app/api/auth/[...all]/route.ts

@@ -1,4 +1,4 @@
-import { auth } from "@opencut/auth";
+import { auth } from "@/lib/auth/server";
 import { toNextJsHandler } from "better-auth/next-js";
 
 export const { POST, GET } = toNextJsHandler(auth);

apps/web/src/app/api/health/route.ts

@@ -1,5 +1,3 @@
-import type { NextRequest } from "next/server";
-
-export async function GET(_request: NextRequest) {
+export async function GET() {
 	return new Response("OK", { status: 200 });
 }

apps/web/src/app/api/sounds/search/route.ts

@@ -0,0 +1,280 @@
+import { webEnv } from "@opencut/env/web";
+import { type NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { checkRateLimit } from "@/lib/rate-limit";
+
+const searchParamsSchema = z.object({
+	q: z.string().max(500, "Query too long").optional(),
+	type: z.enum(["songs", "effects"]).optional(),
+	page: z.coerce.number().int().min(1).max(1000).default(1),
+	page_size: z.coerce.number().int().min(1).max(150).default(20),
+	sort: z
+		.enum(["downloads", "rating", "created", "score"])
+		.default("downloads"),
+	min_rating: z.coerce.number().min(0).max(5).default(3),
+	commercial_only: z.coerce.boolean().default(true),
+});
+
+const freesoundResultSchema = z.object({
+	id: z.number(),
+	name: z.string(),
+	description: z.string(),
+	url: z.string().url(),
+	previews: z
+		.object({
+			"preview-hq-mp3": z.string().url(),
+			"preview-lq-mp3": z.string().url(),
+			"preview-hq-ogg": z.string().url(),
+			"preview-lq-ogg": z.string().url(),
+		})
+		.optional(),
+	download: z.string().url().optional(),
+	duration: z.number(),
+	filesize: z.number(),
+	type: z.string(),
+	channels: z.number(),
+	bitrate: z.number(),
+	bitdepth: z.number(),
+	samplerate: z.number(),
+	username: z.string(),
+	tags: z.array(z.string()),
+	license: z.string(),
+	created: z.string(),
+	num_downloads: z.number().optional(),
+	avg_rating: z.number().optional(),
+	num_ratings: z.number().optional(),
+});
+
+const freesoundResponseSchema = z.object({
+	count: z.number(),
+	next: z.string().url().nullable(),
+	previous: z.string().url().nullable(),
+	results: z.array(freesoundResultSchema),
+});
+
+const transformedResultSchema = z.object({
+	id: z.number(),
+	name: z.string(),
+	description: z.string(),
+	url: z.string(),
+	previewUrl: z.string().optional(),
+	downloadUrl: z.string().optional(),
+	duration: z.number(),
+	filesize: z.number(),
+	type: z.string(),
+	channels: z.number(),
+	bitrate: z.number(),
+	bitdepth: z.number(),
+	samplerate: z.number(),
+	username: z.string(),
+	tags: z.array(z.string()),
+	license: z.string(),
+	created: z.string(),
+	downloads: z.number().optional(),
+	rating: z.number().optional(),
+	ratingCount: z.number().optional(),
+});
+
+const apiResponseSchema = z.object({
+	count: z.number(),
+	next: z.string().nullable(),
+	previous: z.string().nullable(),
+	results: z.array(transformedResultSchema),
+	query: z.string().optional(),
+	type: z.string(),
+	page: z.number(),
+	pageSize: z.number(),
+	sort: z.string(),
+	minRating: z.number().optional(),
+});
+
+function buildSortParameter({ query, sort }: { query?: string; sort: string }) {
+	if (!query) return `${sort}_desc`;
+	return sort === "score" ? "score" : `${sort}_desc`;
+}
+
+function applyEffectsFilters({
+	params,
+	min_rating,
+	commercial_only,
+}: {
+	params: URLSearchParams;
+	min_rating: number;
+	commercial_only: boolean;
+}) {
+	params.append("filter", "duration:[* TO 30.0]");
+	params.append("filter", `avg_rating:[${min_rating} TO *]`);
+
+	if (commercial_only) {
+		params.append(
+			"filter",
+			'license:("Attribution" OR "Creative Commons 0" OR "Attribution Noncommercial" OR "Attribution Commercial")',
+		);
+	}
+
+	params.append(
+		"filter",
+		"tag:sound-effect OR tag:sfx OR tag:foley OR tag:ambient OR tag:nature OR tag:mechanical OR tag:electronic OR tag:impact OR tag:whoosh OR tag:explosion",
+	);
+}
+
+function transformFreesoundResult(
+	result: z.infer<typeof freesoundResultSchema>,
+) {
+	return {
+		id: result.id,
+		name: result.name,
+		description: result.description,
+		url: result.url,
+		previewUrl:
+			result.previews?.["preview-hq-mp3"] ||
+			result.previews?.["preview-lq-mp3"],
+		downloadUrl: result.download,
+		duration: result.duration,
+		filesize: result.filesize,
+		type: result.type,
+		channels: result.channels,
+		bitrate: result.bitrate,
+		bitdepth: result.bitdepth,
+		samplerate: result.samplerate,
+		username: result.username,
+		tags: result.tags,
+		license: result.license,
+		created: result.created,
+		downloads: result.num_downloads || 0,
+		rating: result.avg_rating || 0,
+		ratingCount: result.num_ratings || 0,
+	};
+}
+
+export async function GET(request: NextRequest) {
+	try {
+		const { limited } = await checkRateLimit({ request });
+		if (limited) {
+			return NextResponse.json({ error: "Too many requests" }, { status: 429 });
+		}
+
+		const { searchParams } = new URL(request.url);
+
+		const validationResult = searchParamsSchema.safeParse({
+			q: searchParams.get("q") || undefined,
+			type: searchParams.get("type") || undefined,
+			page: searchParams.get("page") || undefined,
+			page_size: searchParams.get("page_size") || undefined,
+			sort: searchParams.get("sort") || undefined,
+			min_rating: searchParams.get("min_rating") || undefined,
+		});
+
+		if (!validationResult.success) {
+			return NextResponse.json(
+				{
+					error: "Invalid parameters",
+					details: validationResult.error.flatten().fieldErrors,
+				},
+				{ status: 400 },
+			);
+		}
+
+		const {
+			q: query,
+			type,
+			page,
+			page_size: pageSize,
+			sort,
+			min_rating,
+			commercial_only,
+		} = validationResult.data;
+
+		if (type === "songs") {
+			return NextResponse.json(
+				{
+					error: "Songs are not available yet",
+					message:
+						"Song search functionality is coming soon. Try searching for sound effects instead.",
+				},
+				{ status: 501 },
+			);
+		}
+
+		const baseUrl = "https://freesound.org/apiv2/search/text/";
+
+		const sortParam = buildSortParameter({ query, sort });
+
+		const params = new URLSearchParams({
+			query: query || "",
+			token: webEnv.FREESOUND_API_KEY,
+			page: page.toString(),
+			page_size: pageSize.toString(),
+			sort: sortParam,
+			fields:
+				"id,name,description,url,previews,download,duration,filesize,type,channels,bitrate,bitdepth,samplerate,username,tags,license,created,num_downloads,avg_rating,num_ratings",
+		});
+
+		const isEffectsSearch = type === "effects" || !type;
+		if (isEffectsSearch) {
+			applyEffectsFilters({ params, min_rating, commercial_only });
+		}
+
+		const response = await fetch(`${baseUrl}?${params.toString()}`);
+
+		if (!response.ok) {
+			const errorText = await response.text();
+			console.error("Freesound API error:", response.status, errorText);
+			return NextResponse.json(
+				{ error: "Failed to search sounds" },
+				{ status: response.status },
+			);
+		}
+
+		const rawData = await response.json();
+
+		const freesoundValidation = freesoundResponseSchema.safeParse(rawData);
+		if (!freesoundValidation.success) {
+			console.error(
+				"Invalid Freesound API response:",
+				freesoundValidation.error,
+			);
+			return NextResponse.json(
+				{ error: "Invalid response from Freesound API" },
+				{ status: 502 },
+			);
+		}
+
+		const data = freesoundValidation.data;
+
+		const transformedResults = data.results.map(transformFreesoundResult);
+
+		const responseData = {
+			count: data.count,
+			next: data.next,
+			previous: data.previous,
+			results: transformedResults,
+			query: query || "",
+			type: type || "effects",
+			page,
+			pageSize,
+			sort,
+			minRating: min_rating,
+		};
+
+		const responseValidation = apiResponseSchema.safeParse(responseData);
+		if (!responseValidation.success) {
+			console.error(
+				"Invalid API response structure:",
+				responseValidation.error,
+			);
+			return NextResponse.json(
+				{ error: "Internal response formatting error" },
+				{ status: 500 },
+			);
+		}
+
+		return NextResponse.json(responseValidation.data);
+	} catch (error) {
+		console.error("Error searching sounds:", error);
+		return NextResponse.json(
+			{ error: "Internal server error" },
+			{ status: 500 },
+		);
+	}
+}

apps/web/src/app/api/waitlist/route.ts

@@ -1,113 +0,0 @@
-import crypto from "node:crypto";
-import { db, eq, waitlist } from "@opencut/db";
-import { checkBotId } from "botid/server";
-import { nanoid } from "nanoid";
-import { cookies } from "next/headers";
-import { type NextRequest, NextResponse } from "next/server";
-import { z } from "zod";
-import { env } from "@/env";
-import { waitlistRateLimit } from "@/lib/rate-limit";
-
-const waitlistSchema = z.object({
-	email: z.string().email("Invalid email format").min(1, "Email is required"),
-});
-
-const CSRF_TOKEN_NAME = "waitlist-csrf";
-const TOKEN_EXPIRY = 60 * 60 * 1000;
-
-async function validateCSRFToken(request: NextRequest): Promise<boolean> {
-	const clientToken = request.headers.get("x-csrf-token");
-	if (!clientToken) {
-		return false;
-	}
-
-	const cookieStore = await cookies();
-	const cookieValue = cookieStore.get(CSRF_TOKEN_NAME)?.value;
-	if (!cookieValue) {
-		return false;
-	}
-
-	const [token, timestamp, signature] = cookieValue.split(":");
-	if (!(token && timestamp && signature)) {
-		return false;
-	}
-
-	if (clientToken !== token) {
-		return false;
-	}
-
-	const now = Date.now();
-	const tokenTime = Number.parseInt(timestamp, 10);
-	if (now - tokenTime > TOKEN_EXPIRY) {
-		return false;
-	}
-
-	const expectedSignature = crypto
-		.createHmac("sha256", env.BETTER_AUTH_SECRET)
-		.update(`${token}:${timestamp}`)
-		.digest("hex");
-
-	return signature === expectedSignature;
-}
-
-export async function POST(request: NextRequest) {
-	const verification = await checkBotId();
-
-	if (verification.isBot) {
-		return NextResponse.json({ error: "Access denied" }, { status: 403 });
-	}
-
-	const identifier = request.headers.get("x-forwarded-for") ?? "127.0.0.1";
-	const { success } = await waitlistRateLimit.limit(identifier);
-
-	if (!success) {
-		return NextResponse.json(
-			{ error: "Too many requests. Please try again later." },
-			{ status: 429 }
-		);
-	}
-	const isValidToken = await validateCSRFToken(request);
-	if (!isValidToken) {
-		return NextResponse.json(
-			{ error: "Invalid security token" },
-			{ status: 403 }
-		);
-	}
-
-	try {
-		const body = await request.json();
-		const { email } = waitlistSchema.parse(body);
-
-		const existingEmail = await db
-			.select()
-			.from(waitlist)
-			.where(eq(waitlist.email, email.toLowerCase()))
-			.limit(1);
-
-		if (existingEmail.length > 0) {
-			return NextResponse.json(
-				{ error: "Email already registered" },
-				{ status: 409 }
-			);
-		}
-
-		await db.insert(waitlist).values({
-			id: nanoid(),
-			email: email.toLowerCase(),
-		});
-
-		return NextResponse.json(
-			{ message: "Successfully joined waitlist!" },
-			{ status: 201 }
-		);
-	} catch (error) {
-		if (error instanceof z.ZodError) {
-			const firstError = error.errors[0];
-			return NextResponse.json({ error: firstError.message }, { status: 400 });
-		}
-		return NextResponse.json(
-			{ error: "Internal server error" },
-			{ status: 500 }
-		);
-	}
-}