Merge branch 'main' into feature/optimize-timeline-ruler

17 files changed, 573 insertions, 157 deletions

diff --git a/apps/web/Dockerfile b/apps/web/Dockerfile
index 46eeb102..d1a60846 100644
--- a/apps/web/Dockerfile
+++ b/apps/web/Dockerfile
@@ -21,6 +21,12 @@ 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

diff --git a/apps/web/drizzle.config.ts b/apps/web/drizzle.config.ts
index 87547bd0..6b7a1605 100644
--- a/apps/web/drizzle.config.ts
+++ b/apps/web/drizzle.config.ts
@@ -1,9 +1,8 @@
 import type { Config } from "drizzle-kit";

 import * as dotenv from "dotenv";

-import { env } from "@/env";

 

 // Load the right env file based on environment

-if (env.NODE_ENV === "production") {

+if (process.env.NODE_ENV === "production") {

   dotenv.config({ path: ".env.production" });

 } else {

   dotenv.config({ path: ".env.local" });

@@ -13,8 +12,8 @@ export default {
   schema: "../../packages/db/src/schema.ts",

   dialect: "postgresql",

   dbCredentials: {

-    url: env.DATABASE_URL,

+    url: process.env.DATABASE_URL!,

   },

   out: "./migrations",

-  strict: env.NODE_ENV === "production",

+  strict: process.env.NODE_ENV === "production",

 } satisfies Config;

diff --git a/apps/web/src/app/(auth)/login/page.tsx b/apps/web/src/app/(auth)/login/page.tsx
index ec79bd7f..f28cd191 100644
--- a/apps/web/src/app/(auth)/login/page.tsx
+++ b/apps/web/src/app/(auth)/login/page.tsx
@@ -119,7 +119,11 @@ const LoginPage = () => {
                   className="w-full h-11"
                   size="lg"
                 >
-                  {isEmailLoading ? <Loader2 className="animate-spin" /> : "Sign in"}
+                  {isEmailLoading ? (
+                    <Loader2 className="animate-spin" />
+                  ) : (
+                    "Sign in"
+                  )}
                 </Button>
               </div>
             </div>
@@ -137,6 +141,6 @@ const LoginPage = () => {
       </Card>
     </div>
   );
-}
+};
 
 export default memo(LoginPage);
diff --git a/apps/web/src/app/(auth)/signup/page.tsx b/apps/web/src/app/(auth)/signup/page.tsx
index e9705213..c3a0f899 100644
--- a/apps/web/src/app/(auth)/signup/page.tsx
+++ b/apps/web/src/app/(auth)/signup/page.tsx
@@ -157,6 +157,6 @@ const SignUpPage = () => {
       </Card>
     </div>
   );
-}
+};
 
 export default memo(SignUpPage);
diff --git a/apps/web/src/app/api/auth/[...all]/route.ts b/apps/web/src/app/api/auth/[...all]/route.ts
index 393fb7e7..55510dcb 100644
--- a/apps/web/src/app/api/auth/[...all]/route.ts
+++ b/apps/web/src/app/api/auth/[...all]/route.ts
@@ -1,4 +1,4 @@
-import { auth } from "@opencut/auth/server";

+import { auth } from "@opencut/auth";

 import { toNextJsHandler } from "better-auth/next-js";

 

 export const { POST, GET } = toNextJsHandler(auth);
\ No newline at end of file
diff --git a/apps/web/src/app/api/waitlist/route.ts b/apps/web/src/app/api/waitlist/route.ts
index f62e24e9..e5c9fd94 100644
--- a/apps/web/src/app/api/waitlist/route.ts
+++ b/apps/web/src/app/api/waitlist/route.ts
@@ -1,6 +1,5 @@
 import { NextRequest, NextResponse } from "next/server";

-import { db, eq } from "@opencut/db";

-import { waitlist } from "@opencut/db/schema";

+import { db, eq, waitlist } from "@opencut/db";

 import { checkBotId } from "botid/server";

 import { nanoid } from "nanoid";

 import { waitlistRateLimit } from "@/lib/rate-limit";

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index c4081c75..3b51e182 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -7,6 +7,7 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";

 import { formatTimeCode } from "@/lib/time";

 import { useProjectStore } from "@/stores/project-store";

