3 files changed, 142 insertions, 79 deletions
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index ea2dacb9..7706417a 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -2,78 +2,40 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 
 interface PanelState {
-  // Horizontal panel sizes
+  // Panel sizes as percentages
   toolsPanel: number;
   previewPanel: number;
   propertiesPanel: number;
-
-  // Vertical panel sizes
   mainContent: number;
   timeline: number;
 
-  // Flag to prevent initial overwrites
-  isInitialized: boolean;
-
   // Actions
   setToolsPanel: (size: number) => void;
   setPreviewPanel: (size: number) => void;
   setPropertiesPanel: (size: number) => void;
   setMainContent: (size: number) => void;
   setTimeline: (size: number) => void;
-  setInitialized: () => void;
 }
 
 export const usePanelStore = create<PanelState>()(
   persist(
-    (set, get) => ({
-      // Default sizes
-      toolsPanel: 20,
-      previewPanel: 60,
+    (set) => ({
+      // Default sizes - optimized for responsiveness
+      toolsPanel: 25,
+      previewPanel: 75,
       propertiesPanel: 20,
-      mainContent: 50,
-      timeline: 50,
-      isInitialized: false,
+      mainContent: 70,
+      timeline: 30,
 
       // Actions
-      setToolsPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ toolsPanel: size });
-      },
-      setPreviewPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ previewPanel: size });
-      },
-      setPropertiesPanel: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ propertiesPanel: size });
-      },
-      setMainContent: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ mainContent: size });
-      },
-      setTimeline: (size) => {
-        const state = get();
-        if (!state.isInitialized) return;
-        set({ timeline: size });
-      },
-      setInitialized: () => {
-        console.log("Panel store initialized for resize events");
-        set({ isInitialized: true });
-      },
+      setToolsPanel: (size) => set({ toolsPanel: size }),
+      setPreviewPanel: (size) => set({ previewPanel: size }),
+      setPropertiesPanel: (size) => set({ propertiesPanel: size }),
+      setMainContent: (size) => set({ mainContent: size }),
+      setTimeline: (size) => set({ timeline: size }),
     }),
     {
       name: "panel-sizes",
-      partialize: (state) => ({
-        toolsPanel: state.toolsPanel,
-        previewPanel: state.previewPanel,
-        propertiesPanel: state.propertiesPanel,
-        mainContent: state.mainContent,
-        timeline: state.timeline,
-      }),
     }
   )
 );
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 3c0bfdec..a4794b7f 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -6,15 +6,20 @@ interface PlaybackStore extends PlaybackState, PlaybackControls {
   setCurrentTime: (time: number) => void;
 }
 
-let playbackTimer: NodeJS.Timeout | null = null;
+let playbackTimer: number | null = null;
 
 const startTimer = (store: any) => {
-  if (playbackTimer) clearInterval(playbackTimer);
+  if (playbackTimer) cancelAnimationFrame(playbackTimer);
   
-  playbackTimer = setInterval(() => {
+  // Use requestAnimationFrame for smoother updates
+  const updateTime = () => {
     const state = store();
     if (state.isPlaying && state.currentTime < state.duration) {
-      const newTime = state.currentTime + 0.1;
+      const now = performance.now();
+      const delta = (now - lastUpdate) / 1000; // Convert to seconds
+      lastUpdate = now;
+      
+      const newTime = state.currentTime + (delta * state.speed);
       if (newTime >= state.duration) {
         state.pause();
       } else {
@@ -23,12 +28,16 @@ const startTimer = (store: any) => {
         window.dispatchEvent(new CustomEvent('playback-update', { detail: { time: newTime } }));
       }
     }
-  }, 100);
+    playbackTimer = requestAnimationFrame(updateTime);
+  };
+
+  let lastUpdate = performance.now();
+  playbackTimer = requestAnimationFrame(updateTime);
 };
 
 const stopTimer = () => {
   if (playbackTimer) {
-    clearInterval(playbackTimer);
+    cancelAnimationFrame(playbackTimer);
     playbackTimer = null;
   }
 };
@@ -38,6 +47,7 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
   currentTime: 0,
   duration: 0,
   volume: 1,
+  speed: 1.0,
 
   play: () => {
     set({ isPlaying: true });
@@ -64,10 +74,20 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
     set({ currentTime: clampedTime });
     
     // Notify video elements to seek
-    window.dispatchEvent(new CustomEvent('playback-seek', { detail: { time: clampedTime } }));
+    const event = new CustomEvent('playback-seek', { detail: { time: clampedTime } });
+    window.dispatchEvent(event);
   },
   
   setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }),
