1 files changed, 46 insertions, 3 deletions

diff --git a/apps/web/src/hooks/actions/use-editor-actions.ts b/apps/web/src/hooks/actions/use-editor-actions.ts
index 1ce890cb..e4f378d6 100644
--- a/apps/web/src/hooks/actions/use-editor-actions.ts
+++ b/apps/web/src/hooks/actions/use-editor-actions.ts
@@ -4,13 +4,19 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { useActionHandler } from "@/hooks/actions/use-action-handler";
 import { useEditor } from "../use-editor";
 import { useElementSelection } from "../timeline/element/use-element-selection";
+import { useKeyframeSelection } from "../timeline/element/use-keyframe-selection";
 import { getElementsAtTime } from "@/lib/timeline";
 
 export function useEditorActions() {
 	const editor = useEditor();
 	const activeProject = editor.project.getActive();
 	const { selectedElements, setElementSelection } = useElementSelection();
-	const { clipboard, setClipboard, toggleSnapping } = useTimelineStore();
+	const { selectedKeyframes, clearKeyframeSelection } = useKeyframeSelection();
+	const clipboard = useTimelineStore((s) => s.clipboard);
+	const setClipboard = useTimelineStore((s) => s.setClipboard);
+	const toggleSnapping = useTimelineStore((s) => s.toggleSnapping);
+	const rippleEditingEnabled = useTimelineStore((s) => s.rippleEditingEnabled);
+	const toggleRippleEditing = useTimelineStore((s) => s.toggleRippleEditing);
 
 	useActionHandler(
 		"toggle-play",
@@ -158,11 +164,21 @@ export function useEditorActions() {
 
 			if (elementsToSplit.length === 0) return;
 
-			editor.timeline.splitElements({
+			const rightSideElements = editor.timeline.splitElements({
 				elements: elementsToSplit,
 				splitTime: currentTime,
 				retainSide: "right",
+				rippleEnabled: rippleEditingEnabled,
 			});
+
+			if (rippleEditingEnabled && rightSideElements.length > 0) {
+				const firstRightElement = editor.timeline.getElementsWithTracks({
+					elements: [rightSideElements[0]],
+				})[0];
+				if (firstRightElement) {
+					editor.playback.seek({ time: firstRightElement.element.startTime });
+				}
+			}
 		},
 		undefined,
 	);
@@ -193,11 +209,17 @@ export function useEditorActions() {
 	useActionHandler(
 		"delete-selected",
 		() => {
+			if (selectedKeyframes.length > 0) {
+				editor.timeline.removeKeyframes({ keyframes: selectedKeyframes });
+				clearKeyframeSelection();
+				return;
+			}
 			if (selectedElements.length === 0) {
 				return;
 			}
 			editor.timeline.deleteElements({
 				elements: selectedElements,
+				rippleEnabled: rippleEditingEnabled,
 			});
 			editor.selection.clearSelection();
 		},
@@ -219,6 +241,19 @@ export function useEditorActions() {
 	);
 
 	useActionHandler(
+		"deselect-all",
+		() => {
+			setElementSelection({ elements: [] });
+			clearKeyframeSelection();
+			const activeElement = document.activeElement;
+			if (activeElement instanceof HTMLButtonElement) {
+				activeElement.blur();
+			}
+		},
+		undefined,
+	);
+
+	useActionHandler(
 		"duplicate-selected",
 		() => {
 			editor.timeline.duplicateElements({
@@ -261,7 +296,7 @@ export function useEditorActions() {
 				elements: selectedElements,
 			});
 			const items = results.map(({ track, element }) => {
-				const { ...elementWithoutId } = element;
+				const { id: _, ...elementWithoutId } = element;
 				return {
 					trackId: track.id,
 					trackType: track.type,
@@ -296,6 +331,14 @@ export function useEditorActions() {
 	);
 
 	useActionHandler(
+		"toggle-ripple-editing",
+		() => {
+			toggleRippleEditing();
+		},
+		undefined,
+	);
+
+	useActionHandler(
 		"undo",
 		() => {
 			editor.command.undo();