fix all linter errors

.cursor/rules/codebase-index.mdc

@@ -140,7 +140,6 @@ use-infinite-scroll.ts
 use-keybindings.ts
   export function useKeybindingsListener()
   export function useKeybindingDisabler()
-  export const bindings
 
 use-keyboard-shortcuts-help.ts
   export interface KeyboardShortcut {
@@ -231,7 +230,6 @@ use-timeline-drag-drop.ts
   export function useTimelineDragDrop({␍
   	containerRef,␍
   	zoomLevel,␍
-  	isSnappingEnabled = true,
   }: UseTimelineDragDropProps)
 
 use-timeline-playhead.ts
@@ -1053,7 +1051,7 @@ scene-exporter.ts
   	progress: [progress: number];␍
   	complete: [buffer: ArrayBuffer];␍
   	error: [error: Error];␍
-  	cance...
+  	c...
   export class SceneExporter extends EventEmitter<SceneExporterEvents> {
     renderer: CanvasRenderer
     format: ExportFormat

apps/web/src/app/projects/page-legacy.tsx

@@ -102,7 +102,7 @@ export default function ProjectsPage() {
 		setSelectedProjects(newSelected);
 	};
 
-	const handleSelectAll = ({ checked }: { checked: boolean }) => {
+	const _handleSelectAll = ({ checked }: { checked: boolean }) => {
 		if (checked) {
 			setSelectedProjects(
 				new Set(projectsToDisplay.map((project) => project.id)),
@@ -141,11 +141,11 @@ export default function ProjectsPage() {
 		sortOption,
 	});
 
-	const isAllSelected =
+	const _isAllSelected =
 		projectsToDisplay.length > 0 &&
 		selectedProjects.size === projectsToDisplay.length;
 
-	const hasSomeSelected =
+	const _hasSomeSelected =
 		selectedProjects.size > 0 &&
 		selectedProjects.size < projectsToDisplay.length;
 

apps/web/src/components/editor/draggable-item.tsx

@@ -129,12 +129,14 @@ export function DraggableItem({
 						{shouldShowLabel && (
 							<span
 								className="text-muted-foreground w-full truncate text-left text-[0.7rem]"
-								aria-label={name}
 								title={name}
 							>
-								{name.length > 8
+								<span className="sr-only">{name}</span>
-									? `${name.slice(0, 16)}...${name.slice(-3)}`
+								<span aria-hidden="true">
-									: name}
+									{name.length > 8
+										? `${name.slice(0, 16)}...${name.slice(-3)}`
+										: name}
+								</span>
 							</span>
 						)}
 					</div>
@@ -147,7 +149,8 @@ export function DraggableItem({
 						isHighlighted && highlightClassName,
 					)}
 				>
-					<div
+					<button
+						type="button"
 						className={cn(
 							"flex h-8 w-full cursor-default items-center gap-3 px-1",
 							isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
@@ -161,7 +164,7 @@ export function DraggableItem({
 							{preview}
 						</div>
 						<span className="w-full flex-1 truncate text-sm">{name}</span>
-					</div>
+					</button>
 				</div>
 			)}
 

apps/web/src/components/editor/timeline/bookmarks.tsx

@@ -26,28 +26,30 @@ export function TimelineBookmarksRow({
 	const activeScene = editor.scenes.getActiveScene();
 
 	return (
-		<div
+		<div className="relative h-4 flex-1 overflow-hidden">
-			className="relative h-4 flex-1 overflow-hidden"
-			onWheel={handleWheel}
-			onClick={handleTimelineContentClick}
-			onMouseDown={handleRulerTrackingMouseDown}
-		>
 			<ScrollArea className="scrollbar-hidden w-full" ref={bookmarksScrollRef}>
-				<div
+				<button
-					className="relative h-4 cursor-default select-none"
+					className="relative h-4 w-full cursor-default select-none border-0 bg-transparent p-0"
 					style={{
 						width: `${dynamicTimelineWidth}px`,
 					}}
-					onMouseDown={handleRulerMouseDown}
+					aria-label="Timeline ruler"
+					type="button"
+					onWheel={handleWheel}
+					onClick={handleTimelineContentClick}
+					onMouseDown={(event) => {
+						handleRulerMouseDown(event);
+						handleRulerTrackingMouseDown(event);
+					}}
 				>
-					{activeScene.bookmarks.map((time: number, index: number) => (
+					{activeScene.bookmarks.map((time: number) => (
 						<TimelineBookmark
-							key={`bookmark-row-${index}`}
+							key={`bookmark-row-${time}`}
 							time={time}
 							zoomLevel={zoomLevel}
 						/>
 					))}
-				</div>
+				</button>
 			</ScrollArea>
 		</div>
 	);
@@ -65,23 +67,29 @@ export function TimelineBookmark({
 	const handleBookmarkClick = ({
 		event,
 	}: {
-		event: React.MouseEvent<HTMLDivElement>;
+		event: React.MouseEvent<HTMLButtonElement>;
 	}) => {
 		event.stopPropagation();
 		editor.playback.seek({ time });
 	};
 
 	return (
-		<div
+		<button
-			className="absolute top-0 h-10 w-0.5 cursor-pointer"
+			className="absolute top-0 h-10 w-0.5 cursor-pointer border-0 bg-transparent p-0"
 			style={{
 				left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
 			}}
+			aria-label={`Seek to bookmark at ${time}s`}
+			type="button"
 			onClick={(event) => handleBookmarkClick({ event })}
 		>
 			<div className="text-primary absolute top-[-1px] left-[-5px]">
-				<Bookmark className="fill-primary size-3" />
+				<Bookmark
+					aria-hidden="true"
+					className="fill-primary size-3"
+					focusable="false"
+				/>
 			</div>
-		</div>
+		</button>
 	);
 }

apps/web/src/components/editor/timeline/timeline-ruler.tsx

@@ -47,13 +47,21 @@ export function TimelineRuler({
 
 	return (
 		<div
+			role="slider"
+			tabIndex={0}
+			aria-label="Timeline ruler"
+			aria-valuemin={0}
+			aria-valuemax={effectiveDuration}
+			aria-valuenow={0}
 			className="relative h-4 flex-1 overflow-hidden"
 			onWheel={handleWheel}
 			onClick={handleTimelineContentClick}
 			onMouseDown={handleRulerTrackingMouseDown}
+			onKeyDown={() => {}}
 		>
 			<ScrollArea className="scrollbar-hidden w-full" ref={rulerScrollRef}>
 				<div
+					role="none"
 					ref={rulerRef}
 					className="relative h-4 cursor-default select-none"
 					style={{

apps/web/src/components/footer.tsx

@@ -7,12 +7,12 @@ import { capitalizeFirstLetter } from "@/utils/strings";
 
 type Category = "resources" | "company";
 
-interface Link {
+interface FooterLink {
 	label: string;
 	href: string;
 }
 
-type CategoryLinks = Record<Category, Link[]>;
+type CategoryLinks = Record<Category, FooterLink[]>;
 
 const links: CategoryLinks = {
 	resources: [

apps/web/src/components/providers/editor-provider.tsx

@@ -56,7 +56,7 @@ export function EditorProvider({ projectId, children }: EditorProviderProps) {
 							name: "Untitled Project",
 						});
 						router.replace(`/editor/${newProjectId}`);
-					} catch (createErr) {
+					} catch (_createErr) {
 						setError("Failed to create project");
 						setIsLoading(false);
 					}

apps/web/src/components/storage-provider.tsx

@@ -73,7 +73,7 @@ export function StorageProvider({ children }: StorageProviderProps) {
 		};
 
 		initializeStorage();
-	}, []);
+	}, [editor.project.loadAllProjects]);
 
 	return (
 		<StorageContext.Provider value={status}>{children}</StorageContext.Provider>

apps/web/src/core/managers/timeline-manager.ts

@@ -1,7 +1,6 @@
 import type { EditorCore } from "@/core";
 import type {
 	TrackType,
-	CreateTimelineElement,
 	TimelineTrack,
 	TextElement,
 	TimelineElement,

apps/web/src/hooks/actions/use-editor-actions.ts

@@ -224,7 +224,7 @@ export function useEditorActions() {
 				elements: selectedElements,
 			});
 			const items = results.map(({ track, element }) => {
-				const { id, ...elementWithoutId } = element;
+				const { ...elementWithoutId } = element;
 				return {
 					trackId: track.id,
 					trackType: track.type,

apps/web/src/hooks/timeline/element/use-element-resize.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef, useCallback } from "react";
 import type { TimelineElement, TimelineTrack } from "@/types/timeline";
 import { snapTimeToFrame } from "@/lib/time";
 import { EditorCore } from "@/core";
@@ -48,26 +48,6 @@ export function useTimelineElementResize({
 	const currentStartTimeRef = useRef(element.startTime);
 	const currentDurationRef = useRef(element.duration);
 
-	useEffect(() => {
-		if (!resizing) return;
-
-		const handleDocumentMouseMove = ({ clientX }: MouseEvent) => {
-			updateTrimFromMouseMove({ clientX });
-		};
-
-		const handleDocumentMouseUp = () => {
-			handleResizeEnd();
-		};
-
-		document.addEventListener("mousemove", handleDocumentMouseMove);
-		document.addEventListener("mouseup", handleDocumentMouseUp);
-
-		return () => {
-			document.removeEventListener("mousemove", handleDocumentMouseMove);
-			document.removeEventListener("mouseup", handleDocumentMouseUp);
-		};
-	}, [resizing]);
-
 	const handleResizeStart = ({
 		e,
 		elementId,
@@ -101,15 +81,15 @@ export function useTimelineElementResize({
 		onResizeStateChange?.({ isResizing: true });
 	};
 
-	const canExtendElementDuration = () => {
+	const canExtendElementDuration = useCallback(() => {
 		if (element.type === "text" || element.type === "image") {
 			return true;
 		}
 
 		return false;
-	};
+	}, [element.type]);
 
-	const updateTrimFromMouseMove = ({ clientX }: { clientX: number }) => {
+	const updateTrimFromMouseMove = useCallback(({ clientX }: { clientX: number }) => {
 		if (!resizing) return;
 
 		const deltaX = clientX - resizing.startX;
@@ -277,9 +257,9 @@ export function useTimelineElementResize({
 				currentDurationRef.current = newDuration;
 			}
 		}
-	};
+	}, [resizing, zoomLevel, activeProject.settings.fps, snappingEnabled, editor, findSnapPoints, snapToNearestPoint, element.id, onSnapPointChange, canExtendElementDuration]);
 
-	const handleResizeEnd = () => {
+	const handleResizeEnd = useCallback(() => {
 		if (!resizing) return;
 
 		const finalTrimStart = currentTrimStartRef.current;
@@ -317,7 +297,27 @@ export function useTimelineElementResize({
 		setResizing(null);
 		onResizeStateChange?.({ isResizing: false });
 		onSnapPointChange?.(null);
-	};
+	}, [resizing, editor.timeline, element.id, track.id, onResizeStateChange, onSnapPointChange]);
+
+	useEffect(() => {
+		if (!resizing) return;
+
+		const handleDocumentMouseMove = ({ clientX }: MouseEvent) => {
+			updateTrimFromMouseMove({ clientX });
+		};
+
+		const handleDocumentMouseUp = () => {
+			handleResizeEnd();
+		};
+
+		document.addEventListener("mousemove", handleDocumentMouseMove);
+		document.addEventListener("mouseup", handleDocumentMouseUp);
+
+		return () => {
+			document.removeEventListener("mousemove", handleDocumentMouseMove);
+			document.removeEventListener("mouseup", handleDocumentMouseUp);
+		};
+	}, [resizing, handleResizeEnd, updateTrimFromMouseMove]);
 
 	return {
 		resizing,

apps/web/src/hooks/timeline/use-timeline-drag-drop.ts

@@ -16,13 +16,11 @@ import type { MediaDragData, StickerDragData } from "@/types/drag";
 interface UseTimelineDragDropProps {
 	containerRef: RefObject<HTMLDivElement | null>;
 	zoomLevel: number;
-	isSnappingEnabled?: boolean;
 }
 
 export function useTimelineDragDrop({
 	containerRef,
 	zoomLevel,
-	isSnappingEnabled = true,
 }: UseTimelineDragDropProps) {
 	const editor = useEditor();
 	const [isDragOver, setIsDragOver] = useState(false);
@@ -493,6 +491,7 @@ export function useTimelineDragDrop({
 			executeStickerDrop, 
 			executeMediaDrop, 
 			executeFileDrop,
+			containerRef,
 		],
 	);
 

apps/web/src/hooks/timeline/use-timeline-playhead.ts

@@ -21,15 +21,18 @@ export function useTimelinePlayhead({
 }: UseTimelinePlayheadProps) {
 	const editor = useEditor();
 	const activeProject = editor.project.getActive();
-	const seek = (time: number) => editor.playback.seek({ time });
 	const currentTime = editor.playback.getCurrentTime();
 	const duration = editor.timeline.getTotalDuration();
+	const isPlaying = editor.playback.getIsPlaying();
+
+	const seek = useCallback(
+		({ time }: { time: number }) => editor.playback.seek({ time }),
+		[editor.playback],
+	);
 
-	// Playhead scrubbing state
 	const [isScrubbing, setIsScrubbing] = useState(false);
 	const [scrubTime, setScrubTime] = useState<number | null>(null);
 
-	// Ruler drag detection state
 	const [isDraggingRuler, setIsDraggingRuler] = useState(false);
 	const [hasDraggedRuler, setHasDraggedRuler] = useState(false);
 	const lastMouseXRef = useRef<number>(0);
@@ -37,67 +40,78 @@ export function useTimelinePlayhead({
 	const playheadPosition =
 		isScrubbing && scrubTime !== null ? scrubTime : currentTime;
 
-	const handlePlayheadMouseDown = useCallback(
+	const handleScrub = useCallback(
-		(event: React.MouseEvent) => {
+		({ event }: { event: MouseEvent | React.MouseEvent }) => {
-			event.preventDefault();
+			const ruler = rulerRef.current;
-			event.stopPropagation(); // prevent ruler drag from triggering
+			if (!ruler) return;
-			setIsScrubbing(true);
+			const rulerRect = ruler.getBoundingClientRect();
-			handleScrub(event);
+			const relativeMouseX = event.clientX - rulerRect.left;
+
+			const timelineContentWidth =
+				duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+
+			const clampedMouseX = Math.max(
+				0,
+				Math.min(timelineContentWidth, relativeMouseX),
+			);
+
+			const rawTime = Math.max(
+				0,
+				Math.min(
+					duration,
+					clampedMouseX /
+						(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
+				),
+			);
+			const framesPerSecond = activeProject.settings.fps;
+			const time = getSnappedSeekTime({
+				rawTime,
+				duration,
+				fps: framesPerSecond,
+			});
+
+			setScrubTime(time);
+			seek({ time });
+
+			lastMouseXRef.current = event.clientX;
 		},
-		[duration, zoomLevel],
+		[duration, zoomLevel, seek, rulerRef, activeProject.settings.fps],
+	);
+
+	const handlePlayheadMouseDown = useCallback(
+		({ event }: { event: React.MouseEvent }) => {
+			event.preventDefault();
+			event.stopPropagation();
+			setIsScrubbing(true);
+			handleScrub({ event });
+		},
+		[handleScrub],
 	);
 
 	const handleRulerMouseDown = useCallback(
-		(event: React.MouseEvent) => {
+		({ event }: { event: React.MouseEvent }) => {
-			// only handle left mouse button
 			if (event.button !== 0) return;
 
-			// don't interfere if clicking on the playhead itself
 			if (playheadRef?.current?.contains(event.target as Node)) return;
 
 			event.preventDefault();
 			setIsDraggingRuler(true);
 			setHasDraggedRuler(false);
 
-			// start scrubbing immediately
 			setIsScrubbing(true);
-			handleScrub(event);
+			handleScrub({ event });
 		},
-		[duration, zoomLevel],
+		[handleScrub, playheadRef],
 	);
 
-	const handleScrub = useCallback(
+	const handlePlayheadMouseDownEvent = useCallback(
-		(event: MouseEvent | React.MouseEvent) => {
+		(event: React.MouseEvent) => handlePlayheadMouseDown({ event }),
-			const ruler = rulerRef.current;
+		[handlePlayheadMouseDown],
-			if (!ruler) return;
+	);
-			const rect = ruler.getBoundingClientRect();
-			const rawX = event.clientX - rect.left;
 
-			// get the timeline content width based on duration and zoom
+	const handleRulerMouseDownEvent = useCallback(
-			const timelineContentWidth =
+		(event: React.MouseEvent) => handleRulerMouseDown({ event }),
-				duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+		[handleRulerMouseDown],
-
-			// constrain x to be within the timeline content bounds
-			const x = Math.max(0, Math.min(timelineContentWidth, rawX));
-
-			const rawTime = Math.max(
-				0,
-				Math.min(
-					duration,
-					x / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
-				),
-			);
-			// use frame snapping for playhead scrubbing
-			const fps = activeProject.settings.fps;
-			const time = getSnappedSeekTime({ rawTime, duration, fps });
-
-			setScrubTime(time);
-			seek(time); // update video preview in real time
-
-			// store mouse position for auto-scrolling
-			lastMouseXRef.current = event.clientX;
-		},
-		[duration, zoomLevel, seek, rulerRef, activeProject.settings.fps],
 	);
 
 	useEdgeAutoScroll({
@@ -111,30 +125,30 @@ export function useTimelinePlayhead({
 	useEffect(() => {
 		if (!isScrubbing) return;
 
-		const onMouseMove = (event: MouseEvent) => {
+		const handleMouseMove = ({ event }: { event: MouseEvent }) => {
-			handleScrub(event);
+			handleScrub({ event });
-			// mark that we've dragged if ruler drag is active
 			if (isDraggingRuler) {
 				setHasDraggedRuler(true);
 			}
 		};
 
-		const onMouseUp = (event: MouseEvent) => {
+		const handleMouseUp = ({ event }: { event: MouseEvent }) => {
 			setIsScrubbing(false);
-			if (scrubTime !== null) seek(scrubTime); // finalize seek
+			if (scrubTime !== null) seek({ time: scrubTime });
 			setScrubTime(null);
 
-			// handle ruler click vs drag
 			if (isDraggingRuler) {
 				setIsDraggingRuler(false);
-				// if we didn't drag, treat it as a click-to-seek
 				if (!hasDraggedRuler) {
-					handleScrub(event);
+					handleScrub({ event });
 				}
 				setHasDraggedRuler(false);
 			}
 		};
 
+		const onMouseMove = (event: MouseEvent) => handleMouseMove({ event });
+		const onMouseUp = (event: MouseEvent) => handleMouseUp({ event });
+
 		window.addEventListener("mousemove", onMouseMove);
 		window.addEventListener("mouseup", onMouseUp);
 
@@ -149,49 +163,45 @@ export function useTimelinePlayhead({
 		handleScrub,
 		isDraggingRuler,
 		hasDraggedRuler,
-		// edge auto scroll hook is independent
 	]);
 
 	useEffect(() => {
-		// only auto-scroll during playback, not during manual interactions
+		if (!isPlaying || isScrubbing) return;
-		if (!editor.playback.getIsPlaying() || isScrubbing) return;
 
 		const rulerViewport = rulerScrollRef.current;
 		const tracksViewport = tracksScrollRef.current;
 		if (!rulerViewport || !tracksViewport) return;
 
-		const playheadPx =
+		const playheadPixels =
 			playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
 		const viewportWidth = rulerViewport.clientWidth;
-		const scrollMin = 0;
+		const scrollMinimum = 0;
-		const scrollMax = rulerViewport.scrollWidth - viewportWidth;
+		const scrollMaximum = rulerViewport.scrollWidth - viewportWidth;
 
-		// only auto-scroll if playhead is completely out of view (no buffer)
 		const needsScroll =
-			playheadPx < rulerViewport.scrollLeft ||
+			playheadPixels < rulerViewport.scrollLeft ||
-			playheadPx > rulerViewport.scrollLeft + viewportWidth;
+			playheadPixels > rulerViewport.scrollLeft + viewportWidth;
 
 		if (needsScroll) {
-			// center the playhead in the viewport
 			const desiredScroll = Math.max(
-				scrollMin,
+				scrollMinimum,
-				Math.min(scrollMax, playheadPx - viewportWidth / 2),
+				Math.min(scrollMaximum, playheadPixels - viewportWidth / 2),
 			);
 			rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll;
 		}
 	}, [
 		playheadPosition,
-		duration,
 		zoomLevel,
 		rulerScrollRef,
 		tracksScrollRef,
 		isScrubbing,
+		isPlaying,
 	]);
 
 	return {
 		playheadPosition,
-		handlePlayheadMouseDown,
+		handlePlayheadMouseDown: handlePlayheadMouseDownEvent,
-		handleRulerMouseDown,
+		handleRulerMouseDown: handleRulerMouseDownEvent,
 		isDraggingRuler,
 	};
 }

apps/web/src/hooks/use-keybindings.ts

@@ -3,7 +3,7 @@ import { invokeAction } from "@/lib/actions";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 
 /**
- * A composable that hooks to the caller component's
+ * a composable that hooks to the caller component's
  * lifecycle and hooks to the keyboard events to fire
  * the appropriate actions based on keybindings
  */
@@ -13,7 +13,7 @@ export function useKeybindingsListener() {
 
 	useEffect(() => {
 		const handleKeyDown = (ev: KeyboardEvent) => {
-			// Do not check keybinds if the mode is disabled
+			// do not check keybinds if the mode is disabled
 			if (!keybindingsEnabled) return;
 			// ignore key events if user is changing keybindings
 			if (isRecording) return;
@@ -35,20 +35,22 @@ export function useKeybindingsListener() {
 
 			ev.preventDefault();
 
-			// Handle actions with default arguments
+		switch (boundAction) {
-			let actionArgs: any;
+			case "seek-forward":
-
+				invokeAction("seek-forward", { seconds: 1 }, "keypress");
-			if (boundAction === "seek-forward") {
+				break;
-				actionArgs = { seconds: 1 };
+			case "seek-backward":
-			} else if (boundAction === "seek-backward") {
+				invokeAction("seek-backward", { seconds: 1 }, "keypress");
-				actionArgs = { seconds: 1 };
+				break;
-			} else if (boundAction === "jump-forward") {
+			case "jump-forward":
-				actionArgs = { seconds: 5 };
+				invokeAction("jump-forward", { seconds: 5 }, "keypress");
-			} else if (boundAction === "jump-backward") {
+				break;
-				actionArgs = { seconds: 5 };
+			case "jump-backward":
-			}
+				invokeAction("jump-backward", { seconds: 5 }, "keypress");
-
+				break;
-			invokeAction(boundAction, actionArgs, "keypress");
+			default:
+				invokeAction(boundAction, undefined, "keypress");
+		}
 		};
 
 		document.addEventListener("keydown", handleKeyDown);
@@ -60,7 +62,7 @@ export function useKeybindingsListener() {
 }
 
 /**
- * This composable allows for the UI component to be disabled if the component in question is mounted
+ * this composable allows for the UI component to be disabled if the component in question is mounted
  */
 export function useKeybindingDisabler() {
 	const { disableKeybindings, enableKeybindings } = useKeybindingsStore();
@@ -70,6 +72,3 @@ export function useKeybindingDisabler() {
 		enableKeybindings,
 	};
 }
-
-// Export the bindings for backward compatibility
-export const bindings = {};

apps/web/src/lib/actions/registry.ts

@@ -6,19 +6,21 @@ import type {
 	TActionArgsMap,
 	TArgOfAction,
 	TInvocationTrigger,
-	TBoundActionList,
 } from "./types";
 
-const boundActions: TBoundActionList = {};
+type ActionHandler = (arg: unknown, trigger?: TInvocationTrigger) => void;
+const boundActions: Partial<Record<TAction, ActionHandler[]>> = {};
 
 export function bindAction<A extends TAction>(
 	action: A,
 	handler: TActionFunc<A>,
 ) {
-	if (boundActions[action]) {
+	const handlers = boundActions[action];
-		boundActions[action]?.push(handler);
+	const typedHandler = handler as ActionHandler;
+	if (handlers) {
+		handlers.push(typedHandler);
 	} else {
-		boundActions[action] = [handler] as any;
+		boundActions[action] = [typedHandler];
 	}
 }
 
@@ -26,9 +28,11 @@ export function unbindAction<A extends TAction>(
 	action: A,
 	handler: TActionFunc<A>,
 ) {
-	boundActions[action] = boundActions[action]?.filter(
+	const handlers = boundActions[action];
-		(x) => x !== handler,
+	if (!handlers) return;
-	) as any;
+
+	const typedHandler = handler as ActionHandler;
+	boundActions[action] = handlers.filter((h) => h !== typedHandler);
 
 	if (boundActions[action]?.length === 0) {
 		delete boundActions[action];
@@ -41,7 +45,11 @@ type InvokeActionFunc = {
 		args?: undefined,
 		trigger?: TInvocationTrigger,
 	): void;
-	<A extends TActionWithArgs>(action: A, args: TActionArgsMap[A]): void;
+	<A extends TActionWithArgs>(
+		action: A,
+		args: TActionArgsMap[A],
+		trigger?: TInvocationTrigger,
+	): void;
 };
 
 export const invokeAction: InvokeActionFunc = <A extends TAction>(
@@ -49,5 +57,5 @@ export const invokeAction: InvokeActionFunc = <A extends TAction>(
 	args?: TArgOfAction<A>,
 	trigger?: TInvocationTrigger,
 ) => {
-	boundActions[action]?.forEach((handler) => (handler as any)(args, trigger));
+	boundActions[action]?.forEach((handler) => handler(args, trigger));
 };

apps/web/src/lib/time.ts

@@ -57,7 +57,7 @@ export function parseTimeCode({
 				const parts = cleanTimeCode.split(":");
 				if (parts.length !== 2) return null;
 				const [minutes, seconds] = parts.map((part) => parseInt(part, 10));
-				if (isNaN(minutes) || isNaN(seconds)) return null;
+				if (Number.isNaN(minutes) || Number.isNaN(seconds)) return null;
 				if (minutes < 0 || seconds < 0 || seconds >= 60) return null;
 				return minutes * 60 + seconds;
 			}
@@ -68,7 +68,12 @@ export function parseTimeCode({
 				const [hours, minutes, seconds] = parts.map((part) =>
 					parseInt(part, 10),
 				);
-				if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return null;
+				if (
+					Number.isNaN(hours) ||
+					Number.isNaN(minutes) ||
+					Number.isNaN(seconds)
+				)
+					return null;
 				if (
 					hours < 0 ||
 					minutes < 0 ||
@@ -87,10 +92,10 @@ export function parseTimeCode({
 					parseInt(part, 10),
 				);
 				if (
-					isNaN(hours) ||
+					Number.isNaN(hours) ||
-					isNaN(minutes) ||
+					Number.isNaN(minutes) ||
-					isNaN(seconds) ||
+					Number.isNaN(seconds) ||
-					isNaN(centiseconds)
+					Number.isNaN(centiseconds)
 				)
 					return null;
 				if (
@@ -112,7 +117,12 @@ export function parseTimeCode({
 				const [hours, minutes, seconds, frames] = parts.map((part) =>
 					parseInt(part, 10),
 				);
-				if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) || isNaN(frames))
+				if (
+					Number.isNaN(hours) ||
+					Number.isNaN(minutes) ||
+					Number.isNaN(seconds) ||
+					Number.isNaN(frames)
+				)
 					return null;
 				if (
 					hours < 0 ||
@@ -141,7 +151,7 @@ export function guessTimeCodeFormat({
 
 	const numbers = timeCode.split(":");
 
-	if (!numbers.every((n) => !isNaN(Number(n)))) return null;
+	if (!numbers.every((n) => !Number.isNaN(Number(n)))) return null;
 
 	if (numbers.length === 2) return "MM:SS";
 	if (numbers.length === 3) return "HH:MM:SS";

apps/web/src/services/renderer/nodes/image-node.ts

@@ -16,13 +16,14 @@ export class ImageNode extends BaseNode<ImageNodeParams> {
 	}
 
 	private async load() {
-		this.image = new Image();
+		const image = new Image();
+		this.image = image;
 		const url = URL.createObjectURL(this.params.file);
 
 		await new Promise<void>((resolve, reject) => {
-			this.image!.onload = () => resolve();
+			image.onload = () => resolve();
-			this.image!.onerror = () => reject(new Error("Image load failed"));
+			image.onerror = () => reject(new Error("Image load failed"));
-			this.image!.src = url;
+			image.src = url;
 		});
 
 		URL.revokeObjectURL(url);

apps/web/src/services/renderer/nodes/sticker-node.ts

@@ -25,17 +25,18 @@ export class StickerNode extends BaseNode<StickerNodeParams> {
 	}
 
 	private async load() {
-		this.image = new Image();
+		const image = new Image();
+		this.image = image;
 		const color = this.params.color
 			? `&color=${encodeURIComponent(this.params.color)}`
 			: "";
 		const url = `https://api.iconify.design/${this.params.iconName}.svg?width=200&height=200${color}`;
 
 		await new Promise<void>((resolve, reject) => {
-			this.image!.onload = () => resolve();
+			image.onload = () => resolve();
-			this.image!.onerror = () =>
+			image.onerror = () =>
 				reject(new Error(`Failed to load sticker: ${this.params.iconName}`));
-			this.image!.src = url;
+			image.src = url;
 		});
 	}
 

apps/web/src/services/renderer/scene-exporter.ts

@@ -81,7 +81,7 @@ export class SceneExporter extends EventEmitter<SceneExporterEvents> {
 			target: new BufferTarget(),
 		});
 
-		const videoSource = new CanvasSource(this.renderer.canvas as any, {
+		const videoSource = new CanvasSource(this.renderer.canvas, {
 			codec: this.format === "webm" ? "vp9" : "avc",
 			bitrate: qualityMap[this.quality],
 		});

apps/web/src/stores/keybindings-store.ts

@@ -93,7 +93,7 @@ export const useKeybindingsStore = create<KeybindingsState>()(
 
 			importKeybindings: (config: KeybindingConfig) => {
 				// Validate all keys and actions
-				for (const [key, action] of Object.entries(config)) {
+				for (const [key] of Object.entries(config)) {
 					// Validate the key format
 					if (typeof key !== "string" || key.length === 0) {
 						throw new Error(`Invalid key format: ${key}`);