+  
+  setSpeed: (speed: number) => {
+    const newSpeed = Math.max(0.1, Math.min(2.0, speed));
+    set({ speed: newSpeed });
+    
+    const event = new CustomEvent('playback-speed', { detail: { speed: newSpeed } });
+    window.dispatchEvent(event);
+  },
+
   setDuration: (duration: number) => set({ duration }),
   setCurrentTime: (time: number) => set({ currentTime: time }),
 })); 
 \ No newline at end of file
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index c569ae11..e1474bae 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -20,6 +20,15 @@ export interface TimelineTrack {
 
 interface TimelineStore {
   tracks: TimelineTrack[];
+  history: TimelineTrack[][];
+  redoStack: TimelineTrack[][];
+
+  // Multi-selection
+  selectedClips: { trackId: string; clipId: string }[];
+  selectClip: (trackId: string, clipId: string, multi?: boolean) => void;
+  deselectClip: (trackId: string, clipId: string) => void;
+  clearSelectedClips: () => void;
+  setSelectedClips: (clips: { trackId: string; clipId: string }[]) => void;
 
   // Actions
   addTrack: (type: "video" | "audio" | "effects") => string;
@@ -46,12 +55,67 @@ interface TimelineStore {
 
   // Computed values
   getTotalDuration: () => number;
+
+  // New actions
+  undo: () => void;
+  redo: () => void;
+  pushHistory: () => void;
 }
 
 export const useTimelineStore = create<TimelineStore>((set, get) => ({
   tracks: [],
+  history: [],
+  redoStack: [],
+  selectedClips: [],
+
+  pushHistory: () => {
+    const { tracks, history, redoStack } = get();
+    // Deep copy tracks
+    set({ 
+      history: [...history, JSON.parse(JSON.stringify(tracks))],
+      redoStack: [] // Clear redo stack when new action is performed
+    });
+  },
+
+  undo: () => {
+    const { history, redoStack, tracks } = get();
+    if (history.length === 0) return;
+    const prev = history[history.length - 1];
+    set({ 
+      tracks: prev, 
+      history: history.slice(0, -1),
+      redoStack: [...redoStack, JSON.parse(JSON.stringify(tracks))] // Add current state to redo stack
+    });
+  },
+
+  selectClip: (trackId, clipId, multi = false) => {
+    set((state) => {
+      const exists = state.selectedClips.some(
+        (c) => c.trackId === trackId && c.clipId === clipId
+      );
+      if (multi) {
+        // Toggle selection
+        return exists
+          ? { selectedClips: state.selectedClips.filter((c) => !(c.trackId === trackId && c.clipId === clipId)) }
+          : { selectedClips: [...state.selectedClips, { trackId, clipId }] };
+      } else {
+        return { selectedClips: [{ trackId, clipId }] };
+      }
+    });
+  },
+  deselectClip: (trackId, clipId) => {
+    set((state) => ({
+      selectedClips: state.selectedClips.filter((c) => !(c.trackId === trackId && c.clipId === clipId)),
+    }));
+  },
+  clearSelectedClips: () => {
+    set({ selectedClips: [] });
+  },
+
+  setSelectedClips: (clips) => set({ selectedClips: clips }),
 
   addTrack: (type) => {
+    get().pushHistory();
     const newTrack: TimelineTrack = {
       id: crypto.randomUUID(),
       name: `${type.charAt(0).toUpperCase() + type.slice(1)} Track`,
@@ -66,12 +130,14 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   removeTrack: (trackId) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.filter((track) => track.id !== trackId),
     }));
   },
 
   addClipToTrack: (trackId, clipData) => {
+    get().pushHistory();
     const newClip: TimelineClip = {
       ...clipData,
       id: crypto.randomUUID(),
@@ -90,19 +156,21 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   removeClipFromTrack: (trackId, clipId) => {
+    get().pushHistory();
     set((state) => ({
-      tracks: state.tracks.map((track) =>
-        track.id === trackId
-          ? {
-              ...track,
-              clips: track.clips.filter((clip) => clip.id !== clipId),
-            }
-          : track
-      ),
+      tracks: state.tracks
+        .map((track) =>
+          track.id === trackId
+            ? { ...track, clips: track.clips.filter((clip) => clip.id !== clipId) }
+            : track
+        )
+        // Remove track if it becomes empty
+        .filter((track) => track.clips.length > 0),
     }));
   },
 
   moveClipToTrack: (fromTrackId, toTrackId, clipId) => {
+    get().pushHistory();
     set((state) => {
       const fromTrack = state.tracks.find((track) => track.id === fromTrackId);
       const clipToMove = fromTrack?.clips.find((clip) => clip.id === clipId);
@@ -110,25 +178,29 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
       if (!clipToMove) return state;
 
       return {
-        tracks: state.tracks.map((track) => {
-          if (track.id === fromTrackId) {
-            return {
-              ...track,
-              clips: track.clips.filter((clip) => clip.id !== clipId),
-            };
-          } else if (track.id === toTrackId) {
-            return {
-              ...track,
-              clips: [...track.clips, clipToMove],
-            };
-          }
-          return track;
-        }),
+        tracks: state.tracks
+          .map((track) => {
+            if (track.id === fromTrackId) {
+              return {
+                ...track,
+                clips: track.clips.filter((clip) => clip.id !== clipId),
+              };
+            } else if (track.id === toTrackId) {
+              return {
+                ...track,
+                clips: [...track.clips, clipToMove],
+              };
+            }
+            return track;
+          })
+          // Remove track if it becomes empty
+          .filter((track) => track.clips.length > 0),
       };
     });
   },
 
   updateClipTrim: (trackId, clipId, trimStart, trimEnd) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.map((track) =>
         track.id === trackId
@@ -144,6 +216,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   updateClipStartTime: (trackId, clipId, startTime) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.map((track) =>
         track.id === trackId
@@ -159,6 +232,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
   },
 
   toggleTrackMute: (trackId) => {
+    get().pushHistory();
     set((state) => ({
       tracks: state.tracks.map((track) =>
         track.id === trackId ? { ...track, muted: !track.muted } : track
@@ -180,4 +254,11 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
 
     return Math.max(...trackEndTimes, 0);
   },
+
+  redo: () => {
+    const { redoStack } = get();
+    if (redoStack.length === 0) return;
+    const next = redoStack[redoStack.length - 1];
+    set({ tracks: next, redoStack: redoStack.slice(0, -1) });
+  },
 }));