+import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";

 

 export function EditorHeader() {

   const { getTotalDuration } = useTimelineStore();

@@ -43,6 +44,7 @@ export function EditorHeader() {
 

   const rightContent = (

     <nav className="flex items-center gap-2">

+      <KeyboardShortcutsHelp />

       <Button

         size="sm"

         variant="primary"

diff --git a/apps/web/src/components/editor-provider.tsx b/apps/web/src/components/editor-provider.tsx
index 38255956..d970f86d 100644
--- a/apps/web/src/components/editor-provider.tsx
+++ b/apps/web/src/components/editor-provider.tsx
@@ -3,6 +3,7 @@
 import { useEffect } from "react";

 import { Loader2 } from "lucide-react";

 import { useEditorStore } from "@/stores/editor-store";

+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";

 

 interface EditorProviderProps {

   children: React.ReactNode;

@@ -11,6 +12,11 @@ interface EditorProviderProps {
 export function EditorProvider({ children }: EditorProviderProps) {

   const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();

 

+  useKeyboardShortcuts({

+    enabled: !isInitializing && isPanelsReady,

+    context: "editor",

+  });

+

   useEffect(() => {

     initializeApp();

   }, [initializeApp]);

diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index c6e6a331..bfb663c6 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -55,6 +55,7 @@ import {
   getCumulativeHeightBefore,
   getTotalTracksHeight,
   TIMELINE_CONSTANTS,
+  snapTimeToFrame,
 } from "@/constants/timeline-constants";
 import { Slider } from "../ui/slider";
 import TimelineCanvasRuler from "./timeline-canvas/timeline-canvas-ruler";
@@ -64,6 +65,7 @@ export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their elements.
   // You can drag media here to add it to your project.
   // elements can be trimmed, deleted, and moved.
+
   const {
     tracks,
     addTrack,
@@ -232,7 +234,6 @@ export function Timeline() {
 
       // Use frame snapping for timeline clicking
       const projectFps = activeProject?.fps || 30;
-      const { snapTimeToFrame } = require("@/constants/timeline-constants");
       const time = snapTimeToFrame(rawTime, projectFps);
 
       seek(time);
@@ -254,71 +255,6 @@ export function Timeline() {
     setDuration(Math.max(totalDuration, 10)); // Minimum 10 seconds for empty timeline
   }, [tracks, setDuration, getTotalDuration]);
 
-  // Keyboard event for deleting selected elements
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      // Don't trigger when typing in input fields or textareas
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement
-      ) {
-        return;
-      }
-
-      // Only trigger when timeline is focused or mouse is over timeline
-      if (
-        !isInTimeline &&
-        !timelineRef.current?.contains(document.activeElement)
-      ) {
-        return;
-      }
-
-      if (
-        (e.key === "Delete" || e.key === "Backspace") &&
-        selectedElements.length > 0
-      ) {
-        selectedElements.forEach(({ trackId, elementId }) => {
-          removeElementFromTrack(trackId, elementId);
-        });
-        clearSelectedElements();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [
-    selectedElements,
-    removeElementFromTrack,
-    clearSelectedElements,
-    isInTimeline,
-  ]);
-
-  // Keyboard event for undo (Cmd+Z)
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "z" && !e.shiftKey) {
-        e.preventDefault();
-        undo();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [undo]);
-
-  // Keyboard event for redo (Cmd+Shift+Z or Cmd+Y)
-  useEffect(() => {
-    const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.metaKey || e.ctrlKey) && e.key === "z" && e.shiftKey) {
-        e.preventDefault();
-        redo();
-      } else if ((e.metaKey || e.ctrlKey) && e.key === "y") {
-        e.preventDefault();
-        redo();
-      }
-    };
-    window.addEventListener("keydown", handleKeyDown);
-    return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [redo]);
-
   // Old marquee system removed - using new SelectionBox component instead
 
   const handleDragEnter = (e: React.DragEvent) => {
@@ -376,7 +312,9 @@ export function Timeline() {
           useTimelineStore.getState().addTextToNewTrack(dragData);
         } else {
           // Handle media items
-          const mediaItem = mediaItems.find((item) => item.id === dragData.id);
+          const mediaItem = mediaItems.find(
+            (item: any) => item.id === dragData.id
+          );
           if (!mediaItem) {
             toast.error("Media item not found");
             return;
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
new file mode 100644
index 00000000..9f0d1e57
--- /dev/null
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "./ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+import { Badge } from "./ui/badge";
+import { Keyboard } from "lucide-react";
+import { useKeyboardShortcuts } from "@/hooks/use-keyboard-shortcuts";
+
+const KeyBadge = ({ keyName }: { keyName: string }) => {
+  // Replace common key names with symbols
+  const displayKey = keyName
+    .replace("Cmd", "⌘")
+    .replace("Shift", "⇧")
+    .replace("←", "◀")
+    .replace("→", "▶")
+    .replace("Space", "⎵");
+
+  return (
+    <Badge variant="secondary" className="font-mono text-xs px-2 py-1">
+      {displayKey}
+    </Badge>
+  );
+};
+
+const ShortcutItem = ({ shortcut }: { shortcut: any }) => (
+  <div className="flex items-center justify-between py-2 px-3 rounded-lg hover:bg-muted/50">
+    <div className="flex items-center gap-3">
+      {shortcut.icon && (
+        <div className="text-muted-foreground">{shortcut.icon}</div>
+      )}
+      <span className="text-sm">{shortcut.description}</span>
+    </div>
+    <div className="flex items-center gap-1">
+      {shortcut.keys.map((key: string, index: number) => (
+        <div key={index} className="flex items-center gap-1">
+          <KeyBadge keyName={key} />
+          {index < shortcut.keys.length - 1 && (
+            <span className="text-xs text-muted-foreground">+</span>
+          )}
+        </div>
+      ))}
+    </div>
+  </div>
+);
+
+export const KeyboardShortcutsHelp = () => {
+  const [open, setOpen] = useState(false);
+
+  // Get shortcuts from centralized hook (disabled so it doesn't add event listeners)
+  const { shortcuts } = useKeyboardShortcuts({ enabled: false });
+
+  const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button variant="text" size="sm" className="gap-2">
+          <Keyboard className="w-4 h-4" />
+          Shortcuts
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Keyboard className="w-5 h-5" />
+            Keyboard Shortcuts
+          </DialogTitle>
+          <DialogDescription>
+            Speed up your video editing workflow with these keyboard shortcuts.
+            Most shortcuts work when the timeline is focused.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {categories.map((category) => (
+            <div key={category}>
+              <h3 className="font-semibold text-sm text-muted-foreground uppercase tracking-wide mb-3">
+                {category}
+              </h3>
+              <div className="space-y-1">
+                {shortcuts
+                  .filter((shortcut) => shortcut.category === category)
+                  .map((shortcut, index) => (
+                    <ShortcutItem key={index} shortcut={shortcut} />
+                  ))}
+              </div>
+            </div>
+          ))}
+        </div>
+
+        <div className="mt-6 p-4 bg-muted/30 rounded-lg">
+          <h4 className="font-medium text-sm mb-2">Tips:</h4>
+          <ul className="text-sm text-muted-foreground space-y-1">
+            <li>
+              • Shortcuts work when the editor is focused (not typing in inputs)
+            </li>
+            <li>• J/K/L are industry-standard video editing shortcuts</li>
+            <li>• Use arrow keys for frame-perfect positioning</li>
+            <li>• Hold Shift with arrow keys for larger jumps</li>
+          </ul>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index b1910dc5..6e6a45cb 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -84,7 +84,9 @@ export function Hero() {
           });
       } else {
         toast.error("Oops!", {
-          description: (data as { error: string }).error || "Something went wrong. Please try again.",
+          description:
+            (data as { error: string }).error ||
+            "Something went wrong. Please try again.",
         });
       }
     } catch (error) {
@@ -98,7 +100,13 @@ export function Hero() {
 
   return (
     <div className="min-h-[calc(100vh-4.5rem)] supports-[height:100dvh]:min-h-[calc(100dvh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
-      <Image className="absolute top-0 left-0 -z-50 size-full object-cover" src="/landing-page-bg.png" height={1903.5} width={1269} alt="landing-page.bg" />
+      <Image
+        className="absolute top-0 left-0 -z-50 size-full object-cover"
+        src="/landing-page-bg.png"
+        height={1903.5}
+        width={1269}
+        alt="landing-page.bg"
+      />
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -121,11 +129,20 @@ export function Hero() {
           animate={{ opacity: 1 }}
           transition={{ delay: 0.4, duration: 0.8 }}
         >
-          A simple but powerful video editor that gets the job done. Works on any platform.
+          A simple but powerful video editor that gets the job done. Works on
+          any platform.
         </motion.p>
 
-        <motion.div className="mt-12 flex gap-8 justify-center" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ delay: 0.6, duration: 0.8 }}>
-          <form onSubmit={handleSubmit} className="flex gap-3 w-full max-w-lg flex-col sm:flex-row">
+        <motion.div
+          className="mt-12 flex gap-8 justify-center"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.6, duration: 0.8 }}
+        >
+          <form
+            onSubmit={handleSubmit}
+            className="flex gap-3 w-full max-w-lg flex-col sm:flex-row"
+          >
             <div className="relative w-full">
               <Input
                 type="email"
@@ -137,12 +154,28 @@ export function Hero() {
                 required
               />
             </div>
-            <Button type="submit" size="lg" className="px-6 h-11 text-base !bg-foreground" disabled={isSubmitting || !csrfToken}>
-              <span className="relative z-10">{isSubmitting ? "Joining..." : "Join waitlist"}</span>
+            <Button
+              type="submit"
+              size="lg"
+              className="px-6 h-11 text-base !bg-foreground"
+              disabled={isSubmitting || !csrfToken}
+            >
+              <span className="relative z-10">
+                {isSubmitting ? "Joining..." : "Join waitlist"}
+              </span>
               <ArrowRight className="relative z-10 ml-0.5 h-4 w-4 inline-block" />
             </Button>
           </form>
         </motion.div>
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 0.6 }}
+            className="mt-8 inline-flex items-center gap-2 text-sm text-muted-foreground justify-center"
+          >
+            <div className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+            <span>50k+ people already joined</span>
+          </motion.div>
       </motion.div>
     </div>
   );
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index c1f81e16..b15e8df8 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -2,6 +2,11 @@
 
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { ReactNode, useState, useRef, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { Plus } from "lucide-react";
@@ -139,7 +144,12 @@ export function DraggableMediaItem({
                 <div className="w-full h-full [&_img]:w-full [&_img]:h-full [&_img]:object-cover [&_img]:rounded-none">
                   {preview}
                 </div>
-                {showPlusOnDrag && <PlusButton onClick={handleAddToTimeline} tooltipText="Add to timeline or drag to position" />}
+                {showPlusOnDrag && (
+                  <PlusButton
+                    onClick={handleAddToTimeline}
+                    tooltipText="Add to timeline or drag to position"
+                  />
+                )}
               </AspectRatio>
             </div>
           </div>,
@@ -149,8 +159,16 @@ export function DraggableMediaItem({
   );
 }
 
-function PlusButton({ className, onClick }: { className?: string; onClick?: () => void }) {
-  return (
+function PlusButton({
+  className,
+  onClick,
+  tooltipText,
+}: {
+  className?: string;
+  onClick?: () => void;
+  tooltipText?: string;
+}) {
+  const button = (
     <Button
       size="icon"
       className={cn("absolute bottom-2 right-2 size-4", className)}
@@ -163,4 +181,17 @@ function PlusButton({ className, onClick }: { className?: string; onClick?: () =
       <Plus className="!size-3" />
     </Button>
   );
+
+  if (tooltipText) {
+    return (
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent>
+          <p>{tooltipText}</p>
+        </TooltipContent>
+      </Tooltip>
+    );
+  }
+
+  return button;
 }
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts.ts b/apps/web/src/hooks/use-keyboard-shortcuts.ts
new file mode 100644
index 00000000..86190c94
--- /dev/null
+++ b/apps/web/src/hooks/use-keyboard-shortcuts.ts
@@ -0,0 +1,349 @@
+"use client";

+

+import { useEffect, useCallback } from "react";

+import { useTimelineStore } from "@/stores/timeline-store";

+import { usePlaybackStore } from "@/stores/playback-store";

+import { useProjectStore } from "@/stores/project-store";

+import { toast } from "sonner";

+

+export interface KeyboardShortcut {

+  id: string;

+  keys: string[];

+  description: string;

+  category: string;

+  action: () => void;

+  enabled?: boolean;

+  requiresSelection?: boolean;

+  icon?: React.ReactNode;

+}

+

+interface UseKeyboardShortcutsOptions {

+  enabled?: boolean;

+  context?: "global" | "timeline" | "editor";

+}

+

+export const useKeyboardShortcuts = (

+  options: UseKeyboardShortcutsOptions = {}

+) => {

+  const { enabled = true, context = "editor" } = options;

+

+  const {

+    tracks,

+    selectedElements,

+    clearSelectedElements,

+    setSelectedElements,

+    removeElementFromTrack,

+    splitElement,

+    addElementToTrack,

+    snappingEnabled,

+    toggleSnapping,

+    undo,

+    redo,

+  } = useTimelineStore();

+

+  const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore();

+

+  const { activeProject } = useProjectStore();

+

+  // Check if user is typing in an input field

+  const isInputFocused = useCallback(() => {

+    const activeElement = document.activeElement as HTMLElement;

+    return (

+      activeElement &&

+      (activeElement.tagName === "INPUT" ||

+        activeElement.tagName === "TEXTAREA" ||

+        activeElement.contentEditable === "true")

+    );

+  }, []);

+

+  // Define all shortcuts in one place

+  const shortcuts: KeyboardShortcut[] = [

+    // Playback Controls

+    {

+      id: "play-pause",

+      keys: ["Space"],

+      description: "Play/Pause",

+      category: "Playback",

+      action: () => {

+        toggle();

+        toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });

+      },

+    },

+    {

+      id: "rewind",

+      keys: ["j", "J"],

+      description: "Rewind 1 second",

+      category: "Playback",

+      action: () => {

+        seek(Math.max(0, currentTime - 1));

+        toast.info("Rewind 1s", { duration: 1000 });

+      },

+    },

+    {

+      id: "play-pause-alt",

+      keys: ["k", "K"],

+      description: "Play/Pause (alternative)",

+      category: "Playback",

+      action: () => {

+        toggle();

+        toast.info(isPlaying ? "Paused" : "Playing", { duration: 1000 });

+      },

+    },

+    {

+      id: "fast-forward",

+      keys: ["l", "L"],

+      description: "Fast forward 1 second",

+      category: "Playback",

+      action: () => {

+        seek(Math.min(duration, currentTime + 1));

+        toast.info("Forward 1s", { duration: 1000 });

+      },

+    },

+

+    // Navigation

+    {

+      id: "frame-backward",

+      keys: ["ArrowLeft"],

+      description: "Frame step backward",

+      category: "Navigation",

+      action: () => {

+        const projectFps = activeProject?.fps || 30;

+        seek(Math.max(0, currentTime - 1 / projectFps));

+      },

+    },

+    {

+      id: "frame-forward",

+      keys: ["ArrowRight"],

+      description: "Frame step forward",

+      category: "Navigation",

+      action: () => {

+        const projectFps = activeProject?.fps || 30;

+        seek(Math.min(duration, currentTime + 1 / projectFps));

+      },

+    },

+    {

+      id: "jump-backward",

+      keys: ["Shift+ArrowLeft"],

+      description: "Jump back 5 seconds",

+      category: "Navigation",

+      action: () => {

+        seek(Math.max(0, currentTime - 5));

+      },

+    },

+    {

+      id: "jump-forward",

+      keys: ["Shift+ArrowRight"],

+      description: "Jump forward 5 seconds",

+      category: "Navigation",

+      action: () => {

+        seek(Math.min(duration, currentTime + 5));

+      },

+    },

+    {

+      id: "goto-start",

+      keys: ["Home"],

+      description: "Go to timeline start",

+      category: "Navigation",

+      action: () => {

+        seek(0);

+        toast.info("Start of timeline", { duration: 1000 });

+      },

+    },

+    {

+      id: "goto-end",

+      keys: ["End"],

+      description: "Go to timeline end",

+      category: "Navigation",

+      action: () => {

+        seek(duration);

+        toast.info("End of timeline", { duration: 1000 });

+      },

+    },

+

+    // Editing

+    {

+      id: "split-element",

+      keys: ["s", "S"],

+      description: "Split element at playhead",

+      category: "Editing",

+      requiresSelection: true,

+      action: () => {

+        if (selectedElements.length !== 1) {

+          toast.error("Select exactly one element to split");

+          return;

+        }

+

+        const { trackId, elementId } = selectedElements[0];

+        const track = tracks.find((t: any) => t.id === trackId);

+        const element = track?.elements.find((el: any) => el.id === elementId);

+

+        if (element) {

+          const effectiveStart = element.startTime;

+          const effectiveEnd =

+            element.startTime +

+            (element.duration - element.trimStart - element.trimEnd);

+

+          if (currentTime > effectiveStart && currentTime < effectiveEnd) {

+            splitElement(trackId, elementId, currentTime);

+            toast.success("Element split at playhead");

+          } else {

+            toast.error("Playhead must be within selected element");

+          }

+        }

+      },

+    },

+    {

+      id: "delete-elements",

+      keys: ["Delete", "Backspace"],

+      description: "Delete selected elements",

+      category: "Editing",

+      requiresSelection: true,

+      action: () => {

+        if (selectedElements.length === 0) {

+          toast.error("No elements selected");

+          return;

+        }

+        selectedElements.forEach(

+          ({ trackId, elementId }: { trackId: string; elementId: string }) => {

+            removeElementFromTrack(trackId, elementId);

+          }

+        );

+        clearSelectedElements();

+      },

+    },

+    {

+      id: "toggle-snapping",

+      keys: ["n", "N"],

+      description: "Toggle snapping",

+      category: "Editing",

+      action: () => {

+        toggleSnapping();

+        toast.info(`Snapping ${snappingEnabled ? "disabled" : "enabled"}`, {

+          duration: 1000,

+        });

+      },

+    },

+

+    // Selection & Organization

+    {

+      id: "select-all",

+      keys: ["Cmd+a", "Ctrl+a"],

+      description: "Select all elements",

+      category: "Selection",

+      action: () => {

+        const allElements = tracks.flatMap((track: any) =>

+          track.elements.map((element: any) => ({

+            trackId: track.id,

+            elementId: element.id,

+          }))

+        );

+        setSelectedElements(allElements);

+        toast.info(`Selected ${allElements.length} elements`, {

+          duration: 1000,

+        });

+      },

+    },

+    {

+      id: "duplicate-element",

+      keys: ["Cmd+d", "Ctrl+d"],

+      description: "Duplicate selected element",

+      category: "Selection",

+      requiresSelection: true,

+      action: () => {

+        if (selectedElements.length !== 1) {

+          toast.error("Select exactly one element to duplicate");

+          return;

+        }

+

+        const { trackId, elementId } = selectedElements[0];

+        const track = tracks.find((t: any) => t.id === trackId);

+        const element = track?.elements.find((el: any) => el.id === elementId);

+

+        if (element) {

+          const newStartTime =

+            element.startTime +

+            (element.duration - element.trimStart - element.trimEnd) +

+            0.1;

+          const { id, ...elementWithoutId } = element;

+

+          addElementToTrack(trackId, {

+            ...elementWithoutId,

+            startTime: newStartTime,

+          });

+

+          toast.success("Element duplicated");

+        }

+      },

+    },

+

+    // History

+    {

+      id: "undo",

+      keys: ["Cmd+z", "Ctrl+z"],

+      description: "Undo",

+      category: "History",

+      action: () => {

+        undo();

+      },

+    },

+    {

+      id: "redo",

+      keys: ["Cmd+Shift+z", "Ctrl+Shift+z", "Cmd+y", "Ctrl+y"],

+      description: "Redo",

+      category: "History",

+      action: () => {

+        redo();

+      },

+    },

+  ];

+

+  // Parse keyboard event to match against shortcuts

+  const parseKeyboardEvent = useCallback((e: KeyboardEvent): string => {

+    const parts: string[] = [];

+

+    if (e.metaKey || e.ctrlKey) parts.push(e.metaKey ? "Cmd" : "Ctrl");

+    if (e.shiftKey) parts.push("Shift");

+    if (e.altKey) parts.push("Alt");

+

+    parts.push(e.key);

+

+    return parts.join("+");

+  }, []);

+

+  // Handle keyboard events

+  const handleKeyDown = useCallback(

+    (e: KeyboardEvent) => {

+      if (!enabled || isInputFocused()) return;

+

+      const keyCombo = parseKeyboardEvent(e);

+      const shortcut = shortcuts.find((s) =>

+        s.keys.some((key) => key === keyCombo || key === e.key)

+      );

+

+      if (shortcut) {

+        // Check if shortcut requires selection

+        if (shortcut.requiresSelection && selectedElements.length === 0) {

+          return;

+        }

+

+        e.preventDefault();

+        shortcut.action();

+      }

+    },

+    [enabled, shortcuts, selectedElements, parseKeyboardEvent, isInputFocused]

+  );

+

+  // Set up event listener

+  useEffect(() => {

+    if (!enabled) return;

+

+    window.addEventListener("keydown", handleKeyDown);

+    return () => window.removeEventListener("keydown", handleKeyDown);

+  }, [enabled, handleKeyDown]);

+

+  // Return shortcuts for help component

+  return {

+    shortcuts: shortcuts.filter((s) => s.enabled !== false),

+    enabled,

+  };

+};

diff --git a/apps/web/src/hooks/use-playback-controls.ts b/apps/web/src/hooks/use-playback-controls.ts
index 1191d4b4..ecbd1232 100644
--- a/apps/web/src/hooks/use-playback-controls.ts
+++ b/apps/web/src/hooks/use-playback-controls.ts
@@ -106,68 +106,4 @@ export const usePlaybackControls = () => {
 
     separateAudio(trackId, elementId);
   }, [selectedElements, tracks, separateAudio]);
-
-  const handleKeyPress = useCallback(
-    (e: KeyboardEvent) => {
-      if (
-        e.target instanceof HTMLInputElement ||
-        e.target instanceof HTMLTextAreaElement
-      ) {
-        return;
-      }
-
-      switch (e.key) {
-        case " ":
-          e.preventDefault();
-          if (isPlaying) {
-            pause();
-          } else {
-            play();
-          }
-          break;
-
-        case "s":
-          if (e.ctrlKey || e.metaKey) {
-            e.preventDefault();
-            handleSplitSelectedElement();
-          }
-          break;
-
-        case "q":
-          if (e.ctrlKey || e.metaKey) {
-            e.preventDefault();
-            handleSplitAndKeepLeftCallback();
-          }
-          break;
-
-        case "w":
-          if (e.ctrlKey || e.metaKey) {
-            e.preventDefault();
-            handleSplitAndKeepRightCallback();
-          }
-          break;
-
-        case "d":
-          if (e.ctrlKey || e.metaKey) {
-            e.preventDefault();
-            handleSeparateAudioCallback();
-          }
-          break;
-      }
-    },
-    [
-      isPlaying,
-      play,
-      pause,
-      handleSplitSelectedElement,
-      handleSplitAndKeepLeftCallback,
-      handleSplitAndKeepRightCallback,
-      handleSeparateAudioCallback,
-    ]
-  );
-
-  useEffect(() => {
-    document.addEventListener("keydown", handleKeyPress);
-    return () => document.removeEventListener("keydown", handleKeyPress);
-  }, [handleKeyPress]);
 };
diff --git a/apps/web/src/lib/waitlist.ts b/apps/web/src/lib/waitlist.ts
index 7b67258b..22b15b78 100644
--- a/apps/web/src/lib/waitlist.ts
+++ b/apps/web/src/lib/waitlist.ts
@@ -1,5 +1,4 @@
-import { db, sql } from "@opencut/db";

-import { waitlist } from "@opencut/db/schema";

+import { db, sql, waitlist } from "@opencut/db";

 

 export async function getWaitlistCount() {

   try {

diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 57e1e808..1f229e6d 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -10,7 +10,7 @@ export async function middleware(request: NextRequest) {
 

   const path = request.nextUrl.pathname;

 

-  if (path === "/editor" && env.NODE_ENV === "production") {

+  if (path.startsWith("/editor") && env.NODE_ENV === "production") {

     const homeUrl = new URL("/", request.url);

     homeUrl.searchParams.set("redirect", request.url);

     return NextResponse.redirect(homeUrl);

diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index e0bb39d0..e291637a 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -12,7 +12,7 @@
     "noEmit": true,
     "esModuleInterop": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -34,9 +34,10 @@
     "**/*.tsx",
     "apps/web/.next/types/**/*.ts",
     "next-env.d.ts",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "src/types/**/*.d.ts"
   ],
   "exclude": [
     "node_modules"
   ]
-}

+}