diff --git a/.cursor/rules/codebase-index.mdc b/.cursor/rules/codebase-index.mdc
index 9b2d6585..0d576bc6 100644
--- a/.cursor/rules/codebase-index.mdc
+++ b/.cursor/rules/codebase-index.mdc
@@ -18,9 +18,6 @@ When implementing new features:
 ```typescript
 ## apps/web/src/constants
 
-captions-constants.ts
-  export const LANGUAGES: Language[]
-
 editor-constants.ts
   export const PLATFORM_LAYOUTS: Record<TPlatformLayout, string>
   export const PANEL_CONFIG
@@ -44,6 +41,9 @@ font-constants.ts
   export const getGoogleFonts = (): FontOption[] => ...
   export const getSystemFonts = (): FontOption[] => ...
 
+language-constants.ts
+  export const LANGUAGES
+
 project-constants.ts
   export const DEFAULT_CANVAS_PRESETS: TCanvasSize[]
   export const FPS_PRESETS
@@ -57,27 +57,27 @@ site-constants.ts
   export const SITE_URL
   export const SITE_INFO
   export type ExternalTool = {
-    name: string;
-    description: string;
-    url: string;
-    icon: React.ElementType;
+  	name: string;
+  	description: string;
+  	url: string;
+  	icon: React.ElementType;
   }
   export const EXTERNAL_TOOLS: ExternalTool[]
   export const DEFAULT_LOGO_URL
   export const SOCIAL_LINKS
   export type Sponsor = {
-    name: string;
-    url: string;
-    logo: string;
-    description: string;
+  	name: string;
+  	url: string;
+  	logo: string;
+  	description: string;
   }
   export const SPONSORS: Sponsor[]
 
 stickers-constants.ts
   export const STICKER_CATEGORIES
   export const STICKER_CATEGORY_CONFIG: Record<
-    (typeof STICKER_CATEGORIES)[number],
-    string | undefined
+  	(typeof STICKER_CATEGORIES)[number],
+  	string | undefined
   >
 
 text-constants.ts
@@ -91,6 +91,7 @@ timeline-constants.tsx
   export const TRACK_ICONS: Record<TrackType, React.ReactNode>
 
 transcription-constants.ts
+  export const TRANSCRIPTION_LANGUAGES
   export const TRANSCRIPTION_MODELS: TranscriptionModel[]
   export const DEFAULT_TRANSCRIPTION_MODEL: TranscriptionModelId
   export const DEFAULT_CHUNK_LENGTH_SECONDS
@@ -122,18 +123,18 @@ use-editor.ts
 
 use-file-upload.ts
   export function useFileUpload({
-    accept,
-    multiple,
-    onFilesSelected,
+  	accept,
+  	multiple,
+  	onFilesSelected,
   }: UseFileUploadOptions = {})
 
 use-infinite-scroll.ts
   export function useInfiniteScroll({
-    onLoadMore,
-    hasMore,
-    isLoading,
-    threshold = 200,
-    enabled = true,
+  	onLoadMore,
+  	hasMore,
+  	isLoading,
+  	threshold = 200,
+  	enabled = true,
   }: UseInfiniteScrollOptions)
 
 use-keybindings.ts
@@ -152,32 +153,35 @@ use-keyboard-shortcuts-help.ts
   }
   export function useKeyboardShortcutsHelp()
 
+use-mobile.ts
+  export function useIsMobile()
+
 use-raf-loop.ts
   export function useRafLoop(callback: ({ time }: { time: number }) => void)
 
 use-reveal-item.ts
   export function useRevealItem(
-    highlightId: string | null,
-    onClearHighlight: () => void,
-    highlightDuration = 1000,
+  	highlightId: string | null,
+  	onClearHighlight: () => void,
+  	highlightDuration = 1000,
   )
 
 use-sound-search.ts
   export function useSoundSearch({
-    query,
-    commercialOnly,
+  	query,
+  	commercialOnly,
   }: {
-    query: string;
-    commercialOnly: boolean;
+  	query: string;
+  	commercialOnly: boolean;
   })
 
 ## apps/web/src/hooks/actions
 
 use-action-handler.ts
   export function useActionHandler(
-    action: A,
-    handler: TActionFunc<A>,
-    isActive: TActionHandlerOptions,
+  	action: A,
+  	handler: TActionFunc<A>,
+  	isActive: TActionHandlerOptions,
   )
 
 use-editor-actions.ts
@@ -187,69 +191,69 @@ use-editor-actions.ts
 
 use-edge-auto-scroll.ts
   export function useEdgeAutoScroll({
-    isActive,
-    getMouseClientX,
-    rulerScrollRef,
-    tracksScrollRef,
-    contentWidth,
-    edgeThreshold = 100,
-    maxScrollSpeed = 15,
+  	isActive,
+  	getMouseClientX,
+  	rulerScrollRef,
+  	tracksScrollRef,
+  	contentWidth,
+  	edgeThreshold = 100,
+  	maxScrollSpeed = 15,
   }: UseEdgeAutoScrollParams): void
 
 use-scroll-sync.ts
   export function useScrollSync({
-    rulerScrollRef,
-    tracksScrollRef,
-    trackLabelsScrollRef,
-    bookmarksScrollRef,
+  	rulerScrollRef,
+  	tracksScrollRef,
+  	trackLabelsScrollRef,
+  	bookmarksScrollRef,
   }: UseScrollSyncProps)
 
 use-selection-box.ts
   export function useSelectionBox({
-    containerRef,
-    onSelectionComplete,
-    isEnabled = true,
-    tracksScrollRef,
-    zoomLevel,
+  	containerRef,
+  	onSelectionComplete,
+  	isEnabled = true,
+  	tracksScrollRef,
+  	zoomLevel,
   }: UseSelectionBoxProps)
 
 use-snap-indicator-position.ts
   export function useSnapIndicatorPosition({
-    snapPoint,
-    zoomLevel,
-    tracks,
-    timelineRef,
-    trackLabelsRef,
-    tracksScrollRef,
+  	snapPoint,
+  	zoomLevel,
+  	tracks,
+  	timelineRef,
+  	trackLabelsRef,
+  	tracksScrollRef,
   }: UseSnapIndicatorPositionParams): SnapIndicatorPosition
 
 use-timeline-drag-drop.ts
   export function useTimelineDragDrop({
-    containerRef,
-    zoomLevel,
-    isSnappingEnabled = true,
+  	containerRef,
+  	zoomLevel,
+  	isSnappingEnabled = true,
   }: UseTimelineDragDropProps)
 
 use-timeline-playhead.ts
   export function useTimelinePlayhead({
-    zoomLevel,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
+  	zoomLevel,
+  	rulerRef,
+  	rulerScrollRef,
+  	tracksScrollRef,
+  	playheadRef,
   }: UseTimelinePlayheadProps)
 
 use-timeline-seek.ts
   export function useTimelineSeek({
-    playheadRef,
-    trackLabelsRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    zoomLevel,
-    duration,
-    isSelecting,
-    clearSelectedElements,
-    seek,
+  	playheadRef,
+  	trackLabelsRef,
+  	rulerScrollRef,
+  	tracksScrollRef,
+  	zoomLevel,
+  	duration,
+  	isSelecting,
+  	clearSelectedElements,
+  	seek,
   }: UseTimelineSeekProps)
 
 use-timeline-snapping.ts
@@ -270,28 +274,28 @@ use-timeline-snapping.ts
     enablePlayheadSnapping?: boolean
   }
   export function useTimelineSnapping({
-    snapThreshold = 10,
-    enableElementSnapping = true,
-    enablePlayheadSnapping = true,
+  	snapThreshold = 10,
+  	enableElementSnapping = true,
+  	enablePlayheadSnapping = true,
   }: UseTimelineSnappingOptions = {})
 
 use-timeline-zoom.ts
   export function useTimelineZoom({
-    containerRef,
-    isInTimeline = false,
-    minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
+  	containerRef,
+  	isInTimeline = false,
+  	minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
   }: UseTimelineZoomProps): UseTimelineZoomReturn
 
 ## apps/web/src/hooks/timeline/element
 
 use-element-interaction.ts
   export function useElementInteraction({
-    zoomLevel,
-    timelineRef,
-    tracksContainerRef,
-    tracksScrollRef,
-    snappingEnabled,
-    onSnapPointChange,
+  	zoomLevel,
+  	timelineRef,
+  	tracksContainerRef,
+  	tracksScrollRef,
+  	snappingEnabled,
+  	onSnapPointChange,
   }: UseElementInteractionProps)
 
 use-element-resize.ts
@@ -305,11 +309,11 @@ use-element-resize.ts
     initialDuration: number
   }
   export function useTimelineElementResize({
-    element,
-    track,
-    zoomLevel,
-    onSnapPointChange,
-    onResizeStateChange,
+  	element,
+  	track,
+  	zoomLevel,
+  	onSnapPointChange,
+  	onResizeStateChange,
   }: UseTimelineElementResizeProps)
 
 use-element-selection.ts
@@ -319,34 +323,34 @@ use-element-selection.ts
 
 drag-data.ts
   export function setDragData({
-    dataTransfer,
-    dragData,
+  	dataTransfer,
+  	dragData,
   }: {
-    dataTransfer: DataTransfer;
-    dragData: TimelineDragData;
+  	dataTransfer: DataTransfer;
+  	dragData: TimelineDragData;
   }): void
   export function getDragData({
-    dataTransfer,
+  	dataTransfer,
   }: {
-    dataTransfer: DataTransfer;
+  	dataTransfer: DataTransfer;
   }): TimelineDragData | null
   export function hasDragData({
-    dataTransfer,
+  	dataTransfer,
   }: {
-    dataTransfer: DataTransfer;
+  	dataTransfer: DataTransfer;
   }): boolean
   export function clearDragData(): void
 
 export.ts
   export function getExportMimeType({
-    format,
+  	format,
   }: {
-    format: ExportFormat;
+  	format: ExportFormat;
   }): string
   export function getExportFileExtension({
-    format,
+  	format,
   }: {
-    format: ExportFormat;
+  	format: ExportFormat;
   }): string
 
 iconify-api.ts
@@ -356,14 +360,14 @@ iconify-api.ts
     name: string
     total: number
     author?: {
-      name: string;
-      url?: string;
-    }
+  		name: string;
+  		url?: string;
+  	}
     license?: {
-      title: string;
-      spdx?: string;
-      url?: string;
-    }
+  		title: string;
+  		spdx?: string;
+  		url?: string;
+  	}
     samples?: string[]
     category?: string
     palette?: boolean
@@ -385,40 +389,40 @@ iconify-api.ts
     aliases?: Record<string, string>
   }
   export function getCollections(
-    category?: string,
+  	category?: string,
   ): Promise<Record<string, IconSet>>
   export function getCollection(
-    prefix: string,
+  	prefix: string,
   ): Promise<CollectionInfo | null>
   export function searchIcons(
-    query: string,
-    limit: number = 64,
-    prefixes?: string[],
-    category?: string,
+  	query: string,
+  	limit: number = 64,
+  	prefixes?: string[],
+  	category?: string,
   ): Promise<IconSearchResult>
   export function buildIconSvgUrl(
-    host: string,
-    iconName: string,
-    params?: {
-      color?: string;
-      width?: number;
-      height?: number;
-      flip?: "horizontal" | "vertical" | "horizontal,vertical";
-      rotate?: number | string;
-    },
+  	host: string,
+  	iconName: string,
+  	params?: {
+  		color?: string;
+  		width?: number;
+  		height?: number;
+  		flip?: "horizontal" | "vertical" | "horizontal,vertical";
+  		rotate?: number | string;
+  	},
   ): string
   export function getIconSvgUrl(
-    iconName: string,
-    params?: Parameters<typeof buildIconSvgUrl>[2],
+  	iconName: string,
+  	params?: Parameters<typeof buildIconSvgUrl>[2],
   ): string
   export function downloadSvgAsText(
-    iconName: string,
-    params?: Parameters<typeof getIconSvgUrl>[1],
+  	iconName: string,
+  	params?: Parameters<typeof getIconSvgUrl>[1],
   ): Promise<string>
   export function svgToFile(svgText: string, fileName: string): File
   export const POPULAR_COLLECTIONS
   export function getCategoriesFromCollections(
-    collections: Record<string, IconSet>,
+  	collections: Record<string, IconSet>,
   ): string[]
 
 rate-limit.ts
@@ -429,114 +433,114 @@ scenes.ts
   export function getMainScene({ scenes }: { scenes: TScene[] }): TScene | null
   export function ensureMainScene({ scenes }: { scenes: TScene[] }): TScene[]
   export function buildDefaultScene({
-    name,
-    isMain,
+  	name,
+  	isMain,
   }: {
-    name: string;
-    isMain: boolean;
+  	name: string;
+  	isMain: boolean;
   }): TScene
   export function canDeleteScene({ scene }: { scene: TScene }): {
-    canDelete: boolean;
-    reason?: string;
+  	canDelete: boolean;
+  	reason?: string;
   }
   export function getFallbackSceneAfterDelete({
-    scenes,
-    deletedSceneId,
-    currentSceneId,
+  	scenes,
+  	deletedSceneId,
+  	currentSceneId,
   }: {
-    scenes: TScene[];
-    deletedSceneId: string;
-    currentSceneId: string | null;
+  	scenes: TScene[];
+  	deletedSceneId: string;
+  	currentSceneId: string | null;
   }): TScene | null
   export function findCurrentScene({
-    scenes,
-    currentSceneId,
+  	scenes,
+  	currentSceneId,
   }: {
-    scenes: TScene[];
-    currentSceneId: string;
+  	scenes: TScene[];
+  	currentSceneId: string;
   }): TScene | null
   export function updateSceneInArray({
-    scenes,
-    sceneId,
-    updates,
+  	scenes,
+  	sceneId,
+  	updates,
   }: {
-    scenes: TScene[];
-    sceneId: string;
-    updates: Partial<TScene>;
+  	scenes: TScene[];
+  	sceneId: string;
+  	updates: Partial<TScene>;
   }): TScene[]
 
 time.ts
   export function roundToFrame({
-    time,
-    fps,
+  	time,
+  	fps,
   }: {
-    time: number;
-    fps: number;
+  	time: number;
+  	fps: number;
   }): number
   export function formatTimeCode({
-    timeInSeconds,
-    format = "HH:MM:SS:CS",
-    fps,
+  	timeInSeconds,
+  	format = "HH:MM:SS:CS",
+  	fps,
   }: {
-    timeInSeconds: number;
-    format?: TTimeCode;
-    fps?: number;
+  	timeInSeconds: number;
+  	format?: TTimeCode;
+  	fps?: number;
   }): string
   export function parseTimeCode({
-    timeCode,
-    format = "HH:MM:SS:CS",
-    fps,
+  	timeCode,
+  	format = "HH:MM:SS:CS",
+  	fps,
   }: {
-    timeCode: string;
-    format?: TTimeCode;
-    fps: number;
+  	timeCode: string;
+  	format?: TTimeCode;
+  	fps: number;
   }): number | null
   export function guessTimeCodeFormat({
-    timeCode,
+  	timeCode,
   }: {
-    timeCode: string;
+  	timeCode: string;
   }): TTimeCode | null
   export function timeToFrame({
-    time,
-    fps,
+  	time,
+  	fps,
   }: {
-    time: number;
-    fps: number;
+  	time: number;
+  	fps: number;
   }): number
   export function frameToTime({
-    frame,
-    fps,
+  	frame,
+  	fps,
   }: {
-    frame: number;
-    fps: number;
+  	frame: number;
+  	fps: number;
   }): number
   export function snapTimeToFrame({
-    time,
-    fps,
+  	time,
+  	fps,
   }: {
-    time: number;
-    fps: number;
+  	time: number;
+  	fps: number;
   }): number
   export function getSnappedSeekTime({
-    rawTime,
-    duration,
-    fps,
+  	rawTime,
+  	duration,
+  	fps,
   }: {
-    rawTime: number;
-    duration: number;
-    fps: number;
+  	rawTime: number;
+  	duration: number;
+  	fps: number;
   }): number
 
 ## apps/web/src/lib/actions
 
 definitions.ts
   export type TActionCategory = | "playback"
-    | "navigation"
-    | "editing"
-    | "selection"
-    | "history"
-    | "timeline"
-    | "con...
+  	| "navigation"
+  	| "editing"
+  	| "selection"
+  	| "history"
+  	| "timeline"
+  	| "controls"
   export interface TActionDefinition {
     description: string
     category: TActionCategory
@@ -550,40 +554,40 @@ definitions.ts
 
 registry.ts
   export function bindAction(
-    action: A,
-    handler: TActionFunc<A>,
+  	action: A,
+  	handler: TActionFunc<A>,
   )
   export function unbindAction(
-    action: A,
-    handler: TActionFunc<A>,
+  	action: A,
+  	handler: TActionFunc<A>,
   )
   export const invokeAction = (
-    action: A,
-    args?: TArgOfAction<A>,
-    trigger?: TInvocationTrigger,
+  	action: A,
+  	args?: TArgOfAction<A>,
+  	trigger?: TInvocationTrigger,
   ) => ...
 
 types.ts
   export type TActionArgsMap = {
-    "seek-forward": { seconds: number } | undefined;
-    "seek-backward": { seconds: number } | und...
+  	"seek-forward": { seconds: number } | undefined;
+  	"seek-backward": { seconds: number } | undef...
   export type TActionWithArgs = keyof TActionArgsMap
   export type TActionWithOptionalArgs = | TActionWithNoArgs
-    | TKeysWithValueUndefined<TActionArgsMap>
+  	| TKeysWithValueUndefined<TActionArgsMap>
   export type TActionWithNoArgs = Exclude<TAction, TActionWithArgs>
   export type TArgOfAction<A extends TAction> = A extends TActionWithArgs
-    ? TActionArgsMap[A]
-    : undefined
+  	? TActionArgsMap[A]
+  	: undefined
   export type TActionFunc<A extends TAction> = A extends TActionWithArgs
-    ? (arg: TArgOfAction<A>, trigger?: TInvocationTrigger) => void
-    : (_...
+  	? (arg: TArgOfAction<A>, trigger?: TInvocationTrigger) => void
+  	: (_?:...
   export type TInvocationTrigger = "keypress" | "mouseclick"
   export type TBoundActionList = {
-    [A in TAction]?: Array<TActionFunc<A>>;
+  	[A in TAction]?: Array<TActionFunc<A>>;
   }
   export type TActionHandlerOptions = | MutableRefObject<boolean>
-    | boolean
-    | undefined
+  	| boolean
+  	| undefined
 
 ## apps/web/src/lib/auth
 
@@ -600,9 +604,9 @@ query.ts
   export function getCategories()
   export function getAuthors()
   export function processHtmlContent({
-    html,
+  	html,
   }: {
-    html: string;
+  	html: string;
   }): Promise<string>
 
 ## apps/web/src/lib/db
@@ -620,31 +624,31 @@ schema.ts
 
 canvas.ts
   export function drawCssBackground({
-    ctx,
-    width,
-    height,
-    css,
+  	ctx,
+  	width,
+  	height,
+  	css,
   }: {
-    ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-    width: number;
-    height: number;
-    css: string;
+  	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+  	width: number;
+  	height: number;
+  	css: string;
   }): void
 
 parser.ts
   export type GradientOrientation = LinearOrientation | Array<RadialOrientation>
   export type Color = | { type: "hex"; value: string }
-    | { type: "literal"; value: string }
-    | { type: "rgb"; value:...
+  	| { type: "literal"; value: string }
+  	| { type: "rgb"; value: A...
   export type ColorStop = Color & { length?: Distance }
   export type GradientAst = {
-    type: GradientType;
-    orientation: GradientOrientation | undefined;
-    colorStops: Array<Color...
+  	type: GradientType;
+  	orientation: GradientOrientation | undefined;
+  	colorStops: Array<ColorSto...
   export const parseGradient = ({
-    code,
+  	code,
   }: {
-    code: string;
+  	code: string;
   }): Array<GradientAst> => ...
   export const GradientParser
 
@@ -652,336 +656,337 @@ parser.ts
 
 audio.ts
   export type CollectedAudioElement = Omit<
-    AudioElement,
-    "type" | "mediaId" | "volume" | "id" | "name" | "sourceType" | "sourceUrl...
+  	AudioElement,
+  	"type" | "mediaId" | "volume" | "id" | "name" | "sourceType" | "sourceUrl"
+  ...
   export function createAudioContext(): AudioContext
   export interface DecodedAudio {
     samples: Float32Array
     sampleRate: number
   }
   export function decodeAudioToFloat32({
-    audioBlob,
+  	audioBlob,
   }: {
-    audioBlob: Blob;
+  	audioBlob: Blob;
   }): Promise<DecodedAudio>
   export function collectAudioElements({
-    tracks,
-    mediaAssets,
-    audioContext,
+  	tracks,
+  	mediaAssets,
+  	audioContext,
   }: {
-    tracks: TimelineTrack[];
-    mediaAssets: MediaAsset[];
-    audioContext: AudioContext;
+  	tracks: TimelineTrack[];
+  	mediaAssets: MediaAsset[];
+  	audioContext: AudioContext;
   }): Promise<CollectedAudioElement[]>
   export function collectAudioMixSources({
-    tracks,
-    mediaAssets,
+  	tracks,
+  	mediaAssets,
   }: {
-    tracks: TimelineTrack[];
-    mediaAssets: MediaAsset[];
+  	tracks: TimelineTrack[];
+  	mediaAssets: MediaAsset[];
   }): Promise<AudioMixSource[]>
   export function createTimelineAudioBuffer({
-    tracks,
-    mediaAssets,
-    duration,
-    sampleRate = 44100,
+  	tracks,
+  	mediaAssets,
+  	duration,
+  	sampleRate = 44100,
   }: {
-    tracks: TimelineTrack[];
-    mediaAssets: MediaAsset[];
-    duration: number;
-    sampleRate?: number;
+  	tracks: TimelineTrack[];
+  	mediaAssets: MediaAsset[];
+  	duration: number;
+  	sampleRate?: number;
   }): Promise<AudioBuffer | null>
 
 media-utils.ts
   export const SUPPORTS_AUDIO: readonly MediaType[]
   export function mediaSupportsAudio({
-    media,
+  	media,
   }: {
-    media: MediaAsset | null | undefined;
+  	media: MediaAsset | null | undefined;
   }): boolean
   export const getMediaTypeFromFile = ({
-    file,
+  	file,
   }: {
-    file: File;
+  	file: File;
   }): MediaType | null => ...
 
 mediabunny.ts
   export function getVideoInfo({
-    videoFile,
+  	videoFile,
   }: {
-    videoFile: File;
+  	videoFile: File;
   }): Promise<{
-    duration: number;
-    width: number;
-    height: number;
-    fps: number;
+  	duration: number;
+  	width: number;
+  	height: number;
+  	fps: number;
   }>
   export const extractTimelineAudio = ({
-    tracks,
-    mediaAssets,
-    totalDuration,
-    onProgress,
+  	tracks,
+  	mediaAssets,
+  	totalDuration,
+  	onProgress,
   }: {
-    tracks: TimelineTrack[];
-    mediaAssets: MediaAsset[];
-    totalDuration: number;
-    onProgress?: (progress: number) => void;
+  	tracks: TimelineTrack[];
+  	mediaAssets: MediaAsset[];
+  	totalDuration: number;
+  	onProgress?: (progress: number) => void;
   }): Promise<Blob> => ...
 
 processing.ts
   export interface ProcessedMediaAsset extends Omit<MediaAsset, "id">
   export function generateThumbnail({
-    videoFile,
-    timeInSeconds,
+  	videoFile,
+  	timeInSeconds,
   }: {
-    videoFile: File;
-    timeInSeconds: number;
+  	videoFile: File;
+  	timeInSeconds: number;
   }): Promise<string>
   export function processMediaAssets({
-    files,
-    onProgress,
+  	files,
+  	onProgress,
   }: {
-    files: FileList | File[];
-    onProgress?: ({ progress }: { progress: number }) => void;
+  	files: FileList | File[];
+  	onProgress?: ({ progress }: { progress: number }) => void;
   }): Promise<ProcessedMediaAsset[]>
 
 ## apps/web/src/lib/timeline
 
 bookmarks.ts
   export function findBookmarkIndex({
-    bookmarks,
-    frameTime,
+  	bookmarks,
+  	frameTime,
   }: {
-    bookmarks: number[];
-    frameTime: number;
+  	bookmarks: number[];
+  	frameTime: number;
   }): number
   export function isBookmarkAtTime({
-    bookmarks,
-    frameTime,
+  	bookmarks,
+  	frameTime,
   }: {
-    bookmarks: number[];
-    frameTime: number;
+  	bookmarks: number[];
+  	frameTime: number;
   }): boolean
   export function toggleBookmarkInArray({
-    bookmarks,
-    frameTime,
+  	bookmarks,
+  	frameTime,
   }: {
-    bookmarks: number[];
-    frameTime: number;
+  	bookmarks: number[];
+  	frameTime: number;
   }): number[]
   export function removeBookmarkFromArray({
-    bookmarks,
-    frameTime,
+  	bookmarks,
+  	frameTime,
   }: {
-    bookmarks: number[];
-    frameTime: number;
+  	bookmarks: number[];
+  	frameTime: number;
   }): number[]
   export function getFrameTime({
-    time,
-    fps,
+  	time,
+  	fps,
   }: {
-    time: number;
-    fps: number;
+  	time: number;
+  	fps: number;
   }): number
 
 drop-utils.ts
   export function computeDropTarget({
-    elementType,
-    mouseX,
-    mouseY,
-    tracks,
-    playheadTime,
-    isExternalDrop,
-    elementDuration,
-    pixelsPerSecond,
-    zoomLevel,
-    verticalDragDirection,
-    startTimeOverride,
-    excludeElementId,
+  	elementType,
+  	mouseX,
+  	mouseY,
+  	tracks,
+  	playheadTime,
+  	isExternalDrop,
+  	elementDuration,
+  	pixelsPerSecond,
+  	zoomLevel,
+  	verticalDragDirection,
+  	startTimeOverride,
+  	excludeElementId,
   }: ComputeDropTargetParams): DropTarget
   export function getDropLineY({
-    dropTarget,
-    tracks,
+  	dropTarget,
+  	tracks,
   }: {
-    dropTarget: DropTarget;
-    tracks: TimelineTrack[];
+  	dropTarget: DropTarget;
+  	tracks: TimelineTrack[];
   }): number
 
 element-utils.ts
   export function canElementHaveAudio(
-    element: TimelineElement,
+  	element: TimelineElement,
   )
   export function canElementBeHidden(
-    element: TimelineElement,
+  	element: TimelineElement,
   )
   export function hasMediaId(
-    element: TimelineElement,
+  	element: TimelineElement,
   )
   export function requiresMediaId({
-    element,
+  	element,
   }: {
-    element: CreateTimelineElement;
+  	element: CreateTimelineElement;
   }): boolean
   export function checkElementOverlaps({
-    elements,
+  	elements,
   }: {
-    elements: TimelineElement[];
+  	elements: TimelineElement[];
   }): boolean
   export function resolveElementOverlaps({
-    elements,
+  	elements,
   }: {
-    elements: TimelineElement[];
+  	elements: TimelineElement[];
   }): TimelineElement[]
   export function wouldElementOverlap({
-    elements,
-    startTime,
-    endTime,
-    excludeElementId,
+  	elements,
+  	startTime,
+  	endTime,
+  	excludeElementId,
   }: {
-    elements: TimelineElement[];
-    startTime: number;
-    endTime: number;
-    excludeElementId?: string;
+  	elements: TimelineElement[];
+  	startTime: number;
+  	endTime: number;
+  	excludeElementId?: string;
   }): boolean
   export function buildTextElement({
-    raw,
-    startTime,
+  	raw,
+  	startTime,
   }: {
-    raw: Partial<Omit<TextElement, "type" | "id">>;
-    startTime: number;
+  	raw: Partial<Omit<TextElement, "type" | "id">>;
+  	startTime: number;
   }): CreateTimelineElement
   export function buildStickerElement({
-    iconName,
-    startTime,
+  	iconName,
+  	startTime,
   }: {
-    iconName: string;
-    startTime: number;
+  	iconName: string;
+  	startTime: number;
   }): CreateStickerElement
   export function buildUploadAudioElement({
-    mediaId,
-    name,
-    duration,
-    startTime,
-    buffer,
+  	mediaId,
+  	name,
+  	duration,
+  	startTime,
+  	buffer,
   }: {
-    mediaId: string;
-    name: string;
-    duration: number;
-    startTime: number;
-    buffer?: AudioBuffer;
+  	mediaId: string;
+  	name: string;
+  	duration: number;
+  	startTime: number;
+  	buffer?: AudioBuffer;
   }): CreateUploadAudioElement
   export function buildLibraryAudioElement({
-    sourceUrl,
-    name,
-    duration,
-    startTime,
-    buffer,
+  	sourceUrl,
+  	name,
+  	duration,
+  	startTime,
+  	buffer,
   }: {
-    sourceUrl: string;
-    name: string;
-    duration: number;
-    startTime: number;
-    buffer?: AudioBuffer;
+  	sourceUrl: string;
+  	name: string;
+  	duration: number;
+  	startTime: number;
+  	buffer?: AudioBuffer;
   }): CreateLibraryAudioElement
 
 index.ts
   export function calculateTotalDuration({
-    tracks,
+  	tracks,
   }: {
-    tracks: TimelineTrack[];
+  	tracks: TimelineTrack[];
   }): number
 
 track-utils.ts
   export function canTracktHaveAudio(
-    track: TimelineTrack,
+  	track: TimelineTrack,
   )
   export function canTrackBeHidden(
-    track: TimelineTrack,
+  	track: TimelineTrack,
   )
   export function getTrackColor({ type }: { type: TrackType })
   export function getTrackClasses({ type }: { type: TrackType })
   export function getTrackHeight({ type }: { type: TrackType }): number
   export function getCumulativeHeightBefore({
-    tracks,
-    trackIndex,
+  	tracks,
+  	trackIndex,
   }: {
-    tracks: Array<{ type: TrackType }>;
-    trackIndex: number;
+  	tracks: Array<{ type: TrackType }>;
+  	trackIndex: number;
   }): number
   export function getTotalTracksHeight({
-    tracks,
+  	tracks,
   }: {
-    tracks: Array<{ type: TrackType }>;
+  	tracks: Array<{ type: TrackType }>;
   }): number
   export function buildEmptyTrack({
-    id,
-    type,
-    name,
+  	id,
+  	type,
+  	name,
   }: {
-    id: string;
-    type: TrackType;
-    name?: string;
+  	id: string;
+  	type: TrackType;
+  	name?: string;
   }): TimelineTrack
   export function getDefaultInsertIndexForTrack({
-    tracks,
-    trackType,
+  	tracks,
+  	trackType,
   }: {
-    tracks: TimelineTrack[];
-    trackType: TrackType;
+  	tracks: TimelineTrack[];
+  	trackType: TrackType;
   }): number
   export function getHighestInsertIndexForTrack({
-    tracks,
-    trackType,
+  	tracks,
+  	trackType,
   }: {
-    tracks: TimelineTrack[];
-    trackType: TrackType;
+  	tracks: TimelineTrack[];
+  	trackType: TrackType;
   }): number
   export function isMainTrack(track: TimelineTrack)
   export function getMainTrack({
-    tracks,
+  	tracks,
   }: {
-    tracks: TimelineTrack[];
+  	tracks: TimelineTrack[];
   }): TimelineTrack | null
   export function ensureMainTrack({
-    tracks,
+  	tracks,
   }: {
-    tracks: TimelineTrack[];
+  	tracks: TimelineTrack[];
   }): TimelineTrack[]
   export function canElementGoOnTrack({
-    elementType,
-    trackType,
+  	elementType,
+  	trackType,
   }: {
-    elementType: ElementType;
-    trackType: TrackType;
+  	elementType: ElementType;
+  	trackType: TrackType;
   }): boolean
   export function validateElementTrackCompatibility({
-    element,
-    track,
+  	element,
+  	track,
   }: {
-    element: { type: ElementType };
-    track: { type: TrackType };
+  	element: { type: ElementType };
+  	track: { type: TrackType };
   }): { isValid: boolean; errorMessage?: string }
 
 zoom-utils.ts
   export function getTimelineZoomMin({
-    duration,
-    containerWidth,
+  	duration,
+  	containerWidth,
   }: {
-    duration: number;
-    containerWidth: number | null | undefined;
+  	duration: number;
+  	containerWidth: number | null | undefined;
   }): number
 
 ## apps/web/src/lib/transcription
 
 caption.ts
   export function buildCaptionChunks({
-    segments,
-    wordsPerChunk = DEFAULT_WORDS_PER_CAPTION,
-    minDuration = MIN_CAPTION_DURATION_SECONDS,
+  	segments,
+  	wordsPerChunk = DEFAULT_WORDS_PER_CAPTION,
+  	minDuration = MIN_CAPTION_DURATION_SECONDS,
   }: {
-    segments: TranscriptionSegment[];
-    wordsPerChunk?: number;
-    minDuration?: number;
+  	segments: TranscriptionSegment[];
+  	wordsPerChunk?: number;
+  	minDuration?: number;
   }): CaptionChunk[]
 
 ## apps/web/src/services/media
@@ -991,14 +996,14 @@ video-cache.ts
     sinks
     initPromises
     async getFrameAt({
-      mediaId,
-      file,
-      time,
-    }: {
-      mediaId: string;
-      file: File;
-      time: number;
-    }): Promise<WrappedCanvas | null>
+  		mediaId,
+  		file,
+  		time,
+  	}: {
+  		mediaId: string;
+  		file: File;
+  		time: number;
+  	}): Promise<WrappedCanvas | null>
     clearVideo({ mediaId }: { mediaId: string }): void
     clearAll(): void
     getStats()
@@ -1009,9 +1014,9 @@ video-cache.ts
 
 canvas-renderer.ts
   export type CanvasRendererParams = {
-    width: number;
-    height: number;
-    fps: number;
+  	width: number;
+  	height: number;
+  	fps: number;
   }
   export class CanvasRenderer {
     canvas: OffscreenCanvas | HTMLCanvasElement
@@ -1023,32 +1028,32 @@ canvas-renderer.ts
     setSize({ width, height }: { width: number; height: number })
     async render({ node, time }: { node: BaseNode; time: number })
     async renderToCanvas({
-      node,
-      time,
-      targetCanvas,
-    }: {
-      node: BaseNode;
-      time: number;
-      targetCanvas: HTMLCanvasElement;
-    })
+  		node,
+  		time,
+  		targetCanvas,
+  	}: {
+  		node: BaseNode;
+  		time: number;
+  		targetCanvas: HTMLCanvasElement;
+  	})
   }
 
 scene-builder.ts
   export type BuildSceneParams = {
-    canvasSize: TCanvasSize;
-    tracks: TimelineTrack[];
-    mediaAssets: MediaAsset[];
-    duration: ...
+  	canvasSize: TCanvasSize;
+  	tracks: TimelineTrack[];
+  	mediaAssets: MediaAsset[];
+  	duration: numb...
   export function buildScene(params: BuildSceneParams)
 
 scene-exporter.ts
   export type ExportFormat = "mp4" | "webm"
   export type ExportQuality = "low" | "medium" | "high" | "very_high"
   export type SceneExporterEvents = {
-    progress: [progress: number];
-    complete: [buffer: ArrayBuffer];
-    error: [error: Error];
-    c...
+  	progress: [progress: number];
+  	complete: [buffer: ArrayBuffer];
+  	error: [error: Error];
+  	cance...
   export class SceneExporter extends EventEmitter<SceneExporterEvents> {
     renderer: CanvasRenderer
     format: ExportFormat
@@ -1115,18 +1120,19 @@ types.ts
     sourceStickerIconName?: string
   }
   export type SerializedScene = Omit<TScene, "createdAt" | "updatedAt"> & {
-    createdAt: string;
-    updatedAt: string;
+  	createdAt: string;
+  	updatedAt: string;
   }
   export type SerializedProjectMetadata = Omit<
-    TProjectMetadata,
-    "createdAt" | "updatedAt"
+  	TProjectMetadata,
+  	"createdAt" | "updatedAt"
   > & {
-    createdAt: string;
-    updatedAt: str...
+  	createdAt: string;
+  	updatedAt: string;
+  }
   export type SerializedProject = Omit<TProject, "metadata" | "scenes"> & {
-    metadata: SerializedProjectMetadata;
-    scenes: Serial...
+  	metadata: SerializedProjectMetadata;
+  	scenes: Serializ...
   export interface StorageConfig {
     projectsDb: string
     mediaDb: string
@@ -1141,10 +1147,10 @@ index.ts
 
 worker.ts
   export type WorkerMessage = | { type: "init"; modelId: string }
-    | { type: "transcribe"; audio: Float32Array; language: stri...
+  	| { type: "transcribe"; audio: Float32Array; language: strin...
   export type WorkerResponse = | { type: "init-progress"; progress: number }
-    | { type: "init-complete" }
-    | { type: "init-err...
+  	| { type: "init-complete" }
+  	| { type: "init-error...
 
 ## apps/web/src/stores
 
@@ -1200,70 +1206,67 @@ timeline-store.ts
 
 assets.ts
   export type MediaType = "image" | "video" | "audio"
-  export interface MediaAsset extends Omit<
-    MediaAssetData,
-    "size" | "lastModified"
-  > {
+  export interface MediaAsset extends Omit<MediaAssetData, "size" | "lastModified"> {
     file: File
     url?: string
   }
 
 blog.ts
   export type Post = {
-    id: string;
-    slug: string;
-    title: string;
-    content: string;
-    description: string;
-    cove...
+  	id: string;
+  	slug: string;
+  	title: string;
+  	content: string;
+  	description: string;
+  	coverImage...
   export type Pagination = {
-    limit: number;
-    currpage: number;
-    nextPage: number | null;
-    prevPage: number | null;
-    to...
+  	limit: number;
+  	currpage: number;
+  	nextPage: number | null;
+  	prevPage: number | null;
+  	totalIt...
   export type MarblePostList = {
-    posts: Post[];
-    pagination: Pagination;
+  	posts: Post[];
+  	pagination: Pagination;
   }
   export type MarblePost = {
-    post: Post;
+  	post: Post;
   }
   export type Tag = {
-    id: string;
-    name: string;
-    slug: string;
+  	id: string;
+  	name: string;
+  	slug: string;
   }
   export type MarbleTag = {
-    tag: Tag;
+  	tag: Tag;
   }
   export type MarbleTagList = {
-    tags: Tag[];
-    pagination: Pagination;
+  	tags: Tag[];
+  	pagination: Pagination;
   }
   export type Category = {
-    id: string;
-    name: string;
-    slug: string;
+  	id: string;
+  	name: string;
+  	slug: string;
   }
   export type MarbleCategory = {
-    category: Category;
+  	category: Category;
   }
   export type MarbleCategoryList = {
-    categories: Category[];
-    pagination: Pagination;
+  	categories: Category[];
+  	pagination: Pagination;
   }
   export type Author = {
-    id: string;
-    name: string;
-    image: string;
+  	id: string;
+  	name: string;
+  	image: string;
   }
   export type MarbleAuthor = {
-    author: Author;
+  	author: Author;
   }
   export type MarbleAuthorList = {
-    authors: Author[];
-    pagination: Pagination;
+  	authors: Author[];
+  	pagination: Pagination;
   }
 
 drag.ts
@@ -1306,40 +1309,47 @@ export.ts
 
 keybinding.ts
   export type ModifierKeys = | "ctrl"
-    | "alt"
-    | "shift"
-    | "ctrl+shift"
-    | "alt+shift"
-    | "ctrl+alt"
-    | "ctrl+alt+shift"
+  	| "alt"
+  	| "shift"
+  	| "ctrl+shift"
+  	| "alt+shift"
+  	| "ctrl+alt"
+  	| "ctrl+alt+shift"
   export type Key = | "a"
-    | "b"
-    | "c"
-    | "d"
-    | "e"
-    | "f"
-    | "g"
-    | "h"
-    | "i"
-    | "j"
-    | "k"
-    | "l"
-    |...
+  	| "b"
+  	| "c"
+  	| "d"
+  	| "e"
+  	| "f"
+  	| "g"
+  	| "h"
+  	| "i"
+  	| "j"
+  	| "k"
+  	| "l"
+  	| "m"
+  	| "n"
+  ...
   export type ModifierBasedShortcutKey = `${ModifierKeys}+${Key}`
   export type SingleCharacterShortcutKey = `${Key}`
   export type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey
   export type KeybindingConfig = {
-    [key in ShortcutKey]?: TActionWithOptionalArgs;
+  	[key in ShortcutKey]?: TActionWithOptionalArgs;
   }
 
+language.ts
+  export type Language = (typeof LANGUAGES)[number]
+  export type LanguageCode = Language["code"]
+
 project.ts
   export type TBackground = | {
-        type: "color";
-        color: string;
-      }
-    | {
-        type: "blur";
-        blurIntensity...
+  			type: "color";
+  			color: string;
+  	  }
+  	| {
+  			type: "blur";
+  			blurIntensity: number;
+  	  }
   export interface TCanvasSize {
     width: number
     height: number
@@ -1447,9 +1457,9 @@ timeline.ts
   export interface Transform {
     scale: number
     position: {
-      x: number;
-      y: number;
-    }
+  		x: number;
+  		y: number;
+  	}
     rotate: number
   }
   export interface UploadAudioElement extends BaseAudioElement {
@@ -1500,24 +1510,24 @@ timeline.ts
     color?: string
   }
   export type TimelineElement = | AudioElement
-    | VideoElement
-    | ImageElement
-    | TextElement
-    | StickerElement
+  	| VideoElement
+  	| ImageElement
+  	| TextElement
+  	| StickerElement
   export type ElementType = TimelineElement["type"]
   export type CreateUploadAudioElement = Omit<UploadAudioElement, "id">
   export type CreateLibraryAudioElement = Omit<LibraryAudioElement, "id">
   export type CreateAudioElement = | CreateUploadAudioElement
-    | CreateLibraryAudioElement
+  	| CreateLibraryAudioElement
   export type CreateVideoElement = Omit<VideoElement, "id">
   export type CreateImageElement = Omit<ImageElement, "id">
   export type CreateTextElement = Omit<TextElement, "id">
   export type CreateStickerElement = Omit<StickerElement, "id">
   export type CreateTimelineElement = | CreateAudioElement
-    | CreateVideoElement
-    | CreateImageElement
-    | CreateTextElement
-    | Crea...
+  	| CreateVideoElement
+  	| CreateImageElement
+  	| CreateTextElement
+  	| CreateSt...
   export interface ElementDragState {
     isDragging: boolean
     elementId: string | null
@@ -1556,6 +1566,7 @@ timeline.ts
   }
 
 transcription.ts
+  export type TranscriptionLanguage = LanguageCode | "auto"
   export interface TranscriptionSegment {
     text: string
     start: number
@@ -1567,19 +1578,19 @@ transcription.ts
     language: string
   }
   export type TranscriptionStatus = | "idle"
-    | "loading-model"
-    | "transcribing"
-    | "complete"
-    | "error"
+  	| "loading-model"
+  	| "transcribing"
+  	| "complete"
+  	| "error"
   export interface TranscriptionProgress {
     status: TranscriptionStatus
     progress: number
     message?: string
   }
   export type TranscriptionModelId = | "whisper-tiny"
-    | "whisper-small"
-    | "whisper-medium"
-    | "whisper-large-v3-turbo"
+  	| "whisper-small"
+  	| "whisper-medium"
+  	| "whisper-large-v3-turbo"
   export interface TranscriptionModel {
     id: TranscriptionModelId
     name: string
@@ -1596,9 +1607,9 @@ transcription.ts
 
 browser.ts
   export function isTypableDOMElement({
-    element,
+  	element,
   }: {
-    element: HTMLElement;
+  	element: HTMLElement;
   }): boolean
 
 date.ts
@@ -1606,11 +1617,11 @@ date.ts
 
 geometry.ts
   export function dimensionToAspectRatio({
-    width,
-    height,
+  	width,
+  	height,
   }: {
-    width: number;
-    height: number;
+  	width: number;
+  	height: number;
   }): string
 
 id.ts
@@ -1618,13 +1629,13 @@ id.ts
 
 math.ts
   export function clamp({
-    value,
-    min,
-    max,
+  	value,
+  	min,
+  	max,
   }: {
-    value: number;
-    min: number;
-    max: number;
+  	value: number;
+  	min: number;
+  	max: number;
   }): number
 
 platform.ts
@@ -1641,46 +1652,72 @@ ui.ts
 
 ## packages/ui/src/icons
 
+base-icon.tsx
+  export function BaseIcon({
+  	title,
+  	size = 24,
+  	viewBox = "0 0 24 24",
+  	children,
+  	...props
+  }: BaseIconProps)
+
+create-icon.tsx
+  export function createIcon({ definition }: CreateIconParams)
+
 index.tsx
-  export function GoogleIcon({ className }: { className?: string })
-  export function GithubIcon({ className }: { className?: string })
-  export function VercelIcon({ className }: { className?: string })
-  export function BackgroundIcon({ className }: { className?: string })
-  export function MarbleIcon({
-    className = "",
-    size = 32,
-  }: {
-    className?: string;
-    size?: number;
-  })
-  export function DataBuddyIcon({
-    className = "",
-    size = 32,
-  }: {
-    className?: string;
-    size?: number;
-  })
-  export function SocialsIcon({
-    className = "",
-    size = 32,
-  }: {
-    className?: string;
-    size?: number;
-  })
-  export function TransitionUpIcon({
-    className = "",
-    size = 16,
-  }: {
-    className?: string;
-    size?: number;
-  })
-  export function MenuIcon({
-    className = "",
-    size = 16,
-  }: {
-    className?: string;
-    size?: number;
-  })
+  export const GoogleIcon
+  export const GithubIcon
+  export const VercelIcon
+  export const DataBuddyIcon
+  export const MarbleIcon
+  export const BackgroundIcon
+  export const SocialsIcon
+  export const TransitionUpIcon
+  export const MenuIcon
+  export const PencilIcon
+  export const LeftArrowIcon
+  export const TrashIcon
+
+types.ts
+  export type IconProps = Omit<
+  	SVGProps<SVGSVGElement>,
+  	"children" | "width" | "height"
+  > & {
+  	size?: number;
+  	title?: s...
+  export type IconNode = Array<{
+  	element: keyof JSX.IntrinsicElements;
+  	props: Record<string, string | number | undefined...
+  export type IconDefinition = {
+  	title: string;
+  	viewBox?: string;
+  	nodes: IconNode;
+  }
+
+## packages/ui/src/icons/collections
+
+brand.ts
+  export const BRAND_COLLECTION
+
+editor.ts
+  export const EDITOR_COLLECTION
+
+index.ts
+  export const ICON_COLLECTIONS
+
+ui.ts
+  export const UI_COLLECTION
+
+## packages/ui/src/icons/registry
+
+brand.ts
+  export const BRAND_ICONS
+
+index.ts
+  export const ICON_DEFINITIONS
+
+ui.ts
+  export const UI_ICONS
 
 ```
 
diff --git a/.cursor/rules/ultracite.mdc b/.cursor/rules/ultracite.mdc
index 78aa4a29..977f4363 100644
--- a/.cursor/rules/ultracite.mdc
+++ b/.cursor/rules/ultracite.mdc
@@ -6,7 +6,7 @@ alwaysApply: true
 
 # Project Context
 
-Ultracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Prettier's formatter.
+Ultracite enforces strict type safety, accessibility standards, and consistent code quality for JavaScript/TypeScript projects using Biome's formatter.
 
 ## Key Principles
 
diff --git a/.prettierignore b/.prettierignore
deleted file mode 100644
index 4628520e..00000000
--- a/.prettierignore
+++ /dev/null
@@ -1,3 +0,0 @@
-.git
-apps/web/.next/
-apps/web/public/
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index b4bfed35..00000000
--- a/.prettierrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "plugins": ["prettier-plugin-tailwindcss"]
-}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index dbab3048..7672666a 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -6,11 +6,15 @@
   "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": "vscode.typescript-language-features"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   }
 }
diff --git a/apps/web/package.json b/apps/web/package.json
index 3ee6c30e..3a0e4725 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -25,7 +25,9 @@
     "@opencut/env": "workspace:*",
     "@opencut/ui": "workspace:*",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@upstash/ratelimit": "^2.0.6",
     "@upstash/redis": "^1.35.4",
     "@vercel/analytics": "^1.4.1",
@@ -41,7 +43,7 @@
     "eventemitter3": "^5.0.1",
     "feed": "^5.1.0",
     "input-otp": "^1.4.1",
-    "lucide-react": "^0.468.0",
+    "lucide-react": "^0.562.0",
     "mediabunny": "^1.29.1",
     "motion": "^12.18.1",
     "nanoid": "^5.1.5",
@@ -51,7 +53,6 @@
     "postgres": "^3.4.5",
     "radix-ui": "^1.4.2",
     "react": "^18.2.0",
-    "react-country-flag": "^3.1.0",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.54.0",
@@ -87,8 +88,6 @@
     "drizzle-kit": "^0.31.4",
     "dotenv": "^16.5.0",
     "postcss": "^8",
-    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.6.14",
     "tailwindcss": "^4.1.11",
     "tsx": "^4.7.1",
     "typescript": "^5.8.3"
diff --git a/apps/web/src/app/api/health/route.ts b/apps/web/src/app/api/health/route.ts
index ecb9ce04..edb40a0d 100644
--- a/apps/web/src/app/api/health/route.ts
+++ b/apps/web/src/app/api/health/route.ts
@@ -1,5 +1,3 @@
-import { NextRequest } from "next/server";
-
-export async function GET(request: NextRequest) {
-  return new Response("OK", { status: 200 });
+export async function GET() {
+	return new Response("OK", { status: 200 });
 }
diff --git a/apps/web/src/app/api/sounds/search/route.ts b/apps/web/src/app/api/sounds/search/route.ts
index b7356680..339a54da 100644
--- a/apps/web/src/app/api/sounds/search/route.ts
+++ b/apps/web/src/app/api/sounds/search/route.ts
@@ -1,280 +1,280 @@
-import { NextRequest, NextResponse } from "next/server";
-import { z } from "zod";
 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),
+	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(),
+	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),
+	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(),
+	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(),
+	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`;
+	if (!query) return `${sort}_desc`;
+	return sort === "score" ? "score" : `${sort}_desc`;
 }
 
 function applyEffectsFilters({
-  params,
-  min_rating,
-  commercial_only,
+	params,
+	min_rating,
+	commercial_only,
 }: {
-  params: URLSearchParams;
-  min_rating: number;
-  commercial_only: boolean;
+	params: URLSearchParams;
+	min_rating: number;
+	commercial_only: boolean;
 }) {
-  params.append("filter", "duration:[* TO 30.0]");
-  params.append("filter", `avg_rating:[${min_rating} TO *]`);
+	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")',
-    );
-  }
+	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",
-  );
+	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>,
+	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,
-  };
+	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 });
-    }
+	try {
+		const { limited } = await checkRateLimit({ request });
+		if (limited) {
+			return NextResponse.json({ error: "Too many requests" }, { status: 429 });
+		}
 
-    const { searchParams } = new URL(request.url);
+		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,
-    });
+		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 },
-      );
-    }
+		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;
+		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 },
-      );
-    }
+		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 baseUrl = "https://freesound.org/apiv2/search/text/";
 
-    const sortParam = buildSortParameter({ query, sort });
+		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 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 isEffectsSearch = type === "effects" || !type;
+		if (isEffectsSearch) {
+			applyEffectsFilters({ params, min_rating, commercial_only });
+		}
 
-    const response = await fetch(`${baseUrl}?${params.toString()}`);
+		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 },
-      );
-    }
+		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 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 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 data = freesoundValidation.data;
 
-    const transformedResults = data.results.map(transformFreesoundResult);
+		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 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 },
-      );
-    }
+		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 },
-    );
-  }
+		return NextResponse.json(responseValidation.data);
+	} catch (error) {
+		console.error("Error searching sounds:", error);
+		return NextResponse.json(
+			{ error: "Internal server error" },
+			{ status: 500 },
+		);
+	}
 }
diff --git a/apps/web/src/app/base-page.tsx b/apps/web/src/app/base-page.tsx
index 38eca161..a3d56fe5 100644
--- a/apps/web/src/app/base-page.tsx
+++ b/apps/web/src/app/base-page.tsx
@@ -3,51 +3,51 @@ import { Footer } from "@/components/footer";
 import { cn } from "@/utils/ui";
 
 interface BasePageProps {
-  children: React.ReactNode;
-  className?: string;
-  mainClassName?: string;
-  maxWidth?: "3xl" | "6xl" | "full";
-  title?: string;
-  description?: string;
+	children: React.ReactNode;
+	className?: string;
+	mainClassName?: string;
+	maxWidth?: "3xl" | "6xl" | "full";
+	title?: string;
+	description?: string;
 }
 
 export function BasePage({
-  children,
-  className = "",
-  mainClassName = "",
-  maxWidth = "3xl",
-  title,
-  description,
+	children,
+	className = "",
+	mainClassName = "",
+	maxWidth = "3xl",
+	title,
+	description,
 }: BasePageProps) {
-  const maxWidthClass = {
-    "3xl": "max-w-3xl",
-    "6xl": "max-w-6xl",
-    full: "max-w-full",
-  }[maxWidth];
+	const maxWidthClass = {
+		"3xl": "max-w-3xl",
+		"6xl": "max-w-6xl",
+		full: "max-w-full",
+	}[maxWidth];
 
-  return (
-    <section className={cn("bg-background min-h-screen", className)}>
-      <Header />
-      <main
-        className={cn(
-          "relative container mx-auto flex flex-col gap-12 px-6 pt-12 pb-24 md:pt-24",
-          maxWidthClass,
-          mainClassName,
-        )}
-      >
-        {title && description && (
-          <div className="flex flex-col gap-8 text-center">
-            <h1 className="text-5xl font-bold tracking-tight md:text-6xl">
-              {title}
-            </h1>
-            <p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed">
-              {description}
-            </p>
-          </div>
-        )}
-        {children}
-      </main>
-      <Footer />
-    </section>
-  );
+	return (
+		<section className={cn("bg-background min-h-screen", className)}>
+			<Header />
+			<main
+				className={cn(
+					"relative container mx-auto flex flex-col gap-12 px-6 pt-12 pb-24 md:pt-24",
+					maxWidthClass,
+					mainClassName,
+				)}
+			>
+				{title && description && (
+					<div className="flex flex-col gap-8 text-center">
+						<h1 className="text-5xl font-bold tracking-tight md:text-6xl">
+							{title}
+						</h1>
+						<p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed">
+							{description}
+						</p>
+					</div>
+				)}
+				{children}
+			</main>
+			<Footer />
+		</section>
+	);
 }
diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index 7325d859..46c6163d 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -1,152 +1,152 @@
+import type { Metadata } from "next";
+import Image from "next/image";
+import { notFound } from "next/navigation";
 import { BasePage } from "@/app/base-page";
 import Prose from "@/components/ui/prose";
 import { Separator } from "@/components/ui/separator";
 import { getPosts, getSinglePost, processHtmlContent } from "@/lib/blog/query";
-import { Post, Author } from "@/types/blog";
-import { Metadata } from "next";
-import Image from "next/image";
-import { notFound } from "next/navigation";
+import type { Author, Post } from "@/types/blog";
 
 type PageProps = {
-  params: Promise<{ slug: string }>;
-  searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
+	params: Promise<{ slug: string }>;
+	searchParams: Promise<{ [key: string]: string | string[] | undefined }>;
 };
 
 export async function generateMetadata({
-  params,
+	params,
 }: PageProps): Promise<Metadata> {
-  const slug = (await params).slug;
+	const slug = (await params).slug;
 
-  const data = await getSinglePost({ slug });
+	const data = await getSinglePost({ slug });
 
-  if (!data || !data.post) return {};
+	if (!data || !data.post) return {};
 
-  return {
-    title: data.post.title,
-    description: data.post.description,
-    twitter: {
-      title: `${data.post.title}`,
-      description: `${data.post.description}`,
-      card: "summary_large_image",
-      images: [
-        {
-          url: data.post.coverImage,
-          width: "1200",
-          height: "630",
-          alt: data.post.title,
-        },
-      ],
-    },
-    openGraph: {
-      type: "article",
-      images: [
-        {
-          url: data.post.coverImage,
-          width: "1200",
-          height: "630",
-          alt: data.post.title,
-        },
-      ],
-      title: data.post.title,
-      description: data.post.description,
-      publishedTime: new Date(data.post.publishedAt).toISOString(),
-      authors: data.post.authors.map((author: Author) => author.name),
-    },
-  };
+	return {
+		title: data.post.title,
+		description: data.post.description,
+		twitter: {
+			title: `${data.post.title}`,
+			description: `${data.post.description}`,
+			card: "summary_large_image",
+			images: [
+				{
+					url: data.post.coverImage,
+					width: "1200",
+					height: "630",
+					alt: data.post.title,
+				},
+			],
+		},
+		openGraph: {
+			type: "article",
+			images: [
+				{
+					url: data.post.coverImage,
+					width: "1200",
+					height: "630",
+					alt: data.post.title,
+				},
+			],
+			title: data.post.title,
+			description: data.post.description,
+			publishedTime: new Date(data.post.publishedAt).toISOString(),
+			authors: data.post.authors.map((author: Author) => author.name),
+		},
+	};
 }
 
 export async function generateStaticParams() {
-  const data = await getPosts();
-  if (!data || !data.posts.length) return [];
+	const data = await getPosts();
+	if (!data || !data.posts.length) return [];
 
-  return data.posts.map((post) => ({
-    slug: post.slug,
-  }));
+	return data.posts.map((post) => ({
+		slug: post.slug,
+	}));
 }
 
 export default async function BlogPostPage({ params }: PageProps) {
-  const slug = (await params).slug;
-  const data = await getSinglePost({ slug });
-  if (!data || !data.post) return notFound();
+	const slug = (await params).slug;
+	const data = await getSinglePost({ slug });
+	if (!data || !data.post) return notFound();
 
-  const html = await processHtmlContent({ html: data.post.content });
+	const html = await processHtmlContent({ html: data.post.content });
 
-  return (
-    <BasePage>
-      <PostHeader post={data.post} />
-      <Separator />
-      <PostContent html={html} />
-    </BasePage>
-  );
+	return (
+		<BasePage>
+			<PostHeader post={data.post} />
+			<Separator />
+			<PostContent html={html} />
+		</BasePage>
+	);
 }
 
 function PostHeader({ post }: { post: Post }) {
-  const formattedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
-    day: "numeric",
-    month: "long",
-    year: "numeric",
-  });
+	const formattedDate = new Date(post.publishedAt).toLocaleDateString("en-US", {
+		day: "numeric",
+		month: "long",
+		year: "numeric",
+	});
 
-  return (
-    <>
-      {post.coverImage && <PostCoverImage post={post} />}
-      <PostMeta date={formattedDate} publishedAt={post.publishedAt} />
-      <PostTitle title={post.title} />
-      <PostAuthor author={post.authors[0]} />
-    </>
-  );
+	return (
+		<>
+			{post.coverImage && <PostCoverImage post={post} />}
+			<PostMeta date={formattedDate} publishedAt={post.publishedAt} />
+			<PostTitle title={post.title} />
+			<PostAuthor author={post.authors[0]} />
+		</>
+	);
 }
 
 function PostCoverImage({ post }: { post: Post }) {
-  return (
-    <div className="relative aspect-video overflow-hidden rounded-lg">
-      <Image
-        src={post.coverImage}
-        alt={post.title}
-        loading="eager"
-        fill
-        className="rounded-lg object-cover"
-      />
-    </div>
-  );
+	return (
+		<div className="relative aspect-video overflow-hidden rounded-lg">
+			<Image
+				src={post.coverImage}
+				alt={post.title}
+				loading="eager"
+				fill
+				className="rounded-lg object-cover"
+			/>
+		</div>
+	);
 }
 
 function PostMeta({ date, publishedAt }: { date: string; publishedAt: Date }) {
-  return (
-    <div className="flex items-center justify-center">
-      <time dateTime={publishedAt.toString()}>{date}</time>
-    </div>
-  );
+	return (
+		<div className="flex items-center justify-center">
+			<time dateTime={publishedAt.toString()}>{date}</time>
+		</div>
+	);
 }
 
 function PostTitle({ title }: { title: string }) {
-  return (
-    <h1 className="text-5xl font-bold tracking-tight md:text-4xl">{title}</h1>
-  );
+	return (
+		<h1 className="text-5xl font-bold tracking-tight md:text-4xl">{title}</h1>
+	);
 }
 
 function PostAuthor({ author }: { author?: Author }) {
-  if (!author) return null;
+	if (!author) return null;
 
-  return (
-    <div className="flex items-center justify-center gap-2">
-      <Image
-        src={author.image}
-        alt={author.name}
-        width={36}
-        height={36}
-        loading="eager"
-        className="aspect-square size-8 shrink-0 rounded-full"
-      />
-      <p className="text-muted-foreground">{author.name}</p>
-    </div>
-  );
+	return (
+		<div className="flex items-center justify-center gap-2">
+			<Image
+				src={author.image}
+				alt={author.name}
+				width={36}
+				height={36}
+				loading="eager"
+				className="aspect-square size-8 shrink-0 rounded-full"
+			/>
+			<p className="text-muted-foreground">{author.name}</p>
+		</div>
+	);
 }
 
 function PostContent({ html }: { html: string }) {
-  return (
-    <section className="pt-8">
-      <Prose html={html} />
-    </section>
-  );
+	return (
+		<section className="pt-8">
+			<Prose html={html} />
+		</section>
+	);
 }
diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx
index 050f59ae..64a539d0 100644
--- a/apps/web/src/app/blog/page.tsx
+++ b/apps/web/src/app/blog/page.tsx
@@ -1,73 +1,73 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
+import Link from "next/link";
 import { BasePage } from "@/app/base-page";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import Link from "next/link";
-import { getPosts } from "@/lib/blog/query";
-import { Post, Author } from "@/types/blog";
 import { Separator } from "@/components/ui/separator";
+import { getPosts } from "@/lib/blog/query";
+import type { Author, Post } from "@/types/blog";
 
 export const metadata: Metadata = {
-  title: "Blog - OpenCut",
-  description:
-    "Read the latest news and updates about OpenCut, the free and open-source video editor.",
-  openGraph: {
-    title: "Blog - OpenCut",
-    description:
-      "Read the latest news and updates about OpenCut, the free and open-source video editor.",
-    type: "website",
-  },
+	title: "Blog - OpenCut",
+	description:
+		"Read the latest news and updates about OpenCut, the free and open-source video editor.",
+	openGraph: {
+		title: "Blog - OpenCut",
+		description:
+			"Read the latest news and updates about OpenCut, the free and open-source video editor.",
+		type: "website",
+	},
 };
 
 export default async function BlogPage() {
-  const data = await getPosts();
-  if (!data || !data.posts) return <div>No posts yet</div>;
+	const data = await getPosts();
+	if (!data || !data.posts) return <div>No posts yet</div>;
 
-  return (
-    <BasePage
-      title="Blog"
-      description="Read the latest news and updates about OpenCut, the free and open-source video editor."
-    >
-      <div className="flex flex-col">
-        {data.posts.map((post) => (
-          <div key={post.id} className="flex flex-col">
-            <BlogPostItem post={post} />
-            <Separator />
-          </div>
-        ))}
-      </div>
-    </BasePage>
-  );
+	return (
+		<BasePage
+			title="Blog"
+			description="Read the latest news and updates about OpenCut, the free and open-source video editor."
+		>
+			<div className="flex flex-col">
+				{data.posts.map((post) => (
+					<div key={post.id} className="flex flex-col">
+						<BlogPostItem post={post} />
+						<Separator />
+					</div>
+				))}
+			</div>
+		</BasePage>
+	);
 }
 
 function BlogPostItem({ post }: { post: Post }) {
-  return (
-    <Link href={`/blog/${post.slug}`}>
-      <div className="flex h-auto w-full items-center justify-between py-6 opacity-100 transition-opacity hover:opacity-75">
-        <div className="flex flex-col gap-2">
-          <h2 className="text-xl font-semibold">{post.title}</h2>
-          <p className="text-muted-foreground">{post.description}</p>
-        </div>
-        {post.authors && post.authors.length > 0 && (
-          <AuthorList authors={post.authors} />
-        )}
-      </div>
-    </Link>
-  );
+	return (
+		<Link href={`/blog/${post.slug}`}>
+			<div className="flex h-auto w-full items-center justify-between py-6 opacity-100 transition-opacity hover:opacity-75">
+				<div className="flex flex-col gap-2">
+					<h2 className="text-xl font-semibold">{post.title}</h2>
+					<p className="text-muted-foreground">{post.description}</p>
+				</div>
+				{post.authors && post.authors.length > 0 && (
+					<AuthorList authors={post.authors} />
+				)}
+			</div>
+		</Link>
+	);
 }
 
 function AuthorList({ authors }: { authors: Author[] }) {
-  return (
-    <div className="flex items-center gap-2">
-      {authors.map((author) => (
-        <div key={author.id} className="flex items-center gap-2">
-          <Avatar className="h-6 w-6 shadow-sm">
-            <AvatarImage src={author.image} alt={author.name} />
-            <AvatarFallback className="text-xs">
-              {author.name.charAt(0).toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="flex items-center gap-2">
+			{authors.map((author) => (
+				<div key={author.id} className="flex items-center gap-2">
+					<Avatar className="h-6 w-6 shadow-sm">
+						<AvatarImage src={author.image} alt={author.name} />
+						<AvatarFallback className="text-xs">
+							{author.name.charAt(0).toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+				</div>
+			))}
+		</div>
+	);
 }
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index 716002fa..fd159576 100644
--- a/apps/web/src/app/contributors/page.tsx
+++ b/apps/web/src/app/contributors/page.tsx
@@ -1,278 +1,278 @@
-import { Metadata } from "next";
-import { Card, CardContent } from "@/components/ui/card";
+import { GithubIcon } from "@opencut/ui/icons";
+import { ExternalLink } from "lucide-react";
+import type { Metadata } from "next";
+import Link from "next/link";
+import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
-import { ExternalLink } from "lucide-react";
-import Link from "next/link";
-import { GithubIcon } from "@opencut/ui/icons";
+import { Card, CardContent } from "@/components/ui/card";
 import { EXTERNAL_TOOLS, SOCIAL_LINKS } from "@/constants/site-constants";
-import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
 import { BasePage } from "../base-page";
 
 export const metadata: Metadata = {
-  title: "Contributors - OpenCut",
-  description:
-    "Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
-  openGraph: {
-    title: "Contributors - OpenCut",
-    description:
-      "Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
-    type: "website",
-  },
+	title: "Contributors - OpenCut",
+	description:
+		"Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
+	openGraph: {
+		title: "Contributors - OpenCut",
+		description:
+			"Meet the amazing people who contribute to OpenCut, the free and open-source video editor.",
+		type: "website",
+	},
 };
 
 interface Contributor {
-  id: number;
-  login: string;
-  avatar_url: string;
-  html_url: string;
-  contributions: number;
-  type: string;
+	id: number;
+	login: string;
+	avatar_url: string;
+	html_url: string;
+	contributions: number;
+	type: string;
 }
 
 async function getContributors(): Promise<Contributor[]> {
-  try {
-    const response = await fetch(
-      "https://api.github.com/repos/OpenCut-app/OpenCut/contributors?per_page=100",
-      {
-        headers: {
-          Accept: "application/vnd.github.v3+json",
-          "User-Agent": "OpenCut-Web-App",
-        },
-        next: { revalidate: 600 }, // 10 minutes
-      },
-    );
+	try {
+		const response = await fetch(
+			"https://api.github.com/repos/OpenCut-app/OpenCut/contributors?per_page=100",
+			{
+				headers: {
+					Accept: "application/vnd.github.v3+json",
+					"User-Agent": "OpenCut-Web-App",
+				},
+				next: { revalidate: 600 }, // 10 minutes
+			},
+		);
 
-    if (!response.ok) {
-      console.error("Failed to fetch contributors");
-      return [];
-    }
+		if (!response.ok) {
+			console.error("Failed to fetch contributors");
+			return [];
+		}
 
-    const contributors = (await response.json()) as Contributor[];
+		const contributors = (await response.json()) as Contributor[];
 
-    const filteredContributors = contributors.filter(
-      (contributor) => contributor.type === "User",
-    );
+		const filteredContributors = contributors.filter(
+			(contributor) => contributor.type === "User",
+		);
 
-    return filteredContributors;
-  } catch (error) {
-    console.error("Error fetching contributors:", error);
-    return [];
-  }
+		return filteredContributors;
+	} catch (error) {
+		console.error("Error fetching contributors:", error);
+		return [];
+	}
 }
 
 export default async function ContributorsPage() {
-  const contributors = await getContributors();
-  const topContributors = contributors.slice(0, 2);
-  const otherContributors = contributors.slice(2);
-  const totalContributions = contributors.reduce(
-    (sum, c) => sum + c.contributions,
-    0,
-  );
+	const contributors = await getContributors();
+	const topContributors = contributors.slice(0, 2);
+	const otherContributors = contributors.slice(2);
+	const totalContributions = contributors.reduce(
+		(sum, c) => sum + c.contributions,
+		0,
+	);
 
-  return (
-    <BasePage
-      title="Contributors"
-      description="Meet the amazing people who contribute to OpenCut, the free and open-source video editor."
-    >
-      <div className="-mt-4 flex items-center justify-center gap-8 text-sm">
-        <StatItem value={contributors.length} label="contributors" />
-        <StatItem value={totalContributions} label="contributions" />
-      </div>
+	return (
+		<BasePage
+			title="Contributors"
+			description="Meet the amazing people who contribute to OpenCut, the free and open-source video editor."
+		>
+			<div className="-mt-4 flex items-center justify-center gap-8 text-sm">
+				<StatItem value={contributors.length} label="contributors" />
+				<StatItem value={totalContributions} label="contributions" />
+			</div>
 
-      <div className="mx-auto flex max-w-6xl flex-col gap-20">
-        {topContributors.length > 0 && (
-          <TopContributorsSection contributors={topContributors} />
-        )}
-        {otherContributors.length > 0 && (
-          <AllContributorsSection contributors={otherContributors} />
-        )}
-        {contributors.length === 0 && <EmptyState />}
-        <ExternalToolsSection />
-        <GitHubContributeSection
-          title="Join the community"
-          description="OpenCut is built by developers like you. Every contribution, no matter how small, helps make video editing more accessible for everyone."
-        />
-      </div>
-    </BasePage>
-  );
+			<div className="mx-auto flex max-w-6xl flex-col gap-20">
+				{topContributors.length > 0 && (
+					<TopContributorsSection contributors={topContributors} />
+				)}
+				{otherContributors.length > 0 && (
+					<AllContributorsSection contributors={otherContributors} />
+				)}
+				{contributors.length === 0 && <EmptyState />}
+				<ExternalToolsSection />
+				<GitHubContributeSection
+					title="Join the community"
+					description="OpenCut is built by developers like you. Every contribution, no matter how small, helps make video editing more accessible for everyone."
+				/>
+			</div>
+		</BasePage>
+	);
 }
 
 function StatItem({ value, label }: { value: number; label: string }) {
-  return (
-    <div className="flex items-center gap-2">
-      <div className="bg-foreground h-2 w-2 rounded-full" />
-      <span className="font-medium">{value}</span>
-      <span className="text-muted-foreground">{label}</span>
-    </div>
-  );
+	return (
+		<div className="flex items-center gap-2">
+			<div className="bg-foreground h-2 w-2 rounded-full" />
+			<span className="font-medium">{value}</span>
+			<span className="text-muted-foreground">{label}</span>
+		</div>
+	);
 }
 
 function TopContributorsSection({
-  contributors,
+	contributors,
 }: {
-  contributors: Contributor[];
+	contributors: Contributor[];
 }) {
-  return (
-    <div className="flex flex-col gap-10">
-      <div className="flex flex-col gap-2 text-center">
-        <h2 className="text-2xl font-semibold">Top contributors</h2>
-        <p className="text-muted-foreground">
-          Leading the way in contributions
-        </p>
-      </div>
+	return (
+		<div className="flex flex-col gap-10">
+			<div className="flex flex-col gap-2 text-center">
+				<h2 className="text-2xl font-semibold">Top contributors</h2>
+				<p className="text-muted-foreground">
+					Leading the way in contributions
+				</p>
+			</div>
 
-      <div className="mx-auto flex w-full max-w-xl flex-col justify-center gap-6 md:flex-row">
-        {contributors.map((contributor) => (
-          <TopContributorCard key={contributor.id} contributor={contributor} />
-        ))}
-      </div>
-    </div>
-  );
+			<div className="mx-auto flex w-full max-w-xl flex-col justify-center gap-6 md:flex-row">
+				{contributors.map((contributor) => (
+					<TopContributorCard key={contributor.id} contributor={contributor} />
+				))}
+			</div>
+		</div>
+	);
 }
 
 function TopContributorCard({ contributor }: { contributor: Contributor }) {
-  return (
-    <Link
-      href={contributor.html_url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="w-full"
-    >
-      <Card>
-        <CardContent className="flex flex-col gap-6 p-8 text-center">
-          <Avatar className="mx-auto size-28">
-            <AvatarImage
-              src={contributor.avatar_url}
-              alt={`${contributor.login}'s avatar`}
-            />
-            <AvatarFallback className="text-lg font-semibold">
-              {contributor.login.charAt(0).toUpperCase()}
-            </AvatarFallback>
-          </Avatar>
-          <div className="flex flex-col gap-2">
-            <h3 className="text-xl font-semibold">{contributor.login}</h3>
-            <div className="flex items-center justify-center gap-2">
-              <span className="font-medium">{contributor.contributions}</span>
-              <span className="text-muted-foreground">contributions</span>
-            </div>
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  );
+	return (
+		<Link
+			href={contributor.html_url}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="w-full"
+		>
+			<Card>
+				<CardContent className="flex flex-col gap-6 p-8 text-center">
+					<Avatar className="mx-auto size-28">
+						<AvatarImage
+							src={contributor.avatar_url}
+							alt={`${contributor.login}'s avatar`}
+						/>
+						<AvatarFallback className="text-lg font-semibold">
+							{contributor.login.charAt(0).toUpperCase()}
+						</AvatarFallback>
+					</Avatar>
+					<div className="flex flex-col gap-2">
+						<h3 className="text-xl font-semibold">{contributor.login}</h3>
+						<div className="flex items-center justify-center gap-2">
+							<span className="font-medium">{contributor.contributions}</span>
+							<span className="text-muted-foreground">contributions</span>
+						</div>
+					</div>
+				</CardContent>
+			</Card>
+		</Link>
+	);
 }
 
 function AllContributorsSection({
-  contributors,
+	contributors,
 }: {
-  contributors: Contributor[];
+	contributors: Contributor[];
 }) {
-  return (
-    <div className="flex flex-col gap-12">
-      <div className="flex flex-col gap-2 text-center">
-        <h2 className="text-2xl font-semibold">All contributors</h2>
-        <p className="text-muted-foreground">
-          Everyone who makes OpenCut better
-        </p>
-      </div>
+	return (
+		<div className="flex flex-col gap-12">
+			<div className="flex flex-col gap-2 text-center">
+				<h2 className="text-2xl font-semibold">All contributors</h2>
+				<p className="text-muted-foreground">
+					Everyone who makes OpenCut better
+				</p>
+			</div>
 
-      <div className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
-        {contributors.map((contributor, index) => (
-          <Link
-            key={contributor.id}
-            href={contributor.html_url}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="opacity-100 transition-opacity hover:opacity-70"
-          >
-            <div className="flex flex-col items-center gap-2 p-2">
-              <Avatar className="h-16 w-16">
-                <AvatarImage
-                  src={contributor.avatar_url}
-                  alt={`${contributor.login}'s avatar`}
-                />
-                <AvatarFallback>
-                  {contributor.login.charAt(0).toUpperCase()}
-                </AvatarFallback>
-              </Avatar>
-              <div className="text-center">
-                <h3 className="text-sm font-medium">{contributor.login}</h3>
-                <p className="text-muted-foreground text-xs">
-                  {contributor.contributions}
-                </p>
-              </div>
-            </div>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+			<div className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
+				{contributors.map((contributor) => (
+					<Link
+						key={contributor.id}
+						href={contributor.html_url}
+						target="_blank"
+						rel="noopener noreferrer"
+						className="opacity-100 transition-opacity hover:opacity-70"
+					>
+						<div className="flex flex-col items-center gap-2 p-2">
+							<Avatar className="h-16 w-16">
+								<AvatarImage
+									src={contributor.avatar_url}
+									alt={`${contributor.login}'s avatar`}
+								/>
+								<AvatarFallback>
+									{contributor.login.charAt(0).toUpperCase()}
+								</AvatarFallback>
+							</Avatar>
+							<div className="text-center">
+								<h3 className="text-sm font-medium">{contributor.login}</h3>
+								<p className="text-muted-foreground text-xs">
+									{contributor.contributions}
+								</p>
+							</div>
+						</div>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
 }
 
 function EmptyState() {
-  return (
-    <div className="flex flex-col gap-8 py-20 text-center">
-      <div className="flex flex-col gap-6">
-        <div className="bg-muted/50 mx-auto flex h-20 w-20 items-center justify-center rounded-full">
-          <GithubIcon className="text-muted-foreground h-8 w-8" />
-        </div>
-        <div className="flex flex-col gap-3">
-          <h3 className="text-xl font-medium">No contributors found</h3>
-          <p className="text-muted-foreground mx-auto max-w-md">
-            Unable to load contributors at the moment. Check back later or view
-            on GitHub.
-          </p>
-        </div>
-      </div>
-      <Link
-        href={`${SOCIAL_LINKS.github}/graphs/contributors`}
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <Button variant="outline" className="gap-2">
-          <GithubIcon className="h-4 w-4" />
-          View on GitHub
-          <ExternalLink className="h-4 w-4" />
-        </Button>
-      </Link>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-8 py-20 text-center">
+			<div className="flex flex-col gap-6">
+				<div className="bg-muted/50 mx-auto flex h-20 w-20 items-center justify-center rounded-full">
+					<GithubIcon className="text-muted-foreground h-8 w-8" />
+				</div>
+				<div className="flex flex-col gap-3">
+					<h3 className="text-xl font-medium">No contributors found</h3>
+					<p className="text-muted-foreground mx-auto max-w-md">
+						Unable to load contributors at the moment. Check back later or view
+						on GitHub.
+					</p>
+				</div>
+			</div>
+			<Link
+				href={`${SOCIAL_LINKS.github}/graphs/contributors`}
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<Button variant="outline" className="gap-2">
+					<GithubIcon className="h-4 w-4" />
+					View on GitHub
+					<ExternalLink className="h-4 w-4" />
+				</Button>
+			</Link>
+		</div>
+	);
 }
 
 function ExternalToolsSection() {
-  return (
-    <div className="flex flex-col gap-10">
-      <div className="flex flex-col gap-2 text-center">
-        <h2 className="text-2xl font-semibold">External tools</h2>
-        <p className="text-muted-foreground">Tools we use to build OpenCut</p>
-      </div>
+	return (
+		<div className="flex flex-col gap-10">
+			<div className="flex flex-col gap-2 text-center">
+				<h2 className="text-2xl font-semibold">External tools</h2>
+				<p className="text-muted-foreground">Tools we use to build OpenCut</p>
+			</div>
 
-      <div className="mx-auto grid max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
-        {EXTERNAL_TOOLS.map((tool, index) => (
-          <Link
-            key={index}
-            href={tool.url}
-            target="_blank"
-            className="block"
-            style={{ animationDelay: `${index * 100}ms` }}
-          >
-            <Card className="h-full">
-              <CardContent className="flex h-full flex-col gap-4 p-6 text-center">
-                <div className="bg-muted/50 mx-auto flex h-12 w-12 items-center justify-center rounded-full">
-                  <tool.icon className="h-6 w-6" />
-                </div>
-                <div className="flex flex-1 flex-col gap-2">
-                  <h3 className="text-lg font-semibold">{tool.name}</h3>
-                  <p className="text-muted-foreground text-sm">
-                    {tool.description}
-                  </p>
-                </div>
-              </CardContent>
-            </Card>
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+			<div className="mx-auto grid max-w-4xl grid-cols-1 gap-6 sm:grid-cols-2 md:grid-cols-3">
+				{EXTERNAL_TOOLS.map((tool, index) => (
+					<Link
+						key={tool.url}
+						href={tool.url}
+						target="_blank"
+						className="block"
+						style={{ animationDelay: `${index * 100}ms` }}
+					>
+						<Card className="h-full">
+							<CardContent className="flex h-full flex-col gap-4 p-6 text-center">
+								<div className="bg-muted/50 mx-auto flex h-12 w-12 items-center justify-center rounded-full">
+									<tool.icon className="h-6 w-6" />
+								</div>
+								<div className="flex flex-1 flex-col gap-2">
+									<h3 className="text-lg font-semibold">{tool.name}</h3>
+									<p className="text-muted-foreground text-sm">
+										{tool.description}
+									</p>
+								</div>
+							</CardContent>
+						</Card>
+					</Link>
+				))}
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index ac013fbe..958b0565 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -2,9 +2,9 @@
 
 import { useParams } from "next/navigation";
 import {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
+	ResizablePanelGroup,
+	ResizablePanel,
+	ResizableHandle,
 } from "@/components/ui/resizable";
 import { AssetsPanel } from "@/components/editor/assets-panel";
 import { PropertiesPanel } from "@/components/editor/properties-panel";
@@ -17,92 +17,92 @@ import { MigrationDialog } from "@/components/editor/migration-dialog";
 import { usePanelStore } from "@/stores/panel-store";
 
 export default function Editor() {
-  const params = useParams();
-  const projectId = params.project_id as string;
+	const params = useParams();
+	const projectId = params.project_id as string;
 
-  return (
-    <EditorProvider projectId={projectId}>
-      <div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
-        <EditorHeader />
-        <div className="min-h-0 min-w-0 flex-1">
-          <EditorLayout />
-        </div>
-        <Onboarding />
-        <MigrationDialog />
-      </div>
-    </EditorProvider>
-  );
+	return (
+		<EditorProvider projectId={projectId}>
+			<div className="bg-background flex h-screen w-screen flex-col overflow-hidden">
+				<EditorHeader />
+				<div className="min-h-0 min-w-0 flex-1">
+					<EditorLayout />
+				</div>
+				<Onboarding />
+				<MigrationDialog />
+			</div>
+		</EditorProvider>
+	);
 }
 
 function EditorLayout() {
-  const { panels, setPanel } = usePanelStore();
+	const { panels, setPanel } = usePanelStore();
 
-  return (
-    <ResizablePanelGroup
-      direction="vertical"
-      className="h-full w-full gap-[0.18rem]"
-      onLayout={(sizes) => {
-        setPanel("mainContent", sizes[0] ?? panels.mainContent);
-        setPanel("timeline", sizes[1] ?? panels.timeline);
-      }}
-    >
-      <ResizablePanel
-        defaultSize={panels.mainContent}
-        minSize={30}
-        maxSize={85}
-        className="min-h-0"
-      >
-        <ResizablePanelGroup
-          direction="horizontal"
-          className="h-full w-full gap-[0.19rem] px-3"
-          onLayout={(sizes) => {
-            setPanel("tools", sizes[0] ?? panels.tools);
-            setPanel("preview", sizes[1] ?? panels.preview);
-            setPanel("properties", sizes[2] ?? panels.properties);
-          }}
-        >
-          <ResizablePanel
-            defaultSize={panels.tools}
-            minSize={15}
-            maxSize={40}
-            className="min-w-0 rounded-sm"
-          >
-            <AssetsPanel />
-          </ResizablePanel>
+	return (
+		<ResizablePanelGroup
+			direction="vertical"
+			className="h-full w-full gap-[0.18rem]"
+			onLayout={(sizes) => {
+				setPanel("mainContent", sizes[0] ?? panels.mainContent);
+				setPanel("timeline", sizes[1] ?? panels.timeline);
+			}}
+		>
+			<ResizablePanel
+				defaultSize={panels.mainContent}
+				minSize={30}
+				maxSize={85}
+				className="min-h-0"
+			>
+				<ResizablePanelGroup
+					direction="horizontal"
+					className="h-full w-full gap-[0.19rem] px-3"
+					onLayout={(sizes) => {
+						setPanel("tools", sizes[0] ?? panels.tools);
+						setPanel("preview", sizes[1] ?? panels.preview);
+						setPanel("properties", sizes[2] ?? panels.properties);
+					}}
+				>
+					<ResizablePanel
+						defaultSize={panels.tools}
+						minSize={15}
+						maxSize={40}
+						className="min-w-0 rounded-sm"
+					>
+						<AssetsPanel />
+					</ResizablePanel>
 
-          <ResizableHandle withHandle />
+					<ResizableHandle withHandle />
 
-          <ResizablePanel
-            defaultSize={panels.preview}
-            minSize={30}
-            className="min-h-0 min-w-0 flex-1"
-          >
-            <PreviewPanel />
-          </ResizablePanel>
+					<ResizablePanel
+						defaultSize={panels.preview}
+						minSize={30}
+						className="min-h-0 min-w-0 flex-1"
+					>
+						<PreviewPanel />
+					</ResizablePanel>
 
-          <ResizableHandle withHandle />
+					<ResizableHandle withHandle />
 
-          <ResizablePanel
-            defaultSize={panels.properties}
-            minSize={15}
-            maxSize={40}
-            className="min-w-0 rounded-sm"
-          >
-            <PropertiesPanel />
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ResizablePanel>
+					<ResizablePanel
+						defaultSize={panels.properties}
+						minSize={15}
+						maxSize={40}
+						className="min-w-0 rounded-sm"
+					>
+						<PropertiesPanel />
+					</ResizablePanel>
+				</ResizablePanelGroup>
+			</ResizablePanel>
 
-      <ResizableHandle withHandle />
+			<ResizableHandle withHandle />
 
-      <ResizablePanel
-        defaultSize={panels.timeline}
-        minSize={15}
-        maxSize={70}
-        className="min-h-0 px-3 pb-3"
-      >
-        <Timeline />
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  );
+			<ResizablePanel
+				defaultSize={panels.timeline}
+				minSize={15}
+				maxSize={70}
+				className="min-h-0 px-3 pb-3"
+			>
+				<Timeline />
+			</ResizablePanel>
+		</ResizablePanelGroup>
+	);
 }
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 759b400c..9b547211 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -8,86 +8,89 @@
 @plugin "tailwindcss-animate";
 
 :root {
-  --background: hsl(0, 0%, 100%);
-  --foreground: hsl(0 0% 11%);
-  --card: hsl(0, 0%, 100%);
-  --card-foreground: hsl(0 0% 11%);
-  --popover: hsl(0, 0%, 100%);
-  --popover-foreground: hsl(0 0% 2%);
-  --primary: hsl(205, 84%, 47%);
-  --primary-foreground: hsl(0 0% 91%);
-  --secondary: hsl(216, 13%, 92%);
-  --secondary-foreground: hsl(0 0% 2%);
-  --muted: hsl(0 0% 85.1%);
-  --muted-foreground: hsl(0 0% 50%);
-  --accent: hsl(216, 13%, 92%);
-  --accent-foreground: hsl(0 0% 2%);
-  --destructive: hsl(0, 83%, 50%);
-  --destructive-foreground: hsl(0, 0%, 100%);
-  --constructive: hsl(141, 71%, 48%);
-  --constructive-foreground: hsl(0, 0%, 100%);
-  --border: hsl(0 0% 83%);
-  --input: hsl(0 0% 85.1%);
-  --ring: hsl(0, 0%, 55%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-  --sidebar-background: hsl(0 0% 96.1%);
-  --sidebar-foreground: hsl(0 0% 2%);
-  --sidebar-primary: hsl(0 0% 2%);
-  --sidebar-primary-foreground: hsl(0 0% 91%);
-  --sidebar-accent: hsl(0 0% 85.1%);
-  --sidebar-accent-foreground: hsl(0 0% 2%);
-  --sidebar-border: hsl(0 0% 85.1%);
-  --sidebar-ring: hsl(0 0% 16.9%);
-  --panel-background: hsl(216 13% 92%);
-  --panel-accent: hsl(216, 8%, 86%);
+	--background: hsl(0, 0%, 100%);
+	--foreground: hsl(0 0% 11%);
+	--card: hsl(0, 0%, 100%);
+	--card-foreground: hsl(0 0% 11%);
+	--popover: hsl(0, 0%, 100%);
+	--popover-foreground: hsl(0 0% 2%);
+	--primary: hsl(210, 91%, 49%);
+	--primary-foreground: hsl(0 0% 91%);
+	--secondary: hsl(216, 13%, 92%);
+	--secondary-foreground: hsl(0 0% 2%);
+	--muted: hsl(0 0% 85.1%);
+	--muted-foreground: hsl(0 0% 50%);
+	--accent: hsl(216, 13%, 92%);
+	--accent-foreground: hsl(0 0% 2%);
+	--destructive: hsl(0, 83%, 50%);
+	--destructive-foreground: hsl(0, 0%, 100%);
+	--constructive: hsl(141, 71%, 48%);
+	--constructive-foreground: hsl(0, 0%, 100%);
+	--border: hsl(0 0% 83%);
+	--input: hsl(0 0% 85.1%);
+	--ring: hsl(0, 0%, 55%);
+	--chart-1: hsl(220 70% 50%);
+	--chart-2: hsl(160 60% 45%);
+	--chart-3: hsl(30 80% 55%);
+	--chart-4: hsl(280 65% 60%);
+	--chart-5: hsl(340 75% 55%);
+	--sidebar-background: hsl(0 0% 96.1%);
+	--sidebar-foreground: hsl(0 0% 2%);
+	--sidebar-primary: hsl(0 0% 2%);
+	--sidebar-primary-foreground: hsl(0 0% 91%);
+	--sidebar-accent: hsl(0 0% 85.1%);
+	--sidebar-accent-foreground: hsl(0 0% 2%);
+	--sidebar-border: hsl(0 0% 85.1%);
+	--sidebar-ring: hsl(0 0% 16.9%);
+	--panel-background: hsl(216 13% 92%);
+	--panel-accent: hsl(216, 8%, 86%);
 
-  --radius: 1rem;
+	--radius: 1rem;
+
+	--sidebar: hsl(0 0% 98%);
 }
 .dark {
-  --background: hsl(0 0% 4%);
-  --foreground: hsl(0 0% 89%);
-  --card: hsl(0 0% 4%);
-  --card-foreground: hsl(0 0% 89%);
-  --popover: hsl(0 0% 14.9%);
-  --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(205, 84%, 53%);
-  --primary-foreground: hsl(0 0% 9%);
-  --secondary: hsl(0 0% 14.9%);
-  --secondary-foreground: hsl(0 0% 98%);
-  --muted: hsl(0 0% 14.9%);
-  --muted-foreground: hsl(0 0% 63.9%);
-  --accent: hsl(0 0% 14.9%);
-  --accent-foreground: hsl(0 0% 98%);
-  --destructive: hsl(0 100% 60%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --constructive: hsl(141, 71%, 48%);
-  --constructive-foreground: hsl(0, 0%, 100%);
-  --border: hsl(0 0% 17%);
-  --input: hsl(0 0% 14.9%);
-  --ring: hsl(0 0% 83.1%);
-  --chart-1: hsl(220 70% 50%);
-  --chart-2: hsl(160 60% 45%);
-  --chart-3: hsl(30 80% 55%);
-  --chart-4: hsl(280 65% 60%);
-  --chart-5: hsl(340 75% 55%);
-  --sidebar-background: hsl(0 0% 3.9%);
-  --sidebar-foreground: hsl(0 0% 98%);
-  --sidebar-primary: hsl(0 0% 98%);
-  --sidebar-primary-foreground: hsl(0 0% 9%);
-  --sidebar-accent: hsl(0 0% 14.9%);
-  --sidebar-accent-foreground: hsl(0 0% 98%);
-  --sidebar-border: hsl(0 0% 14.9%);
-  --sidebar-ring: hsl(0 0% 83.1%);
-  --panel-background: hsl(0 0% 11%);
-  --panel-accent: hsl(0 0% 15%);
+	--background: hsl(0 0% 4%);
+	--foreground: hsl(0 0% 89%);
+	--card: hsl(0 0% 4%);
+	--card-foreground: hsl(0 0% 89%);
+	--popover: hsl(0 0% 14.9%);
+	--popover-foreground: hsl(0 0% 98%);
+	--primary: hsl(205, 84%, 53%);
+	--primary-foreground: hsl(0 0% 9%);
+	--secondary: hsl(0 0% 14.9%);
+	--secondary-foreground: hsl(0 0% 98%);
+	--muted: hsl(0 0% 14.9%);
+	--muted-foreground: hsl(0 0% 63.9%);
+	--accent: hsl(0 0% 14.9%);
+	--accent-foreground: hsl(0 0% 98%);
+	--destructive: hsl(0 100% 60%);
+	--destructive-foreground: hsl(0 0% 98%);
+	--constructive: hsl(141, 71%, 48%);
+	--constructive-foreground: hsl(0, 0%, 100%);
+	--border: hsl(0 0% 17%);
+	--input: hsl(0 0% 14.9%);
+	--ring: hsl(0 0% 83.1%);
+	--chart-1: hsl(220 70% 50%);
+	--chart-2: hsl(160 60% 45%);
+	--chart-3: hsl(30 80% 55%);
+	--chart-4: hsl(280 65% 60%);
+	--chart-5: hsl(340 75% 55%);
+	--sidebar-background: hsl(0 0% 3.9%);
+	--sidebar-foreground: hsl(0 0% 98%);
+	--sidebar-primary: hsl(0 0% 98%);
+	--sidebar-primary-foreground: hsl(0 0% 9%);
+	--sidebar-accent: hsl(0 0% 14.9%);
+	--sidebar-accent-foreground: hsl(0 0% 98%);
+	--sidebar-border: hsl(0 0% 14.9%);
+	--sidebar-ring: hsl(0 0% 83.1%);
+	--panel-background: hsl(0 0% 11%);
+	--panel-accent: hsl(0 0% 15%);
+	--sidebar: hsl(240 5.9% 10%);
 }
 
 @layer base {
-  /*
+	/*
     The default border color has changed to `currentcolor` in Tailwind CSS v4,
     so we've added these compatibility styles to make sure everything still
     looks the same as it did with Tailwind CSS v3.
@@ -95,155 +98,164 @@
     If we ever want to remove these styles, we need to add an explicit border
     color utility to any element that depends on these defaults.
   */
-  *,
-  ::after,
-  ::before,
-  ::backdrop,
-  ::file-selector-button {
-    border-color: var(--color-gray-200, currentcolor);
-  }
-  /* Other default base styles */
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    /* Prevent back/forward swipe */
-    overscroll-behavior-x: contain;
-  }
+	*,
+	::after,
+	::before,
+	::backdrop,
+	::file-selector-button {
+		border-color: var(--color-gray-200, currentcolor);
+	}
+	/* Other default base styles */
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply bg-background text-foreground;
+		/* Prevent back/forward swipe */
+		overscroll-behavior-x: contain;
+	}
 }
 
 @theme inline {
-  /* Responsive breakpoints */
-  --breakpoint-xs: 30rem;
+	/* Responsive breakpoints */
+	--breakpoint-xs: 30rem;
 
-  /* Typography */
-  --font-sans: var(--font-inter), sans-serif;
+	/* Typography */
+	--font-sans: var(--font-inter), sans-serif;
 
-  /* Font sizes */
-  --text-base: 0.95rem;
-  --text-base--line-height: calc(1.5 / 0.95);
-  --text-xs: 0.8rem;
-  --text-xs--line-height: calc(1 / 0.8);
+	/* Font sizes */
+	--text-base: 0.95rem;
+	--text-base--line-height: calc(1.5 / 0.95);
+	--text-xs: 0.8rem;
+	--text-xs--line-height: calc(1 / 0.8);
 
-  /* Border radius */
-  --radius-lg: var(--radius);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-sm: calc(var(--radius) - 8px);
+	/* Border radius */
+	--radius-lg: var(--radius);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-sm: calc(var(--radius) - 8px);
 
-  /* Palette mapped to root design tokens */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
+	/* Palette mapped to root design tokens */
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
 
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
 
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
 
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
 
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
 
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
 
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
 
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
 
-  --color-constructive: var(--constructive);
-  --color-constructive-foreground: var(--constructive-foreground);
+	--color-constructive: var(--constructive);
+	--color-constructive-foreground: var(--constructive-foreground);
 
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
 
-  /* Chart colors */
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
+	/* Chart colors */
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
 
-  /* Sidebar */
-  --color-sidebar: var(--sidebar-background);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
+	/* Sidebar */
+	--color-sidebar: var(--sidebar-background);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
 
-  /* Panel */
-  --color-panel: var(--panel-background);
-  --color-panel-accent: var(--panel-accent);
+	/* Panel */
+	--color-panel: var(--panel-background);
+	--color-panel-accent: var(--panel-accent);
 
-  /* Animations */
-  --animate-accordion-down: accordion-down 0.2s ease-out;
-  --animate-accordion-up: accordion-up 0.2s ease-out;
+	/* Animations */
+	--animate-accordion-down: accordion-down 0.2s ease-out;
+	--animate-accordion-up: accordion-up 0.2s ease-out;
 
-  @keyframes accordion-down {
-    from {
-      height: 0;
-    }
-    to {
-      height: var(--radix-accordion-content-height);
-    }
-  }
+	@keyframes accordion-down {
+		from {
+			height: 0;
+		}
+		to {
+			height: var(--radix-accordion-content-height);
+		}
+	}
 
-  @keyframes accordion-up {
-    from {
-      height: var(--radix-accordion-content-height);
-    }
-    to {
-      height: 0;
-    }
-  }
+	@keyframes accordion-up {
+		from {
+			height: var(--radix-accordion-content-height);
+		}
+		to {
+			height: 0;
+		}
+	}
 }
 
 @utility scrollbar-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar {
-    display: none;
-  }
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	&::-webkit-scrollbar {
+		display: none;
+	}
 }
 
 @utility scrollbar-x-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar:horizontal {
-    display: none;
-  }
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	&::-webkit-scrollbar:horizontal {
+		display: none;
+	}
 }
 
 @utility scrollbar-y-hidden {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  &::-webkit-scrollbar:vertical {
-    display: none;
-  }
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+	&::-webkit-scrollbar:vertical {
+		display: none;
+	}
 }
 
 @utility scrollbar-thin {
-  &::-webkit-scrollbar {
-    width: 6px;
-    height: 8px;
-  }
-  &::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: var(--border);
-    border-radius: 4px;
-  }
-  &::-webkit-scrollbar-thumb:hover {
-    background: var(--muted-foreground);
-  }
+	&::-webkit-scrollbar {
+		width: 6px;
+		height: 8px;
+	}
+	&::-webkit-scrollbar-track {
+		background: transparent;
+	}
+	&::-webkit-scrollbar-thumb {
+		background: var(--border);
+		border-radius: 4px;
+	}
+	&::-webkit-scrollbar-thumb:hover {
+		background: var(--muted-foreground);
+	}
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 57e81266..2b3d0c30 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -13,46 +13,46 @@ const siteFont = Inter({ subsets: ["latin"] });
 export const metadata = baseMetaData;
 
 const protectedRoutes = [
-  {
-    path: "/none",
-    method: "GET",
-  },
+	{
+		path: "/none",
+		method: "GET",
+	},
 ];
 
 export default function RootLayout({
-  children,
+	children,
 }: Readonly<{
-  children: React.ReactNode;
+	children: React.ReactNode;
 }>) {
-  return (
-    <html lang="en" suppressHydrationWarning>
-      <head>
-        <BotIdClient protect={protectedRoutes} />
-      </head>
-      <body className={`${siteFont.className} font-sans antialiased`}>
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          disableTransitionOnChange={true}
-        >
-          <TooltipProvider>
-            <Toaster />
-            <Script
-              src="https://cdn.databuddy.cc/databuddy.js"
-              strategy="afterInteractive"
-              async
-              data-client-id="UP-Wcoy5arxFeK7oyjMMZ"
-              data-disabled={webEnv.NODE_ENV === "development"}
-              data-track-attributes={false}
-              data-track-errors={true}
-              data-track-outgoing-links={false}
-              data-track-web-vitals={false}
-              data-track-sessions={false}
-            />
-            {children}
-          </TooltipProvider>
-        </ThemeProvider>
-      </body>
-    </html>
-  );
+	return (
+		<html lang="en" suppressHydrationWarning>
+			<head>
+				<BotIdClient protect={protectedRoutes} />
+			</head>
+			<body className={`${siteFont.className} font-sans antialiased`}>
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="system"
+					disableTransitionOnChange={true}
+				>
+					<TooltipProvider>
+						<Toaster />
+						<Script
+							src="https://cdn.databuddy.cc/databuddy.js"
+							strategy="afterInteractive"
+							async
+							data-client-id="UP-Wcoy5arxFeK7oyjMMZ"
+							data-disabled={webEnv.NODE_ENV === "development"}
+							data-track-attributes={false}
+							data-track-errors={true}
+							data-track-outgoing-links={false}
+							data-track-web-vitals={false}
+							data-track-sessions={false}
+						/>
+						{children}
+					</TooltipProvider>
+				</ThemeProvider>
+			</body>
+		</html>
+	);
 }
diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts
index 532da5b0..7c192d2b 100644
--- a/apps/web/src/app/metadata.ts
+++ b/apps/web/src/app/metadata.ts
@@ -2,85 +2,85 @@ import type { Metadata } from "next";
 import { SITE_INFO, SITE_URL } from "@/constants/site-constants";
 
 export const baseMetaData: Metadata = {
-  metadataBase: new URL(SITE_URL),
-  title: SITE_INFO.title,
-  description: SITE_INFO.description,
-  openGraph: {
-    title: SITE_INFO.title,
-    description: SITE_INFO.description,
-    url: SITE_URL,
-    siteName: SITE_INFO.title,
-    locale: "en_US",
-    type: "website",
-    images: [
-      {
-        url: SITE_INFO.openGraphImage,
-        width: 1200,
-        height: 630,
-        alt: "OpenCut Wordmark",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: SITE_INFO.title,
-    description: SITE_INFO.description,
-    creator: "@opencutapp",
-    images: [SITE_INFO.twitterImage],
-  },
-  pinterest: {
-    richPin: false,
-  },
-  robots: {
-    index: true,
-    follow: true,
-  },
-  icons: {
-    icon: [
-      { url: "/favicon.ico" },
-      { url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
-      { url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
-      { url: "/icons/favicon-96x96.png", sizes: "96x96", type: "image/png" },
-    ],
-    apple: [
-      { url: "/icons/apple-icon-57x57.png", sizes: "57x57", type: "image/png" },
-      { url: "/icons/apple-icon-60x60.png", sizes: "60x60", type: "image/png" },
-      { url: "/icons/apple-icon-72x72.png", sizes: "72x72", type: "image/png" },
-      { url: "/icons/apple-icon-76x76.png", sizes: "76x76", type: "image/png" },
-      {
-        url: "/icons/apple-icon-114x114.png",
-        sizes: "114x114",
-        type: "image/png",
-      },
-      {
-        url: "/icons/apple-icon-120x120.png",
-        sizes: "120x120",
-        type: "image/png",
-      },
-      {
-        url: "/icons/apple-icon-144x144.png",
-        sizes: "144x144",
-        type: "image/png",
-      },
-      {
-        url: "/icons/apple-icon-152x152.png",
-        sizes: "152x152",
-        type: "image/png",
-      },
-      {
-        url: "/icons/apple-icon-180x180.png",
-        sizes: "180x180",
-        type: "image/png",
-      },
-    ],
-    shortcut: ["/favicon.ico"],
-  },
-  appleWebApp: {
-    capable: true,
-    title: SITE_INFO.title,
-  },
-  manifest: "/manifest.json",
-  other: {
-    "msapplication-config": "/browserconfig.xml",
-  },
+	metadataBase: new URL(SITE_URL),
+	title: SITE_INFO.title,
+	description: SITE_INFO.description,
+	openGraph: {
+		title: SITE_INFO.title,
+		description: SITE_INFO.description,
+		url: SITE_URL,
+		siteName: SITE_INFO.title,
+		locale: "en_US",
+		type: "website",
+		images: [
+			{
+				url: SITE_INFO.openGraphImage,
+				width: 1200,
+				height: 630,
+				alt: "OpenCut Wordmark",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: SITE_INFO.title,
+		description: SITE_INFO.description,
+		creator: "@opencutapp",
+		images: [SITE_INFO.twitterImage],
+	},
+	pinterest: {
+		richPin: false,
+	},
+	robots: {
+		index: true,
+		follow: true,
+	},
+	icons: {
+		icon: [
+			{ url: "/favicon.ico" },
+			{ url: "/icons/favicon-16x16.png", sizes: "16x16", type: "image/png" },
+			{ url: "/icons/favicon-32x32.png", sizes: "32x32", type: "image/png" },
+			{ url: "/icons/favicon-96x96.png", sizes: "96x96", type: "image/png" },
+		],
+		apple: [
+			{ url: "/icons/apple-icon-57x57.png", sizes: "57x57", type: "image/png" },
+			{ url: "/icons/apple-icon-60x60.png", sizes: "60x60", type: "image/png" },
+			{ url: "/icons/apple-icon-72x72.png", sizes: "72x72", type: "image/png" },
+			{ url: "/icons/apple-icon-76x76.png", sizes: "76x76", type: "image/png" },
+			{
+				url: "/icons/apple-icon-114x114.png",
+				sizes: "114x114",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-120x120.png",
+				sizes: "120x120",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-144x144.png",
+				sizes: "144x144",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-152x152.png",
+				sizes: "152x152",
+				type: "image/png",
+			},
+			{
+				url: "/icons/apple-icon-180x180.png",
+				sizes: "180x180",
+				type: "image/png",
+			},
+		],
+		shortcut: ["/favicon.ico"],
+	},
+	appleWebApp: {
+		capable: true,
+		title: SITE_INFO.title,
+	},
+	manifest: "/manifest.json",
+	other: {
+		"msapplication-config": "/browserconfig.xml",
+	},
 };
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 14dc0deb..d97c9a54 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -5,17 +5,17 @@ import type { Metadata } from "next";
 import { SITE_URL } from "@/constants/site-constants";
 
 export const metadata: Metadata = {
-  alternates: {
-    canonical: SITE_URL,
-  },
+	alternates: {
+		canonical: SITE_URL,
+	},
 };
 
 export default async function Home() {
-  return (
-    <div>
-      <Header />
-      <Hero />
-      <Footer />
-    </div>
-  );
+	return (
+		<div>
+			<Header />
+			<Hero />
+			<Footer />
+		</div>
+	);
 }
diff --git a/apps/web/src/app/privacy/page.tsx b/apps/web/src/app/privacy/page.tsx
index f7e4b0b9..b71b8d30 100644
--- a/apps/web/src/app/privacy/page.tsx
+++ b/apps/web/src/app/privacy/page.tsx
@@ -1,287 +1,287 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import { BasePage } from "@/app/base-page";
-import { SOCIAL_LINKS } from "@/constants/site-constants";
-import { Separator } from "@/components/ui/separator";
 import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Separator } from "@/components/ui/separator";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
 
 export const metadata: Metadata = {
-  title: "Privacy Policy - OpenCut",
-  description:
-    "Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
-  openGraph: {
-    title: "Privacy Policy - OpenCut",
-    description:
-      "Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
-    type: "website",
-  },
+	title: "Privacy Policy - OpenCut",
+	description:
+		"Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
+	openGraph: {
+		title: "Privacy Policy - OpenCut",
+		description:
+			"Learn how OpenCut handles your data and privacy. Our commitment to protecting your information while you edit videos.",
+		type: "website",
+	},
 };
 
 export default function PrivacyPage() {
-  return (
-    <BasePage
-      title="Privacy policy"
-      description="Learn how we handle your data and privacy. Contact us if you have any questions."
-    >
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem
-          value="quick-summary"
-          className="rounded-2xl border px-5"
-        >
-          <AccordionTrigger className="no-underline!">
-            Quick summary
-          </AccordionTrigger>
-          <AccordionContent>
-            <h3 className="mb-3 text-lg font-medium">
-              Your content stays private and encrypted.
-            </h3>
-            <ol className="list-decimal space-y-2 pl-6">
-              <li>
-                Basic editing happens locally in your browser - we never see
-                your files
-              </li>
-              <li>
-                AI features require encrypted uploads - your content is
-                encrypted before leaving your device
-              </li>
-              <li>
-                We only collect your email and basic profile info for your
-                account
-              </li>
-              <li>Project data stays on your device, not our servers</li>
-              <li>
-                We use analytics to improve the app, but no personal video
-                content is tracked
-              </li>
-              <li>
-                You can delete your account anytime and all data gets removed
-              </li>
-              <li>We don't sell your data or share it with advertisers</li>
-            </ol>
-            <p className="mt-4">
-              Questions? Email us at{" "}
-              <a
-                href="mailto:oss@opencut.app"
-                className="text-primary hover:underline"
-              >
-                oss@opencut.app
-              </a>
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+	return (
+		<BasePage
+			title="Privacy policy"
+			description="Learn how we handle your data and privacy. Contact us if you have any questions."
+		>
+			<Accordion type="single" collapsible className="w-full">
+				<AccordionItem
+					value="quick-summary"
+					className="rounded-2xl border px-5"
+				>
+					<AccordionTrigger className="no-underline!">
+						Quick summary
+					</AccordionTrigger>
+					<AccordionContent>
+						<h3 className="mb-3 text-lg font-medium">
+							Your content stays private and encrypted.
+						</h3>
+						<ol className="list-decimal space-y-2 pl-6">
+							<li>
+								Basic editing happens locally in your browser - we never see
+								your files
+							</li>
+							<li>
+								AI features require encrypted uploads - your content is
+								encrypted before leaving your device
+							</li>
+							<li>
+								We only collect your email and basic profile info for your
+								account
+							</li>
+							<li>Project data stays on your device, not our servers</li>
+							<li>
+								We use analytics to improve the app, but no personal video
+								content is tracked
+							</li>
+							<li>
+								You can delete your account anytime and all data gets removed
+							</li>
+							<li>We don't sell your data or share it with advertisers</li>
+						</ol>
+						<p className="mt-4">
+							Questions? Email us at{" "}
+							<a
+								href="mailto:oss@opencut.app"
+								className="text-primary hover:underline"
+							>
+								oss@opencut.app
+							</a>
+						</p>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">How We Handle Your Content</h2>
-        <p>
-          <strong>Basic video editing happens locally on your device.</strong>{" "}
-          For standard editing features, we never upload, store, or have access
-          to your video files. Your content remains completely private and under
-          your control.
-        </p>
-        <p>
-          <strong>AI features require secure processing:</strong> When you
-          choose to use AI features like auto captions, your audio/video content
-          is encrypted on your device before being uploaded to our servers for
-          processing. We use zero-knowledge encryption, meaning we cannot
-          decrypt or view your content.
-        </p>
-        <p>
-          After AI processing is complete, the encrypted content is immediately
-          deleted from our servers. Only the results (like generated captions)
-          are returned to your device.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">How We Handle Your Content</h2>
+				<p>
+					<strong>Basic video editing happens locally on your device.</strong>{" "}
+					For standard editing features, we never upload, store, or have access
+					to your video files. Your content remains completely private and under
+					your control.
+				</p>
+				<p>
+					<strong>AI features require secure processing:</strong> When you
+					choose to use AI features like auto captions, your audio/video content
+					is encrypted on your device before being uploaded to our servers for
+					processing. We use zero-knowledge encryption, meaning we cannot
+					decrypt or view your content.
+				</p>
+				<p>
+					After AI processing is complete, the encrypted content is immediately
+					deleted from our servers. Only the results (like generated captions)
+					are returned to your device.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Account Information</h2>
-        <p>When you create an account, we only collect:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Email address (for account access)</li>
-          <li>
-            Profile information from Google OAuth (if you choose to sign in with
-            Google)
-          </li>
-        </ul>
-        <p>
-          <strong>We do NOT store your projects on our servers.</strong> All
-          project data, including names, thumbnails, and creation dates, is
-          stored locally in your browser using IndexedDB.
-        </p>
-        <p>
-          We use{" "}
-          <a
-            href="https://www.better-auth.com"
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            Better Auth
-          </a>{" "}
-          for secure authentication and follow industry-standard security
-          practices.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Account Information</h2>
+				<p>When you create an account, we only collect:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Email address (for account access)</li>
+					<li>
+						Profile information from Google OAuth (if you choose to sign in with
+						Google)
+					</li>
+				</ul>
+				<p>
+					<strong>We do NOT store your projects on our servers.</strong> All
+					project data, including names, thumbnails, and creation dates, is
+					stored locally in your browser using IndexedDB.
+				</p>
+				<p>
+					We use{" "}
+					<a
+						href="https://www.better-auth.com"
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						Better Auth
+					</a>{" "}
+					for secure authentication and follow industry-standard security
+					practices.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">AI Features & Encryption</h2>
-        <p>
-          When you use AI-powered features (like auto captions, content
-          analysis, or enhancement tools), your content needs to be processed on
-          our servers. Here's how we protect your privacy:
-        </p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>
-            <strong>Client-side encryption:</strong> Your content is encrypted
-            on your device before upload
-          </li>
-          <li>
-            <strong>Zero-knowledge processing:</strong> We cannot decrypt or
-            view your original content
-          </li>
-          <li>
-            <strong>Temporary processing:</strong> Encrypted content is deleted
-            immediately after processing
-          </li>
-          <li>
-            <strong>Opt-in only:</strong> AI features are optional - basic
-            editing remains fully local
-          </li>
-        </ul>
-        <p>
-          Different AI features may process different types of content (audio
-          for captions, video for analysis, etc.), but all follow the same
-          zero-knowledge encryption approach.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">AI Features & Encryption</h2>
+				<p>
+					When you use AI-powered features (like auto captions, content
+					analysis, or enhancement tools), your content needs to be processed on
+					our servers. Here's how we protect your privacy:
+				</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>
+						<strong>Client-side encryption:</strong> Your content is encrypted
+						on your device before upload
+					</li>
+					<li>
+						<strong>Zero-knowledge processing:</strong> We cannot decrypt or
+						view your original content
+					</li>
+					<li>
+						<strong>Temporary processing:</strong> Encrypted content is deleted
+						immediately after processing
+					</li>
+					<li>
+						<strong>Opt-in only:</strong> AI features are optional - basic
+						editing remains fully local
+					</li>
+				</ul>
+				<p>
+					Different AI features may process different types of content (audio
+					for captions, video for analysis, etc.), but all follow the same
+					zero-knowledge encryption approach.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Analytics</h2>
-        <p>
-          We use{" "}
-          <a
-            href="https://www.databuddy.cc"
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            Databuddy
-          </a>{" "}
-          for completely anonymized and non-invasive analytics to understand how
-          people use OpenCut.
-        </p>
-        <p>
-          This helps us improve the editor, but we never collect personal
-          information, track individual users, or store any data that could
-          identify you.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Analytics</h2>
+				<p>
+					We use{" "}
+					<a
+						href="https://www.databuddy.cc"
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						Databuddy
+					</a>{" "}
+					for completely anonymized and non-invasive analytics to understand how
+					people use OpenCut.
+				</p>
+				<p>
+					This helps us improve the editor, but we never collect personal
+					information, track individual users, or store any data that could
+					identify you.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Local Storage & Cookies</h2>
-        <p>We use browser local storage and IndexedDB to:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Save your projects locally on your device</li>
-          <li>Remember your editor preferences and settings</li>
-          <li>Keep you logged in across browser sessions</li>
-        </ul>
-        <p>
-          All data stays on your device and can be cleared at any time through
-          your browser settings.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Local Storage & Cookies</h2>
+				<p>We use browser local storage and IndexedDB to:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Save your projects locally on your device</li>
+					<li>Remember your editor preferences and settings</li>
+					<li>Keep you logged in across browser sessions</li>
+				</ul>
+				<p>
+					All data stays on your device and can be cleared at any time through
+					your browser settings.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Third-Party Services</h2>
-        <p>OpenCut integrates with these services:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>
-            <strong>Google OAuth:</strong> For optional Google sign-in (governed
-            by Google's privacy policy)
-          </li>
-          <li>
-            <strong>Vercel:</strong> For hosting and content delivery
-          </li>
-          <li>
-            <strong>Databuddy:</strong> For anonymized analytics
-          </li>
-        </ul>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Third-Party Services</h2>
+				<p>OpenCut integrates with these services:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>
+						<strong>Google OAuth:</strong> For optional Google sign-in (governed
+						by Google's privacy policy)
+					</li>
+					<li>
+						<strong>Vercel:</strong> For hosting and content delivery
+					</li>
+					<li>
+						<strong>Databuddy:</strong> For anonymized analytics
+					</li>
+				</ul>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Your Rights</h2>
-        <p>You have complete control over your data:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Delete your account and all associated data at any time</li>
-          <li>Export your project data</li>
-          <li>Clear local storage to remove all saved projects</li>
-          <li>Contact us with any privacy concerns</li>
-        </ul>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Your Rights</h2>
+				<p>You have complete control over your data:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Delete your account and all associated data at any time</li>
+					<li>Export your project data</li>
+					<li>Clear local storage to remove all saved projects</li>
+					<li>Contact us with any privacy concerns</li>
+				</ul>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Open Source Transparency</h2>
-        <p>
-          OpenCut is completely open source. You can review our code, see
-          exactly how we handle data, and even self-host the application if you
-          prefer.
-        </p>
-        <p>
-          View our source code on{" "}
-          <a
-            href={SOCIAL_LINKS.github}
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            GitHub
-          </a>
-          .
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Open Source Transparency</h2>
+				<p>
+					OpenCut is completely open source. You can review our code, see
+					exactly how we handle data, and even self-host the application if you
+					prefer.
+				</p>
+				<p>
+					View our source code on{" "}
+					<a
+						href={SOCIAL_LINKS.github}
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						GitHub
+					</a>
+					.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Contact Us</h2>
-        <p>Questions about this privacy policy or how we handle your data?</p>
-        <p>
-          Open an issue on our{" "}
-          <a
-            href={`${SOCIAL_LINKS.github}/issues`}
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            GitHub repository
-          </a>
-          , email us at{" "}
-          <a
-            href="mailto:oss@opencut.app"
-            className="text-primary hover:underline"
-          >
-            oss@opencut.app
-          </a>
-          , or reach out on{" "}
-          <a
-            href={SOCIAL_LINKS.x}
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            X (Twitter)
-          </a>
-          .
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Contact Us</h2>
+				<p>Questions about this privacy policy or how we handle your data?</p>
+				<p>
+					Open an issue on our{" "}
+					<a
+						href={`${SOCIAL_LINKS.github}/issues`}
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						GitHub repository
+					</a>
+					, email us at{" "}
+					<a
+						href="mailto:oss@opencut.app"
+						className="text-primary hover:underline"
+					>
+						oss@opencut.app
+					</a>
+					, or reach out on{" "}
+					<a
+						href={SOCIAL_LINKS.x}
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						X (Twitter)
+					</a>
+					.
+				</p>
+			</section>
 
-      <Separator />
+			<Separator />
 
-      <p className="text-muted-foreground text-sm">
-        Last updated: July 14, 2025
-      </p>
-    </BasePage>
-  );
+			<p className="text-muted-foreground text-sm">
+				Last updated: July 14, 2025
+			</p>
+		</BasePage>
+	);
 }
diff --git a/apps/web/src/app/projects/page-legacy.tsx b/apps/web/src/app/projects/page-legacy.tsx
new file mode 100644
index 00000000..23906d0f
--- /dev/null
+++ b/apps/web/src/app/projects/page-legacy.tsx
@@ -0,0 +1,631 @@
+"use client";
+
+import {
+	ArrowDown01,
+	Calendar,
+	ChevronLeft,
+	MoreHorizontal,
+	Plus,
+	Search,
+	Trash2,
+	Video,
+	X,
+} from "lucide-react";
+import Image from "next/image";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import type { KeyboardEvent, MouseEvent } from "react";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import { DeleteProjectDialog } from "@/components/editor/delete-project-dialog";
+import { MigrationDialog } from "@/components/editor/migration-dialog";
+import { RenameProjectDialog } from "@/components/rename-project-dialog";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useEditor } from "@/hooks/use-editor";
+import type { TProjectMetadata } from "@/types/project";
+import { formatDate } from "@/utils/date";
+
+export default function ProjectsPage() {
+	const [isSelectionMode, setIsSelectionMode] = useState(false);
+	const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
+		new Set(),
+	);
+	const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
+	const [searchQuery, setSearchQuery] = useState("");
+	const [sortOption, setSortOption] = useState("createdAt-desc");
+	const router = useRouter();
+	const editor = useEditor();
+
+	useEffect(() => {
+		if (!editor.project.getIsInitialized()) {
+			editor.project.loadAllProjects();
+		}
+	}, [editor.project]);
+
+	const handleCreateProject = async () => {
+		try {
+			const projectId = await editor.project.createNewProject({
+				name: "New project",
+			});
+			router.push(`/editor/${projectId}`);
+		} catch (error) {
+			toast.error("Failed to create project", {
+				description:
+					error instanceof Error ? error.message : "Please try again",
+			});
+		}
+	};
+
+	const toggleSortOption = ({
+		sortField,
+	}: {
+		sortField: "createdAt" | "name";
+	}) => {
+		const isSameField = sortOption.startsWith(sortField);
+		const nextSortOption = isSameField
+			? `${sortField}-${sortOption.endsWith("asc") ? "desc" : "asc"}`
+			: `${sortField}-asc`;
+
+		setSortOption(nextSortOption);
+	};
+
+	const handleSelectProject = ({
+		projectId,
+		checked,
+	}: {
+		projectId: string;
+		checked: boolean;
+	}) => {
+		const newSelected = new Set(selectedProjects);
+		if (checked) {
+			newSelected.add(projectId);
+		} else {
+			newSelected.delete(projectId);
+		}
+		setSelectedProjects(newSelected);
+	};
+
+	const handleSelectAll = ({ checked }: { checked: boolean }) => {
+		if (checked) {
+			setSelectedProjects(
+				new Set(projectsToDisplay.map((project) => project.id)),
+			);
+		} else {
+			setSelectedProjects(new Set());
+		}
+	};
+
+	const handleCancelSelection = () => {
+		setIsSelectionMode(false);
+		setSelectedProjects(new Set());
+	};
+
+	const handleBulkDelete = async () => {
+		try {
+			await Promise.all(
+				Array.from(selectedProjects).map((projectId) =>
+					editor.project.deleteProject({ id: projectId }),
+				),
+			);
+		} catch (error) {
+			toast.error("Failed to delete projects", {
+				description:
+					error instanceof Error ? error.message : "Please try again",
+			});
+		} finally {
+			setSelectedProjects(new Set());
+			setIsSelectionMode(false);
+			setIsBulkDeleteDialogOpen(false);
+		}
+	};
+
+	const projectsToDisplay = editor.project.getFilteredAndSortedProjects({
+		searchQuery,
+		sortOption,
+	});
+
+	const isAllSelected =
+		projectsToDisplay.length > 0 &&
+		selectedProjects.size === projectsToDisplay.length;
+
+	const hasSomeSelected =
+		selectedProjects.size > 0 &&
+		selectedProjects.size < projectsToDisplay.length;
+
+	const isLoading = editor.project.getIsLoading();
+	const isInitialized = editor.project.getIsInitialized();
+
+	return (
+		<div className="bg-background min-h-screen">
+			<MigrationDialog />
+			<div className="flex h-16 w-full items-center justify-between px-6 pt-2">
+				<Link
+					href="/"
+					className="hover:text-muted-foreground flex items-center gap-1 transition-colors"
+				>
+					<ChevronLeft className="size-5! shrink-0" />
+					<span className="text-sm font-medium">Back</span>
+				</Link>
+				<div className="block md:hidden">
+					{isSelectionMode ? (
+						<div className="flex items-center gap-2">
+							<Button
+								variant="outline"
+								size="sm"
+								onClick={handleCancelSelection}
+							>
+								<X className="size-4!" />
+								Cancel
+							</Button>
+							{selectedProjects.size > 0 && (
+								<Button
+									variant="destructive"
+									size="sm"
+									onClick={() => setIsBulkDeleteDialogOpen(true)}
+								>
+									<Trash2 className="size-4!" />
+									Delete ({selectedProjects.size})
+								</Button>
+							)}
+						</div>
+					) : (
+						<CreateButton onClick={handleCreateProject} />
+					)}
+				</div>
+			</div>
+			<main className="mx-auto max-w-6xl px-6 pt-6 pb-6">
+				<div className="mb-8 flex items-center justify-between">
+					<div className="flex flex-col gap-3">
+						<h1 className="text-2xl font-bold tracking-tight md:text-3xl">
+							Your projects
+						</h1>
+						<p className="text-muted-foreground">
+							{projectsToDisplay.length}{" "}
+							{projectsToDisplay.length === 1 ? "project" : "projects"}
+							{isSelectionMode && selectedProjects.size > 0 && (
+								<span className="text-primary ml-2">
+									• {selectedProjects.size} selected
+								</span>
+							)}
+						</p>
+					</div>
+					<div className="hidden md:block">
+						{isSelectionMode ? (
+							<div className="flex items-center gap-2">
+								<Button variant="outline" onClick={handleCancelSelection}>
+									<X className="size-4!" />
+									Cancel
+								</Button>
+								<Button
+									variant="destructive"
+									disabled={selectedProjects.size === 0}
+									onClick={() => setIsBulkDeleteDialogOpen(true)}
+								>
+									<Trash2 className="size-4!" />
+									Delete {selectedProjects.size} projects
+								</Button>
+							</div>
+						) : (
+							<div className="flex items-center gap-2">
+								<Button
+									variant="outline"
+									onClick={() => setIsSelectionMode(true)}
+									disabled={projectsToDisplay.length === 0}
+								>
+									Select projects
+								</Button>
+								<CreateButton onClick={handleCreateProject} />
+							</div>
+						)}
+					</div>
+				</div>
+
+				<div className="mb-4 flex items-center justify-between gap-4">
+					<div className="max-w-72 flex-1">
+						<Input
+							placeholder="Search projects..."
+							value={searchQuery}
+							onChange={(event) => setSearchQuery(event.target.value)}
+						/>
+					</div>
+					<div className="flex items-center gap-0">
+						<TooltipProvider>
+							<Tooltip>
+								<DropdownMenu>
+									<TooltipTrigger asChild>
+										<DropdownMenuTrigger asChild>
+											<Button
+												aria-label="sort projects"
+												size="icon"
+												variant="outline"
+												className="size-9 items-center justify-center"
+											>
+												<ArrowDown01
+													strokeWidth={1.5}
+													className="!size-[1.05rem]"
+													aria-hidden="true"
+												/>
+											</Button>
+										</DropdownMenuTrigger>
+									</TooltipTrigger>
+									<DropdownMenuContent align="end">
+										<DropdownMenuItem
+											onClick={() =>
+												toggleSortOption({ sortField: "createdAt" })
+											}
+										>
+											Created{" "}
+											{sortOption.startsWith("createdAt") &&
+												(sortOption.endsWith("asc") ? "↑" : "↓")}
+										</DropdownMenuItem>
+										<DropdownMenuItem
+											onClick={() => toggleSortOption({ sortField: "name" })}
+										>
+											Name{" "}
+											{sortOption.startsWith("name") &&
+												(sortOption.endsWith("asc") ? "↑" : "↓")}
+										</DropdownMenuItem>
+									</DropdownMenuContent>
+								</DropdownMenu>
+								<TooltipContent>
+									<p>
+										Sort by{" "}
+										{sortOption.startsWith("createdAt") ? "date" : "name"} (
+										{sortOption.endsWith("asc") ? "ascending" : "descending"})
+									</p>
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					</div>
+				</div>
+
+				{isLoading || !isInitialized ? (
+					<ProjectsLoader />
+				) : projectsToDisplay.length === 0 ? (
+					<EmptyState
+						search={{
+							query: searchQuery,
+							onClearSearch: () => setSearchQuery(""),
+						}}
+						onCreateProject={handleCreateProject}
+					/>
+				) : (
+					<div className="xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+						{projectsToDisplay.map((project) => (
+							<ProjectCard
+								key={project.id}
+								project={project}
+								isSelectionMode={isSelectionMode}
+								isSelected={selectedProjects.has(project.id)}
+								onSelect={handleSelectProject}
+							/>
+						))}
+					</div>
+				)}
+			</main>
+
+			<DeleteProjectDialog
+				isOpen={isBulkDeleteDialogOpen}
+				onOpenChange={setIsBulkDeleteDialogOpen}
+				onConfirm={handleBulkDelete}
+			/>
+		</div>
+	);
+}
+
+interface ProjectCardProps {
+	project: TProjectMetadata;
+	isSelectionMode?: boolean;
+	isSelected?: boolean;
+	onSelect?: ({
+		projectId,
+		checked,
+	}: {
+		projectId: string;
+		checked: boolean;
+	}) => void;
+}
+
+function ProjectCard({
+	project,
+	isSelectionMode = false,
+	isSelected = false,
+	onSelect,
+}: ProjectCardProps) {
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+	const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+	const editor = useEditor();
+
+	const handleDeleteProject = async () => {
+		await editor.project.deleteProject({ id: project.id });
+		setIsDropdownOpen(false);
+	};
+
+	const handleRenameProject = async ({ name }: { name: string }) => {
+		await editor.project.renameProject({ id: project.id, name });
+		setIsRenameDialogOpen(false);
+	};
+
+	const handleDuplicateProject = async () => {
+		setIsDropdownOpen(false);
+		await editor.project.duplicateProject({ id: project.id });
+	};
+
+	const handleCardClick = ({
+		event,
+	}: {
+		event: MouseEvent<HTMLButtonElement>;
+	}) => {
+		if (isSelectionMode) {
+			event.preventDefault();
+			onSelect?.({ projectId: project.id, checked: !isSelected });
+		}
+	};
+
+	const handleCardKeyDown = ({
+		event,
+	}: {
+		event: KeyboardEvent<HTMLButtonElement>;
+	}) => {
+		if (isSelectionMode && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			onSelect?.({ projectId: project.id, checked: !isSelected });
+		}
+	};
+
+	const cardContent = (
+		<Card
+			className={`bg-background overflow-hidden border-none p-0 transition-all ${
+				isSelectionMode && isSelected ? "ring-primary ring-2" : ""
+			}`}
+		>
+			<div
+				className={`bg-muted relative aspect-square transition-opacity ${
+					isDropdownOpen ? "opacity-65" : "opacity-100 group-hover:opacity-65"
+				}`}
+			>
+				{isSelectionMode && (
+					<div className="absolute top-3 left-3 z-10">
+						<div className="bg-background/80 flex size-5 items-center justify-center rounded-full border backdrop-blur-xs">
+							<Checkbox
+								checked={isSelected}
+								onCheckedChange={(checked) =>
+									onSelect?.({
+										projectId: project.id,
+										checked: checked === true,
+									})
+								}
+								onClick={(event) => event.stopPropagation()}
+								className="size-4"
+							/>
+						</div>
+					</div>
+				)}
+
+				<div className="absolute inset-0">
+					{project.thumbnail ? (
+						<Image
+							src={project.thumbnail}
+							alt="Project thumbnail"
+							fill
+							className="object-cover"
+						/>
+					) : (
+						<div className="bg-muted/50 flex h-full w-full items-center justify-center">
+							<Video className="text-muted-foreground size-12 shrink-0" />
+						</div>
+					)}
+				</div>
+			</div>
+
+			<CardContent className="flex flex-col gap-1 px-0 pt-5">
+				<div className="flex items-start justify-between">
+					<h3 className="group-hover:text-foreground/90 line-clamp-2 text-sm leading-snug font-medium transition-colors">
+						{project.name}
+					</h3>
+					{!isSelectionMode && (
+						<DropdownMenu
+							open={isDropdownOpen}
+							onOpenChange={setIsDropdownOpen}
+						>
+							<DropdownMenuTrigger asChild>
+								<Button
+									aria-label="project options"
+									variant="text"
+									size="sm"
+									className={`ml-2 size-6 shrink-0 p-0 transition-all ${
+										isDropdownOpen
+											? "opacity-100"
+											: "opacity-0 group-hover:opacity-100"
+									}`}
+									onClick={(event) => event.preventDefault()}
+								>
+									<MoreHorizontal aria-hidden="true" />
+								</Button>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								align="end"
+								onCloseAutoFocus={(event) => {
+									event.preventDefault();
+									event.stopPropagation();
+								}}
+							>
+								<DropdownMenuItem
+									onClick={(event) => {
+										event.preventDefault();
+										event.stopPropagation();
+										setIsDropdownOpen(false);
+										setIsRenameDialogOpen(true);
+									}}
+								>
+									Rename
+								</DropdownMenuItem>
+								<DropdownMenuItem
+									onClick={(event) => {
+										event.preventDefault();
+										event.stopPropagation();
+										handleDuplicateProject();
+									}}
+								>
+									Duplicate
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem
+									variant="destructive"
+									onClick={(event) => {
+										event.preventDefault();
+										event.stopPropagation();
+										setIsDropdownOpen(false);
+										setIsDeleteDialogOpen(true);
+									}}
+								>
+									Delete
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					)}
+				</div>
+
+				<div className="space-y-1">
+					<div className="text-muted-foreground flex items-center gap-1.5 text-sm">
+						<Calendar className="size-4!" />
+						<span>Created {formatDate({ date: project.createdAt })}</span>
+					</div>
+				</div>
+			</CardContent>
+		</Card>
+	);
+
+	return (
+		<>
+			{isSelectionMode ? (
+				<button
+					type="button"
+					onClick={(event) => handleCardClick({ event })}
+					onKeyDown={(event) => handleCardKeyDown({ event })}
+					className="group block w-full cursor-pointer text-left"
+				>
+					{cardContent}
+				</button>
+			) : (
+				<Link href={`/editor/${project.id}`} className="group block">
+					{cardContent}
+				</Link>
+			)}
+			<DeleteProjectDialog
+				isOpen={isDeleteDialogOpen}
+				onOpenChange={setIsDeleteDialogOpen}
+				onConfirm={handleDeleteProject}
+			/>
+			<RenameProjectDialog
+				isOpen={isRenameDialogOpen}
+				onOpenChange={setIsRenameDialogOpen}
+				onConfirm={(name) => handleRenameProject({ name })}
+				projectName={project.name}
+			/>
+		</>
+	);
+}
+
+function ProjectsLoader() {
+	const skeletonIds = Array.from(
+		{ length: 8 },
+		(_, index) => `skeleton-${index}`,
+	);
+
+	return (
+		<div className="xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
+			{skeletonIds.map((skeletonId) => (
+				<div
+					key={skeletonId}
+					className="bg-background overflow-hidden border-none p-0"
+				>
+					<Skeleton className="bg-muted/50 aspect-square w-full" />
+					<div className="flex flex-col gap-1.5 px-0 pt-5">
+						<Skeleton className="bg-muted/50 h-4 w-3/4" />
+						<div className="flex items-center gap-1.5">
+							<Skeleton className="bg-muted/50 h-4 w-4" />
+							<Skeleton className="bg-muted/50 h-4 w-24" />
+						</div>
+					</div>
+				</div>
+			))}
+		</div>
+	);
+}
+
+function CreateButton({ onClick }: { onClick?: () => void }) {
+	return (
+		<Button className="flex" onClick={onClick}>
+			<Plus className="size-4!" />
+			<span className="text-sm font-medium">New project</span>
+		</Button>
+	);
+}
+
+function EmptyState({
+	search,
+	onCreateProject,
+}: {
+	search: { query: string; onClearSearch: () => void };
+	onCreateProject: () => void;
+}) {
+	const editor = useEditor();
+	const savedProjects = editor.project.getSavedProjects();
+
+	if (savedProjects.length > 0) {
+		return (
+			<div className="flex flex-col items-center justify-center gap-6 py-16 text-center">
+				<div className="flex flex-col items-center gap-2">
+					<div className="bg-muted/30 flex size-16 items-center justify-center rounded-full">
+						<Search className="text-muted-foreground size-8" />
+					</div>
+					<h3 className="text-lg font-medium">No results found</h3>
+					<p className="text-muted-foreground max-w-md">
+						Your search for "{search.query}" did not return any results.
+					</p>
+				</div>
+				<Button onClick={search.onClearSearch} variant="outline">
+					Clear search
+				</Button>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col items-center justify-center gap-6 py-16 text-center">
+			<div className="flex flex-col items-center gap-2">
+				<div className="bg-muted/30 flex size-16 items-center justify-center rounded-full">
+					<Video className="text-muted-foreground size-8" />
+				</div>
+				<h3 className="text-lg font-medium">No projects yet</h3>
+				<p className="text-muted-foreground max-w-md">
+					Start creating your first video project. Import media, edit, and
+					export professional videos.
+				</p>
+			</div>
+			<Button size="lg" className="gap-2" onClick={onCreateProject}>
+				<Plus />
+				Create your first project
+			</Button>
+		</div>
+	);
+}
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index be683a1a..76c1ca20 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -1,649 +1,336 @@
 "use client";
 
 import {
-  Calendar,
-  ChevronLeft,
-  MoreHorizontal,
-  ArrowDown01,
-  Plus,
-  Search,
-  Trash2,
-  Video,
-  X,
+	ArrowDown,
+	Clock3,
+	Folder,
+	LayoutGrid,
+	List,
+	MoreHorizontal,
+	Plus,
+	Search,
 } from "lucide-react";
 import Image from "next/image";
-import Link from "next/link";
-import { useRouter } from "next/navigation";
-import type { KeyboardEvent, MouseEvent } from "react";
-import { useState, useEffect } from "react";
-import { DeleteProjectDialog } from "@/components/editor/delete-project-dialog";
-import { RenameProjectDialog } from "@/components/rename-project-dialog";
-import { Button } from "@/components/ui/button";
-import { Card, CardContent } from "@/components/ui/card";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { Skeleton } from "@/components/ui/skeleton";
-import { MigrationDialog } from "@/components/editor/migration-dialog";
-import type { TProjectMetadata } from "@/types/project";
-import { toast } from "sonner";
-import { useEditor } from "@/hooks/use-editor";
-import { formatDate } from "@/utils/date";
+import { useEffect, useMemo, useRef, useState } from "react";
+
+const projects = [
+	{
+		id: "project-1",
+		name: "Summer Vlog 2025",
+		createdAtLabel: "Created Jan 20, 2026",
+		duration: "02:14",
+	},
+	{
+		id: "project-2",
+		name: "Product Launch Teaser",
+		createdAtLabel: "Created Jan 20, 2026",
+		duration: "00:45",
+	},
+	{
+		id: "project-3",
+		name: "Podcast Ep. 4",
+		createdAtLabel: "Created Jan 18, 2026",
+		duration: "03:30",
+	},
+];
+
+const thumbnailSrc = "/open-graph/default.jpg";
 
 export default function ProjectsPage() {
-  const [isSelectionMode, setIsSelectionMode] = useState(false);
-  const [selectedProjects, setSelectedProjects] = useState<Set<string>>(
-    new Set(),
-  );
-  const [isBulkDeleteDialogOpen, setIsBulkDeleteDialogOpen] = useState(false);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [sortOption, setSortOption] = useState("createdAt-desc");
-  const router = useRouter();
-  const editor = useEditor();
+	const [selectedProjectIds, setSelectedProjectIds] = useState<Array<string>>(
+		[],
+	);
+	const selectAllRef = useRef<HTMLInputElement | null>(null);
 
-  useEffect(() => {
-    if (!editor.project.getIsInitialized()) {
-      editor.project.loadAllProjects();
-    }
-  }, [editor.project]);
+	const selectedProjectIdSet = useMemo(() => {
+		return new Set(selectedProjectIds);
+	}, [selectedProjectIds]);
 
-  const handleCreateProject = async () => {
-    try {
-      const projectId = await editor.project.createNewProject({
-        name: "New project",
-      });
-      router.push(`/editor/${projectId}`);
-    } catch (error) {
-      toast.error("Failed to create project", {
-        description:
-          error instanceof Error ? error.message : "Please try again",
-      });
-    }
-  };
+	const selectedCount = selectedProjectIds.length;
+	const totalCount = projects.length;
+	const isAllSelected = selectedCount > 0 && selectedCount === totalCount;
+	const isIndeterminate = selectedCount > 0 && selectedCount < totalCount;
 
-  const toggleSortOption = ({
-    sortField,
-  }: {
-    sortField: "createdAt" | "name";
-  }) => {
-    const isSameField = sortOption.startsWith(sortField);
-    const nextSortOption = isSameField
-      ? `${sortField}-${sortOption.endsWith("asc") ? "desc" : "asc"}`
-      : `${sortField}-asc`;
+	useEffect(() => {
+		if (!selectAllRef.current) {
+			return;
+		}
+		selectAllRef.current.indeterminate = isIndeterminate;
+	}, [isIndeterminate]);
 
-    setSortOption(nextSortOption);
-  };
+	const toggleProjectSelection = ({
+		projectId,
+		isSelected,
+	}: {
+		projectId: string;
+		isSelected: boolean;
+	}) => {
+		setSelectedProjectIds((previousIds) => {
+			if (isSelected) {
+				if (previousIds.includes(projectId)) {
+					return previousIds;
+				}
+				return [...previousIds, projectId];
+			}
+			return previousIds.filter((id) => id !== projectId);
+		});
+	};
 
-  const handleSelectProject = ({
-    projectId,
-    checked,
-  }: {
-    projectId: string;
-    checked: boolean;
-  }) => {
-    const newSelected = new Set(selectedProjects);
-    if (checked) {
-      newSelected.add(projectId);
-    } else {
-      newSelected.delete(projectId);
-    }
-    setSelectedProjects(newSelected);
-  };
+	const toggleSelectAll = ({ isSelected }: { isSelected: boolean }) => {
+		if (!isSelected) {
+			setSelectedProjectIds([]);
+			return;
+		}
+		setSelectedProjectIds(projects.map(({ id }) => id));
+	};
 
-  const handleSelectAll = ({ checked }: { checked: boolean }) => {
-    if (checked) {
-      setSelectedProjects(
-        new Set(projectsToDisplay.map((project) => project.id)),
-      );
-    } else {
-      setSelectedProjects(new Set());
-    }
-  };
+	return (
+		<div
+			className={`flex h-screen overflow-hidden bg-[#ffffff] text-slate-900 ${
+				selectedCount > 1 ? "multi-select" : ""
+			}`}
+			style={{ "--brand-blue": "#00A3FF" } as React.CSSProperties}
+		>
+			<aside className="flex w-64 flex-shrink-0 flex-col border-r border-slate-100 bg-white">
+				<div className="flex items-center gap-3 p-6 pl-8">
+					<Image
+						src="/logos/opencut/1k/logo-black.png"
+						alt="OpenCut Logo"
+						width={24}
+						height={24}
+						className="size-6"
+					/>
+					<span className="text-lg font-semibold tracking-tight text-slate-900">
+						OpenCut
+					</span>
+				</div>
 
-  const handleCancelSelection = () => {
-    setIsSelectionMode(false);
-    setSelectedProjects(new Set());
-  };
+				<nav className="mt-2 flex-1 space-y-2 px-4">
+					<a
+						href="/projects"
+						className="flex items-center gap-3 rounded-2xl bg-blue-50/50 px-4 py-3 text-sm font-medium text-[#00A3FF]"
+					>
+						<LayoutGrid className="h-5 w-5" />
+						Projects
+					</a>
+					<div className="px-4 pt-6 pb-2">
+						<p className="text-xs font-bold tracking-wider text-slate-400 uppercase">
+							Folders
+						</p>
+					</div>
+					<a
+						href="/projects"
+						className="flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium text-slate-500 hover:bg-slate-50 hover:text-slate-900"
+					>
+						<Folder className="h-5 w-5 text-slate-400" />
+						Marketing
+					</a>
+					<a
+						href="/projects"
+						className="flex items-center gap-3 rounded-2xl px-4 py-3 text-sm font-medium text-slate-500 hover:bg-slate-50 hover:text-slate-900"
+					>
+						<Folder className="h-5 w-5 text-slate-400" />
+						Social media
+					</a>
+				</nav>
+			</aside>
 
-  const handleBulkDelete = async () => {
-    try {
-      await Promise.all(
-        Array.from(selectedProjects).map((projectId) =>
-          editor.project.deleteProject({ id: projectId }),
-        ),
-      );
-    } catch (error) {
-      toast.error("Failed to delete projects", {
-        description:
-          error instanceof Error ? error.message : "Please try again",
-      });
-    } finally {
-      setSelectedProjects(new Set());
-      setIsSelectionMode(false);
-      setIsBulkDeleteDialogOpen(false);
-    }
-  };
+			<main className="flex min-w-0 flex-1 flex-col">
+				<header className="flex h-20 flex-shrink-0 items-center justify-between px-8">
+					<div className="flex items-center gap-4">
+						<h1 className="text-xl font-bold text-slate-900">All projects</h1>
+					</div>
 
-  const projectsToDisplay = editor.project.getFilteredAndSortedProjects({
-    searchQuery,
-    sortOption,
-  });
+					<div className="flex items-center gap-4">
+						<div className="group relative">
+							<Search className="absolute top-1/2 left-3.5 h-4 w-4 -translate-y-1/2 text-slate-400" />
+							<input
+								type="text"
+								placeholder="Search..."
+								className="w-64 rounded-full border border-slate-200 bg-white py-2.5 pr-4 pl-10 text-sm text-slate-900 placeholder:text-slate-400 focus:border-[#00A3FF] focus:ring-4 focus:ring-blue-500/10 focus:outline-none"
+							/>
+						</div>
 
-  const isAllSelected =
-    projectsToDisplay.length > 0 &&
-    selectedProjects.size === projectsToDisplay.length;
+						<div className="flex rounded-full border border-slate-200 bg-white p-1">
+							<button
+								type="button"
+								className="rounded-full bg-slate-100 p-2 text-slate-900"
+								aria-label="Grid view"
+							>
+								<LayoutGrid className="h-4 w-4" aria-hidden="true">
+									<title>Grid view</title>
+								</LayoutGrid>
+							</button>
+							<button
+								type="button"
+								className="rounded-full p-2 text-slate-400 hover:text-slate-600"
+								aria-label="List view"
+							>
+								<List className="h-4 w-4" aria-hidden="true">
+									<title>List view</title>
+								</List>
+							</button>
+						</div>
 
-  const hasSomeSelected =
-    selectedProjects.size > 0 &&
-    selectedProjects.size < projectsToDisplay.length;
+						<button
+							type="button"
+							className="flex items-center gap-2 rounded-full bg-[#00A3FF] px-5 py-2.5 text-sm font-semibold text-white hover:bg-[#008BE0] active:scale-95"
+						>
+							<Plus className="h-4 w-4" />
+							New project
+						</button>
+					</div>
+				</header>
 
-  const isLoading = editor.project.getIsLoading();
-  const isInitialized = editor.project.getIsInitialized();
+				<div className="flex-1 overflow-y-auto px-8 pb-8">
+					<div
+						id="controls-row"
+						className="controls-row group mb-4 flex items-center gap-3 text-slate-700"
+					>
+						<div className="flex items-center gap-2">
+							<label className="flex cursor-pointer items-center gap-3 rounded-lg p-1 text-sm font-medium select-none">
+								<input
+									ref={selectAllRef}
+									id="select-all"
+									type="checkbox"
+									className="custom-checkbox controls-select size-5"
+									checked={isAllSelected}
+									onChange={({ currentTarget }) => {
+										toggleSelectAll({ isSelected: currentTarget.checked });
+									}}
+								/>
+								<span className="text-slate-500 group-hover:text-slate-700">
+									Select all
+								</span>
+							</label>
+						</div>
+						<div className="mx-2 h-4 w-px bg-slate-200"></div>
+						<button
+							type="button"
+							className="inline-flex items-center gap-1.5 rounded-lg p-1 text-sm font-medium text-slate-500 hover:text-slate-900"
+						>
+							Name
+							<ArrowDown className="size-3.5" />
+						</button>
+					</div>
 
-  return (
-    <div className="bg-background min-h-screen">
-      <MigrationDialog />
-      <div className="flex h-16 w-full items-center justify-between px-6 pt-2">
-        <Link
-          href="/"
-          className="hover:text-muted-foreground flex items-center gap-1 transition-colors"
-        >
-          <ChevronLeft className="size-5! shrink-0" />
-          <span className="text-sm font-medium">Back</span>
-        </Link>
-        <div className="block md:hidden">
-          {isSelectionMode ? (
-            <div className="flex items-center gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                onClick={handleCancelSelection}
-              >
-                <X className="size-4!" />
-                Cancel
-              </Button>
-              {selectedProjects.size > 0 && (
-                <Button
-                  variant="destructive"
-                  size="sm"
-                  onClick={() => setIsBulkDeleteDialogOpen(true)}
-                >
-                  <Trash2 className="size-4!" />
-                  Delete ({selectedProjects.size})
-                </Button>
-              )}
-            </div>
-          ) : (
-            <CreateButton onClick={handleCreateProject} />
-          )}
-        </div>
-      </div>
-      <main className="mx-auto max-w-6xl px-6 pt-6 pb-6">
-        <div className="mb-8 flex items-center justify-between">
-          <div className="flex flex-col gap-3">
-            <h1 className="text-2xl font-bold tracking-tight md:text-3xl">
-              Your projects
-            </h1>
-            <p className="text-muted-foreground">
-              {projectsToDisplay.length}{" "}
-              {projectsToDisplay.length === 1 ? "project" : "projects"}
-              {isSelectionMode && selectedProjects.size > 0 && (
-                <span className="text-primary ml-2">
-                  • {selectedProjects.size} selected
-                </span>
-              )}
-            </p>
-          </div>
-          <div className="hidden md:block">
-            {isSelectionMode ? (
-              <div className="flex items-center gap-2">
-                <Button variant="outline" onClick={handleCancelSelection}>
-                  <X className="size-4!" />
-                  Cancel
-                </Button>
-                {selectedProjects.size > 0 && (
-                  <Button
-                    variant="destructive"
-                    onClick={() => setIsBulkDeleteDialogOpen(true)}
-                  >
-                    <Trash2 className="size-4!" />
-                    Delete selected ({selectedProjects.size})
-                  </Button>
-                )}
-              </div>
-            ) : (
-              <div className="flex items-center gap-2">
-                <Button
-                  variant="outline"
-                  onClick={() => setIsSelectionMode(true)}
-                  disabled={projectsToDisplay.length === 0}
-                >
-                  Select projects
-                </Button>
-                <CreateButton onClick={handleCreateProject} />
-              </div>
-            )}
-          </div>
-        </div>
+					<div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+						{projects.map(({ createdAtLabel, duration, id, name }) => {
+							const isSelected = selectedProjectIdSet.has(id);
+							return (
+								<div
+									key={id}
+									className="project-card group relative flex h-auto flex-col overflow-hidden rounded-[24px]"
+									data-project-id={id}
+								>
+									<div className="project-select-wrapper absolute top-4 left-4 z-20">
+										<input
+											type="checkbox"
+											className="custom-checkbox project-select h-6 w-6 cursor-pointer shadow-md"
+											checked={isSelected}
+											onChange={({ currentTarget }) => {
+												toggleProjectSelection({
+													projectId: id,
+													isSelected: currentTarget.checked,
+												});
+											}}
+										/>
+									</div>
 
-        <div className="mb-4 flex items-center justify-between gap-4">
-          <div className="max-w-72 flex-1">
-            <Input
-              placeholder="Search projects..."
-              value={searchQuery}
-              onChange={(event) => setSearchQuery(event.target.value)}
-            />
-          </div>
-          <div className="flex items-center gap-0">
-            <TooltipProvider>
-              <Tooltip>
-                <DropdownMenu>
-                  <TooltipTrigger asChild>
-                    <DropdownMenuTrigger asChild>
-                      <Button
-                        aria-label="sort projects"
-                        size="icon"
-                        variant="outline"
-                        className="size-9 items-center justify-center"
-                      >
-                        <ArrowDown01
-                          strokeWidth={1.5}
-                          className="!size-[1.05rem]"
-                          aria-hidden="true"
-                        />
-                      </Button>
-                    </DropdownMenuTrigger>
-                  </TooltipTrigger>
-                  <DropdownMenuContent align="end">
-                    <DropdownMenuItem
-                      onClick={() =>
-                        toggleSortOption({ sortField: "createdAt" })
-                      }
-                    >
-                      Created{" "}
-                      {sortOption.startsWith("createdAt") &&
-                        (sortOption.endsWith("asc") ? "↑" : "↓")}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem
-                      onClick={() => toggleSortOption({ sortField: "name" })}
-                    >
-                      Name{" "}
-                      {sortOption.startsWith("name") &&
-                        (sortOption.endsWith("asc") ? "↑" : "↓")}
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <TooltipContent>
-                  <p>
-                    Sort by{" "}
-                    {sortOption.startsWith("createdAt") ? "date" : "name"} (
-                    {sortOption.endsWith("asc") ? "ascending" : "descending"})
-                  </p>
-                </TooltipContent>
-              </Tooltip>
-            </TooltipProvider>
-          </div>
-        </div>
+									<div className="project-menu absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100">
+										<button
+											type="button"
+											className="rounded-full bg-white/90 p-2 text-slate-600 backdrop-blur-sm hover:bg-white hover:text-[#00A3FF]"
+											aria-label="Project menu"
+										>
+											<MoreHorizontal className="h-4 w-4" aria-hidden="true">
+												<title>Project menu</title>
+											</MoreHorizontal>
+										</button>
+									</div>
 
-        {isSelectionMode && projectsToDisplay.length > 0 && (
-          <button
-            type="button"
-            onClick={() => handleSelectAll({ checked: !isAllSelected })}
-            onKeyDown={(event) => {
-              if (event.key === "Enter" || event.key === " ") {
-                event.preventDefault();
-                handleSelectAll({ checked: !isAllSelected });
-              }
-            }}
-            className="bg-muted/30 mb-6 flex w-full items-center gap-2 rounded-lg border p-4 hover:cursor-pointer"
-            tabIndex={0}
-          >
-            <Checkbox
-              checked={hasSomeSelected ? "indeterminate" : isAllSelected}
-            />
-            <span className="text-sm font-medium">
-              {isAllSelected ? "Deselect all" : "Select all"}
-            </span>
-            <span className="text-muted-foreground text-sm">
-              ({selectedProjects.size} of {projectsToDisplay.length} selected)
-            </span>
-          </button>
-        )}
+									<div className="relative m-1 aspect-video overflow-hidden rounded-lg bg-slate-50">
+										<Image
+											src={thumbnailSrc}
+											alt={`Thumbnail for ${name}`}
+											fill
+											sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 25vw"
+											className="object-cover"
+										/>
+										<div className="absolute right-2 bottom-2 rounded-lg bg-black/60 px-2 py-1 text-[11px] font-semibold text-white">
+											{duration}
+										</div>
+									</div>
 
-        {isLoading || !isInitialized ? (
-          <ProjectsLoader />
-        ) : projectsToDisplay.length === 0 ? (
-          <EmptyState
-            search={{
-              query: searchQuery,
-              onClearSearch: () => setSearchQuery(""),
-            }}
-            onCreateProject={handleCreateProject}
-          />
-        ) : (
-          <div className="xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
-            {projectsToDisplay.map((project) => (
-              <ProjectCard
-                key={project.id}
-                project={project}
-                isSelectionMode={isSelectionMode}
-                isSelected={selectedProjects.has(project.id)}
-                onSelect={handleSelectProject}
-              />
-            ))}
-          </div>
-        )}
-      </main>
+									<div className="flex flex-1 flex-col justify-between px-2 pt-3 pb-5">
+										<div>
+											<h3 className="truncate text-[15px] font-semibold text-slate-900">
+												{name}
+											</h3>
+											<div className="mt-2 flex items-center gap-2 text-slate-400">
+												<Clock3 className="size-4" aria-hidden="true" />
+												<p className="text-xs font-medium">{createdAtLabel}</p>
+											</div>
+										</div>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				</div>
+			</main>
 
-      <DeleteProjectDialog
-        isOpen={isBulkDeleteDialogOpen}
-        onOpenChange={setIsBulkDeleteDialogOpen}
-        onConfirm={handleBulkDelete}
-      />
-    </div>
-  );
-}
-
-interface ProjectCardProps {
-  project: TProjectMetadata;
-  isSelectionMode?: boolean;
-  isSelected?: boolean;
-  onSelect?: ({
-    projectId,
-    checked,
-  }: {
-    projectId: string;
-    checked: boolean;
-  }) => void;
-}
-
-function ProjectCard({
-  project,
-  isSelectionMode = false,
-  isSelected = false,
-  onSelect,
-}: ProjectCardProps) {
-  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
-  const editor = useEditor();
-
-  const handleDeleteProject = async () => {
-    await editor.project.deleteProject({ id: project.id });
-    setIsDropdownOpen(false);
-  };
-
-  const handleRenameProject = async ({ name }: { name: string }) => {
-    await editor.project.renameProject({ id: project.id, name });
-    setIsRenameDialogOpen(false);
-  };
-
-  const handleDuplicateProject = async () => {
-    setIsDropdownOpen(false);
-    await editor.project.duplicateProject({ id: project.id });
-  };
-
-  const handleCardClick = ({
-    event,
-  }: {
-    event: MouseEvent<HTMLButtonElement>;
-  }) => {
-    if (isSelectionMode) {
-      event.preventDefault();
-      onSelect?.({ projectId: project.id, checked: !isSelected });
-    }
-  };
-
-  const handleCardKeyDown = ({
-    event,
-  }: {
-    event: KeyboardEvent<HTMLButtonElement>;
-  }) => {
-    if (isSelectionMode && (event.key === "Enter" || event.key === " ")) {
-      event.preventDefault();
-      onSelect?.({ projectId: project.id, checked: !isSelected });
-    }
-  };
-
-  const cardContent = (
-    <Card
-      className={`bg-background overflow-hidden border-none p-0 transition-all ${isSelectionMode && isSelected ? "ring-primary ring-2" : ""
-        }`}
-    >
-      <div
-        className={`bg-muted relative aspect-square transition-opacity ${isDropdownOpen ? "opacity-65" : "opacity-100 group-hover:opacity-65"
-          }`}
-      >
-        {isSelectionMode && (
-          <div className="absolute top-3 left-3 z-10">
-            <div className="bg-background/80 flex size-5 items-center justify-center rounded-full border backdrop-blur-xs">
-              <Checkbox
-                checked={isSelected}
-                onCheckedChange={(checked) =>
-                  onSelect?.({
-                    projectId: project.id,
-                    checked: checked === true,
-                  })
-                }
-                onClick={(event) => event.stopPropagation()}
-                className="size-4"
-              />
-            </div>
-          </div>
-        )}
-
-        <div className="absolute inset-0">
-          {project.thumbnail ? (
-            <Image
-              src={project.thumbnail}
-              alt="Project thumbnail"
-              fill
-              className="object-cover"
-            />
-          ) : (
-            <div className="bg-muted/50 flex h-full w-full items-center justify-center">
-              <Video className="text-muted-foreground size-12 shrink-0" />
-            </div>
-          )}
-        </div>
-      </div>
-
-      <CardContent className="flex flex-col gap-1 px-0 pt-5">
-        <div className="flex items-start justify-between">
-          <h3 className="group-hover:text-foreground/90 line-clamp-2 text-sm leading-snug font-medium transition-colors">
-            {project.name}
-          </h3>
-          {!isSelectionMode && (
-            <DropdownMenu
-              open={isDropdownOpen}
-              onOpenChange={setIsDropdownOpen}
-            >
-              <DropdownMenuTrigger asChild>
-                <Button
-                  aria-label="project options"
-                  variant="text"
-                  size="sm"
-                  className={`ml-2 size-6 shrink-0 p-0 transition-all ${isDropdownOpen
-                      ? "opacity-100"
-                      : "opacity-0 group-hover:opacity-100"
-                    }`}
-                  onClick={(event) => event.preventDefault()}
-                >
-                  <MoreHorizontal aria-hidden="true" />
-                </Button>
-              </DropdownMenuTrigger>
-              <DropdownMenuContent
-                align="end"
-                onCloseAutoFocus={(event) => {
-                  event.preventDefault();
-                  event.stopPropagation();
-                }}
-              >
-                <DropdownMenuItem
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    setIsDropdownOpen(false);
-                    setIsRenameDialogOpen(true);
-                  }}
-                >
-                  Rename
-                </DropdownMenuItem>
-                <DropdownMenuItem
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    handleDuplicateProject();
-                  }}
-                >
-                  Duplicate
-                </DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem
-                  variant="destructive"
-                  onClick={(event) => {
-                    event.preventDefault();
-                    event.stopPropagation();
-                    setIsDropdownOpen(false);
-                    setIsDeleteDialogOpen(true);
-                  }}
-                >
-                  Delete
-                </DropdownMenuItem>
-              </DropdownMenuContent>
-            </DropdownMenu>
-          )}
-        </div>
-
-        <div className="space-y-1">
-          <div className="text-muted-foreground flex items-center gap-1.5 text-sm">
-            <Calendar className="size-4!" />
-            <span>Created {formatDate({ date: project.createdAt })}</span>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-
-  return (
-    <>
-      {isSelectionMode ? (
-        <button
-          type="button"
-          onClick={(event) => handleCardClick({ event })}
-          onKeyDown={(event) => handleCardKeyDown({ event })}
-          className="group block w-full cursor-pointer text-left"
-        >
-          {cardContent}
-        </button>
-      ) : (
-        <Link href={`/editor/${project.id}`} className="group block">
-          {cardContent}
-        </Link>
-      )}
-      <DeleteProjectDialog
-        isOpen={isDeleteDialogOpen}
-        onOpenChange={setIsDeleteDialogOpen}
-        onConfirm={handleDeleteProject}
-      />
-      <RenameProjectDialog
-        isOpen={isRenameDialogOpen}
-        onOpenChange={setIsRenameDialogOpen}
-        onConfirm={(name) => handleRenameProject({ name })}
-        projectName={project.name}
-      />
-    </>
-  );
-}
-
-function ProjectsLoader() {
-  return (
-    <div className="xs:grid-cols-2 grid grid-cols-1 gap-6 sm:grid-cols-3 lg:grid-cols-4">
-      {Array.from({ length: 8 }, (_, index) => (
-        <div
-          key={`skeleton-${index}`}
-          className="bg-background overflow-hidden border-none p-0"
-        >
-          <Skeleton className="bg-muted/50 aspect-square w-full" />
-          <div className="flex flex-col gap-1.5 px-0 pt-5">
-            <Skeleton className="bg-muted/50 h-4 w-3/4" />
-            <div className="flex items-center gap-1.5">
-              <Skeleton className="bg-muted/50 h-4 w-4" />
-              <Skeleton className="bg-muted/50 h-4 w-24" />
-            </div>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function CreateButton({ onClick }: { onClick?: () => void }) {
-  return (
-    <Button className="flex" onClick={onClick}>
-      <Plus className="size-4!" />
-      <span className="text-sm font-medium">New project</span>
-    </Button>
-  );
-}
-
-function EmptyState({
-  search,
-  onCreateProject,
-}: {
-  search: { query: string; onClearSearch: () => void };
-  onCreateProject: () => void;
-}) {
-  const editor = useEditor();
-  const savedProjects = editor.project.getSavedProjects();
-
-  if (savedProjects.length > 0) {
-    return (
-      <div className="flex flex-col items-center justify-center gap-6 py-16 text-center">
-        <div className="flex flex-col items-center gap-2">
-          <div className="bg-muted/30 flex size-16 items-center justify-center rounded-full">
-            <Search className="text-muted-foreground size-8" />
-          </div>
-          <h3 className="text-lg font-medium">No results found</h3>
-          <p className="text-muted-foreground max-w-md">
-            Your search for "{search.query}" did not return any results.
-          </p>
-        </div>
-        <Button onClick={search.onClearSearch} variant="outline">
-          Clear search
-        </Button>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex flex-col items-center justify-center gap-6 py-16 text-center">
-      <div className="flex flex-col items-center gap-2">
-        <div className="bg-muted/30 flex size-16 items-center justify-center rounded-full">
-          <Video className="text-muted-foreground size-8" />
-        </div>
-        <h3 className="text-lg font-medium">No projects yet</h3>
-        <p className="text-muted-foreground max-w-md">
-          Start creating your first video project. Import media, edit, and
-          export professional videos.
-        </p>
-      </div>
-      <Button size="lg" className="gap-2" onClick={onCreateProject}>
-        <Plus />
-        Create your first project
-      </Button>
-    </div>
-  );
+			<style jsx global>{`
+        .project-card:hover .card-actions {
+          opacity: 1;
+        }
+        .checkbox-wrapper:checked + div {
+          border-color: var(--brand-blue);
+          background-color: #eff6ff;
+        }
+        .controls-row.has-selection .controls-select {
+          opacity: 1;
+        }
+        .project-select-wrapper {
+          opacity: 0;
+        }
+        .project-card:hover .project-select-wrapper {
+          opacity: 1;
+        }
+        .project-card:has(.project-select:checked) .project-select-wrapper {
+          opacity: 1;
+        }
+        .multi-select .project-menu {
+          opacity: 0 !important;
+          pointer-events: none;
+        }
+        .custom-checkbox {
+          appearance: none;
+          background-color: #fff;
+          border: 2px solid #e2e8f0;
+          border-radius: 8px;
+          display: inline-grid;
+          place-content: center;
+        }
+        .custom-checkbox:checked {
+          background-color: var(--brand-blue);
+          border-color: var(--brand-blue);
+        }
+        .custom-checkbox:checked::after {
+          content: "";
+          width: 10px;
+          height: 10px;
+          background-color: #fff;
+          clip-path: polygon(
+            14% 44%,
+            0 58%,
+            40% 100%,
+            100% 24%,
+            86% 10%,
+            40% 70%
+          );
+        }
+      `}</style>
+		</div>
+	);
 }
diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx
index f3ca1e4a..ca23d34f 100644
--- a/apps/web/src/app/roadmap/page.tsx
+++ b/apps/web/src/app/roadmap/page.tsx
@@ -1,189 +1,189 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
+import { BasePage } from "@/app/base-page";
+import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
 import { Badge } from "@/components/ui/badge";
 import { ReactMarkdownWrapper } from "@/components/ui/react-markdown-wrapper";
 import { cn } from "@/utils/ui";
-import { BasePage } from "@/app/base-page";
-import { GitHubContributeSection } from "@/components/gitHub-contribute-section";
 
 type StatusType = "complete" | "pending" | "default" | "info";
 
 interface Status {
-  text: string;
-  type: StatusType;
+	text: string;
+	type: StatusType;
 }
 
 interface RoadmapItem {
-  title: string;
-  description: string;
-  status: Status;
+	title: string;
+	description: string;
+	status: Status;
 }
 
 const roadmapItems: RoadmapItem[] = [
-  {
-    title: "Start",
-    description:
-      "This is where it all started. Repository created, initial project structure, and the vision for a free, open-source video editor. [Check out the first tweet](https://x.com/mazeincoding/status/1936706642512388188) to see where it started.",
-    status: {
-      text: "Completed",
-      type: "complete",
-    },
-  },
-  {
-    title: "Core UI",
-    description:
-      "Built the foundation - main layout, header, sidebar, timeline container, and basic component structure. Not all functionality yet, but the UI framework that everything else builds on.",
-    status: {
-      text: "Completed",
-      type: "complete",
-    },
-  },
-  {
-    title: "Basic Functionality",
-    description:
-      "The heart of any video editor. Timeline zoom in/out, making clips longer/shorter, dragging elements around, selection, playhead scrubbing. **This part has to be fucking perfect** because it's what users interact with 99% of the time.",
-    status: {
-      text: "In progress",
-      type: "pending",
-    },
-  },
-  {
-    title: "Export/preview logic",
-    description:
-      "The foundation that enables everything else. Real-time preview, video rendering, export functionality. Once this works, we can add effects, filters, transitions - basically everything that makes a video editor powerful.",
-    status: {
-      text: "Completed",
-      type: "complete",
-    },
-  },
-  {
-    title: "Desktop/mobile app",
-    description:
-      "The foundation that enables everything else. Real-time preview, video rendering, export functionality. Once this works, we can add effects, filters, transitions - basically everything that makes a video editor powerful.",
-    status: {
-      text: "In progress",
-      type: "pending",
-    },
-  },
-  {
-    title: "Text",
-    description:
-      "After media, text is the next most important thing. Font selection with custom font imports, text stroke, colors. All the text essential text properties.",
-    status: {
-      text: "In progress",
-      type: "pending",
-    },
-  },
-  {
-    title: "Effects",
-    description:
-      "Adding visual effects to both text and media. Blur, brightness, contrast, saturation, filters, and all the creative tools that make videos pop. This is where the magic happens.",
-    status: {
-      text: "Not started",
-      type: "default",
-    },
-  },
-  {
-    title: "Transitions",
-    description:
-      "Smooth transitions between clips. Fade in/out, slide, zoom, dissolve, and custom transition effects.",
-    status: {
-      text: "Not started",
-      type: "default",
-    },
-  },
-  {
-    title: "Refine from here",
-    description:
-      "Once we nail the above, we have a **solid foundation** to build anything. Advanced features, performance optimizations, mobile support, desktop app.",
-    status: {
-      text: "Future",
-      type: "info",
-    },
-  },
+	{
+		title: "Start",
+		description:
+			"This is where it all started. Repository created, initial project structure, and the vision for a free, open-source video editor. [Check out the first tweet](https://x.com/mazeincoding/status/1936706642512388188) to see where it started.",
+		status: {
+			text: "Completed",
+			type: "complete",
+		},
+	},
+	{
+		title: "Core UI",
+		description:
+			"Built the foundation - main layout, header, sidebar, timeline container, and basic component structure. Not all functionality yet, but the UI framework that everything else builds on.",
+		status: {
+			text: "Completed",
+			type: "complete",
+		},
+	},
+	{
+		title: "Basic Functionality",
+		description:
+			"The heart of any video editor. Timeline zoom in/out, making clips longer/shorter, dragging elements around, selection, playhead scrubbing. **This part has to be fucking perfect** because it's what users interact with 99% of the time.",
+		status: {
+			text: "In progress",
+			type: "pending",
+		},
+	},
+	{
+		title: "Export/preview logic",
+		description:
+			"The foundation that enables everything else. Real-time preview, video rendering, export functionality. Once this works, we can add effects, filters, transitions - basically everything that makes a video editor powerful.",
+		status: {
+			text: "Completed",
+			type: "complete",
+		},
+	},
+	{
+		title: "Desktop/mobile app",
+		description:
+			"The foundation that enables everything else. Real-time preview, video rendering, export functionality. Once this works, we can add effects, filters, transitions - basically everything that makes a video editor powerful.",
+		status: {
+			text: "In progress",
+			type: "pending",
+		},
+	},
+	{
+		title: "Text",
+		description:
+			"After media, text is the next most important thing. Font selection with custom font imports, text stroke, colors. All the text essential text properties.",
+		status: {
+			text: "In progress",
+			type: "pending",
+		},
+	},
+	{
+		title: "Effects",
+		description:
+			"Adding visual effects to both text and media. Blur, brightness, contrast, saturation, filters, and all the creative tools that make videos pop. This is where the magic happens.",
+		status: {
+			text: "Not started",
+			type: "default",
+		},
+	},
+	{
+		title: "Transitions",
+		description:
+			"Smooth transitions between clips. Fade in/out, slide, zoom, dissolve, and custom transition effects.",
+		status: {
+			text: "Not started",
+			type: "default",
+		},
+	},
+	{
+		title: "Refine from here",
+		description:
+			"Once we nail the above, we have a **solid foundation** to build anything. Advanced features, performance optimizations, mobile support, desktop app.",
+		status: {
+			text: "Future",
+			type: "info",
+		},
+	},
 ];
 
 export const metadata: Metadata = {
-  title: "Roadmap - OpenCut",
-  description:
-    "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
-  openGraph: {
-    title: "OpenCut Roadmap - What's Coming Next",
-    description:
-      "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
-    type: "website",
-    images: [
-      {
-        url: "/open-graph/roadmap.jpg",
-        width: 1200,
-        height: 630,
-        alt: "OpenCut Roadmap",
-      },
-    ],
-  },
-  twitter: {
-    card: "summary_large_image",
-    title: "OpenCut Roadmap - What's Coming Next",
-    description:
-      "See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
-    images: ["/open-graph/roadmap.jpg"],
-  },
+	title: "Roadmap - OpenCut",
+	description:
+		"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
+	openGraph: {
+		title: "OpenCut Roadmap - What's Coming Next",
+		description:
+			"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
+		type: "website",
+		images: [
+			{
+				url: "/open-graph/roadmap.jpg",
+				width: 1200,
+				height: 630,
+				alt: "OpenCut Roadmap",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "OpenCut Roadmap - What's Coming Next",
+		description:
+			"See what's coming next for OpenCut - the free, open-source video editor that respects your privacy.",
+		images: ["/open-graph/roadmap.jpg"],
+	},
 };
 
 export default function RoadmapPage() {
-  return (
-    <BasePage
-      title="Roadmap"
-      description="What's coming next for OpenCut (last updated: July 14, 2025)"
-    >
-      <div className="mx-auto flex max-w-4xl flex-col gap-16">
-        <div className="flex flex-col gap-6">
-          {roadmapItems.map((item, index) => (
-            <RoadmapItem key={index} item={item} index={index} />
-          ))}
-        </div>
-        <GitHubContributeSection
-          title="Want to help?"
-          description="OpenCut is open source and built by the community. Every contribution,
+	return (
+		<BasePage
+			title="Roadmap"
+			description="What's coming next for OpenCut (last updated: July 14, 2025)"
+		>
+			<div className="mx-auto flex max-w-4xl flex-col gap-16">
+				<div className="flex flex-col gap-6">
+					{roadmapItems.map((item, index) => (
+						<RoadmapItem key={item.title} item={item} index={index} />
+					))}
+				</div>
+				<GitHubContributeSection
+					title="Want to help?"
+					description="OpenCut is open source and built by the community. Every contribution,
           no matter how small, helps us build the best free video editor
           possible."
-        />
-      </div>
-    </BasePage>
-  );
+				/>
+			</div>
+		</BasePage>
+	);
 }
 
 function RoadmapItem({ item, index }: { item: RoadmapItem; index: number }) {
-  return (
-    <div className="flex flex-col gap-2">
-      <div className="flex items-center gap-2 text-lg font-medium">
-        <span className="leading-normal select-none">{index + 1}</span>
-        <h3>{item.title}</h3>
-        <StatusBadge status={item.status} className="ml-1" />
-      </div>
-      <div className="text-foreground/70 leading-relaxed">
-        <ReactMarkdownWrapper>{item.description}</ReactMarkdownWrapper>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-2">
+			<div className="flex items-center gap-2 text-lg font-medium">
+				<span className="leading-normal select-none">{index + 1}</span>
+				<h3>{item.title}</h3>
+				<StatusBadge status={item.status} className="ml-1" />
+			</div>
+			<div className="text-foreground/70 leading-relaxed">
+				<ReactMarkdownWrapper>{item.description}</ReactMarkdownWrapper>
+			</div>
+		</div>
+	);
 }
 
 function StatusBadge({
-  status,
-  className,
+	status,
+	className,
 }: {
-  status: Status;
-  className?: string;
+	status: Status;
+	className?: string;
 }) {
-  return (
-    <Badge
-      className={cn("shadow-none", className, {
-        "bg-green-500! text-white": status.type === "complete",
-        "bg-yellow-500! text-white": status.type === "pending",
-        "bg-blue-500! text-white": status.type === "info",
-        "bg-foreground/10! text-accent-foreground": status.type === "default",
-      })}
-    >
-      {status.text}
-    </Badge>
-  );
+	return (
+		<Badge
+			className={cn("shadow-none", className, {
+				"bg-green-500! text-white": status.type === "complete",
+				"bg-yellow-500! text-white": status.type === "pending",
+				"bg-blue-500! text-white": status.type === "info",
+				"bg-foreground/10! text-accent-foreground": status.type === "default",
+			})}
+		>
+			{status.text}
+		</Badge>
+	);
 }
diff --git a/apps/web/src/app/robots.ts b/apps/web/src/app/robots.ts
index a5d6d3a7..60c13829 100644
--- a/apps/web/src/app/robots.ts
+++ b/apps/web/src/app/robots.ts
@@ -2,12 +2,12 @@ import type { MetadataRoute } from "next";
 import { SITE_URL } from "@/constants/site-constants";
 
 export default function robots(): MetadataRoute.Robots {
-  return {
-    rules: {
-      userAgent: "*",
-      allow: "/",
-      disallow: ["/_next/", "/projects/", "/editor/"],
-    },
-    sitemap: `${SITE_URL}/sitemap.xml`,
-  };
+	return {
+		rules: {
+			userAgent: "*",
+			allow: "/",
+			disallow: ["/_next/", "/projects/", "/editor/"],
+		},
+		sitemap: `${SITE_URL}/sitemap.xml`,
+	};
 }
diff --git a/apps/web/src/app/rss.xml/route.ts b/apps/web/src/app/rss.xml/route.ts
index 19b9e2ea..909d5a1a 100644
--- a/apps/web/src/app/rss.xml/route.ts
+++ b/apps/web/src/app/rss.xml/route.ts
@@ -3,44 +3,44 @@ import { getPosts } from "@/lib/blog/query";
 import { SITE_INFO, SITE_URL } from "@/constants/site-constants";
 
 export async function GET() {
-  try {
-    const { posts } = await getPosts();
+	try {
+		const { posts } = await getPosts();
 
-    const feed = new Feed({
-      title: `${SITE_INFO.title} Blog`,
-      description: SITE_INFO.description,
-      id: `${SITE_URL}`,
-      link: `${SITE_URL}/blog/`,
-      language: "en",
-      image: `${SITE_INFO.openGraphImage}`,
-      favicon: `${SITE_INFO.favicon}`,
-      copyright: `All rights reserved ${new Date().getFullYear()}, ${
-        SITE_INFO.title
-      }`,
-    });
+		const feed = new Feed({
+			title: `${SITE_INFO.title} Blog`,
+			description: SITE_INFO.description,
+			id: `${SITE_URL}`,
+			link: `${SITE_URL}/blog/`,
+			language: "en",
+			image: `${SITE_INFO.openGraphImage}`,
+			favicon: `${SITE_INFO.favicon}`,
+			copyright: `All rights reserved ${new Date().getFullYear()}, ${
+				SITE_INFO.title
+			}`,
+		});
 
-    for (const post of posts) {
-      feed.addItem({
-        title: post.title,
-        id: `${SITE_URL}/blog/${post.slug}`,
-        link: `${SITE_URL}/blog/${post.slug}`,
-        description: post.description,
-        author: post.authors.map((author) => ({
-          name: author.name,
-        })),
-        date: new Date(post.publishedAt),
-        image: post.coverImage || SITE_INFO.openGraphImage,
-      });
-    }
+		for (const post of posts) {
+			feed.addItem({
+				title: post.title,
+				id: `${SITE_URL}/blog/${post.slug}`,
+				link: `${SITE_URL}/blog/${post.slug}`,
+				description: post.description,
+				author: post.authors.map((author) => ({
+					name: author.name,
+				})),
+				date: new Date(post.publishedAt),
+				image: post.coverImage || SITE_INFO.openGraphImage,
+			});
+		}
 
-    return new Response(feed.rss2(), {
-      headers: {
-        "Content-Type": "text/xml",
-        "Cache-Control": "public, max-age=86400, stale-while-revalidate",
-      },
-    });
-  } catch (error) {
-    console.error("Error generating RSS feed", error);
-    return new Response("Internal Server Error", { status: 500 });
-  }
+		return new Response(feed.rss2(), {
+			headers: {
+				"Content-Type": "text/xml",
+				"Cache-Control": "public, max-age=86400, stale-while-revalidate",
+			},
+		});
+	} catch (error) {
+		console.error("Error generating RSS feed", error);
+		return new Response("Internal Server Error", { status: 500 });
+	}
 }
diff --git a/apps/web/src/app/sitemap.ts b/apps/web/src/app/sitemap.ts
index 7b7ec2b1..fed1aed6 100644
--- a/apps/web/src/app/sitemap.ts
+++ b/apps/web/src/app/sitemap.ts
@@ -3,59 +3,59 @@ import { getPosts } from "@/lib/blog/query";
 import type { MetadataRoute } from "next";
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  const data = await getPosts();
+	const data = await getPosts();
 
-  const postPages: MetadataRoute.Sitemap =
-    data?.posts?.map((post) => ({
-      url: `${SITE_URL}/blog/${post.slug}`,
-      lastModified: new Date(post.publishedAt),
-      changeFrequency: "weekly",
-      priority: 0.8,
-    })) ?? [];
+	const postPages: MetadataRoute.Sitemap =
+		data?.posts?.map((post) => ({
+			url: `${SITE_URL}/blog/${post.slug}`,
+			lastModified: new Date(post.publishedAt),
+			changeFrequency: "weekly",
+			priority: 0.8,
+		})) ?? [];
 
-  return [
-    {
-      url: SITE_URL,
-      lastModified: new Date(),
-      changeFrequency: "weekly",
-      priority: 1,
-    },
-    {
-      url: `${SITE_URL}/contributors`,
-      lastModified: new Date(),
-      changeFrequency: "daily",
-      priority: 0.5,
-    },
-    {
-      url: `${SITE_URL}/roadmap`,
-      lastModified: new Date(),
-      changeFrequency: "weekly",
-      priority: 1,
-    },
-    {
-      url: `${SITE_URL}/privacy`,
-      lastModified: new Date(),
-      changeFrequency: "monthly",
-      priority: 0.5,
-    },
-    {
-      url: `${SITE_URL}/terms`,
-      lastModified: new Date(),
-      changeFrequency: "monthly",
-      priority: 0.5,
-    },
-    {
-      url: `${SITE_URL}/why-not-capcut`,
-      lastModified: new Date(),
-      changeFrequency: "yearly",
-      priority: 1,
-    },
-    {
-      url: `${SITE_URL}/blog`,
-      lastModified: new Date(),
-      changeFrequency: "weekly",
-      priority: 1,
-    },
-    ...postPages,
-  ];
+	return [
+		{
+			url: SITE_URL,
+			lastModified: new Date(),
+			changeFrequency: "weekly",
+			priority: 1,
+		},
+		{
+			url: `${SITE_URL}/contributors`,
+			lastModified: new Date(),
+			changeFrequency: "daily",
+			priority: 0.5,
+		},
+		{
+			url: `${SITE_URL}/roadmap`,
+			lastModified: new Date(),
+			changeFrequency: "weekly",
+			priority: 1,
+		},
+		{
+			url: `${SITE_URL}/privacy`,
+			lastModified: new Date(),
+			changeFrequency: "monthly",
+			priority: 0.5,
+		},
+		{
+			url: `${SITE_URL}/terms`,
+			lastModified: new Date(),
+			changeFrequency: "monthly",
+			priority: 0.5,
+		},
+		{
+			url: `${SITE_URL}/why-not-capcut`,
+			lastModified: new Date(),
+			changeFrequency: "yearly",
+			priority: 1,
+		},
+		{
+			url: `${SITE_URL}/blog`,
+			lastModified: new Date(),
+			changeFrequency: "weekly",
+			priority: 1,
+		},
+		...postPages,
+	];
 }
diff --git a/apps/web/src/app/sponsors/page.tsx b/apps/web/src/app/sponsors/page.tsx
index f854e70e..e224b501 100644
--- a/apps/web/src/app/sponsors/page.tsx
+++ b/apps/web/src/app/sponsors/page.tsx
@@ -1,78 +1,78 @@
-import { Metadata } from "next";
+import { ExternalLink } from "lucide-react";
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import { ExternalLink } from "lucide-react";
-import { Card, CardContent } from "@/components/ui/card";
-import { Sponsor, SPONSORS } from "@/constants/site-constants";
 import { BasePage } from "@/app/base-page";
+import { Card, CardContent } from "@/components/ui/card";
+import { SPONSORS, type Sponsor } from "@/constants/site-constants";
 
 export const metadata: Metadata = {
-  title: "Sponsors - OpenCut",
-  description:
-    "Support OpenCut and help us build the future of free and open-source video editing.",
-  openGraph: {
-    title: "Sponsors - OpenCut",
-    description:
-      "Support OpenCut and help us build the future of free and open-source video editing.",
-    type: "website",
-  },
+	title: "Sponsors - OpenCut",
+	description:
+		"Support OpenCut and help us build the future of free and open-source video editing.",
+	openGraph: {
+		title: "Sponsors - OpenCut",
+		description:
+			"Support OpenCut and help us build the future of free and open-source video editing.",
+		type: "website",
+	},
 };
 
 export default function SponsorsPage() {
-  return (
-    <BasePage>
-      <div className="flex flex-col gap-8 text-center">
-        <h1 className="text-5xl font-bold tracking-tight md:text-6xl">
-          Sponsors
-        </h1>
-        <p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed">
-          Support OpenCut and help us build the future of free and open-source
-          video editing.
-        </p>
-      </div>
-      <SponsorsGrid />
-    </BasePage>
-  );
+	return (
+		<BasePage>
+			<div className="flex flex-col gap-8 text-center">
+				<h1 className="text-5xl font-bold tracking-tight md:text-6xl">
+					Sponsors
+				</h1>
+				<p className="text-muted-foreground mx-auto max-w-2xl text-xl leading-relaxed">
+					Support OpenCut and help us build the future of free and open-source
+					video editing.
+				</p>
+			</div>
+			<SponsorsGrid />
+		</BasePage>
+	);
 }
 
 function SponsorsGrid() {
-  return (
-    <div className="grid gap-6 sm:grid-cols-2">
-      {SPONSORS.map((sponsor) => (
-        <SponsorCard key={sponsor.name} sponsor={sponsor} />
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid gap-6 sm:grid-cols-2">
+			{SPONSORS.map((sponsor) => (
+				<SponsorCard key={sponsor.name} sponsor={sponsor} />
+			))}
+		</div>
+	);
 }
 
 function SponsorCard({ sponsor }: { sponsor: Sponsor }) {
-  return (
-    <Link
-      href={sponsor.url}
-      target="_blank"
-      rel="noopener noreferrer"
-      className="h-full w-full"
-    >
-      <Card className="h-full">
-        <CardContent className="flex h-full flex-col justify-center gap-8 p-8">
-          <Image
-            src={sponsor.logo}
-            alt={`${sponsor.name} logo`}
-            width={50}
-            height={50}
-            className="object-contain"
-          />
-          <div className="flex flex-col gap-2">
-            <div className="flex items-center gap-2">
-              <h3 className="text-xl font-semibold group-hover:underline">
-                {sponsor.name}
-              </h3>
-              <ExternalLink className="text-muted-foreground h-4 w-4" />
-            </div>
-            <p className="text-muted-foreground">{sponsor.description}</p>
-          </div>
-        </CardContent>
-      </Card>
-    </Link>
-  );
+	return (
+		<Link
+			href={sponsor.url}
+			target="_blank"
+			rel="noopener noreferrer"
+			className="h-full w-full"
+		>
+			<Card className="h-full">
+				<CardContent className="flex h-full flex-col justify-center gap-8 p-8">
+					<Image
+						src={sponsor.logo}
+						alt={`${sponsor.name} logo`}
+						width={50}
+						height={50}
+						className="object-contain"
+					/>
+					<div className="flex flex-col gap-2">
+						<div className="flex items-center gap-2">
+							<h3 className="text-xl font-semibold group-hover:underline">
+								{sponsor.name}
+							</h3>
+							<ExternalLink className="text-muted-foreground h-4 w-4" />
+						</div>
+						<p className="text-muted-foreground">{sponsor.description}</p>
+					</div>
+				</CardContent>
+			</Card>
+		</Link>
+	);
 }
diff --git a/apps/web/src/app/terms/page.tsx b/apps/web/src/app/terms/page.tsx
index 953fc2b2..d5d43ba7 100644
--- a/apps/web/src/app/terms/page.tsx
+++ b/apps/web/src/app/terms/page.tsx
@@ -1,295 +1,295 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
 import { BasePage } from "@/app/base-page";
-import { SOCIAL_LINKS } from "@/constants/site-constants";
-import { Separator } from "@/components/ui/separator";
 import {
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
+	Accordion,
+	AccordionContent,
+	AccordionItem,
+	AccordionTrigger,
 } from "@/components/ui/accordion";
+import { Separator } from "@/components/ui/separator";
+import { SOCIAL_LINKS } from "@/constants/site-constants";
 
 export const metadata: Metadata = {
-  title: "Terms of Service - OpenCut",
-  description:
-    "OpenCut's Terms of Service. Fair, transparent terms for our free and open-source video editor.",
-  openGraph: {
-    title: "Terms of Service - OpenCut",
-    description:
-      "OpenCut's Terms of Service. Fair, transparent terms for our free and open-source video editor.",
-    type: "website",
-  },
+	title: "Terms of Service - OpenCut",
+	description:
+		"OpenCut's Terms of Service. Fair, transparent terms for our free and open-source video editor.",
+	openGraph: {
+		title: "Terms of Service - OpenCut",
+		description:
+			"OpenCut's Terms of Service. Fair, transparent terms for our free and open-source video editor.",
+		type: "website",
+	},
 };
 
 export default function TermsPage() {
-  return (
-    <BasePage
-      title="Terms of service"
-      description="Fair and transparent terms for our free, open-source video editor. Contact us if you have any questions."
-    >
-      <Accordion type="single" collapsible className="w-full">
-        <AccordionItem
-          value="quick-summary"
-          className="rounded-2xl border px-5"
-        >
-          <AccordionTrigger className="no-underline!">
-            Quick summary
-          </AccordionTrigger>
-          <AccordionContent>
-            <h3 className="mb-3 text-lg font-medium">
-              You own your content, we own nothing.
-            </h3>
-            <ol className="list-decimal space-y-2 pl-6">
-              <li>
-                Your content stays private - basic editing is local, AI features
-                use encrypted uploads
-              </li>
-              <li>
-                We never claim ownership of your content, even when processing
-                AI features
-              </li>
-              <li>
-                Free for personal and commercial use with no watermarks or
-                restrictions
-              </li>
-              <li>Don't use OpenCut for illegal activities or harassment</li>
-              <li>
-                Service provided "as is" - we can't guarantee perfect uptime
-              </li>
-              <li>
-                Open source means you can review our code and self-host if
-                needed
-              </li>
-              <li>
-                You can delete your account anytime and keep using your exported
-                videos
-              </li>
-            </ol>
-            <p className="mt-4">
-              Questions? Email us at{" "}
-              <a
-                href="mailto:oss@opencut.app"
-                className="text-primary hover:underline"
-              >
-                oss@opencut.app
-              </a>
-            </p>
-          </AccordionContent>
-        </AccordionItem>
-      </Accordion>
+	return (
+		<BasePage
+			title="Terms of service"
+			description="Fair and transparent terms for our free, open-source video editor. Contact us if you have any questions."
+		>
+			<Accordion type="single" collapsible className="w-full">
+				<AccordionItem
+					value="quick-summary"
+					className="rounded-2xl border px-5"
+				>
+					<AccordionTrigger className="no-underline!">
+						Quick summary
+					</AccordionTrigger>
+					<AccordionContent>
+						<h3 className="mb-3 text-lg font-medium">
+							You own your content, we own nothing.
+						</h3>
+						<ol className="list-decimal space-y-2 pl-6">
+							<li>
+								Your content stays private - basic editing is local, AI features
+								use encrypted uploads
+							</li>
+							<li>
+								We never claim ownership of your content, even when processing
+								AI features
+							</li>
+							<li>
+								Free for personal and commercial use with no watermarks or
+								restrictions
+							</li>
+							<li>Don't use OpenCut for illegal activities or harassment</li>
+							<li>
+								Service provided "as is" - we can't guarantee perfect uptime
+							</li>
+							<li>
+								Open source means you can review our code and self-host if
+								needed
+							</li>
+							<li>
+								You can delete your account anytime and keep using your exported
+								videos
+							</li>
+						</ol>
+						<p className="mt-4">
+							Questions? Email us at{" "}
+							<a
+								href="mailto:oss@opencut.app"
+								className="text-primary hover:underline"
+							>
+								oss@opencut.app
+							</a>
+						</p>
+					</AccordionContent>
+				</AccordionItem>
+			</Accordion>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Your Content, Your Rights</h2>
-        <p>
-          <strong>You own everything you create.</strong> OpenCut processes
-          basic editing locally on your device. For AI features, content is
-          encrypted before upload and we cannot access your original files. We
-          make no claims to ownership, licensing, or rights over your videos,
-          projects, or any content you create using OpenCut.
-        </p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>
-            Your content remains private and under your control at all times
-          </li>
-          <li>You retain all intellectual property rights to your content</li>
-          <li>
-            Even when using AI features, we cannot access your unencrypted
-            content
-          </li>
-          <li>You can export and use your content however you choose</li>
-          <li>No watermarks, no licensing restrictions from OpenCut</li>
-        </ul>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Your Content, Your Rights</h2>
+				<p>
+					<strong>You own everything you create.</strong> OpenCut processes
+					basic editing locally on your device. For AI features, content is
+					encrypted before upload and we cannot access your original files. We
+					make no claims to ownership, licensing, or rights over your videos,
+					projects, or any content you create using OpenCut.
+				</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>
+						Your content remains private and under your control at all times
+					</li>
+					<li>You retain all intellectual property rights to your content</li>
+					<li>
+						Even when using AI features, we cannot access your unencrypted
+						content
+					</li>
+					<li>You can export and use your content however you choose</li>
+					<li>No watermarks, no licensing restrictions from OpenCut</li>
+				</ul>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">How You Can Use OpenCut</h2>
-        <p>OpenCut is free for personal and commercial use. You can:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>
-            Create videos for personal, educational, or commercial purposes
-          </li>
-          <li>Use OpenCut for client work and paid projects</li>
-          <li>Share and distribute videos created with OpenCut</li>
-          <li>
-            Modify and distribute the OpenCut software (under MIT license)
-          </li>
-        </ul>
-        <p>
-          <strong>What we ask:</strong> Don't use OpenCut for illegal
-          activities, harassment, or creating harmful content. Be respectful of
-          others and follow applicable laws.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">How You Can Use OpenCut</h2>
+				<p>OpenCut is free for personal and commercial use. You can:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>
+						Create videos for personal, educational, or commercial purposes
+					</li>
+					<li>Use OpenCut for client work and paid projects</li>
+					<li>Share and distribute videos created with OpenCut</li>
+					<li>
+						Modify and distribute the OpenCut software (under MIT license)
+					</li>
+				</ul>
+				<p>
+					<strong>What we ask:</strong> Don't use OpenCut for illegal
+					activities, harassment, or creating harmful content. Be respectful of
+					others and follow applicable laws.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">
-          AI Features and Data Processing
-        </h2>
-        <p>
-          OpenCut offers optional AI-powered features that require server
-          processing:
-        </p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>
-            AI features (auto captions, content analysis, etc.) are completely
-            optional
-          </li>
-          <li>Your content is encrypted on your device before any upload</li>
-          <li>
-            We use zero-knowledge encryption - we cannot decrypt your content
-          </li>
-          <li>Encrypted content is deleted immediately after processing</li>
-          <li>
-            You maintain full ownership and control of your content throughout
-          </li>
-        </ul>
-        <p>
-          By using AI features, you consent to the temporary, encrypted
-          processing of your content as described in our Privacy Policy. You can
-          always choose to use only local editing features.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">
+					AI Features and Data Processing
+				</h2>
+				<p>
+					OpenCut offers optional AI-powered features that require server
+					processing:
+				</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>
+						AI features (auto captions, content analysis, etc.) are completely
+						optional
+					</li>
+					<li>Your content is encrypted on your device before any upload</li>
+					<li>
+						We use zero-knowledge encryption - we cannot decrypt your content
+					</li>
+					<li>Encrypted content is deleted immediately after processing</li>
+					<li>
+						You maintain full ownership and control of your content throughout
+					</li>
+				</ul>
+				<p>
+					By using AI features, you consent to the temporary, encrypted
+					processing of your content as described in our Privacy Policy. You can
+					always choose to use only local editing features.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Account and Service</h2>
-        <p>To use certain features, you may create an account:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Provide accurate information when signing up</li>
-          <li>Keep your account secure and don't share credentials</li>
-          <li>You're responsible for activity under your account</li>
-          <li>You can delete your account at any time</li>
-        </ul>
-        <p>
-          OpenCut is provided "as is" without warranties. While we strive for
-          reliability, we can't guarantee uninterrupted service.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Account and Service</h2>
+				<p>To use certain features, you may create an account:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Provide accurate information when signing up</li>
+					<li>Keep your account secure and don't share credentials</li>
+					<li>You're responsible for activity under your account</li>
+					<li>You can delete your account at any time</li>
+				</ul>
+				<p>
+					OpenCut is provided "as is" without warranties. While we strive for
+					reliability, we can't guarantee uninterrupted service.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Open Source Benefits</h2>
-        <p>Because OpenCut is open source, you have additional rights:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Review our code to see exactly how we handle your data</li>
-          <li>Self-host OpenCut on your own servers</li>
-          <li>Modify the software to suit your needs</li>
-          <li>Contribute improvements back to the community</li>
-        </ul>
-        <p>
-          View our source code and license on{" "}
-          <a
-            href={SOCIAL_LINKS.github}
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            GitHub
-          </a>
-          .
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Open Source Benefits</h2>
+				<p>Because OpenCut is open source, you have additional rights:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Review our code to see exactly how we handle your data</li>
+					<li>Self-host OpenCut on your own servers</li>
+					<li>Modify the software to suit your needs</li>
+					<li>Contribute improvements back to the community</li>
+				</ul>
+				<p>
+					View our source code and license on{" "}
+					<a
+						href={SOCIAL_LINKS.github}
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						GitHub
+					</a>
+					.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Third-Party Content</h2>
-        <p>
-          When using OpenCut, make sure you have the right to use any content
-          you import:
-        </p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Only upload content you own or have permission to use</li>
-          <li>
-            Respect copyright, trademarks, and other intellectual property
-          </li>
-          <li>
-            Don't use copyrighted music, images, or videos without permission
-          </li>
-          <li>You're responsible for any claims related to your content</li>
-        </ul>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Third-Party Content</h2>
+				<p>
+					When using OpenCut, make sure you have the right to use any content
+					you import:
+				</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Only upload content you own or have permission to use</li>
+					<li>
+						Respect copyright, trademarks, and other intellectual property
+					</li>
+					<li>
+						Don't use copyrighted music, images, or videos without permission
+					</li>
+					<li>You're responsible for any claims related to your content</li>
+				</ul>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Limitations and Liability</h2>
-        <p>
-          OpenCut is provided free of charge. To the extent permitted by law:
-        </p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>We're not liable for any loss of data or content</li>
-          <li>
-            Projects are stored in your browser and may be lost if you clear
-            browser data
-          </li>
-          <li>We're not responsible for how you use the service</li>
-          <li>Our liability is limited to the maximum extent allowed by law</li>
-        </ul>
-        <p>
-          Since your content stays on your device, we have no way to recover
-          lost projects. Consider exporting important videos when finished
-          editing.
-        </p>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Limitations and Liability</h2>
+				<p>
+					OpenCut is provided free of charge. To the extent permitted by law:
+				</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>We're not liable for any loss of data or content</li>
+					<li>
+						Projects are stored in your browser and may be lost if you clear
+						browser data
+					</li>
+					<li>We're not responsible for how you use the service</li>
+					<li>Our liability is limited to the maximum extent allowed by law</li>
+				</ul>
+				<p>
+					Since your content stays on your device, we have no way to recover
+					lost projects. Consider exporting important videos when finished
+					editing.
+				</p>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Service Changes</h2>
-        <p>We may update OpenCut and these terms:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>We'll notify you of significant changes to these terms</li>
-          <li>Continued use means you accept any updates</li>
-          <li>You can always self-host an older version if you prefer</li>
-          <li>Major changes will be discussed with the community on GitHub</li>
-        </ul>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Service Changes</h2>
+				<p>We may update OpenCut and these terms:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>We'll notify you of significant changes to these terms</li>
+					<li>Continued use means you accept any updates</li>
+					<li>You can always self-host an older version if you prefer</li>
+					<li>Major changes will be discussed with the community on GitHub</li>
+				</ul>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Termination</h2>
-        <p>You can stop using OpenCut at any time:</p>
-        <ul className="list-disc space-y-2 pl-6">
-          <li>Delete your account through your profile settings</li>
-          <li>Clear your browser data to remove local projects</li>
-          <li>Your content remains yours even if you stop using OpenCut</li>
-          <li>We may suspend accounts for violations of these terms</li>
-        </ul>
-      </section>
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Termination</h2>
+				<p>You can stop using OpenCut at any time:</p>
+				<ul className="list-disc space-y-2 pl-6">
+					<li>Delete your account through your profile settings</li>
+					<li>Clear your browser data to remove local projects</li>
+					<li>Your content remains yours even if you stop using OpenCut</li>
+					<li>We may suspend accounts for violations of these terms</li>
+				</ul>
+			</section>
 
-      <section className="flex flex-col gap-3">
-        <h2 className="text-2xl font-semibold">Contact Us</h2>
-        <p>Questions about these terms or need to report an issue?</p>
-        <p>
-          Contact us through our{" "}
-          <a
-            href={`${SOCIAL_LINKS.github}/issues`}
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            GitHub repository
-          </a>
-          , email us at{" "}
-          <a
-            href="mailto:oss@opencut.app"
-            className="text-primary hover:underline"
-          >
-            oss@opencut.app
-          </a>
-          , or reach out on{" "}
-          <a
-            href={SOCIAL_LINKS.x}
-            target="_blank"
-            rel="noopener"
-            className="text-primary hover:underline"
-          >
-            X (Twitter)
-          </a>
-          .
-        </p>
-        <p>
-          These terms are governed by applicable law in your jurisdiction. We
-          prefer to resolve disputes through friendly discussion in our
-          open-source community.
-        </p>
-      </section>
-      <Separator />
-      <p className="text-muted-foreground text-sm">
-        Last updated: July 14, 2025
-      </p>
-    </BasePage>
-  );
+			<section className="flex flex-col gap-3">
+				<h2 className="text-2xl font-semibold">Contact Us</h2>
+				<p>Questions about these terms or need to report an issue?</p>
+				<p>
+					Contact us through our{" "}
+					<a
+						href={`${SOCIAL_LINKS.github}/issues`}
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						GitHub repository
+					</a>
+					, email us at{" "}
+					<a
+						href="mailto:oss@opencut.app"
+						className="text-primary hover:underline"
+					>
+						oss@opencut.app
+					</a>
+					, or reach out on{" "}
+					<a
+						href={SOCIAL_LINKS.x}
+						target="_blank"
+						rel="noopener"
+						className="text-primary hover:underline"
+					>
+						X (Twitter)
+					</a>
+					.
+				</p>
+				<p>
+					These terms are governed by applicable law in your jurisdiction. We
+					prefer to resolve disputes through friendly discussion in our
+					open-source community.
+				</p>
+			</section>
+			<Separator />
+			<p className="text-muted-foreground text-sm">
+				Last updated: July 14, 2025
+			</p>
+		</BasePage>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/drag-overlay.tsx b/apps/web/src/components/editor/assets-panel/drag-overlay.tsx
index e1f72a30..ba1984e6 100644
--- a/apps/web/src/components/editor/assets-panel/drag-overlay.tsx
+++ b/apps/web/src/components/editor/assets-panel/drag-overlay.tsx
@@ -1,57 +1,60 @@
-import { Upload, Plus, Image } from "lucide-react";
-import { Button } from "@/components/ui/button";
+import { Upload } from "lucide-react";
 
 interface MediaDragOverlayProps {
-  isVisible: boolean;
-  isProcessing?: boolean;
-  progress?: number;
-  onClick?: () => void;
-  isEmptyState?: boolean;
+	isVisible: boolean;
+	isProcessing?: boolean;
+	progress?: number;
+	onClick?: () => void;
 }
 
 export function MediaDragOverlay({
-  isVisible,
-  isProcessing = false,
-  progress = 0,
-  onClick,
-  isEmptyState = false,
+	isVisible,
+	isProcessing = false,
+	progress = 0,
+	onClick,
 }: MediaDragOverlayProps) {
-  if (!isVisible) return null;
+	if (!isVisible) return null;
 
-  const handleClick = (e: React.MouseEvent) => {
-    if (isProcessing || !onClick) return;
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  };
+	const handleClick = ({
+		event,
+	}: {
+		event: React.MouseEvent<HTMLButtonElement>;
+	}) => {
+		if (isProcessing || !onClick) return;
+		event.preventDefault();
+		event.stopPropagation();
+		onClick();
+	};
 
-  return (
-    <div
-      className="bg-foreground/5 hover:bg-foreground/10 flex h-full flex-col items-center justify-center gap-4 rounded-lg p-8 text-center transition-all duration-200"
-      onClick={handleClick}
-    >
-      <div className="flex items-center justify-center">
-        <Upload className="text-foreground h-10 w-10" />
-      </div>
+	return (
+		<button
+			className="bg-foreground/5 hover:bg-foreground/10 flex h-full w-full flex-col items-center justify-center gap-4 rounded-lg p-8 text-center transition-all duration-200"
+			type="button"
+			disabled={isProcessing || !onClick}
+			onClick={(event) => handleClick({ event })}
+		>
+			<div className="flex items-center justify-center">
+				<Upload className="text-foreground size-10" />
+			</div>
 
-      <div className="space-y-2">
-        <p className="text-muted-foreground max-w-sm text-xs">
-          {isProcessing
-            ? `Processing your files (${progress}%)`
-            : "Drag and drop videos, photos, and audio files here"}
-        </p>
-      </div>
+			<div className="space-y-2">
+				<p className="text-muted-foreground max-w-sm text-xs">
+					{isProcessing
+						? `Processing your files (${progress}%)`
+						: "Drag and drop videos, photos, and audio files here"}
+				</p>
+			</div>
 
-      {isProcessing && (
-        <div className="w-full max-w-xs">
-          <div className="bg-muted/50 h-2 w-full rounded-full">
-            <div
-              className="bg-primary h-2 rounded-full transition-all duration-300"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
+			{isProcessing && (
+				<div className="w-full max-w-xs">
+					<div className="bg-muted/50 h-2 w-full rounded-full">
+						<div
+							className="bg-primary h-2 rounded-full transition-all duration-300"
+							style={{ width: `${progress}%` }}
+						/>
+					</div>
+				</div>
+			)}
+		</button>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/index.tsx b/apps/web/src/components/editor/assets-panel/index.tsx
index 2204cb57..d4bb7d23 100644
--- a/apps/web/src/components/editor/assets-panel/index.tsx
+++ b/apps/web/src/components/editor/assets-panel/index.tsx
@@ -1,52 +1,55 @@
 "use client";
 
+import { Separator } from "@/components/ui/separator";
+import {
+	type Tab,
+	useAssetsPanelStore,
+} from "../../../stores/assets-panel-store";
 import { TabBar } from "./tabbar";
+import { Captions } from "./views/captions";
 import { MediaView } from "./views/media";
-import { useAssetsPanelStore, Tab } from "../../../stores/assets-panel-store";
-import { TextView } from "./views/text";
+import { SettingsView } from "./views/settings";
 import { SoundsView } from "./views/sounds";
 import { StickersView } from "./views/stickers";
-import { Separator } from "@/components/ui/separator";
-import { SettingsView } from "./views/settings";
-import { Captions } from "./views/captions";
+import { TextView } from "./views/text";
 
 export function AssetsPanel() {
-  const { activeTab } = useAssetsPanelStore();
+	const { activeTab } = useAssetsPanelStore();
 
-  const viewMap: Record<Tab, React.ReactNode> = {
-    media: <MediaView />,
-    sounds: <SoundsView />,
-    text: <TextView />,
-    stickers: <StickersView />,
-    effects: (
-      <div className="text-muted-foreground p-4">
-        Effects view coming soon...
-      </div>
-    ),
-    transitions: (
-      <div className="text-muted-foreground p-4">
-        Transitions view coming soon...
-      </div>
-    ),
-    captions: <Captions />,
-    filters: (
-      <div className="text-muted-foreground p-4">
-        Filters view coming soon...
-      </div>
-    ),
-    adjustment: (
-      <div className="text-muted-foreground p-4">
-        Adjustment view coming soon...
-      </div>
-    ),
-    settings: <SettingsView />,
-  };
+	const viewMap: Record<Tab, React.ReactNode> = {
+		media: <MediaView />,
+		sounds: <SoundsView />,
+		text: <TextView />,
+		stickers: <StickersView />,
+		effects: (
+			<div className="text-muted-foreground p-4">
+				Effects view coming soon...
+			</div>
+		),
+		transitions: (
+			<div className="text-muted-foreground p-4">
+				Transitions view coming soon...
+			</div>
+		),
+		captions: <Captions />,
+		filters: (
+			<div className="text-muted-foreground p-4">
+				Filters view coming soon...
+			</div>
+		),
+		adjustment: (
+			<div className="text-muted-foreground p-4">
+				Adjustment view coming soon...
+			</div>
+		),
+		settings: <SettingsView />,
+	};
 
-  return (
-    <div className="bg-panel flex h-full">
-      <TabBar />
-      <Separator orientation="vertical" />
-      <div className="flex-1 overflow-hidden">{viewMap[activeTab]}</div>
-    </div>
-  );
+	return (
+		<div className="bg-panel flex h-full">
+			<TabBar />
+			<Separator orientation="vertical" />
+			<div className="flex-1 overflow-hidden">{viewMap[activeTab]}</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/tabbar.tsx b/apps/web/src/components/editor/assets-panel/tabbar.tsx
index 3fd101ff..b6484933 100644
--- a/apps/web/src/components/editor/assets-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/assets-panel/tabbar.tsx
@@ -1,109 +1,116 @@
 "use client";
 
+import { useCallback, useEffect, useRef, useState } from "react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { cn } from "@/utils/ui";
 import {
-  TAB_KEYS,
-  tabs,
-  useAssetsPanelStore,
+	TAB_KEYS,
+	tabs,
+	useAssetsPanelStore,
 } from "../../../stores/assets-panel-store";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useEffect, useRef, useState } from "react";
 
 export function TabBar() {
-  const { activeTab, setActiveTab } = useAssetsPanelStore();
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const [showTopFade, setShowTopFade] = useState(false);
-  const [showBottomFade, setShowBottomFade] = useState(false);
+	const { activeTab, setActiveTab } = useAssetsPanelStore();
+	const scrollRef = useRef<HTMLDivElement>(null);
+	const [showTopFade, setShowTopFade] = useState(false);
+	const [showBottomFade, setShowBottomFade] = useState(false);
 
-  const checkScrollPosition = () => {
-    const element = scrollRef.current;
-    if (!element) return;
+	const checkScrollPosition = useCallback(() => {
+		const element = scrollRef.current;
+		if (!element) return;
 
-    const { scrollTop, scrollHeight, clientHeight } = element;
-    setShowTopFade(scrollTop > 0);
-    setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
-  };
+		const { scrollTop, scrollHeight, clientHeight } = element;
+		setShowTopFade(scrollTop > 0);
+		setShowBottomFade(scrollTop < scrollHeight - clientHeight - 1);
+	}, []);
 
-  useEffect(() => {
-    const element = scrollRef.current;
-    if (!element) return;
+	useEffect(() => {
+		const element = scrollRef.current;
+		if (!element) return;
 
-    checkScrollPosition();
-    element.addEventListener("scroll", checkScrollPosition);
+		checkScrollPosition();
+		element.addEventListener("scroll", checkScrollPosition);
 
-    const resizeObserver = new ResizeObserver(checkScrollPosition);
-    resizeObserver.observe(element);
+		const resizeObserver = new ResizeObserver(checkScrollPosition);
+		resizeObserver.observe(element);
 
-    return () => {
-      element.removeEventListener("scroll", checkScrollPosition);
-      resizeObserver.disconnect();
-    };
-  }, []);
+		return () => {
+			element.removeEventListener("scroll", checkScrollPosition);
+			resizeObserver.disconnect();
+		};
+	}, [checkScrollPosition]);
 
-  return (
-    <div className="relative flex">
-      <div
-        ref={scrollRef}
-        className="scrollbar-hidden relative flex h-full w-full flex-col items-center justify-start gap-5 overflow-y-auto px-4 py-4"
-      >
-        {TAB_KEYS.map((tabKey) => {
-          const tab = tabs[tabKey];
-          return (
-            <div
-              className={cn(
-                "flex cursor-pointer flex-col items-center gap-0.5",
-                activeTab === tabKey
-                  ? "text-primary !opacity-100"
-                  : "text-muted-foreground",
-              )}
-              onClick={() => setActiveTab(tabKey)}
-              key={tabKey}
-            >
-              <Tooltip delayDuration={10}>
-                <TooltipTrigger asChild>
-                  <tab.icon className="size-[1.1rem]! opacity-100 hover:opacity-75" />
-                </TooltipTrigger>
-                <TooltipContent
-                  side="right"
-                  align="center"
-                  variant="sidebar"
-                  sideOffset={8}
-                >
-                  <div className="text-foreground text-sm leading-none font-medium">
-                    {tab.label}
-                  </div>
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          );
-        })}
-      </div>
+	return (
+		<div className="relative flex">
+			<div
+				ref={scrollRef}
+				className="scrollbar-hidden relative flex h-full w-full flex-col items-center justify-start gap-5 overflow-y-auto px-4 py-4"
+			>
+				{TAB_KEYS.map((tabKey) => {
+					const tab = tabs[tabKey];
+					return (
+						<Tooltip key={tabKey} delayDuration={10}>
+							<TooltipTrigger asChild>
+								<button
+									type="button"
+									aria-label={tab.label}
+									className={cn(
+										"flex cursor-pointer flex-col items-center gap-0.5",
+										activeTab === tabKey
+											? "text-primary !opacity-100"
+											: "text-muted-foreground",
+									)}
+									onClick={() => setActiveTab(tabKey)}
+									onKeyDown={(event) => {
+										if (event.key === "Enter" || event.key === " ") {
+											event.preventDefault();
+											setActiveTab(tabKey);
+										}
+									}}
+								>
+									<tab.icon className="size-[1.1rem]! opacity-100 hover:opacity-75" />
+								</button>
+							</TooltipTrigger>
+							<TooltipContent
+								side="right"
+								align="center"
+								variant="sidebar"
+								sideOffset={8}
+							>
+								<div className="text-foreground text-sm leading-none font-medium">
+									{tab.label}
+								</div>
+							</TooltipContent>
+						</Tooltip>
+					);
+				})}
+			</div>
 
-      <FadeOverlay direction="top" show={showTopFade} />
-      <FadeOverlay direction="bottom" show={showBottomFade} />
-    </div>
-  );
+			<FadeOverlay direction="top" show={showTopFade} />
+			<FadeOverlay direction="bottom" show={showBottomFade} />
+		</div>
+	);
 }
 
 function FadeOverlay({
-  direction,
-  show,
+	direction,
+	show,
 }: {
-  direction: "top" | "bottom";
-  show: boolean;
+	direction: "top" | "bottom";
+	show: boolean;
 }) {
-  return (
-    <div
-      className={cn(
-        "pointer-events-none absolute right-0 left-0 h-6 transition-opacity duration-200",
-        direction === "top" && show
-          ? "from-panel top-0 bg-gradient-to-b to-transparent"
-          : "from-panel bottom-0 bg-gradient-to-t to-transparent",
-      )}
-    />
-  );
+	return (
+		<div
+			className={cn(
+				"pointer-events-none absolute right-0 left-0 h-6 transition-opacity duration-200",
+				direction === "top" && show
+					? "from-panel top-0 bg-gradient-to-b to-transparent"
+					: "from-panel bottom-0 bg-gradient-to-t to-transparent",
+			)}
+		/>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/views/captions.tsx b/apps/web/src/components/editor/assets-panel/views/captions.tsx
index 4a258711..0cdba7dd 100644
--- a/apps/web/src/components/editor/assets-panel/views/captions.tsx
+++ b/apps/web/src/components/editor/assets-panel/views/captions.tsx
@@ -1,120 +1,152 @@
 import { Button } from "@/components/ui/button";
 import { PropertyGroup } from "../../properties-panel/property-item";
 import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import { LanguageSelect } from "@/components/language-select";
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import { useState, useRef } from "react";
 import { extractTimelineAudio } from "@/lib/media/mediabunny";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
-import { LANGUAGES } from "@/constants/captions-constants";
+import { TRANSCRIPTION_LANGUAGES } from "@/constants/transcription-constants";
 import { Loader2 } from "lucide-react";
-import type { TranscriptionProgress } from "@/types/transcription";
+import type {
+	TranscriptionLanguage,
+	TranscriptionProgress,
+} from "@/types/transcription";
 import { transcriptionService } from "@/services/transcription";
 import { decodeAudioToFloat32 } from "@/lib/media/audio";
 import { buildCaptionChunks } from "@/lib/transcription/caption";
 
 export function Captions() {
-  const [selectedLanguage, setSelectedLanguage] = useState("auto");
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [processingStep, setProcessingStep] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-  const editor = useEditor();
+	const [selectedLanguage, setSelectedLanguage] =
+		useState<TranscriptionLanguage>("auto");
+	const [isProcessing, setIsProcessing] = useState(false);
+	const [processingStep, setProcessingStep] = useState("");
+	const [error, setError] = useState<string | null>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const editor = useEditor();
 
-  const handleProgress = (progress: TranscriptionProgress) => {
-    if (progress.status === "loading-model") {
-      setProcessingStep(`Loading model ${Math.round(progress.progress)}%`);
-    } else if (progress.status === "transcribing") {
-      setProcessingStep("Transcribing...");
-    }
-  };
+	const handleProgress = (progress: TranscriptionProgress) => {
+		if (progress.status === "loading-model") {
+			setProcessingStep(`Loading model ${Math.round(progress.progress)}%`);
+		} else if (progress.status === "transcribing") {
+			setProcessingStep("Transcribing...");
+		}
+	};
 
-  const handleGenerateTranscript = async () => {
-    try {
-      setIsProcessing(true);
-      setError(null);
-      setProcessingStep("Extracting audio...");
+	const handleGenerateTranscript = async () => {
+		try {
+			setIsProcessing(true);
+			setError(null);
+			setProcessingStep("Extracting audio...");
 
-      const audioBlob = await extractTimelineAudio({
-        tracks: editor.timeline.getTracks(),
-        mediaAssets: editor.media.getAssets(),
-        totalDuration: editor.timeline.getTotalDuration(),
-      });
+			const audioBlob = await extractTimelineAudio({
+				tracks: editor.timeline.getTracks(),
+				mediaAssets: editor.media.getAssets(),
+				totalDuration: editor.timeline.getTotalDuration(),
+			});
 
-      setProcessingStep("Preparing audio...");
-      const { samples } = await decodeAudioToFloat32({ audioBlob });
+			setProcessingStep("Preparing audio...");
+			const { samples } = await decodeAudioToFloat32({ audioBlob });
 
-      const result = await transcriptionService.transcribe({
-        audioData: samples,
-        language:
-          selectedLanguage === "auto" ? "auto" : selectedLanguage.toLowerCase(),
-        onProgress: handleProgress,
-      });
+			const result = await transcriptionService.transcribe({
+				audioData: samples,
+				language: selectedLanguage === "auto" ? undefined : selectedLanguage,
+				onProgress: handleProgress,
+			});
 
-      setProcessingStep("Generating captions...");
-      const captionChunks = buildCaptionChunks({ segments: result.segments });
+			setProcessingStep("Generating captions...");
+			const captionChunks = buildCaptionChunks({ segments: result.segments });
 
-      const captionTrackId = editor.timeline.addTrack({
-        type: "text",
-        index: 0,
-      });
+			const captionTrackId = editor.timeline.addTrack({
+				type: "text",
+				index: 0,
+			});
 
-      for (let i = 0; i < captionChunks.length; i++) {
-        const caption = captionChunks[i];
-        editor.timeline.insertElement({
-          placement: { mode: "explicit", trackId: captionTrackId },
-          element: {
-            ...DEFAULT_TEXT_ELEMENT,
-            name: `Caption ${i + 1}`,
-            content: caption.text,
-            duration: caption.duration,
-            startTime: caption.startTime,
-            fontSize: 65,
-            fontWeight: "bold",
-          },
-        });
-      }
-    } catch (error) {
-      console.error("Transcription failed:", error);
-      setError(
-        error instanceof Error ? error.message : "An unexpected error occurred",
-      );
-    } finally {
-      setIsProcessing(false);
-      setProcessingStep("");
-    }
-  };
+			for (let i = 0; i < captionChunks.length; i++) {
+				const caption = captionChunks[i];
+				editor.timeline.insertElement({
+					placement: { mode: "explicit", trackId: captionTrackId },
+					element: {
+						...DEFAULT_TEXT_ELEMENT,
+						name: `Caption ${i + 1}`,
+						content: caption.text,
+						duration: caption.duration,
+						startTime: caption.startTime,
+						fontSize: 65,
+						fontWeight: "bold",
+					},
+				});
+			}
+		} catch (error) {
+			console.error("Transcription failed:", error);
+			setError(
+				error instanceof Error ? error.message : "An unexpected error occurred",
+			);
+		} finally {
+			setIsProcessing(false);
+			setProcessingStep("");
+		}
+	};
 
-  return (
-    <BaseView
-      ref={containerRef}
-      className="flex h-full flex-col justify-between"
-    >
-      <PropertyGroup title="Language">
-        <LanguageSelect
-          selectedCountry={selectedLanguage}
-          onSelect={setSelectedLanguage}
-          containerRef={containerRef}
-          languages={LANGUAGES}
-        />
-      </PropertyGroup>
+	const handleLanguageChange = ({ value }: { value: string }) => {
+		if (value === "auto") {
+			setSelectedLanguage("auto");
+			return;
+		}
 
-      <div className="flex flex-col gap-4">
-        {error && (
-          <div className="bg-destructive/10 border-destructive/20 rounded-md border p-3">
-            <p className="text-destructive text-sm">{error}</p>
-          </div>
-        )}
+		const matchedLanguage = TRANSCRIPTION_LANGUAGES.find(
+			(language) => language.code === value,
+		);
+		if (!matchedLanguage) return;
+		setSelectedLanguage(matchedLanguage.code);
+	};
 
-        <Button
-          className="w-full"
-          onClick={handleGenerateTranscript}
-          disabled={isProcessing}
-        >
-          {isProcessing && <Loader2 className="mr-1 animate-spin" />}
-          {isProcessing ? processingStep : "Generate transcript"}
-        </Button>
-      </div>
-    </BaseView>
-  );
+	return (
+		<BaseView
+			ref={containerRef}
+			className="flex h-full flex-col justify-between"
+		>
+			<PropertyGroup title="Language">
+				<Select
+					value={selectedLanguage}
+					onValueChange={(value) => handleLanguageChange({ value })}
+				>
+					<SelectTrigger className="bg-panel-accent h-8 w-full text-xs">
+						<SelectValue placeholder="Select a language" />
+					</SelectTrigger>
+					<SelectContent>
+						<SelectItem value="auto">Auto detect</SelectItem>
+						{TRANSCRIPTION_LANGUAGES.map((language) => (
+							<SelectItem key={language.code} value={language.code}>
+								{language.name}
+							</SelectItem>
+						))}
+					</SelectContent>
+				</Select>
+			</PropertyGroup>
+
+			<div className="flex flex-col gap-4">
+				{error && (
+					<div className="bg-destructive/10 border-destructive/20 rounded-md border p-3">
+						<p className="text-destructive text-sm">{error}</p>
+					</div>
+				)}
+
+				<Button
+					className="w-full"
+					onClick={handleGenerateTranscript}
+					disabled={isProcessing}
+				>
+					{isProcessing && <Loader2 className="mr-1 animate-spin" />}
+					{isProcessing ? processingStep : "Generate transcript"}
+				</Button>
+			</div>
+		</BaseView>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/views/media.tsx b/apps/web/src/components/editor/assets-panel/views/media.tsx
index 062fc96f..78c75508 100644
--- a/apps/web/src/components/editor/assets-panel/views/media.tsx
+++ b/apps/web/src/components/editor/assets-panel/views/media.tsx
@@ -1,687 +1,712 @@
 "use client";
 
-import { useState, useMemo } from "react";
-import {
-  ArrowDown01,
-  CloudUpload,
-  Grid2X2,
-  Image,
-  List,
-  Loader2,
-  Music,
-  Video,
-} from "lucide-react";
 import type { LucideIcon } from "lucide-react";
+import {
+	ArrowDown01,
+	CloudUpload,
+	Grid2X2,
+	ImageIcon,
+	List,
+	Loader2,
+	Music,
+	Video,
+} from "lucide-react";
+import Image from "next/image";
+import { useMemo, useState } from "react";
 import { toast } from "sonner";
+import { MediaDragOverlay } from "@/components/editor/assets-panel/drag-overlay";
+import { DraggableItem } from "@/components/editor/draggable-item";
+import { Button } from "@/components/ui/button";
+import {
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useEditor } from "@/hooks/use-editor";
 import { useFileUpload } from "@/hooks/use-file-upload";
 import { useRevealItem } from "@/hooks/use-reveal-item";
 import { processMediaAssets } from "@/lib/media/processing";
-import { cn } from "@/utils/ui";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
+import { useAssetsPanelStore } from "@/stores/assets-panel-store";
 import type { MediaAsset } from "@/types/assets";
 import type { CreateTimelineElement } from "@/types/timeline";
-import { Button } from "@/components/ui/button";
-import { MediaDragOverlay } from "@/components/editor/assets-panel/drag-overlay";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { DraggableItem } from "@/components/editor/draggable-item";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-import { useAssetsPanelStore } from "@/stores/assets-panel-store";
+import { cn } from "@/utils/ui";
 
 export function MediaView() {
-  const editor = useEditor();
-  const mediaFiles = editor.media.getAssets();
-  const activeProject = editor.project.getActive();
+	const editor = useEditor();
+	const mediaFiles = editor.media.getAssets();
+	const activeProject = editor.project.getActive();
 
-  const { mediaViewMode, setMediaViewMode, highlightMediaId, clearHighlight } =
-    useAssetsPanelStore();
-  const { highlightedId, registerElement } = useRevealItem(
-    highlightMediaId,
-    clearHighlight,
-  );
+	const { mediaViewMode, setMediaViewMode, highlightMediaId, clearHighlight } =
+		useAssetsPanelStore();
+	const { highlightedId, registerElement } = useRevealItem(
+		highlightMediaId,
+		clearHighlight,
+	);
 
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [sortBy, setSortBy] = useState<"name" | "type" | "duration" | "size">(
-    "name",
-  );
-  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
+	const [isProcessing, setIsProcessing] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [sortBy, setSortBy] = useState<"name" | "type" | "duration" | "size">(
+		"name",
+	);
+	const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 
-  const processFiles = async ({ files }: { files: FileList }) => {
-    if (!files || files.length === 0) return;
-    if (!activeProject) {
-      toast.error("No active project");
-      return;
-    }
+	const processFiles = async ({ files }: { files: FileList }) => {
+		if (!files || files.length === 0) return;
+		if (!activeProject) {
+			toast.error("No active project");
+			return;
+		}
 
-    setIsProcessing(true);
-    setProgress(0);
-    try {
-      const processedAssets = await processMediaAssets({
-        files,
-        onProgress: (progress: { progress: number }) =>
-          setProgress(progress.progress),
-      });
-      for (const asset of processedAssets) {
-        await editor.media.addMediaAsset({
-          projectId: activeProject.metadata.id,
-          asset,
-        });
-      }
-    } catch (error) {
-      console.error("Error processing files:", error);
-      toast.error("Failed to process files");
-    } finally {
-      setIsProcessing(false);
-      setProgress(0);
-    }
-  };
+		setIsProcessing(true);
+		setProgress(0);
+		try {
+			const processedAssets = await processMediaAssets({
+				files,
+				onProgress: (progress: { progress: number }) =>
+					setProgress(progress.progress),
+			});
+			for (const asset of processedAssets) {
+				await editor.media.addMediaAsset({
+					projectId: activeProject.metadata.id,
+					asset,
+				});
+			}
+		} catch (error) {
+			console.error("Error processing files:", error);
+			toast.error("Failed to process files");
+		} finally {
+			setIsProcessing(false);
+			setProgress(0);
+		}
+	};
 
-  const { isDragOver, dragProps, openFilePicker, fileInputProps } =
-    useFileUpload({
-      accept: "image/*,video/*,audio/*",
-      multiple: true,
-      onFilesSelected: (files) => processFiles({ files }),
-    });
+	const { isDragOver, dragProps, openFilePicker, fileInputProps } =
+		useFileUpload({
+			accept: "image/*,video/*,audio/*",
+			multiple: true,
+			onFilesSelected: (files) => processFiles({ files }),
+		});
 
-  const handleRemove = async ({
-    event,
-    id,
-  }: {
-    event: React.MouseEvent;
-    id: string;
-  }) => {
-    event.stopPropagation();
+	const handleRemove = async ({
+		event,
+		id,
+	}: {
+		event: React.MouseEvent;
+		id: string;
+	}) => {
+		event.stopPropagation();
 
-    if (!activeProject) {
-      toast.error("No active project");
-      return;
-    }
+		if (!activeProject) {
+			toast.error("No active project");
+			return;
+		}
 
-    await editor.media.removeMediaAsset({
-      projectId: activeProject.metadata.id,
-      id,
-    });
-  };
+		await editor.media.removeMediaAsset({
+			projectId: activeProject.metadata.id,
+			id,
+		});
+	};
 
-  const addElementAtTime = ({
-    asset,
-    startTime,
-  }: {
-    asset: MediaAsset;
-    startTime: number;
-  }): boolean => {
-    const element = createElementFromMedia({ asset, startTime });
-    editor.timeline.insertElement({
-      element,
-      placement: { mode: "auto" },
-    });
-    return true;
-  };
+	const addElementAtTime = ({
+		asset,
+		startTime,
+	}: {
+		asset: MediaAsset;
+		startTime: number;
+	}): boolean => {
+		const element = createElementFromMedia({ asset, startTime });
+		editor.timeline.insertElement({
+			element,
+			placement: { mode: "auto" },
+		});
+		return true;
+	};
 
-  const filteredMediaItems = useMemo(() => {
-    const filtered = mediaFiles.filter((item) => !item.ephemeral);
+	const filteredMediaItems = useMemo(() => {
+		const filtered = mediaFiles.filter((item) => !item.ephemeral);
 
-    filtered.sort((a, b) => {
-      let valueA: string | number;
-      let valueB: string | number;
+		filtered.sort((a, b) => {
+			let valueA: string | number;
+			let valueB: string | number;
 
-      switch (sortBy) {
-        case "name":
-          valueA = a.name.toLowerCase();
-          valueB = b.name.toLowerCase();
-          break;
-        case "type":
-          valueA = a.type;
-          valueB = b.type;
-          break;
-        case "duration":
-          valueA = a.duration || 0;
-          valueB = b.duration || 0;
-          break;
-        case "size":
-          valueA = a.file.size;
-          valueB = b.file.size;
-          break;
-        default:
-          return 0;
-      }
+			switch (sortBy) {
+				case "name":
+					valueA = a.name.toLowerCase();
+					valueB = b.name.toLowerCase();
+					break;
+				case "type":
+					valueA = a.type;
+					valueB = b.type;
+					break;
+				case "duration":
+					valueA = a.duration || 0;
+					valueB = b.duration || 0;
+					break;
+				case "size":
+					valueA = a.file.size;
+					valueB = b.file.size;
+					break;
+				default:
+					return 0;
+			}
 
-      if (valueA < valueB) return sortOrder === "asc" ? -1 : 1;
-      if (valueA > valueB) return sortOrder === "asc" ? 1 : -1;
-      return 0;
-    });
+			if (valueA < valueB) return sortOrder === "asc" ? -1 : 1;
+			if (valueA > valueB) return sortOrder === "asc" ? 1 : -1;
+			return 0;
+		});
 
-    return filtered;
-  }, [mediaFiles, sortBy, sortOrder]);
+		return filtered;
+	}, [mediaFiles, sortBy, sortOrder]);
 
-  const previewComponents = useMemo(() => {
-    const previews = new Map<string, React.ReactNode>();
+	const previewComponents = useMemo(() => {
+		const previews = new Map<string, React.ReactNode>();
 
-    filteredMediaItems.forEach((item) => {
-      previews.set(item.id, <MediaPreview item={item} />);
-    });
+		filteredMediaItems.forEach((item) => {
+			previews.set(item.id, <MediaPreview item={item} />);
+			previews.set(
+				`compact-${item.id}`,
+				<MediaPreview item={item} variant="compact" />,
+			);
+		});
 
-    return previews;
-  }, [filteredMediaItems]);
+		return previews;
+	}, [filteredMediaItems]);
 
-  const renderPreview = (item: MediaAsset) => previewComponents.get(item.id);
+	const renderPreview = (item: MediaAsset) => previewComponents.get(item.id);
+	const renderCompactPreview = (item: MediaAsset) =>
+		previewComponents.get(`compact-${item.id}`);
 
-  return (
-    <>
-      <input {...fileInputProps} />
+	return (
+		<>
+			<input {...fileInputProps} />
 
-      <div
-        className={`relative flex h-full flex-col gap-1 transition-colors ${isDragOver ? "bg-accent/30" : ""}`}
-        {...dragProps}
-      >
-        <div className="bg-panel p-3 pb-2">
-          <div className="flex items-center gap-2">
-            <Button
-              variant="foreground"
-              onClick={openFilePicker}
-              disabled={isProcessing}
-              className="w-full"
-            >
-              {isProcessing ? (
-                <Loader2 className="animate-spin" />
-              ) : (
-                <CloudUpload />
-              )}
-              <span>Upload</span>
-            </Button>
-            <div className="flex items-center gap-0">
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <Button
-                      size="icon"
-                      variant="text"
-                      onClick={() =>
-                        setMediaViewMode(
-                          mediaViewMode === "grid" ? "list" : "grid",
-                        )
-                      }
-                      disabled={isProcessing}
-                      className="items-center justify-center"
-                    >
-                      {mediaViewMode === "grid" ? (
-                        <List strokeWidth={1.5} className="!size-[1.05rem]" />
-                      ) : (
-                        <Grid2X2
-                          strokeWidth={1.5}
-                          className="!size-[1.05rem]"
-                        />
-                      )}
-                    </Button>
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    <p>
-                      {mediaViewMode === "grid"
-                        ? "Switch to list view"
-                        : "Switch to grid view"}
-                    </p>
-                  </TooltipContent>
-                  <Tooltip>
-                    <DropdownMenu>
-                      <TooltipTrigger asChild>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            size="icon"
-                            variant="text"
-                            disabled={isProcessing}
-                            className="items-center justify-center"
-                          >
-                            <ArrowDown01
-                              strokeWidth={1.5}
-                              className="!size-[1.05rem]"
-                            />
-                          </Button>
-                        </DropdownMenuTrigger>
-                      </TooltipTrigger>
-                      <DropdownMenuContent align="end">
-                        <SortMenuItem
-                          label="Name"
-                          sortKey="name"
-                          currentSortBy={sortBy}
-                          currentSortOrder={sortOrder}
-                          onSort={({ key }) => {
-                            if (sortBy === key) {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc",
-                              );
-                            } else {
-                              setSortBy(key);
-                              setSortOrder("asc");
-                            }
-                          }}
-                        />
-                        <SortMenuItem
-                          label="Type"
-                          sortKey="type"
-                          currentSortBy={sortBy}
-                          currentSortOrder={sortOrder}
-                          onSort={({ key }) => {
-                            if (sortBy === key) {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc",
-                              );
-                            } else {
-                              setSortBy(key);
-                              setSortOrder("asc");
-                            }
-                          }}
-                        />
-                        <SortMenuItem
-                          label="Duration"
-                          sortKey="duration"
-                          currentSortBy={sortBy}
-                          currentSortOrder={sortOrder}
-                          onSort={({ key }) => {
-                            if (sortBy === key) {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc",
-                              );
-                            } else {
-                              setSortBy(key);
-                              setSortOrder("asc");
-                            }
-                          }}
-                        />
-                        <SortMenuItem
-                          label="File size"
-                          sortKey="size"
-                          currentSortBy={sortBy}
-                          currentSortOrder={sortOrder}
-                          onSort={({ key }) => {
-                            if (sortBy === key) {
-                              setSortOrder(
-                                sortOrder === "asc" ? "desc" : "asc",
-                              );
-                            } else {
-                              setSortBy(key);
-                              setSortOrder("asc");
-                            }
-                          }}
-                        />
-                      </DropdownMenuContent>
-                    </DropdownMenu>
-                    <TooltipContent>
-                      <p>
-                        Sort by {sortBy} (
-                        {sortOrder === "asc" ? "ascending" : "descending"})
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </Tooltip>
-              </TooltipProvider>
-            </div>
-          </div>
-        </div>
+			<div
+				className={`relative flex h-full flex-col gap-1 transition-colors ${isDragOver ? "bg-accent/30" : ""}`}
+				{...dragProps}
+			>
+				<div className="bg-panel p-3 pb-2">
+					<div className="flex items-center gap-2">
+						<Button
+							variant="foreground"
+							onClick={openFilePicker}
+							disabled={isProcessing}
+							className="w-full"
+						>
+							{isProcessing ? (
+								<Loader2 className="animate-spin" />
+							) : (
+								<CloudUpload />
+							)}
+							<span>Upload</span>
+						</Button>
+						<div className="flex items-center gap-0">
+							<TooltipProvider>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<Button
+											size="icon"
+											variant="text"
+											onClick={() =>
+												setMediaViewMode(
+													mediaViewMode === "grid" ? "list" : "grid",
+												)
+											}
+											disabled={isProcessing}
+											className="items-center justify-center"
+										>
+											{mediaViewMode === "grid" ? (
+												<List strokeWidth={1.5} className="!size-[1.05rem]" />
+											) : (
+												<Grid2X2
+													strokeWidth={1.5}
+													className="!size-[1.05rem]"
+												/>
+											)}
+										</Button>
+									</TooltipTrigger>
+									<TooltipContent>
+										<p>
+											{mediaViewMode === "grid"
+												? "Switch to list view"
+												: "Switch to grid view"}
+										</p>
+									</TooltipContent>
+									<Tooltip>
+										<DropdownMenu>
+											<TooltipTrigger asChild>
+												<DropdownMenuTrigger asChild>
+													<Button
+														size="icon"
+														variant="text"
+														disabled={isProcessing}
+														className="items-center justify-center"
+													>
+														<ArrowDown01
+															strokeWidth={1.5}
+															className="!size-[1.05rem]"
+														/>
+													</Button>
+												</DropdownMenuTrigger>
+											</TooltipTrigger>
+											<DropdownMenuContent align="end">
+												<SortMenuItem
+													label="Name"
+													sortKey="name"
+													currentSortBy={sortBy}
+													currentSortOrder={sortOrder}
+													onSort={({ key }) => {
+														if (sortBy === key) {
+															setSortOrder(
+																sortOrder === "asc" ? "desc" : "asc",
+															);
+														} else {
+															setSortBy(key);
+															setSortOrder("asc");
+														}
+													}}
+												/>
+												<SortMenuItem
+													label="Type"
+													sortKey="type"
+													currentSortBy={sortBy}
+													currentSortOrder={sortOrder}
+													onSort={({ key }) => {
+														if (sortBy === key) {
+															setSortOrder(
+																sortOrder === "asc" ? "desc" : "asc",
+															);
+														} else {
+															setSortBy(key);
+															setSortOrder("asc");
+														}
+													}}
+												/>
+												<SortMenuItem
+													label="Duration"
+													sortKey="duration"
+													currentSortBy={sortBy}
+													currentSortOrder={sortOrder}
+													onSort={({ key }) => {
+														if (sortBy === key) {
+															setSortOrder(
+																sortOrder === "asc" ? "desc" : "asc",
+															);
+														} else {
+															setSortBy(key);
+															setSortOrder("asc");
+														}
+													}}
+												/>
+												<SortMenuItem
+													label="File size"
+													sortKey="size"
+													currentSortBy={sortBy}
+													currentSortOrder={sortOrder}
+													onSort={({ key }) => {
+														if (sortBy === key) {
+															setSortOrder(
+																sortOrder === "asc" ? "desc" : "asc",
+															);
+														} else {
+															setSortBy(key);
+															setSortOrder("asc");
+														}
+													}}
+												/>
+											</DropdownMenuContent>
+										</DropdownMenu>
+										<TooltipContent>
+											<p>
+												Sort by {sortBy} (
+												{sortOrder === "asc" ? "ascending" : "descending"})
+											</p>
+										</TooltipContent>
+									</Tooltip>
+								</Tooltip>
+							</TooltipProvider>
+						</div>
+					</div>
+				</div>
 
-        <div className="scrollbar-thin h-full w-full overflow-y-auto pt-1">
-          <div className="w-full flex-1 p-3 pt-0">
-            {isDragOver || filteredMediaItems.length === 0 ? (
-              <MediaDragOverlay
-                isVisible={true}
-                isProcessing={isProcessing}
-                progress={progress}
-                onClick={openFilePicker}
-                isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
-              />
-            ) : mediaViewMode === "grid" ? (
-              <GridView
-                items={filteredMediaItems}
-                renderPreview={renderPreview}
-                onRemove={handleRemove}
-                onAddToTimeline={addElementAtTime}
-                highlightedId={highlightedId}
-                registerElement={registerElement}
-              />
-            ) : (
-              <ListView
-                items={filteredMediaItems}
-                renderPreview={renderPreview}
-                onRemove={handleRemove}
-                onAddToTimeline={addElementAtTime}
-                highlightedId={highlightedId}
-                registerElement={registerElement}
-              />
-            )}
-          </div>
-        </div>
-      </div>
-    </>
-  );
+				<div className="scrollbar-thin h-full w-full overflow-y-auto pt-1">
+					<div className="w-full flex-1 p-3 pt-0">
+						{isDragOver || filteredMediaItems.length === 0 ? (
+							<MediaDragOverlay
+								isVisible={true}
+								isProcessing={isProcessing}
+								progress={progress}
+								onClick={openFilePicker}
+							/>
+						) : mediaViewMode === "grid" ? (
+							<GridView
+								items={filteredMediaItems}
+								renderPreview={renderPreview}
+								onRemove={handleRemove}
+								onAddToTimeline={addElementAtTime}
+								highlightedId={highlightedId}
+								registerElement={registerElement}
+							/>
+						) : (
+							<ListView
+								items={filteredMediaItems}
+								renderPreview={renderCompactPreview}
+								onRemove={handleRemove}
+								onAddToTimeline={addElementAtTime}
+								highlightedId={highlightedId}
+								registerElement={registerElement}
+							/>
+						)}
+					</div>
+				</div>
+			</div>
+		</>
+	);
 }
 
 function MediaItemWithContextMenu({
-  item,
-  children,
-  onRemove,
+	item,
+	children,
+	onRemove,
 }: {
-  item: MediaAsset;
-  children: React.ReactNode;
-  onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+	item: MediaAsset;
+	children: React.ReactNode;
+	onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
 }) {
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger>{children}</ContextMenuTrigger>
-      <ContextMenuContent>
-        <ContextMenuItem>Export clips</ContextMenuItem>
-        <ContextMenuItem
-          variant="destructive"
-          onClick={(event) => onRemove({ event, id: item.id })}
-        >
-          Delete
-        </ContextMenuItem>
-      </ContextMenuContent>
-    </ContextMenu>
-  );
+	return (
+		<ContextMenu>
+			<ContextMenuTrigger>{children}</ContextMenuTrigger>
+			<ContextMenuContent>
+				<ContextMenuItem>Export clips</ContextMenuItem>
+				<ContextMenuItem
+					variant="destructive"
+					onClick={(event) => onRemove({ event, id: item.id })}
+				>
+					Delete
+				</ContextMenuItem>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
 }
 
 function GridView({
-  items,
-  renderPreview,
-  onRemove,
-  onAddToTimeline,
-  highlightedId,
-  registerElement,
+	items,
+	renderPreview,
+	onRemove,
+	onAddToTimeline,
+	highlightedId,
+	registerElement,
 }: {
-  items: MediaAsset[];
-  renderPreview: (item: MediaAsset) => React.ReactNode;
-  onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
-  onAddToTimeline: ({
-    asset,
-    startTime,
-  }: {
-    asset: MediaAsset;
-    startTime: number;
-  }) => boolean;
-  highlightedId: string | null;
-  registerElement: (id: string, element: HTMLElement | null) => void;
+	items: MediaAsset[];
+	renderPreview: (item: MediaAsset) => React.ReactNode;
+	onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+	onAddToTimeline: ({
+		asset,
+		startTime,
+	}: {
+		asset: MediaAsset;
+		startTime: number;
+	}) => boolean;
+	highlightedId: string | null;
+	registerElement: (id: string, element: HTMLElement | null) => void;
 }) {
-  return (
-    <div
-      className="grid gap-2"
-      style={{
-        gridTemplateColumns: "repeat(auto-fill, 160px)",
-      }}
-    >
-      {items.map((item) => (
-        <div key={item.id} ref={(el) => registerElement(item.id, el)}>
-          <MediaItemWithContextMenu item={item} onRemove={onRemove}>
-            <DraggableItem
-              name={item.name}
-              preview={renderPreview(item)}
-              dragData={{
-                id: item.id,
-                type: "media",
-                mediaType: item.type,
-                name: item.name,
-              }}
-              shouldShowPlusOnDrag={false}
-              onAddToTimeline={({ currentTime }) =>
-                onAddToTimeline({ asset: item, startTime: currentTime })
-              }
-              isRounded={false}
-              variant="card"
-              isHighlighted={highlightedId === item.id}
-            />
-          </MediaItemWithContextMenu>
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div
+			className="grid gap-2"
+			style={{
+				gridTemplateColumns: "repeat(auto-fill, 160px)",
+			}}
+		>
+			{items.map((item) => (
+				<div key={item.id} ref={(el) => registerElement(item.id, el)}>
+					<MediaItemWithContextMenu item={item} onRemove={onRemove}>
+						<DraggableItem
+							name={item.name}
+							preview={renderPreview(item)}
+							dragData={{
+								id: item.id,
+								type: "media",
+								mediaType: item.type,
+								name: item.name,
+							}}
+							shouldShowPlusOnDrag={false}
+							onAddToTimeline={({ currentTime }) =>
+								onAddToTimeline({ asset: item, startTime: currentTime })
+							}
+							isRounded={false}
+							variant="card"
+							isHighlighted={highlightedId === item.id}
+						/>
+					</MediaItemWithContextMenu>
+				</div>
+			))}
+		</div>
+	);
 }
 
 function ListView({
-  items,
-  renderPreview,
-  onRemove,
-  onAddToTimeline,
-  highlightedId,
-  registerElement,
+	items,
+	renderPreview,
+	onRemove,
+	onAddToTimeline,
+	highlightedId,
+	registerElement,
 }: {
-  items: MediaAsset[];
-  renderPreview: (item: MediaAsset) => React.ReactNode;
-  onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
-  onAddToTimeline: ({
-    asset,
-    startTime,
-  }: {
-    asset: MediaAsset;
-    startTime: number;
-  }) => boolean;
-  highlightedId: string | null;
-  registerElement: (id: string, element: HTMLElement | null) => void;
+	items: MediaAsset[];
+	renderPreview: (item: MediaAsset) => React.ReactNode;
+	onRemove: ({ event, id }: { event: React.MouseEvent; id: string }) => void;
+	onAddToTimeline: ({
+		asset,
+		startTime,
+	}: {
+		asset: MediaAsset;
+		startTime: number;
+	}) => boolean;
+	highlightedId: string | null;
+	registerElement: (id: string, element: HTMLElement | null) => void;
 }) {
-  return (
-    <div className="space-y-1">
-      {items.map((item) => (
-        <div key={item.id} ref={(el) => registerElement(item.id, el)}>
-          <MediaItemWithContextMenu item={item} onRemove={onRemove}>
-            <DraggableItem
-              name={item.name}
-              preview={renderPreview(item)}
-              dragData={{
-                id: item.id,
-                type: "media",
-                mediaType: item.type,
-                name: item.name,
-              }}
-              shouldShowPlusOnDrag={false}
-              onAddToTimeline={({ currentTime }) =>
-                onAddToTimeline({ asset: item, startTime: currentTime })
-              }
-              variant="compact"
-              isHighlighted={highlightedId === item.id}
-            />
-          </MediaItemWithContextMenu>
-        </div>
-      ))}
-    </div>
-  );
+	return (
+		<div className="space-y-1">
+			{items.map((item) => (
+				<div key={item.id} ref={(el) => registerElement(item.id, el)}>
+					<MediaItemWithContextMenu item={item} onRemove={onRemove}>
+						<DraggableItem
+							name={item.name}
+							preview={renderPreview(item)}
+							dragData={{
+								id: item.id,
+								type: "media",
+								mediaType: item.type,
+								name: item.name,
+							}}
+							shouldShowPlusOnDrag={false}
+							onAddToTimeline={({ currentTime }) =>
+								onAddToTimeline({ asset: item, startTime: currentTime })
+							}
+							variant="compact"
+							isHighlighted={highlightedId === item.id}
+						/>
+					</MediaItemWithContextMenu>
+				</div>
+			))}
+		</div>
+	);
 }
 
 const formatDuration = ({ duration }: { duration: number }) => {
-  const min = Math.floor(duration / 60);
-  const sec = Math.floor(duration % 60);
-  return `${min}:${sec.toString().padStart(2, "0")}`;
+	const min = Math.floor(duration / 60);
+	const sec = Math.floor(duration % 60);
+	return `${min}:${sec.toString().padStart(2, "0")}`;
 };
 
 function MediaDurationBadge({ duration }: { duration?: number }) {
-  if (!duration) return null;
+	if (!duration) return null;
 
-  return (
-    <div className="absolute right-1 bottom-1 rounded bg-black/70 px-1 text-xs text-white">
-      {formatDuration({ duration })}
-    </div>
-  );
+	return (
+		<div className="absolute right-1 bottom-1 rounded bg-black/70 px-1 text-xs text-white">
+			{formatDuration({ duration })}
+		</div>
+	);
 }
 
 function MediaDurationLabel({ duration }: { duration?: number }) {
-  if (!duration) return null;
+	if (!duration) return null;
 
-  return (
-    <span className="text-xs opacity-70">{formatDuration({ duration })}</span>
-  );
+	return (
+		<span className="text-xs opacity-70">{formatDuration({ duration })}</span>
+	);
 }
 
 function MediaTypePlaceholder({
-  icon: Icon,
-  label,
-  duration,
-  variant,
+	icon: Icon,
+	label,
+	duration,
+	variant,
 }: {
-  icon: LucideIcon;
-  label: string;
-  duration?: number;
-  variant: "muted" | "bordered";
+	icon: LucideIcon;
+	label: string;
+	duration?: number;
+	variant: "muted" | "bordered";
 }) {
-  const iconClassName = cn("size-6", variant === "bordered" && "mb-1");
+	const iconClassName = cn("size-6", variant === "bordered" && "mb-1");
 
-  return (
-    <div
-      className={cn(
-        "text-muted-foreground flex size-full flex-col items-center justify-center rounded",
-        variant === "muted" ? "bg-muted/30" : "border",
-      )}
-    >
-      <Icon className={iconClassName} aria-hidden="true" />
-      <span className="text-xs">{label}</span>
-      <MediaDurationLabel duration={duration} />
-    </div>
-  );
+	return (
+		<div
+			className={cn(
+				"text-muted-foreground flex size-full flex-col items-center justify-center rounded",
+				variant === "muted" ? "bg-muted/30" : "border",
+			)}
+		>
+			<Icon className={iconClassName} aria-hidden="true" />
+			<span className="text-xs">{label}</span>
+			<MediaDurationLabel duration={duration} />
+		</div>
+	);
 }
 
-function MediaPreview({ item }: { item: MediaAsset }) {
-  if (item.type === "image") {
-    return (
-      <div className="flex size-full items-center justify-center">
-        <img
-          src={item.url}
-          alt={item.name}
-          className="max-h-full w-full object-cover"
-          loading="lazy"
-        />
-      </div>
-    );
-  }
+function MediaPreview({
+	item,
+	variant = "grid",
+}: {
+	item: MediaAsset;
+	variant?: "grid" | "compact";
+}) {
+	const shouldShowVideoOverlay = variant === "grid";
+	const shouldShowDurationBadge = variant === "grid";
 
-  if (item.type === "video") {
-    if (item.thumbnailUrl) {
-      return (
-        <div className="relative size-full">
-          <img
-            src={item.thumbnailUrl}
-            alt={item.name}
-            className="size-full rounded object-cover"
-            loading="lazy"
-          />
-          <div className="absolute inset-0 flex items-center justify-center rounded bg-black/20">
-            <Video className="size-6 text-white drop-shadow-md" />
-          </div>
-          <MediaDurationBadge duration={item.duration} />
-        </div>
-      );
-    }
+	if (item.type === "image") {
+		return (
+			<div className="flex size-full items-center justify-center">
+				<Image
+					src={item.url ?? ""}
+					alt={item.name}
+					className="max-h-full w-full object-cover"
+					loading="lazy"
+					width={item.width}
+					height={item.height}
+					unoptimized
+				/>
+			</div>
+		);
+	}
 
-    return (
-      <MediaTypePlaceholder
-        icon={Video}
-        label="Video"
-        duration={item.duration}
-        variant="muted"
-      />
-    );
-  }
+	if (item.type === "video") {
+		if (item.thumbnailUrl) {
+			return (
+				<div className="relative size-full">
+					<Image
+						src={item.thumbnailUrl}
+						alt={item.name}
+						className="size-full rounded object-cover"
+						loading="lazy"
+						unoptimized
+					/>
+					{shouldShowVideoOverlay ? (
+						<div className="absolute inset-0 flex items-center justify-center rounded bg-black/20">
+							<Video className="size-6 text-white drop-shadow-md" />
+						</div>
+					) : null}
+					{shouldShowDurationBadge ? (
+						<MediaDurationBadge duration={item.duration} />
+					) : null}
+				</div>
+			);
+		}
 
-  if (item.type === "audio") {
-    return (
-      <MediaTypePlaceholder
-        icon={Music}
-        label="Audio"
-        duration={item.duration}
-        variant="bordered"
-      />
-    );
-  }
+		return (
+			<MediaTypePlaceholder
+				icon={Video}
+				label="Video"
+				duration={item.duration}
+				variant="muted"
+			/>
+		);
+	}
 
-  return <MediaTypePlaceholder icon={Image} label="Unknown" variant="muted" />;
+	if (item.type === "audio") {
+		return (
+			<MediaTypePlaceholder
+				icon={Music}
+				label="Audio"
+				duration={item.duration}
+				variant="bordered"
+			/>
+		);
+	}
+
+	return (
+		<MediaTypePlaceholder icon={ImageIcon} label="Unknown" variant="muted" />
+	);
 }
 
 function SortMenuItem({
-  label,
-  sortKey,
-  currentSortBy,
-  currentSortOrder,
-  onSort,
+	label,
+	sortKey,
+	currentSortBy,
+	currentSortOrder,
+	onSort,
 }: {
-  label: string;
-  sortKey: "name" | "type" | "duration" | "size";
-  currentSortBy: string;
-  currentSortOrder: "asc" | "desc";
-  onSort: ({ key }: { key: "name" | "type" | "duration" | "size" }) => void;
+	label: string;
+	sortKey: "name" | "type" | "duration" | "size";
+	currentSortBy: string;
+	currentSortOrder: "asc" | "desc";
+	onSort: ({ key }: { key: "name" | "type" | "duration" | "size" }) => void;
 }) {
-  const isActive = currentSortBy === sortKey;
-  const arrow = isActive ? (currentSortOrder === "asc" ? "↑" : "↓") : "";
+	const isActive = currentSortBy === sortKey;
+	const arrow = isActive ? (currentSortOrder === "asc" ? "↑" : "↓") : "";
 
-  return (
-    <DropdownMenuItem onClick={() => onSort({ key: sortKey })}>
-      {label} {arrow}
-    </DropdownMenuItem>
-  );
+	return (
+		<DropdownMenuItem onClick={() => onSort({ key: sortKey })}>
+			{label} {arrow}
+		</DropdownMenuItem>
+	);
 }
 
 function createElementFromMedia({
-  asset,
-  startTime,
+	asset,
+	startTime,
 }: {
-  asset: MediaAsset;
-  startTime: number;
+	asset: MediaAsset;
+	startTime: number;
 }): CreateTimelineElement {
-  const duration =
-    asset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+	const duration =
+		asset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
 
-  switch (asset.type) {
-    case "video":
-      return {
-        type: "video",
-        name: asset.name,
-        mediaId: asset.id,
-        startTime,
-        duration,
-        trimStart: 0,
-        trimEnd: 0,
-        muted: false,
-        hidden: false,
-        transform: { scale: 1, position: { x: 0, y: 0 }, rotate: 0 },
-        opacity: 1,
-      };
-    case "image":
-      return {
-        type: "image",
-        name: asset.name,
-        mediaId: asset.id,
-        startTime,
-        duration,
-        trimStart: 0,
-        trimEnd: 0,
-        hidden: false,
-        transform: { scale: 1, position: { x: 0, y: 0 }, rotate: 0 },
-        opacity: 1,
-      };
-    case "audio":
-      return {
-        type: "audio",
-        sourceType: "upload",
-        name: asset.name,
-        mediaId: asset.id,
-        startTime,
-        duration,
-        trimStart: 0,
-        trimEnd: 0,
-        volume: 1,
-        muted: false,
-      };
-    default:
-      throw new Error(`Unsupported media type: ${asset.type}`);
-  }
+	switch (asset.type) {
+		case "video":
+			return {
+				type: "video",
+				name: asset.name,
+				mediaId: asset.id,
+				startTime,
+				duration,
+				trimStart: 0,
+				trimEnd: 0,
+				muted: false,
+				hidden: false,
+				transform: { scale: 1, position: { x: 0, y: 0 }, rotate: 0 },
+				opacity: 1,
+			};
+		case "image":
+			return {
+				type: "image",
+				name: asset.name,
+				mediaId: asset.id,
+				startTime,
+				duration,
+				trimStart: 0,
+				trimEnd: 0,
+				hidden: false,
+				transform: { scale: 1, position: { x: 0, y: 0 }, rotate: 0 },
+				opacity: 1,
+			};
+		case "audio":
+			return {
+				type: "audio",
+				sourceType: "upload",
+				name: asset.name,
+				mediaId: asset.id,
+				startTime,
+				duration,
+				trimStart: 0,
+				trimEnd: 0,
+				volume: 1,
+				muted: false,
+			};
+		default:
+			throw new Error(`Unsupported media type: ${asset.type}`);
+	}
 }
diff --git a/apps/web/src/components/editor/assets-panel/views/settings.tsx b/apps/web/src/components/editor/assets-panel/views/settings.tsx
index c4dbd33d..fc88023d 100644
--- a/apps/web/src/components/editor/assets-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/assets-panel/views/settings.tsx
@@ -1,64 +1,64 @@
 "use client";
 
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+import { PipetteIcon } from "lucide-react";
+import Image from "next/image";
+import { memo, useCallback, useMemo } from "react";
 import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
 import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
-  PropertyGroup,
-} from "../../properties-panel/property-item";
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from "@/components/ui/select";
 import {
-  FPS_PRESETS,
-  BLUR_INTENSITY_PRESETS,
-  DEFAULT_BLUR_INTENSITY,
-  DEFAULT_COLOR,
+	BLUR_INTENSITY_PRESETS,
+	DEFAULT_BLUR_INTENSITY,
+	DEFAULT_COLOR,
+	FPS_PRESETS,
 } from "@/constants/project-constants";
-import { useEditorStore } from "@/stores/editor-store";
-import { dimensionToAspectRatio } from "@/utils/geometry";
-import Image from "next/image";
-import { cn } from "@/utils/ui";
-import { colors } from "@/data/colors/solid";
 import { patternCraftGradients } from "@/data/colors/pattern-craft";
-import { PipetteIcon } from "lucide-react";
-import { useMemo, memo, useCallback } from "react";
+import { colors } from "@/data/colors/solid";
 import { syntaxUIGradients } from "@/data/colors/syntax-ui";
 import { useEditor } from "@/hooks/use-editor";
+import { useEditorStore } from "@/stores/editor-store";
 import type { TProject } from "@/types/project";
+import { dimensionToAspectRatio } from "@/utils/geometry";
+import { cn } from "@/utils/ui";
+import {
+	PropertyGroup,
+	PropertyItem,
+	PropertyItemLabel,
+	PropertyItemValue,
+} from "../../properties-panel/property-item";
 
 export function SettingsView() {
-  return <ProjectSettingsTabs />;
+	return <ProjectSettingsTabs />;
 }
 
 function ProjectSettingsTabs() {
-  return (
-    <BaseView
-      defaultTab="project-info"
-      tabs={[
-        {
-          value: "project-info",
-          label: "Project info",
-          content: (
-            <div className="p-5">
-              <ProjectInfoView />
-            </div>
-          ),
-        },
-        {
-          value: "background",
-          label: "Background",
-          content: (
-            <div className="flex h-full flex-col justify-between">
-              <div className="flex-1 p-5">
-                <BackgroundView />
-              </div>
-              {/* <div className="bg-panel/85 sticky -bottom-0 flex flex-col backdrop-blur-lg">
+	return (
+		<BaseView
+			defaultTab="project-info"
+			tabs={[
+				{
+					value: "project-info",
+					label: "Project info",
+					content: (
+						<div className="p-5">
+							<ProjectInfoView />
+						</div>
+					),
+				},
+				{
+					value: "background",
+					label: "Background",
+					content: (
+						<div className="flex h-full flex-col justify-between">
+							<div className="flex-1 p-5">
+								<BackgroundView />
+							</div>
+							{/* <div className="bg-panel/85 sticky -bottom-0 flex flex-col backdrop-blur-lg">
                 <Separator />
                 <Button className="text-muted-foreground hover:text-foreground/85 h-auto w-fit !bg-transparent p-5 py-4 text-xs shadow-none">
                   Custom background
@@ -66,324 +66,328 @@ function ProjectSettingsTabs() {
                 </Button>
               </div> */}
 
-              {/* another ui */}
-              {/* <div className="flex flex-col justify-center items-center pb-5 sticky bottom-0">
+							{/* another ui */}
+							{/* <div className="flex flex-col justify-center items-center pb-5 sticky bottom-0">
                 <Button className="w-fit h-auto gap-1.5 px-3.5 py-1.5 bg-foreground hover:bg-foreground/85 text-background rounded-full">
                   <span className="text-sm">Custom</span>
                   <PlusIcon className="" />
                 </Button>
               </div> */}
-            </div>
-          ),
-        },
-      ]}
-      className="flex h-full flex-col justify-between p-0"
-    />
-  );
+						</div>
+					),
+				},
+			]}
+			className="flex h-full flex-col justify-between p-0"
+		/>
+	);
 }
 
 function getCurrentCanvasSize({ activeProject }: { activeProject: TProject }) {
-  const { canvasSize } = activeProject.settings;
+	const { canvasSize } = activeProject.settings;
 
-  return {
-    width: canvasSize.width,
-    height: canvasSize.height,
-  };
+	return {
+		width: canvasSize.width,
+		height: canvasSize.height,
+	};
 }
 
 function ProjectInfoView() {
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
-  const { canvasPresets } = useEditorStore();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const { canvasPresets } = useEditorStore();
 
-  const findPresetIndexByAspectRatio = ({
-    presets,
-    targetAspectRatio,
-  }: {
-    presets: Array<{ width: number; height: number }>;
-    targetAspectRatio: string;
-  }) => {
-    for (let index = 0; index < presets.length; index++) {
-      const preset = presets[index];
-      const presetAspectRatio = dimensionToAspectRatio({
-        width: preset.width,
-        height: preset.height,
-      });
-      if (presetAspectRatio === targetAspectRatio) {
-        return index;
-      }
-    }
-    return -1;
-  };
+	const findPresetIndexByAspectRatio = ({
+		presets,
+		targetAspectRatio,
+	}: {
+		presets: Array<{ width: number; height: number }>;
+		targetAspectRatio: string;
+	}) => {
+		for (let index = 0; index < presets.length; index++) {
+			const preset = presets[index];
+			const presetAspectRatio = dimensionToAspectRatio({
+				width: preset.width,
+				height: preset.height,
+			});
+			if (presetAspectRatio === targetAspectRatio) {
+				return index;
+			}
+		}
+		return -1;
+	};
 
-  const currentCanvasSize = getCurrentCanvasSize({ activeProject });
-  const currentAspectRatio = dimensionToAspectRatio(currentCanvasSize);
-  const originalCanvasSize = activeProject.settings.originalCanvasSize ?? null;
-  const presetIndex = findPresetIndexByAspectRatio({
-    presets: canvasPresets,
-    targetAspectRatio: currentAspectRatio,
-  });
-  const originalPresetValue = "original";
-  const selectedPresetValue =
-    presetIndex !== -1 ? presetIndex.toString() : originalPresetValue;
+	const currentCanvasSize = getCurrentCanvasSize({ activeProject });
+	const currentAspectRatio = dimensionToAspectRatio(currentCanvasSize);
+	const originalCanvasSize = activeProject.settings.originalCanvasSize ?? null;
+	const presetIndex = findPresetIndexByAspectRatio({
+		presets: canvasPresets,
+		targetAspectRatio: currentAspectRatio,
+	});
+	const originalPresetValue = "original";
+	const selectedPresetValue =
+		presetIndex !== -1 ? presetIndex.toString() : originalPresetValue;
 
-  const handleAspectRatioChange = ({ value }: { value: string }) => {
-    if (value === originalPresetValue) {
-      const canvasSize = originalCanvasSize ?? currentCanvasSize;
-      editor.project.updateSettings({
-        settings: { canvasSize },
-      });
-      return;
-    }
-    const index = parseInt(value, 10);
-    const preset = canvasPresets[index];
-    if (preset) {
-      editor.project.updateSettings({ settings: { canvasSize: preset } });
-    }
-  };
+	const handleAspectRatioChange = ({ value }: { value: string }) => {
+		if (value === originalPresetValue) {
+			const canvasSize = originalCanvasSize ?? currentCanvasSize;
+			editor.project.updateSettings({
+				settings: { canvasSize },
+			});
+			return;
+		}
+		const index = parseInt(value, 10);
+		const preset = canvasPresets[index];
+		if (preset) {
+			editor.project.updateSettings({ settings: { canvasSize: preset } });
+		}
+	};
 
-  const handleFpsChange = (value: string) => {
-    const fps = parseFloat(value);
-    editor.project.updateSettings({ settings: { fps } });
-  };
+	const handleFpsChange = (value: string) => {
+		const fps = parseFloat(value);
+		editor.project.updateSettings({ settings: { fps } });
+	};
 
-  return (
-    <div className="flex flex-col gap-4">
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Name</PropertyItemLabel>
-        <PropertyItemValue>{activeProject.metadata.name}</PropertyItemValue>
-      </PropertyItem>
+	return (
+		<div className="flex flex-col gap-4">
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Name</PropertyItemLabel>
+				<PropertyItemValue>{activeProject.metadata.name}</PropertyItemValue>
+			</PropertyItem>
 
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Aspect ratio</PropertyItemLabel>
-        <PropertyItemValue>
-          <Select
-            value={selectedPresetValue}
-            onValueChange={(value) => handleAspectRatioChange({ value })}
-          >
-            <SelectTrigger className="bg-panel-accent">
-              <SelectValue placeholder="Select an aspect ratio" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value={originalPresetValue}>Original</SelectItem>
-              {canvasPresets.map((preset, index) => {
-                const label = dimensionToAspectRatio({
-                  width: preset.width,
-                  height: preset.height,
-                });
-                return (
-                  <SelectItem key={label} value={index.toString()}>
-                    {label}
-                  </SelectItem>
-                );
-              })}
-            </SelectContent>
-          </Select>
-        </PropertyItemValue>
-      </PropertyItem>
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Aspect ratio</PropertyItemLabel>
+				<PropertyItemValue>
+					<Select
+						value={selectedPresetValue}
+						onValueChange={(value) => handleAspectRatioChange({ value })}
+					>
+						<SelectTrigger className="bg-panel-accent">
+							<SelectValue placeholder="Select an aspect ratio" />
+						</SelectTrigger>
+						<SelectContent>
+							<SelectItem value={originalPresetValue}>Original</SelectItem>
+							{canvasPresets.map((preset, index) => {
+								const label = dimensionToAspectRatio({
+									width: preset.width,
+									height: preset.height,
+								});
+								return (
+									<SelectItem key={label} value={index.toString()}>
+										{label}
+									</SelectItem>
+								);
+							})}
+						</SelectContent>
+					</Select>
+				</PropertyItemValue>
+			</PropertyItem>
 
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Frame rate</PropertyItemLabel>
-        <PropertyItemValue>
-          <Select
-            value={activeProject.settings.fps.toString()}
-            onValueChange={handleFpsChange}
-          >
-            <SelectTrigger className="bg-panel-accent">
-              <SelectValue placeholder="Select a frame rate" />
-            </SelectTrigger>
-            <SelectContent>
-              {FPS_PRESETS.map((preset) => (
-                <SelectItem key={preset.value} value={preset.value}>
-                  {preset.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </PropertyItemValue>
-      </PropertyItem>
-    </div>
-  );
+			<PropertyItem direction="column">
+				<PropertyItemLabel>Frame rate</PropertyItemLabel>
+				<PropertyItemValue>
+					<Select
+						value={activeProject.settings.fps.toString()}
+						onValueChange={handleFpsChange}
+					>
+						<SelectTrigger className="bg-panel-accent">
+							<SelectValue placeholder="Select a frame rate" />
+						</SelectTrigger>
+						<SelectContent>
+							{FPS_PRESETS.map((preset) => (
+								<SelectItem key={preset.value} value={preset.value}>
+									{preset.label}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</PropertyItemValue>
+			</PropertyItem>
+		</div>
+	);
 }
 
 const BlurPreview = memo(
-  ({
-    blur,
-    isSelected,
-    onSelect,
-  }: {
-    blur: { label: string; value: number };
-    isSelected: boolean;
-    onSelect: () => void;
-  }) => (
-    <div
-      className={cn(
-        "border-foreground/15 hover:border-primary relative aspect-square w-full cursor-pointer overflow-hidden rounded-sm border",
-        isSelected && "border-primary border-2",
-      )}
-      onClick={onSelect}
-    >
-      <Image
-        src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt={`Blur preview ${blur.label}`}
-        fill
-        className="object-cover"
-        style={{ filter: `blur(${blur.value}px)` }}
-        loading="eager"
-      />
-      <div className="absolute right-1 bottom-1 left-1 text-center">
-        <span className="rounded bg-black/50 px-1 text-xs text-white">
-          {blur.label}
-        </span>
-      </div>
-    </div>
-  ),
+	({
+		blur,
+		isSelected,
+		onSelect,
+	}: {
+		blur: { label: string; value: number };
+		isSelected: boolean;
+		onSelect: () => void;
+	}) => (
+		<button
+			className={cn(
+				"border-foreground/15 hover:border-primary relative aspect-square w-full cursor-pointer overflow-hidden rounded-sm border",
+				isSelected && "border-primary border-2",
+			)}
+			onClick={onSelect}
+			type="button"
+			aria-label={`Select ${blur.label} blur`}
+		>
+			<Image
+				src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+				alt={`Blur preview ${blur.label}`}
+				fill
+				className="object-cover"
+				style={{ filter: `blur(${blur.value}px)` }}
+				loading="eager"
+			/>
+			<div className="absolute right-1 bottom-1 left-1 text-center">
+				<span className="rounded bg-black/50 px-1 text-xs text-white">
+					{blur.label}
+				</span>
+			</div>
+		</button>
+	),
 );
 
 BlurPreview.displayName = "BlurPreview";
 
 const BackgroundPreviews = memo(
-  ({
-    backgrounds,
-    currentBackgroundColor,
-    isColorBackground,
-    handleColorSelect,
-    useBackgroundColor = false,
-  }: {
-    backgrounds: string[];
-    currentBackgroundColor: string;
-    isColorBackground: boolean;
-    handleColorSelect: ({ bg }: { bg: string }) => void;
-    useBackgroundColor?: boolean;
-  }) => {
-    return useMemo(
-      () =>
-        backgrounds.map((bg, index) => (
-          <div
-            key={`${index}-${bg}`}
-            className={cn(
-              "border-foreground/15 hover:border-primary aspect-square w-full cursor-pointer rounded-sm border",
-              isColorBackground &&
-                bg === currentBackgroundColor &&
-                "border-primary border-2",
-            )}
-            style={
-              useBackgroundColor
-                ? { backgroundColor: bg }
-                : {
-                    background: bg,
-                    backgroundSize: "cover",
-                    backgroundPosition: "center",
-                    backgroundRepeat: "no-repeat",
-                  }
-            }
-            onClick={() => handleColorSelect({ bg })}
-          />
-        )),
-      [
-        backgrounds,
-        isColorBackground,
-        currentBackgroundColor,
-        handleColorSelect,
-        useBackgroundColor,
-      ],
-    );
-  },
+	({
+		backgrounds,
+		currentBackgroundColor,
+		isColorBackground,
+		handleColorSelect,
+		useBackgroundColor = false,
+	}: {
+		backgrounds: string[];
+		currentBackgroundColor: string;
+		isColorBackground: boolean;
+		handleColorSelect: ({ bg }: { bg: string }) => void;
+		useBackgroundColor?: boolean;
+	}) => {
+		return useMemo(
+			() =>
+				backgrounds.map((bg, index) => (
+					<button
+						key={`${index}-${bg}`}
+						className={cn(
+							"border-foreground/15 hover:border-primary aspect-square w-full cursor-pointer rounded-sm border",
+							isColorBackground &&
+								bg === currentBackgroundColor &&
+								"border-primary border-2",
+						)}
+						style={
+							useBackgroundColor
+								? { backgroundColor: bg }
+								: {
+										background: bg,
+										backgroundSize: "cover",
+										backgroundPosition: "center",
+										backgroundRepeat: "no-repeat",
+									}
+						}
+						onClick={() => handleColorSelect({ bg })}
+						type="button"
+						aria-label={`Select background ${useBackgroundColor ? bg : index + 1}`}
+					/>
+				)),
+			[
+				backgrounds,
+				isColorBackground,
+				currentBackgroundColor,
+				handleColorSelect,
+				useBackgroundColor,
+			],
+		);
+	},
 );
 
 BackgroundPreviews.displayName = "BackgroundPreviews";
 
 function BackgroundView() {
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
-  const blurLevels = useMemo(() => BLUR_INTENSITY_PRESETS, []);
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const blurLevels = useMemo(() => BLUR_INTENSITY_PRESETS, []);
 
-  const handleBlurSelect = useCallback(
-    async ({ blurIntensity }: { blurIntensity: number }) => {
-      await editor.project.updateSettings({
-        settings: { background: { type: "blur", blurIntensity } },
-      });
-    },
-    [editor.project],
-  );
+	const handleBlurSelect = useCallback(
+		async ({ blurIntensity }: { blurIntensity: number }) => {
+			await editor.project.updateSettings({
+				settings: { background: { type: "blur", blurIntensity } },
+			});
+		},
+		[editor.project],
+	);
 
-  const handleColorSelect = useCallback(
-    async ({ color }: { color: string }) => {
-      await editor.project.updateSettings({
-        settings: { background: { type: "color", color } },
-      });
-    },
-    [editor.project],
-  );
+	const handleColorSelect = useCallback(
+		async ({ color }: { color: string }) => {
+			await editor.project.updateSettings({
+				settings: { background: { type: "color", color } },
+			});
+		},
+		[editor.project],
+	);
 
-  const currentBlurIntensity =
-    activeProject.settings.background.type === "blur"
-      ? activeProject.settings.background.blurIntensity
-      : DEFAULT_BLUR_INTENSITY;
+	const currentBlurIntensity =
+		activeProject.settings.background.type === "blur"
+			? activeProject.settings.background.blurIntensity
+			: DEFAULT_BLUR_INTENSITY;
 
-  const currentBackgroundColor =
-    activeProject.settings.background.type === "color"
-      ? activeProject.settings.background.color
-      : DEFAULT_COLOR;
+	const currentBackgroundColor =
+		activeProject.settings.background.type === "color"
+			? activeProject.settings.background.color
+			: DEFAULT_COLOR;
 
-  const isBlurBackground = activeProject.settings.background.type === "blur";
-  const isColorBackground = activeProject.settings.background.type === "color";
+	const isBlurBackground = activeProject.settings.background.type === "blur";
+	const isColorBackground = activeProject.settings.background.type === "color";
 
-  const blurPreviews = useMemo(
-    () =>
-      blurLevels.map((blur) => (
-        <BlurPreview
-          key={blur.value}
-          blur={blur}
-          isSelected={isBlurBackground && currentBlurIntensity === blur.value}
-          onSelect={() => handleBlurSelect({ blurIntensity: blur.value })}
-        />
-      )),
-    [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect],
-  );
+	const blurPreviews = useMemo(
+		() =>
+			blurLevels.map((blur) => (
+				<BlurPreview
+					key={blur.value}
+					blur={blur}
+					isSelected={isBlurBackground && currentBlurIntensity === blur.value}
+					onSelect={() => handleBlurSelect({ blurIntensity: blur.value })}
+				/>
+			)),
+		[blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect],
+	);
 
-  return (
-    <div className="flex h-full flex-col gap-4">
-      <PropertyGroup title="Blur" defaultExpanded={false}>
-        <div className="grid w-full grid-cols-4 gap-2">{blurPreviews}</div>
-      </PropertyGroup>
+	return (
+		<div className="flex h-full flex-col gap-4">
+			<PropertyGroup title="Blur" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">{blurPreviews}</div>
+			</PropertyGroup>
 
-      <PropertyGroup title="Colors" defaultExpanded={false}>
-        <div className="grid w-full grid-cols-4 gap-2">
-          <div className="border-foreground/15 hover:border-primary flex aspect-square w-full cursor-pointer items-center justify-center rounded-sm border">
-            <PipetteIcon className="size-4" />
-          </div>
-          <BackgroundPreviews
-            backgrounds={colors}
-            currentBackgroundColor={currentBackgroundColor}
-            isColorBackground={isColorBackground}
-            handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
-            useBackgroundColor={true}
-          />
-        </div>
-      </PropertyGroup>
+			<PropertyGroup title="Colors" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">
+					<div className="border-foreground/15 hover:border-primary flex aspect-square w-full cursor-pointer items-center justify-center rounded-sm border">
+						<PipetteIcon className="size-4" />
+					</div>
+					<BackgroundPreviews
+						backgrounds={colors}
+						currentBackgroundColor={currentBackgroundColor}
+						isColorBackground={isColorBackground}
+						handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
+						useBackgroundColor={true}
+					/>
+				</div>
+			</PropertyGroup>
 
-      <PropertyGroup title="Pattern craft" defaultExpanded={false}>
-        <div className="grid w-full grid-cols-4 gap-2">
-          <BackgroundPreviews
-            backgrounds={patternCraftGradients}
-            currentBackgroundColor={currentBackgroundColor}
-            isColorBackground={isColorBackground}
-            handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
-          />
-        </div>
-      </PropertyGroup>
+			<PropertyGroup title="Pattern craft" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">
+					<BackgroundPreviews
+						backgrounds={patternCraftGradients}
+						currentBackgroundColor={currentBackgroundColor}
+						isColorBackground={isColorBackground}
+						handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
+					/>
+				</div>
+			</PropertyGroup>
 
-      <PropertyGroup title="Syntax UI" defaultExpanded={false}>
-        <div className="grid w-full grid-cols-4 gap-2">
-          <BackgroundPreviews
-            backgrounds={syntaxUIGradients}
-            currentBackgroundColor={currentBackgroundColor}
-            isColorBackground={isColorBackground}
-            handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
-          />
-        </div>
-      </PropertyGroup>
-    </div>
-  );
+			<PropertyGroup title="Syntax UI" defaultExpanded={false}>
+				<div className="grid w-full grid-cols-4 gap-2">
+					<BackgroundPreviews
+						backgrounds={syntaxUIGradients}
+						currentBackgroundColor={currentBackgroundColor}
+						isColorBackground={isColorBackground}
+						handleColorSelect={({ bg }) => handleColorSelect({ color: bg })}
+					/>
+				</div>
+			</PropertyGroup>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/views/sounds.tsx b/apps/web/src/components/editor/assets-panel/views/sounds.tsx
index 432e2a50..0cec4a48 100644
--- a/apps/web/src/components/editor/assets-panel/views/sounds.tsx
+++ b/apps/web/src/components/editor/assets-panel/views/sounds.tsx
@@ -1,568 +1,570 @@
 "use client";
 
-import { Input } from "@/components/ui/input";
-import { useState, useMemo, useEffect } from "react";
-import { Separator } from "@/components/ui/separator";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
-  PlayIcon,
-  PauseIcon,
-  HeartIcon,
-  PlusIcon,
-  ListFilter,
+	HeartIcon,
+	ListFilter,
+	PauseIcon,
+	PlayIcon,
+	PlusIcon,
 } from "lucide-react";
-import { useSoundsStore } from "@/stores/sounds-store";
-import { useSoundSearch } from "@/hooks/use-sound-search";
-import type { SoundEffect, SavedSound } from "@/types/sounds";
+import { useEffect, useState } from "react";
 import { Button } from "@/components/ui/button";
 import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuCheckboxItem,
-} from "@/components/ui/dropdown-menu";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "@/components/ui/dialog";
-import { cn } from "@/utils/ui";
+import {
+	DropdownMenu,
+	DropdownMenuCheckboxItem,
+	DropdownMenuContent,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
+import { useSoundSearch } from "@/hooks/use-sound-search";
+import { useSoundsStore } from "@/stores/sounds-store";
+import type { SavedSound, SoundEffect } from "@/types/sounds";
+import { cn } from "@/utils/ui";
 
 export function SoundsView() {
-  return (
-    <div className="flex h-full flex-col">
-      <Tabs defaultValue="sound-effects" className="flex h-full flex-col">
-        <div className="px-3 pt-4 pb-0">
-          <TabsList>
-            <TabsTrigger value="sound-effects">Sound effects</TabsTrigger>
-            <TabsTrigger value="songs">Songs</TabsTrigger>
-            <TabsTrigger value="saved">Saved</TabsTrigger>
-          </TabsList>
-        </div>
-        <Separator className="my-4" />
-        <TabsContent
-          value="sound-effects"
-          className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
-        >
-          <SoundEffectsView />
-        </TabsContent>
-        <TabsContent
-          value="saved"
-          className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
-        >
-          <SavedSoundsView />
-        </TabsContent>
-        <TabsContent
-          value="songs"
-          className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
-        >
-          <SongsView />
-        </TabsContent>
-      </Tabs>
-    </div>
-  );
+	return (
+		<div className="flex h-full flex-col">
+			<Tabs defaultValue="sound-effects" className="flex h-full flex-col">
+				<div className="px-3 pt-4 pb-0">
+					<TabsList>
+						<TabsTrigger value="sound-effects">Sound effects</TabsTrigger>
+						<TabsTrigger value="songs">Songs</TabsTrigger>
+						<TabsTrigger value="saved">Saved</TabsTrigger>
+					</TabsList>
+				</div>
+				<Separator className="my-4" />
+				<TabsContent
+					value="sound-effects"
+					className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
+				>
+					<SoundEffectsView />
+				</TabsContent>
+				<TabsContent
+					value="saved"
+					className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
+				>
+					<SavedSoundsView />
+				</TabsContent>
+				<TabsContent
+					value="songs"
+					className="mt-0 flex min-h-0 flex-1 flex-col p-5 pt-0"
+				>
+					<SongsView />
+				</TabsContent>
+			</Tabs>
+		</div>
+	);
 }
 
 function SoundEffectsView() {
-  const {
-    topSoundEffects,
-    isLoading,
-    searchQuery,
-    setSearchQuery,
-    scrollPosition,
-    setScrollPosition,
-    loadSavedSounds,
-    isSoundSaved,
-    toggleSavedSound,
-    showCommercialOnly,
-    toggleCommercialFilter,
-    hasLoaded,
-    setTopSoundEffects,
-    setLoading,
-    setError,
-    setHasLoaded,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-  } = useSoundsStore();
-  const {
-    results: searchResults,
-    isLoading: isSearching,
-    loadMore,
-    hasNextPage,
-    isLoadingMore,
-  } = useSoundSearch({
-    query: searchQuery,
-    commercialOnly: showCommercialOnly,
-  });
+	const {
+		topSoundEffects,
+		isLoading,
+		searchQuery,
+		setSearchQuery,
+		scrollPosition,
+		setScrollPosition,
+		loadSavedSounds,
+		showCommercialOnly,
+		toggleCommercialFilter,
+		hasLoaded,
+		setTopSoundEffects,
+		setLoading,
+		setError,
+		setHasLoaded,
+		setCurrentPage,
+		setHasNextPage,
+		setTotalCount,
+	} = useSoundsStore();
+	const {
+		results: searchResults,
+		isLoading: isSearching,
+		loadMore,
+		hasNextPage,
+		isLoadingMore,
+	} = useSoundSearch({
+		query: searchQuery,
+		commercialOnly: showCommercialOnly,
+	});
 
-  // Audio playback state
-  const [playingId, setPlayingId] = useState<number | null>(null);
-  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
-    null,
-  );
+	const [playingId, setPlayingId] = useState<number | null>(null);
+	const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+		null,
+	);
 
-  const { scrollAreaRef, handleScroll } = useInfiniteScroll({
-    onLoadMore: loadMore,
-    hasMore: hasNextPage,
-    isLoading: isLoadingMore || isSearching,
-  });
+	const { scrollAreaRef, handleScroll } = useInfiniteScroll({
+		onLoadMore: loadMore,
+		hasMore: hasNextPage,
+		isLoading: isLoadingMore || isSearching,
+	});
 
-  useEffect(() => {
-    loadSavedSounds();
+	useEffect(() => {
+		loadSavedSounds();
+	}, [loadSavedSounds]);
 
-    if (!hasLoaded) {
-      let ignore = false;
+	useEffect(() => {
+		if (hasLoaded) {
+			return;
+		}
 
-      const fetchTopSounds = async () => {
-        try {
-          if (!ignore) {
-            setLoading({ loading: true });
-            setError({ error: null });
-          }
+		let shouldIgnore = false;
 
-          const response = await fetch(
-            "/api/sounds/search?page_size=50&sort=downloads",
-          );
+		const fetchTopSounds = async () => {
+			try {
+				if (!shouldIgnore) {
+					setLoading({ loading: true });
+					setError({ error: null });
+				}
 
-          if (!ignore) {
-            if (!response.ok) {
-              throw new Error(`Failed to fetch: ${response.status}`);
-            }
+				const response = await fetch(
+					"/api/sounds/search?page_size=50&sort=downloads",
+				);
 
-            const data = await response.json();
-            setTopSoundEffects({ sounds: data.results });
-            setHasLoaded({ loaded: true });
+				if (!shouldIgnore) {
+					if (!response.ok) {
+						throw new Error(`Failed to fetch: ${response.status}`);
+					}
 
-            setCurrentPage({ page: 1 });
-            setHasNextPage({ hasNext: !!data.next });
-            setTotalCount({ count: data.count });
-          }
-        } catch (error) {
-          if (!ignore) {
-            console.error("Failed to fetch top sounds:", error);
-            setError({
-              error:
-                error instanceof Error
-                  ? error.message
-                  : "Failed to load sounds",
-            });
-          }
-        } finally {
-          if (!ignore) {
-            setLoading({ loading: false });
-          }
-        }
-      };
+					const data = await response.json();
+					setTopSoundEffects({ sounds: data.results });
+					setHasLoaded({ loaded: true });
 
-      const timeoutId = setTimeout(fetchTopSounds, 100);
+					setCurrentPage({ page: 1 });
+					setHasNextPage({ hasNext: !!data.next });
+					setTotalCount({ count: data.count });
+				}
+			} catch (error) {
+				if (!shouldIgnore) {
+					console.error("Failed to fetch top sounds:", error);
+					setError({
+						error:
+							error instanceof Error ? error.message : "Failed to load sounds",
+					});
+				}
+			} finally {
+				if (!shouldIgnore) {
+					setLoading({ loading: false });
+				}
+			}
+		};
 
-      return () => {
-        clearTimeout(timeoutId);
-        ignore = true;
-      };
-    }
+		const timeoutId = setTimeout(fetchTopSounds, 100, {});
 
-    if (scrollAreaRef.current && scrollPosition > 0) {
-      const timeoutId = setTimeout(() => {
-        scrollAreaRef.current?.scrollTo({ top: scrollPosition });
-      }, 100);
+		return () => {
+			shouldIgnore = true;
+			clearTimeout(timeoutId);
+		};
+	}, [
+		hasLoaded,
+		setTopSoundEffects,
+		setLoading,
+		setError,
+		setHasLoaded,
+		setCurrentPage,
+		setHasNextPage,
+		setTotalCount,
+	]);
 
-      return () => clearTimeout(timeoutId);
-    }
-  }, [
-    hasLoaded,
-    setTopSoundEffects,
-    setLoading,
-    setError,
-    setHasLoaded,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-  ]);
+	useEffect(() => {
+		if (!scrollAreaRef.current || scrollPosition <= 0) {
+			return;
+		}
 
-  const handleScrollWithPosition = (event: React.UIEvent<HTMLDivElement>) => {
-    const { scrollTop } = event.currentTarget;
-    setScrollPosition({ position: scrollTop });
-    handleScroll(event);
-  };
+		const restoreScrollPosition = () => {
+			scrollAreaRef.current?.scrollTo({ top: scrollPosition });
+		};
 
-  const displayedSounds = useMemo(() => {
-    const sounds = searchQuery ? searchResults : topSoundEffects;
-    return sounds;
-  }, [searchQuery, searchResults, topSoundEffects]);
+		const timeoutId = setTimeout(restoreScrollPosition, 100, {});
 
-  const playSound = (sound: SoundEffect) => {
-    if (playingId === sound.id) {
-      audioElement?.pause();
-      setPlayingId(null);
-      return;
-    }
+		return () => clearTimeout(timeoutId);
+	}, [scrollPosition, scrollAreaRef]);
 
-    // Stop previous sound
-    audioElement?.pause();
+	const handleScrollWithPosition = ({
+		currentTarget,
+	}: React.UIEvent<HTMLDivElement>) => {
+		const { scrollTop } = currentTarget;
+		setScrollPosition({ position: scrollTop });
+		handleScroll({ currentTarget } as React.UIEvent<HTMLDivElement>);
+	};
 
-    if (sound.previewUrl) {
-      const audio = new Audio(sound.previewUrl);
-      audio.addEventListener("ended", () => {
-        setPlayingId(null);
-      });
-      audio.addEventListener("error", (e) => {
-        setPlayingId(null);
-      });
-      audio.play().catch((error) => {
-        setPlayingId(null);
-      });
+	const displayedSounds = searchQuery ? searchResults : topSoundEffects;
 
-      setAudioElement(audio);
-      setPlayingId(sound.id);
-    }
-  };
+	const playSound = ({ sound }: { sound: SoundEffect }) => {
+		if (playingId === sound.id) {
+			audioElement?.pause();
+			setPlayingId(null);
+			return;
+		}
 
-  return (
-    <div className="mt-1 flex h-full flex-col gap-5">
-      <div className="flex items-center gap-3">
-        <Input
-          placeholder="Search sound effects"
-          className="bg-panel-accent w-full"
-          containerClassName="w-full"
-          value={searchQuery}
-          onChange={(e) => setSearchQuery({ query: e.target.value })}
-          showClearIcon
-          onClear={() => setSearchQuery({ query: "" })}
-        />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              variant="text"
-              size="icon"
-              className={cn(showCommercialOnly && "text-primary")}
-            >
-              <ListFilter />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-56">
-            <DropdownMenuCheckboxItem
-              checked={showCommercialOnly}
-              onCheckedChange={() => toggleCommercialFilter()}
-            >
-              Show only commercially licensed
-            </DropdownMenuCheckboxItem>
-            <div className="text-muted-foreground px-2 py-1.5 text-xs">
-              {showCommercialOnly
-                ? "Only showing sounds licensed for commercial use"
-                : "Showing all sounds regardless of license"}
-            </div>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      </div>
+		audioElement?.pause();
 
-      <div className="relative h-full overflow-hidden">
-        <ScrollArea
-          className="h-full flex-1"
-          ref={scrollAreaRef}
-          onScrollCapture={handleScrollWithPosition}
-        >
-          <div className="flex flex-col gap-4">
-            {isLoading && !searchQuery && (
-              <div className="text-muted-foreground text-sm">
-                Loading sounds...
-              </div>
-            )}
-            {isSearching && searchQuery && (
-              <div className="text-muted-foreground text-sm">Searching...</div>
-            )}
-            {displayedSounds.map((sound) => (
-              <AudioItem
-                key={sound.id}
-                sound={sound}
-                isPlaying={playingId === sound.id}
-                onPlay={() => playSound(sound)}
-                isSaved={isSoundSaved({ soundId: sound.id })}
-                onToggleSaved={() => toggleSavedSound({ soundEffect: sound })}
-              />
-            ))}
-            {!isLoading && !isSearching && displayedSounds.length === 0 && (
-              <div className="text-muted-foreground text-sm">
-                {searchQuery ? "No sounds found" : "No sounds available"}
-              </div>
-            )}
-            {isLoadingMore && (
-              <div className="text-muted-foreground py-4 text-center text-sm">
-                Loading more sounds...
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
+		if (sound.previewUrl) {
+			const audio = new Audio(sound.previewUrl);
+			audio.addEventListener("ended", () => {
+				setPlayingId(null);
+			});
+			audio.addEventListener("error", () => {
+				setPlayingId(null);
+			});
+			audio.play().catch((error) => {
+				console.error("Failed to play sound preview:", error);
+				setPlayingId(null);
+			});
+
+			setAudioElement(audio);
+			setPlayingId(sound.id);
+		}
+	};
+
+	return (
+		<div className="mt-1 flex h-full flex-col gap-5">
+			<div className="flex items-center gap-3">
+				<Input
+					placeholder="Search sound effects"
+					className="bg-panel-accent w-full"
+					containerClassName="w-full"
+					value={searchQuery}
+					onChange={({ currentTarget }) =>
+						setSearchQuery({ query: currentTarget.value })
+					}
+					showClearIcon
+					onClear={() => setSearchQuery({ query: "" })}
+				/>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button
+							variant="text"
+							size="icon"
+							className={cn(showCommercialOnly && "text-primary")}
+						>
+							<ListFilter />
+						</Button>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-56">
+						<DropdownMenuCheckboxItem
+							checked={showCommercialOnly}
+							onCheckedChange={() => toggleCommercialFilter()}
+						>
+							Show only commercially licensed
+						</DropdownMenuCheckboxItem>
+						<div className="text-muted-foreground px-2 py-1.5 text-xs">
+							{showCommercialOnly
+								? "Only showing sounds licensed for commercial use"
+								: "Showing all sounds regardless of license"}
+						</div>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</div>
+
+			<div className="relative h-full overflow-hidden">
+				<ScrollArea
+					className="h-full flex-1"
+					ref={scrollAreaRef}
+					onScrollCapture={handleScrollWithPosition}
+				>
+					<div className="flex flex-col gap-4">
+						{isLoading && !searchQuery && (
+							<div className="text-muted-foreground text-sm">
+								Loading sounds...
+							</div>
+						)}
+						{isSearching && searchQuery && (
+							<div className="text-muted-foreground text-sm">Searching...</div>
+						)}
+						{displayedSounds.map((sound) => (
+							<AudioItem
+								key={sound.id}
+								sound={sound}
+								isPlaying={playingId === sound.id}
+								onPlay={playSound}
+							/>
+						))}
+						{!isLoading && !isSearching && displayedSounds.length === 0 && (
+							<div className="text-muted-foreground text-sm">
+								{searchQuery ? "No sounds found" : "No sounds available"}
+							</div>
+						)}
+						{isLoadingMore && (
+							<div className="text-muted-foreground py-4 text-center text-sm">
+								Loading more sounds...
+							</div>
+						)}
+					</div>
+				</ScrollArea>
+			</div>
+		</div>
+	);
 }
 
 function SavedSoundsView() {
-  const {
-    savedSounds,
-    isLoadingSavedSounds,
-    savedSoundsError,
-    loadSavedSounds,
-    isSoundSaved,
-    toggleSavedSound,
-    clearSavedSounds,
-  } = useSoundsStore();
+	const {
+		savedSounds,
+		isLoadingSavedSounds,
+		savedSoundsError,
+		loadSavedSounds,
+		clearSavedSounds,
+	} = useSoundsStore();
 
-  // Audio playback state
-  const [playingId, setPlayingId] = useState<number | null>(null);
-  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
-    null,
-  );
+	const [playingId, setPlayingId] = useState<number | null>(null);
+	const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+		null,
+	);
 
-  // Clear confirmation dialog state
-  const [showClearDialog, setShowClearDialog] = useState(false);
+	const [showClearDialog, setShowClearDialog] = useState(false);
 
-  // Load saved sounds when tab becomes active
-  useEffect(() => {
-    loadSavedSounds();
-  }, [loadSavedSounds]);
+	useEffect(() => {
+		loadSavedSounds();
+	}, [loadSavedSounds]);
 
-  const playSound = (sound: SavedSound) => {
-    if (playingId === sound.id) {
-      audioElement?.pause();
-      setPlayingId(null);
-      return;
-    }
+	const playSound = ({ sound }: { sound: SoundEffect }) => {
+		if (playingId === sound.id) {
+			audioElement?.pause();
+			setPlayingId(null);
+			return;
+		}
 
-    // Stop previous sound
-    audioElement?.pause();
+		audioElement?.pause();
 
-    if (sound.previewUrl) {
-      const audio = new Audio(sound.previewUrl);
-      audio.addEventListener("ended", () => {
-        setPlayingId(null);
-      });
-      audio.addEventListener("error", (e) => {
-        setPlayingId(null);
-      });
-      audio.play().catch((error) => {
-        setPlayingId(null);
-      });
+		if (sound.previewUrl) {
+			const audio = new Audio(sound.previewUrl);
+			audio.addEventListener("ended", () => {
+				setPlayingId(null);
+			});
+			audio.addEventListener("error", () => {
+				setPlayingId(null);
+			});
+			audio.play().catch((error) => {
+				console.error("Failed to play sound preview:", error);
+				setPlayingId(null);
+			});
 
-      setAudioElement(audio);
-      setPlayingId(sound.id);
-    }
-  };
+			setAudioElement(audio);
+			setPlayingId(sound.id);
+		}
+	};
 
-  // Convert SavedSound to SoundEffect for compatibility with AudioItem
-  const convertToSoundEffect = (savedSound: SavedSound): SoundEffect => ({
-    id: savedSound.id,
-    name: savedSound.name,
-    description: "",
-    url: "",
-    previewUrl: savedSound.previewUrl,
-    downloadUrl: savedSound.downloadUrl,
-    duration: savedSound.duration,
-    filesize: 0,
-    type: "audio",
-    channels: 0,
-    bitrate: 0,
-    bitdepth: 0,
-    samplerate: 0,
-    username: savedSound.username,
-    tags: savedSound.tags,
-    license: savedSound.license,
-    created: savedSound.savedAt,
-    downloads: 0,
-    rating: 0,
-    ratingCount: 0,
-  });
+	const convertToSoundEffect = ({
+		savedSound,
+	}: {
+		savedSound: SavedSound;
+	}): SoundEffect => ({
+		id: savedSound.id,
+		name: savedSound.name,
+		description: "",
+		url: "",
+		previewUrl: savedSound.previewUrl,
+		downloadUrl: savedSound.downloadUrl,
+		duration: savedSound.duration,
+		filesize: 0,
+		type: "audio",
+		channels: 0,
+		bitrate: 0,
+		bitdepth: 0,
+		samplerate: 0,
+		username: savedSound.username,
+		tags: savedSound.tags,
+		license: savedSound.license,
+		created: savedSound.savedAt,
+		downloads: 0,
+		rating: 0,
+		ratingCount: 0,
+	});
 
-  if (isLoadingSavedSounds) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="text-muted-foreground text-sm">
-          Loading saved sounds...
-        </div>
-      </div>
-    );
-  }
+	if (isLoadingSavedSounds) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<div className="text-muted-foreground text-sm">
+					Loading saved sounds...
+				</div>
+			</div>
+		);
+	}
 
-  if (savedSoundsError) {
-    return (
-      <div className="flex h-full items-center justify-center">
-        <div className="text-destructive text-sm">
-          Error: {savedSoundsError}
-        </div>
-      </div>
-    );
-  }
+	if (savedSoundsError) {
+		return (
+			<div className="flex h-full items-center justify-center">
+				<div className="text-destructive text-sm">
+					Error: {savedSoundsError}
+				</div>
+			</div>
+		);
+	}
 
-  if (savedSounds.length === 0) {
-    return (
-      <div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
-        <HeartIcon
-          className="text-muted-foreground h-10 w-10"
-          strokeWidth={1.5}
-        />
-        <div className="flex flex-col gap-2 text-center">
-          <p className="text-lg font-medium">No saved sounds</p>
-          <p className="text-muted-foreground text-sm text-balance">
-            Click the heart icon on any sound to save it here
-          </p>
-        </div>
-      </div>
-    );
-  }
+	if (savedSounds.length === 0) {
+		return (
+			<div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
+				<HeartIcon
+					className="text-muted-foreground h-10 w-10"
+					strokeWidth={1.5}
+				/>
+				<div className="flex flex-col gap-2 text-center">
+					<p className="text-lg font-medium">No saved sounds</p>
+					<p className="text-muted-foreground text-sm text-balance">
+						Click the heart icon on any sound to save it here
+					</p>
+				</div>
+			</div>
+		);
+	}
 
-  return (
-    <div className="mt-1 flex h-full flex-col gap-5">
-      <div className="flex items-center justify-between">
-        <p className="text-muted-foreground text-sm">
-          {savedSounds.length} saved{" "}
-          {savedSounds.length === 1 ? "sound" : "sounds"}
-        </p>
-        <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
-          <DialogTrigger asChild>
-            <Button
-              variant="text"
-              size="sm"
-              className="text-muted-foreground hover:text-destructive h-auto !opacity-100"
-            >
-              Clear all
-            </Button>
-          </DialogTrigger>
-          <DialogContent>
-            <DialogHeader>
-              <DialogTitle>Clear all saved sounds?</DialogTitle>
-              <DialogDescription>
-                This will permanently remove all {savedSounds.length} saved
-                sounds from your collection. This action cannot be undone.
-              </DialogDescription>
-            </DialogHeader>
-            <DialogFooter>
-              <Button variant="text" onClick={() => setShowClearDialog(false)}>
-                Cancel
-              </Button>
-              <Button
-                variant="destructive"
-                onClick={async () => {
-                  await clearSavedSounds();
-                  setShowClearDialog(false);
-                }}
-              >
-                Clear all sounds
-              </Button>
-            </DialogFooter>
-          </DialogContent>
-        </Dialog>
-      </div>
+	return (
+		<div className="mt-1 flex h-full flex-col gap-5">
+			<div className="flex items-center justify-between">
+				<p className="text-muted-foreground text-sm">
+					{savedSounds.length} saved{" "}
+					{savedSounds.length === 1 ? "sound" : "sounds"}
+				</p>
+				<Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
+					<DialogTrigger asChild>
+						<Button
+							variant="text"
+							size="sm"
+							className="text-muted-foreground hover:text-destructive h-auto !opacity-100"
+						>
+							Clear all
+						</Button>
+					</DialogTrigger>
+					<DialogContent>
+						<DialogHeader>
+							<DialogTitle>Clear all saved sounds?</DialogTitle>
+							<DialogDescription>
+								This will permanently remove all {savedSounds.length} saved
+								sounds from your collection. This action cannot be undone.
+							</DialogDescription>
+						</DialogHeader>
+						<DialogFooter>
+							<Button variant="text" onClick={() => setShowClearDialog(false)}>
+								Cancel
+							</Button>
+							<Button
+								variant="destructive"
+								onClick={async ({
+									stopPropagation,
+								}: React.MouseEvent<HTMLButtonElement>) => {
+									stopPropagation();
+									await clearSavedSounds();
+									setShowClearDialog(false);
+								}}
+							>
+								Clear all sounds
+							</Button>
+						</DialogFooter>
+					</DialogContent>
+				</Dialog>
+			</div>
 
-      <div className="relative h-full overflow-hidden">
-        <ScrollArea className="h-full flex-1">
-          <div className="flex flex-col gap-4">
-            {savedSounds.map((sound) => (
-              <AudioItem
-                key={sound.id}
-                sound={convertToSoundEffect(sound)}
-                isPlaying={playingId === sound.id}
-                onPlay={() => playSound(sound)}
-                isSaved={isSoundSaved({ soundId: sound.id })}
-                onToggleSaved={() =>
-                  toggleSavedSound({ soundEffect: convertToSoundEffect(sound) })
-                }
-              />
-            ))}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
+			<div className="relative h-full overflow-hidden">
+				<ScrollArea className="h-full flex-1">
+					<div className="flex flex-col gap-4">
+						{savedSounds.map((sound) => (
+							<AudioItem
+								key={sound.id}
+								sound={convertToSoundEffect({ savedSound: sound })}
+								isPlaying={playingId === sound.id}
+								onPlay={playSound}
+							/>
+						))}
+					</div>
+				</ScrollArea>
+			</div>
+		</div>
+	);
 }
 
 function SongsView() {
-  return <div>Songs</div>;
+	return <div>Songs</div>;
 }
 
 interface AudioItemProps {
-  sound: SoundEffect;
-  isPlaying: boolean;
-  onPlay: () => void;
-  isSaved: boolean;
-  onToggleSaved: () => void;
+	sound: SoundEffect;
+	isPlaying: boolean;
+	onPlay: ({ sound }: { sound: SoundEffect }) => void;
 }
 
-function AudioItem({
-  sound,
-  isPlaying,
-  onPlay,
-  isSaved,
-  onToggleSaved,
-}: AudioItemProps) {
-  const { addSoundToTimeline } = useSoundsStore();
+function AudioItem({ sound, isPlaying, onPlay }: AudioItemProps) {
+	const { addSoundToTimeline, isSoundSaved, toggleSavedSound } =
+		useSoundsStore();
+	const isSaved = isSoundSaved({ soundId: sound.id });
 
-  const handleClick = () => {
-    onPlay();
-  };
+	const handleClick = () => {
+		onPlay({ sound });
+	};
 
-  const handleSaveClick = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    onToggleSaved();
-  };
+	const handleSaveClick = ({
+		stopPropagation,
+	}: React.MouseEvent<HTMLButtonElement>) => {
+		stopPropagation();
+		toggleSavedSound({ soundEffect: sound });
+	};
 
-  const handleAddToTimeline = async (e: React.MouseEvent) => {
-    e.stopPropagation();
-    await addSoundToTimeline({ sound });
-  };
+	const handleAddToTimeline = async ({
+		stopPropagation,
+	}: React.MouseEvent<HTMLButtonElement>) => {
+		stopPropagation();
+		await addSoundToTimeline({ sound });
+	};
 
-  return (
-    <div
-      className="group flex cursor-pointer items-center gap-3 opacity-100 transition-opacity hover:opacity-75"
-      onClick={handleClick}
-    >
-      <div className="bg-accent relative flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md">
-        <div className="from-primary/20 absolute inset-0 bg-gradient-to-br to-transparent" />
-        {isPlaying ? (
-          <PauseIcon className="size-5" />
-        ) : (
-          <PlayIcon className="size-5" />
-        )}
-      </div>
+	return (
+		<div className="group flex items-center gap-3 opacity-100 transition-opacity hover:opacity-75">
+			<button
+				type="button"
+				className="flex min-w-0 flex-1 items-center gap-3 text-left"
+				onClick={handleClick}
+			>
+				<div className="bg-accent relative flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md">
+					<div className="from-primary/20 absolute inset-0 bg-gradient-to-br to-transparent" />
+					{isPlaying ? (
+						<PauseIcon className="size-5" />
+					) : (
+						<PlayIcon className="size-5" />
+					)}
+				</div>
 
-      <div className="min-w-0 flex-1 overflow-hidden">
-        <p className="truncate text-sm font-medium">{sound.name}</p>
-        <span className="text-muted-foreground block truncate text-xs">
-          {sound.username}
-        </span>
-      </div>
+				<div className="min-w-0 flex-1 overflow-hidden">
+					<p className="truncate text-sm font-medium">{sound.name}</p>
+					<span className="text-muted-foreground block truncate text-xs">
+						{sound.username}
+					</span>
+				</div>
+			</button>
 
-      <div className="flex items-center gap-3 pr-2">
-        <Button
-          variant="text"
-          size="icon"
-          className="text-muted-foreground hover:text-foreground w-auto !opacity-100"
-          onClick={handleAddToTimeline}
-          title="Add to timeline"
-        >
-          <PlusIcon />
-        </Button>
-        <Button
-          variant="text"
-          size="icon"
-          className={`hover:text-foreground w-auto !opacity-100 ${
-            isSaved
-              ? "text-red-500 hover:text-red-600"
-              : "text-muted-foreground"
-          }`}
-          onClick={handleSaveClick}
-          title={isSaved ? "Remove from saved" : "Save sound"}
-        >
-          <HeartIcon className={`${isSaved ? "fill-current" : ""}`} />
-        </Button>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-3 pr-2">
+				<Button
+					variant="text"
+					size="icon"
+					className="text-muted-foreground hover:text-foreground w-auto !opacity-100"
+					onClick={handleAddToTimeline}
+					title="Add to timeline"
+				>
+					<PlusIcon />
+				</Button>
+				<Button
+					variant="text"
+					size="icon"
+					className={`hover:text-foreground w-auto !opacity-100 ${
+						isSaved
+							? "text-red-500 hover:text-red-600"
+							: "text-muted-foreground"
+					}`}
+					onClick={handleSaveClick}
+					title={isSaved ? "Remove from saved" : "Save sound"}
+				>
+					<HeartIcon className={`${isSaved ? "fill-current" : ""}`} />
+				</Button>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/views/stickers.tsx b/apps/web/src/components/editor/assets-panel/views/stickers.tsx
index d5abbafe..8ab87882 100644
--- a/apps/web/src/components/editor/assets-panel/views/stickers.tsx
+++ b/apps/web/src/components/editor/assets-panel/views/stickers.tsx
@@ -1,606 +1,609 @@
 "use client";
 
-import { useEffect, useState, useMemo } from "react";
-import type { CSSProperties } from "react";
-import { useStickersStore } from "@/stores/stickers-store";
 import {
-  Loader2,
-  Grid3X3,
-  Hash,
-  Smile,
-  Clock,
-  X,
-  Sparkles,
-  ArrowRight,
-  StickerIcon,
+	ArrowRight,
+	Clock,
+	Grid3X3,
+	Hash,
+	Loader2,
+	Smile,
+	Sparkles,
+	StickerIcon,
+	X,
 } from "lucide-react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
-
-import {
-  getIconSvgUrl,
-  buildIconSvgUrl,
-  ICONIFY_HOSTS,
-  POPULAR_COLLECTIONS,
-} from "@/lib/iconify-api";
-import { cn } from "@/utils/ui";
 import Image from "next/image";
+import type { CSSProperties } from "react";
+import { useEffect, useMemo, useState } from "react";
+import { toast } from "sonner";
 import { DraggableItem } from "@/components/editor/draggable-item";
+import { PanelBaseView as BaseView } from "@/components/editor/panel-base-view";
+import { Button } from "@/components/ui/button";
 import { InputWithBack } from "@/components/ui/input-with-back";
-import type { StickerCategory } from "@/types/stickers";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { STICKER_CATEGORIES } from "@/constants/stickers-constants";
 import { useInfiniteScroll } from "@/hooks/use-infinite-scroll";
+import {
+	buildIconSvgUrl,
+	getIconSvgUrl,
+	ICONIFY_HOSTS,
+	POPULAR_COLLECTIONS,
+} from "@/lib/iconify-api";
+import { useStickersStore } from "@/stores/stickers-store";
+import type { StickerCategory } from "@/types/stickers";
+import { cn } from "@/utils/ui";
 
 function isStickerCategory(value: string): value is StickerCategory {
-  return STICKER_CATEGORIES.includes(value as StickerCategory);
+	return STICKER_CATEGORIES.includes(value as StickerCategory);
 }
 
 export function StickersView() {
-  const { selectedCategory, setSelectedCategory } = useStickersStore();
+	const { selectedCategory, setSelectedCategory } = useStickersStore();
 
-  return (
-    <BaseView
-      value={selectedCategory}
-      onValueChange={(v) => {
-        if (isStickerCategory(v)) {
-          setSelectedCategory({ category: v });
-        }
-      }}
-      tabs={[
-        {
-          value: "all",
-          label: "All",
-          icon: <Grid3X3 className="size-3" />,
-          content: <StickersContentView category="all" />,
-        },
-        {
-          value: "general",
-          label: "Icons",
-          icon: <Sparkles className="size-3" />,
-          content: <StickersContentView category="general" />,
-        },
-        {
-          value: "brands",
-          label: "Brands",
-          icon: <Hash className="size-3" />,
-          content: <StickersContentView category="brands" />,
-        },
-        {
-          value: "emoji",
-          label: "Emoji",
-          icon: <Smile className="size-3" />,
-          content: <StickersContentView category="emoji" />,
-        },
-      ]}
-      className="flex h-full flex-col overflow-hidden p-0"
-    />
-  );
+	return (
+		<BaseView
+			value={selectedCategory}
+			onValueChange={(v) => {
+				if (isStickerCategory(v)) {
+					setSelectedCategory({ category: v });
+				}
+			}}
+			tabs={[
+				{
+					value: "all",
+					label: "All",
+					icon: <Grid3X3 className="size-3" />,
+					content: <StickersContentView category="all" />,
+				},
+				{
+					value: "general",
+					label: "Icons",
+					icon: <Sparkles className="size-3" />,
+					content: <StickersContentView category="general" />,
+				},
+				{
+					value: "brands",
+					label: "Brands",
+					icon: <Hash className="size-3" />,
+					content: <StickersContentView category="brands" />,
+				},
+				{
+					value: "emoji",
+					label: "Emoji",
+					icon: <Smile className="size-3" />,
+					content: <StickersContentView category="emoji" />,
+				},
+			]}
+			className="flex h-full flex-col overflow-hidden p-0"
+		/>
+	);
 }
 
 function StickerGrid({
-  icons,
-  onAdd,
-  addingSticker,
-  capSize = false,
+	icons,
+	onAdd,
+	addingSticker,
+	capSize = false,
 }: {
-  icons: string[];
-  onAdd: (iconName: string) => void;
-  addingSticker: string | null;
-  capSize?: boolean;
+	icons: string[];
+	onAdd: (iconName: string) => void;
+	addingSticker: string | null;
+	capSize?: boolean;
 }) {
-  const gridStyle: CSSProperties & {
-    "--sticker-min": string;
-    "--sticker-max"?: string;
-  } = {
-    gridTemplateColumns: capSize
-      ? "repeat(auto-fill, minmax(var(--sticker-min, 96px), var(--sticker-max, 160px)))"
-      : "repeat(auto-fit, minmax(var(--sticker-min, 96px), 1fr))",
-    "--sticker-min": "96px",
-    ...(capSize ? { "--sticker-max": "160px" } : {}),
-  };
+	const gridStyle: CSSProperties & {
+		"--sticker-min": string;
+		"--sticker-max"?: string;
+	} = {
+		gridTemplateColumns: capSize
+			? "repeat(auto-fill, minmax(var(--sticker-min, 96px), var(--sticker-max, 160px)))"
+			: "repeat(auto-fit, minmax(var(--sticker-min, 96px), 1fr))",
+		"--sticker-min": "96px",
+		...(capSize ? { "--sticker-max": "160px" } : {}),
+	};
 
-  return (
-    <div className="grid gap-2" style={gridStyle}>
-      {icons.map((iconName) => (
-        <StickerItem
-          key={iconName}
-          iconName={iconName}
-          onAdd={onAdd}
-          isAdding={addingSticker === iconName}
-          capSize={capSize}
-        />
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid gap-2" style={gridStyle}>
+			{icons.map((iconName) => (
+				<StickerItem
+					key={iconName}
+					iconName={iconName}
+					onAdd={onAdd}
+					isAdding={addingSticker === iconName}
+					capSize={capSize}
+				/>
+			))}
+		</div>
+	);
 }
 
 function CollectionGrid({
-  collections,
-  onSelectCollection,
+	collections,
+	onSelectCollection,
 }: {
-  collections: Array<{
-    prefix: string;
-    name: string;
-    total: number;
-    category?: string;
-  }>;
-  onSelectCollection: ({ prefix }: { prefix: string }) => void;
+	collections: Array<{
+		prefix: string;
+		name: string;
+		total: number;
+		category?: string;
+	}>;
+	onSelectCollection: ({ prefix }: { prefix: string }) => void;
 }) {
-  return (
-    <div className="grid grid-cols-1 gap-2">
-      {collections.map((collection) => (
-        <CollectionItem
-          key={collection.prefix}
-          title={collection.name}
-          subtitle={`${collection.total.toLocaleString()} icons${collection.category ? ` • ${collection.category}` : ""}`}
-          onClick={() => onSelectCollection({ prefix: collection.prefix })}
-        />
-      ))}
-    </div>
-  );
+	return (
+		<div className="grid grid-cols-1 gap-2">
+			{collections.map((collection) => (
+				<CollectionItem
+					key={collection.prefix}
+					title={collection.name}
+					subtitle={`${collection.total.toLocaleString()} icons${collection.category ? ` • ${collection.category}` : ""}`}
+					onClick={() => onSelectCollection({ prefix: collection.prefix })}
+				/>
+			))}
+		</div>
+	);
 }
 
 function EmptyView({ message }: { message: string }) {
-  return (
-    <div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
-      <StickerIcon
-        className="text-muted-foreground h-10 w-10"
-        strokeWidth={1.5}
-      />
-      <div className="flex flex-col gap-2 text-center">
-        <p className="text-lg font-medium">No stickers found</p>
-        <p className="text-muted-foreground text-sm text-balance">{message}</p>
-      </div>
-    </div>
-  );
+	return (
+		<div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
+			<StickerIcon
+				className="text-muted-foreground h-10 w-10"
+				strokeWidth={1.5}
+			/>
+			<div className="flex flex-col gap-2 text-center">
+				<p className="text-lg font-medium">No stickers found</p>
+				<p className="text-muted-foreground text-sm text-balance">{message}</p>
+			</div>
+		</div>
+	);
 }
 
 function StickersContentView({ category }: { category: StickerCategory }) {
-  const {
-    searchQuery,
-    selectedCollection,
-    viewMode,
-    collections,
-    currentCollection,
-    searchResults,
-    recentStickers,
-    isLoadingCollections,
-    isLoadingCollection,
-    isSearching,
-    setSearchQuery,
-    setSelectedCollection,
-    loadCollections,
-    searchStickers,
-    addStickerToTimeline,
-    clearRecentStickers,
-    setSelectedCategory,
-    addingSticker,
-  } = useStickersStore();
+	const {
+		searchQuery,
+		selectedCollection,
+		viewMode,
+		collections,
+		currentCollection,
+		searchResults,
+		recentStickers,
+		isLoadingCollections,
+		isLoadingCollection,
+		isSearching,
+		setSearchQuery,
+		setSelectedCollection,
+		loadCollections,
+		searchStickers,
+		addStickerToTimeline,
+		clearRecentStickers,
+		setSelectedCategory,
+		addingSticker,
+	} = useStickersStore();
 
-  const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
-  const [collectionsToShow, setCollectionsToShow] = useState(20);
-  const [showCollectionItems, setShowCollectionItems] = useState(false);
+	const [localSearchQuery, setLocalSearchQuery] = useState(searchQuery);
+	const [collectionsToShow, setCollectionsToShow] = useState(20);
+	const [showCollectionItems, setShowCollectionItems] = useState(false);
 
-  const filteredCollections = useMemo(() => {
-    if (category === "all") {
-      return Object.entries(collections).map(([prefix, collection]) => ({
-        prefix,
-        name: collection.name,
-        total: collection.total,
-        category: collection.category,
-      }));
-    }
+	const filteredCollections = useMemo(() => {
+		if (category === "all") {
+			return Object.entries(collections).map(([prefix, collection]) => ({
+				prefix,
+				name: collection.name,
+				total: collection.total,
+				category: collection.category,
+			}));
+		}
 
-    const collectionList =
-      POPULAR_COLLECTIONS[category as keyof typeof POPULAR_COLLECTIONS];
-    if (!collectionList) return [];
+		const collectionList =
+			POPULAR_COLLECTIONS[category as keyof typeof POPULAR_COLLECTIONS];
+		if (!collectionList) return [];
 
-    return collectionList
-      .map((c) => {
-        const collection = collections[c.prefix];
-        return collection
-          ? {
-            prefix: c.prefix,
-            name: c.name,
-            total: collection.total,
-          }
-          : null;
-      })
-      .filter(Boolean) as Array<{
-        prefix: string;
-        name: string;
-        total: number;
-      }>;
-  }, [collections, category]);
+		return collectionList
+			.map((c) => {
+				const collection = collections[c.prefix];
+				return collection
+					? {
+							prefix: c.prefix,
+							name: c.name,
+							total: collection.total,
+						}
+					: null;
+			})
+			.filter(Boolean) as Array<{
+			prefix: string;
+			name: string;
+			total: number;
+		}>;
+	}, [collections, category]);
 
-  const { scrollAreaRef, handleScroll } = useInfiniteScroll({
-    onLoadMore: () => setCollectionsToShow((prev) => prev + 20),
-    hasMore: filteredCollections.length > collectionsToShow,
-    isLoading: isLoadingCollections,
-    enabled: viewMode === "browse" && !selectedCollection && category === "all",
-  });
+	const { scrollAreaRef, handleScroll } = useInfiniteScroll({
+		onLoadMore: () => setCollectionsToShow((prev) => prev + 20),
+		hasMore: filteredCollections.length > collectionsToShow,
+		isLoading: isLoadingCollections,
+		enabled: viewMode === "browse" && !selectedCollection && category === "all",
+	});
 
-  useEffect(() => {
-    if (Object.keys(collections).length === 0) {
-      loadCollections();
-    }
-  }, []);
+	useEffect(() => {
+		if (Object.keys(collections).length === 0) {
+			loadCollections();
+		}
+	}, [collections, loadCollections]);
 
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      if (localSearchQuery !== searchQuery) {
-        setSearchQuery({ query: localSearchQuery });
-        if (localSearchQuery.trim()) {
-          searchStickers({ query: localSearchQuery });
-        }
-      }
-    }, 500);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			if (localSearchQuery !== searchQuery) {
+				setSearchQuery({ query: localSearchQuery });
+				if (localSearchQuery.trim()) {
+					searchStickers({ query: localSearchQuery });
+				}
+			}
+		}, 500);
 
-    return () => clearTimeout(timer);
-  }, [localSearchQuery]);
+		return () => clearTimeout(timer);
+	}, [localSearchQuery, searchQuery, searchStickers, setSearchQuery]);
 
-  const handleAddSticker = async (iconName: string) => {
-    try {
-      await addStickerToTimeline({ iconName });
-    } catch (error) {
-      console.error("Failed to add sticker:", error);
-      toast.error("Failed to add sticker to timeline");
-    }
-  };
+	const handleAddSticker = async (iconName: string) => {
+		try {
+			await addStickerToTimeline({ iconName });
+		} catch (error) {
+			console.error("Failed to add sticker:", error);
+			toast.error("Failed to add sticker to timeline");
+		}
+	};
 
-  const iconsToDisplay = useMemo(() => {
-    if (viewMode === "search" && searchResults) {
-      return searchResults.icons;
-    }
+	const iconsToDisplay = useMemo(() => {
+		if (viewMode === "search" && searchResults) {
+			return searchResults.icons;
+		}
 
-    if (viewMode === "collection" && currentCollection) {
-      const icons: string[] = [];
+		if (viewMode === "collection" && currentCollection) {
+			const icons: string[] = [];
 
-      if (currentCollection.uncategorized) {
-        icons.push(
-          ...currentCollection.uncategorized.map(
-            (name) => `${currentCollection.prefix}:${name}`,
-          ),
-        );
-      }
+			if (currentCollection.uncategorized) {
+				icons.push(
+					...currentCollection.uncategorized.map(
+						(name) => `${currentCollection.prefix}:${name}`,
+					),
+				);
+			}
 
-      if (currentCollection.categories) {
-        Object.values(currentCollection.categories).forEach((categoryIcons) => {
-          icons.push(
-            ...categoryIcons.map(
-              (name) => `${currentCollection.prefix}:${name}`,
-            ),
-          );
-        });
-      }
+			if (currentCollection.categories) {
+				Object.values(currentCollection.categories).forEach((categoryIcons) => {
+					icons.push(
+						...categoryIcons.map(
+							(name) => `${currentCollection.prefix}:${name}`,
+						),
+					);
+				});
+			}
 
-      return icons.slice(0, 100);
-    }
+			return icons.slice(0, 100);
+		}
 
-    return [];
-  }, [viewMode, searchResults, currentCollection]);
+		return [];
+	}, [viewMode, searchResults, currentCollection]);
 
-  const isInCollection = viewMode === "collection" && !!selectedCollection;
+	const isInCollection = viewMode === "collection" && !!selectedCollection;
 
-  useEffect(() => {
-    if (isInCollection) {
-      setShowCollectionItems(false);
-      const timer = setTimeout(() => setShowCollectionItems(true), 350);
-      return () => clearTimeout(timer);
-    } else {
-      setShowCollectionItems(false);
-    }
-  }, [isInCollection]);
+	useEffect(() => {
+		if (isInCollection) {
+			setShowCollectionItems(false);
+			const timer = setTimeout(() => setShowCollectionItems(true), 350);
+			return () => clearTimeout(timer);
+		} else {
+			setShowCollectionItems(false);
+		}
+	}, [isInCollection]);
 
-  return (
-    <div className="mt-1 flex h-full flex-col gap-5 p-4">
-      <div className="space-y-3">
-        <InputWithBack
-          isExpanded={isInCollection}
-          setIsExpanded={(expanded) => {
-            if (!expanded && isInCollection) {
-              setSelectedCollection({ collection: null });
-            }
-          }}
-          placeholder={
-            category === "all"
-              ? "Search all stickers"
-              : category === "general"
-                ? "Search icons"
-                : category === "brands"
-                  ? "Search brands"
-                  : "Search Emojis"
-          }
-          value={localSearchQuery}
-          onChange={setLocalSearchQuery}
-          disableAnimation={true}
-        />
-      </div>
+	return (
+		<div className="mt-1 flex h-full flex-col gap-5 p-4">
+			<div className="space-y-3">
+				<InputWithBack
+					isExpanded={isInCollection}
+					setIsExpanded={(expanded) => {
+						if (!expanded && isInCollection) {
+							setSelectedCollection({ collection: null });
+						}
+					}}
+					placeholder={
+						category === "all"
+							? "Search all stickers"
+							: category === "general"
+								? "Search icons"
+								: category === "brands"
+									? "Search brands"
+									: "Search Emojis"
+					}
+					value={localSearchQuery}
+					onChange={setLocalSearchQuery}
+					disableAnimation={true}
+				/>
+			</div>
 
-      <div className="relative h-full overflow-hidden">
-        <ScrollArea
-          className="h-full flex-1"
-          ref={scrollAreaRef}
-          onScrollCapture={handleScroll}
-        >
-          <div className="flex h-full flex-col gap-4">
-            {recentStickers.length > 0 && viewMode === "browse" && (
-              <div className="h-full">
-                <div className="mb-2 flex items-center gap-2">
-                  <Clock className="text-muted-foreground size-4" />
-                  <span className="text-sm font-medium">Recent</span>
-                  <TooltipProvider>
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <button
-                          onClick={clearRecentStickers}
-                          className="hover:bg-accent ml-auto flex h-5 w-5 items-center justify-center rounded p-0"
-                        >
-                          <X className="text-muted-foreground size-3" />
-                        </button>
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>Clear recent stickers</p>
-                      </TooltipContent>
-                    </Tooltip>
-                  </TooltipProvider>
-                </div>
-                <StickerGrid
-                  icons={recentStickers.slice(0, 12)}
-                  onAdd={handleAddSticker}
-                  addingSticker={addingSticker}
-                  capSize
-                />
-              </div>
-            )}
+			<div className="relative h-full overflow-hidden">
+				<ScrollArea
+					className="h-full flex-1"
+					ref={scrollAreaRef}
+					onScrollCapture={handleScroll}
+				>
+					<div className="flex h-full flex-col gap-4">
+						{recentStickers.length > 0 && viewMode === "browse" && (
+							<div className="h-full">
+								<div className="mb-2 flex items-center gap-2">
+									<Clock className="text-muted-foreground size-4" />
+									<span className="text-sm font-medium">Recent</span>
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<button
+													type="button"
+													onClick={clearRecentStickers}
+													className="hover:bg-accent ml-auto flex h-5 w-5 items-center justify-center rounded p-0"
+												>
+													<X className="text-muted-foreground size-3" />
+												</button>
+											</TooltipTrigger>
+											<TooltipContent>
+												<p>Clear recent stickers</p>
+											</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								</div>
+								<StickerGrid
+									icons={recentStickers.slice(0, 12)}
+									onAdd={handleAddSticker}
+									addingSticker={addingSticker}
+									capSize
+								/>
+							</div>
+						)}
 
-            {viewMode === "collection" && selectedCollection && (
-              <div className="h-full">
-                {isLoadingCollection ? (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="text-muted-foreground size-6 animate-spin" />
-                  </div>
-                ) : showCollectionItems ? (
-                  <StickerGrid
-                    icons={iconsToDisplay}
-                    onAdd={handleAddSticker}
-                    addingSticker={addingSticker}
-                  />
-                ) : (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
-                  </div>
-                )}
-              </div>
-            )}
+						{viewMode === "collection" && selectedCollection && (
+							<div className="h-full">
+								{isLoadingCollection ? (
+									<div className="flex items-center justify-center py-8">
+										<Loader2 className="text-muted-foreground size-6 animate-spin" />
+									</div>
+								) : showCollectionItems ? (
+									<StickerGrid
+										icons={iconsToDisplay}
+										onAdd={handleAddSticker}
+										addingSticker={addingSticker}
+									/>
+								) : (
+									<div className="flex items-center justify-center py-8">
+										<Loader2 className="text-muted-foreground h-6 w-6 animate-spin" />
+									</div>
+								)}
+							</div>
+						)}
 
-            {viewMode === "search" && (
-              <div className="h-full">
-                {isSearching ? (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="text-muted-foreground size-6 animate-spin" />
-                  </div>
-                ) : searchResults?.icons.length ? (
-                  <>
-                    <div className="mb-3 flex items-center justify-between">
-                      <span className="text-muted-foreground text-sm">
-                        {searchResults.total} results
-                      </span>
-                    </div>
-                    <StickerGrid
-                      icons={iconsToDisplay}
-                      onAdd={handleAddSticker}
-                      addingSticker={addingSticker}
-                      capSize
-                    />
-                  </>
-                ) : searchQuery ? (
-                  <div className="flex flex-col items-center justify-center gap-3 py-8">
-                    <EmptyView
-                      message={`No stickers found for "${searchQuery}"`}
-                    />
-                    {category !== "all" && (
-                      <Button
-                        variant="outline"
-                        onClick={() => {
-                          const q = localSearchQuery || searchQuery;
-                          if (q) {
-                            setSearchQuery({ query: q });
-                          }
-                          setSelectedCategory({ category: "all" });
-                          if (q) {
-                            searchStickers({ query: q });
-                          }
-                        }}
-                      >
-                        Search in all icons
-                      </Button>
-                    )}
-                  </div>
-                ) : null}
-              </div>
-            )}
+						{viewMode === "search" && (
+							<div className="h-full">
+								{isSearching ? (
+									<div className="flex items-center justify-center py-8">
+										<Loader2 className="text-muted-foreground size-6 animate-spin" />
+									</div>
+								) : searchResults?.icons.length ? (
+									<>
+										<div className="mb-3 flex items-center justify-between">
+											<span className="text-muted-foreground text-sm">
+												{searchResults.total} results
+											</span>
+										</div>
+										<StickerGrid
+											icons={iconsToDisplay}
+											onAdd={handleAddSticker}
+											addingSticker={addingSticker}
+											capSize
+										/>
+									</>
+								) : searchQuery ? (
+									<div className="flex flex-col items-center justify-center gap-3 py-8">
+										<EmptyView
+											message={`No stickers found for "${searchQuery}"`}
+										/>
+										{category !== "all" && (
+											<Button
+												variant="outline"
+												onClick={() => {
+													const q = localSearchQuery || searchQuery;
+													if (q) {
+														setSearchQuery({ query: q });
+													}
+													setSelectedCategory({ category: "all" });
+													if (q) {
+														searchStickers({ query: q });
+													}
+												}}
+											>
+												Search in all icons
+											</Button>
+										)}
+									</div>
+								) : null}
+							</div>
+						)}
 
-            {viewMode === "browse" && !selectedCollection && (
-              <div className="h-full space-y-4">
-                {isLoadingCollections ? (
-                  <div className="flex items-center justify-center py-8">
-                    <Loader2 className="text-muted-foreground size-6 animate-spin" />
-                  </div>
-                ) : (
-                  <>
-                    {category !== "all" && (
-                      <div className="h-full">
-                        <CollectionGrid
-                          collections={filteredCollections}
-                          onSelectCollection={({ prefix }) =>
-                            setSelectedCollection({ collection: prefix })
-                          }
-                        />
-                      </div>
-                    )}
+						{viewMode === "browse" && !selectedCollection && (
+							<div className="h-full space-y-4">
+								{isLoadingCollections ? (
+									<div className="flex items-center justify-center py-8">
+										<Loader2 className="text-muted-foreground size-6 animate-spin" />
+									</div>
+								) : (
+									<>
+										{category !== "all" && (
+											<div className="h-full">
+												<CollectionGrid
+													collections={filteredCollections}
+													onSelectCollection={({ prefix }) =>
+														setSelectedCollection({ collection: prefix })
+													}
+												/>
+											</div>
+										)}
 
-                    {category === "all" && filteredCollections.length > 0 && (
-                      <div className="h-full">
-                        <CollectionGrid
-                          collections={filteredCollections.slice(
-                            0,
-                            collectionsToShow,
-                          )}
-                          onSelectCollection={({ prefix }) =>
-                            setSelectedCollection({ collection: prefix })
-                          }
-                        />
-                      </div>
-                    )}
-                  </>
-                )}
-              </div>
-            )}
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  );
+										{category === "all" && filteredCollections.length > 0 && (
+											<div className="h-full">
+												<CollectionGrid
+													collections={filteredCollections.slice(
+														0,
+														collectionsToShow,
+													)}
+													onSelectCollection={({ prefix }) =>
+														setSelectedCollection({ collection: prefix })
+													}
+												/>
+											</div>
+										)}
+									</>
+								)}
+							</div>
+						)}
+					</div>
+				</ScrollArea>
+			</div>
+		</div>
+	);
 }
 
 interface CollectionItemProps {
-  title: string;
-  subtitle: string;
-  onClick: () => void;
+	title: string;
+	subtitle: string;
+	onClick: () => void;
 }
 
 function CollectionItem({ title, subtitle, onClick }: CollectionItemProps) {
-  return (
-    <Button
-      variant="outline"
-      className="h-auto justify-between rounded-md py-2"
-      onClick={onClick}
-    >
-      <div className="text-left">
-        <p className="font-medium">{title}</p>
-        <p className="text-muted-foreground text-xs">{subtitle}</p>
-      </div>
-      <ArrowRight className="size-4" />
-    </Button>
-  );
+	return (
+		<Button
+			variant="outline"
+			className="h-auto justify-between rounded-md py-2"
+			onClick={onClick}
+		>
+			<div className="text-left">
+				<p className="font-medium">{title}</p>
+				<p className="text-muted-foreground text-xs">{subtitle}</p>
+			</div>
+			<ArrowRight className="size-4" />
+		</Button>
+	);
 }
 
 interface StickerItemProps {
-  iconName: string;
-  onAdd: (iconName: string) => void;
-  isAdding?: boolean;
-  capSize?: boolean;
+	iconName: string;
+	onAdd: (iconName: string) => void;
+	isAdding?: boolean;
+	capSize?: boolean;
 }
 
 function StickerItem({
-  iconName,
-  onAdd,
-  isAdding,
-  capSize = false,
+	iconName,
+	onAdd,
+	isAdding,
+	capSize = false,
 }: StickerItemProps) {
-  const [imageError, setImageError] = useState(false);
-  const [hostIndex, setHostIndex] = useState(0);
+	const [imageError, setImageError] = useState(false);
+	const [hostIndex, setHostIndex] = useState(0);
 
-  useEffect(() => {
-    setImageError(false);
-    setHostIndex(0);
-  }, [iconName]);
+	useEffect(() => {
+		if (!iconName) {
+			return;
+		}
+		setImageError(false);
+		setHostIndex(0);
+	}, [iconName]);
 
-  const displayName = iconName.split(":")[1] || iconName;
-  const collectionPrefix = iconName.split(":")[0];
+	const displayName = iconName.split(":")[1] || iconName;
+	const collectionPrefix = iconName.split(":")[0];
 
-  const preview = imageError ? (
-    <div className="flex h-full w-full items-center justify-center p-2">
-      <span className="text-muted-foreground text-center text-xs break-all">
-        {displayName}
-      </span>
-    </div>
-  ) : (
-    <div className="flex h-full w-full items-center justify-center p-4">
-      <Image
-        src={
-          hostIndex === 0
-            ? getIconSvgUrl(iconName, { width: 64, height: 64 })
-            : buildIconSvgUrl(
-              ICONIFY_HOSTS[Math.min(hostIndex, ICONIFY_HOSTS.length - 1)],
-              iconName,
-              { width: 64, height: 64 },
-            )
-        }
-        alt={displayName}
-        width={64}
-        height={64}
-        className="h-full w-full object-contain"
-        style={
-          capSize
-            ? {
-              maxWidth: "var(--sticker-max, 160px)",
-              maxHeight: "var(--sticker-max, 160px)",
-            }
-            : undefined
-        }
-        onError={() => {
-          const next = hostIndex + 1;
-          if (next < ICONIFY_HOSTS.length) {
-            setHostIndex(next);
-          } else {
-            setImageError(true);
-          }
-        }}
-        loading="lazy"
-        unoptimized
-      />
-    </div>
-  );
+	const preview = imageError ? (
+		<div className="flex h-full w-full items-center justify-center p-2">
+			<span className="text-muted-foreground text-center text-xs break-all">
+				{displayName}
+			</span>
+		</div>
+	) : (
+		<div className="flex h-full w-full items-center justify-center p-4">
+			<Image
+				src={
+					hostIndex === 0
+						? getIconSvgUrl(iconName, { width: 64, height: 64 })
+						: buildIconSvgUrl(
+								ICONIFY_HOSTS[Math.min(hostIndex, ICONIFY_HOSTS.length - 1)],
+								iconName,
+								{ width: 64, height: 64 },
+							)
+				}
+				alt={displayName}
+				width={64}
+				height={64}
+				className="h-full w-full object-contain"
+				style={
+					capSize
+						? {
+								maxWidth: "var(--sticker-max, 160px)",
+								maxHeight: "var(--sticker-max, 160px)",
+							}
+						: undefined
+				}
+				onError={() => {
+					const next = hostIndex + 1;
+					if (next < ICONIFY_HOSTS.length) {
+						setHostIndex(next);
+					} else {
+						setImageError(true);
+					}
+				}}
+				loading="lazy"
+				unoptimized
+			/>
+		</div>
+	);
 
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <div
-          className={cn(
-            "relative",
-            isAdding && "pointer-events-none opacity-50",
-          )}
-        >
-          <DraggableItem
-            name={displayName}
-            preview={preview}
-            dragData={{
-              id: iconName,
-              type: "sticker",
-              name: displayName,
-              iconName,
-            }}
-            onAddToTimeline={() => onAdd(iconName)}
-            aspectRatio={1}
-            shouldShowLabel={false}
-            isRounded={true}
-            variant="card"
-            className=""
-            containerClassName="w-full"
-          />
-          {isAdding && (
-            <div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-black/60">
-              <Loader2 className="size-6 animate-spin text-white" />
-            </div>
-          )}
-        </div>
-      </TooltipTrigger>
-      <TooltipContent>
-        <div className="space-y-1">
-          <p className="font-medium">{displayName}</p>
-          <p className="text-muted-foreground text-xs">{collectionPrefix}</p>
-        </div>
-      </TooltipContent>
-    </Tooltip>
-  );
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<div
+					className={cn(
+						"relative",
+						isAdding && "pointer-events-none opacity-50",
+					)}
+				>
+					<DraggableItem
+						name={displayName}
+						preview={preview}
+						dragData={{
+							id: iconName,
+							type: "sticker",
+							name: displayName,
+							iconName,
+						}}
+						onAddToTimeline={() => onAdd(iconName)}
+						aspectRatio={1}
+						shouldShowLabel={false}
+						isRounded={true}
+						variant="card"
+						className=""
+						containerClassName="w-full"
+					/>
+					{isAdding && (
+						<div className="absolute inset-0 z-10 flex items-center justify-center rounded-md bg-black/60">
+							<Loader2 className="size-6 animate-spin text-white" />
+						</div>
+					)}
+				</div>
+			</TooltipTrigger>
+			<TooltipContent>
+				<div className="space-y-1">
+					<p className="font-medium">{displayName}</p>
+					<p className="text-muted-foreground text-xs">{collectionPrefix}</p>
+				</div>
+			</TooltipContent>
+		</Tooltip>
+	);
 }
diff --git a/apps/web/src/components/editor/assets-panel/views/text.tsx b/apps/web/src/components/editor/assets-panel/views/text.tsx
index ac2a790f..d65b63dd 100644
--- a/apps/web/src/components/editor/assets-panel/views/text.tsx
+++ b/apps/web/src/components/editor/assets-panel/views/text.tsx
@@ -5,42 +5,42 @@ import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
 import { buildTextElement } from "@/lib/timeline/element-utils";
 
 export function TextView() {
-  const editor = useEditor();
+	const editor = useEditor();
 
-  const handleAddToTimeline = ({ currentTime }: { currentTime: number }) => {
-    const activeScene = editor.scenes.getActiveScene();
-    if (!activeScene) return;
+	const handleAddToTimeline = ({ currentTime }: { currentTime: number }) => {
+		const activeScene = editor.scenes.getActiveScene();
+		if (!activeScene) return;
 
-    const element = buildTextElement({
-      raw: DEFAULT_TEXT_ELEMENT,
-      startTime: currentTime,
-    });
+		const element = buildTextElement({
+			raw: DEFAULT_TEXT_ELEMENT,
+			startTime: currentTime,
+		});
 
-    editor.timeline.insertElement({
-      element,
-      placement: { mode: "auto" },
-    });
-  };
+		editor.timeline.insertElement({
+			element,
+			placement: { mode: "auto" },
+		});
+	};
 
-  return (
-    <BaseView>
-      <DraggableItem
-        name="Default text"
-        preview={
-          <div className="bg-panel-accent flex size-full items-center justify-center rounded">
-            <span className="text-xs select-none">Default text</span>
-          </div>
-        }
-        dragData={{
-          id: "temp-text-id",
-          type: DEFAULT_TEXT_ELEMENT.type,
-          name: DEFAULT_TEXT_ELEMENT.name,
-          content: DEFAULT_TEXT_ELEMENT.content,
-        }}
-        aspectRatio={1}
-        onAddToTimeline={handleAddToTimeline}
-        shouldShowLabel={false}
-      />
-    </BaseView>
-  );
+	return (
+		<BaseView>
+			<DraggableItem
+				name="Default text"
+				preview={
+					<div className="bg-panel-accent flex size-full items-center justify-center rounded">
+						<span className="text-xs select-none">Default text</span>
+					</div>
+				}
+				dragData={{
+					id: "temp-text-id",
+					type: DEFAULT_TEXT_ELEMENT.type,
+					name: DEFAULT_TEXT_ELEMENT.name,
+					content: DEFAULT_TEXT_ELEMENT.content,
+				}}
+				aspectRatio={1}
+				onAddToTimeline={handleAddToTimeline}
+				shouldShowLabel={false}
+			/>
+		</BaseView>
+	);
 }
diff --git a/apps/web/src/components/editor/delete-project-dialog.tsx b/apps/web/src/components/editor/delete-project-dialog.tsx
index f6ebdedd..a482a910 100644
--- a/apps/web/src/components/editor/delete-project-dialog.tsx
+++ b/apps/web/src/components/editor/delete-project-dialog.tsx
@@ -1,67 +1,67 @@
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
 } from "@/components/ui/dialog";
 
 export function DeleteProjectDialog({
-  isOpen,
-  onOpenChange,
-  onConfirm,
-  projectName,
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	projectName,
 }: {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: () => void;
-  projectName?: string;
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	onConfirm: () => void;
+	projectName?: string;
 }) {
-  return (
-    <Dialog open={isOpen} onOpenChange={onOpenChange}>
-      <DialogContent
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-        }}
-      >
-        <DialogHeader>
-          <DialogTitle>
-            {projectName ? (
-              <>
-                {"Delete '"}
-                <span className="inline-block max-w-[300px] truncate align-bottom">
-                  {projectName}
-                </span>
-                {"'?"}
-              </>
-            ) : (
-              "Delete Project?"
-            )}
-          </DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete this project? This action cannot be
-            undone.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button
-            variant="text"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onOpenChange(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button variant="destructive" onClick={onConfirm}>
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog open={isOpen} onOpenChange={onOpenChange}>
+			<DialogContent
+				onOpenAutoFocus={(e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				}}
+			>
+				<DialogHeader>
+					<DialogTitle>
+						{projectName ? (
+							<>
+								{"Delete '"}
+								<span className="inline-block max-w-[300px] truncate align-bottom">
+									{projectName}
+								</span>
+								{"'?"}
+							</>
+						) : (
+							"Delete Project?"
+						)}
+					</DialogTitle>
+					<DialogDescription>
+						Are you sure you want to delete this project? This action cannot be
+						undone.
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter>
+					<Button
+						variant="text"
+						onClick={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							onOpenChange(false);
+						}}
+					>
+						Cancel
+					</Button>
+					<Button variant="destructive" onClick={onConfirm}>
+						Delete
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
 }
diff --git a/apps/web/src/components/editor/draggable-item.tsx b/apps/web/src/components/editor/draggable-item.tsx
index 5648c8ae..7613f0bb 100644
--- a/apps/web/src/components/editor/draggable-item.tsx
+++ b/apps/web/src/components/editor/draggable-item.tsx
@@ -1,241 +1,241 @@
 "use client";
 
+import { Plus } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
-import { ReactNode, useState, useRef, useEffect } from "react";
-import { createPortal } from "react-dom";
-import { Plus } from "lucide-react";
-import { cn } from "@/utils/ui";
 import { useEditor } from "@/hooks/use-editor";
 import { clearDragData, setDragData } from "@/lib/drag-data";
 import type { TimelineDragData } from "@/types/drag";
+import { cn } from "@/utils/ui";
 
 export interface DraggableItemProps {
-  name: string;
-  preview: ReactNode;
-  dragData: TimelineDragData;
-  onDragStart?: ({ e }: { e: React.DragEvent }) => void;
-  onAddToTimeline?: ({ currentTime }: { currentTime: number }) => void;
-  aspectRatio?: number;
-  className?: string;
-  containerClassName?: string;
-  shouldShowPlusOnDrag?: boolean;
-  shouldShowLabel?: boolean;
-  isRounded?: boolean;
-  variant?: "card" | "compact";
-  isDraggable?: boolean;
-  isHighlighted?: boolean;
+	name: string;
+	preview: ReactNode;
+	dragData: TimelineDragData;
+	onDragStart?: ({ e }: { e: React.DragEvent }) => void;
+	onAddToTimeline?: ({ currentTime }: { currentTime: number }) => void;
+	aspectRatio?: number;
+	className?: string;
+	containerClassName?: string;
+	shouldShowPlusOnDrag?: boolean;
+	shouldShowLabel?: boolean;
+	isRounded?: boolean;
+	variant?: "card" | "compact";
+	isDraggable?: boolean;
+	isHighlighted?: boolean;
 }
 
 export function DraggableItem({
-  name,
-  preview,
-  dragData,
-  onDragStart,
-  onAddToTimeline,
-  aspectRatio = 16 / 9,
-  className = "",
-  containerClassName,
-  shouldShowPlusOnDrag = true,
-  shouldShowLabel = true,
-  isRounded = true,
-  variant = "card",
-  isDraggable = true,
-  isHighlighted = false,
+	name,
+	preview,
+	dragData,
+	onDragStart,
+	onAddToTimeline,
+	aspectRatio = 16 / 9,
+	className = "",
+	containerClassName,
+	shouldShowPlusOnDrag = true,
+	shouldShowLabel = true,
+	isRounded = true,
+	variant = "card",
+	isDraggable = true,
+	isHighlighted = false,
 }: DraggableItemProps) {
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
-  const dragRef = useRef<HTMLDivElement>(null);
-  const editor = useEditor();
-  const highlightClassName = "ring-2 ring-primary rounded-sm bg-primary/10";
+	const [isDragging, setIsDragging] = useState(false);
+	const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
+	const dragRef = useRef<HTMLDivElement>(null);
+	const editor = useEditor();
+	const highlightClassName = "ring-2 ring-primary rounded-sm bg-primary/10";
 
-  const handleAddToTimeline = () => {
-    onAddToTimeline?.({ currentTime: editor.playback.getCurrentTime() });
-  };
+	const handleAddToTimeline = () => {
+		onAddToTimeline?.({ currentTime: editor.playback.getCurrentTime() });
+	};
 
-  const emptyImg = new window.Image();
-  emptyImg.src =
-    "data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
+	const emptyImg = new window.Image();
+	emptyImg.src =
+		"data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=";
 
-  useEffect(() => {
-    if (!isDragging) return;
+	useEffect(() => {
+		if (!isDragging) return;
 
-    const handleDragOver = (e: DragEvent) => {
-      setDragPosition({ x: e.clientX, y: e.clientY });
-    };
+		const handleDragOver = (e: DragEvent) => {
+			setDragPosition({ x: e.clientX, y: e.clientY });
+		};
 
-    document.addEventListener("dragover", handleDragOver);
+		document.addEventListener("dragover", handleDragOver);
 
-    return () => {
-      document.removeEventListener("dragover", handleDragOver);
-    };
-  }, [isDragging]);
+		return () => {
+			document.removeEventListener("dragover", handleDragOver);
+		};
+	}, [isDragging]);
 
-  const handleDragStart = (e: React.DragEvent) => {
-    e.dataTransfer.setDragImage(emptyImg, 0, 0);
+	const handleDragStart = (e: React.DragEvent) => {
+		e.dataTransfer.setDragImage(emptyImg, 0, 0);
 
-    setDragData({ dataTransfer: e.dataTransfer, dragData });
-    e.dataTransfer.effectAllowed = "copy";
+		setDragData({ dataTransfer: e.dataTransfer, dragData });
+		e.dataTransfer.effectAllowed = "copy";
 
-    setDragPosition({ x: e.clientX, y: e.clientY });
-    setIsDragging(true);
+		setDragPosition({ x: e.clientX, y: e.clientY });
+		setIsDragging(true);
 
-    onDragStart?.({ e });
-  };
+		onDragStart?.({ e });
+	};
 
-  const handleDragEnd = () => {
-    setIsDragging(false);
-    clearDragData();
-  };
+	const handleDragEnd = () => {
+		setIsDragging(false);
+		clearDragData();
+	};
 
-  return (
-    <>
-      {variant === "card" ? (
-        <div
-          ref={dragRef}
-          className={cn("group relative", containerClassName ?? "size-28")}
-        >
-          <div
-            className={cn(
-              "relative flex h-auto w-full cursor-default flex-col gap-1 p-1",
-              className,
-              isHighlighted && highlightClassName,
-            )}
-          >
-            <AspectRatio
-              ratio={aspectRatio}
-              className={cn(
-                "bg-panel-accent relative overflow-hidden",
-                isRounded && "rounded-md",
-                isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
-              )}
-              draggable={isDraggable}
-              onDragStart={isDraggable ? handleDragStart : undefined}
-              onDragEnd={isDraggable ? handleDragEnd : undefined}
-            >
-              {preview}
-              {!isDragging && (
-                <PlusButton
-                  className="opacity-0 group-hover:opacity-100"
-                  onClick={handleAddToTimeline}
-                />
-              )}
-            </AspectRatio>
-            {shouldShowLabel && (
-              <span
-                className="text-muted-foreground w-full truncate text-left text-[0.7rem]"
-                aria-label={name}
-                title={name}
-              >
-                {name.length > 8
-                  ? `${name.slice(0, 16)}...${name.slice(-3)}`
-                  : name}
-              </span>
-            )}
-          </div>
-        </div>
-      ) : (
-        <div
-          ref={dragRef}
-          className={cn(
-            "group relative w-full",
-            isHighlighted && highlightClassName,
-          )}
-        >
-          <div
-            className={cn(
-              "flex h-8 w-full cursor-default items-center gap-3 px-1",
-              isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
-              className,
-            )}
-            draggable={isDraggable}
-            onDragStart={isDraggable ? handleDragStart : undefined}
-            onDragEnd={isDraggable ? handleDragEnd : undefined}
-          >
-            <div className="size-6 flex-shrink-0 overflow-hidden rounded-[0.35rem]">
-              {preview}
-            </div>
-            <span className="w-full flex-1 truncate text-sm">{name}</span>
-          </div>
-        </div>
-      )}
+	return (
+		<>
+			{variant === "card" ? (
+				<div
+					ref={dragRef}
+					className={cn("group relative", containerClassName ?? "size-28")}
+				>
+					<div
+						className={cn(
+							"relative flex h-auto w-full cursor-default flex-col gap-1 p-1",
+							className,
+							isHighlighted && highlightClassName,
+						)}
+					>
+						<AspectRatio
+							ratio={aspectRatio}
+							className={cn(
+								"bg-panel-accent relative overflow-hidden",
+								isRounded && "rounded-md",
+								isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
+							)}
+							draggable={isDraggable}
+							onDragStart={isDraggable ? handleDragStart : undefined}
+							onDragEnd={isDraggable ? handleDragEnd : undefined}
+						>
+							{preview}
+							{!isDragging && (
+								<PlusButton
+									className="opacity-0 group-hover:opacity-100"
+									onClick={handleAddToTimeline}
+								/>
+							)}
+						</AspectRatio>
+						{shouldShowLabel && (
+							<span
+								className="text-muted-foreground w-full truncate text-left text-[0.7rem]"
+								aria-label={name}
+								title={name}
+							>
+								{name.length > 8
+									? `${name.slice(0, 16)}...${name.slice(-3)}`
+									: name}
+							</span>
+						)}
+					</div>
+				</div>
+			) : (
+				<div
+					ref={dragRef}
+					className={cn(
+						"group relative w-full",
+						isHighlighted && highlightClassName,
+					)}
+				>
+					<div
+						className={cn(
+							"flex h-8 w-full cursor-default items-center gap-3 px-1",
+							isDraggable && "[&::-webkit-drag-ghost]:opacity-0",
+							className,
+						)}
+						draggable={isDraggable}
+						onDragStart={isDraggable ? handleDragStart : undefined}
+						onDragEnd={isDraggable ? handleDragEnd : undefined}
+					>
+						<div className="size-6 flex-shrink-0 overflow-hidden rounded-[0.35rem]">
+							{preview}
+						</div>
+						<span className="w-full flex-1 truncate text-sm">{name}</span>
+					</div>
+				</div>
+			)}
 
-      {isDraggable &&
-        isDragging &&
-        typeof document !== "undefined" &&
-        createPortal(
-          <div
-            className="pointer-events-none fixed z-9999"
-            style={{
-              left: dragPosition.x - 40,
-              top: dragPosition.y - 40,
-            }}
-          >
-            <div className="w-[80px]">
-              <AspectRatio
-                ratio={1}
-                className="ring-primary relative overflow-hidden rounded-md shadow-2xl ring-3"
-              >
-                <div className="h-full w-full [&_img]:h-full [&_img]:w-full [&_img]:rounded-none [&_img]:object-cover">
-                  {preview}
-                </div>
-                {shouldShowPlusOnDrag && (
-                  <PlusButton
-                    onClick={handleAddToTimeline}
-                    tooltipText="Add to timeline or drag to position"
-                  />
-                )}
-              </AspectRatio>
-            </div>
-          </div>,
-          document.body,
-        )}
-    </>
-  );
+			{isDraggable &&
+				isDragging &&
+				typeof document !== "undefined" &&
+				createPortal(
+					<div
+						className="pointer-events-none fixed z-9999"
+						style={{
+							left: dragPosition.x - 40,
+							top: dragPosition.y - 40,
+						}}
+					>
+						<div className="w-[80px]">
+							<AspectRatio
+								ratio={1}
+								className="ring-primary relative overflow-hidden rounded-md shadow-2xl ring-3"
+							>
+								<div className="h-full w-full [&_img]:h-full [&_img]:w-full [&_img]:rounded-none [&_img]:object-cover">
+									{preview}
+								</div>
+								{shouldShowPlusOnDrag && (
+									<PlusButton
+										onClick={handleAddToTimeline}
+										tooltipText="Add to timeline or drag to position"
+									/>
+								)}
+							</AspectRatio>
+						</div>
+					</div>,
+					document.body,
+				)}
+		</>
+	);
 }
 
 function PlusButton({
-  className,
-  onClick,
-  tooltipText,
+	className,
+	onClick,
+	tooltipText,
 }: {
-  className?: string;
-  onClick?: () => void;
-  tooltipText?: string;
+	className?: string;
+	onClick?: () => void;
+	tooltipText?: string;
 }) {
-  const button = (
-    <Button
-      size="icon"
-      className={cn(
-        "bg-background hover:bg-panel text-foreground absolute right-2 bottom-2 size-5",
-        className,
-      )}
-      onClick={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        onClick?.();
-      }}
-      title={tooltipText}
-    >
-      <Plus className="size-4!" />
-    </Button>
-  );
+	const button = (
+		<Button
+			size="icon"
+			className={cn(
+				"bg-background hover:bg-panel text-foreground absolute right-2 bottom-2 size-5",
+				className,
+			)}
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onClick?.();
+			}}
+			title={tooltipText}
+		>
+			<Plus className="size-4!" />
+		</Button>
+	);
 
-  if (tooltipText) {
-    return (
-      <Tooltip>
-        <TooltipTrigger asChild>{button}</TooltipTrigger>
-        <TooltipContent>
-          <p>{tooltipText}</p>
-        </TooltipContent>
-      </Tooltip>
-    );
-  }
+	if (tooltipText) {
+		return (
+			<Tooltip>
+				<TooltipTrigger asChild>{button}</TooltipTrigger>
+				<TooltipContent>
+					<p>{tooltipText}</p>
+				</TooltipContent>
+			</Tooltip>
+		);
+	}
 
-  return button;
+	return button;
 }
diff --git a/apps/web/src/components/editor/editable-timecode.tsx b/apps/web/src/components/editor/editable-timecode.tsx
index d9e5ec8a..d56d1771 100644
--- a/apps/web/src/components/editor/editable-timecode.tsx
+++ b/apps/web/src/components/editor/editable-timecode.tsx
@@ -1,154 +1,154 @@
 "use client";
 
-import { useState, useRef, useEffect } from "react";
-import { cn } from "@/utils/ui";
-import { TTimeCode } from "@/types/time";
+import { useEffect, useRef, useState } from "react";
 import { formatTimeCode, parseTimeCode } from "@/lib/time";
+import type { TTimeCode } from "@/types/time";
+import { cn } from "@/utils/ui";
 
 interface EditableTimecodeProps {
-  time: number;
-  duration: number;
-  format?: TTimeCode;
-  fps: number;
-  onTimeChange?: ({ time }: { time: number }) => void;
-  className?: string;
-  disabled?: boolean;
+	time: number;
+	duration: number;
+	format?: TTimeCode;
+	fps: number;
+	onTimeChange?: ({ time }: { time: number }) => void;
+	className?: string;
+	disabled?: boolean;
 }
 
 export function EditableTimecode({
-  time,
-  duration,
-  format = "HH:MM:SS:FF",
-  fps,
-  onTimeChange,
-  className,
-  disabled = false,
+	time,
+	duration,
+	format = "HH:MM:SS:FF",
+	fps,
+	onTimeChange,
+	className,
+	disabled = false,
 }: EditableTimecodeProps) {
-  const [isEditing, setIsEditing] = useState(false);
-  const [inputValue, setInputValue] = useState("");
-  const [hasError, setHasError] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-  const enterPressedRef = useRef(false);
-  const formattedTime = formatTimeCode({ timeInSeconds: time, format, fps });
+	const [isEditing, setIsEditing] = useState(false);
+	const [inputValue, setInputValue] = useState("");
+	const [hasError, setHasError] = useState(false);
+	const inputRef = useRef<HTMLInputElement>(null);
+	const enterPressedRef = useRef(false);
+	const formattedTime = formatTimeCode({ timeInSeconds: time, format, fps });
 
-  const startEditing = () => {
-    if (disabled) return;
-    setIsEditing(true);
-    setInputValue(formattedTime);
-    setHasError(false);
-    enterPressedRef.current = false;
-  };
+	const startEditing = () => {
+		if (disabled) return;
+		setIsEditing(true);
+		setInputValue(formattedTime);
+		setHasError(false);
+		enterPressedRef.current = false;
+	};
 
-  const cancelEditing = () => {
-    setIsEditing(false);
-    setInputValue("");
-    setHasError(false);
-    enterPressedRef.current = false;
-  };
+	const cancelEditing = () => {
+		setIsEditing(false);
+		setInputValue("");
+		setHasError(false);
+		enterPressedRef.current = false;
+	};
 
-  const applyEdit = () => {
-    const parsedTime = parseTimeCode({ timeCode: inputValue, format, fps });
+	const applyEdit = () => {
+		const parsedTime = parseTimeCode({ timeCode: inputValue, format, fps });
 
-    if (parsedTime === null) {
-      setHasError(true);
-      return;
-    }
+		if (parsedTime === null) {
+			setHasError(true);
+			return;
+		}
 
-    const clampedTime = Math.max(
-      0,
-      duration ? Math.min(duration, parsedTime) : parsedTime,
-    );
+		const clampedTime = Math.max(
+			0,
+			duration ? Math.min(duration, parsedTime) : parsedTime,
+		);
 
-    onTimeChange?.({ time: clampedTime });
-    setIsEditing(false);
-    setInputValue("");
-    setHasError(false);
-    enterPressedRef.current = false;
-  };
+		onTimeChange?.({ time: clampedTime });
+		setIsEditing(false);
+		setInputValue("");
+		setHasError(false);
+		enterPressedRef.current = false;
+	};
 
-  const handleKeyDown = ({
-    key,
-    preventDefault,
-  }: React.KeyboardEvent<HTMLInputElement>) => {
-    if (key === "Enter") {
-      preventDefault();
-      enterPressedRef.current = true;
-      applyEdit();
-    } else if (key === "Escape") {
-      preventDefault();
-      cancelEditing();
-    }
-  };
+	const handleKeyDown = ({
+		key,
+		preventDefault,
+	}: React.KeyboardEvent<HTMLInputElement>) => {
+		if (key === "Enter") {
+			preventDefault();
+			enterPressedRef.current = true;
+			applyEdit();
+		} else if (key === "Escape") {
+			preventDefault();
+			cancelEditing();
+		}
+	};
 
-  const handleInputChange = ({
-    target,
-  }: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(target.value);
-    setHasError(false);
-  };
+	const handleInputChange = ({
+		target,
+	}: React.ChangeEvent<HTMLInputElement>) => {
+		setInputValue(target.value);
+		setHasError(false);
+	};
 
-  const handleBlur = () => {
-    if (!enterPressedRef.current && isEditing) {
-      applyEdit();
-    }
-  };
+	const handleBlur = () => {
+		if (!enterPressedRef.current && isEditing) {
+			applyEdit();
+		}
+	};
 
-  const handleDisplayKeyDown = ({
-    key,
-    preventDefault,
-  }: React.KeyboardEvent<HTMLSpanElement>) => {
-    if (disabled) return;
+	const handleDisplayKeyDown = ({
+		key,
+		preventDefault,
+	}: React.KeyboardEvent<HTMLButtonElement>) => {
+		if (disabled) return;
 
-    if (key === "Enter" || key === " ") {
-      preventDefault();
-      startEditing();
-    }
-  };
+		if (key === "Enter" || key === " ") {
+			preventDefault();
+			startEditing();
+		}
+	};
 
-  useEffect(() => {
-    if (isEditing && inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current.select();
-    }
-  }, [isEditing]);
+	useEffect(() => {
+		if (isEditing && inputRef.current) {
+			inputRef.current.focus();
+			inputRef.current.select();
+		}
+	}, [isEditing]);
 
-  if (isEditing) {
-    return (
-      <input
-        ref={inputRef}
-        type="text"
-        value={inputValue}
-        onChange={handleInputChange}
-        onKeyDown={handleKeyDown}
-        onBlur={handleBlur}
-        className={cn(
-          "border-none bg-transparent font-mono text-xs outline-none",
-          "focus:bg-background focus:border-primary focus:rounded focus:border focus:px-1",
-          "text-primary tabular-nums",
-          hasError && "text-destructive focus:border-destructive",
-          className,
-        )}
-        style={{ width: `${formattedTime.length + 1}ch` }}
-        placeholder={formattedTime}
-      />
-    );
-  }
+	if (isEditing) {
+		return (
+			<input
+				ref={inputRef}
+				type="text"
+				value={inputValue}
+				onChange={handleInputChange}
+				onKeyDown={handleKeyDown}
+				onBlur={handleBlur}
+				className={cn(
+					"border-none bg-transparent font-mono text-xs outline-none",
+					"focus:bg-background focus:border-primary focus:rounded focus:border focus:px-1",
+					"text-primary tabular-nums",
+					hasError && "text-destructive focus:border-destructive",
+					className,
+				)}
+				style={{ width: `${formattedTime.length + 1}ch` }}
+				placeholder={formattedTime}
+			/>
+		);
+	}
 
-  return (
-    <span
-      onClick={startEditing}
-      onKeyDown={handleDisplayKeyDown}
-      role="button"
-      tabIndex={disabled ? -1 : 0}
-      className={cn(
-        "text-primary cursor-pointer font-mono text-xs tabular-nums",
-        "hover:bg-muted/50 -mx-1 px-1 transition-colors hover:rounded",
-        disabled && "cursor-default hover:bg-transparent",
-        className,
-      )}
-      title={disabled ? undefined : "Click to edit time"}
-    >
-      {formattedTime}
-    </span>
-  );
+	return (
+		<button
+			type="button"
+			onClick={startEditing}
+			onKeyDown={handleDisplayKeyDown}
+			disabled={disabled}
+			className={cn(
+				"text-primary cursor-pointer font-mono text-xs tabular-nums",
+				"hover:bg-muted/50 -mx-1 px-1 transition-colors hover:rounded",
+				disabled && "cursor-default hover:bg-transparent",
+				className,
+			)}
+			title={disabled ? undefined : "Click to edit time"}
+		>
+			{formattedTime}
+		</button>
+	);
 }
diff --git a/apps/web/src/components/editor/editor-header.tsx b/apps/web/src/components/editor/editor-header.tsx
index a40ff33d..c0d8740b 100644
--- a/apps/web/src/components/editor/editor-header.tsx
+++ b/apps/web/src/components/editor/editor-header.tsx
@@ -2,20 +2,20 @@
 
 import { Button } from "../ui/button";
 import {
-  ChevronDown,
-  ArrowLeft,
-  SquarePen,
-  Trash,
-  Loader2,
+	ChevronDown,
+	ArrowLeft,
+	SquarePen,
+	Trash,
+	Loader2,
 } from "lucide-react";
 import { KeyboardShortcutsHelp } from "../keyboard-shortcuts-help";
 import { useState } from "react";
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
 } from "../ui/dropdown-menu";
 import Link from "next/link";
 import { RenameProjectDialog } from "../rename-project-dialog";
@@ -27,151 +27,152 @@ import { ThemeToggle } from "../theme-toggle";
 import { SOCIAL_LINKS } from "@/constants/site-constants";
 import { toast } from "sonner";
 import { useEditor } from "@/hooks/use-editor";
+import { PencilIcon } from "@opencut/ui/icons";
 
 export function EditorHeader() {
-  return (
-    <header className="bg-background flex h-[3.2rem] items-center justify-between px-3 pt-0.5">
-      <div className="flex items-center gap-2">
-        <ProjectDropdown />
-      </div>
-      <nav className="flex items-center gap-2">
-        <KeyboardShortcutsHelp />
-        <ExportButton />
-        <ThemeToggle />
-      </nav>
-    </header>
-  );
+	return (
+		<header className="bg-background flex h-[3.2rem] items-center justify-between px-3 pt-0.5">
+			<div className="flex items-center gap-2">
+				<ProjectDropdown />
+			</div>
+			<nav className="flex items-center gap-2">
+				<KeyboardShortcutsHelp />
+				<ExportButton />
+				<ThemeToggle />
+			</nav>
+		</header>
+	);
 }
 
 function ProjectDropdown() {
-  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
-  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
-  const [isExiting, setIsExiting] = useState(false);
-  const router = useRouter();
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
+	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+	const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+	const [isExiting, setIsExiting] = useState(false);
+	const router = useRouter();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
 
-  const handleExit = async () => {
-    if (isExiting) return;
-    setIsExiting(true);
+	const handleExit = async () => {
+		if (isExiting) return;
+		setIsExiting(true);
 
-    try {
-      await editor.project.prepareExit();
-      editor.project.closeProject();
-    } catch (error) {
-      console.error("Failed to prepare project exit:", error);
-    } finally {
-      editor.project.closeProject();
-      router.push("/projects");
-    }
-  };
+		try {
+			await editor.project.prepareExit();
+			editor.project.closeProject();
+		} catch (error) {
+			console.error("Failed to prepare project exit:", error);
+		} finally {
+			editor.project.closeProject();
+			router.push("/projects");
+		}
+	};
 
-  const handleSaveProjectName = async (newName: string) => {
-    if (
-      activeProject &&
-      newName.trim() &&
-      newName !== activeProject.metadata.name
-    ) {
-      try {
-        await editor.project.renameProject({
-          id: activeProject.metadata.id,
-          name: newName.trim(),
-        });
-      } catch (error) {
-        toast.error("Failed to rename project", {
-          description:
-            error instanceof Error ? error.message : "Please try again",
-        });
-      } finally {
-        setIsRenameDialogOpen(false);
-      }
-    }
-  };
+	const handleSaveProjectName = async (newName: string) => {
+		if (
+			activeProject &&
+			newName.trim() &&
+			newName !== activeProject.metadata.name
+		) {
+			try {
+				await editor.project.renameProject({
+					id: activeProject.metadata.id,
+					name: newName.trim(),
+				});
+			} catch (error) {
+				toast.error("Failed to rename project", {
+					description:
+						error instanceof Error ? error.message : "Please try again",
+				});
+			} finally {
+				setIsRenameDialogOpen(false);
+			}
+		}
+	};
 
-  const handleDeleteProject = async () => {
-    if (activeProject) {
-      try {
-        await editor.project.deleteProject({ id: activeProject.metadata.id });
-        router.push("/projects");
-      } catch (error) {
-        toast.error("Failed to delete project", {
-          description:
-            error instanceof Error ? error.message : "Please try again",
-        });
-      } finally {
-        setIsDeleteDialogOpen(false);
-      }
-    }
-  };
+	const handleDeleteProject = async () => {
+		if (activeProject) {
+			try {
+				await editor.project.deleteProject({ id: activeProject.metadata.id });
+				router.push("/projects");
+			} catch (error) {
+				toast.error("Failed to delete project", {
+					description:
+						error instanceof Error ? error.message : "Please try again",
+				});
+			} finally {
+				setIsDeleteDialogOpen(false);
+			}
+		}
+	};
 
-  return (
-    <>
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            variant="secondary"
-            className="flex h-auto items-center justify-center px-2.5 py-1.5"
-          >
-            <ChevronDown className="text-muted-foreground" />
-            <span className="mr-2 text-[0.85rem]">
-              {activeProject?.metadata.name}
-            </span>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="start" className="z-100 w-40">
-          <DropdownMenuItem
-            className="flex items-center gap-1.5"
-            onClick={handleExit}
-            disabled={isExiting}
-          >
-            {isExiting ? (
-              <Loader2 className="h-4 w-4 animate-spin" />
-            ) : (
-              <ArrowLeft className="h-4 w-4" />
-            )}
-            Projects
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            className="flex items-center gap-1.5"
-            onClick={() => setIsRenameDialogOpen(true)}
-          >
-            <SquarePen className="h-4 w-4" />
-            Rename project
-          </DropdownMenuItem>
-          <DropdownMenuItem
-            variant="destructive"
-            className="flex items-center gap-1.5"
-            onClick={() => setIsDeleteDialogOpen(true)}
-          >
-            <Trash className="h-4 w-4" />
-            Delete Project
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem asChild>
-            <Link
-              href={SOCIAL_LINKS.discord}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center gap-1.5"
-            >
-              <FaDiscord className="h-4 w-4" />
-              Discord
-            </Link>
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <RenameProjectDialog
-        isOpen={isRenameDialogOpen}
-        onOpenChange={setIsRenameDialogOpen}
-        onConfirm={(newName) => handleSaveProjectName(newName)}
-        projectName={activeProject?.metadata.name || ""}
-      />
-      <DeleteProjectDialog
-        isOpen={isDeleteDialogOpen}
-        onOpenChange={setIsDeleteDialogOpen}
-        onConfirm={handleDeleteProject}
-        projectName={activeProject?.metadata.name || ""}
-      />
-    </>
-  );
+	return (
+		<>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<Button
+						variant="secondary"
+						className="flex h-auto items-center justify-center px-2.5 py-1.5"
+					>
+						<ChevronDown className="text-muted-foreground" />
+						<span className="mr-2 text-[0.85rem]">
+							{activeProject?.metadata.name}
+						</span>
+					</Button>
+				</DropdownMenuTrigger>
+				<DropdownMenuContent align="start" className="z-100 w-52">
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={handleExit}
+						disabled={isExiting}
+					>
+						{isExiting ? (
+							<Loader2 className="h-4 w-4 animate-spin" />
+						) : (
+							<ArrowLeft className="h-4 w-4" />
+						)}
+						Projects
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						className="flex items-center gap-1.5"
+						onClick={() => setIsRenameDialogOpen(true)}
+					>
+						<PencilIcon className="h-4 w-4" />
+						Rename project
+					</DropdownMenuItem>
+					<DropdownMenuItem
+						variant="destructive"
+						className="flex items-center gap-1.5"
+						onClick={() => setIsDeleteDialogOpen(true)}
+					>
+						<Trash className="h-4 w-4" />
+						Delete Project
+					</DropdownMenuItem>
+					<DropdownMenuSeparator />
+					<DropdownMenuItem asChild>
+						<Link
+							href={SOCIAL_LINKS.discord}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="flex items-center gap-1.5"
+						>
+							<FaDiscord className="h-4 w-4" />
+							Discord
+						</Link>
+					</DropdownMenuItem>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<RenameProjectDialog
+				isOpen={isRenameDialogOpen}
+				onOpenChange={setIsRenameDialogOpen}
+				onConfirm={(newName) => handleSaveProjectName(newName)}
+				projectName={activeProject?.metadata.name || ""}
+			/>
+			<DeleteProjectDialog
+				isOpen={isDeleteDialogOpen}
+				onOpenChange={setIsDeleteDialogOpen}
+				onConfirm={handleDeleteProject}
+				projectName={activeProject?.metadata.name || ""}
+			/>
+		</>
+	);
 }
diff --git a/apps/web/src/components/editor/export-button.tsx b/apps/web/src/components/editor/export-button.tsx
index ec31a1ea..53e208ee 100644
--- a/apps/web/src/components/editor/export-button.tsx
+++ b/apps/web/src/components/editor/export-button.tsx
@@ -12,320 +12,318 @@ import { cn } from "@/utils/ui";
 import { getExportMimeType, getExportFileExtension } from "@/lib/export";
 import { Check, Copy, Download, RotateCcw, X } from "lucide-react";
 import {
-  EXPORT_FORMAT_VALUES,
-  EXPORT_QUALITY_VALUES,
-  ExportFormat,
-  ExportQuality,
-  ExportResult,
+	EXPORT_FORMAT_VALUES,
+	EXPORT_QUALITY_VALUES,
+	type ExportFormat,
+	type ExportQuality,
+	type ExportResult,
 } from "@/types/export";
 import { PropertyGroup } from "./properties-panel/property-item";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_EXPORT_OPTIONS } from "@/constants/export-constants";
 
 export function ExportButton() {
-  const [isExportPopoverOpen, setIsExportPopoverOpen] = useState(false);
-  const editor = useEditor();
+	const [isExportPopoverOpen, setIsExportPopoverOpen] = useState(false);
+	const editor = useEditor();
 
-  const handleExport = () => {
-    setIsExportPopoverOpen(true);
-  };
+	const handleExport = () => {
+		setIsExportPopoverOpen(true);
+	};
 
-  const hasProject = !!editor.project.getActive();
+	const hasProject = !!editor.project.getActive();
 
-  return (
-    <Popover open={isExportPopoverOpen} onOpenChange={setIsExportPopoverOpen}>
-      <PopoverTrigger asChild>
-        <button
-          type="button"
-          className={cn(
-            "flex items-center gap-1.5 rounded-md bg-[#38BDF8] px-[0.12rem] py-[0.12rem] text-white transition-all duration-200",
-            hasProject
-              ? "cursor-pointer hover:brightness-95"
-              : "cursor-not-allowed opacity-50",
-          )}
-          onClick={hasProject ? handleExport : undefined}
-          disabled={!hasProject}
-          onKeyDown={(event) => {
-            if (hasProject && (event.key === "Enter" || event.key === " ")) {
-              event.preventDefault();
-              handleExport();
-            }
-          }}
-        >
-          <div className="relative flex items-center gap-1.5 rounded-[0.8rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] px-4 py-1 shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
-            <TransitionUpIcon className="z-50" />
-            <span className="z-50 text-[0.875rem]">Export</span>
-            <div className="absolute top-0 left-0 z-10 flex h-full w-full items-center justify-center rounded-[0.8rem] bg-linear-to-t from-white/0 to-white/50">
-              <div className="absolute top-[0.08rem] z-50 h-[calc(100%-2px)] w-[calc(100%-2px)] rounded-[0.8rem] bg-linear-270 from-[#2567EC] to-[#37B6F7]"></div>
-            </div>
-          </div>
-        </button>
-      </PopoverTrigger>
-      {hasProject && <ExportPopover onOpenChange={setIsExportPopoverOpen} />}
-    </Popover>
-  );
+	return (
+		<Popover open={isExportPopoverOpen} onOpenChange={setIsExportPopoverOpen}>
+			<PopoverTrigger asChild>
+				<button
+					type="button"
+					className={cn(
+						"flex items-center gap-1.5 rounded-md bg-[#38BDF8] px-[0.12rem] py-[0.12rem] text-white transition-all duration-200",
+						hasProject
+							? "cursor-pointer hover:brightness-95"
+							: "cursor-not-allowed opacity-50",
+					)}
+					onClick={hasProject ? handleExport : undefined}
+					disabled={!hasProject}
+					onKeyDown={(event) => {
+						if (hasProject && (event.key === "Enter" || event.key === " ")) {
+							event.preventDefault();
+							handleExport();
+						}
+					}}
+				>
+					<div className="relative flex items-center gap-1.5 rounded-[0.8rem] bg-linear-270 from-[#2567EC] to-[#37B6F7] px-4 py-1 shadow-[0_1px_3px_0px_rgba(0,0,0,0.65)]">
+						<TransitionUpIcon className="z-50" />
+						<span className="z-50 text-[0.875rem]">Export</span>
+						<div className="absolute top-0 left-0 z-10 flex h-full w-full items-center justify-center rounded-[0.8rem] bg-linear-to-t from-white/0 to-white/50">
+							<div className="absolute top-[0.08rem] z-50 h-[calc(100%-2px)] w-[calc(100%-2px)] rounded-[0.8rem] bg-linear-270 from-[#2567EC] to-[#37B6F7]"></div>
+						</div>
+					</div>
+				</button>
+			</PopoverTrigger>
+			{hasProject && <ExportPopover onOpenChange={setIsExportPopoverOpen} />}
+		</Popover>
+	);
 }
 
 function ExportPopover({
-  onOpenChange,
+	onOpenChange,
 }: {
-  onOpenChange: (open: boolean) => void;
+	onOpenChange: (open: boolean) => void;
 }) {
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
-  const [format, setFormat] = useState<ExportFormat>(
-    DEFAULT_EXPORT_OPTIONS.format,
-  );
-  const [quality, setQuality] = useState<ExportQuality>(
-    DEFAULT_EXPORT_OPTIONS.quality,
-  );
-  const [includeAudio, setIncludeAudio] = useState<boolean>(
-    DEFAULT_EXPORT_OPTIONS.includeAudio || true,
-  );
-  const [isExporting, setIsExporting] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [exportResult, setExportResult] = useState<ExportResult | null>(null);
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const [format, setFormat] = useState<ExportFormat>(
+		DEFAULT_EXPORT_OPTIONS.format,
+	);
+	const [quality, setQuality] = useState<ExportQuality>(
+		DEFAULT_EXPORT_OPTIONS.quality,
+	);
+	const [includeAudio, setIncludeAudio] = useState<boolean>(
+		DEFAULT_EXPORT_OPTIONS.includeAudio || true,
+	);
+	const [isExporting, setIsExporting] = useState(false);
+	const [progress, setProgress] = useState(0);
+	const [exportResult, setExportResult] = useState<ExportResult | null>(null);
 
-  const handleExport = async () => {
-    if (!activeProject) return;
+	const handleExport = async () => {
+		if (!activeProject) return;
 
-    setIsExporting(true);
-    setProgress(0);
-    setExportResult(null);
+		setIsExporting(true);
+		setProgress(0);
+		setExportResult(null);
 
-    const result = await editor.project.export({
-      options: {
-        format,
-        quality,
-        fps: activeProject.settings.fps,
-        includeAudio,
-        onProgress: ({ progress }) => setProgress(progress),
-        onCancel: () => false, // TODO: add cancel functionality
-      },
-    });
+		const result = await editor.project.export({
+			options: {
+				format,
+				quality,
+				fps: activeProject.settings.fps,
+				includeAudio,
+				onProgress: ({ progress }) => setProgress(progress),
+				onCancel: () => false, // TODO: add cancel functionality
+			},
+		});
 
-    setIsExporting(false);
-    setExportResult(result);
+		setIsExporting(false);
+		setExportResult(result);
 
-    if (result.success && result.buffer) {
-      const mimeType = getExportMimeType({ format });
-      const extension = getExportFileExtension({ format });
-      const blob = new Blob([result.buffer], { type: mimeType });
-      const url = URL.createObjectURL(blob);
+		if (result.success && result.buffer) {
+			const mimeType = getExportMimeType({ format });
+			const extension = getExportFileExtension({ format });
+			const blob = new Blob([result.buffer], { type: mimeType });
+			const url = URL.createObjectURL(blob);
 
-      const a = document.createElement("a");
-      a.href = url;
-      a.download = `${activeProject.metadata.name}${extension}`;
-      document.body.appendChild(a);
-      a.click();
-      document.body.removeChild(a);
-      URL.revokeObjectURL(url);
+			const a = document.createElement("a");
+			a.href = url;
+			a.download = `${activeProject.metadata.name}${extension}`;
+			document.body.appendChild(a);
+			a.click();
+			document.body.removeChild(a);
+			URL.revokeObjectURL(url);
 
-      onOpenChange(false);
-      setExportResult(null);
-      setProgress(0);
-    }
-  };
+			onOpenChange(false);
+			setExportResult(null);
+			setProgress(0);
+		}
+	};
 
-  const handleClose = () => {
-    if (!isExporting) {
-      onOpenChange(false);
-      setExportResult(null);
-      setProgress(0);
-    }
-  };
+	const handleClose = () => {
+		if (!isExporting) {
+			onOpenChange(false);
+			setExportResult(null);
+			setProgress(0);
+		}
+	};
 
-  return (
-    <PopoverContent className="bg-background mr-4 flex w-80 flex-col gap-3">
-      <>
-        {exportResult && !exportResult.success ? (
-          <ExportError
-            error={exportResult.error || "Unknown error occurred"}
-            onRetry={handleExport}
-          />
-        ) : (
-          <>
-            <div className="flex items-center justify-between">
-              <h3 className="font-medium">
-                {isExporting ? "Exporting project" : "Export project"}
-              </h3>
-              <Button variant="text" size="icon" onClick={handleClose}>
-                <X className="text-foreground/85 !size-5" />
-              </Button>
-            </div>
+	return (
+		<PopoverContent className="bg-background mr-4 flex w-80 flex-col gap-3">
+			{exportResult && !exportResult.success ? (
+				<ExportError
+					error={exportResult.error || "Unknown error occurred"}
+					onRetry={handleExport}
+				/>
+			) : (
+				<>
+					<div className="flex items-center justify-between">
+						<h3 className="font-medium">
+							{isExporting ? "Exporting project" : "Export project"}
+						</h3>
+						<Button variant="text" size="icon" onClick={handleClose}>
+							<X className="text-foreground/85 !size-5" />
+						</Button>
+					</div>
 
-            <div className="flex flex-col gap-4">
-              {!isExporting && (
-                <>
-                  <div className="flex flex-col gap-3">
-                    <PropertyGroup
-                      title="Format"
-                      titleClassName="text-sm"
-                      defaultExpanded={false}
-                    >
-                      <RadioGroup
-                        value={format}
-                        onValueChange={(value) => {
-                          if (isExportFormat(value)) {
-                            setFormat(value);
-                          }
-                        }}
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="mp4" id="mp4" />
-                          <Label htmlFor="mp4">
-                            MP4 (H.264) - Better compatibility
-                          </Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="webm" id="webm" />
-                          <Label htmlFor="webm">
-                            WebM (VP9) - Smaller file size
-                          </Label>
-                        </div>
-                      </RadioGroup>
-                    </PropertyGroup>
+					<div className="flex flex-col gap-4">
+						{!isExporting && (
+							<>
+								<div className="flex flex-col gap-3">
+									<PropertyGroup
+										title="Format"
+										titleClassName="text-sm"
+										defaultExpanded={false}
+									>
+										<RadioGroup
+											value={format}
+											onValueChange={(value) => {
+												if (isExportFormat(value)) {
+													setFormat(value);
+												}
+											}}
+										>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="mp4" id="mp4" />
+												<Label htmlFor="mp4">
+													MP4 (H.264) - Better compatibility
+												</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="webm" id="webm" />
+												<Label htmlFor="webm">
+													WebM (VP9) - Smaller file size
+												</Label>
+											</div>
+										</RadioGroup>
+									</PropertyGroup>
 
-                    <PropertyGroup
-                      title="Quality"
-                      titleClassName="text-sm"
-                      defaultExpanded={false}
-                    >
-                      <RadioGroup
-                        value={quality}
-                        onValueChange={(value) => {
-                          if (isExportQuality(value)) {
-                            setQuality(value);
-                          }
-                        }}
-                      >
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="low" id="low" />
-                          <Label htmlFor="low">Low - Smallest file size</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="medium" id="medium" />
-                          <Label htmlFor="medium">Medium - Balanced</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="high" id="high" />
-                          <Label htmlFor="high">High - Recommended</Label>
-                        </div>
-                        <div className="flex items-center space-x-2">
-                          <RadioGroupItem value="very_high" id="very_high" />
-                          <Label htmlFor="very_high">
-                            Very High - Largest file size
-                          </Label>
-                        </div>
-                      </RadioGroup>
-                    </PropertyGroup>
+									<PropertyGroup
+										title="Quality"
+										titleClassName="text-sm"
+										defaultExpanded={false}
+									>
+										<RadioGroup
+											value={quality}
+											onValueChange={(value) => {
+												if (isExportQuality(value)) {
+													setQuality(value);
+												}
+											}}
+										>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="low" id="low" />
+												<Label htmlFor="low">Low - Smallest file size</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="medium" id="medium" />
+												<Label htmlFor="medium">Medium - Balanced</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="high" id="high" />
+												<Label htmlFor="high">High - Recommended</Label>
+											</div>
+											<div className="flex items-center space-x-2">
+												<RadioGroupItem value="very_high" id="very_high" />
+												<Label htmlFor="very_high">
+													Very High - Largest file size
+												</Label>
+											</div>
+										</RadioGroup>
+									</PropertyGroup>
 
-                    <PropertyGroup
-                      title="Audio"
-                      titleClassName="text-sm"
-                      defaultExpanded={false}
-                    >
-                      <div className="flex items-center space-x-2">
-                        <Checkbox
-                          id="include-audio"
-                          checked={includeAudio}
-                          onCheckedChange={(checked) =>
-                            setIncludeAudio(!!checked)
-                          }
-                        />
-                        <Label htmlFor="include-audio">
-                          Include audio in export
-                        </Label>
-                      </div>
-                    </PropertyGroup>
-                  </div>
+									<PropertyGroup
+										title="Audio"
+										titleClassName="text-sm"
+										defaultExpanded={false}
+									>
+										<div className="flex items-center space-x-2">
+											<Checkbox
+												id="include-audio"
+												checked={includeAudio}
+												onCheckedChange={(checked) =>
+													setIncludeAudio(!!checked)
+												}
+											/>
+											<Label htmlFor="include-audio">
+												Include audio in export
+											</Label>
+										</div>
+									</PropertyGroup>
+								</div>
 
-                  <Button onClick={handleExport} className="w-full gap-2">
-                    <Download className="h-4 w-4" />
-                    Export
-                  </Button>
-                </>
-              )}
+								<Button onClick={handleExport} className="w-full gap-2">
+									<Download className="h-4 w-4" />
+									Export
+								</Button>
+							</>
+						)}
 
-              {isExporting && (
-                <div className="space-y-4">
-                  <div className="flex flex-col">
-                    <div className="flex items-center justify-between text-center">
-                      <p className="text-muted-foreground mb-2 text-sm">
-                        {Math.round(progress * 100)}%
-                      </p>
-                      <p className="text-muted-foreground mb-2 text-sm">100%</p>
-                    </div>
-                    <Progress value={progress * 100} className="w-full" />
-                  </div>
+						{isExporting && (
+							<div className="space-y-4">
+								<div className="flex flex-col">
+									<div className="flex items-center justify-between text-center">
+										<p className="text-muted-foreground mb-2 text-sm">
+											{Math.round(progress * 100)}%
+										</p>
+										<p className="text-muted-foreground mb-2 text-sm">100%</p>
+									</div>
+									<Progress value={progress * 100} className="w-full" />
+								</div>
 
-                  <Button
-                    variant="outline"
-                    className="w-full rounded-md"
-                    onClick={() => {}}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              )}
-            </div>
-          </>
-        )}
-      </>
-    </PopoverContent>
-  );
+								<Button
+									variant="outline"
+									className="w-full rounded-md"
+									onClick={() => {}}
+								>
+									Cancel
+								</Button>
+							</div>
+						)}
+					</div>
+				</>
+			)}
+		</PopoverContent>
+	);
 }
 
 function isExportFormat(value: string): value is ExportFormat {
-  return EXPORT_FORMAT_VALUES.some((formatValue) => formatValue === value);
+	return EXPORT_FORMAT_VALUES.some((formatValue) => formatValue === value);
 }
 
 function isExportQuality(value: string): value is ExportQuality {
-  return EXPORT_QUALITY_VALUES.some((qualityValue) => qualityValue === value);
+	return EXPORT_QUALITY_VALUES.some((qualityValue) => qualityValue === value);
 }
 
 function ExportError({
-  error,
-  onRetry,
+	error,
+	onRetry,
 }: {
-  error: string;
-  onRetry: () => void;
+	error: string;
+	onRetry: () => void;
 }) {
-  const [copied, setCopied] = useState(false);
+	const [copied, setCopied] = useState(false);
 
-  const handleCopy = async () => {
-    await navigator.clipboard.writeText(error);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1000);
-  };
+	const handleCopy = async () => {
+		await navigator.clipboard.writeText(error);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1000);
+	};
 
-  return (
-    <div className="space-y-4">
-      <div className="flex flex-col gap-1.5">
-        <p className="text-destructive text-sm font-medium">Export failed</p>
-        <p className="text-muted-foreground text-xs">{error}</p>
-      </div>
+	return (
+		<div className="space-y-4">
+			<div className="flex flex-col gap-1.5">
+				<p className="text-destructive text-sm font-medium">Export failed</p>
+				<p className="text-muted-foreground text-xs">{error}</p>
+			</div>
 
-      <div className="flex gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 flex-1 text-xs"
-          onClick={handleCopy}
-        >
-          {copied ? <Check className="text-constructive" /> : <Copy />}
-          Copy
-        </Button>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 flex-1 text-xs"
-          onClick={onRetry}
-        >
-          <RotateCcw />
-          Retry
-        </Button>
-      </div>
-    </div>
-  );
+			<div className="flex gap-2">
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-8 flex-1 text-xs"
+					onClick={handleCopy}
+				>
+					{copied ? <Check className="text-constructive" /> : <Copy />}
+					Copy
+				</Button>
+				<Button
+					variant="outline"
+					size="sm"
+					className="h-8 flex-1 text-xs"
+					onClick={onRetry}
+				>
+					<RotateCcw />
+					Retry
+				</Button>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/layout-guide-overlay.tsx b/apps/web/src/components/editor/layout-guide-overlay.tsx
index 8fe18eff..b384f483 100644
--- a/apps/web/src/components/editor/layout-guide-overlay.tsx
+++ b/apps/web/src/components/editor/layout-guide-overlay.tsx
@@ -4,24 +4,24 @@ import { useEditorStore } from "@/stores/editor-store";
 import Image from "next/image";
 
 function TikTokGuide() {
-  return (
-    <div className="pointer-events-none absolute inset-0">
-      <Image
-        src="/platform-guides/tiktok-blueprint.png"
-        alt="TikTok layout guide"
-        className="absolute inset-0 h-full w-full object-contain"
-        draggable={false}
-        fill
-      />
-    </div>
-  );
+	return (
+		<div className="pointer-events-none absolute inset-0">
+			<Image
+				src="/platform-guides/tiktok-blueprint.png"
+				alt="TikTok layout guide"
+				className="absolute inset-0 h-full w-full object-contain"
+				draggable={false}
+				fill
+			/>
+		</div>
+	);
 }
 
 export function LayoutGuideOverlay() {
-  const { layoutGuide } = useEditorStore();
+	const { layoutGuide } = useEditorStore();
 
-  if (layoutGuide.platform === null) return null;
-  if (layoutGuide.platform === "tiktok") return <TikTokGuide />;
+	if (layoutGuide.platform === null) return null;
+	if (layoutGuide.platform === "tiktok") return <TikTokGuide />;
 
-  return null;
+	return null;
 }
diff --git a/apps/web/src/components/editor/migration-dialog.tsx b/apps/web/src/components/editor/migration-dialog.tsx
index 92474d40..47a60d3d 100644
--- a/apps/web/src/components/editor/migration-dialog.tsx
+++ b/apps/web/src/components/editor/migration-dialog.tsx
@@ -1,44 +1,44 @@
 "use client";
 
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
 } from "@/components/ui/dialog";
 import { useEditor } from "@/hooks/use-editor";
 import { Loader2 } from "lucide-react";
 
 export function MigrationDialog() {
-  const editor = useEditor();
-  const migrationState = editor.project.getMigrationState();
+	const editor = useEditor();
+	const migrationState = editor.project.getMigrationState();
 
-  if (!migrationState.isMigrating) return null;
+	if (!migrationState.isMigrating) return null;
 
-  const title = migrationState.projectName
-    ? "Updating project"
-    : "Updating projects";
-  const description = migrationState.projectName
-    ? `Upgrading "${migrationState.projectName}" from v${migrationState.fromVersion} to v${migrationState.toVersion}`
-    : `Upgrading projects from v${migrationState.fromVersion} to v${migrationState.toVersion}`;
+	const title = migrationState.projectName
+		? "Updating project"
+		: "Updating projects";
+	const description = migrationState.projectName
+		? `Upgrading "${migrationState.projectName}" from v${migrationState.fromVersion} to v${migrationState.toVersion}`
+		: `Upgrading projects from v${migrationState.fromVersion} to v${migrationState.toVersion}`;
 
-  return (
-    <Dialog open={true}>
-      <DialogContent
-        className="sm:max-w-md"
-        onPointerDownOutside={(event) => event.preventDefault()}
-        onEscapeKeyDown={(event) => event.preventDefault()}
-      >
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-          <DialogDescription>{description}</DialogDescription>
-        </DialogHeader>
+	return (
+		<Dialog open={true}>
+			<DialogContent
+				className="sm:max-w-md"
+				onPointerDownOutside={(event) => event.preventDefault()}
+				onEscapeKeyDown={(event) => event.preventDefault()}
+			>
+				<DialogHeader>
+					<DialogTitle>{title}</DialogTitle>
+					<DialogDescription>{description}</DialogDescription>
+				</DialogHeader>
 
-        <div className="flex items-center justify-center py-4">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
+				<div className="flex items-center justify-center py-4">
+					<Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
 }
diff --git a/apps/web/src/components/editor/onboarding.tsx b/apps/web/src/components/editor/onboarding.tsx
index 2346fde6..9d1a7272 100644
--- a/apps/web/src/components/editor/onboarding.tsx
+++ b/apps/web/src/components/editor/onboarding.tsx
@@ -1,141 +1,137 @@
 "use client";
 
-import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
-import { Button } from "../ui/button";
 import { ArrowRightIcon } from "lucide-react";
-import { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 import ReactMarkdown from "react-markdown";
 import { SOCIAL_LINKS } from "@/constants/site-constants";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogTitle } from "../ui/dialog";
 
 export function Onboarding() {
-  const [step, setStep] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
+	const [step, setStep] = useState(0);
+	const [isOpen, setIsOpen] = useState(false);
 
-  useEffect(() => {
-    const hasSeenOnboarding = localStorage.getItem("hasSeenOnboarding");
-    if (!hasSeenOnboarding) {
-      setIsOpen(true);
-    }
-  }, []);
+	useEffect(() => {
+		const hasSeenOnboarding = localStorage.getItem("hasSeenOnboarding");
+		if (!hasSeenOnboarding) {
+			setIsOpen(true);
+		}
+	}, []);
 
-  const handleNext = () => {
-    setStep(step + 1);
-  };
+	const handleNext = () => {
+		setStep(step + 1);
+	};
 
-  const handleClose = () => {
-    setIsOpen(false);
-    localStorage.setItem("hasSeenOnboarding", "true");
-  };
+	const handleClose = () => {
+		setIsOpen(false);
+		localStorage.setItem("hasSeenOnboarding", "true");
+	};
 
-  const getStepTitle = () => {
-    switch (step) {
-      case 0:
-        return "Welcome to OpenCut Beta! 🎉";
-      case 1:
-        return "⚠️ This is a super early beta!";
-      case 2:
-        return "🦋 Have fun testing!";
-      default:
-        return "OpenCut Onboarding";
-    }
-  };
+	const getStepTitle = () => {
+		switch (step) {
+			case 0:
+				return "Welcome to OpenCut Beta! 🎉";
+			case 1:
+				return "⚠️ This is a super early beta!";
+			case 2:
+				return "🦋 Have fun testing!";
+			default:
+				return "OpenCut Onboarding";
+		}
+	};
 
-  const renderStepContent = () => {
-    switch (step) {
-      case 0:
-        return (
-          <div className="space-y-5">
-            <div className="space-y-3">
-              <Title title="Welcome to OpenCut Beta! 🎉" />
-              <Description description="You're among the first to try OpenCut - the fully open source CapCut alternative." />
-            </div>
-            <NextButton onClick={handleNext}>Next</NextButton>
-          </div>
-        );
-      case 1:
-        return (
-          <div className="space-y-5">
-            <div className="space-y-3">
-              <Title title={getStepTitle()} />
-              <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
-              <Description description="A lot of features are still missing, like the export functionality. We're working hard to build them out!" />
-              <Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
-            </div>
-            <NextButton onClick={handleNext}>Next</NextButton>
-          </div>
-        );
-      case 2:
-        return (
-          <div className="space-y-5">
-            <div className="space-y-3">
-              <Title title={getStepTitle()} />
-              <Description
-                description={`Join our [Discord](${SOCIAL_LINKS.discord}), chat with cool people and share feedback to help make OpenCut the best editor ever.`}
-              />
-            </div>
-            <NextButton onClick={handleClose}>Finish</NextButton>
-          </div>
-        );
-      default:
-        return null;
-    }
-  };
+	const renderStepContent = () => {
+		switch (step) {
+			case 0:
+				return (
+					<div className="space-y-5">
+						<div className="space-y-3">
+							<Title title="Welcome to OpenCut Beta! 🎉" />
+							<Description description="You're among the first to try OpenCut - the fully open source CapCut alternative." />
+						</div>
+						<NextButton onClick={handleNext}>Next</NextButton>
+					</div>
+				);
+			case 1:
+				return (
+					<div className="space-y-5">
+						<div className="space-y-3">
+							<Title title={getStepTitle()} />
+							<Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
+							<Description description="A lot of features are still missing, like the export functionality. We're working hard to build them out!" />
+							<Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
+						</div>
+						<NextButton onClick={handleNext}>Next</NextButton>
+					</div>
+				);
+			case 2:
+				return (
+					<div className="space-y-5">
+						<div className="space-y-3">
+							<Title title={getStepTitle()} />
+							<Description
+								description={`Join our [Discord](${SOCIAL_LINKS.discord}), chat with cool people and share feedback to help make OpenCut the best editor ever.`}
+							/>
+						</div>
+						<NextButton onClick={handleClose}>Finish</NextButton>
+					</div>
+				);
+			default:
+				return null;
+		}
+	};
 
-  return (
-    <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="pt-2 !outline-none sm:max-w-[425px]">
-        <DialogTitle>
-          <span className="sr-only">{getStepTitle()}</span>
-        </DialogTitle>
-        {renderStepContent()}
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog open={isOpen} onOpenChange={handleClose}>
+			<DialogContent className="pt-2 !outline-none sm:max-w-[425px]">
+				<DialogTitle>
+					<span className="sr-only">{getStepTitle()}</span>
+				</DialogTitle>
+				{renderStepContent()}
+			</DialogContent>
+		</Dialog>
+	);
 }
 
 function Title({ title }: { title: string }) {
-  return <h2 className="text-lg font-bold md:text-xl">{title}</h2>;
-}
-
-function Subtitle({ subtitle }: { subtitle: string }) {
-  return <h3 className="text-lg font-medium">{subtitle}</h3>;
+	return <h2 className="text-lg font-bold md:text-xl">{title}</h2>;
 }
 
 function Description({ description }: { description: string }) {
-  return (
-    <div className="text-muted-foreground">
-      <ReactMarkdown
-        components={{
-          p: ({ children }) => <p className="mb-0">{children}</p>,
-          a: ({ href, children }) => (
-            <a
-              href={href}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-foreground hover:text-foreground/80 underline"
-            >
-              {children}
-            </a>
-          ),
-        }}
-      >
-        {description}
-      </ReactMarkdown>
-    </div>
-  );
+	return (
+		<div className="text-muted-foreground">
+			<ReactMarkdown
+				components={{
+					p: ({ children }) => <p className="mb-0">{children}</p>,
+					a: ({ href, children }) => (
+						<a
+							href={href}
+							target="_blank"
+							rel="noopener noreferrer"
+							className="text-foreground hover:text-foreground/80 underline"
+						>
+							{children}
+						</a>
+					),
+				}}
+			>
+				{description}
+			</ReactMarkdown>
+		</div>
+	);
 }
 
 function NextButton({
-  children,
-  onClick,
+	children,
+	onClick,
 }: {
-  children: React.ReactNode;
-  onClick: () => void;
+	children: React.ReactNode;
+	onClick: () => void;
 }) {
-  return (
-    <Button onClick={onClick} variant="default" className="w-full">
-      {children}
-      <ArrowRightIcon className="h-4 w-4" />
-    </Button>
-  );
+	return (
+		<Button onClick={onClick} variant="default" className="w-full">
+			{children}
+			<ArrowRightIcon className="h-4 w-4" />
+		</Button>
+	);
 }
diff --git a/apps/web/src/components/editor/panel-base-view.tsx b/apps/web/src/components/editor/panel-base-view.tsx
index 8ab1f994..b16d1db6 100644
--- a/apps/web/src/components/editor/panel-base-view.tsx
+++ b/apps/web/src/components/editor/panel-base-view.tsx
@@ -4,82 +4,82 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { cn } from "@/utils/ui";
 
 interface PanelBaseViewProps {
-  children?: React.ReactNode;
-  defaultTab?: string;
-  value?: string;
-  onValueChange?: (value: string) => void;
-  tabs?: {
-    value: string;
-    label: string;
-    icon?: React.ReactNode;
-    content: React.ReactNode;
-  }[];
-  className?: string;
-  ref?: React.RefObject<HTMLDivElement>;
+	children?: React.ReactNode;
+	defaultTab?: string;
+	value?: string;
+	onValueChange?: (value: string) => void;
+	tabs?: {
+		value: string;
+		label: string;
+		icon?: React.ReactNode;
+		content: React.ReactNode;
+	}[];
+	className?: string;
+	ref?: React.RefObject<HTMLDivElement>;
 }
 
 function ViewContent({
-  children,
-  className,
+	children,
+	className,
 }: {
-  children: React.ReactNode;
-  className?: string;
+	children: React.ReactNode;
+	className?: string;
 }) {
-  return (
-    <ScrollArea className="flex-1">
-      <div className={cn("p-5", className)}>{children}</div>
-    </ScrollArea>
-  );
+	return (
+		<ScrollArea className="flex-1">
+			<div className={cn("p-5", className)}>{children}</div>
+		</ScrollArea>
+	);
 }
 
 export function PanelBaseView({
-  children,
-  defaultTab,
-  value,
-  onValueChange,
-  tabs,
-  className = "",
-  ref,
+	children,
+	defaultTab,
+	value,
+	onValueChange,
+	tabs,
+	className = "",
+	ref,
 }: PanelBaseViewProps) {
-  return (
-    <div className={cn("flex h-full flex-col", className)} ref={ref}>
-      {!tabs || tabs.length === 0 ? (
-        <ViewContent className={className}>{children}</ViewContent>
-      ) : (
-        <Tabs
-          defaultValue={defaultTab}
-          value={value}
-          onValueChange={onValueChange}
-          className="flex h-full flex-col"
-        >
-          <div className="bg-panel sticky top-0 z-10">
-            <div className="px-3 pt-3 pb-0">
-              <TabsList>
-                {tabs.map((tab) => (
-                  <TabsTrigger key={tab.value} value={tab.value}>
-                    {tab.icon ? (
-                      <span className="mr-1 inline-flex items-center">
-                        {tab.icon}
-                      </span>
-                    ) : null}
-                    {tab.label}
-                  </TabsTrigger>
-                ))}
-              </TabsList>
-            </div>
-            <Separator className="mt-3" />
-          </div>
-          {tabs.map((tab) => (
-            <TabsContent
-              key={tab.value}
-              value={tab.value}
-              className="mt-0 flex min-h-0 flex-1 flex-col"
-            >
-              <ViewContent className={className}>{tab.content}</ViewContent>
-            </TabsContent>
-          ))}
-        </Tabs>
-      )}
-    </div>
-  );
+	return (
+		<div className={cn("flex h-full flex-col", className)} ref={ref}>
+			{!tabs || tabs.length === 0 ? (
+				<ViewContent className={className}>{children}</ViewContent>
+			) : (
+				<Tabs
+					defaultValue={defaultTab}
+					value={value}
+					onValueChange={onValueChange}
+					className="flex h-full flex-col"
+				>
+					<div className="bg-panel sticky top-0 z-10">
+						<div className="px-3 pt-3 pb-0">
+							<TabsList>
+								{tabs.map((tab) => (
+									<TabsTrigger key={tab.value} value={tab.value}>
+										{tab.icon ? (
+											<span className="mr-1 inline-flex items-center">
+												{tab.icon}
+											</span>
+										) : null}
+										{tab.label}
+									</TabsTrigger>
+								))}
+							</TabsList>
+						</div>
+						<Separator className="mt-3" />
+					</div>
+					{tabs.map((tab) => (
+						<TabsContent
+							key={tab.value}
+							value={tab.value}
+							className="mt-0 flex min-h-0 flex-1 flex-col"
+						>
+							<ViewContent className={className}>{tab.content}</ViewContent>
+						</TabsContent>
+					))}
+				</Tabs>
+			)}
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index be850833..53985c64 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -1,114 +1,114 @@
 "use client";
 
-import useDeepCompareEffect from "use-deep-compare-effect";
 import { useCallback, useMemo, useRef } from "react";
-import { useRafLoop } from "@/hooks/use-raf-loop";
-import { RootNode } from "@/services/renderer/nodes/root-node";
-import { CanvasRenderer } from "@/services/renderer/canvas-renderer";
-import { buildScene } from "@/services/renderer/scene-builder";
+import useDeepCompareEffect from "use-deep-compare-effect";
 import { useEditor } from "@/hooks/use-editor";
+import { useRafLoop } from "@/hooks/use-raf-loop";
+import { CanvasRenderer } from "@/services/renderer/canvas-renderer";
+import type { RootNode } from "@/services/renderer/nodes/root-node";
+import { buildScene } from "@/services/renderer/scene-builder";
 
 function usePreviewSize() {
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
 
-  return {
-    width: activeProject?.settings.canvasSize.width,
-    height: activeProject?.settings.canvasSize.height,
-  };
+	return {
+		width: activeProject?.settings.canvasSize.width,
+		height: activeProject?.settings.canvasSize.height,
+	};
 }
 
 function RenderTreeController() {
-  const editor = useEditor();
-  const tracks = editor.timeline.getTracks();
-  const mediaAssets = editor.media.getAssets();
-  const activeProject = editor.project.getActive();
+	const editor = useEditor();
+	const tracks = editor.timeline.getTracks();
+	const mediaAssets = editor.media.getAssets();
+	const activeProject = editor.project.getActive();
 
-  const { width, height } = usePreviewSize();
+	const { width, height } = usePreviewSize();
 
-  useDeepCompareEffect(() => {
-    if (!activeProject) return;
+	useDeepCompareEffect(() => {
+		if (!activeProject) return;
 
-    const duration = editor.timeline.getTotalDuration();
-    const renderTree = buildScene({
-      tracks,
-      mediaAssets,
-      duration,
-      canvasSize: { width, height },
-      background: activeProject.settings.background,
-    });
+		const duration = editor.timeline.getTotalDuration();
+		const renderTree = buildScene({
+			tracks,
+			mediaAssets,
+			duration,
+			canvasSize: { width, height },
+			background: activeProject.settings.background,
+		});
 
-    editor.renderer.setRenderTree({ renderTree });
-  }, [tracks, mediaAssets, activeProject?.settings.background, width, height]);
+		editor.renderer.setRenderTree({ renderTree });
+	}, [tracks, mediaAssets, activeProject?.settings.background, width, height]);
 
-  return null;
+	return null;
 }
 
 export function PreviewPanel() {
-  return (
-    <div className="bg-panel relative flex h-full min-h-0 w-full min-w-0 flex-col rounded-sm">
-      <div className="flex min-h-0 min-w-0 flex-1 items-center justify-center p-2">
-        <PreviewCanvas />
-        <RenderTreeController />
-      </div>
-    </div>
-  );
+	return (
+		<div className="bg-panel relative flex h-full min-h-0 w-full min-w-0 flex-col rounded-sm">
+			<div className="flex min-h-0 min-w-0 flex-1 items-center justify-center p-2">
+				<PreviewCanvas />
+				<RenderTreeController />
+			</div>
+		</div>
+	);
 }
 
 function PreviewCanvas() {
-  const ref = useRef<HTMLCanvasElement>(null);
-  const lastFrameRef = useRef(-1);
-  const lastSceneRef = useRef<RootNode | null>(null);
-  const renderingRef = useRef(false);
-  const { width, height } = usePreviewSize();
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
+	const ref = useRef<HTMLCanvasElement>(null);
+	const lastFrameRef = useRef(-1);
+	const lastSceneRef = useRef<RootNode | null>(null);
+	const renderingRef = useRef(false);
+	const { width, height } = usePreviewSize();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
 
-  const renderer = useMemo(() => {
-    return new CanvasRenderer({
-      width,
-      height,
-      fps: activeProject.settings.fps,
-    });
-  }, [width, height, activeProject.settings.fps]);
+	const renderer = useMemo(() => {
+		return new CanvasRenderer({
+			width,
+			height,
+			fps: activeProject.settings.fps,
+		});
+	}, [width, height, activeProject.settings.fps]);
 
-  const renderTree = editor.renderer.getRenderTree();
+	const renderTree = editor.renderer.getRenderTree();
 
-  const render = useCallback(() => {
-    if (ref.current && renderTree && !renderingRef.current) {
-      const time = editor.playback.getCurrentTime();
-      const frame = Math.floor(time * renderer.fps);
+	const render = useCallback(() => {
+		if (ref.current && renderTree && !renderingRef.current) {
+			const time = editor.playback.getCurrentTime();
+			const frame = Math.floor(time * renderer.fps);
 
-      if (
-        frame !== lastFrameRef.current ||
-        renderTree !== lastSceneRef.current
-      ) {
-        renderingRef.current = true;
-        lastSceneRef.current = renderTree;
-        lastFrameRef.current = frame;
-        renderer
-          .renderToCanvas({ node: renderTree, time, targetCanvas: ref.current })
-          .then(() => {
-            renderingRef.current = false;
-          });
-      }
-    }
-  }, [renderer, renderTree, editor.playback]);
+			if (
+				frame !== lastFrameRef.current ||
+				renderTree !== lastSceneRef.current
+			) {
+				renderingRef.current = true;
+				lastSceneRef.current = renderTree;
+				lastFrameRef.current = frame;
+				renderer
+					.renderToCanvas({ node: renderTree, time, targetCanvas: ref.current })
+					.then(() => {
+						renderingRef.current = false;
+					});
+			}
+		}
+	}, [renderer, renderTree, editor.playback]);
 
-  useRafLoop(render);
+	useRafLoop(render);
 
-  return (
-    <canvas
-      ref={ref}
-      width={width}
-      height={height}
-      className="block max-h-full max-w-full border"
-      style={{
-        background:
-          activeProject.settings.background.type === "blur"
-            ? "transparent"
-            : activeProject?.settings.background.color,
-      }}
-    />
-  );
+	return (
+		<canvas
+			ref={ref}
+			width={width}
+			height={height}
+			className="block max-h-full max-w-full border"
+			style={{
+				background:
+					activeProject.settings.background.type === "blur"
+						? "transparent"
+						: activeProject?.settings.background.color,
+			}}
+		/>
+	);
 }
diff --git a/apps/web/src/components/editor/properties-panel/audio-properties.tsx b/apps/web/src/components/editor/properties-panel/audio-properties.tsx
index fda6279a..0b83a4b6 100644
--- a/apps/web/src/components/editor/properties-panel/audio-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/audio-properties.tsx
@@ -1,5 +1,5 @@
-import { AudioElement } from "@/types/timeline";
+import type { AudioElement } from "@/types/timeline";
 
-export function AudioProperties({ element }: { element: AudioElement }) {
-  return <div className="space-y-4 p-5">Audio properties</div>;
+export function AudioProperties({ _element }: { _element: AudioElement }) {
+	return <div className="space-y-4 p-5">Audio properties</div>;
 }
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index abd42dff..66b84f86 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -9,58 +9,58 @@ import { useEditor } from "@/hooks/use-editor";
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 
 export function PropertiesPanel() {
-  const editor = useEditor();
-  const { selectedElements } = useElementSelection();
+	const editor = useEditor();
+	const { selectedElements } = useElementSelection();
 
-  const elementsWithTracks = editor.timeline.getElementsWithTracks({
-    elements: selectedElements,
-  });
+	const elementsWithTracks = editor.timeline.getElementsWithTracks({
+		elements: selectedElements,
+	});
 
-  return (
-    <>
-      {selectedElements.length > 0 ? (
-        <ScrollArea className="bg-panel h-full rounded-sm">
-          {elementsWithTracks.map(({ track, element }) => {
-            if (element.type === "text") {
-              return (
-                <div key={element.id}>
-                  <TextProperties element={element} trackId={track.id} />
-                </div>
-              );
-            }
-            if (element.type === "audio") {
-              return <AudioProperties key={element.id} element={element} />;
-            }
-            if (element.type === "video" || element.type === "image") {
-              return (
-                <div key={element.id}>
-                  <VideoProperties element={element} />
-                </div>
-              );
-            }
-            return null;
-          })}
-        </ScrollArea>
-      ) : (
-        <EmptyView />
-      )}
-    </>
-  );
+	return (
+		<>
+			{selectedElements.length > 0 ? (
+				<ScrollArea className="bg-panel h-full rounded-sm">
+					{elementsWithTracks.map(({ track, element }) => {
+						if (element.type === "text") {
+							return (
+								<div key={element.id}>
+									<TextProperties element={element} trackId={track.id} />
+								</div>
+							);
+						}
+						if (element.type === "audio") {
+							return <AudioProperties key={element.id} element={element} />;
+						}
+						if (element.type === "video" || element.type === "image") {
+							return (
+								<div key={element.id}>
+									<VideoProperties element={element} />
+								</div>
+							);
+						}
+						return null;
+					})}
+				</ScrollArea>
+			) : (
+				<EmptyView />
+			)}
+		</>
+	);
 }
 
 function EmptyView() {
-  return (
-    <div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
-      <SquareSlashIcon
-        className="text-muted-foreground h-10 w-10"
-        strokeWidth={1.5}
-      />
-      <div className="flex flex-col gap-2 text-center">
-        <p className="text-lg font-medium">It’s empty here</p>
-        <p className="text-muted-foreground text-sm text-balance">
-          Click an element on the timeline to edit its properties
-        </p>
-      </div>
-    </div>
-  );
+	return (
+		<div className="bg-panel flex h-full flex-col items-center justify-center gap-3 p-4">
+			<SquareSlashIcon
+				className="text-muted-foreground h-10 w-10"
+				strokeWidth={1.5}
+			/>
+			<div className="flex flex-col gap-2 text-center">
+				<p className="text-lg font-medium">It’s empty here</p>
+				<p className="text-muted-foreground text-sm text-balance">
+					Click an element on the timeline to edit its properties
+				</p>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
index aa8a5489..1ff8e6f9 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/apps/web/src/components/editor/properties-panel/property-item.tsx
@@ -1,86 +1,87 @@
-import { cn } from "@/utils/ui";
 import { ChevronDown } from "lucide-react";
 import { useState } from "react";
+import { cn } from "@/utils/ui";
 
 interface PropertyItemProps {
-  direction?: "row" | "column";
-  children: React.ReactNode;
-  className?: string;
+	direction?: "row" | "column";
+	children: React.ReactNode;
+	className?: string;
 }
 
 export function PropertyItem({
-  direction = "row",
-  children,
-  className,
+	direction = "row",
+	children,
+	className,
 }: PropertyItemProps) {
-  return (
-    <div
-      className={cn(
-        "flex gap-2",
-        direction === "row"
-          ? "items-center justify-between gap-6"
-          : "flex-col gap-1.5",
-        className,
-      )}
-    >
-      {children}
-    </div>
-  );
+	return (
+		<div
+			className={cn(
+				"flex gap-2",
+				direction === "row"
+					? "items-center justify-between gap-6"
+					: "flex-col gap-1.5",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
 }
 
 export function PropertyItemLabel({
-  children,
-  className,
+	children,
+	className,
 }: {
-  children: React.ReactNode;
-  className?: string;
+	children: React.ReactNode;
+	className?: string;
 }) {
-  return (
-    <label className={cn("text-muted-foreground text-xs", className)}>
-      {children}
-    </label>
-  );
+	return (
+		<span className={cn("text-muted-foreground text-xs", className)}>
+			{children}
+		</span>
+	);
 }
 
 export function PropertyItemValue({
-  children,
-  className,
+	children,
+	className,
 }: {
-  children: React.ReactNode;
-  className?: string;
+	children: React.ReactNode;
+	className?: string;
 }) {
-  return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
+	return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
 }
 
 interface PropertyGroupProps {
-  title: string;
-  children: React.ReactNode;
-  defaultExpanded?: boolean;
-  className?: string;
-  titleClassName?: string;
+	title: string;
+	children: React.ReactNode;
+	defaultExpanded?: boolean;
+	className?: string;
+	titleClassName?: string;
 }
 
 export function PropertyGroup({
-  title,
-  children,
-  defaultExpanded = true,
-  className,
-  titleClassName,
+	title,
+	children,
+	defaultExpanded = true,
+	className,
+	titleClassName,
 }: PropertyGroupProps) {
-  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+	const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
-  return (
-    <PropertyItem direction="column" className={cn("gap-3", className)}>
-      <div
-        className="flex cursor-pointer items-center gap-1.5"
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <PropertyItemLabel className={cn("cursor-pointer", titleClassName)}>
-          {title}
-        </PropertyItemLabel>
-        <ChevronDown className={cn("size-3", !isExpanded && "-rotate-90")} />
-      </div>
-      {isExpanded && <PropertyItemValue>{children}</PropertyItemValue>}
-    </PropertyItem>
-  );
+	return (
+		<PropertyItem direction="column" className={cn("gap-3", className)}>
+			<button
+				type="button"
+				className="flex items-center gap-1.5"
+				onClick={() => setIsExpanded(!isExpanded)}
+			>
+				<PropertyItemLabel className={cn("cursor-pointer", titleClassName)}>
+					{title}
+				</PropertyItemLabel>
+				<ChevronDown className={cn("size-3", !isExpanded && "-rotate-90")} />
+			</button>
+			{isExpanded && <PropertyItemValue>{children}</PropertyItemValue>}
+		</PropertyItem>
+	);
 }
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index 3ecb90d5..53e6936d 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -1,21 +1,21 @@
 import { Textarea } from "@/components/ui/textarea";
 import { FontPicker } from "@/components/ui/font-picker";
-import { FontFamily } from "@/constants/font-constants";
-import { TextElement } from "@/types/timeline";
+import type { FontFamily } from "@/constants/font-constants";
+import type { TextElement } from "@/types/timeline";
 import { Slider } from "@/components/ui/slider";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { useState, useRef } from "react";
 import { PanelBaseView } from "@/components/editor/panel-base-view";
 import {
-  TEXT_PROPERTIES_TABS,
-  isTextPropertiesTab,
-  useTextPropertiesStore,
+	TEXT_PROPERTIES_TABS,
+	isTextPropertiesTab,
+	useTextPropertiesStore,
 } from "@/stores/text-properties-store";
 import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
+	PropertyItem,
+	PropertyItemLabel,
+	PropertyItemValue,
 } from "./property-item";
 import { ColorPicker } from "@/components/ui/color-picker";
 import { cn } from "@/utils/ui";
@@ -23,386 +23,386 @@ import { capitalizeFirstLetter, uppercase } from "@/utils/strings";
 import { clamp } from "@/utils/math";
 import { Grid2x2 } from "lucide-react";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { useEditor } from "@/hooks/use-editor";
 import { DEFAULT_COLOR } from "@/constants/project-constants";
 
 export function TextProperties({
-  element,
-  trackId,
+	element,
+	trackId,
 }: {
-  element: TextElement;
-  trackId: string;
+	element: TextElement;
+	trackId: string;
 }) {
-  const editor = useEditor();
-  const { activeTab, setActiveTab } = useTextPropertiesStore();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [fontSizeInput, setFontSizeInput] = useState(
-    element.fontSize.toString(),
-  );
-  const [opacityInput, setOpacityInput] = useState(
-    Math.round(element.opacity * 100).toString(),
-  );
+	const editor = useEditor();
+	const { activeTab, setActiveTab } = useTextPropertiesStore();
+	const containerRef = useRef<HTMLDivElement>(null);
+	const [fontSizeInput, setFontSizeInput] = useState(
+		element.fontSize.toString(),
+	);
+	const [opacityInput, setOpacityInput] = useState(
+		Math.round(element.opacity * 100).toString(),
+	);
 
-  const lastSelectedColor = useRef(DEFAULT_COLOR);
+	const lastSelectedColor = useRef(DEFAULT_COLOR);
 
-  const handleFontSizeChange = ({ value }: { value: string }) => {
-    setFontSizeInput(value);
+	const handleFontSizeChange = ({ value }: { value: string }) => {
+		setFontSizeInput(value);
 
-    if (value.trim() !== "") {
-      const parsed = parseInt(value, 10);
-      const fontSize = isNaN(parsed)
-        ? element.fontSize
-        : clamp({ value: parsed, min: 8, max: 300 });
-      editor.timeline.updateTextElement({
-        trackId,
-        elementId: element.id,
-        updates: { fontSize },
-      });
-    }
-  };
+		if (value.trim() !== "") {
+			const parsed = parseInt(value, 10);
+			const fontSize = Number.isNaN(parsed)
+				? element.fontSize
+				: clamp({ value: parsed, min: 8, max: 300 });
+			editor.timeline.updateTextElement({
+				trackId,
+				elementId: element.id,
+				updates: { fontSize },
+			});
+		}
+	};
 
-  const handleFontSizeBlur = () => {
-    const parsed = parseInt(fontSizeInput, 10);
-    const fontSize = isNaN(parsed)
-      ? element.fontSize
-      : clamp({ value: parsed, min: 8, max: 300 });
-    setFontSizeInput(fontSize.toString());
-    editor.timeline.updateTextElement({
-      trackId,
-      elementId: element.id,
-      updates: { fontSize },
-    });
-  };
+	const handleFontSizeBlur = () => {
+		const parsed = parseInt(fontSizeInput, 10);
+		const fontSize = Number.isNaN(parsed)
+			? element.fontSize
+			: clamp({ value: parsed, min: 8, max: 300 });
+		setFontSizeInput(fontSize.toString());
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { fontSize },
+		});
+	};
 
-  const handleOpacityChange = ({ value }: { value: string }) => {
-    setOpacityInput(value);
+	const handleOpacityChange = ({ value }: { value: string }) => {
+		setOpacityInput(value);
 
-    if (value.trim() !== "") {
-      const parsed = parseInt(value, 10);
-      const opacityPercent = isNaN(parsed)
-        ? Math.round(element.opacity * 100)
-        : clamp({ value: parsed, min: 0, max: 100 });
-      editor.timeline.updateTextElement({
-        trackId,
-        elementId: element.id,
-        updates: { opacity: opacityPercent / 100 },
-      });
-    }
-  };
+		if (value.trim() !== "") {
+			const parsed = parseInt(value, 10);
+			const opacityPercent = Number.isNaN(parsed)
+				? Math.round(element.opacity * 100)
+				: clamp({ value: parsed, min: 0, max: 100 });
+			editor.timeline.updateTextElement({
+				trackId,
+				elementId: element.id,
+				updates: { opacity: opacityPercent / 100 },
+			});
+		}
+	};
 
-  const handleOpacityBlur = () => {
-    const parsed = parseInt(opacityInput, 10);
-    const opacityPercent = isNaN(parsed)
-      ? Math.round(element.opacity * 100)
-      : clamp({ value: parsed, min: 0, max: 100 });
-    setOpacityInput(opacityPercent.toString());
-    editor.timeline.updateTextElement({
-      trackId,
-      elementId: element.id,
-      updates: { opacity: opacityPercent / 100 },
-    });
-  };
+	const handleOpacityBlur = () => {
+		const parsed = parseInt(opacityInput, 10);
+		const opacityPercent = Number.isNaN(parsed)
+			? Math.round(element.opacity * 100)
+			: clamp({ value: parsed, min: 0, max: 100 });
+		setOpacityInput(opacityPercent.toString());
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { opacity: opacityPercent / 100 },
+		});
+	};
 
-  const handleColorChange = ({ color }: { color: string }) => {
-    if (color !== "transparent") {
-      lastSelectedColor.current = color;
-    }
-    editor.timeline.updateTextElement({
-      trackId,
-      elementId: element.id,
-      updates: { backgroundColor: color },
-    });
-  };
+	const handleColorChange = ({ color }: { color: string }) => {
+		if (color !== "transparent") {
+			lastSelectedColor.current = color;
+		}
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { backgroundColor: color },
+		});
+	};
 
-  const handleTransparentToggle = ({
-    isTransparent,
-  }: {
-    isTransparent: boolean;
-  }) => {
-    const newColor = isTransparent ? "transparent" : lastSelectedColor.current;
-    editor.timeline.updateTextElement({
-      trackId,
-      elementId: element.id,
-      updates: { backgroundColor: newColor },
-    });
-  };
+	const handleTransparentToggle = ({
+		isTransparent,
+	}: {
+		isTransparent: boolean;
+	}) => {
+		const newColor = isTransparent ? "transparent" : lastSelectedColor.current;
+		editor.timeline.updateTextElement({
+			trackId,
+			elementId: element.id,
+			updates: { backgroundColor: newColor },
+		});
+	};
 
-  return (
-    <PanelBaseView
-      defaultTab="transform"
-      value={activeTab}
-      onValueChange={(v) => {
-        if (isTextPropertiesTab(v)) setActiveTab(v);
-      }}
-      ref={containerRef}
-      tabs={TEXT_PROPERTIES_TABS.map((t) => ({
-        value: t.value,
-        label: t.label,
-        content:
-          t.value === "transform" ? (
-            <div className="space-y-6"></div>
-          ) : (
-            <div className="space-y-6">
-              <Textarea
-                placeholder="Name"
-                defaultValue={element.content}
-                className="bg-panel-accent min-h-18 resize-none"
-                onChange={(e) =>
-                  editor.timeline.updateTextElement({
-                    trackId,
-                    elementId: element.id,
-                    updates: { content: e.target.value },
-                  })
-                }
-              />
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Font</PropertyItemLabel>
-                <PropertyItemValue>
-                  <FontPicker
-                    defaultValue={element.fontFamily}
-                    onValueChange={(value: FontFamily) =>
-                      editor.timeline.updateTextElement({
-                        trackId,
-                        elementId: element.id,
-                        updates: { fontFamily: value },
-                      })
-                    }
-                  />
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Style</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <Button
-                      variant={
-                        element.fontWeight === "bold" ? "default" : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        editor.timeline.updateTextElement({
-                          trackId,
-                          elementId: element.id,
-                          updates: {
-                            fontWeight:
-                              element.fontWeight === "bold" ? "normal" : "bold",
-                          },
-                        })
-                      }
-                      className="h-8 px-3 font-bold"
-                    >
-                      B
-                    </Button>
-                    <Button
-                      variant={
-                        element.fontStyle === "italic" ? "default" : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        editor.timeline.updateTextElement({
-                          trackId,
-                          elementId: element.id,
-                          updates: {
-                            fontStyle:
-                              element.fontStyle === "italic"
-                                ? "normal"
-                                : "italic",
-                          },
-                        })
-                      }
-                      className="h-8 px-3 italic"
-                    >
-                      I
-                    </Button>
-                    <Button
-                      variant={
-                        element.textDecoration === "underline"
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        editor.timeline.updateTextElement({
-                          trackId,
-                          elementId: element.id,
-                          updates: {
-                            textDecoration:
-                              element.textDecoration === "underline"
-                                ? "none"
-                                : "underline",
-                          },
-                        })
-                      }
-                      className="h-8 px-3 underline"
-                    >
-                      U
-                    </Button>
-                    <Button
-                      variant={
-                        element.textDecoration === "line-through"
-                          ? "default"
-                          : "outline"
-                      }
-                      size="sm"
-                      onClick={() =>
-                        editor.timeline.updateTextElement({
-                          trackId,
-                          elementId: element.id,
-                          updates: {
-                            textDecoration:
-                              element.textDecoration === "line-through"
-                                ? "none"
-                                : "line-through",
-                          },
-                        })
-                      }
-                      className="h-8 px-3 line-through"
-                    >
-                      S
-                    </Button>
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Font size</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <Slider
-                      value={[element.fontSize]}
-                      min={8}
-                      max={300}
-                      step={1}
-                      onValueChange={([value]) => {
-                        editor.timeline.updateTextElement({
-                          trackId,
-                          elementId: element.id,
-                          updates: { fontSize: value },
-                        });
-                        setFontSizeInput(value.toString());
-                      }}
-                      className="w-full"
-                    />
-                    <Input
-                      type="number"
-                      value={fontSizeInput}
-                      min={8}
-                      max={300}
-                      onChange={(e) =>
-                        handleFontSizeChange({ value: e.target.value })
-                      }
-                      onBlur={handleFontSizeBlur}
-                      className="bg-panel-accent h-7 w-12 [appearance:textfield] rounded-sm px-2 text-center !text-xs [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                    />
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Color</PropertyItemLabel>
-                <PropertyItemValue>
-                  <ColorPicker
-                    value={uppercase({
-                      string: (element.color || "FFFFFF").replace("#", ""),
-                    })}
-                    onChange={(color) => {
-                      editor.timeline.updateTextElement({
-                        trackId,
-                        elementId: element.id,
-                        updates: { color: `#${color}` },
-                      });
-                    }}
-                    containerRef={containerRef}
-                  />
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Opacity</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <Slider
-                      value={[element.opacity * 100]}
-                      min={0}
-                      max={100}
-                      step={1}
-                      onValueChange={([value]) => {
-                        editor.timeline.updateTextElement({
-                          trackId,
-                          elementId: element.id,
-                          updates: { opacity: value / 100 },
-                        });
-                        setOpacityInput(value.toString());
-                      }}
-                      className="w-full"
-                    />
-                    <Input
-                      type="number"
-                      value={opacityInput}
-                      min={0}
-                      max={100}
-                      onChange={(e) =>
-                        handleOpacityChange({ value: e.target.value })
-                      }
-                      onBlur={handleOpacityBlur}
-                      className="bg-panel-accent h-7 w-12 [appearance:textfield] rounded-sm text-center !text-xs [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-                    />
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-              <PropertyItem direction="column">
-                <PropertyItemLabel>Background</PropertyItemLabel>
-                <PropertyItemValue>
-                  <div className="flex items-center gap-2">
-                    <ColorPicker
-                      value={capitalizeFirstLetter({
-                        string:
-                          element.backgroundColor === "transparent"
-                            ? lastSelectedColor.current.replace("#", "")
-                            : element.backgroundColor.replace("#", ""),
-                      })}
-                      onChange={(color) =>
-                        handleColorChange({ color: `#${color}` })
-                      }
-                      containerRef={containerRef}
-                      className={
-                        element.backgroundColor === "transparent"
-                          ? "pointer-events-none opacity-50"
-                          : ""
-                      }
-                    />
+	return (
+		<PanelBaseView
+			defaultTab="transform"
+			value={activeTab}
+			onValueChange={(v) => {
+				if (isTextPropertiesTab(v)) setActiveTab(v);
+			}}
+			ref={containerRef}
+			tabs={TEXT_PROPERTIES_TABS.map((t) => ({
+				value: t.value,
+				label: t.label,
+				content:
+					t.value === "transform" ? (
+						<div className="space-y-6"></div>
+					) : (
+						<div className="space-y-6">
+							<Textarea
+								placeholder="Name"
+								defaultValue={element.content}
+								className="bg-panel-accent min-h-18 resize-none"
+								onChange={(e) =>
+									editor.timeline.updateTextElement({
+										trackId,
+										elementId: element.id,
+										updates: { content: e.target.value },
+									})
+								}
+							/>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Font</PropertyItemLabel>
+								<PropertyItemValue>
+									<FontPicker
+										defaultValue={element.fontFamily}
+										onValueChange={(value: FontFamily) =>
+											editor.timeline.updateTextElement({
+												trackId,
+												elementId: element.id,
+												updates: { fontFamily: value },
+											})
+										}
+									/>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Style</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<Button
+											variant={
+												element.fontWeight === "bold" ? "default" : "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														fontWeight:
+															element.fontWeight === "bold" ? "normal" : "bold",
+													},
+												})
+											}
+											className="h-8 px-3 font-bold"
+										>
+											B
+										</Button>
+										<Button
+											variant={
+												element.fontStyle === "italic" ? "default" : "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														fontStyle:
+															element.fontStyle === "italic"
+																? "normal"
+																: "italic",
+													},
+												})
+											}
+											className="h-8 px-3 italic"
+										>
+											I
+										</Button>
+										<Button
+											variant={
+												element.textDecoration === "underline"
+													? "default"
+													: "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														textDecoration:
+															element.textDecoration === "underline"
+																? "none"
+																: "underline",
+													},
+												})
+											}
+											className="h-8 px-3 underline"
+										>
+											U
+										</Button>
+										<Button
+											variant={
+												element.textDecoration === "line-through"
+													? "default"
+													: "outline"
+											}
+											size="sm"
+											onClick={() =>
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: {
+														textDecoration:
+															element.textDecoration === "line-through"
+																? "none"
+																: "line-through",
+													},
+												})
+											}
+											className="h-8 px-3 line-through"
+										>
+											S
+										</Button>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Font size</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<Slider
+											value={[element.fontSize]}
+											min={8}
+											max={300}
+											step={1}
+											onValueChange={([value]) => {
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: { fontSize: value },
+												});
+												setFontSizeInput(value.toString());
+											}}
+											className="w-full"
+										/>
+										<Input
+											type="number"
+											value={fontSizeInput}
+											min={8}
+											max={300}
+											onChange={(e) =>
+												handleFontSizeChange({ value: e.target.value })
+											}
+											onBlur={handleFontSizeBlur}
+											className="bg-panel-accent h-7 w-12 [appearance:textfield] rounded-sm px-2 text-center !text-xs [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+										/>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Color</PropertyItemLabel>
+								<PropertyItemValue>
+									<ColorPicker
+										value={uppercase({
+											string: (element.color || "FFFFFF").replace("#", ""),
+										})}
+										onChange={(color) => {
+											editor.timeline.updateTextElement({
+												trackId,
+												elementId: element.id,
+												updates: { color: `#${color}` },
+											});
+										}}
+										containerRef={containerRef}
+									/>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Opacity</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<Slider
+											value={[element.opacity * 100]}
+											min={0}
+											max={100}
+											step={1}
+											onValueChange={([value]) => {
+												editor.timeline.updateTextElement({
+													trackId,
+													elementId: element.id,
+													updates: { opacity: value / 100 },
+												});
+												setOpacityInput(value.toString());
+											}}
+											className="w-full"
+										/>
+										<Input
+											type="number"
+											value={opacityInput}
+											min={0}
+											max={100}
+											onChange={(e) =>
+												handleOpacityChange({ value: e.target.value })
+											}
+											onBlur={handleOpacityBlur}
+											className="bg-panel-accent h-7 w-12 [appearance:textfield] rounded-sm text-center !text-xs [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+										/>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+							<PropertyItem direction="column">
+								<PropertyItemLabel>Background</PropertyItemLabel>
+								<PropertyItemValue>
+									<div className="flex items-center gap-2">
+										<ColorPicker
+											value={capitalizeFirstLetter({
+												string:
+													element.backgroundColor === "transparent"
+														? lastSelectedColor.current.replace("#", "")
+														: element.backgroundColor.replace("#", ""),
+											})}
+											onChange={(color) =>
+												handleColorChange({ color: `#${color}` })
+											}
+											containerRef={containerRef}
+											className={
+												element.backgroundColor === "transparent"
+													? "pointer-events-none opacity-50"
+													: ""
+											}
+										/>
 
-                    <Tooltip>
-                      <TooltipTrigger asChild>
-                        <Button
-                          variant="outline"
-                          size="icon"
-                          onClick={() =>
-                            handleTransparentToggle({
-                              isTransparent:
-                                element.backgroundColor !== "transparent",
-                            })
-                          }
-                          className="bg-panel-accent size-9 overflow-hidden rounded-full p-0"
-                        >
-                          <Grid2x2
-                            className={cn(
-                              "text-foreground",
-                              element.backgroundColor === "transparent" &&
-                              "text-primary",
-                            )}
-                          />
-                        </Button>
-                      </TooltipTrigger>
-                      <TooltipContent>Transparent background</TooltipContent>
-                    </Tooltip>
-                  </div>
-                </PropertyItemValue>
-              </PropertyItem>
-            </div>
-          ),
-      }))}
-    />
-  );
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<Button
+													variant="outline"
+													size="icon"
+													onClick={() =>
+														handleTransparentToggle({
+															isTransparent:
+																element.backgroundColor !== "transparent",
+														})
+													}
+													className="bg-panel-accent size-9 overflow-hidden rounded-full p-0"
+												>
+													<Grid2x2
+														className={cn(
+															"text-foreground",
+															element.backgroundColor === "transparent" &&
+																"text-primary",
+														)}
+													/>
+												</Button>
+											</TooltipTrigger>
+											<TooltipContent>Transparent background</TooltipContent>
+										</Tooltip>
+									</div>
+								</PropertyItemValue>
+							</PropertyItem>
+						</div>
+					),
+			}))}
+		/>
+	);
 }
diff --git a/apps/web/src/components/editor/properties-panel/video-properties.tsx b/apps/web/src/components/editor/properties-panel/video-properties.tsx
index 0b146126..bf6d92d8 100644
--- a/apps/web/src/components/editor/properties-panel/video-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/video-properties.tsx
@@ -1,9 +1,9 @@
-import { VideoElement, ImageElement } from "@/types/timeline";
+import type { ImageElement, VideoElement } from "@/types/timeline";
 
 export function VideoProperties({
-  element,
+	_element,
 }: {
-  element: VideoElement | ImageElement;
+	_element: VideoElement | ImageElement;
 }) {
-  return <div className="space-y-4 p-5">Video properties</div>;
+	return <div className="space-y-4 p-5">Video properties</div>;
 }
diff --git a/apps/web/src/components/editor/scenes-view.tsx b/apps/web/src/components/editor/scenes-view.tsx
index f7967898..b0dffa34 100644
--- a/apps/web/src/components/editor/scenes-view.tsx
+++ b/apps/web/src/components/editor/scenes-view.tsx
@@ -1,219 +1,219 @@
 "use client";
 
 import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
 } from "@/components/ui/sheet";
 import { Button } from "@/components/ui/button";
 import { Check, ListCheck, Trash2 } from "lucide-react";
 import { cn } from "@/utils/ui";
 import { useState } from "react";
 import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogDescription,
-  DialogFooter,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+	DialogTrigger,
 } from "@/components/ui/dialog";
 import { canDeleteScene, getMainScene } from "@/lib/scenes";
 import { toast } from "sonner";
 import { useEditor } from "@/hooks/use-editor";
 
 export function ScenesView({ children }: { children: React.ReactNode }) {
-  const editor = useEditor();
-  const scenes = editor.scenes.getScenes();
-  const currentScene = editor.scenes.getActiveScene();
-  const [isSelectMode, setIsSelectMode] = useState(false);
-  const [selectedScenes, setSelectedScenes] = useState<Set<string>>(new Set());
+	const editor = useEditor();
+	const scenes = editor.scenes.getScenes();
+	const currentScene = editor.scenes.getActiveScene();
+	const [isSelectMode, setIsSelectMode] = useState(false);
+	const [selectedScenes, setSelectedScenes] = useState<Set<string>>(new Set());
 
-  const handleSceneSwitch = async (sceneId: string) => {
-    if (isSelectMode) {
-      toggleSceneSelection({ sceneId });
-      return;
-    }
+	const handleSceneSwitch = async (sceneId: string) => {
+		if (isSelectMode) {
+			toggleSceneSelection({ sceneId });
+			return;
+		}
 
-    try {
-      await editor.scenes.switchToScene({ sceneId });
-    } catch (error) {
-      console.error("Failed to switch scene:", error);
-    }
-  };
+		try {
+			await editor.scenes.switchToScene({ sceneId });
+		} catch (error) {
+			console.error("Failed to switch scene:", error);
+		}
+	};
 
-  const toggleSceneSelection = ({ sceneId }: { sceneId: string }) => {
-    setSelectedScenes((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(sceneId)) {
-        newSet.delete(sceneId);
-      } else {
-        newSet.add(sceneId);
-      }
-      return newSet;
-    });
-  };
+	const toggleSceneSelection = ({ sceneId }: { sceneId: string }) => {
+		setSelectedScenes((prev) => {
+			const newSet = new Set(prev);
+			if (newSet.has(sceneId)) {
+				newSet.delete(sceneId);
+			} else {
+				newSet.add(sceneId);
+			}
+			return newSet;
+		});
+	};
 
-  const handleSelectMode = () => {
-    setIsSelectMode(!isSelectMode);
-    setSelectedScenes(new Set());
-  };
+	const handleSelectMode = () => {
+		setIsSelectMode(!isSelectMode);
+		setSelectedScenes(new Set());
+	};
 
-  const handleDeleteSelected = async () => {
-    for (const sceneId of selectedScenes) {
-      const scene = scenes.find((scene) => scene.id === sceneId);
-      if (!scene) {
-        continue;
-      }
+	const handleDeleteSelected = async () => {
+		for (const sceneId of selectedScenes) {
+			const scene = scenes.find((scene) => scene.id === sceneId);
+			if (!scene) {
+				continue;
+			}
 
-      const { canDelete, reason } = canDeleteScene({ scene });
-      if (!canDelete) {
-        toast.error(reason || "Failed to delete scene");
-        continue;
-      }
+			const { canDelete, reason } = canDeleteScene({ scene });
+			if (!canDelete) {
+				toast.error(reason || "Failed to delete scene");
+				continue;
+			}
 
-      try {
-        await editor.scenes.deleteScene({ sceneId });
-      } catch (error) {
-        console.error("Failed to delete scene:", error);
-      }
-    }
-    setSelectedScenes(new Set());
-    setIsSelectMode(false);
-  };
+			try {
+				await editor.scenes.deleteScene({ sceneId });
+			} catch (error) {
+				console.error("Failed to delete scene:", error);
+			}
+		}
+		setSelectedScenes(new Set());
+		setIsSelectMode(false);
+	};
 
-  const isMainSceneSelected = (() => {
-    const mainScene = getMainScene({ scenes });
-    return Boolean(mainScene?.id && selectedScenes.has(mainScene.id));
-  })();
+	const isMainSceneSelected = (() => {
+		const mainScene = getMainScene({ scenes });
+		return Boolean(mainScene?.id && selectedScenes.has(mainScene.id));
+	})();
 
-  return (
-    <Sheet>
-      <SheetTrigger asChild>{children}</SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>
-            {isSelectMode ? `Select scenes (${selectedScenes.size})` : "Scenes"}
-          </SheetTitle>
-          <SheetDescription>
-            {isSelectMode
-              ? "Select scenes to delete"
-              : "Switch between scenes in your project"}
-          </SheetDescription>
-        </SheetHeader>
-        <div className="flex flex-col gap-4 py-4">
-          <div className="flex items-center gap-2">
-            <Button
-              className="rounded-md"
-              variant={isSelectMode ? "default" : "outline"}
-              size="sm"
-              onClick={handleSelectMode}
-            >
-              <ListCheck />
-              {isSelectMode ? "Cancel" : "Select"}
-            </Button>
-            {isSelectMode && (
-              <DeleteDialog
-                count={selectedScenes.size}
-                onDelete={handleDeleteSelected}
-                disabled={isMainSceneSelected}
-                trigger={
-                  <Button
-                    className="rounded-md"
-                    variant="destructive"
-                    disabled={isMainSceneSelected}
-                    size="sm"
-                  >
-                    <Trash2 />
-                    Delete ({selectedScenes.size})
-                  </Button>
-                }
-              />
-            )}
-          </div>
-          {scenes.length === 0 ? (
-            <div className="text-muted-foreground text-sm">
-              No scenes available
-            </div>
-          ) : (
-            <div className="space-y-2">
-              {scenes.map((scene) => (
-                <Button
-                  key={scene.id}
-                  variant="outline"
-                  className={cn(
-                    "w-full justify-between font-normal",
-                    currentScene?.id === scene.id &&
-                      !isSelectMode &&
-                      "border-primary !text-primary",
-                    isSelectMode &&
-                      selectedScenes.has(scene.id) &&
-                      "bg-accent border-foreground/30",
-                  )}
-                  onClick={() => handleSceneSwitch(scene.id)}
-                >
-                  <span>{scene.name}</span>
-                  <div className="flex items-center gap-2">
-                    {((isSelectMode && selectedScenes.has(scene.id)) ||
-                      (!isSelectMode && currentScene?.id === scene.id)) && (
-                      <Check className="h-4 w-4" />
-                    )}
-                  </div>
-                </Button>
-              ))}
-            </div>
-          )}
-        </div>
-      </SheetContent>
-    </Sheet>
-  );
+	return (
+		<Sheet>
+			<SheetTrigger asChild>{children}</SheetTrigger>
+			<SheetContent>
+				<SheetHeader>
+					<SheetTitle>
+						{isSelectMode ? `Select scenes (${selectedScenes.size})` : "Scenes"}
+					</SheetTitle>
+					<SheetDescription>
+						{isSelectMode
+							? "Select scenes to delete"
+							: "Switch between scenes in your project"}
+					</SheetDescription>
+				</SheetHeader>
+				<div className="flex flex-col gap-4 py-4">
+					<div className="flex items-center gap-2">
+						<Button
+							className="rounded-md"
+							variant={isSelectMode ? "default" : "outline"}
+							size="sm"
+							onClick={handleSelectMode}
+						>
+							<ListCheck />
+							{isSelectMode ? "Cancel" : "Select"}
+						</Button>
+						{isSelectMode && (
+							<DeleteDialog
+								count={selectedScenes.size}
+								onDelete={handleDeleteSelected}
+								disabled={isMainSceneSelected}
+								trigger={
+									<Button
+										className="rounded-md"
+										variant="destructive"
+										disabled={isMainSceneSelected}
+										size="sm"
+									>
+										<Trash2 />
+										Delete ({selectedScenes.size})
+									</Button>
+								}
+							/>
+						)}
+					</div>
+					{scenes.length === 0 ? (
+						<div className="text-muted-foreground text-sm">
+							No scenes available
+						</div>
+					) : (
+						<div className="space-y-2">
+							{scenes.map((scene) => (
+								<Button
+									key={scene.id}
+									variant="outline"
+									className={cn(
+										"w-full justify-between font-normal",
+										currentScene?.id === scene.id &&
+											!isSelectMode &&
+											"border-primary !text-primary",
+										isSelectMode &&
+											selectedScenes.has(scene.id) &&
+											"bg-accent border-foreground/30",
+									)}
+									onClick={() => handleSceneSwitch(scene.id)}
+								>
+									<span>{scene.name}</span>
+									<div className="flex items-center gap-2">
+										{((isSelectMode && selectedScenes.has(scene.id)) ||
+											(!isSelectMode && currentScene?.id === scene.id)) && (
+											<Check className="h-4 w-4" />
+										)}
+									</div>
+								</Button>
+							))}
+						</div>
+					)}
+				</div>
+			</SheetContent>
+		</Sheet>
+	);
 }
 
 function DeleteDialog({
-  count,
-  onDelete,
-  disabled,
-  trigger,
+	count,
+	onDelete,
+	disabled,
+	trigger,
 }: {
-  count: number;
-  onDelete: () => void;
-  disabled?: boolean;
-  trigger: React.ReactNode;
+	count: number;
+	onDelete: () => void;
+	disabled?: boolean;
+	trigger: React.ReactNode;
 }) {
-  const [open, setOpen] = useState(false);
+	const [open, setOpen] = useState(false);
 
-  const handleDelete = () => {
-    onDelete();
-    setOpen(false);
-  };
+	const handleDelete = () => {
+		onDelete();
+		setOpen(false);
+	};
 
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>{trigger}</DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Delete Scenes</DialogTitle>
-          <DialogDescription>
-            Are you sure you want to delete {count} scene
-            {count === 1 ? "" : "s"}? This action cannot be undone.
-          </DialogDescription>
-        </DialogHeader>
-        <DialogFooter>
-          <Button variant="outline" onClick={() => setOpen(false)}>
-            Cancel
-          </Button>
-          <Button
-            variant="destructive"
-            onClick={handleDelete}
-            disabled={disabled}
-          >
-            Delete
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>{trigger}</DialogTrigger>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Delete Scenes</DialogTitle>
+					<DialogDescription>
+						Are you sure you want to delete {count} scene
+						{count === 1 ? "" : "s"}? This action cannot be undone.
+					</DialogDescription>
+				</DialogHeader>
+				<DialogFooter>
+					<Button variant="outline" onClick={() => setOpen(false)}>
+						Cancel
+					</Button>
+					<Button
+						variant="destructive"
+						onClick={handleDelete}
+						disabled={disabled}
+					>
+						Delete
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
 }
diff --git a/apps/web/src/components/editor/selection-box.tsx b/apps/web/src/components/editor/selection-box.tsx
index e57c74d3..32adbfd8 100644
--- a/apps/web/src/components/editor/selection-box.tsx
+++ b/apps/web/src/components/editor/selection-box.tsx
@@ -1,50 +1,50 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useMemo } from "react";
 
 interface SelectionBoxProps {
-  startPos: { x: number; y: number } | null;
-  currentPos: { x: number; y: number } | null;
-  containerRef: React.RefObject<HTMLElement>;
-  isActive: boolean;
+	startPos: { x: number; y: number } | null;
+	currentPos: { x: number; y: number } | null;
+	containerRef: React.RefObject<HTMLElement>;
+	isActive: boolean;
 }
 
 export function SelectionBox({
-  startPos,
-  currentPos,
-  containerRef,
-  isActive,
+	startPos,
+	currentPos,
+	containerRef,
+	isActive,
 }: SelectionBoxProps) {
-  const selectionBoxRef = useRef<HTMLDivElement>(null);
+	const selectionBoxStyle = useMemo(() => {
+		if (!isActive || !startPos || !currentPos || !containerRef.current) {
+			return null;
+		}
 
-  useEffect(() => {
-    if (!isActive || !startPos || !currentPos || !containerRef.current) return;
+		const containerRect = containerRef.current.getBoundingClientRect();
+		const startX = startPos.x - containerRect.left;
+		const startY = startPos.y - containerRect.top;
+		const currentX = currentPos.x - containerRect.left;
+		const currentY = currentPos.y - containerRect.top;
 
-    const containerRect = containerRef.current.getBoundingClientRect();
-    const startX = startPos.x - containerRect.left;
-    const startY = startPos.y - containerRect.top;
-    const currentX = currentPos.x - containerRect.left;
-    const currentY = currentPos.y - containerRect.top;
+		const left = Math.min(startX, currentX);
+		const top = Math.min(startY, currentY);
+		const width = Math.abs(currentX - startX);
+		const height = Math.abs(currentY - startY);
 
-    const left = Math.min(startX, currentX);
-    const top = Math.min(startY, currentY);
-    const width = Math.abs(currentX - startX);
-    const height = Math.abs(currentY - startY);
+		return {
+			left: `${left}px`,
+			top: `${top}px`,
+			width: `${width}px`,
+			height: `${height}px`,
+		};
+	}, [containerRef, currentPos, isActive, startPos]);
 
-    if (selectionBoxRef.current) {
-      selectionBoxRef.current.style.left = `${left}px`;
-      selectionBoxRef.current.style.top = `${top}px`;
-      selectionBoxRef.current.style.width = `${width}px`;
-      selectionBoxRef.current.style.height = `${height}px`;
-    }
-  }, [startPos, currentPos, isActive, containerRef]);
+	if (!selectionBoxStyle) return null;
 
-  if (!isActive || !startPos || !currentPos) return null;
-
-  return (
-    <div
-      ref={selectionBoxRef}
-      className="border-foreground/50 bg-foreground/5 pointer-events-none absolute z-50 border"
-    />
-  );
+	return (
+		<div
+			style={selectionBoxStyle}
+			className="border-foreground/50 bg-foreground/5 pointer-events-none absolute z-50 border"
+		/>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/audio-waveform.tsx b/apps/web/src/components/editor/timeline/audio-waveform.tsx
index b3c4c656..08b14392 100644
--- a/apps/web/src/components/editor/timeline/audio-waveform.tsx
+++ b/apps/web/src/components/editor/timeline/audio-waveform.tsx
@@ -2,175 +2,175 @@ import { useEffect, useRef, useState } from "react";
 import WaveSurfer from "wavesurfer.js";
 
 interface AudioWaveformProps {
-  audioUrl?: string;
-  audioBuffer?: AudioBuffer;
-  height?: number;
-  className?: string;
+	audioUrl?: string;
+	audioBuffer?: AudioBuffer;
+	height?: number;
+	className?: string;
 }
 
 function extractPeaks({
-  buffer,
-  length = 512,
+	buffer,
+	length = 512,
 }: {
-  buffer: AudioBuffer;
-  length?: number;
+	buffer: AudioBuffer;
+	length?: number;
 }): number[][] {
-  const channels = buffer.numberOfChannels;
-  const peaks: number[][] = [];
+	const channels = buffer.numberOfChannels;
+	const peaks: number[][] = [];
 
-  for (let c = 0; c < channels; c++) {
-    const data = buffer.getChannelData(c);
-    const step = Math.floor(data.length / length);
-    const channelPeaks: number[] = [];
+	for (let c = 0; c < channels; c++) {
+		const data = buffer.getChannelData(c);
+		const step = Math.floor(data.length / length);
+		const channelPeaks: number[] = [];
 
-    for (let i = 0; i < length; i++) {
-      const start = i * step;
-      const end = Math.min(start + step, data.length);
-      let max = 0;
-      for (let j = start; j < end; j++) {
-        const abs = Math.abs(data[j]);
-        if (abs > max) max = abs;
-      }
-      channelPeaks.push(max);
-    }
-    peaks.push(channelPeaks);
-  }
+		for (let i = 0; i < length; i++) {
+			const start = i * step;
+			const end = Math.min(start + step, data.length);
+			let max = 0;
+			for (let j = start; j < end; j++) {
+				const abs = Math.abs(data[j]);
+				if (abs > max) max = abs;
+			}
+			channelPeaks.push(max);
+		}
+		peaks.push(channelPeaks);
+	}
 
-  return peaks;
+	return peaks;
 }
 
 export function AudioWaveform({
-  audioUrl,
-  audioBuffer,
-  height = 32,
-  className = "",
+	audioUrl,
+	audioBuffer,
+	height = 32,
+	className = "",
 }: AudioWaveformProps) {
-  const waveformRef = useRef<HTMLDivElement>(null);
-  const wavesurfer = useRef<WaveSurfer | null>(null);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState(false);
+	const waveformRef = useRef<HTMLDivElement>(null);
+	const wavesurfer = useRef<WaveSurfer | null>(null);
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState(false);
 
-  useEffect(() => {
-    let mounted = true;
-    let ws = wavesurfer.current;
+	useEffect(() => {
+		let mounted = true;
+		const ws = wavesurfer.current;
 
-    const initWaveSurfer = async () => {
-      if (!waveformRef.current || (!audioUrl && !audioBuffer)) return;
+		const initWaveSurfer = async () => {
+			if (!waveformRef.current || (!audioUrl && !audioBuffer)) return;
 
-      try {
-        if (ws) {
-          wavesurfer.current = null;
-        }
+			try {
+				if (ws) {
+					wavesurfer.current = null;
+				}
 
-        const newWaveSurfer = WaveSurfer.create({
-          container: waveformRef.current,
-          waveColor: "rgba(255, 255, 255, 0.6)",
-          progressColor: "rgba(255, 255, 255, 0.9)",
-          cursorColor: "transparent",
-          barWidth: 2,
-          barGap: 1,
-          height,
-          normalize: true,
-          interact: false,
-        });
+				const newWaveSurfer = WaveSurfer.create({
+					container: waveformRef.current,
+					waveColor: "rgba(255, 255, 255, 0.6)",
+					progressColor: "rgba(255, 255, 255, 0.9)",
+					cursorColor: "transparent",
+					barWidth: 2,
+					barGap: 1,
+					height,
+					normalize: true,
+					interact: false,
+				});
 
-        if (mounted) {
-          wavesurfer.current = newWaveSurfer;
-        } else {
-          try {
-            newWaveSurfer.destroy();
-          } catch {}
-          return;
-        }
+				if (mounted) {
+					wavesurfer.current = newWaveSurfer;
+				} else {
+					try {
+						newWaveSurfer.destroy();
+					} catch {}
+					return;
+				}
 
-        newWaveSurfer.on("ready", () => {
-          if (mounted) {
-            setIsLoading(false);
-            setError(false);
-          }
-        });
+				newWaveSurfer.on("ready", () => {
+					if (mounted) {
+						setIsLoading(false);
+						setError(false);
+					}
+				});
 
-        newWaveSurfer.on("error", (err) => {
-          if (mounted) {
-            console.error("WaveSurfer error:", err);
-            setError(true);
-            setIsLoading(false);
-          }
-        });
+				newWaveSurfer.on("error", (err) => {
+					if (mounted) {
+						console.error("WaveSurfer error:", err);
+						setError(true);
+						setIsLoading(false);
+					}
+				});
 
-        if (audioBuffer) {
-          const peaks = extractPeaks({ buffer: audioBuffer });
-          newWaveSurfer.load("", peaks, audioBuffer.duration);
-        } else if (audioUrl) {
-          await newWaveSurfer.load(audioUrl);
-        }
-      } catch (err) {
-        if (mounted) {
-          console.error("Failed to initialize WaveSurfer:", err);
-          setError(true);
-          setIsLoading(false);
-        }
-      }
-    };
+				if (audioBuffer) {
+					const peaks = extractPeaks({ buffer: audioBuffer });
+					newWaveSurfer.load("", peaks, audioBuffer.duration);
+				} else if (audioUrl) {
+					await newWaveSurfer.load(audioUrl);
+				}
+			} catch (err) {
+				if (mounted) {
+					console.error("Failed to initialize WaveSurfer:", err);
+					setError(true);
+					setIsLoading(false);
+				}
+			}
+		};
 
-    if (ws) {
-      const wsToDestroy = ws;
-      wavesurfer.current = null;
+		if (ws) {
+			const wsToDestroy = ws;
+			wavesurfer.current = null;
 
-      requestAnimationFrame(() => {
-        try {
-          wsToDestroy.destroy();
-        } catch {}
-        if (mounted) {
-          initWaveSurfer();
-        }
-      });
-    } else {
-      initWaveSurfer();
-    }
+			requestAnimationFrame(() => {
+				try {
+					wsToDestroy.destroy();
+				} catch {}
+				if (mounted) {
+					initWaveSurfer();
+				}
+			});
+		} else {
+			initWaveSurfer();
+		}
 
-    return () => {
-      mounted = false;
+		return () => {
+			mounted = false;
 
-      const wsToDestroy = wavesurfer.current;
+			const wsToDestroy = wavesurfer.current;
 
-      wavesurfer.current = null;
+			wavesurfer.current = null;
 
-      if (wsToDestroy) {
-        requestAnimationFrame(() => {
-          try {
-            wsToDestroy.destroy();
-          } catch {}
-        });
-      }
-    };
-  }, [audioUrl, audioBuffer, height]);
+			if (wsToDestroy) {
+				requestAnimationFrame(() => {
+					try {
+						wsToDestroy.destroy();
+					} catch {}
+				});
+			}
+		};
+	}, [audioUrl, audioBuffer, height]);
 
-  if (error) {
-    return (
-      <div
-        className={`flex items-center justify-center ${className}`}
-        style={{ height }}
-      >
-        <span className="text-foreground/60 text-xs">Audio unavailable</span>
-      </div>
-    );
-  }
+	if (error) {
+		return (
+			<div
+				className={`flex items-center justify-center ${className}`}
+				style={{ height }}
+			>
+				<span className="text-foreground/60 text-xs">Audio unavailable</span>
+			</div>
+		);
+	}
 
-  return (
-    <div className={`relative ${className}`}>
-      {isLoading && (
-        <div className="absolute inset-0 flex items-center justify-center">
-          <span className="text-foreground/60 text-xs">Loading...</span>
-        </div>
-      )}
-      <div
-        ref={waveformRef}
-        className={`w-full transition-opacity duration-200 ${isLoading ? "opacity-0" : "opacity-100"}`}
-        style={{ height }}
-      />
-    </div>
-  );
+	return (
+		<div className={`relative ${className}`}>
+			{isLoading && (
+				<div className="absolute inset-0 flex items-center justify-center">
+					<span className="text-foreground/60 text-xs">Loading...</span>
+				</div>
+			)}
+			<div
+				ref={waveformRef}
+				className={`w-full transition-opacity duration-200 ${isLoading ? "opacity-0" : "opacity-100"}`}
+				style={{ height }}
+			/>
+		</div>
+	);
 }
 
 export default AudioWaveform;
diff --git a/apps/web/src/components/editor/timeline/bookmarks.tsx b/apps/web/src/components/editor/timeline/bookmarks.tsx
index 183f0081..da170aa3 100644
--- a/apps/web/src/components/editor/timeline/bookmarks.tsx
+++ b/apps/web/src/components/editor/timeline/bookmarks.tsx
@@ -4,84 +4,84 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { Bookmark } from "lucide-react";
 
 interface TimelineBookmarksRowProps {
-  zoomLevel: number;
-  dynamicTimelineWidth: number;
-  bookmarksScrollRef: React.RefObject<HTMLDivElement>;
-  handleWheel: (e: React.WheelEvent) => void;
-  handleTimelineContentClick: (e: React.MouseEvent) => void;
-  handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
-  handleRulerMouseDown: (e: React.MouseEvent) => void;
+	zoomLevel: number;
+	dynamicTimelineWidth: number;
+	bookmarksScrollRef: React.RefObject<HTMLDivElement>;
+	handleWheel: (e: React.WheelEvent) => void;
+	handleTimelineContentClick: (e: React.MouseEvent) => void;
+	handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
+	handleRulerMouseDown: (e: React.MouseEvent) => void;
 }
 
 export function TimelineBookmarksRow({
-  zoomLevel,
-  dynamicTimelineWidth,
-  bookmarksScrollRef,
-  handleWheel,
-  handleTimelineContentClick,
-  handleRulerTrackingMouseDown,
-  handleRulerMouseDown,
+	zoomLevel,
+	dynamicTimelineWidth,
+	bookmarksScrollRef,
+	handleWheel,
+	handleTimelineContentClick,
+	handleRulerTrackingMouseDown,
+	handleRulerMouseDown,
 }: TimelineBookmarksRowProps) {
-  const editor = useEditor();
-  const activeScene = editor.scenes.getActiveScene();
+	const editor = useEditor();
+	const activeScene = editor.scenes.getActiveScene();
 
-  return (
-    <div
-      className="relative h-4 flex-1 overflow-hidden"
-      onWheel={handleWheel}
-      onClick={handleTimelineContentClick}
-      onMouseDown={handleRulerTrackingMouseDown}
-    >
-      <ScrollArea className="scrollbar-hidden w-full" ref={bookmarksScrollRef}>
-        <div
-          className="relative h-4 cursor-default select-none"
-          style={{
-            width: `${dynamicTimelineWidth}px`,
-          }}
-          onMouseDown={handleRulerMouseDown}
-        >
-          {activeScene.bookmarks.map((time: number, index: number) => (
-            <TimelineBookmark
-              key={`bookmark-row-${index}`}
-              time={time}
-              zoomLevel={zoomLevel}
-            />
-          ))}
-        </div>
-      </ScrollArea>
-    </div>
-  );
+	return (
+		<div
+			className="relative h-4 flex-1 overflow-hidden"
+			onWheel={handleWheel}
+			onClick={handleTimelineContentClick}
+			onMouseDown={handleRulerTrackingMouseDown}
+		>
+			<ScrollArea className="scrollbar-hidden w-full" ref={bookmarksScrollRef}>
+				<div
+					className="relative h-4 cursor-default select-none"
+					style={{
+						width: `${dynamicTimelineWidth}px`,
+					}}
+					onMouseDown={handleRulerMouseDown}
+				>
+					{activeScene.bookmarks.map((time: number, index: number) => (
+						<TimelineBookmark
+							key={`bookmark-row-${index}`}
+							time={time}
+							zoomLevel={zoomLevel}
+						/>
+					))}
+				</div>
+			</ScrollArea>
+		</div>
+	);
 }
 
 export function TimelineBookmark({
-  time,
-  zoomLevel,
+	time,
+	zoomLevel,
 }: {
-  time: number;
-  zoomLevel: number;
+	time: number;
+	zoomLevel: number;
 }) {
-  const editor = useEditor();
+	const editor = useEditor();
 
-  const handleBookmarkClick = ({
-    event,
-  }: {
-    event: React.MouseEvent<HTMLDivElement>;
-  }) => {
-    event.stopPropagation();
-    editor.playback.seek({ time });
-  };
+	const handleBookmarkClick = ({
+		event,
+	}: {
+		event: React.MouseEvent<HTMLDivElement>;
+	}) => {
+		event.stopPropagation();
+		editor.playback.seek({ time });
+	};
 
-  return (
-    <div
-      className="absolute top-0 h-10 w-0.5 cursor-pointer"
-      style={{
-        left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
-      }}
-      onClick={(event) => handleBookmarkClick({ event })}
-    >
-      <div className="text-primary absolute top-[-1px] left-[-5px]">
-        <Bookmark className="fill-primary size-3" />
-      </div>
-    </div>
-  );
+	return (
+		<div
+			className="absolute top-0 h-10 w-0.5 cursor-pointer"
+			style={{
+				left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
+			}}
+			onClick={(event) => handleBookmarkClick({ event })}
+		>
+			<div className="text-primary absolute top-[-1px] left-[-5px]">
+				<Bookmark className="fill-primary size-3" />
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/drag-line.tsx b/apps/web/src/components/editor/timeline/drag-line.tsx
index 0b2304a0..987ae43a 100644
--- a/apps/web/src/components/editor/timeline/drag-line.tsx
+++ b/apps/web/src/components/editor/timeline/drag-line.tsx
@@ -2,20 +2,20 @@ import { getDropLineY } from "@/lib/timeline/drop-utils";
 import type { TimelineTrack, DropTarget } from "@/types/timeline";
 
 interface DragLineProps {
-  dropTarget: DropTarget | null;
-  tracks: TimelineTrack[];
-  isVisible: boolean;
+	dropTarget: DropTarget | null;
+	tracks: TimelineTrack[];
+	isVisible: boolean;
 }
 
 export function DragLine({ dropTarget, tracks, isVisible }: DragLineProps) {
-  if (!isVisible || !dropTarget) return null;
+	if (!isVisible || !dropTarget) return null;
 
-  const y = getDropLineY({ dropTarget, tracks });
+	const y = getDropLineY({ dropTarget, tracks });
 
-  return (
-    <div
-      className="bg-primary pointer-events-none absolute right-0 left-0 z-50 h-0.5"
-      style={{ top: `${y}px` }}
-    />
-  );
+	return (
+		<div
+			className="bg-primary pointer-events-none absolute right-0 left-0 z-50 h-0.5"
+			style={{ top: `${y}px` }}
+		/>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index aeb5b885..9c47f016 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -2,19 +2,19 @@
 
 import { ScrollArea } from "@/components/ui/scroll-area";
 import {
-  Eye,
-  EyeOff,
-  VolumeOff,
-  Volume2,
-  LucideIcon,
-  EyeIcon,
-  Trash2,
+	Eye,
+	EyeOff,
+	VolumeOff,
+	Volume2,
+	type LucideIcon,
+	EyeIcon,
+	Trash2,
 } from "lucide-react";
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
 } from "../../ui/context-menu";
 import { useTimelineZoom } from "@/hooks/timeline/use-timeline-zoom";
 import { useState, useRef, useCallback } from "react";
@@ -23,20 +23,20 @@ import { TimelinePlayhead } from "./timeline-playhead";
 import { SelectionBox } from "../selection-box";
 import { useSelectionBox } from "@/hooks/timeline/use-selection-box";
 import { SnapIndicator } from "./snap-indicator";
-import { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
+import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
 import type { TimelineTrack } from "@/types/timeline";
 import {
-  TIMELINE_CONSTANTS,
-  TRACK_ICONS,
+	TIMELINE_CONSTANTS,
+	TRACK_ICONS,
 } from "@/constants/timeline-constants";
 import { useElementInteraction } from "@/hooks/timeline/element/use-element-interaction";
 import {
-  getTrackHeight,
-  getCumulativeHeightBefore,
-  getTotalTracksHeight,
-  canTracktHaveAudio,
-  canTrackBeHidden,
-  getTimelineZoomMin,
+	getTrackHeight,
+	getCumulativeHeightBefore,
+	getTotalTracksHeight,
+	canTracktHaveAudio,
+	canTrackBeHidden,
+	getTimelineZoomMin,
 } from "@/lib/timeline";
 import { TimelineToolbar } from "./timeline-toolbar";
 import { useScrollSync } from "@/hooks/timeline/use-scroll-sync";
@@ -51,451 +51,443 @@ import { useTimelinePlayhead } from "@/hooks/timeline/use-timeline-playhead";
 import { DragLine } from "./drag-line";
 
 export function Timeline() {
-  const tracksContainerHeight = { min: 0, max: 800 };
-  const { snappingEnabled } = useTimelineStore();
-  const { clearElementSelection, setElementSelection } = useElementSelection();
-  const editor = useEditor();
-  const timeline = editor.timeline;
-  const tracks = timeline.getTracks();
-  const seek = (time: number) => editor.playback.seek({ time });
+	const tracksContainerHeight = { min: 0, max: 800 };
+	const { snappingEnabled } = useTimelineStore();
+	const { clearElementSelection, setElementSelection } = useElementSelection();
+	const editor = useEditor();
+	const timeline = editor.timeline;
+	const tracks = timeline.getTracks();
+	const seek = (time: number) => editor.playback.seek({ time });
 
-  // refs
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const rulerRef = useRef<HTMLDivElement>(null);
-  const tracksContainerRef = useRef<HTMLDivElement>(null);
-  const rulerScrollRef = useRef<HTMLDivElement>(null);
-  const tracksScrollRef = useRef<HTMLDivElement>(null);
-  const trackLabelsRef = useRef<HTMLDivElement>(null);
-  const playheadRef = useRef<HTMLDivElement>(null);
-  const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
-  const bookmarksScrollRef = useRef<HTMLDivElement>(null);
+	// refs
+	const timelineRef = useRef<HTMLDivElement>(null);
+	const rulerRef = useRef<HTMLDivElement>(null);
+	const tracksContainerRef = useRef<HTMLDivElement>(null);
+	const rulerScrollRef = useRef<HTMLDivElement>(null);
+	const tracksScrollRef = useRef<HTMLDivElement>(null);
+	const trackLabelsRef = useRef<HTMLDivElement>(null);
+	const playheadRef = useRef<HTMLDivElement>(null);
+	const trackLabelsScrollRef = useRef<HTMLDivElement>(null);
+	const bookmarksScrollRef = useRef<HTMLDivElement>(null);
 
-  // state
-  const [isInTimeline, setIsInTimeline] = useState(false);
-  const [isResizing, setIsResizing] = useState(false);
-  const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(
-    null,
-  );
+	// state
+	const [isInTimeline, setIsInTimeline] = useState(false);
+	const [isResizing, setIsResizing] = useState(false);
+	const [currentSnapPoint, setCurrentSnapPoint] = useState<SnapPoint | null>(
+		null,
+	);
 
-  const handleSnapPointChange = useCallback((snapPoint: SnapPoint | null) => {
-    setCurrentSnapPoint(snapPoint);
-  }, []);
-  const handleResizeStateChange = useCallback(
-    ({ isResizing: nextIsResizing }: { isResizing: boolean }) => {
-      setIsResizing(nextIsResizing);
-      if (!nextIsResizing) {
-        setCurrentSnapPoint(null);
-      }
-    },
-    [],
-  );
+	const handleSnapPointChange = useCallback((snapPoint: SnapPoint | null) => {
+		setCurrentSnapPoint(snapPoint);
+	}, []);
+	const handleResizeStateChange = useCallback(
+		({ isResizing: nextIsResizing }: { isResizing: boolean }) => {
+			setIsResizing(nextIsResizing);
+			if (!nextIsResizing) {
+				setCurrentSnapPoint(null);
+			}
+		},
+		[],
+	);
 
-  const timelineDuration = timeline.getTotalDuration() || 0;
-  const minZoomLevel = getTimelineZoomMin({
-    duration: timelineDuration,
-    containerWidth: timelineRef.current?.clientWidth,
-  });
+	const timelineDuration = timeline.getTotalDuration() || 0;
+	const minZoomLevel = getTimelineZoomMin({
+		duration: timelineDuration,
+		containerWidth: timelineRef.current?.clientWidth,
+	});
 
-  const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({
-    containerRef: timelineRef,
-    isInTimeline,
-    minZoom: minZoomLevel,
-  });
+	const { zoomLevel, setZoomLevel, handleWheel } = useTimelineZoom({
+		containerRef: timelineRef,
+		isInTimeline,
+		minZoom: minZoomLevel,
+	});
 
-  const {
-    dragState,
-    dragDropTarget,
-    handleElementMouseDown,
-    handleElementClick,
-    lastMouseXRef,
-  } = useElementInteraction({
-    zoomLevel,
-    timelineRef,
-    tracksContainerRef,
-    tracksScrollRef,
-    snappingEnabled,
-    onSnapPointChange: handleSnapPointChange,
-  });
+	const {
+		dragState,
+		dragDropTarget,
+		handleElementMouseDown,
+		handleElementClick,
+		lastMouseXRef,
+	} = useElementInteraction({
+		zoomLevel,
+		timelineRef,
+		tracksContainerRef,
+		tracksScrollRef,
+		snappingEnabled,
+		onSnapPointChange: handleSnapPointChange,
+	});
 
-  const { handleRulerMouseDown: handlePlayheadRulerMouseDown } =
-    useTimelinePlayhead({
-      zoomLevel,
-      rulerRef,
-      rulerScrollRef,
-      tracksScrollRef,
-      playheadRef,
-    });
+	const { handleRulerMouseDown: handlePlayheadRulerMouseDown } =
+		useTimelinePlayhead({
+			zoomLevel,
+			rulerRef,
+			rulerScrollRef,
+			tracksScrollRef,
+			playheadRef,
+		});
 
-  const { isDragOver, dropTarget, dragProps } = useTimelineDragDrop({
-    containerRef: tracksContainerRef,
-    zoomLevel,
-  });
+	const { isDragOver, dropTarget, dragProps } = useTimelineDragDrop({
+		containerRef: tracksContainerRef,
+		zoomLevel,
+	});
 
-  const {
-    selectionBox,
-    handleMouseDown: handleSelectionMouseDown,
-    isSelecting,
-  } = useSelectionBox({
-    containerRef: tracksContainerRef,
-    onSelectionComplete: (elements) => {
-      setElementSelection({ elements });
-    },
-    tracksScrollRef,
-    zoomLevel,
-  });
+	const {
+		selectionBox,
+		handleMouseDown: handleSelectionMouseDown,
+		isSelecting,
+	} = useSelectionBox({
+		containerRef: tracksContainerRef,
+		onSelectionComplete: (elements) => {
+			setElementSelection({ elements });
+		},
+		tracksScrollRef,
+		zoomLevel,
+	});
 
-  const paddedDuration =
-    timelineDuration + TIMELINE_CONSTANTS.PLAYHEAD_LOOKAHEAD_SECONDS;
-  const dynamicTimelineWidth = Math.max(
-    paddedDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
-    timelineRef.current?.clientWidth || 1000,
-  );
+	const paddedDuration =
+		timelineDuration + TIMELINE_CONSTANTS.PLAYHEAD_LOOKAHEAD_SECONDS;
+	const dynamicTimelineWidth = Math.max(
+		paddedDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
+		timelineRef.current?.clientWidth || 1000,
+	);
 
-  const showSnapIndicator =
-    snappingEnabled &&
-    currentSnapPoint !== null &&
-    (dragState.isDragging || isResizing);
+	const showSnapIndicator =
+		snappingEnabled &&
+		currentSnapPoint !== null &&
+		(dragState.isDragging || isResizing);
 
-  const {
-    handleTracksMouseDown,
-    handleTracksClick,
-    handleRulerMouseDown,
-    handleRulerClick,
-  } = useTimelineSeek({
-    playheadRef,
-    trackLabelsRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    zoomLevel,
-    duration: timeline.getTotalDuration(),
-    isSelecting,
-    clearSelectedElements: clearElementSelection,
-    seek,
-  });
+	const {
+		handleTracksMouseDown,
+		handleTracksClick,
+		handleRulerMouseDown,
+		handleRulerClick,
+	} = useTimelineSeek({
+		playheadRef,
+		trackLabelsRef,
+		rulerScrollRef,
+		tracksScrollRef,
+		zoomLevel,
+		duration: timeline.getTotalDuration(),
+		isSelecting,
+		clearSelectedElements: clearElementSelection,
+		seek,
+	});
 
-  useScrollSync({
-    rulerScrollRef,
-    tracksScrollRef,
-    trackLabelsScrollRef,
-    bookmarksScrollRef,
-  });
+	useScrollSync({
+		rulerScrollRef,
+		tracksScrollRef,
+		trackLabelsScrollRef,
+		bookmarksScrollRef,
+	});
 
-  return (
-    <div
-      className={
-        "bg-panel relative flex h-full flex-col overflow-hidden rounded-sm transition-colors duration-200"
-      }
-      {...dragProps}
-      onMouseEnter={() => setIsInTimeline(true)}
-      onMouseLeave={() => setIsInTimeline(false)}
-    >
-      <TimelineToolbar
-        zoomLevel={zoomLevel}
-        minZoom={minZoomLevel}
-        setZoomLevel={({ zoom }) => setZoomLevel(zoom)}
-      />
+	return (
+		<section
+			className={
+				"bg-panel relative flex h-full flex-col overflow-hidden rounded-sm transition-colors duration-200"
+			}
+			{...dragProps}
+			aria-label="Timeline"
+			onMouseEnter={() => setIsInTimeline(true)}
+			onMouseLeave={() => setIsInTimeline(false)}
+		>
+			<TimelineToolbar
+				zoomLevel={zoomLevel}
+				minZoom={minZoomLevel}
+				setZoomLevel={({ zoom }) => setZoomLevel(zoom)}
+			/>
 
-      <div
-        className="relative flex flex-1 flex-col overflow-hidden"
-        ref={timelineRef}
-      >
-        <TimelinePlayhead
-          zoomLevel={zoomLevel}
-          rulerRef={rulerRef}
-          rulerScrollRef={rulerScrollRef}
-          tracksScrollRef={tracksScrollRef}
-          trackLabelsRef={trackLabelsRef}
-          timelineRef={timelineRef}
-          playheadRef={playheadRef}
-          isSnappingToPlayhead={
-            showSnapIndicator && currentSnapPoint?.type === "playhead"
-          }
-        />
-        <SnapIndicator
-          snapPoint={currentSnapPoint}
-          zoomLevel={zoomLevel}
-          tracks={tracks}
-          timelineRef={timelineRef}
-          trackLabelsRef={trackLabelsRef}
-          tracksScrollRef={tracksScrollRef}
-          isVisible={showSnapIndicator}
-        />
-        <div className="bg-panel sticky top-0 z-10 flex flex-col">
-          <div className="flex">
-            <div className="bg-panel flex h-4 w-28 shrink-0 items-center justify-between border-r px-3">
-              <span className="opacity-0">.</span>
-            </div>
-            <TimelineRuler
-              zoomLevel={zoomLevel}
-              dynamicTimelineWidth={dynamicTimelineWidth}
-              rulerRef={rulerRef}
-              rulerScrollRef={rulerScrollRef}
-              handleWheel={handleWheel}
-              handleTimelineContentClick={handleRulerClick}
-              handleRulerTrackingMouseDown={handleRulerMouseDown}
-              handleRulerMouseDown={handlePlayheadRulerMouseDown}
-            />
-          </div>
-          <div className="flex">
-            <div className="bg-panel flex h-4 w-28 shrink-0 items-center justify-between border-r px-3">
-              <span className="opacity-0">.</span>
-            </div>
-            <TimelineBookmarksRow
-              zoomLevel={zoomLevel}
-              dynamicTimelineWidth={dynamicTimelineWidth}
-              bookmarksScrollRef={bookmarksScrollRef}
-              handleWheel={handleWheel}
-              handleTimelineContentClick={handleRulerClick}
-              handleRulerTrackingMouseDown={handleRulerMouseDown}
-              handleRulerMouseDown={handlePlayheadRulerMouseDown}
-            />
-          </div>
-        </div>
+			<div
+				className="relative flex flex-1 flex-col overflow-hidden"
+				ref={timelineRef}
+			>
+				<TimelinePlayhead
+					zoomLevel={zoomLevel}
+					rulerRef={rulerRef}
+					rulerScrollRef={rulerScrollRef}
+					tracksScrollRef={tracksScrollRef}
+					trackLabelsRef={trackLabelsRef}
+					timelineRef={timelineRef}
+					playheadRef={playheadRef}
+					isSnappingToPlayhead={
+						showSnapIndicator && currentSnapPoint?.type === "playhead"
+					}
+				/>
+				<SnapIndicator
+					snapPoint={currentSnapPoint}
+					zoomLevel={zoomLevel}
+					tracks={tracks}
+					timelineRef={timelineRef}
+					trackLabelsRef={trackLabelsRef}
+					tracksScrollRef={tracksScrollRef}
+					isVisible={showSnapIndicator}
+				/>
+				<div className="bg-panel sticky top-0 z-10 flex flex-col">
+					<div className="flex">
+						<div className="bg-panel flex h-4 w-28 shrink-0 items-center justify-between border-r px-3">
+							<span className="opacity-0">.</span>
+						</div>
+						<TimelineRuler
+							zoomLevel={zoomLevel}
+							dynamicTimelineWidth={dynamicTimelineWidth}
+							rulerRef={rulerRef}
+							rulerScrollRef={rulerScrollRef}
+							handleWheel={handleWheel}
+							handleTimelineContentClick={handleRulerClick}
+							handleRulerTrackingMouseDown={handleRulerMouseDown}
+							handleRulerMouseDown={handlePlayheadRulerMouseDown}
+						/>
+					</div>
+					<div className="flex">
+						<div className="bg-panel flex h-4 w-28 shrink-0 items-center justify-between border-r px-3">
+							<span className="opacity-0">.</span>
+						</div>
+						<TimelineBookmarksRow
+							zoomLevel={zoomLevel}
+							dynamicTimelineWidth={dynamicTimelineWidth}
+							bookmarksScrollRef={bookmarksScrollRef}
+							handleWheel={handleWheel}
+							handleTimelineContentClick={handleRulerClick}
+							handleRulerTrackingMouseDown={handleRulerMouseDown}
+							handleRulerMouseDown={handlePlayheadRulerMouseDown}
+						/>
+					</div>
+				</div>
 
-        <div className="flex flex-1 overflow-hidden">
-          {tracks.length > 0 && (
-            <div
-              ref={trackLabelsRef}
-              className="bg-panel z-100 w-28 shrink-0 overflow-y-auto border-r"
-              style={{ paddingTop: TIMELINE_CONSTANTS.PADDING_TOP }}
-            >
-              <ScrollArea className="h-full w-full" ref={trackLabelsScrollRef}>
-                <div className="flex flex-col gap-1">
-                  {tracks.map((track) => (
-                    <div
-                      key={track.id}
-                      className="group flex items-center px-3"
-                      style={{
-                        height: `${getTrackHeight({ type: track.type })}px`,
-                      }}
-                    >
-                      <div className="flex min-w-0 flex-1 items-center justify-end gap-2">
-                        {/* Debug main track */}
-                        {/* {isMainTrack(track) && (
+				<div className="flex flex-1 overflow-hidden">
+					{tracks.length > 0 && (
+						<div
+							ref={trackLabelsRef}
+							className="bg-panel z-100 w-28 shrink-0 overflow-y-auto border-r"
+							style={{ paddingTop: TIMELINE_CONSTANTS.PADDING_TOP }}
+						>
+							<ScrollArea className="h-full w-full" ref={trackLabelsScrollRef}>
+								<div className="flex flex-col gap-1">
+									{tracks.map((track) => (
+										<div
+											key={track.id}
+											className="group flex items-center px-3"
+											style={{
+												height: `${getTrackHeight({ type: track.type })}px`,
+											}}
+										>
+											<div className="flex min-w-0 flex-1 items-center justify-end gap-2">
+												{/* Debug main track */}
+												{/* {isMainTrack(track) && (
                           <div className="size-2 rounded-full bg-red-500" />
                         )} */}
 
-                        {canTracktHaveAudio(track) && (
-                          <TrackToggleIcon
-                            isOff={track.muted}
-                            icons={{
-                              on: Volume2,
-                              off: VolumeOff,
-                            }}
-                            onClick={() =>
-                              editor.timeline.toggleTrackMute({
-                                trackId: track.id,
-                              })
-                            }
-                          />
-                        )}
+												{canTracktHaveAudio(track) && (
+													<TrackToggleIcon
+														isOff={track.muted}
+														icons={{
+															on: Volume2,
+															off: VolumeOff,
+														}}
+														onClick={() =>
+															editor.timeline.toggleTrackMute({
+																trackId: track.id,
+															})
+														}
+													/>
+												)}
 
-                        {canTrackBeHidden(track) && (
-                          <TrackToggleIcon
-                            isOff={track.hidden}
-                            icons={{
-                              on: Eye,
-                              off: EyeOff,
-                            }}
-                            onClick={() =>
-                              editor.timeline.toggleTrackVisibility({
-                                trackId: track.id,
-                              })
-                            }
-                          />
-                        )}
+												{canTrackBeHidden(track) && (
+													<TrackToggleIcon
+														isOff={track.hidden}
+														icons={{
+															on: Eye,
+															off: EyeOff,
+														}}
+														onClick={() =>
+															editor.timeline.toggleTrackVisibility({
+																trackId: track.id,
+															})
+														}
+													/>
+												)}
 
-                        <TrackIcon track={track} />
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              </ScrollArea>
-            </div>
-          )}
+												<TrackIcon track={track} />
+											</div>
+										</div>
+									))}
+								</div>
+							</ScrollArea>
+						</div>
+					)}
 
-          <div
-            className="relative flex-1 overflow-hidden"
-            style={{ paddingTop: TIMELINE_CONSTANTS.PADDING_TOP }}
-            onWheel={(e) => {
-              if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
-                return;
-              }
-              handleWheel(e);
-            }}
-            onMouseDown={(e) => {
-              handleTracksMouseDown(e);
-              handleSelectionMouseDown(e);
-            }}
-            onClick={handleTracksClick}
-            ref={tracksContainerRef}
-          >
-            <SelectionBox
-              startPos={selectionBox?.startPos || null}
-              currentPos={selectionBox?.currentPos || null}
-              containerRef={tracksContainerRef}
-              isActive={selectionBox?.isActive || false}
-            />
-            <DragLine
-              dropTarget={dropTarget}
-              tracks={timeline.getTracks()}
-              isVisible={isDragOver}
-            />
-            <DragLine
-              dropTarget={dragDropTarget}
-              tracks={timeline.getTracks()}
-              isVisible={dragState.isDragging}
-            />
+					<div
+						className="relative flex-1 overflow-hidden"
+						style={{ paddingTop: TIMELINE_CONSTANTS.PADDING_TOP }}
+						onWheel={(e) => {
+							if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
+								return;
+							}
+							handleWheel(e);
+						}}
+						ref={tracksContainerRef}
+					>
+						<SelectionBox
+							startPos={selectionBox?.startPos || null}
+							currentPos={selectionBox?.currentPos || null}
+							containerRef={tracksContainerRef}
+							isActive={selectionBox?.isActive || false}
+						/>
+						<DragLine
+							dropTarget={dropTarget}
+							tracks={timeline.getTracks()}
+							isVisible={isDragOver}
+						/>
+						<DragLine
+							dropTarget={dragDropTarget}
+							tracks={timeline.getTracks()}
+							isVisible={dragState.isDragging}
+						/>
 
-            <ScrollArea
-              className="h-full w-full"
-              ref={tracksScrollRef}
-              onMouseDown={(event) => {
-                const isDirectTarget = event.target === event.currentTarget;
-                if (!isDirectTarget) return;
-                event.stopPropagation();
-                handleTracksMouseDown(event);
-                handleSelectionMouseDown(event);
-              }}
-              onClick={(event) => {
-                const isDirectTarget = event.target === event.currentTarget;
-                if (!isDirectTarget) return;
-                event.stopPropagation();
-                handleTracksClick(event);
-              }}
-            >
-              <div
-                className="relative flex-1"
-                style={{
-                  height: `${Math.max(
-                    tracksContainerHeight.min,
-                    Math.min(
-                      tracksContainerHeight.max,
-                      getTotalTracksHeight({ tracks }),
-                    ),
-                  )}px`,
-                  width: `${dynamicTimelineWidth}px`,
-                }}
-              >
-                {tracks.length === 0 ? (
-                  <div />
-                ) : (
-                  <>
-                    {tracks.map((track, index) => (
-                      <ContextMenu key={track.id}>
-                        <ContextMenuTrigger asChild>
-                          <div
-                            className="absolute right-0 left-0"
-                            style={{
-                              top: `${getCumulativeHeightBefore({
-                                tracks,
-                                trackIndex: index,
-                              })}px`,
-                              height: `${getTrackHeight({ type: track.type })}px`,
-                            }}
-                          >
-                            <TimelineTrackContent
-                              track={track}
-                              zoomLevel={zoomLevel}
-                              dragState={dragState}
-                              rulerScrollRef={rulerScrollRef}
-                              tracksScrollRef={tracksScrollRef}
-                              lastMouseXRef={lastMouseXRef}
-                              onSnapPointChange={handleSnapPointChange}
-                              onResizeStateChange={handleResizeStateChange}
-                              onElementMouseDown={handleElementMouseDown}
-                              onElementClick={handleElementClick}
-                            />
-                          </div>
-                        </ContextMenuTrigger>
-                        <ContextMenuContent className="z-200 w-40">
-                          <ContextMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              timeline.toggleTrackMute({
-                                trackId: track.id,
-                              });
-                            }}
-                          >
-                            <Volume2 />
-                            <span>
-                              {canTracktHaveAudio(track) && track.muted
-                                ? "Unmute track"
-                                : "Mute track"}
-                            </span>
-                          </ContextMenuItem>
-                          <ContextMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              timeline.toggleTrackVisibility({
-                                trackId: track.id,
-                              });
-                            }}
-                          >
-                            <>
-                              <EyeIcon />
-                              <span>
-                                {canTrackBeHidden(track) && track.hidden
-                                  ? "Show track"
-                                  : "Hide track"}
-                              </span>
-                            </>
-                          </ContextMenuItem>
-                          <ContextMenuItem
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              timeline.removeTrack({
-                                trackId: track.id,
-                              });
-                            }}
-                            variant="destructive"
-                          >
-                            <Trash2 />
-                            Delete track
-                          </ContextMenuItem>
-                        </ContextMenuContent>
-                      </ContextMenu>
-                    ))}
-                  </>
-                )}
-              </div>
-            </ScrollArea>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
+						<ScrollArea
+							className="h-full w-full"
+							ref={tracksScrollRef}
+							onMouseDown={(event) => {
+								const isDirectTarget = event.target === event.currentTarget;
+								if (!isDirectTarget) return;
+								event.stopPropagation();
+								handleTracksMouseDown(event);
+								handleSelectionMouseDown(event);
+							}}
+							onClick={(event) => {
+								const isDirectTarget = event.target === event.currentTarget;
+								if (!isDirectTarget) return;
+								event.stopPropagation();
+								handleTracksClick(event);
+							}}
+						>
+							<div
+								className="relative flex-1"
+								style={{
+									height: `${Math.max(
+										tracksContainerHeight.min,
+										Math.min(
+											tracksContainerHeight.max,
+											getTotalTracksHeight({ tracks }),
+										),
+									)}px`,
+									width: `${dynamicTimelineWidth}px`,
+								}}
+							>
+								{tracks.length === 0 ? (
+									<div />
+								) : (
+									tracks.map((track, index) => (
+										<ContextMenu key={track.id}>
+											<ContextMenuTrigger asChild>
+												<div
+													className="absolute right-0 left-0"
+													style={{
+														top: `${getCumulativeHeightBefore({
+															tracks,
+															trackIndex: index,
+														})}px`,
+														height: `${getTrackHeight({ type: track.type })}px`,
+													}}
+												>
+													<TimelineTrackContent
+														track={track}
+														zoomLevel={zoomLevel}
+														dragState={dragState}
+														rulerScrollRef={rulerScrollRef}
+														tracksScrollRef={tracksScrollRef}
+														lastMouseXRef={lastMouseXRef}
+														onSnapPointChange={handleSnapPointChange}
+														onResizeStateChange={handleResizeStateChange}
+														onElementMouseDown={handleElementMouseDown}
+														onElementClick={handleElementClick}
+													/>
+												</div>
+											</ContextMenuTrigger>
+											<ContextMenuContent className="z-200 w-40">
+												<ContextMenuItem
+													onClick={(e) => {
+														e.stopPropagation();
+														timeline.toggleTrackMute({
+															trackId: track.id,
+														});
+													}}
+												>
+													<Volume2 />
+													<span>
+														{canTracktHaveAudio(track) && track.muted
+															? "Unmute track"
+															: "Mute track"}
+													</span>
+												</ContextMenuItem>
+												<ContextMenuItem
+													onClick={(e) => {
+														e.stopPropagation();
+														timeline.toggleTrackVisibility({
+															trackId: track.id,
+														});
+													}}
+												>
+													<EyeIcon />
+													<span>
+														{canTrackBeHidden(track) && track.hidden
+															? "Show track"
+															: "Hide track"}
+													</span>
+												</ContextMenuItem>
+												<ContextMenuItem
+													onClick={(e) => {
+														e.stopPropagation();
+														timeline.removeTrack({
+															trackId: track.id,
+														});
+													}}
+													variant="destructive"
+												>
+													<Trash2 />
+													Delete track
+												</ContextMenuItem>
+											</ContextMenuContent>
+										</ContextMenu>
+									))
+								)}
+							</div>
+						</ScrollArea>
+					</div>
+				</div>
+			</div>
+		</section>
+	);
 }
 
 function TrackIcon({ track }: { track: TimelineTrack }) {
-  return <>{TRACK_ICONS[track.type]}</>;
+	return <>{TRACK_ICONS[track.type]}</>;
 }
 
 function TrackToggleIcon({
-  isOff,
-  icons,
-  onClick,
+	isOff,
+	icons,
+	onClick,
 }: {
-  isOff: boolean;
-  icons: {
-    on: LucideIcon;
-    off: LucideIcon;
-  };
-  onClick: () => void;
+	isOff: boolean;
+	icons: {
+		on: LucideIcon;
+		off: LucideIcon;
+	};
+	onClick: () => void;
 }) {
-  return (
-    <>
-      {isOff ? (
-        <icons.off
-          className="text-destructive size-4 cursor-pointer"
-          onClick={onClick}
-        />
-      ) : (
-        <icons.on
-          className="text-muted-foreground size-4 cursor-pointer"
-          onClick={onClick}
-        />
-      )}
-    </>
-  );
+	return (
+		<>
+			{isOff ? (
+				<icons.off
+					className="text-destructive size-4 cursor-pointer"
+					onClick={onClick}
+				/>
+			) : (
+				<icons.on
+					className="text-muted-foreground size-4 cursor-pointer"
+					onClick={onClick}
+				/>
+			)}
+		</>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/snap-indicator.tsx b/apps/web/src/components/editor/timeline/snap-indicator.tsx
index f5583244..6bfdf086 100644
--- a/apps/web/src/components/editor/timeline/snap-indicator.tsx
+++ b/apps/web/src/components/editor/timeline/snap-indicator.tsx
@@ -1,52 +1,52 @@
 "use client";
 
-import { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
 import { useSnapIndicatorPosition } from "@/hooks/timeline/use-snap-indicator-position";
+import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
 import type { TimelineTrack } from "@/types/timeline";
 
 interface SnapIndicatorProps {
-  snapPoint: SnapPoint | null;
-  zoomLevel: number;
-  isVisible: boolean;
-  tracks: TimelineTrack[];
-  timelineRef: React.RefObject<HTMLDivElement>;
-  trackLabelsRef?: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
+	snapPoint: SnapPoint | null;
+	zoomLevel: number;
+	isVisible: boolean;
+	tracks: TimelineTrack[];
+	timelineRef: React.RefObject<HTMLDivElement>;
+	trackLabelsRef?: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
 }
 
 export function SnapIndicator({
-  snapPoint,
-  zoomLevel,
-  isVisible,
-  tracks,
-  timelineRef,
-  trackLabelsRef,
-  tracksScrollRef,
+	snapPoint,
+	zoomLevel,
+	isVisible,
+	tracks,
+	timelineRef,
+	trackLabelsRef,
+	tracksScrollRef,
 }: SnapIndicatorProps) {
-  const { leftPosition, topPosition, height } = useSnapIndicatorPosition({
-    snapPoint,
-    zoomLevel,
-    tracks,
-    timelineRef,
-    trackLabelsRef,
-    tracksScrollRef,
-  });
+	const { leftPosition, topPosition, height } = useSnapIndicatorPosition({
+		snapPoint,
+		zoomLevel,
+		tracks,
+		timelineRef,
+		trackLabelsRef,
+		tracksScrollRef,
+	});
 
-  if (!isVisible || !snapPoint) {
-    return null;
-  }
+	if (!isVisible || !snapPoint) {
+		return null;
+	}
 
-  return (
-    <div
-      className="pointer-events-none absolute z-90"
-      style={{
-        left: `${leftPosition}px`,
-        top: topPosition,
-        height: `${height}px`,
-        width: "2px",
-      }}
-    >
-      <div className={"bg-primary/40 h-full w-0.5 opacity-80"} />
-    </div>
-  );
+	return (
+		<div
+			className="pointer-events-none absolute z-90"
+			style={{
+				left: `${leftPosition}px`,
+				top: topPosition,
+				height: `${height}px`,
+				width: "2px",
+			}}
+		>
+			<div className={"bg-primary/40 h-full w-0.5 opacity-80"} />
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index 04cfbdf3..535dde4a 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import {
-  Scissors,
-  Trash2,
-  Copy,
-  Search,
-  RefreshCw,
-  EyeOff,
-  Eye,
-  Volume2,
-  VolumeX,
-  ArrowUpDown,
+	Scissors,
+	Trash2,
+	Copy,
+	Search,
+	RefreshCw,
+	EyeOff,
+	Eye,
+	Volume2,
+	VolumeX,
+	ArrowUpDown,
 } from "lucide-react";
 import { useEditor } from "@/hooks/use-editor";
 import { useAssetsPanelStore } from "@/stores/assets-panel-store";
@@ -19,570 +19,580 @@ import { useTimelineElementResize } from "@/hooks/timeline/element/use-element-r
 import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import {
-  getTrackClasses,
-  getTrackHeight,
-  canElementHaveAudio,
-  canElementBeHidden,
-  hasMediaId,
+	getTrackClasses,
+	getTrackHeight,
+	canElementHaveAudio,
+	canElementBeHidden,
+	hasMediaId,
 } from "@/lib/timeline";
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuSeparator,
-  ContextMenuTrigger,
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuSeparator,
+	ContextMenuTrigger,
 } from "../../ui/context-menu";
 import type {
-  TimelineElement as TimelineElementType,
-  TimelineTrack,
-  ElementDragState,
+	TimelineElement as TimelineElementType,
+	TimelineTrack,
+	ElementDragState,
 } from "@/types/timeline";
-import { MediaAsset } from "@/types/assets";
+import type { MediaAsset } from "@/types/assets";
 import { mediaSupportsAudio } from "@/lib/media/media-utils";
 import { type TAction, invokeAction } from "@/lib/actions";
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
+import Image from "next/image";
 
 interface TimelineElementProps {
-  element: TimelineElementType;
-  track: TimelineTrack;
-  zoomLevel: number;
-  isSelected: boolean;
-  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
-  onResizeStateChange?: (params: { isResizing: boolean }) => void;
-  onElementMouseDown: (
-    e: React.MouseEvent,
-    element: TimelineElementType,
-  ) => void;
-  onElementClick: (e: React.MouseEvent, element: TimelineElementType) => void;
-  dragState: ElementDragState;
+	element: TimelineElementType;
+	track: TimelineTrack;
+	zoomLevel: number;
+	isSelected: boolean;
+	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
+	onResizeStateChange?: (params: { isResizing: boolean }) => void;
+	onElementMouseDown: (
+		e: React.MouseEvent,
+		element: TimelineElementType,
+	) => void;
+	onElementClick: (e: React.MouseEvent, element: TimelineElementType) => void;
+	dragState: ElementDragState;
 }
 
 export function TimelineElement({
-  element,
-  track,
-  zoomLevel,
-  isSelected,
-  onSnapPointChange,
-  onResizeStateChange,
-  onElementMouseDown,
-  onElementClick,
-  dragState,
+	element,
+	track,
+	zoomLevel,
+	isSelected,
+	onSnapPointChange,
+	onResizeStateChange,
+	onElementMouseDown,
+	onElementClick,
+	dragState,
 }: TimelineElementProps) {
-  const editor = useEditor();
-  const { selectedElements } = useElementSelection();
-  const { requestRevealMedia } = useAssetsPanelStore();
+	const editor = useEditor();
+	const { selectedElements } = useElementSelection();
+	const { requestRevealMedia } = useAssetsPanelStore();
 
-  const mediaAssets = editor.media.getAssets();
-  let mediaAsset: MediaAsset | null = null;
+	const mediaAssets = editor.media.getAssets();
+	let mediaAsset: MediaAsset | null = null;
 
-  if (hasMediaId(element)) {
-    mediaAsset =
-      mediaAssets.find((asset) => asset.id === element.mediaId) ?? null;
-  }
+	if (hasMediaId(element)) {
+		mediaAsset =
+			mediaAssets.find((asset) => asset.id === element.mediaId) ?? null;
+	}
 
-  const hasAudio = mediaSupportsAudio({ media: mediaAsset });
+	const hasAudio = mediaSupportsAudio({ media: mediaAsset });
 
-  const { handleResizeStart, isResizing, currentStartTime, currentDuration } =
-    useTimelineElementResize({
-      element,
-      track,
-      zoomLevel,
-      onSnapPointChange,
-      onResizeStateChange,
-    });
+	const { handleResizeStart, isResizing, currentStartTime, currentDuration } =
+		useTimelineElementResize({
+			element,
+			track,
+			zoomLevel,
+			onSnapPointChange,
+			onResizeStateChange,
+		});
 
-  const isCurrentElementSelected = selectedElements.some(
-    (selected) =>
-      selected.elementId === element.id && selected.trackId === track.id,
-  );
+	const isCurrentElementSelected = selectedElements.some(
+		(selected) =>
+			selected.elementId === element.id && selected.trackId === track.id,
+	);
 
-  const isBeingDragged = dragState.elementId === element.id;
-  const dragOffsetY =
-    isBeingDragged && dragState.isDragging
-      ? dragState.currentMouseY - dragState.startMouseY
-      : 0;
-  const elementStartTime =
-    isBeingDragged && dragState.isDragging
-      ? dragState.currentTime
-      : element.startTime;
-  const displayedStartTime = isResizing ? currentStartTime : elementStartTime;
-  const displayedDuration = isResizing ? currentDuration : element.duration;
-  const elementWidth =
-    displayedDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const elementLeft = displayedStartTime * 50 * zoomLevel;
+	const isBeingDragged = dragState.elementId === element.id;
+	const dragOffsetY =
+		isBeingDragged && dragState.isDragging
+			? dragState.currentMouseY - dragState.startMouseY
+			: 0;
+	const elementStartTime =
+		isBeingDragged && dragState.isDragging
+			? dragState.currentTime
+			: element.startTime;
+	const displayedStartTime = isResizing ? currentStartTime : elementStartTime;
+	const displayedDuration = isResizing ? currentDuration : element.duration;
+	const elementWidth =
+		displayedDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const elementLeft = displayedStartTime * 50 * zoomLevel;
 
-  const handleAction = ({
-    action,
-    event,
-  }: {
-    action: TAction;
-    event: React.MouseEvent;
-  }) => {
-    event.stopPropagation();
-    invokeAction(action);
-  };
+	const handleAction = ({
+		action,
+		event,
+	}: {
+		action: TAction;
+		event: React.MouseEvent;
+	}) => {
+		event.stopPropagation();
+		invokeAction(action);
+	};
 
-  const handleRevealInMedia = ({ event }: { event: React.MouseEvent }) => {
-    event.stopPropagation();
-    if (hasMediaId(element)) {
-      requestRevealMedia(element.mediaId);
-    }
-  };
+	const handleRevealInMedia = ({ event }: { event: React.MouseEvent }) => {
+		event.stopPropagation();
+		if (hasMediaId(element)) {
+			requestRevealMedia(element.mediaId);
+		}
+	};
 
-  const isMuted = canElementHaveAudio(element) && element.muted === true;
+	const isMuted = canElementHaveAudio(element) && element.muted === true;
 
-  return (
-    <ContextMenu>
-      <ContextMenuTrigger asChild>
-        <div
-          className={`absolute top-0 h-full select-none ${
-            isBeingDragged ? "z-30" : "z-10"
-          }`}
-          style={{
-            left: `${elementLeft}px`,
-            width: `${elementWidth}px`,
-            transform:
-              isBeingDragged && dragState.isDragging
-                ? `translate3d(0, ${dragOffsetY}px, 0)`
-                : undefined,
-          }}
-        >
-          <ElementInner
-            element={element}
-            track={track}
-            isSelected={isSelected}
-            isBeingDragged={isBeingDragged}
-            hasAudio={hasAudio}
-            isMuted={isMuted}
-            mediaAssets={mediaAssets}
-            onElementClick={onElementClick}
-            onElementMouseDown={onElementMouseDown}
-            handleResizeStart={handleResizeStart}
-          />
-        </div>
-      </ContextMenuTrigger>
-      <ContextMenuContent className="z-200">
-        <ContextMenuItem
-          onClick={(event) => handleAction({ action: "split-selected", event })}
-        >
-          <Scissors className="mr-2 size-4" />
-          {selectedElements.length > 1 && isCurrentElementSelected
-            ? `Split ${selectedElements.length} elements at playhead`
-            : "Split at playhead"}
-        </ContextMenuItem>
-        <CopyMenuItem
-          isMultipleSelected={selectedElements.length > 1}
-          isCurrentElementSelected={isCurrentElementSelected}
-          selectedCount={selectedElements.length}
-          onClick={(event) => handleAction({ action: "copy-selected", event })}
-        />
-        {canElementHaveAudio(element) && hasAudio && (
-          <MuteMenuItem
-            element={element}
-            isMultipleSelected={selectedElements.length > 1}
-            isCurrentElementSelected={isCurrentElementSelected}
-            isMuted={isMuted}
-            selectedCount={selectedElements.length}
-            onClick={(event) =>
-              handleAction({ action: "toggle-elements-muted-selected", event })
-            }
-          />
-        )}
-        {canElementBeHidden(element) && (
-          <VisibilityMenuItem
-            element={element}
-            isMultipleSelected={selectedElements.length > 1}
-            isCurrentElementSelected={isCurrentElementSelected}
-            selectedCount={selectedElements.length}
-            onClick={(event) =>
-              handleAction({
-                action: "toggle-elements-visibility-selected",
-                event,
-              })
-            }
-          />
-        )}
-        {selectedElements.length === 1 && (
-          <ContextMenuItem
-            onClick={(event) =>
-              handleAction({ action: "duplicate-selected", event })
-            }
-          >
-            <Copy className="mr-2 size-4" />
-            Duplicate {element.type === "text" ? "text" : "clip"}
-          </ContextMenuItem>
-        )}
-        <ContextMenuItem disabled>
-          <ArrowUpDown className="mr-2 size-4" />
-          Move to track (Coming soon)
-        </ContextMenuItem>
-        {selectedElements.length === 1 && hasMediaId(element) && (
-          <>
-            <ContextMenuItem
-              onClick={(event) => handleRevealInMedia({ event })}
-            >
-              <Search className="mr-2 size-4" />
-              Reveal in media
-            </ContextMenuItem>
-            <ContextMenuItem disabled>
-              <RefreshCw className="mr-2 size-4" />
-              Replace clip (Coming soon)
-            </ContextMenuItem>
-          </>
-        )}
-        <ContextMenuSeparator />
-        <DeleteMenuItem
-          isMultipleSelected={selectedElements.length > 1}
-          isCurrentElementSelected={isCurrentElementSelected}
-          elementType={element.type}
-          selectedCount={selectedElements.length}
-          onClick={(event) =>
-            handleAction({ action: "delete-selected", event })
-          }
-        />
-      </ContextMenuContent>
-    </ContextMenu>
-  );
+	return (
+		<ContextMenu>
+			<ContextMenuTrigger asChild>
+				<div
+					className={`absolute top-0 h-full select-none ${
+						isBeingDragged ? "z-30" : "z-10"
+					}`}
+					style={{
+						left: `${elementLeft}px`,
+						width: `${elementWidth}px`,
+						transform:
+							isBeingDragged && dragState.isDragging
+								? `translate3d(0, ${dragOffsetY}px, 0)`
+								: undefined,
+					}}
+				>
+					<ElementInner
+						element={element}
+						track={track}
+						isSelected={isSelected}
+						isBeingDragged={isBeingDragged}
+						hasAudio={hasAudio}
+						isMuted={isMuted}
+						mediaAssets={mediaAssets}
+						onElementClick={onElementClick}
+						onElementMouseDown={onElementMouseDown}
+						handleResizeStart={handleResizeStart}
+					/>
+				</div>
+			</ContextMenuTrigger>
+			<ContextMenuContent className="z-200">
+				<ContextMenuItem
+					onClick={(event) => handleAction({ action: "split-selected", event })}
+				>
+					<Scissors className="mr-2 size-4" />
+					{selectedElements.length > 1 && isCurrentElementSelected
+						? `Split ${selectedElements.length} elements at playhead`
+						: "Split at playhead"}
+				</ContextMenuItem>
+				<CopyMenuItem
+					isMultipleSelected={selectedElements.length > 1}
+					isCurrentElementSelected={isCurrentElementSelected}
+					selectedCount={selectedElements.length}
+					onClick={(event) => handleAction({ action: "copy-selected", event })}
+				/>
+				{canElementHaveAudio(element) && hasAudio && (
+					<MuteMenuItem
+						element={element}
+						isMultipleSelected={selectedElements.length > 1}
+						isCurrentElementSelected={isCurrentElementSelected}
+						isMuted={isMuted}
+						selectedCount={selectedElements.length}
+						onClick={(event) =>
+							handleAction({ action: "toggle-elements-muted-selected", event })
+						}
+					/>
+				)}
+				{canElementBeHidden(element) && (
+					<VisibilityMenuItem
+						element={element}
+						isMultipleSelected={selectedElements.length > 1}
+						isCurrentElementSelected={isCurrentElementSelected}
+						selectedCount={selectedElements.length}
+						onClick={(event) =>
+							handleAction({
+								action: "toggle-elements-visibility-selected",
+								event,
+							})
+						}
+					/>
+				)}
+				{selectedElements.length === 1 && (
+					<ContextMenuItem
+						onClick={(event) =>
+							handleAction({ action: "duplicate-selected", event })
+						}
+					>
+						<Copy className="mr-2 size-4" />
+						Duplicate {element.type === "text" ? "text" : "clip"}
+					</ContextMenuItem>
+				)}
+				<ContextMenuItem disabled>
+					<ArrowUpDown className="mr-2 size-4" />
+					Move to track (Coming soon)
+				</ContextMenuItem>
+				{selectedElements.length === 1 && hasMediaId(element) && (
+					<>
+						<ContextMenuItem
+							onClick={(event) => handleRevealInMedia({ event })}
+						>
+							<Search className="mr-2 size-4" />
+							Reveal in media
+						</ContextMenuItem>
+						<ContextMenuItem disabled>
+							<RefreshCw className="mr-2 size-4" />
+							Replace clip (Coming soon)
+						</ContextMenuItem>
+					</>
+				)}
+				<ContextMenuSeparator />
+				<DeleteMenuItem
+					isMultipleSelected={selectedElements.length > 1}
+					isCurrentElementSelected={isCurrentElementSelected}
+					elementType={element.type}
+					selectedCount={selectedElements.length}
+					onClick={(event) =>
+						handleAction({ action: "delete-selected", event })
+					}
+				/>
+			</ContextMenuContent>
+		</ContextMenu>
+	);
 }
 
 function ElementInner({
-  element,
-  track,
-  isSelected,
-  isBeingDragged,
-  hasAudio,
-  isMuted,
-  mediaAssets,
-  onElementClick,
-  onElementMouseDown,
-  handleResizeStart,
+	element,
+	track,
+	isSelected,
+	isBeingDragged,
+	hasAudio,
+	isMuted,
+	mediaAssets,
+	onElementClick,
+	onElementMouseDown,
+	handleResizeStart,
 }: {
-  element: TimelineElementType;
-  track: TimelineTrack;
-  isSelected: boolean;
-  isBeingDragged: boolean;
-  hasAudio: boolean;
-  isMuted: boolean;
-  mediaAssets: MediaAsset[];
-  onElementClick: (e: React.MouseEvent, element: TimelineElementType) => void;
-  onElementMouseDown: (
-    e: React.MouseEvent,
-    element: TimelineElementType,
-  ) => void;
-  handleResizeStart: (params: {
-    e: React.MouseEvent;
-    elementId: string;
-    side: "left" | "right";
-  }) => void;
+	element: TimelineElementType;
+	track: TimelineTrack;
+	isSelected: boolean;
+	isBeingDragged: boolean;
+	hasAudio: boolean;
+	isMuted: boolean;
+	mediaAssets: MediaAsset[];
+	onElementClick: (e: React.MouseEvent, element: TimelineElementType) => void;
+	onElementMouseDown: (
+		e: React.MouseEvent,
+		element: TimelineElementType,
+	) => void;
+	handleResizeStart: (params: {
+		e: React.MouseEvent;
+		elementId: string;
+		side: "left" | "right";
+	}) => void;
 }) {
-  return (
-    <div
-      className={`relative h-full cursor-pointer overflow-hidden rounded-[0.5rem] ${getTrackClasses(
-        {
-          type: track.type,
-        },
-      )} ${isBeingDragged ? "z-30" : "z-10"} ${canElementBeHidden(element) && element.hidden ? "opacity-50" : ""}`}
-      onClick={(e) => onElementClick(e, element)}
-      onMouseDown={(e) => onElementMouseDown(e, element)}
-      onContextMenu={(e) => onElementMouseDown(e, element)}
-    >
-      <div className="absolute inset-0 flex h-full items-center">
-        <ElementContent
-          element={element}
-          track={track}
-          isSelected={isSelected}
-          mediaAssets={mediaAssets}
-        />
-      </div>
+	return (
+		<div
+			className={`relative h-full cursor-pointer overflow-hidden rounded-[0.5rem] ${getTrackClasses(
+				{
+					type: track.type,
+				},
+			)} ${isBeingDragged ? "z-30" : "z-10"} ${canElementBeHidden(element) && element.hidden ? "opacity-50" : ""}`}
+		>
+			<button
+				type="button"
+				className="absolute inset-0 size-full cursor-pointer"
+				onClick={(e) => onElementClick(e, element)}
+				onMouseDown={(e) => onElementMouseDown(e, element)}
+				onContextMenu={(e) => onElementMouseDown(e, element)}
+			>
+				<div className="absolute inset-0 flex h-full items-center">
+					<ElementContent
+						element={element}
+						track={track}
+						isSelected={isSelected}
+						mediaAssets={mediaAssets}
+					/>
+				</div>
 
-      {(hasAudio ? isMuted : canElementBeHidden(element) && element.hidden) && (
-        <div className="bg-opacity-50 pointer-events-none absolute inset-0 flex items-center justify-center bg-black">
-          {hasAudio ? (
-            <VolumeX className="size-6 text-white" />
-          ) : (
-            <EyeOff className="size-6 text-white" />
-          )}
-        </div>
-      )}
+				{(hasAudio ? isMuted : canElementBeHidden(element) && element.hidden) && (
+					<div className="bg-opacity-50 pointer-events-none absolute inset-0 flex items-center justify-center bg-black">
+						{hasAudio ? (
+							<VolumeX className="size-6 text-white" />
+						) : (
+							<EyeOff className="size-6 text-white" />
+						)}
+					</div>
+				)}
+			</button>
 
-      {isSelected && (
-        <>
-          <ResizeHandle
-            side="left"
-            elementId={element.id}
-            handleResizeStart={handleResizeStart}
-          />
-          <ResizeHandle
-            side="right"
-            elementId={element.id}
-            handleResizeStart={handleResizeStart}
-          />
-        </>
-      )}
-    </div>
-  );
+			{isSelected && (
+				<>
+					<ResizeHandle
+						side="left"
+						elementId={element.id}
+						handleResizeStart={handleResizeStart}
+					/>
+					<ResizeHandle
+						side="right"
+						elementId={element.id}
+						handleResizeStart={handleResizeStart}
+					/>
+				</>
+			)}
+		</div>
+	);
 }
 
 function ResizeHandle({
-  side,
-  elementId,
-  handleResizeStart,
+	side,
+	elementId,
+	handleResizeStart,
 }: {
-  side: "left" | "right";
-  elementId: string;
-  handleResizeStart: (params: {
-    e: React.MouseEvent;
-    elementId: string;
-    side: "left" | "right";
-  }) => void;
+	side: "left" | "right";
+	elementId: string;
+	handleResizeStart: (params: {
+		e: React.MouseEvent;
+		elementId: string;
+		side: "left" | "right";
+	}) => void;
 }) {
-  const isLeft = side === "left";
-  return (
-    <div
-      className={`bg-primary absolute top-0 bottom-0 z-50 flex w-[0.6rem] items-center justify-center ${isLeft ? "left-0 cursor-w-resize" : "right-0 cursor-e-resize"}`}
-      onMouseDown={(e) => handleResizeStart({ e, elementId, side })}
-    >
-      <div className="bg-foreground h-[1.5rem] w-[0.2rem] rounded-full" />
-    </div>
-  );
+	const isLeft = side === "left";
+	return (
+		<button
+			type="button"
+			className={`bg-primary absolute top-0 bottom-0 z-50 flex w-[0.6rem] items-center justify-center ${isLeft ? "left-0 cursor-w-resize" : "right-0 cursor-e-resize"}`}
+			onMouseDown={(e) => handleResizeStart({ e, elementId, side })}
+			aria-label={`${isLeft ? "Left" : "Right"} resize handle`}
+		>
+			<div className="bg-foreground h-[1.5rem] w-[0.2rem] rounded-full" />
+		</button>
+	);
 }
 
 function ElementContent({
-  element,
-  track,
-  isSelected,
-  mediaAssets,
+	element,
+	track,
+	isSelected,
+	mediaAssets,
 }: {
-  element: TimelineElementType;
-  track: TimelineTrack;
-  isSelected: boolean;
-  mediaAssets: MediaAsset[];
+	element: TimelineElementType;
+	track: TimelineTrack;
+	isSelected: boolean;
+	mediaAssets: MediaAsset[];
 }) {
-  if (element.type === "text") {
-    return (
-      <div className="flex size-full items-center justify-start pl-2">
-        <span className="truncate text-xs text-white">{element.content}</span>
-      </div>
-    );
-  }
+	if (element.type === "text") {
+		return (
+			<div className="flex size-full items-center justify-start pl-2">
+				<span className="truncate text-xs text-white">{element.content}</span>
+			</div>
+		);
+	}
 
-  if (element.type === "sticker") {
-    return (
-      <div className="flex size-full items-center gap-2 pl-2">
-        <img
-          src={`https://api.iconify.design/${element.iconName}.svg?width=20&height=20`}
-          alt={element.name}
-          className="size-5 shrink-0"
-        />
-        <span className="truncate text-xs text-white">{element.name}</span>
-      </div>
-    );
-  }
+	if (element.type === "sticker") {
+		return (
+			<div className="flex size-full items-center gap-2 pl-2">
+				<Image
+					src={`https://api.iconify.design/${element.iconName}.svg?width=20&height=20`}
+					alt={element.name}
+					className="size-5 shrink-0"
+          width={20}
+          height={20}
+					unoptimized
+				/>
+				<span className="truncate text-xs text-white">{element.name}</span>
+			</div>
+		);
+	}
 
-  if (element.type === "audio") {
-    const audioBuffer =
-      element.sourceType === "library" ? element.buffer : undefined;
+	if (element.type === "audio") {
+		const audioBuffer =
+			element.sourceType === "library" ? element.buffer : undefined;
 
-    const audioUrl =
-      element.sourceType === "library"
-        ? element.sourceUrl
-        : mediaAssets.find((asset) => asset.id === element.mediaId)?.url;
+		const audioUrl =
+			element.sourceType === "library"
+				? element.sourceUrl
+				: mediaAssets.find((asset) => asset.id === element.mediaId)?.url;
 
-    if (audioBuffer || audioUrl) {
-      return (
-        <div className="flex size-full items-center gap-2">
-          <div className="min-w-0 flex-1">
-            <AudioWaveform
-              audioBuffer={audioBuffer}
-              audioUrl={audioUrl}
-              height={24}
-              className="w-full"
-            />
-          </div>
-        </div>
-      );
-    }
+		if (audioBuffer || audioUrl) {
+			return (
+				<div className="flex size-full items-center gap-2">
+					<div className="min-w-0 flex-1">
+						<AudioWaveform
+							audioBuffer={audioBuffer}
+							audioUrl={audioUrl}
+							height={24}
+							className="w-full"
+						/>
+					</div>
+				</div>
+			);
+		}
 
-    return (
-      <span className="text-foreground/80 truncate text-xs">
-        {element.name}
-      </span>
-    );
-  }
+		return (
+			<span className="text-foreground/80 truncate text-xs">
+				{element.name}
+			</span>
+		);
+	}
 
-  const mediaAsset = mediaAssets.find((asset) => asset.id === element.mediaId);
-  if (!mediaAsset) {
-    return (
-      <span className="text-foreground/80 truncate text-xs">
-        {element.name}
-      </span>
-    );
-  }
+	const mediaAsset = mediaAssets.find((asset) => asset.id === element.mediaId);
+	if (!mediaAsset) {
+		return (
+			<span className="text-foreground/80 truncate text-xs">
+				{element.name}
+			</span>
+		);
+	}
 
-  if (
-    mediaAsset.type === "image" ||
-    (mediaAsset.type === "video" && mediaAsset.thumbnailUrl)
-  ) {
-    const trackHeight = getTrackHeight({ type: track.type });
-    const tileWidth = trackHeight * (16 / 9);
-    const imageUrl =
-      mediaAsset.type === "image" ? mediaAsset.url : mediaAsset.thumbnailUrl;
+	if (
+		mediaAsset.type === "image" ||
+		(mediaAsset.type === "video" && mediaAsset.thumbnailUrl)
+	) {
+		const trackHeight = getTrackHeight({ type: track.type });
+		const tileWidth = trackHeight * (16 / 9);
+		const imageUrl =
+			mediaAsset.type === "image" ? mediaAsset.url : mediaAsset.thumbnailUrl;
 
-    return (
-      <div className="flex size-full items-center justify-center">
-        <div
-          className={`relative size-full ${isSelected ? "bg-primary" : "bg-transparent"}`}
-        >
-          <div
-            className="absolute right-0 left-0"
-            style={{
-              backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
-              backgroundRepeat: "repeat-x",
-              backgroundSize: `${tileWidth}px ${trackHeight}px`,
-              backgroundPosition: "left center",
-              pointerEvents: "none",
-              top: isSelected ? "0.25rem" : "0rem",
-              bottom: isSelected ? "0.25rem" : "0rem",
-            }}
-            aria-label={`Tiled ${mediaAsset.type === "image" ? "background" : "thumbnail"} of ${mediaAsset.name}`}
-          />
-        </div>
-      </div>
-    );
-  }
+		return (
+			<div className="flex size-full items-center justify-center">
+				<div
+					className={`relative size-full ${isSelected ? "bg-primary" : "bg-transparent"}`}
+				>
+					<div
+						className="absolute right-0 left-0"
+						style={{
+							backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
+							backgroundRepeat: "repeat-x",
+							backgroundSize: `${tileWidth}px ${trackHeight}px`,
+							backgroundPosition: "left center",
+							pointerEvents: "none",
+							top: isSelected ? "0.25rem" : "0rem",
+							bottom: isSelected ? "0.25rem" : "0rem",
+						}}
+					/>
+				</div>
+			</div>
+		);
+	}
 
-  return (
-    <span className="text-foreground/80 truncate text-xs">{element.name}</span>
-  );
+	return (
+		<span className="text-foreground/80 truncate text-xs">{element.name}</span>
+	);
 }
 
 function CopyMenuItem({
-  isMultipleSelected,
-  isCurrentElementSelected,
-  selectedCount,
-  onClick,
+	isMultipleSelected,
+	isCurrentElementSelected,
+	selectedCount,
+	onClick,
 }: {
-  isMultipleSelected: boolean;
-  isCurrentElementSelected: boolean;
-  selectedCount: number;
-  onClick: (e: React.MouseEvent) => void;
+	isMultipleSelected: boolean;
+	isCurrentElementSelected: boolean;
+	selectedCount: number;
+	onClick: (e: React.MouseEvent) => void;
 }) {
-  return (
-    <ContextMenuItem onClick={onClick}>
-      <Copy className="mr-2 size-4" />
-      {isMultipleSelected && isCurrentElementSelected
-        ? `Copy ${selectedCount} elements`
-        : "Copy element"}
-    </ContextMenuItem>
-  );
+	return (
+		<ContextMenuItem onClick={onClick}>
+			<Copy className="mr-2 size-4" />
+			{isMultipleSelected && isCurrentElementSelected
+				? `Copy ${selectedCount} elements`
+				: "Copy element"}
+		</ContextMenuItem>
+	);
 }
 
 function MuteMenuItem({
-  element,
-  isMultipleSelected,
-  isCurrentElementSelected,
-  isMuted,
-  selectedCount,
-  onClick,
+	element,
+	isMultipleSelected,
+	isCurrentElementSelected,
+	isMuted,
+	selectedCount,
+	onClick,
 }: {
-  element: TimelineElementType;
-  isMultipleSelected: boolean;
-  isCurrentElementSelected: boolean;
-  isMuted: boolean;
-  selectedCount: number;
-  onClick: (e: React.MouseEvent) => void;
+	element: TimelineElementType;
+	isMultipleSelected: boolean;
+	isCurrentElementSelected: boolean;
+	isMuted: boolean;
+	selectedCount: number;
+	onClick: (e: React.MouseEvent) => void;
 }) {
-  const getIcon = () => {
-    if (isMultipleSelected && isCurrentElementSelected) {
-      return <VolumeX className="mr-2 size-4" />;
-    }
-    return isMuted ? (
-      <Volume2 className="mr-2 size-4" />
-    ) : (
-      <VolumeX className="mr-2 size-4" />
-    );
-  };
+	const getIcon = () => {
+		if (isMultipleSelected && isCurrentElementSelected) {
+			return <VolumeX className="mr-2 size-4" />;
+		}
+		return isMuted ? (
+			<Volume2 className="mr-2 size-4" />
+		) : (
+			<VolumeX className="mr-2 size-4" />
+		);
+	};
 
-  const getLabel = () => {
-    if (isMultipleSelected && isCurrentElementSelected) {
-      return `Toggle mute ${selectedCount} elements`;
-    }
-    const suffix = element.type === "text" ? "text" : "clip";
-    return isMuted ? `Unmute ${suffix}` : `Mute ${suffix}`;
-  };
+	const getLabel = () => {
+		if (isMultipleSelected && isCurrentElementSelected) {
+			return `Toggle mute ${selectedCount} elements`;
+		}
+		const suffix = element.type === "text" ? "text" : "clip";
+		return isMuted ? `Unmute ${suffix}` : `Mute ${suffix}`;
+	};
 
-  return (
-    <ContextMenuItem onClick={onClick}>
-      {getIcon()}
-      <span>{getLabel()}</span>
-    </ContextMenuItem>
-  );
+	return (
+		<ContextMenuItem onClick={onClick}>
+			{getIcon()}
+			<span>{getLabel()}</span>
+		</ContextMenuItem>
+	);
 }
 
 function VisibilityMenuItem({
-  element,
-  isMultipleSelected,
-  isCurrentElementSelected,
-  selectedCount,
-  onClick,
+	element,
+	isMultipleSelected,
+	isCurrentElementSelected,
+	selectedCount,
+	onClick,
 }: {
-  element: TimelineElementType;
-  isMultipleSelected: boolean;
-  isCurrentElementSelected: boolean;
-  selectedCount: number;
-  onClick: (e: React.MouseEvent) => void;
+	element: TimelineElementType;
+	isMultipleSelected: boolean;
+	isCurrentElementSelected: boolean;
+	selectedCount: number;
+	onClick: (e: React.MouseEvent) => void;
 }) {
-  const isHidden = canElementBeHidden(element) && element.hidden;
+	const isHidden = canElementBeHidden(element) && element.hidden;
 
-  const getIcon = () => {
-    if (isMultipleSelected && isCurrentElementSelected) {
-      return <EyeOff className="mr-2 size-4" />;
-    }
-    return isHidden ? (
-      <Eye className="mr-2 size-4" />
-    ) : (
-      <EyeOff className="mr-2 size-4" />
-    );
-  };
+	const getIcon = () => {
+		if (isMultipleSelected && isCurrentElementSelected) {
+			return <EyeOff className="mr-2 size-4" />;
+		}
+		return isHidden ? (
+			<Eye className="mr-2 size-4" />
+		) : (
+			<EyeOff className="mr-2 size-4" />
+		);
+	};
 
-  const getLabel = () => {
-    if (isMultipleSelected && isCurrentElementSelected) {
-      return `Toggle visibility ${selectedCount} elements`;
-    }
-    const suffix = element.type === "text" ? "text" : "clip";
-    return isHidden ? `Show ${suffix}` : `Hide ${suffix}`;
-  };
+	const getLabel = () => {
+		if (isMultipleSelected && isCurrentElementSelected) {
+			return `Toggle visibility ${selectedCount} elements`;
+		}
+		const suffix = element.type === "text" ? "text" : "clip";
+		return isHidden ? `Show ${suffix}` : `Hide ${suffix}`;
+	};
 
-  return (
-    <ContextMenuItem onClick={onClick}>
-      {getIcon()}
-      <span>{getLabel()}</span>
-    </ContextMenuItem>
-  );
+	return (
+		<ContextMenuItem onClick={onClick}>
+			{getIcon()}
+			<span>{getLabel()}</span>
+		</ContextMenuItem>
+	);
 }
 
 function DeleteMenuItem({
-  isMultipleSelected,
-  isCurrentElementSelected,
-  elementType,
-  selectedCount,
-  onClick,
+	isMultipleSelected,
+	isCurrentElementSelected,
+	elementType,
+	selectedCount,
+	onClick,
 }: {
-  isMultipleSelected: boolean;
-  isCurrentElementSelected: boolean;
-  elementType: TimelineElementType["type"];
-  selectedCount: number;
-  onClick: (e: React.MouseEvent) => void;
+	isMultipleSelected: boolean;
+	isCurrentElementSelected: boolean;
+	elementType: TimelineElementType["type"];
+	selectedCount: number;
+	onClick: (e: React.MouseEvent) => void;
 }) {
-  return (
-    <ContextMenuItem
-      onClick={onClick}
-      className="text-destructive focus:text-destructive"
-    >
-      <Trash2 className="mr-2 size-4" />
-      {isMultipleSelected && isCurrentElementSelected
-        ? `Delete ${selectedCount} elements`
-        : `Delete ${elementType === "text" ? "text" : "clip"}`}
-    </ContextMenuItem>
-  );
+	return (
+		<ContextMenuItem
+			onClick={onClick}
+			className="text-destructive focus:text-destructive"
+		>
+			<Trash2 className="mr-2 size-4" />
+			{isMultipleSelected && isCurrentElementSelected
+				? `Delete ${selectedCount} elements`
+				: `Delete ${elementType === "text" ? "text" : "clip"}`}
+		</ContextMenuItem>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index f62a7023..c06962e2 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -1,106 +1,129 @@
 "use client";
 
-import { useRef, useState, useEffect } from "react";
+import { useEffect, useRef, useState } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useTimelinePlayhead } from "@/hooks/timeline/use-timeline-playhead";
 import { useEditor } from "@/hooks/use-editor";
 
 interface TimelinePlayheadProps {
-  zoomLevel: number;
-  rulerRef: React.RefObject<HTMLDivElement>;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  trackLabelsRef?: React.RefObject<HTMLDivElement>;
-  timelineRef: React.RefObject<HTMLDivElement>;
-  playheadRef?: React.RefObject<HTMLDivElement>;
-  isSnappingToPlayhead?: boolean;
+	zoomLevel: number;
+	rulerRef: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	trackLabelsRef?: React.RefObject<HTMLDivElement>;
+	timelineRef: React.RefObject<HTMLDivElement>;
+	playheadRef?: React.RefObject<HTMLDivElement>;
+	isSnappingToPlayhead?: boolean;
 }
 
 export function TimelinePlayhead({
-  zoomLevel,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  trackLabelsRef,
-  timelineRef,
-  playheadRef: externalPlayheadRef,
-  isSnappingToPlayhead = false,
+	zoomLevel,
+	rulerRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	trackLabelsRef,
+	timelineRef,
+	playheadRef: externalPlayheadRef,
+	isSnappingToPlayhead = false,
 }: TimelinePlayheadProps) {
-  const editor = useEditor();
-  const duration = editor.timeline.getTotalDuration();
-  const tracks = editor.timeline.getTracks();
-  const internalPlayheadRef = useRef<HTMLDivElement>(null);
-  const playheadRef = externalPlayheadRef || internalPlayheadRef;
-  const [scrollLeft, setScrollLeft] = useState(0);
+	const editor = useEditor();
+	const duration = editor.timeline.getTotalDuration();
+	const tracks = editor.timeline.getTracks();
+	const internalPlayheadRef = useRef<HTMLDivElement>(null);
+	const playheadRef = externalPlayheadRef || internalPlayheadRef;
+	const [scrollLeft, setScrollLeft] = useState(0);
 
-  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
-    zoomLevel,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
+	const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
+		zoomLevel,
+		rulerRef,
+		rulerScrollRef,
+		tracksScrollRef,
+		playheadRef,
+	});
 
-  useEffect(() => {
-    const tracksViewport = tracksScrollRef.current;
+	useEffect(() => {
+		const tracksViewport = tracksScrollRef.current;
 
-    if (!tracksViewport) return;
+		if (!tracksViewport) return;
 
-    const handleScroll = () => {
-      setScrollLeft(tracksViewport.scrollLeft);
-    };
+		const handleScroll = () => {
+			setScrollLeft(tracksViewport.scrollLeft);
+		};
 
-    setScrollLeft(tracksViewport.scrollLeft);
+		setScrollLeft(tracksViewport.scrollLeft);
 
-    tracksViewport.addEventListener("scroll", handleScroll);
-    return () => tracksViewport.removeEventListener("scroll", handleScroll);
-  }, [tracksScrollRef]);
+		tracksViewport.addEventListener("scroll", handleScroll);
+		return () => tracksViewport.removeEventListener("scroll", handleScroll);
+	}, [tracksScrollRef]);
 
-  const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-  const totalHeight = timelineContainerHeight - 4;
+	const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
+	const totalHeight = timelineContainerHeight - 4;
 
-  const trackLabelsWidth =
-    tracks.length > 0 && trackLabelsRef?.current
-      ? trackLabelsRef.current.offsetWidth
-      : 0;
+	const trackLabelsWidth =
+		tracks.length > 0 && trackLabelsRef?.current
+			? trackLabelsRef.current.offsetWidth
+			: 0;
 
-  const timelinePosition =
-    playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const rawLeftPosition = trackLabelsWidth + timelinePosition - scrollLeft;
+	const timelinePosition =
+		playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const rawLeftPosition = trackLabelsWidth + timelinePosition - scrollLeft;
 
-  const timelineContentWidth =
-    duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const tracksViewport = tracksScrollRef.current;
-  const viewportWidth = tracksViewport?.clientWidth || 1000;
+	const timelineContentWidth =
+		duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const tracksViewport = tracksScrollRef.current;
+	const viewportWidth = tracksViewport?.clientWidth || 1000;
 
-  const leftBoundary = trackLabelsWidth;
-  const rightBoundary = Math.min(
-    trackLabelsWidth + timelineContentWidth - scrollLeft,
-    trackLabelsWidth + viewportWidth,
-  );
+	const leftBoundary = trackLabelsWidth;
+	const rightBoundary = Math.min(
+		trackLabelsWidth + timelineContentWidth - scrollLeft,
+		trackLabelsWidth + viewportWidth,
+	);
 
-  const leftPosition = Math.max(
-    leftBoundary,
-    Math.min(rightBoundary, rawLeftPosition),
-  );
+	const leftPosition = Math.max(
+		leftBoundary,
+		Math.min(rightBoundary, rawLeftPosition),
+	);
 
-  return (
-    <div
-      ref={playheadRef}
-      className="pointer-events-auto absolute z-60"
-      style={{
-        left: `${leftPosition}px`,
-        top: 0,
-        height: `${totalHeight}px`,
-        width: "2px",
-      }}
-      onMouseDown={handlePlayheadMouseDown}
-    >
-      <div className="bg-foreground absolute left-0 h-full w-0.5 cursor-col-resize" />
+	const handlePlayheadKeyDown = (
+		event: React.KeyboardEvent<HTMLDivElement>,
+	) => {
+		if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
 
-      <div
-        className={`absolute top-1 left-1/2 size-3 -translate-x-1/2 transform rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-foreground border-foreground" : "bg-foreground border-foreground/50"}`}
-      />
-    </div>
-  );
+		event.preventDefault();
+		const step = 1 / Math.max(1, editor.project.getActive().settings.fps);
+		const direction = event.key === "ArrowRight" ? 1 : -1;
+		const nextTime = Math.max(
+			0,
+			Math.min(duration, playheadPosition + direction * step),
+		);
+
+		editor.playback.seek({ time: nextTime });
+	};
+
+	return (
+		<div
+			ref={playheadRef}
+			role="slider"
+			aria-label="Timeline playhead"
+			aria-valuemin={0}
+			aria-valuemax={duration}
+			aria-valuenow={playheadPosition}
+			tabIndex={0}
+			className="pointer-events-auto absolute z-60"
+			style={{
+				left: `${leftPosition}px`,
+				top: 0,
+				height: `${totalHeight}px`,
+				width: "2px",
+			}}
+			onMouseDown={handlePlayheadMouseDown}
+			onKeyDown={handlePlayheadKeyDown}
+		>
+			<div className="bg-foreground absolute left-0 h-full w-0.5 cursor-col-resize" />
+
+			<div
+				className={`absolute top-1 left-1/2 size-3 -translate-x-1/2 transform rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-foreground border-foreground" : "bg-foreground border-foreground/50"}`}
+			/>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-ruler.tsx b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
index df822aa0..fc6118ee 100644
--- a/apps/web/src/components/editor/timeline/timeline-ruler.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-ruler.tsx
@@ -5,95 +5,95 @@ import { useEditor } from "@/hooks/use-editor";
 import { TimelineTick } from "./timeline-tick";
 
 interface TimelineRulerProps {
-  zoomLevel: number;
-  dynamicTimelineWidth: number;
-  rulerRef: React.RefObject<HTMLDivElement>;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  handleWheel: (e: React.WheelEvent) => void;
-  handleTimelineContentClick: (e: React.MouseEvent) => void;
-  handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
-  handleRulerMouseDown: (e: React.MouseEvent) => void;
+	zoomLevel: number;
+	dynamicTimelineWidth: number;
+	rulerRef: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	handleWheel: (e: React.WheelEvent) => void;
+	handleTimelineContentClick: (e: React.MouseEvent) => void;
+	handleRulerTrackingMouseDown: (e: React.MouseEvent) => void;
+	handleRulerMouseDown: (e: React.MouseEvent) => void;
 }
 
 export function TimelineRuler({
-  zoomLevel,
-  dynamicTimelineWidth,
-  rulerRef,
-  rulerScrollRef,
-  handleWheel,
-  handleTimelineContentClick,
-  handleRulerTrackingMouseDown,
-  handleRulerMouseDown,
+	zoomLevel,
+	dynamicTimelineWidth,
+	rulerRef,
+	rulerScrollRef,
+	handleWheel,
+	handleTimelineContentClick,
+	handleRulerTrackingMouseDown,
+	handleRulerMouseDown,
 }: TimelineRulerProps) {
-  const editor = useEditor();
-  const duration = editor.timeline.getTotalDuration();
-  const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const visibleDuration = dynamicTimelineWidth / pixelsPerSecond;
-  const effectiveDuration = Math.max(duration, visibleDuration);
-  const project = editor.project.getActive();
-  const fps = project?.settings.fps ?? DEFAULT_FPS;
-  const interval = getOptimalTimeInterval({ zoomLevel, fps });
-  const markerCount = Math.ceil(effectiveDuration / interval) + 1;
+	const editor = useEditor();
+	const duration = editor.timeline.getTotalDuration();
+	const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const visibleDuration = dynamicTimelineWidth / pixelsPerSecond;
+	const effectiveDuration = Math.max(duration, visibleDuration);
+	const project = editor.project.getActive();
+	const fps = project?.settings.fps ?? DEFAULT_FPS;
+	const interval = getOptimalTimeInterval({ zoomLevel, fps });
+	const markerCount = Math.ceil(effectiveDuration / interval) + 1;
 
-  const timelineTicks: Array<JSX.Element> = [];
-  for (let markerIndex = 0; markerIndex < markerCount; markerIndex += 1) {
-    const time = markerIndex * interval;
-    if (time > effectiveDuration) break;
+	const timelineTicks: Array<JSX.Element> = [];
+	for (let markerIndex = 0; markerIndex < markerCount; markerIndex += 1) {
+		const time = markerIndex * interval;
+		if (time > effectiveDuration) break;
 
-    timelineTicks.push(
-      <TimelineTick key={markerIndex} time={time} zoomLevel={zoomLevel} />,
-    );
-  }
+		timelineTicks.push(
+			<TimelineTick key={markerIndex} time={time} zoomLevel={zoomLevel} />,
+		);
+	}
 
-  return (
-    <div
-      className="relative h-4 flex-1 overflow-hidden"
-      onWheel={handleWheel}
-      onClick={handleTimelineContentClick}
-      onMouseDown={handleRulerTrackingMouseDown}
-    >
-      <ScrollArea className="scrollbar-hidden w-full" ref={rulerScrollRef}>
-        <div
-          ref={rulerRef}
-          className="relative h-4 cursor-default select-none"
-          style={{
-            width: `${dynamicTimelineWidth}px`,
-          }}
-          onMouseDown={handleRulerMouseDown}
-        >
-          {timelineTicks}
-        </div>
-      </ScrollArea>
-    </div>
-  );
+	return (
+		<div
+			className="relative h-4 flex-1 overflow-hidden"
+			onWheel={handleWheel}
+			onClick={handleTimelineContentClick}
+			onMouseDown={handleRulerTrackingMouseDown}
+		>
+			<ScrollArea className="scrollbar-hidden w-full" ref={rulerScrollRef}>
+				<div
+					ref={rulerRef}
+					className="relative h-4 cursor-default select-none"
+					style={{
+						width: `${dynamicTimelineWidth}px`,
+					}}
+					onMouseDown={handleRulerMouseDown}
+				>
+					{timelineTicks}
+				</div>
+			</ScrollArea>
+		</div>
+	);
 }
 
 function getOptimalTimeInterval({
-  zoomLevel,
-  fps,
+	zoomLevel,
+	fps,
 }: {
-  zoomLevel: number;
-  fps: number;
+	zoomLevel: number;
+	fps: number;
 }) {
-  const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const pixelsPerFrame = pixelsPerSecond / fps;
-  const minPixelSpacing = 18;
-  const minFrames = minPixelSpacing / pixelsPerFrame;
-  const baseIntervals = [1, 3, 6, 12, 15, 30];
-  const maxInterval = fps * 10;
-  const niceIntervals: Array<number> = [...baseIntervals];
+	const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const pixelsPerFrame = pixelsPerSecond / fps;
+	const minPixelSpacing = 18;
+	const minFrames = minPixelSpacing / pixelsPerFrame;
+	const baseIntervals = [1, 3, 6, 12, 15, 30];
+	const maxInterval = fps * 10;
+	const niceIntervals: Array<number> = [...baseIntervals];
 
-  let currentInterval = baseIntervals[baseIntervals.length - 1];
-  while (currentInterval < maxInterval) {
-    currentInterval *= 2;
-    niceIntervals.push(currentInterval);
-  }
+	let currentInterval = baseIntervals[baseIntervals.length - 1];
+	while (currentInterval < maxInterval) {
+		currentInterval *= 2;
+		niceIntervals.push(currentInterval);
+	}
 
-  for (const intervalFrames of niceIntervals) {
-    if (intervalFrames >= minFrames) {
-      return intervalFrames / fps;
-    }
-  }
+	for (const intervalFrames of niceIntervals) {
+		if (intervalFrames >= minFrames) {
+			return intervalFrames / fps;
+		}
+	}
 
-  return niceIntervals[niceIntervals.length - 1] / fps;
+	return niceIntervals[niceIntervals.length - 1] / fps;
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-tick.tsx b/apps/web/src/components/editor/timeline/timeline-tick.tsx
index 6f857364..30de450b 100644
--- a/apps/web/src/components/editor/timeline/timeline-tick.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-tick.tsx
@@ -3,17 +3,17 @@
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 interface TimelineTickProps {
-  time: number;
-  zoomLevel: number;
+	time: number;
+	zoomLevel: number;
 }
 
 export function TimelineTick({ time, zoomLevel }: TimelineTickProps) {
-  return (
-    <div
-      className="border-muted-foreground/40 absolute top-1 h-1.5 border-l"
-      style={{
-        left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
-      }}
-    ></div>
-  );
+	return (
+		<div
+			className="border-muted-foreground/40 absolute top-1 h-1.5 border-l"
+			style={{
+				left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
+			}}
+		></div>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
index b3b90b0e..1803d47e 100644
--- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx
@@ -1,34 +1,34 @@
 import { useEditor } from "@/hooks/use-editor";
 import {
-  TooltipProvider,
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
+	TooltipProvider,
+	Tooltip,
+	TooltipTrigger,
+	TooltipContent,
 } from "@/components/ui/tooltip";
 import { Button } from "@/components/ui/button";
 import {
-  Pause,
-  Play,
-  SkipBack,
-  Bookmark,
-  Magnet,
-  Link,
-  ZoomOut,
-  ZoomIn,
-  Copy,
-  Trash2,
-  Snowflake,
-  ArrowLeftToLine,
-  ArrowRightToLine,
-  SplitSquareHorizontal,
-  Scissors,
-  LayersIcon,
+	Pause,
+	Play,
+	SkipBack,
+	Bookmark,
+	Magnet,
+	Link,
+	ZoomOut,
+	ZoomIn,
+	Copy,
+	Trash2,
+	Snowflake,
+	ArrowLeftToLine,
+	ArrowRightToLine,
+	SplitSquareHorizontal,
+	Scissors,
+	LayersIcon,
 } from "lucide-react";
 import {
-  SplitButton,
-  SplitButtonLeft,
-  SplitButtonRight,
-  SplitButtonSeparator,
+	SplitButton,
+	SplitButtonLeft,
+	SplitButtonRight,
+	SplitButtonSeparator,
 } from "@/components/ui/split-button";
 import { Slider } from "@/components/ui/slider";
 import { formatTimeCode } from "@/lib/time";
@@ -40,298 +40,297 @@ import { cn } from "@/utils/ui";
 import { useTimelineStore } from "@/stores/timeline-store";
 
 export function TimelineToolbar({
-  zoomLevel,
-  minZoom,
-  setZoomLevel,
+	zoomLevel,
+	minZoom,
+	setZoomLevel,
 }: {
-  zoomLevel: number;
-  minZoom: number;
-  setZoomLevel: ({ zoom }: { zoom: number }) => void;
+	zoomLevel: number;
+	minZoom: number;
+	setZoomLevel: ({ zoom }: { zoom: number }) => void;
 }) {
-  const handleZoom = ({ direction }: { direction: "in" | "out" }) => {
-    const newZoomLevel =
-      direction === "in"
-        ? Math.min(
-            TIMELINE_CONSTANTS.ZOOM_MAX,
-            zoomLevel + TIMELINE_CONSTANTS.ZOOM_STEP,
-          )
-        : Math.max(minZoom, zoomLevel - TIMELINE_CONSTANTS.ZOOM_STEP);
-    setZoomLevel({ zoom: newZoomLevel });
-  };
+	const handleZoom = ({ direction }: { direction: "in" | "out" }) => {
+		const newZoomLevel =
+			direction === "in"
+				? Math.min(
+						TIMELINE_CONSTANTS.ZOOM_MAX,
+						zoomLevel + TIMELINE_CONSTANTS.ZOOM_STEP,
+					)
+				: Math.max(minZoom, zoomLevel - TIMELINE_CONSTANTS.ZOOM_STEP);
+		setZoomLevel({ zoom: newZoomLevel });
+	};
 
-  return (
-    <div className="flex h-10 items-center justify-between border-b px-2 py-1">
-      <ToolbarLeftSection />
+	return (
+		<div className="flex h-10 items-center justify-between border-b px-2 py-1">
+			<ToolbarLeftSection />
 
-      <SceneSelector />
+			<SceneSelector />
 
-      <ToolbarRightSection
-        zoomLevel={zoomLevel}
-        minZoom={minZoom}
-        onZoomChange={(zoom) => setZoomLevel({ zoom })}
-        onZoom={handleZoom}
-      />
-    </div>
-  );
+			<ToolbarRightSection
+				zoomLevel={zoomLevel}
+				minZoom={minZoom}
+				onZoomChange={(zoom) => setZoomLevel({ zoom })}
+				onZoom={handleZoom}
+			/>
+		</div>
+	);
 }
 
 function ToolbarLeftSection() {
-  const editor = useEditor();
-  const currentTime = editor.playback.getCurrentTime();
-  const isPlaying = editor.playback.getIsPlaying();
-  const currentBookmarked = editor.scenes.isBookmarked({ time: currentTime });
+	const editor = useEditor();
+	const currentTime = editor.playback.getCurrentTime();
+	const isPlaying = editor.playback.getIsPlaying();
+	const currentBookmarked = editor.scenes.isBookmarked({ time: currentTime });
 
-  const handleAction = ({
-    action,
-    event,
-  }: {
-    action: TAction;
-    event: React.MouseEvent;
-  }) => {
-    event.stopPropagation();
-    invokeAction(action);
-  };
+	const handleAction = ({
+		action,
+		event,
+	}: {
+		action: TAction;
+		event: React.MouseEvent;
+	}) => {
+		event.stopPropagation();
+		invokeAction(action);
+	};
 
-  return (
-    <div className="flex items-center gap-1">
-      <TooltipProvider delayDuration={500}>
-        <ToolbarButton
-          icon={isPlaying ? <Pause /> : <Play />}
-          tooltip={isPlaying ? "Pause" : "Play"}
-          onClick={({ event }) =>
-            handleAction({ action: "toggle-play", event })
-          }
-        />
+	return (
+		<div className="flex items-center gap-1">
+			<TooltipProvider delayDuration={500}>
+				<ToolbarButton
+					icon={isPlaying ? <Pause /> : <Play />}
+					tooltip={isPlaying ? "Pause" : "Play"}
+					onClick={({ event }) =>
+						handleAction({ action: "toggle-play", event })
+					}
+				/>
 
-        <ToolbarButton
-          icon={<SkipBack />}
-          tooltip="Go to start"
-          onClick={({ event }) => handleAction({ action: "goto-start", event })}
-        />
+				<ToolbarButton
+					icon={<SkipBack />}
+					tooltip="Go to start"
+					onClick={({ event }) => handleAction({ action: "goto-start", event })}
+				/>
 
-        <div className="bg-border mx-2 h-10 w-px" />
+				<div className="bg-border mx-2 h-10 w-px" />
 
-        <TimeDisplay />
+				<TimeDisplay />
 
-        <div className="bg-border mx-1 h-10 w-px" />
+				<div className="bg-border mx-1 h-10 w-px" />
 
-        <ToolbarButton
-          icon={<Scissors />}
-          tooltip="Split element"
-          onClick={({ event }) =>
-            handleAction({ action: "split-selected", event })
-          }
-        />
+				<ToolbarButton
+					icon={<Scissors />}
+					tooltip="Split element"
+					onClick={({ event }) =>
+						handleAction({ action: "split-selected", event })
+					}
+				/>
 
-        <ToolbarButton
-          icon={<ArrowLeftToLine />}
-          tooltip="Split and keep left"
-          onClick={({ event }) =>
-            handleAction({ action: "split-selected-left", event })
-          }
-        />
+				<ToolbarButton
+					icon={<ArrowLeftToLine />}
+					tooltip="Split and keep left"
+					onClick={({ event }) =>
+						handleAction({ action: "split-selected-left", event })
+					}
+				/>
 
-        <ToolbarButton
-          icon={<ArrowRightToLine />}
-          tooltip="Split and keep right"
-          onClick={({ event }) =>
-            handleAction({ action: "split-selected-right", event })
-          }
-        />
+				<ToolbarButton
+					icon={<ArrowRightToLine />}
+					tooltip="Split and keep right"
+					onClick={({ event }) =>
+						handleAction({ action: "split-selected-right", event })
+					}
+				/>
 
-        <ToolbarButton
-          icon={<SplitSquareHorizontal />}
-          tooltip="Coming soon" /* separate audio */
-          disabled={true}
-          onClick={({ event }) => {}}
-        />
+				<ToolbarButton
+					icon={<SplitSquareHorizontal />}
+					tooltip="Coming soon" /* separate audio */
+					disabled={true}
+					onClick={({ event: _event }) => {}}
+				/>
 
-        <ToolbarButton
-          icon={<Copy />}
-          tooltip="Duplicate element"
-          onClick={({ event }) =>
-            handleAction({ action: "duplicate-selected", event })
-          }
-        />
+				<ToolbarButton
+					icon={<Copy />}
+					tooltip="Duplicate element"
+					onClick={({ event }) =>
+						handleAction({ action: "duplicate-selected", event })
+					}
+				/>
 
-        <ToolbarButton
-          icon={<Snowflake />}
-          tooltip="Coming soon" /* freeze frame */
-          disabled={true}
-          onClick={({ event }) => {}}
-        />
+				<ToolbarButton
+					icon={<Snowflake />}
+					tooltip="Coming soon" /* freeze frame */
+					disabled={true}
+					onClick={({ event: _event }) => {}}
+				/>
 
-        <ToolbarButton
-          icon={<Trash2 />}
-          tooltip="Delete element"
-          onClick={({ event }) =>
-            handleAction({ action: "delete-selected", event })
-          }
-        />
+				<ToolbarButton
+					icon={<Trash2 />}
+					tooltip="Delete element"
+					onClick={({ event }) =>
+						handleAction({ action: "delete-selected", event })
+					}
+				/>
 
-        <div className="bg-border mx-1 h-6 w-px" />
+				<div className="bg-border mx-1 h-6 w-px" />
 
-        <Tooltip>
-          <ToolbarButton
-            icon={
-              <Bookmark
-                className={currentBookmarked ? "fill-primary text-primary" : ""}
-              />
-            }
-            tooltip={currentBookmarked ? "Remove bookmark" : "Add bookmark"}
-            onClick={({ event }) =>
-              handleAction({ action: "toggle-bookmark", event })
-            }
-          />
-        </Tooltip>
-      </TooltipProvider>
-    </div>
-  );
+				<Tooltip>
+					<ToolbarButton
+						icon={
+							<Bookmark
+								className={currentBookmarked ? "fill-primary text-primary" : ""}
+							/>
+						}
+						tooltip={currentBookmarked ? "Remove bookmark" : "Add bookmark"}
+						onClick={({ event }) =>
+							handleAction({ action: "toggle-bookmark", event })
+						}
+					/>
+				</Tooltip>
+			</TooltipProvider>
+		</div>
+	);
 }
 
 function TimeDisplay() {
-  const editor = useEditor();
-  const currentTime = editor.playback.getCurrentTime();
-  const totalDuration = editor.timeline.getTotalDuration();
-  const fps = editor.project.getActive().settings.fps;
+	const editor = useEditor();
+	const currentTime = editor.playback.getCurrentTime();
+	const totalDuration = editor.timeline.getTotalDuration();
+	const fps = editor.project.getActive().settings.fps;
 
-  return (
-    <div className="flex flex-row items-center justify-center px-2">
-      <EditableTimecode
-        time={currentTime}
-        duration={totalDuration}
-        format="HH:MM:SS:FF"
-        fps={fps}
-        onTimeChange={({ time }) => editor.playback.seek({ time })}
-        className="text-center"
-      />
-      <div className="text-muted-foreground px-2 font-mono text-xs">/</div>
-      <div className="text-muted-foreground text-center font-mono text-xs">
-        {formatTimeCode({
-          timeInSeconds: totalDuration,
-          format: "HH:MM:SS:FF",
-          fps,
-        })}
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-row items-center justify-center px-2">
+			<EditableTimecode
+				time={currentTime}
+				duration={totalDuration}
+				format="HH:MM:SS:FF"
+				fps={fps}
+				onTimeChange={({ time }) => editor.playback.seek({ time })}
+				className="text-center"
+			/>
+			<div className="text-muted-foreground px-2 font-mono text-xs">/</div>
+			<div className="text-muted-foreground text-center font-mono text-xs">
+				{formatTimeCode({
+					timeInSeconds: totalDuration,
+					format: "HH:MM:SS:FF",
+					fps,
+				})}
+			</div>
+		</div>
+	);
 }
 
 function SceneSelector() {
-  const editor = useEditor();
-  const currentScene = editor.scenes.getActiveScene();
-  const scenesCount = editor.scenes.getScenes().length;
+	const editor = useEditor();
+	const currentScene = editor.scenes.getActiveScene();
 
-  return (
-    <div>
-      <SplitButton className="border-foreground/10 border">
-        <SplitButtonLeft>{currentScene?.name || "No Scene"}</SplitButtonLeft>
-        <SplitButtonSeparator />
-        <ScenesView>
-          <SplitButtonRight onClick={() => {}} type="button">
-            <LayersIcon className="size-4" />
-          </SplitButtonRight>
-        </ScenesView>
-      </SplitButton>
-    </div>
-  );
+	return (
+		<div>
+			<SplitButton className="border-foreground/10 border">
+				<SplitButtonLeft>{currentScene?.name || "No Scene"}</SplitButtonLeft>
+				<SplitButtonSeparator />
+				<ScenesView>
+					<SplitButtonRight onClick={() => {}} type="button">
+						<LayersIcon className="size-4" />
+					</SplitButtonRight>
+				</ScenesView>
+			</SplitButton>
+		</div>
+	);
 }
 
 function ToolbarRightSection({
-  zoomLevel,
-  minZoom,
-  onZoomChange,
-  onZoom,
+	zoomLevel,
+	minZoom,
+	onZoomChange,
+	onZoom,
 }: {
-  zoomLevel: number;
-  minZoom: number;
-  onZoomChange: (zoom: number) => void;
-  onZoom: (options: { direction: "in" | "out" }) => void;
+	zoomLevel: number;
+	minZoom: number;
+	onZoomChange: (zoom: number) => void;
+	onZoom: (options: { direction: "in" | "out" }) => void;
 }) {
-  const {
-    snappingEnabled,
-    rippleEditingEnabled,
-    toggleSnapping,
-    toggleRippleEditing,
-  } = useTimelineStore();
+	const {
+		snappingEnabled,
+		rippleEditingEnabled,
+		toggleSnapping,
+		toggleRippleEditing,
+	} = useTimelineStore();
 
-  return (
-    <div className="flex items-center gap-1">
-      <TooltipProvider delayDuration={500}>
-        <ToolbarButton
-          icon={
-            <Magnet className={cn(snappingEnabled ? "text-primary" : "")} />
-          }
-          tooltip="Auto snapping"
-          onClick={() => toggleSnapping()}
-        />
+	return (
+		<div className="flex items-center gap-1">
+			<TooltipProvider delayDuration={500}>
+				<ToolbarButton
+					icon={
+						<Magnet className={cn(snappingEnabled ? "text-primary" : "")} />
+					}
+					tooltip="Auto snapping"
+					onClick={() => toggleSnapping()}
+				/>
 
-        <ToolbarButton
-          icon={
-            <Link className={cn(rippleEditingEnabled ? "text-primary" : "")} />
-          }
-          tooltip="Ripple editing"
-          onClick={() => toggleRippleEditing()}
-        />
-      </TooltipProvider>
+				<ToolbarButton
+					icon={
+						<Link className={cn(rippleEditingEnabled ? "text-primary" : "")} />
+					}
+					tooltip="Ripple editing"
+					onClick={() => toggleRippleEditing()}
+				/>
+			</TooltipProvider>
 
-      <div className="bg-border mx-1 h-6 w-px" />
+			<div className="bg-border mx-1 h-6 w-px" />
 
-      <div className="flex items-center gap-1">
-        <Button
-          variant="text"
-          size="icon"
-          type="button"
-          onClick={() => onZoom({ direction: "out" })}
-        >
-          <ZoomOut />
-        </Button>
-        <Slider
-          className="w-24"
-          value={[zoomLevel]}
-          onValueChange={(values) => onZoomChange(values[0])}
-          min={minZoom}
-          max={TIMELINE_CONSTANTS.ZOOM_MAX}
-          step={TIMELINE_CONSTANTS.ZOOM_STEP}
-        />
-        <Button
-          variant="text"
-          size="icon"
-          type="button"
-          onClick={() => onZoom({ direction: "in" })}
-        >
-          <ZoomIn />
-        </Button>
-      </div>
-    </div>
-  );
+			<div className="flex items-center gap-1">
+				<Button
+					variant="text"
+					size="icon"
+					type="button"
+					onClick={() => onZoom({ direction: "out" })}
+				>
+					<ZoomOut />
+				</Button>
+				<Slider
+					className="w-24"
+					value={[zoomLevel]}
+					onValueChange={(values) => onZoomChange(values[0])}
+					min={minZoom}
+					max={TIMELINE_CONSTANTS.ZOOM_MAX}
+					step={TIMELINE_CONSTANTS.ZOOM_STEP}
+				/>
+				<Button
+					variant="text"
+					size="icon"
+					type="button"
+					onClick={() => onZoom({ direction: "in" })}
+				>
+					<ZoomIn />
+				</Button>
+			</div>
+		</div>
+	);
 }
 
 function ToolbarButton({
-  icon,
-  tooltip,
-  onClick,
-  disabled,
+	icon,
+	tooltip,
+	onClick,
+	disabled,
 }: {
-  icon: React.ReactNode;
-  tooltip: string;
-  onClick: ({ event }: { event: React.MouseEvent }) => void;
-  disabled?: boolean;
+	icon: React.ReactNode;
+	tooltip: string;
+	onClick: ({ event }: { event: React.MouseEvent }) => void;
+	disabled?: boolean;
 }) {
-  return (
-    <Tooltip delayDuration={200}>
-      <TooltipTrigger asChild>
-        <Button
-          variant="text"
-          size="icon"
-          type="button"
-          onClick={(event) => onClick({ event })}
-          className={disabled ? "cursor-not-allowed opacity-50" : ""}
-        >
-          {icon}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>{tooltip}</TooltipContent>
-    </Tooltip>
-  );
+	return (
+		<Tooltip delayDuration={200}>
+			<TooltipTrigger asChild>
+				<Button
+					variant="text"
+					size="icon"
+					type="button"
+					onClick={(event) => onClick({ event })}
+					className={disabled ? "cursor-not-allowed opacity-50" : ""}
+				>
+					{icon}
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>{tooltip}</TooltipContent>
+		</Tooltip>
+	);
 }
diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index a75dbb6e..d1f195a6 100644
--- a/apps/web/src/components/editor/timeline/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-track.tsx
@@ -2,103 +2,102 @@
 
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
 import { TimelineElement } from "./timeline-element";
-import { TimelineTrack } from "@/types/timeline";
+import type { TimelineTrack } from "@/types/timeline";
 import type { TimelineElement as TimelineElementType } from "@/types/timeline";
 import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { useEdgeAutoScroll } from "@/hooks/timeline/use-edge-auto-scroll";
-import { ElementDragState } from "@/types/timeline";
+import type { ElementDragState } from "@/types/timeline";
 import { useEditor } from "@/hooks/use-editor";
 import { cn } from "@/utils/ui";
 
 interface TimelineTrackContentProps {
-  track: TimelineTrack;
-  zoomLevel: number;
-  dragState: ElementDragState;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  lastMouseXRef: React.RefObject<number>;
-  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
-  onResizeStateChange?: (params: { isResizing: boolean }) => void;
-  onElementMouseDown: (params: {
-    event: React.MouseEvent;
-    element: TimelineElementType;
-    track: TimelineTrack;
-  }) => void;
-  onElementClick: (params: {
-    event: React.MouseEvent;
-    element: TimelineElementType;
-    track: TimelineTrack;
-  }) => void;
+	track: TimelineTrack;
+	zoomLevel: number;
+	dragState: ElementDragState;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	lastMouseXRef: React.RefObject<number>;
+	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
+	onResizeStateChange?: (params: { isResizing: boolean }) => void;
+	onElementMouseDown: (params: {
+		event: React.MouseEvent;
+		element: TimelineElementType;
+		track: TimelineTrack;
+	}) => void;
+	onElementClick: (params: {
+		event: React.MouseEvent;
+		element: TimelineElementType;
+		track: TimelineTrack;
+	}) => void;
 }
 
 export function TimelineTrackContent({
-  track,
-  zoomLevel,
-  dragState,
-  rulerScrollRef,
-  tracksScrollRef,
-  lastMouseXRef,
-  onSnapPointChange,
-  onResizeStateChange,
-  onElementMouseDown,
-  onElementClick,
+	track,
+	zoomLevel,
+	dragState,
+	rulerScrollRef,
+	tracksScrollRef,
+	lastMouseXRef,
+	onSnapPointChange,
+	onResizeStateChange,
+	onElementMouseDown,
+	onElementClick,
 }: TimelineTrackContentProps) {
-  const editor = useEditor();
-  const { isElementSelected, clearElementSelection } = useElementSelection();
+	const editor = useEditor();
+	const { isElementSelected, clearElementSelection } = useElementSelection();
 
-  const duration = editor.timeline.getTotalDuration();
+	const duration = editor.timeline.getTotalDuration();
 
-  useEdgeAutoScroll({
-    isActive: dragState.isDragging,
-    getMouseClientX: () => lastMouseXRef.current ?? 0,
-    rulerScrollRef,
-    tracksScrollRef,
-    contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
-  });
+	useEdgeAutoScroll({
+		isActive: dragState.isDragging,
+		getMouseClientX: () => lastMouseXRef.current ?? 0,
+		rulerScrollRef,
+		tracksScrollRef,
+		contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
+	});
 
-  const hasSelectedElements = track.elements.some((element) =>
-    isElementSelected({ trackId: track.id, elementId: element.id }),
-  );
+	const hasSelectedElements = track.elements.some((element) =>
+		isElementSelected({ trackId: track.id, elementId: element.id }),
+	);
 
-  return (
-    <div
-      className={cn("size-full", hasSelectedElements && "bg-panel-accent/35")}
-      onClick={clearElementSelection}
-    >
-      <div className="relative h-full min-w-full">
-        {track.elements.length === 0 ? (
-          <div className="text-muted-foreground border-muted/30 flex size-full items-center justify-center rounded-sm border-2 border-dashed text-xs" />
-        ) : (
-          <>
-            {track.elements.map((element) => {
-              const isSelected = isElementSelected({
-                trackId: track.id,
-                elementId: element.id,
-              });
+	return (
+		<button
+			className={cn("size-full", hasSelectedElements && "bg-panel-accent/35")}
+			onClick={clearElementSelection}
+			type="button"
+		>
+			<div className="relative h-full min-w-full">
+				{track.elements.length === 0 ? (
+					<div className="text-muted-foreground border-muted/30 flex size-full items-center justify-center rounded-sm border-2 border-dashed text-xs" />
+				) : (
+					track.elements.map((element) => {
+						const isSelected = isElementSelected({
+							trackId: track.id,
+							elementId: element.id,
+						});
 
-              return (
-                <TimelineElement
-                  key={element.id}
-                  element={element}
-                  track={track}
-                  zoomLevel={zoomLevel}
-                  isSelected={isSelected}
-                  onSnapPointChange={onSnapPointChange}
-                  onResizeStateChange={onResizeStateChange}
-                  onElementMouseDown={(event, element) =>
-                    onElementMouseDown({ event, element, track })
-                  }
-                  onElementClick={(event, element) =>
-                    onElementClick({ event, element, track })
-                  }
-                  dragState={dragState}
-                />
-              );
-            })}
-          </>
-        )}
-      </div>
-    </div>
-  );
+						return (
+							<TimelineElement
+								key={element.id}
+								element={element}
+								track={track}
+								zoomLevel={zoomLevel}
+								isSelected={isSelected}
+								onSnapPointChange={onSnapPointChange}
+								onResizeStateChange={onResizeStateChange}
+								onElementMouseDown={(event, element) =>
+									onElementMouseDown({ event, element, track })
+								}
+								onElementClick={(event, element) =>
+									onElementClick({ event, element, track })
+								}
+								dragState={dragState}
+							/>
+						);
+					})
+				)}
+			</div>
+		</button>
+	);
 }
diff --git a/apps/web/src/components/footer.tsx b/apps/web/src/components/footer.tsx
index faeb56f7..f75bd98b 100644
--- a/apps/web/src/components/footer.tsx
+++ b/apps/web/src/components/footer.tsx
@@ -8,115 +8,115 @@ import { capitalizeFirstLetter } from "@/utils/strings";
 type Category = "resources" | "company";
 
 interface Link {
-  label: string;
-  href: string;
+	label: string;
+	href: string;
 }
 
 type CategoryLinks = Record<Category, Link[]>;
 
 const links: CategoryLinks = {
-  resources: [
-    { label: "Roadmap", href: "/roadmap" },
-    { label: "Blog", href: "/blog" },
-    { label: "Privacy", href: "/privacy" },
-    { label: "Terms of use", href: "/terms" },
-  ],
-  company: [
-    { label: "Contributors", href: "/contributors" },
-    { label: "Sponsors", href: "/sponsors" },
-    { label: "Branding", href: "/branding" },
-    { label: "About", href: `${SOCIAL_LINKS.github}/blob/main/README.md` },
-  ],
+	resources: [
+		{ label: "Roadmap", href: "/roadmap" },
+		{ label: "Blog", href: "/blog" },
+		{ label: "Privacy", href: "/privacy" },
+		{ label: "Terms of use", href: "/terms" },
+	],
+	company: [
+		{ label: "Contributors", href: "/contributors" },
+		{ label: "Sponsors", href: "/sponsors" },
+		{ label: "Branding", href: "/branding" },
+		{ label: "About", href: `${SOCIAL_LINKS.github}/blob/main/README.md` },
+	],
 };
 
 export function Footer() {
-  return (
-    <footer className="bg-background border-t">
-      <div className="mx-auto max-w-5xl px-8 py-10">
-        <div className="mb-8 grid grid-cols-1 gap-12 md:grid-cols-2">
-          {/* Brand Section */}
-          <div className="max-w-sm md:col-span-1">
-            <div className="mb-4 flex items-center justify-start gap-2">
-              <Image
-                src={DEFAULT_LOGO_URL}
-                alt="OpenCut"
-                width={24}
-                height={24}
-                className="invert dark:invert-0"
-              />
-              <span className="text-lg font-bold">OpenCut</span>
-            </div>
-            <p className="text-muted-foreground mb-5 text-sm md:text-left">
-              The privacy-first video editor that feels simple to use.
-            </p>
-            <div className="flex justify-start gap-3">
-              <Link
-                href={SOCIAL_LINKS.github}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <FaGithub className="h-5 w-5" />
-              </Link>
-              <Link
-                href={SOCIAL_LINKS.x}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <RiTwitterXLine className="h-5 w-5" />
-              </Link>
-              <Link
-                href={SOCIAL_LINKS.discord}
-                className="text-muted-foreground hover:text-foreground transition-colors"
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                <RiDiscordFill className="h-5 w-5" />
-              </Link>
-            </div>
-          </div>
+	return (
+		<footer className="bg-background border-t">
+			<div className="mx-auto max-w-5xl px-8 py-10">
+				<div className="mb-8 grid grid-cols-1 gap-12 md:grid-cols-2">
+					{/* Brand Section */}
+					<div className="max-w-sm md:col-span-1">
+						<div className="mb-4 flex items-center justify-start gap-2">
+							<Image
+								src={DEFAULT_LOGO_URL}
+								alt="OpenCut"
+								width={24}
+								height={24}
+								className="invert dark:invert-0"
+							/>
+							<span className="text-lg font-bold">OpenCut</span>
+						</div>
+						<p className="text-muted-foreground mb-5 text-sm md:text-left">
+							The privacy-first video editor that feels simple to use.
+						</p>
+						<div className="flex justify-start gap-3">
+							<Link
+								href={SOCIAL_LINKS.github}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<FaGithub className="h-5 w-5" />
+							</Link>
+							<Link
+								href={SOCIAL_LINKS.x}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<RiTwitterXLine className="h-5 w-5" />
+							</Link>
+							<Link
+								href={SOCIAL_LINKS.discord}
+								className="text-muted-foreground hover:text-foreground transition-colors"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<RiDiscordFill className="h-5 w-5" />
+							</Link>
+						</div>
+					</div>
 
-          <div className="flex items-start justify-start gap-12 py-2">
-            {(Object.keys(links) as Category[]).map((category) => (
-              <div key={category} className="flex flex-col gap-2">
-                <h3 className="text-foreground font-semibold">
-                  {capitalizeFirstLetter({ string: category })}
-                </h3>
-                <ul className="space-y-2 text-sm">
-                  {links[category].map((link) => (
-                    <li key={link.href}>
-                      <Link
-                        href={link.href}
-                        className="text-muted-foreground hover:text-foreground transition-colors"
-                        target={
-                          link.href.startsWith("http") ? "_blank" : undefined
-                        }
-                        rel={
-                          link.href.startsWith("http")
-                            ? "noopener noreferrer"
-                            : undefined
-                        }
-                      >
-                        {link.label}
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </div>
+					<div className="flex items-start justify-start gap-12 py-2">
+						{(Object.keys(links) as Category[]).map((category) => (
+							<div key={category} className="flex flex-col gap-2">
+								<h3 className="text-foreground font-semibold">
+									{capitalizeFirstLetter({ string: category })}
+								</h3>
+								<ul className="space-y-2 text-sm">
+									{links[category].map((link) => (
+										<li key={link.href}>
+											<Link
+												href={link.href}
+												className="text-muted-foreground hover:text-foreground transition-colors"
+												target={
+													link.href.startsWith("http") ? "_blank" : undefined
+												}
+												rel={
+													link.href.startsWith("http")
+														? "noopener noreferrer"
+														: undefined
+												}
+											>
+												{link.label}
+											</Link>
+										</li>
+									))}
+								</ul>
+							</div>
+						))}
+					</div>
+				</div>
 
-        {/* Bottom Section */}
-        <div className="flex flex-col items-start justify-between gap-4 pt-2 md:flex-row">
-          <div className="text-muted-foreground flex items-center gap-4 text-sm">
-            <span>
-              © {new Date().getFullYear()} OpenCut, All Rights Reserved
-            </span>
-          </div>
-        </div>
-      </div>
-    </footer>
-  );
+				{/* Bottom Section */}
+				<div className="flex flex-col items-start justify-between gap-4 pt-2 md:flex-row">
+					<div className="text-muted-foreground flex items-center gap-4 text-sm">
+						<span>
+							© {new Date().getFullYear()} OpenCut, All Rights Reserved
+						</span>
+					</div>
+				</div>
+			</div>
+		</footer>
+	);
 }
diff --git a/apps/web/src/components/gitHub-contribute-section.tsx b/apps/web/src/components/gitHub-contribute-section.tsx
index 8866d94a..51e32e3b 100644
--- a/apps/web/src/components/gitHub-contribute-section.tsx
+++ b/apps/web/src/components/gitHub-contribute-section.tsx
@@ -5,40 +5,40 @@ import Link from "next/link";
 import { SOCIAL_LINKS } from "@/constants/site-constants";
 
 export function GitHubContributeSection({
-  title,
-  description,
+	title,
+	description,
 }: {
-  title: string;
-  description: string;
+	title: string;
+	description: string;
 }) {
-  return (
-    <div className="flex flex-col gap-6">
-      <div className="flex flex-col gap-4 text-center">
-        <h3 className="text-2xl font-semibold">{title}</h3>
-        <p className="text-muted-foreground">{description}</p>
-      </div>
-      <div className="flex flex-col justify-center gap-4 sm:flex-row">
-        <Link
-          href={`${SOCIAL_LINKS.github}/blob/main/.github/CONTRIBUTING.md`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button className="w-full" size="lg">
-            <GithubIcon className="h-4 w-4" />
-            Start contributing
-          </Button>
-        </Link>
-        <Link
-          href={`${SOCIAL_LINKS.github}/issues`}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Button variant="outline" className="w-full" size="lg">
-            <ExternalLink className="h-4 w-4" />
-            Report issues
-          </Button>
-        </Link>
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex flex-col gap-6">
+			<div className="flex flex-col gap-4 text-center">
+				<h3 className="text-2xl font-semibold">{title}</h3>
+				<p className="text-muted-foreground">{description}</p>
+			</div>
+			<div className="flex flex-col justify-center gap-4 sm:flex-row">
+				<Link
+					href={`${SOCIAL_LINKS.github}/blob/main/.github/CONTRIBUTING.md`}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<Button className="w-full" size="lg">
+						<GithubIcon className="h-4 w-4" />
+						Start contributing
+					</Button>
+				</Link>
+				<Link
+					href={`${SOCIAL_LINKS.github}/issues`}
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					<Button variant="outline" className="w-full" size="lg">
+						<ExternalLink className="h-4 w-4" />
+						Report issues
+					</Button>
+				</Link>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index d9a30a57..48f373da 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -12,119 +12,119 @@ import { cn } from "@/utils/ui";
 import { DEFAULT_LOGO_URL, SOCIAL_LINKS } from "@/constants/site-constants";
 
 export function Header() {
-  const [isMenuOpen, setIsMenuOpen] = useState(false);
+	const [isMenuOpen, setIsMenuOpen] = useState(false);
 
-  const links = [
-    {
-      label: "Contributors",
-      href: "/contributors",
-    },
-    {
-      label: "Sponsors",
-      href: "/sponsors",
-    },
-    {
-      label: "Blog",
-      href: "/blog",
-    },
-  ];
+	const links = [
+		{
+			label: "Contributors",
+			href: "/contributors",
+		},
+		{
+			label: "Sponsors",
+			href: "/sponsors",
+		},
+		{
+			label: "Blog",
+			href: "/blog",
+		},
+	];
 
-  return (
-    <header className="bg-background shadow-background/85 sticky top-0 z-10 shadow-[0_30px_35px_15px_rgba(0,0,0,1)]">
-      <div className="relative flex w-full items-center justify-between px-6 pt-4">
-        <div className="relative z-10 flex items-center gap-6">
-          <Link href="/" className="flex items-center gap-3">
-            <Image
-              src={DEFAULT_LOGO_URL}
-              alt="OpenCut Logo"
-              className="invert dark:invert-0"
-              width={32}
-              height={32}
-            />
-          </Link>
-          <nav className="hidden items-center gap-4 md:flex">
-            {links.map((link) => (
-              <Link key={link.href} href={link.href}>
-                <Button variant="text" className="p-0 text-sm">
-                  {link.label}
-                </Button>
-              </Link>
-            ))}
-          </nav>
-        </div>
+	return (
+		<header className="bg-background shadow-background/85 sticky top-0 z-10 shadow-[0_30px_35px_15px_rgba(0,0,0,1)]">
+			<div className="relative flex w-full items-center justify-between px-6 pt-4">
+				<div className="relative z-10 flex items-center gap-6">
+					<Link href="/" className="flex items-center gap-3">
+						<Image
+							src={DEFAULT_LOGO_URL}
+							alt="OpenCut Logo"
+							className="invert dark:invert-0"
+							width={32}
+							height={32}
+						/>
+					</Link>
+					<nav className="hidden items-center gap-4 md:flex">
+						{links.map((link) => (
+							<Link key={link.href} href={link.href}>
+								<Button variant="text" className="p-0 text-sm">
+									{link.label}
+								</Button>
+							</Link>
+						))}
+					</nav>
+				</div>
 
-        <div className="relative z-10">
-          <div className="flex items-center gap-3 md:hidden">
-            <Button
-              variant="text"
-              size="icon"
-              className="flex items-center justify-center p-0"
-              onClick={() => setIsMenuOpen(!isMenuOpen)}
-            >
-              <MenuIcon size={30} />
-            </Button>
-          </div>
-          <div className="hidden items-center gap-3 md:flex">
-            <Link href={SOCIAL_LINKS.github}>
-              <Button className="bg-background text-sm" variant="outline">
-                <GithubIcon className="h-4 w-4" />
-                31k+
-              </Button>
-            </Link>
-            <Link href="/projects">
-              <Button className="text-sm">
-                Projects
-                <ArrowRight className="h-4 w-4" />
-              </Button>
-            </Link>
-            <ThemeToggle />
-          </div>
-        </div>
-        <div
-          className={cn(
-            "bg-background/20 pointer-events-none fixed inset-0 opacity-0 backdrop-blur-3xl",
-            "transition-opacity duration-150",
-            isMenuOpen && "pointer-events-auto opacity-100",
-          )}
-          onClick={() => setIsMenuOpen(false)}
-        >
-          <div className="relative h-full">
-            <nav className="flex flex-col gap-3 px-6 pt-[5rem]">
-              {links.map((link, index) => (
-                <motion.div
-                  key={link.href}
-                  initial={{ scale: 0.98, opacity: 0 }}
-                  animate={{
-                    scale: isMenuOpen ? 1 : 0.98,
-                    opacity: isMenuOpen ? 1 : 0,
-                  }}
-                  transition={{
-                    duration: 0.4,
-                    delay: isMenuOpen ? index * 0.1 : 0,
-                    ease: [0.25, 0.46, 0.45, 0.94],
-                  }}
-                >
-                  <Link
-                    href={link.href}
-                    className="text-2xl font-semibold"
-                    onClick={() => setIsMenuOpen(false)}
-                  >
-                    {link.label}
-                  </Link>
-                </motion.div>
-              ))}
-            </nav>
-            <ThemeToggle
-              className="absolute right-8 bottom-8 size-10"
-              iconClassName="!size-[1.2rem]"
-              onToggle={(e) => {
-                e.preventDefault();
-                e.stopPropagation();
-              }}
-            />
-          </div>
-        </div>
-      </div>
-    </header>
-  );
+				<div className="relative z-10">
+					<div className="flex items-center gap-3 md:hidden">
+						<Button
+							variant="text"
+							size="icon"
+							className="flex items-center justify-center p-0"
+							onClick={() => setIsMenuOpen(!isMenuOpen)}
+						>
+							<MenuIcon size={30} />
+						</Button>
+					</div>
+					<div className="hidden items-center gap-3 md:flex">
+						<Link href={SOCIAL_LINKS.github}>
+							<Button className="bg-background text-sm" variant="outline">
+								<GithubIcon className="h-4 w-4" />
+								31k+
+							</Button>
+						</Link>
+						<Link href="/projects">
+							<Button className="text-sm">
+								Projects
+								<ArrowRight className="h-4 w-4" />
+							</Button>
+						</Link>
+						<ThemeToggle />
+					</div>
+				</div>
+				<div
+					className={cn(
+						"bg-background/20 pointer-events-none fixed inset-0 opacity-0 backdrop-blur-3xl",
+						"transition-opacity duration-150",
+						isMenuOpen && "pointer-events-auto opacity-100",
+					)}
+					onClick={() => setIsMenuOpen(false)}
+				>
+					<div className="relative h-full">
+						<nav className="flex flex-col gap-3 px-6 pt-[5rem]">
+							{links.map((link, index) => (
+								<motion.div
+									key={link.href}
+									initial={{ scale: 0.98, opacity: 0 }}
+									animate={{
+										scale: isMenuOpen ? 1 : 0.98,
+										opacity: isMenuOpen ? 1 : 0,
+									}}
+									transition={{
+										duration: 0.4,
+										delay: isMenuOpen ? index * 0.1 : 0,
+										ease: [0.25, 0.46, 0.45, 0.94],
+									}}
+								>
+									<Link
+										href={link.href}
+										className="text-2xl font-semibold"
+										onClick={() => setIsMenuOpen(false)}
+									>
+										{link.label}
+									</Link>
+								</motion.div>
+							))}
+						</nav>
+						<ThemeToggle
+							className="absolute right-8 bottom-8 size-10"
+							iconClassName="!size-[1.2rem]"
+							onToggle={(e) => {
+								e.preventDefault();
+								e.stopPropagation();
+							}}
+						/>
+					</div>
+				</div>
+			</div>
+		</header>
+	);
 }
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 2e09c1cb..765eab81 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -4,239 +4,239 @@ import { Keyboard } from "lucide-react";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import {
-  type KeyboardShortcut,
-  useKeyboardShortcutsHelp,
+	type KeyboardShortcut,
+	useKeyboardShortcutsHelp,
 } from "@/hooks/use-keyboard-shortcuts-help";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { Button } from "./ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
 } from "./ui/dialog";
 
 export function KeyboardShortcutsHelp() {
-  const [open, setOpen] = useState(false);
-  const [recordingShortcut, setRecordingShortcut] =
-    useState<KeyboardShortcut | null>(null);
+	const [open, setOpen] = useState(false);
+	const [recordingShortcut, setRecordingShortcut] =
+		useState<KeyboardShortcut | null>(null);
 
-  const {
-    updateKeybinding,
-    removeKeybinding,
-    getKeybindingString,
-    validateKeybinding,
-    getKeybindingsForAction,
-    setIsRecording,
-    resetToDefaults,
-    isRecording,
-  } = useKeybindingsStore();
+	const {
+		updateKeybinding,
+		removeKeybinding,
+		getKeybindingString,
+		validateKeybinding,
+		getKeybindingsForAction,
+		setIsRecording,
+		resetToDefaults,
+		isRecording,
+	} = useKeybindingsStore();
 
-  // Get shortcuts from centralized hook
-  const { shortcuts } = useKeyboardShortcutsHelp();
+	// Get shortcuts from centralized hook
+	const { shortcuts } = useKeyboardShortcutsHelp();
 
-  const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
+	const categories = Array.from(new Set(shortcuts.map((s) => s.category)));
 
-  useEffect(() => {
-    if (!isRecording || !recordingShortcut) return;
+	useEffect(() => {
+		if (!isRecording || !recordingShortcut) return;
 
-    const handleKeyDown = (e: KeyboardEvent) => {
-      e.preventDefault();
-      e.stopPropagation();
+		const handleKeyDown = (e: KeyboardEvent) => {
+			e.preventDefault();
+			e.stopPropagation();
 
-      const keyString = getKeybindingString(e);
-      if (keyString) {
-        // Auto-save the new keybinding
-        const conflict = validateKeybinding(
-          keyString,
-          recordingShortcut.action,
-        );
-        if (conflict) {
-          toast.error(
-            `Key "${keyString}" is already bound to "${conflict.existingAction}"`,
-          );
-          setRecordingShortcut(null);
-          return;
-        }
+			const keyString = getKeybindingString(e);
+			if (keyString) {
+				// Auto-save the new keybinding
+				const conflict = validateKeybinding(
+					keyString,
+					recordingShortcut.action,
+				);
+				if (conflict) {
+					toast.error(
+						`Key "${keyString}" is already bound to "${conflict.existingAction}"`,
+					);
+					setRecordingShortcut(null);
+					return;
+				}
 
-        // Remove old keybindings for this action
-        const oldKeys = getKeybindingsForAction(recordingShortcut.action);
-        oldKeys.forEach((key) => removeKeybinding(key));
+				// Remove old keybindings for this action
+				const oldKeys = getKeybindingsForAction(recordingShortcut.action);
+				oldKeys.forEach((key) => removeKeybinding(key));
 
-        // Add new keybinding
-        updateKeybinding(keyString, recordingShortcut.action);
+				// Add new keybinding
+				updateKeybinding(keyString, recordingShortcut.action);
 
-        setIsRecording(false);
-        setRecordingShortcut(null);
-      }
-    };
+				setIsRecording(false);
+				setRecordingShortcut(null);
+			}
+		};
 
-    const handleClickOutside = () => {
-      setRecordingShortcut(null);
-      setIsRecording(false);
-    };
+		const handleClickOutside = () => {
+			setRecordingShortcut(null);
+			setIsRecording(false);
+		};
 
-    document.addEventListener("keydown", handleKeyDown);
-    document.addEventListener("click", handleClickOutside);
+		document.addEventListener("keydown", handleKeyDown);
+		document.addEventListener("click", handleClickOutside);
 
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-      document.removeEventListener("click", handleClickOutside);
-    };
-  }, [
-    recordingShortcut,
-    getKeybindingString,
-    updateKeybinding,
-    removeKeybinding,
-    validateKeybinding,
-    getKeybindingsForAction,
-    setIsRecording,
-    isRecording,
-  ]);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+			document.removeEventListener("click", handleClickOutside);
+		};
+	}, [
+		recordingShortcut,
+		getKeybindingString,
+		updateKeybinding,
+		removeKeybinding,
+		validateKeybinding,
+		getKeybindingsForAction,
+		setIsRecording,
+		isRecording,
+	]);
 
-  const handleStartRecording = (shortcut: KeyboardShortcut) => {
-    setRecordingShortcut(shortcut);
-    setIsRecording(true);
-  };
+	const handleStartRecording = (shortcut: KeyboardShortcut) => {
+		setRecordingShortcut(shortcut);
+		setIsRecording(true);
+	};
 
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger asChild>
-        <Button variant="text" size="sm" className="gap-2">
-          <Keyboard />
-          Shortcuts
-        </Button>
-      </DialogTrigger>
-      <DialogContent className="flex max-h-[80vh] max-w-2xl flex-col p-0">
-        <DialogHeader className="flex-shrink-0 p-6 pb-0">
-          <DialogTitle className="flex items-center gap-2">
-            <Keyboard className="h-5 w-5" />
-            Keyboard Shortcuts
-          </DialogTitle>
-          <DialogDescription>
-            Speed up your video editing workflow with these keyboard shortcuts.
-            Click any shortcut key to edit it.
-          </DialogDescription>
-        </DialogHeader>
+	return (
+		<Dialog open={open} onOpenChange={setOpen}>
+			<DialogTrigger asChild>
+				<Button variant="text" size="sm" className="gap-2">
+					<Keyboard />
+					Shortcuts
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="flex max-h-[80vh] max-w-2xl flex-col p-0">
+				<DialogHeader className="flex-shrink-0 p-6 pb-0">
+					<DialogTitle className="flex items-center gap-2">
+						<Keyboard className="h-5 w-5" />
+						Keyboard Shortcuts
+					</DialogTitle>
+					<DialogDescription>
+						Speed up your video editing workflow with these keyboard shortcuts.
+						Click any shortcut key to edit it.
+					</DialogDescription>
+				</DialogHeader>
 
-        <div className="scrollbar-thin flex-grow overflow-y-auto">
-          <div className="space-y-6 p-6 pt-2">
-            {categories.map((category) => (
-              <div key={category} className="flex flex-col gap-1">
-                <h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
-                  {category}
-                </h3>
-                <div className="space-y-1">
-                  {shortcuts
-                    .filter((shortcut) => shortcut.category === category)
-                    .map((shortcut) => (
-                      <ShortcutItem
-                        key={shortcut.action}
-                        shortcut={shortcut}
-                        isRecording={
-                          shortcut.action === recordingShortcut?.action
-                        }
-                        onStartRecording={handleStartRecording}
-                      />
-                    ))}
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-        <DialogFooter className="p-4 pt-0">
-          <Button size="sm" variant="destructive" onClick={resetToDefaults}>
-            Reset to default
-          </Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+				<div className="scrollbar-thin flex-grow overflow-y-auto">
+					<div className="space-y-6 p-6 pt-2">
+						{categories.map((category) => (
+							<div key={category} className="flex flex-col gap-1">
+								<h3 className="text-muted-foreground text-xs font-medium tracking-wide uppercase">
+									{category}
+								</h3>
+								<div className="space-y-1">
+									{shortcuts
+										.filter((shortcut) => shortcut.category === category)
+										.map((shortcut) => (
+											<ShortcutItem
+												key={shortcut.action}
+												shortcut={shortcut}
+												isRecording={
+													shortcut.action === recordingShortcut?.action
+												}
+												onStartRecording={handleStartRecording}
+											/>
+										))}
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+				<DialogFooter className="p-4 pt-0">
+					<Button size="sm" variant="destructive" onClick={resetToDefaults}>
+						Reset to default
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
 }
 
 function ShortcutItem({
-  shortcut,
-  isRecording,
-  onStartRecording,
+	shortcut,
+	isRecording,
+	onStartRecording,
 }: {
-  shortcut: KeyboardShortcut;
-  isRecording: boolean;
-  onStartRecording: (shortcut: KeyboardShortcut) => void;
+	shortcut: KeyboardShortcut;
+	isRecording: boolean;
+	onStartRecording: (shortcut: KeyboardShortcut) => void;
 }) {
-  // Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
-  const displayKeys = shortcut.keys.filter((key: string) => {
-    if (
-      key.includes("Cmd") &&
-      shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
-    )
-      return false;
+	// Filter out lowercase duplicates for display - if both "j" and "J" exist, only show "J"
+	const displayKeys = shortcut.keys.filter((key: string) => {
+		if (
+			key.includes("Cmd") &&
+			shortcut.keys.includes(key.replace("Cmd", "Ctrl"))
+		)
+			return false;
 
-    return true;
-  });
+		return true;
+	});
 
-  return (
-    <div className="flex items-center justify-between">
-      <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-2">
-        {displayKeys.map((key: string, index: number) => (
-          <div key={key} className="flex items-center gap-2">
-            <div className="flex items-center gap-1">
-              {key.split("+").map((keyPart: string, partIndex: number) => {
-                const keyId = `${shortcut.id}-${index}-${partIndex}`;
-                return (
-                  <EditableShortcutKey
-                    key={keyId}
-                    isRecording={isRecording}
-                    onStartRecording={() => onStartRecording(shortcut)}
-                  >
-                    {keyPart}
-                  </EditableShortcutKey>
-                );
-              })}
-            </div>
-            {index < displayKeys.length - 1 && (
-              <span className="text-muted-foreground text-xs">or</span>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
+	return (
+		<div className="flex items-center justify-between">
+			<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-2">
+				{displayKeys.map((key: string, index: number) => (
+					<div key={key} className="flex items-center gap-2">
+						<div className="flex items-center gap-1">
+							{key.split("+").map((keyPart: string, partIndex: number) => {
+								const keyId = `${shortcut.id}-${index}-${partIndex}`;
+								return (
+									<EditableShortcutKey
+										key={keyId}
+										isRecording={isRecording}
+										onStartRecording={() => onStartRecording(shortcut)}
+									>
+										{keyPart}
+									</EditableShortcutKey>
+								);
+							})}
+						</div>
+						{index < displayKeys.length - 1 && (
+							<span className="text-muted-foreground text-xs">or</span>
+						)}
+					</div>
+				))}
+			</div>
+		</div>
+	);
 }
 
 function EditableShortcutKey({
-  children,
-  isRecording,
-  onStartRecording,
+	children,
+	isRecording,
+	onStartRecording,
 }: {
-  children: React.ReactNode;
-  isRecording: boolean;
-  onStartRecording: () => void;
+	children: React.ReactNode;
+	isRecording: boolean;
+	onStartRecording: () => void;
 }) {
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onStartRecording();
-  };
+	const handleClick = (e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+		onStartRecording();
+	};
 
-  return (
-    <Button
-      variant="outline"
-      size="sm"
-      onClick={handleClick}
-      title={
-        isRecording ? "Press any key combination..." : "Click to edit shortcut"
-      }
-    >
-      {children}
-    </Button>
-  );
+	return (
+		<Button
+			variant="outline"
+			size="sm"
+			onClick={handleClick}
+			title={
+				isRecording ? "Press any key combination..." : "Click to edit shortcut"
+			}
+		>
+			{children}
+		</Button>
+	);
 }
diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 8a9abcef..63a88f65 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -5,169 +5,169 @@ import { type PropsWithChildren, useEffect, useRef, useState } from "react";
 type HandlebarsProps = PropsWithChildren;
 
 export function Handlebars({ children }: HandlebarsProps) {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const leftHandleRef = useRef<HTMLDivElement>(null);
-  const rightHandleRef = useRef<HTMLDivElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const leftHandleRef = useRef<HTMLDivElement>(null);
+	const rightHandleRef = useRef<HTMLDivElement>(null);
 
-  const [width, setWidth] = useState(0);
-  const [leftHandle, setLeftHandle] = useState(0);
-  const [rightHandle, setRightHandle] = useState(0);
+	const [width, setWidth] = useState(0);
+	const [leftHandle, setLeftHandle] = useState(0);
+	const [rightHandle, setRightHandle] = useState(0);
 
-  const widthRef = useRef(0);
-  const leftHandlePositionRef = useRef(0);
-  const rightHandlePositionRef = useRef(0);
+	const widthRef = useRef(0);
+	const leftHandlePositionRef = useRef(0);
+	const rightHandlePositionRef = useRef(0);
 
-  const dragRef = useRef<{
-    isDragging: boolean;
-    side: "left" | "right" | null;
-    pointerId: number | null;
-    startX: number;
-    initialPosition: number;
-  }>({
-    isDragging: false,
-    side: null,
-    pointerId: null,
-    startX: 0,
-    initialPosition: 0,
-  });
+	const dragRef = useRef<{
+		isDragging: boolean;
+		side: "left" | "right" | null;
+		pointerId: number | null;
+		startX: number;
+		initialPosition: number;
+	}>({
+		isDragging: false,
+		side: null,
+		pointerId: null,
+		startX: 0,
+		initialPosition: 0,
+	});
 
-  useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
+	useEffect(() => {
+		const el = containerRef.current;
+		if (!el) return;
 
-    const updateWidth = () => {
-      const newWidth = el.offsetWidth;
-      setWidth(newWidth);
-      setRightHandle(newWidth);
-    };
+		const updateWidth = () => {
+			const newWidth = el.offsetWidth;
+			setWidth(newWidth);
+			setRightHandle(newWidth);
+		};
 
-    const observer = new ResizeObserver(updateWidth);
-    observer.observe(el);
-    updateWidth();
+		const observer = new ResizeObserver(updateWidth);
+		observer.observe(el);
+		updateWidth();
 
-    return () => observer.disconnect();
-  }, []);
+		return () => observer.disconnect();
+	}, []);
 
-  useEffect(() => {
-    widthRef.current = width;
-    leftHandlePositionRef.current = leftHandle;
-    rightHandlePositionRef.current = rightHandle;
-  }, [leftHandle, rightHandle, width]);
+	useEffect(() => {
+		widthRef.current = width;
+		leftHandlePositionRef.current = leftHandle;
+		rightHandlePositionRef.current = rightHandle;
+	}, [leftHandle, rightHandle, width]);
 
-  useEffect(() => {
-    const handlePointerMove = (event: PointerEvent) => {
-      const { isDragging, side, pointerId, startX, initialPosition } =
-        dragRef.current;
+	useEffect(() => {
+		const handlePointerMove = (event: PointerEvent) => {
+			const { isDragging, side, pointerId, startX, initialPosition } =
+				dragRef.current;
 
-      if (!isDragging) return;
-      if (pointerId !== null && event.pointerId !== pointerId) return;
-      if (!side) return;
+			if (!isDragging) return;
+			if (pointerId !== null && event.pointerId !== pointerId) return;
+			if (!side) return;
 
-      const deltaX = event.clientX - startX;
+			const deltaX = event.clientX - startX;
 
-      if (side === "left") {
-        const maxLeft = Math.max(0, rightHandlePositionRef.current - 60);
-        const nextLeftHandle = Math.max(
-          0,
-          Math.min(maxLeft, initialPosition + deltaX),
-        );
-        setLeftHandle(nextLeftHandle);
-        return;
-      }
+			if (side === "left") {
+				const maxLeft = Math.max(0, rightHandlePositionRef.current - 60);
+				const nextLeftHandle = Math.max(
+					0,
+					Math.min(maxLeft, initialPosition + deltaX),
+				);
+				setLeftHandle(nextLeftHandle);
+				return;
+			}
 
-      const minRight = Math.min(
-        widthRef.current,
-        leftHandlePositionRef.current + 60,
-      );
-      const nextRightHandle = Math.max(
-        minRight,
-        Math.min(widthRef.current, initialPosition + deltaX),
-      );
-      setRightHandle(nextRightHandle);
-    };
+			const minRight = Math.min(
+				widthRef.current,
+				leftHandlePositionRef.current + 60,
+			);
+			const nextRightHandle = Math.max(
+				minRight,
+				Math.min(widthRef.current, initialPosition + deltaX),
+			);
+			setRightHandle(nextRightHandle);
+		};
 
-    const handlePointerEnd = (event: PointerEvent) => {
-      const { pointerId } = dragRef.current;
-      if (pointerId !== null && event.pointerId !== pointerId) return;
+		const handlePointerEnd = (event: PointerEvent) => {
+			const { pointerId } = dragRef.current;
+			if (pointerId !== null && event.pointerId !== pointerId) return;
 
-      dragRef.current.isDragging = false;
-      dragRef.current.side = null;
-      dragRef.current.pointerId = null;
-    };
+			dragRef.current.isDragging = false;
+			dragRef.current.side = null;
+			dragRef.current.pointerId = null;
+		};
 
-    window.addEventListener("pointermove", handlePointerMove);
-    window.addEventListener("pointerup", handlePointerEnd);
-    window.addEventListener("pointercancel", handlePointerEnd);
+		window.addEventListener("pointermove", handlePointerMove);
+		window.addEventListener("pointerup", handlePointerEnd);
+		window.addEventListener("pointercancel", handlePointerEnd);
 
-    return () => {
-      window.removeEventListener("pointermove", handlePointerMove);
-      window.removeEventListener("pointerup", handlePointerEnd);
-      window.removeEventListener("pointercancel", handlePointerEnd);
-    };
-  }, []);
+		return () => {
+			window.removeEventListener("pointermove", handlePointerMove);
+			window.removeEventListener("pointerup", handlePointerEnd);
+			window.removeEventListener("pointercancel", handlePointerEnd);
+		};
+	}, []);
 
-  const leftGradientPercent = width > 0 ? (leftHandle / (width - 10)) * 100 : 0;
-  const rightGradientPercent =
-    width > 0 ? (rightHandle / (width + 10)) * 100 : 0;
+	const leftGradientPercent = width > 0 ? (leftHandle / (width - 10)) * 100 : 0;
+	const rightGradientPercent =
+		width > 0 ? (rightHandle / (width + 10)) * 100 : 0;
 
-  return (
-    <div className="flex justify-center gap-4 leading-16">
-      <div ref={containerRef} className="relative mt-0.5 -rotate-[2.76deg]">
-        <div className="absolute inset-0 z-10 flex h-full w-full justify-between rounded-2xl border border-yellow-500">
-          <div
-            ref={leftHandleRef}
-            className="bg-background absolute left-0 z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none"
-            style={{
-              translate: `${leftHandle}px 0`,
-            }}
-            onPointerDown={(event) => {
-              event.preventDefault();
-              leftHandleRef.current?.setPointerCapture(event.pointerId);
-              dragRef.current.isDragging = true;
-              dragRef.current.side = "left";
-              dragRef.current.pointerId = event.pointerId;
-              dragRef.current.startX = event.clientX;
-              dragRef.current.initialPosition = leftHandlePositionRef.current;
-            }}
-          >
-            <div className="h-8 w-2 rounded-full bg-yellow-500" />
-          </div>
+	return (
+		<div className="flex justify-center gap-4 leading-16">
+			<div ref={containerRef} className="relative mt-0.5 -rotate-[2.76deg]">
+				<div className="absolute inset-0 z-10 flex h-full w-full justify-between rounded-2xl border border-yellow-500">
+					<div
+						ref={leftHandleRef}
+						className="bg-background absolute left-0 z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none"
+						style={{
+							translate: `${leftHandle}px 0`,
+						}}
+						onPointerDown={(event) => {
+							event.preventDefault();
+							leftHandleRef.current?.setPointerCapture(event.pointerId);
+							dragRef.current.isDragging = true;
+							dragRef.current.side = "left";
+							dragRef.current.pointerId = event.pointerId;
+							dragRef.current.startX = event.clientX;
+							dragRef.current.initialPosition = leftHandlePositionRef.current;
+						}}
+					>
+						<div className="h-8 w-2 rounded-full bg-yellow-500" />
+					</div>
 
-          <div
-            ref={rightHandleRef}
-            className="bg-background absolute -left-[30px] z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none"
-            style={{
-              translate: `${rightHandle}px 0`,
-            }}
-            onPointerDown={(event) => {
-              event.preventDefault();
-              rightHandleRef.current?.setPointerCapture(event.pointerId);
-              dragRef.current.isDragging = true;
-              dragRef.current.side = "right";
-              dragRef.current.pointerId = event.pointerId;
-              dragRef.current.startX = event.clientX;
-              dragRef.current.initialPosition = rightHandlePositionRef.current;
-            }}
-          >
-            <div className="h-8 w-2 rounded-full bg-yellow-500" />
-          </div>
-        </div>
+					<div
+						ref={rightHandleRef}
+						className="bg-background absolute -left-[30px] z-20 flex h-full w-7 cursor-ew-resize touch-none items-center justify-center rounded-full border border-yellow-500 select-none"
+						style={{
+							translate: `${rightHandle}px 0`,
+						}}
+						onPointerDown={(event) => {
+							event.preventDefault();
+							rightHandleRef.current?.setPointerCapture(event.pointerId);
+							dragRef.current.isDragging = true;
+							dragRef.current.side = "right";
+							dragRef.current.pointerId = event.pointerId;
+							dragRef.current.startX = event.clientX;
+							dragRef.current.initialPosition = rightHandlePositionRef.current;
+						}}
+					>
+						<div className="h-8 w-2 rounded-full bg-yellow-500" />
+					</div>
+				</div>
 
-        <span
-          className="relative z-0 inline-flex h-full w-full items-center justify-center rounded-2xl px-9 will-change-auto"
-          style={{
-            mask: `linear-gradient(90deg,
+				<span
+					className="relative z-0 inline-flex h-full w-full items-center justify-center rounded-2xl px-9 will-change-auto"
+					style={{
+						mask: `linear-gradient(90deg,
             rgba(255, 255, 255, 0) 0%, 
             rgba(255, 255, 255, 0) ${leftGradientPercent}%, 
             rgba(0, 0, 0) ${leftGradientPercent}%, 
             rgba(0, 0, 0) ${rightGradientPercent}%, 
             rgba(255, 255, 255, 0) ${rightGradientPercent}%, 
             rgba(255, 255, 255, 0) 100%)`,
-          }}
-        >
-          {children}
-        </span>
-      </div>
-    </div>
-  );
+					}}
+				>
+					{children}
+				</span>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index 1edd65dc..e01b0fb6 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -7,39 +7,39 @@ import { Handlebars } from "./handlebars";
 import Link from "next/link";
 
 export function Hero() {
-  return (
-    <div className="flex min-h-[calc(100svh-4.5rem)] flex-col items-center justify-between px-4 text-center">
-      <Image
-        className="absolute top-0 left-0 -z-50 size-full object-cover opacity-85 invert dark:invert-0"
-        src="/landing-page-dark.png"
-        height={1903.5}
-        width={1269}
-        alt="landing-page.bg"
-      />
-      <div className="mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center">
-        <div className="inline-block text-4xl font-bold tracking-tighter md:text-[4rem]">
-          <h1>The open source</h1>
-          <Handlebars>Video Editor</Handlebars>
-        </div>
+	return (
+		<div className="flex min-h-[calc(100svh-4.5rem)] flex-col items-center justify-between px-4 text-center">
+			<Image
+				className="absolute top-0 left-0 -z-50 size-full object-cover opacity-85 invert dark:invert-0"
+				src="/landing-page-dark.png"
+				height={1903.5}
+				width={1269}
+				alt="landing-page.bg"
+			/>
+			<div className="mx-auto flex w-full max-w-3xl flex-1 flex-col justify-center">
+				<div className="inline-block text-4xl font-bold tracking-tighter md:text-[4rem]">
+					<h1>The open source</h1>
+					<Handlebars>Video Editor</Handlebars>
+				</div>
 
-        <p className="text-muted-foreground mx-auto mt-10 max-w-xl text-base font-light tracking-wide sm:text-xl">
-          A simple but powerful video editor that gets the job done. Works on
-          any platform.
-        </p>
+				<p className="text-muted-foreground mx-auto mt-10 max-w-xl text-base font-light tracking-wide sm:text-xl">
+					A simple but powerful video editor that gets the job done. Works on
+					any platform.
+				</p>
 
-        <div className="mt-8 flex justify-center gap-8">
-          <Link href="/projects">
-            <Button
-              type="submit"
-              size="lg"
-              className="bg-foreground h-11 px-6 text-base"
-            >
-              Try early beta
-              <ArrowRight className="ml-0.5" />
-            </Button>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
+				<div className="mt-8 flex justify-center gap-8">
+					<Link href="/projects">
+						<Button
+							type="submit"
+							size="lg"
+							className="bg-foreground h-11 px-6 text-base"
+						>
+							Try early beta
+							<ArrowRight className="ml-0.5" />
+						</Button>
+					</Link>
+				</div>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/language-select.tsx b/apps/web/src/components/language-select.tsx
deleted file mode 100644
index 9d7a2130..00000000
--- a/apps/web/src/components/language-select.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-import { useState, useRef, useEffect } from "react";
-import { ChevronDown, Globe } from "lucide-react";
-import { cn } from "@/utils/ui";
-import { motion } from "motion/react";
-import ReactCountryFlag from "react-country-flag";
-
-export interface Language {
-  code: string;
-  name: string;
-  flag?: string;
-}
-
-interface LanguageSelectProps {
-  selectedCountry: string;
-  onSelect: (country: string) => void;
-  containerRef: React.RefObject<HTMLDivElement>;
-  languages: Language[];
-}
-
-function FlagPreloader({ languages }: { languages: Language[] }) {
-  return (
-    <div className="pointer-events-none absolute -top-[9999px] left-0">
-      {languages.map((language) => (
-        <ReactCountryFlag
-          key={language.code}
-          countryCode={language.code}
-          svg
-          style={{ width: "1.05rem", height: "1.05rem" }}
-        />
-      ))}
-    </div>
-  );
-}
-
-export function LanguageSelect({
-  selectedCountry,
-  onSelect,
-  containerRef,
-  languages,
-}: LanguageSelectProps) {
-  const [expanded, setExpanded] = useState(false);
-  const [isTapping, setIsTapping] = useState(false);
-  const [isClosing, setIsClosing] = useState(false);
-  const collapsedHeight = "2.5rem";
-  const expandHeight = "12rem";
-  const buttonRef = useRef<HTMLButtonElement>(null);
-
-  const expand = () => {
-    setIsTapping(true);
-    setTimeout(() => setIsTapping(false), 600);
-    setExpanded(true);
-    buttonRef.current?.focus();
-  };
-
-  useEffect(() => {
-    if (!expanded) return;
-
-    const handleClickOutside = (event: MouseEvent) => {
-      if (
-        buttonRef.current &&
-        !buttonRef.current.contains(event.target as Node)
-      ) {
-        setIsClosing(true);
-        setTimeout(() => setIsClosing(false), 600);
-        setExpanded(false);
-        buttonRef.current?.blur();
-      }
-    };
-
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [expanded]);
-
-  const selectedLanguage = languages.find(
-    (lang) => lang.code === selectedCountry,
-  );
-
-  const handleSelect = ({
-    code,
-    e,
-  }: {
-    code: string;
-    e: React.MouseEvent<HTMLButtonElement>;
-  }) => {
-    e.stopPropagation();
-    e.preventDefault();
-    onSelect(code);
-    setExpanded(false);
-  };
-
-  return (
-    <div className="relative h-9 w-full">
-      <FlagPreloader languages={languages} />
-      <motion.button
-        type="button"
-        className={cn(
-          "absolute z-10 flex h-full w-full cursor-pointer flex-col items-start justify-between overflow-hidden rounded-lg px-3",
-          "!bg-foreground/10 text-foreground py-0 backdrop-blur-md",
-          "focus:border-ring focus:ring-ring/50 transition-[color,box-shadow] focus:ring-[1px]",
-        )}
-        initial={{
-          height: collapsedHeight,
-          scale: 1,
-        }}
-        animate={{
-          height: expanded ? expandHeight : collapsedHeight,
-          scale: isTapping ? [1, 0.985, 1] : 1,
-        }}
-        transition={{
-          height: { duration: 0.25, ease: [0.4, 0, 0.2, 1] },
-          scale: { duration: 0.6, ease: "easeOut" },
-        }}
-        onClick={expand}
-        ref={buttonRef}
-      >
-        {!expanded ? (
-          <div
-            className="flex w-full items-center justify-between"
-            style={{
-              height: collapsedHeight,
-            }}
-          >
-            <div className="flex items-center gap-2">
-              {selectedCountry === "auto" ? (
-                <Globe className="!size-[1.05rem]" />
-              ) : (
-                <ReactCountryFlag
-                  countryCode={selectedCountry}
-                  svg
-                  style={{ width: "1.05rem", height: "1.05rem" }}
-                />
-              )}
-              <span className="pt-[0.05rem]">
-                {selectedCountry === "auto" ? "Auto" : selectedLanguage?.name}
-              </span>
-            </div>
-          </div>
-        ) : (
-          <div className="scrollbar-hidden my-2.5 flex w-full flex-col gap-2 overflow-y-auto">
-            <LanguageButton
-              language={{ code: "auto", name: "Auto" }}
-              onSelect={handleSelect}
-              selectedCountry={selectedCountry}
-            />
-            {languages.map((language) => (
-              <LanguageButton
-                key={language.code}
-                language={language}
-                onSelect={handleSelect}
-                selectedCountry={selectedCountry}
-              />
-            ))}
-          </div>
-        )}
-      </motion.button>
-
-      <motion.div
-        className="pointer-events-none absolute top-1/2 right-3 z-20 mt-0.5 -translate-y-1/2"
-        initial={{ opacity: 1 }}
-        animate={{ opacity: expanded ? 0 : 1 }}
-        transition={{ duration: 0.2, ease: "easeInOut" }}
-      >
-        <ChevronDown className="text-muted-foreground size-4" />
-      </motion.div>
-    </div>
-  );
-}
-
-function LanguageButton({
-  language,
-  onSelect,
-  selectedCountry,
-}: {
-  language: Language;
-  onSelect: ({
-    code,
-    e,
-  }: {
-    code: string;
-    e: React.MouseEvent<HTMLButtonElement>;
-  }) => void;
-  selectedCountry: string;
-}) {
-  return (
-    <button
-      type="button"
-      className="text-foreground hover:text-foreground/75 flex cursor-pointer items-center gap-2"
-      onClick={(e) => onSelect({ code: language.code, e })}
-    >
-      {language.code === "auto" ? (
-        <Globe className="!size-[1.0rem]" />
-      ) : (
-        <ReactCountryFlag
-          countryCode={language.code}
-          svg
-          style={{ width: "1.05rem", height: "1.05rem" }}
-        />
-      )}
-      <span className="pt-[0.05rem]">{language.name}</span>
-    </button>
-  );
-}
diff --git a/apps/web/src/components/providers/editor-provider.tsx b/apps/web/src/components/providers/editor-provider.tsx
index e98c91a5..d4ad57d9 100644
--- a/apps/web/src/components/providers/editor-provider.tsx
+++ b/apps/web/src/components/providers/editor-provider.tsx
@@ -5,119 +5,119 @@ import { useRouter } from "next/navigation";
 import { Loader2 } from "lucide-react";
 import { useEditor } from "@/hooks/use-editor";
 import {
-  useKeybindingsListener,
-  useKeybindingDisabler,
+	useKeybindingsListener,
+	useKeybindingDisabler,
 } from "@/hooks/use-keybindings";
 import { useEditorActions } from "@/hooks/actions/use-editor-actions";
 
 interface EditorProviderProps {
-  projectId: string;
-  children: React.ReactNode;
+	projectId: string;
+	children: React.ReactNode;
 }
 
 export function EditorProvider({ projectId, children }: EditorProviderProps) {
-  const editor = useEditor();
-  const router = useRouter();
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();
-  const activeProject = editor.project.getActiveOrNull();
+	const editor = useEditor();
+	const router = useRouter();
+	const [isLoading, setIsLoading] = useState(true);
+	const [error, setError] = useState<string | null>(null);
+	const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();
+	const activeProject = editor.project.getActiveOrNull();
 
-  useEffect(() => {
-    if (isLoading) {
-      disableKeybindings();
-    } else {
-      enableKeybindings();
-    }
-  }, [isLoading, disableKeybindings, enableKeybindings]);
+	useEffect(() => {
+		if (isLoading) {
+			disableKeybindings();
+		} else {
+			enableKeybindings();
+		}
+	}, [isLoading, disableKeybindings, enableKeybindings]);
 
-  useEffect(() => {
-    let cancelled = false;
+	useEffect(() => {
+		let cancelled = false;
 
-    const loadProject = async () => {
-      try {
-        setIsLoading(true);
-        await editor.project.loadProject({ id: projectId });
+		const loadProject = async () => {
+			try {
+				setIsLoading(true);
+				await editor.project.loadProject({ id: projectId });
 
-        if (cancelled) return;
+				if (cancelled) return;
 
-        setIsLoading(false);
-      } catch (err) {
-        if (cancelled) return;
+				setIsLoading(false);
+			} catch (err) {
+				if (cancelled) return;
 
-        const isNotFound =
-          err instanceof Error &&
-          (err.message.includes("not found") ||
-            err.message.includes("does not exist"));
+				const isNotFound =
+					err instanceof Error &&
+					(err.message.includes("not found") ||
+						err.message.includes("does not exist"));
 
-        if (isNotFound) {
-          try {
-            const newProjectId = await editor.project.createNewProject({
-              name: "Untitled Project",
-            });
-            router.replace(`/editor/${newProjectId}`);
-          } catch (createErr) {
-            setError("Failed to create project");
-            setIsLoading(false);
-          }
-        } else {
-          setError(
-            err instanceof Error ? err.message : "Failed to load project",
-          );
-          setIsLoading(false);
-        }
-      }
-    };
+				if (isNotFound) {
+					try {
+						const newProjectId = await editor.project.createNewProject({
+							name: "Untitled Project",
+						});
+						router.replace(`/editor/${newProjectId}`);
+					} catch (createErr) {
+						setError("Failed to create project");
+						setIsLoading(false);
+					}
+				} else {
+					setError(
+						err instanceof Error ? err.message : "Failed to load project",
+					);
+					setIsLoading(false);
+				}
+			}
+		};
 
-    loadProject();
+		loadProject();
 
-    return () => {
-      cancelled = true;
-    };
-  }, [projectId, editor, router]);
+		return () => {
+			cancelled = true;
+		};
+	}, [projectId, editor, router]);
 
-  if (error) {
-    return (
-      <div className="bg-background flex h-screen w-screen items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <p className="text-destructive text-sm">{error}</p>
-        </div>
-      </div>
-    );
-  }
+	if (error) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<p className="text-destructive text-sm">{error}</p>
+				</div>
+			</div>
+		);
+	}
 
-  if (isLoading) {
-    return (
-      <div className="bg-background flex h-screen w-screen items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          <p className="text-muted-foreground text-sm">Loading project...</p>
-        </div>
-      </div>
-    );
-  }
+	if (isLoading) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+					<p className="text-muted-foreground text-sm">Loading project...</p>
+				</div>
+			</div>
+		);
+	}
 
-  if (!activeProject) {
-    return (
-      <div className="bg-background flex h-screen w-screen items-center justify-center">
-        <div className="flex flex-col items-center gap-4">
-          <Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
-          <p className="text-muted-foreground text-sm">Exiting project...</p>
-        </div>
-      </div>
-    );
-  }
+	if (!activeProject) {
+		return (
+			<div className="bg-background flex h-screen w-screen items-center justify-center">
+				<div className="flex flex-col items-center gap-4">
+					<Loader2 className="text-muted-foreground h-8 w-8 animate-spin" />
+					<p className="text-muted-foreground text-sm">Exiting project...</p>
+				</div>
+			</div>
+		);
+	}
 
-  return (
-    <>
-      <EditorRuntimeBindings />
-      {children}
-    </>
-  );
+	return (
+		<>
+			<EditorRuntimeBindings />
+			{children}
+		</>
+	);
 }
 
 function EditorRuntimeBindings() {
-  useEditorActions();
-  useKeybindingsListener();
-  return null;
+	useEditorActions();
+	useKeybindingsListener();
+	return null;
 }
diff --git a/apps/web/src/components/rename-project-dialog.tsx b/apps/web/src/components/rename-project-dialog.tsx
index 0309138b..5afed717 100644
--- a/apps/web/src/components/rename-project-dialog.tsx
+++ b/apps/web/src/components/rename-project-dialog.tsx
@@ -1,72 +1,72 @@
 import { Button } from "@/components/ui/button";
 import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
 } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { useState } from "react";
 
 export function RenameProjectDialog({
-  isOpen,
-  onOpenChange,
-  onConfirm,
-  projectName,
+	isOpen,
+	onOpenChange,
+	onConfirm,
+	projectName,
 }: {
-  isOpen: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: (newName: string) => void;
-  projectName: string;
+	isOpen: boolean;
+	onOpenChange: (open: boolean) => void;
+	onConfirm: (newName: string) => void;
+	projectName: string;
 }) {
-  const [name, setName] = useState(projectName);
+	const [name, setName] = useState(projectName);
 
-  const handleOpenChange = (open: boolean) => {
-    if (open) {
-      setName(projectName);
-    }
-    onOpenChange(open);
-  };
+	const handleOpenChange = (open: boolean) => {
+		if (open) {
+			setName(projectName);
+		}
+		onOpenChange(open);
+	};
 
-  return (
-    <Dialog open={isOpen} onOpenChange={handleOpenChange}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Rename Project</DialogTitle>
-          <DialogDescription>
-            Enter a new name for your project.
-          </DialogDescription>
-        </DialogHeader>
+	return (
+		<Dialog open={isOpen} onOpenChange={handleOpenChange}>
+			<DialogContent>
+				<DialogHeader>
+					<DialogTitle>Rename Project</DialogTitle>
+					<DialogDescription>
+						Enter a new name for your project.
+					</DialogDescription>
+				</DialogHeader>
 
-        <Input
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.preventDefault();
-              onConfirm(name);
-            }
-          }}
-          placeholder="Enter a new name"
-          className="bg-background border-border mt-0 border-2"
-        />
+				<Input
+					value={name}
+					onChange={(e) => setName(e.target.value)}
+					onKeyDown={(e) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							onConfirm(name);
+						}
+					}}
+					placeholder="Enter a new name"
+					className="bg-background border-border mt-0 border-2"
+				/>
 
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onOpenChange(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button onClick={() => onConfirm(name)}>Rename</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
+				<DialogFooter>
+					<Button
+						variant="outline"
+						onClick={(e) => {
+							e.preventDefault();
+							e.stopPropagation();
+							onOpenChange(false);
+						}}
+					>
+						Cancel
+					</Button>
+					<Button onClick={() => onConfirm(name)}>Rename</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
 }
diff --git a/apps/web/src/components/storage-provider.tsx b/apps/web/src/components/storage-provider.tsx
index e7661f70..6439e44c 100644
--- a/apps/web/src/components/storage-provider.tsx
+++ b/apps/web/src/components/storage-provider.tsx
@@ -1,81 +1,81 @@
 "use client";
 
 import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { toast } from "sonner";
 import { useEditor } from "@/hooks/use-editor";
 import { storageService } from "@/services/storage/storage-service";
-import { toast } from "sonner";
 
 interface StorageContextType {
-  isInitialized: boolean;
-  isLoading: boolean;
-  hasSupport: boolean;
-  error: string | null;
+	isInitialized: boolean;
+	isLoading: boolean;
+	hasSupport: boolean;
+	error: string | null;
 }
 
 const StorageContext = createContext<StorageContextType | null>(null);
 
 export function useStorage() {
-  const context = useContext(StorageContext);
-  if (!context) {
-    throw new Error("useStorage must be used within StorageProvider");
-  }
-  return context;
+	const context = useContext(StorageContext);
+	if (!context) {
+		throw new Error("useStorage must be used within StorageProvider");
+	}
+	return context;
 }
 
 interface StorageProviderProps {
-  children: React.ReactNode;
+	children: React.ReactNode;
 }
 
 export function StorageProvider({ children }: StorageProviderProps) {
-  const [status, setStatus] = useState<StorageContextType>({
-    isInitialized: false,
-    isLoading: true,
-    hasSupport: false,
-    error: null,
-  });
+	const [status, setStatus] = useState<StorageContextType>({
+		isInitialized: false,
+		isLoading: true,
+		hasSupport: false,
+		error: null,
+	});
 
-  const editor = useEditor();
-  const hasInitialized = useRef(false);
+	const editor = useEditor();
+	const hasInitialized = useRef(false);
 
-  useEffect(() => {
-    if (hasInitialized.current) return;
-    hasInitialized.current = true;
+	useEffect(() => {
+		if (hasInitialized.current) return;
+		hasInitialized.current = true;
 
-    const initializeStorage = async () => {
-      setStatus((prev) => ({ ...prev, isLoading: true }));
+		const initializeStorage = async () => {
+			setStatus((prev) => ({ ...prev, isLoading: true }));
 
-      try {
-        const hasSupport = storageService.isFullySupported();
+			try {
+				const hasSupport = storageService.isFullySupported();
 
-        if (!hasSupport) {
-          toast.warning(
-            "Storage not fully supported. Some features may not work.",
-          );
-        }
+				if (!hasSupport) {
+					toast.warning(
+						"Storage not fully supported. Some features may not work.",
+					);
+				}
 
-        await editor.project.loadAllProjects();
+				await editor.project.loadAllProjects();
 
-        setStatus({
-          isInitialized: true,
-          isLoading: false,
-          hasSupport,
-          error: null,
-        });
-      } catch (error) {
-        console.error("Failed to initialize storage:", error);
-        setStatus({
-          isInitialized: false,
-          isLoading: false,
-          hasSupport: storageService.isFullySupported(),
-          error: error instanceof Error ? error.message : "Unknown error",
-        });
-      }
-    };
+				setStatus({
+					isInitialized: true,
+					isLoading: false,
+					hasSupport,
+					error: null,
+				});
+			} catch (error) {
+				console.error("Failed to initialize storage:", error);
+				setStatus({
+					isInitialized: false,
+					isLoading: false,
+					hasSupport: storageService.isFullySupported(),
+					error: error instanceof Error ? error.message : "Unknown error",
+				});
+			}
+		};
 
-    initializeStorage();
-  }, []);
+		initializeStorage();
+	}, []);
 
-  return (
-    <StorageContext.Provider value={status}>{children}</StorageContext.Provider>
-  );
+	return (
+		<StorageContext.Provider value={status}>{children}</StorageContext.Provider>
+	);
 }
diff --git a/apps/web/src/components/theme-toggle.tsx b/apps/web/src/components/theme-toggle.tsx
index 45229a12..c727c4db 100644
--- a/apps/web/src/components/theme-toggle.tsx
+++ b/apps/web/src/components/theme-toggle.tsx
@@ -6,30 +6,30 @@ import { useTheme } from "next-themes";
 import { cn } from "@/utils/ui";
 
 interface ThemeToggleProps {
-  className?: string;
-  iconClassName?: string;
-  onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+	className?: string;
+	iconClassName?: string;
+	onToggle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
 }
 
 export function ThemeToggle({
-  className,
-  iconClassName,
-  onToggle,
+	className,
+	iconClassName,
+	onToggle,
 }: ThemeToggleProps) {
-  const { theme, setTheme } = useTheme();
+	const { theme, setTheme } = useTheme();
 
-  return (
-    <Button
-      size="icon"
-      variant="text"
-      className={cn("h-7", className)}
-      onClick={(e) => {
-        setTheme(theme === "dark" ? "light" : "dark");
-        onToggle?.(e);
-      }}
-    >
-      <Sun className={cn("!size-[1.1rem]", iconClassName)} />
-      <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
-    </Button>
-  );
+	return (
+		<Button
+			size="icon"
+			variant="text"
+			className={cn("h-7", className)}
+			onClick={(e) => {
+				setTheme(theme === "dark" ? "light" : "dark");
+				onToggle?.(e);
+			}}
+		>
+			<Sun className={cn("!size-[1.1rem]", iconClassName)} />
+			<span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
+		</Button>
+	);
 }
diff --git a/apps/web/src/components/ui/accordion.tsx b/apps/web/src/components/ui/accordion.tsx
index 145fcb4d..c8efd7b0 100644
--- a/apps/web/src/components/ui/accordion.tsx
+++ b/apps/web/src/components/ui/accordion.tsx
@@ -9,48 +9,48 @@ import { cn } from "@/utils/ui";
 const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+	React.ElementRef<typeof AccordionPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <AccordionPrimitive.Item
-    ref={ref}
-    className={cn("border-b", className)}
-    {...props}
-  />
+	<AccordionPrimitive.Item
+		ref={ref}
+		className={cn("border-b", className)}
+		{...props}
+	/>
 ));
 AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+	React.ElementRef<typeof AccordionPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger
-      ref={ref}
-      className={cn(
-        "flex flex-1 cursor-pointer items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronDown className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
-    </AccordionPrimitive.Trigger>
-  </AccordionPrimitive.Header>
+	<AccordionPrimitive.Header className="flex">
+		<AccordionPrimitive.Trigger
+			ref={ref}
+			className={cn(
+				"flex flex-1 cursor-pointer items-center justify-between py-4 text-left text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<ChevronDown className="text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200" />
+		</AccordionPrimitive.Trigger>
+	</AccordionPrimitive.Header>
 ));
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
-  React.ElementRef<typeof AccordionPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+	React.ElementRef<typeof AccordionPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <AccordionPrimitive.Content
-    ref={ref}
-    className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
-    {...props}
-  >
-    <div className={cn("pt-0 pb-4", className)}>{children}</div>
-  </AccordionPrimitive.Content>
+	<AccordionPrimitive.Content
+		ref={ref}
+		className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+		{...props}
+	>
+		<div className={cn("pt-0 pb-4", className)}>{children}</div>
+	</AccordionPrimitive.Content>
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx
index 186949c7..2af119ae 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/apps/web/src/components/ui/alert-dialog.tsx
@@ -13,129 +13,129 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+	React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Overlay
-    className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
+	<AlertDialogPrimitive.Overlay
+		className={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+	React.ElementRef<typeof AlertDialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPortal>
-    <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
-  </AlertDialogPortal>
+	<AlertDialogPortal>
+		<AlertDialogOverlay />
+		<AlertDialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed top-[50%] left-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		/>
+	</AlertDialogPortal>
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col space-y-2 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
 );
 AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+	React.ElementRef<typeof AlertDialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Title
-    ref={ref}
-    className={cn("text-lg font-semibold", className)}
-    {...props}
-  />
+	<AlertDialogPrimitive.Title
+		ref={ref}
+		className={cn("text-lg font-semibold", className)}
+		{...props}
+	/>
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+	React.ElementRef<typeof AlertDialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
+	<AlertDialogPrimitive.Description
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName;
+	AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+	React.ElementRef<typeof AlertDialogPrimitive.Action>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Action
-    ref={ref}
-    className={cn(buttonVariants(), className)}
-    {...props}
-  />
+	<AlertDialogPrimitive.Action
+		ref={ref}
+		className={cn(buttonVariants(), className)}
+		{...props}
+	/>
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+	React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+	React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
-  <AlertDialogPrimitive.Cancel
-    ref={ref}
-    className={cn(
-      buttonVariants({ variant: "outline" }),
-      "mt-2 sm:mt-0",
-      className,
-    )}
-    {...props}
-  />
+	<AlertDialogPrimitive.Cancel
+		ref={ref}
+		className={cn(
+			buttonVariants({ variant: "outline" }),
+			"mt-2 sm:mt-0",
+			className,
+		)}
+		{...props}
+	/>
 ));
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
-  AlertDialog,
-  AlertDialogPortal,
-  AlertDialogOverlay,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogFooter,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogAction,
-  AlertDialogCancel,
+	AlertDialog,
+	AlertDialogPortal,
+	AlertDialogOverlay,
+	AlertDialogTrigger,
+	AlertDialogContent,
+	AlertDialogHeader,
+	AlertDialogFooter,
+	AlertDialogTitle,
+	AlertDialogDescription,
+	AlertDialogAction,
+	AlertDialogCancel,
 };
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index 3db09ad7..4d575719 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -4,55 +4,55 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/ui";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
-  {
-    variants: {
-      variant: {
-        default: "bg-background text-foreground",
-        destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
+	"relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+	{
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const Alert = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
 >(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		role="alert"
+		className={cn(alertVariants({ variant }), className)}
+		{...props}
+	/>
 ));
 Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLHeadingElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLHeadingElement>
 >(({ className, ...props }, ref) => (
-  <h5
-    ref={ref}
-    className={cn("mb-1 leading-none font-medium tracking-tight", className)}
-    {...props}
-  />
+	<h5
+		ref={ref}
+		className={cn("mb-1 leading-none font-medium tracking-tight", className)}
+		{...props}
+	/>
 ));
 AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-sm [&_p]:leading-relaxed", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("text-sm [&_p]:leading-relaxed", className)}
+		{...props}
+	/>
 ));
 AlertDescription.displayName = "AlertDescription";
 
diff --git a/apps/web/src/components/ui/avatar.tsx b/apps/web/src/components/ui/avatar.tsx
index 10859238..8882b3d1 100644
--- a/apps/web/src/components/ui/avatar.tsx
+++ b/apps/web/src/components/ui/avatar.tsx
@@ -6,44 +6,44 @@ import { Avatar as AvatarPrimitive } from "radix-ui";
 import { cn } from "@/utils/ui";
 
 const Avatar = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
-      className,
-    )}
-    {...props}
-  />
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+			className,
+		)}
+		{...props}
+	/>
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
 
 const AvatarImage = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Image>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Image
-    ref={ref}
-    className={cn("aspect-square h-full w-full", className)}
-    {...props}
-  />
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 
 const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    className={cn(
-      "bg-muted flex h-full w-full items-center justify-center rounded-full",
-      className,
-    )}
-    {...props}
-  />
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			"bg-muted flex h-full w-full items-center justify-center rounded-full",
+			className,
+		)}
+		{...props}
+	/>
 ));
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index e1c2b556..12f92d0c 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -1,37 +1,36 @@
-import * as React from "react";
+import type * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/utils/ui";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
+	"inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default:
+					"border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
+				secondary:
+					"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive:
+					"border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 export interface BadgeProps
-  extends
-    React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+	extends React.HTMLAttributes<HTMLDivElement>,
+		VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  );
+	return (
+		<div className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
 }
 
 export { Badge, badgeVariants };
diff --git a/apps/web/src/components/ui/breadcrumb.tsx b/apps/web/src/components/ui/breadcrumb.tsx
index 7330deca..8076514b 100644
--- a/apps/web/src/components/ui/breadcrumb.tsx
+++ b/apps/web/src/components/ui/breadcrumb.tsx
@@ -5,111 +5,111 @@ import { ChevronRight, MoreHorizontal } from "lucide-react";
 import { cn } from "@/utils/ui";
 
 const Breadcrumb = React.forwardRef<
-  HTMLElement,
-  React.ComponentPropsWithoutRef<"nav"> & {
-    separator?: React.ReactNode;
-  }
+	HTMLElement,
+	React.ComponentPropsWithoutRef<"nav"> & {
+		separator?: React.ReactNode;
+	}
 >(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
 Breadcrumb.displayName = "Breadcrumb";
 
 const BreadcrumbList = React.forwardRef<
-  HTMLOListElement,
-  React.ComponentPropsWithoutRef<"ol">
+	HTMLOListElement,
+	React.ComponentPropsWithoutRef<"ol">
 >(({ className, ...props }, ref) => (
-  <ol
-    ref={ref}
-    className={cn(
-      "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
-      className,
-    )}
-    {...props}
-  />
+	<ol
+		ref={ref}
+		className={cn(
+			"text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+			className,
+		)}
+		{...props}
+	/>
 ));
 BreadcrumbList.displayName = "BreadcrumbList";
 
 const BreadcrumbItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentPropsWithoutRef<"li">
+	HTMLLIElement,
+	React.ComponentPropsWithoutRef<"li">
 >(({ className, ...props }, ref) => (
-  <li
-    ref={ref}
-    className={cn("inline-flex items-center gap-1.5", className)}
-    {...props}
-  />
+	<li
+		ref={ref}
+		className={cn("inline-flex items-center gap-1.5", className)}
+		{...props}
+	/>
 ));
 BreadcrumbItem.displayName = "BreadcrumbItem";
 
 const BreadcrumbLink = React.forwardRef<
-  HTMLAnchorElement,
-  React.ComponentPropsWithoutRef<"a"> & {
-    asChild?: boolean;
-  }
+	HTMLAnchorElement,
+	React.ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
 >(({ asChild, className, ...props }, ref) => {
-  const Comp = asChild ? SlotPrimitive.Slot : "a";
+	const Comp = asChild ? SlotPrimitive.Slot : "a";
 
-  return (
-    <Comp
-      ref={ref}
-      className={cn("hover:text-foreground transition-colors", className)}
-      {...props}
-    />
-  );
+	return (
+		<Comp
+			ref={ref}
+			className={cn("hover:text-foreground transition-colors", className)}
+			{...props}
+		/>
+	);
 });
 BreadcrumbLink.displayName = "BreadcrumbLink";
 
 const BreadcrumbPage = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
+	HTMLSpanElement,
+	React.ComponentPropsWithoutRef<"span">
 >(({ className, ...props }, ref) => (
-  <span
-    ref={ref}
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    className={cn("text-foreground font-normal", className)}
-    {...props}
-  />
+	<span
+		ref={ref}
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn("text-foreground font-normal", className)}
+		{...props}
+	/>
 ));
 BreadcrumbPage.displayName = "BreadcrumbPage";
 
 const BreadcrumbSeparator = ({
-  children,
-  className,
-  ...props
+	children,
+	className,
+	...props
 }: React.ComponentProps<"li">) => (
-  <li
-    role="presentation"
-    aria-hidden="true"
-    className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
-    {...props}
-  >
-    {children ?? <ChevronRight />}
-  </li>
+	<li
+		role="presentation"
+		aria-hidden="true"
+		className={cn("[&>svg]:h-3.5 [&>svg]:w-3.5", className)}
+		{...props}
+	>
+		{children ?? <ChevronRight />}
+	</li>
 );
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 const BreadcrumbEllipsis = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"span">) => (
-  <span
-    role="presentation"
-    aria-hidden="true"
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More</span>
-  </span>
+	<span
+		role="presentation"
+		aria-hidden="true"
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More</span>
+	</span>
 );
 BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
 
 export {
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
 };
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 7656ad84..4fed38cd 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -5,59 +5,58 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/ui";
 
 const buttonVariants = cva(
-  "inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-foreground text-background shadow-sm hover:bg-foreground/90",
-        foreground:
-          "bg-background text-foreground shadow-sm hover:bg-background/80",
-        primary:
-          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
-        "primary-gradient":
-          "bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/80",
-        outline:
-          "border border-input bg-transparent shadow-xs transition-colors hover:bg-accent",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-foreground/15 border border-input",
-        text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-full px-3 text-xs",
-        lg: "h-10 rounded-full p-5",
-        icon: "h-7 w-7",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
+	"inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default:
+					"bg-foreground text-background shadow-sm hover:bg-foreground/90",
+				foreground:
+					"bg-background text-foreground shadow-sm hover:bg-background/80",
+				primary:
+					"bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+				"primary-gradient":
+					"bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity",
+				destructive:
+					"bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/80",
+				outline:
+					"border border-input bg-transparent shadow-xs transition-colors hover:bg-accent",
+				secondary:
+					"bg-secondary text-secondary-foreground shadow-xs hover:bg-foreground/15 border border-input",
+				text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default: "h-9 px-4 py-2",
+				sm: "h-8 rounded-full px-3 text-xs",
+				lg: "h-10 rounded-full p-5",
+				icon: "h-7 w-7",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
 );
 
 export interface ButtonProps
-  extends
-    React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+		VariantProps<typeof buttonVariants> {
+	asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? SlotPrimitive.Slot : "button";
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
+	({ className, variant, size, asChild = false, ...props }, ref) => {
+		const Comp = asChild ? SlotPrimitive.Slot : "button";
+		return (
+			<Comp
+				className={cn(buttonVariants({ variant, size, className }))}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
 );
 Button.displayName = "Button";
 
diff --git a/apps/web/src/components/ui/calendar.tsx b/apps/web/src/components/ui/calendar.tsx
index e20cdacd..4df52db7 100644
--- a/apps/web/src/components/ui/calendar.tsx
+++ b/apps/web/src/components/ui/calendar.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import * as React from "react";
+import type * as React from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { DayPicker } from "react-day-picker";
 
@@ -10,62 +10,62 @@ import { buttonVariants } from "./button";
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 
 function Calendar({
-  className,
-  classNames,
-  showOutsideDays = true,
-  ...props
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
 }: CalendarProps) {
-  return (
-    <DayPicker
-      showOutsideDays={showOutsideDays}
-      className={cn("p-3", className)}
-      classNames={{
-        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
-        month: "space-y-4",
-        caption: "flex justify-center pt-1 relative items-center",
-        caption_label: "text-sm font-medium",
-        nav: "space-x-1 flex items-center",
-        nav_button: cn(
-          buttonVariants({ variant: "outline" }),
-          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
-        ),
-        nav_button_previous: "absolute left-1",
-        nav_button_next: "absolute right-1",
-        table: "w-full border-collapse space-y-1",
-        head_row: "flex",
-        head_cell:
-          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        row: "flex w-full mt-2",
-        cell: cn(
-          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
-          props.mode === "range"
-            ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
-            : "[&:has([aria-selected])]:rounded-md",
-        ),
-        day: cn(
-          buttonVariants({ variant: "text" }),
-          "h-8 w-8 p-0 font-normal aria-selected:opacity-100",
-        ),
-        day_range_start: "day-range-start",
-        day_range_end: "day-range-end",
-        day_selected:
-          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        day_today: "bg-accent text-accent-foreground",
-        day_outside:
-          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
-        day_disabled: "text-muted-foreground opacity-50",
-        day_range_middle:
-          "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        day_hidden: "invisible",
-        ...classNames,
-      }}
-      components={{
-        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
-        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
-      }}
-      {...props}
-    />
-  );
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				month: "space-y-4",
+				caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center",
+				nav_button: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-y-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+					props.mode === "range"
+						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+						: "[&:has([aria-selected])]:rounded-md",
+				),
+				day: cn(
+					buttonVariants({ variant: "text" }),
+					"h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_start: "day-range-start",
+				day_range_end: "day-range-end",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+				IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+			}}
+			{...props}
+		/>
+	);
 }
 Calendar.displayName = "Calendar";
 
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
index ed18d83d..c3fc45f0 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -3,78 +3,78 @@ import * as React from "react";
 import { cn } from "@/utils/ui";
 
 const Card = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("bg-card text-card-foreground rounded-2xl border", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("bg-card text-card-foreground rounded-2xl border", className)}
+		{...props}
+	/>
 ));
 Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-col space-y-1.5 p-6", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
 ));
 CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("leading-none font-semibold tracking-tight", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("leading-none font-semibold tracking-tight", className)}
+		{...props}
+	/>
 ));
 CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
 ));
 CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex items-center p-6 pt-0", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("flex items-center p-6 pt-0", className)}
+		{...props}
+	/>
 ));
 CardFooter.displayName = "CardFooter";
 
 export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  CardContent,
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
 };
diff --git a/apps/web/src/components/ui/carousel.tsx b/apps/web/src/components/ui/carousel.tsx
index d5fc8dc5..fa50c522 100644
--- a/apps/web/src/components/ui/carousel.tsx
+++ b/apps/web/src/components/ui/carousel.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import * as React from "react";
 import useEmblaCarousel, {
-  type UseEmblaCarouselType,
+	type UseEmblaCarouselType,
 } from "embla-carousel-react";
 import { ArrowLeft, ArrowRight } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "@/utils/ui";
 import { Button } from "./button";
@@ -15,248 +15,248 @@ type CarouselOptions = UseCarouselParameters[0];
 type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions;
-  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void;
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: "horizontal" | "vertical";
+	setApi?: (api: CarouselApi) => void;
 };
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
 } & CarouselProps;
 
 const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext);
+	const context = React.useContext(CarouselContext);
 
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />");
-  }
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
 
-  return context;
+	return context;
 }
 
 const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & CarouselProps
 >(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins,
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
+	(
+		{
+			orientation = "horizontal",
+			opts,
+			setApi,
+			plugins,
+			className,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const [carouselRef, api] = useEmblaCarousel(
+			{
+				...opts,
+				axis: orientation === "horizontal" ? "x" : "y",
+			},
+			plugins,
+		);
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+		const [canScrollNext, setCanScrollNext] = React.useState(false);
 
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return;
-      }
+		const onSelect = React.useCallback((api: CarouselApi) => {
+			if (!api) {
+				return;
+			}
 
-      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext());
-    }, []);
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		}, []);
 
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev();
-    }, [api]);
+		const scrollPrev = React.useCallback(() => {
+			api?.scrollPrev();
+		}, [api]);
 
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext();
-    }, [api]);
+		const scrollNext = React.useCallback(() => {
+			api?.scrollNext();
+		}, [api]);
 
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault();
-          scrollPrev();
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault();
-          scrollNext();
-        }
-      },
-      [scrollPrev, scrollNext],
-    );
+		const handleKeyDown = React.useCallback(
+			(event: React.KeyboardEvent<HTMLDivElement>) => {
+				if (event.key === "ArrowLeft") {
+					event.preventDefault();
+					scrollPrev();
+				} else if (event.key === "ArrowRight") {
+					event.preventDefault();
+					scrollNext();
+				}
+			},
+			[scrollPrev, scrollNext],
+		);
 
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return;
-      }
+		React.useEffect(() => {
+			if (!api || !setApi) {
+				return;
+			}
 
-      setApi(api);
-    }, [api, setApi]);
+			setApi(api);
+		}, [api, setApi]);
 
-    React.useEffect(() => {
-      if (!api) {
-        return;
-      }
+		React.useEffect(() => {
+			if (!api) {
+				return;
+			}
 
-      onSelect(api);
-      api.on("reInit", onSelect);
-      api.on("select", onSelect);
+			onSelect(api);
+			api.on("reInit", onSelect);
+			api.on("select", onSelect);
 
-      return () => {
-        api?.off("select", onSelect);
-      };
-    }, [api, onSelect]);
+			return () => {
+				api?.off("select", onSelect);
+			};
+		}, [api, onSelect]);
 
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
+		return (
+			<CarouselContext.Provider
+				value={{
+					carouselRef,
+					api,
+					opts,
+					orientation:
+						orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+					scrollPrev,
+					scrollNext,
+					canScrollPrev,
+					canScrollNext,
+				}}
+			>
+				<div
+					ref={ref}
+					onKeyDownCapture={handleKeyDown}
+					className={cn("relative", className)}
+					role="region"
+					aria-roledescription="carousel"
+					{...props}
+				>
+					{children}
+				</div>
+			</CarouselContext.Provider>
+		);
+	},
 );
 Carousel.displayName = "Carousel";
 
 const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
+	const { carouselRef, orientation } = useCarousel();
 
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
+	return (
+		<div ref={carouselRef} className="overflow-hidden">
+			<div
+				ref={ref}
+				className={cn(
+					"flex",
+					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
 });
 CarouselContent.displayName = "CarouselContent";
 
 const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
+	const { orientation } = useCarousel();
 
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<div
+			ref={ref}
+			role="group"
+			aria-roledescription="slide"
+			className={cn(
+				"min-w-0 shrink-0 grow-0 basis-full",
+				orientation === "horizontal" ? "pl-4" : "pt-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
 });
 CarouselItem.displayName = "CarouselItem";
 
 const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  );
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "top-1/2 -left-12 -translate-y-1/2"
+					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeft className="h-4 w-4" />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
 });
 CarouselPrevious.displayName = "CarouselPrevious";
 
 const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
 
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  );
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "top-1/2 -right-12 -translate-y-1/2"
+					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRight className="h-4 w-4" />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
 });
 CarouselNext.displayName = "CarouselNext";
 
 export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
+	type CarouselApi,
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselPrevious,
+	CarouselNext,
 };
diff --git a/apps/web/src/components/ui/chart.tsx b/apps/web/src/components/ui/chart.tsx
index 92e3924c..645be293 100644
--- a/apps/web/src/components/ui/chart.tsx
+++ b/apps/web/src/components/ui/chart.tsx
@@ -3,9 +3,9 @@
 import * as React from "react";
 import * as RechartsPrimitive from "recharts";
 import {
-  NameType,
-  Payload,
-  ValueType,
+	NameType,
+	Payload,
+	ValueType,
 } from "recharts/types/component/DefaultTooltipContent";
 
 import { cn } from "@/utils/ui";
@@ -14,357 +14,357 @@ import { cn } from "@/utils/ui";
 const THEMES = { light: "", dark: ".dark" } as const;
 
 export type ChartConfig = {
-  [k in string]: {
-    label?: React.ReactNode;
-    icon?: React.ComponentType;
-  } & (
-    | { color?: string; theme?: never }
-    | { color?: never; theme: Record<keyof typeof THEMES, string> }
-  );
+	[k in string]: {
+		label?: React.ReactNode;
+		icon?: React.ComponentType;
+	} & (
+		| { color?: string; theme?: never }
+		| { color?: never; theme: Record<keyof typeof THEMES, string> }
+	);
 };
 
 type ChartContextProps = {
-  config: ChartConfig;
+	config: ChartConfig;
 };
 
 const ChartContext = React.createContext<ChartContextProps | null>(null);
 
 function useChart() {
-  const context = React.useContext(ChartContext);
+	const context = React.useContext(ChartContext);
 
-  if (!context) {
-    throw new Error("useChart must be used within a <ChartContainer />");
-  }
+	if (!context) {
+		throw new Error("useChart must be used within a <ChartContainer />");
+	}
 
-  return context;
+	return context;
 }
 
 const ChartContainer = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> & {
-    config: ChartConfig;
-    children: React.ComponentProps<
-      typeof RechartsPrimitive.ResponsiveContainer
-    >["children"];
-  }
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		config: ChartConfig;
+		children: React.ComponentProps<
+			typeof RechartsPrimitive.ResponsiveContainer
+		>["children"];
+	}
 >(({ id, className, children, config, ...props }, ref) => {
-  const uniqueId = React.useId();
-  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	const uniqueId = React.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
 
-  return (
-    <ChartContext.Provider value={{ config }}>
-      <div
-        data-chart={chartId}
-        ref={ref}
-        className={cn(
-          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
-          className,
-        )}
-        {...props}
-      >
-        <ChartStyle id={chartId} config={config} />
-        <RechartsPrimitive.ResponsiveContainer>
-          {children}
-        </RechartsPrimitive.ResponsiveContainer>
-      </div>
-    </ChartContext.Provider>
-  );
+	return (
+		<ChartContext.Provider value={{ config }}>
+			<div
+				data-chart={chartId}
+				ref={ref}
+				className={cn(
+					"[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
+					className,
+				)}
+				{...props}
+			>
+				<ChartStyle id={chartId} config={config} />
+				<RechartsPrimitive.ResponsiveContainer>
+					{children}
+				</RechartsPrimitive.ResponsiveContainer>
+			</div>
+		</ChartContext.Provider>
+	);
 });
 ChartContainer.displayName = "Chart";
 
 const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
-  const colorConfig = Object.entries(config).filter(
-    ([_, config]) => config.theme || config.color,
-  );
+	const colorConfig = Object.entries(config).filter(
+		([_, config]) => config.theme || config.color,
+	);
 
-  if (!colorConfig.length) {
-    return null;
-  }
+	if (!colorConfig.length) {
+		return null;
+	}
 
-  return (
-    <style
-      dangerouslySetInnerHTML={{
-        __html: Object.entries(THEMES)
-          .map(
-            ([theme, prefix]) => `
+	return (
+		<style
+			dangerouslySetInnerHTML={{
+				__html: Object.entries(THEMES)
+					.map(
+						([theme, prefix]) => `
 ${prefix} [data-chart=${id}] {
 ${colorConfig
-  .map(([key, itemConfig]) => {
-    const color =
-      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
-      itemConfig.color;
-    return color ? `  --color-${key}: ${color};` : null;
-  })
-  .join("\n")}
+	.map(([key, itemConfig]) => {
+		const color =
+			itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+			itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
 }
 `,
-          )
-          .join("\n"),
-      }}
-    />
-  );
+					)
+					.join("\n"),
+			}}
+		/>
+	);
 };
 
 const ChartTooltip = RechartsPrimitive.Tooltip;
 
 const ChartTooltipContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
-    React.ComponentProps<"div"> & {
-      hideLabel?: boolean;
-      hideIndicator?: boolean;
-      indicator?: "line" | "dot" | "dashed";
-      nameKey?: string;
-      labelKey?: string;
-    }
+	HTMLDivElement,
+	React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+		React.ComponentProps<"div"> & {
+			hideLabel?: boolean;
+			hideIndicator?: boolean;
+			indicator?: "line" | "dot" | "dashed";
+			nameKey?: string;
+			labelKey?: string;
+		}
 >(
-  (
-    {
-      active,
-      payload,
-      className,
-      indicator = "dot",
-      hideLabel = false,
-      hideIndicator = false,
-      label,
-      labelFormatter,
-      labelClassName,
-      formatter,
-      color,
-      nameKey,
-      labelKey,
-    },
-    ref,
-  ) => {
-    const { config } = useChart();
+	(
+		{
+			active,
+			payload,
+			className,
+			indicator = "dot",
+			hideLabel = false,
+			hideIndicator = false,
+			label,
+			labelFormatter,
+			labelClassName,
+			formatter,
+			color,
+			nameKey,
+			labelKey,
+		},
+		ref,
+	) => {
+		const { config } = useChart();
 
-    const tooltipLabel = React.useMemo(() => {
-      if (hideLabel || !payload?.length) {
-        return null;
-      }
+		const tooltipLabel = React.useMemo(() => {
+			if (hideLabel || !payload?.length) {
+				return null;
+			}
 
-      const [item] = payload;
-      const key = `${labelKey || item.dataKey || item.name || "value"}`;
-      const itemConfig = getPayloadConfigFromPayload(config, item, key);
-      const value =
-        !labelKey && typeof label === "string"
-          ? config[label as keyof typeof config]?.label || label
-          : itemConfig?.label;
+			const [item] = payload;
+			const key = `${labelKey || item.dataKey || item.name || "value"}`;
+			const itemConfig = getPayloadConfigFromPayload(config, item, key);
+			const value =
+				!labelKey && typeof label === "string"
+					? config[label as keyof typeof config]?.label || label
+					: itemConfig?.label;
 
-      if (labelFormatter) {
-        return (
-          <div className={cn("font-medium", labelClassName)}>
-            {labelFormatter(value, payload)}
-          </div>
-        );
-      }
+			if (labelFormatter) {
+				return (
+					<div className={cn("font-medium", labelClassName)}>
+						{labelFormatter(value, payload)}
+					</div>
+				);
+			}
 
-      if (!value) {
-        return null;
-      }
+			if (!value) {
+				return null;
+			}
 
-      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
-    }, [
-      label,
-      labelFormatter,
-      payload,
-      hideLabel,
-      labelClassName,
-      config,
-      labelKey,
-    ]);
+			return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+		}, [
+			label,
+			labelFormatter,
+			payload,
+			hideLabel,
+			labelClassName,
+			config,
+			labelKey,
+		]);
 
-    if (!active || !payload?.length) {
-      return null;
-    }
+		if (!active || !payload?.length) {
+			return null;
+		}
 
-    const nestLabel = payload.length === 1 && indicator !== "dot";
+		const nestLabel = payload.length === 1 && indicator !== "dot";
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
-          className,
-        )}
-      >
-        {nestLabel ? null : tooltipLabel}
-        <div className="grid gap-1.5">
-          {payload.map((item, index) => {
-            const key = `${nameKey || item.name || item.dataKey || "value"}`;
-            const itemConfig = getPayloadConfigFromPayload(config, item, key);
-            const indicatorColor = color || item.payload.fill || item.color;
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+					className,
+				)}
+			>
+				{nestLabel ? null : tooltipLabel}
+				<div className="grid gap-1.5">
+					{payload.map((item, index) => {
+						const key = `${nameKey || item.name || item.dataKey || "value"}`;
+						const itemConfig = getPayloadConfigFromPayload(config, item, key);
+						const indicatorColor = color || item.payload.fill || item.color;
 
-            return (
-              <div
-                key={item.dataKey}
-                className={cn(
-                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
-                  indicator === "dot" && "items-center",
-                )}
-              >
-                {formatter && item?.value !== undefined && item.name ? (
-                  formatter(item.value, item.name, item, index, item.payload)
-                ) : (
-                  <>
-                    {itemConfig?.icon ? (
-                      <itemConfig.icon />
-                    ) : (
-                      !hideIndicator && (
-                        <div
-                          className={cn(
-                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
-                            {
-                              "h-2.5 w-2.5": indicator === "dot",
-                              "w-1": indicator === "line",
-                              "w-0 border-[1.5px] border-dashed bg-transparent":
-                                indicator === "dashed",
-                              "my-0.5": nestLabel && indicator === "dashed",
-                            },
-                          )}
-                          style={
-                            {
-                              "--color-bg": indicatorColor,
-                              "--color-border": indicatorColor,
-                            } as React.CSSProperties
-                          }
-                        />
-                      )
-                    )}
-                    <div
-                      className={cn(
-                        "flex flex-1 justify-between leading-none",
-                        nestLabel ? "items-end" : "items-center",
-                      )}
-                    >
-                      <div className="grid gap-1.5">
-                        {nestLabel ? tooltipLabel : null}
-                        <span className="text-muted-foreground">
-                          {itemConfig?.label || item.name}
-                        </span>
-                      </div>
-                      {item.value && (
-                        <span className="text-foreground font-mono font-medium tabular-nums">
-                          {item.value.toLocaleString()}
-                        </span>
-                      )}
-                    </div>
-                  </>
-                )}
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    );
-  },
+						return (
+							<div
+								key={item.dataKey}
+								className={cn(
+									"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
+									indicator === "dot" && "items-center",
+								)}
+							>
+								{formatter && item?.value !== undefined && item.name ? (
+									formatter(item.value, item.name, item, index, item.payload)
+								) : (
+									<>
+										{itemConfig?.icon ? (
+											<itemConfig.icon />
+										) : (
+											!hideIndicator && (
+												<div
+													className={cn(
+														"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
+														{
+															"h-2.5 w-2.5": indicator === "dot",
+															"w-1": indicator === "line",
+															"w-0 border-[1.5px] border-dashed bg-transparent":
+																indicator === "dashed",
+															"my-0.5": nestLabel && indicator === "dashed",
+														},
+													)}
+													style={
+														{
+															"--color-bg": indicatorColor,
+															"--color-border": indicatorColor,
+														} as React.CSSProperties
+													}
+												/>
+											)
+										)}
+										<div
+											className={cn(
+												"flex flex-1 justify-between leading-none",
+												nestLabel ? "items-end" : "items-center",
+											)}
+										>
+											<div className="grid gap-1.5">
+												{nestLabel ? tooltipLabel : null}
+												<span className="text-muted-foreground">
+													{itemConfig?.label || item.name}
+												</span>
+											</div>
+											{item.value && (
+												<span className="text-foreground font-mono font-medium tabular-nums">
+													{item.value.toLocaleString()}
+												</span>
+											)}
+										</div>
+									</>
+								)}
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		);
+	},
 );
 ChartTooltipContent.displayName = "ChartTooltip";
 
 const ChartLegend = RechartsPrimitive.Legend;
 
 const ChartLegendContent = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentProps<"div"> &
-    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
-      hideIcon?: boolean;
-      nameKey?: string;
-    }
+	HTMLDivElement,
+	React.ComponentProps<"div"> &
+		Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+			hideIcon?: boolean;
+			nameKey?: string;
+		}
 >(
-  (
-    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
-    ref,
-  ) => {
-    const { config } = useChart();
+	(
+		{ className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+		ref,
+	) => {
+		const { config } = useChart();
 
-    if (!payload?.length) {
-      return null;
-    }
+		if (!payload?.length) {
+			return null;
+		}
 
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "flex items-center justify-center gap-4",
-          verticalAlign === "top" ? "pb-3" : "pt-3",
-          className,
-        )}
-      >
-        {payload.map((item) => {
-          const key = `${nameKey || item.dataKey || "value"}`;
-          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"flex items-center justify-center gap-4",
+					verticalAlign === "top" ? "pb-3" : "pt-3",
+					className,
+				)}
+			>
+				{payload.map((item) => {
+					const key = `${nameKey || item.dataKey || "value"}`;
+					const itemConfig = getPayloadConfigFromPayload(config, item, key);
 
-          return (
-            <div
-              key={item.value}
-              className={cn(
-                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
-              )}
-            >
-              {itemConfig?.icon && !hideIcon ? (
-                <itemConfig.icon />
-              ) : (
-                <div
-                  className="h-2 w-2 shrink-0 rounded-[2px]"
-                  style={{
-                    backgroundColor: item.color,
-                  }}
-                />
-              )}
-              {itemConfig?.label}
-            </div>
-          );
-        })}
-      </div>
-    );
-  },
+					return (
+						<div
+							key={item.value}
+							className={cn(
+								"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3",
+							)}
+						>
+							{itemConfig?.icon && !hideIcon ? (
+								<itemConfig.icon />
+							) : (
+								<div
+									className="h-2 w-2 shrink-0 rounded-[2px]"
+									style={{
+										backgroundColor: item.color,
+									}}
+								/>
+							)}
+							{itemConfig?.label}
+						</div>
+					);
+				})}
+			</div>
+		);
+	},
 );
 ChartLegendContent.displayName = "ChartLegend";
 
 // Helper to extract item config from a payload.
 function getPayloadConfigFromPayload(
-  config: ChartConfig,
-  payload: unknown,
-  key: string,
+	config: ChartConfig,
+	payload: unknown,
+	key: string,
 ) {
-  if (typeof payload !== "object" || payload === null) {
-    return;
-  }
+	if (typeof payload !== "object" || payload === null) {
+		return;
+	}
 
-  const payloadPayload =
-    "payload" in payload &&
-    typeof payload.payload === "object" &&
-    payload.payload !== null
-      ? payload.payload
-      : undefined;
+	const payloadPayload =
+		"payload" in payload &&
+		typeof payload.payload === "object" &&
+		payload.payload !== null
+			? payload.payload
+			: undefined;
 
-  let configLabelKey: string = key;
+	let configLabelKey: string = key;
 
-  if (
-    key in payload &&
-    typeof payload[key as keyof typeof payload] === "string"
-  ) {
-    configLabelKey = payload[key as keyof typeof payload] as string;
-  } else if (
-    payloadPayload &&
-    key in payloadPayload &&
-    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
-  ) {
-    configLabelKey = payloadPayload[
-      key as keyof typeof payloadPayload
-    ] as string;
-  }
+	if (
+		key in payload &&
+		typeof payload[key as keyof typeof payload] === "string"
+	) {
+		configLabelKey = payload[key as keyof typeof payload] as string;
+	} else if (
+		payloadPayload &&
+		key in payloadPayload &&
+		typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+	) {
+		configLabelKey = payloadPayload[
+			key as keyof typeof payloadPayload
+		] as string;
+	}
 
-  return configLabelKey in config
-    ? config[configLabelKey]
-    : config[key as keyof typeof config];
+	return configLabelKey in config
+		? config[configLabelKey]
+		: config[key as keyof typeof config];
 }
 
 export {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  ChartLegend,
-  ChartLegendContent,
-  ChartStyle,
+	ChartContainer,
+	ChartTooltip,
+	ChartTooltipContent,
+	ChartLegend,
+	ChartLegendContent,
+	ChartStyle,
 };
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index e91b672f..57e2ec21 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -7,23 +7,23 @@ import { Check } from "lucide-react";
 import { cn } from "@/utils/ui";
 
 const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
+	React.ElementRef<typeof CheckboxPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    className={cn(
-      "peer border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator
-      className={cn("flex items-center justify-center text-current")}
-    >
-      <Check className="h-4 w-4" />
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
+	<CheckboxPrimitive.Root
+		ref={ref}
+		className={cn(
+			"peer border-primary focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground h-4 w-4 shrink-0 rounded-sm border shadow-sm focus-visible:ring-1 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<CheckboxPrimitive.Indicator
+			className={cn("flex items-center justify-center text-current")}
+		>
+			<Check className="h-4 w-4" />
+		</CheckboxPrimitive.Indicator>
+	</CheckboxPrimitive.Root>
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/color-picker.tsx b/apps/web/src/components/ui/color-picker.tsx
index 98b214f5..74341386 100644
--- a/apps/web/src/components/ui/color-picker.tsx
+++ b/apps/web/src/components/ui/color-picker.tsx
@@ -1,336 +1,343 @@
-import * as React from "react";
+import { forwardRef, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { cn } from "@/utils/ui";
 import { Input } from "./input";
 
 interface ColorPickerProps {
-  value?: string;
-  onChange?: (value: string) => void;
-  className?: string;
-  containerRef?: React.RefObject<HTMLDivElement>;
+	value?: string;
+	onChange?: (value: string) => void;
+	className?: string;
+	containerRef?: React.RefObject<HTMLDivElement>;
 }
 
 const hexToHsv = (hex: string) => {
-  const r = parseInt(hex.slice(0, 2), 16) / 255;
-  const g = parseInt(hex.slice(2, 4), 16) / 255;
-  const b = parseInt(hex.slice(4, 6), 16) / 255;
+	const r = parseInt(hex.slice(0, 2), 16) / 255;
+	const g = parseInt(hex.slice(2, 4), 16) / 255;
+	const b = parseInt(hex.slice(4, 6), 16) / 255;
 
-  const max = Math.max(r, g, b);
-  const min = Math.min(r, g, b);
-  const diff = max - min;
+	const max = Math.max(r, g, b);
+	const min = Math.min(r, g, b);
+	const diff = max - min;
 
-  let h = 0;
-  let s = max === 0 ? 0 : diff / max;
-  let v = max;
+	let h = 0;
+	const s = max === 0 ? 0 : diff / max;
+	const v = max;
 
-  if (diff !== 0) {
-    switch (max) {
-      case r:
-        h = ((g - b) / diff) % 6;
-        break;
-      case g:
-        h = (b - r) / diff + 2;
-        break;
-      case b:
-        h = (r - g) / diff + 4;
-        break;
-    }
-  }
+	if (diff !== 0) {
+		switch (max) {
+			case r:
+				h = ((g - b) / diff) % 6;
+				break;
+			case g:
+				h = (b - r) / diff + 2;
+				break;
+			case b:
+				h = (r - g) / diff + 4;
+				break;
+		}
+	}
 
-  h = (h * 60 + 360) % 360;
-  if (isNaN(h)) h = 0;
+	h = (h * 60 + 360) % 360;
+	if (Number.isNaN(h)) h = 0;
 
-  return [h, s, v];
+	return [h, s, v];
 };
 
 const hsvToHex = (h: number, s: number, v: number) => {
-  const c = v * s;
-  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
-  const m = v - c;
+	const c = v * s;
+	const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+	const m = v - c;
 
-  let r = 0,
-    g = 0,
-    b = 0;
+	let r = 0,
+		g = 0,
+		b = 0;
 
-  if (h >= 0 && h < 60) {
-    r = c;
-    g = x;
-    b = 0;
-  } else if (h >= 60 && h < 120) {
-    r = x;
-    g = c;
-    b = 0;
-  } else if (h >= 120 && h < 180) {
-    r = 0;
-    g = c;
-    b = x;
-  } else if (h >= 180 && h < 240) {
-    r = 0;
-    g = x;
-    b = c;
-  } else if (h >= 240 && h < 300) {
-    r = x;
-    g = 0;
-    b = c;
-  } else if (h >= 300 && h < 360) {
-    r = c;
-    g = 0;
-    b = x;
-  }
+	if (h >= 0 && h < 60) {
+		r = c;
+		g = x;
+		b = 0;
+	} else if (h >= 60 && h < 120) {
+		r = x;
+		g = c;
+		b = 0;
+	} else if (h >= 120 && h < 180) {
+		r = 0;
+		g = c;
+		b = x;
+	} else if (h >= 180 && h < 240) {
+		r = 0;
+		g = x;
+		b = c;
+	} else if (h >= 240 && h < 300) {
+		r = x;
+		g = 0;
+		b = c;
+	} else if (h >= 300 && h < 360) {
+		r = c;
+		g = 0;
+		b = x;
+	}
 
-  r = Math.round((r + m) * 255);
-  g = Math.round((g + m) * 255);
-  b = Math.round((b + m) * 255);
+	r = Math.round((r + m) * 255);
+	g = Math.round((g + m) * 255);
+	b = Math.round((b + m) * 255);
 
-  return [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
+	return [r, g, b].map((x) => x.toString(16).padStart(2, "0")).join("");
 };
 
-const ColorPicker = React.forwardRef<HTMLDivElement, ColorPickerProps>(
-  ({ className, value = "FFFFFF", onChange, containerRef, ...props }, ref) => {
-    const [isOpen, setIsOpen] = React.useState(false);
-    const [isDragging, setIsDragging] = React.useState<
-      "saturation" | "hue" | null
-    >(null);
-    const [pickerPosition, setPickerPosition] = React.useState({
-      right: 0,
-      bottom: 0,
-    });
-    const [internalHue, setInternalHue] = React.useState(0);
-    const [inputValue, setInputValue] = React.useState(value);
+const ColorPicker = forwardRef<HTMLDivElement, ColorPickerProps>(
+	({ className, value = "FFFFFF", onChange, containerRef, ...props }, ref) => {
+		const [isOpen, setIsOpen] = useState(false);
+		const [isDragging, setIsDragging] = useState<"saturation" | "hue" | null>(
+			null,
+		);
+		const [pickerPosition, setPickerPosition] = useState({
+			right: 0,
+			bottom: 0,
+		});
+		const [internalHue, setInternalHue] = useState(0);
+		const [inputValue, setInputValue] = useState(value);
 
-    const pickerRef = React.useRef<HTMLDivElement>(null);
-    const saturationRef = React.useRef<HTMLDivElement>(null);
-    const hueRef = React.useRef<HTMLDivElement>(null);
-    const triggerRef = React.useRef<HTMLDivElement>(null);
+		const pickerRef = useRef<HTMLDivElement>(null);
+		const saturationRef = useRef<HTMLButtonElement>(null);
+		const hueRef = useRef<HTMLButtonElement>(null);
+		const triggerRef = useRef<HTMLButtonElement>(null);
 
-    const [h, s, v] = hexToHsv(value);
-    const displayHue = s > 0 ? h : internalHue;
+		const [h, s, v] = hexToHsv(value);
+		const displayHue = s > 0 ? h : internalHue;
 
-    React.useEffect(() => {
-      setInputValue(value);
-    }, [value]);
+		useEffect(() => {
+			setInputValue(value);
+		}, [value]);
 
-    React.useEffect(() => {
-      const handleClickOutside = (event: MouseEvent) => {
-        if (
-          pickerRef.current &&
-          !pickerRef.current.contains(event.target as Node)
-        ) {
-          setIsOpen(false);
-        }
-      };
+		useEffect(() => {
+			const handleClickOutside = (event: MouseEvent) => {
+				if (
+					pickerRef.current &&
+					!pickerRef.current.contains(event.target as Node)
+				) {
+					setIsOpen(false);
+				}
+			};
 
-      if (isOpen) {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () =>
-          document.removeEventListener("mousedown", handleClickOutside);
-      }
-    }, [isOpen]);
+			if (isOpen) {
+				document.addEventListener("mousedown", handleClickOutside);
+				return () =>
+					document.removeEventListener("mousedown", handleClickOutside);
+			}
+		}, [isOpen]);
 
-    React.useEffect(() => {
-      const handleMouseMove = (e: MouseEvent) => {
-        if (!isDragging) return;
+		useEffect(() => {
+			const handleMouseMove = (e: MouseEvent) => {
+				if (!isDragging) return;
 
-        if (isDragging === "saturation" && saturationRef.current) {
-          const rect = saturationRef.current.getBoundingClientRect();
-          const x = Math.max(
-            0,
-            Math.min(1, (e.clientX - rect.left) / rect.width),
-          );
-          const y = Math.max(
-            0,
-            Math.min(1, (e.clientY - rect.top) / rect.height),
-          );
-          const newS = x;
-          const newV = 1 - y;
-          const newHex = hsvToHex(displayHue, newS, newV);
-          onChange?.(newHex);
-        }
+				if (isDragging === "saturation" && saturationRef.current) {
+					const rect = saturationRef.current.getBoundingClientRect();
+					const x = Math.max(
+						0,
+						Math.min(1, (e.clientX - rect.left) / rect.width),
+					);
+					const y = Math.max(
+						0,
+						Math.min(1, (e.clientY - rect.top) / rect.height),
+					);
+					const newS = x;
+					const newV = 1 - y;
+					const newHex = hsvToHex(displayHue, newS, newV);
+					onChange?.(newHex);
+				}
 
-        if (isDragging === "hue" && hueRef.current) {
-          const rect = hueRef.current.getBoundingClientRect();
-          const x = Math.max(
-            0,
-            Math.min(1, (e.clientX - rect.left) / rect.width),
-          );
-          const newH = x * 360;
-          setInternalHue(newH);
-          if (s > 0) {
-            const newHex = hsvToHex(newH, s, v);
-            onChange?.(newHex);
-          }
-        }
-      };
+				if (isDragging === "hue" && hueRef.current) {
+					const rect = hueRef.current.getBoundingClientRect();
+					const x = Math.max(
+						0,
+						Math.min(1, (e.clientX - rect.left) / rect.width),
+					);
+					const newH = x * 360;
+					setInternalHue(newH);
+					if (s > 0) {
+						const newHex = hsvToHex(newH, s, v);
+						onChange?.(newHex);
+					}
+				}
+			};
 
-      const handleMouseUp = () => {
-        setIsDragging(null);
-      };
+			const handleMouseUp = () => {
+				setIsDragging(null);
+			};
 
-      if (isDragging) {
-        document.addEventListener("mousemove", handleMouseMove);
-        document.addEventListener("mouseup", handleMouseUp);
-        return () => {
-          document.removeEventListener("mousemove", handleMouseMove);
-          document.removeEventListener("mouseup", handleMouseUp);
-        };
-      }
-    }, [isDragging, displayHue, s, v, onChange]);
+			if (isDragging) {
+				document.addEventListener("mousemove", handleMouseMove);
+				document.addEventListener("mouseup", handleMouseUp);
+				return () => {
+					document.removeEventListener("mousemove", handleMouseMove);
+					document.removeEventListener("mouseup", handleMouseUp);
+				};
+			}
+		}, [isDragging, displayHue, s, v, onChange]);
 
-    const handleSaturationMouseDown = (e: React.MouseEvent) => {
-      e.preventDefault();
-      setIsDragging("saturation");
-      const rect = saturationRef.current!.getBoundingClientRect();
-      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
-      const newS = x;
-      const newV = 1 - y;
-      const newHex = hsvToHex(displayHue, newS, newV);
-      onChange?.(newHex);
-    };
+		const handleSaturationMouseDown = (e: React.MouseEvent) => {
+			e.preventDefault();
+			const saturationElement = saturationRef.current;
+			if (!saturationElement) return;
+			setIsDragging("saturation");
+			const rect = saturationElement.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const y = Math.max(0, Math.min(1, (e.clientY - rect.top) / rect.height));
+			const newS = x;
+			const newV = 1 - y;
+			const newHex = hsvToHex(displayHue, newS, newV);
+			onChange?.(newHex);
+		};
 
-    const handleHueMouseDown = (e: React.MouseEvent) => {
-      e.preventDefault();
-      setIsDragging("hue");
-      const rect = hueRef.current!.getBoundingClientRect();
-      const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
-      const newH = x * 360;
-      setInternalHue(newH);
-      if (s > 0) {
-        const newHex = hsvToHex(newH, s, v);
-        onChange?.(newHex);
-      }
-    };
+		const handleHueMouseDown = (e: React.MouseEvent) => {
+			e.preventDefault();
+			const hueElement = hueRef.current;
+			if (!hueElement) return;
+			setIsDragging("hue");
+			const rect = hueElement.getBoundingClientRect();
+			const x = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width));
+			const newH = x * 360;
+			setInternalHue(newH);
+			if (s > 0) {
+				const newHex = hsvToHex(newH, s, v);
+				onChange?.(newHex);
+			}
+		};
 
-    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      const hex = e.target.value.replace("#", "");
-      setInputValue(hex);
-    };
+		const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+			const hex = e.target.value.replace("#", "");
+			setInputValue(hex);
+		};
 
-    const handleInputBlur = () => {
-      onChange?.(inputValue);
-    };
+		const handleInputBlur = () => {
+			onChange?.(inputValue);
+		};
 
-    const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-      if (e.key === "Enter") {
-        onChange?.(inputValue);
-        e.currentTarget.blur();
-      }
-    };
+		const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+			if (e.key === "Enter") {
+				onChange?.(inputValue);
+				e.currentTarget.blur();
+			}
+		};
 
-    const saturationStyle = {
-      background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${displayHue}, 100%, 50%))`,
-    };
+		const saturationStyle = {
+			background: `linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, hsl(${displayHue}, 100%, 50%))`,
+		};
 
-    const hueStyle = {
-      background:
-        "linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
-    };
+		const hueStyle = {
+			background:
+				"linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%)",
+		};
 
-    return (
-      <div className="relative">
-        <div
-          ref={ref}
-          className={cn(
-            "bg-panel-accent flex h-9 items-center gap-2 rounded-full px-[0.45rem]",
-            className,
-          )}
-          {...props}
-        >
-          <div
-            ref={triggerRef}
-            className="size-6 cursor-pointer rounded-full transition-all hover:ring-2 hover:ring-white/20"
-            style={{ backgroundColor: `#${value}` }}
-            onClick={() => {
-              if (!isOpen && triggerRef.current && containerRef?.current) {
-                const containerRect =
-                  containerRef.current.getBoundingClientRect();
-                setPickerPosition({
-                  right: window.innerWidth - containerRect.left - 8,
-                  bottom: window.innerHeight - containerRect.bottom,
-                });
-              }
-              setIsOpen(!isOpen);
-            }}
-          />
-          <div className="flex flex-1 items-center">
-            <Input
-              className="!border-0 bg-transparent p-0 !ring-0 !ring-offset-0"
-              containerClassName="w-full"
-              value={inputValue}
-              onChange={handleInputChange}
-              onBlur={handleInputBlur}
-              onKeyDown={handleInputKeyDown}
-            />
-          </div>
-        </div>
+		return (
+			<div className="relative">
+				<div
+					ref={ref}
+					className={cn(
+						"bg-panel-accent flex h-9 items-center gap-2 rounded-full px-[0.45rem]",
+						className,
+					)}
+					{...props}
+				>
+					<button
+						ref={triggerRef}
+						className="size-6 cursor-pointer rounded-full transition-all hover:ring-2 hover:ring-white/20"
+						style={{ backgroundColor: `#${value}` }}
+						type="button"
+						onClick={() => {
+							if (!isOpen && triggerRef.current && containerRef?.current) {
+								const containerRect =
+									containerRef.current.getBoundingClientRect();
+								setPickerPosition({
+									right: window.innerWidth - containerRect.left - 8,
+									bottom: window.innerHeight - containerRect.bottom,
+								});
+							}
+							setIsOpen(!isOpen);
+						}}
+					/>
+					<div className="flex flex-1 items-center">
+						<Input
+							className="!border-0 bg-transparent p-0 !ring-0 !ring-offset-0"
+							containerClassName="w-full"
+							value={inputValue}
+							onChange={handleInputChange}
+							onBlur={handleInputBlur}
+							onKeyDown={handleInputKeyDown}
+						/>
+					</div>
+				</div>
 
-        {isOpen &&
-          createPortal(
-            <div
-              ref={pickerRef}
-              className="bg-popover border-border fixed z-50 rounded-lg border p-4 shadow-lg select-none"
-              style={{
-                right: pickerPosition.right,
-                bottom: pickerPosition.bottom,
-              }}
-            >
-              <div
-                ref={saturationRef}
-                className="relative mb-3 h-32 w-48 cursor-crosshair"
-                style={saturationStyle}
-                onMouseDown={handleSaturationMouseDown}
-              >
-                <ColorCircle
-                  size="sm"
-                  position={{ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }}
-                  color={`#${value}`}
-                />
-              </div>
+				{isOpen &&
+					createPortal(
+						<div
+							ref={pickerRef}
+							className="bg-popover border-border fixed z-50 rounded-lg border p-4 shadow-lg select-none"
+							style={{
+								right: pickerPosition.right,
+								bottom: pickerPosition.bottom,
+							}}
+						>
+							<button
+								ref={saturationRef}
+								className="relative mb-3 h-32 w-48 cursor-crosshair appearance-none border-0 bg-transparent p-0"
+								style={saturationStyle}
+								type="button"
+								onMouseDown={handleSaturationMouseDown}
+							>
+								<ColorCircle
+									size="sm"
+									position={{ left: `${s * 100}%`, top: `${(1 - v) * 100}%` }}
+									color={`#${value}`}
+								/>
+							</button>
 
-              <div
-                ref={hueRef}
-                className="relative h-4 w-48 cursor-pointer rounded-lg"
-                style={hueStyle}
-                onMouseDown={handleHueMouseDown}
-              >
-                <ColorCircle
-                  size="md"
-                  position={{
-                    left: `${(displayHue / 360) * 100}%`,
-                    top: "50%",
-                  }}
-                  color={`#${value}`}
-                />
-              </div>
-            </div>,
-            document.body,
-          )}
-      </div>
-    );
-  },
+							<button
+								ref={hueRef}
+								className="relative h-4 w-48 cursor-pointer rounded-lg appearance-none border-0 bg-transparent p-0"
+								style={hueStyle}
+								type="button"
+								onMouseDown={handleHueMouseDown}
+							>
+								<ColorCircle
+									size="md"
+									position={{
+										left: `${(displayHue / 360) * 100}%`,
+										top: "50%",
+									}}
+									color={`#${value}`}
+								/>
+							</button>
+						</div>,
+						document.body,
+					)}
+			</div>
+		);
+	},
 );
 ColorPicker.displayName = "ColorPicker";
 
 const ColorCircle = ({
-  size,
-  position,
-  color,
+	size,
+	position,
+	color,
 }: {
-  size: "sm" | "md";
-  position: { left: string; top: string };
-  color: string;
+	size: "sm" | "md";
+	position: { left: string; top: string };
+	color: string;
 }) => (
-  <div
-    className={`pointer-events-none absolute rounded-full border-3 border-white shadow-lg ${
-      size === "sm" ? "size-3" : "size-4"
-    }`}
-    style={{
-      left: position.left,
-      top: position.top,
-      transform: "translate(-50%, -50%)",
-      backgroundColor: color,
-    }}
-  />
+	<div
+		className={`pointer-events-none absolute rounded-full border-3 border-white shadow-lg ${
+			size === "sm" ? "size-3" : "size-4"
+		}`}
+		style={{
+			left: position.left,
+			top: position.top,
+			transform: "translate(-50%, -50%)",
+			backgroundColor: color,
+		}}
+	/>
 );
 
 export { ColorPicker };
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index c5ba12c6..e4554bbf 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -1,152 +1,152 @@
 "use client";
 
 import * as React from "react";
-import { DialogProps } from "@radix-ui/react-dialog";
+import type { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 import { cn } from "@/utils/ui";
 import { Dialog, DialogContent } from "./dialog";
 
 const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+	React.ElementRef<typeof CommandPrimitive>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive
-    ref={ref}
-    className={cn(
-      "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-      className,
-    )}
-    {...props}
-  />
+	<CommandPrimitive
+		ref={ref}
+		className={cn(
+			"bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+			className,
+		)}
+		{...props}
+	/>
 ));
 Command.displayName = CommandPrimitive.displayName;
 
 const CommandDialog = ({ children, ...props }: DialogProps) => {
-  return (
-    <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-          {children}
-        </Command>
-      </DialogContent>
-    </Dialog>
-  );
+	return (
+		<Dialog {...props}>
+			<DialogContent className="overflow-hidden p-0">
+				<Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+					{children}
+				</Command>
+			</DialogContent>
+		</Dialog>
+	);
 };
 
 const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+	React.ElementRef<typeof CommandPrimitive.Input>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-    <CommandPrimitive.Input
-      ref={ref}
-      className={cn(
-        "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    />
-  </div>
+	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
+		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+		<CommandPrimitive.Input
+			ref={ref}
+			className={cn(
+				"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		/>
+	</div>
 ));
 
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+	React.ElementRef<typeof CommandPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.List
-    ref={ref}
-    className={cn("max-h-[300px] overflow-x-hidden overflow-y-auto", className)}
-    {...props}
-  />
+	<CommandPrimitive.List
+		ref={ref}
+		className={cn("max-h-[300px] overflow-x-hidden overflow-y-auto", className)}
+		{...props}
+	/>
 ));
 
 CommandList.displayName = CommandPrimitive.List.displayName;
 
 const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+	React.ElementRef<typeof CommandPrimitive.Empty>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
 >((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
+	<CommandPrimitive.Empty
+		ref={ref}
+		className="py-6 text-center text-sm"
+		{...props}
+	/>
 ));
 
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+	React.ElementRef<typeof CommandPrimitive.Group>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Group
-    ref={ref}
-    className={cn(
-      "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-      className,
-    )}
-    {...props}
-  />
+	<CommandPrimitive.Group
+		ref={ref}
+		className={cn(
+			"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+			className,
+		)}
+		{...props}
+	/>
 ));
 
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+	React.ElementRef<typeof CommandPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("bg-border -mx-1 h-px", className)}
-    {...props}
-  />
+	<CommandPrimitive.Separator
+		ref={ref}
+		className={cn("bg-border -mx-1 h-px", className)}
+		{...props}
+	/>
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+	React.ElementRef<typeof CommandPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
 >(({ className, ...props }, ref) => (
-  <CommandPrimitive.Item
-    ref={ref}
-    className={cn(
-      "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-      className,
-    )}
-    {...props}
-  />
+	<CommandPrimitive.Item
+		ref={ref}
+		className={cn(
+			"data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			className,
+		)}
+		{...props}
+	/>
 ));
 
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 const CommandShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
 };
 CommandShortcut.displayName = "CommandShortcut";
 
 export {
-  Command,
-  CommandDialog,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandShortcut,
-  CommandSeparator,
+	Command,
+	CommandDialog,
+	CommandInput,
+	CommandList,
+	CommandEmpty,
+	CommandGroup,
+	CommandItem,
+	CommandShortcut,
+	CommandSeparator,
 };
diff --git a/apps/web/src/components/ui/context-menu.tsx b/apps/web/src/components/ui/context-menu.tsx
index f4c90dd2..e0097f05 100644
--- a/apps/web/src/components/ui/context-menu.tsx
+++ b/apps/web/src/components/ui/context-menu.tsx
@@ -20,196 +20,196 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const contextMenuItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "focus:opacity-65 focus:text-accent-foreground",
-        destructive: "text-destructive focus:text-destructive/80",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
+	"relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "focus:opacity-65 focus:text-accent-foreground",
+				destructive: "text-destructive focus:text-destructive/80",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const ContextMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+	}
 >(({ className, inset, children, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      contextMenuItemVariants({ variant }),
-      "data-[state=open]:bg-accent data-[state=open]:opacity-65",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </ContextMenuPrimitive.SubTrigger>
+	<ContextMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			contextMenuItemVariants({ variant }),
+			"data-[state=open]:bg-accent data-[state=open]:opacity-65",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto" />
+	</ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
 
 const ContextMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
+	React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
-      className,
-    )}
-    {...props}
-  />
+	<ContextMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
 
 const ContextMenuContent = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
+	React.ElementRef<typeof ContextMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Portal>
-    <ContextMenuPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </ContextMenuPrimitive.Portal>
+	<ContextMenuPrimitive.Portal>
+		<ContextMenuPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</ContextMenuPrimitive.Portal>
 ));
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
 
 const ContextMenuItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof ContextMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+	}
 >(({ className, inset, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      contextMenuItemVariants({ variant }),
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
+	<ContextMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			contextMenuItemVariants({ variant }),
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+	}
 >(({ className, children, checked, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(contextMenuItemVariants({ variant }), "pr-2 pl-8", className)}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.CheckboxItem>
+	<ContextMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(contextMenuItemVariants({ variant }), "pr-2 pl-8", className)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<ContextMenuPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</ContextMenuPrimitive.CheckboxItem>
 ));
 ContextMenuCheckboxItem.displayName =
-  ContextMenuPrimitive.CheckboxItem.displayName;
+	ContextMenuPrimitive.CheckboxItem.displayName;
 
 const ContextMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
-    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
+		variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+	}
 >(({ className, children, variant = "default", ...props }, ref) => (
-  <ContextMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(contextMenuItemVariants({ variant }), "pr-2 pl-8", className)}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </ContextMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </ContextMenuPrimitive.RadioItem>
+	<ContextMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(contextMenuItemVariants({ variant }), "pr-2 pl-8", className)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<ContextMenuPrimitive.ItemIndicator>
+				<Circle className="h-2 w-2 fill-current" />
+			</ContextMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</ContextMenuPrimitive.RadioItem>
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
 
 const ContextMenuLabel = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof ContextMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <ContextMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
+	<ContextMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
 
 const ContextMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
+	React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <ContextMenuPrimitive.Separator
-    ref={ref}
-    className={cn("bg-foreground/10 -mx-1 my-1 h-px", className)}
-    {...props}
-  />
+	<ContextMenuPrimitive.Separator
+		ref={ref}
+		className={cn("bg-foreground/10 -mx-1 my-1 h-px", className)}
+		{...props}
+	/>
 ));
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
 
 const ContextMenuShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+			{...props}
+		/>
+	);
 };
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
 export {
-  ContextMenu,
-  ContextMenuTrigger,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuCheckboxItem,
-  ContextMenuRadioItem,
-  ContextMenuLabel,
-  ContextMenuSeparator,
-  ContextMenuShortcut,
-  ContextMenuGroup,
-  ContextMenuPortal,
-  ContextMenuSub,
-  ContextMenuSubContent,
-  ContextMenuSubTrigger,
-  ContextMenuRadioGroup,
+	ContextMenu,
+	ContextMenuTrigger,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuCheckboxItem,
+	ContextMenuRadioItem,
+	ContextMenuLabel,
+	ContextMenuSeparator,
+	ContextMenuShortcut,
+	ContextMenuGroup,
+	ContextMenuPortal,
+	ContextMenuSub,
+	ContextMenuSubContent,
+	ContextMenuSubTrigger,
+	ContextMenuRadioGroup,
 };
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index aa857ffe..85df9bef 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -16,109 +16,109 @@ const DialogPortal = DialogPrimitive.Portal;
 const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+	React.ElementRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Overlay
-    ref={ref}
-    className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-250 bg-black/50",
-      className,
-    )}
-    {...props}
-  />
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-250 bg-black/50",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+	React.ElementRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-250 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200",
-        className,
-      )}
-      onCloseAutoFocus={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-250 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200",
+				className,
+			)}
+			onCloseAutoFocus={(e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			}}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 cursor-pointer opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
 ));
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 const DialogHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col space-y-2 text-left", className)}
-    {...props}
-  />
+	<div
+		className={cn("flex flex-col space-y-2 text-left", className)}
+		{...props}
+	/>
 );
 DialogHeader.displayName = "DialogHeader";
 
 const DialogFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
 );
 DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+	React.ElementRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg leading-none font-semibold tracking-tight",
-      className,
-    )}
-    {...props}
-  />
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg leading-none font-semibold tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+	React.ElementRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogTrigger,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogTrigger,
+	DialogClose,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
 };
diff --git a/apps/web/src/components/ui/drawer.tsx b/apps/web/src/components/ui/drawer.tsx
index 712c301b..d5752d62 100644
--- a/apps/web/src/components/ui/drawer.tsx
+++ b/apps/web/src/components/ui/drawer.tsx
@@ -6,13 +6,13 @@ import { Drawer as DrawerPrimitive } from "vaul";
 import { cn } from "@/utils/ui";
 
 const Drawer = ({
-  shouldScaleBackground = true,
-  ...props
+	shouldScaleBackground = true,
+	...props
 }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root
-    shouldScaleBackground={shouldScaleBackground}
-    {...props}
-  />
+	<DrawerPrimitive.Root
+		shouldScaleBackground={shouldScaleBackground}
+		{...props}
+	/>
 );
 Drawer.displayName = "Drawer";
 
@@ -23,96 +23,96 @@ const DrawerPortal = DrawerPrimitive.Portal;
 const DrawerClose = DrawerPrimitive.Close;
 
 const DrawerOverlay = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+	React.ElementRef<typeof DrawerPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Overlay
-    ref={ref}
-    className={cn("fixed inset-0 z-50 bg-black/80", className)}
-    {...props}
-  />
+	<DrawerPrimitive.Overlay
+		ref={ref}
+		className={cn("fixed inset-0 z-50 bg-black/80", className)}
+		{...props}
+	/>
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 
 const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+	React.ElementRef<typeof DrawerPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
 >(({ className, children, ...props }, ref) => (
-  <DrawerPortal>
-    <DrawerOverlay />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPortal>
+	<DrawerPortal>
+		<DrawerOverlay />
+		<DrawerPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+				className,
+			)}
+			{...props}
+		>
+			<div className="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full" />
+			{children}
+		</DrawerPrimitive.Content>
+	</DrawerPortal>
 ));
 DrawerContent.displayName = "DrawerContent";
 
 const DrawerHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-    {...props}
-  />
+	<div
+		className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+		{...props}
+	/>
 );
 DrawerHeader.displayName = "DrawerHeader";
 
 const DrawerFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-    {...props}
-  />
+	<div
+		className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+		{...props}
+	/>
 );
 DrawerFooter.displayName = "DrawerFooter";
 
 const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+	React.ElementRef<typeof DrawerPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Title
-    ref={ref}
-    className={cn(
-      "text-lg leading-none font-semibold tracking-tight",
-      className,
-    )}
-    {...props}
-  />
+	<DrawerPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg leading-none font-semibold tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
 const DrawerDescription = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+	React.ElementRef<typeof DrawerPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
+	<DrawerPrimitive.Description
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
 
 export {
-  Drawer,
-  DrawerPortal,
-  DrawerOverlay,
-  DrawerTrigger,
-  DrawerClose,
-  DrawerContent,
-  DrawerHeader,
-  DrawerFooter,
-  DrawerTitle,
-  DrawerDescription,
+	Drawer,
+	DrawerPortal,
+	DrawerOverlay,
+	DrawerTrigger,
+	DrawerClose,
+	DrawerContent,
+	DrawerHeader,
+	DrawerFooter,
+	DrawerTitle,
+	DrawerDescription,
 };
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index ae35d6a4..41970ca3 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -20,215 +20,215 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const dropdownMenuItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "focus:opacity-65 focus:text-accent-foreground",
-        destructive: "text-destructive focus:text-destructive/80",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
+	"relative flex cursor-pointer select-none items-center gap-2 rounded-xl px-2.5 py-2 text-sm text-foreground/85 outline-hidden data-[highlighted]:bg-accent/35 data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "",
+				destructive:
+					"text-destructive data-[highlighted]:bg-destructive/5 data-[highlighted]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const DropdownMenuSubTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, inset, children, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      "data-[state=open]:bg-accent data-[state=open]:opacity-65",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto" />
-  </DropdownMenuPrimitive.SubTrigger>
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			"data-[state=open]:bg-muted data-[state=open]:text-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto" />
+	</DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
+	DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+	React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
-      className,
-    )}
-    {...props}
-  />
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-2xl border p-2 shadow-lg",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
+	DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+	React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 >(({ className, sideOffset = 4, ...props }, ref) => (
-  <DropdownMenuPrimitive.Portal>
-    <DropdownMenuPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      onCloseAutoFocus={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-      }}
-      className={cn(
-        "bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md",
-        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </DropdownMenuPrimitive.Portal>
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			onCloseAutoFocus={(e) => {
+				e.stopPropagation();
+				e.preventDefault();
+			}}
+			className={cn(
+				"bg-popover text-popover-foreground z-50 min-w-32 overflow-hidden rounded-2xl border p-2 shadow-lg",
+				className,
+			)}
+			{...props}
+		/>
+	</DropdownMenuPrimitive.Portal>
 ));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean;
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, inset, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.Item
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, children, checked, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      "pr-8 pl-2",
-      className,
-    )}
-    checked={checked}
-    onSelect={(e) => {
-      e.preventDefault();
-    }}
-    {...props}
-  >
-    {children}
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-  </DropdownMenuPrimitive.CheckboxItem>
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			"pr-8 pl-2",
+			className,
+		)}
+		checked={checked}
+		onSelect={(e) => {
+			e.preventDefault();
+		}}
+		{...props}
+	>
+		{children}
+		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+	</DropdownMenuPrimitive.CheckboxItem>
 ));
 
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName;
+	DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
-    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+		variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+	}
 >(({ className, children, variant = "default", ...props }, ref) => (
-  <DropdownMenuPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      dropdownMenuItemVariants({ variant }),
-      "pr-2 pl-8",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <Circle className="h-2 w-2 fill-current" />
-      </DropdownMenuPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </DropdownMenuPrimitive.RadioItem>
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			dropdownMenuItemVariants({ variant }),
+			"pr-2 pl-8",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className="h-2 w-2 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-3 pb-2 pt-1 text-[11px] font-bold uppercase tracking-wider text-muted-foreground",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+	React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.Separator
-    ref={ref}
-    className={cn("bg-foreground/10 -mx-1 my-1 h-px", className)}
-    {...props}
-  />
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("bg-border/60 mx-1 my-2 h-px", className)}
+		{...props}
+	/>
 ));
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
+			{...props}
+		/>
+	);
 };
 DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuGroup,
-  DropdownMenuPortal,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuRadioGroup,
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
 };
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 2f2a85a0..34dc0500 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -1,42 +1,42 @@
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
 } from "@/components/ui/select";
-import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
+import { FONT_OPTIONS, type FontFamily } from "@/constants/font-constants";
 
 interface FontPickerProps {
-  defaultValue?: FontFamily;
-  onValueChange?: (value: FontFamily) => void;
-  className?: string;
+	defaultValue?: FontFamily;
+	onValueChange?: (value: FontFamily) => void;
+	className?: string;
 }
 
 export function FontPicker({
-  defaultValue,
-  onValueChange,
-  className,
+	defaultValue,
+	onValueChange,
+	className,
 }: FontPickerProps) {
-  return (
-    <Select defaultValue={defaultValue} onValueChange={onValueChange}>
-      <SelectTrigger
-        className={`bg-panel-accent h-8 w-full text-xs ${className || ""}`}
-      >
-        <SelectValue placeholder="Select a font" />
-      </SelectTrigger>
-      <SelectContent>
-        {FONT_OPTIONS.map((font) => (
-          <SelectItem
-            key={font.value}
-            value={font.value}
-            className="text-xs"
-            style={{ fontFamily: font.value }}
-          >
-            {font.label}
-          </SelectItem>
-        ))}
-      </SelectContent>
-    </Select>
-  );
+	return (
+		<Select defaultValue={defaultValue} onValueChange={onValueChange}>
+			<SelectTrigger
+				className={`bg-panel-accent h-8 w-full text-xs ${className || ""}`}
+			>
+				<SelectValue placeholder="Select a font" />
+			</SelectTrigger>
+			<SelectContent>
+				{FONT_OPTIONS.map((font) => (
+					<SelectItem
+						key={font.value}
+						value={font.value}
+						className="text-xs"
+						style={{ fontFamily: font.value }}
+					>
+						{font.label}
+					</SelectItem>
+				))}
+			</SelectContent>
+		</Select>
+	);
 }
diff --git a/apps/web/src/components/ui/form.tsx b/apps/web/src/components/ui/form.tsx
index 0995bcac..a6a18752 100644
--- a/apps/web/src/components/ui/form.tsx
+++ b/apps/web/src/components/ui/form.tsx
@@ -1,15 +1,15 @@
 "use client";
 
 import * as React from "react";
-import { Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
+import { type Label as LabelPrimitive, Slot as SlotPrimitive } from "radix-ui";
 
 import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  FormProvider,
-  useFormContext,
+	Controller,
+	type ControllerProps,
+	type FieldPath,
+	type FieldValues,
+	FormProvider,
+	useFormContext,
 } from "react-hook-form";
 
 import { cn } from "@/utils/ui";
@@ -18,160 +18,160 @@ import { Label } from "./label";
 const Form = FormProvider;
 
 type FormFieldContextValue<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName;
+	name: TName;
 };
 
 const FormFieldContext = React.createContext<FormFieldContextValue>(
-  {} as FormFieldContextValue,
+	{} as FormFieldContextValue,
 );
 
 const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+	TFieldValues extends FieldValues = FieldValues,
+	TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
-  ...props
+	...props
 }: ControllerProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name: props.name }}>
-      <Controller {...props} />
-    </FormFieldContext.Provider>
-  );
+	return (
+		<FormFieldContext.Provider value={{ name: props.name }}>
+			<Controller {...props} />
+		</FormFieldContext.Provider>
+	);
 };
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext);
-  const itemContext = React.useContext(FormItemContext);
-  const { getFieldState, formState } = useFormContext();
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
 
-  const fieldState = getFieldState(fieldContext.name, formState);
+	const fieldState = getFieldState(fieldContext.name, formState);
 
-  if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>");
-  }
+	if (!fieldContext) {
+		throw new Error("useFormField should be used within <FormField>");
+	}
 
-  const { id } = itemContext;
+	const { id } = itemContext;
 
-  return {
-    id,
-    name: fieldContext.name,
-    formItemId: `${id}-form-item`,
-    formDescriptionId: `${id}-form-item-description`,
-    formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState,
+	};
 };
 
 type FormItemContextValue = {
-  id: string;
+	id: string;
 };
 
 const FormItemContext = React.createContext<FormItemContextValue>(
-  {} as FormItemContextValue,
+	{} as FormItemContextValue,
 );
 
 const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => {
-  const id = React.useId();
+	const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  );
+	return (
+		<FormItemContext.Provider value={{ id }}>
+			<div ref={ref} className={cn("space-y-2", className)} {...props} />
+		</FormItemContext.Provider>
+	);
 });
 FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField();
+	const { error, formItemId } = useFormField();
 
-  return (
-    <Label
-      ref={ref}
-      className={cn(error && "text-destructive", className)}
-      htmlFor={formItemId}
-      {...props}
-    />
-  );
+	return (
+		<Label
+			ref={ref}
+			className={cn(error && "text-destructive", className)}
+			htmlFor={formItemId}
+			{...props}
+		/>
+	);
 });
 FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
-  React.ElementRef<typeof SlotPrimitive.Slot>,
-  React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot>
+	React.ElementRef<typeof SlotPrimitive.Slot>,
+	React.ComponentPropsWithoutRef<typeof SlotPrimitive.Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } =
-    useFormField();
+	const { error, formItemId, formDescriptionId, formMessageId } =
+		useFormField();
 
-  return (
-    <SlotPrimitive.Slot
-      ref={ref}
-      id={formItemId}
-      aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
-      }
-      aria-invalid={!!error}
-      {...props}
-    />
-  );
+	return (
+		<SlotPrimitive.Slot
+			ref={ref}
+			id={formItemId}
+			aria-describedby={
+				error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
+			}
+			aria-invalid={!!error}
+			{...props}
+		/>
+	);
 });
 FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField();
+	const { formDescriptionId } = useFormField();
 
-  return (
-    <p
-      ref={ref}
-      id={formDescriptionId}
-      className={cn("text-muted-foreground text-[0.8rem]", className)}
-      {...props}
-    />
-  );
+	return (
+		<p
+			ref={ref}
+			id={formDescriptionId}
+			className={cn("text-muted-foreground text-[0.8rem]", className)}
+			{...props}
+		/>
+	);
 });
 FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
-  HTMLParagraphElement,
-  React.HTMLAttributes<HTMLParagraphElement>
+	HTMLParagraphElement,
+	React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField();
-  const body = error ? String(error?.message) : children;
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;
 
-  if (!body) {
-    return null;
-  }
+	if (!body) {
+		return null;
+	}
 
-  return (
-    <p
-      ref={ref}
-      id={formMessageId}
-      className={cn("text-destructive text-[0.8rem] font-medium", className)}
-      {...props}
-    >
-      {body}
-    </p>
-  );
+	return (
+		<p
+			ref={ref}
+			id={formMessageId}
+			className={cn("text-destructive text-[0.8rem] font-medium", className)}
+			{...props}
+		>
+			{body}
+		</p>
+	);
 });
 FormMessage.displayName = "FormMessage";
 
 export {
-  useFormField,
-  Form,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  FormField,
+	useFormField,
+	Form,
+	FormItem,
+	FormLabel,
+	FormControl,
+	FormDescription,
+	FormMessage,
+	FormField,
 };
diff --git a/apps/web/src/components/ui/hover-card.tsx b/apps/web/src/components/ui/hover-card.tsx
index 3dcd2cad..6f2c34e1 100644
--- a/apps/web/src/components/ui/hover-card.tsx
+++ b/apps/web/src/components/ui/hover-card.tsx
@@ -10,19 +10,19 @@ const HoverCard = HoverCardPrimitive.Root;
 const HoverCardTrigger = HoverCardPrimitive.Trigger;
 
 const HoverCardContent = React.forwardRef<
-  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
+	React.ElementRef<typeof HoverCardPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <HoverCardPrimitive.Content
-    ref={ref}
-    align={align}
-    sideOffset={sideOffset}
-    className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
-      className,
-    )}
-    {...props}
-  />
+	<HoverCardPrimitive.Content
+		ref={ref}
+		align={align}
+		sideOffset={sideOffset}
+		className={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 rounded-md border p-4 shadow-md outline-hidden",
+			className,
+		)}
+		{...props}
+	/>
 ));
 HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/input-otp.tsx b/apps/web/src/components/ui/input-otp.tsx
index 262a06bb..6e74e0e8 100644
--- a/apps/web/src/components/ui/input-otp.tsx
+++ b/apps/web/src/components/ui/input-otp.tsx
@@ -7,68 +7,68 @@ import { Minus } from "lucide-react";
 import { cn } from "@/utils/ui";
 
 const InputOTP = React.forwardRef<
-  React.ElementRef<typeof OTPInput>,
-  React.ComponentPropsWithoutRef<typeof OTPInput>
+	React.ElementRef<typeof OTPInput>,
+	React.ComponentPropsWithoutRef<typeof OTPInput>
 >(({ className, containerClassName, ...props }, ref) => (
-  <OTPInput
-    ref={ref}
-    containerClassName={cn(
-      "flex items-center justify-between gap-2 w-full has-disabled:opacity-50",
-      containerClassName,
-    )}
-    className={cn("disabled:cursor-not-allowed", className)}
-    {...props}
-  />
+	<OTPInput
+		ref={ref}
+		containerClassName={cn(
+			"flex items-center justify-between gap-2 w-full has-disabled:opacity-50",
+			containerClassName,
+		)}
+		className={cn("disabled:cursor-not-allowed", className)}
+		{...props}
+	/>
 ));
 InputOTP.displayName = "InputOTP";
 
 const InputOTPGroup = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
 >(({ className, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("flex flex-1 items-center gap-2", className)}
-    {...props}
-  />
+	<div
+		ref={ref}
+		className={cn("flex flex-1 items-center gap-2", className)}
+		{...props}
+	/>
 ));
 InputOTPGroup.displayName = "InputOTPGroup";
 
 const InputOTPSlot = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div"> & { index: number }
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div"> & { index: number }
 >(({ index, className, ...props }, ref) => {
-  const inputOTPContext = React.useContext(OTPInputContext);
-  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
+	const inputOTPContext = React.useContext(OTPInputContext);
+	const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
 
-  return (
-    <div
-      ref={ref}
-      className={cn(
-        "border-input relative flex aspect-square min-w-[36px] flex-1 items-center justify-center border text-lg shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md",
-        isActive && "ring-ring z-10 ring-1",
-        className,
-      )}
-      {...props}
-    >
-      {char}
-      {hasFakeCaret && (
-        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
-        </div>
-      )}
-    </div>
-  );
+	return (
+		<div
+			ref={ref}
+			className={cn(
+				"border-input relative flex aspect-square min-w-[36px] flex-1 items-center justify-center border text-lg shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+				isActive && "ring-ring z-10 ring-1",
+				className,
+			)}
+			{...props}
+		>
+			{char}
+			{hasFakeCaret && (
+				<div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+					<div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+				</div>
+			)}
+		</div>
+	);
 });
 InputOTPSlot.displayName = "InputOTPSlot";
 
 const InputOTPSeparator = React.forwardRef<
-  React.ElementRef<"div">,
-  React.ComponentPropsWithoutRef<"div">
+	React.ElementRef<"div">,
+	React.ComponentPropsWithoutRef<"div">
 >(({ ...props }, ref) => (
-  <div ref={ref} role="separator" {...props}>
-    <Minus />
-  </div>
+	<div ref={ref} role="separator" {...props}>
+		<Minus />
+	</div>
 ));
 InputOTPSeparator.displayName = "InputOTPSeparator";
 
diff --git a/apps/web/src/components/ui/input-with-back.tsx b/apps/web/src/components/ui/input-with-back.tsx
index fa990185..cd551571 100644
--- a/apps/web/src/components/ui/input-with-back.tsx
+++ b/apps/web/src/components/ui/input-with-back.tsx
@@ -7,82 +7,82 @@ import { motion } from "motion/react";
 import { useState, useEffect } from "react";
 
 interface InputWithBackProps {
-  isExpanded: boolean;
-  setIsExpanded: (isExpanded: boolean) => void;
-  placeholder?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  disableAnimation?: boolean;
+	isExpanded: boolean;
+	setIsExpanded: (isExpanded: boolean) => void;
+	placeholder?: string;
+	value?: string;
+	onChange?: (value: string) => void;
+	disableAnimation?: boolean;
 }
 
 export function InputWithBack({
-  isExpanded,
-  setIsExpanded,
-  placeholder = "Search anything",
-  value,
-  onChange,
-  disableAnimation = false,
+	isExpanded,
+	setIsExpanded,
+	placeholder = "Search anything",
+	value,
+	onChange,
+	disableAnimation = false,
 }: InputWithBackProps) {
-  const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
-  const [buttonOffset, setButtonOffset] = useState(-60);
+	const [containerRef, setContainerRef] = useState<HTMLDivElement | null>(null);
+	const [buttonOffset, setButtonOffset] = useState(-60);
 
-  const smoothTransition = {
-    duration: disableAnimation ? 0 : 0.35,
-    ease: [0.25, 0.1, 0.25, 1] as const,
-  };
+	const smoothTransition = {
+		duration: disableAnimation ? 0 : 0.35,
+		ease: [0.25, 0.1, 0.25, 1] as const,
+	};
 
-  useEffect(() => {
-    if (containerRef) {
-      const rect = containerRef.getBoundingClientRect();
-      setButtonOffset(-rect.left - 48);
-    }
-  }, [containerRef]);
+	useEffect(() => {
+		if (containerRef) {
+			const rect = containerRef.getBoundingClientRect();
+			setButtonOffset(-rect.left - 48);
+		}
+	}, [containerRef]);
 
-  return (
-    <div ref={setContainerRef} className="relative w-full">
-      <motion.div
-        className="absolute top-1/2 left-0 z-10 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-75"
-        initial={{
-          x: isExpanded ? 0 : buttonOffset,
-          opacity: isExpanded ? 1 : 0.5,
-        }}
-        animate={{
-          x: isExpanded ? 0 : buttonOffset,
-          opacity: isExpanded ? 1 : 0.5,
-        }}
-        transition={smoothTransition}
-        onClick={() => setIsExpanded(!isExpanded)}
-      >
-        <Button
-          variant="outline"
-          className="bg-panel-accent !size-9 rounded-full"
-        >
-          <ArrowLeft />
-        </Button>
-      </motion.div>
-      <div
-        className="relative flex-1"
-        style={{ marginLeft: "0px", paddingLeft: "0px" }}
-      >
-        <motion.div
-          className="relative"
-          initial={{
-            marginLeft: isExpanded ? 50 : 0,
-          }}
-          animate={{
-            marginLeft: isExpanded ? 50 : 0,
-          }}
-          transition={smoothTransition}
-        >
-          <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
-          <Input
-            placeholder={placeholder}
-            className="bg-panel-accent w-full pl-9"
-            value={value}
-            onChange={(e) => onChange?.(e.target.value)}
-          />
-        </motion.div>
-      </div>
-    </div>
-  );
+	return (
+		<div ref={setContainerRef} className="relative w-full">
+			<motion.div
+				className="absolute top-1/2 left-0 z-10 -translate-y-1/2 cursor-pointer transition-opacity hover:opacity-75"
+				initial={{
+					x: isExpanded ? 0 : buttonOffset,
+					opacity: isExpanded ? 1 : 0.5,
+				}}
+				animate={{
+					x: isExpanded ? 0 : buttonOffset,
+					opacity: isExpanded ? 1 : 0.5,
+				}}
+				transition={smoothTransition}
+				onClick={() => setIsExpanded(!isExpanded)}
+			>
+				<Button
+					variant="outline"
+					className="bg-panel-accent !size-9 rounded-full"
+				>
+					<ArrowLeft />
+				</Button>
+			</motion.div>
+			<div
+				className="relative flex-1"
+				style={{ marginLeft: "0px", paddingLeft: "0px" }}
+			>
+				<motion.div
+					className="relative"
+					initial={{
+						marginLeft: isExpanded ? 50 : 0,
+					}}
+					animate={{
+						marginLeft: isExpanded ? 50 : 0,
+					}}
+					transition={smoothTransition}
+				>
+					<Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
+					<Input
+						placeholder={placeholder}
+						className="bg-panel-accent w-full pl-9"
+						value={value}
+						onChange={(e) => onChange?.(e.target.value)}
+					/>
+				</motion.div>
+			</div>
+		</div>
+	);
 }
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index e459a4f7..0393f904 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -3,113 +3,113 @@
 import { Eye, EyeOff, X } from "lucide-react";
 import { cn } from "@/utils/ui";
 import { Button } from "./button";
-import { forwardRef, ComponentProps } from "react";
+import { forwardRef, type ComponentProps } from "react";
 import { useState } from "react";
 
 interface InputProps extends ComponentProps<"input"> {
-  showPassword?: boolean;
-  onShowPasswordChange?: (show: boolean) => void;
-  showClearIcon?: boolean;
-  onClear?: () => void;
-  containerClassName?: string;
+	showPassword?: boolean;
+	onShowPasswordChange?: (show: boolean) => void;
+	showClearIcon?: boolean;
+	onClear?: () => void;
+	containerClassName?: string;
 }
 
 const Input = forwardRef<HTMLInputElement, InputProps>(
-  (
-    {
-      className,
-      type,
-      containerClassName,
-      showPassword,
-      onShowPasswordChange,
-      showClearIcon,
-      onClear,
-      value,
-      onFocus,
-      onBlur,
-      ...props
-    },
-    ref,
-  ) => {
-    const [isFocused, setIsFocused] = useState(false);
+	(
+		{
+			className,
+			type,
+			containerClassName,
+			showPassword,
+			onShowPasswordChange,
+			showClearIcon,
+			onClear,
+			value,
+			onFocus,
+			onBlur,
+			...props
+		},
+		ref,
+	) => {
+		const [isFocused, setIsFocused] = useState(false);
 
-    const isPassword = type === "password";
-    const showPasswordToggle = isPassword && onShowPasswordChange;
-    const showClear =
-      showClearIcon &&
-      onClear &&
-      value &&
-      String(value).length > 0 &&
-      isFocused;
-    const inputType = isPassword && showPassword ? "text" : type;
+		const isPassword = type === "password";
+		const showPasswordToggle = isPassword && onShowPasswordChange;
+		const showClear =
+			showClearIcon &&
+			onClear &&
+			value &&
+			String(value).length > 0 &&
+			isFocused;
+		const inputType = isPassword && showPassword ? "text" : type;
 
-    const hasIcons = showPasswordToggle || showClear;
-    const iconCount = Number(showPasswordToggle) + Number(showClear);
-    const paddingRight =
-      iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
+		const hasIcons = showPasswordToggle || showClear;
+		const iconCount = Number(showPasswordToggle) + Number(showClear);
+		const paddingRight =
+			iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
 
-    return (
-      <div
-        className={cn(hasIcons ? "relative w-full" : "", containerClassName)}
-      >
-        <input
-          type={inputType}
-          className={cn(
-            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input bg-background flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
-            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-            paddingRight,
-            className,
-          )}
-          ref={ref}
-          value={value}
-          onFocus={(e) => {
-            setIsFocused(true);
-            onFocus?.(e);
-          }}
-          onBlur={(e) => {
-            setIsFocused(false);
-            onBlur?.(e);
-          }}
-          {...props}
-        />
-        {showClear && (
-          <Button
-            type="button"
-            variant="text"
-            size="icon"
-            onMouseDown={(e) => {
-              e.preventDefault();
-              onClear?.();
-            }}
-            className="text-muted-foreground absolute top-0 right-0 h-full px-3 !opacity-100"
-            aria-label="Clear input"
-          >
-            <X className="!size-[0.85]" />
-          </Button>
-        )}
-        {showPasswordToggle && (
-          <Button
-            type="button"
-            variant="text"
-            size="icon"
-            onClick={() => onShowPasswordChange?.(!showPassword)}
-            className={cn(
-              "text-muted-foreground hover:text-foreground absolute top-0 h-full px-3",
-              showClear ? "right-10" : "right-0",
-            )}
-            aria-label={showPassword ? "Hide password" : "Show password"}
-          >
-            {showPassword ? (
-              <Eye className="h-4 w-4" />
-            ) : (
-              <EyeOff className="h-4 w-4" />
-            )}
-          </Button>
-        )}
-      </div>
-    );
-  },
+		return (
+			<div
+				className={cn(hasIcons ? "relative w-full" : "", containerClassName)}
+			>
+				<input
+					type={inputType}
+					className={cn(
+						"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input bg-background flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+						"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
+						"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+						paddingRight,
+						className,
+					)}
+					ref={ref}
+					value={value}
+					onFocus={(e) => {
+						setIsFocused(true);
+						onFocus?.(e);
+					}}
+					onBlur={(e) => {
+						setIsFocused(false);
+						onBlur?.(e);
+					}}
+					{...props}
+				/>
+				{showClear && (
+					<Button
+						type="button"
+						variant="text"
+						size="icon"
+						onMouseDown={(e) => {
+							e.preventDefault();
+							onClear?.();
+						}}
+						className="text-muted-foreground absolute top-0 right-0 h-full px-3 !opacity-100"
+						aria-label="Clear input"
+					>
+						<X className="!size-[0.85]" />
+					</Button>
+				)}
+				{showPasswordToggle && (
+					<Button
+						type="button"
+						variant="text"
+						size="icon"
+						onClick={() => onShowPasswordChange?.(!showPassword)}
+						className={cn(
+							"text-muted-foreground hover:text-foreground absolute top-0 h-full px-3",
+							showClear ? "right-10" : "right-0",
+						)}
+						aria-label={showPassword ? "Hide password" : "Show password"}
+					>
+						{showPassword ? (
+							<Eye className="h-4 w-4" />
+						) : (
+							<EyeOff className="h-4 w-4" />
+						)}
+					</Button>
+				)}
+			</div>
+		);
+	},
 );
 Input.displayName = "Input";
 
diff --git a/apps/web/src/components/ui/label.tsx b/apps/web/src/components/ui/label.tsx
index 56eed6f6..202dd759 100644
--- a/apps/web/src/components/ui/label.tsx
+++ b/apps/web/src/components/ui/label.tsx
@@ -7,19 +7,19 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/ui";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+	"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
 );
 
 const Label = React.forwardRef<
-  React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+	React.ElementRef<typeof LabelPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+		VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
+	<LabelPrimitive.Root
+		ref={ref}
+		className={cn(labelVariants(), className)}
+		{...props}
+	/>
 ));
 Label.displayName = LabelPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/menubar.tsx b/apps/web/src/components/ui/menubar.tsx
index df78399e..52303fdd 100644
--- a/apps/web/src/components/ui/menubar.tsx
+++ b/apps/web/src/components/ui/menubar.tsx
@@ -17,220 +17,220 @@ const MenubarSub = MenubarPrimitive.Sub;
 const MenubarRadioGroup = MenubarPrimitive.RadioGroup;
 
 const Menubar = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
+	React.ElementRef<typeof MenubarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Root
-    ref={ref}
-    className={cn(
-      "bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs",
-      className,
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"bg-background flex h-9 items-center space-x-1 rounded-md border p-1 shadow-xs",
+			className,
+		)}
+		{...props}
+	/>
 ));
 Menubar.displayName = MenubarPrimitive.Root.displayName;
 
 const MenubarTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+	React.ElementRef<typeof MenubarPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden select-none",
-      className,
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden select-none",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName;
 
 const MenubarSubTrigger = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
 >(({ className, inset, children, ...props }, ref) => (
-  <MenubarPrimitive.SubTrigger
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
-  </MenubarPrimitive.SubTrigger>
+	<MenubarPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto h-4 w-4" />
+	</MenubarPrimitive.SubTrigger>
 ));
 MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName;
 
 const MenubarSubContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+	React.ElementRef<typeof MenubarPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
-      className,
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName;
 
 const MenubarContent = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+	React.ElementRef<typeof MenubarPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
 >(
-  (
-    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
-    ref,
-  ) => (
-    <MenubarPrimitive.Portal>
-      <MenubarPrimitive.Content
-        ref={ref}
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </MenubarPrimitive.Portal>
-  ),
+	(
+		{ className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+		ref,
+	) => (
+		<MenubarPrimitive.Portal>
+			<MenubarPrimitive.Content
+				ref={ref}
+				align={align}
+				alignOffset={alignOffset}
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-48 overflow-hidden rounded-md border p-1 shadow-md",
+					className,
+				)}
+				{...props}
+			/>
+		</MenubarPrimitive.Portal>
+	),
 );
 MenubarContent.displayName = MenubarPrimitive.Content.displayName;
 
 const MenubarItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof MenubarPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Item
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Item
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarItem.displayName = MenubarPrimitive.Item.displayName;
 
 const MenubarCheckboxItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+	React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
 >(({ className, children, checked, ...props }, ref) => (
-  <MenubarPrimitive.CheckboxItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
-      className,
-    )}
-    checked={checked}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.CheckboxItem>
+	<MenubarPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<MenubarPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</MenubarPrimitive.CheckboxItem>
 ));
 MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName;
 
 const MenubarRadioItem = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+	React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
 >(({ className, children, ...props }, ref) => (
-  <MenubarPrimitive.RadioItem
-    ref={ref}
-    className={cn(
-      "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
-      <MenubarPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
-      </MenubarPrimitive.ItemIndicator>
-    </span>
-    {children}
-  </MenubarPrimitive.RadioItem>
+	<MenubarPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<MenubarPrimitive.ItemIndicator>
+				<Circle className="h-4 w-4 fill-current" />
+			</MenubarPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</MenubarPrimitive.RadioItem>
 ));
 MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName;
 
 const MenubarLabel = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
-    inset?: boolean;
-  }
+	React.ElementRef<typeof MenubarPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+		inset?: boolean;
+	}
 >(({ className, inset, ...props }, ref) => (
-  <MenubarPrimitive.Label
-    ref={ref}
-    className={cn(
-      "px-2 py-1.5 text-sm font-semibold",
-      inset && "pl-8",
-      className,
-    )}
-    {...props}
-  />
+	<MenubarPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
 ));
 MenubarLabel.displayName = MenubarPrimitive.Label.displayName;
 
 const MenubarSeparator = React.forwardRef<
-  React.ElementRef<typeof MenubarPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+	React.ElementRef<typeof MenubarPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <MenubarPrimitive.Separator
-    ref={ref}
-    className={cn("bg-muted -mx-1 my-1 h-px", className)}
-    {...props}
-  />
+	<MenubarPrimitive.Separator
+		ref={ref}
+		className={cn("bg-muted -mx-1 my-1 h-px", className)}
+		{...props}
+	/>
 ));
 MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName;
 
 const MenubarShortcut = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLSpanElement>) => {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
+	return (
+		<span
+			className={cn(
+				"text-muted-foreground ml-auto text-xs tracking-widest",
+				className,
+			)}
+			{...props}
+		/>
+	);
 };
 MenubarShortcut.displayname = "MenubarShortcut";
 
 export {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarLabel,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-  MenubarPortal,
-  MenubarSubContent,
-  MenubarSubTrigger,
-  MenubarGroup,
-  MenubarSub,
-  MenubarShortcut,
+	Menubar,
+	MenubarMenu,
+	MenubarTrigger,
+	MenubarContent,
+	MenubarItem,
+	MenubarSeparator,
+	MenubarLabel,
+	MenubarCheckboxItem,
+	MenubarRadioGroup,
+	MenubarRadioItem,
+	MenubarPortal,
+	MenubarSubContent,
+	MenubarSubTrigger,
+	MenubarGroup,
+	MenubarSub,
+	MenubarShortcut,
 };
diff --git a/apps/web/src/components/ui/navigation-menu.tsx b/apps/web/src/components/ui/navigation-menu.tsx
index 833181f5..576e04d5 100644
--- a/apps/web/src/components/ui/navigation-menu.tsx
+++ b/apps/web/src/components/ui/navigation-menu.tsx
@@ -6,123 +6,123 @@ import { ChevronDown } from "lucide-react";
 import { cn } from "@/utils/ui";
 
 const NavigationMenu = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+	React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
 >(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative z-10 flex max-w-max flex-1 items-center justify-center",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <NavigationMenuViewport />
-  </NavigationMenuPrimitive.Root>
+	<NavigationMenuPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative z-10 flex max-w-max flex-1 items-center justify-center",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<NavigationMenuViewport />
+	</NavigationMenuPrimitive.Root>
 ));
 NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName;
 
 const NavigationMenuList = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+	React.ElementRef<typeof NavigationMenuPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.List
-    ref={ref}
-    className={cn(
-      "group flex flex-1 list-none items-center justify-center space-x-1",
-      className,
-    )}
-    {...props}
-  />
+	<NavigationMenuPrimitive.List
+		ref={ref}
+		className={cn(
+			"group flex flex-1 list-none items-center justify-center space-x-1",
+			className,
+		)}
+		{...props}
+	/>
 ));
 NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
+	"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50",
 );
 
 const NavigationMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+	React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <NavigationMenuPrimitive.Trigger
-    ref={ref}
-    className={cn(navigationMenuTriggerStyle(), "group", className)}
-    {...props}
-  >
-    {children}{" "}
-    <ChevronDown
-      className="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
-      aria-hidden="true"
-    />
-  </NavigationMenuPrimitive.Trigger>
+	<NavigationMenuPrimitive.Trigger
+		ref={ref}
+		className={cn(navigationMenuTriggerStyle(), "group", className)}
+		{...props}
+	>
+		{children}{" "}
+		<ChevronDown
+			className="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+			aria-hidden="true"
+		/>
+	</NavigationMenuPrimitive.Trigger>
 ));
 NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName;
 
 const NavigationMenuContent = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+	React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Content
-    ref={ref}
-    className={cn(
-      "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full md:absolute md:w-auto",
-      className,
-    )}
-    {...props}
-  />
+	<NavigationMenuPrimitive.Content
+		ref={ref}
+		className={cn(
+			"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full md:absolute md:w-auto",
+			className,
+		)}
+		{...props}
+	/>
 ));
 NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName;
 
 const NavigationMenuLink = NavigationMenuPrimitive.Link;
 
 const NavigationMenuViewport = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+	React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
 >(({ className, ...props }, ref) => (
-  <div className={cn("absolute top-full left-0 flex justify-center")}>
-    <NavigationMenuPrimitive.Viewport
-      className={cn(
-        "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  </div>
+	<div className={cn("absolute top-full left-0 flex justify-center")}>
+		<NavigationMenuPrimitive.Viewport
+			className={cn(
+				"origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	</div>
 ));
 NavigationMenuViewport.displayName =
-  NavigationMenuPrimitive.Viewport.displayName;
+	NavigationMenuPrimitive.Viewport.displayName;
 
 const NavigationMenuIndicator = React.forwardRef<
-  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+	React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+	React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
 >(({ className, ...props }, ref) => (
-  <NavigationMenuPrimitive.Indicator
-    ref={ref}
-    className={cn(
-      "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
-      className,
-    )}
-    {...props}
-  >
-    <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
-  </NavigationMenuPrimitive.Indicator>
+	<NavigationMenuPrimitive.Indicator
+		ref={ref}
+		className={cn(
+			"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
+			className,
+		)}
+		{...props}
+	>
+		<div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+	</NavigationMenuPrimitive.Indicator>
 ));
 NavigationMenuIndicator.displayName =
-  NavigationMenuPrimitive.Indicator.displayName;
+	NavigationMenuPrimitive.Indicator.displayName;
 
 export {
-  navigationMenuTriggerStyle,
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
-  NavigationMenuIndicator,
-  NavigationMenuViewport,
+	navigationMenuTriggerStyle,
+	NavigationMenu,
+	NavigationMenuList,
+	NavigationMenuItem,
+	NavigationMenuContent,
+	NavigationMenuTrigger,
+	NavigationMenuLink,
+	NavigationMenuIndicator,
+	NavigationMenuViewport,
 };
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx
index f7f7ee2b..4f5f4e46 100644
--- a/apps/web/src/components/ui/pagination.tsx
+++ b/apps/web/src/components/ui/pagination.tsx
@@ -2,116 +2,116 @@ import * as React from "react";
 import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
 
 import { cn } from "@/utils/ui";
-import { ButtonProps, buttonVariants } from "./button";
+import { type ButtonProps, buttonVariants } from "./button";
 
 const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  <nav
-    role="navigation"
-    aria-label="pagination"
-    className={cn("mx-auto flex w-full justify-center", className)}
-    {...props}
-  />
+	<nav
+		role="navigation"
+		aria-label="pagination"
+		className={cn("mx-auto flex w-full justify-center", className)}
+		{...props}
+	/>
 );
 Pagination.displayName = "Pagination";
 
 const PaginationContent = React.forwardRef<
-  HTMLUListElement,
-  React.ComponentProps<"ul">
+	HTMLUListElement,
+	React.ComponentProps<"ul">
 >(({ className, ...props }, ref) => (
-  <ul
-    ref={ref}
-    className={cn("flex flex-row items-center gap-1", className)}
-    {...props}
-  />
+	<ul
+		ref={ref}
+		className={cn("flex flex-row items-center gap-1", className)}
+		{...props}
+	/>
 ));
 PaginationContent.displayName = "PaginationContent";
 
 const PaginationItem = React.forwardRef<
-  HTMLLIElement,
-  React.ComponentProps<"li">
+	HTMLLIElement,
+	React.ComponentProps<"li">
 >(({ className, ...props }, ref) => (
-  <li ref={ref} className={cn("", className)} {...props} />
+	<li ref={ref} className={cn("", className)} {...props} />
 ));
 PaginationItem.displayName = "PaginationItem";
 
 type PaginationLinkProps = {
-  isActive?: boolean;
+	isActive?: boolean;
 } & Pick<ButtonProps, "size"> &
-  React.ComponentProps<"a">;
+	React.ComponentProps<"a">;
 
 const PaginationLink = ({
-  className,
-  isActive,
-  size = "icon",
-  ...props
+	className,
+	isActive,
+	size = "icon",
+	...props
 }: PaginationLinkProps) => (
-  <a
-    aria-current={isActive ? "page" : undefined}
-    className={cn(
-      buttonVariants({
-        variant: isActive ? "outline" : "text",
-        size,
-      }),
-      className,
-    )}
-    {...props}
-  />
+	<a
+		aria-current={isActive ? "page" : undefined}
+		className={cn(
+			buttonVariants({
+				variant: isActive ? "outline" : "text",
+				size,
+			}),
+			className,
+		)}
+		{...props}
+	/>
 );
 PaginationLink.displayName = "PaginationLink";
 
 const PaginationPrevious = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to previous page"
-    size="default"
-    className={cn("gap-1 pl-2.5", className)}
-    {...props}
-  >
-    <ChevronLeft className="h-4 w-4" />
-    <span>Previous</span>
-  </PaginationLink>
+	<PaginationLink
+		aria-label="Go to previous page"
+		size="default"
+		className={cn("gap-1 pl-2.5", className)}
+		{...props}
+	>
+		<ChevronLeft className="h-4 w-4" />
+		<span>Previous</span>
+	</PaginationLink>
 );
 PaginationPrevious.displayName = "PaginationPrevious";
 
 const PaginationNext = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof PaginationLink>) => (
-  <PaginationLink
-    aria-label="Go to next page"
-    size="default"
-    className={cn("gap-1 pr-2.5", className)}
-    {...props}
-  >
-    <span>Next</span>
-    <ChevronRight className="h-4 w-4" />
-  </PaginationLink>
+	<PaginationLink
+		aria-label="Go to next page"
+		size="default"
+		className={cn("gap-1 pr-2.5", className)}
+		{...props}
+	>
+		<span>Next</span>
+		<ChevronRight className="h-4 w-4" />
+	</PaginationLink>
 );
 PaginationNext.displayName = "PaginationNext";
 
 const PaginationEllipsis = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<"span">) => (
-  <span
-    aria-hidden
-    className={cn("flex h-9 w-9 items-center justify-center", className)}
-    {...props}
-  >
-    <MoreHorizontal className="h-4 w-4" />
-    <span className="sr-only">More pages</span>
-  </span>
+	<span
+		aria-hidden
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More pages</span>
+	</span>
 );
 PaginationEllipsis.displayName = "PaginationEllipsis";
 
 export {
-  Pagination,
-  PaginationContent,
-  PaginationLink,
-  PaginationItem,
-  PaginationPrevious,
-  PaginationNext,
-  PaginationEllipsis,
+	Pagination,
+	PaginationContent,
+	PaginationLink,
+	PaginationItem,
+	PaginationPrevious,
+	PaginationNext,
+	PaginationEllipsis,
 };
diff --git a/apps/web/src/components/ui/phone-input.tsx b/apps/web/src/components/ui/phone-input.tsx
index f41b4863..13fa4020 100644
--- a/apps/web/src/components/ui/phone-input.tsx
+++ b/apps/web/src/components/ui/phone-input.tsx
@@ -5,12 +5,12 @@ import flags from "react-phone-number-input/flags";
 
 import { Button } from "./button";
 import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
+	Command,
+	CommandEmpty,
+	CommandGroup,
+	CommandInput,
+	CommandItem,
+	CommandList,
 } from "./command";
 import { Input } from "./input";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover";
@@ -18,150 +18,150 @@ import { ScrollArea } from "./scroll-area";
 import { cn } from "@/utils/ui";
 
 type PhoneInputProps = Omit<
-  React.ComponentProps<"input">,
-  "onChange" | "value" | "ref"
+	React.ComponentProps<"input">,
+	"onChange" | "value" | "ref"
 > &
-  Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
-    onChange?: (value: RPNInput.Value) => void;
-  };
+	Omit<RPNInput.Props<typeof RPNInput.default>, "onChange"> & {
+		onChange?: (value: RPNInput.Value) => void;
+	};
 
 const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps> =
-  React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
-    ({ className, onChange, defaultCountry = "US", ...props }, ref) => {
-      return (
-        <RPNInput.default
-          ref={ref}
-          className={cn("flex", className)}
-          flagComponent={FlagComponent}
-          countrySelectComponent={CountrySelect}
-          inputComponent={InputComponent}
-          defaultCountry={defaultCountry}
-          international
-          addInternationalOption
-          smartCaret={false}
-          /**
-           * Handles the onChange event.
-           *
-           * react-phone-number-input might trigger the onChange event as undefined
-           * when a valid phone number is not entered. To prevent this,
-           * the value is coerced to an empty string.
-           *
-           * @param {E164Number | undefined} value - The entered value
-           */
-          onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
-          {...props}
-        />
-      );
-    },
-  );
+	React.forwardRef<React.ElementRef<typeof RPNInput.default>, PhoneInputProps>(
+		({ className, onChange, defaultCountry = "US", ...props }, ref) => {
+			return (
+				<RPNInput.default
+					ref={ref}
+					className={cn("flex", className)}
+					flagComponent={FlagComponent}
+					countrySelectComponent={CountrySelect}
+					inputComponent={InputComponent}
+					defaultCountry={defaultCountry}
+					international
+					addInternationalOption
+					smartCaret={false}
+					/**
+					 * Handles the onChange event.
+					 *
+					 * react-phone-number-input might trigger the onChange event as undefined
+					 * when a valid phone number is not entered. To prevent this,
+					 * the value is coerced to an empty string.
+					 *
+					 * @param {E164Number | undefined} value - The entered value
+					 */
+					onChange={(value) => onChange?.(value || ("" as RPNInput.Value))}
+					{...props}
+				/>
+			);
+		},
+	);
 PhoneInput.displayName = "PhoneInput";
 
 const InputComponent = React.forwardRef<
-  HTMLInputElement,
-  React.ComponentProps<"input">
+	HTMLInputElement,
+	React.ComponentProps<"input">
 >(({ className, ...props }, ref) => (
-  <Input
-    className={cn("rounded-s-none rounded-e-lg", className)}
-    {...props}
-    ref={ref}
-  />
+	<Input
+		className={cn("rounded-s-none rounded-e-lg", className)}
+		{...props}
+		ref={ref}
+	/>
 ));
 InputComponent.displayName = "InputComponent";
 
 type CountryEntry = { label: string; value: RPNInput.Country | undefined };
 
 type CountrySelectProps = {
-  disabled?: boolean;
-  value: RPNInput.Country;
-  options: CountryEntry[];
-  onChange: (country: RPNInput.Country) => void;
+	disabled?: boolean;
+	value: RPNInput.Country;
+	options: CountryEntry[];
+	onChange: (country: RPNInput.Country) => void;
 };
 
 const CountrySelect = ({
-  disabled,
-  value: selectedCountry,
-  options: countryList,
-  onChange,
+	disabled,
+	value: selectedCountry,
+	options: countryList,
+	onChange,
 }: CountrySelectProps) => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          className="flex gap-1 rounded-s-lg rounded-e-none border-r-0 px-3 focus:z-10"
-          disabled={disabled}
-        >
-          <FlagComponent
-            country={selectedCountry}
-            countryName={selectedCountry}
-          />
-          <ChevronsUpDown
-            className={cn(
-              "-mr-2 size-4 opacity-50",
-              disabled ? "hidden" : "opacity-100",
-            )}
-          />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="w-[300px] p-0">
-        <Command>
-          <CommandInput placeholder="Search country..." />
-          <CommandList>
-            <ScrollArea className="h-72">
-              <CommandEmpty>No country found.</CommandEmpty>
-              <CommandGroup>
-                {countryList.map(({ value, label }) =>
-                  value ? (
-                    <CountrySelectOption
-                      key={value}
-                      country={value}
-                      countryName={label}
-                      selectedCountry={selectedCountry}
-                      onChange={onChange}
-                    />
-                  ) : null,
-                )}
-              </CommandGroup>
-            </ScrollArea>
-          </CommandList>
-        </Command>
-      </PopoverContent>
-    </Popover>
-  );
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					type="button"
+					variant="outline"
+					className="flex gap-1 rounded-s-lg rounded-e-none border-r-0 px-3 focus:z-10"
+					disabled={disabled}
+				>
+					<FlagComponent
+						country={selectedCountry}
+						countryName={selectedCountry}
+					/>
+					<ChevronsUpDown
+						className={cn(
+							"-mr-2 size-4 opacity-50",
+							disabled ? "hidden" : "opacity-100",
+						)}
+					/>
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[300px] p-0">
+				<Command>
+					<CommandInput placeholder="Search country..." />
+					<CommandList>
+						<ScrollArea className="h-72">
+							<CommandEmpty>No country found.</CommandEmpty>
+							<CommandGroup>
+								{countryList.map(({ value, label }) =>
+									value ? (
+										<CountrySelectOption
+											key={value}
+											country={value}
+											countryName={label}
+											selectedCountry={selectedCountry}
+											onChange={onChange}
+										/>
+									) : null,
+								)}
+							</CommandGroup>
+						</ScrollArea>
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
 };
 
 interface CountrySelectOptionProps extends RPNInput.FlagProps {
-  selectedCountry: RPNInput.Country;
-  onChange: (country: RPNInput.Country) => void;
+	selectedCountry: RPNInput.Country;
+	onChange: (country: RPNInput.Country) => void;
 }
 
 const CountrySelectOption = ({
-  country,
-  countryName,
-  selectedCountry,
-  onChange,
+	country,
+	countryName,
+	selectedCountry,
+	onChange,
 }: CountrySelectOptionProps) => {
-  return (
-    <CommandItem className="gap-2" onSelect={() => onChange(country)}>
-      <FlagComponent country={country} countryName={countryName} />
-      <span className="flex-1 text-sm">{countryName}</span>
-      <span className="text-foreground/50 text-sm">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
-      <CheckIcon
-        className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
-      />
-    </CommandItem>
-  );
+	return (
+		<CommandItem className="gap-2" onSelect={() => onChange(country)}>
+			<FlagComponent country={country} countryName={countryName} />
+			<span className="flex-1 text-sm">{countryName}</span>
+			<span className="text-foreground/50 text-sm">{`+${RPNInput.getCountryCallingCode(country)}`}</span>
+			<CheckIcon
+				className={`ml-auto size-4 ${country === selectedCountry ? "opacity-100" : "opacity-0"}`}
+			/>
+		</CommandItem>
+	);
 };
 
 const FlagComponent = ({ country, countryName }: RPNInput.FlagProps) => {
-  const Flag = flags[country];
+	const Flag = flags[country];
 
-  return (
-    <span className="bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm [&_svg]:size-full">
-      {Flag && <Flag title={countryName} />}
-    </span>
-  );
+	return (
+		<span className="bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm [&_svg]:size-full">
+			{Flag && <Flag title={countryName} />}
+		</span>
+	);
 };
 
 export { PhoneInput };
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index 2984d71d..34738303 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -12,21 +12,21 @@ const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
 
 const PopoverContent = React.forwardRef<
-  React.ElementRef<typeof PopoverPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
 >(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  <PopoverPrimitive.Portal>
-    <PopoverPrimitive.Content
-      ref={ref}
-      align={align}
-      sideOffset={sideOffset}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-[0_0_10px_rgba(0,0,0,0.15)] outline-hidden",
-        className,
-      )}
-      {...props}
-    />
-  </PopoverPrimitive.Portal>
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-[0_0_10px_rgba(0,0,0,0.15)] outline-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
 ));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
index 67abf3f0..380ecbbf 100644
--- a/apps/web/src/components/ui/progress.tsx
+++ b/apps/web/src/components/ui/progress.tsx
@@ -6,22 +6,22 @@ import { Progress as ProgressPrimitive } from "radix-ui";
 import { cn } from "@/utils/ui";
 
 const Progress = React.forwardRef<
-  React.ElementRef<typeof ProgressPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
+	React.ElementRef<typeof ProgressPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
 >(({ className, value, ...props }, ref) => (
-  <ProgressPrimitive.Root
-    ref={ref}
-    className={cn(
-      "bg-accent relative h-2 w-full overflow-hidden rounded-full",
-      className,
-    )}
-    {...props}
-  >
-    <ProgressPrimitive.Indicator
-      className="bg-foreground h-full w-full flex-1 transition-all"
-      style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
-    />
-  </ProgressPrimitive.Root>
+	<ProgressPrimitive.Root
+		ref={ref}
+		className={cn(
+			"bg-accent relative h-2 w-full overflow-hidden rounded-full",
+			className,
+		)}
+		{...props}
+	>
+		<ProgressPrimitive.Indicator
+			className="bg-foreground h-full w-full flex-1 transition-all"
+			style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+		/>
+	</ProgressPrimitive.Root>
 ));
 Progress.displayName = ProgressPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/prose.tsx b/apps/web/src/components/ui/prose.tsx
index 130b20bd..7586344c 100644
--- a/apps/web/src/components/ui/prose.tsx
+++ b/apps/web/src/components/ui/prose.tsx
@@ -2,21 +2,21 @@ import { cn } from "@/utils/ui";
 import type React from "react";
 
 type ProseProps = React.HTMLAttributes<HTMLElement> & {
-  as?: "article";
-  html: string;
+	as?: "article";
+	html: string;
 };
 
 function Prose({ children, html, className }: ProseProps) {
-  return (
-    <article
-      className={cn(
-        "prose prose-h2:font-semibold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify dark:prose-invert mx-auto max-w-none",
-        className,
-      )}
-    >
-      {html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : children}
-    </article>
-  );
+	return (
+		<article
+			className={cn(
+				"prose prose-h2:font-semibold prose-h1:text-xl prose-a:text-blue-600 prose-p:text-justify dark:prose-invert mx-auto max-w-none",
+				className,
+			)}
+		>
+			{html ? <div dangerouslySetInnerHTML={{ __html: html }} /> : children}
+		</article>
+	);
 }
 
 export default Prose;
diff --git a/apps/web/src/components/ui/radio-group.tsx b/apps/web/src/components/ui/radio-group.tsx
index 49b3e3f0..83218bac 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/apps/web/src/components/ui/radio-group.tsx
@@ -7,37 +7,37 @@ import { Circle } from "lucide-react";
 import { cn } from "@/utils/ui";
 
 const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+	React.ElementRef<typeof RadioGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  );
+	return (
+		<RadioGroupPrimitive.Root
+			className={cn("grid gap-2", className)}
+			{...props}
+			ref={ref}
+		/>
+	);
 });
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+	React.ElementRef<typeof RadioGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
 >(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        "border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow-sm focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="fill-primary h-3.5 w-3.5" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
+	return (
+		<RadioGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				"border-primary text-primary focus-visible:ring-ring aspect-square h-4 w-4 rounded-full border shadow-sm focus:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50",
+				className,
+			)}
+			{...props}
+		>
+			<RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+				<Circle className="fill-primary h-3.5 w-3.5" />
+			</RadioGroupPrimitive.Indicator>
+		</RadioGroupPrimitive.Item>
+	);
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
diff --git a/apps/web/src/components/ui/react-markdown-wrapper.tsx b/apps/web/src/components/ui/react-markdown-wrapper.tsx
index 9c78c968..181ae8ac 100644
--- a/apps/web/src/components/ui/react-markdown-wrapper.tsx
+++ b/apps/web/src/components/ui/react-markdown-wrapper.tsx
@@ -2,25 +2,25 @@ import ReactMarkdown from "react-markdown";
 import { cn } from "@/utils/ui";
 
 export function ReactMarkdownWrapper({ children }: { children: string }) {
-  return (
-    <ReactMarkdown
-      components={{
-        a: ({ className: linkClassName, children, ...props }) => (
-          <a
-            className={cn("text-primary hover:underline", linkClassName)}
-            target="_blank"
-            rel="noopener noreferrer"
-            {...props}
-          >
-            {children}
-          </a>
-        ),
-        strong: ({ children }) => (
-          <strong className="text-foreground font-semibold">{children}</strong>
-        ),
-      }}
-    >
-      {children}
-    </ReactMarkdown>
-  );
+	return (
+		<ReactMarkdown
+			components={{
+				a: ({ className: linkClassName, children, ...props }) => (
+					<a
+						className={cn("text-primary hover:underline", linkClassName)}
+						target="_blank"
+						rel="noopener noreferrer"
+						{...props}
+					>
+						{children}
+					</a>
+				),
+				strong: ({ children }) => (
+					<strong className="text-foreground font-semibold">{children}</strong>
+				),
+			}}
+		>
+			{children}
+		</ReactMarkdown>
+	);
 }
diff --git a/apps/web/src/components/ui/resizable.tsx b/apps/web/src/components/ui/resizable.tsx
index c78d02b3..663ce194 100644
--- a/apps/web/src/components/ui/resizable.tsx
+++ b/apps/web/src/components/ui/resizable.tsx
@@ -5,34 +5,34 @@ import * as ResizablePrimitive from "react-resizable-panels";
 import { cn } from "@/utils/ui";
 
 const ResizablePanelGroup = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-      className,
-    )}
-    {...props}
-  />
+	<ResizablePrimitive.PanelGroup
+		className={cn(
+			"flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 const ResizablePanel = ResizablePrimitive.Panel;
 
 const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
+	withHandle,
+	className,
+	...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
-  withHandle?: boolean;
+	withHandle?: boolean;
 }) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      "focus-visible:ring-ring relative flex w-px items-center justify-center bg-transparent after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
-      className,
-    )}
-    {...props}
-  />
+	<ResizablePrimitive.PanelResizeHandle
+		className={cn(
+			"focus-visible:ring-ring relative flex w-px items-center justify-center bg-transparent after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+			className,
+		)}
+		{...props}
+	/>
 );
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index 6d0074eb..9019fae5 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -2,16 +2,16 @@ import * as React from "react";
 import { cn } from "@/utils/ui";
 
 const ScrollArea = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
 >(({ className, children, ...props }, ref) => (
-  <div
-    ref={ref}
-    className={cn("scrollbar-thin overflow-auto", className)}
-    {...props}
-  >
-    {children}
-  </div>
+	<div
+		ref={ref}
+		className={cn("scrollbar-thin overflow-auto", className)}
+		{...props}
+	>
+		{children}
+	</div>
 ));
 ScrollArea.displayName = "ScrollArea";
 
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 30c023e1..bb46f541 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -14,165 +14,165 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const selectItemVariants = cva(
-  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default: "focus:opacity-65 focus:text-accent-foreground",
-        destructive: "text-destructive focus:text-destructive/80",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
+	"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50",
+	{
+		variants: {
+			variant: {
+				default: "focus:opacity-65 focus:text-accent-foreground",
+				destructive: "text-destructive focus:text-destructive/80",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const SelectTrigger = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+	React.ElementRef<typeof SelectPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
 >(({ className, children, ...props }, ref) => (
-  <SelectPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "bg-accent ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-7 w-auto cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-sm whitespace-nowrap focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className,
-    )}
-    {...props}
-  >
-    {children}
-    <SelectPrimitive.Icon asChild>
-      <ChevronDown className="size-3 opacity-50" />
-    </SelectPrimitive.Icon>
-  </SelectPrimitive.Trigger>
+	<SelectPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"bg-accent ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-7 w-auto cursor-pointer items-center justify-between gap-1 rounded-md px-3 py-2 text-sm whitespace-nowrap focus:ring-1 focus:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<SelectPrimitive.Icon asChild>
+			<ChevronDown className="size-3 opacity-50" />
+		</SelectPrimitive.Icon>
+	</SelectPrimitive.Trigger>
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+	React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollUpButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronUp className="h-4 w-4" />
-  </SelectPrimitive.ScrollUpButton>
+	<SelectPrimitive.ScrollUpButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronUp className="h-4 w-4" />
+	</SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+	React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.ScrollDownButton
-    ref={ref}
-    className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className,
-    )}
-    {...props}
-  >
-    <ChevronDown className="h-4 w-4" />
-  </SelectPrimitive.ScrollDownButton>
+	<SelectPrimitive.ScrollDownButton
+		ref={ref}
+		className={cn(
+			"flex cursor-default items-center justify-center py-1",
+			className,
+		)}
+		{...props}
+	>
+		<ChevronDown className="h-4 w-4" />
+	</SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName;
+	SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+	React.ElementRef<typeof SelectPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
 >(({ className, children, position = "popper", ...props }, ref) => (
-  <SelectPrimitive.Portal>
-    <SelectPrimitive.Content
-      ref={ref}
-      className={cn(
-        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
-        position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
-        className,
-      )}
-      position={position}
-      onCloseAutoFocus={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      {...props}
-    >
-      <SelectScrollUpButton />
-      <SelectPrimitive.Viewport
-        className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
-        )}
-      >
-        {children}
-      </SelectPrimitive.Viewport>
-      <SelectScrollDownButton />
-    </SelectPrimitive.Content>
-  </SelectPrimitive.Portal>
+	<SelectPrimitive.Portal>
+		<SelectPrimitive.Content
+			ref={ref}
+			className={cn(
+				"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border shadow-md",
+				position === "popper" &&
+					"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+				className,
+			)}
+			position={position}
+			onCloseAutoFocus={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}}
+			{...props}
+		>
+			<SelectScrollUpButton />
+			<SelectPrimitive.Viewport
+				className={cn(
+					"p-1",
+					position === "popper" &&
+						"h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)",
+				)}
+			>
+				{children}
+			</SelectPrimitive.Viewport>
+			<SelectScrollDownButton />
+		</SelectPrimitive.Content>
+	</SelectPrimitive.Portal>
 ));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+	React.ElementRef<typeof SelectPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Label
-    ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
-    {...props}
-  />
+	<SelectPrimitive.Label
+		ref={ref}
+		className={cn("px-2 py-1.5 text-sm font-semibold", className)}
+		{...props}
+	/>
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
-    variant?: VariantProps<typeof selectItemVariants>["variant"];
-  }
+	React.ElementRef<typeof SelectPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> & {
+		variant?: VariantProps<typeof selectItemVariants>["variant"];
+	}
 >(({ className, children, variant = "default", ...props }, ref) => (
-  <SelectPrimitive.Item
-    ref={ref}
-    className={cn(selectItemVariants({ variant }), className)}
-    {...props}
-  >
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
-    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-  </SelectPrimitive.Item>
+	<SelectPrimitive.Item
+		ref={ref}
+		className={cn(selectItemVariants({ variant }), className)}
+		{...props}
+	>
+		<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+			<SelectPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</SelectPrimitive.ItemIndicator>
+		</span>
+		<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+	</SelectPrimitive.Item>
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
-  React.ElementRef<typeof SelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+	React.ElementRef<typeof SelectPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
 >(({ className, ...props }, ref) => (
-  <SelectPrimitive.Separator
-    ref={ref}
-    className={cn("bg-foreground/10 -mx-1 my-1 h-px", className)}
-    {...props}
-  />
+	<SelectPrimitive.Separator
+		ref={ref}
+		className={cn("bg-foreground/10 -mx-1 my-1 h-px", className)}
+		{...props}
+	/>
 ));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-  SelectScrollUpButton,
-  SelectScrollDownButton,
+	Select,
+	SelectGroup,
+	SelectValue,
+	SelectTrigger,
+	SelectContent,
+	SelectLabel,
+	SelectItem,
+	SelectSeparator,
+	SelectScrollUpButton,
+	SelectScrollDownButton,
 };
diff --git a/apps/web/src/components/ui/separator.tsx b/apps/web/src/components/ui/separator.tsx
index 825c0417..f3f93ad7 100644
--- a/apps/web/src/components/ui/separator.tsx
+++ b/apps/web/src/components/ui/separator.tsx
@@ -6,25 +6,25 @@ import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { cn } from "@/utils/ui";
 
 const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+	React.ElementRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
 >(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref,
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "bg-border shrink-0",
-        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
-        className,
-      )}
-      {...props}
-    />
-  ),
+	(
+		{ className, orientation = "horizontal", decorative = true, ...props },
+		ref,
+	) => (
+		<SeparatorPrimitive.Root
+			ref={ref}
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"bg-border shrink-0",
+				orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+				className,
+			)}
+			{...props}
+		/>
+	),
 );
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
index 42acdf5a..312a1f3c 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -16,130 +16,129 @@ const SheetClose = SheetPrimitive.Close;
 const SheetPortal = SheetPrimitive.Portal;
 
 const SheetOverlay = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
+	React.ElementRef<typeof SheetPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Overlay
-    className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-200 bg-black/50",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  />
+	<SheetPrimitive.Overlay
+		className={cn(
+			"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-200 bg-black/50",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	/>
 ));
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-250 gap-4 bg-background p-6 shadow-lg transition ease data-[state=closed]:duration-250 data-[state=open]:duration-250 data-[state=open]:animate-in data-[state=closed]:animate-out",
-  {
-    variants: {
-      side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-        bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
-        right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
-    },
-    defaultVariants: {
-      side: "right",
-    },
-  },
+	"fixed z-250 gap-4 bg-background p-6 shadow-lg transition ease data-[state=closed]:duration-250 data-[state=open]:duration-250 data-[state=open]:animate-in data-[state=closed]:animate-out",
+	{
+		variants: {
+			side: {
+				top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+				bottom:
+					"inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+				left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+				right:
+					"inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	},
 );
 
 interface SheetContentProps
-  extends
-    React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
-    VariantProps<typeof sheetVariants> {}
+	extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+		VariantProps<typeof sheetVariants> {}
 
 const SheetContent = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Content>,
-  SheetContentProps
+	React.ElementRef<typeof SheetPrimitive.Content>,
+	SheetContentProps
 >(({ side = "right", className, children, ...props }, ref) => (
-  <SheetPortal>
-    <SheetOverlay />
-    <SheetPrimitive.Content
-      ref={ref}
-      className={cn(sheetVariants({ side }), className)}
-      onOpenAutoFocus={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-      }}
-      {...props}
-    >
-      <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
-        <X className="size-5" />
-        <span className="sr-only">Close</span>
-      </SheetPrimitive.Close>
-      {children}
-    </SheetPrimitive.Content>
-  </SheetPortal>
+	<SheetPortal>
+		<SheetOverlay />
+		<SheetPrimitive.Content
+			ref={ref}
+			className={cn(sheetVariants({ side }), className)}
+			onOpenAutoFocus={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+			}}
+			{...props}
+		>
+			<SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 cursor-pointer rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+				<X className="size-5" />
+				<span className="sr-only">Close</span>
+			</SheetPrimitive.Close>
+			{children}
+		</SheetPrimitive.Content>
+	</SheetPortal>
 ));
 SheetContent.displayName = SheetPrimitive.Content.displayName;
 
 const SheetHeader = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-2 text-center sm:text-left",
-      className,
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col space-y-2 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
 );
 SheetHeader.displayName = "SheetHeader";
 
 const SheetFooter = ({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className,
-    )}
-    {...props}
-  />
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
 );
 SheetFooter.displayName = "SheetFooter";
 
 const SheetTitle = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+	React.ElementRef<typeof SheetPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Title
-    ref={ref}
-    className={cn("text-foreground text-lg font-semibold", className)}
-    {...props}
-  />
+	<SheetPrimitive.Title
+		ref={ref}
+		className={cn("text-foreground text-lg font-semibold", className)}
+		{...props}
+	/>
 ));
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 const SheetDescription = React.forwardRef<
-  React.ElementRef<typeof SheetPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
+	React.ElementRef<typeof SheetPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
 >(({ className, ...props }, ref) => (
-  <SheetPrimitive.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
+	<SheetPrimitive.Description
+		ref={ref}
+		className={cn("text-muted-foreground text-sm", className)}
+		{...props}
+	/>
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
 
 export {
-  Sheet,
-  SheetPortal,
-  SheetOverlay,
-  SheetTrigger,
-  SheetClose,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
+	Sheet,
+	SheetPortal,
+	SheetOverlay,
+	SheetTrigger,
+	SheetClose,
+	SheetContent,
+	SheetHeader,
+	SheetFooter,
+	SheetTitle,
+	SheetDescription,
 };
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
new file mode 100644
index 00000000..a1a520e9
--- /dev/null
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -0,0 +1,725 @@
+"use client";
+
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { PanelLeftIcon } from "lucide-react";
+import * as React from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetHeader,
+	SheetTitle,
+} from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/utils/ui";
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContextProps = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+function SidebarProvider({
+	defaultOpen = true,
+	open: openProp,
+	onOpenChange: setOpenProp,
+	className,
+	style,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	defaultOpen?: boolean;
+	open?: boolean;
+	onOpenChange?: (open: boolean) => void;
+}) {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+
+	// This is the internal state of the sidebar.
+	// We use openProp and setOpenProp for control from outside the component.
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback(
+		(value: boolean | ((value: boolean) => boolean)) => {
+			const openState = typeof value === "function" ? value(open) : value;
+			if (setOpenProp) {
+				setOpenProp(openState);
+			} else {
+				_setOpen(openState);
+			}
+
+			// This sets the cookie to keep the sidebar state.
+			document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+		},
+		[setOpenProp, open],
+	);
+
+	// Helper to toggle the sidebar.
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen, setOpenMobile]);
+
+	// Adds a keyboard shortcut to toggle the sidebar.
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (
+				event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+				(event.metaKey || event.ctrlKey)
+			) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+
+	// We add a state so that we can do data-state="expanded" or "collapsed".
+	// This makes it easier to style the sidebar with Tailwind classes.
+	const state = open ? "expanded" : "collapsed";
+
+	const contextValue = React.useMemo<SidebarContextProps>(
+		() => ({
+			state,
+			open,
+			setOpen,
+			isMobile,
+			openMobile,
+			setOpenMobile,
+			toggleSidebar,
+		}),
+		[state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
+	);
+
+	return (
+		<SidebarContext.Provider value={contextValue}>
+			<TooltipProvider delayDuration={0}>
+				<div
+					data-slot="sidebar-wrapper"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH,
+							"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+							...style,
+						} as React.CSSProperties
+					}
+					className={cn(
+						"group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+						className,
+					)}
+					{...props}
+				>
+					{children}
+				</div>
+			</TooltipProvider>
+		</SidebarContext.Provider>
+	);
+}
+
+function Sidebar({
+	side = "left",
+	variant = "sidebar",
+	collapsible = "offcanvas",
+	className,
+	children,
+	...props
+}: React.ComponentProps<"div"> & {
+	side?: "left" | "right";
+	variant?: "sidebar" | "floating" | "inset";
+	collapsible?: "offcanvas" | "icon" | "none";
+}) {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+	if (collapsible === "none") {
+		return (
+			<div
+				data-slot="sidebar"
+				className={cn(
+					"bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	}
+
+	if (isMobile) {
+		return (
+			<Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+				<SheetContent
+					data-sidebar="sidebar"
+					data-slot="sidebar"
+					data-mobile="true"
+					className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+					style={
+						{
+							"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+						} as React.CSSProperties
+					}
+					side={side}
+				>
+					<SheetHeader className="sr-only">
+						<SheetTitle>Sidebar</SheetTitle>
+						<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+					</SheetHeader>
+					<div className="flex h-full w-full flex-col">{children}</div>
+				</SheetContent>
+			</Sheet>
+		);
+	}
+
+	return (
+		<div
+			className="group peer text-sidebar-foreground hidden md:block"
+			data-state={state}
+			data-collapsible={state === "collapsed" ? collapsible : ""}
+			data-variant={variant}
+			data-side={side}
+			data-slot="sidebar"
+		>
+			{/* This is what handles the sidebar gap on desktop */}
+			<div
+				data-slot="sidebar-gap"
+				className={cn(
+					"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+					"group-data-[collapsible=offcanvas]:w-0",
+					"group-data-[side=right]:rotate-180",
+					variant === "floating" || variant === "inset"
+						? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+				)}
+			/>
+			<div
+				data-slot="sidebar-container"
+				className={cn(
+					"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+					side === "left"
+						? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+						: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+					// Adjust the padding for floating and inset variants.
+					variant === "floating" || variant === "inset"
+						? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+						: "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+					className,
+				)}
+				{...props}
+			>
+				<div
+					data-sidebar="sidebar"
+					data-slot="sidebar-inner"
+					className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+				>
+					{children}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+function SidebarTrigger({
+	className,
+	onClick,
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<Button
+			data-sidebar="trigger"
+			data-slot="sidebar-trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("size-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeftIcon />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			data-sidebar="rail"
+			data-slot="sidebar-rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+				"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+	return (
+		<main
+			data-slot="sidebar-inset"
+			className={cn(
+				"bg-background relative flex w-full flex-1 flex-col",
+				"md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarInput({
+	className,
+	...props
+}: React.ComponentProps<typeof Input>) {
+	return (
+		<Input
+			data-slot="sidebar-input"
+			data-sidebar="input"
+			className={cn("bg-background h-8 w-full shadow-none", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-header"
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-footer"
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarSeparator({
+	className,
+	...props
+}: React.ComponentProps<typeof Separator>) {
+	return (
+		<Separator
+			data-slot="sidebar-separator"
+			data-sidebar="separator"
+			className={cn("bg-sidebar-border mx-2 w-auto", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-content"
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group"
+			data-sidebar="group"
+			className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupLabel({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-label"
+			data-sidebar="group-label"
+			className={cn(
+				"text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupAction({
+	className,
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-group-action"
+			data-sidebar="group-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarGroupContent({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-group-content"
+			data-sidebar="group-content"
+			className={cn("w-full text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu"
+			data-sidebar="menu"
+			className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-item"
+			data-sidebar="menu-item"
+			className={cn("group/menu-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function SidebarMenuButton({
+	asChild = false,
+	isActive = false,
+	variant = "default",
+	size = "default",
+	tooltip,
+	className,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	isActive?: boolean;
+	tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+	const Comp = asChild ? Slot : "button";
+	const { isMobile, state } = useSidebar();
+
+	const button = (
+		<Comp
+			data-slot="sidebar-menu-button"
+			data-sidebar="menu-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+			{...props}
+		/>
+	);
+
+	if (!tooltip) {
+		return button;
+	}
+
+	if (typeof tooltip === "string") {
+		tooltip = {
+			children: tooltip,
+		};
+	}
+
+	return (
+		<Tooltip>
+			<TooltipTrigger asChild>{button}</TooltipTrigger>
+			<TooltipContent
+				side="right"
+				align="center"
+				hidden={state !== "collapsed" || isMobile}
+				{...tooltip}
+			/>
+		</Tooltip>
+	);
+}
+
+function SidebarMenuAction({
+	className,
+	asChild = false,
+	showOnHover = false,
+	...props
+}: React.ComponentProps<"button"> & {
+	asChild?: boolean;
+	showOnHover?: boolean;
+}) {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-action"
+			data-sidebar="menu-action"
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 md:after:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuBadge({
+	className,
+	...props
+}: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="sidebar-menu-badge"
+			data-sidebar="menu-badge"
+			className={cn(
+				"text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+				"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSkeleton({
+	className,
+	showIcon = false,
+	...props
+}: React.ComponentProps<"div"> & {
+	showIcon?: boolean;
+}) {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div
+			data-slot="sidebar-menu-skeleton"
+			data-sidebar="menu-skeleton"
+			className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+			{...props}
+		>
+			{showIcon && (
+				<Skeleton
+					className="size-4 rounded-md"
+					data-sidebar="menu-skeleton-icon"
+				/>
+			)}
+			<Skeleton
+				className="h-4 max-w-(--skeleton-width) flex-1"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+	return (
+		<ul
+			data-slot="sidebar-menu-sub"
+			data-sidebar="menu-sub"
+			className={cn(
+				"border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubItem({
+	className,
+	...props
+}: React.ComponentProps<"li">) {
+	return (
+		<li
+			data-slot="sidebar-menu-sub-item"
+			data-sidebar="menu-sub-item"
+			className={cn("group/menu-sub-item relative", className)}
+			{...props}
+		/>
+	);
+}
+
+function SidebarMenuSubButton({
+	asChild = false,
+	size = "md",
+	isActive = false,
+	className,
+	...props
+}: React.ComponentProps<"a"> & {
+	asChild?: boolean;
+	size?: "sm" | "md";
+	isActive?: boolean;
+}) {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			data-slot="sidebar-menu-sub-button"
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};
diff --git a/apps/web/src/components/ui/skeleton.tsx b/apps/web/src/components/ui/skeleton.tsx
index 227df5ba..bf59fec2 100644
--- a/apps/web/src/components/ui/skeleton.tsx
+++ b/apps/web/src/components/ui/skeleton.tsx
@@ -1,15 +1,15 @@
 import { cn } from "@/utils/ui";
 
 function Skeleton({
-  className,
-  ...props
+	className,
+	...props
 }: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
-      {...props}
-    />
-  );
+	return (
+		<div
+			className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+			{...props}
+		/>
+	);
 }
 
 export { Skeleton };
diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index dba25f69..2f724831 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -6,22 +6,22 @@ import { Slider as SliderPrimitive } from "radix-ui";
 import { cn } from "@/utils/ui";
 
 const Slider = React.forwardRef<
-  React.ElementRef<typeof SliderPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+	React.ElementRef<typeof SliderPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
 >(({ className, ...props }, ref) => (
-  <SliderPrimitive.Root
-    ref={ref}
-    className={cn(
-      "relative flex w-full touch-none items-center select-none",
-      className,
-    )}
-    {...props}
-  >
-    <SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
-      <SliderPrimitive.Range className="bg-primary absolute h-full" />
-    </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
-  </SliderPrimitive.Root>
+	<SliderPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex w-full touch-none items-center select-none",
+			className,
+		)}
+		{...props}
+	>
+		<SliderPrimitive.Track className="bg-primary/20 relative h-1.5 w-full grow overflow-hidden rounded-full">
+			<SliderPrimitive.Range className="bg-primary absolute h-full" />
+		</SliderPrimitive.Track>
+		<SliderPrimitive.Thumb className="border-primary/50 bg-background focus-visible:ring-ring block h-4 w-4 rounded-full border shadow-sm transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" />
+	</SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
 
diff --git a/apps/web/src/components/ui/sonner.tsx b/apps/web/src/components/ui/sonner.tsx
index 13694b43..4bae2fad 100644
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/apps/web/src/components/ui/sonner.tsx
@@ -6,30 +6,30 @@ import { Toaster as Sonner } from "sonner";
 type ToasterProps = React.ComponentProps<typeof Sonner>;
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
+	const { theme = "system" } = useTheme();
 
-  return (
-    <Sonner
-      theme={theme as ToasterProps["theme"]}
-      className="toaster group"
-      position="top-center"
-      offset={20}
-      toastOptions={{
-        classNames: {
-          toast:
-            "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
-          description: "group-[.toast]:text-muted-foreground",
-          actionButton:
-            "group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
-          cancelButton:
-            "group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
-        },
-      }}
-      expand={false}
-      richColors
-      {...props}
-    />
-  );
+	return (
+		<Sonner
+			theme={theme as ToasterProps["theme"]}
+			className="toaster group"
+			position="top-center"
+			offset={20}
+			toastOptions={{
+				classNames: {
+					toast:
+						"group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
+					description: "group-[.toast]:text-muted-foreground",
+					actionButton:
+						"group-[.toast]:bg-primary group-[.toast]:text-primary-foreground",
+					cancelButton:
+						"group-[.toast]:bg-muted group-[.toast]:text-muted-foreground",
+				},
+			}}
+			expand={false}
+			richColors
+			{...props}
+		/>
+	);
 };
 
 export { Toaster };
diff --git a/apps/web/src/components/ui/split-button.tsx b/apps/web/src/components/ui/split-button.tsx
index ac7cfe04..3d362b9e 100644
--- a/apps/web/src/components/ui/split-button.tsx
+++ b/apps/web/src/components/ui/split-button.tsx
@@ -1,89 +1,89 @@
-import { Button, ButtonProps } from "@/components/ui/button";
+import { Button, type ButtonProps } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { ReactNode, forwardRef } from "react";
+import { type ReactNode, forwardRef } from "react";
 import { cn } from "@/utils/ui";
 
 interface SplitButtonProps {
-  children: ReactNode;
-  className?: string;
+	children: ReactNode;
+	className?: string;
 }
 
 interface SplitButtonSideProps extends Omit<ButtonProps, "variant" | "size"> {
-  children: ReactNode;
+	children: ReactNode;
 }
 
 const SplitButton = forwardRef<HTMLDivElement, SplitButtonProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          "border-input bg-panel-accent inline-flex h-7 overflow-hidden rounded-full border",
-          className,
-        )}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
+	({ children, className, ...props }, ref) => {
+		return (
+			<div
+				ref={ref}
+				className={cn(
+					"border-input bg-panel-accent inline-flex h-7 overflow-hidden rounded-full border",
+					className,
+				)}
+				{...props}
+			>
+				{children}
+			</div>
+		);
+	},
 );
 SplitButton.displayName = "SplitButton";
 
 const SplitButtonSide = forwardRef<
-  HTMLButtonElement,
-  SplitButtonSideProps & { paddingClass: string }
+	HTMLButtonElement,
+	SplitButtonSideProps & { paddingClass: string }
 >(({ children, className, paddingClass, onClick, ...props }, ref) => {
-  return (
-    <Button
-      ref={ref}
-      variant="text"
-      className={cn(
-        "bg-panel-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100 transition-colors",
-        onClick
-          ? "hover:bg-foreground/10 cursor-pointer hover:opacity-100"
-          : "cursor-default select-text",
-        paddingClass,
-        className,
-      )}
-      onClick={onClick}
-      {...props}
-    >
-      {typeof children === "string" ? (
-        <span className="cursor-text font-normal">{children}</span>
-      ) : (
-        children
-      )}
-    </Button>
-  );
+	return (
+		<Button
+			ref={ref}
+			variant="text"
+			className={cn(
+				"bg-panel-accent disabled:text-muted-foreground h-full gap-0 rounded-none border-0 font-normal !opacity-100 transition-colors",
+				onClick
+					? "hover:bg-foreground/10 cursor-pointer hover:opacity-100"
+					: "cursor-default select-text",
+				paddingClass,
+				className,
+			)}
+			onClick={onClick}
+			{...props}
+		>
+			{typeof children === "string" ? (
+				<span className="cursor-text font-normal">{children}</span>
+			) : (
+				children
+			)}
+		</Button>
+	);
 });
 SplitButtonSide.displayName = "SplitButtonSide";
 
 const SplitButtonLeft = forwardRef<HTMLButtonElement, SplitButtonSideProps>(
-  ({ ...props }, ref) => {
-    return <SplitButtonSide ref={ref} paddingClass="pl-3 pr-2" {...props} />;
-  },
+	({ ...props }, ref) => {
+		return <SplitButtonSide ref={ref} paddingClass="pl-3 pr-2" {...props} />;
+	},
 );
 SplitButtonLeft.displayName = "SplitButtonLeft";
 
 const SplitButtonRight = forwardRef<HTMLButtonElement, SplitButtonSideProps>(
-  ({ ...props }, ref) => {
-    return <SplitButtonSide ref={ref} paddingClass="pl-2 pr-3" {...props} />;
-  },
+	({ ...props }, ref) => {
+		return <SplitButtonSide ref={ref} paddingClass="pl-2 pr-3" {...props} />;
+	},
 );
 SplitButtonRight.displayName = "SplitButtonRight";
 
 const SplitButtonSeparator = forwardRef<HTMLDivElement, { className?: string }>(
-  ({ className, ...props }, ref) => {
-    return (
-      <Separator
-        ref={ref}
-        orientation="vertical"
-        className={cn("bg-foreground/15 h-full", className)}
-        {...props}
-      />
-    );
-  },
+	({ className, ...props }, ref) => {
+		return (
+			<Separator
+				ref={ref}
+				orientation="vertical"
+				className={cn("bg-foreground/15 h-full", className)}
+				{...props}
+			/>
+		);
+	},
 );
 SplitButtonSeparator.displayName = "SplitButtonSeparator";
 
diff --git a/apps/web/src/components/ui/switch.tsx b/apps/web/src/components/ui/switch.tsx
index 13bd0c49..e8c35ede 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/apps/web/src/components/ui/switch.tsx
@@ -6,23 +6,23 @@ import { Switch as SwitchPrimitives } from "radix-ui";
 import { cn } from "@/utils/ui";
 
 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+	React.ElementRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"bg-background pointer-events-none block h-4 w-4 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</SwitchPrimitives.Root>
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
diff --git a/apps/web/src/components/ui/table.tsx b/apps/web/src/components/ui/table.tsx
index b0f61b9c..a1871623 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/apps/web/src/components/ui/table.tsx
@@ -3,118 +3,118 @@ import * as React from "react";
 import { cn } from "@/utils/ui";
 
 const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
+	HTMLTableElement,
+	React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
+	<div className="relative w-full overflow-auto">
+		<table
+			ref={ref}
+			className={cn("w-full caption-bottom text-sm", className)}
+			{...props}
+		/>
+	</div>
 ));
 Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+	<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
 ));
 TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
+	<tbody
+		ref={ref}
+		className={cn("[&_tr:last-child]:border-0", className)}
+		{...props}
+	/>
 ));
 TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
+	HTMLTableSectionElement,
+	React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "bg-muted/50 border-t font-medium last:[&>tr]:border-b-0",
-      className,
-    )}
-    {...props}
-  />
+	<tfoot
+		ref={ref}
+		className={cn(
+			"bg-muted/50 border-t font-medium last:[&>tr]:border-b-0",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
+	HTMLTableRowElement,
+	React.HTMLAttributes<HTMLTableRowElement>
 >(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
-      className,
-    )}
-    {...props}
-  />
+	<tr
+		ref={ref}
+		className={cn(
+			"hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
+	HTMLTableCellElement,
+	React.ThHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className,
-    )}
-    {...props}
-  />
+	<th
+		ref={ref}
+		className={cn(
+			"text-muted-foreground h-10 px-2 text-left align-middle font-medium [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
+	HTMLTableCellElement,
+	React.TdHTMLAttributes<HTMLTableCellElement>
 >(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn(
-      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
-      className,
-    )}
-    {...props}
-  />
+	<td
+		ref={ref}
+		className={cn(
+			"p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
+	HTMLTableCaptionElement,
+	React.HTMLAttributes<HTMLTableCaptionElement>
 >(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("text-muted-foreground mt-4 text-sm", className)}
-    {...props}
-  />
+	<caption
+		ref={ref}
+		className={cn("text-muted-foreground mt-4 text-sm", className)}
+		{...props}
+	/>
 ));
 TableCaption.displayName = "TableCaption";
 
 export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
+	Table,
+	TableHeader,
+	TableBody,
+	TableFooter,
+	TableHead,
+	TableRow,
+	TableCell,
+	TableCaption,
 };
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index 763324c3..3668477c 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -8,47 +8,47 @@ import { cn } from "@/utils/ui";
 const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "text-muted-foreground inline-flex h-auto items-center justify-center gap-2 rounded-lg bg-transparent p-0",
-      className,
-    )}
-    {...props}
-  />
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn(
+			"text-muted-foreground inline-flex h-auto items-center justify-center gap-2 rounded-lg bg-transparent p-0",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-panel-accent data-[state=active]:text-foreground inline-flex cursor-pointer items-center justify-center rounded-lg px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"ring-offset-background focus-visible:ring-ring data-[state=active]:bg-panel-accent data-[state=active]:text-foreground inline-flex cursor-pointer items-center justify-center rounded-lg px-3 py-1 text-sm font-medium whitespace-nowrap focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
-      className,
-    )}
-    {...props}
-  />
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"ring-offset-background focus-visible:ring-ring mt-2 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+			className,
+		)}
+		{...props}
+	/>
 ));
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 40cb1ada..baf73f9d 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -3,21 +3,21 @@ import * as React from "react";
 import { cn } from "@/utils/ui";
 
 const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
+	HTMLTextAreaElement,
+	React.ComponentProps<"textarea">
 >(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-accent/50 flex min-h-[60px] w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
+	return (
+		<textarea
+			className={cn(
+				"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input bg-accent/50 flex min-h-[60px] w-full rounded-md border px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+				"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
+				"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+				className,
+			)}
+			ref={ref}
+			{...props}
+		/>
+	);
 });
 Textarea.displayName = "Textarea";
 
diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
index 24a34da0..915cecf0 100644
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -10,105 +10,105 @@ import { cn } from "@/utils/ui";
 const ToastProvider = ToastPrimitives.Provider;
 
 const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+	React.ElementRef<typeof ToastPrimitives.Viewport>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
-      className,
-    )}
-    {...props}
-  />
+	<ToastPrimitives.Viewport
+		ref={ref}
+		className={cn(
+			"fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:top-auto sm:right-0 sm:bottom-0 sm:flex-col md:max-w-[420px]",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
-  {
-    variants: {
-      variant: {
-        default: "border bg-background text-foreground",
-        destructive:
-          "destructive group border-destructive/35 bg-destructive/15 text-destructive-foreground backdrop-blur-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
+	"group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
+	{
+		variants: {
+			variant: {
+				default: "border bg-background text-foreground",
+				destructive:
+					"destructive group border-destructive/35 bg-destructive/15 text-destructive-foreground backdrop-blur-lg",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
+	React.ElementRef<typeof ToastPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+		VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  );
+	return (
+		<ToastPrimitives.Root
+			ref={ref}
+			className={cn(toastVariants({ variant }), className)}
+			{...props}
+		/>
+	);
 });
 Toast.displayName = ToastPrimitives.Root.displayName;
 
 const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+	React.ElementRef<typeof ToastPrimitives.Action>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      "hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground group-[.destructive]:focus-visible::ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
+	<ToastPrimitives.Action
+		ref={ref}
+		className={cn(
+			"hover:bg-secondary focus:ring-ring group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground group-[.destructive]:focus-visible::ring-destructive inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors focus-visible:ring-1 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50",
+			className,
+		)}
+		{...props}
+	/>
 ));
 ToastAction.displayName = ToastPrimitives.Action.displayName;
 
 const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+	React.ElementRef<typeof ToastPrimitives.Close>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      "text-foreground/50 hover:text-foreground focus-visible::ring-1 group-[.destructive]:text-muted-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 hover:group-[.destructive]:text-red-50 focus:opacity-100 focus:outline-hidden focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
-      className,
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
+	<ToastPrimitives.Close
+		ref={ref}
+		className={cn(
+			"text-foreground/50 hover:text-foreground focus-visible::ring-1 group-[.destructive]:text-muted-foreground absolute top-1 right-1 rounded-md p-1 opacity-0 transition-opacity group-hover:opacity-100 hover:group-[.destructive]:text-red-50 focus:opacity-100 focus:outline-hidden focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
+			className,
+		)}
+		toast-close=""
+		{...props}
+	>
+		<X className="h-4 w-4" />
+	</ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
 
 const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+	React.ElementRef<typeof ToastPrimitives.Title>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn("text-sm font-semibold [&+div]:text-xs", className)}
-    {...props}
-  />
+	<ToastPrimitives.Title
+		ref={ref}
+		className={cn("text-sm font-semibold [&+div]:text-xs", className)}
+		{...props}
+	/>
 ));
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 
 const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+	React.ElementRef<typeof ToastPrimitives.Description>,
+	React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn("text-sm opacity-90", className)}
-    {...props}
-  />
+	<ToastPrimitives.Description
+		ref={ref}
+		className={cn("text-sm opacity-90", className)}
+		{...props}
+	/>
 ));
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 
@@ -117,13 +117,13 @@ type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
 type ToastActionElement = React.ReactElement<typeof ToastAction>;
 
 export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
+	type ToastProps,
+	type ToastActionElement,
+	ToastProvider,
+	ToastViewport,
+	Toast,
+	ToastTitle,
+	ToastDescription,
+	ToastClose,
+	ToastAction,
 };
diff --git a/apps/web/src/components/ui/toggle-group.tsx b/apps/web/src/components/ui/toggle-group.tsx
index 2f641867..66368d50 100644
--- a/apps/web/src/components/ui/toggle-group.tsx
+++ b/apps/web/src/components/ui/toggle-group.tsx
@@ -2,58 +2,58 @@
 
 import * as React from "react";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
-import { type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 
 import { cn } from "@/utils/ui";
 import { toggleVariants } from "./toggle";
 
 const ToggleGroupContext = React.createContext<
-  VariantProps<typeof toggleVariants>
+	VariantProps<typeof toggleVariants>
 >({
-  size: "default",
-  variant: "default",
+	size: "default",
+	variant: "default",
 });
 
 const ToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, children, ...props }, ref) => (
-  <ToggleGroupPrimitive.Root
-    ref={ref}
-    className={cn("flex items-center justify-center gap-1", className)}
-    {...props}
-  >
-    <ToggleGroupContext.Provider value={{ variant, size }}>
-      {children}
-    </ToggleGroupContext.Provider>
-  </ToggleGroupPrimitive.Root>
+	<ToggleGroupPrimitive.Root
+		ref={ref}
+		className={cn("flex items-center justify-center gap-1", className)}
+		{...props}
+	>
+		<ToggleGroupContext.Provider value={{ variant, size }}>
+			{children}
+		</ToggleGroupContext.Provider>
+	</ToggleGroupPrimitive.Root>
 ));
 
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 
 const ToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+		VariantProps<typeof toggleVariants>
 >(({ className, children, variant, size, ...props }, ref) => {
-  const context = React.useContext(ToggleGroupContext);
+	const context = React.useContext(ToggleGroupContext);
 
-  return (
-    <ToggleGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        toggleVariants({
-          variant: context.variant || variant,
-          size: context.size || size,
-        }),
-        className,
-      )}
-      {...props}
-    >
-      {children}
-    </ToggleGroupPrimitive.Item>
-  );
+	return (
+		<ToggleGroupPrimitive.Item
+			ref={ref}
+			className={cn(
+				toggleVariants({
+					variant: context.variant || variant,
+					size: context.size || size,
+				}),
+				className,
+			)}
+			{...props}
+		>
+			{children}
+		</ToggleGroupPrimitive.Item>
+	);
 });
 
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
diff --git a/apps/web/src/components/ui/toggle.tsx b/apps/web/src/components/ui/toggle.tsx
index 7c88245d..a73ce51b 100644
--- a/apps/web/src/components/ui/toggle.tsx
+++ b/apps/web/src/components/ui/toggle.tsx
@@ -7,37 +7,37 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/utils/ui";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-transparent",
-        outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
-      },
-      size: {
-        default: "h-9 px-2 min-w-9",
-        sm: "h-8 px-1.5 min-w-8",
-        lg: "h-10 px-2.5 min-w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
+	"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default: "bg-transparent",
+				outline:
+					"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+			},
+			size: {
+				default: "h-9 px-2 min-w-9",
+				sm: "h-8 px-1.5 min-w-8",
+				lg: "h-10 px-2.5 min-w-10",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
 );
 
 const Toggle = React.forwardRef<
-  React.ElementRef<typeof TogglePrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-    VariantProps<typeof toggleVariants>
+	React.ElementRef<typeof TogglePrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+		VariantProps<typeof toggleVariants>
 >(({ className, variant, size, ...props }, ref) => (
-  <TogglePrimitive.Root
-    ref={ref}
-    className={cn(toggleVariants({ variant, size, className }))}
-    {...props}
-  />
+	<TogglePrimitive.Root
+		ref={ref}
+		className={cn(toggleVariants({ variant, size, className }))}
+		{...props}
+	/>
 ));
 
 Toggle.displayName = TogglePrimitive.Root.displayName;
diff --git a/apps/web/src/components/ui/tooltip.tsx b/apps/web/src/components/ui/tooltip.tsx
index fd8d0144..769ac360 100644
--- a/apps/web/src/components/ui/tooltip.tsx
+++ b/apps/web/src/components/ui/tooltip.tsx
@@ -11,65 +11,64 @@ const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;
 
 const tooltipVariants = cva(
-  "z-50 overflow-visible rounded-sm text-sm shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-  {
-    variants: {
-      variant: {
-        default: "bg-popover text-popover-foreground border px-3 py-1.5",
-        destructive:
-          "bg-destructive/10 text-destructive dark:bg-destructive/20 border-destructive [border-width:0.5px]",
-        outline: "border-border",
-        important:
-          "bg-amber-100/90 text-amber-900 dark:bg-amber-900/20 dark:text-amber-300 border-amber-900 [border-width:0.5px]",
-        promotions:
-          "bg-red-100/90 text-red-900 dark:bg-red-900/20 dark:text-red-300 border-red-900 [border-width:0.5px]",
-        personal:
-          "bg-green-100/90 text-green-900 dark:bg-green-900/20 dark:text-green-300 border-green-900 [border-width:0.5px]",
-        updates:
-          "bg-purple-100/90 text-purple-900 dark:bg-purple-900/20 dark:text-purple-300 border-purple-900 [border-width:0.5px]",
-        forums:
-          "bg-blue-100/90 text-blue-900 dark:bg-blue-900/20 dark:text-blue-300 border-blue-900 [border-width:0.5px]",
-        sidebar: "bg-white dark:bg-[#413F3E] p-2.5 flex flex-col gap-2",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
+	"z-50 overflow-visible rounded-sm text-sm shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+	{
+		variants: {
+			variant: {
+				default: "bg-popover text-popover-foreground border px-3 py-1.5",
+				destructive:
+					"bg-destructive/10 text-destructive dark:bg-destructive/20 border-destructive [border-width:0.5px]",
+				outline: "border-border",
+				important:
+					"bg-amber-100/90 text-amber-900 dark:bg-amber-900/20 dark:text-amber-300 border-amber-900 [border-width:0.5px]",
+				promotions:
+					"bg-red-100/90 text-red-900 dark:bg-red-900/20 dark:text-red-300 border-red-900 [border-width:0.5px]",
+				personal:
+					"bg-green-100/90 text-green-900 dark:bg-green-900/20 dark:text-green-300 border-green-900 [border-width:0.5px]",
+				updates:
+					"bg-purple-100/90 text-purple-900 dark:bg-purple-900/20 dark:text-purple-300 border-purple-900 [border-width:0.5px]",
+				forums:
+					"bg-blue-100/90 text-blue-900 dark:bg-blue-900/20 dark:text-blue-300 border-blue-900 [border-width:0.5px]",
+				sidebar: "bg-white dark:bg-[#413F3E] p-2.5 flex flex-col gap-2",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
 );
 
 interface TooltipContentProps
-  extends
-    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
-    VariantProps<typeof tooltipVariants> {}
+	extends React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>,
+		VariantProps<typeof tooltipVariants> {}
 
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  TooltipContentProps
+	React.ElementRef<typeof TooltipPrimitive.Content>,
+	TooltipContentProps
 >(({ className, sideOffset = 4, variant, ...props }, ref) => (
-  <TooltipPrimitive.Content
-    ref={ref}
-    sideOffset={sideOffset}
-    className={cn(tooltipVariants({ variant }), className)}
-    {...props}
-  >
-    {variant === "sidebar" && (
-      <svg
-        width="6"
-        height="10"
-        viewBox="0 0 6 10"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        className="absolute top-1/2 left-[-6px] -translate-y-1/2"
-      >
-        <path
-          d="M6 0L0 5L6 10V0Z"
-          className="fill-white/80 dark:fill-[#413F3E]"
-        />
-      </svg>
-    )}
-    {props.children}
-  </TooltipPrimitive.Content>
+	<TooltipPrimitive.Content
+		ref={ref}
+		sideOffset={sideOffset}
+		className={cn(tooltipVariants({ variant }), className)}
+		{...props}
+	>
+		{variant === "sidebar" && (
+			<svg
+				width="6"
+				height="10"
+				viewBox="0 0 6 10"
+				fill="none"
+				xmlns="http://www.w3.org/2000/svg"
+				className="absolute top-1/2 left-[-6px] -translate-y-1/2"
+			>
+				<path
+					d="M6 0L0 5L6 10V0Z"
+					className="fill-white/80 dark:fill-[#413F3E]"
+				/>
+			</svg>
+		)}
+		{props.children}
+	</TooltipPrimitive.Content>
 ));
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 
diff --git a/apps/web/src/constants/captions-constants.ts b/apps/web/src/constants/captions-constants.ts
deleted file mode 100644
index 7292de58..00000000
--- a/apps/web/src/constants/captions-constants.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Language } from "@/components/language-select";
-
-export const LANGUAGES: Language[] = [
-  { code: "US", name: "English" },
-  { code: "ES", name: "Spanish" },
-  { code: "IT", name: "Italian" },
-  { code: "FR", name: "French" },
-  { code: "DE", name: "German" },
-  { code: "PT", name: "Portuguese" },
-  { code: "RU", name: "Russian" },
-  { code: "JP", name: "Japanese" },
-  { code: "CN", name: "Chinese" },
-];
diff --git a/apps/web/src/constants/editor-constants.ts b/apps/web/src/constants/editor-constants.ts
index e8d2f661..d9570825 100644
--- a/apps/web/src/constants/editor-constants.ts
+++ b/apps/web/src/constants/editor-constants.ts
@@ -1,15 +1,15 @@
 import type { TPlatformLayout } from "@/types/editor";
 
 export const PLATFORM_LAYOUTS: Record<TPlatformLayout, string> = {
-  tiktok: "TikTok",
+	tiktok: "TikTok",
 };
 
 export const PANEL_CONFIG = {
-  panels: {
-    tools: 25,
-    preview: 50,
-    properties: 25,
-    mainContent: 70,
-    timeline: 30,
-  },
+	panels: {
+		tools: 25,
+		preview: 50,
+		properties: 25,
+		mainContent: 70,
+		timeline: 30,
+	},
 };
diff --git a/apps/web/src/constants/export-constants.ts b/apps/web/src/constants/export-constants.ts
index cca7a36c..4e27aae5 100644
--- a/apps/web/src/constants/export-constants.ts
+++ b/apps/web/src/constants/export-constants.ts
@@ -1,12 +1,12 @@
-import { ExportOptions } from "@/types/export";
+import type { ExportOptions } from "@/types/export";
 
 export const DEFAULT_EXPORT_OPTIONS = {
-  format: "mp4",
-  quality: "high",
-  includeAudio: true,
+	format: "mp4",
+	quality: "high",
+	includeAudio: true,
 } satisfies ExportOptions;
 
 export const EXPORT_MIME_TYPES = {
-  webm: "video/webm",
-  mp4: "video/mp4",
+	webm: "video/webm",
+	mp4: "video/mp4",
 } as const;
diff --git a/apps/web/src/constants/font-constants.ts b/apps/web/src/constants/font-constants.ts
index a1c4e4d5..46f84848 100644
--- a/apps/web/src/constants/font-constants.ts
+++ b/apps/web/src/constants/font-constants.ts
@@ -1,66 +1,66 @@
 export interface FontOption {
-  value: string;
-  label: string;
-  category: "system" | "google" | "custom";
-  weights?: number[];
-  hasClassName?: boolean;
+	value: string;
+	label: string;
+	category: "system" | "google" | "custom";
+	weights?: number[];
+	hasClassName?: boolean;
 }
 
 export const FONT_OPTIONS: FontOption[] = [
-  // System fonts (always available)
-  { value: "Arial", label: "Arial", category: "system", hasClassName: false },
-  {
-    value: "Helvetica",
-    label: "Helvetica",
-    category: "system",
-    hasClassName: false,
-  },
-  {
-    value: "Times New Roman",
-    label: "Times New Roman",
-    category: "system",
-    hasClassName: false,
-  },
-  {
-    value: "Georgia",
-    label: "Georgia",
-    category: "system",
-    hasClassName: false,
-  },
+	// System fonts (always available)
+	{ value: "Arial", label: "Arial", category: "system", hasClassName: false },
+	{
+		value: "Helvetica",
+		label: "Helvetica",
+		category: "system",
+		hasClassName: false,
+	},
+	{
+		value: "Times New Roman",
+		label: "Times New Roman",
+		category: "system",
+		hasClassName: false,
+	},
+	{
+		value: "Georgia",
+		label: "Georgia",
+		category: "system",
+		hasClassName: false,
+	},
 
-  // Google Fonts (loaded in layout.tsx)
-  {
-    value: "Inter",
-    label: "Inter",
-    category: "google",
-    weights: [400, 700],
-    hasClassName: true,
-  },
-  {
-    value: "Roboto",
-    label: "Roboto",
-    category: "google",
-    weights: [400, 700],
-    hasClassName: true,
-  },
-  {
-    value: "Open Sans",
-    label: "Open Sans",
-    category: "google",
-    hasClassName: true,
-  },
-  {
-    value: "Playfair Display",
-    label: "Playfair Display",
-    category: "google",
-    hasClassName: true,
-  },
-  {
-    value: "Comic Neue",
-    label: "Comic Neue",
-    category: "google",
-    hasClassName: false,
-  },
+	// Google Fonts (loaded in layout.tsx)
+	{
+		value: "Inter",
+		label: "Inter",
+		category: "google",
+		weights: [400, 700],
+		hasClassName: true,
+	},
+	{
+		value: "Roboto",
+		label: "Roboto",
+		category: "google",
+		weights: [400, 700],
+		hasClassName: true,
+	},
+	{
+		value: "Open Sans",
+		label: "Open Sans",
+		category: "google",
+		hasClassName: true,
+	},
+	{
+		value: "Playfair Display",
+		label: "Playfair Display",
+		category: "google",
+		hasClassName: true,
+	},
+	{
+		value: "Comic Neue",
+		label: "Comic Neue",
+		category: "google",
+		hasClassName: false,
+	},
 ] as const;
 
 export const DEFAULT_FONT = "Arial";
@@ -70,10 +70,10 @@ export type FontFamily = (typeof FONT_OPTIONS)[number]["value"];
 
 // Helper functions
 export const getFontByValue = (value: string): FontOption | undefined =>
-  FONT_OPTIONS.find((font) => font.value === value);
+	FONT_OPTIONS.find((font) => font.value === value);
 
 export const getGoogleFonts = (): FontOption[] =>
-  FONT_OPTIONS.filter((font) => font.category === "google");
+	FONT_OPTIONS.filter((font) => font.category === "google");
 
 export const getSystemFonts = (): FontOption[] =>
-  FONT_OPTIONS.filter((font) => font.category === "system");
+	FONT_OPTIONS.filter((font) => font.category === "system");
diff --git a/apps/web/src/constants/language-constants.ts b/apps/web/src/constants/language-constants.ts
new file mode 100644
index 00000000..3da36661
--- /dev/null
+++ b/apps/web/src/constants/language-constants.ts
@@ -0,0 +1,11 @@
+export const LANGUAGES = [
+	{ code: "en", name: "English" },
+	{ code: "es", name: "Spanish" },
+	{ code: "it", name: "Italian" },
+	{ code: "fr", name: "French" },
+	{ code: "de", name: "German" },
+	{ code: "pt", name: "Portuguese" },
+	{ code: "ru", name: "Russian" },
+	{ code: "ja", name: "Japanese" },
+	{ code: "zh", name: "Chinese" },
+] as const;
diff --git a/apps/web/src/constants/project-constants.ts b/apps/web/src/constants/project-constants.ts
index 999af9fc..7e3f06b6 100644
--- a/apps/web/src/constants/project-constants.ts
+++ b/apps/web/src/constants/project-constants.ts
@@ -1,24 +1,24 @@
-import { TCanvasSize } from "@/types/project";
+import type { TCanvasSize } from "@/types/project";
 
 export const DEFAULT_CANVAS_PRESETS: TCanvasSize[] = [
-  { width: 1920, height: 1080 },
-  { width: 1080, height: 1920 },
-  { width: 1080, height: 1080 },
-  { width: 1440, height: 1080 },
+	{ width: 1920, height: 1080 },
+	{ width: 1080, height: 1920 },
+	{ width: 1080, height: 1080 },
+	{ width: 1440, height: 1080 },
 ];
 
 export const FPS_PRESETS = [
-  { value: "24", label: "24 fps" },
-  { value: "25", label: "25 fps" },
-  { value: "30", label: "30 fps" },
-  { value: "60", label: "60 fps" },
-  { value: "120", label: "120 fps" },
+	{ value: "24", label: "24 fps" },
+	{ value: "25", label: "25 fps" },
+	{ value: "30", label: "30 fps" },
+	{ value: "60", label: "60 fps" },
+	{ value: "120", label: "120 fps" },
 ] as const;
 
 export const BLUR_INTENSITY_PRESETS: { label: string; value: number }[] = [
-  { label: "Light", value: 4 },
-  { label: "Medium", value: 8 },
-  { label: "Heavy", value: 18 },
+	{ label: "Light", value: 4 },
+	{ label: "Medium", value: 8 },
+	{ label: "Heavy", value: 18 },
 ] as const;
 
 export const DEFAULT_CANVAS_SIZE: TCanvasSize = { width: 1920, height: 1080 };
diff --git a/apps/web/src/constants/site-constants.ts b/apps/web/src/constants/site-constants.ts
index 60ab5404..096a1916 100644
--- a/apps/web/src/constants/site-constants.ts
+++ b/apps/web/src/constants/site-constants.ts
@@ -3,70 +3,70 @@ import { DataBuddyIcon, MarbleIcon, VercelIcon } from "@opencut/ui/icons";
 export const SITE_URL = "https://opencut.app";
 
 export const SITE_INFO = {
-  title: "OpenCut",
-  description:
-    "A simple but powerful video editor that gets the job done. In your browser.",
-  url: SITE_URL,
-  openGraphImage: "/open-graph/default.jpg",
-  twitterImage: "/open-graph/default.jpg",
-  favicon: "/favicon.ico",
+	title: "OpenCut",
+	description:
+		"A simple but powerful video editor that gets the job done. In your browser.",
+	url: SITE_URL,
+	openGraphImage: "/open-graph/default.jpg",
+	twitterImage: "/open-graph/default.jpg",
+	favicon: "/favicon.ico",
 };
 
 export type ExternalTool = {
-  name: string;
-  description: string;
-  url: string;
-  icon: React.ElementType;
+	name: string;
+	description: string;
+	url: string;
+	icon: React.ElementType;
 };
 
 export const EXTERNAL_TOOLS: ExternalTool[] = [
-  {
-    name: "Marble",
-    description:
-      "Modern headless CMS for content management and the blog for OpenCut",
-    url: "https://marblecms.com?utm_source=opencut",
-    icon: MarbleIcon,
-  },
-  {
-    name: "Vercel",
-    description: "Platform where we deploy and host OpenCut",
-    url: "https://vercel.com?utm_source=opencut",
-    icon: VercelIcon,
-  },
-  {
-    name: "Databuddy",
-    description: "GDPR compliant analytics and user insights for OpenCut",
-    url: "https://databuddy.cc?utm_source=opencut",
-    icon: DataBuddyIcon,
-  },
+	{
+		name: "Marble",
+		description:
+			"Modern headless CMS for content management and the blog for OpenCut",
+		url: "https://marblecms.com?utm_source=opencut",
+		icon: MarbleIcon,
+	},
+	{
+		name: "Vercel",
+		description: "Platform where we deploy and host OpenCut",
+		url: "https://vercel.com?utm_source=opencut",
+		icon: VercelIcon,
+	},
+	{
+		name: "Databuddy",
+		description: "GDPR compliant analytics and user insights for OpenCut",
+		url: "https://databuddy.cc?utm_source=opencut",
+		icon: DataBuddyIcon,
+	},
 ];
 
 export const DEFAULT_LOGO_URL = "/logos/opencut/svg/logo.svg";
 
 export const SOCIAL_LINKS = {
-  x: "https://x.com/opencutapp",
-  github: "https://github.com/OpenCut-app/OpenCut",
-  discord: "https://discord.com/invite/Mu3acKZvCp",
+	x: "https://x.com/opencutapp",
+	github: "https://github.com/OpenCut-app/OpenCut",
+	discord: "https://discord.com/invite/Mu3acKZvCp",
 };
 
 export type Sponsor = {
-  name: string;
-  url: string;
-  logo: string;
-  description: string;
+	name: string;
+	url: string;
+	logo: string;
+	description: string;
 };
 
 export const SPONSORS: Sponsor[] = [
-  {
-    name: "Fal.ai",
-    url: "https://fal.ai?utm_source=opencut",
-    logo: "/logos/others/fal.svg",
-    description: "Generative image, video, and audio models all in one place.",
-  },
-  {
-    name: "Vercel",
-    url: "https://vercel.com?utm_source=opencut",
-    logo: "/logos/others/vercel.svg",
-    description: "Platform where we deploy and host OpenCut.",
-  },
+	{
+		name: "Fal.ai",
+		url: "https://fal.ai?utm_source=opencut",
+		logo: "/logos/others/fal.svg",
+		description: "Generative image, video, and audio models all in one place.",
+	},
+	{
+		name: "Vercel",
+		url: "https://vercel.com?utm_source=opencut",
+		logo: "/logos/others/vercel.svg",
+		description: "Platform where we deploy and host OpenCut.",
+	},
 ];
diff --git a/apps/web/src/constants/stickers-constants.ts b/apps/web/src/constants/stickers-constants.ts
index 996dbea2..3c98d4f7 100644
--- a/apps/web/src/constants/stickers-constants.ts
+++ b/apps/web/src/constants/stickers-constants.ts
@@ -1,16 +1,16 @@
 export const STICKER_CATEGORIES = [
-  "all",
-  "general",
-  "brands",
-  "emoji",
+	"all",
+	"general",
+	"brands",
+	"emoji",
 ] as const;
 
 export const STICKER_CATEGORY_CONFIG: Record<
-  (typeof STICKER_CATEGORIES)[number],
-  string | undefined
+	(typeof STICKER_CATEGORIES)[number],
+	string | undefined
 > = {
-  all: undefined,
-  general: "General",
-  brands: "Brands / Social",
-  emoji: "Emoji",
+	all: undefined,
+	general: "General",
+	brands: "Brands / Social",
+	emoji: "Emoji",
 };
diff --git a/apps/web/src/constants/text-constants.ts b/apps/web/src/constants/text-constants.ts
index 8bfb1d97..a63891f2 100644
--- a/apps/web/src/constants/text-constants.ts
+++ b/apps/web/src/constants/text-constants.ts
@@ -1,29 +1,29 @@
-import { TextElement } from "@/types/timeline";
+import type { TextElement } from "@/types/timeline";
 import { TIMELINE_CONSTANTS } from "./timeline-constants";
 
 export const DEFAULT_TEXT_ELEMENT: Omit<TextElement, "id"> = {
-  type: "text",
-  name: "Text",
-  content: "Default Text",
-  fontSize: 48,
-  fontFamily: "Arial",
-  color: "#ffffff",
-  backgroundColor: "transparent",
-  textAlign: "center",
-  fontWeight: "normal",
-  fontStyle: "normal",
-  textDecoration: "none",
-  duration: TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
-  startTime: 0,
-  trimStart: 0,
-  trimEnd: 0,
-  transform: {
-    scale: 1,
-    position: {
-      x: 0,
-      y: 0,
-    },
-    rotate: 0,
-  },
-  opacity: 1,
+	type: "text",
+	name: "Text",
+	content: "Default Text",
+	fontSize: 48,
+	fontFamily: "Arial",
+	color: "#ffffff",
+	backgroundColor: "transparent",
+	textAlign: "center",
+	fontWeight: "normal",
+	fontStyle: "normal",
+	textDecoration: "none",
+	duration: TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
+	startTime: 0,
+	trimStart: 0,
+	trimEnd: 0,
+	transform: {
+		scale: 1,
+		position: {
+			x: 0,
+			y: 0,
+		},
+		rotate: 0,
+	},
+	opacity: 1,
 };
diff --git a/apps/web/src/constants/timeline-constants.tsx b/apps/web/src/constants/timeline-constants.tsx
index 34fed62d..4058ed03 100644
--- a/apps/web/src/constants/timeline-constants.tsx
+++ b/apps/web/src/constants/timeline-constants.tsx
@@ -2,43 +2,43 @@ import type { TrackType } from "@/types/timeline";
 import { Video, TypeIcon, Music, Sticker } from "lucide-react";
 
 export const TRACK_COLORS: Record<TrackType, { background: string }> = {
-  video: {
-    background: "transparent",
-  },
-  text: {
-    background: "bg-[#5DBAA0]",
-  },
-  audio: {
-    background: "bg-[#915DBE]",
-  },
-  sticker: {
-    background: "bg-amber-500",
-  },
+	video: {
+		background: "transparent",
+	},
+	text: {
+		background: "bg-[#5DBAA0]",
+	},
+	audio: {
+		background: "bg-[#915DBE]",
+	},
+	sticker: {
+		background: "bg-amber-500",
+	},
 } as const;
 
 export const TRACK_HEIGHTS: Record<TrackType, number> = {
-  video: 60,
-  text: 25,
-  audio: 50,
-  sticker: 50,
+	video: 60,
+	text: 25,
+	audio: 50,
+	sticker: 50,
 } as const;
 
 export const TRACK_GAP = 4;
 
 export const TIMELINE_CONSTANTS = {
-  PIXELS_PER_SECOND: 50,
-  DEFAULT_ELEMENT_DURATION: 5,
-  PLAYHEAD_LOOKAHEAD_SECONDS: 30, // padding ahead
-  PADDING_TOP: 0, // px
-  ZOOM_LEVELS: [0.1, 0.25, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 10, 15, 20, 30, 50],
-  ZOOM_MIN: 0.1,
-  ZOOM_MAX: 50,
-  ZOOM_STEP: 0.1,
+	PIXELS_PER_SECOND: 50,
+	DEFAULT_ELEMENT_DURATION: 5,
+	PLAYHEAD_LOOKAHEAD_SECONDS: 30, // padding ahead
+	PADDING_TOP: 0, // px
+	ZOOM_LEVELS: [0.1, 0.25, 0.5, 1, 1.5, 2, 3, 4, 6, 8, 10, 15, 20, 30, 50],
+	ZOOM_MIN: 0.1,
+	ZOOM_MAX: 50,
+	ZOOM_STEP: 0.1,
 } as const;
 
 export const TRACK_ICONS: Record<TrackType, React.ReactNode> = {
-  video: <Video className="text-muted-foreground h-4 w-4 shrink-0" />,
-  text: <TypeIcon className="text-muted-foreground h-4 w-4 shrink-0" />,
-  audio: <Music className="text-muted-foreground h-4 w-4 shrink-0" />,
-  sticker: <Sticker className="text-muted-foreground h-4 w-4 shrink-0" />,
+	video: <Video className="text-muted-foreground h-4 w-4 shrink-0" />,
+	text: <TypeIcon className="text-muted-foreground h-4 w-4 shrink-0" />,
+	audio: <Music className="text-muted-foreground h-4 w-4 shrink-0" />,
+	sticker: <Sticker className="text-muted-foreground h-4 w-4 shrink-0" />,
 } as const;
diff --git a/apps/web/src/constants/transcription-constants.ts b/apps/web/src/constants/transcription-constants.ts
index abaa35d6..3fa914f2 100644
--- a/apps/web/src/constants/transcription-constants.ts
+++ b/apps/web/src/constants/transcription-constants.ts
@@ -1,37 +1,55 @@
+import { LANGUAGES } from "@/constants/language-constants";
 import type {
-  TranscriptionModel,
-  TranscriptionModelId,
+	TranscriptionModel,
+	TranscriptionModelId,
 } from "@/types/transcription";
+import type { LanguageCode } from "@/types/language";
+
+const SUPPORTED_TRANSCRIPTION_LANGS: ReadonlyArray<LanguageCode> = [
+	"en",
+	"es",
+	"it",
+	"fr",
+	"de",
+	"pt",
+	"ru",
+	"ja",
+	"zh",
+];
+
+export const TRANSCRIPTION_LANGUAGES = LANGUAGES.filter((language) =>
+	SUPPORTED_TRANSCRIPTION_LANGS.includes(language.code),
+);
 
 export const TRANSCRIPTION_MODELS: TranscriptionModel[] = [
-  {
-    id: "whisper-tiny",
-    name: "Tiny",
-    huggingFaceId: "onnx-community/whisper-tiny",
-    description: "Fastest, lower accuracy",
-  },
-  {
-    id: "whisper-small",
-    name: "Small",
-    huggingFaceId: "onnx-community/whisper-small",
-    description: "Good balance of speed and accuracy",
-  },
-  {
-    id: "whisper-medium",
-    name: "Medium",
-    huggingFaceId: "onnx-community/whisper-medium",
-    description: "Higher accuracy, slower",
-  },
-  {
-    id: "whisper-large-v3-turbo",
-    name: "Large v3 Turbo",
-    huggingFaceId: "onnx-community/whisper-large-v3-turbo",
-    description: "Best accuracy, requires WebGPU for good performance",
-  },
+	{
+		id: "whisper-tiny",
+		name: "Tiny",
+		huggingFaceId: "onnx-community/whisper-tiny",
+		description: "Fastest, lower accuracy",
+	},
+	{
+		id: "whisper-small",
+		name: "Small",
+		huggingFaceId: "onnx-community/whisper-small",
+		description: "Good balance of speed and accuracy",
+	},
+	{
+		id: "whisper-medium",
+		name: "Medium",
+		huggingFaceId: "onnx-community/whisper-medium",
+		description: "Higher accuracy, slower",
+	},
+	{
+		id: "whisper-large-v3-turbo",
+		name: "Large v3 Turbo",
+		huggingFaceId: "onnx-community/whisper-large-v3-turbo",
+		description: "Best accuracy, requires WebGPU for good performance",
+	},
 ];
 
 export const DEFAULT_TRANSCRIPTION_MODEL: TranscriptionModelId =
-  "whisper-small";
+	"whisper-small";
 
 export const DEFAULT_CHUNK_LENGTH_SECONDS = 30;
 export const DEFAULT_STRIDE_SECONDS = 5;
diff --git a/apps/web/src/core/index.ts b/apps/web/src/core/index.ts
index 03dd6374..afa7d837 100644
--- a/apps/web/src/core/index.ts
+++ b/apps/web/src/core/index.ts
@@ -8,37 +8,37 @@ import { CommandManager } from "./managers/commands";
 import { SaveManager } from "./managers/save-manager";
 
 export class EditorCore {
-  private static instance: EditorCore | null = null;
+	private static instance: EditorCore | null = null;
 
-  public readonly command: CommandManager;
-  public readonly playback: PlaybackManager;
-  public readonly timeline: TimelineManager;
-  public readonly scenes: ScenesManager;
-  public readonly project: ProjectManager;
-  public readonly media: MediaManager;
-  public readonly renderer: RendererManager;
-  public readonly save: SaveManager;
+	public readonly command: CommandManager;
+	public readonly playback: PlaybackManager;
+	public readonly timeline: TimelineManager;
+	public readonly scenes: ScenesManager;
+	public readonly project: ProjectManager;
+	public readonly media: MediaManager;
+	public readonly renderer: RendererManager;
+	public readonly save: SaveManager;
 
-  private constructor() {
-    this.command = new CommandManager();
-    this.playback = new PlaybackManager(this);
-    this.timeline = new TimelineManager(this);
-    this.scenes = new ScenesManager(this);
-    this.project = new ProjectManager(this);
-    this.media = new MediaManager(this);
-    this.renderer = new RendererManager(this);
-    this.save = new SaveManager(this);
-    this.save.start();
-  }
+	private constructor() {
+		this.command = new CommandManager();
+		this.playback = new PlaybackManager(this);
+		this.timeline = new TimelineManager(this);
+		this.scenes = new ScenesManager(this);
+		this.project = new ProjectManager(this);
+		this.media = new MediaManager(this);
+		this.renderer = new RendererManager(this);
+		this.save = new SaveManager(this);
+		this.save.start();
+	}
 
-  static getInstance(): EditorCore {
-    if (!EditorCore.instance) {
-      EditorCore.instance = new EditorCore();
-    }
-    return EditorCore.instance;
-  }
+	static getInstance(): EditorCore {
+		if (!EditorCore.instance) {
+			EditorCore.instance = new EditorCore();
+		}
+		return EditorCore.instance;
+	}
 
-  static reset(): void {
-    EditorCore.instance = null;
-  }
+	static reset(): void {
+		EditorCore.instance = null;
+	}
 }
diff --git a/apps/web/src/core/managers/commands.ts b/apps/web/src/core/managers/commands.ts
index f8d8cb21..d996a30e 100644
--- a/apps/web/src/core/managers/commands.ts
+++ b/apps/web/src/core/managers/commands.ts
@@ -1,44 +1,44 @@
-import { Command } from "@/lib/commands";
+import type { Command } from "@/lib/commands";
 
 export class CommandManager {
-  private history: Command[] = [];
-  private redoStack: Command[] = [];
+	private history: Command[] = [];
+	private redoStack: Command[] = [];
 
-  execute({ command }: { command: Command }): Command {
-    command.execute();
-    this.history.push(command);
-    this.redoStack = [];
-    return command;
-  }
+	execute({ command }: { command: Command }): Command {
+		command.execute();
+		this.history.push(command);
+		this.redoStack = [];
+		return command;
+	}
 
-  undo(): void {
-    if (this.history.length === 0) return;
-    const command = this.history.pop();
-    command?.undo();
-    if (command) {
-      this.redoStack.push(command);
-    }
-  }
+	undo(): void {
+		if (this.history.length === 0) return;
+		const command = this.history.pop();
+		command?.undo();
+		if (command) {
+			this.redoStack.push(command);
+		}
+	}
 
-  redo(): void {
-    if (this.redoStack.length === 0) return;
-    const command = this.redoStack.pop();
-    command?.redo();
-    if (command) {
-      this.history.push(command);
-    }
-  }
+	redo(): void {
+		if (this.redoStack.length === 0) return;
+		const command = this.redoStack.pop();
+		command?.redo();
+		if (command) {
+			this.history.push(command);
+		}
+	}
 
-  canUndo(): boolean {
-    return this.history.length > 0;
-  }
+	canUndo(): boolean {
+		return this.history.length > 0;
+	}
 
-  canRedo(): boolean {
-    return this.redoStack.length > 0;
-  }
+	canRedo(): boolean {
+		return this.redoStack.length > 0;
+	}
 
-  clear(): void {
-    this.history = [];
-    this.redoStack = [];
-  }
+	clear(): void {
+		this.history = [];
+		this.redoStack = [];
+	}
 }
diff --git a/apps/web/src/core/managers/media-manager.ts b/apps/web/src/core/managers/media-manager.ts
index 68ffe7c8..7b9db0d5 100644
--- a/apps/web/src/core/managers/media-manager.ts
+++ b/apps/web/src/core/managers/media-manager.ts
@@ -6,157 +6,157 @@ import { videoCache } from "@/services/media/video-cache";
 import { hasMediaId } from "@/lib/timeline/element-utils";
 
 export class MediaManager {
-  private assets: MediaAsset[] = [];
-  private isLoading = false;
-  private listeners = new Set<() => void>();
+	private assets: MediaAsset[] = [];
+	private isLoading = false;
+	private listeners = new Set<() => void>();
 
-  constructor(private editor: EditorCore) {}
+	constructor(private editor: EditorCore) {}
 
-  async addMediaAsset({
-    projectId,
-    asset,
-  }: {
-    projectId: string;
-    asset: Omit<MediaAsset, "id">;
-  }): Promise<void> {
-    const newAsset: MediaAsset = {
-      ...asset,
-      id: generateUUID(),
-    };
+	async addMediaAsset({
+		projectId,
+		asset,
+	}: {
+		projectId: string;
+		asset: Omit<MediaAsset, "id">;
+	}): Promise<void> {
+		const newAsset: MediaAsset = {
+			...asset,
+			id: generateUUID(),
+		};
 
-    this.assets = [...this.assets, newAsset];
-    this.notify();
+		this.assets = [...this.assets, newAsset];
+		this.notify();
 
-    try {
-      await storageService.saveMediaAsset({ projectId, mediaAsset: newAsset });
-    } catch (error) {
-      console.error("Failed to save media asset:", error);
-      this.assets = this.assets.filter((asset) => asset.id !== newAsset.id);
-      this.notify();
-    }
-  }
+		try {
+			await storageService.saveMediaAsset({ projectId, mediaAsset: newAsset });
+		} catch (error) {
+			console.error("Failed to save media asset:", error);
+			this.assets = this.assets.filter((asset) => asset.id !== newAsset.id);
+			this.notify();
+		}
+	}
 
-  async removeMediaAsset({
-    projectId,
-    id,
-  }: {
-    projectId: string;
-    id: string;
-  }): Promise<void> {
-    const asset = this.assets.find((asset) => asset.id === id);
+	async removeMediaAsset({
+		projectId,
+		id,
+	}: {
+		projectId: string;
+		id: string;
+	}): Promise<void> {
+		const asset = this.assets.find((asset) => asset.id === id);
 
-    videoCache.clearVideo({ mediaId: id });
+		videoCache.clearVideo({ mediaId: id });
 
-    if (asset?.url) {
-      URL.revokeObjectURL(asset.url);
-      if (asset.thumbnailUrl) {
-        URL.revokeObjectURL(asset.thumbnailUrl);
-      }
-    }
+		if (asset?.url) {
+			URL.revokeObjectURL(asset.url);
+			if (asset.thumbnailUrl) {
+				URL.revokeObjectURL(asset.thumbnailUrl);
+			}
+		}
 
-    this.assets = this.assets.filter((asset) => asset.id !== id);
-    this.notify();
+		this.assets = this.assets.filter((asset) => asset.id !== id);
+		this.notify();
 
-    const tracks = this.editor.timeline.getTracks();
-    const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];
+		const tracks = this.editor.timeline.getTracks();
+		const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];
 
-    for (const track of tracks) {
-      for (const element of track.elements) {
-        if (hasMediaId(element) && element.mediaId === id) {
-          elementsToRemove.push({ trackId: track.id, elementId: element.id });
-        }
-      }
-    }
+		for (const track of tracks) {
+			for (const element of track.elements) {
+				if (hasMediaId(element) && element.mediaId === id) {
+					elementsToRemove.push({ trackId: track.id, elementId: element.id });
+				}
+			}
+		}
 
-    if (elementsToRemove.length > 0) {
-      this.editor.timeline.deleteElements({ elements: elementsToRemove });
-    }
+		if (elementsToRemove.length > 0) {
+			this.editor.timeline.deleteElements({ elements: elementsToRemove });
+		}
 
-    try {
-      await storageService.deleteMediaAsset({ projectId, id });
-    } catch (error) {
-      console.error("Failed to delete media asset:", error);
-    }
-  }
+		try {
+			await storageService.deleteMediaAsset({ projectId, id });
+		} catch (error) {
+			console.error("Failed to delete media asset:", error);
+		}
+	}
 
-  async loadProjectMedia({ projectId }: { projectId: string }): Promise<void> {
-    this.isLoading = true;
-    this.notify();
+	async loadProjectMedia({ projectId }: { projectId: string }): Promise<void> {
+		this.isLoading = true;
+		this.notify();
 
-    try {
-      const mediaAssets = await storageService.loadAllMediaAssets({
-        projectId,
-      });
-      this.assets = mediaAssets;
-      this.notify();
-    } catch (error) {
-      console.error("Failed to load media assets:", error);
-    } finally {
-      this.isLoading = false;
-      this.notify();
-    }
-  }
+		try {
+			const mediaAssets = await storageService.loadAllMediaAssets({
+				projectId,
+			});
+			this.assets = mediaAssets;
+			this.notify();
+		} catch (error) {
+			console.error("Failed to load media assets:", error);
+		} finally {
+			this.isLoading = false;
+			this.notify();
+		}
+	}
 
-  async clearProjectMedia({ projectId }: { projectId: string }): Promise<void> {
-    this.assets.forEach((asset) => {
-      if (asset.url) {
-        URL.revokeObjectURL(asset.url);
-      }
-      if (asset.thumbnailUrl) {
-        URL.revokeObjectURL(asset.thumbnailUrl);
-      }
-    });
+	async clearProjectMedia({ projectId }: { projectId: string }): Promise<void> {
+		this.assets.forEach((asset) => {
+			if (asset.url) {
+				URL.revokeObjectURL(asset.url);
+			}
+			if (asset.thumbnailUrl) {
+				URL.revokeObjectURL(asset.thumbnailUrl);
+			}
+		});
 
-    const mediaIds = this.assets.map((asset) => asset.id);
-    this.assets = [];
-    this.notify();
+		const mediaIds = this.assets.map((asset) => asset.id);
+		this.assets = [];
+		this.notify();
 
-    try {
-      await Promise.all(
-        mediaIds.map((id) =>
-          storageService.deleteMediaAsset({ projectId, id }),
-        ),
-      );
-    } catch (error) {
-      console.error("Failed to clear media assets from storage:", error);
-    }
-  }
+		try {
+			await Promise.all(
+				mediaIds.map((id) =>
+					storageService.deleteMediaAsset({ projectId, id }),
+				),
+			);
+		} catch (error) {
+			console.error("Failed to clear media assets from storage:", error);
+		}
+	}
 
-  clearAllAssets(): void {
-    videoCache.clearAll();
+	clearAllAssets(): void {
+		videoCache.clearAll();
 
-    this.assets.forEach((asset) => {
-      if (asset.url) {
-        URL.revokeObjectURL(asset.url);
-      }
-      if (asset.thumbnailUrl) {
-        URL.revokeObjectURL(asset.thumbnailUrl);
-      }
-    });
+		this.assets.forEach((asset) => {
+			if (asset.url) {
+				URL.revokeObjectURL(asset.url);
+			}
+			if (asset.thumbnailUrl) {
+				URL.revokeObjectURL(asset.thumbnailUrl);
+			}
+		});
 
-    this.assets = [];
-    this.notify();
-  }
+		this.assets = [];
+		this.notify();
+	}
 
-  getAssets(): MediaAsset[] {
-    return this.assets;
-  }
+	getAssets(): MediaAsset[] {
+		return this.assets;
+	}
 
-  setAssets({ assets }: { assets: MediaAsset[] }): void {
-    this.assets = assets;
-    this.notify();
-  }
+	setAssets({ assets }: { assets: MediaAsset[] }): void {
+		this.assets = assets;
+		this.notify();
+	}
 
-  isLoadingMedia(): boolean {
-    return this.isLoading;
-  }
+	isLoadingMedia(): boolean {
+		return this.isLoading;
+	}
 
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
 
-  private notify(): void {
-    this.listeners.forEach((fn) => fn());
-  }
+	private notify(): void {
+		this.listeners.forEach((fn) => fn());
+	}
 }
diff --git a/apps/web/src/core/managers/playback-manager.ts b/apps/web/src/core/managers/playback-manager.ts
index 21f36c75..5da081d4 100644
--- a/apps/web/src/core/managers/playback-manager.ts
+++ b/apps/web/src/core/managers/playback-manager.ts
@@ -1,188 +1,188 @@
 import type { EditorCore } from "@/core";
 
 export class PlaybackManager {
-  private isPlaying = false;
-  private currentTime = 0;
-  private volume = 1;
-  private muted = false;
-  private previousVolume = 1;
-  private speed = 1.0;
-  private listeners = new Set<() => void>();
-  private playbackTimer: number | null = null;
-  private lastUpdate = 0;
+	private isPlaying = false;
+	private currentTime = 0;
+	private volume = 1;
+	private muted = false;
+	private previousVolume = 1;
+	private speed = 1.0;
+	private listeners = new Set<() => void>();
+	private playbackTimer: number | null = null;
+	private lastUpdate = 0;
 
-  constructor(private editor: EditorCore) {}
+	constructor(private editor: EditorCore) {}
 
-  play(): void {
-    const duration = this.editor.timeline.getTotalDuration();
+	play(): void {
+		const duration = this.editor.timeline.getTotalDuration();
 
-    if (duration > 0) {
-      const activeProject = this.editor.project.getActive();
-      const fps = activeProject.settings.fps;
-      const frameOffset = 1 / fps;
-      const endThreshold = Math.max(0, duration - frameOffset);
+		if (duration > 0) {
+			const activeProject = this.editor.project.getActive();
+			const fps = activeProject.settings.fps;
+			const frameOffset = 1 / fps;
+			const endThreshold = Math.max(0, duration - frameOffset);
 
-      if (this.currentTime >= endThreshold) {
-        this.seek({ time: 0 });
-      }
-    }
+			if (this.currentTime >= endThreshold) {
+				this.seek({ time: 0 });
+			}
+		}
 
-    this.isPlaying = true;
-    this.startTimer();
-    this.notify();
-  }
+		this.isPlaying = true;
+		this.startTimer();
+		this.notify();
+	}
 
-  pause(): void {
-    this.isPlaying = false;
-    this.stopTimer();
-    this.notify();
-  }
+	pause(): void {
+		this.isPlaying = false;
+		this.stopTimer();
+		this.notify();
+	}
 
-  toggle(): void {
-    if (this.isPlaying) {
-      this.pause();
-    } else {
-      this.play();
-    }
-  }
+	toggle(): void {
+		if (this.isPlaying) {
+			this.pause();
+		} else {
+			this.play();
+		}
+	}
 
-  seek({ time }: { time: number }): void {
-    const duration = this.editor.timeline.getTotalDuration();
-    this.currentTime = Math.max(0, Math.min(duration, time));
-    this.notify();
+	seek({ time }: { time: number }): void {
+		const duration = this.editor.timeline.getTotalDuration();
+		this.currentTime = Math.max(0, Math.min(duration, time));
+		this.notify();
 
-    window.dispatchEvent(
-      new CustomEvent("playback-seek", {
-        detail: { time: this.currentTime },
-      }),
-    );
-  }
+		window.dispatchEvent(
+			new CustomEvent("playback-seek", {
+				detail: { time: this.currentTime },
+			}),
+		);
+	}
 
-  setVolume({ volume }: { volume: number }): void {
-    const clampedVolume = Math.max(0, Math.min(1, volume));
-    this.volume = clampedVolume;
-    this.muted = clampedVolume === 0;
-    if (clampedVolume > 0) {
-      this.previousVolume = clampedVolume;
-    }
-    this.notify();
-  }
+	setVolume({ volume }: { volume: number }): void {
+		const clampedVolume = Math.max(0, Math.min(1, volume));
+		this.volume = clampedVolume;
+		this.muted = clampedVolume === 0;
+		if (clampedVolume > 0) {
+			this.previousVolume = clampedVolume;
+		}
+		this.notify();
+	}
 
-  setSpeed({ speed }: { speed: number }): void {
-    this.speed = Math.max(0.1, Math.min(2.0, speed));
-    this.notify();
+	setSpeed({ speed }: { speed: number }): void {
+		this.speed = Math.max(0.1, Math.min(2.0, speed));
+		this.notify();
 
-    window.dispatchEvent(
-      new CustomEvent("playback-speed", {
-        detail: { speed: this.speed },
-      }),
-    );
-  }
+		window.dispatchEvent(
+			new CustomEvent("playback-speed", {
+				detail: { speed: this.speed },
+			}),
+		);
+	}
 
-  mute(): void {
-    if (this.volume > 0) {
-      this.previousVolume = this.volume;
-    }
-    this.muted = true;
-    this.volume = 0;
-    this.notify();
-  }
+	mute(): void {
+		if (this.volume > 0) {
+			this.previousVolume = this.volume;
+		}
+		this.muted = true;
+		this.volume = 0;
+		this.notify();
+	}
 
-  unmute(): void {
-    this.muted = false;
-    this.volume = this.previousVolume;
-    this.notify();
-  }
+	unmute(): void {
+		this.muted = false;
+		this.volume = this.previousVolume;
+		this.notify();
+	}
 
-  toggleMute(): void {
-    if (this.muted) {
-      this.unmute();
-    } else {
-      this.mute();
-    }
-  }
+	toggleMute(): void {
+		if (this.muted) {
+			this.unmute();
+		} else {
+			this.mute();
+		}
+	}
 
-  getIsPlaying(): boolean {
-    return this.isPlaying;
-  }
+	getIsPlaying(): boolean {
+		return this.isPlaying;
+	}
 
-  getCurrentTime(): number {
-    return this.currentTime;
-  }
+	getCurrentTime(): number {
+		return this.currentTime;
+	}
 
-  getVolume(): number {
-    return this.volume;
-  }
+	getVolume(): number {
+		return this.volume;
+	}
 
-  isMuted(): boolean {
-    return this.muted;
-  }
+	isMuted(): boolean {
+		return this.muted;
+	}
 
-  getSpeed(): number {
-    return this.speed;
-  }
+	getSpeed(): number {
+		return this.speed;
+	}
 
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
 
-  private notify(): void {
-    this.listeners.forEach((fn) => fn());
-  }
+	private notify(): void {
+		this.listeners.forEach((fn) => fn());
+	}
 
-  private startTimer(): void {
-    if (this.playbackTimer) {
-      cancelAnimationFrame(this.playbackTimer);
-    }
+	private startTimer(): void {
+		if (this.playbackTimer) {
+			cancelAnimationFrame(this.playbackTimer);
+		}
 
-    this.lastUpdate = performance.now();
-    this.updateTime();
-  }
+		this.lastUpdate = performance.now();
+		this.updateTime();
+	}
 
-  private stopTimer(): void {
-    if (this.playbackTimer) {
-      cancelAnimationFrame(this.playbackTimer);
-      this.playbackTimer = null;
-    }
-  }
+	private stopTimer(): void {
+		if (this.playbackTimer) {
+			cancelAnimationFrame(this.playbackTimer);
+			this.playbackTimer = null;
+		}
+	}
 
-  private updateTime = (): void => {
-    if (!this.isPlaying) return;
+	private updateTime = (): void => {
+		if (!this.isPlaying) return;
 
-    const now = performance.now();
-    const delta = (now - this.lastUpdate) / 1000;
-    this.lastUpdate = now;
+		const now = performance.now();
+		const delta = (now - this.lastUpdate) / 1000;
+		this.lastUpdate = now;
 
-    const newTime = this.currentTime + delta * this.speed;
-    const duration = this.editor.timeline.getTotalDuration();
+		const newTime = this.currentTime + delta * this.speed;
+		const duration = this.editor.timeline.getTotalDuration();
 
-    if (duration > 0 && newTime >= duration) {
-      const activeProject = this.editor.project.getActive();
-      const fps = activeProject.settings.fps;
-      const frameOffset = 1 / fps;
-      const stopTime = Math.max(0, duration - frameOffset);
+		if (duration > 0 && newTime >= duration) {
+			const activeProject = this.editor.project.getActive();
+			const fps = activeProject.settings.fps;
+			const frameOffset = 1 / fps;
+			const stopTime = Math.max(0, duration - frameOffset);
 
-      this.pause();
-      this.currentTime = stopTime;
-      this.notify();
+			this.pause();
+			this.currentTime = stopTime;
+			this.notify();
 
-      window.dispatchEvent(
-        new CustomEvent("playback-seek", {
-          detail: { time: stopTime },
-        }),
-      );
-    } else {
-      this.currentTime = newTime;
-      this.notify();
+			window.dispatchEvent(
+				new CustomEvent("playback-seek", {
+					detail: { time: stopTime },
+				}),
+			);
+		} else {
+			this.currentTime = newTime;
+			this.notify();
 
-      window.dispatchEvent(
-        new CustomEvent("playback-update", {
-          detail: { time: newTime },
-        }),
-      );
-    }
+			window.dispatchEvent(
+				new CustomEvent("playback-update", {
+					detail: { time: newTime },
+				}),
+			);
+		}
 
-    this.playbackTimer = requestAnimationFrame(this.updateTime);
-  };
+		this.playbackTimer = requestAnimationFrame(this.updateTime);
+	};
 }
diff --git a/apps/web/src/core/managers/project-manager.ts b/apps/web/src/core/managers/project-manager.ts
index 9aed3941..bf94f386 100644
--- a/apps/web/src/core/managers/project-manager.ts
+++ b/apps/web/src/core/managers/project-manager.ts
@@ -1,8 +1,8 @@
 import type { EditorCore } from "@/core";
 import type {
-  TProject,
-  TProjectMetadata,
-  TProjectSettings,
+	TProject,
+	TProjectMetadata,
+	TProjectSettings,
 } from "@/types/project";
 import type { ExportOptions, ExportResult } from "@/types/export";
 import type { TimelineElement } from "@/types/timeline";
@@ -11,530 +11,549 @@ import { toast } from "sonner";
 import { generateUUID } from "@/utils/id";
 import { UpdateProjectSettingsCommand } from "@/lib/commands/project";
 import {
-  DEFAULT_FPS,
-  DEFAULT_CANVAS_SIZE,
-  DEFAULT_COLOR,
+	DEFAULT_FPS,
+	DEFAULT_CANVAS_SIZE,
+	DEFAULT_COLOR,
 } from "@/constants/project-constants";
 import { buildDefaultScene } from "@/lib/scenes";
 import { generateThumbnail } from "@/lib/media/processing";
 import {
-  CURRENT_STORAGE_VERSION,
-  migrations,
-  runStorageMigrations,
+	CURRENT_STORAGE_VERSION,
+	migrations,
+	runStorageMigrations,
 } from "@/services/storage/migrations";
 
 export interface MigrationState {
-  isMigrating: boolean;
-  fromVersion: number | null;
-  toVersion: number | null;
-  projectName: string | null;
+	isMigrating: boolean;
+	fromVersion: number | null;
+	toVersion: number | null;
+	projectName: string | null;
 }
 
 export class ProjectManager {
-  private active: TProject | null = null;
-  private savedProjects: TProjectMetadata[] = [];
-  private isLoading = true;
-  private isInitialized = false;
-  private invalidProjectIds = new Set<string>();
-  private storageMigrationPromise: Promise<void> | null = null;
-  private listeners = new Set<() => void>();
-  private migrationState: MigrationState = {
-    isMigrating: false,
-    fromVersion: null,
-    toVersion: null,
-    projectName: null,
-  };
-
-  constructor(private editor: EditorCore) {}
-
-  private async ensureStorageMigrations(): Promise<void> {
-    if (this.storageMigrationPromise) {
-      await this.storageMigrationPromise;
-      return;
-    }
-
-    this.storageMigrationPromise = (async () => {
-      let hasShownState = false;
-
-      await runStorageMigrations({
-        migrations,
-        callbacks: {
-          onMigrationStart: ({ fromVersion, toVersion }) => {
-            hasShownState = true;
-            this.setMigrationState({
-              isMigrating: true,
-              fromVersion,
-              toVersion,
-              projectName: null,
-            });
-          },
-        },
-      });
-
-      if (hasShownState) {
-        this.setMigrationState({
-          isMigrating: false,
-          fromVersion: null,
-          toVersion: null,
-          projectName: null,
-        });
-      }
-    })();
-
-    await this.storageMigrationPromise;
-  }
-
-  async createNewProject({ name }: { name: string }): Promise<string> {
-    const mainScene = buildDefaultScene({ name: "Main scene", isMain: true });
-    const newProject: TProject = {
-      metadata: {
-        id: generateUUID(),
-        name,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      },
-      scenes: [mainScene],
-      currentSceneId: mainScene.id,
-      settings: {
-        fps: DEFAULT_FPS,
-        canvasSize: DEFAULT_CANVAS_SIZE,
-        originalCanvasSize: null,
-        background: {
-          type: "color",
-          color: DEFAULT_COLOR,
-        },
-      },
-      version: CURRENT_STORAGE_VERSION,
-    };
-
-    this.active = newProject;
-    this.notify();
-
-    this.editor.media.clearAllAssets();
-    this.editor.scenes.initializeScenes({
-      scenes: newProject.scenes,
-      currentSceneId: newProject.currentSceneId,
-    });
-
-    try {
-      await storageService.saveProject({ project: newProject });
-      this.updateMetadata(newProject);
-
-      return newProject.metadata.id;
-    } catch (error) {
-      toast.error("Failed to save new project");
-      throw error;
-    }
-  }
-
-  async loadProject({ id }: { id: string }): Promise<void> {
-    if (!this.isInitialized) {
-      this.isLoading = true;
-      this.notify();
-    }
-
-    this.editor.save.pause();
-    await this.ensureStorageMigrations();
-    this.editor.media.clearAllAssets();
-    this.editor.scenes.clearScenes();
-
-    try {
-      const result = await storageService.loadProject({ id });
-      if (!result) {
-        throw new Error(`Project with id ${id} not found`);
-      }
-
-      const project = result.project;
-
-      this.active = project;
-      this.notify();
-
-      if (project.scenes && project.scenes.length > 0) {
-        this.editor.scenes.initializeScenes({
-          scenes: project.scenes,
-          currentSceneId: project.currentSceneId,
-        });
-      }
-
-      await this.editor.media.loadProjectMedia({ projectId: id });
-    } catch (error) {
-      console.error("Failed to load project:", error);
-      throw error;
-    } finally {
-      this.isLoading = false;
-      this.notify();
-      this.editor.save.resume();
-    }
-  }
-
-  async saveCurrentProject(): Promise<void> {
-    if (!this.active) return;
-
-    try {
-      const updatedProject = {
-        ...this.active,
-        scenes: this.editor.scenes.getScenes(),
-        metadata: {
-          ...this.active.metadata,
-          updatedAt: new Date(),
-        },
-      };
-
-      await storageService.saveProject({ project: updatedProject });
-      this.active = updatedProject;
-      this.updateMetadata(updatedProject);
-    } catch (error) {
-      console.error("Failed to save project:", error);
-    }
-  }
-
-  async export({ options }: { options: ExportOptions }): Promise<ExportResult> {
-    return this.editor.renderer.exportProject({ options });
-  }
-
-  async loadAllProjects(): Promise<void> {
-    if (!this.isInitialized) {
-      this.isLoading = true;
-      this.notify();
-    }
-
-    await this.ensureStorageMigrations();
-    try {
-      const metadata = await storageService.loadAllProjectsMetadata();
-      this.savedProjects = metadata;
-      this.notify();
-    } catch (error) {
-      console.error("Failed to load projects:", error);
-    } finally {
-      this.isLoading = false;
-      this.isInitialized = true;
-      this.notify();
-    }
-  }
-
-  async deleteProject({ id }: { id: string }): Promise<void> {
-    try {
-      await Promise.all([
-        storageService.deleteProjectMedia({ projectId: id }),
-        storageService.deleteProject({ id }),
-      ]);
-
-      this.savedProjects = this.savedProjects.filter((p) => p.id !== id);
-      this.notify();
-
-      if (this.active?.metadata.id === id) {
-        this.active = null;
-        this.notify();
-
-        this.editor.media.clearAllAssets();
-        this.editor.scenes.clearScenes();
-      }
-    } catch (error) {
-      console.error("Failed to delete project:", error);
-    }
-  }
-
-  closeProject(): void {
-    this.active = null;
-    this.notify();
-
-    this.editor.media.clearAllAssets();
-    this.editor.scenes.clearScenes();
-  }
-
-  async renameProject({
-    id,
-    name,
-  }: {
-    id: string;
-    name: string;
-  }): Promise<void> {
-    try {
-      const result = await storageService.loadProject({ id });
-      if (!result) {
-        toast.error("Project not found", {
-          description: "Please try again",
-        });
-        return;
-      }
-
-      const updatedProject: TProject = {
-        ...result.project,
-        metadata: {
-          ...result.project.metadata,
-          name,
-          updatedAt: new Date(),
-        },
-      };
-
-      await storageService.saveProject({ project: updatedProject });
-
-      if (this.active?.metadata.id === id) {
-        this.active = updatedProject;
-        this.notify();
-      }
-
-      this.updateMetadata(updatedProject);
-    } catch (error) {
-      console.error("Failed to rename project:", error);
-      toast.error("Failed to rename project", {
-        description:
-          error instanceof Error ? error.message : "Please try again",
-      });
-    }
-  }
-
-  async duplicateProject({ id }: { id: string }): Promise<string> {
-    try {
-      const result = await storageService.loadProject({ id });
-      if (!result) {
-        toast.error("Project not found", {
-          description: "Please try again",
-        });
-        throw new Error("Project not found");
-      }
-
-      const project = result.project;
-      const numberMatch = project.metadata.name.match(/^\((\d+)\)\s+(.+)$/);
-      const baseName = numberMatch ? numberMatch[2] : project.metadata.name;
-      const existingNumbers: number[] = [];
-
-      this.savedProjects.forEach((p) => {
-        const match = p.name.match(/^\((\d+)\)\s+(.+)$/);
-        if (match && match[2] === baseName) {
-          existingNumbers.push(parseInt(match[1], 10));
-        }
-      });
-
-      const nextNumber =
-        existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
-
-      const newProjectId = generateUUID();
-      const newProject: TProject = {
-        ...project,
-        metadata: {
-          ...project.metadata,
-          id: newProjectId,
-          name: `(${nextNumber}) ${baseName}`,
-          createdAt: new Date(),
-          updatedAt: new Date(),
-        },
-      };
-
-      await storageService.saveProject({ project: newProject });
-
-      const sourceMediaAssets = await storageService.loadAllMediaAssets({
-        projectId: id,
-      });
-      for (const asset of sourceMediaAssets) {
-        await storageService.saveMediaAsset({
-          projectId: newProjectId,
-          mediaAsset: asset,
-        });
-      }
-
-      this.updateMetadata(newProject);
-
-      return newProjectId;
-    } catch (error) {
-      console.error("Failed to duplicate project:", error);
-      toast.error("Failed to duplicate project", {
-        description:
-          error instanceof Error ? error.message : "Please try again",
-      });
-      throw error;
-    }
-  }
-
-  async updateSettings({
-    settings,
-    pushHistory = true,
-  }: {
-    settings: Partial<TProjectSettings>;
-    pushHistory?: boolean;
-  }): Promise<void> {
-    if (!this.active) return;
-
-    const command = new UpdateProjectSettingsCommand(settings);
-    if (pushHistory) {
-      this.editor.command.execute({ command });
-      return;
-    }
-
-    command.execute();
-  }
-
-  async updateThumbnail({ thumbnail }: { thumbnail: string }): Promise<void> {
-    if (!this.active) return;
-
-    const updatedProject: TProject = {
-      ...this.active,
-      metadata: { ...this.active.metadata, thumbnail, updatedAt: new Date() },
-    };
-    this.active = updatedProject;
-    this.notify();
-    this.updateMetadata(updatedProject);
-    this.editor.save.markDirty();
-  }
-
-  async prepareExit(): Promise<void> {
-    if (!this.active) return;
-
-    try {
-      const tracks = this.editor.timeline.getTracks();
-      const mediaAssets = this.editor.media.getAssets();
-
-      const allElements = tracks.flatMap(
-        (track): TimelineElement[] => track.elements,
-      );
-      const sortedElements = allElements.sort(
-        (a, b) => a.startTime - b.startTime,
-      );
-      const firstElement = sortedElements[0];
-
-      if (
-        firstElement &&
-        (firstElement.type === "video" || firstElement.type === "image")
-      ) {
-        const mediaAsset = mediaAssets.find(
-          (asset) => asset.id === firstElement.mediaId,
-        );
-
-        if (mediaAsset) {
-          let thumbnailDataUrl: string | undefined;
-
-          if (mediaAsset.type === "video" && mediaAsset.file) {
-            thumbnailDataUrl = await generateThumbnail({
-              videoFile: mediaAsset.file,
-              timeInSeconds: 1,
-            });
-          } else if (mediaAsset.type === "image" && mediaAsset.url) {
-            thumbnailDataUrl = mediaAsset.thumbnailUrl || mediaAsset.url;
-          }
-
-          if (thumbnailDataUrl && !thumbnailDataUrl.startsWith("blob:")) {
-            await this.updateThumbnail({ thumbnail: thumbnailDataUrl });
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Failed to generate project thumbnail on exit:", error);
-    }
-  }
-
-  getFilteredAndSortedProjects({
-    searchQuery,
-    sortOption,
-  }: {
-    searchQuery: string;
-    sortOption: string;
-  }): TProjectMetadata[] {
-    const filteredProjects = this.savedProjects.filter((project) =>
-      project.name.toLowerCase().includes(searchQuery.toLowerCase()),
-    );
-
-    const sortedProjects = [...filteredProjects].sort((a, b) => {
-      const [key, order] = sortOption.split("-");
-
-      if (key !== "createdAt" && key !== "name") {
-        console.warn(`Invalid sort key: ${key}`);
-        return 0;
-      }
-
-      const aValue = a[key];
-      const bValue = b[key];
-
-      if (aValue === undefined || bValue === undefined) return 0;
-
-      if (order === "asc") {
-        if (aValue < bValue) return -1;
-        if (aValue > bValue) return 1;
-        return 0;
-      }
-      if (aValue > bValue) return -1;
-      if (aValue < bValue) return 1;
-      return 0;
-    });
-
-    return sortedProjects;
-  }
-
-  isInvalidProjectId({ id }: { id: string }): boolean {
-    return this.invalidProjectIds.has(id);
-  }
-
-  markProjectIdAsInvalid({ id }: { id: string }): void {
-    this.invalidProjectIds.add(id);
-    this.notify();
-  }
-
-  clearInvalidProjectIds(): void {
-    this.invalidProjectIds.clear();
-    this.notify();
-  }
-
-  getActive(): TProject {
-    if (!this.active) {
-      throw new Error("No active project");
-    }
-    return this.active;
-  }
-
-  /**
-   * for agents:
-   * in most cases, the project is guaranteed to be active, in which getActive() should be used instead.
-   * for very rare cases, this function may be used.
-   */
-  getActiveOrNull(): TProject | null {
-    return this.active;
-  }
-
-  getSavedProjects(): TProjectMetadata[] {
-    return this.savedProjects;
-  }
-
-  getIsLoading(): boolean {
-    return this.isLoading;
-  }
-
-  getIsInitialized(): boolean {
-    return this.isInitialized;
-  }
-
-  getMigrationState(): MigrationState {
-    return this.migrationState;
-  }
-
-  private setMigrationState(state: Partial<MigrationState>): void {
-    this.migrationState = { ...this.migrationState, ...state };
-    this.notify();
-  }
-
-  setActiveProject({ project }: { project: TProject }): void {
-    this.active = project;
-    this.notify();
-  }
-
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-
-  private updateMetadata(project: TProject): void {
-    const index = this.savedProjects.findIndex(
-      (p) => p.id === project.metadata.id,
-    );
-
-    if (index !== -1) {
-      this.savedProjects[index] = project.metadata;
-    } else {
-      this.savedProjects = [project.metadata, ...this.savedProjects];
-    }
-
-    this.notify();
-  }
-
-  private notify(): void {
-    this.listeners.forEach((fn) => fn());
-  }
+	private active: TProject | null = null;
+	private savedProjects: TProjectMetadata[] = [];
+	private isLoading = true;
+	private isInitialized = false;
+	private invalidProjectIds = new Set<string>();
+	private storageMigrationPromise: Promise<void> | null = null;
+	private listeners = new Set<() => void>();
+	private migrationState: MigrationState = {
+		isMigrating: false,
+		fromVersion: null,
+		toVersion: null,
+		projectName: null,
+	};
+
+	constructor(private editor: EditorCore) {}
+
+	private async ensureStorageMigrations(): Promise<void> {
+		if (this.storageMigrationPromise) {
+			await this.storageMigrationPromise;
+			return;
+		}
+
+		this.storageMigrationPromise = (async () => {
+			let hasShownState = false;
+
+			await runStorageMigrations({
+				migrations,
+				callbacks: {
+					onMigrationStart: ({ fromVersion, toVersion }) => {
+						hasShownState = true;
+						this.setMigrationState({
+							isMigrating: true,
+							fromVersion,
+							toVersion,
+							projectName: null,
+						});
+					},
+				},
+			});
+
+			if (hasShownState) {
+				this.setMigrationState({
+					isMigrating: false,
+					fromVersion: null,
+					toVersion: null,
+					projectName: null,
+				});
+			}
+		})();
+
+		await this.storageMigrationPromise;
+	}
+
+	async createNewProject({ name }: { name: string }): Promise<string> {
+		const mainScene = buildDefaultScene({ name: "Main scene", isMain: true });
+		const newProject: TProject = {
+			metadata: {
+				id: generateUUID(),
+				name,
+				createdAt: new Date(),
+				updatedAt: new Date(),
+			},
+			scenes: [mainScene],
+			currentSceneId: mainScene.id,
+			settings: {
+				fps: DEFAULT_FPS,
+				canvasSize: DEFAULT_CANVAS_SIZE,
+				originalCanvasSize: null,
+				background: {
+					type: "color",
+					color: DEFAULT_COLOR,
+				},
+			},
+			version: CURRENT_STORAGE_VERSION,
+		};
+
+		this.active = newProject;
+		this.notify();
+
+		this.editor.media.clearAllAssets();
+		this.editor.scenes.initializeScenes({
+			scenes: newProject.scenes,
+			currentSceneId: newProject.currentSceneId,
+		});
+
+		try {
+			await storageService.saveProject({ project: newProject });
+			this.updateMetadata(newProject);
+
+			return newProject.metadata.id;
+		} catch (error) {
+			toast.error("Failed to save new project");
+			throw error;
+		}
+	}
+
+	async loadProject({ id }: { id: string }): Promise<void> {
+		if (!this.isInitialized) {
+			this.isLoading = true;
+			this.notify();
+		}
+
+		this.editor.save.pause();
+		await this.ensureStorageMigrations();
+		this.editor.media.clearAllAssets();
+		this.editor.scenes.clearScenes();
+
+		try {
+			const result = await storageService.loadProject({ id });
+			if (!result) {
+				throw new Error(`Project with id ${id} not found`);
+			}
+
+			const project = result.project;
+
+			this.active = project;
+			this.notify();
+
+			if (project.scenes && project.scenes.length > 0) {
+				this.editor.scenes.initializeScenes({
+					scenes: project.scenes,
+					currentSceneId: project.currentSceneId,
+				});
+			}
+
+			await this.editor.media.loadProjectMedia({ projectId: id });
+
+			if (!project.metadata.thumbnail) {
+				const didUpdateThumbnail = await this.updateThumbnailFromTimeline();
+				if (didUpdateThumbnail) {
+					await this.saveCurrentProject();
+				}
+			}
+		} catch (error) {
+			console.error("Failed to load project:", error);
+			throw error;
+		} finally {
+			this.isLoading = false;
+			this.notify();
+			this.editor.save.resume();
+		}
+	}
+
+	async saveCurrentProject(): Promise<void> {
+		if (!this.active) return;
+
+		try {
+			const updatedProject = {
+				...this.active,
+				scenes: this.editor.scenes.getScenes(),
+				metadata: {
+					...this.active.metadata,
+					updatedAt: new Date(),
+				},
+			};
+
+			await storageService.saveProject({ project: updatedProject });
+			this.active = updatedProject;
+			this.updateMetadata(updatedProject);
+		} catch (error) {
+			console.error("Failed to save project:", error);
+		}
+	}
+
+	async export({ options }: { options: ExportOptions }): Promise<ExportResult> {
+		return this.editor.renderer.exportProject({ options });
+	}
+
+	async loadAllProjects(): Promise<void> {
+		if (!this.isInitialized) {
+			this.isLoading = true;
+			this.notify();
+		}
+
+		await this.ensureStorageMigrations();
+		try {
+			const metadata = await storageService.loadAllProjectsMetadata();
+			this.savedProjects = metadata;
+			this.notify();
+		} catch (error) {
+			console.error("Failed to load projects:", error);
+		} finally {
+			this.isLoading = false;
+			this.isInitialized = true;
+			this.notify();
+		}
+	}
+
+	async deleteProject({ id }: { id: string }): Promise<void> {
+		try {
+			await Promise.all([
+				storageService.deleteProjectMedia({ projectId: id }),
+				storageService.deleteProject({ id }),
+			]);
+
+			this.savedProjects = this.savedProjects.filter((p) => p.id !== id);
+			this.notify();
+
+			if (this.active?.metadata.id === id) {
+				this.active = null;
+				this.notify();
+
+				this.editor.media.clearAllAssets();
+				this.editor.scenes.clearScenes();
+			}
+		} catch (error) {
+			console.error("Failed to delete project:", error);
+		}
+	}
+
+	closeProject(): void {
+		this.active = null;
+		this.notify();
+
+		this.editor.media.clearAllAssets();
+		this.editor.scenes.clearScenes();
+	}
+
+	async renameProject({
+		id,
+		name,
+	}: {
+		id: string;
+		name: string;
+	}): Promise<void> {
+		try {
+			const result = await storageService.loadProject({ id });
+			if (!result) {
+				toast.error("Project not found", {
+					description: "Please try again",
+				});
+				return;
+			}
+
+			const updatedProject: TProject = {
+				...result.project,
+				metadata: {
+					...result.project.metadata,
+					name,
+					updatedAt: new Date(),
+				},
+			};
+
+			await storageService.saveProject({ project: updatedProject });
+
+			if (this.active?.metadata.id === id) {
+				this.active = updatedProject;
+				this.notify();
+			}
+
+			this.updateMetadata(updatedProject);
+		} catch (error) {
+			console.error("Failed to rename project:", error);
+			toast.error("Failed to rename project", {
+				description:
+					error instanceof Error ? error.message : "Please try again",
+			});
+		}
+	}
+
+	async duplicateProject({ id }: { id: string }): Promise<string> {
+		try {
+			const result = await storageService.loadProject({ id });
+			if (!result) {
+				toast.error("Project not found", {
+					description: "Please try again",
+				});
+				throw new Error("Project not found");
+			}
+
+			const project = result.project;
+			const numberMatch = project.metadata.name.match(/^\((\d+)\)\s+(.+)$/);
+			const baseName = numberMatch ? numberMatch[2] : project.metadata.name;
+			const existingNumbers: number[] = [];
+
+			this.savedProjects.forEach((p) => {
+				const match = p.name.match(/^\((\d+)\)\s+(.+)$/);
+				if (match && match[2] === baseName) {
+					existingNumbers.push(parseInt(match[1], 10));
+				}
+			});
+
+			const nextNumber =
+				existingNumbers.length > 0 ? Math.max(...existingNumbers) + 1 : 1;
+
+			const newProjectId = generateUUID();
+			const newProject: TProject = {
+				...project,
+				metadata: {
+					...project.metadata,
+					id: newProjectId,
+					name: `(${nextNumber}) ${baseName}`,
+					createdAt: new Date(),
+					updatedAt: new Date(),
+				},
+			};
+
+			await storageService.saveProject({ project: newProject });
+
+			const sourceMediaAssets = await storageService.loadAllMediaAssets({
+				projectId: id,
+			});
+			for (const asset of sourceMediaAssets) {
+				await storageService.saveMediaAsset({
+					projectId: newProjectId,
+					mediaAsset: asset,
+				});
+			}
+
+			this.updateMetadata(newProject);
+
+			return newProjectId;
+		} catch (error) {
+			console.error("Failed to duplicate project:", error);
+			toast.error("Failed to duplicate project", {
+				description:
+					error instanceof Error ? error.message : "Please try again",
+			});
+			throw error;
+		}
+	}
+
+	async updateSettings({
+		settings,
+		pushHistory = true,
+	}: {
+		settings: Partial<TProjectSettings>;
+		pushHistory?: boolean;
+	}): Promise<void> {
+		if (!this.active) return;
+
+		const command = new UpdateProjectSettingsCommand(settings);
+		if (pushHistory) {
+			this.editor.command.execute({ command });
+			return;
+		}
+
+		command.execute();
+	}
+
+	async updateThumbnail({ thumbnail }: { thumbnail: string }): Promise<void> {
+		if (!this.active) return;
+
+		const updatedProject: TProject = {
+			...this.active,
+			metadata: { ...this.active.metadata, thumbnail, updatedAt: new Date() },
+		};
+		this.active = updatedProject;
+		this.notify();
+		this.updateMetadata(updatedProject);
+		this.editor.save.markDirty();
+	}
+
+	async prepareExit(): Promise<void> {
+		if (!this.active) return;
+
+		try {
+			const didUpdateThumbnail = await this.updateThumbnailFromTimeline();
+			if (didUpdateThumbnail) {
+				await this.editor.save.flush();
+			}
+		} catch (error) {
+			console.error("Failed to generate project thumbnail on exit:", error);
+		}
+	}
+
+	getFilteredAndSortedProjects({
+		searchQuery,
+		sortOption,
+	}: {
+		searchQuery: string;
+		sortOption: string;
+	}): TProjectMetadata[] {
+		const filteredProjects = this.savedProjects.filter((project) =>
+			project.name.toLowerCase().includes(searchQuery.toLowerCase()),
+		);
+
+		const sortedProjects = [...filteredProjects].sort((a, b) => {
+			const [key, order] = sortOption.split("-");
+
+			if (key !== "createdAt" && key !== "name") {
+				console.warn(`Invalid sort key: ${key}`);
+				return 0;
+			}
+
+			const aValue = a[key];
+			const bValue = b[key];
+
+			if (aValue === undefined || bValue === undefined) return 0;
+
+			if (order === "asc") {
+				if (aValue < bValue) return -1;
+				if (aValue > bValue) return 1;
+				return 0;
+			}
+			if (aValue > bValue) return -1;
+			if (aValue < bValue) return 1;
+			return 0;
+		});
+
+		return sortedProjects;
+	}
+
+	isInvalidProjectId({ id }: { id: string }): boolean {
+		return this.invalidProjectIds.has(id);
+	}
+
+	markProjectIdAsInvalid({ id }: { id: string }): void {
+		this.invalidProjectIds.add(id);
+		this.notify();
+	}
+
+	clearInvalidProjectIds(): void {
+		this.invalidProjectIds.clear();
+		this.notify();
+	}
+
+	getActive(): TProject {
+		if (!this.active) {
+			throw new Error("No active project");
+		}
+		return this.active;
+	}
+
+	/**
+	 * for agents:
+	 * in most cases, the project is guaranteed to be active, in which getActive() should be used instead.
+	 * for very rare cases, this function may be used.
+	 */
+	getActiveOrNull(): TProject | null {
+		return this.active;
+	}
+
+	getSavedProjects(): TProjectMetadata[] {
+		return this.savedProjects;
+	}
+
+	getIsLoading(): boolean {
+		return this.isLoading;
+	}
+
+	getIsInitialized(): boolean {
+		return this.isInitialized;
+	}
+
+	getMigrationState(): MigrationState {
+		return this.migrationState;
+	}
+
+	private setMigrationState(state: Partial<MigrationState>): void {
+		this.migrationState = { ...this.migrationState, ...state };
+		this.notify();
+	}
+
+	setActiveProject({ project }: { project: TProject }): void {
+		this.active = project;
+		this.notify();
+	}
+
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
+
+	private async updateThumbnailFromTimeline(): Promise<boolean> {
+		if (!this.active) return false;
+
+		const tracks = this.editor.timeline.getTracks();
+		const mediaAssets = this.editor.media.getAssets();
+		const allElements = tracks.flatMap(
+			(track): TimelineElement[] => track.elements,
+		);
+		const sortedElements = allElements.sort(
+			(a, b) => a.startTime - b.startTime,
+		);
+		const firstElement = sortedElements[0];
+
+		if (!firstElement) return false;
+		if (firstElement.type !== "video" && firstElement.type !== "image") {
+			return false;
+		}
+
+		const mediaAsset = mediaAssets.find(
+			(asset) => asset.id === firstElement.mediaId,
+		);
+		if (!mediaAsset) return false;
+
+		let thumbnailDataUrl: string | undefined;
+
+		if (mediaAsset.type === "video" && mediaAsset.file) {
+			thumbnailDataUrl = await generateThumbnail({
+				videoFile: mediaAsset.file,
+				timeInSeconds: 1,
+			});
+		}
+
+		if (mediaAsset.type === "image" && mediaAsset.url) {
+			thumbnailDataUrl = mediaAsset.thumbnailUrl || mediaAsset.url;
+		}
+
+		if (!thumbnailDataUrl || thumbnailDataUrl.startsWith("blob:")) {
+			return false;
+		}
+
+		await this.updateThumbnail({ thumbnail: thumbnailDataUrl });
+		return true;
+	}
+
+	private updateMetadata(project: TProject): void {
+		const index = this.savedProjects.findIndex(
+			(p) => p.id === project.metadata.id,
+		);
+
+		if (index !== -1) {
+			this.savedProjects[index] = project.metadata;
+		} else {
+			this.savedProjects = [project.metadata, ...this.savedProjects];
+		}
+
+		this.notify();
+	}
+
+	private notify(): void {
+		this.listeners.forEach((fn) => fn());
+	}
 }
diff --git a/apps/web/src/core/managers/renderer-manager.ts b/apps/web/src/core/managers/renderer-manager.ts
index e0c70d96..1e310c96 100644
--- a/apps/web/src/core/managers/renderer-manager.ts
+++ b/apps/web/src/core/managers/renderer-manager.ts
@@ -6,124 +6,124 @@ import { buildScene } from "@/services/renderer/scene-builder";
 import { createTimelineAudioBuffer } from "@/lib/media/audio";
 
 export class RendererManager {
-  private renderTree: RootNode | null = null;
-  private listeners = new Set<() => void>();
+	private renderTree: RootNode | null = null;
+	private listeners = new Set<() => void>();
 
-  constructor(private editor: EditorCore) {}
+	constructor(private editor: EditorCore) {}
 
-  setRenderTree({ renderTree }: { renderTree: RootNode | null }): void {
-    this.renderTree = renderTree;
-    this.notify();
-  }
+	setRenderTree({ renderTree }: { renderTree: RootNode | null }): void {
+		this.renderTree = renderTree;
+		this.notify();
+	}
 
-  getRenderTree(): RootNode | null {
-    return this.renderTree;
-  }
+	getRenderTree(): RootNode | null {
+		return this.renderTree;
+	}
 
-  async exportProject({
-    options,
-  }: {
-    options: ExportOptions;
-  }): Promise<ExportResult> {
-    const { format, quality, fps, includeAudio, onProgress, onCancel } =
-      options;
+	async exportProject({
+		options,
+	}: {
+		options: ExportOptions;
+	}): Promise<ExportResult> {
+		const { format, quality, fps, includeAudio, onProgress, onCancel } =
+			options;
 
-    try {
-      const tracks = this.editor.timeline.getTracks();
-      const mediaAssets = this.editor.media.getAssets();
-      const activeProject = this.editor.project.getActive();
+		try {
+			const tracks = this.editor.timeline.getTracks();
+			const mediaAssets = this.editor.media.getAssets();
+			const activeProject = this.editor.project.getActive();
 
-      if (!activeProject) {
-        return { success: false, error: "No active project" };
-      }
+			if (!activeProject) {
+				return { success: false, error: "No active project" };
+			}
 
-      const duration = this.editor.timeline.getTotalDuration();
-      if (duration === 0) {
-        return { success: false, error: "Project is empty" };
-      }
+			const duration = this.editor.timeline.getTotalDuration();
+			if (duration === 0) {
+				return { success: false, error: "Project is empty" };
+			}
 
-      const exportFps = fps || activeProject.settings.fps;
-      const canvasSize = activeProject.settings.canvasSize;
+			const exportFps = fps || activeProject.settings.fps;
+			const canvasSize = activeProject.settings.canvasSize;
 
-      let audioBuffer: AudioBuffer | null = null;
-      if (includeAudio) {
-        onProgress?.({ progress: 0.05 });
-        audioBuffer = await createTimelineAudioBuffer({
-          tracks,
-          mediaAssets,
-          duration,
-        });
-      }
+			let audioBuffer: AudioBuffer | null = null;
+			if (includeAudio) {
+				onProgress?.({ progress: 0.05 });
+				audioBuffer = await createTimelineAudioBuffer({
+					tracks,
+					mediaAssets,
+					duration,
+				});
+			}
 
-      const scene = buildScene({
-        tracks,
-        mediaAssets,
-        duration,
-        canvasSize,
-        background: activeProject.settings.background,
-      });
+			const scene = buildScene({
+				tracks,
+				mediaAssets,
+				duration,
+				canvasSize,
+				background: activeProject.settings.background,
+			});
 
-      const exporter = new SceneExporter({
-        width: canvasSize.width,
-        height: canvasSize.height,
-        fps: exportFps,
-        format,
-        quality,
-        includeAudio: !!includeAudio,
-        audioBuffer: audioBuffer || undefined,
-      });
+			const exporter = new SceneExporter({
+				width: canvasSize.width,
+				height: canvasSize.height,
+				fps: exportFps,
+				format,
+				quality,
+				includeAudio: !!includeAudio,
+				audioBuffer: audioBuffer || undefined,
+			});
 
-      exporter.on("progress", (progress) => {
-        const adjustedProgress = includeAudio
-          ? 0.05 + progress * 0.95
-          : progress;
-        onProgress?.({ progress: adjustedProgress });
-      });
+			exporter.on("progress", (progress) => {
+				const adjustedProgress = includeAudio
+					? 0.05 + progress * 0.95
+					: progress;
+				onProgress?.({ progress: adjustedProgress });
+			});
 
-      let cancelled = false;
-      const checkCancel = () => {
-        if (onCancel?.()) {
-          cancelled = true;
-          exporter.cancel();
-        }
-      };
+			let cancelled = false;
+			const checkCancel = () => {
+				if (onCancel?.()) {
+					cancelled = true;
+					exporter.cancel();
+				}
+			};
 
-      const cancelInterval = setInterval(checkCancel, 100);
+			const cancelInterval = setInterval(checkCancel, 100);
 
-      try {
-        const buffer = await exporter.export(scene);
-        clearInterval(cancelInterval);
+			try {
+				const buffer = await exporter.export(scene);
+				clearInterval(cancelInterval);
 
-        if (cancelled) {
-          return { success: false, cancelled: true };
-        }
+				if (cancelled) {
+					return { success: false, cancelled: true };
+				}
 
-        if (!buffer) {
-          return { success: false, error: "Export failed to produce buffer" };
-        }
+				if (!buffer) {
+					return { success: false, error: "Export failed to produce buffer" };
+				}
 
-        return {
-          success: true,
-          buffer,
-        };
-      } finally {
-        clearInterval(cancelInterval);
-      }
-    } catch (error) {
-      console.error("Export failed:", error);
-      return {
-        success: false,
-        error: error instanceof Error ? error.message : "Unknown export error",
-      };
-    }
-  }
+				return {
+					success: true,
+					buffer,
+				};
+			} finally {
+				clearInterval(cancelInterval);
+			}
+		} catch (error) {
+			console.error("Export failed:", error);
+			return {
+				success: false,
+				error: error instanceof Error ? error.message : "Unknown export error",
+			};
+		}
+	}
 
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
 
-  private notify(): void {
-    this.listeners.forEach((fn) => fn());
-  }
+	private notify(): void {
+		this.listeners.forEach((fn) => fn());
+	}
 }
diff --git a/apps/web/src/core/managers/save-manager.ts b/apps/web/src/core/managers/save-manager.ts
index a8135aca..28cfde52 100644
--- a/apps/web/src/core/managers/save-manager.ts
+++ b/apps/web/src/core/managers/save-manager.ts
@@ -1,103 +1,103 @@
 import type { EditorCore } from "@/core";
 
 type SaveManagerOptions = {
-  debounceMs?: number;
+	debounceMs?: number;
 };
 
 export class SaveManager {
-  private debounceMs: number;
-  private isPaused = false;
-  private isSaving = false;
-  private hasPendingSave = false;
-  private saveTimer: ReturnType<typeof setTimeout> | null = null;
-  private unsubscribeHandlers: Array<() => void> = [];
+	private debounceMs: number;
+	private isPaused = false;
+	private isSaving = false;
+	private hasPendingSave = false;
+	private saveTimer: ReturnType<typeof setTimeout> | null = null;
+	private unsubscribeHandlers: Array<() => void> = [];
 
-  constructor(
-    private editor: EditorCore,
-    { debounceMs = 800 }: SaveManagerOptions = {},
-  ) {
-    this.debounceMs = debounceMs;
-  }
+	constructor(
+		private editor: EditorCore,
+		{ debounceMs = 800 }: SaveManagerOptions = {},
+	) {
+		this.debounceMs = debounceMs;
+	}
 
-  start(): void {
-    if (this.unsubscribeHandlers.length > 0) return;
+	start(): void {
+		if (this.unsubscribeHandlers.length > 0) return;
 
-    this.unsubscribeHandlers = [
-      this.editor.scenes.subscribe(() => {
-        this.markDirty();
-      }),
-      this.editor.timeline.subscribe(() => {
-        this.markDirty();
-      }),
-    ];
-  }
+		this.unsubscribeHandlers = [
+			this.editor.scenes.subscribe(() => {
+				this.markDirty();
+			}),
+			this.editor.timeline.subscribe(() => {
+				this.markDirty();
+			}),
+		];
+	}
 
-  stop(): void {
-    for (const unsubscribe of this.unsubscribeHandlers) {
-      unsubscribe();
-    }
-    this.unsubscribeHandlers = [];
-    this.clearTimer();
-  }
+	stop(): void {
+		for (const unsubscribe of this.unsubscribeHandlers) {
+			unsubscribe();
+		}
+		this.unsubscribeHandlers = [];
+		this.clearTimer();
+	}
 
-  pause(): void {
-    this.isPaused = true;
-  }
+	pause(): void {
+		this.isPaused = true;
+	}
 
-  resume(): void {
-    this.isPaused = false;
-    if (this.hasPendingSave) {
-      this.queueSave();
-    }
-  }
+	resume(): void {
+		this.isPaused = false;
+		if (this.hasPendingSave) {
+			this.queueSave();
+		}
+	}
 
-  markDirty({ force = false }: { force?: boolean } = {}): void {
-    if (this.isPaused && !force) return;
-    this.hasPendingSave = true;
-    this.queueSave();
-  }
+	markDirty({ force = false }: { force?: boolean } = {}): void {
+		if (this.isPaused && !force) return;
+		this.hasPendingSave = true;
+		this.queueSave();
+	}
 
-  async flush(): Promise<void> {
-    this.hasPendingSave = true;
-    await this.saveNow();
-  }
+	async flush(): Promise<void> {
+		this.hasPendingSave = true;
+		await this.saveNow();
+	}
 
-  private queueSave(): void {
-    if (this.isSaving) return;
-    if (this.saveTimer) {
-      clearTimeout(this.saveTimer);
-    }
-    this.saveTimer = setTimeout(() => {
-      void this.saveNow();
-    }, this.debounceMs);
-  }
+	private queueSave(): void {
+		if (this.isSaving) return;
+		if (this.saveTimer) {
+			clearTimeout(this.saveTimer);
+		}
+		this.saveTimer = setTimeout(() => {
+			void this.saveNow();
+		}, this.debounceMs);
+	}
 
-  private async saveNow(): Promise<void> {
-    if (this.isSaving) return;
-    if (!this.hasPendingSave) return;
+	private async saveNow(): Promise<void> {
+		if (this.isSaving) return;
+		if (!this.hasPendingSave) return;
 
-    const activeProject = this.editor.project.getActive();
-    if (!activeProject) return;
-    if (this.editor.project.getIsLoading()) return;
-    if (this.editor.project.getMigrationState().isMigrating) return;
+		const activeProject = this.editor.project.getActive();
+		if (!activeProject) return;
+		if (this.editor.project.getIsLoading()) return;
+		if (this.editor.project.getMigrationState().isMigrating) return;
 
-    this.isSaving = true;
-    this.hasPendingSave = false;
-    this.clearTimer();
+		this.isSaving = true;
+		this.hasPendingSave = false;
+		this.clearTimer();
 
-    try {
-      await this.editor.project.saveCurrentProject();
-    } finally {
-      this.isSaving = false;
-      if (this.hasPendingSave) {
-        this.queueSave();
-      }
-    }
-  }
+		try {
+			await this.editor.project.saveCurrentProject();
+		} finally {
+			this.isSaving = false;
+			if (this.hasPendingSave) {
+				this.queueSave();
+			}
+		}
+	}
 
-  private clearTimer(): void {
-    if (!this.saveTimer) return;
-    clearTimeout(this.saveTimer);
-    this.saveTimer = null;
-  }
+	private clearTimer(): void {
+		if (!this.saveTimer) return;
+		clearTimeout(this.saveTimer);
+		this.saveTimer = null;
+	}
 }
diff --git a/apps/web/src/core/managers/scenes-manager.ts b/apps/web/src/core/managers/scenes-manager.ts
index 6d560b46..5e629850 100644
--- a/apps/web/src/core/managers/scenes-manager.ts
+++ b/apps/web/src/core/managers/scenes-manager.ts
@@ -2,314 +2,314 @@ import type { EditorCore } from "@/core";
 import type { TimelineTrack, TScene } from "@/types/timeline";
 import { storageService } from "@/services/storage/storage-service";
 import {
-  getMainScene,
-  ensureMainScene,
-  canDeleteScene,
-  findCurrentScene,
+	getMainScene,
+	ensureMainScene,
+	canDeleteScene,
+	findCurrentScene,
 } from "@/lib/scenes";
 import { getFrameTime, isBookmarkAtTime } from "@/lib/timeline/bookmarks";
 import { ensureMainTrack } from "@/lib/timeline/track-utils";
 import {
-  CreateSceneCommand,
-  DeleteSceneCommand,
-  RemoveBookmarkCommand,
-  RenameSceneCommand,
-  ToggleBookmarkCommand,
+	CreateSceneCommand,
+	DeleteSceneCommand,
+	RemoveBookmarkCommand,
+	RenameSceneCommand,
+	ToggleBookmarkCommand,
 } from "@/lib/commands/scene";
 
 export class ScenesManager {
-  private active: TScene | null = null;
-  private list: TScene[] = [];
-  private listeners = new Set<() => void>();
+	private active: TScene | null = null;
+	private list: TScene[] = [];
+	private listeners = new Set<() => void>();
 
-  constructor(private editor: EditorCore) {}
+	constructor(private editor: EditorCore) {}
 
-  async createScene({
-    name,
-    isMain = false,
-  }: {
-    name: string;
-    isMain: boolean;
-  }): Promise<string> {
-    if (!this.editor.project.getActive()) {
-      throw new Error("No active project");
-    }
+	async createScene({
+		name,
+		isMain = false,
+	}: {
+		name: string;
+		isMain: boolean;
+	}): Promise<string> {
+		if (!this.editor.project.getActive()) {
+			throw new Error("No active project");
+		}
 
-    const command = new CreateSceneCommand(name, isMain);
-    this.editor.command.execute({ command });
-    return command.getSceneId();
-  }
+		const command = new CreateSceneCommand(name, isMain);
+		this.editor.command.execute({ command });
+		return command.getSceneId();
+	}
 
-  async deleteScene({ sceneId }: { sceneId: string }): Promise<void> {
-    const sceneToDelete = this.list.find((s) => s.id === sceneId);
+	async deleteScene({ sceneId }: { sceneId: string }): Promise<void> {
+		const sceneToDelete = this.list.find((s) => s.id === sceneId);
 
-    if (!sceneToDelete) {
-      throw new Error("Scene not found");
-    }
+		if (!sceneToDelete) {
+			throw new Error("Scene not found");
+		}
 
-    const { canDelete, reason } = canDeleteScene({ scene: sceneToDelete });
-    if (!canDelete) {
-      throw new Error(reason);
-    }
+		const { canDelete, reason } = canDeleteScene({ scene: sceneToDelete });
+		if (!canDelete) {
+			throw new Error(reason);
+		}
 
-    if (!this.editor.project.getActive()) {
-      throw new Error("No active project");
-    }
+		if (!this.editor.project.getActive()) {
+			throw new Error("No active project");
+		}
 
-    const command = new DeleteSceneCommand(sceneId);
-    this.editor.command.execute({ command });
-  }
+		const command = new DeleteSceneCommand(sceneId);
+		this.editor.command.execute({ command });
+	}
 
-  async renameScene({
-    sceneId,
-    name,
-  }: {
-    sceneId: string;
-    name: string;
-  }): Promise<void> {
-    if (!this.editor.project.getActive()) {
-      throw new Error("No active project");
-    }
+	async renameScene({
+		sceneId,
+		name,
+	}: {
+		sceneId: string;
+		name: string;
+	}): Promise<void> {
+		if (!this.editor.project.getActive()) {
+			throw new Error("No active project");
+		}
 
-    const command = new RenameSceneCommand(sceneId, name);
-    this.editor.command.execute({ command });
-  }
+		const command = new RenameSceneCommand(sceneId, name);
+		this.editor.command.execute({ command });
+	}
 
-  async switchToScene({ sceneId }: { sceneId: string }): Promise<void> {
-    const targetScene = this.list.find((s) => s.id === sceneId);
+	async switchToScene({ sceneId }: { sceneId: string }): Promise<void> {
+		const targetScene = this.list.find((s) => s.id === sceneId);
 
-    if (!targetScene) {
-      throw new Error("Scene not found");
-    }
+		if (!targetScene) {
+			throw new Error("Scene not found");
+		}
 
-    const activeProject = this.editor.project.getActive();
+		const activeProject = this.editor.project.getActive();
 
-    if (activeProject) {
-      const updatedProject = {
-        ...activeProject,
-        currentSceneId: sceneId,
-        metadata: {
-          ...activeProject.metadata,
-          updatedAt: new Date(),
-        },
-      };
+		if (activeProject) {
+			const updatedProject = {
+				...activeProject,
+				currentSceneId: sceneId,
+				metadata: {
+					...activeProject.metadata,
+					updatedAt: new Date(),
+				},
+			};
 
-      this.editor.project.setActiveProject({ project: updatedProject });
-    }
+			this.editor.project.setActiveProject({ project: updatedProject });
+		}
 
-    this.active = targetScene;
-    this.notify();
-  }
+		this.active = targetScene;
+		this.notify();
+	}
 
-  async toggleBookmark({ time }: { time: number }): Promise<void> {
-    const command = new ToggleBookmarkCommand(time);
-    this.editor.command.execute({ command });
-  }
+	async toggleBookmark({ time }: { time: number }): Promise<void> {
+		const command = new ToggleBookmarkCommand(time);
+		this.editor.command.execute({ command });
+	}
 
-  isBookmarked({ time }: { time: number }): boolean {
-    const activeScene = this.getActiveScene();
-    const activeProject = this.editor.project.getActive();
+	isBookmarked({ time }: { time: number }): boolean {
+		const activeScene = this.getActiveScene();
+		const activeProject = this.editor.project.getActive();
 
-    if (!activeScene || !this.active || !activeProject) return false;
+		if (!activeScene || !this.active || !activeProject) return false;
 
-    const frameTime = getFrameTime({
-      time,
-      fps: activeProject.settings.fps,
-    });
+		const frameTime = getFrameTime({
+			time,
+			fps: activeProject.settings.fps,
+		});
 
-    return isBookmarkAtTime({ bookmarks: activeScene.bookmarks, frameTime });
-  }
+		return isBookmarkAtTime({ bookmarks: activeScene.bookmarks, frameTime });
+	}
 
-  async removeBookmark({ time }: { time: number }): Promise<void> {
-    const command = new RemoveBookmarkCommand(time);
-    this.editor.command.execute({ command });
-  }
+	async removeBookmark({ time }: { time: number }): Promise<void> {
+		const command = new RemoveBookmarkCommand(time);
+		this.editor.command.execute({ command });
+	}
 
-  async loadProjectScenes({ projectId }: { projectId: string }): Promise<void> {
-    try {
-      const result = await storageService.loadProject({ id: projectId });
-      if (result?.project.scenes) {
-        const { scenes: ensuredScenes, hasAddedMainTrack } =
-          this.ensureScenesHaveMainTrack({
-            scenes: result.project.scenes ?? [],
-          });
-        const currentScene = findCurrentScene({
-          scenes: ensuredScenes,
-          currentSceneId: result.project.currentSceneId,
-        });
+	async loadProjectScenes({ projectId }: { projectId: string }): Promise<void> {
+		try {
+			const result = await storageService.loadProject({ id: projectId });
+			if (result?.project.scenes) {
+				const { scenes: ensuredScenes, hasAddedMainTrack } =
+					this.ensureScenesHaveMainTrack({
+						scenes: result.project.scenes ?? [],
+					});
+				const currentScene = findCurrentScene({
+					scenes: ensuredScenes,
+					currentSceneId: result.project.currentSceneId,
+				});
 
-        this.list = ensuredScenes;
-        this.active = currentScene;
-        this.notify();
+				this.list = ensuredScenes;
+				this.active = currentScene;
+				this.notify();
 
-        if (hasAddedMainTrack) {
-          const activeProject = this.editor.project.getActive();
-          if (activeProject) {
-            const updatedProject = {
-              ...activeProject,
-              scenes: ensuredScenes,
-              metadata: {
-                ...activeProject.metadata,
-                updatedAt: new Date(),
-              },
-            };
-            this.editor.project.setActiveProject({ project: updatedProject });
-            this.editor.save.markDirty({ force: true });
-          }
-        }
-      }
-    } catch (error) {
-      console.error("Failed to load project scenes:", error);
-      this.list = [];
-      this.active = null;
-      this.notify();
-    }
-  }
+				if (hasAddedMainTrack) {
+					const activeProject = this.editor.project.getActive();
+					if (activeProject) {
+						const updatedProject = {
+							...activeProject,
+							scenes: ensuredScenes,
+							metadata: {
+								...activeProject.metadata,
+								updatedAt: new Date(),
+							},
+						};
+						this.editor.project.setActiveProject({ project: updatedProject });
+						this.editor.save.markDirty({ force: true });
+					}
+				}
+			}
+		} catch (error) {
+			console.error("Failed to load project scenes:", error);
+			this.list = [];
+			this.active = null;
+			this.notify();
+		}
+	}
 
-  initializeScenes({
-    scenes,
-    currentSceneId,
-  }: {
-    scenes: TScene[];
-    currentSceneId?: string;
-  }): void {
-    const ensuredScenes = ensureMainScene({ scenes });
-    const { scenes: scenesWithMainTracks, hasAddedMainTrack } =
-      this.ensureScenesHaveMainTrack({ scenes: ensuredScenes });
-    const currentScene = currentSceneId
-      ? scenesWithMainTracks.find((s) => s.id === currentSceneId)
-      : null;
+	initializeScenes({
+		scenes,
+		currentSceneId,
+	}: {
+		scenes: TScene[];
+		currentSceneId?: string;
+	}): void {
+		const ensuredScenes = ensureMainScene({ scenes });
+		const { scenes: scenesWithMainTracks, hasAddedMainTrack } =
+			this.ensureScenesHaveMainTrack({ scenes: ensuredScenes });
+		const currentScene = currentSceneId
+			? scenesWithMainTracks.find((s) => s.id === currentSceneId)
+			: null;
 
-    const fallbackScene = getMainScene({ scenes: scenesWithMainTracks });
+		const fallbackScene = getMainScene({ scenes: scenesWithMainTracks });
 
-    this.list = scenesWithMainTracks;
-    this.active = currentScene || fallbackScene;
-    this.notify();
+		this.list = scenesWithMainTracks;
+		this.active = currentScene || fallbackScene;
+		this.notify();
 
-    const hasAddedMainScene = ensuredScenes.length > scenes.length;
-    if (hasAddedMainScene || hasAddedMainTrack) {
-      const activeProject = this.editor.project.getActive();
+		const hasAddedMainScene = ensuredScenes.length > scenes.length;
+		if (hasAddedMainScene || hasAddedMainTrack) {
+			const activeProject = this.editor.project.getActive();
 
-      if (activeProject) {
-        const updatedProject = {
-          ...activeProject,
-          scenes: scenesWithMainTracks,
-          metadata: {
-            ...activeProject.metadata,
-            updatedAt: new Date(),
-          },
-        };
+			if (activeProject) {
+				const updatedProject = {
+					...activeProject,
+					scenes: scenesWithMainTracks,
+					metadata: {
+						...activeProject.metadata,
+						updatedAt: new Date(),
+					},
+				};
 
-        this.editor.project.setActiveProject({ project: updatedProject });
-        this.editor.save.markDirty({ force: true });
-      }
-    }
-  }
+				this.editor.project.setActiveProject({ project: updatedProject });
+				this.editor.save.markDirty({ force: true });
+			}
+		}
+	}
 
-  clearScenes(): void {
-    this.list = [];
-    this.active = null;
-    this.notify();
-  }
+	clearScenes(): void {
+		this.list = [];
+		this.active = null;
+		this.notify();
+	}
 
-  getActiveScene(): TScene {
-    if (!this.active) {
-      throw new Error("No active scene.");
-    }
-    return this.active;
-  }
+	getActiveScene(): TScene {
+		if (!this.active) {
+			throw new Error("No active scene.");
+		}
+		return this.active;
+	}
 
-  getScenes(): TScene[] {
-    return this.list;
-  }
+	getScenes(): TScene[] {
+		return this.list;
+	}
 
-  setScenes({
-    scenes,
-    activeSceneId,
-  }: {
-    scenes: TScene[];
-    activeSceneId?: string;
-  }): void {
-    this.list = scenes;
-    this.active = activeSceneId
-      ? (scenes.find((s) => s.id === activeSceneId) ?? null)
-      : this.active;
-    this.notify();
+	setScenes({
+		scenes,
+		activeSceneId,
+	}: {
+		scenes: TScene[];
+		activeSceneId?: string;
+	}): void {
+		this.list = scenes;
+		this.active = activeSceneId
+			? (scenes.find((s) => s.id === activeSceneId) ?? null)
+			: this.active;
+		this.notify();
 
-    const activeProject = this.editor.project.getActive();
-    if (activeProject) {
-      const updatedProject = {
-        ...activeProject,
-        scenes,
-        metadata: {
-          ...activeProject.metadata,
-          updatedAt: new Date(),
-        },
-      };
-      this.editor.project.setActiveProject({ project: updatedProject });
-    }
-  }
+		const activeProject = this.editor.project.getActive();
+		if (activeProject) {
+			const updatedProject = {
+				...activeProject,
+				scenes,
+				metadata: {
+					...activeProject.metadata,
+					updatedAt: new Date(),
+				},
+			};
+			this.editor.project.setActiveProject({ project: updatedProject });
+		}
+	}
 
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
 
-  private notify(): void {
-    this.listeners.forEach((fn) => fn());
-  }
+	private notify(): void {
+		this.listeners.forEach((fn) => fn());
+	}
 
-  updateSceneTracks({ tracks }: { tracks: TimelineTrack[] }): void {
-    if (!this.active) return;
+	updateSceneTracks({ tracks }: { tracks: TimelineTrack[] }): void {
+		if (!this.active) return;
 
-    const updatedScene: TScene = {
-      ...this.active,
-      tracks,
-      updatedAt: new Date(),
-    };
+		const updatedScene: TScene = {
+			...this.active,
+			tracks,
+			updatedAt: new Date(),
+		};
 
-    this.list = this.list.map((s) =>
-      s.id === this.active?.id ? updatedScene : s,
-    );
-    this.active = updatedScene;
-    this.notify();
+		this.list = this.list.map((s) =>
+			s.id === this.active?.id ? updatedScene : s,
+		);
+		this.active = updatedScene;
+		this.notify();
 
-    const activeProject = this.editor.project.getActive();
-    if (activeProject) {
-      const updatedProject = {
-        ...activeProject,
-        scenes: this.list,
-        metadata: {
-          ...activeProject.metadata,
-          updatedAt: new Date(),
-        },
-      };
-      this.editor.project.setActiveProject({ project: updatedProject });
-    }
-  }
+		const activeProject = this.editor.project.getActive();
+		if (activeProject) {
+			const updatedProject = {
+				...activeProject,
+				scenes: this.list,
+				metadata: {
+					...activeProject.metadata,
+					updatedAt: new Date(),
+				},
+			};
+			this.editor.project.setActiveProject({ project: updatedProject });
+		}
+	}
 
-  private ensureScenesHaveMainTrack({ scenes }: { scenes: TScene[] }): {
-    scenes: TScene[];
-    hasAddedMainTrack: boolean;
-  } {
-    let hasAddedMainTrack = false;
-    const ensuredScenes: TScene[] = [];
+	private ensureScenesHaveMainTrack({ scenes }: { scenes: TScene[] }): {
+		scenes: TScene[];
+		hasAddedMainTrack: boolean;
+	} {
+		let hasAddedMainTrack = false;
+		const ensuredScenes: TScene[] = [];
 
-    for (const scene of scenes) {
-      const existingTracks = scene.tracks ?? [];
-      const updatedTracks = ensureMainTrack({ tracks: existingTracks });
-      if (updatedTracks !== existingTracks) {
-        hasAddedMainTrack = true;
-        ensuredScenes.push({
-          ...scene,
-          tracks: updatedTracks,
-          updatedAt: new Date(),
-        });
-      } else {
-        ensuredScenes.push(scene);
-      }
-    }
+		for (const scene of scenes) {
+			const existingTracks = scene.tracks ?? [];
+			const updatedTracks = ensureMainTrack({ tracks: existingTracks });
+			if (updatedTracks !== existingTracks) {
+				hasAddedMainTrack = true;
+				ensuredScenes.push({
+					...scene,
+					tracks: updatedTracks,
+					updatedAt: new Date(),
+				});
+			} else {
+				ensuredScenes.push(scene);
+			}
+		}
 
-    return { scenes: ensuredScenes, hasAddedMainTrack };
-  }
+		return { scenes: ensuredScenes, hasAddedMainTrack };
+	}
 }
diff --git a/apps/web/src/core/managers/timeline-manager.ts b/apps/web/src/core/managers/timeline-manager.ts
index 7268ff0d..2771b896 100644
--- a/apps/web/src/core/managers/timeline-manager.ts
+++ b/apps/web/src/core/managers/timeline-manager.ts
@@ -1,274 +1,274 @@
 import type { EditorCore } from "@/core";
 import type {
-  TrackType,
-  CreateTimelineElement,
-  TimelineTrack,
-  TextElement,
-  TimelineElement,
-  ClipboardItem,
+	TrackType,
+	CreateTimelineElement,
+	TimelineTrack,
+	TextElement,
+	TimelineElement,
+	ClipboardItem,
 } from "@/types/timeline";
 import { calculateTotalDuration } from "@/lib/timeline";
 import {
-  AddTrackCommand,
-  RemoveTrackCommand,
-  ToggleTrackMuteCommand,
-  ToggleTrackVisibilityCommand,
-  InsertElementCommand,
-  UpdateElementTrimCommand,
-  UpdateElementDurationCommand,
-  DeleteElementsCommand,
-  DuplicateElementsCommand,
-  ToggleElementsVisibilityCommand,
-  ToggleElementsMutedCommand,
-  UpdateTextElementCommand,
-  SplitElementsCommand,
-  PasteCommand,
-  UpdateElementStartTimeCommand,
-  MoveElementCommand,
+	AddTrackCommand,
+	RemoveTrackCommand,
+	ToggleTrackMuteCommand,
+	ToggleTrackVisibilityCommand,
+	InsertElementCommand,
+	UpdateElementTrimCommand,
+	UpdateElementDurationCommand,
+	DeleteElementsCommand,
+	DuplicateElementsCommand,
+	ToggleElementsVisibilityCommand,
+	ToggleElementsMutedCommand,
+	UpdateTextElementCommand,
+	SplitElementsCommand,
+	PasteCommand,
+	UpdateElementStartTimeCommand,
+	MoveElementCommand,
 } from "@/lib/commands/timeline";
-import { InsertElementParams } from "@/lib/commands/timeline/element/insert-element";
+import type { InsertElementParams } from "@/lib/commands/timeline/element/insert-element";
 
 export class TimelineManager {
-  private listeners = new Set<() => void>();
+	private listeners = new Set<() => void>();
 
-  constructor(private editor: EditorCore) {}
+	constructor(private editor: EditorCore) {}
 
-  addTrack({ type, index }: { type: TrackType; index?: number }): string {
-    const command = new AddTrackCommand(type, index);
-    this.editor.command.execute({ command });
-    return command.getTrackId();
-  }
+	addTrack({ type, index }: { type: TrackType; index?: number }): string {
+		const command = new AddTrackCommand(type, index);
+		this.editor.command.execute({ command });
+		return command.getTrackId();
+	}
 
-  removeTrack({ trackId }: { trackId: string }): void {
-    const command = new RemoveTrackCommand(trackId);
-    this.editor.command.execute({ command });
-  }
+	removeTrack({ trackId }: { trackId: string }): void {
+		const command = new RemoveTrackCommand(trackId);
+		this.editor.command.execute({ command });
+	}
 
-  insertElement({ element, placement }: InsertElementParams): void {
-    const command = new InsertElementCommand({ element, placement });
-    this.editor.command.execute({ command });
-  }
+	insertElement({ element, placement }: InsertElementParams): void {
+		const command = new InsertElementCommand({ element, placement });
+		this.editor.command.execute({ command });
+	}
 
-  updateElementTrim({
-    elementId,
-    trimStart,
-    trimEnd,
-    pushHistory = true,
-  }: {
-    elementId: string;
-    trimStart: number;
-    trimEnd: number;
-    pushHistory?: boolean;
-  }): void {
-    const command = new UpdateElementTrimCommand(elementId, trimStart, trimEnd);
-    if (pushHistory) {
-      this.editor.command.execute({ command });
-    } else {
-      command.execute();
-    }
-  }
+	updateElementTrim({
+		elementId,
+		trimStart,
+		trimEnd,
+		pushHistory = true,
+	}: {
+		elementId: string;
+		trimStart: number;
+		trimEnd: number;
+		pushHistory?: boolean;
+	}): void {
+		const command = new UpdateElementTrimCommand(elementId, trimStart, trimEnd);
+		if (pushHistory) {
+			this.editor.command.execute({ command });
+		} else {
+			command.execute();
+		}
+	}
 
-  updateElementDuration({
-    trackId,
-    elementId,
-    duration,
-    pushHistory = true,
-  }: {
-    trackId: string;
-    elementId: string;
-    duration: number;
-    pushHistory?: boolean;
-  }): void {
-    const command = new UpdateElementDurationCommand(
-      trackId,
-      elementId,
-      duration,
-    );
-    if (pushHistory) {
-      this.editor.command.execute({ command });
-    } else {
-      command.execute();
-    }
-  }
+	updateElementDuration({
+		trackId,
+		elementId,
+		duration,
+		pushHistory = true,
+	}: {
+		trackId: string;
+		elementId: string;
+		duration: number;
+		pushHistory?: boolean;
+	}): void {
+		const command = new UpdateElementDurationCommand(
+			trackId,
+			elementId,
+			duration,
+		);
+		if (pushHistory) {
+			this.editor.command.execute({ command });
+		} else {
+			command.execute();
+		}
+	}
 
-  updateElementStartTime({
-    elements,
-    startTime,
-  }: {
-    elements: { trackId: string; elementId: string }[];
-    startTime: number;
-  }): void {
-    const command = new UpdateElementStartTimeCommand(elements, startTime);
-    this.editor.command.execute({ command });
-  }
+	updateElementStartTime({
+		elements,
+		startTime,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+		startTime: number;
+	}): void {
+		const command = new UpdateElementStartTimeCommand(elements, startTime);
+		this.editor.command.execute({ command });
+	}
 
-  moveElement({
-    sourceTrackId,
-    targetTrackId,
-    elementId,
-    newStartTime,
-    createTrack,
-  }: {
-    sourceTrackId: string;
-    targetTrackId: string;
-    elementId: string;
-    newStartTime: number;
-    createTrack?: { type: TrackType; index: number };
-  }): void {
-    const command = new MoveElementCommand(
-      sourceTrackId,
-      targetTrackId,
-      elementId,
-      newStartTime,
-      createTrack,
-    );
-    this.editor.command.execute({ command });
-  }
+	moveElement({
+		sourceTrackId,
+		targetTrackId,
+		elementId,
+		newStartTime,
+		createTrack,
+	}: {
+		sourceTrackId: string;
+		targetTrackId: string;
+		elementId: string;
+		newStartTime: number;
+		createTrack?: { type: TrackType; index: number };
+	}): void {
+		const command = new MoveElementCommand(
+			sourceTrackId,
+			targetTrackId,
+			elementId,
+			newStartTime,
+			createTrack,
+		);
+		this.editor.command.execute({ command });
+	}
 
-  toggleTrackMute({ trackId }: { trackId: string }): void {
-    const command = new ToggleTrackMuteCommand(trackId);
-    this.editor.command.execute({ command });
-  }
+	toggleTrackMute({ trackId }: { trackId: string }): void {
+		const command = new ToggleTrackMuteCommand(trackId);
+		this.editor.command.execute({ command });
+	}
 
-  toggleTrackVisibility({ trackId }: { trackId: string }): void {
-    const command = new ToggleTrackVisibilityCommand(trackId);
-    this.editor.command.execute({ command });
-  }
+	toggleTrackVisibility({ trackId }: { trackId: string }): void {
+		const command = new ToggleTrackVisibilityCommand(trackId);
+		this.editor.command.execute({ command });
+	}
 
-  splitElements({
-    elements,
-    splitTime,
-    retainSide = "both",
-  }: {
-    elements: { trackId: string; elementId: string }[];
-    splitTime: number;
-    retainSide?: "both" | "left" | "right";
-  }): string[] {
-    const command = new SplitElementsCommand(elements, splitTime, retainSide);
-    this.editor.command.execute({ command });
-    return command.splitElementIds;
-  }
+	splitElements({
+		elements,
+		splitTime,
+		retainSide = "both",
+	}: {
+		elements: { trackId: string; elementId: string }[];
+		splitTime: number;
+		retainSide?: "both" | "left" | "right";
+	}): string[] {
+		const command = new SplitElementsCommand(elements, splitTime, retainSide);
+		this.editor.command.execute({ command });
+		return command.splitElementIds;
+	}
 
-  getTotalDuration(): number {
-    return calculateTotalDuration({ tracks: this.getTracks() });
-  }
+	getTotalDuration(): number {
+		return calculateTotalDuration({ tracks: this.getTracks() });
+	}
 
-  getTrackById({ trackId }: { trackId: string }): TimelineTrack | null {
-    return this.getTracks().find((track) => track.id === trackId) ?? null;
-  }
+	getTrackById({ trackId }: { trackId: string }): TimelineTrack | null {
+		return this.getTracks().find((track) => track.id === trackId) ?? null;
+	}
 
-  getElementsWithTracks({
-    elements,
-  }: {
-    elements: { trackId: string; elementId: string }[];
-  }): Array<{ track: TimelineTrack; element: TimelineElement }> {
-    const result: Array<{ track: TimelineTrack; element: TimelineElement }> =
-      [];
+	getElementsWithTracks({
+		elements,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+	}): Array<{ track: TimelineTrack; element: TimelineElement }> {
+		const result: Array<{ track: TimelineTrack; element: TimelineElement }> =
+			[];
 
-    for (const { trackId, elementId } of elements) {
-      const track = this.getTrackById({ trackId });
-      const element = track?.elements.find(
-        (trackElement) => trackElement.id === elementId,
-      );
+		for (const { trackId, elementId } of elements) {
+			const track = this.getTrackById({ trackId });
+			const element = track?.elements.find(
+				(trackElement) => trackElement.id === elementId,
+			);
 
-      if (track && element) {
-        result.push({ track, element });
-      }
-    }
+			if (track && element) {
+				result.push({ track, element });
+			}
+		}
 
-    return result;
-  }
+		return result;
+	}
 
-  pasteAtTime({
-    time,
-    clipboardItems,
-  }: {
-    time: number;
-    clipboardItems: ClipboardItem[];
-  }): void {
-    const command = new PasteCommand(time, clipboardItems);
-    this.editor.command.execute({ command });
-  }
+	pasteAtTime({
+		time,
+		clipboardItems,
+	}: {
+		time: number;
+		clipboardItems: ClipboardItem[];
+	}): void {
+		const command = new PasteCommand(time, clipboardItems);
+		this.editor.command.execute({ command });
+	}
 
-  deleteElements({
-    elements,
-  }: {
-    elements: { trackId: string; elementId: string }[];
-  }): void {
-    const command = new DeleteElementsCommand(elements);
-    this.editor.command.execute({ command });
-  }
+	deleteElements({
+		elements,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+	}): void {
+		const command = new DeleteElementsCommand(elements);
+		this.editor.command.execute({ command });
+	}
 
-  updateTextElement({
-    trackId,
-    elementId,
-    updates,
-  }: {
-    trackId: string;
-    elementId: string;
-    updates: Partial<
-      Pick<
-        TextElement,
-        | "content"
-        | "fontSize"
-        | "fontFamily"
-        | "color"
-        | "backgroundColor"
-        | "textAlign"
-        | "fontWeight"
-        | "fontStyle"
-        | "textDecoration"
-        | "transform"
-        | "opacity"
-      >
-    >;
-  }): void {
-    const command = new UpdateTextElementCommand(trackId, elementId, updates);
-    this.editor.command.execute({ command });
-  }
+	updateTextElement({
+		trackId,
+		elementId,
+		updates,
+	}: {
+		trackId: string;
+		elementId: string;
+		updates: Partial<
+			Pick<
+				TextElement,
+				| "content"
+				| "fontSize"
+				| "fontFamily"
+				| "color"
+				| "backgroundColor"
+				| "textAlign"
+				| "fontWeight"
+				| "fontStyle"
+				| "textDecoration"
+				| "transform"
+				| "opacity"
+			>
+		>;
+	}): void {
+		const command = new UpdateTextElementCommand(trackId, elementId, updates);
+		this.editor.command.execute({ command });
+	}
 
-  duplicateElements({
-    elements,
-  }: {
-    elements: { trackId: string; elementId: string }[];
-  }): void {
-    const command = new DuplicateElementsCommand({ elements });
-    this.editor.command.execute({ command });
-  }
+	duplicateElements({
+		elements,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+	}): void {
+		const command = new DuplicateElementsCommand({ elements });
+		this.editor.command.execute({ command });
+	}
 
-  toggleElementsVisibility({
-    elements,
-  }: {
-    elements: { trackId: string; elementId: string }[];
-  }): void {
-    const command = new ToggleElementsVisibilityCommand(elements);
-    this.editor.command.execute({ command });
-  }
+	toggleElementsVisibility({
+		elements,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+	}): void {
+		const command = new ToggleElementsVisibilityCommand(elements);
+		this.editor.command.execute({ command });
+	}
 
-  toggleElementsMuted({
-    elements,
-  }: {
-    elements: { trackId: string; elementId: string }[];
-  }): void {
-    const command = new ToggleElementsMutedCommand(elements);
-    this.editor.command.execute({ command });
-  }
+	toggleElementsMuted({
+		elements,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+	}): void {
+		const command = new ToggleElementsMutedCommand(elements);
+		this.editor.command.execute({ command });
+	}
 
-  getTracks(): TimelineTrack[] {
-    return this.editor.scenes.getActiveScene()?.tracks ?? [];
-  }
+	getTracks(): TimelineTrack[] {
+		return this.editor.scenes.getActiveScene()?.tracks ?? [];
+	}
 
-  subscribe(listener: () => void): () => void {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
+	subscribe(listener: () => void): () => void {
+		this.listeners.add(listener);
+		return () => this.listeners.delete(listener);
+	}
 
-  private notify(): void {
-    this.listeners.forEach((fn) => fn());
-  }
+	private notify(): void {
+		this.listeners.forEach((fn) => fn());
+	}
 
-  updateTracks(newTracks: TimelineTrack[]): void {
-    this.editor.scenes.updateSceneTracks({ tracks: newTracks });
-    this.notify();
-  }
+	updateTracks(newTracks: TimelineTrack[]): void {
+		this.editor.scenes.updateSceneTracks({ tracks: newTracks });
+		this.notify();
+	}
 }
diff --git a/apps/web/src/data/colors/pattern-craft.ts b/apps/web/src/data/colors/pattern-craft.ts
index f125b138..0ede8cec 100644
--- a/apps/web/src/data/colors/pattern-craft.ts
+++ b/apps/web/src/data/colors/pattern-craft.ts
@@ -1,69 +1,69 @@
 // These are the gradients from Pattern Craft (https://patterncraft.fun/)
 
 export const patternCraftGradients = [
-  // Dreamy Sky Pink Glow
-  "radial-gradient(circle at 30% 70%, rgba(173, 216, 230, 0.35), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.4), transparent 60%), white",
+	// Dreamy Sky Pink Glow
+	"radial-gradient(circle at 30% 70%, rgba(173, 216, 230, 0.35), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.4), transparent 60%), white",
 
-  // Soft Warm Pastel Texture
-  "radial-gradient(circle at 20% 80%, rgba(255, 182, 153, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 214, 0.5) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 182, 153, 0.1) 0%, transparent 50%), #fff8f0",
+	// Soft Warm Pastel Texture
+	"radial-gradient(circle at 20% 80%, rgba(255, 182, 153, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 214, 0.5) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 182, 153, 0.1) 0%, transparent 50%), #fff8f0",
 
-  // Warm Soft Coral & Cream
-  "radial-gradient(circle at 20% 80%, rgba(255, 160, 146, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 228, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 160, 146, 0.15) 0%, transparent 50%), #fef9f7",
+	// Warm Soft Coral & Cream
+	"radial-gradient(circle at 20% 80%, rgba(255, 160, 146, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 228, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 160, 146, 0.15) 0%, transparent 50%), #fef9f7",
 
-  // Soft Green Glow
-  "radial-gradient(circle at center, #8FFFB0, transparent), white",
+	// Soft Green Glow
+	"radial-gradient(circle at center, #8FFFB0, transparent), white",
 
-  // Purple Glow Right
-  "radial-gradient(circle at top right, rgba(173, 109, 244, 0.5), transparent 70%), white",
+	// Purple Glow Right
+	"radial-gradient(circle at top right, rgba(173, 109, 244, 0.5), transparent 70%), white",
 
-  // Teal Glow Right
-  "radial-gradient(circle at top right, rgba(56, 193, 182, 0.5), transparent 70%), white",
+	// Teal Glow Right
+	"radial-gradient(circle at top right, rgba(56, 193, 182, 0.5), transparent 70%), white",
 
-  // Warm Orange Glow Right
-  "radial-gradient(circle at top right, rgba(255, 140, 60, 0.5), transparent 70%), white",
+	// Warm Orange Glow Right
+	"radial-gradient(circle at top right, rgba(255, 140, 60, 0.5), transparent 70%), white",
 
-  // Cool Blue Glow Right
-  "radial-gradient(circle at top right, rgba(70, 130, 180, 0.5), transparent 70%), white",
+	// Cool Blue Glow Right
+	"radial-gradient(circle at top right, rgba(70, 130, 180, 0.5), transparent 70%), white",
 
-  // Purple Glow Left
-  "radial-gradient(circle at top left, rgba(173, 109, 244, 0.5), transparent 70%), white",
+	// Purple Glow Left
+	"radial-gradient(circle at top left, rgba(173, 109, 244, 0.5), transparent 70%), white",
 
-  // Pastel Wave
-  "linear-gradient(120deg, #d5c5ff 0%, #a7f3d0 50%, #f0f0f0 100%)",
+	// Pastel Wave
+	"linear-gradient(120deg, #d5c5ff 0%, #a7f3d0 50%, #f0f0f0 100%)",
 
-  // Aurora Dream Corner Whispers
-  "radial-gradient(ellipse 85% 65% at 8% 8%, rgba(175, 109, 255, 0.42), transparent 60%), radial-gradient(ellipse 75% 60% at 75% 35%, rgba(255, 235, 170, 0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(255, 100, 180, 0.40), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(120, 190, 255, 0.45), transparent 62%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%)",
+	// Aurora Dream Corner Whispers
+	"radial-gradient(ellipse 85% 65% at 8% 8%, rgba(175, 109, 255, 0.42), transparent 60%), radial-gradient(ellipse 75% 60% at 75% 35%, rgba(255, 235, 170, 0.55), transparent 62%), radial-gradient(ellipse 70% 60% at 15% 80%, rgba(255, 100, 180, 0.40), transparent 62%), radial-gradient(ellipse 70% 60% at 92% 92%, rgba(120, 190, 255, 0.45), transparent 62%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%)",
 
-  // Aurora Dream Vivid Bloom
-  "radial-gradient(ellipse 80% 60% at 70% 20%, rgba(175, 109, 255, 0.85), transparent 68%), radial-gradient(ellipse 70% 60% at 20% 80%, rgba(255, 100, 180, 0.75), transparent 68%), radial-gradient(ellipse 60% 50% at 60% 65%, rgba(255, 235, 170, 0.98), transparent 68%), radial-gradient(ellipse 65% 40% at 50% 60%, rgba(120, 190, 255, 0.3), transparent 68%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%)",
+	// Aurora Dream Vivid Bloom
+	"radial-gradient(ellipse 80% 60% at 70% 20%, rgba(175, 109, 255, 0.85), transparent 68%), radial-gradient(ellipse 70% 60% at 20% 80%, rgba(255, 100, 180, 0.75), transparent 68%), radial-gradient(ellipse 60% 50% at 60% 65%, rgba(255, 235, 170, 0.98), transparent 68%), radial-gradient(ellipse 65% 40% at 50% 60%, rgba(120, 190, 255, 0.3), transparent 68%), linear-gradient(180deg, #f7eaff 0%, #fde2ea 100%)",
 
-  // Soft Pastel Dream Gradient
-  "linear-gradient(135deg, #F8BBD9 0%, #FDD5B4 25%, #FFF2CC 50%, #E1F5FE 75%, #BBDEFB 100%)",
+	// Soft Pastel Dream Gradient
+	"linear-gradient(135deg, #F8BBD9 0%, #FDD5B4 25%, #FFF2CC 50%, #E1F5FE 75%, #BBDEFB 100%)",
 
-  // Dreamy Sunset Gradient Background
-  "linear-gradient(180deg, rgba(245,245,220,1) 0%, rgba(255,223,186,0.8) 25%, rgba(255,182,193,0.6) 50%, rgba(147,112,219,0.7) 75%, rgba(72,61,139,0.9) 100%), radial-gradient(circle at 30% 20%, rgba(255,255,224,0.4) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(72,61,139,0.6) 0%, transparent 70%), radial-gradient(circle at 50% 60%, rgba(147,112,219,0.3) 0%, transparent 60%)",
+	// Dreamy Sunset Gradient Background
+	"linear-gradient(180deg, rgba(245,245,220,1) 0%, rgba(255,223,186,0.8) 25%, rgba(255,182,193,0.6) 50%, rgba(147,112,219,0.7) 75%, rgba(72,61,139,0.9) 100%), radial-gradient(circle at 30% 20%, rgba(255,255,224,0.4) 0%, transparent 50%), radial-gradient(circle at 70% 80%, rgba(72,61,139,0.6) 0%, transparent 70%), radial-gradient(circle at 50% 60%, rgba(147,112,219,0.3) 0%, transparent 60%)",
 
-  // Cotton Candy Sky Gradient
-  "linear-gradient(45deg, #FFB3D9 0%, #FFD1DC 20%, #FFF0F5 40%, #E6F3FF 60%, #D1E7FF 80%, #C7E9F1 100%)",
+	// Cotton Candy Sky Gradient
+	"linear-gradient(45deg, #FFB3D9 0%, #FFD1DC 20%, #FFF0F5 40%, #E6F3FF 60%, #D1E7FF 80%, #C7E9F1 100%)",
 
-  // Rose Gold Whisper Gradient
-  "linear-gradient(270deg, #FFECB3 0%, #FFE0B2 20%, #FFCDD2 40%, #F8BBD9 60%, #E1BEE7 80%, #D1C4E9 100%)",
+	// Rose Gold Whisper Gradient
+	"linear-gradient(270deg, #FFECB3 0%, #FFE0B2 20%, #FFCDD2 40%, #F8BBD9 60%, #E1BEE7 80%, #D1C4E9 100%)",
 
-  // Ember Glow Background
-  "radial-gradient(circle at 50% 100%, rgba(255, 69, 0, 0.6) 0%, transparent 60%), radial-gradient(circle at 50% 100%, rgba(255, 140, 0, 0.4) 0%, transparent 70%), radial-gradient(circle at 50% 100%, rgba(255, 215, 0, 0.3) 0%, transparent 80%)",
+	// Ember Glow Background
+	"radial-gradient(circle at 50% 100%, rgba(255, 69, 0, 0.6) 0%, transparent 60%), radial-gradient(circle at 50% 100%, rgba(255, 140, 0, 0.4) 0%, transparent 70%), radial-gradient(circle at 50% 100%, rgba(255, 215, 0, 0.3) 0%, transparent 80%)",
 
-  // Cosmic Aurora
-  "radial-gradient(ellipse at 20% 30%, rgba(56, 189, 248, 0.4) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.3) 0%, transparent 70%), radial-gradient(ellipse at 60% 20%, rgba(236, 72, 153, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 40% 80%, rgba(34, 197, 94, 0.2) 0%, transparent 65%), #000000",
+	// Cosmic Aurora
+	"radial-gradient(ellipse at 20% 30%, rgba(56, 189, 248, 0.4) 0%, transparent 60%), radial-gradient(ellipse at 80% 70%, rgba(139, 92, 246, 0.3) 0%, transparent 70%), radial-gradient(ellipse at 60% 20%, rgba(236, 72, 153, 0.25) 0%, transparent 50%), radial-gradient(ellipse at 40% 80%, rgba(34, 197, 94, 0.2) 0%, transparent 65%), #000000",
 
-  // Deep Ocean Glow
-  "radial-gradient(70% 55% at 50% 50%, #2a5d77 0%, #184058 18%, #0f2a43 34%, #0a1b30 50%, #071226 66%, #040d1c 80%, #020814 92%, #01040d 97%, #000309 100%), radial-gradient(160% 130% at 10% 10%, rgba(0,0,0,0) 38%, #000309 76%, #000208 100%), radial-gradient(160% 130% at 90% 90%, rgba(0,0,0,0) 38%, #000309 76%, #000208 100%)",
+	// Deep Ocean Glow
+	"radial-gradient(70% 55% at 50% 50%, #2a5d77 0%, #184058 18%, #0f2a43 34%, #0a1b30 50%, #071226 66%, #040d1c 80%, #020814 92%, #01040d 97%, #000309 100%), radial-gradient(160% 130% at 10% 10%, rgba(0,0,0,0) 38%, #000309 76%, #000208 100%), radial-gradient(160% 130% at 90% 90%, rgba(0,0,0,0) 38%, #000309 76%, #000208 100%)",
 
-  // Crimson Core Glow
-  "linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6)), radial-gradient(68% 58% at 50% 50%, #c81e3a 0%, #a51d35 16%, #7d1a2f 32%, #591828 46%, #3c1722 60%, #2a151d 72%, #1f1317 84%, #141013 94%, #0a0a0a 100%), radial-gradient(90% 75% at 50% 50%, rgba(228,42,66,0.06) 0%, rgba(228,42,66,0) 55%), radial-gradient(150% 120% at 8% 8%, rgba(0,0,0,0) 42%, #0b0a0a 82%, #070707 100%), radial-gradient(150% 120% at 92% 92%, rgba(0,0,0,0) 42%, #0b0a0a 82%, #070707 100%), radial-gradient(60% 50% at 50% 60%, rgba(240,60,80,0.06), rgba(0,0,0,0) 60%), #050505",
+	// Crimson Core Glow
+	"linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6)), radial-gradient(68% 58% at 50% 50%, #c81e3a 0%, #a51d35 16%, #7d1a2f 32%, #591828 46%, #3c1722 60%, #2a151d 72%, #1f1317 84%, #141013 94%, #0a0a0a 100%), radial-gradient(90% 75% at 50% 50%, rgba(228,42,66,0.06) 0%, rgba(228,42,66,0) 55%), radial-gradient(150% 120% at 8% 8%, rgba(0,0,0,0) 42%, #0b0a0a 82%, #070707 100%), radial-gradient(150% 120% at 92% 92%, rgba(0,0,0,0) 42%, #0b0a0a 82%, #070707 100%), radial-gradient(60% 50% at 50% 60%, rgba(240,60,80,0.06), rgba(0,0,0,0) 60%), #050505",
 
-  // Northern Aurora
-  "radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 20, 147, 0.15), transparent 50%), radial-gradient(ellipse 160% 130% at 10% 10%, rgba(0, 255, 255, 0.12), transparent 60%), radial-gradient(ellipse 160% 130% at 90% 90%, rgba(138, 43, 226, 0.18), transparent 65%), radial-gradient(ellipse 110% 50% at 80% 30%, rgba(255, 215, 0, 0.08), transparent 40%), #000000",
+	// Northern Aurora
+	"radial-gradient(ellipse 70% 55% at 50% 50%, rgba(255, 20, 147, 0.15), transparent 50%), radial-gradient(ellipse 160% 130% at 10% 10%, rgba(0, 255, 255, 0.12), transparent 60%), radial-gradient(ellipse 160% 130% at 90% 90%, rgba(138, 43, 226, 0.18), transparent 65%), radial-gradient(ellipse 110% 50% at 80% 30%, rgba(255, 215, 0, 0.08), transparent 40%), #000000",
 
-  // Royal Purple Background
-  "radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.2) 0%, rgba(147, 51, 234, 0.12) 25%, rgba(147, 51, 234, 0.05) 35%, transparent 50%), #000000",
+	// Royal Purple Background
+	"radial-gradient(circle at 50% 50%, rgba(147, 51, 234, 0.2) 0%, rgba(147, 51, 234, 0.12) 25%, rgba(147, 51, 234, 0.05) 35%, transparent 50%), #000000",
 ];
diff --git a/apps/web/src/data/colors/solid.ts b/apps/web/src/data/colors/solid.ts
index 9a12a587..8a946df4 100644
--- a/apps/web/src/data/colors/solid.ts
+++ b/apps/web/src/data/colors/solid.ts
@@ -1,244 +1,244 @@
 export const colors = [
-  "#ffffff",
-  "#000000",
-  "#ffe2e2",
-  "#ffc9c9",
-  "#ffa2a2",
-  "#ff6467",
-  "#fb2c36",
-  "#e7000b",
-  "#c10007",
-  "#9f0712",
-  "#82181a",
-  "#460809",
-  "#fff7ed",
-  "#ffedd4",
-  "#ffd6a7",
-  "#ffb86a",
-  "#ff8904",
-  "#ff6900",
-  "#f54900",
-  "#ca3500",
-  "#9f2d00",
-  "#7e2a0c",
-  "#441306",
-  "#fffbeb",
-  "#fef3c6",
-  "#fee685",
-  "#ffd230",
-  "#ffb900",
-  "#fe9a00",
-  "#e17100",
-  "#bb4d00",
-  "#973c00",
-  "#7b3306",
-  "#461901",
-  "#fefce8",
-  "#fef9c2",
-  "#fff085",
-  "#ffdf20",
-  "#fdc700",
-  "#f0b100",
-  "#d08700",
-  "#a65f00",
-  "#894b00",
-  "#733e0a",
-  "#432004",
-  "#f7fee7",
-  "#ecfcca",
-  "#d8f999",
-  "#bbf451",
-  "#9ae600",
-  "#7ccf00",
-  "#5ea500",
-  "#497d00",
-  "#3c6300",
-  "#35530e",
-  "#192e03",
-  "#f0fdf4",
-  "#dcfce7",
-  "#b9f8cf",
-  "#7bf1a8",
-  "#05df72",
-  "#00c950",
-  "#00a63e",
-  "#008236",
-  "#016630",
-  "#0d542b",
-  "#032e15",
-  "#ecfdf5",
-  "#d0fae5",
-  "#a4f4cf",
-  "#5ee9b5",
-  "#00d492",
-  "#00bc7d",
-  "#009966",
-  "#007a55",
-  "#006045",
-  "#004f3b",
-  "#002c22",
-  "#f0fdfa",
-  "#cbfbf1",
-  "#96f7e4",
-  "#46ecd5",
-  "#00d5be",
-  "#00bba7",
-  "#009689",
-  "#00786f",
-  "#005f5a",
-  "#0b4f4a",
-  "#022f2e",
-  "#ecfeff",
-  "#cefafe",
-  "#a2f4fd",
-  "#53eafd",
-  "#00d3f2",
-  "#00b8db",
-  "#0092b8",
-  "#007595",
-  "#005f78",
-  "#104e64",
-  "#053345",
-  "#f0f9ff",
-  "#dff2fe",
-  "#b8e6fe",
-  "#74d4ff",
-  "#00bcff",
-  "#00a6f4",
-  "#0084d1",
-  "#0069a8",
-  "#00598a",
-  "#024a70",
-  "#052f4a",
-  "#eff6ff",
-  "#dbeafe",
-  "#bedbff",
-  "#8ec5ff",
-  "#51a2ff",
-  "#2b7fff",
-  "#155dfc",
-  "#1447e6",
-  "#193cb8",
-  "#1c398e",
-  "#162456",
-  "#eef2ff",
-  "#e0e7ff",
-  "#c6d2ff",
-  "#a3b3ff",
-  "#7c86ff",
-  "#615fff",
-  "#4f39f6",
-  "#432dd7",
-  "#372aac",
-  "#312c85",
-  "#1e1a4d",
-  "#f5f3ff",
-  "#ede9fe",
-  "#ddd6ff",
-  "#c4b4ff",
-  "#a684ff",
-  "#8e51ff",
-  "#7f22fe",
-  "#7008e7",
-  "#5d0ec0",
-  "#4d179a",
-  "#2f0d68",
-  "#faf5ff",
-  "#f3e8ff",
-  "#e9d4ff",
-  "#dab2ff",
-  "#c27aff",
-  "#ad46ff",
-  "#9810fa",
-  "#8200db",
-  "#6e11b0",
-  "#59168b",
-  "#3c0366",
-  "#fdf4ff",
-  "#fae8ff",
-  "#f6cfff",
-  "#f4a8ff",
-  "#ed6aff",
-  "#e12afb",
-  "#c800de",
-  "#a800b7",
-  "#8a0194",
-  "#721378",
-  "#4b004f",
-  "#fdf2f8",
-  "#fce7f3",
-  "#fccee8",
-  "#fda5d5",
-  "#fb64b6",
-  "#f6339a",
-  "#e60076",
-  "#c6005c",
-  "#a3004c",
-  "#861043",
-  "#510424",
-  "#fff1f2",
-  "#ffe4e6",
-  "#ffccd3",
-  "#ffa1ad",
-  "#ff637e",
-  "#ff2056",
-  "#ec003f",
-  "#c70036",
-  "#a50036",
-  "#8b0836",
-  "#4d0218",
-  "#f8fafc",
-  "#f1f5f9",
-  "#e2e8f0",
-  "#cad5e2",
-  "#90a1b9",
-  "#62748e",
-  "#45556c",
-  "#314158",
-  "#1d293d",
-  "#0f172b",
-  "#020618",
-  "#f9fafb",
-  "#f3f4f6",
-  "#e5e7eb",
-  "#d1d5dc",
-  "#99a1af",
-  "#6a7282",
-  "#4a5565",
-  "#364153",
-  "#1e2939",
-  "#101828",
-  "#030712",
-  "#fafafa",
-  "#f4f4f5",
-  "#e4e4e7",
-  "#d4d4d8",
-  "#9f9fa9",
-  "#71717b",
-  "#52525c",
-  "#3f3f46",
-  "#27272a",
-  "#18181b",
-  "#09090b",
-  "#f5f5f5",
-  "#e5e5e5",
-  "#d4d4d4",
-  "#a1a1a1",
-  "#737373",
-  "#525252",
-  "#404040",
-  "#262626",
-  "#171717",
-  "#0a0a0a",
-  "#fafaf9",
-  "#f5f5f4",
-  "#e7e5e4",
-  "#d6d3d1",
-  "#a6a09b",
-  "#79716b",
-  "#57534d",
-  "#44403b",
-  "#292524",
-  "#1c1917",
-  "#0c0a09",
+	"#ffffff",
+	"#000000",
+	"#ffe2e2",
+	"#ffc9c9",
+	"#ffa2a2",
+	"#ff6467",
+	"#fb2c36",
+	"#e7000b",
+	"#c10007",
+	"#9f0712",
+	"#82181a",
+	"#460809",
+	"#fff7ed",
+	"#ffedd4",
+	"#ffd6a7",
+	"#ffb86a",
+	"#ff8904",
+	"#ff6900",
+	"#f54900",
+	"#ca3500",
+	"#9f2d00",
+	"#7e2a0c",
+	"#441306",
+	"#fffbeb",
+	"#fef3c6",
+	"#fee685",
+	"#ffd230",
+	"#ffb900",
+	"#fe9a00",
+	"#e17100",
+	"#bb4d00",
+	"#973c00",
+	"#7b3306",
+	"#461901",
+	"#fefce8",
+	"#fef9c2",
+	"#fff085",
+	"#ffdf20",
+	"#fdc700",
+	"#f0b100",
+	"#d08700",
+	"#a65f00",
+	"#894b00",
+	"#733e0a",
+	"#432004",
+	"#f7fee7",
+	"#ecfcca",
+	"#d8f999",
+	"#bbf451",
+	"#9ae600",
+	"#7ccf00",
+	"#5ea500",
+	"#497d00",
+	"#3c6300",
+	"#35530e",
+	"#192e03",
+	"#f0fdf4",
+	"#dcfce7",
+	"#b9f8cf",
+	"#7bf1a8",
+	"#05df72",
+	"#00c950",
+	"#00a63e",
+	"#008236",
+	"#016630",
+	"#0d542b",
+	"#032e15",
+	"#ecfdf5",
+	"#d0fae5",
+	"#a4f4cf",
+	"#5ee9b5",
+	"#00d492",
+	"#00bc7d",
+	"#009966",
+	"#007a55",
+	"#006045",
+	"#004f3b",
+	"#002c22",
+	"#f0fdfa",
+	"#cbfbf1",
+	"#96f7e4",
+	"#46ecd5",
+	"#00d5be",
+	"#00bba7",
+	"#009689",
+	"#00786f",
+	"#005f5a",
+	"#0b4f4a",
+	"#022f2e",
+	"#ecfeff",
+	"#cefafe",
+	"#a2f4fd",
+	"#53eafd",
+	"#00d3f2",
+	"#00b8db",
+	"#0092b8",
+	"#007595",
+	"#005f78",
+	"#104e64",
+	"#053345",
+	"#f0f9ff",
+	"#dff2fe",
+	"#b8e6fe",
+	"#74d4ff",
+	"#00bcff",
+	"#00a6f4",
+	"#0084d1",
+	"#0069a8",
+	"#00598a",
+	"#024a70",
+	"#052f4a",
+	"#eff6ff",
+	"#dbeafe",
+	"#bedbff",
+	"#8ec5ff",
+	"#51a2ff",
+	"#2b7fff",
+	"#155dfc",
+	"#1447e6",
+	"#193cb8",
+	"#1c398e",
+	"#162456",
+	"#eef2ff",
+	"#e0e7ff",
+	"#c6d2ff",
+	"#a3b3ff",
+	"#7c86ff",
+	"#615fff",
+	"#4f39f6",
+	"#432dd7",
+	"#372aac",
+	"#312c85",
+	"#1e1a4d",
+	"#f5f3ff",
+	"#ede9fe",
+	"#ddd6ff",
+	"#c4b4ff",
+	"#a684ff",
+	"#8e51ff",
+	"#7f22fe",
+	"#7008e7",
+	"#5d0ec0",
+	"#4d179a",
+	"#2f0d68",
+	"#faf5ff",
+	"#f3e8ff",
+	"#e9d4ff",
+	"#dab2ff",
+	"#c27aff",
+	"#ad46ff",
+	"#9810fa",
+	"#8200db",
+	"#6e11b0",
+	"#59168b",
+	"#3c0366",
+	"#fdf4ff",
+	"#fae8ff",
+	"#f6cfff",
+	"#f4a8ff",
+	"#ed6aff",
+	"#e12afb",
+	"#c800de",
+	"#a800b7",
+	"#8a0194",
+	"#721378",
+	"#4b004f",
+	"#fdf2f8",
+	"#fce7f3",
+	"#fccee8",
+	"#fda5d5",
+	"#fb64b6",
+	"#f6339a",
+	"#e60076",
+	"#c6005c",
+	"#a3004c",
+	"#861043",
+	"#510424",
+	"#fff1f2",
+	"#ffe4e6",
+	"#ffccd3",
+	"#ffa1ad",
+	"#ff637e",
+	"#ff2056",
+	"#ec003f",
+	"#c70036",
+	"#a50036",
+	"#8b0836",
+	"#4d0218",
+	"#f8fafc",
+	"#f1f5f9",
+	"#e2e8f0",
+	"#cad5e2",
+	"#90a1b9",
+	"#62748e",
+	"#45556c",
+	"#314158",
+	"#1d293d",
+	"#0f172b",
+	"#020618",
+	"#f9fafb",
+	"#f3f4f6",
+	"#e5e7eb",
+	"#d1d5dc",
+	"#99a1af",
+	"#6a7282",
+	"#4a5565",
+	"#364153",
+	"#1e2939",
+	"#101828",
+	"#030712",
+	"#fafafa",
+	"#f4f4f5",
+	"#e4e4e7",
+	"#d4d4d8",
+	"#9f9fa9",
+	"#71717b",
+	"#52525c",
+	"#3f3f46",
+	"#27272a",
+	"#18181b",
+	"#09090b",
+	"#f5f5f5",
+	"#e5e5e5",
+	"#d4d4d4",
+	"#a1a1a1",
+	"#737373",
+	"#525252",
+	"#404040",
+	"#262626",
+	"#171717",
+	"#0a0a0a",
+	"#fafaf9",
+	"#f5f5f4",
+	"#e7e5e4",
+	"#d6d3d1",
+	"#a6a09b",
+	"#79716b",
+	"#57534d",
+	"#44403b",
+	"#292524",
+	"#1c1917",
+	"#0c0a09",
 ];
diff --git a/apps/web/src/data/colors/syntax-ui.tsx b/apps/web/src/data/colors/syntax-ui.tsx
index 50c7e7cc..e650b7d2 100644
--- a/apps/web/src/data/colors/syntax-ui.tsx
+++ b/apps/web/src/data/colors/syntax-ui.tsx
@@ -1,32 +1,32 @@
 // These are the gradients from Syntax UI (https://syntaxui.com/effects/gradients)
 
 export const syntaxUIGradients = [
-  // Cyan to Blue gradients
-  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",
-  "linear-gradient(to right, #bfdbfe, #a5f3fc)",
-  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",
+	// Cyan to Blue gradients
+	"linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",
+	"linear-gradient(to right, #bfdbfe, #a5f3fc)",
+	"linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",
 
-  // Purple gradients
-  "linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)",
-  "linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)",
+	// Purple gradients
+	"linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)",
+	"linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)",
 
-  // Blue gradients
-  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",
-  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",
+	// Blue gradients
+	"linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",
+	"linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",
 
-  // Green gradients
-  "linear-gradient(to right, #6ee7b7, #34d399, #10b981)",
-  "linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)",
+	// Green gradients
+	"linear-gradient(to right, #6ee7b7, #34d399, #10b981)",
+	"linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)",
 
-  // Red gradient
-  "linear-gradient(to right, #fca5a5, #f87171, #ef4444)",
+	// Red gradient
+	"linear-gradient(to right, #fca5a5, #f87171, #ef4444)",
 
-  // Yellow/Orange gradient
-  "linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)",
+	// Yellow/Orange gradient
+	"linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)",
 
-  // Pink gradient
-  "linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)",
+	// Pink gradient
+	"linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)",
 
-  // Neon radial gradient
-  "radial-gradient(circle at bottom left, #ff00ff, #00ffff)",
+	// Neon radial gradient
+	"radial-gradient(circle at bottom left, #ff00ff, #00ffff)",
 ];
diff --git a/apps/web/src/hooks/actions/use-action-handler.ts b/apps/web/src/hooks/actions/use-action-handler.ts
index 17f5636a..3f6dbd21 100644
--- a/apps/web/src/hooks/actions/use-action-handler.ts
+++ b/apps/web/src/hooks/actions/use-action-handler.ts
@@ -1,65 +1,52 @@
-import { useEffect, useRef, useCallback } from "react";
-import {
-  TAction,
-  TActionFunc,
-  TActionHandlerOptions,
-  TInvocationTrigger,
-  bindAction,
-  unbindAction,
+import { useCallback, useEffect, useRef } from "react";
+import type {
+	TAction,
+	TActionFunc,
+	TActionHandlerOptions,
+	TArgOfAction,
+	TInvocationTrigger,
 } from "@/lib/actions";
+import { bindAction, unbindAction } from "@/lib/actions";
 
 export function useActionHandler<A extends TAction>(
-  action: A,
-  handler: TActionFunc<A>,
-  isActive: TActionHandlerOptions,
+	action: A,
+	handler: TActionFunc<A>,
+	isActive: TActionHandlerOptions,
 ) {
-  const handlerRef = useRef(handler);
-  const isBoundRef = useRef(false);
+	const handlerRef = useRef<TActionFunc<A>>(handler);
+	const isBoundRef = useRef(false);
 
-  useEffect(() => {
-    handlerRef.current = handler;
-  }, [handler]);
+	useEffect(() => {
+		handlerRef.current = handler;
+	}, [handler]);
 
-  const stableHandler = useCallback(
-    (args: any, trigger?: TInvocationTrigger) => {
-      (handlerRef.current as any)(args, trigger);
-    },
-    [],
-  ) as TActionFunc<A>;
+	const stableHandler = useCallback(
+		(...parameters: [TArgOfAction<A>, TInvocationTrigger?]) => {
+			(
+				handlerRef.current as (
+					...handlerParameters: [TArgOfAction<A>, TInvocationTrigger?]
+				) => void
+			)(...parameters);
+		},
+		[],
+	) as TActionFunc<A>;
 
-  useEffect(() => {
-    const shouldBind =
-      isActive === undefined ||
-      (typeof isActive === "boolean" ? isActive : isActive.current);
+	useEffect(() => {
+		const shouldBind =
+			isActive === undefined ||
+			(typeof isActive === "boolean" ? isActive : isActive.current);
 
-    if (shouldBind && !isBoundRef.current) {
-      bindAction(action, stableHandler);
-      isBoundRef.current = true;
-    } else if (!shouldBind && isBoundRef.current) {
-      unbindAction(action, stableHandler);
-      isBoundRef.current = false;
-    }
+		if (shouldBind && !isBoundRef.current) {
+			bindAction(action, stableHandler);
+			isBoundRef.current = true;
+		} else if (!shouldBind && isBoundRef.current) {
+			unbindAction(action, stableHandler);
+			isBoundRef.current = false;
+		}
 
-    return () => {
-      unbindAction(action, stableHandler);
-      isBoundRef.current = false;
-    };
-  }, [action, stableHandler, isActive]);
-
-  useEffect(() => {
-    if (isActive && typeof isActive === "object" && "current" in isActive) {
-      const interval = setInterval(() => {
-        const shouldBind = isActive.current;
-        if (shouldBind !== isBoundRef.current) {
-          if (shouldBind) {
-            bindAction(action, stableHandler);
-          } else {
-            unbindAction(action, stableHandler);
-          }
-          isBoundRef.current = shouldBind;
-        }
-      }, 100);
-      return () => clearInterval(interval);
-    }
-  }, [action, stableHandler, isActive]);
+		return () => {
+			unbindAction(action, stableHandler);
+			isBoundRef.current = false;
+		};
+	}, [action, stableHandler, isActive]);
 }
diff --git a/apps/web/src/hooks/actions/use-editor-actions.ts b/apps/web/src/hooks/actions/use-editor-actions.ts
index f717cde9..ba294efb 100644
--- a/apps/web/src/hooks/actions/use-editor-actions.ts
+++ b/apps/web/src/hooks/actions/use-editor-actions.ts
@@ -6,271 +6,271 @@ import { useEditor } from "../use-editor";
 import { useElementSelection } from "../timeline/element/use-element-selection";
 
 export function useEditorActions() {
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
-  const { selectedElements, setElementSelection } = useElementSelection();
-  const { clipboard, setClipboard, toggleSnapping } = useTimelineStore();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
+	const { selectedElements, setElementSelection } = useElementSelection();
+	const { clipboard, setClipboard, toggleSnapping } = useTimelineStore();
 
-  useActionHandler(
-    "toggle-play",
-    () => {
-      editor.playback.toggle();
-    },
-    undefined,
-  );
+	useActionHandler(
+		"toggle-play",
+		() => {
+			editor.playback.toggle();
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "stop-playback",
-    () => {
-      if (editor.playback.getIsPlaying()) {
-        editor.playback.toggle();
-      }
-      editor.playback.seek({ time: 0 });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"stop-playback",
+		() => {
+			if (editor.playback.getIsPlaying()) {
+				editor.playback.toggle();
+			}
+			editor.playback.seek({ time: 0 });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "seek-forward",
-    (args) => {
-      const seconds = args?.seconds ?? 1;
-      editor.playback.seek({
-        time: Math.min(
-          editor.timeline.getTotalDuration(),
-          editor.playback.getCurrentTime() + seconds,
-        ),
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"seek-forward",
+		(args) => {
+			const seconds = args?.seconds ?? 1;
+			editor.playback.seek({
+				time: Math.min(
+					editor.timeline.getTotalDuration(),
+					editor.playback.getCurrentTime() + seconds,
+				),
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "seek-backward",
-    (args) => {
-      const seconds = args?.seconds ?? 1;
-      editor.playback.seek({
-        time: Math.max(0, editor.playback.getCurrentTime() - seconds),
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"seek-backward",
+		(args) => {
+			const seconds = args?.seconds ?? 1;
+			editor.playback.seek({
+				time: Math.max(0, editor.playback.getCurrentTime() - seconds),
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "frame-step-forward",
-    () => {
-      const fps = activeProject.settings.fps;
-      editor.playback.seek({
-        time: Math.min(
-          editor.timeline.getTotalDuration(),
-          editor.playback.getCurrentTime() + 1 / fps,
-        ),
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"frame-step-forward",
+		() => {
+			const fps = activeProject.settings.fps;
+			editor.playback.seek({
+				time: Math.min(
+					editor.timeline.getTotalDuration(),
+					editor.playback.getCurrentTime() + 1 / fps,
+				),
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "frame-step-backward",
-    () => {
-      const fps = activeProject.settings.fps;
-      editor.playback.seek({
-        time: Math.max(0, editor.playback.getCurrentTime() - 1 / fps),
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"frame-step-backward",
+		() => {
+			const fps = activeProject.settings.fps;
+			editor.playback.seek({
+				time: Math.max(0, editor.playback.getCurrentTime() - 1 / fps),
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "jump-forward",
-    (args) => {
-      const seconds = args?.seconds ?? 5;
-      editor.playback.seek({
-        time: Math.min(
-          editor.timeline.getTotalDuration(),
-          editor.playback.getCurrentTime() + seconds,
-        ),
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"jump-forward",
+		(args) => {
+			const seconds = args?.seconds ?? 5;
+			editor.playback.seek({
+				time: Math.min(
+					editor.timeline.getTotalDuration(),
+					editor.playback.getCurrentTime() + seconds,
+				),
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "jump-backward",
-    (args) => {
-      const seconds = args?.seconds ?? 5;
-      editor.playback.seek({
-        time: Math.max(0, editor.playback.getCurrentTime() - seconds),
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"jump-backward",
+		(args) => {
+			const seconds = args?.seconds ?? 5;
+			editor.playback.seek({
+				time: Math.max(0, editor.playback.getCurrentTime() - seconds),
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "goto-start",
-    () => {
-      editor.playback.seek({ time: 0 });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"goto-start",
+		() => {
+			editor.playback.seek({ time: 0 });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "goto-end",
-    () => {
-      editor.playback.seek({ time: editor.timeline.getTotalDuration() });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"goto-end",
+		() => {
+			editor.playback.seek({ time: editor.timeline.getTotalDuration() });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "split-selected",
-    () => {
-      editor.timeline.splitElements({
-        elements: selectedElements,
-        splitTime: editor.playback.getCurrentTime(),
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"split-selected",
+		() => {
+			editor.timeline.splitElements({
+				elements: selectedElements,
+				splitTime: editor.playback.getCurrentTime(),
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "split-selected-left",
-    () => {
-      editor.timeline.splitElements({
-        elements: selectedElements,
-        splitTime: editor.playback.getCurrentTime(),
-        retainSide: "left",
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"split-selected-left",
+		() => {
+			editor.timeline.splitElements({
+				elements: selectedElements,
+				splitTime: editor.playback.getCurrentTime(),
+				retainSide: "left",
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "split-selected-right",
-    () => {
-      editor.timeline.splitElements({
-        elements: selectedElements,
-        splitTime: editor.playback.getCurrentTime(),
-        retainSide: "right",
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"split-selected-right",
+		() => {
+			editor.timeline.splitElements({
+				elements: selectedElements,
+				splitTime: editor.playback.getCurrentTime(),
+				retainSide: "right",
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "delete-selected",
-    () => {
-      if (selectedElements.length === 0) {
-        return;
-      }
-      editor.timeline.deleteElements({
-        elements: selectedElements,
-      });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"delete-selected",
+		() => {
+			if (selectedElements.length === 0) {
+				return;
+			}
+			editor.timeline.deleteElements({
+				elements: selectedElements,
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "select-all",
-    () => {
-      const allElements = editor.timeline.getTracks().flatMap((track) =>
-        track.elements.map((element) => ({
-          trackId: track.id,
-          elementId: element.id,
-        })),
-      );
-      setElementSelection({ elements: allElements });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"select-all",
+		() => {
+			const allElements = editor.timeline.getTracks().flatMap((track) =>
+				track.elements.map((element) => ({
+					trackId: track.id,
+					elementId: element.id,
+				})),
+			);
+			setElementSelection({ elements: allElements });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "duplicate-selected",
-    () => {
-      editor.timeline.duplicateElements({ elements: selectedElements });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"duplicate-selected",
+		() => {
+			editor.timeline.duplicateElements({ elements: selectedElements });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "toggle-elements-muted-selected",
-    () => {
-      editor.timeline.toggleElementsMuted({ elements: selectedElements });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"toggle-elements-muted-selected",
+		() => {
+			editor.timeline.toggleElementsMuted({ elements: selectedElements });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "toggle-elements-visibility-selected",
-    () => {
-      editor.timeline.toggleElementsVisibility({ elements: selectedElements });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"toggle-elements-visibility-selected",
+		() => {
+			editor.timeline.toggleElementsVisibility({ elements: selectedElements });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "toggle-bookmark",
-    () => {
-      editor.scenes.toggleBookmark({ time: editor.playback.getCurrentTime() });
-    },
-    undefined,
-  );
+	useActionHandler(
+		"toggle-bookmark",
+		() => {
+			editor.scenes.toggleBookmark({ time: editor.playback.getCurrentTime() });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "copy-selected",
-    () => {
-      if (selectedElements.length === 0) return;
+	useActionHandler(
+		"copy-selected",
+		() => {
+			if (selectedElements.length === 0) return;
 
-      const results = editor.timeline.getElementsWithTracks({
-        elements: selectedElements,
-      });
-      const items = results.map(({ track, element }) => {
-        const { id, ...elementWithoutId } = element;
-        return {
-          trackId: track.id,
-          trackType: track.type,
-          element: elementWithoutId,
-        };
-      });
+			const results = editor.timeline.getElementsWithTracks({
+				elements: selectedElements,
+			});
+			const items = results.map(({ track, element }) => {
+				const { id, ...elementWithoutId } = element;
+				return {
+					trackId: track.id,
+					trackType: track.type,
+					element: elementWithoutId,
+				};
+			});
 
-      setClipboard({ items });
-    },
-    undefined,
-  );
+			setClipboard({ items });
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "paste-selected",
-    () => {
-      if (!clipboard?.items.length) return;
+	useActionHandler(
+		"paste-selected",
+		() => {
+			if (!clipboard?.items.length) return;
 
-      editor.timeline.pasteAtTime({
-        time: editor.playback.getCurrentTime(),
-        clipboardItems: clipboard.items,
-      });
-    },
-    undefined,
-  );
+			editor.timeline.pasteAtTime({
+				time: editor.playback.getCurrentTime(),
+				clipboardItems: clipboard.items,
+			});
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "toggle-snapping",
-    () => {
-      toggleSnapping();
-    },
-    undefined,
-  );
+	useActionHandler(
+		"toggle-snapping",
+		() => {
+			toggleSnapping();
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "undo",
-    () => {
-      editor.command.undo();
-    },
-    undefined,
-  );
+	useActionHandler(
+		"undo",
+		() => {
+			editor.command.undo();
+		},
+		undefined,
+	);
 
-  useActionHandler(
-    "redo",
-    () => {
-      editor.command.redo();
-    },
-    undefined,
-  );
+	useActionHandler(
+		"redo",
+		() => {
+			editor.command.redo();
+		},
+		undefined,
+	);
 }
diff --git a/apps/web/src/hooks/timeline/element/use-element-interaction.ts b/apps/web/src/hooks/timeline/element/use-element-interaction.ts
index 31a900fc..84b14f43 100644
--- a/apps/web/src/hooks/timeline/element/use-element-interaction.ts
+++ b/apps/web/src/hooks/timeline/element/use-element-interaction.ts
@@ -1,10 +1,10 @@
 import {
-  useState,
-  useCallback,
-  useEffect,
-  useRef,
-  type MouseEvent as ReactMouseEvent,
-  type RefObject,
+	useState,
+	useCallback,
+	useEffect,
+	useRef,
+	type MouseEvent as ReactMouseEvent,
+	type RefObject,
 } from "react";
 import { useEditor } from "@/hooks/use-editor";
 import { useElementSelection } from "@/hooks/timeline/element/use-element-selection";
@@ -14,592 +14,594 @@ import { computeDropTarget } from "@/lib/timeline/drop-utils";
 import { generateUUID } from "@/utils/id";
 import { useTimelineSnapping } from "@/hooks/timeline/use-timeline-snapping";
 import type {
-  DropTarget,
-  ElementDragState,
-  TimelineElement,
-  TimelineTrack,
+	DropTarget,
+	ElementDragState,
+	TimelineElement,
+	TimelineTrack,
 } from "@/types/timeline";
 import type { SnapPoint } from "@/hooks/timeline/use-timeline-snapping";
 
 const DRAG_THRESHOLD_PX = 5;
 
 interface UseElementInteractionProps {
-  zoomLevel: number;
-  timelineRef: RefObject<HTMLDivElement | null>;
-  tracksContainerRef: RefObject<HTMLDivElement | null>;
-  tracksScrollRef: RefObject<HTMLDivElement | null>;
-  snappingEnabled: boolean;
-  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
+	zoomLevel: number;
+	timelineRef: RefObject<HTMLDivElement | null>;
+	tracksContainerRef: RefObject<HTMLDivElement | null>;
+	tracksScrollRef: RefObject<HTMLDivElement | null>;
+	snappingEnabled: boolean;
+	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
 }
 
 const initialDragState: ElementDragState = {
-  isDragging: false,
-  elementId: null,
-  trackId: null,
-  startMouseX: 0,
-  startMouseY: 0,
-  startElementTime: 0,
-  clickOffsetTime: 0,
-  currentTime: 0,
-  currentMouseY: 0,
+	isDragging: false,
+	elementId: null,
+	trackId: null,
+	startMouseX: 0,
+	startMouseY: 0,
+	startElementTime: 0,
+	clickOffsetTime: 0,
+	currentTime: 0,
+	currentMouseY: 0,
 };
 
 interface PendingDragState {
-  elementId: string;
-  trackId: string;
-  startMouseX: number;
-  startMouseY: number;
-  startElementTime: number;
-  clickOffsetTime: number;
+	elementId: string;
+	trackId: string;
+	startMouseX: number;
+	startMouseY: number;
+	startElementTime: number;
+	clickOffsetTime: number;
 }
 
 function getMouseTimeFromClientX({
-  clientX,
-  containerRect,
-  zoomLevel,
-  scrollLeft,
+	clientX,
+	containerRect,
+	zoomLevel,
+	scrollLeft,
 }: {
-  clientX: number;
-  containerRect: DOMRect;
-  zoomLevel: number;
-  scrollLeft: number;
+	clientX: number;
+	containerRect: DOMRect;
+	zoomLevel: number;
+	scrollLeft: number;
 }): number {
-  const mouseX = clientX - containerRect.left + scrollLeft;
-  return Math.max(
-    0,
-    mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
-  );
+	const mouseX = clientX - containerRect.left + scrollLeft;
+	return Math.max(
+		0,
+		mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
+	);
 }
 
 function getClickOffsetTime({
-  clientX,
-  elementRect,
-  zoomLevel,
+	clientX,
+	elementRect,
+	zoomLevel,
 }: {
-  clientX: number;
-  elementRect: DOMRect;
-  zoomLevel: number;
+	clientX: number;
+	elementRect: DOMRect;
+	zoomLevel: number;
 }): number {
-  const clickOffsetX = clientX - elementRect.left;
-  return clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
+	const clickOffsetX = clientX - elementRect.left;
+	return clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
 }
 
 function getVerticalDragDirection({
-  startMouseY,
-  currentMouseY,
+	startMouseY,
+	currentMouseY,
 }: {
-  startMouseY: number;
-  currentMouseY: number;
+	startMouseY: number;
+	currentMouseY: number;
 }): "up" | "down" | null {
-  if (currentMouseY < startMouseY) return "up";
-  if (currentMouseY > startMouseY) return "down";
-  return null;
+	if (currentMouseY < startMouseY) return "up";
+	if (currentMouseY > startMouseY) return "down";
+	return null;
 }
 
 function getDragDropTarget({
-  clientX,
-  clientY,
-  elementId,
-  trackId,
-  tracks,
-  tracksContainerRef,
-  tracksScrollRef,
-  zoomLevel,
-  snappedTime,
-  verticalDragDirection,
+	clientX,
+	clientY,
+	elementId,
+	trackId,
+	tracks,
+	tracksContainerRef,
+	tracksScrollRef,
+	zoomLevel,
+	snappedTime,
+	verticalDragDirection,
 }: {
-  clientX: number;
-  clientY: number;
-  elementId: string;
-  trackId: string;
-  tracks: TimelineTrack[];
-  tracksContainerRef: RefObject<HTMLDivElement | null>;
-  tracksScrollRef: RefObject<HTMLDivElement | null>;
-  zoomLevel: number;
-  snappedTime: number;
-  verticalDragDirection?: "up" | "down" | null;
+	clientX: number;
+	clientY: number;
+	elementId: string;
+	trackId: string;
+	tracks: TimelineTrack[];
+	tracksContainerRef: RefObject<HTMLDivElement | null>;
+	tracksScrollRef: RefObject<HTMLDivElement | null>;
+	zoomLevel: number;
+	snappedTime: number;
+	verticalDragDirection?: "up" | "down" | null;
 }): DropTarget | null {
-  const containerRect = tracksContainerRef.current?.getBoundingClientRect();
-  const scrollContainer = tracksScrollRef.current;
-  if (!containerRect || !scrollContainer) return null;
+	const containerRect = tracksContainerRef.current?.getBoundingClientRect();
+	const scrollContainer = tracksScrollRef.current;
+	if (!containerRect || !scrollContainer) return null;
 
-  const sourceTrack = tracks.find(({ id }) => id === trackId);
-  const movingElement = sourceTrack?.elements.find(
-    ({ id }) => id === elementId,
-  );
-  if (!movingElement) return null;
+	const sourceTrack = tracks.find(({ id }) => id === trackId);
+	const movingElement = sourceTrack?.elements.find(
+		({ id }) => id === elementId,
+	);
+	if (!movingElement) return null;
 
-  const elementDuration = movingElement.duration;
-  const scrollLeft = scrollContainer.scrollLeft;
-  const scrollContainerRect = scrollContainer.getBoundingClientRect();
-  const mouseX = clientX - scrollContainerRect.left + scrollLeft;
-  const mouseY = clientY - containerRect.top;
+	const elementDuration = movingElement.duration;
+	const scrollLeft = scrollContainer.scrollLeft;
+	const scrollContainerRect = scrollContainer.getBoundingClientRect();
+	const mouseX = clientX - scrollContainerRect.left + scrollLeft;
+	const mouseY = clientY - containerRect.top;
 
-  return computeDropTarget({
-    elementType: movingElement.type,
-    mouseX,
-    mouseY,
-    tracks,
-    playheadTime: snappedTime,
-    isExternalDrop: false,
-    elementDuration,
-    pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
-    zoomLevel,
-    startTimeOverride: snappedTime,
-    excludeElementId: movingElement.id,
-    verticalDragDirection,
-  });
+	return computeDropTarget({
+		elementType: movingElement.type,
+		mouseX,
+		mouseY,
+		tracks,
+		playheadTime: snappedTime,
+		isExternalDrop: false,
+		elementDuration,
+		pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
+		zoomLevel,
+		startTimeOverride: snappedTime,
+		excludeElementId: movingElement.id,
+		verticalDragDirection,
+	});
 }
 
-interface StartDragParams extends Omit<
-  ElementDragState,
-  "isDragging" | "currentTime" | "currentMouseY"
-> {
-  initialCurrentTime: number;
-  initialCurrentMouseY: number;
+interface StartDragParams
+	extends Omit<
+		ElementDragState,
+		"isDragging" | "currentTime" | "currentMouseY"
+	> {
+	initialCurrentTime: number;
+	initialCurrentMouseY: number;
 }
 
 export function useElementInteraction({
-  zoomLevel,
-  timelineRef,
-  tracksContainerRef,
-  tracksScrollRef,
-  snappingEnabled,
-  onSnapPointChange,
+	zoomLevel,
+	timelineRef,
+	tracksContainerRef,
+	tracksScrollRef,
+	snappingEnabled,
+	onSnapPointChange,
 }: UseElementInteractionProps) {
-  const editor = useEditor();
-  const tracks = editor.timeline.getTracks();
-  const { snapElementEdge } = useTimelineSnapping();
-  const {
-    isElementSelected,
-    selectElement,
-    handleElementClick: handleSelectionClick,
-  } = useElementSelection();
+	const editor = useEditor();
+	const tracks = editor.timeline.getTracks();
+	const { snapElementEdge } = useTimelineSnapping();
+	const {
+		isElementSelected,
+		selectElement,
+		handleElementClick: handleSelectionClick,
+	} = useElementSelection();
 
-  const [dragState, setDragState] =
-    useState<ElementDragState>(initialDragState);
-  const [dragDropTarget, setDragDropTarget] = useState<DropTarget | null>(null);
-  const [isPendingDrag, setIsPendingDrag] = useState(false);
-  const pendingDragRef = useRef<PendingDragState | null>(null);
-  const lastMouseXRef = useRef(0);
-  const mouseDownLocationRef = useRef<{ x: number; y: number } | null>(null);
+	const [dragState, setDragState] =
+		useState<ElementDragState>(initialDragState);
+	const [dragDropTarget, setDragDropTarget] = useState<DropTarget | null>(null);
+	const [isPendingDrag, setIsPendingDrag] = useState(false);
+	const pendingDragRef = useRef<PendingDragState | null>(null);
+	const lastMouseXRef = useRef(0);
+	const mouseDownLocationRef = useRef<{ x: number; y: number } | null>(null);
 
-  const startDrag = useCallback(
-    ({
-      elementId,
-      trackId,
-      startMouseX,
-      startMouseY,
-      startElementTime,
-      clickOffsetTime,
-      initialCurrentTime,
-      initialCurrentMouseY,
-    }: StartDragParams) => {
-      setDragState({
-        isDragging: true,
-        elementId,
-        trackId,
-        startMouseX,
-        startMouseY,
-        startElementTime,
-        clickOffsetTime,
-        currentTime: initialCurrentTime,
-        currentMouseY: initialCurrentMouseY,
-      });
-    },
-    [],
-  );
+	const startDrag = useCallback(
+		({
+			elementId,
+			trackId,
+			startMouseX,
+			startMouseY,
+			startElementTime,
+			clickOffsetTime,
+			initialCurrentTime,
+			initialCurrentMouseY,
+		}: StartDragParams) => {
+			setDragState({
+				isDragging: true,
+				elementId,
+				trackId,
+				startMouseX,
+				startMouseY,
+				startElementTime,
+				clickOffsetTime,
+				currentTime: initialCurrentTime,
+				currentMouseY: initialCurrentMouseY,
+			});
+		},
+		[],
+	);
 
-  const endDrag = useCallback(() => {
-    setDragState(initialDragState);
-    setDragDropTarget(null);
-  }, []);
+	const endDrag = useCallback(() => {
+		setDragState(initialDragState);
+		setDragDropTarget(null);
+	}, []);
 
-  const getDragSnapResult = useCallback(
-    ({
-      frameSnappedTime,
-      movingElement,
-    }: {
-      frameSnappedTime: number;
-      movingElement: TimelineElement | null | undefined;
-    }) => {
-      if (!snappingEnabled || !movingElement) {
-        return { snappedTime: frameSnappedTime, snapPoint: null };
-      }
+	const getDragSnapResult = useCallback(
+		({
+			frameSnappedTime,
+			movingElement,
+		}: {
+			frameSnappedTime: number;
+			movingElement: TimelineElement | null | undefined;
+		}) => {
+			if (!snappingEnabled || !movingElement) {
+				return { snappedTime: frameSnappedTime, snapPoint: null };
+			}
 
-      const elementDuration = movingElement.duration;
-      const playheadTime = editor.playback.getCurrentTime();
+			const elementDuration = movingElement.duration;
+			const playheadTime = editor.playback.getCurrentTime();
 
-      const startSnap = snapElementEdge({
-        targetTime: frameSnappedTime,
-        elementDuration,
-        tracks,
-        playheadTime,
-        zoomLevel,
-        excludeElementId: movingElement.id,
-        snapToStart: true,
-      });
+			const startSnap = snapElementEdge({
+				targetTime: frameSnappedTime,
+				elementDuration,
+				tracks,
+				playheadTime,
+				zoomLevel,
+				excludeElementId: movingElement.id,
+				snapToStart: true,
+			});
 
-      const endSnap = snapElementEdge({
-        targetTime: frameSnappedTime,
-        elementDuration,
-        tracks,
-        playheadTime,
-        zoomLevel,
-        excludeElementId: movingElement.id,
-        snapToStart: false,
-      });
+			const endSnap = snapElementEdge({
+				targetTime: frameSnappedTime,
+				elementDuration,
+				tracks,
+				playheadTime,
+				zoomLevel,
+				excludeElementId: movingElement.id,
+				snapToStart: false,
+			});
 
-      const snapResult =
-        startSnap.snapDistance <= endSnap.snapDistance ? startSnap : endSnap;
-      if (!snapResult.snapPoint) {
-        return { snappedTime: frameSnappedTime, snapPoint: null };
-      }
+			const snapResult =
+				startSnap.snapDistance <= endSnap.snapDistance ? startSnap : endSnap;
+			if (!snapResult.snapPoint) {
+				return { snappedTime: frameSnappedTime, snapPoint: null };
+			}
 
-      return {
-        snappedTime: snapResult.snappedTime,
-        snapPoint: snapResult.snapPoint,
-      };
-    },
-    [snappingEnabled, editor.playback, snapElementEdge, tracks, zoomLevel],
-  );
+			return {
+				snappedTime: snapResult.snappedTime,
+				snapPoint: snapResult.snapPoint,
+			};
+		},
+		[snappingEnabled, editor.playback, snapElementEdge, tracks, zoomLevel],
+	);
 
-  useEffect(() => {
-    if (!dragState.isDragging && !isPendingDrag) return;
+	useEffect(() => {
+		if (!dragState.isDragging && !isPendingDrag) return;
 
-    const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
-      let startedDragThisEvent = false;
-      const timeline = timelineRef.current;
-      const scrollContainer = tracksScrollRef.current;
-      if (!timeline || !scrollContainer) return;
-      lastMouseXRef.current = clientX;
+		const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
+			let startedDragThisEvent = false;
+			const timeline = timelineRef.current;
+			const scrollContainer = tracksScrollRef.current;
+			if (!timeline || !scrollContainer) return;
+			lastMouseXRef.current = clientX;
 
-      if (isPendingDrag && pendingDragRef.current) {
-        const deltaX = Math.abs(clientX - pendingDragRef.current.startMouseX);
-        const deltaY = Math.abs(clientY - pendingDragRef.current.startMouseY);
-        if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) {
-          const activeProject = editor.project.getActive();
-          if (!activeProject) return;
-          const scrollLeft = scrollContainer.scrollLeft;
-          const mouseTime = getMouseTimeFromClientX({
-            clientX,
-            containerRect: scrollContainer.getBoundingClientRect(),
-            zoomLevel,
-            scrollLeft,
-          });
-          const adjustedTime = Math.max(
-            0,
-            mouseTime - pendingDragRef.current.clickOffsetTime,
-          );
-          const snappedTime = snapTimeToFrame({
-            time: adjustedTime,
-            fps: activeProject.settings.fps,
-          });
-          startDrag({
-            ...pendingDragRef.current,
-            initialCurrentTime: snappedTime,
-            initialCurrentMouseY: clientY,
-          });
-          startedDragThisEvent = true;
-          pendingDragRef.current = null;
-          setIsPendingDrag(false);
-        } else {
-          return;
-        }
-      }
+			if (isPendingDrag && pendingDragRef.current) {
+				const deltaX = Math.abs(clientX - pendingDragRef.current.startMouseX);
+				const deltaY = Math.abs(clientY - pendingDragRef.current.startMouseY);
+				if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) {
+					const activeProject = editor.project.getActive();
+					if (!activeProject) return;
+					const scrollLeft = scrollContainer.scrollLeft;
+					const mouseTime = getMouseTimeFromClientX({
+						clientX,
+						containerRect: scrollContainer.getBoundingClientRect(),
+						zoomLevel,
+						scrollLeft,
+					});
+					const adjustedTime = Math.max(
+						0,
+						mouseTime - pendingDragRef.current.clickOffsetTime,
+					);
+					const snappedTime = snapTimeToFrame({
+						time: adjustedTime,
+						fps: activeProject.settings.fps,
+					});
+					startDrag({
+						...pendingDragRef.current,
+						initialCurrentTime: snappedTime,
+						initialCurrentMouseY: clientY,
+					});
+					startedDragThisEvent = true;
+					pendingDragRef.current = null;
+					setIsPendingDrag(false);
+				} else {
+					return;
+				}
+			}
 
-      if (startedDragThisEvent) {
-        return;
-      }
+			if (startedDragThisEvent) {
+				return;
+			}
 
-      if (dragState.elementId && dragState.trackId) {
-        const alreadySelected = isElementSelected({
-          trackId: dragState.trackId,
-          elementId: dragState.elementId,
-        });
-        if (!alreadySelected) {
-          selectElement({
-            trackId: dragState.trackId,
-            elementId: dragState.elementId,
-          });
-        }
-      }
+			if (dragState.elementId && dragState.trackId) {
+				const alreadySelected = isElementSelected({
+					trackId: dragState.trackId,
+					elementId: dragState.elementId,
+				});
+				if (!alreadySelected) {
+					selectElement({
+						trackId: dragState.trackId,
+						elementId: dragState.elementId,
+					});
+				}
+			}
 
-      const activeProject = editor.project.getActive();
-      if (!activeProject) return;
+			const activeProject = editor.project.getActive();
+			if (!activeProject) return;
 
-      const scrollLeft = scrollContainer.scrollLeft;
-      const mouseTime = getMouseTimeFromClientX({
-        clientX,
-        containerRect: scrollContainer.getBoundingClientRect(),
-        zoomLevel,
-        scrollLeft,
-      });
-      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
-      const fps = activeProject.settings.fps;
-      const frameSnappedTime = snapTimeToFrame({ time: adjustedTime, fps });
+			const scrollLeft = scrollContainer.scrollLeft;
+			const mouseTime = getMouseTimeFromClientX({
+				clientX,
+				containerRect: scrollContainer.getBoundingClientRect(),
+				zoomLevel,
+				scrollLeft,
+			});
+			const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
+			const fps = activeProject.settings.fps;
+			const frameSnappedTime = snapTimeToFrame({ time: adjustedTime, fps });
 
-      const sourceTrack = tracks.find(({ id }) => id === dragState.trackId);
-      const movingElement = sourceTrack?.elements.find(
-        ({ id }) => id === dragState.elementId,
-      );
-      const { snappedTime, snapPoint } = getDragSnapResult({
-        frameSnappedTime,
-        movingElement,
-      });
-      setDragState((previousDragState) => ({
-        ...previousDragState,
-        currentTime: snappedTime,
-        currentMouseY: clientY,
-      }));
-      onSnapPointChange?.(snapPoint);
+			const sourceTrack = tracks.find(({ id }) => id === dragState.trackId);
+			const movingElement = sourceTrack?.elements.find(
+				({ id }) => id === dragState.elementId,
+			);
+			const { snappedTime, snapPoint } = getDragSnapResult({
+				frameSnappedTime,
+				movingElement,
+			});
+			setDragState((previousDragState) => ({
+				...previousDragState,
+				currentTime: snappedTime,
+				currentMouseY: clientY,
+			}));
+			onSnapPointChange?.(snapPoint);
 
-      if (dragState.elementId && dragState.trackId) {
-        const verticalDragDirection = getVerticalDragDirection({
-          startMouseY: dragState.startMouseY,
-          currentMouseY: clientY,
-        });
-        const dropTarget = getDragDropTarget({
-          clientX,
-          clientY,
-          elementId: dragState.elementId,
-          trackId: dragState.trackId,
-          tracks,
-          tracksContainerRef,
-          tracksScrollRef,
-          zoomLevel,
-          snappedTime,
-          verticalDragDirection,
-        });
-        setDragDropTarget(dropTarget?.isNewTrack ? dropTarget : null);
-      }
-    };
+			if (dragState.elementId && dragState.trackId) {
+				const verticalDragDirection = getVerticalDragDirection({
+					startMouseY: dragState.startMouseY,
+					currentMouseY: clientY,
+				});
+				const dropTarget = getDragDropTarget({
+					clientX,
+					clientY,
+					elementId: dragState.elementId,
+					trackId: dragState.trackId,
+					tracks,
+					tracksContainerRef,
+					tracksScrollRef,
+					zoomLevel,
+					snappedTime,
+					verticalDragDirection,
+				});
+				setDragDropTarget(dropTarget?.isNewTrack ? dropTarget : null);
+			}
+		};
 
-    document.addEventListener("mousemove", handleMouseMove);
-    return () => document.removeEventListener("mousemove", handleMouseMove);
-  }, [
-    dragState.isDragging,
-    dragState.clickOffsetTime,
-    dragState.elementId,
-    dragState.trackId,
-    zoomLevel,
-    isElementSelected,
-    selectElement,
-    editor.project,
-    editor.playback,
-    timelineRef,
-    tracksScrollRef,
-    tracksContainerRef,
-    tracks,
-    isPendingDrag,
-    startDrag,
-    getDragSnapResult,
-    onSnapPointChange,
-  ]);
+		document.addEventListener("mousemove", handleMouseMove);
+		return () => document.removeEventListener("mousemove", handleMouseMove);
+	}, [
+		dragState.isDragging,
+		dragState.clickOffsetTime,
+		dragState.elementId,
+		dragState.startMouseY,
+		dragState.trackId,
+		zoomLevel,
+		isElementSelected,
+		selectElement,
+		editor.project,
+		timelineRef,
+		tracksScrollRef,
+		tracksContainerRef,
+		tracks,
+		isPendingDrag,
+		startDrag,
+		getDragSnapResult,
+		onSnapPointChange,
+	]);
 
-  useEffect(() => {
-    if (!dragState.isDragging) return;
+	useEffect(() => {
+		if (!dragState.isDragging) return;
 
-    const handleMouseUp = ({ clientX, clientY }: MouseEvent) => {
-      if (!dragState.elementId || !dragState.trackId) return;
+		const handleMouseUp = ({ clientX, clientY }: MouseEvent) => {
+			if (!dragState.elementId || !dragState.trackId) return;
 
-      if (mouseDownLocationRef.current) {
-        const deltaX = Math.abs(clientX - mouseDownLocationRef.current.x);
-        const deltaY = Math.abs(clientY - mouseDownLocationRef.current.y);
-        if (deltaX <= DRAG_THRESHOLD_PX && deltaY <= DRAG_THRESHOLD_PX) {
-          mouseDownLocationRef.current = null;
-          endDrag();
-          onSnapPointChange?.(null);
-          return;
-        }
-      }
+			if (mouseDownLocationRef.current) {
+				const deltaX = Math.abs(clientX - mouseDownLocationRef.current.x);
+				const deltaY = Math.abs(clientY - mouseDownLocationRef.current.y);
+				if (deltaX <= DRAG_THRESHOLD_PX && deltaY <= DRAG_THRESHOLD_PX) {
+					mouseDownLocationRef.current = null;
+					endDrag();
+					onSnapPointChange?.(null);
+					return;
+				}
+			}
 
-      const dropTarget = getDragDropTarget({
-        clientX,
-        clientY,
-        elementId: dragState.elementId,
-        trackId: dragState.trackId,
-        tracks,
-        tracksContainerRef,
-        tracksScrollRef,
-        zoomLevel,
-        snappedTime: dragState.currentTime,
-        verticalDragDirection: getVerticalDragDirection({
-          startMouseY: dragState.startMouseY,
-          currentMouseY: clientY,
-        }),
-      });
-      if (!dropTarget) {
-        endDrag();
-        onSnapPointChange?.(null);
-        return;
-      }
-      const snappedTime = dragState.currentTime;
+			const dropTarget = getDragDropTarget({
+				clientX,
+				clientY,
+				elementId: dragState.elementId,
+				trackId: dragState.trackId,
+				tracks,
+				tracksContainerRef,
+				tracksScrollRef,
+				zoomLevel,
+				snappedTime: dragState.currentTime,
+				verticalDragDirection: getVerticalDragDirection({
+					startMouseY: dragState.startMouseY,
+					currentMouseY: clientY,
+				}),
+			});
+			if (!dropTarget) {
+				endDrag();
+				onSnapPointChange?.(null);
+				return;
+			}
+			const snappedTime = dragState.currentTime;
 
-      const sourceTrack = tracks.find(({ id }) => id === dragState.trackId);
-      if (!sourceTrack) {
-        endDrag();
-        onSnapPointChange?.(null);
-        return;
-      }
+			const sourceTrack = tracks.find(({ id }) => id === dragState.trackId);
+			if (!sourceTrack) {
+				endDrag();
+				onSnapPointChange?.(null);
+				return;
+			}
 
-      if (dropTarget.isNewTrack) {
-        const newTrackId = generateUUID();
+			if (dropTarget.isNewTrack) {
+				const newTrackId = generateUUID();
 
-        editor.timeline.moveElement({
-          sourceTrackId: dragState.trackId,
-          targetTrackId: newTrackId,
-          elementId: dragState.elementId,
-          newStartTime: snappedTime,
-          createTrack: { type: sourceTrack.type, index: dropTarget.trackIndex },
-        });
-      } else {
-        const targetTrack = tracks[dropTarget.trackIndex];
-        if (targetTrack) {
-          editor.timeline.moveElement({
-            sourceTrackId: dragState.trackId,
-            targetTrackId: targetTrack.id,
-            elementId: dragState.elementId,
-            newStartTime: snappedTime,
-          });
-        }
-      }
+				editor.timeline.moveElement({
+					sourceTrackId: dragState.trackId,
+					targetTrackId: newTrackId,
+					elementId: dragState.elementId,
+					newStartTime: snappedTime,
+					createTrack: { type: sourceTrack.type, index: dropTarget.trackIndex },
+				});
+			} else {
+				const targetTrack = tracks[dropTarget.trackIndex];
+				if (targetTrack) {
+					editor.timeline.moveElement({
+						sourceTrackId: dragState.trackId,
+						targetTrackId: targetTrack.id,
+						elementId: dragState.elementId,
+						newStartTime: snappedTime,
+					});
+				}
+			}
 
-      endDrag();
-      onSnapPointChange?.(null);
-    };
+			endDrag();
+			onSnapPointChange?.(null);
+		};
 
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => document.removeEventListener("mouseup", handleMouseUp);
-  }, [
-    dragState.isDragging,
-    dragState.elementId,
-    dragState.trackId,
-    dragState.currentTime,
-    zoomLevel,
-    tracks,
-    endDrag,
-    onSnapPointChange,
-    editor.timeline,
-    tracksContainerRef,
-    tracksScrollRef,
-  ]);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => document.removeEventListener("mouseup", handleMouseUp);
+	}, [
+		dragState.isDragging,
+		dragState.elementId,
+		dragState.startMouseY,
+		dragState.trackId,
+		dragState.currentTime,
+		zoomLevel,
+		tracks,
+		endDrag,
+		onSnapPointChange,
+		editor.timeline,
+		tracksContainerRef,
+		tracksScrollRef,
+	]);
 
-  useEffect(() => {
-    if (!isPendingDrag) return;
+	useEffect(() => {
+		if (!isPendingDrag) return;
 
-    const handleMouseUp = () => {
-      pendingDragRef.current = null;
-      setIsPendingDrag(false);
-      onSnapPointChange?.(null);
-    };
+		const handleMouseUp = () => {
+			pendingDragRef.current = null;
+			setIsPendingDrag(false);
+			onSnapPointChange?.(null);
+		};
 
-    document.addEventListener("mouseup", handleMouseUp);
-    return () => document.removeEventListener("mouseup", handleMouseUp);
-  }, [isPendingDrag, onSnapPointChange]);
+		document.addEventListener("mouseup", handleMouseUp);
+		return () => document.removeEventListener("mouseup", handleMouseUp);
+	}, [isPendingDrag, onSnapPointChange]);
 
-  const handleElementMouseDown = useCallback(
-    ({
-      event,
-      element,
-      track,
-    }: {
-      event: ReactMouseEvent;
-      element: TimelineElement;
-      track: TimelineTrack;
-    }) => {
-      event.stopPropagation();
-      mouseDownLocationRef.current = { x: event.clientX, y: event.clientY };
+	const handleElementMouseDown = useCallback(
+		({
+			event,
+			element,
+			track,
+		}: {
+			event: ReactMouseEvent;
+			element: TimelineElement;
+			track: TimelineTrack;
+		}) => {
+			event.stopPropagation();
+			mouseDownLocationRef.current = { x: event.clientX, y: event.clientY };
 
-      const isRightClick = event.button === 2;
-      const isMultiSelect = event.metaKey || event.ctrlKey || event.shiftKey;
+			const isRightClick = event.button === 2;
+			const isMultiSelect = event.metaKey || event.ctrlKey || event.shiftKey;
 
-      // right-click
-      if (isRightClick) {
-        const alreadySelected = isElementSelected({
-          trackId: track.id,
-          elementId: element.id,
-        });
-        if (!alreadySelected) {
-          handleSelectionClick({
-            trackId: track.id,
-            elementId: element.id,
-            isMultiKey: false,
-          });
-        }
-        return;
-      }
+			// right-click
+			if (isRightClick) {
+				const alreadySelected = isElementSelected({
+					trackId: track.id,
+					elementId: element.id,
+				});
+				if (!alreadySelected) {
+					handleSelectionClick({
+						trackId: track.id,
+						elementId: element.id,
+						isMultiKey: false,
+					});
+				}
+				return;
+			}
 
-      // multi-select: toggle selection
-      if (isMultiSelect) {
-        handleSelectionClick({
-          trackId: track.id,
-          elementId: element.id,
-          isMultiKey: true,
-        });
-      }
+			// multi-select: toggle selection
+			if (isMultiSelect) {
+				handleSelectionClick({
+					trackId: track.id,
+					elementId: element.id,
+					isMultiKey: true,
+				});
+			}
 
-      // start drag
-      const clickOffsetTime = getClickOffsetTime({
-        clientX: event.clientX,
-        elementRect: event.currentTarget.getBoundingClientRect(),
-        zoomLevel,
-      });
-      pendingDragRef.current = {
-        elementId: element.id,
-        trackId: track.id,
-        startMouseX: event.clientX,
-        startMouseY: event.clientY,
-        startElementTime: element.startTime,
-        clickOffsetTime,
-      };
-      setIsPendingDrag(true);
-    },
-    [zoomLevel, isElementSelected, handleSelectionClick],
-  );
+			// start drag
+			const clickOffsetTime = getClickOffsetTime({
+				clientX: event.clientX,
+				elementRect: event.currentTarget.getBoundingClientRect(),
+				zoomLevel,
+			});
+			pendingDragRef.current = {
+				elementId: element.id,
+				trackId: track.id,
+				startMouseX: event.clientX,
+				startMouseY: event.clientY,
+				startElementTime: element.startTime,
+				clickOffsetTime,
+			};
+			setIsPendingDrag(true);
+		},
+		[zoomLevel, isElementSelected, handleSelectionClick],
+	);
 
-  const handleElementClick = useCallback(
-    ({
-      event,
-      element,
-      track,
-    }: {
-      event: ReactMouseEvent;
-      element: TimelineElement;
-      track: TimelineTrack;
-    }) => {
-      event.stopPropagation();
+	const handleElementClick = useCallback(
+		({
+			event,
+			element,
+			track,
+		}: {
+			event: ReactMouseEvent;
+			element: TimelineElement;
+			track: TimelineTrack;
+		}) => {
+			event.stopPropagation();
 
-      // was it a drag or a click?
-      if (mouseDownLocationRef.current) {
-        const deltaX = Math.abs(event.clientX - mouseDownLocationRef.current.x);
-        const deltaY = Math.abs(event.clientY - mouseDownLocationRef.current.y);
-        if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) {
-          mouseDownLocationRef.current = null;
-          return;
-        }
-      }
+			// was it a drag or a click?
+			if (mouseDownLocationRef.current) {
+				const deltaX = Math.abs(event.clientX - mouseDownLocationRef.current.x);
+				const deltaY = Math.abs(event.clientY - mouseDownLocationRef.current.y);
+				if (deltaX > DRAG_THRESHOLD_PX || deltaY > DRAG_THRESHOLD_PX) {
+					mouseDownLocationRef.current = null;
+					return;
+				}
+			}
 
-      // modifier keys already handled in mousedown
-      if (event.metaKey || event.ctrlKey || event.shiftKey) return;
+			// modifier keys already handled in mousedown
+			if (event.metaKey || event.ctrlKey || event.shiftKey) return;
 
-      // single click: select if not selected
-      const alreadySelected = isElementSelected({
-        trackId: track.id,
-        elementId: element.id,
-      });
-      if (!alreadySelected) {
-        selectElement({ trackId: track.id, elementId: element.id });
-      }
-    },
-    [isElementSelected, selectElement],
-  );
+			// single click: select if not selected
+			const alreadySelected = isElementSelected({
+				trackId: track.id,
+				elementId: element.id,
+			});
+			if (!alreadySelected) {
+				selectElement({ trackId: track.id, elementId: element.id });
+			}
+		},
+		[isElementSelected, selectElement],
+	);
 
-  return {
-    dragState,
-    dragDropTarget,
-    handleElementMouseDown,
-    handleElementClick,
-    lastMouseXRef,
-  };
+	return {
+		dragState,
+		dragDropTarget,
+		handleElementMouseDown,
+		handleElementClick,
+		lastMouseXRef,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/element/use-element-resize.ts b/apps/web/src/hooks/timeline/element/use-element-resize.ts
index 62e4b52c..151e8cab 100644
--- a/apps/web/src/hooks/timeline/element/use-element-resize.ts
+++ b/apps/web/src/hooks/timeline/element/use-element-resize.ts
@@ -1,331 +1,331 @@
 import { useState, useEffect, useRef } from "react";
-import { TimelineElement, TimelineTrack } from "@/types/timeline";
+import type { TimelineElement, TimelineTrack } from "@/types/timeline";
 import { snapTimeToFrame } from "@/lib/time";
 import { EditorCore } from "@/core";
 import {
-  useTimelineSnapping,
-  type SnapPoint,
+	useTimelineSnapping,
+	type SnapPoint,
 } from "@/hooks/timeline/use-timeline-snapping";
 import { useTimelineStore } from "@/stores/timeline-store";
 
 export interface ResizeState {
-  elementId: string;
-  side: "left" | "right";
-  startX: number;
-  initialTrimStart: number;
-  initialTrimEnd: number;
-  initialStartTime: number;
-  initialDuration: number;
+	elementId: string;
+	side: "left" | "right";
+	startX: number;
+	initialTrimStart: number;
+	initialTrimEnd: number;
+	initialStartTime: number;
+	initialDuration: number;
 }
 
 interface UseTimelineElementResizeProps {
-  element: TimelineElement;
-  track: TimelineTrack;
-  zoomLevel: number;
-  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
-  onResizeStateChange?: (params: { isResizing: boolean }) => void;
+	element: TimelineElement;
+	track: TimelineTrack;
+	zoomLevel: number;
+	onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
+	onResizeStateChange?: (params: { isResizing: boolean }) => void;
 }
 
 export function useTimelineElementResize({
-  element,
-  track,
-  zoomLevel,
-  onSnapPointChange,
-  onResizeStateChange,
+	element,
+	track,
+	zoomLevel,
+	onSnapPointChange,
+	onResizeStateChange,
 }: UseTimelineElementResizeProps) {
-  const editor = EditorCore.getInstance();
-  const activeProject = editor.project.getActive();
-  const snappingEnabled = useTimelineStore((state) => state.snappingEnabled);
-  const { findSnapPoints, snapToNearestPoint } = useTimelineSnapping();
+	const editor = EditorCore.getInstance();
+	const activeProject = editor.project.getActive();
+	const snappingEnabled = useTimelineStore((state) => state.snappingEnabled);
+	const { findSnapPoints, snapToNearestPoint } = useTimelineSnapping();
 
-  const [resizing, setResizing] = useState<ResizeState | null>(null);
-  const [currentTrimStart, setCurrentTrimStart] = useState(element.trimStart);
-  const [currentTrimEnd, setCurrentTrimEnd] = useState(element.trimEnd);
-  const [currentStartTime, setCurrentStartTime] = useState(element.startTime);
-  const [currentDuration, setCurrentDuration] = useState(element.duration);
-  const currentTrimStartRef = useRef(element.trimStart);
-  const currentTrimEndRef = useRef(element.trimEnd);
-  const currentStartTimeRef = useRef(element.startTime);
-  const currentDurationRef = useRef(element.duration);
+	const [resizing, setResizing] = useState<ResizeState | null>(null);
+	const [currentTrimStart, setCurrentTrimStart] = useState(element.trimStart);
+	const [currentTrimEnd, setCurrentTrimEnd] = useState(element.trimEnd);
+	const [currentStartTime, setCurrentStartTime] = useState(element.startTime);
+	const [currentDuration, setCurrentDuration] = useState(element.duration);
+	const currentTrimStartRef = useRef(element.trimStart);
+	const currentTrimEndRef = useRef(element.trimEnd);
+	const currentStartTimeRef = useRef(element.startTime);
+	const currentDurationRef = useRef(element.duration);
 
-  useEffect(() => {
-    if (!resizing) return;
+	useEffect(() => {
+		if (!resizing) return;
 
-    const handleDocumentMouseMove = ({ clientX }: MouseEvent) => {
-      updateTrimFromMouseMove({ clientX });
-    };
+		const handleDocumentMouseMove = ({ clientX }: MouseEvent) => {
+			updateTrimFromMouseMove({ clientX });
+		};
 
-    const handleDocumentMouseUp = () => {
-      handleResizeEnd();
-    };
+		const handleDocumentMouseUp = () => {
+			handleResizeEnd();
+		};
 
-    document.addEventListener("mousemove", handleDocumentMouseMove);
-    document.addEventListener("mouseup", handleDocumentMouseUp);
+		document.addEventListener("mousemove", handleDocumentMouseMove);
+		document.addEventListener("mouseup", handleDocumentMouseUp);
 
-    return () => {
-      document.removeEventListener("mousemove", handleDocumentMouseMove);
-      document.removeEventListener("mouseup", handleDocumentMouseUp);
-    };
-  }, [resizing]);
+		return () => {
+			document.removeEventListener("mousemove", handleDocumentMouseMove);
+			document.removeEventListener("mouseup", handleDocumentMouseUp);
+		};
+	}, [resizing]);
 
-  const handleResizeStart = ({
-    e,
-    elementId,
-    side,
-  }: {
-    e: React.MouseEvent;
-    elementId: string;
-    side: "left" | "right";
-  }) => {
-    e.stopPropagation();
-    e.preventDefault();
+	const handleResizeStart = ({
+		e,
+		elementId,
+		side,
+	}: {
+		e: React.MouseEvent;
+		elementId: string;
+		side: "left" | "right";
+	}) => {
+		e.stopPropagation();
+		e.preventDefault();
 
-    setResizing({
-      elementId,
-      side,
-      startX: e.clientX,
-      initialTrimStart: element.trimStart,
-      initialTrimEnd: element.trimEnd,
-      initialStartTime: element.startTime,
-      initialDuration: element.duration,
-    });
+		setResizing({
+			elementId,
+			side,
+			startX: e.clientX,
+			initialTrimStart: element.trimStart,
+			initialTrimEnd: element.trimEnd,
+			initialStartTime: element.startTime,
+			initialDuration: element.duration,
+		});
 
-    setCurrentTrimStart(element.trimStart);
-    setCurrentTrimEnd(element.trimEnd);
-    setCurrentStartTime(element.startTime);
-    setCurrentDuration(element.duration);
-    currentTrimStartRef.current = element.trimStart;
-    currentTrimEndRef.current = element.trimEnd;
-    currentStartTimeRef.current = element.startTime;
-    currentDurationRef.current = element.duration;
-    onResizeStateChange?.({ isResizing: true });
-  };
+		setCurrentTrimStart(element.trimStart);
+		setCurrentTrimEnd(element.trimEnd);
+		setCurrentStartTime(element.startTime);
+		setCurrentDuration(element.duration);
+		currentTrimStartRef.current = element.trimStart;
+		currentTrimEndRef.current = element.trimEnd;
+		currentStartTimeRef.current = element.startTime;
+		currentDurationRef.current = element.duration;
+		onResizeStateChange?.({ isResizing: true });
+	};
 
-  const canExtendElementDuration = () => {
-    if (element.type === "text" || element.type === "image") {
-      return true;
-    }
+	const canExtendElementDuration = () => {
+		if (element.type === "text" || element.type === "image") {
+			return true;
+		}
 
-    return false;
-  };
+		return false;
+	};
 
-  const updateTrimFromMouseMove = ({ clientX }: { clientX: number }) => {
-    if (!resizing) return;
+	const updateTrimFromMouseMove = ({ clientX }: { clientX: number }) => {
+		if (!resizing) return;
 
-    const deltaX = clientX - resizing.startX;
-    let deltaTime = deltaX / (50 * zoomLevel);
-    let resizeSnapPoint: SnapPoint | null = null;
+		const deltaX = clientX - resizing.startX;
+		let deltaTime = deltaX / (50 * zoomLevel);
+		let resizeSnapPoint: SnapPoint | null = null;
 
-    const projectFps = activeProject.settings.fps;
-    const minDurationSeconds = 1 / projectFps;
-    const canSnap = snappingEnabled;
-    if (canSnap) {
-      const tracks = editor.timeline.getTracks();
-      const playheadTime = editor.playback.getCurrentTime();
-      const snapPoints = findSnapPoints({
-        tracks,
-        playheadTime,
-        excludeElementId: element.id,
-      });
-      if (resizing.side === "left") {
-        const targetStartTime = resizing.initialStartTime + deltaTime;
-        const snapResult = snapToNearestPoint({
-          targetTime: targetStartTime,
-          snapPoints,
-          zoomLevel,
-        });
-        resizeSnapPoint = snapResult.snapPoint;
-        if (snapResult.snapPoint) {
-          deltaTime = snapResult.snappedTime - resizing.initialStartTime;
-        }
-      } else {
-        const baseEndTime =
-          resizing.initialStartTime + resizing.initialDuration;
-        const targetEndTime = baseEndTime + deltaTime;
-        const snapResult = snapToNearestPoint({
-          targetTime: targetEndTime,
-          snapPoints,
-          zoomLevel,
-        });
-        resizeSnapPoint = snapResult.snapPoint;
-        if (snapResult.snapPoint) {
-          deltaTime = snapResult.snappedTime - baseEndTime;
-        }
-      }
-    }
-    onSnapPointChange?.(resizeSnapPoint);
+		const projectFps = activeProject.settings.fps;
+		const minDurationSeconds = 1 / projectFps;
+		const canSnap = snappingEnabled;
+		if (canSnap) {
+			const tracks = editor.timeline.getTracks();
+			const playheadTime = editor.playback.getCurrentTime();
+			const snapPoints = findSnapPoints({
+				tracks,
+				playheadTime,
+				excludeElementId: element.id,
+			});
+			if (resizing.side === "left") {
+				const targetStartTime = resizing.initialStartTime + deltaTime;
+				const snapResult = snapToNearestPoint({
+					targetTime: targetStartTime,
+					snapPoints,
+					zoomLevel,
+				});
+				resizeSnapPoint = snapResult.snapPoint;
+				if (snapResult.snapPoint) {
+					deltaTime = snapResult.snappedTime - resizing.initialStartTime;
+				}
+			} else {
+				const baseEndTime =
+					resizing.initialStartTime + resizing.initialDuration;
+				const targetEndTime = baseEndTime + deltaTime;
+				const snapResult = snapToNearestPoint({
+					targetTime: targetEndTime,
+					snapPoints,
+					zoomLevel,
+				});
+				resizeSnapPoint = snapResult.snapPoint;
+				if (snapResult.snapPoint) {
+					deltaTime = snapResult.snappedTime - baseEndTime;
+				}
+			}
+		}
+		onSnapPointChange?.(resizeSnapPoint);
 
-    if (resizing.side === "left") {
-      const sourceDuration =
-        resizing.initialTrimStart +
-        resizing.initialDuration +
-        resizing.initialTrimEnd;
-      const maxAllowed =
-        sourceDuration - resizing.initialTrimEnd - minDurationSeconds;
-      const calculated = resizing.initialTrimStart + deltaTime;
+		if (resizing.side === "left") {
+			const sourceDuration =
+				resizing.initialTrimStart +
+				resizing.initialDuration +
+				resizing.initialTrimEnd;
+			const maxAllowed =
+				sourceDuration - resizing.initialTrimEnd - minDurationSeconds;
+			const calculated = resizing.initialTrimStart + deltaTime;
 
-      if (calculated >= 0 && calculated <= maxAllowed) {
-        const newTrimStart = snapTimeToFrame({
-          time: Math.min(maxAllowed, calculated),
-          fps: projectFps,
-        });
-        const trimDelta = newTrimStart - resizing.initialTrimStart;
-        const newStartTime = snapTimeToFrame({
-          time: resizing.initialStartTime + trimDelta,
-          fps: projectFps,
-        });
-        const newDuration = snapTimeToFrame({
-          time: resizing.initialDuration - trimDelta,
-          fps: projectFps,
-        });
+			if (calculated >= 0 && calculated <= maxAllowed) {
+				const newTrimStart = snapTimeToFrame({
+					time: Math.min(maxAllowed, calculated),
+					fps: projectFps,
+				});
+				const trimDelta = newTrimStart - resizing.initialTrimStart;
+				const newStartTime = snapTimeToFrame({
+					time: resizing.initialStartTime + trimDelta,
+					fps: projectFps,
+				});
+				const newDuration = snapTimeToFrame({
+					time: resizing.initialDuration - trimDelta,
+					fps: projectFps,
+				});
 
-        setCurrentTrimStart(newTrimStart);
-        setCurrentStartTime(newStartTime);
-        setCurrentDuration(newDuration);
-        currentTrimStartRef.current = newTrimStart;
-        currentStartTimeRef.current = newStartTime;
-        currentDurationRef.current = newDuration;
-      } else if (calculated < 0) {
-        if (canExtendElementDuration()) {
-          const extensionAmount = Math.abs(calculated);
-          const maxExtension = resizing.initialStartTime;
-          const actualExtension = Math.min(extensionAmount, maxExtension);
-          const newStartTime = snapTimeToFrame({
-            time: resizing.initialStartTime - actualExtension,
-            fps: projectFps,
-          });
-          const newDuration = snapTimeToFrame({
-            time: resizing.initialDuration + actualExtension,
-            fps: projectFps,
-          });
+				setCurrentTrimStart(newTrimStart);
+				setCurrentStartTime(newStartTime);
+				setCurrentDuration(newDuration);
+				currentTrimStartRef.current = newTrimStart;
+				currentStartTimeRef.current = newStartTime;
+				currentDurationRef.current = newDuration;
+			} else if (calculated < 0) {
+				if (canExtendElementDuration()) {
+					const extensionAmount = Math.abs(calculated);
+					const maxExtension = resizing.initialStartTime;
+					const actualExtension = Math.min(extensionAmount, maxExtension);
+					const newStartTime = snapTimeToFrame({
+						time: resizing.initialStartTime - actualExtension,
+						fps: projectFps,
+					});
+					const newDuration = snapTimeToFrame({
+						time: resizing.initialDuration + actualExtension,
+						fps: projectFps,
+					});
 
-          setCurrentTrimStart(0);
-          setCurrentStartTime(newStartTime);
-          setCurrentDuration(newDuration);
-          currentTrimStartRef.current = 0;
-          currentStartTimeRef.current = newStartTime;
-          currentDurationRef.current = newDuration;
-        } else {
-          const trimDelta = 0 - resizing.initialTrimStart;
-          const newStartTime = snapTimeToFrame({
-            time: resizing.initialStartTime + trimDelta,
-            fps: projectFps,
-          });
-          const newDuration = snapTimeToFrame({
-            time: resizing.initialDuration - trimDelta,
-            fps: projectFps,
-          });
+					setCurrentTrimStart(0);
+					setCurrentStartTime(newStartTime);
+					setCurrentDuration(newDuration);
+					currentTrimStartRef.current = 0;
+					currentStartTimeRef.current = newStartTime;
+					currentDurationRef.current = newDuration;
+				} else {
+					const trimDelta = 0 - resizing.initialTrimStart;
+					const newStartTime = snapTimeToFrame({
+						time: resizing.initialStartTime + trimDelta,
+						fps: projectFps,
+					});
+					const newDuration = snapTimeToFrame({
+						time: resizing.initialDuration - trimDelta,
+						fps: projectFps,
+					});
 
-          setCurrentTrimStart(0);
-          setCurrentStartTime(newStartTime);
-          setCurrentDuration(newDuration);
-          currentTrimStartRef.current = 0;
-          currentStartTimeRef.current = newStartTime;
-          currentDurationRef.current = newDuration;
-        }
-      }
-    } else {
-      const sourceDuration =
-        resizing.initialTrimStart +
-        resizing.initialDuration +
-        resizing.initialTrimEnd;
-      const newTrimEnd = resizing.initialTrimEnd - deltaTime;
+					setCurrentTrimStart(0);
+					setCurrentStartTime(newStartTime);
+					setCurrentDuration(newDuration);
+					currentTrimStartRef.current = 0;
+					currentStartTimeRef.current = newStartTime;
+					currentDurationRef.current = newDuration;
+				}
+			}
+		} else {
+			const sourceDuration =
+				resizing.initialTrimStart +
+				resizing.initialDuration +
+				resizing.initialTrimEnd;
+			const newTrimEnd = resizing.initialTrimEnd - deltaTime;
 
-      if (newTrimEnd < 0) {
-        if (canExtendElementDuration()) {
-          const extensionNeeded = Math.abs(newTrimEnd);
-          const baseDuration =
-            resizing.initialDuration + resizing.initialTrimEnd;
-          const newDuration = snapTimeToFrame({
-            time: baseDuration + extensionNeeded,
-            fps: projectFps,
-          });
+			if (newTrimEnd < 0) {
+				if (canExtendElementDuration()) {
+					const extensionNeeded = Math.abs(newTrimEnd);
+					const baseDuration =
+						resizing.initialDuration + resizing.initialTrimEnd;
+					const newDuration = snapTimeToFrame({
+						time: baseDuration + extensionNeeded,
+						fps: projectFps,
+					});
 
-          setCurrentDuration(newDuration);
-          setCurrentTrimEnd(0);
-          currentDurationRef.current = newDuration;
-          currentTrimEndRef.current = 0;
-        } else {
-          const extensionToLimit = resizing.initialTrimEnd;
-          const newDuration = snapTimeToFrame({
-            time: resizing.initialDuration + extensionToLimit,
-            fps: projectFps,
-          });
+					setCurrentDuration(newDuration);
+					setCurrentTrimEnd(0);
+					currentDurationRef.current = newDuration;
+					currentTrimEndRef.current = 0;
+				} else {
+					const extensionToLimit = resizing.initialTrimEnd;
+					const newDuration = snapTimeToFrame({
+						time: resizing.initialDuration + extensionToLimit,
+						fps: projectFps,
+					});
 
-          setCurrentDuration(newDuration);
-          setCurrentTrimEnd(0);
-          currentDurationRef.current = newDuration;
-          currentTrimEndRef.current = 0;
-        }
-      } else {
-        const maxTrimEnd =
-          sourceDuration - resizing.initialTrimStart - minDurationSeconds;
-        const clampedTrimEnd = Math.min(maxTrimEnd, Math.max(0, newTrimEnd));
-        const finalTrimEnd = snapTimeToFrame({
-          time: clampedTrimEnd,
-          fps: projectFps,
-        });
-        const trimDelta = finalTrimEnd - resizing.initialTrimEnd;
-        const newDuration = snapTimeToFrame({
-          time: resizing.initialDuration - trimDelta,
-          fps: projectFps,
-        });
+					setCurrentDuration(newDuration);
+					setCurrentTrimEnd(0);
+					currentDurationRef.current = newDuration;
+					currentTrimEndRef.current = 0;
+				}
+			} else {
+				const maxTrimEnd =
+					sourceDuration - resizing.initialTrimStart - minDurationSeconds;
+				const clampedTrimEnd = Math.min(maxTrimEnd, Math.max(0, newTrimEnd));
+				const finalTrimEnd = snapTimeToFrame({
+					time: clampedTrimEnd,
+					fps: projectFps,
+				});
+				const trimDelta = finalTrimEnd - resizing.initialTrimEnd;
+				const newDuration = snapTimeToFrame({
+					time: resizing.initialDuration - trimDelta,
+					fps: projectFps,
+				});
 
-        setCurrentTrimEnd(finalTrimEnd);
-        setCurrentDuration(newDuration);
-        currentTrimEndRef.current = finalTrimEnd;
-        currentDurationRef.current = newDuration;
-      }
-    }
-  };
+				setCurrentTrimEnd(finalTrimEnd);
+				setCurrentDuration(newDuration);
+				currentTrimEndRef.current = finalTrimEnd;
+				currentDurationRef.current = newDuration;
+			}
+		}
+	};
 
-  const handleResizeEnd = () => {
-    if (!resizing) return;
+	const handleResizeEnd = () => {
+		if (!resizing) return;
 
-    const finalTrimStart = currentTrimStartRef.current;
-    const finalTrimEnd = currentTrimEndRef.current;
-    const finalStartTime = currentStartTimeRef.current;
-    const finalDuration = currentDurationRef.current;
-    const trimStartChanged = finalTrimStart !== resizing.initialTrimStart;
-    const trimEndChanged = finalTrimEnd !== resizing.initialTrimEnd;
-    const startTimeChanged = finalStartTime !== resizing.initialStartTime;
-    const durationChanged = finalDuration !== resizing.initialDuration;
+		const finalTrimStart = currentTrimStartRef.current;
+		const finalTrimEnd = currentTrimEndRef.current;
+		const finalStartTime = currentStartTimeRef.current;
+		const finalDuration = currentDurationRef.current;
+		const trimStartChanged = finalTrimStart !== resizing.initialTrimStart;
+		const trimEndChanged = finalTrimEnd !== resizing.initialTrimEnd;
+		const startTimeChanged = finalStartTime !== resizing.initialStartTime;
+		const durationChanged = finalDuration !== resizing.initialDuration;
 
-    if (trimStartChanged || trimEndChanged) {
-      editor.timeline.updateElementTrim({
-        elementId: element.id,
-        trimStart: finalTrimStart,
-        trimEnd: finalTrimEnd,
-      });
-    }
+		if (trimStartChanged || trimEndChanged) {
+			editor.timeline.updateElementTrim({
+				elementId: element.id,
+				trimStart: finalTrimStart,
+				trimEnd: finalTrimEnd,
+			});
+		}
 
-    if (startTimeChanged) {
-      editor.timeline.updateElementStartTime({
-        elements: [{ trackId: track.id, elementId: element.id }],
-        startTime: finalStartTime,
-      });
-    }
+		if (startTimeChanged) {
+			editor.timeline.updateElementStartTime({
+				elements: [{ trackId: track.id, elementId: element.id }],
+				startTime: finalStartTime,
+			});
+		}
 
-    if (durationChanged) {
-      editor.timeline.updateElementDuration({
-        trackId: track.id,
-        elementId: element.id,
-        duration: finalDuration,
-      });
-    }
+		if (durationChanged) {
+			editor.timeline.updateElementDuration({
+				trackId: track.id,
+				elementId: element.id,
+				duration: finalDuration,
+			});
+		}
 
-    setResizing(null);
-    onResizeStateChange?.({ isResizing: false });
-    onSnapPointChange?.(null);
-  };
+		setResizing(null);
+		onResizeStateChange?.({ isResizing: false });
+		onSnapPointChange?.(null);
+	};
 
-  return {
-    resizing,
-    isResizing: resizing !== null,
-    handleResizeStart,
-    currentTrimStart,
-    currentTrimEnd,
-    currentStartTime,
-    currentDuration,
-  };
+	return {
+		resizing,
+		isResizing: resizing !== null,
+		handleResizeStart,
+		currentTrimStart,
+		currentTrimEnd,
+		currentStartTime,
+		currentDuration,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/element/use-element-selection.ts b/apps/web/src/hooks/timeline/element/use-element-selection.ts
index 0afbc413..4ebefdde 100644
--- a/apps/web/src/hooks/timeline/element/use-element-selection.ts
+++ b/apps/web/src/hooks/timeline/element/use-element-selection.ts
@@ -4,107 +4,107 @@ import { useTimelineStore } from "@/stores/timeline-store";
 type ElementRef = { trackId: string; elementId: string };
 
 export function useElementSelection() {
-  const { selectedElements, setSelectedElements } = useTimelineStore();
+	const { selectedElements, setSelectedElements } = useTimelineStore();
 
-  const isElementSelected = useCallback(
-    ({ trackId, elementId }: ElementRef) =>
-      selectedElements.some(
-        (element) =>
-          element.trackId === trackId && element.elementId === elementId,
-      ),
-    [selectedElements],
-  );
+	const isElementSelected = useCallback(
+		({ trackId, elementId }: ElementRef) =>
+			selectedElements.some(
+				(element) =>
+					element.trackId === trackId && element.elementId === elementId,
+			),
+		[selectedElements],
+	);
 
-  const selectElement = useCallback(
-    ({ trackId, elementId }: ElementRef) => {
-      setSelectedElements({ elements: [{ trackId, elementId }] });
-    },
-    [setSelectedElements],
-  );
+	const selectElement = useCallback(
+		({ trackId, elementId }: ElementRef) => {
+			setSelectedElements({ elements: [{ trackId, elementId }] });
+		},
+		[setSelectedElements],
+	);
 
-  const addElementToSelection = useCallback(
-    ({ trackId, elementId }: ElementRef) => {
-      const alreadySelected = selectedElements.some(
-        (element) =>
-          element.trackId === trackId && element.elementId === elementId,
-      );
-      if (alreadySelected) return;
+	const addElementToSelection = useCallback(
+		({ trackId, elementId }: ElementRef) => {
+			const alreadySelected = selectedElements.some(
+				(element) =>
+					element.trackId === trackId && element.elementId === elementId,
+			);
+			if (alreadySelected) return;
 
-      setSelectedElements({
-        elements: [...selectedElements, { trackId, elementId }],
-      });
-    },
-    [selectedElements, setSelectedElements],
-  );
+			setSelectedElements({
+				elements: [...selectedElements, { trackId, elementId }],
+			});
+		},
+		[selectedElements, setSelectedElements],
+	);
 
-  const removeElementFromSelection = useCallback(
-    ({ trackId, elementId }: ElementRef) => {
-      setSelectedElements({
-        elements: selectedElements.filter(
-          (element) =>
-            !(element.trackId === trackId && element.elementId === elementId),
-        ),
-      });
-    },
-    [selectedElements, setSelectedElements],
-  );
+	const removeElementFromSelection = useCallback(
+		({ trackId, elementId }: ElementRef) => {
+			setSelectedElements({
+				elements: selectedElements.filter(
+					(element) =>
+						!(element.trackId === trackId && element.elementId === elementId),
+				),
+			});
+		},
+		[selectedElements, setSelectedElements],
+	);
 
-  const toggleElementSelection = useCallback(
-    ({ trackId, elementId }: ElementRef) => {
-      const alreadySelected = selectedElements.some(
-        (element) =>
-          element.trackId === trackId && element.elementId === elementId,
-      );
+	const toggleElementSelection = useCallback(
+		({ trackId, elementId }: ElementRef) => {
+			const alreadySelected = selectedElements.some(
+				(element) =>
+					element.trackId === trackId && element.elementId === elementId,
+			);
 
-      if (alreadySelected) {
-        removeElementFromSelection({ trackId, elementId });
-      } else {
-        addElementToSelection({ trackId, elementId });
-      }
-    },
-    [selectedElements, addElementToSelection, removeElementFromSelection],
-  );
+			if (alreadySelected) {
+				removeElementFromSelection({ trackId, elementId });
+			} else {
+				addElementToSelection({ trackId, elementId });
+			}
+		},
+		[selectedElements, addElementToSelection, removeElementFromSelection],
+	);
 
-  const clearElementSelection = useCallback(() => {
-    setSelectedElements({ elements: [] });
-  }, [setSelectedElements]);
+	const clearElementSelection = useCallback(() => {
+		setSelectedElements({ elements: [] });
+	}, [setSelectedElements]);
 
-  const setElementSelection = useCallback(
-    ({ elements }: { elements: ElementRef[] }) => {
-      setSelectedElements({ elements });
-    },
-    [setSelectedElements],
-  );
+	const setElementSelection = useCallback(
+		({ elements }: { elements: ElementRef[] }) => {
+			setSelectedElements({ elements });
+		},
+		[setSelectedElements],
+	);
 
-  /**
-   * Handles click interaction on an element.
-   * - Regular click: select only this element
-   * - Multi-key click (Ctrl/Cmd): toggle this element in selection
-   */
-  const handleElementClick = useCallback(
-    ({
-      trackId,
-      elementId,
-      isMultiKey,
-    }: ElementRef & { isMultiKey: boolean }) => {
-      if (isMultiKey) {
-        toggleElementSelection({ trackId, elementId });
-      } else {
-        selectElement({ trackId, elementId });
-      }
-    },
-    [toggleElementSelection, selectElement],
-  );
+	/**
+	 * Handles click interaction on an element.
+	 * - Regular click: select only this element
+	 * - Multi-key click (Ctrl/Cmd): toggle this element in selection
+	 */
+	const handleElementClick = useCallback(
+		({
+			trackId,
+			elementId,
+			isMultiKey,
+		}: ElementRef & { isMultiKey: boolean }) => {
+			if (isMultiKey) {
+				toggleElementSelection({ trackId, elementId });
+			} else {
+				selectElement({ trackId, elementId });
+			}
+		},
+		[toggleElementSelection, selectElement],
+	);
 
-  return {
-    selectedElements,
-    isElementSelected,
-    selectElement,
-    setElementSelection,
-    addElementToSelection,
-    removeElementFromSelection,
-    toggleElementSelection,
-    clearElementSelection,
-    handleElementClick,
-  };
+	return {
+		selectedElements,
+		isElementSelected,
+		selectElement,
+		setElementSelection,
+		addElementToSelection,
+		removeElementFromSelection,
+		toggleElementSelection,
+		clearElementSelection,
+		handleElementClick,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts b/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
index 14bb3e4a..0ddab654 100644
--- a/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
+++ b/apps/web/src/hooks/timeline/use-edge-auto-scroll.ts
@@ -1,101 +1,100 @@
 import { useEffect, useRef } from "react";
 
 interface UseEdgeAutoScrollParams {
-  isActive: boolean;
-  getMouseClientX: () => number;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  contentWidth: number;
-  edgeThreshold?: number;
-  maxScrollSpeed?: number;
+	isActive: boolean;
+	getMouseClientX: () => number;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	contentWidth: number;
+	edgeThreshold?: number;
+	maxScrollSpeed?: number;
 }
 
-// Provides smooth edge auto-scrolling for horizontal timeline interactions.
 export function useEdgeAutoScroll({
-  isActive,
-  getMouseClientX,
-  rulerScrollRef,
-  tracksScrollRef,
-  contentWidth,
-  edgeThreshold = 100,
-  maxScrollSpeed = 15,
+	isActive,
+	getMouseClientX,
+	rulerScrollRef,
+	tracksScrollRef,
+	contentWidth,
+	edgeThreshold = 100,
+	maxScrollSpeed = 15,
 }: UseEdgeAutoScrollParams): void {
-  const rafRef = useRef<number | null>(null);
+	const rafRef = useRef<number | null>(null);
 
-  useEffect(() => {
-    if (!isActive) {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-      return;
-    }
+	useEffect(() => {
+		if (!isActive) {
+			if (rafRef.current) {
+				cancelAnimationFrame(rafRef.current);
+				rafRef.current = null;
+			}
+			return;
+		}
 
-    const step = () => {
-      const rulerViewport = rulerScrollRef.current;
-      const tracksViewport = tracksScrollRef.current;
-      if (!rulerViewport || !tracksViewport) {
-        rafRef.current = requestAnimationFrame(step);
-        return;
-      }
+		const step = () => {
+			const rulerViewport = rulerScrollRef.current;
+			const tracksViewport = tracksScrollRef.current;
+			if (!rulerViewport || !tracksViewport) {
+				rafRef.current = requestAnimationFrame(step);
+				return;
+			}
 
-      const viewportRect = rulerViewport.getBoundingClientRect();
-      const mouseX = getMouseClientX();
-      const mouseXRelative = mouseX - viewportRect.left;
+			const viewportRect = rulerViewport.getBoundingClientRect();
+			const mouseX = getMouseClientX();
+			const mouseXRelative = mouseX - viewportRect.left;
 
-      const viewportWidth = rulerViewport.clientWidth;
-      const intrinsicContentWidth = rulerViewport.scrollWidth;
-      const effectiveContentWidth = Math.max(
-        contentWidth,
-        intrinsicContentWidth,
-      );
-      const scrollMax = Math.max(0, effectiveContentWidth - viewportWidth);
+			const viewportWidth = rulerViewport.clientWidth;
+			const intrinsicContentWidth = rulerViewport.scrollWidth;
+			const effectiveContentWidth = Math.max(
+				contentWidth,
+				intrinsicContentWidth,
+			);
+			const scrollMax = Math.max(0, effectiveContentWidth - viewportWidth);
 
-      let scrollSpeed = 0;
+			let scrollSpeed = 0;
 
-      if (mouseXRelative < edgeThreshold && rulerViewport.scrollLeft > 0) {
-        const edgeDistance = Math.max(0, mouseXRelative);
-        const intensity = 1 - edgeDistance / edgeThreshold;
-        scrollSpeed = -maxScrollSpeed * intensity;
-      } else if (
-        mouseXRelative > viewportWidth - edgeThreshold &&
-        rulerViewport.scrollLeft < scrollMax
-      ) {
-        const edgeDistance = Math.max(
-          0,
-          viewportWidth - edgeThreshold - mouseXRelative,
-        );
-        const intensity = 1 - edgeDistance / edgeThreshold;
-        scrollSpeed = maxScrollSpeed * intensity;
-      }
+			if (mouseXRelative < edgeThreshold && rulerViewport.scrollLeft > 0) {
+				const edgeDistance = Math.max(0, mouseXRelative);
+				const intensity = 1 - edgeDistance / edgeThreshold;
+				scrollSpeed = -maxScrollSpeed * intensity;
+			} else if (
+				mouseXRelative > viewportWidth - edgeThreshold &&
+				rulerViewport.scrollLeft < scrollMax
+			) {
+				const edgeDistance = Math.max(
+					0,
+					viewportWidth - edgeThreshold - mouseXRelative,
+				);
+				const intensity = 1 - edgeDistance / edgeThreshold;
+				scrollSpeed = maxScrollSpeed * intensity;
+			}
 
-      if (scrollSpeed !== 0) {
-        const newScrollLeft = Math.max(
-          0,
-          Math.min(scrollMax, rulerViewport.scrollLeft + scrollSpeed),
-        );
-        rulerViewport.scrollLeft = newScrollLeft;
-        tracksViewport.scrollLeft = newScrollLeft;
-      }
+			if (scrollSpeed !== 0) {
+				const newScrollLeft = Math.max(
+					0,
+					Math.min(scrollMax, rulerViewport.scrollLeft + scrollSpeed),
+				);
+				rulerViewport.scrollLeft = newScrollLeft;
+				tracksViewport.scrollLeft = newScrollLeft;
+			}
 
-      rafRef.current = requestAnimationFrame(step);
-    };
+			rafRef.current = requestAnimationFrame(step);
+		};
 
-    rafRef.current = requestAnimationFrame(step);
+		rafRef.current = requestAnimationFrame(step);
 
-    return () => {
-      if (rafRef.current) {
-        cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [
-    isActive,
-    getMouseClientX,
-    rulerScrollRef,
-    tracksScrollRef,
-    contentWidth,
-    edgeThreshold,
-    maxScrollSpeed,
-  ]);
+		return () => {
+			if (rafRef.current) {
+				cancelAnimationFrame(rafRef.current);
+				rafRef.current = null;
+			}
+		};
+	}, [
+		isActive,
+		getMouseClientX,
+		rulerScrollRef,
+		tracksScrollRef,
+		contentWidth,
+		edgeThreshold,
+		maxScrollSpeed,
+	]);
 }
diff --git a/apps/web/src/hooks/timeline/use-scroll-sync.ts b/apps/web/src/hooks/timeline/use-scroll-sync.ts
index bdd6ac8e..62cd8d5b 100644
--- a/apps/web/src/hooks/timeline/use-scroll-sync.ts
+++ b/apps/web/src/hooks/timeline/use-scroll-sync.ts
@@ -1,130 +1,130 @@
 import { useEffect, useRef } from "react";
 
 interface UseScrollSyncProps {
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  trackLabelsScrollRef?: React.RefObject<HTMLDivElement>;
-  bookmarksScrollRef?: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	trackLabelsScrollRef?: React.RefObject<HTMLDivElement>;
+	bookmarksScrollRef?: React.RefObject<HTMLDivElement>;
 }
 
 export function useScrollSync({
-  rulerScrollRef,
-  tracksScrollRef,
-  trackLabelsScrollRef,
-  bookmarksScrollRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	trackLabelsScrollRef,
+	bookmarksScrollRef,
 }: UseScrollSyncProps) {
-  const isUpdatingRef = useRef(false);
-  const lastRulerSync = useRef(0);
-  const lastTracksSync = useRef(0);
-  const lastVerticalSync = useRef(0);
-  const lastBookmarksSync = useRef(0);
+	const isUpdatingRef = useRef(false);
+	const lastRulerSync = useRef(0);
+	const lastTracksSync = useRef(0);
+	const lastVerticalSync = useRef(0);
+	const lastBookmarksSync = useRef(0);
 
-  useEffect(() => {
-    const rulerViewport = rulerScrollRef.current;
-    const tracksViewport = tracksScrollRef.current;
-    const trackLabelsViewport = trackLabelsScrollRef?.current;
-    const bookmarksViewport = bookmarksScrollRef?.current;
-    let handleBookmarksScroll: (() => void) | null = null;
+	useEffect(() => {
+		const rulerViewport = rulerScrollRef.current;
+		const tracksViewport = tracksScrollRef.current;
+		const trackLabelsViewport = trackLabelsScrollRef?.current;
+		const bookmarksViewport = bookmarksScrollRef?.current;
+		let handleBookmarksScroll: (() => void) | null = null;
 
-    if (!rulerViewport || !tracksViewport) return;
+		if (!rulerViewport || !tracksViewport) return;
 
-    const handleRulerScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;
-      lastRulerSync.current = now;
-      isUpdatingRef.current = true;
-      tracksViewport.scrollLeft = rulerViewport.scrollLeft;
-      if (bookmarksViewport) {
-        bookmarksViewport.scrollLeft = rulerViewport.scrollLeft;
-      }
-      isUpdatingRef.current = false;
-    };
+		const handleRulerScroll = () => {
+			const now = Date.now();
+			if (isUpdatingRef.current || now - lastRulerSync.current < 16) return;
+			lastRulerSync.current = now;
+			isUpdatingRef.current = true;
+			tracksViewport.scrollLeft = rulerViewport.scrollLeft;
+			if (bookmarksViewport) {
+				bookmarksViewport.scrollLeft = rulerViewport.scrollLeft;
+			}
+			isUpdatingRef.current = false;
+		};
 
-    const handleTracksScroll = () => {
-      const now = Date.now();
-      if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;
-      lastTracksSync.current = now;
-      isUpdatingRef.current = true;
-      rulerViewport.scrollLeft = tracksViewport.scrollLeft;
-      if (bookmarksViewport) {
-        bookmarksViewport.scrollLeft = tracksViewport.scrollLeft;
-      }
-      isUpdatingRef.current = false;
-    };
+		const handleTracksScroll = () => {
+			const now = Date.now();
+			if (isUpdatingRef.current || now - lastTracksSync.current < 16) return;
+			lastTracksSync.current = now;
+			isUpdatingRef.current = true;
+			rulerViewport.scrollLeft = tracksViewport.scrollLeft;
+			if (bookmarksViewport) {
+				bookmarksViewport.scrollLeft = tracksViewport.scrollLeft;
+			}
+			isUpdatingRef.current = false;
+		};
 
-    rulerViewport.addEventListener("scroll", handleRulerScroll);
-    tracksViewport.addEventListener("scroll", handleTracksScroll);
+		rulerViewport.addEventListener("scroll", handleRulerScroll);
+		tracksViewport.addEventListener("scroll", handleTracksScroll);
 
-    if (bookmarksViewport) {
-      handleBookmarksScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastBookmarksSync.current < 16)
-          return;
-        lastBookmarksSync.current = now;
-        isUpdatingRef.current = true;
-        tracksViewport.scrollLeft = bookmarksViewport.scrollLeft;
-        rulerViewport.scrollLeft = bookmarksViewport.scrollLeft;
-        isUpdatingRef.current = false;
-      };
+		if (bookmarksViewport) {
+			handleBookmarksScroll = () => {
+				const now = Date.now();
+				if (isUpdatingRef.current || now - lastBookmarksSync.current < 16)
+					return;
+				lastBookmarksSync.current = now;
+				isUpdatingRef.current = true;
+				tracksViewport.scrollLeft = bookmarksViewport.scrollLeft;
+				rulerViewport.scrollLeft = bookmarksViewport.scrollLeft;
+				isUpdatingRef.current = false;
+			};
 
-      bookmarksViewport.addEventListener("scroll", handleBookmarksScroll);
-    }
+			bookmarksViewport.addEventListener("scroll", handleBookmarksScroll);
+		}
 
-    if (trackLabelsViewport) {
-      const handleTrackLabelsScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
-        isUpdatingRef.current = false;
-      };
+		if (trackLabelsViewport) {
+			const handleTrackLabelsScroll = () => {
+				const now = Date.now();
+				if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
+					return;
+				lastVerticalSync.current = now;
+				isUpdatingRef.current = true;
+				tracksViewport.scrollTop = trackLabelsViewport.scrollTop;
+				isUpdatingRef.current = false;
+			};
 
-      const handleTracksVerticalScroll = () => {
-        const now = Date.now();
-        if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
-          return;
-        lastVerticalSync.current = now;
-        isUpdatingRef.current = true;
-        trackLabelsViewport.scrollTop = tracksViewport.scrollTop;
-        isUpdatingRef.current = false;
-      };
+			const handleTracksVerticalScroll = () => {
+				const now = Date.now();
+				if (isUpdatingRef.current || now - lastVerticalSync.current < 16)
+					return;
+				lastVerticalSync.current = now;
+				isUpdatingRef.current = true;
+				trackLabelsViewport.scrollTop = tracksViewport.scrollTop;
+				isUpdatingRef.current = false;
+			};
 
-      trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);
-      tracksViewport.addEventListener("scroll", handleTracksVerticalScroll);
+			trackLabelsViewport.addEventListener("scroll", handleTrackLabelsScroll);
+			tracksViewport.addEventListener("scroll", handleTracksVerticalScroll);
 
-      return () => {
-        rulerViewport.removeEventListener("scroll", handleRulerScroll);
-        tracksViewport.removeEventListener("scroll", handleTracksScroll);
-        if (bookmarksViewport && handleBookmarksScroll) {
-          bookmarksViewport.removeEventListener(
-            "scroll",
-            handleBookmarksScroll,
-          );
-        }
-        trackLabelsViewport.removeEventListener(
-          "scroll",
-          handleTrackLabelsScroll,
-        );
-        tracksViewport.removeEventListener(
-          "scroll",
-          handleTracksVerticalScroll,
-        );
-      };
-    }
+			return () => {
+				rulerViewport.removeEventListener("scroll", handleRulerScroll);
+				tracksViewport.removeEventListener("scroll", handleTracksScroll);
+				if (bookmarksViewport && handleBookmarksScroll) {
+					bookmarksViewport.removeEventListener(
+						"scroll",
+						handleBookmarksScroll,
+					);
+				}
+				trackLabelsViewport.removeEventListener(
+					"scroll",
+					handleTrackLabelsScroll,
+				);
+				tracksViewport.removeEventListener(
+					"scroll",
+					handleTracksVerticalScroll,
+				);
+			};
+		}
 
-    return () => {
-      rulerViewport.removeEventListener("scroll", handleRulerScroll);
-      tracksViewport.removeEventListener("scroll", handleTracksScroll);
-      if (bookmarksViewport && handleBookmarksScroll) {
-        bookmarksViewport.removeEventListener("scroll", handleBookmarksScroll);
-      }
-    };
-  }, [
-    rulerScrollRef,
-    tracksScrollRef,
-    trackLabelsScrollRef,
-    bookmarksScrollRef,
-  ]);
+		return () => {
+			rulerViewport.removeEventListener("scroll", handleRulerScroll);
+			tracksViewport.removeEventListener("scroll", handleTracksScroll);
+			if (bookmarksViewport && handleBookmarksScroll) {
+				bookmarksViewport.removeEventListener("scroll", handleBookmarksScroll);
+			}
+		};
+	}, [
+		rulerScrollRef,
+		tracksScrollRef,
+		trackLabelsScrollRef,
+		bookmarksScrollRef,
+	]);
 }
diff --git a/apps/web/src/hooks/timeline/use-selection-box.ts b/apps/web/src/hooks/timeline/use-selection-box.ts
index 848893af..012af263 100644
--- a/apps/web/src/hooks/timeline/use-selection-box.ts
+++ b/apps/web/src/hooks/timeline/use-selection-box.ts
@@ -1,231 +1,231 @@
-import { useState, useEffect, useCallback } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { getCumulativeHeightBefore, getTrackHeight } from "@/lib/timeline";
 import { useEditor } from "../use-editor";
 
 interface UseSelectionBoxProps {
-  containerRef: React.RefObject<HTMLElement>;
-  onSelectionComplete: (
-    elements: { trackId: string; elementId: string }[],
-  ) => void;
-  isEnabled?: boolean;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  zoomLevel: number;
+	containerRef: React.RefObject<HTMLElement>;
+	onSelectionComplete: (
+		elements: { trackId: string; elementId: string }[],
+	) => void;
+	isEnabled?: boolean;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	zoomLevel: number;
 }
 
 interface SelectionBoxState {
-  startPos: { x: number; y: number };
-  currentPos: { x: number; y: number };
-  isActive: boolean;
+	startPos: { x: number; y: number };
+	currentPos: { x: number; y: number };
+	isActive: boolean;
 }
 
 interface SelectionRectangle {
-  left: number;
-  top: number;
-  right: number;
-  bottom: number;
+	left: number;
+	top: number;
+	right: number;
+	bottom: number;
 }
 
 function getNormalizedRectangle({
-  startPos,
-  endPos,
+	startPos,
+	endPos,
 }: {
-  startPos: { x: number; y: number };
-  endPos: { x: number; y: number };
+	startPos: { x: number; y: number };
+	endPos: { x: number; y: number };
 }): SelectionRectangle {
-  return {
-    left: Math.min(startPos.x, endPos.x),
-    top: Math.min(startPos.y, endPos.y),
-    right: Math.max(startPos.x, endPos.x),
-    bottom: Math.max(startPos.y, endPos.y),
-  };
+	return {
+		left: Math.min(startPos.x, endPos.x),
+		top: Math.min(startPos.y, endPos.y),
+		right: Math.max(startPos.x, endPos.x),
+		bottom: Math.max(startPos.y, endPos.y),
+	};
 }
 
 function getSelectionRectangleInContent({
-  container,
-  scrollContainer,
-  startPos,
-  endPos,
+	container,
+	scrollContainer,
+	startPos,
+	endPos,
 }: {
-  container: HTMLElement;
-  scrollContainer: HTMLDivElement | null;
-  startPos: { x: number; y: number };
-  endPos: { x: number; y: number };
+	container: HTMLElement;
+	scrollContainer: HTMLDivElement | null;
+	startPos: { x: number; y: number };
+	endPos: { x: number; y: number };
 }): SelectionRectangle {
-  const containerRect = container.getBoundingClientRect();
-  const scrollLeft = scrollContainer?.scrollLeft ?? 0;
-  const scrollTop = scrollContainer?.scrollTop ?? 0;
+	const containerRect = container.getBoundingClientRect();
+	const scrollLeft = scrollContainer?.scrollLeft ?? 0;
+	const scrollTop = scrollContainer?.scrollTop ?? 0;
 
-  const adjustedStart = {
-    x: startPos.x - containerRect.left + scrollLeft,
-    y: startPos.y - containerRect.top + scrollTop,
-  };
-  const adjustedEnd = {
-    x: endPos.x - containerRect.left + scrollLeft,
-    y: endPos.y - containerRect.top + scrollTop,
-  };
+	const adjustedStart = {
+		x: startPos.x - containerRect.left + scrollLeft,
+		y: startPos.y - containerRect.top + scrollTop,
+	};
+	const adjustedEnd = {
+		x: endPos.x - containerRect.left + scrollLeft,
+		y: endPos.y - containerRect.top + scrollTop,
+	};
 
-  return getNormalizedRectangle({
-    startPos: adjustedStart,
-    endPos: adjustedEnd,
-  });
+	return getNormalizedRectangle({
+		startPos: adjustedStart,
+		endPos: adjustedEnd,
+	});
 }
 
 function isRectangleIntersecting({
-  elementRectangle,
-  selectionRectangle,
+	elementRectangle,
+	selectionRectangle,
 }: {
-  elementRectangle: SelectionRectangle;
-  selectionRectangle: SelectionRectangle;
+	elementRectangle: SelectionRectangle;
+	selectionRectangle: SelectionRectangle;
 }): boolean {
-  return !(
-    elementRectangle.right < selectionRectangle.left ||
-    elementRectangle.left > selectionRectangle.right ||
-    elementRectangle.bottom < selectionRectangle.top ||
-    elementRectangle.top > selectionRectangle.bottom
-  );
+	return !(
+		elementRectangle.right < selectionRectangle.left ||
+		elementRectangle.left > selectionRectangle.right ||
+		elementRectangle.bottom < selectionRectangle.top ||
+		elementRectangle.top > selectionRectangle.bottom
+	);
 }
 
 export function useSelectionBox({
-  containerRef,
-  onSelectionComplete,
-  isEnabled = true,
-  tracksScrollRef,
-  zoomLevel,
+	containerRef,
+	onSelectionComplete,
+	isEnabled = true,
+	tracksScrollRef,
+	zoomLevel,
 }: UseSelectionBoxProps) {
-  const editor = useEditor();
-  const tracks = editor.timeline.getTracks();
-  const [selectionBox, setSelectionBox] = useState<SelectionBoxState | null>(
-    null,
-  );
+	const editor = useEditor();
+	const tracks = editor.timeline.getTracks();
+	const [selectionBox, setSelectionBox] = useState<SelectionBoxState | null>(
+		null,
+	);
 
-  const handleMouseDown = useCallback(
-    ({ clientX, clientY }: React.MouseEvent) => {
-      if (!isEnabled) return;
+	const handleMouseDown = useCallback(
+		({ clientX, clientY }: React.MouseEvent) => {
+			if (!isEnabled) return;
 
-      setSelectionBox({
-        startPos: { x: clientX, y: clientY },
-        currentPos: { x: clientX, y: clientY },
-        isActive: false,
-      });
-    },
-    [isEnabled],
-  );
+			setSelectionBox({
+				startPos: { x: clientX, y: clientY },
+				currentPos: { x: clientX, y: clientY },
+				isActive: false,
+			});
+		},
+		[isEnabled],
+	);
 
-  const selectElementsInBox = useCallback(
-    ({
-      startPos,
-      endPos,
-    }: {
-      startPos: { x: number; y: number };
-      endPos: { x: number; y: number };
-    }) => {
-      if (!containerRef.current) return;
+	const selectElementsInBox = useCallback(
+		({
+			startPos,
+			endPos,
+		}: {
+			startPos: { x: number; y: number };
+			endPos: { x: number; y: number };
+		}) => {
+			if (!containerRef.current) return;
 
-      const container = containerRef.current;
-      const selectionRectangle = getSelectionRectangleInContent({
-        container,
-        scrollContainer: tracksScrollRef.current,
-        startPos,
-        endPos,
-      });
-      const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-      const selectedElements: { trackId: string; elementId: string }[] = [];
+			const container = containerRef.current;
+			const selectionRectangle = getSelectionRectangleInContent({
+				container,
+				scrollContainer: tracksScrollRef.current,
+				startPos,
+				endPos,
+			});
+			const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+			const selectedElements: { trackId: string; elementId: string }[] = [];
 
-      for (const [trackIndex, track] of tracks.entries()) {
-        const trackTop = getCumulativeHeightBefore({
-          tracks,
-          trackIndex,
-        });
-        const trackHeight = getTrackHeight({ type: track.type });
-        const elementTop = trackTop;
-        const elementBottom = trackTop + trackHeight;
+			for (const [trackIndex, track] of tracks.entries()) {
+				const trackTop = getCumulativeHeightBefore({
+					tracks,
+					trackIndex,
+				});
+				const trackHeight = getTrackHeight({ type: track.type });
+				const elementTop = trackTop;
+				const elementBottom = trackTop + trackHeight;
 
-        for (const element of track.elements) {
-          const elementLeft = element.startTime * pixelsPerSecond;
-          const elementRight = elementLeft + element.duration * pixelsPerSecond;
+				for (const element of track.elements) {
+					const elementLeft = element.startTime * pixelsPerSecond;
+					const elementRight = elementLeft + element.duration * pixelsPerSecond;
 
-          const elementRectangle = {
-            left: elementLeft,
-            top: elementTop,
-            right: elementRight,
-            bottom: elementBottom,
-          };
+					const elementRectangle = {
+						left: elementLeft,
+						top: elementTop,
+						right: elementRight,
+						bottom: elementBottom,
+					};
 
-          const intersects = isRectangleIntersecting({
-            elementRectangle,
-            selectionRectangle,
-          });
+					const intersects = isRectangleIntersecting({
+						elementRectangle,
+						selectionRectangle,
+					});
 
-          if (intersects) {
-            selectedElements.push({
-              trackId: track.id,
-              elementId: element.id,
-            });
-          }
-        }
-      }
-      onSelectionComplete(selectedElements);
-    },
-    [containerRef, onSelectionComplete, tracks, tracksScrollRef, zoomLevel],
-  );
+					if (intersects) {
+						selectedElements.push({
+							trackId: track.id,
+							elementId: element.id,
+						});
+					}
+				}
+			}
+			onSelectionComplete(selectedElements);
+		},
+		[containerRef, onSelectionComplete, tracks, tracksScrollRef, zoomLevel],
+	);
 
-  useEffect(() => {
-    if (!selectionBox) return;
+	useEffect(() => {
+		if (!selectionBox) return;
 
-    const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
-      const deltaX = Math.abs(clientX - selectionBox.startPos.x);
-      const deltaY = Math.abs(clientY - selectionBox.startPos.y);
-      const shouldActivate = deltaX > 5 || deltaY > 5;
+		const handleMouseMove = ({ clientX, clientY }: MouseEvent) => {
+			const deltaX = Math.abs(clientX - selectionBox.startPos.x);
+			const deltaY = Math.abs(clientY - selectionBox.startPos.y);
+			const shouldActivate = deltaX > 5 || deltaY > 5;
 
-      const newSelectionBox = {
-        ...selectionBox,
-        currentPos: { x: clientX, y: clientY },
-        isActive: shouldActivate || selectionBox.isActive,
-      };
+			const newSelectionBox = {
+				...selectionBox,
+				currentPos: { x: clientX, y: clientY },
+				isActive: shouldActivate || selectionBox.isActive,
+			};
 
-      setSelectionBox(newSelectionBox);
+			setSelectionBox(newSelectionBox);
 
-      if (newSelectionBox.isActive) {
-        selectElementsInBox({
-          startPos: newSelectionBox.startPos,
-          endPos: newSelectionBox.currentPos,
-        });
-      }
-    };
+			if (newSelectionBox.isActive) {
+				selectElementsInBox({
+					startPos: newSelectionBox.startPos,
+					endPos: newSelectionBox.currentPos,
+				});
+			}
+		};
 
-    const handleMouseUp = () => {
-      setSelectionBox(null);
-    };
+		const handleMouseUp = () => {
+			setSelectionBox(null);
+		};
 
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
+		window.addEventListener("mousemove", handleMouseMove);
+		window.addEventListener("mouseup", handleMouseUp);
 
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [selectionBox, selectElementsInBox]);
+		return () => {
+			window.removeEventListener("mousemove", handleMouseMove);
+			window.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [selectionBox, selectElementsInBox]);
 
-  useEffect(() => {
-    if (!selectionBox) return;
+	useEffect(() => {
+		if (!selectionBox) return;
 
-    const previousBodyUserSelect = document.body.style.userSelect;
-    const container = containerRef.current;
-    const previousContainerUserSelect = container?.style.userSelect ?? "";
+		const previousBodyUserSelect = document.body.style.userSelect;
+		const container = containerRef.current;
+		const previousContainerUserSelect = container?.style.userSelect ?? "";
 
-    document.body.style.userSelect = "none";
-    if (container) container.style.userSelect = "none";
+		document.body.style.userSelect = "none";
+		if (container) container.style.userSelect = "none";
 
-    return () => {
-      document.body.style.userSelect = previousBodyUserSelect;
-      if (container) container.style.userSelect = previousContainerUserSelect;
-    };
-  }, [selectionBox, containerRef]);
+		return () => {
+			document.body.style.userSelect = previousBodyUserSelect;
+			if (container) container.style.userSelect = previousContainerUserSelect;
+		};
+	}, [selectionBox, containerRef]);
 
-  return {
-    selectionBox,
-    handleMouseDown,
-    isSelecting: selectionBox?.isActive || false,
-  };
+	return {
+		selectionBox,
+		handleMouseDown,
+		isSelecting: selectionBox?.isActive || false,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/use-snap-indicator-position.ts b/apps/web/src/hooks/timeline/use-snap-indicator-position.ts
index cc6ca050..c6ecbf7c 100644
--- a/apps/web/src/hooks/timeline/use-snap-indicator-position.ts
+++ b/apps/web/src/hooks/timeline/use-snap-indicator-position.ts
@@ -1,62 +1,62 @@
+import { useEffect, useState } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import type { TimelineTrack } from "@/types/timeline";
-import { useState, useEffect } from "react";
 
 interface UseSnapIndicatorPositionParams {
-  snapPoint: { time: number } | null;
-  zoomLevel: number;
-  tracks: TimelineTrack[];
-  timelineRef: React.RefObject<HTMLDivElement>;
-  trackLabelsRef?: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
+	snapPoint: { time: number } | null;
+	zoomLevel: number;
+	tracks: TimelineTrack[];
+	timelineRef: React.RefObject<HTMLDivElement>;
+	trackLabelsRef?: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
 }
 
 interface SnapIndicatorPosition {
-  leftPosition: number;
-  topPosition: number;
-  height: number;
+	leftPosition: number;
+	topPosition: number;
+	height: number;
 }
 
 export function useSnapIndicatorPosition({
-  snapPoint,
-  zoomLevel,
-  tracks,
-  timelineRef,
-  trackLabelsRef,
-  tracksScrollRef,
+	snapPoint,
+	zoomLevel,
+	tracks,
+	timelineRef,
+	trackLabelsRef,
+	tracksScrollRef,
 }: UseSnapIndicatorPositionParams): SnapIndicatorPosition {
-  const [scrollLeft, setScrollLeft] = useState(0);
+	const [scrollLeft, setScrollLeft] = useState(0);
 
-  useEffect(() => {
-    const tracksViewport = tracksScrollRef.current;
+	useEffect(() => {
+		const tracksViewport = tracksScrollRef.current;
 
-    if (!tracksViewport) return;
+		if (!tracksViewport) return;
 
-    const handleScroll = () => {
-      setScrollLeft(tracksViewport.scrollLeft);
-    };
+		const handleScroll = () => {
+			setScrollLeft(tracksViewport.scrollLeft);
+		};
 
-    setScrollLeft(tracksViewport.scrollLeft);
+		setScrollLeft(tracksViewport.scrollLeft);
 
-    tracksViewport.addEventListener("scroll", handleScroll);
-    return () => tracksViewport.removeEventListener("scroll", handleScroll);
-  }, [tracksScrollRef]);
+		tracksViewport.addEventListener("scroll", handleScroll);
+		return () => tracksViewport.removeEventListener("scroll", handleScroll);
+	}, [tracksScrollRef]);
 
-  const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-  const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
+	const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
+	const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
 
-  const trackLabelsWidth =
-    tracks.length > 0 && trackLabelsRef?.current
-      ? trackLabelsRef.current.offsetWidth
-      : 0;
+	const trackLabelsWidth =
+		tracks.length > 0 && trackLabelsRef?.current
+			? trackLabelsRef.current.offsetWidth
+			: 0;
 
-  const timelinePosition =
-    (snapPoint?.time || 0) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-  const leftPosition = trackLabelsWidth + timelinePosition - scrollLeft;
+	const timelinePosition =
+		(snapPoint?.time || 0) * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+	const leftPosition = trackLabelsWidth + timelinePosition - scrollLeft;
 
-  return {
-    leftPosition,
-    topPosition: 0,
-    height: totalHeight,
-  };
+	return {
+		leftPosition,
+		topPosition: 0,
+		height: totalHeight,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts b/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
index fd19de7b..5649e1d0 100644
--- a/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-drag-drop.ts
@@ -5,8 +5,8 @@ import { toast } from "sonner";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 import { snapTimeToFrame } from "@/lib/time";
 import {
-  buildTextElement,
-  buildStickerElement,
+	buildTextElement,
+	buildStickerElement,
 } from "@/lib/timeline/element-utils";
 import { computeDropTarget } from "@/lib/timeline/drop-utils";
 import { getDragData, hasDragData } from "@/lib/drag-data";
@@ -14,497 +14,497 @@ import type { TrackType, DropTarget, ElementType } from "@/types/timeline";
 import type { MediaDragData, StickerDragData } from "@/types/drag";
 
 interface UseTimelineDragDropProps {
-  containerRef: RefObject<HTMLDivElement | null>;
-  zoomLevel: number;
-  isSnappingEnabled?: boolean;
+	containerRef: RefObject<HTMLDivElement | null>;
+	zoomLevel: number;
+	isSnappingEnabled?: boolean;
 }
 
 export function useTimelineDragDrop({
-  containerRef,
-  zoomLevel,
-  isSnappingEnabled = true,
+	containerRef,
+	zoomLevel,
+	isSnappingEnabled = true,
 }: UseTimelineDragDropProps) {
-  const editor = useEditor();
-  const [isDragOver, setIsDragOver] = useState(false);
-  const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
-  const [dragElementType, setElementType] = useState<ElementType | null>(null);
+	const editor = useEditor();
+	const [isDragOver, setIsDragOver] = useState(false);
+	const [dropTarget, setDropTarget] = useState<DropTarget | null>(null);
+	const [dragElementType, setElementType] = useState<ElementType | null>(null);
 
-  const tracks = editor.timeline.getTracks();
-  const currentTime = editor.playback.getCurrentTime();
-  const mediaAssets = editor.media.getAssets();
-  const activeProject = editor.project.getActive();
+	const tracks = editor.timeline.getTracks();
+	const currentTime = editor.playback.getCurrentTime();
+	const mediaAssets = editor.media.getAssets();
+	const activeProject = editor.project.getActive();
 
-  const getSnappedTime = useCallback(
-    ({ time }: { time: number }) => {
-      const projectFps = activeProject.settings.fps;
-      return snapTimeToFrame({ time, fps: projectFps });
-    },
-    [activeProject.settings.fps],
-  );
+	const getSnappedTime = useCallback(
+		({ time }: { time: number }) => {
+			const projectFps = activeProject.settings.fps;
+			return snapTimeToFrame({ time, fps: projectFps });
+		},
+		[activeProject.settings.fps],
+	);
 
-  const getElementType = useCallback(
-    ({ dataTransfer }: { dataTransfer: DataTransfer }): ElementType | null => {
-      const dragData = getDragData({ dataTransfer });
-      if (!dragData) return null;
+	const getElementType = useCallback(
+		({ dataTransfer }: { dataTransfer: DataTransfer }): ElementType | null => {
+			const dragData = getDragData({ dataTransfer });
+			if (!dragData) return null;
 
-      if (dragData.type === "text") return "text";
-      if (dragData.type === "sticker") return "sticker";
-      if (dragData.type === "media") {
-        return dragData.mediaType;
-      }
-      return null;
-    },
-    [],
-  );
+			if (dragData.type === "text") return "text";
+			if (dragData.type === "sticker") return "sticker";
+			if (dragData.type === "media") {
+				return dragData.mediaType;
+			}
+			return null;
+		},
+		[],
+	);
 
-  const getElementDuration = useCallback(
-    ({
-      elementType,
-      mediaId,
-    }: {
-      elementType: ElementType;
-      mediaId?: string;
-    }): number => {
-      if (elementType === "text" || elementType === "sticker") {
-        return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
-      }
-      if (mediaId) {
-        const media = mediaAssets.find((m) => m.id === mediaId);
-        return media?.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
-      }
-      return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
-    },
-    [mediaAssets],
-  );
+	const getElementDuration = useCallback(
+		({
+			elementType,
+			mediaId,
+		}: {
+			elementType: ElementType;
+			mediaId?: string;
+		}): number => {
+			if (elementType === "text" || elementType === "sticker") {
+				return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+			}
+			if (mediaId) {
+				const media = mediaAssets.find((m) => m.id === mediaId);
+				return media?.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+			}
+			return TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+		},
+		[mediaAssets],
+	);
 
-  const handleDragEnter = useCallback((e: React.DragEvent) => {
-    e.preventDefault();
-    const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });
-    const hasFiles = e.dataTransfer.types.includes("Files");
-    if (!hasAsset && !hasFiles) return;
-    setIsDragOver(true);
-  }, []);
+	const handleDragEnter = useCallback((e: React.DragEvent) => {
+		e.preventDefault();
+		const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });
+		const hasFiles = e.dataTransfer.types.includes("Files");
+		if (!hasAsset && !hasFiles) return;
+		setIsDragOver(true);
+	}, []);
 
-  const handleDragOver = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
+	const handleDragOver = useCallback(
+		(e: React.DragEvent) => {
+			e.preventDefault();
 
-      const rect = containerRef.current?.getBoundingClientRect();
-      if (!rect) return;
+			const rect = containerRef.current?.getBoundingClientRect();
+			if (!rect) return;
 
-      const hasFiles = e.dataTransfer.types.includes("Files");
-      const isExternal =
-        hasFiles && !hasDragData({ dataTransfer: e.dataTransfer });
+			const hasFiles = e.dataTransfer.types.includes("Files");
+			const isExternal =
+				hasFiles && !hasDragData({ dataTransfer: e.dataTransfer });
 
-      let elementType = getElementType({ dataTransfer: e.dataTransfer });
+			const elementType = getElementType({ dataTransfer: e.dataTransfer });
 
-      if (!elementType && hasFiles && isExternal) {
-        setDropTarget(null);
-        setElementType(null);
-        return;
-      }
+			if (!elementType && hasFiles && isExternal) {
+				setDropTarget(null);
+				setElementType(null);
+				return;
+			}
 
-      if (!elementType) return;
+			if (!elementType) return;
 
-      setElementType(elementType);
+			setElementType(elementType);
 
-      const dragData = getDragData({ dataTransfer: e.dataTransfer });
-      const duration = getElementDuration({
-        elementType,
-        mediaId: dragData?.type === "media" ? dragData.id : undefined,
-      });
+			const dragData = getDragData({ dataTransfer: e.dataTransfer });
+			const duration = getElementDuration({
+				elementType,
+				mediaId: dragData?.type === "media" ? dragData.id : undefined,
+			});
 
-      const mouseX = e.clientX - rect.left;
-      const mouseY = e.clientY - rect.top;
+			const mouseX = e.clientX - rect.left;
+			const mouseY = e.clientY - rect.top;
 
-      const target = computeDropTarget({
-        elementType,
-        mouseX,
-        mouseY,
-        tracks,
-        playheadTime: currentTime,
-        isExternalDrop: isExternal,
-        elementDuration: duration,
-        pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
-        zoomLevel,
-      });
+			const target = computeDropTarget({
+				elementType,
+				mouseX,
+				mouseY,
+				tracks,
+				playheadTime: currentTime,
+				isExternalDrop: isExternal,
+				elementDuration: duration,
+				pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
+				zoomLevel,
+			});
 
-      target.xPosition = getSnappedTime({ time: target.xPosition });
+			target.xPosition = getSnappedTime({ time: target.xPosition });
 
-      setDropTarget(target);
-      e.dataTransfer.dropEffect = "copy";
-    },
-    [
-      containerRef,
-      tracks,
-      currentTime,
-      zoomLevel,
-      getElementType,
-      getElementDuration,
-      getSnappedTime,
-    ],
-  );
+			setDropTarget(target);
+			e.dataTransfer.dropEffect = "copy";
+		},
+		[
+			containerRef,
+			tracks,
+			currentTime,
+			zoomLevel,
+			getElementType,
+			getElementDuration,
+			getSnappedTime,
+		],
+	);
 
-  const handleDragLeave = useCallback(
-    (e: React.DragEvent) => {
-      e.preventDefault();
-      const rect = containerRef.current?.getBoundingClientRect();
-      if (rect) {
-        const { clientX, clientY } = e;
-        if (
-          clientX < rect.left ||
-          clientX > rect.right ||
-          clientY < rect.top ||
-          clientY > rect.bottom
-        ) {
-          setIsDragOver(false);
-          setDropTarget(null);
-          setElementType(null);
-        }
-      }
-    },
-    [containerRef],
-  );
+	const handleDragLeave = useCallback(
+		(e: React.DragEvent) => {
+			e.preventDefault();
+			const rect = containerRef.current?.getBoundingClientRect();
+			if (rect) {
+				const { clientX, clientY } = e;
+				if (
+					clientX < rect.left ||
+					clientX > rect.right ||
+					clientY < rect.top ||
+					clientY > rect.bottom
+				) {
+					setIsDragOver(false);
+					setDropTarget(null);
+					setElementType(null);
+				}
+			}
+		},
+		[containerRef],
+	);
 
-  const executeTextDrop = useCallback(
-    ({
-      target,
-      dragData,
-    }: {
-      target: DropTarget;
-      dragData: { name?: string; content?: string };
-    }) => {
-      let trackId: string;
+	const executeTextDrop = useCallback(
+		({
+			target,
+			dragData,
+		}: {
+			target: DropTarget;
+			dragData: { name?: string; content?: string };
+		}) => {
+			let trackId: string;
 
-      if (target.isNewTrack) {
-        trackId = editor.timeline.addTrack({
-          type: "text",
-          index: target.trackIndex,
-        });
-      } else {
-        const track = tracks[target.trackIndex];
-        if (!track) return;
-        trackId = track.id;
-      }
+			if (target.isNewTrack) {
+				trackId = editor.timeline.addTrack({
+					type: "text",
+					index: target.trackIndex,
+				});
+			} else {
+				const track = tracks[target.trackIndex];
+				if (!track) return;
+				trackId = track.id;
+			}
 
-      const element = buildTextElement({
-        raw: {
-          name: dragData.name ?? "",
-          content: dragData.content ?? "",
-        },
-        startTime: target.xPosition,
-      });
+			const element = buildTextElement({
+				raw: {
+					name: dragData.name ?? "",
+					content: dragData.content ?? "",
+				},
+				startTime: target.xPosition,
+			});
 
-      editor.timeline.insertElement({
-        placement: { mode: "explicit", trackId },
-        element,
-      });
-    },
-    [editor.timeline, tracks],
-  );
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId },
+				element,
+			});
+		},
+		[editor.timeline, tracks],
+	);
 
-  const executeStickerDrop = useCallback(
-    ({
-      target,
-      dragData,
-    }: {
-      target: DropTarget;
-      dragData: StickerDragData;
-    }) => {
-      let trackId: string;
+	const executeStickerDrop = useCallback(
+		({
+			target,
+			dragData,
+		}: {
+			target: DropTarget;
+			dragData: StickerDragData;
+		}) => {
+			let trackId: string;
 
-      if (target.isNewTrack) {
-        trackId = editor.timeline.addTrack({
-          type: "sticker",
-          index: target.trackIndex,
-        });
-      } else {
-        const track = tracks[target.trackIndex];
-        if (!track) return;
-        trackId = track.id;
-      }
+			if (target.isNewTrack) {
+				trackId = editor.timeline.addTrack({
+					type: "sticker",
+					index: target.trackIndex,
+				});
+			} else {
+				const track = tracks[target.trackIndex];
+				if (!track) return;
+				trackId = track.id;
+			}
 
-      const element = buildStickerElement({
-        iconName: dragData.iconName,
-        startTime: target.xPosition,
-      });
+			const element = buildStickerElement({
+				iconName: dragData.iconName,
+				startTime: target.xPosition,
+			});
 
-      editor.timeline.insertElement({
-        placement: { mode: "explicit", trackId },
-        element,
-      });
-    },
-    [editor.timeline, tracks],
-  );
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId },
+				element,
+			});
+		},
+		[editor.timeline, tracks],
+	);
 
-  const executeMediaDrop = useCallback(
-    ({ target, dragData }: { target: DropTarget; dragData: MediaDragData }) => {
-      const mediaAsset = mediaAssets.find((m) => m.id === dragData.id);
-      if (!mediaAsset) return;
+	const executeMediaDrop = useCallback(
+		({ target, dragData }: { target: DropTarget; dragData: MediaDragData }) => {
+			const mediaAsset = mediaAssets.find((m) => m.id === dragData.id);
+			if (!mediaAsset) return;
 
-      const trackType: TrackType =
-        dragData.mediaType === "audio" ? "audio" : "video";
-      let trackId: string;
+			const trackType: TrackType =
+				dragData.mediaType === "audio" ? "audio" : "video";
+			let trackId: string;
 
-      if (target.isNewTrack) {
-        trackId = editor.timeline.addTrack({
-          type: trackType,
-          index: target.trackIndex,
-        });
-      } else {
-        const track = tracks[target.trackIndex];
-        if (!track) return;
-        trackId = track.id;
-      }
+			if (target.isNewTrack) {
+				trackId = editor.timeline.addTrack({
+					type: trackType,
+					index: target.trackIndex,
+				});
+			} else {
+				const track = tracks[target.trackIndex];
+				if (!track) return;
+				trackId = track.id;
+			}
 
-      const duration =
-        mediaAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+			const duration =
+				mediaAsset.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
 
-      if (dragData.mediaType === "audio") {
-        editor.timeline.insertElement({
-          placement: { mode: "explicit", trackId },
-          element: {
-            type: "audio",
-            sourceType: "upload",
-            mediaId: mediaAsset.id,
-            name: mediaAsset.name,
-            duration,
-            startTime: target.xPosition,
-            trimStart: 0,
-            trimEnd: 0,
-            volume: 1,
-            muted: false,
-          },
-        });
-      } else if (dragData.mediaType === "video") {
-        editor.timeline.insertElement({
-          placement: { mode: "explicit", trackId },
-          element: {
-            type: "video",
-            mediaId: mediaAsset.id,
-            name: mediaAsset.name,
-            duration,
-            startTime: target.xPosition,
-            trimStart: 0,
-            trimEnd: 0,
-            transform: {
-              scale: 1,
-              position: {
-                x: 0,
-                y: 0,
-              },
-              rotate: 0,
-            },
-            opacity: 1,
-          },
-        });
-      } else {
-        editor.timeline.insertElement({
-          placement: { mode: "explicit", trackId },
-          element: {
-            type: "image",
-            mediaId: mediaAsset.id,
-            name: mediaAsset.name,
-            duration,
-            startTime: target.xPosition,
-            trimStart: 0,
-            trimEnd: 0,
-            transform: {
-              scale: 1,
-              position: {
-                x: 0,
-                y: 0,
-              },
-              rotate: 0,
-            },
-            opacity: 1,
-          },
-        });
-      }
-    },
-    [editor.timeline, mediaAssets, tracks],
-  );
+			if (dragData.mediaType === "audio") {
+				editor.timeline.insertElement({
+					placement: { mode: "explicit", trackId },
+					element: {
+						type: "audio",
+						sourceType: "upload",
+						mediaId: mediaAsset.id,
+						name: mediaAsset.name,
+						duration,
+						startTime: target.xPosition,
+						trimStart: 0,
+						trimEnd: 0,
+						volume: 1,
+						muted: false,
+					},
+				});
+			} else if (dragData.mediaType === "video") {
+				editor.timeline.insertElement({
+					placement: { mode: "explicit", trackId },
+					element: {
+						type: "video",
+						mediaId: mediaAsset.id,
+						name: mediaAsset.name,
+						duration,
+						startTime: target.xPosition,
+						trimStart: 0,
+						trimEnd: 0,
+						transform: {
+							scale: 1,
+							position: {
+								x: 0,
+								y: 0,
+							},
+							rotate: 0,
+						},
+						opacity: 1,
+					},
+				});
+			} else {
+				editor.timeline.insertElement({
+					placement: { mode: "explicit", trackId },
+					element: {
+						type: "image",
+						mediaId: mediaAsset.id,
+						name: mediaAsset.name,
+						duration,
+						startTime: target.xPosition,
+						trimStart: 0,
+						trimEnd: 0,
+						transform: {
+							scale: 1,
+							position: {
+								x: 0,
+								y: 0,
+							},
+							rotate: 0,
+						},
+						opacity: 1,
+					},
+				});
+			}
+		},
+		[editor.timeline, mediaAssets, tracks],
+	);
 
-  const executeFileDrop = useCallback(
-    async ({
-      files,
-      mouseX,
-      mouseY,
-    }: {
-      files: File[];
-      mouseX: number;
-      mouseY: number;
-    }) => {
-      if (!activeProject) return;
+	const executeFileDrop = useCallback(
+		async ({
+			files,
+			mouseX,
+			mouseY,
+		}: {
+			files: File[];
+			mouseX: number;
+			mouseY: number;
+		}) => {
+			if (!activeProject) return;
 
-      const processedAssets = await processMediaAssets({ files });
+			const processedAssets = await processMediaAssets({ files });
 
-      for (const asset of processedAssets) {
-        await editor.media.addMediaAsset({
-          projectId: activeProject.metadata.id,
-          asset,
-        });
+			for (const asset of processedAssets) {
+				await editor.media.addMediaAsset({
+					projectId: activeProject.metadata.id,
+					asset,
+				});
 
-        const added = editor.media
-          .getAssets()
-          .find((m) => m.name === asset.name && m.url === asset.url);
+				const added = editor.media
+					.getAssets()
+					.find((m) => m.name === asset.name && m.url === asset.url);
 
-        if (added) {
-          const duration =
-            added.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
-          const currentTracks = editor.timeline.getTracks();
-          const dropTarget = computeDropTarget({
-            elementType: added.type,
-            mouseX,
-            mouseY,
-            tracks: currentTracks,
-            playheadTime: currentTime,
-            isExternalDrop: true,
-            elementDuration: duration,
-            pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
-            zoomLevel,
-          });
+				if (added) {
+					const duration =
+						added.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION;
+					const currentTracks = editor.timeline.getTracks();
+					const dropTarget = computeDropTarget({
+						elementType: added.type,
+						mouseX,
+						mouseY,
+						tracks: currentTracks,
+						playheadTime: currentTime,
+						isExternalDrop: true,
+						elementDuration: duration,
+						pixelsPerSecond: TIMELINE_CONSTANTS.PIXELS_PER_SECOND,
+						zoomLevel,
+					});
 
-          const trackType: TrackType =
-            added.type === "audio" ? "audio" : "video";
-          const trackId = dropTarget.isNewTrack
-            ? editor.timeline.addTrack({
-                type: trackType,
-                index: dropTarget.trackIndex,
-              })
-            : currentTracks[dropTarget.trackIndex]?.id;
+					const trackType: TrackType =
+						added.type === "audio" ? "audio" : "video";
+					const trackId = dropTarget.isNewTrack
+						? editor.timeline.addTrack({
+								type: trackType,
+								index: dropTarget.trackIndex,
+							})
+						: currentTracks[dropTarget.trackIndex]?.id;
 
-          if (!trackId) return;
+					if (!trackId) return;
 
-          if (added.type === "audio") {
-            editor.timeline.insertElement({
-              placement: { mode: "explicit", trackId },
-              element: {
-                type: "audio",
-                sourceType: "upload",
-                mediaId: added.id,
-                name: added.name,
-                duration,
-                startTime: dropTarget.xPosition,
-                trimStart: 0,
-                trimEnd: 0,
-                volume: 1,
-                buffer: new AudioBuffer({ length: 1, sampleRate: 44100 }),
-                muted: false,
-              },
-            });
-          } else if (added.type === "video") {
-            editor.timeline.insertElement({
-              placement: { mode: "explicit", trackId },
-              element: {
-                type: "video",
-                mediaId: added.id,
-                name: added.name,
-                duration,
-                startTime: dropTarget.xPosition,
-                trimStart: 0,
-                trimEnd: 0,
-                transform: {
-                  scale: 1,
-                  position: {
-                    x: 0,
-                    y: 0,
-                  },
-                  rotate: 0,
-                },
-                opacity: 1,
-              },
-            });
-          } else {
-            editor.timeline.insertElement({
-              placement: { mode: "explicit", trackId },
-              element: {
-                type: "image",
-                mediaId: added.id,
-                name: added.name,
-                duration,
-                startTime: dropTarget.xPosition,
-                trimStart: 0,
-                trimEnd: 0,
-                transform: {
-                  scale: 1,
-                  position: {
-                    x: 0,
-                    y: 0,
-                  },
-                  rotate: 0,
-                },
-                opacity: 1,
-              },
-            });
-          }
-        }
-      }
-    },
-    [activeProject, editor.media, editor.timeline, currentTime, zoomLevel],
-  );
+					if (added.type === "audio") {
+						editor.timeline.insertElement({
+							placement: { mode: "explicit", trackId },
+							element: {
+								type: "audio",
+								sourceType: "upload",
+								mediaId: added.id,
+								name: added.name,
+								duration,
+								startTime: dropTarget.xPosition,
+								trimStart: 0,
+								trimEnd: 0,
+								volume: 1,
+								buffer: new AudioBuffer({ length: 1, sampleRate: 44100 }),
+								muted: false,
+							},
+						});
+					} else if (added.type === "video") {
+						editor.timeline.insertElement({
+							placement: { mode: "explicit", trackId },
+							element: {
+								type: "video",
+								mediaId: added.id,
+								name: added.name,
+								duration,
+								startTime: dropTarget.xPosition,
+								trimStart: 0,
+								trimEnd: 0,
+								transform: {
+									scale: 1,
+									position: {
+										x: 0,
+										y: 0,
+									},
+									rotate: 0,
+								},
+								opacity: 1,
+							},
+						});
+					} else {
+						editor.timeline.insertElement({
+							placement: { mode: "explicit", trackId },
+							element: {
+								type: "image",
+								mediaId: added.id,
+								name: added.name,
+								duration,
+								startTime: dropTarget.xPosition,
+								trimStart: 0,
+								trimEnd: 0,
+								transform: {
+									scale: 1,
+									position: {
+										x: 0,
+										y: 0,
+									},
+									rotate: 0,
+								},
+								opacity: 1,
+							},
+						});
+					}
+				}
+			}
+		},
+		[activeProject, editor.media, editor.timeline, currentTime, zoomLevel],
+	);
 
-  const handleDrop = useCallback(
-    async (e: React.DragEvent) => {
-      e.preventDefault();
+	const handleDrop = useCallback(
+		async (e: React.DragEvent) => {
+			e.preventDefault();
 
-      const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });
-      const hasFiles = e.dataTransfer.files?.length > 0;
+			const hasAsset = hasDragData({ dataTransfer: e.dataTransfer });
+			const hasFiles = e.dataTransfer.files?.length > 0;
 
-      if (!hasAsset && !hasFiles) return;
+			if (!hasAsset && !hasFiles) return;
 
-      const currentTarget = dropTarget;
-      setIsDragOver(false);
-      setDropTarget(null);
-      setElementType(null);
+			const currentTarget = dropTarget;
+			setIsDragOver(false);
+			setDropTarget(null);
+			setElementType(null);
 
-      try {
-        if (hasAsset) {
-          if (!currentTarget) return;
-          const dragData = getDragData({ dataTransfer: e.dataTransfer });
-          if (!dragData) return;
+			try {
+				if (hasAsset) {
+					if (!currentTarget) return;
+					const dragData = getDragData({ dataTransfer: e.dataTransfer });
+					if (!dragData) return;
 
-          if (dragData.type === "text") {
-            executeTextDrop({ target: currentTarget, dragData });
-          } else if (dragData.type === "sticker") {
-            executeStickerDrop({ target: currentTarget, dragData });
-          } else {
-            executeMediaDrop({ target: currentTarget, dragData });
-          }
-        } else if (hasFiles) {
-          const rect = containerRef.current?.getBoundingClientRect();
-          if (!rect) return;
-          const mouseX = e.clientX - rect.left;
-          const mouseY = e.clientY - rect.top;
-          await executeFileDrop({
-            files: Array.from(e.dataTransfer.files),
-            mouseX,
-            mouseY,
-          });
-        }
-      } catch (err) {
-        console.error("Failed to process drop:", err);
-        toast.error("Failed to process drop");
-      }
-    },
-    [
-      dropTarget,
-      executeTextDrop,
-      executeStickerDrop,
-      executeMediaDrop,
-      executeFileDrop,
-    ],
-  );
+					if (dragData.type === "text") {
+						executeTextDrop({ target: currentTarget, dragData });
+					} else if (dragData.type === "sticker") {
+						executeStickerDrop({ target: currentTarget, dragData });
+					} else {
+						executeMediaDrop({ target: currentTarget, dragData });
+					}
+				} else if (hasFiles) {
+					const rect = containerRef.current?.getBoundingClientRect();
+					if (!rect) return;
+					const mouseX = e.clientX - rect.left;
+					const mouseY = e.clientY - rect.top;
+					await executeFileDrop({
+						files: Array.from(e.dataTransfer.files),
+						mouseX,
+						mouseY,
+					});
+				}
+			} catch (err) {
+				console.error("Failed to process drop:", err);
+				toast.error("Failed to process drop");
+			}
+		},
+		[
+			dropTarget,
+			executeTextDrop,
+			executeStickerDrop,
+			executeMediaDrop,
+			executeFileDrop,
+		],
+	);
 
-  return {
-    isDragOver,
-    dropTarget,
-    dragElementType,
-    dragProps: {
-      onDragEnter: handleDragEnter,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-    },
-  };
+	return {
+		isDragOver,
+		dropTarget,
+		dragElementType,
+		dragProps: {
+			onDragEnter: handleDragEnter,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+		},
+	};
 }
diff --git a/apps/web/src/hooks/timeline/use-timeline-playhead.ts b/apps/web/src/hooks/timeline/use-timeline-playhead.ts
index d673ff7b..ec32103a 100644
--- a/apps/web/src/hooks/timeline/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-playhead.ts
@@ -5,193 +5,193 @@ import { useEditor } from "../use-editor";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 interface UseTimelinePlayheadProps {
-  zoomLevel: number;
-  rulerRef: React.RefObject<HTMLDivElement>;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  playheadRef?: React.RefObject<HTMLDivElement>;
+	zoomLevel: number;
+	rulerRef: React.RefObject<HTMLDivElement>;
+	rulerScrollRef: React.RefObject<HTMLDivElement>;
+	tracksScrollRef: React.RefObject<HTMLDivElement>;
+	playheadRef?: React.RefObject<HTMLDivElement>;
 }
 
 export function useTimelinePlayhead({
-  zoomLevel,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  playheadRef,
+	zoomLevel,
+	rulerRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	playheadRef,
 }: 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 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();
 
-  // Playhead scrubbing state
-  const [isScrubbing, setIsScrubbing] = useState(false);
-  const [scrubTime, setScrubTime] = useState<number | null>(null);
+	// 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);
+	// Ruler drag detection state
+	const [isDraggingRuler, setIsDraggingRuler] = useState(false);
+	const [hasDraggedRuler, setHasDraggedRuler] = useState(false);
+	const lastMouseXRef = useRef<number>(0);
 
-  const playheadPosition =
-    isScrubbing && scrubTime !== null ? scrubTime : currentTime;
+	const playheadPosition =
+		isScrubbing && scrubTime !== null ? scrubTime : currentTime;
 
-  const handlePlayheadMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      event.preventDefault();
-      event.stopPropagation(); // prevent ruler drag from triggering
-      setIsScrubbing(true);
-      handleScrub(event);
-    },
-    [duration, zoomLevel],
-  );
+	const handlePlayheadMouseDown = useCallback(
+		(event: React.MouseEvent) => {
+			event.preventDefault();
+			event.stopPropagation(); // prevent ruler drag from triggering
+			setIsScrubbing(true);
+			handleScrub(event);
+		},
+		[duration, zoomLevel],
+	);
 
-  const handleRulerMouseDown = useCallback(
-    (event: React.MouseEvent) => {
-      // only handle left mouse button
-      if (event.button !== 0) return;
+	const handleRulerMouseDown = useCallback(
+		(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;
+			// don't interfere if clicking on the playhead itself
+			if (playheadRef?.current?.contains(event.target as Node)) return;
 
-      event.preventDefault();
-      setIsDraggingRuler(true);
-      setHasDraggedRuler(false);
+			event.preventDefault();
+			setIsDraggingRuler(true);
+			setHasDraggedRuler(false);
 
-      // start scrubbing immediately
-      setIsScrubbing(true);
-      handleScrub(event);
-    },
-    [duration, zoomLevel],
-  );
+			// start scrubbing immediately
+			setIsScrubbing(true);
+			handleScrub(event);
+		},
+		[duration, zoomLevel],
+	);
 
-  const handleScrub = useCallback(
-    (event: MouseEvent | React.MouseEvent) => {
-      const ruler = rulerRef.current;
-      if (!ruler) return;
-      const rect = ruler.getBoundingClientRect();
-      const rawX = event.clientX - rect.left;
+	const handleScrub = useCallback(
+		(event: MouseEvent | React.MouseEvent) => {
+			const ruler = rulerRef.current;
+			if (!ruler) return;
+			const rect = ruler.getBoundingClientRect();
+			const rawX = event.clientX - rect.left;
 
-      // get the timeline content width based on duration and zoom
-      const timelineContentWidth =
-        duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+			// get the timeline content width based on duration and zoom
+			const timelineContentWidth =
+				duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
 
-      // constrain x to be within the timeline content bounds
-      const x = Math.max(0, Math.min(timelineContentWidth, rawX));
+			// 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 });
+			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
+			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],
-  );
+			// store mouse position for auto-scrolling
+			lastMouseXRef.current = event.clientX;
+		},
+		[duration, zoomLevel, seek, rulerRef, activeProject.settings.fps],
+	);
 
-  useEdgeAutoScroll({
-    isActive: isScrubbing,
-    getMouseClientX: () => lastMouseXRef.current,
-    rulerScrollRef,
-    tracksScrollRef,
-    contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
-  });
+	useEdgeAutoScroll({
+		isActive: isScrubbing,
+		getMouseClientX: () => lastMouseXRef.current,
+		rulerScrollRef,
+		tracksScrollRef,
+		contentWidth: duration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel,
+	});
 
-  useEffect(() => {
-    if (!isScrubbing) return;
+	useEffect(() => {
+		if (!isScrubbing) return;
 
-    const onMouseMove = (event: MouseEvent) => {
-      handleScrub(event);
-      // mark that we've dragged if ruler drag is active
-      if (isDraggingRuler) {
-        setHasDraggedRuler(true);
-      }
-    };
+		const onMouseMove = (event: MouseEvent) => {
+			handleScrub(event);
+			// mark that we've dragged if ruler drag is active
+			if (isDraggingRuler) {
+				setHasDraggedRuler(true);
+			}
+		};
 
-    const onMouseUp = (event: MouseEvent) => {
-      setIsScrubbing(false);
-      if (scrubTime !== null) seek(scrubTime); // finalize seek
-      setScrubTime(null);
+		const onMouseUp = (event: MouseEvent) => {
+			setIsScrubbing(false);
+			if (scrubTime !== null) seek(scrubTime); // finalize seek
+			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);
-        }
-        setHasDraggedRuler(false);
-      }
-    };
+			// 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);
+				}
+				setHasDraggedRuler(false);
+			}
+		};
 
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
+		window.addEventListener("mousemove", onMouseMove);
+		window.addEventListener("mouseup", onMouseUp);
 
-    return () => {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [
-    isScrubbing,
-    scrubTime,
-    seek,
-    handleScrub,
-    isDraggingRuler,
-    hasDraggedRuler,
-    // edge auto scroll hook is independent
-  ]);
+		return () => {
+			window.removeEventListener("mousemove", onMouseMove);
+			window.removeEventListener("mouseup", onMouseUp);
+		};
+	}, [
+		isScrubbing,
+		scrubTime,
+		seek,
+		handleScrub,
+		isDraggingRuler,
+		hasDraggedRuler,
+		// edge auto scroll hook is independent
+	]);
 
-  useEffect(() => {
-    // only auto-scroll during playback, not during manual interactions
-    if (!editor.playback.getIsPlaying() || isScrubbing) return;
+	useEffect(() => {
+		// only auto-scroll during playback, not during manual interactions
+		if (!editor.playback.getIsPlaying() || isScrubbing) return;
 
-    const rulerViewport = rulerScrollRef.current;
-    const tracksViewport = tracksScrollRef.current;
-    if (!rulerViewport || !tracksViewport) return;
+		const rulerViewport = rulerScrollRef.current;
+		const tracksViewport = tracksScrollRef.current;
+		if (!rulerViewport || !tracksViewport) return;
 
-    const playheadPx =
-      playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-    const viewportWidth = rulerViewport.clientWidth;
-    const scrollMin = 0;
-    const scrollMax = rulerViewport.scrollWidth - viewportWidth;
+		const playheadPx =
+			playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+		const viewportWidth = rulerViewport.clientWidth;
+		const scrollMin = 0;
+		const scrollMax = rulerViewport.scrollWidth - viewportWidth;
 
-    // only auto-scroll if playhead is completely out of view (no buffer)
-    const needsScroll =
-      playheadPx < rulerViewport.scrollLeft ||
-      playheadPx > rulerViewport.scrollLeft + viewportWidth;
+		// only auto-scroll if playhead is completely out of view (no buffer)
+		const needsScroll =
+			playheadPx < rulerViewport.scrollLeft ||
+			playheadPx > rulerViewport.scrollLeft + viewportWidth;
 
-    if (needsScroll) {
-      // center the playhead in the viewport
-      const desiredScroll = Math.max(
-        scrollMin,
-        Math.min(scrollMax, playheadPx - viewportWidth / 2),
-      );
-      rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll;
-    }
-  }, [
-    playheadPosition,
-    duration,
-    zoomLevel,
-    rulerScrollRef,
-    tracksScrollRef,
-    isScrubbing,
-  ]);
+		if (needsScroll) {
+			// center the playhead in the viewport
+			const desiredScroll = Math.max(
+				scrollMin,
+				Math.min(scrollMax, playheadPx - viewportWidth / 2),
+			);
+			rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll;
+		}
+	}, [
+		playheadPosition,
+		duration,
+		zoomLevel,
+		rulerScrollRef,
+		tracksScrollRef,
+		isScrubbing,
+	]);
 
-  return {
-    playheadPosition,
-    handlePlayheadMouseDown,
-    handleRulerMouseDown,
-    isDraggingRuler,
-  };
+	return {
+		playheadPosition,
+		handlePlayheadMouseDown,
+		handleRulerMouseDown,
+		isDraggingRuler,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/use-timeline-seek.ts b/apps/web/src/hooks/timeline/use-timeline-seek.ts
index 39c83c0d..f859df44 100644
--- a/apps/web/src/hooks/timeline/use-timeline-seek.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-seek.ts
@@ -5,185 +5,185 @@ import { getSnappedSeekTime } from "@/lib/time";
 import { useEditor } from "../use-editor";
 
 interface UseTimelineSeekProps {
-  playheadRef: RefObject<HTMLDivElement>;
-  trackLabelsRef: RefObject<HTMLDivElement>;
-  rulerScrollRef: RefObject<HTMLDivElement>;
-  tracksScrollRef: RefObject<HTMLDivElement>;
-  zoomLevel: number;
-  duration: number;
-  isSelecting: boolean;
-  clearSelectedElements: () => void;
-  seek: (time: number) => void;
+	playheadRef: RefObject<HTMLDivElement>;
+	trackLabelsRef: RefObject<HTMLDivElement>;
+	rulerScrollRef: RefObject<HTMLDivElement>;
+	tracksScrollRef: RefObject<HTMLDivElement>;
+	zoomLevel: number;
+	duration: number;
+	isSelecting: boolean;
+	clearSelectedElements: () => void;
+	seek: (time: number) => void;
 }
 
 function resetMouseTracking({
-  mouseTrackingRef,
+	mouseTrackingRef,
 }: {
-  mouseTrackingRef: MutableRefObject<{
-    isMouseDown: boolean;
-    downX: number;
-    downY: number;
-    downTime: number;
-  }>;
+	mouseTrackingRef: MutableRefObject<{
+		isMouseDown: boolean;
+		downX: number;
+		downY: number;
+		downTime: number;
+	}>;
 }) {
-  mouseTrackingRef.current = {
-    isMouseDown: false,
-    downX: 0,
-    downY: 0,
-    downTime: 0,
-  };
+	mouseTrackingRef.current = {
+		isMouseDown: false,
+		downX: 0,
+		downY: 0,
+		downTime: 0,
+	};
 }
 
 function setMouseTracking({
-  mouseTrackingRef,
-  event,
+	mouseTrackingRef,
+	event,
 }: {
-  mouseTrackingRef: MutableRefObject<{
-    isMouseDown: boolean;
-    downX: number;
-    downY: number;
-    downTime: number;
-  }>;
-  event: React.MouseEvent;
+	mouseTrackingRef: MutableRefObject<{
+		isMouseDown: boolean;
+		downX: number;
+		downY: number;
+		downTime: number;
+	}>;
+	event: React.MouseEvent;
 }) {
-  mouseTrackingRef.current = {
-    isMouseDown: true,
-    downX: event.clientX,
-    downY: event.clientY,
-    downTime: event.timeStamp,
-  };
+	mouseTrackingRef.current = {
+		isMouseDown: true,
+		downX: event.clientX,
+		downY: event.clientY,
+		downTime: event.timeStamp,
+	};
 }
 
 export function useTimelineSeek({
-  playheadRef,
-  trackLabelsRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  zoomLevel,
-  duration,
-  isSelecting,
-  clearSelectedElements,
-  seek,
+	playheadRef,
+	trackLabelsRef,
+	rulerScrollRef,
+	tracksScrollRef,
+	zoomLevel,
+	duration,
+	isSelecting,
+	clearSelectedElements,
+	seek,
 }: UseTimelineSeekProps) {
-  const editor = useEditor();
-  const activeProject = editor.project.getActive();
+	const editor = useEditor();
+	const activeProject = editor.project.getActive();
 
-  const mouseTrackingRef = useRef({
-    isMouseDown: false,
-    downX: 0,
-    downY: 0,
-    downTime: 0,
-  });
+	const mouseTrackingRef = useRef({
+		isMouseDown: false,
+		downX: 0,
+		downY: 0,
+		downTime: 0,
+	});
 
-  const handleTracksMouseDown = useCallback((event: React.MouseEvent) => {
-    if (event.button !== 0) return;
-    setMouseTracking({ mouseTrackingRef, event });
-  }, []);
+	const handleTracksMouseDown = useCallback((event: React.MouseEvent) => {
+		if (event.button !== 0) return;
+		setMouseTracking({ mouseTrackingRef, event });
+	}, []);
 
-  const handleRulerMouseDown = useCallback((event: React.MouseEvent) => {
-    if (event.button !== 0) return;
-    setMouseTracking({ mouseTrackingRef, event });
-  }, []);
+	const handleRulerMouseDown = useCallback((event: React.MouseEvent) => {
+		if (event.button !== 0) return;
+		setMouseTracking({ mouseTrackingRef, event });
+	}, []);
 
-  const shouldProcessTimelineClick = useCallback(
-    ({ event }: { event: React.MouseEvent }) => {
-      const target = event.target as HTMLElement;
-      const { isMouseDown, downX, downY, downTime } = mouseTrackingRef.current;
-      const deltaX = Math.abs(event.clientX - downX);
-      const deltaY = Math.abs(event.clientY - downY);
-      const deltaTime = event.timeStamp - downTime;
-      const isPlayhead = !!playheadRef.current?.contains(target);
-      const isTrackLabels = !!trackLabelsRef.current?.contains(target);
-      const shouldBlockForDrag = deltaX > 5 || deltaY > 5 || deltaTime > 500;
+	const shouldProcessTimelineClick = useCallback(
+		({ event }: { event: React.MouseEvent }) => {
+			const target = event.target as HTMLElement;
+			const { isMouseDown, downX, downY, downTime } = mouseTrackingRef.current;
+			const deltaX = Math.abs(event.clientX - downX);
+			const deltaY = Math.abs(event.clientY - downY);
+			const deltaTime = event.timeStamp - downTime;
+			const isPlayhead = !!playheadRef.current?.contains(target);
+			const isTrackLabels = !!trackLabelsRef.current?.contains(target);
+			const shouldBlockForDrag = deltaX > 5 || deltaY > 5 || deltaTime > 500;
 
-      if (!isMouseDown) return false;
-      if (shouldBlockForDrag) return false;
-      if (isSelecting) return false;
-      if (isPlayhead) return false;
-      if (isTrackLabels) {
-        clearSelectedElements();
-        return false;
-      }
+			if (!isMouseDown) return false;
+			if (shouldBlockForDrag) return false;
+			if (isSelecting) return false;
+			if (isPlayhead) return false;
+			if (isTrackLabels) {
+				clearSelectedElements();
+				return false;
+			}
 
-      return true;
-    },
-    [isSelecting, clearSelectedElements, playheadRef, trackLabelsRef],
-  );
+			return true;
+		},
+		[isSelecting, clearSelectedElements, playheadRef, trackLabelsRef],
+	);
 
-  const handleTimelineSeek = useCallback(
-    ({
-      event,
-      source,
-    }: {
-      event: React.MouseEvent;
-      source: "ruler" | "tracks";
-    }) => {
-      const scrollContainer =
-        source === "ruler" ? rulerScrollRef.current : tracksScrollRef.current;
+	const handleTimelineSeek = useCallback(
+		({
+			event,
+			source,
+		}: {
+			event: React.MouseEvent;
+			source: "ruler" | "tracks";
+		}) => {
+			const scrollContainer =
+				source === "ruler" ? rulerScrollRef.current : tracksScrollRef.current;
 
-      if (!scrollContainer) return;
+			if (!scrollContainer) return;
 
-      const rect = scrollContainer.getBoundingClientRect();
-      const mouseX = event.clientX - rect.left;
-      const scrollLeft = scrollContainer.scrollLeft;
+			const rect = scrollContainer.getBoundingClientRect();
+			const mouseX = event.clientX - rect.left;
+			const scrollLeft = scrollContainer.scrollLeft;
 
-      const rawTime = Math.max(
-        0,
-        Math.min(
-          duration,
-          (mouseX + scrollLeft) /
-            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
-        ),
-      );
+			const rawTime = Math.max(
+				0,
+				Math.min(
+					duration,
+					(mouseX + scrollLeft) /
+						(TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel),
+				),
+			);
 
-      const projectFps = activeProject?.settings.fps || 30;
-      const time = getSnappedSeekTime({
-        rawTime,
-        duration,
-        fps: projectFps,
-      });
-      seek(time);
-    },
-    [
-      duration,
-      zoomLevel,
-      rulerScrollRef,
-      tracksScrollRef,
-      seek,
-      activeProject?.settings.fps,
-    ],
-  );
+			const projectFps = activeProject?.settings.fps || 30;
+			const time = getSnappedSeekTime({
+				rawTime,
+				duration,
+				fps: projectFps,
+			});
+			seek(time);
+		},
+		[
+			duration,
+			zoomLevel,
+			rulerScrollRef,
+			tracksScrollRef,
+			seek,
+			activeProject?.settings.fps,
+		],
+	);
 
-  const handleTracksClick = useCallback(
-    (event: React.MouseEvent) => {
-      const shouldProcess = shouldProcessTimelineClick({ event });
-      resetMouseTracking({ mouseTrackingRef });
+	const handleTracksClick = useCallback(
+		(event: React.MouseEvent) => {
+			const shouldProcess = shouldProcessTimelineClick({ event });
+			resetMouseTracking({ mouseTrackingRef });
 
-      if (shouldProcess) {
-        clearSelectedElements();
-        handleTimelineSeek({ event, source: "tracks" });
-      }
-    },
-    [shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],
-  );
+			if (shouldProcess) {
+				clearSelectedElements();
+				handleTimelineSeek({ event, source: "tracks" });
+			}
+		},
+		[shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],
+	);
 
-  const handleRulerClick = useCallback(
-    (event: React.MouseEvent) => {
-      const shouldProcess = shouldProcessTimelineClick({ event });
-      resetMouseTracking({ mouseTrackingRef });
+	const handleRulerClick = useCallback(
+		(event: React.MouseEvent) => {
+			const shouldProcess = shouldProcessTimelineClick({ event });
+			resetMouseTracking({ mouseTrackingRef });
 
-      if (shouldProcess) {
-        clearSelectedElements();
-        handleTimelineSeek({ event, source: "ruler" });
-      }
-    },
-    [shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],
-  );
+			if (shouldProcess) {
+				clearSelectedElements();
+				handleTimelineSeek({ event, source: "ruler" });
+			}
+		},
+		[shouldProcessTimelineClick, handleTimelineSeek, clearSelectedElements],
+	);
 
-  return {
-    handleTracksMouseDown,
-    handleTracksClick,
-    handleRulerMouseDown,
-    handleRulerClick,
-  };
+	return {
+		handleTracksMouseDown,
+		handleTracksClick,
+		handleRulerMouseDown,
+		handleRulerClick,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/use-timeline-snapping.ts b/apps/web/src/hooks/timeline/use-timeline-snapping.ts
index 200f062a..4cd6f775 100644
--- a/apps/web/src/hooks/timeline/use-timeline-snapping.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-snapping.ts
@@ -1,159 +1,159 @@
 import { useCallback } from "react";
-import { TimelineTrack } from "@/types/timeline";
+import type { TimelineTrack } from "@/types/timeline";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 export interface SnapPoint {
-  time: number;
-  type: "element-start" | "element-end" | "playhead";
-  elementId?: string;
-  trackId?: string;
+	time: number;
+	type: "element-start" | "element-end" | "playhead";
+	elementId?: string;
+	trackId?: string;
 }
 
 export interface SnapResult {
-  snappedTime: number;
-  snapPoint: SnapPoint | null;
-  snapDistance: number;
+	snappedTime: number;
+	snapPoint: SnapPoint | null;
+	snapDistance: number;
 }
 
 export interface UseTimelineSnappingOptions {
-  snapThreshold?: number;
-  enableElementSnapping?: boolean;
-  enablePlayheadSnapping?: boolean;
+	snapThreshold?: number;
+	enableElementSnapping?: boolean;
+	enablePlayheadSnapping?: boolean;
 }
 
 export function useTimelineSnapping({
-  snapThreshold = 10,
-  enableElementSnapping = true,
-  enablePlayheadSnapping = true,
+	snapThreshold = 10,
+	enableElementSnapping = true,
+	enablePlayheadSnapping = true,
 }: UseTimelineSnappingOptions = {}) {
-  const findSnapPoints = useCallback(
-    ({
-      tracks,
-      playheadTime,
-      excludeElementId,
-    }: {
-      tracks: Array<TimelineTrack>;
-      playheadTime: number;
-      excludeElementId?: string;
-    }): SnapPoint[] => {
-      const snapPoints: SnapPoint[] = [];
+	const findSnapPoints = useCallback(
+		({
+			tracks,
+			playheadTime,
+			excludeElementId,
+		}: {
+			tracks: Array<TimelineTrack>;
+			playheadTime: number;
+			excludeElementId?: string;
+		}): SnapPoint[] => {
+			const snapPoints: SnapPoint[] = [];
 
-      if (enableElementSnapping) {
-        for (const track of tracks) {
-          for (const element of track.elements) {
-            if (element.id === excludeElementId) continue;
+			if (enableElementSnapping) {
+				for (const track of tracks) {
+					for (const element of track.elements) {
+						if (element.id === excludeElementId) continue;
 
-            const elementStart = element.startTime;
-            const elementEnd = element.startTime + element.duration;
+						const elementStart = element.startTime;
+						const elementEnd = element.startTime + element.duration;
 
-            snapPoints.push(
-              {
-                time: elementStart,
-                type: "element-start",
-                elementId: element.id,
-                trackId: track.id,
-              },
-              {
-                time: elementEnd,
-                type: "element-end",
-                elementId: element.id,
-                trackId: track.id,
-              },
-            );
-          }
-        }
-      }
+						snapPoints.push(
+							{
+								time: elementStart,
+								type: "element-start",
+								elementId: element.id,
+								trackId: track.id,
+							},
+							{
+								time: elementEnd,
+								type: "element-end",
+								elementId: element.id,
+								trackId: track.id,
+							},
+						);
+					}
+				}
+			}
 
-      if (enablePlayheadSnapping) {
-        snapPoints.push({
-          time: playheadTime,
-          type: "playhead",
-        });
-      }
+			if (enablePlayheadSnapping) {
+				snapPoints.push({
+					time: playheadTime,
+					type: "playhead",
+				});
+			}
 
-      return snapPoints;
-    },
-    [enableElementSnapping, enablePlayheadSnapping],
-  );
+			return snapPoints;
+		},
+		[enableElementSnapping, enablePlayheadSnapping],
+	);
 
-  const snapToNearestPoint = useCallback(
-    ({
-      targetTime,
-      snapPoints,
-      zoomLevel,
-    }: {
-      targetTime: number;
-      snapPoints: Array<SnapPoint>;
-      zoomLevel: number;
-    }): SnapResult => {
-      const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-      const thresholdInSeconds = snapThreshold / pixelsPerSecond;
+	const snapToNearestPoint = useCallback(
+		({
+			targetTime,
+			snapPoints,
+			zoomLevel,
+		}: {
+			targetTime: number;
+			snapPoints: Array<SnapPoint>;
+			zoomLevel: number;
+		}): SnapResult => {
+			const pixelsPerSecond = TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
+			const thresholdInSeconds = snapThreshold / pixelsPerSecond;
 
-      let closestSnapPoint: SnapPoint | null = null;
-      let closestDistance = Infinity;
+			let closestSnapPoint: SnapPoint | null = null;
+			let closestDistance = Infinity;
 
-      for (const snapPoint of snapPoints) {
-        const distance = Math.abs(targetTime - snapPoint.time);
-        if (distance < thresholdInSeconds && distance < closestDistance) {
-          closestDistance = distance;
-          closestSnapPoint = snapPoint;
-        }
-      }
+			for (const snapPoint of snapPoints) {
+				const distance = Math.abs(targetTime - snapPoint.time);
+				if (distance < thresholdInSeconds && distance < closestDistance) {
+					closestDistance = distance;
+					closestSnapPoint = snapPoint;
+				}
+			}
 
-      return {
-        snappedTime: closestSnapPoint ? closestSnapPoint.time : targetTime,
-        snapPoint: closestSnapPoint,
-        snapDistance: closestDistance,
-      };
-    },
-    [snapThreshold],
-  );
+			return {
+				snappedTime: closestSnapPoint ? closestSnapPoint.time : targetTime,
+				snapPoint: closestSnapPoint,
+				snapDistance: closestDistance,
+			};
+		},
+		[snapThreshold],
+	);
 
-  const snapElementEdge = useCallback(
-    ({
-      targetTime,
-      elementDuration,
-      tracks,
-      playheadTime,
-      zoomLevel,
-      excludeElementId,
-      snapToStart = true,
-    }: {
-      targetTime: number;
-      elementDuration: number;
-      tracks: Array<TimelineTrack>;
-      playheadTime: number;
-      zoomLevel: number;
-      excludeElementId?: string;
-      snapToStart?: boolean;
-    }): SnapResult => {
-      const snapPoints = findSnapPoints({
-        tracks,
-        playheadTime,
-        excludeElementId,
-      });
+	const snapElementEdge = useCallback(
+		({
+			targetTime,
+			elementDuration,
+			tracks,
+			playheadTime,
+			zoomLevel,
+			excludeElementId,
+			snapToStart = true,
+		}: {
+			targetTime: number;
+			elementDuration: number;
+			tracks: Array<TimelineTrack>;
+			playheadTime: number;
+			zoomLevel: number;
+			excludeElementId?: string;
+			snapToStart?: boolean;
+		}): SnapResult => {
+			const snapPoints = findSnapPoints({
+				tracks,
+				playheadTime,
+				excludeElementId,
+			});
 
-      const effectiveTargetTime = snapToStart
-        ? targetTime
-        : targetTime + elementDuration;
-      const snapResult = snapToNearestPoint({
-        targetTime: effectiveTargetTime,
-        snapPoints,
-        zoomLevel,
-      });
+			const effectiveTargetTime = snapToStart
+				? targetTime
+				: targetTime + elementDuration;
+			const snapResult = snapToNearestPoint({
+				targetTime: effectiveTargetTime,
+				snapPoints,
+				zoomLevel,
+			});
 
-      if (!snapToStart && snapResult.snapPoint) {
-        snapResult.snappedTime = snapResult.snappedTime - elementDuration;
-      }
+			if (!snapToStart && snapResult.snapPoint) {
+				snapResult.snappedTime = snapResult.snappedTime - elementDuration;
+			}
 
-      return snapResult;
-    },
-    [findSnapPoints, snapToNearestPoint],
-  );
+			return snapResult;
+		},
+		[findSnapPoints, snapToNearestPoint],
+	);
 
-  return {
-    snapElementEdge,
-    findSnapPoints,
-    snapToNearestPoint,
-  };
+	return {
+		snapElementEdge,
+		findSnapPoints,
+		snapToNearestPoint,
+	};
 }
diff --git a/apps/web/src/hooks/timeline/use-timeline-zoom.ts b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
index cc2d8832..3684c0b4 100644
--- a/apps/web/src/hooks/timeline/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/timeline/use-timeline-zoom.ts
@@ -1,90 +1,90 @@
 import {
-  useState,
-  useCallback,
-  useEffect,
-  type RefObject,
-  type WheelEvent as ReactWheelEvent,
+	type WheelEvent as ReactWheelEvent,
+	type RefObject,
+	useCallback,
+	useEffect,
+	useState,
 } from "react";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 interface UseTimelineZoomProps {
-  containerRef: RefObject<HTMLDivElement>;
-  isInTimeline?: boolean;
-  minZoom?: number;
+	containerRef: RefObject<HTMLDivElement>;
+	isInTimeline?: boolean;
+	minZoom?: number;
 }
 
 interface UseTimelineZoomReturn {
-  zoomLevel: number;
-  setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;
-  handleWheel: (event: ReactWheelEvent) => void;
+	zoomLevel: number;
+	setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;
+	handleWheel: (event: ReactWheelEvent) => void;
 }
 
 export function useTimelineZoom({
-  containerRef,
-  isInTimeline = false,
-  minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
+	containerRef,
+	isInTimeline = false,
+	minZoom = TIMELINE_CONSTANTS.ZOOM_MIN,
 }: UseTimelineZoomProps): UseTimelineZoomReturn {
-  const [zoomLevel, setZoomLevel] = useState(1);
+	const [zoomLevel, setZoomLevel] = useState(1);
 
-  const handleWheel = useCallback(
-    (event: ReactWheelEvent) => {
-      const isZoomGesture = event.ctrlKey || event.metaKey;
-      const isHorizontalScrollGesture =
-        event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY);
+	const handleWheel = useCallback(
+		(event: ReactWheelEvent) => {
+			const isZoomGesture = event.ctrlKey || event.metaKey;
+			const isHorizontalScrollGesture =
+				event.shiftKey || Math.abs(event.deltaX) > Math.abs(event.deltaY);
 
-      if (isHorizontalScrollGesture) {
-        return;
-      }
+			if (isHorizontalScrollGesture) {
+				return;
+			}
 
-      // pinch-zoom (ctrl/meta + wheel)
-      if (isZoomGesture) {
-        const zoomMultiplier = event.deltaY > 0 ? 1 / 1.1 : 1.1;
-        setZoomLevel((prev) => {
-          const nextZoom = Math.max(
-            minZoom,
-            Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, prev * zoomMultiplier),
-          );
-          return nextZoom;
-        });
-        // for horizontal scrolling (when shift is held or horizontal wheel movement),
-        // let the event bubble up to allow ScrollArea to handle it
-        return;
-      }
-    },
-    [minZoom],
-  );
+			// pinch-zoom (ctrl/meta + wheel)
+			if (isZoomGesture) {
+				const zoomMultiplier = event.deltaY > 0 ? 1 / 1.1 : 1.1;
+				setZoomLevel((prev) => {
+					const nextZoom = Math.max(
+						minZoom,
+						Math.min(TIMELINE_CONSTANTS.ZOOM_MAX, prev * zoomMultiplier),
+					);
+					return nextZoom;
+				});
+				// for horizontal scrolling (when shift is held or horizontal wheel movement),
+				// let the event bubble up to allow ScrollArea to handle it
+				return;
+			}
+		},
+		[minZoom],
+	);
 
-  useEffect(() => {
-    setZoomLevel((prev) => (prev < minZoom ? minZoom : prev));
-  }, [minZoom]);
+	useEffect(() => {
+		setZoomLevel((prev) => (prev < minZoom ? minZoom : prev));
+	}, [minZoom]);
 
-  // prevent browser zoom in the timeline
-  useEffect(() => {
-    const preventZoom = (event: WheelEvent) => {
-      const isZoomKeyPressed = event.ctrlKey || event.metaKey;
-      const isInContainer = containerRef.current?.contains(
-        event.target as Node,
-      );
-      const shouldPrevent =
-        isInTimeline && isZoomKeyPressed && Boolean(isInContainer);
-      if (shouldPrevent) {
-        event.preventDefault();
-      }
-    };
+	// prevent browser zoom in the timeline
+	useEffect(() => {
+		const preventZoom = (event: WheelEvent) => {
+			const isZoomKeyPressed = event.ctrlKey || event.metaKey;
+			const isInContainer = containerRef.current?.contains(
+				event.target as Node,
+			);
+			const shouldPrevent =
+				isInTimeline && isZoomKeyPressed && Boolean(isInContainer);
+			if (shouldPrevent) {
+				event.preventDefault();
+			}
+		};
 
-    document.addEventListener("wheel", preventZoom, {
-      passive: false,
-      capture: true,
-    });
+		document.addEventListener("wheel", preventZoom, {
+			passive: false,
+			capture: true,
+		});
 
-    return () => {
-      document.removeEventListener("wheel", preventZoom, { capture: true });
-    };
-  }, [isInTimeline, containerRef]);
+		return () => {
+			document.removeEventListener("wheel", preventZoom, { capture: true });
+		};
+	}, [isInTimeline, containerRef]);
 
-  return {
-    zoomLevel,
-    setZoomLevel,
-    handleWheel,
-  };
+	return {
+		zoomLevel,
+		setZoomLevel,
+		handleWheel,
+	};
 }
diff --git a/apps/web/src/hooks/use-editor.ts b/apps/web/src/hooks/use-editor.ts
index ab0db120..03b910d1 100644
--- a/apps/web/src/hooks/use-editor.ts
+++ b/apps/web/src/hooks/use-editor.ts
@@ -1,22 +1,38 @@
-import { useEffect, useMemo, useReducer } from "react";
+import { useCallback, useMemo, useRef, useSyncExternalStore } from "react";
 import { EditorCore } from "@/core";
 
 export function useEditor(): EditorCore {
-  const editor = useMemo(() => EditorCore.getInstance(), []);
-  const [, forceUpdate] = useReducer((x) => x + 1, 0);
+	const editor = useMemo(() => EditorCore.getInstance(), []);
+	const versionRef = useRef(0);
 
-  useEffect(() => {
-    const unsubscribers = [
-      editor.playback.subscribe(forceUpdate),
-      editor.timeline.subscribe(forceUpdate),
-      editor.scenes.subscribe(forceUpdate),
-      editor.project.subscribe(forceUpdate),
-      editor.media.subscribe(forceUpdate),
-      editor.renderer.subscribe(forceUpdate),
-    ];
+	const subscribe = useCallback(
+		(onStoreChange: () => void) => {
+			const handleStoreChange = () => {
+				versionRef.current += 1;
+				onStoreChange();
+			};
 
-    return () => unsubscribers.forEach((unsub) => unsub());
-  }, [editor]);
+			const unsubscribers = [
+				editor.playback.subscribe(handleStoreChange),
+				editor.timeline.subscribe(handleStoreChange),
+				editor.scenes.subscribe(handleStoreChange),
+				editor.project.subscribe(handleStoreChange),
+				editor.media.subscribe(handleStoreChange),
+				editor.renderer.subscribe(handleStoreChange),
+			];
 
-  return editor;
+			return () => {
+				for (const unsubscribe of unsubscribers) {
+					unsubscribe();
+				}
+			};
+		},
+		[editor],
+	);
+
+	const getSnapshot = useCallback(() => versionRef.current, []);
+
+	useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+
+	return editor;
 }
diff --git a/apps/web/src/hooks/use-file-upload.ts b/apps/web/src/hooks/use-file-upload.ts
index 8e992407..19badd98 100644
--- a/apps/web/src/hooks/use-file-upload.ts
+++ b/apps/web/src/hooks/use-file-upload.ts
@@ -2,102 +2,102 @@ import { useState, useRef } from "react";
 import { hasDragData } from "@/lib/drag-data";
 
 interface UseFileUploadOptions {
-  accept?: string;
-  multiple?: boolean;
-  onFilesSelected?: (files: FileList) => void;
+	accept?: string;
+	multiple?: boolean;
+	onFilesSelected?: (files: FileList) => void;
 }
 
 function containsFiles(dataTransfer: DataTransfer): boolean {
-  return !hasDragData({ dataTransfer }) && dataTransfer.types.includes("Files");
+	return !hasDragData({ dataTransfer }) && dataTransfer.types.includes("Files");
 }
 
 export function useFileUpload({
-  accept,
-  multiple,
-  onFilesSelected,
+	accept,
+	multiple,
+	onFilesSelected,
 }: UseFileUploadOptions = {}) {
-  const [isDragOver, setIsDragOver] = useState(false);
-  const dragCounterRef = useRef(0);
-  const inputRef = useRef<HTMLInputElement>(null);
+	const [isDragOver, setIsDragOver] = useState(false);
+	const dragCounterRef = useRef(0);
+	const inputRef = useRef<HTMLInputElement>(null);
 
-  function openFilePicker() {
-    if (!inputRef.current) return;
+	function openFilePicker() {
+		if (!inputRef.current) return;
 
-    inputRef.current.accept = accept || "*";
-    inputRef.current.multiple = multiple || false;
-    inputRef.current.click();
-  }
+		inputRef.current.accept = accept || "*";
+		inputRef.current.multiple = multiple || false;
+		inputRef.current.click();
+	}
 
-  function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
-    const files = event.target.files;
-    if (files && files.length > 0 && onFilesSelected) {
-      onFilesSelected(files);
-    }
+	function handleFileChange(event: React.ChangeEvent<HTMLInputElement>) {
+		const files = event.target.files;
+		if (files && files.length > 0 && onFilesSelected) {
+			onFilesSelected(files);
+		}
 
-    if (event.target) {
-      event.target.value = "";
-    }
-  }
+		if (event.target) {
+			event.target.value = "";
+		}
+	}
 
-  function handleDragEnter(e: React.DragEvent) {
-    e.preventDefault();
+	function handleDragEnter(e: React.DragEvent) {
+		e.preventDefault();
 
-    if (!containsFiles(e.dataTransfer)) return;
+		if (!containsFiles(e.dataTransfer)) return;
 
-    dragCounterRef.current += 1;
-    setIsDragOver(true);
-  }
+		dragCounterRef.current += 1;
+		setIsDragOver(true);
+	}
 
-  function handleDragOver(e: React.DragEvent) {
-    e.preventDefault();
+	function handleDragOver(e: React.DragEvent) {
+		e.preventDefault();
 
-    if (!containsFiles(e.dataTransfer)) return;
-  }
+		if (!containsFiles(e.dataTransfer)) return;
+	}
 
-  function handleDragLeave(e: React.DragEvent) {
-    e.preventDefault();
+	function handleDragLeave(e: React.DragEvent) {
+		e.preventDefault();
 
-    if (!containsFiles(e.dataTransfer)) return;
+		if (!containsFiles(e.dataTransfer)) return;
 
-    dragCounterRef.current -= 1;
-    if (dragCounterRef.current === 0) {
-      setIsDragOver(false);
-    }
-  }
+		dragCounterRef.current -= 1;
+		if (dragCounterRef.current === 0) {
+			setIsDragOver(false);
+		}
+	}
 
-  function handleDrop(e: React.DragEvent) {
-    e.preventDefault();
-    setIsDragOver(false);
-    dragCounterRef.current = 0;
+	function handleDrop(e: React.DragEvent) {
+		e.preventDefault();
+		setIsDragOver(false);
+		dragCounterRef.current = 0;
 
-    if (onFilesSelected && containsFiles(e.dataTransfer)) {
-      const files = e.dataTransfer.files;
-      const shouldUseMultiple = multiple ?? false;
+		if (onFilesSelected && containsFiles(e.dataTransfer)) {
+			const files = e.dataTransfer.files;
+			const shouldUseMultiple = multiple ?? false;
 
-      if (shouldUseMultiple) {
-        onFilesSelected(files);
-      } else if (files.length > 0) {
-        const dataTransfer = new DataTransfer();
-        dataTransfer.items.add(files[0]);
-        onFilesSelected(dataTransfer.files);
-      }
-    }
-  }
+			if (shouldUseMultiple) {
+				onFilesSelected(files);
+			} else if (files.length > 0) {
+				const dataTransfer = new DataTransfer();
+				dataTransfer.items.add(files[0]);
+				onFilesSelected(dataTransfer.files);
+			}
+		}
+	}
 
-  return {
-    isDragOver,
-    openFilePicker,
-    fileInputProps: {
-      ref: inputRef,
-      type: "file",
-      style: { display: "none" },
-      onChange: handleFileChange,
-    },
-    dragProps: {
-      onDragEnter: handleDragEnter,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-    },
-  };
+	return {
+		isDragOver,
+		openFilePicker,
+		fileInputProps: {
+			ref: inputRef,
+			type: "file",
+			style: { display: "none" },
+			onChange: handleFileChange,
+		},
+		dragProps: {
+			onDragEnter: handleDragEnter,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDrop: handleDrop,
+		},
+	};
 }
diff --git a/apps/web/src/hooks/use-infinite-scroll.ts b/apps/web/src/hooks/use-infinite-scroll.ts
index 87b189ed..8d6e5fcc 100644
--- a/apps/web/src/hooks/use-infinite-scroll.ts
+++ b/apps/web/src/hooks/use-infinite-scroll.ts
@@ -1,35 +1,35 @@
 import { useRef, useCallback } from "react";
 
 interface UseInfiniteScrollOptions {
-  onLoadMore: () => void;
-  hasMore: boolean;
-  isLoading: boolean;
-  threshold?: number;
-  enabled?: boolean;
+	onLoadMore: () => void;
+	hasMore: boolean;
+	isLoading: boolean;
+	threshold?: number;
+	enabled?: boolean;
 }
 
 export function useInfiniteScroll({
-  onLoadMore,
-  hasMore,
-  isLoading,
-  threshold = 200,
-  enabled = true,
+	onLoadMore,
+	hasMore,
+	isLoading,
+	threshold = 200,
+	enabled = true,
 }: UseInfiniteScrollOptions) {
-  const scrollAreaRef = useRef<HTMLDivElement>(null);
+	const scrollAreaRef = useRef<HTMLDivElement>(null);
 
-  const handleScroll = useCallback(
-    (event: React.UIEvent<HTMLDivElement>) => {
-      if (!enabled) return;
+	const handleScroll = useCallback(
+		(event: React.UIEvent<HTMLDivElement>) => {
+			if (!enabled) return;
 
-      const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
-      const nearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
+			const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+			const nearBottom = scrollTop + clientHeight >= scrollHeight - threshold;
 
-      if (nearBottom && hasMore && !isLoading) {
-        onLoadMore();
-      }
-    },
-    [onLoadMore, hasMore, isLoading, threshold, enabled],
-  );
+			if (nearBottom && hasMore && !isLoading) {
+				onLoadMore();
+			}
+		},
+		[onLoadMore, hasMore, isLoading, threshold, enabled],
+	);
 
-  return { scrollAreaRef, handleScroll };
+	return { scrollAreaRef, handleScroll };
 }
diff --git a/apps/web/src/hooks/use-keybindings.ts b/apps/web/src/hooks/use-keybindings.ts
index 6617a2ff..6b33e166 100644
--- a/apps/web/src/hooks/use-keybindings.ts
+++ b/apps/web/src/hooks/use-keybindings.ts
@@ -8,67 +8,67 @@ import { useKeybindingsStore } from "@/stores/keybindings-store";
  * the appropriate actions based on keybindings
  */
 export function useKeybindingsListener() {
-  const { keybindings, getKeybindingString, keybindingsEnabled, isRecording } =
-    useKeybindingsStore();
+	const { keybindings, getKeybindingString, keybindingsEnabled, isRecording } =
+		useKeybindingsStore();
 
-  useEffect(() => {
-    const handleKeyDown = (ev: KeyboardEvent) => {
-      // Do not check keybinds if the mode is disabled
-      if (!keybindingsEnabled) return;
-      // ignore key events if user is changing keybindings
-      if (isRecording) return;
+	useEffect(() => {
+		const handleKeyDown = (ev: KeyboardEvent) => {
+			// Do not check keybinds if the mode is disabled
+			if (!keybindingsEnabled) return;
+			// ignore key events if user is changing keybindings
+			if (isRecording) return;
 
-      const binding = getKeybindingString(ev);
-      if (!binding) return;
+			const binding = getKeybindingString(ev);
+			if (!binding) return;
 
-      const boundAction = keybindings[binding];
-      if (!boundAction) return;
+			const boundAction = keybindings[binding];
+			if (!boundAction) return;
 
-      const activeElement = document.activeElement;
-      const isTextInput =
-        activeElement &&
-        (activeElement.tagName === "INPUT" ||
-          activeElement.tagName === "TEXTAREA" ||
-          (activeElement as HTMLElement).isContentEditable);
+			const activeElement = document.activeElement;
+			const isTextInput =
+				activeElement &&
+				(activeElement.tagName === "INPUT" ||
+					activeElement.tagName === "TEXTAREA" ||
+					(activeElement as HTMLElement).isContentEditable);
 
-      if (isTextInput) return;
+			if (isTextInput) return;
 
-      ev.preventDefault();
+			ev.preventDefault();
 
-      // Handle actions with default arguments
-      let actionArgs: any;
+			// Handle actions with default arguments
+			let actionArgs: any;
 
-      if (boundAction === "seek-forward") {
-        actionArgs = { seconds: 1 };
-      } else if (boundAction === "seek-backward") {
-        actionArgs = { seconds: 1 };
-      } else if (boundAction === "jump-forward") {
-        actionArgs = { seconds: 5 };
-      } else if (boundAction === "jump-backward") {
-        actionArgs = { seconds: 5 };
-      }
+			if (boundAction === "seek-forward") {
+				actionArgs = { seconds: 1 };
+			} else if (boundAction === "seek-backward") {
+				actionArgs = { seconds: 1 };
+			} else if (boundAction === "jump-forward") {
+				actionArgs = { seconds: 5 };
+			} else if (boundAction === "jump-backward") {
+				actionArgs = { seconds: 5 };
+			}
 
-      invokeAction(boundAction, actionArgs, "keypress");
-    };
+			invokeAction(boundAction, actionArgs, "keypress");
+		};
 
-    document.addEventListener("keydown", handleKeyDown);
+		document.addEventListener("keydown", handleKeyDown);
 
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [keybindings, getKeybindingString, keybindingsEnabled, isRecording]);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [keybindings, getKeybindingString, keybindingsEnabled, isRecording]);
 }
 
 /**
  * This composable allows for the UI component to be disabled if the component in question is mounted
  */
 export function useKeybindingDisabler() {
-  const { disableKeybindings, enableKeybindings } = useKeybindingsStore();
+	const { disableKeybindings, enableKeybindings } = useKeybindingsStore();
 
-  return {
-    disableKeybindings,
-    enableKeybindings,
-  };
+	return {
+		disableKeybindings,
+		enableKeybindings,
+	};
 }
 
 // Export the bindings for backward compatibility
diff --git a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
index 59678ca5..80f7f07a 100644
--- a/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
+++ b/apps/web/src/hooks/use-keyboard-shortcuts-help.ts
@@ -4,79 +4,79 @@ import { useMemo } from "react";
 import { useKeybindingsStore } from "@/stores/keybindings-store";
 import { ACTIONS, type TAction } from "@/lib/actions";
 import {
-  getPlatformAlternateKey,
-  getPlatformSpecialKey,
+	getPlatformAlternateKey,
+	getPlatformSpecialKey,
 } from "@/utils/platform";
 
 export interface KeyboardShortcut {
-  id: string;
-  keys: string[];
-  description: string;
-  category: string;
-  action: TAction;
-  icon?: React.ReactNode;
+	id: string;
+	keys: string[];
+	description: string;
+	category: string;
+	action: TAction;
+	icon?: React.ReactNode;
 }
 
 function formatKey({ key }: { key: string }): string {
-  return key
-    .replace("ctrl", getPlatformSpecialKey())
-    .replace("alt", getPlatformAlternateKey())
-    .replace("shift", "Shift")
-    .replace("left", "←")
-    .replace("right", "→")
-    .replace("up", "↑")
-    .replace("down", "↓")
-    .replace("space", "Space")
-    .replace("home", "Home")
-    .replace("enter", "Enter")
-    .replace("end", "End")
-    .replace("delete", "Delete")
-    .replace("backspace", "Backspace")
-    .replace("-", "+");
+	return key
+		.replace("ctrl", getPlatformSpecialKey())
+		.replace("alt", getPlatformAlternateKey())
+		.replace("shift", "Shift")
+		.replace("left", "←")
+		.replace("right", "→")
+		.replace("up", "↑")
+		.replace("down", "↓")
+		.replace("space", "Space")
+		.replace("home", "Home")
+		.replace("enter", "Enter")
+		.replace("end", "End")
+		.replace("delete", "Delete")
+		.replace("backspace", "Backspace")
+		.replace("-", "+");
 }
 
 export function useKeyboardShortcutsHelp() {
-  const { keybindings } = useKeybindingsStore();
+	const { keybindings } = useKeybindingsStore();
 
-  const shortcuts = useMemo(() => {
-    const result: KeyboardShortcut[] = [];
-    const actionToKeys: Record<string, string[]> = {};
+	const shortcuts = useMemo(() => {
+		const result: KeyboardShortcut[] = [];
+		const actionToKeys: Record<string, string[]> = {};
 
-    for (const [key, action] of Object.entries(keybindings)) {
-      if (action) {
-        if (!actionToKeys[action]) {
-          actionToKeys[action] = [];
-        }
-        actionToKeys[action].push(formatKey({ key }));
-      }
-    }
+		for (const [key, action] of Object.entries(keybindings)) {
+			if (action) {
+				if (!actionToKeys[action]) {
+					actionToKeys[action] = [];
+				}
+				actionToKeys[action].push(formatKey({ key }));
+			}
+		}
 
-    for (const [actionId, keys] of Object.entries(actionToKeys)) {
-      if (!isAction(actionId)) continue;
+		for (const [actionId, keys] of Object.entries(actionToKeys)) {
+			if (!isAction(actionId)) continue;
 
-      const actionDef = ACTIONS[actionId];
-      result.push({
-        id: actionId,
-        keys,
-        description: actionDef.description,
-        category: actionDef.category,
-        action: actionId,
-      });
-    }
+			const actionDef = ACTIONS[actionId];
+			result.push({
+				id: actionId,
+				keys,
+				description: actionDef.description,
+				category: actionDef.category,
+				action: actionId,
+			});
+		}
 
-    return result.sort((a, b) => {
-      if (a.category !== b.category) {
-        return a.category.localeCompare(b.category);
-      }
-      return a.description.localeCompare(b.description);
-    });
-  }, [keybindings]);
+		return result.sort((a, b) => {
+			if (a.category !== b.category) {
+				return a.category.localeCompare(b.category);
+			}
+			return a.description.localeCompare(b.description);
+		});
+	}, [keybindings]);
 
-  return {
-    shortcuts,
-  };
+	return {
+		shortcuts,
+	};
 }
 
 function isAction(id: string): id is TAction {
-  return id in ACTIONS;
+	return id in ACTIONS;
 }
diff --git a/apps/web/src/hooks/use-mobile.ts b/apps/web/src/hooks/use-mobile.ts
new file mode 100644
index 00000000..d6a67b93
--- /dev/null
+++ b/apps/web/src/hooks/use-mobile.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+	useEffect(() => {
+		const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}
diff --git a/apps/web/src/hooks/use-raf-loop.ts b/apps/web/src/hooks/use-raf-loop.ts
index 99a3fa27..54b1e662 100644
--- a/apps/web/src/hooks/use-raf-loop.ts
+++ b/apps/web/src/hooks/use-raf-loop.ts
@@ -1,20 +1,20 @@
 import { useEffect, useRef } from "react";
 
 export function useRafLoop(callback: ({ time }: { time: number }) => void) {
-  const requestRef = useRef<number>(0);
-  const previousTimeRef = useRef<number>(0);
+	const requestRef = useRef<number>(0);
+	const previousTimeRef = useRef<number | null>(null);
 
-  useEffect(() => {
-    const loop = ({ time }: { time: number }) => {
-      if (previousTimeRef.current !== undefined) {
-        const deltaTime = time - previousTimeRef.current;
-        callback({ time: deltaTime });
-      }
-      previousTimeRef.current = time;
-      requestRef.current = requestAnimationFrame((time) => loop({ time }));
-    };
+	useEffect(() => {
+		const loop = ({ time }: { time: number }) => {
+			if (previousTimeRef.current !== null) {
+				const deltaTime = time - previousTimeRef.current;
+				callback({ time: deltaTime });
+			}
+			previousTimeRef.current = time;
+			requestRef.current = requestAnimationFrame((time) => loop({ time }));
+		};
 
-    requestRef.current = requestAnimationFrame((time) => loop({ time }));
-    return () => cancelAnimationFrame(requestRef.current);
-  }, [callback]);
+		requestRef.current = requestAnimationFrame((time) => loop({ time }));
+		return () => cancelAnimationFrame(requestRef.current);
+	}, [callback]);
 }
diff --git a/apps/web/src/hooks/use-reveal-item.ts b/apps/web/src/hooks/use-reveal-item.ts
index 3aa3e3d4..5004f60c 100644
--- a/apps/web/src/hooks/use-reveal-item.ts
+++ b/apps/web/src/hooks/use-reveal-item.ts
@@ -1,36 +1,36 @@
 import { useEffect, useState, useRef } from "react";
 
 export function useRevealItem(
-  highlightId: string | null,
-  onClearHighlight: () => void,
-  highlightDuration = 1000,
+	highlightId: string | null,
+	onClearHighlight: () => void,
+	highlightDuration = 1000,
 ) {
-  const [highlightedId, setHighlightedId] = useState<string | null>(null);
-  const elementRefs = useRef<Map<string, HTMLElement>>(new Map());
+	const [highlightedId, setHighlightedId] = useState<string | null>(null);
+	const elementRefs = useRef<Map<string, HTMLElement>>(new Map());
 
-  const registerElement = (id: string, element: HTMLElement | null) => {
-    if (element) {
-      elementRefs.current.set(id, element);
-    } else {
-      elementRefs.current.delete(id);
-    }
-  };
+	const registerElement = (id: string, element: HTMLElement | null) => {
+		if (element) {
+			elementRefs.current.set(id, element);
+		} else {
+			elementRefs.current.delete(id);
+		}
+	};
 
-  useEffect(() => {
-    if (!highlightId) return;
+	useEffect(() => {
+		if (!highlightId) return;
 
-    setHighlightedId(highlightId);
+		setHighlightedId(highlightId);
 
-    const target = elementRefs.current.get(highlightId);
-    target?.scrollIntoView({ block: "center" });
+		const target = elementRefs.current.get(highlightId);
+		target?.scrollIntoView({ block: "center" });
 
-    const timeout = setTimeout(() => {
-      setHighlightedId(null);
-      onClearHighlight();
-    }, highlightDuration);
+		const timeout = setTimeout(() => {
+			setHighlightedId(null);
+			onClearHighlight();
+		}, highlightDuration);
 
-    return () => clearTimeout(timeout);
-  }, [highlightId, onClearHighlight, highlightDuration]);
+		return () => clearTimeout(timeout);
+	}, [highlightId, onClearHighlight, highlightDuration]);
 
-  return { highlightedId, registerElement };
+	return { highlightedId, registerElement };
 }
diff --git a/apps/web/src/hooks/use-sound-search.ts b/apps/web/src/hooks/use-sound-search.ts
index a447e119..f3c0aab4 100644
--- a/apps/web/src/hooks/use-sound-search.ts
+++ b/apps/web/src/hooks/use-sound-search.ts
@@ -2,153 +2,153 @@ import { useEffect } from "react";
 import { useSoundsStore } from "@/stores/sounds-store";
 
 export function useSoundSearch({
-  query,
-  commercialOnly,
+	query,
+	commercialOnly,
 }: {
-  query: string;
-  commercialOnly: boolean;
+	query: string;
+	commercialOnly: boolean;
 }) {
-  const {
-    searchResults,
-    isSearching,
-    searchError,
-    lastSearchQuery,
-    currentPage,
-    hasNextPage,
-    isLoadingMore,
-    totalCount,
-    setSearchResults,
-    setSearching,
-    setSearchError,
-    setLastSearchQuery,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-    setLoadingMore,
-    appendSearchResults,
-    appendTopSounds,
-    resetPagination,
-  } = useSoundsStore();
+	const {
+		searchResults,
+		isSearching,
+		searchError,
+		lastSearchQuery,
+		currentPage,
+		hasNextPage,
+		isLoadingMore,
+		totalCount,
+		setSearchResults,
+		setSearching,
+		setSearchError,
+		setLastSearchQuery,
+		setCurrentPage,
+		setHasNextPage,
+		setTotalCount,
+		setLoadingMore,
+		appendSearchResults,
+		appendTopSounds,
+		resetPagination,
+	} = useSoundsStore();
 
-  const loadMore = async () => {
-    if (isLoadingMore || !hasNextPage) return;
+	const loadMore = async () => {
+		if (isLoadingMore || !hasNextPage) return;
 
-    try {
-      setLoadingMore({ loading: true });
-      const nextPage = currentPage + 1;
+		try {
+			setLoadingMore({ loading: true });
+			const nextPage = currentPage + 1;
 
-      const searchParams = new URLSearchParams({
-        page: nextPage.toString(),
-        type: "effects",
-      });
+			const searchParams = new URLSearchParams({
+				page: nextPage.toString(),
+				type: "effects",
+			});
 
-      if (query.trim()) {
-        searchParams.set("q", query);
-      }
+			if (query.trim()) {
+				searchParams.set("q", query);
+			}
 
-      searchParams.set("commercial_only", commercialOnly.toString());
-      const response = await fetch(
-        `/api/sounds/search?${searchParams.toString()}`,
-      );
+			searchParams.set("commercial_only", commercialOnly.toString());
+			const response = await fetch(
+				`/api/sounds/search?${searchParams.toString()}`,
+			);
 
-      if (response.ok) {
-        const data = await response.json();
+			if (response.ok) {
+				const data = await response.json();
 
-        if (query.trim()) {
-          appendSearchResults(data.results);
-        } else {
-          appendTopSounds(data.results);
-        }
+				if (query.trim()) {
+					appendSearchResults(data.results);
+				} else {
+					appendTopSounds(data.results);
+				}
 
-        setCurrentPage({ page: nextPage });
-        setHasNextPage({ hasNext: !!data.next });
-        setTotalCount(data.count);
-      } else {
-        setSearchError({ error: `Load more failed: ${response.status}` });
-      }
-    } catch (err) {
-      setSearchError({
-        error: err instanceof Error ? err.message : "Load more failed",
-      });
-    } finally {
-      setLoadingMore({ loading: false });
-    }
-  };
+				setCurrentPage({ page: nextPage });
+				setHasNextPage({ hasNext: !!data.next });
+				setTotalCount(data.count);
+			} else {
+				setSearchError({ error: `Load more failed: ${response.status}` });
+			}
+		} catch (err) {
+			setSearchError({
+				error: err instanceof Error ? err.message : "Load more failed",
+			});
+		} finally {
+			setLoadingMore({ loading: false });
+		}
+	};
 
-  useEffect(() => {
-    if (!query.trim()) {
-      setSearchResults({ results: [] });
-      setSearchError({ error: null });
-      setLastSearchQuery({ query: "" });
-      return;
-    }
+	useEffect(() => {
+		if (!query.trim()) {
+			setSearchResults({ results: [] });
+			setSearchError({ error: null });
+			setLastSearchQuery({ query: "" });
+			return;
+		}
 
-    if (query === lastSearchQuery && searchResults.length > 0) {
-      return;
-    }
+		if (query === lastSearchQuery && searchResults.length > 0) {
+			return;
+		}
 
-    let ignore = false;
+		let ignore = false;
 
-    const timeoutId = setTimeout(async () => {
-      try {
-        setSearching({ searching: true });
-        setSearchError({ error: null });
-        resetPagination();
+		const timeoutId = setTimeout(async () => {
+			try {
+				setSearching({ searching: true });
+				setSearchError({ error: null });
+				resetPagination();
 
-        const response = await fetch(
-          `/api/sounds/search?q=${encodeURIComponent(query)}&type=effects&page=1`,
-        );
+				const response = await fetch(
+					`/api/sounds/search?q=${encodeURIComponent(query)}&type=effects&page=1`,
+				);
 
-        if (!ignore) {
-          if (response.ok) {
-            const data = await response.json();
-            setSearchResults({ results: data.results });
-            setLastSearchQuery({ query: query });
-            setHasNextPage({ hasNext: !!data.next });
-            setTotalCount({ count: data.count });
-            setCurrentPage({ page: 1 });
-          } else {
-            setSearchError({ error: `Search failed: ${response.status}` });
-          }
-        }
-      } catch (err) {
-        if (!ignore) {
-          setSearchError({
-            error: err instanceof Error ? err.message : "Search failed",
-          });
-        }
-      } finally {
-        if (!ignore) {
-          setSearching({ searching: false });
-        }
-      }
-    }, 300);
+				if (!ignore) {
+					if (response.ok) {
+						const data = await response.json();
+						setSearchResults({ results: data.results });
+						setLastSearchQuery({ query: query });
+						setHasNextPage({ hasNext: !!data.next });
+						setTotalCount({ count: data.count });
+						setCurrentPage({ page: 1 });
+					} else {
+						setSearchError({ error: `Search failed: ${response.status}` });
+					}
+				}
+			} catch (err) {
+				if (!ignore) {
+					setSearchError({
+						error: err instanceof Error ? err.message : "Search failed",
+					});
+				}
+			} finally {
+				if (!ignore) {
+					setSearching({ searching: false });
+				}
+			}
+		}, 300);
 
-    return () => {
-      clearTimeout(timeoutId);
-      ignore = true;
-    };
-  }, [
-    query,
-    lastSearchQuery,
-    searchResults.length,
-    setSearchResults,
-    setSearching,
-    setSearchError,
-    setLastSearchQuery,
-    setCurrentPage,
-    setHasNextPage,
-    setTotalCount,
-    resetPagination,
-  ]);
+		return () => {
+			clearTimeout(timeoutId);
+			ignore = true;
+		};
+	}, [
+		query,
+		lastSearchQuery,
+		searchResults.length,
+		setSearchResults,
+		setSearching,
+		setSearchError,
+		setLastSearchQuery,
+		setCurrentPage,
+		setHasNextPage,
+		setTotalCount,
+		resetPagination,
+	]);
 
-  return {
-    results: searchResults,
-    isLoading: isSearching,
-    error: searchError,
-    loadMore,
-    hasNextPage,
-    isLoadingMore,
-    totalCount,
-  };
+	return {
+		results: searchResults,
+		isLoading: isSearching,
+		error: searchError,
+		loadMore,
+		hasNextPage,
+		isLoadingMore,
+		totalCount,
+	};
 }
diff --git a/apps/web/src/lib/actions/definitions.ts b/apps/web/src/lib/actions/definitions.ts
index 6494b015..f6265ff4 100644
--- a/apps/web/src/lib/actions/definitions.ts
+++ b/apps/web/src/lib/actions/definitions.ts
@@ -1,162 +1,162 @@
 import type { ShortcutKey } from "@/types/keybinding";
 
 export type TActionCategory =
-  | "playback"
-  | "navigation"
-  | "editing"
-  | "selection"
-  | "history"
-  | "timeline"
-  | "controls";
+	| "playback"
+	| "navigation"
+	| "editing"
+	| "selection"
+	| "history"
+	| "timeline"
+	| "controls";
 
 export interface TActionDefinition {
-  description: string;
-  category: TActionCategory;
-  defaultShortcuts?: ShortcutKey[];
-  args?: Record<string, unknown>;
+	description: string;
+	category: TActionCategory;
+	defaultShortcuts?: ShortcutKey[];
+	args?: Record<string, unknown>;
 }
 
 export const ACTIONS = {
-  "toggle-play": {
-    description: "Play/Pause",
-    category: "playback",
-    defaultShortcuts: ["space", "k"],
-  },
-  "stop-playback": {
-    description: "Stop playback",
-    category: "playback",
-  },
-  "seek-forward": {
-    description: "Seek forward 1 second",
-    category: "playback",
-    defaultShortcuts: ["l"],
-    args: { seconds: "number" },
-  },
-  "seek-backward": {
-    description: "Seek backward 1 second",
-    category: "playback",
-    defaultShortcuts: ["j"],
-    args: { seconds: "number" },
-  },
-  "frame-step-forward": {
-    description: "Frame step forward",
-    category: "navigation",
-    defaultShortcuts: ["right"],
-  },
-  "frame-step-backward": {
-    description: "Frame step backward",
-    category: "navigation",
-    defaultShortcuts: ["left"],
-  },
-  "jump-forward": {
-    description: "Jump forward 5 seconds",
-    category: "navigation",
-    defaultShortcuts: ["shift+right"],
-    args: { seconds: "number" },
-  },
-  "jump-backward": {
-    description: "Jump backward 5 seconds",
-    category: "navigation",
-    defaultShortcuts: ["shift+left"],
-    args: { seconds: "number" },
-  },
-  "goto-start": {
-    description: "Go to timeline start",
-    category: "navigation",
-    defaultShortcuts: ["home", "enter"],
-  },
-  "goto-end": {
-    description: "Go to timeline end",
-    category: "navigation",
-    defaultShortcuts: ["end"],
-  },
-  "split-selected": {
-    description: "Split element at playhead",
-    category: "editing",
-    defaultShortcuts: ["s"],
-  },
-  "split-selected-left": {
-    description: "Split element at playhead and keep left",
-    category: "editing",
-    defaultShortcuts: ["q"],
-  },
-  "split-selected-right": {
-    description: "Split element at playhead and keep right",
-    category: "editing",
-    defaultShortcuts: ["w"],
-  },
-  "delete-selected": {
-    description: "Delete selected elements",
-    category: "editing",
-    defaultShortcuts: ["delete", "backspace"],
-  },
-  "copy-selected": {
-    description: "Copy selected elements",
-    category: "editing",
-    defaultShortcuts: ["ctrl+c"],
-  },
-  "paste-selected": {
-    description: "Paste elements at playhead",
-    category: "editing",
-    defaultShortcuts: ["ctrl+v"],
-  },
-  "toggle-snapping": {
-    description: "Toggle snapping",
-    category: "editing",
-    defaultShortcuts: ["n"],
-  },
-  "select-all": {
-    description: "Select all elements",
-    category: "selection",
-    defaultShortcuts: ["ctrl+a"],
-  },
-  "duplicate-selected": {
-    description: "Duplicate selected element",
-    category: "selection",
-    defaultShortcuts: ["ctrl+d"],
-  },
-  "toggle-elements-muted-selected": {
-    description: "Mute/unmute selected elements",
-    category: "selection",
-  },
-  "toggle-elements-visibility-selected": {
-    description: "Show/hide selected elements",
-    category: "selection",
-  },
-  "toggle-bookmark": {
-    description: "Toggle bookmark at playhead",
-    category: "timeline",
-  },
-  undo: {
-    description: "Undo",
-    category: "history",
-    defaultShortcuts: ["ctrl+z"],
-  },
-  redo: {
-    description: "Redo",
-    category: "history",
-    defaultShortcuts: ["ctrl+shift+z", "ctrl+y"],
-  },
+	"toggle-play": {
+		description: "Play/Pause",
+		category: "playback",
+		defaultShortcuts: ["space", "k"],
+	},
+	"stop-playback": {
+		description: "Stop playback",
+		category: "playback",
+	},
+	"seek-forward": {
+		description: "Seek forward 1 second",
+		category: "playback",
+		defaultShortcuts: ["l"],
+		args: { seconds: "number" },
+	},
+	"seek-backward": {
+		description: "Seek backward 1 second",
+		category: "playback",
+		defaultShortcuts: ["j"],
+		args: { seconds: "number" },
+	},
+	"frame-step-forward": {
+		description: "Frame step forward",
+		category: "navigation",
+		defaultShortcuts: ["right"],
+	},
+	"frame-step-backward": {
+		description: "Frame step backward",
+		category: "navigation",
+		defaultShortcuts: ["left"],
+	},
+	"jump-forward": {
+		description: "Jump forward 5 seconds",
+		category: "navigation",
+		defaultShortcuts: ["shift+right"],
+		args: { seconds: "number" },
+	},
+	"jump-backward": {
+		description: "Jump backward 5 seconds",
+		category: "navigation",
+		defaultShortcuts: ["shift+left"],
+		args: { seconds: "number" },
+	},
+	"goto-start": {
+		description: "Go to timeline start",
+		category: "navigation",
+		defaultShortcuts: ["home", "enter"],
+	},
+	"goto-end": {
+		description: "Go to timeline end",
+		category: "navigation",
+		defaultShortcuts: ["end"],
+	},
+	"split-selected": {
+		description: "Split element at playhead",
+		category: "editing",
+		defaultShortcuts: ["s"],
+	},
+	"split-selected-left": {
+		description: "Split element at playhead and keep left",
+		category: "editing",
+		defaultShortcuts: ["q"],
+	},
+	"split-selected-right": {
+		description: "Split element at playhead and keep right",
+		category: "editing",
+		defaultShortcuts: ["w"],
+	},
+	"delete-selected": {
+		description: "Delete selected elements",
+		category: "editing",
+		defaultShortcuts: ["delete", "backspace"],
+	},
+	"copy-selected": {
+		description: "Copy selected elements",
+		category: "editing",
+		defaultShortcuts: ["ctrl+c"],
+	},
+	"paste-selected": {
+		description: "Paste elements at playhead",
+		category: "editing",
+		defaultShortcuts: ["ctrl+v"],
+	},
+	"toggle-snapping": {
+		description: "Toggle snapping",
+		category: "editing",
+		defaultShortcuts: ["n"],
+	},
+	"select-all": {
+		description: "Select all elements",
+		category: "selection",
+		defaultShortcuts: ["ctrl+a"],
+	},
+	"duplicate-selected": {
+		description: "Duplicate selected element",
+		category: "selection",
+		defaultShortcuts: ["ctrl+d"],
+	},
+	"toggle-elements-muted-selected": {
+		description: "Mute/unmute selected elements",
+		category: "selection",
+	},
+	"toggle-elements-visibility-selected": {
+		description: "Show/hide selected elements",
+		category: "selection",
+	},
+	"toggle-bookmark": {
+		description: "Toggle bookmark at playhead",
+		category: "timeline",
+	},
+	undo: {
+		description: "Undo",
+		category: "history",
+		defaultShortcuts: ["ctrl+z"],
+	},
+	redo: {
+		description: "Redo",
+		category: "history",
+		defaultShortcuts: ["ctrl+shift+z", "ctrl+y"],
+	},
 } as const satisfies Record<string, TActionDefinition>;
 
 export type TAction = keyof typeof ACTIONS;
 
 export function getActionDefinition(action: TAction): TActionDefinition {
-  return ACTIONS[action];
+	return ACTIONS[action];
 }
 
 export function getDefaultShortcuts(): Record<ShortcutKey, TAction> {
-  const shortcuts: Record<string, TAction> = {};
+	const shortcuts: Record<string, TAction> = {};
 
-  for (const [action, def] of Object.entries(ACTIONS) as Array<
-    [TAction, TActionDefinition]
-  >) {
-    if (def.defaultShortcuts) {
-      for (const shortcut of def.defaultShortcuts) {
-        shortcuts[shortcut] = action;
-      }
-    }
-  }
+	for (const [action, def] of Object.entries(ACTIONS) as Array<
+		[TAction, TActionDefinition]
+	>) {
+		if (def.defaultShortcuts) {
+			for (const shortcut of def.defaultShortcuts) {
+				shortcuts[shortcut] = action;
+			}
+		}
+	}
 
-  return shortcuts as Record<ShortcutKey, TAction>;
+	return shortcuts as Record<ShortcutKey, TAction>;
 }
diff --git a/apps/web/src/lib/actions/registry.ts b/apps/web/src/lib/actions/registry.ts
index 5b9a336c..86f59d0f 100644
--- a/apps/web/src/lib/actions/registry.ts
+++ b/apps/web/src/lib/actions/registry.ts
@@ -1,53 +1,53 @@
 import type {
-  TAction,
-  TActionFunc,
-  TActionWithArgs,
-  TActionWithOptionalArgs,
-  TActionArgsMap,
-  TArgOfAction,
-  TInvocationTrigger,
-  TBoundActionList,
+	TAction,
+	TActionFunc,
+	TActionWithArgs,
+	TActionWithOptionalArgs,
+	TActionArgsMap,
+	TArgOfAction,
+	TInvocationTrigger,
+	TBoundActionList,
 } from "./types";
 
 const boundActions: TBoundActionList = {};
 
 export function bindAction<A extends TAction>(
-  action: A,
-  handler: TActionFunc<A>,
+	action: A,
+	handler: TActionFunc<A>,
 ) {
-  if (boundActions[action]) {
-    boundActions[action]?.push(handler);
-  } else {
-    boundActions[action] = [handler] as any;
-  }
+	if (boundActions[action]) {
+		boundActions[action]?.push(handler);
+	} else {
+		boundActions[action] = [handler] as any;
+	}
 }
 
 export function unbindAction<A extends TAction>(
-  action: A,
-  handler: TActionFunc<A>,
+	action: A,
+	handler: TActionFunc<A>,
 ) {
-  boundActions[action] = boundActions[action]?.filter(
-    (x) => x !== handler,
-  ) as any;
+	boundActions[action] = boundActions[action]?.filter(
+		(x) => x !== handler,
+	) as any;
 
-  if (boundActions[action]?.length === 0) {
-    delete boundActions[action];
-  }
+	if (boundActions[action]?.length === 0) {
+		delete boundActions[action];
+	}
 }
 
 type InvokeActionFunc = {
-  (
-    action: TActionWithOptionalArgs,
-    args?: undefined,
-    trigger?: TInvocationTrigger,
-  ): void;
-  <A extends TActionWithArgs>(action: A, args: TActionArgsMap[A]): void;
+	(
+		action: TActionWithOptionalArgs,
+		args?: undefined,
+		trigger?: TInvocationTrigger,
+	): void;
+	<A extends TActionWithArgs>(action: A, args: TActionArgsMap[A]): void;
 };
 
 export const invokeAction: InvokeActionFunc = <A extends TAction>(
-  action: A,
-  args?: TArgOfAction<A>,
-  trigger?: TInvocationTrigger,
+	action: A,
+	args?: TArgOfAction<A>,
+	trigger?: TInvocationTrigger,
 ) => {
-  boundActions[action]?.forEach((handler) => (handler as any)(args, trigger));
+	boundActions[action]?.forEach((handler) => (handler as any)(args, trigger));
 };
diff --git a/apps/web/src/lib/actions/types.ts b/apps/web/src/lib/actions/types.ts
index ff537e6d..508bf10e 100644
--- a/apps/web/src/lib/actions/types.ts
+++ b/apps/web/src/lib/actions/types.ts
@@ -4,39 +4,39 @@ import type { TAction } from "./definitions";
 export type { TAction };
 
 export type TActionArgsMap = {
-  "seek-forward": { seconds: number } | undefined;
-  "seek-backward": { seconds: number } | undefined;
-  "jump-forward": { seconds: number } | undefined;
-  "jump-backward": { seconds: number } | undefined;
+	"seek-forward": { seconds: number } | undefined;
+	"seek-backward": { seconds: number } | undefined;
+	"jump-forward": { seconds: number } | undefined;
+	"jump-backward": { seconds: number } | undefined;
 };
 
 type TKeysWithValueUndefined<T> = {
-  [K in keyof T]: undefined extends T[K] ? K : never;
+	[K in keyof T]: undefined extends T[K] ? K : never;
 }[keyof T];
 
 export type TActionWithArgs = keyof TActionArgsMap;
 
 export type TActionWithOptionalArgs =
-  | TActionWithNoArgs
-  | TKeysWithValueUndefined<TActionArgsMap>;
+	| TActionWithNoArgs
+	| TKeysWithValueUndefined<TActionArgsMap>;
 
 export type TActionWithNoArgs = Exclude<TAction, TActionWithArgs>;
 
 export type TArgOfAction<A extends TAction> = A extends TActionWithArgs
-  ? TActionArgsMap[A]
-  : undefined;
+	? TActionArgsMap[A]
+	: undefined;
 
 export type TActionFunc<A extends TAction> = A extends TActionWithArgs
-  ? (arg: TArgOfAction<A>, trigger?: TInvocationTrigger) => void
-  : (_?: undefined, trigger?: TInvocationTrigger) => void;
+	? (arg: TArgOfAction<A>, trigger?: TInvocationTrigger) => void
+	: (_?: undefined, trigger?: TInvocationTrigger) => void;
 
 export type TInvocationTrigger = "keypress" | "mouseclick";
 
 export type TBoundActionList = {
-  [A in TAction]?: Array<TActionFunc<A>>;
+	[A in TAction]?: Array<TActionFunc<A>>;
 };
 
 export type TActionHandlerOptions =
-  | MutableRefObject<boolean>
-  | boolean
-  | undefined;
+	| MutableRefObject<boolean>
+	| boolean
+	| undefined;
diff --git a/apps/web/src/lib/auth/client.ts b/apps/web/src/lib/auth/client.ts
index 9a1fa86a..63b441f7 100644
--- a/apps/web/src/lib/auth/client.ts
+++ b/apps/web/src/lib/auth/client.ts
@@ -2,5 +2,5 @@ import { createAuthClient } from "better-auth/react";
 import { webEnv } from "@opencut/env/web";
 
 export const { signIn, signUp, useSession } = createAuthClient({
-  baseURL: webEnv.NEXT_PUBLIC_SITE_URL,
+	baseURL: webEnv.NEXT_PUBLIC_SITE_URL,
 });
diff --git a/apps/web/src/lib/auth/server.ts b/apps/web/src/lib/auth/server.ts
index 8c2e004c..978d7383 100644
--- a/apps/web/src/lib/auth/server.ts
+++ b/apps/web/src/lib/auth/server.ts
@@ -1,43 +1,43 @@
-import { betterAuth, RateLimit } from "better-auth";
+import { betterAuth, type RateLimit } from "better-auth";
 import { drizzleAdapter } from "better-auth/adapters/drizzle";
 import { Redis } from "@upstash/redis";
 import { db } from "@/lib/db";
 import { webEnv } from "@opencut/env/web";
 
 const redis = new Redis({
-  url: webEnv.UPSTASH_REDIS_REST_URL,
-  token: webEnv.UPSTASH_REDIS_REST_TOKEN,
+	url: webEnv.UPSTASH_REDIS_REST_URL,
+	token: webEnv.UPSTASH_REDIS_REST_TOKEN,
 });
 
 export const auth = betterAuth({
-  database: drizzleAdapter(db, {
-    provider: "pg",
-    usePlural: true,
-  }),
-  secret: webEnv.BETTER_AUTH_SECRET,
-  user: {
-    deleteUser: {
-      enabled: true,
-    },
-  },
-  emailAndPassword: {
-    enabled: true,
-  },
-  rateLimit: {
-    storage: "secondary-storage",
-    customStorage: {
-      get: async (key) => {
-        const value = await redis.get(key);
-        return value as RateLimit | undefined;
-      },
-      set: async (key, value) => {
-        await redis.set(key, value);
-      },
-    },
-  },
-  baseURL: webEnv.NEXT_PUBLIC_SITE_URL,
-  appName: "OpenCut",
-  trustedOrigins: [webEnv.NEXT_PUBLIC_SITE_URL],
+	database: drizzleAdapter(db, {
+		provider: "pg",
+		usePlural: true,
+	}),
+	secret: webEnv.BETTER_AUTH_SECRET,
+	user: {
+		deleteUser: {
+			enabled: true,
+		},
+	},
+	emailAndPassword: {
+		enabled: true,
+	},
+	rateLimit: {
+		storage: "secondary-storage",
+		customStorage: {
+			get: async (key) => {
+				const value = await redis.get(key);
+				return value as RateLimit | undefined;
+			},
+			set: async (key, value) => {
+				await redis.set(key, value);
+			},
+		},
+	},
+	baseURL: webEnv.NEXT_PUBLIC_SITE_URL,
+	appName: "OpenCut",
+	trustedOrigins: [webEnv.NEXT_PUBLIC_SITE_URL],
 });
 
 export type Auth = typeof auth;
diff --git a/apps/web/src/lib/blog/query.ts b/apps/web/src/lib/blog/query.ts
index 47f08b72..e6d68bb6 100644
--- a/apps/web/src/lib/blog/query.ts
+++ b/apps/web/src/lib/blog/query.ts
@@ -1,9 +1,9 @@
 import type {
-  MarbleAuthorList,
-  MarbleCategoryList,
-  MarblePost,
-  MarblePostList,
-  MarbleTagList,
+	MarbleAuthorList,
+	MarbleCategoryList,
+	MarblePost,
+	MarblePostList,
+	MarbleTagList,
 } from "@/types/blog";
 import { unified } from "unified";
 import rehypeParse from "rehype-parse";
@@ -13,60 +13,60 @@ import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeSanitize from "rehype-sanitize";
 
 const url =
-  process.env.NEXT_PUBLIC_MARBLE_API_URL ?? "https://api.marblecms.com";
+	process.env.NEXT_PUBLIC_MARBLE_API_URL ?? "https://api.marblecms.com";
 const key = process.env.MARBLE_WORKSPACE_KEY ?? "cmd4iw9mm0006l804kwqv0k46";
 
 async function fetchFromMarble<T>({
-  endpoint,
+	endpoint,
 }: {
-  endpoint: string;
+	endpoint: string;
 }): Promise<T> {
-  try {
-    const response = await fetch(`${url}/${key}/${endpoint}`);
-    if (!response.ok) {
-      throw new Error(
-        `Failed to fetch ${endpoint}: ${response.status} ${response.statusText}`,
-      );
-    }
-    return (await response.json()) as T;
-  } catch (error) {
-    console.error(`Error fetching ${endpoint}:`, error);
-    throw error;
-  }
+	try {
+		const response = await fetch(`${url}/${key}/${endpoint}`);
+		if (!response.ok) {
+			throw new Error(
+				`Failed to fetch ${endpoint}: ${response.status} ${response.statusText}`,
+			);
+		}
+		return (await response.json()) as T;
+	} catch (error) {
+		console.error(`Error fetching ${endpoint}:`, error);
+		throw error;
+	}
 }
 
 export async function getPosts() {
-  return fetchFromMarble<MarblePostList>({ endpoint: "posts" });
+	return fetchFromMarble<MarblePostList>({ endpoint: "posts" });
 }
 
 export async function getTags() {
-  return fetchFromMarble<MarbleTagList>({ endpoint: "tags" });
+	return fetchFromMarble<MarbleTagList>({ endpoint: "tags" });
 }
 
 export async function getSinglePost({ slug }: { slug: string }) {
-  return fetchFromMarble<MarblePost>({ endpoint: `posts/${slug}` });
+	return fetchFromMarble<MarblePost>({ endpoint: `posts/${slug}` });
 }
 
 export async function getCategories() {
-  return fetchFromMarble<MarbleCategoryList>({ endpoint: "categories" });
+	return fetchFromMarble<MarbleCategoryList>({ endpoint: "categories" });
 }
 
 export async function getAuthors() {
-  return fetchFromMarble<MarbleAuthorList>({ endpoint: "authors" });
+	return fetchFromMarble<MarbleAuthorList>({ endpoint: "authors" });
 }
 
 export async function processHtmlContent({
-  html,
+	html,
 }: {
-  html: string;
+	html: string;
 }): Promise<string> {
-  const processor = unified()
-    .use(rehypeSanitize)
-    .use(rehypeParse, { fragment: true })
-    .use(rehypeSlug)
-    .use(rehypeAutolinkHeadings, { behavior: "append" })
-    .use(rehypeStringify);
+	const processor = unified()
+		.use(rehypeSanitize)
+		.use(rehypeParse, { fragment: true })
+		.use(rehypeSlug)
+		.use(rehypeAutolinkHeadings, { behavior: "append" })
+		.use(rehypeStringify);
 
-  const file = await processor.process({ value: html, type: "html" });
-  return String(file);
+	const file = await processor.process({ value: html, type: "html" });
+	return String(file);
 }
diff --git a/apps/web/src/lib/commands/base-command.ts b/apps/web/src/lib/commands/base-command.ts
index 53582a44..66062c52 100644
--- a/apps/web/src/lib/commands/base-command.ts
+++ b/apps/web/src/lib/commands/base-command.ts
@@ -1,11 +1,11 @@
 export abstract class Command {
-  abstract execute(): void;
+	abstract execute(): void;
 
-  undo(): void {
-    throw new Error("Undo not implemented for this command");
-  }
+	undo(): void {
+		throw new Error("Undo not implemented for this command");
+	}
 
-  redo(): void {
-    this.execute();
-  }
+	redo(): void {
+		this.execute();
+	}
 }
diff --git a/apps/web/src/lib/commands/media/add-media-asset.ts b/apps/web/src/lib/commands/media/add-media-asset.ts
index 7b4d7f7f..d947cb97 100644
--- a/apps/web/src/lib/commands/media/add-media-asset.ts
+++ b/apps/web/src/lib/commands/media/add-media-asset.ts
@@ -5,57 +5,57 @@ import { generateUUID } from "@/utils/id";
 import { storageService } from "@/services/storage/storage-service";
 
 export class AddMediaAssetCommand extends Command {
-  private assetId: string;
-  private savedAssets: MediaAsset[] | null = null;
-  private createdAsset: MediaAsset | null = null;
+	private assetId: string;
+	private savedAssets: MediaAsset[] | null = null;
+	private createdAsset: MediaAsset | null = null;
 
-  constructor(
-    private projectId: string,
-    private asset: Omit<MediaAsset, "id">,
-  ) {
-    super();
-    this.assetId = generateUUID();
-  }
+	constructor(
+		private projectId: string,
+		private asset: Omit<MediaAsset, "id">,
+	) {
+		super();
+		this.assetId = generateUUID();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedAssets = [...editor.media.getAssets()];
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedAssets = [...editor.media.getAssets()];
 
-    this.createdAsset = {
-      ...this.asset,
-      id: this.assetId,
-    };
+		this.createdAsset = {
+			...this.asset,
+			id: this.assetId,
+		};
 
-    editor.media.setAssets({
-      assets: [...this.savedAssets, this.createdAsset],
-    });
+		editor.media.setAssets({
+			assets: [...this.savedAssets, this.createdAsset],
+		});
 
-    storageService
-      .saveMediaAsset({
-        projectId: this.projectId,
-        mediaAsset: this.createdAsset,
-      })
-      .catch((error) => {
-        console.error("Failed to save media item:", error);
-      });
-  }
+		storageService
+			.saveMediaAsset({
+				projectId: this.projectId,
+				mediaAsset: this.createdAsset,
+			})
+			.catch((error) => {
+				console.error("Failed to save media item:", error);
+			});
+	}
 
-  undo(): void {
-    if (this.savedAssets) {
-      const editor = EditorCore.getInstance();
-      editor.media.setAssets({ assets: this.savedAssets });
+	undo(): void {
+		if (this.savedAssets) {
+			const editor = EditorCore.getInstance();
+			editor.media.setAssets({ assets: this.savedAssets });
 
-      if (this.createdAsset) {
-        storageService
-          .deleteMediaAsset({ projectId: this.projectId, id: this.assetId })
-          .catch((error) => {
-            console.error("Failed to delete media item on undo:", error);
-          });
-      }
-    }
-  }
+			if (this.createdAsset) {
+				storageService
+					.deleteMediaAsset({ projectId: this.projectId, id: this.assetId })
+					.catch((error) => {
+						console.error("Failed to delete media item on undo:", error);
+					});
+			}
+		}
+	}
 
-  getAssetId(): string {
-    return this.assetId;
-  }
+	getAssetId(): string {
+		return this.assetId;
+	}
 }
diff --git a/apps/web/src/lib/commands/media/remove-media-asset.ts b/apps/web/src/lib/commands/media/remove-media-asset.ts
index 94905d15..aa1a5775 100644
--- a/apps/web/src/lib/commands/media/remove-media-asset.ts
+++ b/apps/web/src/lib/commands/media/remove-media-asset.ts
@@ -7,79 +7,79 @@ import { hasMediaId } from "@/lib/timeline/element-utils";
 import type { TimelineTrack } from "@/types/timeline";
 
 export class RemoveMediaAssetCommand extends Command {
-  private savedAssets: MediaAsset[] | null = null;
-  private savedTracks: TimelineTrack[] | null = null;
-  private removedAsset: MediaAsset | null = null;
+	private savedAssets: MediaAsset[] | null = null;
+	private savedTracks: TimelineTrack[] | null = null;
+	private removedAsset: MediaAsset | null = null;
 
-  constructor(
-    private projectId: string,
-    private assetId: string,
-  ) {
-    super();
-  }
+	constructor(
+		private projectId: string,
+		private assetId: string,
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    const assets = editor.media.getAssets();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		const assets = editor.media.getAssets();
 
-    this.savedAssets = [...assets];
-    this.savedTracks = editor.timeline.getTracks();
+		this.savedAssets = [...assets];
+		this.savedTracks = editor.timeline.getTracks();
 
-    this.removedAsset =
-      assets.find((media) => media.id === this.assetId) ?? null;
+		this.removedAsset =
+			assets.find((media) => media.id === this.assetId) ?? null;
 
-    if (!this.removedAsset) {
-      console.error("Media asset not found:", this.assetId);
-      return;
-    }
+		if (!this.removedAsset) {
+			console.error("Media asset not found:", this.assetId);
+			return;
+		}
 
-    videoCache.clearVideo({ mediaId: this.assetId });
+		videoCache.clearVideo({ mediaId: this.assetId });
 
-    editor.media.setAssets({
-      assets: assets.filter((media) => media.id !== this.assetId),
-    });
+		editor.media.setAssets({
+			assets: assets.filter((media) => media.id !== this.assetId),
+		});
 
-    const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];
+		const elementsToRemove: Array<{ trackId: string; elementId: string }> = [];
 
-    for (const track of this.savedTracks) {
-      for (const element of track.elements) {
-        if (hasMediaId(element) && element.mediaId === this.assetId) {
-          elementsToRemove.push({ trackId: track.id, elementId: element.id });
-        }
-      }
-    }
+		for (const track of this.savedTracks) {
+			for (const element of track.elements) {
+				if (hasMediaId(element) && element.mediaId === this.assetId) {
+					elementsToRemove.push({ trackId: track.id, elementId: element.id });
+				}
+			}
+		}
 
-    if (elementsToRemove.length > 0) {
-      editor.timeline.deleteElements({ elements: elementsToRemove });
-    }
+		if (elementsToRemove.length > 0) {
+			editor.timeline.deleteElements({ elements: elementsToRemove });
+		}
 
-    storageService
-      .deleteMediaAsset({ projectId: this.projectId, id: this.assetId })
-      .catch((error) => {
-        console.error("Failed to delete media item:", error);
-      });
-  }
+		storageService
+			.deleteMediaAsset({ projectId: this.projectId, id: this.assetId })
+			.catch((error) => {
+				console.error("Failed to delete media item:", error);
+			});
+	}
 
-  undo(): void {
-    const editor = EditorCore.getInstance();
+	undo(): void {
+		const editor = EditorCore.getInstance();
 
-    if (this.savedAssets) {
-      editor.media.setAssets({ assets: this.savedAssets });
-    }
+		if (this.savedAssets) {
+			editor.media.setAssets({ assets: this.savedAssets });
+		}
 
-    if (this.savedTracks) {
-      editor.timeline.updateTracks(this.savedTracks);
-    }
+		if (this.savedTracks) {
+			editor.timeline.updateTracks(this.savedTracks);
+		}
 
-    if (this.removedAsset) {
-      storageService
-        .saveMediaAsset({
-          projectId: this.projectId,
-          mediaAsset: this.removedAsset,
-        })
-        .catch((error) => {
-          console.error("Failed to restore media item on undo:", error);
-        });
-    }
-  }
+		if (this.removedAsset) {
+			storageService
+				.saveMediaAsset({
+					projectId: this.projectId,
+					mediaAsset: this.removedAsset,
+				})
+				.catch((error) => {
+					console.error("Failed to restore media item on undo:", error);
+				});
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/project/update-project-settings.ts b/apps/web/src/lib/commands/project/update-project-settings.ts
index 0bc47807..b7ab75ee 100644
--- a/apps/web/src/lib/commands/project/update-project-settings.ts
+++ b/apps/web/src/lib/commands/project/update-project-settings.ts
@@ -3,44 +3,44 @@ import { EditorCore } from "@/core";
 import type { TProject, TProjectSettings } from "@/types/project";
 
 export class UpdateProjectSettingsCommand extends Command {
-  private savedSettings: TProjectSettings | null = null;
-  private savedUpdatedAt: Date | null = null;
+	private savedSettings: TProjectSettings | null = null;
+	private savedUpdatedAt: Date | null = null;
 
-  constructor(private updates: Partial<TProjectSettings>) {
-    super();
-  }
+	constructor(private updates: Partial<TProjectSettings>) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    const activeProject = editor.project.getActive();
-    if (!activeProject) return;
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		const activeProject = editor.project.getActive();
+		if (!activeProject) return;
 
-    this.savedSettings = activeProject.settings;
-    this.savedUpdatedAt = activeProject.metadata.updatedAt;
+		this.savedSettings = activeProject.settings;
+		this.savedUpdatedAt = activeProject.metadata.updatedAt;
 
-    const updatedProject: TProject = {
-      ...activeProject,
-      settings: { ...activeProject.settings, ...this.updates },
-      metadata: { ...activeProject.metadata, updatedAt: new Date() },
-    };
+		const updatedProject: TProject = {
+			...activeProject,
+			settings: { ...activeProject.settings, ...this.updates },
+			metadata: { ...activeProject.metadata, updatedAt: new Date() },
+		};
 
-    editor.project.setActiveProject({ project: updatedProject });
-    editor.save.markDirty();
-  }
+		editor.project.setActiveProject({ project: updatedProject });
+		editor.save.markDirty();
+	}
 
-  undo(): void {
-    if (!this.savedSettings || !this.savedUpdatedAt) return;
-    const editor = EditorCore.getInstance();
-    const activeProject = editor.project.getActive();
-    if (!activeProject) return;
+	undo(): void {
+		if (!this.savedSettings || !this.savedUpdatedAt) return;
+		const editor = EditorCore.getInstance();
+		const activeProject = editor.project.getActive();
+		if (!activeProject) return;
 
-    const updatedProject: TProject = {
-      ...activeProject,
-      settings: this.savedSettings,
-      metadata: { ...activeProject.metadata, updatedAt: this.savedUpdatedAt },
-    };
+		const updatedProject: TProject = {
+			...activeProject,
+			settings: this.savedSettings,
+			metadata: { ...activeProject.metadata, updatedAt: this.savedUpdatedAt },
+		};
 
-    editor.project.setActiveProject({ project: updatedProject });
-    editor.save.markDirty();
-  }
+		editor.project.setActiveProject({ project: updatedProject });
+		editor.save.markDirty();
+	}
 }
diff --git a/apps/web/src/lib/commands/scene/create-scene.ts b/apps/web/src/lib/commands/scene/create-scene.ts
index 86599daa..5fea5d53 100644
--- a/apps/web/src/lib/commands/scene/create-scene.ts
+++ b/apps/web/src/lib/commands/scene/create-scene.ts
@@ -4,37 +4,37 @@ import type { TScene } from "@/types/timeline";
 import { buildDefaultScene } from "@/lib/scenes";
 
 export class CreateSceneCommand extends Command {
-  private savedScenes: TScene[] | null = null;
-  private createdScene: TScene | null = null;
+	private savedScenes: TScene[] | null = null;
+	private createdScene: TScene | null = null;
 
-  constructor(
-    private name: string,
-    private isMain: boolean = false,
-  ) {
-    super();
-  }
+	constructor(
+		private name: string,
+		private isMain: boolean = false,
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedScenes = [...editor.scenes.getScenes()];
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedScenes = [...editor.scenes.getScenes()];
 
-    this.createdScene = buildDefaultScene({
-      name: this.name,
-      isMain: this.isMain,
-    });
+		this.createdScene = buildDefaultScene({
+			name: this.name,
+			isMain: this.isMain,
+		});
 
-    const updatedScenes = [...this.savedScenes, this.createdScene];
-    editor.scenes.setScenes({ scenes: updatedScenes });
-  }
+		const updatedScenes = [...this.savedScenes, this.createdScene];
+		editor.scenes.setScenes({ scenes: updatedScenes });
+	}
 
-  undo(): void {
-    if (this.savedScenes) {
-      const editor = EditorCore.getInstance();
-      editor.scenes.setScenes({ scenes: this.savedScenes });
-    }
-  }
+	undo(): void {
+		if (this.savedScenes) {
+			const editor = EditorCore.getInstance();
+			editor.scenes.setScenes({ scenes: this.savedScenes });
+		}
+	}
 
-  getSceneId(): string {
-    return this.createdScene?.id ?? "";
-  }
+	getSceneId(): string {
+		return this.createdScene?.id ?? "";
+	}
 }
diff --git a/apps/web/src/lib/commands/scene/delete-scene.ts b/apps/web/src/lib/commands/scene/delete-scene.ts
index 017b8f6f..83066e24 100644
--- a/apps/web/src/lib/commands/scene/delete-scene.ts
+++ b/apps/web/src/lib/commands/scene/delete-scene.ts
@@ -4,56 +4,56 @@ import type { TScene } from "@/types/timeline";
 import { canDeleteScene, getFallbackSceneAfterDelete } from "@/lib/scenes";
 
 export class DeleteSceneCommand extends Command {
-  private savedScenes: TScene[] | null = null;
-  private savedActiveSceneId: string | null = null;
-  private deletedScene: TScene | null = null;
+	private savedScenes: TScene[] | null = null;
+	private savedActiveSceneId: string | null = null;
+	private deletedScene: TScene | null = null;
 
-  constructor(private sceneId: string) {
-    super();
-  }
+	constructor(private sceneId: string) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    const scenes = editor.scenes.getScenes();
-    const activeScene = editor.scenes.getActiveScene();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		const scenes = editor.scenes.getScenes();
+		const activeScene = editor.scenes.getActiveScene();
 
-    this.savedScenes = [...scenes];
-    this.savedActiveSceneId = activeScene?.id ?? null;
+		this.savedScenes = [...scenes];
+		this.savedActiveSceneId = activeScene?.id ?? null;
 
-    this.deletedScene = scenes.find((s) => s.id === this.sceneId) ?? null;
+		this.deletedScene = scenes.find((s) => s.id === this.sceneId) ?? null;
 
-    if (!this.deletedScene) {
-      console.error("Scene not found:", this.sceneId);
-      return;
-    }
+		if (!this.deletedScene) {
+			console.error("Scene not found:", this.sceneId);
+			return;
+		}
 
-    const { canDelete, reason } = canDeleteScene({ scene: this.deletedScene });
-    if (!canDelete) {
-      console.error("Cannot delete scene:", reason);
-      return;
-    }
+		const { canDelete, reason } = canDeleteScene({ scene: this.deletedScene });
+		if (!canDelete) {
+			console.error("Cannot delete scene:", reason);
+			return;
+		}
 
-    const updatedScenes = scenes.filter((s) => s.id !== this.sceneId);
+		const updatedScenes = scenes.filter((s) => s.id !== this.sceneId);
 
-    const newActiveScene = getFallbackSceneAfterDelete({
-      scenes: updatedScenes,
-      deletedSceneId: this.sceneId,
-      currentSceneId: activeScene?.id ?? null,
-    });
+		const newActiveScene = getFallbackSceneAfterDelete({
+			scenes: updatedScenes,
+			deletedSceneId: this.sceneId,
+			currentSceneId: activeScene?.id ?? null,
+		});
 
-    editor.scenes.setScenes({
-      scenes: updatedScenes,
-      activeSceneId: newActiveScene?.id,
-    });
-  }
+		editor.scenes.setScenes({
+			scenes: updatedScenes,
+			activeSceneId: newActiveScene?.id,
+		});
+	}
 
-  undo(): void {
-    if (this.savedScenes && this.deletedScene) {
-      const editor = EditorCore.getInstance();
-      editor.scenes.setScenes({
-        scenes: this.savedScenes,
-        activeSceneId: this.savedActiveSceneId ?? undefined,
-      });
-    }
-  }
+	undo(): void {
+		if (this.savedScenes && this.deletedScene) {
+			const editor = EditorCore.getInstance();
+			editor.scenes.setScenes({
+				scenes: this.savedScenes,
+				activeSceneId: this.savedActiveSceneId ?? undefined,
+			});
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/scene/remove-bookmark.ts b/apps/web/src/lib/commands/scene/remove-bookmark.ts
index fe093d56..a3029366 100644
--- a/apps/web/src/lib/commands/scene/remove-bookmark.ts
+++ b/apps/web/src/lib/commands/scene/remove-bookmark.ts
@@ -3,57 +3,57 @@ import { EditorCore } from "@/core";
 import type { TScene } from "@/types/timeline";
 import { updateSceneInArray } from "@/lib/scenes";
 import {
-  getFrameTime,
-  removeBookmarkFromArray,
+	getFrameTime,
+	removeBookmarkFromArray,
 } from "@/lib/timeline/bookmarks";
 
 export class RemoveBookmarkCommand extends Command {
-  private savedScenes: TScene[] | null = null;
-  private frameTime: number = 0;
+	private savedScenes: TScene[] | null = null;
+	private frameTime: number = 0;
 
-  constructor(private time: number) {
-    super();
-  }
+	constructor(private time: number) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    const activeScene = editor.scenes.getActiveScene();
-    const activeProject = editor.project.getActive();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		const activeScene = editor.scenes.getActiveScene();
+		const activeProject = editor.project.getActive();
 
-    if (!activeScene || !activeProject) {
-      return;
-    }
+		if (!activeScene || !activeProject) {
+			return;
+		}
 
-    const scenes = editor.scenes.getScenes();
-    this.savedScenes = [...scenes];
+		const scenes = editor.scenes.getScenes();
+		this.savedScenes = [...scenes];
 
-    this.frameTime = getFrameTime({
-      time: this.time,
-      fps: activeProject.settings.fps,
-    });
+		this.frameTime = getFrameTime({
+			time: this.time,
+			fps: activeProject.settings.fps,
+		});
 
-    const updatedBookmarks = removeBookmarkFromArray({
-      bookmarks: activeScene.bookmarks,
-      frameTime: this.frameTime,
-    });
+		const updatedBookmarks = removeBookmarkFromArray({
+			bookmarks: activeScene.bookmarks,
+			frameTime: this.frameTime,
+		});
 
-    if (updatedBookmarks.length === activeScene.bookmarks.length) {
-      return;
-    }
+		if (updatedBookmarks.length === activeScene.bookmarks.length) {
+			return;
+		}
 
-    const updatedScenes = updateSceneInArray({
-      scenes,
-      sceneId: activeScene.id,
-      updates: { bookmarks: updatedBookmarks },
-    });
+		const updatedScenes = updateSceneInArray({
+			scenes,
+			sceneId: activeScene.id,
+			updates: { bookmarks: updatedBookmarks },
+		});
 
-    editor.scenes.setScenes({ scenes: updatedScenes });
-  }
+		editor.scenes.setScenes({ scenes: updatedScenes });
+	}
 
-  undo(): void {
-    if (this.savedScenes) {
-      const editor = EditorCore.getInstance();
-      editor.scenes.setScenes({ scenes: this.savedScenes });
-    }
-  }
+	undo(): void {
+		if (this.savedScenes) {
+			const editor = EditorCore.getInstance();
+			editor.scenes.setScenes({ scenes: this.savedScenes });
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/scene/rename-scene.ts b/apps/web/src/lib/commands/scene/rename-scene.ts
index 94533209..dc62369d 100644
--- a/apps/web/src/lib/commands/scene/rename-scene.ts
+++ b/apps/web/src/lib/commands/scene/rename-scene.ts
@@ -4,43 +4,43 @@ import type { TScene } from "@/types/timeline";
 import { updateSceneInArray } from "@/lib/scenes";
 
 export class RenameSceneCommand extends Command {
-  private savedScenes: TScene[] | null = null;
-  private previousName: string | null = null;
+	private savedScenes: TScene[] | null = null;
+	private previousName: string | null = null;
 
-  constructor(
-    private sceneId: string,
-    private newName: string,
-  ) {
-    super();
-  }
+	constructor(
+		private sceneId: string,
+		private newName: string,
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    const scenes = editor.scenes.getScenes();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		const scenes = editor.scenes.getScenes();
 
-    this.savedScenes = [...scenes];
+		this.savedScenes = [...scenes];
 
-    const scene = scenes.find((s) => s.id === this.sceneId);
-    if (!scene) {
-      console.error("Scene not found:", this.sceneId);
-      return;
-    }
+		const scene = scenes.find((s) => s.id === this.sceneId);
+		if (!scene) {
+			console.error("Scene not found:", this.sceneId);
+			return;
+		}
 
-    this.previousName = scene.name;
+		this.previousName = scene.name;
 
-    const updatedScenes = updateSceneInArray({
-      scenes,
-      sceneId: this.sceneId,
-      updates: { name: this.newName, updatedAt: new Date() },
-    });
+		const updatedScenes = updateSceneInArray({
+			scenes,
+			sceneId: this.sceneId,
+			updates: { name: this.newName, updatedAt: new Date() },
+		});
 
-    editor.scenes.setScenes({ scenes: updatedScenes });
-  }
+		editor.scenes.setScenes({ scenes: updatedScenes });
+	}
 
-  undo(): void {
-    if (this.savedScenes && this.previousName !== null) {
-      const editor = EditorCore.getInstance();
-      editor.scenes.setScenes({ scenes: this.savedScenes });
-    }
-  }
+	undo(): void {
+		if (this.savedScenes && this.previousName !== null) {
+			const editor = EditorCore.getInstance();
+			editor.scenes.setScenes({ scenes: this.savedScenes });
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/scene/toggle-bookmark.ts b/apps/web/src/lib/commands/scene/toggle-bookmark.ts
index c06dc5df..ac76d8fc 100644
--- a/apps/web/src/lib/commands/scene/toggle-bookmark.ts
+++ b/apps/web/src/lib/commands/scene/toggle-bookmark.ts
@@ -5,48 +5,48 @@ import { updateSceneInArray } from "@/lib/scenes";
 import { getFrameTime, toggleBookmarkInArray } from "@/lib/timeline/bookmarks";
 
 export class ToggleBookmarkCommand extends Command {
-  private savedScenes: TScene[] | null = null;
-  private frameTime: number = 0;
+	private savedScenes: TScene[] | null = null;
+	private frameTime: number = 0;
 
-  constructor(private time: number) {
-    super();
-  }
+	constructor(private time: number) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    const activeScene = editor.scenes.getActiveScene();
-    const activeProject = editor.project.getActive();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		const activeScene = editor.scenes.getActiveScene();
+		const activeProject = editor.project.getActive();
 
-    if (!activeScene || !activeProject) {
-      return;
-    }
+		if (!activeScene || !activeProject) {
+			return;
+		}
 
-    const scenes = editor.scenes.getScenes();
-    this.savedScenes = [...scenes];
+		const scenes = editor.scenes.getScenes();
+		this.savedScenes = [...scenes];
 
-    this.frameTime = getFrameTime({
-      time: this.time,
-      fps: activeProject.settings.fps,
-    });
+		this.frameTime = getFrameTime({
+			time: this.time,
+			fps: activeProject.settings.fps,
+		});
 
-    const updatedBookmarks = toggleBookmarkInArray({
-      bookmarks: activeScene.bookmarks,
-      frameTime: this.frameTime,
-    });
+		const updatedBookmarks = toggleBookmarkInArray({
+			bookmarks: activeScene.bookmarks,
+			frameTime: this.frameTime,
+		});
 
-    const updatedScenes = updateSceneInArray({
-      scenes,
-      sceneId: activeScene.id,
-      updates: { bookmarks: updatedBookmarks },
-    });
+		const updatedScenes = updateSceneInArray({
+			scenes,
+			sceneId: activeScene.id,
+			updates: { bookmarks: updatedBookmarks },
+		});
 
-    editor.scenes.setScenes({ scenes: updatedScenes });
-  }
+		editor.scenes.setScenes({ scenes: updatedScenes });
+	}
 
-  undo(): void {
-    if (this.savedScenes) {
-      const editor = EditorCore.getInstance();
-      editor.scenes.setScenes({ scenes: this.savedScenes });
-    }
-  }
+	undo(): void {
+		if (this.savedScenes) {
+			const editor = EditorCore.getInstance();
+			editor.scenes.setScenes({ scenes: this.savedScenes });
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/clipboard/paste.ts b/apps/web/src/lib/commands/timeline/clipboard/paste.ts
index c9db27bd..f6222e8f 100644
--- a/apps/web/src/lib/commands/timeline/clipboard/paste.ts
+++ b/apps/web/src/lib/commands/timeline/clipboard/paste.ts
@@ -1,244 +1,244 @@
 import { Command } from "@/lib/commands/base-command";
 import { EditorCore } from "@/core";
 import type {
-  TimelineTrack,
-  TimelineElement,
-  ClipboardItem,
+	TimelineTrack,
+	TimelineElement,
+	ClipboardItem,
 } from "@/types/timeline";
 import { generateUUID } from "@/utils/id";
 import { wouldElementOverlap } from "@/lib/timeline/element-utils";
 import {
-  buildEmptyTrack,
-  getHighestInsertIndexForTrack,
+	buildEmptyTrack,
+	getHighestInsertIndexForTrack,
 } from "@/lib/timeline/track-utils";
 
 export class PasteCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
-  private pastedElementIds: string[] = [];
+	private savedState: TimelineTrack[] | null = null;
+	private pastedElementIds: string[] = [];
 
-  constructor(
-    private time: number,
-    private clipboardItems: ClipboardItem[],
-  ) {
-    super();
-  }
+	constructor(
+		private time: number,
+		private clipboardItems: ClipboardItem[],
+	) {
+		super();
+	}
 
-  execute(): void {
-    if (this.clipboardItems.length === 0) return;
+	execute(): void {
+		if (this.clipboardItems.length === 0) return;
 
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
-    this.pastedElementIds = [];
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+		this.pastedElementIds = [];
 
-    const minStart = Math.min(
-      ...this.clipboardItems.map((item) => item.element.startTime),
-    );
+		const minStart = Math.min(
+			...this.clipboardItems.map((item) => item.element.startTime),
+		);
 
-    const updatedTracks = [...this.savedState];
-    const itemsByTrackId = groupClipboardItemsByTrackId({
-      clipboardItems: this.clipboardItems,
-    });
+		const updatedTracks = [...this.savedState];
+		const itemsByTrackId = groupClipboardItemsByTrackId({
+			clipboardItems: this.clipboardItems,
+		});
 
-    for (const [trackId, items] of itemsByTrackId) {
-      const elementsToAdd = buildPastedElements({
-        items,
-        minStart,
-        time: this.time,
-        pastedElementIds: this.pastedElementIds,
-      });
+		for (const [trackId, items] of itemsByTrackId) {
+			const elementsToAdd = buildPastedElements({
+				items,
+				minStart,
+				time: this.time,
+				pastedElementIds: this.pastedElementIds,
+			});
 
-      if (elementsToAdd.length === 0) {
-        continue;
-      }
+			if (elementsToAdd.length === 0) {
+				continue;
+			}
 
-      const trackType = items[0].trackType;
-      const sourceTrackIndex = updatedTracks.findIndex(
-        (track) => track.id === trackId,
-      );
-      const resolvedTargetIndex = resolveTargetTrackIndex({
-        tracks: updatedTracks,
-        sourceTrackIndex,
-        trackType,
-        elements: elementsToAdd,
-      });
+			const trackType = items[0].trackType;
+			const sourceTrackIndex = updatedTracks.findIndex(
+				(track) => track.id === trackId,
+			);
+			const resolvedTargetIndex = resolveTargetTrackIndex({
+				tracks: updatedTracks,
+				sourceTrackIndex,
+				trackType,
+				elements: elementsToAdd,
+			});
 
-      if (resolvedTargetIndex >= 0) {
-        const targetTrack = updatedTracks[resolvedTargetIndex];
-        updatedTracks[resolvedTargetIndex] = {
-          ...targetTrack,
-          elements: [...targetTrack.elements, ...elementsToAdd],
-        } as TimelineTrack;
-        continue;
-      }
+			if (resolvedTargetIndex >= 0) {
+				const targetTrack = updatedTracks[resolvedTargetIndex];
+				updatedTracks[resolvedTargetIndex] = {
+					...targetTrack,
+					elements: [...targetTrack.elements, ...elementsToAdd],
+				} as TimelineTrack;
+				continue;
+			}
 
-      const insertIndex = resolveInsertIndexForNewTrack({
-        tracks: updatedTracks,
-        sourceTrackIndex,
-        trackType,
-      });
-      const newTrack = buildTrackWithElements({
-        trackType,
-        elements: elementsToAdd,
-      });
-      updatedTracks.splice(insertIndex, 0, newTrack);
-    }
+			const insertIndex = resolveInsertIndexForNewTrack({
+				tracks: updatedTracks,
+				sourceTrackIndex,
+				trackType,
+			});
+			const newTrack = buildTrackWithElements({
+				trackType,
+				elements: elementsToAdd,
+			});
+			updatedTracks.splice(insertIndex, 0, newTrack);
+		}
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
 
 function groupClipboardItemsByTrackId({
-  clipboardItems,
+	clipboardItems,
 }: {
-  clipboardItems: ClipboardItem[];
+	clipboardItems: ClipboardItem[];
 }): Map<string, ClipboardItem[]> {
-  const groupedItems = new Map<string, ClipboardItem[]>();
+	const groupedItems = new Map<string, ClipboardItem[]>();
 
-  for (const item of clipboardItems) {
-    const existingItems = groupedItems.get(item.trackId) ?? [];
-    groupedItems.set(item.trackId, [...existingItems, item]);
-  }
+	for (const item of clipboardItems) {
+		const existingItems = groupedItems.get(item.trackId) ?? [];
+		groupedItems.set(item.trackId, [...existingItems, item]);
+	}
 
-  return groupedItems;
+	return groupedItems;
 }
 
 function buildPastedElements({
-  items,
-  minStart,
-  time,
-  pastedElementIds,
+	items,
+	minStart,
+	time,
+	pastedElementIds,
 }: {
-  items: ClipboardItem[];
-  minStart: number;
-  time: number;
-  pastedElementIds: string[];
+	items: ClipboardItem[];
+	minStart: number;
+	time: number;
+	pastedElementIds: string[];
 }): TimelineElement[] {
-  const elementsToAdd: TimelineElement[] = [];
+	const elementsToAdd: TimelineElement[] = [];
 
-  for (const item of items) {
-    const relativeOffset = item.element.startTime - minStart;
-    const startTime = Math.max(0, time + relativeOffset);
-    const newElementId = generateUUID();
+	for (const item of items) {
+		const relativeOffset = item.element.startTime - minStart;
+		const startTime = Math.max(0, time + relativeOffset);
+		const newElementId = generateUUID();
 
-    pastedElementIds.push(newElementId);
-    elementsToAdd.push({
-      ...item.element,
-      id: newElementId,
-      startTime,
-    } as TimelineElement);
-  }
+		pastedElementIds.push(newElementId);
+		elementsToAdd.push({
+			...item.element,
+			id: newElementId,
+			startTime,
+		} as TimelineElement);
+	}
 
-  return elementsToAdd;
+	return elementsToAdd;
 }
 
 function resolveTargetTrackIndex({
-  tracks,
-  sourceTrackIndex,
-  trackType,
-  elements,
+	tracks,
+	sourceTrackIndex,
+	trackType,
+	elements,
 }: {
-  tracks: TimelineTrack[];
-  sourceTrackIndex: number;
-  trackType: ClipboardItem["trackType"];
-  elements: TimelineElement[];
+	tracks: TimelineTrack[];
+	sourceTrackIndex: number;
+	trackType: ClipboardItem["trackType"];
+	elements: TimelineElement[];
 }): number {
-  if (sourceTrackIndex >= 0) {
-    const aboveIndex = sourceTrackIndex - 1;
-    if (aboveIndex < 0) {
-      return -1;
-    }
+	if (sourceTrackIndex >= 0) {
+		const aboveIndex = sourceTrackIndex - 1;
+		if (aboveIndex < 0) {
+			return -1;
+		}
 
-    const aboveTrack = tracks[aboveIndex];
-    if (aboveTrack.type !== trackType) {
-      return -1;
-    }
+		const aboveTrack = tracks[aboveIndex];
+		if (aboveTrack.type !== trackType) {
+			return -1;
+		}
 
-    const canPlaceOnAbove = canPlaceElementsOnTrack({
-      track: aboveTrack,
-      elements,
-    });
-    return canPlaceOnAbove ? aboveIndex : -1;
-  }
+		const canPlaceOnAbove = canPlaceElementsOnTrack({
+			track: aboveTrack,
+			elements,
+		});
+		return canPlaceOnAbove ? aboveIndex : -1;
+	}
 
-  const highestCompatibleIndex = tracks.findIndex(
-    (track) => track.type === trackType,
-  );
-  if (highestCompatibleIndex < 0) {
-    return -1;
-  }
+	const highestCompatibleIndex = tracks.findIndex(
+		(track) => track.type === trackType,
+	);
+	if (highestCompatibleIndex < 0) {
+		return -1;
+	}
 
-  const highestCompatibleTrack = tracks[highestCompatibleIndex];
-  const canPlaceOnHighest = canPlaceElementsOnTrack({
-    track: highestCompatibleTrack,
-    elements,
-  });
+	const highestCompatibleTrack = tracks[highestCompatibleIndex];
+	const canPlaceOnHighest = canPlaceElementsOnTrack({
+		track: highestCompatibleTrack,
+		elements,
+	});
 
-  return canPlaceOnHighest ? highestCompatibleIndex : -1;
+	return canPlaceOnHighest ? highestCompatibleIndex : -1;
 }
 
 function resolveInsertIndexForNewTrack({
-  tracks,
-  sourceTrackIndex,
-  trackType,
+	tracks,
+	sourceTrackIndex,
+	trackType,
 }: {
-  tracks: TimelineTrack[];
-  sourceTrackIndex: number;
-  trackType: ClipboardItem["trackType"];
+	tracks: TimelineTrack[];
+	sourceTrackIndex: number;
+	trackType: ClipboardItem["trackType"];
 }): number {
-  if (sourceTrackIndex >= 0) {
-    return sourceTrackIndex;
-  }
+	if (sourceTrackIndex >= 0) {
+		return sourceTrackIndex;
+	}
 
-  const highestCompatibleIndex = tracks.findIndex(
-    (track) => track.type === trackType,
-  );
-  if (highestCompatibleIndex >= 0) {
-    return highestCompatibleIndex;
-  }
+	const highestCompatibleIndex = tracks.findIndex(
+		(track) => track.type === trackType,
+	);
+	if (highestCompatibleIndex >= 0) {
+		return highestCompatibleIndex;
+	}
 
-  return getHighestInsertIndexForTrack({ tracks, trackType });
+	return getHighestInsertIndexForTrack({ tracks, trackType });
 }
 
 function canPlaceElementsOnTrack({
-  track,
-  elements,
+	track,
+	elements,
 }: {
-  track: TimelineTrack;
-  elements: TimelineElement[];
+	track: TimelineTrack;
+	elements: TimelineElement[];
 }): boolean {
-  for (const element of elements) {
-    const endTime = element.startTime + element.duration;
-    const hasOverlap = wouldElementOverlap({
-      elements: track.elements,
-      startTime: element.startTime,
-      endTime,
-    });
-    if (hasOverlap) {
-      return false;
-    }
-  }
+	for (const element of elements) {
+		const endTime = element.startTime + element.duration;
+		const hasOverlap = wouldElementOverlap({
+			elements: track.elements,
+			startTime: element.startTime,
+			endTime,
+		});
+		if (hasOverlap) {
+			return false;
+		}
+	}
 
-  return true;
+	return true;
 }
 
 function buildTrackWithElements({
-  trackType,
-  elements,
+	trackType,
+	elements,
 }: {
-  trackType: ClipboardItem["trackType"];
-  elements: TimelineElement[];
+	trackType: ClipboardItem["trackType"];
+	elements: TimelineElement[];
 }): TimelineTrack {
-  const newTrackId = generateUUID();
-  const newTrackBase = buildEmptyTrack({ id: newTrackId, type: trackType });
-  return {
-    ...newTrackBase,
-    elements,
-  } as TimelineTrack;
+	const newTrackId = generateUUID();
+	const newTrackBase = buildEmptyTrack({ id: newTrackId, type: trackType });
+	return {
+		...newTrackBase,
+		elements,
+	} as TimelineTrack;
 }
diff --git a/apps/web/src/lib/commands/timeline/element/delete-elements.ts b/apps/web/src/lib/commands/timeline/element/delete-elements.ts
index b9933989..91eb6397 100644
--- a/apps/web/src/lib/commands/timeline/element/delete-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/delete-elements.ts
@@ -4,45 +4,45 @@ import { EditorCore } from "@/core";
 import { isMainTrack } from "@/lib/timeline";
 
 export class DeleteElementsCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(private elements: { trackId: string; elementId: string }[]) {
-    super();
-  }
+	constructor(private elements: { trackId: string; elementId: string }[]) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const updatedTracks = this.savedState
-      .map((track) => {
-        const hasElementsToDelete = this.elements.some(
-          (el) => el.trackId === track.id,
-        );
+		const updatedTracks = this.savedState
+			.map((track) => {
+				const hasElementsToDelete = this.elements.some(
+					(el) => el.trackId === track.id,
+				);
 
-        if (!hasElementsToDelete) {
-          return track;
-        }
+				if (!hasElementsToDelete) {
+					return track;
+				}
 
-        return {
-          ...track,
-          elements: track.elements.filter(
-            (element) =>
-              !this.elements.some(
-                (el) => el.trackId === track.id && el.elementId === element.id,
-              ),
-          ),
-        } as typeof track;
-      })
-      .filter((track) => track.elements.length > 0 || isMainTrack(track));
+				return {
+					...track,
+					elements: track.elements.filter(
+						(element) =>
+							!this.elements.some(
+								(el) => el.trackId === track.id && el.elementId === element.id,
+							),
+					),
+				} as typeof track;
+			})
+			.filter((track) => track.elements.length > 0 || isMainTrack(track));
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts b/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts
index ce83cab2..e6de7db9 100644
--- a/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/duplicate-elements.ts
@@ -3,97 +3,97 @@ import type { TimelineElement, TimelineTrack } from "@/types/timeline";
 import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
 import {
-  buildEmptyTrack,
-  getHighestInsertIndexForTrack,
+	buildEmptyTrack,
+	getHighestInsertIndexForTrack,
 } from "@/lib/timeline/track-utils";
 
 interface DuplicateElementsParams {
-  elements: { trackId: string; elementId: string }[];
+	elements: { trackId: string; elementId: string }[];
 }
 
 export class DuplicateElementsCommand extends Command {
-  private duplicatedIds: string[] = [];
-  private savedState: TimelineTrack[] | null = null;
-  private elements: DuplicateElementsParams["elements"];
+	private duplicatedIds: string[] = [];
+	private savedState: TimelineTrack[] | null = null;
+	private elements: DuplicateElementsParams["elements"];
 
-  constructor({ elements }: DuplicateElementsParams) {
-    super();
-    this.elements = elements;
-  }
+	constructor({ elements }: DuplicateElementsParams) {
+		super();
+		this.elements = elements;
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
-    this.duplicatedIds = [];
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+		this.duplicatedIds = [];
 
-    const updatedTracks = [...this.savedState];
+		const updatedTracks = [...this.savedState];
 
-    for (const track of this.savedState) {
-      const elementsToDuplicate = this.elements.filter(
-        (el) => el.trackId === track.id,
-      );
+		for (const track of this.savedState) {
+			const elementsToDuplicate = this.elements.filter(
+				(el) => el.trackId === track.id,
+			);
 
-      if (elementsToDuplicate.length === 0) {
-        continue;
-      }
+			if (elementsToDuplicate.length === 0) {
+				continue;
+			}
 
-      const elementIdsToDuplicate = new Set(
-        elementsToDuplicate.map((element) => element.elementId),
-      );
-      const newTrackElements: TimelineElement[] = [];
+			const elementIdsToDuplicate = new Set(
+				elementsToDuplicate.map((element) => element.elementId),
+			);
+			const newTrackElements: TimelineElement[] = [];
 
-      for (const element of track.elements) {
-        if (!elementIdsToDuplicate.has(element.id)) {
-          continue;
-        }
+			for (const element of track.elements) {
+				if (!elementIdsToDuplicate.has(element.id)) {
+					continue;
+				}
 
-        const newId = generateUUID();
-        this.duplicatedIds.push(newId);
-        newTrackElements.push(
-          buildDuplicateElement({
-            element,
-            id: newId,
-            startTime: element.startTime,
-          }),
-        );
-      }
+				const newId = generateUUID();
+				this.duplicatedIds.push(newId);
+				newTrackElements.push(
+					buildDuplicateElement({
+						element,
+						id: newId,
+						startTime: element.startTime,
+					}),
+				);
+			}
 
-      const newTrackId = generateUUID();
-      const newTrackBase = buildEmptyTrack({
-        id: newTrackId,
-        type: track.type,
-      });
-      const newTrack = {
-        ...newTrackBase,
-        elements: newTrackElements,
-      } as TimelineTrack;
+			const newTrackId = generateUUID();
+			const newTrackBase = buildEmptyTrack({
+				id: newTrackId,
+				type: track.type,
+			});
+			const newTrack = {
+				...newTrackBase,
+				elements: newTrackElements,
+			} as TimelineTrack;
 
-      const insertIndex = getHighestInsertIndexForTrack({
-        tracks: updatedTracks,
-        trackType: track.type,
-      });
-      updatedTracks.splice(insertIndex, 0, newTrack);
-    }
+			const insertIndex = getHighestInsertIndexForTrack({
+				tracks: updatedTracks,
+				trackType: track.type,
+			});
+			updatedTracks.splice(insertIndex, 0, newTrack);
+		}
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
 
 function buildDuplicateElement({
-  element,
-  id,
-  startTime,
+	element,
+	id,
+	startTime,
 }: {
-  element: TimelineElement;
-  id: string;
-  startTime: number;
+	element: TimelineElement;
+	id: string;
+	startTime: number;
 }): TimelineElement {
-  return { ...element, id, name: `${element.name} (copy)`, startTime };
+	return { ...element, id, name: `${element.name} (copy)`, startTime };
 }
diff --git a/apps/web/src/lib/commands/timeline/element/insert-element.ts b/apps/web/src/lib/commands/timeline/element/insert-element.ts
index 96284827..f95935a5 100644
--- a/apps/web/src/lib/commands/timeline/element/insert-element.ts
+++ b/apps/web/src/lib/commands/timeline/element/insert-element.ts
@@ -1,311 +1,311 @@
 import { Command } from "@/lib/commands/base-command";
 import { EditorCore } from "@/core";
 import type {
-  CreateTimelineElement,
-  TimelineTrack,
-  TimelineElement,
-  TrackType,
-  ElementType,
+	CreateTimelineElement,
+	TimelineTrack,
+	TimelineElement,
+	TrackType,
+	ElementType,
 } from "@/types/timeline";
 import { generateUUID } from "@/utils/id";
 import {
-  requiresMediaId,
-  wouldElementOverlap,
+	requiresMediaId,
+	wouldElementOverlap,
 } from "@/lib/timeline/element-utils";
 import {
-  buildEmptyTrack,
-  canElementGoOnTrack,
-  getDefaultInsertIndexForTrack,
-  validateElementTrackCompatibility,
+	buildEmptyTrack,
+	canElementGoOnTrack,
+	getDefaultInsertIndexForTrack,
+	validateElementTrackCompatibility,
 } from "@/lib/timeline/track-utils";
 import type { MediaAsset } from "@/types/assets";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 type InsertElementPlacement =
-  | { mode: "explicit"; trackId: string }
-  | { mode: "auto"; trackType?: TrackType; insertIndex?: number };
+	| { mode: "explicit"; trackId: string }
+	| { mode: "auto"; trackType?: TrackType; insertIndex?: number };
 
 export interface InsertElementParams {
-  element: CreateTimelineElement;
-  placement: InsertElementPlacement;
+	element: CreateTimelineElement;
+	placement: InsertElementPlacement;
 }
 
 export class InsertElementCommand extends Command {
-  private elementId: string;
-  private savedState: TimelineTrack[] | null = null;
-  private targetTrackId: string | null = null;
+	private elementId: string;
+	private savedState: TimelineTrack[] | null = null;
+	private targetTrackId: string | null = null;
 
-  constructor({ element, placement }: InsertElementParams) {
-    super();
-    this.elementId = generateUUID();
-    this.element = element;
-    this.placement = placement;
-  }
+	constructor({ element, placement }: InsertElementParams) {
+		super();
+		this.elementId = generateUUID();
+		this.element = element;
+		this.placement = placement;
+	}
 
-  private element: CreateTimelineElement;
-  private placement: InsertElementPlacement;
+	private element: CreateTimelineElement;
+	private placement: InsertElementPlacement;
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    if (!this.savedState) {
-      console.error("Tracks not available");
-      return;
-    }
+		if (!this.savedState) {
+			console.error("Tracks not available");
+			return;
+		}
 
-    if (!this.validateElementBasics({ element: this.element })) {
-      return;
-    }
+		if (!this.validateElementBasics({ element: this.element })) {
+			return;
+		}
 
-    const totalElementsInTimeline = this.savedState.reduce(
-      (total, t) => total + t.elements.length,
-      0,
-    );
-    const isFirstElement = totalElementsInTimeline === 0;
+		const totalElementsInTimeline = this.savedState.reduce(
+			(total, t) => total + t.elements.length,
+			0,
+		);
+		const isFirstElement = totalElementsInTimeline === 0;
 
-    const newElement = this.buildElement({ element: this.element });
-    const updateResult = this.resolveTracksWithElement({
-      tracks: this.savedState,
-      element: newElement,
-    });
+		const newElement = this.buildElement({ element: this.element });
+		const updateResult = this.resolveTracksWithElement({
+			tracks: this.savedState,
+			element: newElement,
+		});
 
-    if (!updateResult) {
-      return;
-    }
+		if (!updateResult) {
+			return;
+		}
 
-    const { updatedTracks, targetTrackId } = updateResult;
-    this.targetTrackId = targetTrackId;
+		const { updatedTracks, targetTrackId } = updateResult;
+		this.targetTrackId = targetTrackId;
 
-    const isVisualMedia =
-      newElement.type === "video" || newElement.type === "image";
+		const isVisualMedia =
+			newElement.type === "video" || newElement.type === "image";
 
-    if (isFirstElement && isVisualMedia) {
-      const mediaAssets = editor.media.getAssets();
-      const activeProject = editor.project.getActive();
-      const asset = mediaAssets.find(
-        (item: MediaAsset) => item.id === newElement.mediaId,
-      );
+		if (isFirstElement && isVisualMedia) {
+			const mediaAssets = editor.media.getAssets();
+			const activeProject = editor.project.getActive();
+			const asset = mediaAssets.find(
+				(item: MediaAsset) => item.id === newElement.mediaId,
+			);
 
-      if (asset?.width && asset?.height) {
-        const nextCanvasSize = { width: asset.width, height: asset.height };
-        const shouldSetOriginalCanvasSize =
-          !activeProject?.settings.originalCanvasSize;
-        editor.project.updateSettings({
-          settings: {
-            canvasSize: nextCanvasSize,
-            ...(shouldSetOriginalCanvasSize
-              ? { originalCanvasSize: nextCanvasSize }
-              : {}),
-          },
-          pushHistory: false,
-        });
-      }
+			if (asset?.width && asset?.height) {
+				const nextCanvasSize = { width: asset.width, height: asset.height };
+				const shouldSetOriginalCanvasSize =
+					!activeProject?.settings.originalCanvasSize;
+				editor.project.updateSettings({
+					settings: {
+						canvasSize: nextCanvasSize,
+						...(shouldSetOriginalCanvasSize
+							? { originalCanvasSize: nextCanvasSize }
+							: {}),
+					},
+					pushHistory: false,
+				});
+			}
 
-      if (asset?.type === "video" && asset?.fps) {
-        editor.project.updateSettings({
-          settings: { fps: asset.fps },
-          pushHistory: false,
-        });
-      }
-    }
+			if (asset?.type === "video" && asset?.fps) {
+				editor.project.updateSettings({
+					settings: { fps: asset.fps },
+					pushHistory: false,
+				});
+			}
+		}
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 
-  getElementId(): string {
-    return this.elementId;
-  }
+	getElementId(): string {
+		return this.elementId;
+	}
 
-  getTrackId(): string | null {
-    return this.targetTrackId;
-  }
+	getTrackId(): string | null {
+		return this.targetTrackId;
+	}
 
-  private buildElement({
-    element,
-  }: {
-    element: CreateTimelineElement;
-  }): TimelineElement {
-    return {
-      ...element,
-      id: this.elementId,
-      startTime: element.startTime,
-      trimStart: element.trimStart ?? 0,
-      trimEnd: element.trimEnd ?? 0,
-      duration: element.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
-    } as TimelineElement;
-  }
+	private buildElement({
+		element,
+	}: {
+		element: CreateTimelineElement;
+	}): TimelineElement {
+		return {
+			...element,
+			id: this.elementId,
+			startTime: element.startTime,
+			trimStart: element.trimStart ?? 0,
+			trimEnd: element.trimEnd ?? 0,
+			duration: element.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
+		} as TimelineElement;
+	}
 
-  private validateElementBasics({
-    element,
-  }: {
-    element: CreateTimelineElement;
-  }): boolean {
-    if (requiresMediaId({ element }) && !("mediaId" in element)) {
-      console.error("Element requires mediaId");
-      return false;
-    }
+	private validateElementBasics({
+		element,
+	}: {
+		element: CreateTimelineElement;
+	}): boolean {
+		if (requiresMediaId({ element }) && !("mediaId" in element)) {
+			console.error("Element requires mediaId");
+			return false;
+		}
 
-    if (
-      element.type === "audio" &&
-      element.sourceType === "library" &&
-      !element.sourceUrl
-    ) {
-      console.error("Library audio element must have sourceUrl");
-      return false;
-    }
+		if (
+			element.type === "audio" &&
+			element.sourceType === "library" &&
+			!element.sourceUrl
+		) {
+			console.error("Library audio element must have sourceUrl");
+			return false;
+		}
 
-    if (element.type === "sticker" && !element.iconName) {
-      console.error("Sticker element must have iconName");
-      return false;
-    }
+		if (element.type === "sticker" && !element.iconName) {
+			console.error("Sticker element must have iconName");
+			return false;
+		}
 
-    if (element.type === "text" && !element.content) {
-      console.error("Text element must have content");
-      return false;
-    }
+		if (element.type === "text" && !element.content) {
+			console.error("Text element must have content");
+			return false;
+		}
 
-    return true;
-  }
+		return true;
+	}
 
-  private resolveTracksWithElement({
-    tracks,
-    element,
-  }: {
-    tracks: TimelineTrack[];
-    element: TimelineElement;
-  }): { updatedTracks: TimelineTrack[]; targetTrackId: string } | null {
-    const placement = this.placement;
+	private resolveTracksWithElement({
+		tracks,
+		element,
+	}: {
+		tracks: TimelineTrack[];
+		element: TimelineElement;
+	}): { updatedTracks: TimelineTrack[]; targetTrackId: string } | null {
+		const placement = this.placement;
 
-    if (placement.mode === "explicit") {
-      const targetTrack = tracks.find(
-        (track) => track.id === placement.trackId,
-      );
+		if (placement.mode === "explicit") {
+			const targetTrack = tracks.find(
+				(track) => track.id === placement.trackId,
+			);
 
-      if (!targetTrack) {
-        console.error("Track not found:", placement.trackId);
-        return null;
-      }
+			if (!targetTrack) {
+				console.error("Track not found:", placement.trackId);
+				return null;
+			}
 
-      const validation = validateElementTrackCompatibility({
-        element,
-        track: targetTrack,
-      });
+			const validation = validateElementTrackCompatibility({
+				element,
+				track: targetTrack,
+			});
 
-      if (!validation.isValid) {
-        console.error(validation.errorMessage);
-        return null;
-      }
+			if (!validation.isValid) {
+				console.error(validation.errorMessage);
+				return null;
+			}
 
-      const updatedTracks = tracks.map((track) =>
-        track.id === targetTrack.id
-          ? { ...track, elements: [...track.elements, element] }
-          : track,
-      ) as TimelineTrack[];
+			const updatedTracks = tracks.map((track) =>
+				track.id === targetTrack.id
+					? { ...track, elements: [...track.elements, element] }
+					: track,
+			) as TimelineTrack[];
 
-      return { updatedTracks, targetTrackId: targetTrack.id };
-    }
+			return { updatedTracks, targetTrackId: targetTrack.id };
+		}
 
-    const trackType =
-      placement.trackType ?? this.getTrackTypeForElement({ element });
+		const trackType =
+			placement.trackType ?? this.getTrackTypeForElement({ element });
 
-    if (
-      placement.trackType &&
-      !canElementGoOnTrack({
-        elementType: element.type,
-        trackType,
-      })
-    ) {
-      console.error(
-        `${element.type} elements cannot be placed on ${trackType} tracks`,
-      );
-      return null;
-    }
+		if (
+			placement.trackType &&
+			!canElementGoOnTrack({
+				elementType: element.type,
+				trackType,
+			})
+		) {
+			console.error(
+				`${element.type} elements cannot be placed on ${trackType} tracks`,
+			);
+			return null;
+		}
 
-    const elementEndTime = element.startTime + element.duration;
-    const existingTrack = tracks.find((track) => {
-      if (
-        !canElementGoOnTrack({
-          elementType: element.type,
-          trackType: track.type,
-        })
-      ) {
-        return false;
-      }
+		const elementEndTime = element.startTime + element.duration;
+		const existingTrack = tracks.find((track) => {
+			if (
+				!canElementGoOnTrack({
+					elementType: element.type,
+					trackType: track.type,
+				})
+			) {
+				return false;
+			}
 
-      return !wouldElementOverlap({
-        elements: track.elements,
-        startTime: element.startTime,
-        endTime: elementEndTime,
-      });
-    });
+			return !wouldElementOverlap({
+				elements: track.elements,
+				startTime: element.startTime,
+				endTime: elementEndTime,
+			});
+		});
 
-    if (existingTrack) {
-      const updatedTracks = tracks.map((track) =>
-        track.id === existingTrack.id
-          ? { ...track, elements: [...track.elements, element] }
-          : track,
-      ) as TimelineTrack[];
+		if (existingTrack) {
+			const updatedTracks = tracks.map((track) =>
+				track.id === existingTrack.id
+					? { ...track, elements: [...track.elements, element] }
+					: track,
+			) as TimelineTrack[];
 
-      return { updatedTracks, targetTrackId: existingTrack.id };
-    }
+			return { updatedTracks, targetTrackId: existingTrack.id };
+		}
 
-    const newTrackId = generateUUID();
-    const newTrack = buildEmptyTrack({
-      id: newTrackId,
-      type: trackType,
-    });
-    const newTrackWithElement = {
-      ...newTrack,
-      elements: [...newTrack.elements, element],
-    } as TimelineTrack;
+		const newTrackId = generateUUID();
+		const newTrack = buildEmptyTrack({
+			id: newTrackId,
+			type: trackType,
+		});
+		const newTrackWithElement = {
+			...newTrack,
+			elements: [...newTrack.elements, element],
+		} as TimelineTrack;
 
-    const updatedTracks = [...tracks];
-    const insertIndex =
-      placement.insertIndex ??
-      this.getAutoInsertIndex({ tracks: updatedTracks, trackType });
-    updatedTracks.splice(insertIndex, 0, newTrackWithElement);
+		const updatedTracks = [...tracks];
+		const insertIndex =
+			placement.insertIndex ??
+			this.getAutoInsertIndex({ tracks: updatedTracks, trackType });
+		updatedTracks.splice(insertIndex, 0, newTrackWithElement);
 
-    return { updatedTracks, targetTrackId: newTrackId };
-  }
+		return { updatedTracks, targetTrackId: newTrackId };
+	}
 
-  private getAutoInsertIndex({
-    tracks,
-    trackType,
-  }: {
-    tracks: TimelineTrack[];
-    trackType: TrackType;
-  }): number {
-    if (trackType === "text") {
-      const firstVideoTrackIndex = tracks.findIndex(
-        (track) => track.type === "video",
-      );
-      if (firstVideoTrackIndex >= 0) {
-        return firstVideoTrackIndex;
-      }
-    }
+	private getAutoInsertIndex({
+		tracks,
+		trackType,
+	}: {
+		tracks: TimelineTrack[];
+		trackType: TrackType;
+	}): number {
+		if (trackType === "text") {
+			const firstVideoTrackIndex = tracks.findIndex(
+				(track) => track.type === "video",
+			);
+			if (firstVideoTrackIndex >= 0) {
+				return firstVideoTrackIndex;
+			}
+		}
 
-    return getDefaultInsertIndexForTrack({
-      tracks,
-      trackType,
-    });
-  }
+		return getDefaultInsertIndexForTrack({
+			tracks,
+			trackType,
+		});
+	}
 
-  private getTrackTypeForElement({
-    element,
-  }: {
-    element: { type: ElementType };
-  }): TrackType {
-    if (element.type === "video" || element.type === "image") {
-      return "video";
-    }
-    return element.type;
-  }
+	private getTrackTypeForElement({
+		element,
+	}: {
+		element: { type: ElementType };
+	}): TrackType {
+		if (element.type === "video" || element.type === "image") {
+			return "video";
+		}
+		return element.type;
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/move-elements.ts b/apps/web/src/lib/commands/timeline/element/move-elements.ts
index 1be137eb..2d4f9236 100644
--- a/apps/web/src/lib/commands/timeline/element/move-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/move-elements.ts
@@ -1,127 +1,127 @@
 import { Command } from "@/lib/commands/base-command";
 import { EditorCore } from "@/core";
 import type {
-  TimelineTrack,
-  TimelineElement,
-  TrackType,
+	TimelineTrack,
+	TimelineElement,
+	TrackType,
 } from "@/types/timeline";
 import {
-  buildEmptyTrack,
-  isMainTrack,
-  validateElementTrackCompatibility,
+	buildEmptyTrack,
+	isMainTrack,
+	validateElementTrackCompatibility,
 } from "@/lib/timeline/track-utils";
 
 export class MoveElementCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(
-    private sourceTrackId: string,
-    private targetTrackId: string,
-    private elementId: string,
-    private newStartTime: number,
-    private createTrack?: { type: TrackType; index: number },
-  ) {
-    super();
-  }
+	constructor(
+		private sourceTrackId: string,
+		private targetTrackId: string,
+		private elementId: string,
+		private newStartTime: number,
+		private createTrack?: { type: TrackType; index: number },
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const sourceTrack = this.savedState.find(
-      (t) => t.id === this.sourceTrackId,
-    );
-    const element = sourceTrack?.elements.find(
-      (el) => el.id === this.elementId,
-    );
+		const sourceTrack = this.savedState.find(
+			(t) => t.id === this.sourceTrackId,
+		);
+		const element = sourceTrack?.elements.find(
+			(el) => el.id === this.elementId,
+		);
 
-    if (!sourceTrack || !element) {
-      console.error("Source track or element not found");
-      return;
-    }
+		if (!sourceTrack || !element) {
+			console.error("Source track or element not found");
+			return;
+		}
 
-    let targetTrack = this.savedState.find((t) => t.id === this.targetTrackId);
-    let tracksToUpdate = this.savedState;
-    if (!targetTrack && this.createTrack) {
-      const newTrack = buildEmptyTrack({
-        id: this.targetTrackId,
-        type: this.createTrack.type,
-      });
-      tracksToUpdate = [...this.savedState];
-      tracksToUpdate.splice(this.createTrack.index, 0, newTrack);
-      targetTrack = newTrack;
-    }
-    if (!targetTrack) {
-      console.error("Target track not found");
-      return;
-    }
+		let targetTrack = this.savedState.find((t) => t.id === this.targetTrackId);
+		let tracksToUpdate = this.savedState;
+		if (!targetTrack && this.createTrack) {
+			const newTrack = buildEmptyTrack({
+				id: this.targetTrackId,
+				type: this.createTrack.type,
+			});
+			tracksToUpdate = [...this.savedState];
+			tracksToUpdate.splice(this.createTrack.index, 0, newTrack);
+			targetTrack = newTrack;
+		}
+		if (!targetTrack) {
+			console.error("Target track not found");
+			return;
+		}
 
-    const validation = validateElementTrackCompatibility({
-      element,
-      track: targetTrack,
-    });
+		const validation = validateElementTrackCompatibility({
+			element,
+			track: targetTrack,
+		});
 
-    if (!validation.isValid) {
-      console.error(validation.errorMessage);
-      return;
-    }
+		if (!validation.isValid) {
+			console.error(validation.errorMessage);
+			return;
+		}
 
-    const movedElement: TimelineElement = {
-      ...element,
-      startTime: this.newStartTime,
-    };
+		const movedElement: TimelineElement = {
+			...element,
+			startTime: this.newStartTime,
+		};
 
-    const isSameTrack = this.sourceTrackId === this.targetTrackId;
+		const isSameTrack = this.sourceTrackId === this.targetTrackId;
 
-    let updatedTracks = tracksToUpdate.map((track) => {
-      if (isSameTrack && track.id === this.sourceTrackId) {
-        return {
-          ...track,
-          elements: track.elements.map((el) =>
-            el.id === this.elementId ? movedElement : el,
-          ),
-        };
-      }
+		let updatedTracks = tracksToUpdate.map((track) => {
+			if (isSameTrack && track.id === this.sourceTrackId) {
+				return {
+					...track,
+					elements: track.elements.map((el) =>
+						el.id === this.elementId ? movedElement : el,
+					),
+				};
+			}
 
-      if (track.id === this.sourceTrackId) {
-        return {
-          ...track,
-          elements: track.elements.filter((el) => el.id !== this.elementId),
-        };
-      }
+			if (track.id === this.sourceTrackId) {
+				return {
+					...track,
+					elements: track.elements.filter((el) => el.id !== this.elementId),
+				};
+			}
 
-      if (track.id === this.targetTrackId) {
-        return {
-          ...track,
-          elements: [...track.elements, movedElement],
-        };
-      }
+			if (track.id === this.targetTrackId) {
+				return {
+					...track,
+					elements: [...track.elements, movedElement],
+				};
+			}
 
-      return track;
-    }) as TimelineTrack[];
+			return track;
+		}) as TimelineTrack[];
 
-    if (!isSameTrack) {
-      const sourceTrackAfterMove = updatedTracks.find(
-        (track) => track.id === this.sourceTrackId,
-      );
-      if (
-        sourceTrackAfterMove &&
-        sourceTrackAfterMove.elements.length === 0 &&
-        !isMainTrack(sourceTrackAfterMove)
-      ) {
-        updatedTracks = updatedTracks.filter(
-          (track) => track.id !== this.sourceTrackId,
-        );
-      }
-    }
+		if (!isSameTrack) {
+			const sourceTrackAfterMove = updatedTracks.find(
+				(track) => track.id === this.sourceTrackId,
+			);
+			if (
+				sourceTrackAfterMove &&
+				sourceTrackAfterMove.elements.length === 0 &&
+				!isMainTrack(sourceTrackAfterMove)
+			) {
+				updatedTracks = updatedTracks.filter(
+					(track) => track.id !== this.sourceTrackId,
+				);
+			}
+		}
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/split-elements.ts b/apps/web/src/lib/commands/timeline/element/split-elements.ts
index 7a4159ba..e477f0c0 100644
--- a/apps/web/src/lib/commands/timeline/element/split-elements.ts
+++ b/apps/web/src/lib/commands/timeline/element/split-elements.ts
@@ -4,122 +4,122 @@ import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
 
 export class SplitElementsCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
-  private newElementIds: string[] = [];
-  private affectedElementIds: Set<string> = new Set();
+	private savedState: TimelineTrack[] | null = null;
+	private newElementIds: string[] = [];
+	private affectedElementIds: Set<string> = new Set();
 
-  constructor(
-    private elements: { trackId: string; elementId: string }[],
-    private splitTime: number,
-    private retainSide: "both" | "left" | "right" = "both",
-  ) {
-    super();
-  }
+	constructor(
+		private elements: { trackId: string; elementId: string }[],
+		private splitTime: number,
+		private retainSide: "both" | "left" | "right" = "both",
+	) {
+		super();
+	}
 
-  get splitElementIds(): string[] {
-    return Array.from(this.affectedElementIds);
-  }
+	get splitElementIds(): string[] {
+		return Array.from(this.affectedElementIds);
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
-    this.newElementIds = [];
-    this.affectedElementIds.clear();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+		this.newElementIds = [];
+		this.affectedElementIds.clear();
 
-    const updatedTracks = this.savedState.map((track) => {
-      const elementsToSplit = this.elements.filter(
-        (el) => el.trackId === track.id,
-      );
+		const updatedTracks = this.savedState.map((track) => {
+			const elementsToSplit = this.elements.filter(
+				(el) => el.trackId === track.id,
+			);
 
-      if (elementsToSplit.length === 0) {
-        return track;
-      }
+			if (elementsToSplit.length === 0) {
+				return track;
+			}
 
-      return {
-        ...track,
-        elements: track.elements.flatMap((element) => {
-          const shouldSplit = elementsToSplit.some(
-            (el) => el.elementId === element.id,
-          );
+			return {
+				...track,
+				elements: track.elements.flatMap((element) => {
+					const shouldSplit = elementsToSplit.some(
+						(el) => el.elementId === element.id,
+					);
 
-          if (!shouldSplit) {
-            return [element];
-          }
+					if (!shouldSplit) {
+						return [element];
+					}
 
-          const effectiveStart = element.startTime;
-          const effectiveEnd = element.startTime + element.duration;
+					const effectiveStart = element.startTime;
+					const effectiveEnd = element.startTime + element.duration;
 
-          if (
-            this.splitTime <= effectiveStart ||
-            this.splitTime >= effectiveEnd
-          ) {
-            return [element];
-          }
+					if (
+						this.splitTime <= effectiveStart ||
+						this.splitTime >= effectiveEnd
+					) {
+						return [element];
+					}
 
-          const relativeTime = this.splitTime - element.startTime;
-          const leftVisibleDuration = relativeTime;
-          const rightVisibleDuration = element.duration - relativeTime;
+					const relativeTime = this.splitTime - element.startTime;
+					const leftVisibleDuration = relativeTime;
+					const rightVisibleDuration = element.duration - relativeTime;
 
-          if (this.retainSide === "left") {
-            this.affectedElementIds.add(element.id);
-            return [
-              {
-                ...element,
-                duration: leftVisibleDuration,
-                trimEnd: element.trimEnd + rightVisibleDuration,
-                name: `${element.name} (left)`,
-              },
-            ];
-          }
+					if (this.retainSide === "left") {
+						this.affectedElementIds.add(element.id);
+						return [
+							{
+								...element,
+								duration: leftVisibleDuration,
+								trimEnd: element.trimEnd + rightVisibleDuration,
+								name: `${element.name} (left)`,
+							},
+						];
+					}
 
-          if (this.retainSide === "right") {
-            const newId = generateUUID();
-            this.affectedElementIds.add(newId);
-            return [
-              {
-                ...element,
-                id: newId,
-                startTime: this.splitTime,
-                duration: rightVisibleDuration,
-                trimStart: element.trimStart + leftVisibleDuration,
-                name: `${element.name} (right)`,
-              },
-            ];
-          }
+					if (this.retainSide === "right") {
+						const newId = generateUUID();
+						this.affectedElementIds.add(newId);
+						return [
+							{
+								...element,
+								id: newId,
+								startTime: this.splitTime,
+								duration: rightVisibleDuration,
+								trimStart: element.trimStart + leftVisibleDuration,
+								name: `${element.name} (right)`,
+							},
+						];
+					}
 
-          // "both" - split into two pieces
-          const secondElementId = generateUUID();
-          this.affectedElementIds.add(element.id);
-          this.affectedElementIds.add(secondElementId);
-          this.newElementIds.push(secondElementId);
+					// "both" - split into two pieces
+					const secondElementId = generateUUID();
+					this.affectedElementIds.add(element.id);
+					this.affectedElementIds.add(secondElementId);
+					this.newElementIds.push(secondElementId);
 
-          return [
-            {
-              ...element,
-              duration: leftVisibleDuration,
-              trimEnd: element.trimEnd + rightVisibleDuration,
-              name: `${element.name} (left)`,
-            },
-            {
-              ...element,
-              id: secondElementId,
-              startTime: this.splitTime,
-              duration: rightVisibleDuration,
-              trimStart: element.trimStart + leftVisibleDuration,
-              name: `${element.name} (right)`,
-            },
-          ];
-        }),
-      } as typeof track;
-    });
+					return [
+						{
+							...element,
+							duration: leftVisibleDuration,
+							trimEnd: element.trimEnd + rightVisibleDuration,
+							name: `${element.name} (left)`,
+						},
+						{
+							...element,
+							id: secondElementId,
+							startTime: this.splitTime,
+							duration: rightVisibleDuration,
+							trimStart: element.trimStart + leftVisibleDuration,
+							name: `${element.name} (right)`,
+						},
+					];
+				}),
+			} as typeof track;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts b/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts
index e0eb5c31..1fa7421e 100644
--- a/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts
+++ b/apps/web/src/lib/commands/timeline/element/toggle-elements-muted.ts
@@ -4,54 +4,54 @@ import { canElementHaveAudio } from "@/lib/timeline/element-utils";
 import { EditorCore } from "@/core";
 
 export class ToggleElementsMutedCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(private elements: { trackId: string; elementId: string }[]) {
-    super();
-  }
+	constructor(private elements: { trackId: string; elementId: string }[]) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const mutableElements = this.elements.filter(({ trackId, elementId }) => {
-      const track = this.savedState?.find((t) => t.id === trackId);
-      const element = track?.elements.find((e) => e.id === elementId);
-      return element && canElementHaveAudio(element);
-    });
+		const mutableElements = this.elements.filter(({ trackId, elementId }) => {
+			const track = this.savedState?.find((t) => t.id === trackId);
+			const element = track?.elements.find((e) => e.id === elementId);
+			return element && canElementHaveAudio(element);
+		});
 
-    if (mutableElements.length === 0) {
-      return;
-    }
+		if (mutableElements.length === 0) {
+			return;
+		}
 
-    const shouldMute = mutableElements.some(({ trackId, elementId }) => {
-      const track = this.savedState?.find((t) => t.id === trackId);
-      const element = track?.elements.find((e) => e.id === elementId);
-      return element && canElementHaveAudio(element) && !element.muted;
-    });
+		const shouldMute = mutableElements.some(({ trackId, elementId }) => {
+			const track = this.savedState?.find((t) => t.id === trackId);
+			const element = track?.elements.find((e) => e.id === elementId);
+			return element && canElementHaveAudio(element) && !element.muted;
+		});
 
-    const updatedTracks = this.savedState.map((track) => {
-      const newElements = track.elements.map((element) => {
-        const shouldUpdate = mutableElements.some(
-          ({ trackId, elementId }) =>
-            track.id === trackId && element.id === elementId,
-        );
-        return shouldUpdate &&
-          canElementHaveAudio(element) &&
-          element.muted !== shouldMute
-          ? { ...element, muted: shouldMute }
-          : element;
-      });
-      return { ...track, elements: newElements } as typeof track;
-    });
+		const updatedTracks = this.savedState.map((track) => {
+			const newElements = track.elements.map((element) => {
+				const shouldUpdate = mutableElements.some(
+					({ trackId, elementId }) =>
+						track.id === trackId && element.id === elementId,
+				);
+				return shouldUpdate &&
+					canElementHaveAudio(element) &&
+					element.muted !== shouldMute
+					? { ...element, muted: shouldMute }
+					: element;
+			});
+			return { ...track, elements: newElements } as typeof track;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts b/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts
index 74131600..daeb759a 100644
--- a/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts
+++ b/apps/web/src/lib/commands/timeline/element/toggle-elements-visibility.ts
@@ -4,44 +4,44 @@ import { canElementBeHidden } from "@/lib/timeline/element-utils";
 import { EditorCore } from "@/core";
 
 export class ToggleElementsVisibilityCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(private elements: { trackId: string; elementId: string }[]) {
-    super();
-  }
+	constructor(private elements: { trackId: string; elementId: string }[]) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const shouldHide = this.elements.some(({ trackId, elementId }) => {
-      const track = this.savedState?.find((t) => t.id === trackId);
-      const element = track?.elements.find((e) => e.id === elementId);
-      return element && canElementBeHidden(element) && !element.hidden;
-    });
+		const shouldHide = this.elements.some(({ trackId, elementId }) => {
+			const track = this.savedState?.find((t) => t.id === trackId);
+			const element = track?.elements.find((e) => e.id === elementId);
+			return element && canElementBeHidden(element) && !element.hidden;
+		});
 
-    const updatedTracks = this.savedState.map((track) => {
-      const newElements = track.elements.map((element) => {
-        const shouldUpdate = this.elements.some(
-          ({ trackId, elementId }) =>
-            track.id === trackId && element.id === elementId,
-        );
-        return shouldUpdate &&
-          canElementBeHidden(element) &&
-          element.hidden !== shouldHide
-          ? { ...element, hidden: shouldHide }
-          : element;
-      });
-      return { ...track, elements: newElements } as typeof track;
-    });
+		const updatedTracks = this.savedState.map((track) => {
+			const newElements = track.elements.map((element) => {
+				const shouldUpdate = this.elements.some(
+					({ trackId, elementId }) =>
+						track.id === trackId && element.id === elementId,
+				);
+				return shouldUpdate &&
+					canElementBeHidden(element) &&
+					element.hidden !== shouldHide
+					? { ...element, hidden: shouldHide }
+					: element;
+			});
+			return { ...track, elements: newElements } as typeof track;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/update-element-duration.ts b/apps/web/src/lib/commands/timeline/element/update-element-duration.ts
index 7a5a69cf..6b3a860b 100644
--- a/apps/web/src/lib/commands/timeline/element/update-element-duration.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-element-duration.ts
@@ -3,35 +3,35 @@ import type { TimelineTrack } from "@/types/timeline";
 import { EditorCore } from "@/core";
 
 export class UpdateElementDurationCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(
-    private trackId: string,
-    private elementId: string,
-    private duration: number,
-  ) {
-    super();
-  }
+	constructor(
+		private trackId: string,
+		private elementId: string,
+		private duration: number,
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const updatedTracks = this.savedState.map((t) => {
-      if (t.id !== this.trackId) return t;
-      const newElements = t.elements.map((el) =>
-        el.id === this.elementId ? { ...el, duration: this.duration } : el,
-      );
-      return { ...t, elements: newElements } as typeof t;
-    });
+		const updatedTracks = this.savedState.map((t) => {
+			if (t.id !== this.trackId) return t;
+			const newElements = t.elements.map((el) =>
+				el.id === this.elementId ? { ...el, duration: this.duration } : el,
+			);
+			return { ...t, elements: newElements } as typeof t;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts b/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts
index da967226..5312000f 100644
--- a/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-element-start-time.ts
@@ -3,46 +3,46 @@ import type { TimelineTrack } from "@/types/timeline";
 import { EditorCore } from "@/core";
 
 export class UpdateElementStartTimeCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(
-    private elements: { trackId: string; elementId: string }[],
-    private startTime: number,
-  ) {
-    super();
-  }
+	constructor(
+		private elements: { trackId: string; elementId: string }[],
+		private startTime: number,
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const updatedTracks = this.savedState.map((track) => {
-      const hasElementsToUpdate = this.elements.some(
-        (el) => el.trackId === track.id,
-      );
+		const updatedTracks = this.savedState.map((track) => {
+			const hasElementsToUpdate = this.elements.some(
+				(el) => el.trackId === track.id,
+			);
 
-      if (!hasElementsToUpdate) {
-        return track;
-      }
+			if (!hasElementsToUpdate) {
+				return track;
+			}
 
-      const newElements = track.elements.map((element) => {
-        const shouldUpdate = this.elements.some(
-          (el) => el.elementId === element.id && el.trackId === track.id,
-        );
-        return shouldUpdate
-          ? { ...element, startTime: Math.max(0, this.startTime) }
-          : element;
-      });
-      return { ...track, elements: newElements } as typeof track;
-    });
+			const newElements = track.elements.map((element) => {
+				const shouldUpdate = this.elements.some(
+					(el) => el.elementId === element.id && el.trackId === track.id,
+				);
+				return shouldUpdate
+					? { ...element, startTime: Math.max(0, this.startTime) }
+					: element;
+			});
+			return { ...track, elements: newElements } as typeof track;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/update-element-trim.ts b/apps/web/src/lib/commands/timeline/element/update-element-trim.ts
index 1dfd4089..99c63287 100644
--- a/apps/web/src/lib/commands/timeline/element/update-element-trim.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-element-trim.ts
@@ -3,46 +3,46 @@ import type { TimelineTrack } from "@/types/timeline";
 import { EditorCore } from "@/core";
 
 export class UpdateElementTrimCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(
-    private elementId: string,
-    private trimStart: number,
-    private trimEnd: number,
-    private startTime?: number,
-    private duration?: number,
-  ) {
-    super();
-  }
+	constructor(
+		private elementId: string,
+		private trimStart: number,
+		private trimEnd: number,
+		private startTime?: number,
+		private duration?: number,
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const updatedTracks = this.savedState.map((track) => {
-      const newElements = track.elements.map((element) => {
-        if (element.id !== this.elementId) {
-          return element;
-        }
+		const updatedTracks = this.savedState.map((track) => {
+			const newElements = track.elements.map((element) => {
+				if (element.id !== this.elementId) {
+					return element;
+				}
 
-        return {
-          ...element,
-          trimStart: this.trimStart,
-          trimEnd: this.trimEnd,
-          startTime: this.startTime ?? element.startTime,
-          duration: this.duration ?? element.duration,
-        };
-      });
-      return { ...track, elements: newElements } as typeof track;
-    });
+				return {
+					...element,
+					trimStart: this.trimStart,
+					trimEnd: this.trimEnd,
+					startTime: this.startTime ?? element.startTime,
+					duration: this.duration ?? element.duration,
+				};
+			});
+			return { ...track, elements: newElements } as typeof track;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/element/update-text-element.ts b/apps/web/src/lib/commands/timeline/element/update-text-element.ts
index 6a3264ff..e3cc4a32 100644
--- a/apps/web/src/lib/commands/timeline/element/update-text-element.ts
+++ b/apps/web/src/lib/commands/timeline/element/update-text-element.ts
@@ -3,50 +3,50 @@ import type { TextElement, TimelineTrack } from "@/types/timeline";
 import { EditorCore } from "@/core";
 
 export class UpdateTextElementCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(
-    private trackId: string,
-    private elementId: string,
-    private updates: Partial<
-      Pick<
-        TextElement,
-        | "content"
-        | "fontSize"
-        | "fontFamily"
-        | "color"
-        | "backgroundColor"
-        | "textAlign"
-        | "fontWeight"
-        | "fontStyle"
-        | "textDecoration"
-      >
-    >,
-  ) {
-    super();
-  }
+	constructor(
+		private trackId: string,
+		private elementId: string,
+		private updates: Partial<
+			Pick<
+				TextElement,
+				| "content"
+				| "fontSize"
+				| "fontFamily"
+				| "color"
+				| "backgroundColor"
+				| "textAlign"
+				| "fontWeight"
+				| "fontStyle"
+				| "textDecoration"
+			>
+		>,
+	) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const updatedTracks = this.savedState.map((t) => {
-      if (t.id !== this.trackId) return t;
-      const newElements = t.elements.map((el) =>
-        el.id === this.elementId && el.type === "text"
-          ? { ...el, ...this.updates }
-          : el,
-      );
-      return { ...t, elements: newElements } as typeof t;
-    });
+		const updatedTracks = this.savedState.map((t) => {
+			if (t.id !== this.trackId) return t;
+			const newElements = t.elements.map((el) =>
+				el.id === this.elementId && el.type === "text"
+					? { ...el, ...this.updates }
+					: el,
+			);
+			return { ...t, elements: newElements } as typeof t;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/track/add-track.ts b/apps/web/src/lib/commands/timeline/track/add-track.ts
index a71694bc..95338888 100644
--- a/apps/web/src/lib/commands/timeline/track/add-track.ts
+++ b/apps/web/src/lib/commands/timeline/track/add-track.ts
@@ -3,51 +3,51 @@ import type { TrackType, TimelineTrack } from "@/types/timeline";
 import { generateUUID } from "@/utils/id";
 import { EditorCore } from "@/core";
 import {
-  buildEmptyTrack,
-  getDefaultInsertIndexForTrack,
+	buildEmptyTrack,
+	getDefaultInsertIndexForTrack,
 } from "@/lib/timeline/track-utils";
 
 export class AddTrackCommand extends Command {
-  private trackId: string;
-  private savedState: TimelineTrack[] | null = null;
+	private trackId: string;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(
-    private type: TrackType,
-    private index?: number,
-  ) {
-    super();
-    this.trackId = generateUUID();
-  }
+	constructor(
+		private type: TrackType,
+		private index?: number,
+	) {
+		super();
+		this.trackId = generateUUID();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const newTrack: TimelineTrack = buildEmptyTrack({
-      id: this.trackId,
-      type: this.type,
-    });
+		const newTrack: TimelineTrack = buildEmptyTrack({
+			id: this.trackId,
+			type: this.type,
+		});
 
-    const updatedTracks = [...(this.savedState || [])];
-    const insertIndex =
-      this.index ??
-      getDefaultInsertIndexForTrack({
-        tracks: updatedTracks,
-        trackType: this.type,
-      });
-    updatedTracks.splice(insertIndex, 0, newTrack);
+		const updatedTracks = [...(this.savedState || [])];
+		const insertIndex =
+			this.index ??
+			getDefaultInsertIndexForTrack({
+				tracks: updatedTracks,
+				trackType: this.type,
+			});
+		updatedTracks.splice(insertIndex, 0, newTrack);
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 
-  getTrackId(): string {
-    return this.trackId;
-  }
+	getTrackId(): string {
+		return this.trackId;
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/track/remove-track.ts b/apps/web/src/lib/commands/timeline/track/remove-track.ts
index ece47fb0..a32aacd7 100644
--- a/apps/web/src/lib/commands/timeline/track/remove-track.ts
+++ b/apps/web/src/lib/commands/timeline/track/remove-track.ts
@@ -4,32 +4,32 @@ import type { TimelineTrack } from "@/types/timeline";
 import { getMainTrack } from "@/lib/timeline";
 
 export class RemoveTrackCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(private trackId: string) {
-    super();
-  }
+	constructor(private trackId: string) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
-    const targetTrack = this.savedState.find(
-      (track) => track.id === this.trackId,
-    );
-    const mainTrack = getMainTrack({ tracks: this.savedState });
-    if (mainTrack?.id === targetTrack?.id) {
-      return;
-    }
-    const updatedTracks = this.savedState.filter(
-      (track) => track.id !== this.trackId,
-    );
-    editor.timeline.updateTracks(updatedTracks);
-  }
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
+		const targetTrack = this.savedState.find(
+			(track) => track.id === this.trackId,
+		);
+		const mainTrack = getMainTrack({ tracks: this.savedState });
+		if (mainTrack?.id === targetTrack?.id) {
+			return;
+		}
+		const updatedTracks = this.savedState.filter(
+			(track) => track.id !== this.trackId,
+		);
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts b/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts
index b1b81e25..3fe526c7 100644
--- a/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts
+++ b/apps/web/src/lib/commands/timeline/track/toggle-track-mute.ts
@@ -4,36 +4,36 @@ import { EditorCore } from "@/core";
 import { canTracktHaveAudio } from "@/lib/timeline";
 
 export class ToggleTrackMuteCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(private trackId: string) {
-    super();
-  }
+	constructor(private trackId: string) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const targetTrack = this.savedState.find(
-      (track) => track.id === this.trackId,
-    );
-    if (!targetTrack) {
-      return;
-    }
+		const targetTrack = this.savedState.find(
+			(track) => track.id === this.trackId,
+		);
+		if (!targetTrack) {
+			return;
+		}
 
-    const updatedTracks = this.savedState.map((track) =>
-      track.id === this.trackId && canTracktHaveAudio(track)
-        ? { ...track, muted: !track.muted }
-        : track,
-    );
+		const updatedTracks = this.savedState.map((track) =>
+			track.id === this.trackId && canTracktHaveAudio(track)
+				? { ...track, muted: !track.muted }
+				: track,
+		);
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts b/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts
index a28f131a..e81714ac 100644
--- a/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts
+++ b/apps/web/src/lib/commands/timeline/track/toggle-track-visibility.ts
@@ -4,37 +4,37 @@ import { EditorCore } from "@/core";
 import { canTrackBeHidden } from "@/lib/timeline";
 
 export class ToggleTrackVisibilityCommand extends Command {
-  private savedState: TimelineTrack[] | null = null;
+	private savedState: TimelineTrack[] | null = null;
 
-  constructor(private trackId: string) {
-    super();
-  }
+	constructor(private trackId: string) {
+		super();
+	}
 
-  execute(): void {
-    const editor = EditorCore.getInstance();
-    this.savedState = editor.timeline.getTracks();
+	execute(): void {
+		const editor = EditorCore.getInstance();
+		this.savedState = editor.timeline.getTracks();
 
-    const targetTrack = this.savedState.find(
-      (track) => track.id === this.trackId,
-    );
-    if (!targetTrack) {
-      return;
-    }
+		const targetTrack = this.savedState.find(
+			(track) => track.id === this.trackId,
+		);
+		if (!targetTrack) {
+			return;
+		}
 
-    const updatedTracks = this.savedState.map((track) => {
-      if (track.id === this.trackId && canTrackBeHidden(track)) {
-        return { ...track, hidden: !track.hidden };
-      }
-      return track;
-    });
+		const updatedTracks = this.savedState.map((track) => {
+			if (track.id === this.trackId && canTrackBeHidden(track)) {
+				return { ...track, hidden: !track.hidden };
+			}
+			return track;
+		});
 
-    editor.timeline.updateTracks(updatedTracks);
-  }
+		editor.timeline.updateTracks(updatedTracks);
+	}
 
-  undo(): void {
-    if (this.savedState) {
-      const editor = EditorCore.getInstance();
-      editor.timeline.updateTracks(this.savedState);
-    }
-  }
+	undo(): void {
+		if (this.savedState) {
+			const editor = EditorCore.getInstance();
+			editor.timeline.updateTracks(this.savedState);
+		}
+	}
 }
diff --git a/apps/web/src/lib/db/index.ts b/apps/web/src/lib/db/index.ts
index 2a283bc7..290e7c2a 100644
--- a/apps/web/src/lib/db/index.ts
+++ b/apps/web/src/lib/db/index.ts
@@ -6,12 +6,12 @@ import { webEnv } from "@opencut/env/web";
 let _db: ReturnType<typeof drizzle> | null = null;
 
 function getDb() {
-  if (!_db) {
-    const client = postgres(webEnv.DATABASE_URL);
-    _db = drizzle(client, { schema });
-  }
+	if (!_db) {
+		const client = postgres(webEnv.DATABASE_URL);
+		_db = drizzle(client, { schema });
+	}
 
-  return _db;
+	return _db;
 }
 
 export const db = getDb();
diff --git a/apps/web/src/lib/db/schema.ts b/apps/web/src/lib/db/schema.ts
index ff90cd9f..dcd7db67 100644
--- a/apps/web/src/lib/db/schema.ts
+++ b/apps/web/src/lib/db/schema.ts
@@ -1,59 +1,59 @@
 import { pgTable, text, timestamp, boolean } from "drizzle-orm/pg-core";
 
 export const users = pgTable("users", {
-  id: text("id").primaryKey(),
-  name: text("name").notNull(),
-  email: text("email").notNull().unique(),
-  emailVerified: boolean("email_verified").default(false).notNull(),
-  image: text("image"),
-  createdAt: timestamp("created_at")
-    .$defaultFn(() => /* @__PURE__ */ new Date())
-    .notNull(),
-  updatedAt: timestamp("updated_at")
-    .$defaultFn(() => /* @__PURE__ */ new Date())
-    .notNull(),
+	id: text("id").primaryKey(),
+	name: text("name").notNull(),
+	email: text("email").notNull().unique(),
+	emailVerified: boolean("email_verified").default(false).notNull(),
+	image: text("image"),
+	createdAt: timestamp("created_at")
+		.$defaultFn(() => /* @__PURE__ */ new Date())
+		.notNull(),
+	updatedAt: timestamp("updated_at")
+		.$defaultFn(() => /* @__PURE__ */ new Date())
+		.notNull(),
 }).enableRLS();
 
 export const sessions = pgTable("sessions", {
-  id: text("id").primaryKey(),
-  expiresAt: timestamp("expires_at").notNull(),
-  token: text("token").notNull().unique(),
-  createdAt: timestamp("created_at").notNull(),
-  updatedAt: timestamp("updated_at").notNull(),
-  ipAddress: text("ip_address"),
-  userAgent: text("user_agent"),
-  userId: text("user_id")
-    .notNull()
-    .references(() => users.id, { onDelete: "cascade" }),
+	id: text("id").primaryKey(),
+	expiresAt: timestamp("expires_at").notNull(),
+	token: text("token").notNull().unique(),
+	createdAt: timestamp("created_at").notNull(),
+	updatedAt: timestamp("updated_at").notNull(),
+	ipAddress: text("ip_address"),
+	userAgent: text("user_agent"),
+	userId: text("user_id")
+		.notNull()
+		.references(() => users.id, { onDelete: "cascade" }),
 }).enableRLS();
 
 export const accounts = pgTable("accounts", {
-  id: text("id").primaryKey(),
-  accountId: text("account_id").notNull(),
-  providerId: text("provider_id").notNull(),
-  userId: text("user_id")
-    .notNull()
-    .references(() => users.id, { onDelete: "cascade" }),
-  accessToken: text("access_token"),
-  refreshToken: text("refresh_token"),
-  idToken: text("id_token"),
-  accessTokenExpiresAt: timestamp("access_token_expires_at"),
-  refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
-  scope: text("scope"),
-  password: text("password"),
-  createdAt: timestamp("created_at").notNull(),
-  updatedAt: timestamp("updated_at").notNull(),
+	id: text("id").primaryKey(),
+	accountId: text("account_id").notNull(),
+	providerId: text("provider_id").notNull(),
+	userId: text("user_id")
+		.notNull()
+		.references(() => users.id, { onDelete: "cascade" }),
+	accessToken: text("access_token"),
+	refreshToken: text("refresh_token"),
+	idToken: text("id_token"),
+	accessTokenExpiresAt: timestamp("access_token_expires_at"),
+	refreshTokenExpiresAt: timestamp("refresh_token_expires_at"),
+	scope: text("scope"),
+	password: text("password"),
+	createdAt: timestamp("created_at").notNull(),
+	updatedAt: timestamp("updated_at").notNull(),
 }).enableRLS();
 
 export const verifications = pgTable("verifications", {
-  id: text("id").primaryKey(),
-  identifier: text("identifier").notNull(),
-  value: text("value").notNull(),
-  expiresAt: timestamp("expires_at").notNull(),
-  createdAt: timestamp("created_at").$defaultFn(
-    () => /* @__PURE__ */ new Date(),
-  ),
-  updatedAt: timestamp("updated_at").$defaultFn(
-    () => /* @__PURE__ */ new Date(),
-  ),
+	id: text("id").primaryKey(),
+	identifier: text("identifier").notNull(),
+	value: text("value").notNull(),
+	expiresAt: timestamp("expires_at").notNull(),
+	createdAt: timestamp("created_at").$defaultFn(
+		() => /* @__PURE__ */ new Date(),
+	),
+	updatedAt: timestamp("updated_at").$defaultFn(
+		() => /* @__PURE__ */ new Date(),
+	),
 }).enableRLS();
diff --git a/apps/web/src/lib/drag-data.ts b/apps/web/src/lib/drag-data.ts
index be577b83..067b0a35 100644
--- a/apps/web/src/lib/drag-data.ts
+++ b/apps/web/src/lib/drag-data.ts
@@ -4,45 +4,45 @@ const MIME_TYPE = "application/x-timeline-drag";
 let lastDragData: TimelineDragData | null = null;
 
 export function setDragData({
-  dataTransfer,
-  dragData,
+	dataTransfer,
+	dragData,
 }: {
-  dataTransfer: DataTransfer;
-  dragData: TimelineDragData;
+	dataTransfer: DataTransfer;
+	dragData: TimelineDragData;
 }): void {
-  dataTransfer.setData(MIME_TYPE, JSON.stringify(dragData));
-  dataTransfer.setData("text/plain", JSON.stringify(dragData));
-  lastDragData = dragData;
+	dataTransfer.setData(MIME_TYPE, JSON.stringify(dragData));
+	dataTransfer.setData("text/plain", JSON.stringify(dragData));
+	lastDragData = dragData;
 }
 
 export function getDragData({
-  dataTransfer,
+	dataTransfer,
 }: {
-  dataTransfer: DataTransfer;
+	dataTransfer: DataTransfer;
 }): TimelineDragData | null {
-  const data = dataTransfer.getData(MIME_TYPE);
-  if (data) return JSON.parse(data) as TimelineDragData;
+	const data = dataTransfer.getData(MIME_TYPE);
+	if (data) return JSON.parse(data) as TimelineDragData;
 
-  const textData = dataTransfer.getData("text/plain");
-  if (textData) {
-    try {
-      return JSON.parse(textData) as TimelineDragData;
-    } catch {
-      return lastDragData;
-    }
-  }
+	const textData = dataTransfer.getData("text/plain");
+	if (textData) {
+		try {
+			return JSON.parse(textData) as TimelineDragData;
+		} catch {
+			return lastDragData;
+		}
+	}
 
-  return lastDragData;
+	return lastDragData;
 }
 
 export function hasDragData({
-  dataTransfer,
+	dataTransfer,
 }: {
-  dataTransfer: DataTransfer;
+	dataTransfer: DataTransfer;
 }): boolean {
-  return dataTransfer.types.includes(MIME_TYPE) || lastDragData !== null;
+	return dataTransfer.types.includes(MIME_TYPE) || lastDragData !== null;
 }
 
 export function clearDragData(): void {
-  lastDragData = null;
+	lastDragData = null;
 }
diff --git a/apps/web/src/lib/export.ts b/apps/web/src/lib/export.ts
index 33f2499f..67621e16 100644
--- a/apps/web/src/lib/export.ts
+++ b/apps/web/src/lib/export.ts
@@ -1,18 +1,18 @@
 import { EXPORT_MIME_TYPES } from "@/constants/export-constants";
-import { ExportFormat } from "@/types/export";
+import type { ExportFormat } from "@/types/export";
 
 export function getExportMimeType({
-  format,
+	format,
 }: {
-  format: ExportFormat;
+	format: ExportFormat;
 }): string {
-  return EXPORT_MIME_TYPES[format];
+	return EXPORT_MIME_TYPES[format];
 }
 
 export function getExportFileExtension({
-  format,
+	format,
 }: {
-  format: ExportFormat;
+	format: ExportFormat;
 }): string {
-  return `.${format}`;
+	return `.${format}`;
 }
diff --git a/apps/web/src/lib/gradients/canvas.ts b/apps/web/src/lib/gradients/canvas.ts
index acb3a3d7..e2287333 100644
--- a/apps/web/src/lib/gradients/canvas.ts
+++ b/apps/web/src/lib/gradients/canvas.ts
@@ -1,46 +1,46 @@
 import type {
-  GradientAst,
-  Color,
-  ColorStop,
-  GradientOrientation,
+	GradientAst,
+	Color,
+	ColorStop,
+	GradientOrientation,
 } from "./parser";
 import { parseGradient } from "./parser";
 
 type BackgroundLayer =
-  | { type: "color"; value: string }
-  | { type: "gradient"; value: GradientAst };
+	| { type: "color"; value: string }
+	| { type: "gradient"; value: GradientAst };
 
 type LinearPoints = {
-  x0: number;
-  y0: number;
-  x1: number;
-  y1: number;
-  length: number;
+	x0: number;
+	y0: number;
+	x1: number;
+	y1: number;
+	length: number;
 };
 
 type RadialDimensions = {
-  cx: number;
-  cy: number;
-  rx: number;
-  ry: number;
+	cx: number;
+	cy: number;
+	rx: number;
+	ry: number;
 };
 
 type PositionKeyword = "left" | "center" | "right" | "top" | "bottom";
 
 type Distance =
-  | { type: "%"; value: string }
-  | { type: "position-keyword"; value: string }
-  | { type: "calc"; value: string }
-  | { type: "px"; value: string }
-  | { type: "em"; value: string };
+	| { type: "%"; value: string }
+	| { type: "position-keyword"; value: string }
+	| { type: "calc"; value: string }
+	| { type: "px"; value: string }
+	| { type: "em"; value: string };
 
 type Position = { type: "position"; value: { x?: Distance; y?: Distance } };
 
 type Shape = {
-  type: "shape";
-  value: "circle" | "ellipse";
-  style?: Distance | { type: "extent-keyword"; value: string } | Position;
-  at?: Position;
+	type: "shape";
+	value: "circle" | "ellipse";
+	style?: Distance | { type: "extent-keyword"; value: string } | Position;
+	at?: Position;
 };
 
 type DefaultRadial = { type: "default-radial"; at: Position };
@@ -50,874 +50,874 @@ type ExtentKeyword = { type: "extent-keyword"; value: string; at?: Position };
 type RadialOrientation = Shape | ExtentKeyword | DefaultRadial;
 
 const gradientLayerPattern =
-  /^(?:\-(webkit|o|ms|moz)\-)?(linear-gradient|repeating-linear-gradient|radial-gradient|repeating-radial-gradient)/i;
+	/^(?:-(webkit|o|ms|moz)-)?(linear-gradient|repeating-linear-gradient|radial-gradient|repeating-radial-gradient)/i;
 
 export function drawCssBackground({
-  ctx,
-  width,
-  height,
-  css,
+	ctx,
+	width,
+	height,
+	css,
 }: {
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-  width: number;
-  height: number;
-  css: string;
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	css: string;
 }): void {
-  const layers = parseBackgroundLayers({ css });
-  const layersInPaintOrder = layers.slice().reverse();
+	const layers = parseBackgroundLayers({ css });
+	const layersInPaintOrder = layers.slice().reverse();
 
-  for (const layer of layersInPaintOrder) {
-    if (layer.type === "color") {
-      ctx.fillStyle = layer.value;
-      ctx.fillRect(0, 0, width, height);
-      continue;
-    }
+	for (const layer of layersInPaintOrder) {
+		if (layer.type === "color") {
+			ctx.fillStyle = layer.value;
+			ctx.fillRect(0, 0, width, height);
+			continue;
+		}
 
-    drawGradientLayer({ ctx, width, height, gradient: layer.value });
-  }
+		drawGradientLayer({ ctx, width, height, gradient: layer.value });
+	}
 }
 
 const parseBackgroundLayers = ({
-  css,
+	css,
 }: {
-  css: string;
+	css: string;
 }): Array<BackgroundLayer> => {
-  const segments = splitCssLayers({ css });
-  const layers: Array<BackgroundLayer> = [];
+	const segments = splitCssLayers({ css });
+	const layers: Array<BackgroundLayer> = [];
 
-  for (const segment of segments) {
-    if (!segment) {
-      continue;
-    }
+	for (const segment of segments) {
+		if (!segment) {
+			continue;
+		}
 
-    if (gradientLayerPattern.test(segment)) {
-      try {
-        const parsed = parseGradient({ code: segment.trim() });
-        for (const gradient of parsed) {
-          layers.push({ type: "gradient", value: gradient });
-        }
-        continue;
-      } catch {
-        layers.push({ type: "color", value: segment });
-        continue;
-      }
-    }
+		if (gradientLayerPattern.test(segment)) {
+			try {
+				const parsed = parseGradient({ code: segment.trim() });
+				for (const gradient of parsed) {
+					layers.push({ type: "gradient", value: gradient });
+				}
+				continue;
+			} catch {
+				layers.push({ type: "color", value: segment });
+				continue;
+			}
+		}
 
-    layers.push({ type: "color", value: segment });
-  }
+		layers.push({ type: "color", value: segment });
+	}
 
-  return layers;
+	return layers;
 };
 
 const splitCssLayers = ({ css }: { css: string }): Array<string> => {
-  const layers: Array<string> = [];
-  let current = "";
-  let depth = 0;
+	const layers: Array<string> = [];
+	let current = "";
+	let depth = 0;
 
-  for (const char of css) {
-    if (char === "(") {
-      depth += 1;
-    }
-    if (char === ")") {
-      depth = Math.max(0, depth - 1);
-    }
+	for (const char of css) {
+		if (char === "(") {
+			depth += 1;
+		}
+		if (char === ")") {
+			depth = Math.max(0, depth - 1);
+		}
 
-    if (char === "," && depth === 0) {
-      layers.push(current.trim());
-      current = "";
-      continue;
-    }
+		if (char === "," && depth === 0) {
+			layers.push(current.trim());
+			current = "";
+			continue;
+		}
 
-    current += char;
-  }
+		current += char;
+	}
 
-  if (current.trim()) {
-    layers.push(current.trim());
-  }
+	if (current.trim()) {
+		layers.push(current.trim());
+	}
 
-  return layers;
+	return layers;
 };
 
 const drawGradientLayer = ({
-  ctx,
-  width,
-  height,
-  gradient,
+	ctx,
+	width,
+	height,
+	gradient,
 }: {
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-  width: number;
-  height: number;
-  gradient: GradientAst;
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	gradient: GradientAst;
 }): void => {
-  if (gradient.type.includes("linear")) {
-    drawLinearGradient({ ctx, width, height, gradient });
-    return;
-  }
+	if (gradient.type.includes("linear")) {
+		drawLinearGradient({ ctx, width, height, gradient });
+		return;
+	}
 
-  drawRadialGradient({ ctx, width, height, gradient });
+	drawRadialGradient({ ctx, width, height, gradient });
 };
 
 const drawLinearGradient = ({
-  ctx,
-  width,
-  height,
-  gradient,
+	ctx,
+	width,
+	height,
+	gradient,
 }: {
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-  width: number;
-  height: number;
-  gradient: GradientAst;
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	gradient: GradientAst;
 }): void => {
-  const { x0, y0, x1, y1, length } = resolveLinearPoints({
-    width,
-    height,
-    orientation: gradient.orientation,
-  });
-  const canvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);
-  const colorStops = normalizeColorStops({
-    colorStops: gradient.colorStops,
-    gradientLength: length,
-  });
+	const { x0, y0, x1, y1, length } = resolveLinearPoints({
+		width,
+		height,
+		orientation: gradient.orientation,
+	});
+	const canvasGradient = ctx.createLinearGradient(x0, y0, x1, y1);
+	const colorStops = normalizeColorStops({
+		colorStops: gradient.colorStops,
+		gradientLength: length,
+	});
 
-  for (const stop of colorStops) {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }
+	for (const stop of colorStops) {
+		canvasGradient.addColorStop(stop.offset, stop.color);
+	}
 
-  ctx.fillStyle = canvasGradient;
-  ctx.fillRect(0, 0, width, height);
+	ctx.fillStyle = canvasGradient;
+	ctx.fillRect(0, 0, width, height);
 };
 
 const drawRadialGradient = ({
-  ctx,
-  width,
-  height,
-  gradient,
+	ctx,
+	width,
+	height,
+	gradient,
 }: {
-  ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
-  width: number;
-  height: number;
-  gradient: GradientAst;
+	ctx: CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D;
+	width: number;
+	height: number;
+	gradient: GradientAst;
 }): void => {
-  const { cx, cy, rx, ry } = resolveRadialDimensions({
-    width,
-    height,
-    orientation: gradient.orientation,
-  });
-  const gradientLength = Math.max(rx, ry);
-  const colorStops = normalizeColorStops({
-    colorStops: gradient.colorStops,
-    gradientLength,
-  });
+	const { cx, cy, rx, ry } = resolveRadialDimensions({
+		width,
+		height,
+		orientation: gradient.orientation,
+	});
+	const gradientLength = Math.max(rx, ry);
+	const colorStops = normalizeColorStops({
+		colorStops: gradient.colorStops,
+		gradientLength,
+	});
 
-  if (rx === ry || ry === 0) {
-    const canvasGradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, rx);
-    for (const stop of colorStops) {
-      canvasGradient.addColorStop(stop.offset, stop.color);
-    }
-    ctx.fillStyle = canvasGradient;
-    ctx.fillRect(0, 0, width, height);
-    return;
-  }
+	if (rx === ry || ry === 0) {
+		const canvasGradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, rx);
+		for (const stop of colorStops) {
+			canvasGradient.addColorStop(stop.offset, stop.color);
+		}
+		ctx.fillStyle = canvasGradient;
+		ctx.fillRect(0, 0, width, height);
+		return;
+	}
 
-  const scaleY = ry / rx;
-  ctx.save();
-  ctx.translate(cx, cy);
-  ctx.scale(1, scaleY);
-  const canvasGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, rx);
-  for (const stop of colorStops) {
-    canvasGradient.addColorStop(stop.offset, stop.color);
-  }
-  ctx.fillStyle = canvasGradient;
-  ctx.fillRect(-cx, -cy / scaleY, width, height / scaleY);
-  ctx.restore();
+	const scaleY = ry / rx;
+	ctx.save();
+	ctx.translate(cx, cy);
+	ctx.scale(1, scaleY);
+	const canvasGradient = ctx.createRadialGradient(0, 0, 0, 0, 0, rx);
+	for (const stop of colorStops) {
+		canvasGradient.addColorStop(stop.offset, stop.color);
+	}
+	ctx.fillStyle = canvasGradient;
+	ctx.fillRect(-cx, -cy / scaleY, width, height / scaleY);
+	ctx.restore();
 };
 
 const resolveLinearPoints = ({
-  width,
-  height,
-  orientation,
+	width,
+	height,
+	orientation,
 }: {
-  width: number;
-  height: number;
-  orientation: GradientOrientation | undefined;
+	width: number;
+	height: number;
+	orientation: GradientOrientation | undefined;
 }): LinearPoints => {
-  const angle = resolveLinearAngle({ orientation });
-  const radians = (angle * Math.PI) / 180;
-  const dx = Math.sin(radians);
-  const dy = -Math.cos(radians);
-  const centerX = width / 2;
-  const centerY = height / 2;
-  const halfLength = (Math.abs(width * dx) + Math.abs(height * dy)) / 2;
-  const x0 = centerX - dx * halfLength;
-  const y0 = centerY - dy * halfLength;
-  const x1 = centerX + dx * halfLength;
-  const y1 = centerY + dy * halfLength;
-  const length = Math.hypot(x1 - x0, y1 - y0);
+	const angle = resolveLinearAngle({ orientation });
+	const radians = (angle * Math.PI) / 180;
+	const dx = Math.sin(radians);
+	const dy = -Math.cos(radians);
+	const centerX = width / 2;
+	const centerY = height / 2;
+	const halfLength = (Math.abs(width * dx) + Math.abs(height * dy)) / 2;
+	const x0 = centerX - dx * halfLength;
+	const y0 = centerY - dy * halfLength;
+	const x1 = centerX + dx * halfLength;
+	const y1 = centerY + dy * halfLength;
+	const length = Math.hypot(x1 - x0, y1 - y0);
 
-  return { x0, y0, x1, y1, length };
+	return { x0, y0, x1, y1, length };
 };
 
 const resolveLinearAngle = ({
-  orientation,
+	orientation,
 }: {
-  orientation: GradientOrientation | undefined;
+	orientation: GradientOrientation | undefined;
 }): number => {
-  if (!orientation) {
-    return 180;
-  }
+	if (!orientation) {
+		return 180;
+	}
 
-  if (!Array.isArray(orientation)) {
-    if (orientation.type === "angular") {
-      return Number.parseFloat(orientation.value);
-    }
+	if (!Array.isArray(orientation)) {
+		if (orientation.type === "angular") {
+			return Number.parseFloat(orientation.value);
+		}
 
-    if (orientation.type === "directional") {
-      return angleFromDirectional({ value: orientation.value });
-    }
-  }
+		if (orientation.type === "directional") {
+			return angleFromDirectional({ value: orientation.value });
+		}
+	}
 
-  return 180;
+	return 180;
 };
 
 const angleFromDirectional = ({ value }: { value: string }): number => {
-  const normalized = value.toLowerCase().replace("to", "").trim();
-  const parts = normalized.split(/\s+/).filter(Boolean);
-  let dx = 0;
-  let dy = 0;
+	const normalized = value.toLowerCase().replace("to", "").trim();
+	const parts = normalized.split(/\s+/).filter(Boolean);
+	let dx = 0;
+	let dy = 0;
 
-  for (const part of parts) {
-    if (part === "left") {
-      dx = -1;
-    }
-    if (part === "right") {
-      dx = 1;
-    }
-    if (part === "top") {
-      dy = -1;
-    }
-    if (part === "bottom") {
-      dy = 1;
-    }
-  }
+	for (const part of parts) {
+		if (part === "left") {
+			dx = -1;
+		}
+		if (part === "right") {
+			dx = 1;
+		}
+		if (part === "top") {
+			dy = -1;
+		}
+		if (part === "bottom") {
+			dy = 1;
+		}
+	}
 
-  if (dx === 0 && dy === 0) {
-    return 180;
-  }
+	if (dx === 0 && dy === 0) {
+		return 180;
+	}
 
-  const angle = (Math.atan2(dx, -dy) * 180) / Math.PI;
-  return (angle + 360) % 360;
+	const angle = (Math.atan2(dx, -dy) * 180) / Math.PI;
+	return (angle + 360) % 360;
 };
 
 const resolveRadialDimensions = ({
-  width,
-  height,
-  orientation,
+	width,
+	height,
+	orientation,
 }: {
-  width: number;
-  height: number;
-  orientation: GradientOrientation | undefined;
+	width: number;
+	height: number;
+	orientation: GradientOrientation | undefined;
 }): RadialDimensions => {
-  const centerFallback = { cx: width / 2, cy: height / 2 };
-  const radial = Array.isArray(orientation)
-    ? (orientation[0] as RadialOrientation | undefined)
-    : undefined;
+	const centerFallback = { cx: width / 2, cy: height / 2 };
+	const radial = Array.isArray(orientation)
+		? (orientation[0] as RadialOrientation | undefined)
+		: undefined;
 
-  if (!radial) {
-    const { rx, ry } = resolveRadialExtents({
-      width,
-      height,
-      cx: centerFallback.cx,
-      cy: centerFallback.cy,
-      shape: "ellipse",
-      extent: "farthest-corner",
-    });
-    return { ...centerFallback, rx, ry };
-  }
+	if (!radial) {
+		const { rx, ry } = resolveRadialExtents({
+			width,
+			height,
+			cx: centerFallback.cx,
+			cy: centerFallback.cy,
+			shape: "ellipse",
+			extent: "farthest-corner",
+		});
+		return { ...centerFallback, rx, ry };
+	}
 
-  if (radial.type === "shape") {
-    const { cx, cy } = resolveRadialCenter({
-      width,
-      height,
-      position: radial.at,
-    });
-    const shape = radial.value;
+	if (radial.type === "shape") {
+		const { cx, cy } = resolveRadialCenter({
+			width,
+			height,
+			position: radial.at,
+		});
+		const shape = radial.value;
 
-    if (radial.style && radial.style.type === "position") {
-      const xDist = radial.style.value.x;
-      const yDist = radial.style.value.y;
-      const rx = xDist
-        ? resolveEllipseDimension({ distance: xDist, axisSize: width })
-        : width / 2;
-      const ry = yDist
-        ? resolveEllipseDimension({ distance: yDist, axisSize: height })
-        : height / 2;
-      return { cx, cy, rx, ry };
-    }
+		if (radial.style && radial.style.type === "position") {
+			const xDist = radial.style.value.x;
+			const yDist = radial.style.value.y;
+			const rx = xDist
+				? resolveEllipseDimension({ distance: xDist, axisSize: width })
+				: width / 2;
+			const ry = yDist
+				? resolveEllipseDimension({ distance: yDist, axisSize: height })
+				: height / 2;
+			return { cx, cy, rx, ry };
+		}
 
-    if (radial.style && radial.style.type !== "extent-keyword") {
-      const resolvedRadius = resolveDistanceInPixels({
-        distance: radial.style,
-        axisSize: Math.max(width, height),
-      });
-      if (shape === "circle") {
-        return {
-          cx,
-          cy,
-          rx: resolvedRadius ?? 0,
-          ry: resolvedRadius ?? 0,
-        };
-      }
+		if (radial.style && radial.style.type !== "extent-keyword") {
+			const resolvedRadius = resolveDistanceInPixels({
+				distance: radial.style,
+				axisSize: Math.max(width, height),
+			});
+			if (shape === "circle") {
+				return {
+					cx,
+					cy,
+					rx: resolvedRadius ?? 0,
+					ry: resolvedRadius ?? 0,
+				};
+			}
 
-      const radius = resolvedRadius ?? 0;
-      return { cx, cy, rx: radius, ry: radius };
-    }
+			const radius = resolvedRadius ?? 0;
+			return { cx, cy, rx: radius, ry: radius };
+		}
 
-    const extent =
-      radial.style && radial.style.type === "extent-keyword"
-        ? radial.style.value
-        : "farthest-corner";
-    const { rx, ry } = resolveRadialExtents({
-      width,
-      height,
-      cx,
-      cy,
-      shape,
-      extent,
-    });
-    return { cx, cy, rx, ry };
-  }
+		const extent =
+			radial.style && radial.style.type === "extent-keyword"
+				? radial.style.value
+				: "farthest-corner";
+		const { rx, ry } = resolveRadialExtents({
+			width,
+			height,
+			cx,
+			cy,
+			shape,
+			extent,
+		});
+		return { cx, cy, rx, ry };
+	}
 
-  if (radial.type === "extent-keyword") {
-    const { cx, cy } = resolveRadialCenter({
-      width,
-      height,
-      position: radial.at,
-    });
-    const { rx, ry } = resolveRadialExtents({
-      width,
-      height,
-      cx,
-      cy,
-      shape: "ellipse",
-      extent: radial.value,
-    });
-    return { cx, cy, rx, ry };
-  }
+	if (radial.type === "extent-keyword") {
+		const { cx, cy } = resolveRadialCenter({
+			width,
+			height,
+			position: radial.at,
+		});
+		const { rx, ry } = resolveRadialExtents({
+			width,
+			height,
+			cx,
+			cy,
+			shape: "ellipse",
+			extent: radial.value,
+		});
+		return { cx, cy, rx, ry };
+	}
 
-  const { cx, cy } = resolveRadialCenter({
-    width,
-    height,
-    position: radial.at,
-  });
-  const { rx, ry } = resolveRadialExtents({
-    width,
-    height,
-    cx,
-    cy,
-    shape: "ellipse",
-    extent: "farthest-corner",
-  });
-  return { cx, cy, rx, ry };
+	const { cx, cy } = resolveRadialCenter({
+		width,
+		height,
+		position: radial.at,
+	});
+	const { rx, ry } = resolveRadialExtents({
+		width,
+		height,
+		cx,
+		cy,
+		shape: "ellipse",
+		extent: "farthest-corner",
+	});
+	return { cx, cy, rx, ry };
 };
 
 const resolveRadialCenter = ({
-  width,
-  height,
-  position,
+	width,
+	height,
+	position,
 }: {
-  width: number;
-  height: number;
-  position?: Position;
+	width: number;
+	height: number;
+	position?: Position;
 }): { cx: number; cy: number } => {
-  if (!position) {
-    return { cx: width / 2, cy: height / 2 };
-  }
+	if (!position) {
+		return { cx: width / 2, cy: height / 2 };
+	}
 
-  const normalized = normalizePositionKeywords({ position });
-  const cx = resolvePositionValue({
-    distance: normalized.value.x,
-    axisSize: width,
-    axis: "x",
-  });
-  const cy = resolvePositionValue({
-    distance: normalized.value.y,
-    axisSize: height,
-    axis: "y",
-  });
+	const normalized = normalizePositionKeywords({ position });
+	const cx = resolvePositionValue({
+		distance: normalized.value.x,
+		axisSize: width,
+		axis: "x",
+	});
+	const cy = resolvePositionValue({
+		distance: normalized.value.y,
+		axisSize: height,
+		axis: "y",
+	});
 
-  return { cx, cy };
+	return { cx, cy };
 };
 
 const normalizePositionKeywords = ({
-  position,
+	position,
 }: {
-  position: Position;
+	position: Position;
 }): Position => {
-  const xValue = position.value.x;
-  const yValue = position.value.y;
+	const xValue = position.value.x;
+	const yValue = position.value.y;
 
-  if (
-    xValue?.type === "position-keyword" &&
-    yValue?.type === "position-keyword"
-  ) {
-    const xKeyword = xValue.value.toLowerCase() as PositionKeyword;
-    const yKeyword = yValue.value.toLowerCase() as PositionKeyword;
-    const xIsVertical = xKeyword === "top" || xKeyword === "bottom";
-    const yIsHorizontal = yKeyword === "left" || yKeyword === "right";
+	if (
+		xValue?.type === "position-keyword" &&
+		yValue?.type === "position-keyword"
+	) {
+		const xKeyword = xValue.value.toLowerCase() as PositionKeyword;
+		const yKeyword = yValue.value.toLowerCase() as PositionKeyword;
+		const xIsVertical = xKeyword === "top" || xKeyword === "bottom";
+		const yIsHorizontal = yKeyword === "left" || yKeyword === "right";
 
-    if (xIsVertical && yIsHorizontal) {
-      return {
-        type: "position",
-        value: {
-          x: { type: "position-keyword", value: yKeyword },
-          y: { type: "position-keyword", value: xKeyword },
-        },
-      };
-    }
-  }
+		if (xIsVertical && yIsHorizontal) {
+			return {
+				type: "position",
+				value: {
+					x: { type: "position-keyword", value: yKeyword },
+					y: { type: "position-keyword", value: xKeyword },
+				},
+			};
+		}
+	}
 
-  return position;
+	return position;
 };
 
 const resolveRadialExtents = ({
-  width,
-  height,
-  cx,
-  cy,
-  shape,
-  extent,
+	width,
+	height,
+	cx,
+	cy,
+	shape,
+	extent,
 }: {
-  width: number;
-  height: number;
-  cx: number;
-  cy: number;
-  shape: "circle" | "ellipse";
-  extent: string;
+	width: number;
+	height: number;
+	cx: number;
+	cy: number;
+	shape: "circle" | "ellipse";
+	extent: string;
 }): { rx: number; ry: number } => {
-  const left = cx;
-  const right = width - cx;
-  const top = cy;
-  const bottom = height - cy;
+	const left = cx;
+	const right = width - cx;
+	const top = cy;
+	const bottom = height - cy;
 
-  if (shape === "circle") {
-    const distances = [
-      Math.hypot(left, top),
-      Math.hypot(right, top),
-      Math.hypot(left, bottom),
-      Math.hypot(right, bottom),
-    ];
-    if (extent === "closest-side") {
-      return { rx: Math.min(left, right, top, bottom), ry: 0 };
-    }
-    if (extent === "farthest-side") {
-      return { rx: Math.max(left, right, top, bottom), ry: 0 };
-    }
-    if (extent === "closest-corner") {
-      return { rx: Math.min(...distances), ry: 0 };
-    }
-    return { rx: Math.max(...distances), ry: 0 };
-  }
+	if (shape === "circle") {
+		const distances = [
+			Math.hypot(left, top),
+			Math.hypot(right, top),
+			Math.hypot(left, bottom),
+			Math.hypot(right, bottom),
+		];
+		if (extent === "closest-side") {
+			return { rx: Math.min(left, right, top, bottom), ry: 0 };
+		}
+		if (extent === "farthest-side") {
+			return { rx: Math.max(left, right, top, bottom), ry: 0 };
+		}
+		if (extent === "closest-corner") {
+			return { rx: Math.min(...distances), ry: 0 };
+		}
+		return { rx: Math.max(...distances), ry: 0 };
+	}
 
-  if (extent === "closest-side") {
-    return { rx: Math.min(left, right), ry: Math.min(top, bottom) };
-  }
-  if (extent === "farthest-side") {
-    return { rx: Math.max(left, right), ry: Math.max(top, bottom) };
-  }
+	if (extent === "closest-side") {
+		return { rx: Math.min(left, right), ry: Math.min(top, bottom) };
+	}
+	if (extent === "farthest-side") {
+		return { rx: Math.max(left, right), ry: Math.max(top, bottom) };
+	}
 
-  const corners = [
-    { dx: left, dy: top },
-    { dx: right, dy: top },
-    { dx: left, dy: bottom },
-    { dx: right, dy: bottom },
-  ];
-  const sorted = corners
-    .slice()
-    .sort((a, b) => Math.hypot(a.dx, a.dy) - Math.hypot(b.dx, b.dy));
-  const chosen =
-    extent === "closest-corner" ? sorted[0] : sorted[sorted.length - 1];
-  return { rx: Math.abs(chosen.dx), ry: Math.abs(chosen.dy) };
+	const corners = [
+		{ dx: left, dy: top },
+		{ dx: right, dy: top },
+		{ dx: left, dy: bottom },
+		{ dx: right, dy: bottom },
+	];
+	const sorted = corners
+		.slice()
+		.sort((a, b) => Math.hypot(a.dx, a.dy) - Math.hypot(b.dx, b.dy));
+	const chosen =
+		extent === "closest-corner" ? sorted[0] : sorted[sorted.length - 1];
+	return { rx: Math.abs(chosen.dx), ry: Math.abs(chosen.dy) };
 };
 
 const resolvePositionValue = ({
-  distance,
-  axisSize,
-  axis,
+	distance,
+	axisSize,
+	axis,
 }: {
-  distance?: Distance;
-  axisSize: number;
-  axis: "x" | "y";
+	distance?: Distance;
+	axisSize: number;
+	axis: "x" | "y";
 }): number => {
-  if (!distance) {
-    return axisSize / 2;
-  }
+	if (!distance) {
+		return axisSize / 2;
+	}
 
-  if (distance.type === "%") {
-    return (Number.parseFloat(distance.value) / 100) * axisSize;
-  }
+	if (distance.type === "%") {
+		return (Number.parseFloat(distance.value) / 100) * axisSize;
+	}
 
-  if (distance.type === "position-keyword") {
-    return keywordToPosition({
-      value: distance.value,
-      axisSize,
-      axis,
-    });
-  }
+	if (distance.type === "position-keyword") {
+		return keywordToPosition({
+			value: distance.value,
+			axisSize,
+			axis,
+		});
+	}
 
-  if (distance.type === "px") {
-    return Number.parseFloat(distance.value);
-  }
+	if (distance.type === "px") {
+		return Number.parseFloat(distance.value);
+	}
 
-  if (distance.type === "em") {
-    return Number.parseFloat(distance.value) * 16;
-  }
+	if (distance.type === "em") {
+		return Number.parseFloat(distance.value) * 16;
+	}
 
-  return axisSize / 2;
+	return axisSize / 2;
 };
 
 const resolveDistanceInPixels = ({
-  distance,
-  axisSize,
+	distance,
+	axisSize,
 }: {
-  distance: Distance;
-  axisSize: number;
+	distance: Distance;
+	axisSize: number;
 }): number | null => {
-  if (distance.type === "%") {
-    return (Number.parseFloat(distance.value) / 100) * axisSize;
-  }
+	if (distance.type === "%") {
+		return (Number.parseFloat(distance.value) / 100) * axisSize;
+	}
 
-  if (distance.type === "px") {
-    return Number.parseFloat(distance.value);
-  }
+	if (distance.type === "px") {
+		return Number.parseFloat(distance.value);
+	}
 
-  if (distance.type === "em") {
-    return Number.parseFloat(distance.value) * 16;
-  }
+	if (distance.type === "em") {
+		return Number.parseFloat(distance.value) * 16;
+	}
 
-  return null;
+	return null;
 };
 
 const resolveEllipseDimension = ({
-  distance,
-  axisSize,
+	distance,
+	axisSize,
 }: {
-  distance: Distance;
-  axisSize: number;
+	distance: Distance;
+	axisSize: number;
 }): number => {
-  if (distance.type === "%") {
-    return (Number.parseFloat(distance.value) / 100) * axisSize;
-  }
+	if (distance.type === "%") {
+		return (Number.parseFloat(distance.value) / 100) * axisSize;
+	}
 
-  if (distance.type === "px") {
-    return Number.parseFloat(distance.value);
-  }
+	if (distance.type === "px") {
+		return Number.parseFloat(distance.value);
+	}
 
-  if (distance.type === "em") {
-    return Number.parseFloat(distance.value) * 16;
-  }
+	if (distance.type === "em") {
+		return Number.parseFloat(distance.value) * 16;
+	}
 
-  return axisSize / 2;
+	return axisSize / 2;
 };
 
 const keywordToPosition = ({
-  value,
-  axisSize,
-  axis,
+	value,
+	axisSize,
+	axis,
 }: {
-  value: string;
-  axisSize: number;
-  axis: "x" | "y";
+	value: string;
+	axisSize: number;
+	axis: "x" | "y";
 }): number => {
-  const keyword = value.toLowerCase() as PositionKeyword;
+	const keyword = value.toLowerCase() as PositionKeyword;
 
-  if (keyword === "center") {
-    return axisSize / 2;
-  }
+	if (keyword === "center") {
+		return axisSize / 2;
+	}
 
-  if (axis === "x") {
-    if (keyword === "left") {
-      return 0;
-    }
-    if (keyword === "right") {
-      return axisSize;
-    }
-  }
+	if (axis === "x") {
+		if (keyword === "left") {
+			return 0;
+		}
+		if (keyword === "right") {
+			return axisSize;
+		}
+	}
 
-  if (axis === "y") {
-    if (keyword === "top") {
-      return 0;
-    }
-    if (keyword === "bottom") {
-      return axisSize;
-    }
-  }
+	if (axis === "y") {
+		if (keyword === "top") {
+			return 0;
+		}
+		if (keyword === "bottom") {
+			return axisSize;
+		}
+	}
 
-  return axisSize / 2;
+	return axisSize / 2;
 };
 
 const isTransparent = ({ color }: { color: string }): boolean => {
-  const lower = color.toLowerCase().trim();
-  if (lower === "transparent") {
-    return true;
-  }
-  const rgbaMatch = lower.match(
-    /^rgba\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*([\d.]+)\s*\)$/,
-  );
-  if (rgbaMatch && Number.parseFloat(rgbaMatch[1]) === 0) {
-    return true;
-  }
-  return false;
+	const lower = color.toLowerCase().trim();
+	if (lower === "transparent") {
+		return true;
+	}
+	const rgbaMatch = lower.match(
+		/^rgba\(\s*[\d.]+\s*,\s*[\d.]+\s*,\s*[\d.]+\s*,\s*([\d.]+)\s*\)$/,
+	);
+	if (rgbaMatch && Number.parseFloat(rgbaMatch[1]) === 0) {
+		return true;
+	}
+	return false;
 };
 
 const parseColorToRgb = ({
-  color,
+	color,
 }: {
-  color: string;
+	color: string;
 }): { r: number; g: number; b: number; a: number } | null => {
-  const lower = color.toLowerCase().trim();
+	const lower = color.toLowerCase().trim();
 
-  const hexMatch = lower.match(/^#([0-9a-f]{3,8})$/);
-  if (hexMatch) {
-    const hex = hexMatch[1];
-    if (hex.length === 3) {
-      return {
-        r: Number.parseInt(hex[0] + hex[0], 16),
-        g: Number.parseInt(hex[1] + hex[1], 16),
-        b: Number.parseInt(hex[2] + hex[2], 16),
-        a: 1,
-      };
-    }
-    if (hex.length === 6) {
-      return {
-        r: Number.parseInt(hex.slice(0, 2), 16),
-        g: Number.parseInt(hex.slice(2, 4), 16),
-        b: Number.parseInt(hex.slice(4, 6), 16),
-        a: 1,
-      };
-    }
-    if (hex.length === 8) {
-      return {
-        r: Number.parseInt(hex.slice(0, 2), 16),
-        g: Number.parseInt(hex.slice(2, 4), 16),
-        b: Number.parseInt(hex.slice(4, 6), 16),
-        a: Number.parseInt(hex.slice(6, 8), 16) / 255,
-      };
-    }
-  }
+	const hexMatch = lower.match(/^#([0-9a-f]{3,8})$/);
+	if (hexMatch) {
+		const hex = hexMatch[1];
+		if (hex.length === 3) {
+			return {
+				r: Number.parseInt(hex[0] + hex[0], 16),
+				g: Number.parseInt(hex[1] + hex[1], 16),
+				b: Number.parseInt(hex[2] + hex[2], 16),
+				a: 1,
+			};
+		}
+		if (hex.length === 6) {
+			return {
+				r: Number.parseInt(hex.slice(0, 2), 16),
+				g: Number.parseInt(hex.slice(2, 4), 16),
+				b: Number.parseInt(hex.slice(4, 6), 16),
+				a: 1,
+			};
+		}
+		if (hex.length === 8) {
+			return {
+				r: Number.parseInt(hex.slice(0, 2), 16),
+				g: Number.parseInt(hex.slice(2, 4), 16),
+				b: Number.parseInt(hex.slice(4, 6), 16),
+				a: Number.parseInt(hex.slice(6, 8), 16) / 255,
+			};
+		}
+	}
 
-  const rgbMatch = lower.match(
-    /^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
-  );
-  if (rgbMatch) {
-    return {
-      r: Number.parseFloat(rgbMatch[1]),
-      g: Number.parseFloat(rgbMatch[2]),
-      b: Number.parseFloat(rgbMatch[3]),
-      a: 1,
-    };
-  }
+	const rgbMatch = lower.match(
+		/^rgb\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
+	);
+	if (rgbMatch) {
+		return {
+			r: Number.parseFloat(rgbMatch[1]),
+			g: Number.parseFloat(rgbMatch[2]),
+			b: Number.parseFloat(rgbMatch[3]),
+			a: 1,
+		};
+	}
 
-  const rgbaMatch = lower.match(
-    /^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
-  );
-  if (rgbaMatch) {
-    return {
-      r: Number.parseFloat(rgbaMatch[1]),
-      g: Number.parseFloat(rgbaMatch[2]),
-      b: Number.parseFloat(rgbaMatch[3]),
-      a: Number.parseFloat(rgbaMatch[4]),
-    };
-  }
+	const rgbaMatch = lower.match(
+		/^rgba\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*\)$/,
+	);
+	if (rgbaMatch) {
+		return {
+			r: Number.parseFloat(rgbaMatch[1]),
+			g: Number.parseFloat(rgbaMatch[2]),
+			b: Number.parseFloat(rgbaMatch[3]),
+			a: Number.parseFloat(rgbaMatch[4]),
+		};
+	}
 
-  return null;
+	return null;
 };
 
 const fixTransparentStops = ({
-  stops,
+	stops,
 }: {
-  stops: Array<{ color: string; offset: number | null }>;
+	stops: Array<{ color: string; offset: number | null }>;
 }): Array<{ color: string; offset: number | null }> => {
-  if (stops.length === 0) {
-    return stops;
-  }
+	if (stops.length === 0) {
+		return stops;
+	}
 
-  const result = stops.map((stop) => ({ ...stop }));
+	const result = stops.map((stop) => ({ ...stop }));
 
-  for (let i = 0; i < result.length; i++) {
-    if (!isTransparent({ color: result[i].color })) {
-      continue;
-    }
+	for (let i = 0; i < result.length; i++) {
+		if (!isTransparent({ color: result[i].color })) {
+			continue;
+		}
 
-    let donorColor: { r: number; g: number; b: number } | null = null;
+		let donorColor: { r: number; g: number; b: number } | null = null;
 
-    for (let j = i - 1; j >= 0; j--) {
-      if (!isTransparent({ color: result[j].color })) {
-        const parsed = parseColorToRgb({ color: result[j].color });
-        if (parsed) {
-          donorColor = parsed;
-          break;
-        }
-      }
-    }
+		for (let j = i - 1; j >= 0; j--) {
+			if (!isTransparent({ color: result[j].color })) {
+				const parsed = parseColorToRgb({ color: result[j].color });
+				if (parsed) {
+					donorColor = parsed;
+					break;
+				}
+			}
+		}
 
-    if (!donorColor) {
-      for (let j = i + 1; j < result.length; j++) {
-        if (!isTransparent({ color: result[j].color })) {
-          const parsed = parseColorToRgb({ color: result[j].color });
-          if (parsed) {
-            donorColor = parsed;
-            break;
-          }
-        }
-      }
-    }
+		if (!donorColor) {
+			for (let j = i + 1; j < result.length; j++) {
+				if (!isTransparent({ color: result[j].color })) {
+					const parsed = parseColorToRgb({ color: result[j].color });
+					if (parsed) {
+						donorColor = parsed;
+						break;
+					}
+				}
+			}
+		}
 
-    if (donorColor) {
-      result[i].color =
-        `rgba(${donorColor.r},${donorColor.g},${donorColor.b},0)`;
-    }
-  }
+		if (donorColor) {
+			result[i].color =
+				`rgba(${donorColor.r},${donorColor.g},${donorColor.b},0)`;
+		}
+	}
 
-  return result;
+	return result;
 };
 
 const normalizeColorStops = ({
-  colorStops,
-  gradientLength,
+	colorStops,
+	gradientLength,
 }: {
-  colorStops: Array<ColorStop>;
-  gradientLength: number;
+	colorStops: Array<ColorStop>;
+	gradientLength: number;
 }): Array<{ color: string; offset: number }> => {
-  const mappedStops = colorStops.map((stop) => ({
-    color: colorToString({ color: stop }),
-    offset: resolveStopOffset({ stop, gradientLength }),
-  }));
+	const mappedStops = colorStops.map((stop) => ({
+		color: colorToString({ color: stop }),
+		offset: resolveStopOffset({ stop, gradientLength }),
+	}));
 
-  const fixedStops = fixTransparentStops({ stops: mappedStops });
-  const resolvedStops = fixedStops.map((stop) => ({ ...stop }));
-  const knownIndices = resolvedStops
-    .map((stop, index) => (stop.offset === null ? null : index))
-    .filter((index): index is number => index !== null);
+	const fixedStops = fixTransparentStops({ stops: mappedStops });
+	const resolvedStops = fixedStops.map((stop) => ({ ...stop }));
+	const knownIndices = resolvedStops
+		.map((stop, index) => (stop.offset === null ? null : index))
+		.filter((index): index is number => index !== null);
 
-  if (knownIndices.length === 0) {
-    const step = resolvedStops.length > 1 ? 1 / (resolvedStops.length - 1) : 1;
-    for (let index = 0; index < resolvedStops.length; index += 1) {
-      resolvedStops[index].offset = step * index;
-    }
-    return clampStops({ stops: resolvedStops });
-  }
+	if (knownIndices.length === 0) {
+		const step = resolvedStops.length > 1 ? 1 / (resolvedStops.length - 1) : 1;
+		for (let index = 0; index < resolvedStops.length; index += 1) {
+			resolvedStops[index].offset = step * index;
+		}
+		return clampStops({ stops: resolvedStops });
+	}
 
-  const firstKnown = knownIndices[0];
-  if (resolvedStops[firstKnown].offset === null) {
-    resolvedStops[firstKnown].offset = 0;
-  }
+	const firstKnown = knownIndices[0];
+	if (resolvedStops[firstKnown].offset === null) {
+		resolvedStops[firstKnown].offset = 0;
+	}
 
-  for (let index = 0; index < firstKnown; index += 1) {
-    const nextOffset = resolvedStops[firstKnown].offset ?? 0;
-    resolvedStops[index].offset = (nextOffset * index) / firstKnown;
-  }
+	for (let index = 0; index < firstKnown; index += 1) {
+		const nextOffset = resolvedStops[firstKnown].offset ?? 0;
+		resolvedStops[index].offset = (nextOffset * index) / firstKnown;
+	}
 
-  for (let i = 0; i < knownIndices.length - 1; i += 1) {
-    const startIndex = knownIndices[i];
-    const endIndex = knownIndices[i + 1];
-    const startOffset = resolvedStops[startIndex].offset ?? 0;
-    const endOffset = resolvedStops[endIndex].offset ?? startOffset;
-    const gap = endIndex - startIndex;
+	for (let i = 0; i < knownIndices.length - 1; i += 1) {
+		const startIndex = knownIndices[i];
+		const endIndex = knownIndices[i + 1];
+		const startOffset = resolvedStops[startIndex].offset ?? 0;
+		const endOffset = resolvedStops[endIndex].offset ?? startOffset;
+		const gap = endIndex - startIndex;
 
-    if (gap <= 1) {
-      continue;
-    }
+		if (gap <= 1) {
+			continue;
+		}
 
-    const step = (endOffset - startOffset) / gap;
-    for (let index = 1; index < gap; index += 1) {
-      resolvedStops[startIndex + index].offset = startOffset + step * index;
-    }
-  }
+		const step = (endOffset - startOffset) / gap;
+		for (let index = 1; index < gap; index += 1) {
+			resolvedStops[startIndex + index].offset = startOffset + step * index;
+		}
+	}
 
-  const lastKnown = knownIndices[knownIndices.length - 1];
-  const lastOffset = resolvedStops[lastKnown].offset ?? 1;
-  if (lastKnown < resolvedStops.length - 1) {
-    const gap = resolvedStops.length - 1 - lastKnown;
-    const step = (1 - lastOffset) / gap;
-    for (let index = 1; index <= gap; index += 1) {
-      resolvedStops[lastKnown + index].offset = lastOffset + step * index;
-    }
-  }
+	const lastKnown = knownIndices[knownIndices.length - 1];
+	const lastOffset = resolvedStops[lastKnown].offset ?? 1;
+	if (lastKnown < resolvedStops.length - 1) {
+		const gap = resolvedStops.length - 1 - lastKnown;
+		const step = (1 - lastOffset) / gap;
+		for (let index = 1; index <= gap; index += 1) {
+			resolvedStops[lastKnown + index].offset = lastOffset + step * index;
+		}
+	}
 
-  return clampStops({ stops: resolvedStops });
+	return clampStops({ stops: resolvedStops });
 };
 
 const clampStops = ({
-  stops,
+	stops,
 }: {
-  stops: Array<{ color: string; offset: number | null }>;
+	stops: Array<{ color: string; offset: number | null }>;
 }): Array<{ color: string; offset: number }> => {
-  return stops.map((stop) => ({
-    color: stop.color,
-    offset: clamp01({ value: stop.offset ?? 0 }),
-  }));
+	return stops.map((stop) => ({
+		color: stop.color,
+		offset: clamp01({ value: stop.offset ?? 0 }),
+	}));
 };
 
 const resolveStopOffset = ({
-  stop,
-  gradientLength,
+	stop,
+	gradientLength,
 }: {
-  stop: ColorStop;
-  gradientLength: number;
+	stop: ColorStop;
+	gradientLength: number;
 }): number | null => {
-  if (!stop.length) {
-    return null;
-  }
+	if (!stop.length) {
+		return null;
+	}
 
-  if (stop.length.type === "%") {
-    return Number.parseFloat(stop.length.value) / 100;
-  }
+	if (stop.length.type === "%") {
+		return Number.parseFloat(stop.length.value) / 100;
+	}
 
-  if (stop.length.type === "px") {
-    return Number.parseFloat(stop.length.value) / gradientLength;
-  }
+	if (stop.length.type === "px") {
+		return Number.parseFloat(stop.length.value) / gradientLength;
+	}
 
-  if (stop.length.type === "em") {
-    return (Number.parseFloat(stop.length.value) * 16) / gradientLength;
-  }
+	if (stop.length.type === "em") {
+		return (Number.parseFloat(stop.length.value) * 16) / gradientLength;
+	}
 
-  return null;
+	return null;
 };
 
 const clamp01 = ({ value }: { value: number }): number => {
-  if (value < 0) {
-    return 0;
-  }
-  if (value > 1) {
-    return 1;
-  }
-  return value;
+	if (value < 0) {
+		return 0;
+	}
+	if (value > 1) {
+		return 1;
+	}
+	return value;
 };
 
 const colorToString = ({ color }: { color: Color }): string => {
-  if (color.type === "hex") {
-    return `#${color.value}`;
-  }
+	if (color.type === "hex") {
+		return `#${color.value}`;
+	}
 
-  if (color.type === "literal") {
-    return color.value;
-  }
+	if (color.type === "literal") {
+		return color.value;
+	}
 
-  if (color.type === "rgb") {
-    return `rgb(${color.value.join(",")})`;
-  }
+	if (color.type === "rgb") {
+		return `rgb(${color.value.join(",")})`;
+	}
 
-  if (color.type === "rgba") {
-    return `rgba(${color.value.join(",")})`;
-  }
+	if (color.type === "rgba") {
+		return `rgba(${color.value.join(",")})`;
+	}
 
-  if (color.type === "hsl") {
-    return `hsl(${color.value.join(",")})`;
-  }
+	if (color.type === "hsl") {
+		return `hsl(${color.value.join(",")})`;
+	}
 
-  if (color.type === "hsla") {
-    return `hsla(${color.value.join(",")})`;
-  }
+	if (color.type === "hsla") {
+		return `hsla(${color.value.join(",")})`;
+	}
 
-  return `var(${color.value})`;
+	return `var(${color.value})`;
 };
diff --git a/apps/web/src/lib/gradients/parser.ts b/apps/web/src/lib/gradients/parser.ts
index 38f54723..55440e3c 100644
--- a/apps/web/src/lib/gradients/parser.ts
+++ b/apps/web/src/lib/gradients/parser.ts
@@ -3,21 +3,21 @@
  */
 
 type GradientType =
-  | "linear-gradient"
-  | "repeating-linear-gradient"
-  | "radial-gradient"
-  | "repeating-radial-gradient";
+	| "linear-gradient"
+	| "repeating-linear-gradient"
+	| "radial-gradient"
+	| "repeating-radial-gradient";
 
 type DirectionalOrientation = { type: "directional"; value: string };
 type AngularOrientation = { type: "angular"; value: string };
 type LinearOrientation = DirectionalOrientation | AngularOrientation;
 
 type Distance =
-  | { type: "%"; value: string }
-  | { type: "position-keyword"; value: string }
-  | { type: "calc"; value: string }
-  | { type: "px"; value: string }
-  | { type: "em"; value: string };
+	| { type: "%"; value: string }
+	| { type: "position-keyword"; value: string }
+	| { type: "calc"; value: string }
+	| { type: "px"; value: string }
+	| { type: "em"; value: string };
 
 type PositionValue = { x?: Distance; y?: Distance };
 type Position = { type: "position"; value: PositionValue };
@@ -26,627 +26,627 @@ type ExtentKeyword = { type: "extent-keyword"; value: string };
 
 type ShapeValue = "circle" | "ellipse";
 type Shape = {
-  type: "shape";
-  value: ShapeValue;
-  style?: Distance | ExtentKeyword | Position;
-  at?: Position;
+	type: "shape";
+	value: ShapeValue;
+	style?: Distance | ExtentKeyword | Position;
+	at?: Position;
 };
 
 type DefaultRadial = { type: "default-radial"; at: Position };
 
 type RadialOrientation =
-  | Shape
-  | (ExtentKeyword & { at?: Position })
-  | DefaultRadial;
+	| Shape
+	| (ExtentKeyword & { at?: Position })
+	| DefaultRadial;
 
 export type GradientOrientation = LinearOrientation | Array<RadialOrientation>;
 
 export type Color =
-  | { type: "hex"; value: string }
-  | { type: "literal"; value: string }
-  | { type: "rgb"; value: Array<string> }
-  | { type: "rgba"; value: Array<string> }
-  | { type: "hsl"; value: [string, string, string] }
-  | { type: "hsla"; value: [string, string, string, string] }
-  | { type: "var"; value: string };
+	| { type: "hex"; value: string }
+	| { type: "literal"; value: string }
+	| { type: "rgb"; value: Array<string> }
+	| { type: "rgba"; value: Array<string> }
+	| { type: "hsl"; value: [string, string, string] }
+	| { type: "hsla"; value: [string, string, string, string] }
+	| { type: "var"; value: string };
 
 export type ColorStop = Color & { length?: Distance };
 
 export type GradientAst = {
-  type: GradientType;
-  orientation: GradientOrientation | undefined;
-  colorStops: Array<ColorStop>;
+	type: GradientType;
+	orientation: GradientOrientation | undefined;
+	colorStops: Array<ColorStop>;
 };
 
 type Tokens = {
-  linearGradient: RegExp;
-  repeatingLinearGradient: RegExp;
-  radialGradient: RegExp;
-  repeatingRadialGradient: RegExp;
-  sideOrCorner: RegExp;
-  extentKeywords: RegExp;
-  positionKeywords: RegExp;
-  pixelValue: RegExp;
-  percentageValue: RegExp;
-  emValue: RegExp;
-  angleValue: RegExp;
-  radianValue: RegExp;
-  startCall: RegExp;
-  endCall: RegExp;
-  comma: RegExp;
-  hexColor: RegExp;
-  literalColor: RegExp;
-  rgbColor: RegExp;
-  rgbaColor: RegExp;
-  varColor: RegExp;
-  calcValue: RegExp;
-  variableName: RegExp;
-  number: RegExp;
-  hslColor: RegExp;
-  hslaColor: RegExp;
+	linearGradient: RegExp;
+	repeatingLinearGradient: RegExp;
+	radialGradient: RegExp;
+	repeatingRadialGradient: RegExp;
+	sideOrCorner: RegExp;
+	extentKeywords: RegExp;
+	positionKeywords: RegExp;
+	pixelValue: RegExp;
+	percentageValue: RegExp;
+	emValue: RegExp;
+	angleValue: RegExp;
+	radianValue: RegExp;
+	startCall: RegExp;
+	endCall: RegExp;
+	comma: RegExp;
+	hexColor: RegExp;
+	literalColor: RegExp;
+	rgbColor: RegExp;
+	rgbaColor: RegExp;
+	varColor: RegExp;
+	calcValue: RegExp;
+	variableName: RegExp;
+	number: RegExp;
+	hslColor: RegExp;
+	hslaColor: RegExp;
 };
 
 const tokens: Tokens = {
-  linearGradient: /^(\-(webkit|o|ms|moz)\-)?(linear\-gradient)/i,
-  repeatingLinearGradient:
-    /^(\-(webkit|o|ms|moz)\-)?(repeating\-linear\-gradient)/i,
-  radialGradient: /^(\-(webkit|o|ms|moz)\-)?(radial\-gradient)/i,
-  repeatingRadialGradient:
-    /^(\-(webkit|o|ms|moz)\-)?(repeating\-radial\-gradient)/i,
-  sideOrCorner:
-    /^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
-  extentKeywords:
-    /^(closest\-side|closest\-corner|farthest\-side|farthest\-corner|contain|cover)/,
-  positionKeywords: /^(left|center|right|top|bottom)/i,
-  pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
-  percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))\%/,
-  emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
-  angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
-  radianValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))rad/,
-  startCall: /^\(/,
-  endCall: /^\)/,
-  comma: /^,/,
-  hexColor: /^\#([0-9a-fA-F]+)/,
-  literalColor: /^([a-zA-Z]+)/,
-  rgbColor: /^rgb/i,
-  rgbaColor: /^rgba/i,
-  varColor: /^var/i,
-  calcValue: /^calc/i,
-  variableName: /^(--[a-zA-Z0-9-,\s\#]+)/,
-  number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/,
-  hslColor: /^hsl/i,
-  hslaColor: /^hsla/i,
+	linearGradient: /^(-(webkit|o|ms|moz)-)?(linear-gradient)/i,
+	repeatingLinearGradient:
+		/^(-(webkit|o|ms|moz)-)?(repeating-linear-gradient)/i,
+	radialGradient: /^(-(webkit|o|ms|moz)-)?(radial-gradient)/i,
+	repeatingRadialGradient:
+		/^(-(webkit|o|ms|moz)-)?(repeating-radial-gradient)/i,
+	sideOrCorner:
+		/^to (left (top|bottom)|right (top|bottom)|top (left|right)|bottom (left|right)|left|right|top|bottom)/i,
+	extentKeywords:
+		/^(closest-side|closest-corner|farthest-side|farthest-corner|contain|cover)/,
+	positionKeywords: /^(left|center|right|top|bottom)/i,
+	pixelValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))px/,
+	percentageValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))%/,
+	emValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))em/,
+	angleValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))deg/,
+	radianValue: /^(-?(([0-9]*\.[0-9]+)|([0-9]+\.?)))rad/,
+	startCall: /^\(/,
+	endCall: /^\)/,
+	comma: /^,/,
+	hexColor: /^#([0-9a-fA-F]+)/,
+	literalColor: /^([a-zA-Z]+)/,
+	rgbColor: /^rgb/i,
+	rgbaColor: /^rgba/i,
+	varColor: /^var/i,
+	calcValue: /^calc/i,
+	variableName: /^(--[a-zA-Z0-9-,\s#]+)/,
+	number: /^(([0-9]*\.[0-9]+)|([0-9]+\.?))/,
+	hslColor: /^hsl/i,
+	hslaColor: /^hsla/i,
 };
 
 let input = "";
 
 const error = ({ message }: { message: string }): never => {
-  const err = new Error(`${input}: ${message}`);
-  (err as Error & { source?: string }).source = input;
-  throw err;
+	const err = new Error(`${input}: ${message}`);
+	(err as Error & { source?: string }).source = input;
+	throw err;
 };
 
 const getAst = (): Array<GradientAst> => {
-  const ast = matchListDefinitions();
+	const ast = matchListDefinitions();
 
-  if (input.length > 0) {
-    error({ message: "Invalid input not EOF" });
-  }
+	if (input.length > 0) {
+		error({ message: "Invalid input not EOF" });
+	}
 
-  return ast;
+	return ast;
 };
 
 const matchListDefinitions = (): Array<GradientAst> =>
-  matchListing({ matcher: matchDefinition });
+	matchListing({ matcher: matchDefinition });
 
 const matchDefinition = (): GradientAst | undefined =>
-  matchGradient({
-    gradientType: "linear-gradient",
-    pattern: tokens.linearGradient,
-    orientationMatcher: matchLinearOrientation,
-  }) ||
-  matchGradient({
-    gradientType: "repeating-linear-gradient",
-    pattern: tokens.repeatingLinearGradient,
-    orientationMatcher: matchLinearOrientation,
-  }) ||
-  matchGradient({
-    gradientType: "radial-gradient",
-    pattern: tokens.radialGradient,
-    orientationMatcher: matchListRadialOrientations,
-  }) ||
-  matchGradient({
-    gradientType: "repeating-radial-gradient",
-    pattern: tokens.repeatingRadialGradient,
-    orientationMatcher: matchListRadialOrientations,
-  });
+	matchGradient({
+		gradientType: "linear-gradient",
+		pattern: tokens.linearGradient,
+		orientationMatcher: matchLinearOrientation,
+	}) ||
+	matchGradient({
+		gradientType: "repeating-linear-gradient",
+		pattern: tokens.repeatingLinearGradient,
+		orientationMatcher: matchLinearOrientation,
+	}) ||
+	matchGradient({
+		gradientType: "radial-gradient",
+		pattern: tokens.radialGradient,
+		orientationMatcher: matchListRadialOrientations,
+	}) ||
+	matchGradient({
+		gradientType: "repeating-radial-gradient",
+		pattern: tokens.repeatingRadialGradient,
+		orientationMatcher: matchListRadialOrientations,
+	});
 
 const matchGradient = ({
-  gradientType,
-  pattern,
-  orientationMatcher,
+	gradientType,
+	pattern,
+	orientationMatcher,
 }: {
-  gradientType: GradientType;
-  pattern: RegExp;
-  orientationMatcher: () => GradientOrientation | undefined;
+	gradientType: GradientType;
+	pattern: RegExp;
+	orientationMatcher: () => GradientOrientation | undefined;
 }): GradientAst | undefined =>
-  matchCall({
-    pattern,
-    callback: () => {
-      const orientation = orientationMatcher();
-      if (orientation && !scan({ regexp: tokens.comma })) {
-        error({ message: "Missing comma before color stops" });
-      }
+	matchCall({
+		pattern,
+		callback: () => {
+			const orientation = orientationMatcher();
+			if (orientation && !scan({ regexp: tokens.comma })) {
+				error({ message: "Missing comma before color stops" });
+			}
 
-      return {
-        type: gradientType,
-        orientation,
-        colorStops: matchListing({ matcher: matchColorStop }),
-      };
-    },
-  });
+			return {
+				type: gradientType,
+				orientation,
+				colorStops: matchListing({ matcher: matchColorStop }),
+			};
+		},
+	});
 
 const matchCall = <T>({
-  pattern,
-  callback,
+	pattern,
+	callback,
 }: {
-  pattern: RegExp;
-  callback: (captures: RegExpExecArray) => T;
+	pattern: RegExp;
+	callback: (captures: RegExpExecArray) => T;
 }): T | undefined => {
-  const captures = scan({ regexp: pattern });
+	const captures = scan({ regexp: pattern });
 
-  if (!captures) {
-    return undefined;
-  }
+	if (!captures) {
+		return undefined;
+	}
 
-  if (!scan({ regexp: tokens.startCall })) {
-    error({ message: "Missing (" });
-  }
+	if (!scan({ regexp: tokens.startCall })) {
+		error({ message: "Missing (" });
+	}
 
-  const result = callback(captures);
+	const result = callback(captures);
 
-  if (!scan({ regexp: tokens.endCall })) {
-    error({ message: "Missing )" });
-  }
+	if (!scan({ regexp: tokens.endCall })) {
+		error({ message: "Missing )" });
+	}
 
-  return result;
+	return result;
 };
 
 const matchLinearOrientation = (): LinearOrientation | undefined => {
-  const sideOrCorner = matchSideOrCorner();
-  if (sideOrCorner) {
-    return sideOrCorner;
-  }
+	const sideOrCorner = matchSideOrCorner();
+	if (sideOrCorner) {
+		return sideOrCorner;
+	}
 
-  const legacyDirection = match({
-    type: "position-keyword",
-    pattern: tokens.positionKeywords,
-    captureIndex: 1,
-  });
-  if (legacyDirection) {
-    return {
-      type: "directional",
-      value: legacyDirection.value,
-    };
-  }
+	const legacyDirection = match({
+		type: "position-keyword",
+		pattern: tokens.positionKeywords,
+		captureIndex: 1,
+	});
+	if (legacyDirection) {
+		return {
+			type: "directional",
+			value: legacyDirection.value,
+		};
+	}
 
-  return matchAngle();
+	return matchAngle();
 };
 
 const matchSideOrCorner = (): DirectionalOrientation | undefined =>
-  match({ type: "directional", pattern: tokens.sideOrCorner, captureIndex: 1 });
+	match({ type: "directional", pattern: tokens.sideOrCorner, captureIndex: 1 });
 
 const matchAngle = (): AngularOrientation | undefined =>
-  match({ type: "angular", pattern: tokens.angleValue, captureIndex: 1 }) ||
-  match({ type: "angular", pattern: tokens.radianValue, captureIndex: 1 });
+	match({ type: "angular", pattern: tokens.angleValue, captureIndex: 1 }) ||
+	match({ type: "angular", pattern: tokens.radianValue, captureIndex: 1 });
 
 const matchListRadialOrientations = ():
-  | Array<RadialOrientation>
-  | undefined => {
-  const radialOrientation = matchRadialOrientation();
-  if (!radialOrientation) {
-    return undefined;
-  }
+	| Array<RadialOrientation>
+	| undefined => {
+	const radialOrientation = matchRadialOrientation();
+	if (!radialOrientation) {
+		return undefined;
+	}
 
-  const radialOrientations: Array<RadialOrientation> = [radialOrientation];
-  const lookaheadCache = input;
+	const radialOrientations: Array<RadialOrientation> = [radialOrientation];
+	const lookaheadCache = input;
 
-  if (!scan({ regexp: tokens.comma })) {
-    return radialOrientations;
-  }
+	if (!scan({ regexp: tokens.comma })) {
+		return radialOrientations;
+	}
 
-  const nextRadial = matchRadialOrientation();
-  if (!nextRadial) {
-    input = lookaheadCache;
-    return radialOrientations;
-  }
+	const nextRadial = matchRadialOrientation();
+	if (!nextRadial) {
+		input = lookaheadCache;
+		return radialOrientations;
+	}
 
-  radialOrientations.push(nextRadial);
-  return radialOrientations;
+	radialOrientations.push(nextRadial);
+	return radialOrientations;
 };
 
 const matchRadialOrientation = (): RadialOrientation | undefined => {
-  const radialType = matchCircle() || matchEllipse();
-  if (radialType) {
-    radialType.at = matchAtPosition();
-    return radialType;
-  }
+	const radialType = matchCircle() || matchEllipse();
+	if (radialType) {
+		radialType.at = matchAtPosition();
+		return radialType;
+	}
 
-  const extent = matchExtentKeyword();
-  if (extent) {
-    const positionAt = matchAtPosition();
-    if (positionAt) {
-      return { ...extent, at: positionAt };
-    }
-    return extent;
-  }
+	const extent = matchExtentKeyword();
+	if (extent) {
+		const positionAt = matchAtPosition();
+		if (positionAt) {
+			return { ...extent, at: positionAt };
+		}
+		return extent;
+	}
 
-  const implicitEllipse = matchImplicitEllipse();
-  if (implicitEllipse) {
-    return implicitEllipse;
-  }
+	const implicitEllipse = matchImplicitEllipse();
+	if (implicitEllipse) {
+		return implicitEllipse;
+	}
 
-  const atPosition = matchAtPosition();
-  if (atPosition) {
-    return { type: "default-radial", at: atPosition };
-  }
+	const atPosition = matchAtPosition();
+	if (atPosition) {
+		return { type: "default-radial", at: atPosition };
+	}
 
-  const defaultPosition = matchPositioning();
-  if (defaultPosition) {
-    return { type: "default-radial", at: defaultPosition };
-  }
+	const defaultPosition = matchPositioning();
+	if (defaultPosition) {
+		return { type: "default-radial", at: defaultPosition };
+	}
 
-  return undefined;
+	return undefined;
 };
 
 const matchImplicitEllipse = (): Shape | undefined => {
-  const lookaheadCache = input;
+	const lookaheadCache = input;
 
-  const width = matchDistance();
-  if (!width) {
-    return undefined;
-  }
+	const width = matchDistance();
+	if (!width) {
+		return undefined;
+	}
 
-  const height = matchDistance();
-  if (!height) {
-    input = lookaheadCache;
-    return undefined;
-  }
+	const height = matchDistance();
+	if (!height) {
+		input = lookaheadCache;
+		return undefined;
+	}
 
-  const atPos = matchAtPosition();
-  if (!atPos) {
-    input = lookaheadCache;
-    return undefined;
-  }
+	const atPos = matchAtPosition();
+	if (!atPos) {
+		input = lookaheadCache;
+		return undefined;
+	}
 
-  return {
-    type: "shape",
-    value: "ellipse",
-    style: { type: "position", value: { x: width, y: height } },
-    at: atPos,
-  };
+	return {
+		type: "shape",
+		value: "ellipse",
+		style: { type: "position", value: { x: width, y: height } },
+		at: atPos,
+	};
 };
 
 const matchCircle = (): Shape | undefined => {
-  const circle = match({
-    type: "shape",
-    pattern: /^(circle)/i,
-    captureIndex: 0,
-  }) as Shape | undefined;
+	const circle = match({
+		type: "shape",
+		pattern: /^(circle)/i,
+		captureIndex: 0,
+	}) as Shape | undefined;
 
-  if (!circle) {
-    return undefined;
-  }
+	if (!circle) {
+		return undefined;
+	}
 
-  circle.style = matchLength() || matchExtentKeyword();
-  circle.value = "circle";
-  return circle;
+	circle.style = matchLength() || matchExtentKeyword();
+	circle.value = "circle";
+	return circle;
 };
 
 const matchEllipse = (): Shape | undefined => {
-  const ellipse = match({
-    type: "shape",
-    pattern: /^(ellipse)/i,
-    captureIndex: 0,
-  }) as Shape | undefined;
+	const ellipse = match({
+		type: "shape",
+		pattern: /^(ellipse)/i,
+		captureIndex: 0,
+	}) as Shape | undefined;
 
-  if (!ellipse) {
-    return undefined;
-  }
+	if (!ellipse) {
+		return undefined;
+	}
 
-  ellipse.style = matchPositioning() || matchDistance() || matchExtentKeyword();
-  ellipse.value = "ellipse";
-  return ellipse;
+	ellipse.style = matchPositioning() || matchDistance() || matchExtentKeyword();
+	ellipse.value = "ellipse";
+	return ellipse;
 };
 
 const matchExtentKeyword = (): ExtentKeyword | undefined =>
-  match({
-    type: "extent-keyword",
-    pattern: tokens.extentKeywords,
-    captureIndex: 1,
-  });
+	match({
+		type: "extent-keyword",
+		pattern: tokens.extentKeywords,
+		captureIndex: 1,
+	});
 
 const matchAtPosition = (): Position | undefined => {
-  if (!match({ type: "position", pattern: /^at/, captureIndex: 0 })) {
-    return undefined;
-  }
+	if (!match({ type: "position", pattern: /^at/, captureIndex: 0 })) {
+		return undefined;
+	}
 
-  const positioning = matchPositioning();
-  if (!positioning) {
-    error({ message: "Missing positioning value" });
-  }
+	const positioning = matchPositioning();
+	if (!positioning) {
+		error({ message: "Missing positioning value" });
+	}
 
-  return positioning;
+	return positioning;
 };
 
 const matchPositioning = (): Position | undefined => {
-  const location = matchCoordinates();
+	const location = matchCoordinates();
 
-  if (!location.x && !location.y) {
-    return undefined;
-  }
+	if (!location.x && !location.y) {
+		return undefined;
+	}
 
-  return {
-    type: "position",
-    value: location,
-  };
+	return {
+		type: "position",
+		value: location,
+	};
 };
 
 const matchCoordinates = (): PositionValue => ({
-  x: matchDistance(),
-  y: matchDistance(),
+	x: matchDistance(),
+	y: matchDistance(),
 });
 
 const matchListing = <T>({
-  matcher,
+	matcher,
 }: {
-  matcher: () => T | undefined;
+	matcher: () => T | undefined;
 }): Array<T> => {
-  const captures = matcher();
-  const result: Array<T> = [];
+	const captures = matcher();
+	const result: Array<T> = [];
 
-  if (!captures) {
-    return result;
-  }
+	if (!captures) {
+		return result;
+	}
 
-  result.push(captures);
-  while (scan({ regexp: tokens.comma })) {
-    const nextCapture = matcher() ?? error({ message: "One extra comma" });
-    result.push(nextCapture);
-  }
+	result.push(captures);
+	while (scan({ regexp: tokens.comma })) {
+		const nextCapture = matcher() ?? error({ message: "One extra comma" });
+		result.push(nextCapture);
+	}
 
-  return result;
+	return result;
 };
 
 const matchColorStop = (): ColorStop => {
-  const color = matchColor() ?? error({ message: "Expected color definition" });
-  const length = matchDistance();
-  return { ...color, length };
+	const color = matchColor() ?? error({ message: "Expected color definition" });
+	const length = matchDistance();
+	return { ...color, length };
 };
 
 const matchColor = (): Color | undefined =>
-  matchHexColor() ||
-  matchHSLAColor() ||
-  matchHSLColor() ||
-  matchRGBAColor() ||
-  matchRGBColor() ||
-  matchVarColor() ||
-  matchLiteralColor();
+	matchHexColor() ||
+	matchHSLAColor() ||
+	matchHSLColor() ||
+	matchRGBAColor() ||
+	matchRGBColor() ||
+	matchVarColor() ||
+	matchLiteralColor();
 
 const matchLiteralColor = (): Color | undefined =>
-  match({ type: "literal", pattern: tokens.literalColor, captureIndex: 0 });
+	match({ type: "literal", pattern: tokens.literalColor, captureIndex: 0 });
 
 const matchHexColor = (): Color | undefined =>
-  match({ type: "hex", pattern: tokens.hexColor, captureIndex: 1 });
+	match({ type: "hex", pattern: tokens.hexColor, captureIndex: 1 });
 
 const matchRGBColor = (): Color | undefined =>
-  matchCall({
-    pattern: tokens.rgbColor,
-    callback: () => ({
-      type: "rgb",
-      value: matchListing({ matcher: matchNumber }),
-    }),
-  });
+	matchCall({
+		pattern: tokens.rgbColor,
+		callback: () => ({
+			type: "rgb",
+			value: matchListing({ matcher: matchNumber }),
+		}),
+	});
 
 const matchRGBAColor = (): Color | undefined =>
-  matchCall({
-    pattern: tokens.rgbaColor,
-    callback: () => ({
-      type: "rgba",
-      value: matchListing({ matcher: matchNumber }),
-    }),
-  });
+	matchCall({
+		pattern: tokens.rgbaColor,
+		callback: () => ({
+			type: "rgba",
+			value: matchListing({ matcher: matchNumber }),
+		}),
+	});
 
 const matchVarColor = (): Color | undefined =>
-  matchCall({
-    pattern: tokens.varColor,
-    callback: () => ({
-      type: "var",
-      value: matchVariableName(),
-    }),
-  });
+	matchCall({
+		pattern: tokens.varColor,
+		callback: () => ({
+			type: "var",
+			value: matchVariableName(),
+		}),
+	});
 
 const matchHSLColor = (): Color | undefined =>
-  matchCall({
-    pattern: tokens.hslColor,
-    callback: () => {
-      const lookahead = scan({ regexp: tokens.percentageValue });
-      if (lookahead) {
-        error({
-          message:
-            "HSL hue value must be a number in degrees (0-360) or normalized (-360 to 360), not a percentage",
-        });
-      }
+	matchCall({
+		pattern: tokens.hslColor,
+		callback: () => {
+			const lookahead = scan({ regexp: tokens.percentageValue });
+			if (lookahead) {
+				error({
+					message:
+						"HSL hue value must be a number in degrees (0-360) or normalized (-360 to 360), not a percentage",
+				});
+			}
 
-      const hue = matchNumber();
-      scan({ regexp: tokens.comma });
-      let captures = scan({ regexp: tokens.percentageValue });
-      const sat = captures ? captures[1] : null;
-      scan({ regexp: tokens.comma });
-      captures = scan({ regexp: tokens.percentageValue });
-      const light = captures ? captures[1] : null;
-      const ensuredSat =
-        sat ??
-        error({
-          message:
-            "Expected percentage value for saturation and lightness in HSL",
-        });
-      const ensuredLight =
-        light ??
-        error({
-          message:
-            "Expected percentage value for saturation and lightness in HSL",
-        });
-      return {
-        type: "hsl",
-        value: [hue, ensuredSat, ensuredLight],
-      };
-    },
-  });
+			const hue = matchNumber();
+			scan({ regexp: tokens.comma });
+			let captures = scan({ regexp: tokens.percentageValue });
+			const sat = captures ? captures[1] : null;
+			scan({ regexp: tokens.comma });
+			captures = scan({ regexp: tokens.percentageValue });
+			const light = captures ? captures[1] : null;
+			const ensuredSat =
+				sat ??
+				error({
+					message:
+						"Expected percentage value for saturation and lightness in HSL",
+				});
+			const ensuredLight =
+				light ??
+				error({
+					message:
+						"Expected percentage value for saturation and lightness in HSL",
+				});
+			return {
+				type: "hsl",
+				value: [hue, ensuredSat, ensuredLight],
+			};
+		},
+	});
 
 const matchHSLAColor = (): Color | undefined =>
-  matchCall({
-    pattern: tokens.hslaColor,
-    callback: () => {
-      const hue = matchNumber();
-      scan({ regexp: tokens.comma });
-      let captures = scan({ regexp: tokens.percentageValue });
-      const sat = captures ? captures[1] : null;
-      scan({ regexp: tokens.comma });
-      captures = scan({ regexp: tokens.percentageValue });
-      const light = captures ? captures[1] : null;
-      scan({ regexp: tokens.comma });
-      const alpha = matchNumber();
-      const ensuredSat =
-        sat ??
-        error({
-          message:
-            "Expected percentage value for saturation and lightness in HSLA",
-        });
-      const ensuredLight =
-        light ??
-        error({
-          message:
-            "Expected percentage value for saturation and lightness in HSLA",
-        });
-      return {
-        type: "hsla",
-        value: [hue, ensuredSat, ensuredLight, alpha],
-      };
-    },
-  });
+	matchCall({
+		pattern: tokens.hslaColor,
+		callback: () => {
+			const hue = matchNumber();
+			scan({ regexp: tokens.comma });
+			let captures = scan({ regexp: tokens.percentageValue });
+			const sat = captures ? captures[1] : null;
+			scan({ regexp: tokens.comma });
+			captures = scan({ regexp: tokens.percentageValue });
+			const light = captures ? captures[1] : null;
+			scan({ regexp: tokens.comma });
+			const alpha = matchNumber();
+			const ensuredSat =
+				sat ??
+				error({
+					message:
+						"Expected percentage value for saturation and lightness in HSLA",
+				});
+			const ensuredLight =
+				light ??
+				error({
+					message:
+						"Expected percentage value for saturation and lightness in HSLA",
+				});
+			return {
+				type: "hsla",
+				value: [hue, ensuredSat, ensuredLight, alpha],
+			};
+		},
+	});
 
 const matchVariableName = (): string => {
-  const captures =
-    scan({ regexp: tokens.variableName }) ??
-    error({ message: "Expected CSS variable name" });
-  return captures[1];
+	const captures =
+		scan({ regexp: tokens.variableName }) ??
+		error({ message: "Expected CSS variable name" });
+	return captures[1];
 };
 
 const matchNumber = (): string => {
-  const captures =
-    scan({ regexp: tokens.number }) ?? error({ message: "Expected number" });
-  return captures[1];
+	const captures =
+		scan({ regexp: tokens.number }) ?? error({ message: "Expected number" });
+	return captures[1];
 };
 
 const matchDistance = (): Distance | undefined =>
-  match({ type: "%", pattern: tokens.percentageValue, captureIndex: 1 }) ||
-  matchPositionKeyword() ||
-  matchCalc() ||
-  matchLength();
+	match({ type: "%", pattern: tokens.percentageValue, captureIndex: 1 }) ||
+	matchPositionKeyword() ||
+	matchCalc() ||
+	matchLength();
 
 const matchPositionKeyword = (): Distance | undefined =>
-  match({
-    type: "position-keyword",
-    pattern: tokens.positionKeywords,
-    captureIndex: 1,
-  });
+	match({
+		type: "position-keyword",
+		pattern: tokens.positionKeywords,
+		captureIndex: 1,
+	});
 
 const matchCalc = (): Distance | undefined =>
-  matchCall({
-    pattern: tokens.calcValue,
-    callback: () => {
-      let openParenCount = 1;
-      let index = 0;
+	matchCall({
+		pattern: tokens.calcValue,
+		callback: () => {
+			let openParenCount = 1;
+			let index = 0;
 
-      while (openParenCount > 0 && index < input.length) {
-        const char = input.charAt(index);
-        if (char === "(") {
-          openParenCount++;
-        } else if (char === ")") {
-          openParenCount--;
-        }
-        index++;
-      }
+			while (openParenCount > 0 && index < input.length) {
+				const char = input.charAt(index);
+				if (char === "(") {
+					openParenCount++;
+				} else if (char === ")") {
+					openParenCount--;
+				}
+				index++;
+			}
 
-      if (openParenCount > 0) {
-        error({ message: "Missing closing parenthesis in calc() expression" });
-      }
+			if (openParenCount > 0) {
+				error({ message: "Missing closing parenthesis in calc() expression" });
+			}
 
-      const calcContent = input.slice(0, index - 1);
-      consume({ size: index - 1 });
+			const calcContent = input.slice(0, index - 1);
+			consume({ size: index - 1 });
 
-      return {
-        type: "calc",
-        value: calcContent,
-      };
-    },
-  });
+			return {
+				type: "calc",
+				value: calcContent,
+			};
+		},
+	});
 
 const matchLength = (): Distance | undefined =>
-  match({ type: "px", pattern: tokens.pixelValue, captureIndex: 1 }) ||
-  match({ type: "em", pattern: tokens.emValue, captureIndex: 1 });
+	match({ type: "px", pattern: tokens.pixelValue, captureIndex: 1 }) ||
+	match({ type: "em", pattern: tokens.emValue, captureIndex: 1 });
 
 const match = <TType extends string>({
-  type,
-  pattern,
-  captureIndex,
+	type,
+	pattern,
+	captureIndex,
 }: {
-  type: TType;
-  pattern: RegExp;
-  captureIndex: number;
+	type: TType;
+	pattern: RegExp;
+	captureIndex: number;
 }): { type: TType; value: string } | undefined => {
-  const captures = scan({ regexp: pattern });
-  if (!captures) {
-    return undefined;
-  }
+	const captures = scan({ regexp: pattern });
+	if (!captures) {
+		return undefined;
+	}
 
-  return {
-    type,
-    value: captures[captureIndex],
-  };
+	return {
+		type,
+		value: captures[captureIndex],
+	};
 };
 
 const scan = ({ regexp }: { regexp: RegExp }): RegExpExecArray | null => {
-  const blankCaptures = /^[\n\r\t\s]+/.exec(input);
-  if (blankCaptures) {
-    consume({ size: blankCaptures[0].length });
-  }
+	const blankCaptures = /^[\n\r\t\s]+/.exec(input);
+	if (blankCaptures) {
+		consume({ size: blankCaptures[0].length });
+	}
 
-  const captures = regexp.exec(input);
-  if (captures) {
-    consume({ size: captures[0].length });
-  }
+	const captures = regexp.exec(input);
+	if (captures) {
+		consume({ size: captures[0].length });
+	}
 
-  return captures;
+	return captures;
 };
 
 const consume = ({ size }: { size: number }): void => {
-  input = input.slice(size);
+	input = input.slice(size);
 };
 
 export const parseGradient = ({
-  code,
+	code,
 }: {
-  code: string;
+	code: string;
 }): Array<GradientAst> => {
-  input = code.toString().trim();
-  if (input.endsWith(";")) {
-    input = input.slice(0, -1);
-  }
-  return getAst();
+	input = code.toString().trim();
+	if (input.endsWith(";")) {
+		input = input.slice(0, -1);
+	}
+	return getAst();
 };
 
 export const GradientParser = {
-  parse: parseGradient,
+	parse: parseGradient,
 };
diff --git a/apps/web/src/lib/iconify-api.ts b/apps/web/src/lib/iconify-api.ts
index b5db1b9a..e4afe111 100644
--- a/apps/web/src/lib/iconify-api.ts
+++ b/apps/web/src/lib/iconify-api.ts
@@ -1,241 +1,241 @@
 export const ICONIFY_HOSTS = [
-  "https://api.iconify.design",
-  "https://api.simplesvg.com",
-  "https://api.unisvg.com",
+	"https://api.iconify.design",
+	"https://api.simplesvg.com",
+	"https://api.unisvg.com",
 ];
 
 let currentHost = ICONIFY_HOSTS[0];
 
 async function fetchWithFallback(path: string): Promise<Response> {
-  for (const host of ICONIFY_HOSTS) {
-    try {
-      const response = await fetch(`${host}${path}`, {
-        signal: AbortSignal.timeout(2000),
-      });
-      if (response.ok) {
-        currentHost = host;
-        return response;
-      }
-    } catch (error) {
-      console.warn(`Failed to fetch from ${host}:`, error);
-    }
-  }
-  throw new Error("All API hosts failed");
+	for (const host of ICONIFY_HOSTS) {
+		try {
+			const response = await fetch(`${host}${path}`, {
+				signal: AbortSignal.timeout(2000),
+			});
+			if (response.ok) {
+				currentHost = host;
+				return response;
+			}
+		} catch (error) {
+			console.warn(`Failed to fetch from ${host}:`, error);
+		}
+	}
+	throw new Error("All API hosts failed");
 }
 
 export interface IconSet {
-  prefix: string;
-  name: string;
-  total: number;
-  author?: {
-    name: string;
-    url?: string;
-  };
-  license?: {
-    title: string;
-    spdx?: string;
-    url?: string;
-  };
-  samples?: string[];
-  category?: string;
-  palette?: boolean;
+	prefix: string;
+	name: string;
+	total: number;
+	author?: {
+		name: string;
+		url?: string;
+	};
+	license?: {
+		title: string;
+		spdx?: string;
+		url?: string;
+	};
+	samples?: string[];
+	category?: string;
+	palette?: boolean;
 }
 
 export interface IconSearchResult {
-  icons: string[];
-  total: number;
-  limit: number;
-  start: number;
-  collections: Record<string, IconSet>;
+	icons: string[];
+	total: number;
+	limit: number;
+	start: number;
+	collections: Record<string, IconSet>;
 }
 
 export interface CollectionInfo {
-  prefix: string;
-  total: number;
-  title?: string;
-  uncategorized?: string[];
-  categories?: Record<string, string[]>;
-  hidden?: string[];
-  aliases?: Record<string, string>;
+	prefix: string;
+	total: number;
+	title?: string;
+	uncategorized?: string[];
+	categories?: Record<string, string[]>;
+	hidden?: string[];
+	aliases?: Record<string, string>;
 }
 
 export async function getCollections(
-  category?: string,
+	category?: string,
 ): Promise<Record<string, IconSet>> {
-  try {
-    const response = await fetchWithFallback("/collections?pretty=1");
-    const data = (await response.json()) as Record<string, IconSet>;
+	try {
+		const response = await fetchWithFallback("/collections?pretty=1");
+		const data = (await response.json()) as Record<string, IconSet>;
 
-    if (category) {
-      const filtered = Object.fromEntries(
-        Object.entries(data).filter(
-          ([_key, info]) => info.category === category,
-        ),
-      ) as Record<string, IconSet>;
-      return filtered;
-    }
+		if (category) {
+			const filtered = Object.fromEntries(
+				Object.entries(data).filter(
+					([_key, info]) => info.category === category,
+				),
+			) as Record<string, IconSet>;
+			return filtered;
+		}
 
-    return data;
-  } catch (error) {
-    console.error("Failed to fetch collections:", error);
-    return {};
-  }
+		return data;
+	} catch (error) {
+		console.error("Failed to fetch collections:", error);
+		return {};
+	}
 }
 
 export async function getCollection(
-  prefix: string,
+	prefix: string,
 ): Promise<CollectionInfo | null> {
-  try {
-    const response = await fetchWithFallback(
-      `/collection?prefix=${prefix}&pretty=1`,
-    );
-    return await response.json();
-  } catch (error) {
-    console.error(`Failed to fetch collection ${prefix}:`, error);
-    return null;
-  }
+	try {
+		const response = await fetchWithFallback(
+			`/collection?prefix=${prefix}&pretty=1`,
+		);
+		return await response.json();
+	} catch (error) {
+		console.error(`Failed to fetch collection ${prefix}:`, error);
+		return null;
+	}
 }
 
 export async function searchIcons(
-  query: string,
-  limit: number = 64,
-  prefixes?: string[],
-  category?: string,
+	query: string,
+	limit: number = 64,
+	prefixes?: string[],
+	category?: string,
 ): Promise<IconSearchResult> {
-  const params = new URLSearchParams({
-    query,
-    limit: limit.toString(),
-    pretty: "1",
-  });
+	const params = new URLSearchParams({
+		query,
+		limit: limit.toString(),
+		pretty: "1",
+	});
 
-  if (prefixes?.length) {
-    params.append("prefixes", prefixes.join(","));
-  }
+	if (prefixes?.length) {
+		params.append("prefixes", prefixes.join(","));
+	}
 
-  if (category) {
-    params.append("category", category);
-  }
+	if (category) {
+		params.append("category", category);
+	}
 
-  try {
-    const response = await fetchWithFallback(`/search?${params}`);
-    return await response.json();
-  } catch (error) {
-    console.error("Failed to search icons:", error);
-    return {
-      icons: [],
-      total: 0,
-      limit,
-      start: 0,
-      collections: {},
-    };
-  }
+	try {
+		const response = await fetchWithFallback(`/search?${params}`);
+		return await response.json();
+	} catch (error) {
+		console.error("Failed to search icons:", error);
+		return {
+			icons: [],
+			total: 0,
+			limit,
+			start: 0,
+			collections: {},
+		};
+	}
 }
 
 export function buildIconSvgUrl(
-  host: string,
-  iconName: string,
-  params?: {
-    color?: string;
-    width?: number;
-    height?: number;
-    flip?: "horizontal" | "vertical" | "horizontal,vertical";
-    rotate?: number | string;
-  },
+	host: string,
+	iconName: string,
+	params?: {
+		color?: string;
+		width?: number;
+		height?: number;
+		flip?: "horizontal" | "vertical" | "horizontal,vertical";
+		rotate?: number | string;
+	},
 ): string {
-  const [prefix, name] = iconName.includes(":")
-    ? iconName.split(":")
-    : ["", iconName];
+	const [prefix, name] = iconName.includes(":")
+		? iconName.split(":")
+		: ["", iconName];
 
-  if (!prefix || !name) {
-    throw new Error('Invalid icon name format. Expected "prefix:name"');
-  }
+	if (!prefix || !name) {
+		throw new Error('Invalid icon name format. Expected "prefix:name"');
+	}
 
-  const urlParams = new URLSearchParams();
+	const urlParams = new URLSearchParams();
 
-  if (params?.color) {
-    urlParams.append("color", params.color.replace("#", "%23"));
-  }
+	if (params?.color) {
+		urlParams.append("color", params.color.replace("#", "%23"));
+	}
 
-  if (params?.width) {
-    urlParams.append("width", params.width.toString());
-  }
+	if (params?.width) {
+		urlParams.append("width", params.width.toString());
+	}
 
-  if (params?.height) {
-    urlParams.append("height", params.height.toString());
-  }
+	if (params?.height) {
+		urlParams.append("height", params.height.toString());
+	}
 
-  if (params?.flip) {
-    urlParams.append("flip", params.flip);
-  }
+	if (params?.flip) {
+		urlParams.append("flip", params.flip);
+	}
 
-  if (params?.rotate) {
-    urlParams.append("rotate", params.rotate.toString());
-  }
+	if (params?.rotate) {
+		urlParams.append("rotate", params.rotate.toString());
+	}
 
-  const queryString = urlParams.toString();
-  return `${host}/${prefix}/${name}.svg${queryString ? "?" + queryString : ""}`;
+	const queryString = urlParams.toString();
+	return `${host}/${prefix}/${name}.svg${queryString ? `?${queryString}` : ""}`;
 }
 
 export function getIconSvgUrl(
-  iconName: string,
-  params?: Parameters<typeof buildIconSvgUrl>[2],
+	iconName: string,
+	params?: Parameters<typeof buildIconSvgUrl>[2],
 ): string {
-  return buildIconSvgUrl(currentHost, iconName, params);
+	return buildIconSvgUrl(currentHost, iconName, params);
 }
 
 export async function downloadSvgAsText(
-  iconName: string,
-  params?: Parameters<typeof getIconSvgUrl>[1],
+	iconName: string,
+	params?: Parameters<typeof getIconSvgUrl>[1],
 ): Promise<string> {
-  const url = getIconSvgUrl(iconName, params);
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to download SVG: ${response.statusText}`);
-  }
-  return await response.text();
+	const url = getIconSvgUrl(iconName, params);
+	const response = await fetch(url);
+	if (!response.ok) {
+		throw new Error(`Failed to download SVG: ${response.statusText}`);
+	}
+	return await response.text();
 }
 
 export function svgToFile(svgText: string, fileName: string): File {
-  const blob = new Blob([svgText], { type: "image/svg+xml" });
-  return new File([blob], fileName, { type: "image/svg+xml" });
+	const blob = new Blob([svgText], { type: "image/svg+xml" });
+	return new File([blob], fileName, { type: "image/svg+xml" });
 }
 
 export const POPULAR_COLLECTIONS = {
-  general: [
-    { prefix: "mdi", name: "Material Design Icons" },
-    { prefix: "ic", name: "Google Material Icons" },
-    { prefix: "ph", name: "Phosphor" },
-    { prefix: "heroicons", name: "Heroicons" },
-    { prefix: "lucide", name: "Lucide" },
-    { prefix: "tabler", name: "Tabler Icons" },
-    { prefix: "fe", name: "Feather Icons" },
-    { prefix: "bi", name: "Bootstrap Icons" },
-  ],
-  brands: [
-    { prefix: "simple-icons", name: "Simple Icons" },
-    { prefix: "logos", name: "SVG Logos" },
-    { prefix: "skill-icons", name: "Skill Icons" },
-    { prefix: "devicon", name: "Devicon" },
-    { prefix: "fa-brands", name: "Font Awesome Brands" },
-  ],
-  emoji: [
-    { prefix: "noto", name: "Noto Emoji" },
-    { prefix: "twemoji", name: "Twemoji" },
-    { prefix: "fluent-emoji", name: "Fluent Emoji" },
-    { prefix: "fluent-emoji-flat", name: "Fluent Emoji Flat" },
-    { prefix: "emojione", name: "EmojiOne" },
-    { prefix: "openmoji", name: "OpenMoji" },
-  ],
+	general: [
+		{ prefix: "mdi", name: "Material Design Icons" },
+		{ prefix: "ic", name: "Google Material Icons" },
+		{ prefix: "ph", name: "Phosphor" },
+		{ prefix: "heroicons", name: "Heroicons" },
+		{ prefix: "lucide", name: "Lucide" },
+		{ prefix: "tabler", name: "Tabler Icons" },
+		{ prefix: "fe", name: "Feather Icons" },
+		{ prefix: "bi", name: "Bootstrap Icons" },
+	],
+	brands: [
+		{ prefix: "simple-icons", name: "Simple Icons" },
+		{ prefix: "logos", name: "SVG Logos" },
+		{ prefix: "skill-icons", name: "Skill Icons" },
+		{ prefix: "devicon", name: "Devicon" },
+		{ prefix: "fa-brands", name: "Font Awesome Brands" },
+	],
+	emoji: [
+		{ prefix: "noto", name: "Noto Emoji" },
+		{ prefix: "twemoji", name: "Twemoji" },
+		{ prefix: "fluent-emoji", name: "Fluent Emoji" },
+		{ prefix: "fluent-emoji-flat", name: "Fluent Emoji Flat" },
+		{ prefix: "emojione", name: "EmojiOne" },
+		{ prefix: "openmoji", name: "OpenMoji" },
+	],
 };
 
 export function getCategoriesFromCollections(
-  collections: Record<string, IconSet>,
+	collections: Record<string, IconSet>,
 ): string[] {
-  const categories = new Set<string>();
-  Object.values(collections).forEach((collection) => {
-    if (collection.category) {
-      categories.add(collection.category);
-    }
-  });
-  return Array.from(categories).sort();
+	const categories = new Set<string>();
+	Object.values(collections).forEach((collection) => {
+		if (collection.category) {
+			categories.add(collection.category);
+		}
+	});
+	return Array.from(categories).sort();
 }
diff --git a/apps/web/src/lib/media/audio.ts b/apps/web/src/lib/media/audio.ts
index 9e7551fe..cd40f1ea 100644
--- a/apps/web/src/lib/media/audio.ts
+++ b/apps/web/src/lib/media/audio.ts
@@ -1,8 +1,8 @@
 import type {
-  AudioElement,
-  LibraryAudioElement,
-  TimelineElement,
-  TimelineTrack,
+	AudioElement,
+	LibraryAudioElement,
+	TimelineElement,
+	TimelineTrack,
 } from "@/types/timeline";
 import type { MediaAsset } from "@/types/assets";
 import { canElementHaveAudio } from "@/lib/timeline/element-utils";
@@ -10,316 +10,316 @@ import { canTracktHaveAudio } from "@/lib/timeline";
 import { mediaSupportsAudio } from "@/lib/media/media-utils";
 
 export type CollectedAudioElement = Omit<
-  AudioElement,
-  "type" | "mediaId" | "volume" | "id" | "name" | "sourceType" | "sourceUrl"
+	AudioElement,
+	"type" | "mediaId" | "volume" | "id" | "name" | "sourceType" | "sourceUrl"
 > & { buffer: AudioBuffer };
 
 export function createAudioContext(): AudioContext {
-  const AudioContextConstructor =
-    window.AudioContext ||
-    (window as typeof window & { webkitAudioContext?: typeof AudioContext })
-      .webkitAudioContext;
+	const AudioContextConstructor =
+		window.AudioContext ||
+		(window as typeof window & { webkitAudioContext?: typeof AudioContext })
+			.webkitAudioContext;
 
-  return new AudioContextConstructor();
+	return new AudioContextConstructor();
 }
 
 export interface DecodedAudio {
-  samples: Float32Array;
-  sampleRate: number;
+	samples: Float32Array;
+	sampleRate: number;
 }
 
 export async function decodeAudioToFloat32({
-  audioBlob,
+	audioBlob,
 }: {
-  audioBlob: Blob;
+	audioBlob: Blob;
 }): Promise<DecodedAudio> {
-  const audioContext = createAudioContext();
-  const arrayBuffer = await audioBlob.arrayBuffer();
-  const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
+	const audioContext = createAudioContext();
+	const arrayBuffer = await audioBlob.arrayBuffer();
+	const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
 
-  // mix down to mono
-  const numChannels = audioBuffer.numberOfChannels;
-  const length = audioBuffer.length;
-  const samples = new Float32Array(length);
+	// mix down to mono
+	const numChannels = audioBuffer.numberOfChannels;
+	const length = audioBuffer.length;
+	const samples = new Float32Array(length);
 
-  for (let i = 0; i < length; i++) {
-    let sum = 0;
-    for (let channel = 0; channel < numChannels; channel++) {
-      sum += audioBuffer.getChannelData(channel)[i];
-    }
-    samples[i] = sum / numChannels;
-  }
+	for (let i = 0; i < length; i++) {
+		let sum = 0;
+		for (let channel = 0; channel < numChannels; channel++) {
+			sum += audioBuffer.getChannelData(channel)[i];
+		}
+		samples[i] = sum / numChannels;
+	}
 
-  return { samples, sampleRate: audioBuffer.sampleRate };
+	return { samples, sampleRate: audioBuffer.sampleRate };
 }
 
 export async function collectAudioElements({
-  tracks,
-  mediaAssets,
-  audioContext,
+	tracks,
+	mediaAssets,
+	audioContext,
 }: {
-  tracks: TimelineTrack[];
-  mediaAssets: MediaAsset[];
-  audioContext: AudioContext;
+	tracks: TimelineTrack[];
+	mediaAssets: MediaAsset[];
+	audioContext: AudioContext;
 }): Promise<CollectedAudioElement[]> {
-  const mediaMap = new Map<string, MediaAsset>(
-    mediaAssets.map((media) => [media.id, media]),
-  );
-  const pendingElements: Array<Promise<CollectedAudioElement | null>> = [];
+	const mediaMap = new Map<string, MediaAsset>(
+		mediaAssets.map((media) => [media.id, media]),
+	);
+	const pendingElements: Array<Promise<CollectedAudioElement | null>> = [];
 
-  for (const track of tracks) {
-    if (canTracktHaveAudio(track) && track.muted) continue;
+	for (const track of tracks) {
+		if (canTracktHaveAudio(track) && track.muted) continue;
 
-    for (const element of track.elements) {
-      if (element.type !== "audio") continue;
-      if (element.duration <= 0) continue;
+		for (const element of track.elements) {
+			if (element.type !== "audio") continue;
+			if (element.duration <= 0) continue;
 
-      const isTrackMuted = canTracktHaveAudio(track) && track.muted;
-      pendingElements.push(
-        resolveAudioBufferForElement({
-          element,
-          mediaMap,
-          audioContext,
-        }).then((audioBuffer) => {
-          if (!audioBuffer) return null;
-          return {
-            buffer: audioBuffer,
-            startTime: element.startTime,
-            duration: element.duration,
-            trimStart: element.trimStart,
-            trimEnd: element.trimEnd,
-            muted: element.muted || isTrackMuted,
-          };
-        }),
-      );
-    }
-  }
+			const isTrackMuted = canTracktHaveAudio(track) && track.muted;
+			pendingElements.push(
+				resolveAudioBufferForElement({
+					element,
+					mediaMap,
+					audioContext,
+				}).then((audioBuffer) => {
+					if (!audioBuffer) return null;
+					return {
+						buffer: audioBuffer,
+						startTime: element.startTime,
+						duration: element.duration,
+						trimStart: element.trimStart,
+						trimEnd: element.trimEnd,
+						muted: element.muted || isTrackMuted,
+					};
+				}),
+			);
+		}
+	}
 
-  const resolvedElements = await Promise.all(pendingElements);
-  const audioElements: CollectedAudioElement[] = [];
-  for (const element of resolvedElements) {
-    if (element) audioElements.push(element);
-  }
-  return audioElements;
+	const resolvedElements = await Promise.all(pendingElements);
+	const audioElements: CollectedAudioElement[] = [];
+	for (const element of resolvedElements) {
+		if (element) audioElements.push(element);
+	}
+	return audioElements;
 }
 
 async function resolveAudioBufferForElement({
-  element,
-  mediaMap,
-  audioContext,
+	element,
+	mediaMap,
+	audioContext,
 }: {
-  element: AudioElement;
-  mediaMap: Map<string, MediaAsset>;
-  audioContext: AudioContext;
+	element: AudioElement;
+	mediaMap: Map<string, MediaAsset>;
+	audioContext: AudioContext;
 }): Promise<AudioBuffer | null> {
-  try {
-    if (element.sourceType === "upload") {
-      const asset = mediaMap.get(element.mediaId);
-      if (!asset || asset.type !== "audio") return null;
+	try {
+		if (element.sourceType === "upload") {
+			const asset = mediaMap.get(element.mediaId);
+			if (!asset || asset.type !== "audio") return null;
 
-      const arrayBuffer = await asset.file.arrayBuffer();
-      return await audioContext.decodeAudioData(arrayBuffer.slice(0));
-    }
+			const arrayBuffer = await asset.file.arrayBuffer();
+			return await audioContext.decodeAudioData(arrayBuffer.slice(0));
+		}
 
-    if (element.buffer) return element.buffer;
+		if (element.buffer) return element.buffer;
 
-    const response = await fetch(element.sourceUrl);
-    if (!response.ok) {
-      throw new Error(`Library audio fetch failed: ${response.status}`);
-    }
+		const response = await fetch(element.sourceUrl);
+		if (!response.ok) {
+			throw new Error(`Library audio fetch failed: ${response.status}`);
+		}
 
-    const arrayBuffer = await response.arrayBuffer();
-    return await audioContext.decodeAudioData(arrayBuffer.slice(0));
-  } catch (error) {
-    console.warn("Failed to decode audio:", error);
-    return null;
-  }
+		const arrayBuffer = await response.arrayBuffer();
+		return await audioContext.decodeAudioData(arrayBuffer.slice(0));
+	} catch (error) {
+		console.warn("Failed to decode audio:", error);
+		return null;
+	}
 }
 
 interface AudioMixSource {
-  file: File;
-  startTime: number;
-  duration: number;
-  trimStart: number;
-  trimEnd: number;
+	file: File;
+	startTime: number;
+	duration: number;
+	trimStart: number;
+	trimEnd: number;
 }
 
 async function fetchLibraryAudioSource({
-  element,
+	element,
 }: {
-  element: LibraryAudioElement;
+	element: LibraryAudioElement;
 }): Promise<AudioMixSource | null> {
-  try {
-    const response = await fetch(element.sourceUrl);
-    if (!response.ok) {
-      throw new Error(`Library audio fetch failed: ${response.status}`);
-    }
+	try {
+		const response = await fetch(element.sourceUrl);
+		if (!response.ok) {
+			throw new Error(`Library audio fetch failed: ${response.status}`);
+		}
 
-    const blob = await response.blob();
-    const file = new File([blob], `${element.name}.mp3`, {
-      type: "audio/mpeg",
-    });
+		const blob = await response.blob();
+		const file = new File([blob], `${element.name}.mp3`, {
+			type: "audio/mpeg",
+		});
 
-    return {
-      file,
-      startTime: element.startTime,
-      duration: element.duration,
-      trimStart: element.trimStart,
-      trimEnd: element.trimEnd,
-    };
-  } catch (error) {
-    console.warn("Failed to fetch library audio:", error);
-    return null;
-  }
+		return {
+			file,
+			startTime: element.startTime,
+			duration: element.duration,
+			trimStart: element.trimStart,
+			trimEnd: element.trimEnd,
+		};
+	} catch (error) {
+		console.warn("Failed to fetch library audio:", error);
+		return null;
+	}
 }
 
 function collectMediaAudioSource({
-  element,
-  mediaAsset,
+	element,
+	mediaAsset,
 }: {
-  element: TimelineElement;
-  mediaAsset: MediaAsset;
+	element: TimelineElement;
+	mediaAsset: MediaAsset;
 }): AudioMixSource {
-  return {
-    file: mediaAsset.file,
-    startTime: element.startTime,
-    duration: element.duration,
-    trimStart: element.trimStart,
-    trimEnd: element.trimEnd,
-  };
+	return {
+		file: mediaAsset.file,
+		startTime: element.startTime,
+		duration: element.duration,
+		trimStart: element.trimStart,
+		trimEnd: element.trimEnd,
+	};
 }
 
 export async function collectAudioMixSources({
-  tracks,
-  mediaAssets,
+	tracks,
+	mediaAssets,
 }: {
-  tracks: TimelineTrack[];
-  mediaAssets: MediaAsset[];
+	tracks: TimelineTrack[];
+	mediaAssets: MediaAsset[];
 }): Promise<AudioMixSource[]> {
-  const audioMixSources: AudioMixSource[] = [];
-  const mediaMap = new Map<string, MediaAsset>(
-    mediaAssets.map((asset) => [asset.id, asset]),
-  );
-  const pendingLibrarySources: Array<Promise<AudioMixSource | null>> = [];
+	const audioMixSources: AudioMixSource[] = [];
+	const mediaMap = new Map<string, MediaAsset>(
+		mediaAssets.map((asset) => [asset.id, asset]),
+	);
+	const pendingLibrarySources: Array<Promise<AudioMixSource | null>> = [];
 
-  for (const track of tracks) {
-    if (canTracktHaveAudio(track) && track.muted) continue;
+	for (const track of tracks) {
+		if (canTracktHaveAudio(track) && track.muted) continue;
 
-    for (const element of track.elements) {
-      if (!canElementHaveAudio(element)) continue;
+		for (const element of track.elements) {
+			if (!canElementHaveAudio(element)) continue;
 
-      if (element.type === "audio") {
-        if (element.sourceType === "upload") {
-          const mediaAsset = mediaMap.get(element.mediaId);
-          if (!mediaAsset) continue;
+			if (element.type === "audio") {
+				if (element.sourceType === "upload") {
+					const mediaAsset = mediaMap.get(element.mediaId);
+					if (!mediaAsset) continue;
 
-          audioMixSources.push(
-            collectMediaAudioSource({ element, mediaAsset }),
-          );
-        } else {
-          pendingLibrarySources.push(fetchLibraryAudioSource({ element }));
-        }
-        continue;
-      }
+					audioMixSources.push(
+						collectMediaAudioSource({ element, mediaAsset }),
+					);
+				} else {
+					pendingLibrarySources.push(fetchLibraryAudioSource({ element }));
+				}
+				continue;
+			}
 
-      if (element.type === "video") {
-        const mediaAsset = mediaMap.get(element.mediaId);
-        if (!mediaAsset) continue;
+			if (element.type === "video") {
+				const mediaAsset = mediaMap.get(element.mediaId);
+				if (!mediaAsset) continue;
 
-        if (mediaSupportsAudio({ media: mediaAsset })) {
-          audioMixSources.push(
-            collectMediaAudioSource({ element, mediaAsset }),
-          );
-        }
-      }
-    }
-  }
+				if (mediaSupportsAudio({ media: mediaAsset })) {
+					audioMixSources.push(
+						collectMediaAudioSource({ element, mediaAsset }),
+					);
+				}
+			}
+		}
+	}
 
-  const resolvedLibrarySources = await Promise.all(pendingLibrarySources);
-  for (const source of resolvedLibrarySources) {
-    if (source) audioMixSources.push(source);
-  }
+	const resolvedLibrarySources = await Promise.all(pendingLibrarySources);
+	for (const source of resolvedLibrarySources) {
+		if (source) audioMixSources.push(source);
+	}
 
-  return audioMixSources;
+	return audioMixSources;
 }
 
 export async function createTimelineAudioBuffer({
-  tracks,
-  mediaAssets,
-  duration,
-  sampleRate = 44100,
+	tracks,
+	mediaAssets,
+	duration,
+	sampleRate = 44100,
 }: {
-  tracks: TimelineTrack[];
-  mediaAssets: MediaAsset[];
-  duration: number;
-  sampleRate?: number;
+	tracks: TimelineTrack[];
+	mediaAssets: MediaAsset[];
+	duration: number;
+	sampleRate?: number;
 }): Promise<AudioBuffer | null> {
-  const audioContext = createAudioContext();
+	const audioContext = createAudioContext();
 
-  const audioElements = await collectAudioElements({
-    tracks,
-    mediaAssets,
-    audioContext,
-  });
+	const audioElements = await collectAudioElements({
+		tracks,
+		mediaAssets,
+		audioContext,
+	});
 
-  if (audioElements.length === 0) return null;
+	if (audioElements.length === 0) return null;
 
-  const outputChannels = 2;
-  const outputLength = Math.ceil(duration * sampleRate);
-  const outputBuffer = audioContext.createBuffer(
-    outputChannels,
-    outputLength,
-    sampleRate,
-  );
+	const outputChannels = 2;
+	const outputLength = Math.ceil(duration * sampleRate);
+	const outputBuffer = audioContext.createBuffer(
+		outputChannels,
+		outputLength,
+		sampleRate,
+	);
 
-  for (const element of audioElements) {
-    if (element.muted) continue;
+	for (const element of audioElements) {
+		if (element.muted) continue;
 
-    mixAudioChannels({
-      element,
-      outputBuffer,
-      outputLength,
-      sampleRate,
-    });
-  }
+		mixAudioChannels({
+			element,
+			outputBuffer,
+			outputLength,
+			sampleRate,
+		});
+	}
 
-  return outputBuffer;
+	return outputBuffer;
 }
 
 function mixAudioChannels({
-  element,
-  outputBuffer,
-  outputLength,
-  sampleRate,
+	element,
+	outputBuffer,
+	outputLength,
+	sampleRate,
 }: {
-  element: CollectedAudioElement;
-  outputBuffer: AudioBuffer;
-  outputLength: number;
-  sampleRate: number;
+	element: CollectedAudioElement;
+	outputBuffer: AudioBuffer;
+	outputLength: number;
+	sampleRate: number;
 }): void {
-  const { buffer, startTime, trimStart, duration: elementDuration } = element;
+	const { buffer, startTime, trimStart, duration: elementDuration } = element;
 
-  const sourceStartSample = Math.floor(trimStart * buffer.sampleRate);
-  const sourceLengthSamples = Math.floor(elementDuration * buffer.sampleRate);
-  const outputStartSample = Math.floor(startTime * sampleRate);
+	const sourceStartSample = Math.floor(trimStart * buffer.sampleRate);
+	const sourceLengthSamples = Math.floor(elementDuration * buffer.sampleRate);
+	const outputStartSample = Math.floor(startTime * sampleRate);
 
-  const resampleRatio = sampleRate / buffer.sampleRate;
-  const resampledLength = Math.floor(sourceLengthSamples * resampleRatio);
+	const resampleRatio = sampleRate / buffer.sampleRate;
+	const resampledLength = Math.floor(sourceLengthSamples * resampleRatio);
 
-  const outputChannels = 2;
-  for (let channel = 0; channel < outputChannels; channel++) {
-    const outputData = outputBuffer.getChannelData(channel);
-    const sourceChannel = Math.min(channel, buffer.numberOfChannels - 1);
-    const sourceData = buffer.getChannelData(sourceChannel);
+	const outputChannels = 2;
+	for (let channel = 0; channel < outputChannels; channel++) {
+		const outputData = outputBuffer.getChannelData(channel);
+		const sourceChannel = Math.min(channel, buffer.numberOfChannels - 1);
+		const sourceData = buffer.getChannelData(sourceChannel);
 
-    for (let i = 0; i < resampledLength; i++) {
-      const outputIndex = outputStartSample + i;
-      if (outputIndex >= outputLength) break;
+		for (let i = 0; i < resampledLength; i++) {
+			const outputIndex = outputStartSample + i;
+			if (outputIndex >= outputLength) break;
 
-      const sourceIndex = sourceStartSample + Math.floor(i / resampleRatio);
-      if (sourceIndex >= sourceData.length) break;
+			const sourceIndex = sourceStartSample + Math.floor(i / resampleRatio);
+			if (sourceIndex >= sourceData.length) break;
 
-      outputData[outputIndex] += sourceData[sourceIndex];
-    }
-  }
+			outputData[outputIndex] += sourceData[sourceIndex];
+		}
+	}
 }
diff --git a/apps/web/src/lib/media/media-utils.ts b/apps/web/src/lib/media/media-utils.ts
index 7f24d800..4b487bf2 100644
--- a/apps/web/src/lib/media/media-utils.ts
+++ b/apps/web/src/lib/media/media-utils.ts
@@ -3,30 +3,30 @@ import type { MediaAsset, MediaType } from "@/types/assets";
 export const SUPPORTS_AUDIO: readonly MediaType[] = ["audio", "video"];
 
 export function mediaSupportsAudio({
-  media,
+	media,
 }: {
-  media: MediaAsset | null | undefined;
+	media: MediaAsset | null | undefined;
 }): boolean {
-  if (!media) return false;
-  return SUPPORTS_AUDIO.includes(media.type);
+	if (!media) return false;
+	return SUPPORTS_AUDIO.includes(media.type);
 }
 
 export const getMediaTypeFromFile = ({
-  file,
+	file,
 }: {
-  file: File;
+	file: File;
 }): MediaType | null => {
-  const { type } = file;
+	const { type } = file;
 
-  if (type.startsWith("image/")) {
-    return "image";
-  }
-  if (type.startsWith("video/")) {
-    return "video";
-  }
-  if (type.startsWith("audio/")) {
-    return "audio";
-  }
+	if (type.startsWith("image/")) {
+		return "image";
+	}
+	if (type.startsWith("video/")) {
+		return "video";
+	}
+	if (type.startsWith("audio/")) {
+		return "audio";
+	}
 
-  return null;
+	return null;
 };
diff --git a/apps/web/src/lib/media/mediabunny.ts b/apps/web/src/lib/media/mediabunny.ts
index 389a89b7..11fe9837 100644
--- a/apps/web/src/lib/media/mediabunny.ts
+++ b/apps/web/src/lib/media/mediabunny.ts
@@ -4,215 +4,223 @@ import type { TimelineTrack } from "@/types/timeline";
 import type { MediaAsset } from "@/types/assets";
 
 export async function getVideoInfo({
-  videoFile,
+	videoFile,
 }: {
-  videoFile: File;
+	videoFile: File;
 }): Promise<{
-  duration: number;
-  width: number;
-  height: number;
-  fps: number;
+	duration: number;
+	width: number;
+	height: number;
+	fps: number;
 }> {
-  const input = new Input({
-    source: new BlobSource(videoFile),
-    formats: ALL_FORMATS,
-  });
+	const input = new Input({
+		source: new BlobSource(videoFile),
+		formats: ALL_FORMATS,
+	});
 
-  const duration = await input.computeDuration();
-  const videoTrack = await input.getPrimaryVideoTrack();
+	const duration = await input.computeDuration();
+	const videoTrack = await input.getPrimaryVideoTrack();
 
-  if (!videoTrack) {
-    throw new Error("No video track found in the file");
-  }
+	if (!videoTrack) {
+		throw new Error("No video track found in the file");
+	}
 
-  const packetStats = await videoTrack.computePacketStats(100);
-  const fps = packetStats.averagePacketRate;
+	const packetStats = await videoTrack.computePacketStats(100);
+	const fps = packetStats.averagePacketRate;
 
-  return {
-    duration,
-    width: videoTrack.displayWidth,
-    height: videoTrack.displayHeight,
-    fps,
-  };
+	return {
+		duration,
+		width: videoTrack.displayWidth,
+		height: videoTrack.displayHeight,
+		fps,
+	};
 }
 
 const SAMPLE_RATE = 44100;
 const NUM_CHANNELS = 2;
 
 export const extractTimelineAudio = async ({
-  tracks,
-  mediaAssets,
-  totalDuration,
-  onProgress,
+	tracks,
+	mediaAssets,
+	totalDuration,
+	onProgress,
 }: {
-  tracks: TimelineTrack[];
-  mediaAssets: MediaAsset[];
-  totalDuration: number;
-  onProgress?: (progress: number) => void;
+	tracks: TimelineTrack[];
+	mediaAssets: MediaAsset[];
+	totalDuration: number;
+	onProgress?: (progress: number) => void;
 }): Promise<Blob> => {
-  if (totalDuration === 0) {
-    return createWavBlob({ samples: new Float32Array(SAMPLE_RATE * 0.1) });
-  }
+	if (totalDuration === 0) {
+		return createWavBlob({ samples: new Float32Array(SAMPLE_RATE * 0.1) });
+	}
 
-  const audioMixSources = await collectAudioMixSources({
-    tracks,
-    mediaAssets,
-  });
+	const audioMixSources = await collectAudioMixSources({
+		tracks,
+		mediaAssets,
+	});
 
-  if (audioMixSources.length === 0) {
-    const silentDuration = Math.max(1, totalDuration);
-    const silentSamples = new Float32Array(
-      Math.ceil(silentDuration * SAMPLE_RATE) * NUM_CHANNELS,
-    );
-    return createWavBlob({ samples: silentSamples });
-  }
+	if (audioMixSources.length === 0) {
+		const silentDuration = Math.max(1, totalDuration);
+		const silentSamples = new Float32Array(
+			Math.ceil(silentDuration * SAMPLE_RATE) * NUM_CHANNELS,
+		);
+		return createWavBlob({ samples: silentSamples });
+	}
 
-  const totalSamples = Math.ceil(totalDuration * SAMPLE_RATE);
-  const mixBuffers = [
-    new Float32Array(totalSamples),
-    new Float32Array(totalSamples),
-  ];
+	const totalSamples = Math.ceil(totalDuration * SAMPLE_RATE);
+	const mixBuffers = [
+		new Float32Array(totalSamples),
+		new Float32Array(totalSamples),
+	];
 
-  for (let i = 0; i < audioMixSources.length; i++) {
-    const source = audioMixSources[i];
+	for (let i = 0; i < audioMixSources.length; i++) {
+		const source = audioMixSources[i];
 
-    if (onProgress) {
-      onProgress((i / audioMixSources.length) * 90);
-    }
+		if (onProgress) {
+			onProgress((i / audioMixSources.length) * 90);
+		}
 
-    try {
-      await decodeAndMixAudioSource({
-        source,
-        mixBuffers,
-        totalSamples,
-      });
-    } catch (error) {
-      console.warn(`Failed to process audio source ${source.file.name}:`, error);
-    }
-  }
+		try {
+			await decodeAndMixAudioSource({
+				source,
+				mixBuffers,
+				totalSamples,
+			});
+		} catch (error) {
+			console.warn(
+				`Failed to process audio source ${source.file.name}:`,
+				error,
+			);
+		}
+	}
 
-  // clamp to prevent clipping
-  for (const channel of mixBuffers) {
-    for (let i = 0; i < channel.length; i++) {
-      channel[i] = Math.max(-1, Math.min(1, channel[i]));
-    }
-  }
+	// clamp to prevent clipping
+	for (const channel of mixBuffers) {
+		for (let i = 0; i < channel.length; i++) {
+			channel[i] = Math.max(-1, Math.min(1, channel[i]));
+		}
+	}
 
-  // interleave channels for wav output
-  const interleavedSamples = new Float32Array(totalSamples * NUM_CHANNELS);
-  for (let i = 0; i < totalSamples; i++) {
-    interleavedSamples[i * 2] = mixBuffers[0][i];
-    interleavedSamples[i * 2 + 1] = mixBuffers[1][i];
-  }
+	// interleave channels for wav output
+	const interleavedSamples = new Float32Array(totalSamples * NUM_CHANNELS);
+	for (let i = 0; i < totalSamples; i++) {
+		interleavedSamples[i * 2] = mixBuffers[0][i];
+		interleavedSamples[i * 2 + 1] = mixBuffers[1][i];
+	}
 
-  if (onProgress) {
-    onProgress(100);
-  }
+	if (onProgress) {
+		onProgress(100);
+	}
 
-  return createWavBlob({ samples: interleavedSamples });
+	return createWavBlob({ samples: interleavedSamples });
 };
 
 async function decodeAndMixAudioSource({
-  source,
-  mixBuffers,
-  totalSamples,
+	source,
+	mixBuffers,
+	totalSamples,
 }: {
-  source: { file: File; startTime: number; duration: number; trimStart: number };
-  mixBuffers: Float32Array[];
-  totalSamples: number;
+	source: {
+		file: File;
+		startTime: number;
+		duration: number;
+		trimStart: number;
+	};
+	mixBuffers: Float32Array[];
+	totalSamples: number;
 }): Promise<void> {
-  const input = new Input({
-    source: new BlobSource(source.file),
-    formats: ALL_FORMATS,
-  });
+	const input = new Input({
+		source: new BlobSource(source.file),
+		formats: ALL_FORMATS,
+	});
 
-  const audioTrack = await input.getPrimaryAudioTrack();
-  if (!audioTrack) return;
+	const audioTrack = await input.getPrimaryAudioTrack();
+	if (!audioTrack) return;
 
-  const sink = new AudioBufferSink(audioTrack);
-  const trimEnd = source.trimStart + source.duration;
+	const sink = new AudioBufferSink(audioTrack);
+	const trimEnd = source.trimStart + source.duration;
 
-  for await (const { buffer, timestamp } of sink.buffers(
-    source.trimStart,
-    trimEnd,
-  )) {
-    const relativeTime = timestamp - source.trimStart;
-    const outputStartSample = Math.floor(
-      (source.startTime + relativeTime) * SAMPLE_RATE,
-    );
+	for await (const { buffer, timestamp } of sink.buffers(
+		source.trimStart,
+		trimEnd,
+	)) {
+		const relativeTime = timestamp - source.trimStart;
+		const outputStartSample = Math.floor(
+			(source.startTime + relativeTime) * SAMPLE_RATE,
+		);
 
-    // resample if needed
-    const resampleRatio = SAMPLE_RATE / buffer.sampleRate;
+		// resample if needed
+		const resampleRatio = SAMPLE_RATE / buffer.sampleRate;
 
-    for (let ch = 0; ch < NUM_CHANNELS; ch++) {
-      const sourceChannel = Math.min(ch, buffer.numberOfChannels - 1);
-      const channelData = buffer.getChannelData(sourceChannel);
-      const outputChannel = mixBuffers[ch];
+		for (let ch = 0; ch < NUM_CHANNELS; ch++) {
+			const sourceChannel = Math.min(ch, buffer.numberOfChannels - 1);
+			const channelData = buffer.getChannelData(sourceChannel);
+			const outputChannel = mixBuffers[ch];
 
-      const resampledLength = Math.floor(channelData.length * resampleRatio);
-      for (let i = 0; i < resampledLength; i++) {
-        const outputIdx = outputStartSample + i;
-        if (outputIdx < 0 || outputIdx >= totalSamples) continue;
+			const resampledLength = Math.floor(channelData.length * resampleRatio);
+			for (let i = 0; i < resampledLength; i++) {
+				const outputIdx = outputStartSample + i;
+				if (outputIdx < 0 || outputIdx >= totalSamples) continue;
 
-        const sourceIdx = Math.floor(i / resampleRatio);
-        if (sourceIdx < channelData.length) {
-          outputChannel[outputIdx] += channelData[sourceIdx];
-        }
-      }
-    }
-  }
+				const sourceIdx = Math.floor(i / resampleRatio);
+				if (sourceIdx < channelData.length) {
+					outputChannel[outputIdx] += channelData[sourceIdx];
+				}
+			}
+		}
+	}
 }
 
 function createWavBlob({ samples }: { samples: Float32Array }): Blob {
-  const numChannels = NUM_CHANNELS;
-  const bitsPerSample = 16;
-  const bytesPerSample = bitsPerSample / 8;
-  const numSamples = samples.length / numChannels;
-  const dataSize = numSamples * numChannels * bytesPerSample;
-  const buffer = new ArrayBuffer(44 + dataSize);
-  const view = new DataView(buffer);
+	const numChannels = NUM_CHANNELS;
+	const bitsPerSample = 16;
+	const bytesPerSample = bitsPerSample / 8;
+	const numSamples = samples.length / numChannels;
+	const dataSize = numSamples * numChannels * bytesPerSample;
+	const buffer = new ArrayBuffer(44 + dataSize);
+	const view = new DataView(buffer);
 
-  // riff header
-  writeString({ view, offset: 0, str: "RIFF" });
-  view.setUint32(4, 36 + dataSize, true);
-  writeString({ view, offset: 8, str: "WAVE" });
+	// riff header
+	writeString({ view, offset: 0, str: "RIFF" });
+	view.setUint32(4, 36 + dataSize, true);
+	writeString({ view, offset: 8, str: "WAVE" });
 
-  // fmt chunk
-  writeString({ view, offset: 12, str: "fmt " });
-  view.setUint32(16, 16, true);
-  view.setUint16(20, 1, true);
-  view.setUint16(22, numChannels, true);
-  view.setUint32(24, SAMPLE_RATE, true);
-  view.setUint32(28, SAMPLE_RATE * numChannels * bytesPerSample, true);
-  view.setUint16(32, numChannels * bytesPerSample, true);
-  view.setUint16(34, bitsPerSample, true);
+	// fmt chunk
+	writeString({ view, offset: 12, str: "fmt " });
+	view.setUint32(16, 16, true);
+	view.setUint16(20, 1, true);
+	view.setUint16(22, numChannels, true);
+	view.setUint32(24, SAMPLE_RATE, true);
+	view.setUint32(28, SAMPLE_RATE * numChannels * bytesPerSample, true);
+	view.setUint16(32, numChannels * bytesPerSample, true);
+	view.setUint16(34, bitsPerSample, true);
 
-  // data chunk
-  writeString({ view, offset: 36, str: "data" });
-  view.setUint32(40, dataSize, true);
+	// data chunk
+	writeString({ view, offset: 36, str: "data" });
+	view.setUint32(40, dataSize, true);
 
-  // convert float32 to int16 and write
-  let offset = 44;
-  for (let i = 0; i < samples.length; i++) {
-    const sample = Math.max(-1, Math.min(1, samples[i]));
-    const int16 = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
-    view.setInt16(offset, int16, true);
-    offset += 2;
-  }
+	// convert float32 to int16 and write
+	let offset = 44;
+	for (let i = 0; i < samples.length; i++) {
+		const sample = Math.max(-1, Math.min(1, samples[i]));
+		const int16 = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+		view.setInt16(offset, int16, true);
+		offset += 2;
+	}
 
-  return new Blob([buffer], { type: "audio/wav" });
+	return new Blob([buffer], { type: "audio/wav" });
 }
 
 function writeString({
-  view,
-  offset,
-  str,
+	view,
+	offset,
+	str,
 }: {
-  view: DataView;
-  offset: number;
-  str: string;
+	view: DataView;
+	offset: number;
+	str: string;
 }): void {
-  for (let i = 0; i < str.length; i++) {
-    view.setUint8(offset + i, str.charCodeAt(i));
-  }
+	for (let i = 0; i < str.length; i++) {
+		view.setUint8(offset + i, str.charCodeAt(i));
+	}
 }
diff --git a/apps/web/src/lib/media/processing.ts b/apps/web/src/lib/media/processing.ts
index 16afec2b..33b5d00a 100644
--- a/apps/web/src/lib/media/processing.ts
+++ b/apps/web/src/lib/media/processing.ts
@@ -1,5 +1,5 @@
 import { toast } from "sonner";
-import { MediaAsset } from "@/types/assets";
+import type { MediaAsset } from "@/types/assets";
 import { getMediaTypeFromFile } from "@/lib/media/media-utils";
 import { getVideoInfo } from "./mediabunny";
 import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny";
@@ -7,197 +7,203 @@ import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny";
 export interface ProcessedMediaAsset extends Omit<MediaAsset, "id"> {}
 
 export async function generateThumbnail({
-  videoFile,
-  timeInSeconds,
+	videoFile,
+	timeInSeconds,
 }: {
-  videoFile: File;
-  timeInSeconds: number;
+	videoFile: File;
+	timeInSeconds: number;
 }): Promise<string> {
-  const input = new Input({
-    source: new BlobSource(videoFile),
-    formats: ALL_FORMATS,
-  });
+	const input = new Input({
+		source: new BlobSource(videoFile),
+		formats: ALL_FORMATS,
+	});
 
-  const videoTrack = await input.getPrimaryVideoTrack();
-  if (!videoTrack) {
-    throw new Error("No video track found in the file");
-  }
+	const videoTrack = await input.getPrimaryVideoTrack();
+	if (!videoTrack) {
+		throw new Error("No video track found in the file");
+	}
 
-  const canDecode = await videoTrack.canDecode();
-  if (!canDecode) {
-    throw new Error("Video codec not supported for decoding");
-  }
+	const canDecode = await videoTrack.canDecode();
+	if (!canDecode) {
+		throw new Error("Video codec not supported for decoding");
+	}
 
-  const sink = new VideoSampleSink(videoTrack);
+	const sink = new VideoSampleSink(videoTrack);
 
-  const frame = await sink.getSample(timeInSeconds);
+	const frame = await sink.getSample(timeInSeconds);
 
-  if (!frame) {
-    throw new Error("Could not get frame at specified time");
-  }
+	if (!frame) {
+		throw new Error("Could not get frame at specified time");
+	}
 
-  const maxWidth = 1280;
-  const maxHeight = 720;
+	const maxWidth = 1280;
+	const maxHeight = 720;
 
-  const videoWidth = videoTrack.displayWidth;
-  const videoHeight = videoTrack.displayHeight;
-  const aspectRatio = videoWidth / videoHeight;
+	const videoWidth = videoTrack.displayWidth;
+	const videoHeight = videoTrack.displayHeight;
+	const aspectRatio = videoWidth / videoHeight;
 
-  let width = videoWidth;
-  let height = videoHeight;
+	let width = videoWidth;
+	let height = videoHeight;
 
-  if (width > maxWidth) {
-    width = maxWidth;
-    height = Math.round(width / aspectRatio);
-  }
-  if (height > maxHeight) {
-    height = maxHeight;
-    width = Math.round(height * aspectRatio);
-  }
+	if (width > maxWidth) {
+		width = maxWidth;
+		height = Math.round(width / aspectRatio);
+	}
+	if (height > maxHeight) {
+		height = maxHeight;
+		width = Math.round(height * aspectRatio);
+	}
 
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const ctx = canvas.getContext("2d");
+	const canvas = document.createElement("canvas");
+	canvas.width = width;
+	canvas.height = height;
+	const ctx = canvas.getContext("2d");
 
-  if (!ctx) {
-    throw new Error("Could not get canvas context");
-  }
+	if (!ctx) {
+		throw new Error("Could not get canvas context");
+	}
 
-  frame.draw(ctx, 0, 0, width, height);
-  const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
-  return dataUrl;
+	try {
+		frame.draw(ctx, 0, 0, width, height);
+		const dataUrl = canvas.toDataURL("image/jpeg", 0.8);
+		return dataUrl;
+	} finally {
+		frame.close();
+	}
 }
 
 export async function processMediaAssets({
-  files,
-  onProgress,
+	files,
+	onProgress,
 }: {
-  files: FileList | File[];
-  onProgress?: ({ progress }: { progress: number }) => void;
+	files: FileList | File[];
+	onProgress?: ({ progress }: { progress: number }) => void;
 }): Promise<ProcessedMediaAsset[]> {
-  const fileArray = Array.from(files);
-  const processedAssets: ProcessedMediaAsset[] = [];
+	const fileArray = Array.from(files);
+	const processedAssets: ProcessedMediaAsset[] = [];
 
-  const total = fileArray.length;
-  let completed = 0;
+	const total = fileArray.length;
+	let completed = 0;
 
-  for (const file of fileArray) {
-    const fileType = getMediaTypeFromFile({ file });
+	for (const file of fileArray) {
+		const fileType = getMediaTypeFromFile({ file });
 
-    if (!fileType) {
-      toast.error(`Unsupported file type: ${file.name}`);
-      continue;
-    }
+		if (!fileType) {
+			toast.error(`Unsupported file type: ${file.name}`);
+			continue;
+		}
 
-    const url = URL.createObjectURL(file);
-    let thumbnailUrl: string | undefined;
-    let duration: number | undefined;
-    let width: number | undefined;
-    let height: number | undefined;
-    let fps: number | undefined;
+		const url = URL.createObjectURL(file);
+		let thumbnailUrl: string | undefined;
+		let duration: number | undefined;
+		let width: number | undefined;
+		let height: number | undefined;
+		let fps: number | undefined;
 
-    try {
-      if (fileType === "image") {
-        const dimensions = await getImageDimensions({ file });
-        width = dimensions.width;
-        height = dimensions.height;
-      } else if (fileType === "video") {
-        try {
-          const videoInfo = await getVideoInfo({ videoFile: file });
-          duration = videoInfo.duration;
-          width = videoInfo.width;
-          height = videoInfo.height;
-          fps = videoInfo.fps;
+		try {
+			if (fileType === "image") {
+				const dimensions = await getImageDimensions({ file });
+				width = dimensions.width;
+				height = dimensions.height;
+			} else if (fileType === "video") {
+				try {
+					const videoInfo = await getVideoInfo({ videoFile: file });
+					duration = videoInfo.duration;
+					width = videoInfo.width;
+					height = videoInfo.height;
+					fps = Number.isFinite(videoInfo.fps)
+						? Math.round(videoInfo.fps * 1000) / 1000
+						: undefined;
 
-          thumbnailUrl = await generateThumbnail({
-            videoFile: file,
-            timeInSeconds: 1,
-          });
-        } catch (error) {
-          console.warn("Video processing failed", error);
-        }
-      } else if (fileType === "audio") {
-        // For audio, we don't set width/height/fps (they'll be undefined)
-        duration = await getMediaDuration({ file });
-      }
+					thumbnailUrl = await generateThumbnail({
+						videoFile: file,
+						timeInSeconds: 1,
+					});
+				} catch (error) {
+					console.warn("Video processing failed", error);
+				}
+			} else if (fileType === "audio") {
+				// For audio, we don't set width/height/fps (they'll be undefined)
+				duration = await getMediaDuration({ file });
+			}
 
-      processedAssets.push({
-        name: file.name,
-        type: fileType,
-        file,
-        url,
-        thumbnailUrl,
-        duration,
-        width,
-        height,
-        fps,
-      });
+			processedAssets.push({
+				name: file.name,
+				type: fileType,
+				file,
+				url,
+				thumbnailUrl,
+				duration,
+				width,
+				height,
+				fps,
+			});
 
-      await new Promise((resolve) => setTimeout(resolve, 0));
+			await new Promise((resolve) => setTimeout(resolve, 0));
 
-      completed += 1;
-      if (onProgress) {
-        const percent = Math.round((completed / total) * 100);
-        onProgress({ progress: percent });
-      }
-    } catch (error) {
-      console.error("Error processing file:", file.name, error);
-      toast.error(`Failed to process ${file.name}`);
-      URL.revokeObjectURL(url); // Clean up on error
-    }
-  }
+			completed += 1;
+			if (onProgress) {
+				const percent = Math.round((completed / total) * 100);
+				onProgress({ progress: percent });
+			}
+		} catch (error) {
+			console.error("Error processing file:", file.name, error);
+			toast.error(`Failed to process ${file.name}`);
+			URL.revokeObjectURL(url); // Clean up on error
+		}
+	}
 
-  return processedAssets;
+	return processedAssets;
 }
 
 const getImageDimensions = ({
-  file,
+	file,
 }: {
-  file: File;
+	file: File;
 }): Promise<{ width: number; height: number }> => {
-  return new Promise((resolve, reject) => {
-    const img = new window.Image();
-    const objectUrl = URL.createObjectURL(file);
+	return new Promise((resolve, reject) => {
+		const img = new window.Image();
+		const objectUrl = URL.createObjectURL(file);
 
-    img.addEventListener("load", () => {
-      const width = img.naturalWidth;
-      const height = img.naturalHeight;
-      resolve({ width, height });
-      URL.revokeObjectURL(objectUrl);
-      img.remove();
-    });
+		img.addEventListener("load", () => {
+			const width = img.naturalWidth;
+			const height = img.naturalHeight;
+			resolve({ width, height });
+			URL.revokeObjectURL(objectUrl);
+			img.remove();
+		});
 
-    img.addEventListener("error", () => {
-      reject(new Error("Could not load image"));
-      URL.revokeObjectURL(objectUrl);
-      img.remove();
-    });
+		img.addEventListener("error", () => {
+			reject(new Error("Could not load image"));
+			URL.revokeObjectURL(objectUrl);
+			img.remove();
+		});
 
-    img.src = objectUrl;
-  });
+		img.src = objectUrl;
+	});
 };
 
 const getMediaDuration = ({ file }: { file: File }): Promise<number> => {
-  return new Promise((resolve, reject) => {
-    const element = document.createElement(
-      file.type.startsWith("video/") ? "video" : "audio",
-    ) as HTMLVideoElement;
-    const objectUrl = URL.createObjectURL(file);
+	return new Promise((resolve, reject) => {
+		const element = document.createElement(
+			file.type.startsWith("video/") ? "video" : "audio",
+		) as HTMLVideoElement;
+		const objectUrl = URL.createObjectURL(file);
 
-    element.addEventListener("loadedmetadata", () => {
-      resolve(element.duration);
-      URL.revokeObjectURL(objectUrl);
-      element.remove();
-    });
+		element.addEventListener("loadedmetadata", () => {
+			resolve(element.duration);
+			URL.revokeObjectURL(objectUrl);
+			element.remove();
+		});
 
-    element.addEventListener("error", () => {
-      reject(new Error("Could not load media"));
-      URL.revokeObjectURL(objectUrl);
-      element.remove();
-    });
+		element.addEventListener("error", () => {
+			reject(new Error("Could not load media"));
+			URL.revokeObjectURL(objectUrl);
+			element.remove();
+		});
 
-    element.src = objectUrl;
-    element.load();
-  });
+		element.src = objectUrl;
+		element.load();
+	});
 };
diff --git a/apps/web/src/lib/rate-limit.ts b/apps/web/src/lib/rate-limit.ts
index 1c27a2e5..d18889af 100644
--- a/apps/web/src/lib/rate-limit.ts
+++ b/apps/web/src/lib/rate-limit.ts
@@ -3,19 +3,19 @@ import { Redis } from "@upstash/redis";
 import { webEnv } from "@opencut/env/web";
 
 const redis = new Redis({
-  url: webEnv.UPSTASH_REDIS_REST_URL,
-  token: webEnv.UPSTASH_REDIS_REST_TOKEN,
+	url: webEnv.UPSTASH_REDIS_REST_URL,
+	token: webEnv.UPSTASH_REDIS_REST_TOKEN,
 });
 
 export const baseRateLimit = new Ratelimit({
-  redis,
-  limiter: Ratelimit.slidingWindow(100, "1 m"), // 100 requests per minute
-  analytics: true,
-  prefix: "rate-limit",
+	redis,
+	limiter: Ratelimit.slidingWindow(100, "1 m"), // 100 requests per minute
+	analytics: true,
+	prefix: "rate-limit",
 });
 
 export async function checkRateLimit({ request }: { request: Request }) {
-  const ip = request.headers.get("x-forwarded-for") ?? "anonymous";
-  const { success } = await baseRateLimit.limit(ip);
-  return { success, limited: !success };
+	const ip = request.headers.get("x-forwarded-for") ?? "anonymous";
+	const { success } = await baseRateLimit.limit(ip);
+	return { success, limited: !success };
 }
diff --git a/apps/web/src/lib/scenes.ts b/apps/web/src/lib/scenes.ts
index 1defe9cf..47297f44 100644
--- a/apps/web/src/lib/scenes.ts
+++ b/apps/web/src/lib/scenes.ts
@@ -1,89 +1,89 @@
-import { TScene } from "@/types/timeline";
+import type { TScene } from "@/types/timeline";
 import { generateUUID } from "@/utils/id";
 import { ensureMainTrack } from "@/lib/timeline/track-utils";
 
 export function getMainScene({ scenes }: { scenes: TScene[] }): TScene | null {
-  return scenes.find((scene) => scene.isMain) || null;
+	return scenes.find((scene) => scene.isMain) || null;
 }
 
 export function ensureMainScene({ scenes }: { scenes: TScene[] }): TScene[] {
-  const hasMain = scenes.some((scene) => scene.isMain);
-  if (!hasMain) {
-    const mainScene = buildDefaultScene({ name: "Main scene", isMain: true });
-    return [mainScene, ...scenes];
-  }
-  return scenes;
+	const hasMain = scenes.some((scene) => scene.isMain);
+	if (!hasMain) {
+		const mainScene = buildDefaultScene({ name: "Main scene", isMain: true });
+		return [mainScene, ...scenes];
+	}
+	return scenes;
 }
 
 export function buildDefaultScene({
-  name,
-  isMain,
+	name,
+	isMain,
 }: {
-  name: string;
-  isMain: boolean;
+	name: string;
+	isMain: boolean;
 }): TScene {
-  const tracks = ensureMainTrack({ tracks: [] });
-  return {
-    id: generateUUID(),
-    name,
-    isMain,
-    tracks,
-    bookmarks: [],
-    createdAt: new Date(),
-    updatedAt: new Date(),
-  };
+	const tracks = ensureMainTrack({ tracks: [] });
+	return {
+		id: generateUUID(),
+		name,
+		isMain,
+		tracks,
+		bookmarks: [],
+		createdAt: new Date(),
+		updatedAt: new Date(),
+	};
 }
 
 export function canDeleteScene({ scene }: { scene: TScene }): {
-  canDelete: boolean;
-  reason?: string;
+	canDelete: boolean;
+	reason?: string;
 } {
-  if (scene.isMain) {
-    return { canDelete: false, reason: "Cannot delete main scene" };
-  }
-  return { canDelete: true };
+	if (scene.isMain) {
+		return { canDelete: false, reason: "Cannot delete main scene" };
+	}
+	return { canDelete: true };
 }
 
 export function getFallbackSceneAfterDelete({
-  scenes,
-  deletedSceneId,
-  currentSceneId,
+	scenes,
+	deletedSceneId,
+	currentSceneId,
 }: {
-  scenes: TScene[];
-  deletedSceneId: string;
-  currentSceneId: string | null;
+	scenes: TScene[];
+	deletedSceneId: string;
+	currentSceneId: string | null;
 }): TScene | null {
-  if (currentSceneId !== deletedSceneId) {
-    return scenes.find((s) => s.id === currentSceneId) || null;
-  }
-  return getMainScene({ scenes });
+	if (currentSceneId !== deletedSceneId) {
+		return scenes.find((s) => s.id === currentSceneId) || null;
+	}
+	return getMainScene({ scenes });
 }
 
 export function findCurrentScene({
-  scenes,
-  currentSceneId,
+	scenes,
+	currentSceneId,
 }: {
-  scenes: TScene[];
-  currentSceneId: string;
+	scenes: TScene[];
+	currentSceneId: string;
 }): TScene | null {
-  return (
-    scenes.find((s) => s.id === currentSceneId) ||
-    getMainScene({ scenes }) ||
-    scenes[0] ||
-    null
-  );
+	return (
+		scenes.find((s) => s.id === currentSceneId) ||
+		getMainScene({ scenes }) ||
+		scenes[0] ||
+		null
+	);
 }
 
 export function updateSceneInArray({
-  scenes,
-  sceneId,
-  updates,
+	scenes,
+	sceneId,
+	updates,
 }: {
-  scenes: TScene[];
-  sceneId: string;
-  updates: Partial<TScene>;
+	scenes: TScene[];
+	sceneId: string;
+	updates: Partial<TScene>;
 }): TScene[] {
-  return scenes.map((scene) =>
-    scene.id === sceneId ? { ...scene, ...updates } : scene,
-  );
+	return scenes.map((scene) =>
+		scene.id === sceneId ? { ...scene, ...updates } : scene,
+	);
 }
diff --git a/apps/web/src/lib/time.ts b/apps/web/src/lib/time.ts
index 8f91819f..6b6f2037 100644
--- a/apps/web/src/lib/time.ts
+++ b/apps/web/src/lib/time.ts
@@ -1,200 +1,200 @@
 import type { TTimeCode } from "@/types/time";
 
 export function roundToFrame({
-  time,
-  fps,
+	time,
+	fps,
 }: {
-  time: number;
-  fps: number;
+	time: number;
+	fps: number;
 }): number {
-  return Math.round(time * fps) / fps;
+	return Math.round(time * fps) / fps;
 }
 
 export function formatTimeCode({
-  timeInSeconds,
-  format = "HH:MM:SS:CS",
-  fps,
+	timeInSeconds,
+	format = "HH:MM:SS:CS",
+	fps,
 }: {
-  timeInSeconds: number;
-  format?: TTimeCode;
-  fps?: number;
+	timeInSeconds: number;
+	format?: TTimeCode;
+	fps?: number;
 }): string {
-  const hours = Math.floor(timeInSeconds / 3600);
-  const minutes = Math.floor((timeInSeconds % 3600) / 60);
-  const seconds = Math.floor(timeInSeconds % 60);
-  const centiseconds = Math.floor((timeInSeconds % 1) * 100);
-  const frames = fps ? Math.floor((timeInSeconds % 1) * fps) : 0;
+	const hours = Math.floor(timeInSeconds / 3600);
+	const minutes = Math.floor((timeInSeconds % 3600) / 60);
+	const seconds = Math.floor(timeInSeconds % 60);
+	const centiseconds = Math.floor((timeInSeconds % 1) * 100);
+	const frames = fps ? Math.floor((timeInSeconds % 1) * fps) : 0;
 
-  switch (format) {
-    case "MM:SS":
-      return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-    case "HH:MM:SS":
-      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
-    case "HH:MM:SS:CS":
-      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${centiseconds.toString().padStart(2, "0")}`;
-    case "HH:MM:SS:FF":
-      if (!fps) throw new Error("FPS is required for HH:MM:SS:FF format");
-      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${frames.toString().padStart(2, "0")}`;
-  }
+	switch (format) {
+		case "MM:SS":
+			return `${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+		case "HH:MM:SS":
+			return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
+		case "HH:MM:SS:CS":
+			return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${centiseconds.toString().padStart(2, "0")}`;
+		case "HH:MM:SS:FF":
+			if (!fps) throw new Error("FPS is required for HH:MM:SS:FF format");
+			return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${frames.toString().padStart(2, "0")}`;
+	}
 }
 
 export function parseTimeCode({
-  timeCode,
-  format = "HH:MM:SS:CS",
-  fps,
+	timeCode,
+	format = "HH:MM:SS:CS",
+	fps,
 }: {
-  timeCode: string;
-  format?: TTimeCode;
-  fps: number;
+	timeCode: string;
+	format?: TTimeCode;
+	fps: number;
 }): number | null {
-  if (!timeCode || typeof timeCode !== "string") return null;
+	if (!timeCode || typeof timeCode !== "string") return null;
 
-  const cleanTimeCode = timeCode.trim();
+	const cleanTimeCode = timeCode.trim();
 
-  try {
-    switch (format) {
-      case "MM:SS": {
-        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 (minutes < 0 || seconds < 0 || seconds >= 60) return null;
-        return minutes * 60 + seconds;
-      }
+	try {
+		switch (format) {
+			case "MM:SS": {
+				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 (minutes < 0 || seconds < 0 || seconds >= 60) return null;
+				return minutes * 60 + seconds;
+			}
 
-      case "HH:MM:SS": {
-        const parts = cleanTimeCode.split(":");
-        if (parts.length !== 3) return null;
-        const [hours, minutes, seconds] = parts.map((part) =>
-          parseInt(part, 10),
-        );
-        if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return null;
-        if (
-          hours < 0 ||
-          minutes < 0 ||
-          seconds < 0 ||
-          minutes >= 60 ||
-          seconds >= 60
-        )
-          return null;
-        return hours * 3600 + minutes * 60 + seconds;
-      }
+			case "HH:MM:SS": {
+				const parts = cleanTimeCode.split(":");
+				if (parts.length !== 3) return null;
+				const [hours, minutes, seconds] = parts.map((part) =>
+					parseInt(part, 10),
+				);
+				if (isNaN(hours) || isNaN(minutes) || isNaN(seconds)) return null;
+				if (
+					hours < 0 ||
+					minutes < 0 ||
+					seconds < 0 ||
+					minutes >= 60 ||
+					seconds >= 60
+				)
+					return null;
+				return hours * 3600 + minutes * 60 + seconds;
+			}
 
-      case "HH:MM:SS:CS": {
-        const parts = cleanTimeCode.split(":");
-        if (parts.length !== 4) return null;
-        const [hours, minutes, seconds, centiseconds] = parts.map((part) =>
-          parseInt(part, 10),
-        );
-        if (
-          isNaN(hours) ||
-          isNaN(minutes) ||
-          isNaN(seconds) ||
-          isNaN(centiseconds)
-        )
-          return null;
-        if (
-          hours < 0 ||
-          minutes < 0 ||
-          seconds < 0 ||
-          centiseconds < 0 ||
-          minutes >= 60 ||
-          seconds >= 60 ||
-          centiseconds >= 100
-        )
-          return null;
-        return hours * 3600 + minutes * 60 + seconds + centiseconds / 100;
-      }
+			case "HH:MM:SS:CS": {
+				const parts = cleanTimeCode.split(":");
+				if (parts.length !== 4) return null;
+				const [hours, minutes, seconds, centiseconds] = parts.map((part) =>
+					parseInt(part, 10),
+				);
+				if (
+					isNaN(hours) ||
+					isNaN(minutes) ||
+					isNaN(seconds) ||
+					isNaN(centiseconds)
+				)
+					return null;
+				if (
+					hours < 0 ||
+					minutes < 0 ||
+					seconds < 0 ||
+					centiseconds < 0 ||
+					minutes >= 60 ||
+					seconds >= 60 ||
+					centiseconds >= 100
+				)
+					return null;
+				return hours * 3600 + minutes * 60 + seconds + centiseconds / 100;
+			}
 
-      case "HH:MM:SS:FF": {
-        const parts = cleanTimeCode.split(":");
-        if (parts.length !== 4) return null;
-        const [hours, minutes, seconds, frames] = parts.map((part) =>
-          parseInt(part, 10),
-        );
-        if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) || isNaN(frames))
-          return null;
-        if (
-          hours < 0 ||
-          minutes < 0 ||
-          seconds < 0 ||
-          frames < 0 ||
-          minutes >= 60 ||
-          seconds >= 60 ||
-          frames >= fps
-        )
-          return null;
-        return hours * 3600 + minutes * 60 + seconds + frames / fps;
-      }
-    }
-  } catch {
-    return null;
-  }
+			case "HH:MM:SS:FF": {
+				const parts = cleanTimeCode.split(":");
+				if (parts.length !== 4) return null;
+				const [hours, minutes, seconds, frames] = parts.map((part) =>
+					parseInt(part, 10),
+				);
+				if (isNaN(hours) || isNaN(minutes) || isNaN(seconds) || isNaN(frames))
+					return null;
+				if (
+					hours < 0 ||
+					minutes < 0 ||
+					seconds < 0 ||
+					frames < 0 ||
+					minutes >= 60 ||
+					seconds >= 60 ||
+					frames >= fps
+				)
+					return null;
+				return hours * 3600 + minutes * 60 + seconds + frames / fps;
+			}
+		}
+	} catch {
+		return null;
+	}
 }
 
 export function guessTimeCodeFormat({
-  timeCode,
+	timeCode,
 }: {
-  timeCode: string;
+	timeCode: string;
 }): TTimeCode | null {
-  if (!timeCode || typeof timeCode !== "string") return null;
+	if (!timeCode || typeof timeCode !== "string") return null;
 
-  const numbers = timeCode.split(":");
+	const numbers = timeCode.split(":");
 
-  if (!numbers.every((n) => !isNaN(Number(n)))) return null;
+	if (!numbers.every((n) => !isNaN(Number(n)))) return null;
 
-  if (numbers.length === 2) return "MM:SS";
-  if (numbers.length === 3) return "HH:MM:SS";
-  // todo: how to tell frames apart from cs?
-  if (numbers.length === 4) return "HH:MM:SS:FF";
+	if (numbers.length === 2) return "MM:SS";
+	if (numbers.length === 3) return "HH:MM:SS";
+	// todo: how to tell frames apart from cs?
+	if (numbers.length === 4) return "HH:MM:SS:FF";
 
-  return null;
+	return null;
 }
 
 export function timeToFrame({
-  time,
-  fps,
+	time,
+	fps,
 }: {
-  time: number;
-  fps: number;
+	time: number;
+	fps: number;
 }): number {
-  return Math.round(time * fps);
+	return Math.round(time * fps);
 }
 
 export function frameToTime({
-  frame,
-  fps,
+	frame,
+	fps,
 }: {
-  frame: number;
-  fps: number;
+	frame: number;
+	fps: number;
 }): number {
-  return frame / fps;
+	return frame / fps;
 }
 
 export function snapTimeToFrame({
-  time,
-  fps,
+	time,
+	fps,
 }: {
-  time: number;
-  fps: number;
+	time: number;
+	fps: number;
 }): number {
-  if (fps <= 0) return time;
-  const frame = timeToFrame({ time, fps });
-  return frameToTime({ frame, fps });
+	if (fps <= 0) return time;
+	const frame = timeToFrame({ time, fps });
+	return frameToTime({ frame, fps });
 }
 
 export function getSnappedSeekTime({
-  rawTime,
-  duration,
-  fps,
+	rawTime,
+	duration,
+	fps,
 }: {
-  rawTime: number;
-  duration: number;
-  fps: number;
+	rawTime: number;
+	duration: number;
+	fps: number;
 }): number {
-  const snappedTime = snapTimeToFrame({ time: rawTime, fps });
-  const frameOffset = fps > 0 ? 1 / fps : 0;
-  const maxSeekTime =
-    frameOffset > 0 ? Math.max(0, duration - frameOffset) : duration;
-  return Math.max(0, Math.min(maxSeekTime, snappedTime));
+	const snappedTime = snapTimeToFrame({ time: rawTime, fps });
+	const frameOffset = fps > 0 ? 1 / fps : 0;
+	const maxSeekTime =
+		frameOffset > 0 ? Math.max(0, duration - frameOffset) : duration;
+	return Math.max(0, Math.min(maxSeekTime, snappedTime));
 }
diff --git a/apps/web/src/lib/timeline/bookmarks.ts b/apps/web/src/lib/timeline/bookmarks.ts
index 5c5992d1..0b06c2f6 100644
--- a/apps/web/src/lib/timeline/bookmarks.ts
+++ b/apps/web/src/lib/timeline/bookmarks.ts
@@ -1,61 +1,61 @@
 import { roundToFrame } from "@/lib/time";
 
 export function findBookmarkIndex({
-  bookmarks,
-  frameTime,
+	bookmarks,
+	frameTime,
 }: {
-  bookmarks: number[];
-  frameTime: number;
+	bookmarks: number[];
+	frameTime: number;
 }): number {
-  return bookmarks.findIndex(
-    (bookmark) => Math.abs(bookmark - frameTime) < 0.001,
-  );
+	return bookmarks.findIndex(
+		(bookmark) => Math.abs(bookmark - frameTime) < 0.001,
+	);
 }
 
 export function isBookmarkAtTime({
-  bookmarks,
-  frameTime,
+	bookmarks,
+	frameTime,
 }: {
-  bookmarks: number[];
-  frameTime: number;
+	bookmarks: number[];
+	frameTime: number;
 }): boolean {
-  return bookmarks.some((bookmark) => Math.abs(bookmark - frameTime) < 0.001);
+	return bookmarks.some((bookmark) => Math.abs(bookmark - frameTime) < 0.001);
 }
 
 export function toggleBookmarkInArray({
-  bookmarks,
-  frameTime,
+	bookmarks,
+	frameTime,
 }: {
-  bookmarks: number[];
-  frameTime: number;
+	bookmarks: number[];
+	frameTime: number;
 }): number[] {
-  const bookmarkIndex = findBookmarkIndex({ bookmarks, frameTime });
+	const bookmarkIndex = findBookmarkIndex({ bookmarks, frameTime });
 
-  if (bookmarkIndex !== -1) {
-    return bookmarks.filter((_, i) => i !== bookmarkIndex);
-  }
+	if (bookmarkIndex !== -1) {
+		return bookmarks.filter((_, i) => i !== bookmarkIndex);
+	}
 
-  return [...bookmarks, frameTime].sort((a, b) => a - b);
+	return [...bookmarks, frameTime].sort((a, b) => a - b);
 }
 
 export function removeBookmarkFromArray({
-  bookmarks,
-  frameTime,
+	bookmarks,
+	frameTime,
 }: {
-  bookmarks: number[];
-  frameTime: number;
+	bookmarks: number[];
+	frameTime: number;
 }): number[] {
-  return bookmarks.filter(
-    (bookmark) => Math.abs(bookmark - frameTime) >= 0.001,
-  );
+	return bookmarks.filter(
+		(bookmark) => Math.abs(bookmark - frameTime) >= 0.001,
+	);
 }
 
 export function getFrameTime({
-  time,
-  fps,
+	time,
+	fps,
 }: {
-  time: number;
-  fps: number;
+	time: number;
+	fps: number;
 }): number {
-  return roundToFrame({ time, fps });
+	return roundToFrame({ time, fps });
 }
diff --git a/apps/web/src/lib/timeline/drop-utils.ts b/apps/web/src/lib/timeline/drop-utils.ts
index 8cac5e46..8c22194a 100644
--- a/apps/web/src/lib/timeline/drop-utils.ts
+++ b/apps/web/src/lib/timeline/drop-utils.ts
@@ -5,230 +5,230 @@ import type { ComputeDropTargetParams, DropTarget } from "@/types/timeline";
 import { isMainTrack } from "./track-utils";
 
 function getTrackAtY({
-  mouseY,
-  tracks,
-  verticalDragDirection,
+	mouseY,
+	tracks,
+	verticalDragDirection,
 }: {
-  mouseY: number;
-  tracks: TimelineTrack[];
-  verticalDragDirection?: "up" | "down" | null;
+	mouseY: number;
+	tracks: TimelineTrack[];
+	verticalDragDirection?: "up" | "down" | null;
 }): { trackIndex: number; relativeY: number } | null {
-  let cumulativeHeight = 0;
+	let cumulativeHeight = 0;
 
-  for (let i = 0; i < tracks.length; i++) {
-    const trackHeight = TRACK_HEIGHTS[tracks[i].type];
-    const trackTop = cumulativeHeight;
-    const trackBottom = trackTop + trackHeight;
+	for (let i = 0; i < tracks.length; i++) {
+		const trackHeight = TRACK_HEIGHTS[tracks[i].type];
+		const trackTop = cumulativeHeight;
+		const trackBottom = trackTop + trackHeight;
 
-    if (mouseY >= trackTop && mouseY < trackBottom) {
-      return {
-        trackIndex: i,
-        relativeY: mouseY - trackTop,
-      };
-    }
+		if (mouseY >= trackTop && mouseY < trackBottom) {
+			return {
+				trackIndex: i,
+				relativeY: mouseY - trackTop,
+			};
+		}
 
-    if (i < tracks.length - 1 && verticalDragDirection) {
-      const gapTop = trackBottom;
-      const gapBottom = gapTop + TRACK_GAP;
-      if (mouseY >= gapTop && mouseY < gapBottom) {
-        const isDraggingUp = verticalDragDirection === "up";
-        return {
-          trackIndex: isDraggingUp ? i : i + 1,
-          relativeY: isDraggingUp ? trackHeight - 1 : 0,
-        };
-      }
-    }
+		if (i < tracks.length - 1 && verticalDragDirection) {
+			const gapTop = trackBottom;
+			const gapBottom = gapTop + TRACK_GAP;
+			if (mouseY >= gapTop && mouseY < gapBottom) {
+				const isDraggingUp = verticalDragDirection === "up";
+				return {
+					trackIndex: isDraggingUp ? i : i + 1,
+					relativeY: isDraggingUp ? trackHeight - 1 : 0,
+				};
+			}
+		}
 
-    cumulativeHeight += trackHeight + TRACK_GAP;
-  }
+		cumulativeHeight += trackHeight + TRACK_GAP;
+	}
 
-  return null;
+	return null;
 }
 
 function isCompatible({
-  elementType,
-  trackType,
+	elementType,
+	trackType,
 }: {
-  elementType: ElementType;
-  trackType: TimelineTrack["type"];
+	elementType: ElementType;
+	trackType: TimelineTrack["type"];
 }): boolean {
-  if (elementType === "text") return trackType === "text";
-  if (elementType === "audio") return trackType === "audio";
-  if (elementType === "sticker") return trackType === "sticker";
-  if (elementType === "video" || elementType === "image") {
-    return trackType === "video";
-  }
-  return false;
+	if (elementType === "text") return trackType === "text";
+	if (elementType === "audio") return trackType === "audio";
+	if (elementType === "sticker") return trackType === "sticker";
+	if (elementType === "video" || elementType === "image") {
+		return trackType === "video";
+	}
+	return false;
 }
 
 function getMainTrackIndex({ tracks }: { tracks: TimelineTrack[] }): number {
-  return tracks.findIndex((track) => isMainTrack(track));
+	return tracks.findIndex((track) => isMainTrack(track));
 }
 
 function findInsertIndex({
-  elementType,
-  tracks,
-  preferredIndex,
-  insertAbove,
+	elementType,
+	tracks,
+	preferredIndex,
+	insertAbove,
 }: {
-  elementType: ElementType;
-  tracks: TimelineTrack[];
-  preferredIndex: number;
-  insertAbove: boolean;
+	elementType: ElementType;
+	tracks: TimelineTrack[];
+	preferredIndex: number;
+	insertAbove: boolean;
 }): { index: number; position: "above" | "below" } {
-  const mainTrackIndex = getMainTrackIndex({ tracks });
+	const mainTrackIndex = getMainTrackIndex({ tracks });
 
-  if (elementType === "audio") {
-    if (preferredIndex <= mainTrackIndex) {
-      return { index: mainTrackIndex + 1, position: "below" };
-    }
-    return {
-      index: insertAbove ? preferredIndex : preferredIndex + 1,
-      position: insertAbove ? "above" : "below",
-    };
-  }
+	if (elementType === "audio") {
+		if (preferredIndex <= mainTrackIndex) {
+			return { index: mainTrackIndex + 1, position: "below" };
+		}
+		return {
+			index: insertAbove ? preferredIndex : preferredIndex + 1,
+			position: insertAbove ? "above" : "below",
+		};
+	}
 
-  const overlayInsertIndex = insertAbove ? preferredIndex : preferredIndex + 1;
+	const overlayInsertIndex = insertAbove ? preferredIndex : preferredIndex + 1;
 
-  if (mainTrackIndex >= 0 && overlayInsertIndex > mainTrackIndex) {
-    return { index: mainTrackIndex, position: "above" };
-  }
+	if (mainTrackIndex >= 0 && overlayInsertIndex > mainTrackIndex) {
+		return { index: mainTrackIndex, position: "above" };
+	}
 
-  return {
-    index: overlayInsertIndex,
-    position: insertAbove ? "above" : "below",
-  };
+	return {
+		index: overlayInsertIndex,
+		position: insertAbove ? "above" : "below",
+	};
 }
 
 export function computeDropTarget({
-  elementType,
-  mouseX,
-  mouseY,
-  tracks,
-  playheadTime,
-  isExternalDrop,
-  elementDuration,
-  pixelsPerSecond,
-  zoomLevel,
-  verticalDragDirection,
-  startTimeOverride,
-  excludeElementId,
+	elementType,
+	mouseX,
+	mouseY,
+	tracks,
+	playheadTime,
+	isExternalDrop,
+	elementDuration,
+	pixelsPerSecond,
+	zoomLevel,
+	verticalDragDirection,
+	startTimeOverride,
+	excludeElementId,
 }: ComputeDropTargetParams): DropTarget {
-  const xPosition =
-    typeof startTimeOverride === "number"
-      ? startTimeOverride
-      : isExternalDrop
-        ? playheadTime
-        : Math.max(0, mouseX / (pixelsPerSecond * zoomLevel));
+	const xPosition =
+		typeof startTimeOverride === "number"
+			? startTimeOverride
+			: isExternalDrop
+				? playheadTime
+				: Math.max(0, mouseX / (pixelsPerSecond * zoomLevel));
 
-  const mainTrackIndex = getMainTrackIndex({ tracks });
+	const mainTrackIndex = getMainTrackIndex({ tracks });
 
-  if (tracks.length === 0) {
-    if (elementType === "audio") {
-      return {
-        trackIndex: 0,
-        isNewTrack: true,
-        insertPosition: "below",
-        xPosition,
-      };
-    }
-    return { trackIndex: 0, isNewTrack: true, insertPosition: null, xPosition };
-  }
+	if (tracks.length === 0) {
+		if (elementType === "audio") {
+			return {
+				trackIndex: 0,
+				isNewTrack: true,
+				insertPosition: "below",
+				xPosition,
+			};
+		}
+		return { trackIndex: 0, isNewTrack: true, insertPosition: null, xPosition };
+	}
 
-  const trackAtMouse = getTrackAtY({ mouseY, tracks, verticalDragDirection });
+	const trackAtMouse = getTrackAtY({ mouseY, tracks, verticalDragDirection });
 
-  if (!trackAtMouse) {
-    const isAboveAllTracks = mouseY < 0;
+	if (!trackAtMouse) {
+		const isAboveAllTracks = mouseY < 0;
 
-    if (elementType === "audio") {
-      return {
-        trackIndex: tracks.length,
-        isNewTrack: true,
-        insertPosition: "below",
-        xPosition,
-      };
-    }
+		if (elementType === "audio") {
+			return {
+				trackIndex: tracks.length,
+				isNewTrack: true,
+				insertPosition: "below",
+				xPosition,
+			};
+		}
 
-    if (isAboveAllTracks) {
-      return {
-        trackIndex: 0,
-        isNewTrack: true,
-        insertPosition: "above",
-        xPosition,
-      };
-    }
+		if (isAboveAllTracks) {
+			return {
+				trackIndex: 0,
+				isNewTrack: true,
+				insertPosition: "above",
+				xPosition,
+			};
+		}
 
-    return {
-      trackIndex: Math.max(0, mainTrackIndex),
-      isNewTrack: true,
-      insertPosition: "above",
-      xPosition,
-    };
-  }
+		return {
+			trackIndex: Math.max(0, mainTrackIndex),
+			isNewTrack: true,
+			insertPosition: "above",
+			xPosition,
+		};
+	}
 
-  const { trackIndex, relativeY } = trackAtMouse;
-  const track = tracks[trackIndex];
-  const trackHeight = TRACK_HEIGHTS[track.type];
-  const isInUpperHalf = relativeY < trackHeight / 2;
+	const { trackIndex, relativeY } = trackAtMouse;
+	const track = tracks[trackIndex];
+	const trackHeight = TRACK_HEIGHTS[track.type];
+	const isInUpperHalf = relativeY < trackHeight / 2;
 
-  const isTrackCompatible = isCompatible({
-    elementType,
-    trackType: track.type,
-  });
+	const isTrackCompatible = isCompatible({
+		elementType,
+		trackType: track.type,
+	});
 
-  const endTime = xPosition + elementDuration;
-  const hasOverlap = wouldElementOverlap({
-    elements: track.elements,
-    startTime: xPosition,
-    endTime,
-    excludeElementId,
-  });
+	const endTime = xPosition + elementDuration;
+	const hasOverlap = wouldElementOverlap({
+		elements: track.elements,
+		startTime: xPosition,
+		endTime,
+		excludeElementId,
+	});
 
-  if (isTrackCompatible && !hasOverlap) {
-    return {
-      trackIndex,
-      isNewTrack: false,
-      insertPosition: null,
-      xPosition,
-    };
-  }
+	if (isTrackCompatible && !hasOverlap) {
+		return {
+			trackIndex,
+			isNewTrack: false,
+			insertPosition: null,
+			xPosition,
+		};
+	}
 
-  let insertAbove = isInUpperHalf;
-  if (!isTrackCompatible && verticalDragDirection) {
-    insertAbove = verticalDragDirection === "up";
-  }
+	let insertAbove = isInUpperHalf;
+	if (!isTrackCompatible && verticalDragDirection) {
+		insertAbove = verticalDragDirection === "up";
+	}
 
-  const { index, position } = findInsertIndex({
-    elementType,
-    tracks,
-    preferredIndex: trackIndex,
-    insertAbove,
-  });
+	const { index, position } = findInsertIndex({
+		elementType,
+		tracks,
+		preferredIndex: trackIndex,
+		insertAbove,
+	});
 
-  return {
-    trackIndex: index,
-    isNewTrack: true,
-    insertPosition: position,
-    xPosition,
-  };
+	return {
+		trackIndex: index,
+		isNewTrack: true,
+		insertPosition: position,
+		xPosition,
+	};
 }
 
 export function getDropLineY({
-  dropTarget,
-  tracks,
+	dropTarget,
+	tracks,
 }: {
-  dropTarget: DropTarget;
-  tracks: TimelineTrack[];
+	dropTarget: DropTarget;
+	tracks: TimelineTrack[];
 }): number {
-  const safeTrackIndex = Math.min(
-    Math.max(dropTarget.trackIndex, 0),
-    tracks.length,
-  );
-  let y = 0;
+	const safeTrackIndex = Math.min(
+		Math.max(dropTarget.trackIndex, 0),
+		tracks.length,
+	);
+	let y = 0;
 
-  for (let i = 0; i < safeTrackIndex; i++) {
-    y += TRACK_HEIGHTS[tracks[i].type] + TRACK_GAP;
-  }
+	for (let i = 0; i < safeTrackIndex; i++) {
+		y += TRACK_HEIGHTS[tracks[i].type] + TRACK_GAP;
+	}
 
-  return y;
+	return y;
 }
diff --git a/apps/web/src/lib/timeline/element-utils.ts b/apps/web/src/lib/timeline/element-utils.ts
index 020692ff..d033366c 100644
--- a/apps/web/src/lib/timeline/element-utils.ts
+++ b/apps/web/src/lib/timeline/element-utils.ts
@@ -1,227 +1,227 @@
 import { DEFAULT_TEXT_ELEMENT } from "@/constants/text-constants";
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import {
-  CreateTimelineElement,
-  CreateStickerElement,
-  CreateUploadAudioElement,
-  CreateLibraryAudioElement,
-  TextElement,
-  TimelineElement,
-  AudioElement,
-  VideoElement,
-  ImageElement,
-  StickerElement,
-  UploadAudioElement,
+import type {
+	CreateTimelineElement,
+	CreateStickerElement,
+	CreateUploadAudioElement,
+	CreateLibraryAudioElement,
+	TextElement,
+	TimelineElement,
+	AudioElement,
+	VideoElement,
+	ImageElement,
+	StickerElement,
+	UploadAudioElement,
 } from "@/types/timeline";
 
 export function canElementHaveAudio(
-  element: TimelineElement,
+	element: TimelineElement,
 ): element is AudioElement | VideoElement {
-  return element.type === "audio" || element.type === "video";
+	return element.type === "audio" || element.type === "video";
 }
 
 export function canElementBeHidden(
-  element: TimelineElement,
+	element: TimelineElement,
 ): element is VideoElement | ImageElement | TextElement | StickerElement {
-  return element.type !== "audio";
+	return element.type !== "audio";
 }
 
 export function hasMediaId(
-  element: TimelineElement,
+	element: TimelineElement,
 ): element is UploadAudioElement | VideoElement | ImageElement {
-  return "mediaId" in element;
+	return "mediaId" in element;
 }
 
 export function requiresMediaId({
-  element,
+	element,
 }: {
-  element: CreateTimelineElement;
+	element: CreateTimelineElement;
 }): boolean {
-  return (
-    element.type === "video" ||
-    element.type === "image" ||
-    (element.type === "audio" && element.sourceType === "upload")
-  );
+	return (
+		element.type === "video" ||
+		element.type === "image" ||
+		(element.type === "audio" && element.sourceType === "upload")
+	);
 }
 
 export function checkElementOverlaps({
-  elements,
+	elements,
 }: {
-  elements: TimelineElement[];
+	elements: TimelineElement[];
 }): boolean {
-  const sortedElements = [...elements].sort(
-    (a, b) => a.startTime - b.startTime,
-  );
+	const sortedElements = [...elements].sort(
+		(a, b) => a.startTime - b.startTime,
+	);
 
-  for (let i = 0; i < sortedElements.length - 1; i++) {
-    const current = sortedElements[i];
-    const next = sortedElements[i + 1];
+	for (let i = 0; i < sortedElements.length - 1; i++) {
+		const current = sortedElements[i];
+		const next = sortedElements[i + 1];
 
-    const currentEnd = current.startTime + current.duration;
+		const currentEnd = current.startTime + current.duration;
 
-    if (currentEnd > next.startTime) return true;
-  }
+		if (currentEnd > next.startTime) return true;
+	}
 
-  return false;
+	return false;
 }
 
 export function resolveElementOverlaps({
-  elements,
+	elements,
 }: {
-  elements: TimelineElement[];
+	elements: TimelineElement[];
 }): TimelineElement[] {
-  const sortedElements = [...elements].sort(
-    (a, b) => a.startTime - b.startTime,
-  );
-  const resolvedElements: TimelineElement[] = [];
+	const sortedElements = [...elements].sort(
+		(a, b) => a.startTime - b.startTime,
+	);
+	const resolvedElements: TimelineElement[] = [];
 
-  for (let i = 0; i < sortedElements.length; i++) {
-    const current = { ...sortedElements[i] };
+	for (let i = 0; i < sortedElements.length; i++) {
+		const current = { ...sortedElements[i] };
 
-    if (resolvedElements.length > 0) {
-      const previous = resolvedElements[resolvedElements.length - 1];
-      const previousEnd = previous.startTime + previous.duration;
+		if (resolvedElements.length > 0) {
+			const previous = resolvedElements[resolvedElements.length - 1];
+			const previousEnd = previous.startTime + previous.duration;
 
-      if (current.startTime < previousEnd) {
-        current.startTime = previousEnd;
-      }
-    }
+			if (current.startTime < previousEnd) {
+				current.startTime = previousEnd;
+			}
+		}
 
-    resolvedElements.push(current);
-  }
+		resolvedElements.push(current);
+	}
 
-  return resolvedElements;
+	return resolvedElements;
 }
 
 export function wouldElementOverlap({
-  elements,
-  startTime,
-  endTime,
-  excludeElementId,
+	elements,
+	startTime,
+	endTime,
+	excludeElementId,
 }: {
-  elements: TimelineElement[];
-  startTime: number;
-  endTime: number;
-  excludeElementId?: string;
+	elements: TimelineElement[];
+	startTime: number;
+	endTime: number;
+	excludeElementId?: string;
 }): boolean {
-  return elements.some((el) => {
-    if (excludeElementId && el.id === excludeElementId) return false;
-    const elEnd = el.startTime + el.duration;
-    return startTime < elEnd && endTime > el.startTime;
-  });
+	return elements.some((el) => {
+		if (excludeElementId && el.id === excludeElementId) return false;
+		const elEnd = el.startTime + el.duration;
+		return startTime < elEnd && endTime > el.startTime;
+	});
 }
 
 export function buildTextElement({
-  raw,
-  startTime,
+	raw,
+	startTime,
 }: {
-  raw: Partial<Omit<TextElement, "type" | "id">>;
-  startTime: number;
+	raw: Partial<Omit<TextElement, "type" | "id">>;
+	startTime: number;
 }): CreateTimelineElement {
-  const t = raw as Partial<TextElement>;
+	const t = raw as Partial<TextElement>;
 
-  return {
-    type: "text",
-    name: t.name ?? DEFAULT_TEXT_ELEMENT.name,
-    content: t.content ?? DEFAULT_TEXT_ELEMENT.content,
-    duration: t.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
-    startTime,
-    trimStart: 0,
-    trimEnd: 0,
-    fontSize:
-      typeof t.fontSize === "number"
-        ? t.fontSize
-        : DEFAULT_TEXT_ELEMENT.fontSize,
-    fontFamily: t.fontFamily ?? DEFAULT_TEXT_ELEMENT.fontFamily,
-    color: t.color ?? DEFAULT_TEXT_ELEMENT.color,
-    backgroundColor: t.backgroundColor ?? DEFAULT_TEXT_ELEMENT.backgroundColor,
-    textAlign: t.textAlign ?? DEFAULT_TEXT_ELEMENT.textAlign,
-    fontWeight: t.fontWeight ?? DEFAULT_TEXT_ELEMENT.fontWeight,
-    fontStyle: t.fontStyle ?? DEFAULT_TEXT_ELEMENT.fontStyle,
-    textDecoration: t.textDecoration ?? DEFAULT_TEXT_ELEMENT.textDecoration,
-    transform: t.transform ?? DEFAULT_TEXT_ELEMENT.transform,
-    opacity: t.opacity ?? DEFAULT_TEXT_ELEMENT.opacity,
-  };
+	return {
+		type: "text",
+		name: t.name ?? DEFAULT_TEXT_ELEMENT.name,
+		content: t.content ?? DEFAULT_TEXT_ELEMENT.content,
+		duration: t.duration ?? TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
+		startTime,
+		trimStart: 0,
+		trimEnd: 0,
+		fontSize:
+			typeof t.fontSize === "number"
+				? t.fontSize
+				: DEFAULT_TEXT_ELEMENT.fontSize,
+		fontFamily: t.fontFamily ?? DEFAULT_TEXT_ELEMENT.fontFamily,
+		color: t.color ?? DEFAULT_TEXT_ELEMENT.color,
+		backgroundColor: t.backgroundColor ?? DEFAULT_TEXT_ELEMENT.backgroundColor,
+		textAlign: t.textAlign ?? DEFAULT_TEXT_ELEMENT.textAlign,
+		fontWeight: t.fontWeight ?? DEFAULT_TEXT_ELEMENT.fontWeight,
+		fontStyle: t.fontStyle ?? DEFAULT_TEXT_ELEMENT.fontStyle,
+		textDecoration: t.textDecoration ?? DEFAULT_TEXT_ELEMENT.textDecoration,
+		transform: t.transform ?? DEFAULT_TEXT_ELEMENT.transform,
+		opacity: t.opacity ?? DEFAULT_TEXT_ELEMENT.opacity,
+	};
 }
 
 export function buildStickerElement({
-  iconName,
-  startTime,
+	iconName,
+	startTime,
 }: {
-  iconName: string;
-  startTime: number;
+	iconName: string;
+	startTime: number;
 }): CreateStickerElement {
-  return {
-    type: "sticker",
-    name: iconName.split(":")[1] || iconName,
-    iconName,
-    duration: TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
-    startTime,
-    trimStart: 0,
-    trimEnd: 0,
-    transform: { scale: 1, position: { x: 0, y: 0 }, rotate: 0 },
-    opacity: 1,
-  };
+	return {
+		type: "sticker",
+		name: iconName.split(":")[1] || iconName,
+		iconName,
+		duration: TIMELINE_CONSTANTS.DEFAULT_ELEMENT_DURATION,
+		startTime,
+		trimStart: 0,
+		trimEnd: 0,
+		transform: { scale: 1, position: { x: 0, y: 0 }, rotate: 0 },
+		opacity: 1,
+	};
 }
 
 export function buildUploadAudioElement({
-  mediaId,
-  name,
-  duration,
-  startTime,
-  buffer,
+	mediaId,
+	name,
+	duration,
+	startTime,
+	buffer,
 }: {
-  mediaId: string;
-  name: string;
-  duration: number;
-  startTime: number;
-  buffer?: AudioBuffer;
+	mediaId: string;
+	name: string;
+	duration: number;
+	startTime: number;
+	buffer?: AudioBuffer;
 }): CreateUploadAudioElement {
-  const element: CreateUploadAudioElement = {
-    type: "audio",
-    sourceType: "upload",
-    mediaId,
-    name,
-    duration,
-    startTime,
-    trimStart: 0,
-    trimEnd: 0,
-    volume: 1,
-    muted: false,
-  };
-  if (buffer) {
-    element.buffer = buffer;
-  }
-  return element;
+	const element: CreateUploadAudioElement = {
+		type: "audio",
+		sourceType: "upload",
+		mediaId,
+		name,
+		duration,
+		startTime,
+		trimStart: 0,
+		trimEnd: 0,
+		volume: 1,
+		muted: false,
+	};
+	if (buffer) {
+		element.buffer = buffer;
+	}
+	return element;
 }
 
 export function buildLibraryAudioElement({
-  sourceUrl,
-  name,
-  duration,
-  startTime,
-  buffer,
+	sourceUrl,
+	name,
+	duration,
+	startTime,
+	buffer,
 }: {
-  sourceUrl: string;
-  name: string;
-  duration: number;
-  startTime: number;
-  buffer?: AudioBuffer;
+	sourceUrl: string;
+	name: string;
+	duration: number;
+	startTime: number;
+	buffer?: AudioBuffer;
 }): CreateLibraryAudioElement {
-  const element: CreateLibraryAudioElement = {
-    type: "audio",
-    sourceType: "library",
-    sourceUrl,
-    name,
-    duration,
-    startTime,
-    trimStart: 0,
-    trimEnd: 0,
-    volume: 1,
-    muted: false,
-  };
-  if (buffer) {
-    element.buffer = buffer;
-  }
-  return element;
+	const element: CreateLibraryAudioElement = {
+		type: "audio",
+		sourceType: "library",
+		sourceUrl,
+		name,
+		duration,
+		startTime,
+		trimStart: 0,
+		trimEnd: 0,
+		volume: 1,
+		muted: false,
+	};
+	if (buffer) {
+		element.buffer = buffer;
+	}
+	return element;
 }
diff --git a/apps/web/src/lib/timeline/index.ts b/apps/web/src/lib/timeline/index.ts
index 6a7a073e..fe72a9ed 100644
--- a/apps/web/src/lib/timeline/index.ts
+++ b/apps/web/src/lib/timeline/index.ts
@@ -1,22 +1,22 @@
-import { TimelineTrack } from "@/types/timeline";
+import type { TimelineTrack } from "@/types/timeline";
 
 export * from "./track-utils";
 export * from "./element-utils";
 export * from "./zoom-utils";
 
 export function calculateTotalDuration({
-  tracks,
+	tracks,
 }: {
-  tracks: TimelineTrack[];
+	tracks: TimelineTrack[];
 }): number {
-  if (tracks.length === 0) return 0;
+	if (tracks.length === 0) return 0;
 
-  const trackEndTimes = tracks.map((track) =>
-    track.elements.reduce((maxEnd, element) => {
-      const elementEnd = element.startTime + element.duration;
-      return Math.max(maxEnd, elementEnd);
-    }, 0),
-  );
+	const trackEndTimes = tracks.map((track) =>
+		track.elements.reduce((maxEnd, element) => {
+			const elementEnd = element.startTime + element.duration;
+			return Math.max(maxEnd, elementEnd);
+		}, 0),
+	);
 
-  return Math.max(...trackEndTimes, 0);
+	return Math.max(...trackEndTimes, 0);
 }
diff --git a/apps/web/src/lib/timeline/track-utils.ts b/apps/web/src/lib/timeline/track-utils.ts
index 7908803b..b6261569 100644
--- a/apps/web/src/lib/timeline/track-utils.ts
+++ b/apps/web/src/lib/timeline/track-utils.ts
@@ -1,244 +1,244 @@
 import type {
-  TrackType,
-  TimelineTrack,
-  ElementType,
-  VideoTrack,
-  AudioTrack,
-  StickerTrack,
-  TextTrack,
+	TrackType,
+	TimelineTrack,
+	ElementType,
+	VideoTrack,
+	AudioTrack,
+	StickerTrack,
+	TextTrack,
 } from "@/types/timeline";
 import {
-  TRACK_COLORS,
-  TRACK_HEIGHTS,
-  TRACK_GAP,
+	TRACK_COLORS,
+	TRACK_HEIGHTS,
+	TRACK_GAP,
 } from "@/constants/timeline-constants";
 import { generateUUID } from "@/utils/id";
 
 export function canTracktHaveAudio(
-  track: TimelineTrack,
+	track: TimelineTrack,
 ): track is VideoTrack | AudioTrack {
-  return track.type === "audio" || track.type === "video";
+	return track.type === "audio" || track.type === "video";
 }
 
 export function canTrackBeHidden(
-  track: TimelineTrack,
+	track: TimelineTrack,
 ): track is VideoTrack | TextTrack | StickerTrack {
-  return track.type !== "audio";
+	return track.type !== "audio";
 }
 
 export function getTrackColor({ type }: { type: TrackType }) {
-  return TRACK_COLORS[type];
+	return TRACK_COLORS[type];
 }
 
 export function getTrackClasses({ type }: { type: TrackType }) {
-  const colors = TRACK_COLORS[type];
-  return `${colors.background}`.trim();
+	const colors = TRACK_COLORS[type];
+	return `${colors.background}`.trim();
 }
 
 export function getTrackHeight({ type }: { type: TrackType }): number {
-  return TRACK_HEIGHTS[type];
+	return TRACK_HEIGHTS[type];
 }
 
 export function getCumulativeHeightBefore({
-  tracks,
-  trackIndex,
+	tracks,
+	trackIndex,
 }: {
-  tracks: Array<{ type: TrackType }>;
-  trackIndex: number;
+	tracks: Array<{ type: TrackType }>;
+	trackIndex: number;
 }): number {
-  return tracks
-    .slice(0, trackIndex)
-    .reduce(
-      (sum, track) => sum + getTrackHeight({ type: track.type }) + TRACK_GAP,
-      0,
-    );
+	return tracks
+		.slice(0, trackIndex)
+		.reduce(
+			(sum, track) => sum + getTrackHeight({ type: track.type }) + TRACK_GAP,
+			0,
+		);
 }
 
 export function getTotalTracksHeight({
-  tracks,
+	tracks,
 }: {
-  tracks: Array<{ type: TrackType }>;
+	tracks: Array<{ type: TrackType }>;
 }): number {
-  const tracksHeight = tracks.reduce(
-    (sum, track) => sum + getTrackHeight({ type: track.type }),
-    0,
-  );
-  const gapsHeight = Math.max(0, tracks.length - 1) * TRACK_GAP;
-  return tracksHeight + gapsHeight;
+	const tracksHeight = tracks.reduce(
+		(sum, track) => sum + getTrackHeight({ type: track.type }),
+		0,
+	);
+	const gapsHeight = Math.max(0, tracks.length - 1) * TRACK_GAP;
+	return tracksHeight + gapsHeight;
 }
 
 export function buildEmptyTrack({
-  id,
-  type,
-  name,
+	id,
+	type,
+	name,
 }: {
-  id: string;
-  type: TrackType;
-  name?: string;
+	id: string;
+	type: TrackType;
+	name?: string;
 }): TimelineTrack {
-  const trackName =
-    name ??
-    (type === "video"
-      ? "Video track"
-      : type === "text"
-        ? "Text track"
-        : type === "audio"
-          ? "Audio track"
-          : type === "sticker"
-            ? "Sticker track"
-            : "Track");
+	const trackName =
+		name ??
+		(type === "video"
+			? "Video track"
+			: type === "text"
+				? "Text track"
+				: type === "audio"
+					? "Audio track"
+					: type === "sticker"
+						? "Sticker track"
+						: "Track");
 
-  switch (type) {
-    case "video":
-      return {
-        id,
-        name: trackName,
-        type: "video",
-        elements: [],
-        hidden: false,
-        muted: false,
-        isMain: false,
-      };
-    case "text":
-      return {
-        id,
-        name: trackName,
-        type: "text",
-        elements: [],
-        hidden: false,
-      };
-    case "sticker":
-      return {
-        id,
-        name: trackName,
-        type: "sticker",
-        elements: [],
-        hidden: false,
-      };
-    case "audio":
-      return {
-        id,
-        name: trackName,
-        type: "audio",
-        elements: [],
-        muted: false,
-      };
-    default:
-      throw new Error(`Unsupported track type: ${type}`);
-  }
+	switch (type) {
+		case "video":
+			return {
+				id,
+				name: trackName,
+				type: "video",
+				elements: [],
+				hidden: false,
+				muted: false,
+				isMain: false,
+			};
+		case "text":
+			return {
+				id,
+				name: trackName,
+				type: "text",
+				elements: [],
+				hidden: false,
+			};
+		case "sticker":
+			return {
+				id,
+				name: trackName,
+				type: "sticker",
+				elements: [],
+				hidden: false,
+			};
+		case "audio":
+			return {
+				id,
+				name: trackName,
+				type: "audio",
+				elements: [],
+				muted: false,
+			};
+		default:
+			throw new Error(`Unsupported track type: ${type}`);
+	}
 }
 
 export function getDefaultInsertIndexForTrack({
-  tracks,
-  trackType,
+	tracks,
+	trackType,
 }: {
-  tracks: TimelineTrack[];
-  trackType: TrackType;
+	tracks: TimelineTrack[];
+	trackType: TrackType;
 }): number {
-  if (trackType === "audio") {
-    return tracks.length;
-  }
+	if (trackType === "audio") {
+		return tracks.length;
+	}
 
-  const mainTrackIndex = tracks.findIndex((track) => isMainTrack(track));
-  if (mainTrackIndex >= 0) {
-    return mainTrackIndex;
-  }
+	const mainTrackIndex = tracks.findIndex((track) => isMainTrack(track));
+	if (mainTrackIndex >= 0) {
+		return mainTrackIndex;
+	}
 
-  const firstAudioTrackIndex = tracks.findIndex(
-    (track) => track.type === "audio",
-  );
-  if (firstAudioTrackIndex >= 0) {
-    return firstAudioTrackIndex;
-  }
+	const firstAudioTrackIndex = tracks.findIndex(
+		(track) => track.type === "audio",
+	);
+	if (firstAudioTrackIndex >= 0) {
+		return firstAudioTrackIndex;
+	}
 
-  return tracks.length;
+	return tracks.length;
 }
 
 export function getHighestInsertIndexForTrack({
-  tracks,
-  trackType,
+	tracks,
+	trackType,
 }: {
-  tracks: TimelineTrack[];
-  trackType: TrackType;
+	tracks: TimelineTrack[];
+	trackType: TrackType;
 }): number {
-  const mainTrackIndex = tracks.findIndex((track) => isMainTrack(track));
+	const mainTrackIndex = tracks.findIndex((track) => isMainTrack(track));
 
-  if (trackType === "audio") {
-    return mainTrackIndex >= 0 ? mainTrackIndex + 1 : tracks.length;
-  }
+	if (trackType === "audio") {
+		return mainTrackIndex >= 0 ? mainTrackIndex + 1 : tracks.length;
+	}
 
-  return 0;
+	return 0;
 }
 
 export function isMainTrack(track: TimelineTrack): track is VideoTrack {
-  return track.type === "video" && track.isMain === true;
+	return track.type === "video" && track.isMain === true;
 }
 
 export function getMainTrack({
-  tracks,
+	tracks,
 }: {
-  tracks: TimelineTrack[];
+	tracks: TimelineTrack[];
 }): TimelineTrack | null {
-  return tracks.find((track) => isMainTrack(track)) ?? null;
+	return tracks.find((track) => isMainTrack(track)) ?? null;
 }
 
 export function ensureMainTrack({
-  tracks,
+	tracks,
 }: {
-  tracks: TimelineTrack[];
+	tracks: TimelineTrack[];
 }): TimelineTrack[] {
-  const hasMainTrack = tracks.some((track) => isMainTrack(track));
+	const hasMainTrack = tracks.some((track) => isMainTrack(track));
 
-  if (!hasMainTrack) {
-    const mainTrack: TimelineTrack = {
-      id: generateUUID(),
-      name: "Main Track",
-      type: "video",
-      elements: [],
-      muted: false,
-      isMain: true,
-      hidden: false,
-    };
-    return [mainTrack, ...tracks];
-  }
+	if (!hasMainTrack) {
+		const mainTrack: TimelineTrack = {
+			id: generateUUID(),
+			name: "Main Track",
+			type: "video",
+			elements: [],
+			muted: false,
+			isMain: true,
+			hidden: false,
+		};
+		return [mainTrack, ...tracks];
+	}
 
-  return tracks;
+	return tracks;
 }
 
 export function canElementGoOnTrack({
-  elementType,
-  trackType,
+	elementType,
+	trackType,
 }: {
-  elementType: ElementType;
-  trackType: TrackType;
+	elementType: ElementType;
+	trackType: TrackType;
 }): boolean {
-  if (elementType === "text") return trackType === "text";
-  if (elementType === "audio") return trackType === "audio";
-  if (elementType === "sticker") return trackType === "sticker";
-  if (elementType === "video" || elementType === "image") {
-    return trackType === "video";
-  }
-  return false;
+	if (elementType === "text") return trackType === "text";
+	if (elementType === "audio") return trackType === "audio";
+	if (elementType === "sticker") return trackType === "sticker";
+	if (elementType === "video" || elementType === "image") {
+		return trackType === "video";
+	}
+	return false;
 }
 
 export function validateElementTrackCompatibility({
-  element,
-  track,
+	element,
+	track,
 }: {
-  element: { type: ElementType };
-  track: { type: TrackType };
+	element: { type: ElementType };
+	track: { type: TrackType };
 }): { isValid: boolean; errorMessage?: string } {
-  const isValid = canElementGoOnTrack({
-    elementType: element.type,
-    trackType: track.type,
-  });
+	const isValid = canElementGoOnTrack({
+		elementType: element.type,
+		trackType: track.type,
+	});
 
-  if (!isValid) {
-    return {
-      isValid: false,
-      errorMessage: `${element.type} elements cannot be placed on ${track.type} tracks`,
-    };
-  }
+	if (!isValid) {
+		return {
+			isValid: false,
+			errorMessage: `${element.type} elements cannot be placed on ${track.type} tracks`,
+		};
+	}
 
-  return { isValid: true };
+	return { isValid: true };
 }
diff --git a/apps/web/src/lib/timeline/zoom-utils.ts b/apps/web/src/lib/timeline/zoom-utils.ts
index d74f5c4e..4c9d723a 100644
--- a/apps/web/src/lib/timeline/zoom-utils.ts
+++ b/apps/web/src/lib/timeline/zoom-utils.ts
@@ -1,22 +1,22 @@
 import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
 
 export function getTimelineZoomMin({
-  duration,
-  containerWidth,
+	duration,
+	containerWidth,
 }: {
-  duration: number;
-  containerWidth: number | null | undefined;
+	duration: number;
+	containerWidth: number | null | undefined;
 }): number {
-  const safeDuration = Math.max(duration, 1);
-  const paddedDuration =
-    safeDuration + TIMELINE_CONSTANTS.PLAYHEAD_LOOKAHEAD_SECONDS;
-  const safeContainerWidth = containerWidth ?? 1000;
-  const zoomToFit =
-    safeContainerWidth /
-    (paddedDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND);
+	const safeDuration = Math.max(duration, 1);
+	const paddedDuration =
+		safeDuration + TIMELINE_CONSTANTS.PLAYHEAD_LOOKAHEAD_SECONDS;
+	const safeContainerWidth = containerWidth ?? 1000;
+	const zoomToFit =
+		safeContainerWidth /
+		(paddedDuration * TIMELINE_CONSTANTS.PIXELS_PER_SECOND);
 
-  return Math.min(
-    TIMELINE_CONSTANTS.ZOOM_MAX,
-    Math.max(TIMELINE_CONSTANTS.ZOOM_MIN, zoomToFit),
-  );
+	return Math.min(
+		TIMELINE_CONSTANTS.ZOOM_MAX,
+		Math.max(TIMELINE_CONSTANTS.ZOOM_MIN, zoomToFit),
+	);
 }
diff --git a/apps/web/src/lib/transcription/caption.ts b/apps/web/src/lib/transcription/caption.ts
index a4bd6802..c773b7b0 100644
--- a/apps/web/src/lib/transcription/caption.ts
+++ b/apps/web/src/lib/transcription/caption.ts
@@ -1,49 +1,49 @@
 import type { TranscriptionSegment, CaptionChunk } from "@/types/transcription";
 import {
-  DEFAULT_WORDS_PER_CAPTION,
-  MIN_CAPTION_DURATION_SECONDS,
+	DEFAULT_WORDS_PER_CAPTION,
+	MIN_CAPTION_DURATION_SECONDS,
 } from "@/constants/transcription-constants";
 
 export function buildCaptionChunks({
-  segments,
-  wordsPerChunk = DEFAULT_WORDS_PER_CAPTION,
-  minDuration = MIN_CAPTION_DURATION_SECONDS,
+	segments,
+	wordsPerChunk = DEFAULT_WORDS_PER_CAPTION,
+	minDuration = MIN_CAPTION_DURATION_SECONDS,
 }: {
-  segments: TranscriptionSegment[];
-  wordsPerChunk?: number;
-  minDuration?: number;
+	segments: TranscriptionSegment[];
+	wordsPerChunk?: number;
+	minDuration?: number;
 }): CaptionChunk[] {
-  const captions: CaptionChunk[] = [];
-  let globalEndTime = 0;
+	const captions: CaptionChunk[] = [];
+	let globalEndTime = 0;
 
-  for (const segment of segments) {
-    const words = segment.text.trim().split(/\s+/);
-    if (words.length === 0 || (words.length === 1 && words[0] === "")) continue;
+	for (const segment of segments) {
+		const words = segment.text.trim().split(/\s+/);
+		if (words.length === 0 || (words.length === 1 && words[0] === "")) continue;
 
-    const segmentDuration = segment.end - segment.start;
-    const wordsPerSecond = words.length / segmentDuration;
+		const segmentDuration = segment.end - segment.start;
+		const wordsPerSecond = words.length / segmentDuration;
 
-    const chunks: string[] = [];
-    for (let i = 0; i < words.length; i += wordsPerChunk) {
-      chunks.push(words.slice(i, i + wordsPerChunk).join(" "));
-    }
+		const chunks: string[] = [];
+		for (let i = 0; i < words.length; i += wordsPerChunk) {
+			chunks.push(words.slice(i, i + wordsPerChunk).join(" "));
+		}
 
-    let chunkStartTime = segment.start;
-    for (const chunk of chunks) {
-      const chunkWords = chunk.split(/\s+/).length;
-      const chunkDuration = Math.max(minDuration, chunkWords / wordsPerSecond);
-      const adjustedStartTime = Math.max(chunkStartTime, globalEndTime);
+		let chunkStartTime = segment.start;
+		for (const chunk of chunks) {
+			const chunkWords = chunk.split(/\s+/).length;
+			const chunkDuration = Math.max(minDuration, chunkWords / wordsPerSecond);
+			const adjustedStartTime = Math.max(chunkStartTime, globalEndTime);
 
-      captions.push({
-        text: chunk,
-        startTime: adjustedStartTime,
-        duration: chunkDuration,
-      });
+			captions.push({
+				text: chunk,
+				startTime: adjustedStartTime,
+				duration: chunkDuration,
+			});
 
-      globalEndTime = adjustedStartTime + chunkDuration;
-      chunkStartTime += chunkDuration;
-    }
-  }
+			globalEndTime = adjustedStartTime + chunkDuration;
+			chunkStartTime += chunkDuration;
+		}
+	}
 
-  return captions;
+	return captions;
 }
diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 0abcee14..c7f28025 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -1,18 +1,18 @@
 import { NextResponse } from "next/server";
 
 export async function middleware() {
-  return NextResponse.next();
+	return NextResponse.next();
 }
 
 export const config = {
-  matcher: [
-    /*
-     * Match all request paths except for the ones starting with:
-     * - api (API routes)
-     * - _next/static (static files)
-     * - _next/image (image optimization files)
-     * - favicon.ico (favicon file)
-     */
-    "/((?!api|_next/static|_next/image|favicon.ico).*)",
-  ],
+	matcher: [
+		/*
+		 * Match all request paths except for the ones starting with:
+		 * - api (API routes)
+		 * - _next/static (static files)
+		 * - _next/image (image optimization files)
+		 * - favicon.ico (favicon file)
+		 */
+		"/((?!api|_next/static|_next/image|favicon.ico).*)",
+	],
 };
diff --git a/apps/web/src/services/media/video-cache.ts b/apps/web/src/services/media/video-cache.ts
index a245fc49..48c8f56c 100644
--- a/apps/web/src/services/media/video-cache.ts
+++ b/apps/web/src/services/media/video-cache.ts
@@ -1,214 +1,214 @@
 import {
-  Input,
-  ALL_FORMATS,
-  BlobSource,
-  CanvasSink,
-  WrappedCanvas,
+	Input,
+	ALL_FORMATS,
+	BlobSource,
+	CanvasSink,
+	type WrappedCanvas,
 } from "mediabunny";
 
 interface VideoSinkData {
-  sink: CanvasSink;
-  iterator: AsyncGenerator<WrappedCanvas, void, unknown> | null;
-  currentFrame: WrappedCanvas | null;
-  lastTime: number;
+	sink: CanvasSink;
+	iterator: AsyncGenerator<WrappedCanvas, void, unknown> | null;
+	currentFrame: WrappedCanvas | null;
+	lastTime: number;
 }
 export class VideoCache {
-  private sinks = new Map<string, VideoSinkData>();
-  private initPromises = new Map<string, Promise<void>>();
+	private sinks = new Map<string, VideoSinkData>();
+	private initPromises = new Map<string, Promise<void>>();
 
-  async getFrameAt({
-    mediaId,
-    file,
-    time,
-  }: {
-    mediaId: string;
-    file: File;
-    time: number;
-  }): Promise<WrappedCanvas | null> {
-    await this.ensureSink({ mediaId, file });
+	async getFrameAt({
+		mediaId,
+		file,
+		time,
+	}: {
+		mediaId: string;
+		file: File;
+		time: number;
+	}): Promise<WrappedCanvas | null> {
+		await this.ensureSink({ mediaId, file });
 
-    const sinkData = this.sinks.get(mediaId);
-    if (!sinkData) return null;
+		const sinkData = this.sinks.get(mediaId);
+		if (!sinkData) return null;
 
-    if (
-      sinkData.currentFrame &&
-      this.isFrameValid({ frame: sinkData.currentFrame, time })
-    ) {
-      return sinkData.currentFrame;
-    }
+		if (
+			sinkData.currentFrame &&
+			this.isFrameValid({ frame: sinkData.currentFrame, time })
+		) {
+			return sinkData.currentFrame;
+		}
 
-    if (
-      sinkData.iterator &&
-      sinkData.currentFrame &&
-      time >= sinkData.lastTime &&
-      time < sinkData.lastTime + 2.0
-    ) {
-      const frame = await this.iterateToTime({ sinkData, targetTime: time });
-      if (frame) return frame;
-    }
+		if (
+			sinkData.iterator &&
+			sinkData.currentFrame &&
+			time >= sinkData.lastTime &&
+			time < sinkData.lastTime + 2.0
+		) {
+			const frame = await this.iterateToTime({ sinkData, targetTime: time });
+			if (frame) return frame;
+		}
 
-    return await this.seekToTime({ sinkData, time });
-  }
+		return await this.seekToTime({ sinkData, time });
+	}
 
-  private isFrameValid({
-    frame,
-    time,
-  }: {
-    frame: WrappedCanvas;
-    time: number;
-  }): boolean {
-    return time >= frame.timestamp && time < frame.timestamp + frame.duration;
-  }
-  private async iterateToTime({
-    sinkData,
-    targetTime,
-  }: {
-    sinkData: VideoSinkData;
-    targetTime: number;
-  }): Promise<WrappedCanvas | null> {
-    if (!sinkData.iterator) return null;
+	private isFrameValid({
+		frame,
+		time,
+	}: {
+		frame: WrappedCanvas;
+		time: number;
+	}): boolean {
+		return time >= frame.timestamp && time < frame.timestamp + frame.duration;
+	}
+	private async iterateToTime({
+		sinkData,
+		targetTime,
+	}: {
+		sinkData: VideoSinkData;
+		targetTime: number;
+	}): Promise<WrappedCanvas | null> {
+		if (!sinkData.iterator) return null;
 
-    try {
-      while (true) {
-        const { value: frame, done } = await sinkData.iterator.next();
+		try {
+			while (true) {
+				const { value: frame, done } = await sinkData.iterator.next();
 
-        if (done || !frame) break;
+				if (done || !frame) break;
 
-        sinkData.currentFrame = frame;
-        sinkData.lastTime = frame.timestamp;
+				sinkData.currentFrame = frame;
+				sinkData.lastTime = frame.timestamp;
 
-        if (this.isFrameValid({ frame, time: targetTime })) {
-          return frame;
-        }
+				if (this.isFrameValid({ frame, time: targetTime })) {
+					return frame;
+				}
 
-        if (frame.timestamp > targetTime + 1.0) break;
-      }
-    } catch (error) {
-      console.warn("Iterator failed, will restart:", error);
-      sinkData.iterator = null;
-    }
+				if (frame.timestamp > targetTime + 1.0) break;
+			}
+		} catch (error) {
+			console.warn("Iterator failed, will restart:", error);
+			sinkData.iterator = null;
+		}
 
-    return null;
-  }
-  private async seekToTime({
-    sinkData,
-    time,
-  }: {
-    sinkData: VideoSinkData;
-    time: number;
-  }): Promise<WrappedCanvas | null> {
-    try {
-      if (sinkData.iterator) {
-        await sinkData.iterator.return();
-        sinkData.iterator = null;
-      }
+		return null;
+	}
+	private async seekToTime({
+		sinkData,
+		time,
+	}: {
+		sinkData: VideoSinkData;
+		time: number;
+	}): Promise<WrappedCanvas | null> {
+		try {
+			if (sinkData.iterator) {
+				await sinkData.iterator.return();
+				sinkData.iterator = null;
+			}
 
-      sinkData.iterator = sinkData.sink.canvases(time);
-      sinkData.lastTime = time;
+			sinkData.iterator = sinkData.sink.canvases(time);
+			sinkData.lastTime = time;
 
-      const { value: frame } = await sinkData.iterator.next();
+			const { value: frame } = await sinkData.iterator.next();
 
-      if (frame) {
-        sinkData.currentFrame = frame;
-        return frame;
-      }
-    } catch (error) {
-      console.warn("Failed to seek video:", error);
-    }
+			if (frame) {
+				sinkData.currentFrame = frame;
+				return frame;
+			}
+		} catch (error) {
+			console.warn("Failed to seek video:", error);
+		}
 
-    return null;
-  }
-  private async ensureSink({
-    mediaId,
-    file,
-  }: {
-    mediaId: string;
-    file: File;
-  }): Promise<void> {
-    if (this.sinks.has(mediaId)) return;
+		return null;
+	}
+	private async ensureSink({
+		mediaId,
+		file,
+	}: {
+		mediaId: string;
+		file: File;
+	}): Promise<void> {
+		if (this.sinks.has(mediaId)) return;
 
-    if (this.initPromises.has(mediaId)) {
-      await this.initPromises.get(mediaId);
-      return;
-    }
+		if (this.initPromises.has(mediaId)) {
+			await this.initPromises.get(mediaId);
+			return;
+		}
 
-    const initPromise = this.initializeSink({ mediaId, file });
-    this.initPromises.set(mediaId, initPromise);
+		const initPromise = this.initializeSink({ mediaId, file });
+		this.initPromises.set(mediaId, initPromise);
 
-    try {
-      await initPromise;
-    } finally {
-      this.initPromises.delete(mediaId);
-    }
-  }
-  private async initializeSink({
-    mediaId,
-    file,
-  }: {
-    mediaId: string;
-    file: File;
-  }): Promise<void> {
-    try {
-      const input = new Input({
-        source: new BlobSource(file),
-        formats: ALL_FORMATS,
-      });
+		try {
+			await initPromise;
+		} finally {
+			this.initPromises.delete(mediaId);
+		}
+	}
+	private async initializeSink({
+		mediaId,
+		file,
+	}: {
+		mediaId: string;
+		file: File;
+	}): Promise<void> {
+		try {
+			const input = new Input({
+				source: new BlobSource(file),
+				formats: ALL_FORMATS,
+			});
 
-      const videoTrack = await input.getPrimaryVideoTrack();
-      if (!videoTrack) {
-        throw new Error("No video track found");
-      }
+			const videoTrack = await input.getPrimaryVideoTrack();
+			if (!videoTrack) {
+				throw new Error("No video track found");
+			}
 
-      const canDecode = await videoTrack.canDecode();
-      if (!canDecode) {
-        throw new Error("Video codec not supported for decoding");
-      }
+			const canDecode = await videoTrack.canDecode();
+			if (!canDecode) {
+				throw new Error("Video codec not supported for decoding");
+			}
 
-      const sink = new CanvasSink(videoTrack, {
-        poolSize: 3,
-        fit: "contain",
-      });
+			const sink = new CanvasSink(videoTrack, {
+				poolSize: 3,
+				fit: "contain",
+			});
 
-      this.sinks.set(mediaId, {
-        sink,
-        iterator: null,
-        currentFrame: null,
-        lastTime: -1,
-      });
-    } catch (error) {
-      console.error(`Failed to initialize video sink for ${mediaId}:`, error);
-      throw error;
-    }
-  }
+			this.sinks.set(mediaId, {
+				sink,
+				iterator: null,
+				currentFrame: null,
+				lastTime: -1,
+			});
+		} catch (error) {
+			console.error(`Failed to initialize video sink for ${mediaId}:`, error);
+			throw error;
+		}
+	}
 
-  clearVideo({ mediaId }: { mediaId: string }): void {
-    const sinkData = this.sinks.get(mediaId);
-    if (sinkData) {
-      if (sinkData.iterator) {
-        sinkData.iterator.return();
-      }
+	clearVideo({ mediaId }: { mediaId: string }): void {
+		const sinkData = this.sinks.get(mediaId);
+		if (sinkData) {
+			if (sinkData.iterator) {
+				sinkData.iterator.return();
+			}
 
-      this.sinks.delete(mediaId);
-    }
+			this.sinks.delete(mediaId);
+		}
 
-    this.initPromises.delete(mediaId);
-  }
+		this.initPromises.delete(mediaId);
+	}
 
-  clearAll(): void {
-    for (const [mediaId] of this.sinks) {
-      this.clearVideo({ mediaId });
-    }
-  }
+	clearAll(): void {
+		for (const [mediaId] of this.sinks) {
+			this.clearVideo({ mediaId });
+		}
+	}
 
-  getStats() {
-    return {
-      totalSinks: this.sinks.size,
-      activeSinks: Array.from(this.sinks.values()).filter((s) => s.iterator)
-        .length,
-      cachedFrames: Array.from(this.sinks.values()).filter(
-        (s) => s.currentFrame,
-      ).length,
-    };
-  }
+	getStats() {
+		return {
+			totalSinks: this.sinks.size,
+			activeSinks: Array.from(this.sinks.values()).filter((s) => s.iterator)
+				.length,
+			cachedFrames: Array.from(this.sinks.values()).filter(
+				(s) => s.currentFrame,
+			).length,
+		};
+	}
 }
 export const videoCache = new VideoCache();
diff --git a/apps/web/src/services/renderer/canvas-renderer.ts b/apps/web/src/services/renderer/canvas-renderer.ts
index 6058e319..840d8b52 100644
--- a/apps/web/src/services/renderer/canvas-renderer.ts
+++ b/apps/web/src/services/renderer/canvas-renderer.ts
@@ -1,87 +1,87 @@
-import { BaseNode } from "./nodes/base-node";
+import type { BaseNode } from "./nodes/base-node";
 
 export type CanvasRendererParams = {
-  width: number;
-  height: number;
-  fps: number;
+	width: number;
+	height: number;
+	fps: number;
 };
 
 export class CanvasRenderer {
-  canvas: OffscreenCanvas | HTMLCanvasElement;
-  context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
-  width: number;
-  height: number;
-  fps: number;
+	canvas: OffscreenCanvas | HTMLCanvasElement;
+	context: OffscreenCanvasRenderingContext2D | CanvasRenderingContext2D;
+	width: number;
+	height: number;
+	fps: number;
 
-  constructor({ width, height, fps }: CanvasRendererParams) {
-    this.width = width;
-    this.height = height;
-    this.fps = fps;
+	constructor({ width, height, fps }: CanvasRendererParams) {
+		this.width = width;
+		this.height = height;
+		this.fps = fps;
 
-    try {
-      this.canvas = new OffscreenCanvas(width, height);
-    } catch {
-      this.canvas = document.createElement("canvas");
-      this.canvas.width = width;
-      this.canvas.height = height;
-    }
+		try {
+			this.canvas = new OffscreenCanvas(width, height);
+		} catch {
+			this.canvas = document.createElement("canvas");
+			this.canvas.width = width;
+			this.canvas.height = height;
+		}
 
-    const context = this.canvas.getContext("2d");
-    if (!context) {
-      throw new Error("Failed to get canvas context");
-    }
+		const context = this.canvas.getContext("2d");
+		if (!context) {
+			throw new Error("Failed to get canvas context");
+		}
 
-    this.context = context as
-      | OffscreenCanvasRenderingContext2D
-      | CanvasRenderingContext2D;
-  }
+		this.context = context as
+			| OffscreenCanvasRenderingContext2D
+			| CanvasRenderingContext2D;
+	}
 
-  setSize({ width, height }: { width: number; height: number }) {
-    this.width = width;
-    this.height = height;
+	setSize({ width, height }: { width: number; height: number }) {
+		this.width = width;
+		this.height = height;
 
-    if (this.canvas instanceof OffscreenCanvas) {
-      this.canvas = new OffscreenCanvas(width, height);
-    } else {
-      this.canvas.width = width;
-      this.canvas.height = height;
-    }
+		if (this.canvas instanceof OffscreenCanvas) {
+			this.canvas = new OffscreenCanvas(width, height);
+		} else {
+			this.canvas.width = width;
+			this.canvas.height = height;
+		}
 
-    const context = this.canvas.getContext("2d");
-    if (!context) {
-      throw new Error("Failed to get canvas context");
-    }
-    this.context = context as
-      | OffscreenCanvasRenderingContext2D
-      | CanvasRenderingContext2D;
-  }
+		const context = this.canvas.getContext("2d");
+		if (!context) {
+			throw new Error("Failed to get canvas context");
+		}
+		this.context = context as
+			| OffscreenCanvasRenderingContext2D
+			| CanvasRenderingContext2D;
+	}
 
-  private clear() {
-    this.context.fillStyle = "black";
-    this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
-  }
+	private clear() {
+		this.context.fillStyle = "black";
+		this.context.fillRect(0, 0, this.canvas.width, this.canvas.height);
+	}
 
-  async render({ node, time }: { node: BaseNode; time: number }) {
-    this.clear();
-    await node.render({ renderer: this, time });
-  }
+	async render({ node, time }: { node: BaseNode; time: number }) {
+		this.clear();
+		await node.render({ renderer: this, time });
+	}
 
-  async renderToCanvas({
-    node,
-    time,
-    targetCanvas,
-  }: {
-    node: BaseNode;
-    time: number;
-    targetCanvas: HTMLCanvasElement;
-  }) {
-    await this.render({ node, time });
+	async renderToCanvas({
+		node,
+		time,
+		targetCanvas,
+	}: {
+		node: BaseNode;
+		time: number;
+		targetCanvas: HTMLCanvasElement;
+	}) {
+		await this.render({ node, time });
 
-    const ctx = targetCanvas.getContext("2d");
-    if (!ctx) {
-      throw new Error("Failed to get target canvas context");
-    }
+		const ctx = targetCanvas.getContext("2d");
+		if (!ctx) {
+			throw new Error("Failed to get target canvas context");
+		}
 
-    ctx.drawImage(this.canvas, 0, 0, targetCanvas.width, targetCanvas.height);
-  }
+		ctx.drawImage(this.canvas, 0, 0, targetCanvas.width, targetCanvas.height);
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/base-node.ts b/apps/web/src/services/renderer/nodes/base-node.ts
index 75ec463e..55bd055a 100644
--- a/apps/web/src/services/renderer/nodes/base-node.ts
+++ b/apps/web/src/services/renderer/nodes/base-node.ts
@@ -1,35 +1,35 @@
-import { CanvasRenderer } from "../canvas-renderer";
+import type { CanvasRenderer } from "../canvas-renderer";
 
 export type BaseNodeParams = object | undefined;
 
 export class BaseNode<Params extends BaseNodeParams = BaseNodeParams> {
-  params: Params;
+	params: Params;
 
-  constructor(params?: Params) {
-    this.params = params ?? ({} as Params);
-  }
+	constructor(params?: Params) {
+		this.params = params ?? ({} as Params);
+	}
 
-  children: BaseNode[] = [];
+	children: BaseNode[] = [];
 
-  add(child: BaseNode) {
-    this.children.push(child);
-    return this;
-  }
+	add(child: BaseNode) {
+		this.children.push(child);
+		return this;
+	}
 
-  remove(child: BaseNode) {
-    this.children = this.children.filter((c) => c !== child);
-    return this;
-  }
+	remove(child: BaseNode) {
+		this.children = this.children.filter((c) => c !== child);
+		return this;
+	}
 
-  async render({
-    renderer,
-    time,
-  }: {
-    renderer: CanvasRenderer;
-    time: number;
-  }): Promise<void> {
-    for (const child of this.children) {
-      await child.render({ renderer, time });
-    }
-  }
+	async render({
+		renderer,
+		time,
+	}: {
+		renderer: CanvasRenderer;
+		time: number;
+	}): Promise<void> {
+		for (const child of this.children) {
+			await child.render({ renderer, time });
+		}
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/blur-background-node.ts b/apps/web/src/services/renderer/nodes/blur-background-node.ts
index 7e9f2cf3..504161d9 100644
--- a/apps/web/src/services/renderer/nodes/blur-background-node.ts
+++ b/apps/web/src/services/renderer/nodes/blur-background-node.ts
@@ -2,74 +2,74 @@ import type { CanvasRenderer } from "../canvas-renderer";
 import { BaseNode } from "./base-node";
 
 export type BlurBackgroundNodeParams = {
-  blurIntensity: number;
-  contentNodes: BaseNode[];
+	blurIntensity: number;
+	contentNodes: BaseNode[];
 };
 
 export class BlurBackgroundNode extends BaseNode<BlurBackgroundNodeParams> {
-  private blurIntensity: number;
-  private contentNodes: BaseNode[];
+	private blurIntensity: number;
+	private contentNodes: BaseNode[];
 
-  constructor(params: BlurBackgroundNodeParams) {
-    super(params);
-    this.blurIntensity = params.blurIntensity;
-    this.contentNodes = params.contentNodes;
-  }
+	constructor(params: BlurBackgroundNodeParams) {
+		super(params);
+		this.blurIntensity = params.blurIntensity;
+		this.contentNodes = params.contentNodes;
+	}
 
-  async render({
-    renderer,
-    time,
-  }: {
-    renderer: CanvasRenderer;
-    time: number;
-  }): Promise<void> {
-    let offscreen: OffscreenCanvas | HTMLCanvasElement;
-    let offscreenCtx:
-      | OffscreenCanvasRenderingContext2D
-      | CanvasRenderingContext2D;
+	async render({
+		renderer,
+		time,
+	}: {
+		renderer: CanvasRenderer;
+		time: number;
+	}): Promise<void> {
+		let offscreen: OffscreenCanvas | HTMLCanvasElement;
+		let offscreenCtx:
+			| OffscreenCanvasRenderingContext2D
+			| CanvasRenderingContext2D;
 
-    try {
-      offscreen = new OffscreenCanvas(renderer.width, renderer.height);
-      const ctx = offscreen.getContext("2d");
-      if (!ctx) {
-        throw new Error("failed to get offscreen canvas context");
-      }
-      offscreenCtx = ctx;
-    } catch {
-      offscreen = document.createElement("canvas");
-      offscreen.width = renderer.width;
-      offscreen.height = renderer.height;
-      const ctx = offscreen.getContext("2d");
-      if (!ctx) {
-        throw new Error("failed to get canvas context");
-      }
-      offscreenCtx = ctx;
-    }
+		try {
+			offscreen = new OffscreenCanvas(renderer.width, renderer.height);
+			const ctx = offscreen.getContext("2d");
+			if (!ctx) {
+				throw new Error("failed to get offscreen canvas context");
+			}
+			offscreenCtx = ctx;
+		} catch {
+			offscreen = document.createElement("canvas");
+			offscreen.width = renderer.width;
+			offscreen.height = renderer.height;
+			const ctx = offscreen.getContext("2d");
+			if (!ctx) {
+				throw new Error("failed to get canvas context");
+			}
+			offscreenCtx = ctx;
+		}
 
-    const originalContext = renderer.context;
-    renderer.context = offscreenCtx;
+		const originalContext = renderer.context;
+		renderer.context = offscreenCtx;
 
-    for (const node of this.contentNodes) {
-      await node.render({ renderer, time });
-    }
+		for (const node of this.contentNodes) {
+			await node.render({ renderer, time });
+		}
 
-    renderer.context = originalContext;
+		renderer.context = originalContext;
 
-    const zoomScale = 1.4;
-    const scaledWidth = renderer.width * zoomScale;
-    const scaledHeight = renderer.height * zoomScale;
-    const offsetX = (renderer.width - scaledWidth) / 2;
-    const offsetY = (renderer.height - scaledHeight) / 2;
+		const zoomScale = 1.4;
+		const scaledWidth = renderer.width * zoomScale;
+		const scaledHeight = renderer.height * zoomScale;
+		const offsetX = (renderer.width - scaledWidth) / 2;
+		const offsetY = (renderer.height - scaledHeight) / 2;
 
-    renderer.context.save();
-    renderer.context.filter = `blur(${this.blurIntensity}px)`;
-    renderer.context.drawImage(
-      offscreen as CanvasImageSource,
-      offsetX,
-      offsetY,
-      scaledWidth,
-      scaledHeight,
-    );
-    renderer.context.restore();
-  }
+		renderer.context.save();
+		renderer.context.filter = `blur(${this.blurIntensity}px)`;
+		renderer.context.drawImage(
+			offscreen as CanvasImageSource,
+			offsetX,
+			offsetY,
+			scaledWidth,
+			scaledHeight,
+		);
+		renderer.context.restore();
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/color-node.ts b/apps/web/src/services/renderer/nodes/color-node.ts
index 27917993..d3afbf9b 100644
--- a/apps/web/src/services/renderer/nodes/color-node.ts
+++ b/apps/web/src/services/renderer/nodes/color-node.ts
@@ -1,31 +1,31 @@
 import { drawCssBackground } from "@/lib/gradients";
-import { CanvasRenderer } from "../canvas-renderer";
+import type { CanvasRenderer } from "../canvas-renderer";
 import { BaseNode } from "./base-node";
 
 export type ColorNodeParams = {
-  color: string;
+	color: string;
 };
 
 export class ColorNode extends BaseNode<ColorNodeParams> {
-  private color: string;
+	private color: string;
 
-  constructor(params: ColorNodeParams) {
-    super(params);
-    this.color = params.color;
-  }
+	constructor(params: ColorNodeParams) {
+		super(params);
+		this.color = params.color;
+	}
 
-  async render({ renderer }: { renderer: CanvasRenderer }) {
-    if (/gradient\(/i.test(this.color)) {
-      drawCssBackground({
-        ctx: renderer.context,
-        width: renderer.width,
-        height: renderer.height,
-        css: this.color,
-      });
-      return;
-    }
+	async render({ renderer }: { renderer: CanvasRenderer }) {
+		if (/gradient\(/i.test(this.color)) {
+			drawCssBackground({
+				ctx: renderer.context,
+				width: renderer.width,
+				height: renderer.height,
+				css: this.color,
+			});
+			return;
+		}
 
-    renderer.context.fillStyle = this.color;
-    renderer.context.fillRect(0, 0, renderer.width, renderer.height);
-  }
+		renderer.context.fillStyle = this.color;
+		renderer.context.fillRect(0, 0, renderer.width, renderer.height);
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/image-node.ts b/apps/web/src/services/renderer/nodes/image-node.ts
index 5bf02430..2d396913 100644
--- a/apps/web/src/services/renderer/nodes/image-node.ts
+++ b/apps/web/src/services/renderer/nodes/image-node.ts
@@ -1,92 +1,92 @@
-import { CanvasRenderer } from "../canvas-renderer";
+import type { CanvasRenderer } from "../canvas-renderer";
 import { BaseNode } from "./base-node";
-import { BaseMediaNodeParams } from "./video-node";
+import type { BaseMediaNodeParams } from "./video-node";
 
 const IMAGE_EPSILON = 1 / 1000;
 
 export type ImageNodeParams = BaseMediaNodeParams;
 
 export class ImageNode extends BaseNode<ImageNodeParams> {
-  private image?: HTMLImageElement;
-  private readyPromise: Promise<void>;
+	private image?: HTMLImageElement;
+	private readyPromise: Promise<void>;
 
-  constructor(params: ImageNodeParams) {
-    super(params);
-    this.readyPromise = this.load();
-  }
+	constructor(params: ImageNodeParams) {
+		super(params);
+		this.readyPromise = this.load();
+	}
 
-  private async load() {
-    this.image = new Image();
-    const url = URL.createObjectURL(this.params.file);
+	private async load() {
+		this.image = new Image();
+		const url = URL.createObjectURL(this.params.file);
 
-    await new Promise<void>((resolve, reject) => {
-      this.image!.onload = () => resolve();
-      this.image!.onerror = () => reject(new Error("Image load failed"));
-      this.image!.src = url;
-    });
+		await new Promise<void>((resolve, reject) => {
+			this.image!.onload = () => resolve();
+			this.image!.onerror = () => reject(new Error("Image load failed"));
+			this.image!.src = url;
+		});
 
-    URL.revokeObjectURL(url);
-  }
+		URL.revokeObjectURL(url);
+	}
 
-  private getImageTime(time: number) {
-    return time - this.params.timeOffset + this.params.trimStart;
-  }
+	private getImageTime(time: number) {
+		return time - this.params.timeOffset + this.params.trimStart;
+	}
 
-  private isInRange(time: number) {
-    const imageTime = this.getImageTime(time);
-    return (
-      imageTime >= this.params.trimStart - IMAGE_EPSILON &&
-      imageTime < this.params.trimStart + this.params.duration
-    );
-  }
+	private isInRange(time: number) {
+		const imageTime = this.getImageTime(time);
+		return (
+			imageTime >= this.params.trimStart - IMAGE_EPSILON &&
+			imageTime < this.params.trimStart + this.params.duration
+		);
+	}
 
-  async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
-    await super.render({ renderer, time });
+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
+		await super.render({ renderer, time });
 
-    if (!this.isInRange(time)) {
-      return;
-    }
+		if (!this.isInRange(time)) {
+			return;
+		}
 
-    await this.readyPromise;
+		await this.readyPromise;
 
-    if (!this.image) {
-      return;
-    }
+		if (!this.image) {
+			return;
+		}
 
-    renderer.context.save();
+		renderer.context.save();
 
-    if (this.params.opacity !== undefined) {
-      renderer.context.globalAlpha = this.params.opacity;
-    }
+		if (this.params.opacity !== undefined) {
+			renderer.context.globalAlpha = this.params.opacity;
+		}
 
-    if (
-      this.params.x !== undefined &&
-      this.params.y !== undefined &&
-      this.params.width !== undefined &&
-      this.params.height !== undefined
-    ) {
-      renderer.context.drawImage(
-        this.image,
-        this.params.x,
-        this.params.y,
-        this.params.width,
-        this.params.height,
-      );
-    } else {
-      const mediaW = this.image.naturalWidth || renderer.width;
-      const mediaH = this.image.naturalHeight || renderer.height;
-      const containScale = Math.min(
-        renderer.width / mediaW,
-        renderer.height / mediaH,
-      );
-      const drawW = mediaW * containScale;
-      const drawH = mediaH * containScale;
-      const drawX = (renderer.width - drawW) / 2;
-      const drawY = (renderer.height - drawH) / 2;
+		if (
+			this.params.x !== undefined &&
+			this.params.y !== undefined &&
+			this.params.width !== undefined &&
+			this.params.height !== undefined
+		) {
+			renderer.context.drawImage(
+				this.image,
+				this.params.x,
+				this.params.y,
+				this.params.width,
+				this.params.height,
+			);
+		} else {
+			const mediaW = this.image.naturalWidth || renderer.width;
+			const mediaH = this.image.naturalHeight || renderer.height;
+			const containScale = Math.min(
+				renderer.width / mediaW,
+				renderer.height / mediaH,
+			);
+			const drawW = mediaW * containScale;
+			const drawH = mediaH * containScale;
+			const drawX = (renderer.width - drawW) / 2;
+			const drawY = (renderer.height - drawH) / 2;
 
-      renderer.context.drawImage(this.image, drawX, drawY, drawW, drawH);
-    }
+			renderer.context.drawImage(this.image, drawX, drawY, drawW, drawH);
+		}
 
-    renderer.context.restore();
-  }
+		renderer.context.restore();
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/root-node.ts b/apps/web/src/services/renderer/nodes/root-node.ts
index 9f6c80c6..336018e2 100644
--- a/apps/web/src/services/renderer/nodes/root-node.ts
+++ b/apps/web/src/services/renderer/nodes/root-node.ts
@@ -1,11 +1,11 @@
 import { BaseNode } from "./base-node";
 
 export type RootNodeParams = {
-  duration: number;
+	duration: number;
 };
 
 export class RootNode extends BaseNode<RootNodeParams> {
-  get duration() {
-    return this.params.duration ?? 0;
-  }
+	get duration() {
+		return this.params.duration ?? 0;
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/sticker-node.ts b/apps/web/src/services/renderer/nodes/sticker-node.ts
index 443ea6e8..7d078825 100644
--- a/apps/web/src/services/renderer/nodes/sticker-node.ts
+++ b/apps/web/src/services/renderer/nodes/sticker-node.ts
@@ -1,86 +1,86 @@
-import { CanvasRenderer } from "../canvas-renderer";
-import { BaseNode, BaseNodeParams } from "./base-node";
-import { Transform } from "@/types/timeline";
+import type { CanvasRenderer } from "../canvas-renderer";
+import { BaseNode, type BaseNodeParams } from "./base-node";
+import type { Transform } from "@/types/timeline";
 
 const STICKER_EPSILON = 1 / 1000;
 
 export type StickerNodeParams = BaseNodeParams & {
-  iconName: string;
-  duration: number;
-  timeOffset: number;
-  trimStart: number;
-  trimEnd: number;
-  transform: Transform;
-  opacity: number;
-  color?: string;
+	iconName: string;
+	duration: number;
+	timeOffset: number;
+	trimStart: number;
+	trimEnd: number;
+	transform: Transform;
+	opacity: number;
+	color?: string;
 };
 
 export class StickerNode extends BaseNode<StickerNodeParams> {
-  private image?: HTMLImageElement;
-  private readyPromise: Promise<void>;
+	private image?: HTMLImageElement;
+	private readyPromise: Promise<void>;
 
-  constructor(params: StickerNodeParams) {
-    super(params);
-    this.readyPromise = this.load();
-  }
+	constructor(params: StickerNodeParams) {
+		super(params);
+		this.readyPromise = this.load();
+	}
 
-  private async load() {
-    this.image = new 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}`;
+	private async load() {
+		this.image = new 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();
-      this.image!.onerror = () =>
-        reject(new Error(`Failed to load sticker: ${this.params.iconName}`));
-      this.image!.src = url;
-    });
-  }
+		await new Promise<void>((resolve, reject) => {
+			this.image!.onload = () => resolve();
+			this.image!.onerror = () =>
+				reject(new Error(`Failed to load sticker: ${this.params.iconName}`));
+			this.image!.src = url;
+		});
+	}
 
-  private getStickerTime(time: number) {
-    return time - this.params.timeOffset + this.params.trimStart;
-  }
+	private getStickerTime(time: number) {
+		return time - this.params.timeOffset + this.params.trimStart;
+	}
 
-  private isInRange(time: number) {
-    const stickerTime = this.getStickerTime(time);
-    return (
-      stickerTime >= this.params.trimStart - STICKER_EPSILON &&
-      stickerTime < this.params.trimStart + this.params.duration
-    );
-  }
+	private isInRange(time: number) {
+		const stickerTime = this.getStickerTime(time);
+		return (
+			stickerTime >= this.params.trimStart - STICKER_EPSILON &&
+			stickerTime < this.params.trimStart + this.params.duration
+		);
+	}
 
-  async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
-    await super.render({ renderer, time });
+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
+		await super.render({ renderer, time });
 
-    if (!this.isInRange(time)) {
-      return;
-    }
+		if (!this.isInRange(time)) {
+			return;
+		}
 
-    await this.readyPromise;
+		await this.readyPromise;
 
-    if (!this.image) {
-      return;
-    }
+		if (!this.image) {
+			return;
+		}
 
-    const { transform, opacity } = this.params;
-    const size = 200 * transform.scale;
-    const x = renderer.width / 2 + transform.position.x - size / 2;
-    const y = renderer.height / 2 + transform.position.y - size / 2;
+		const { transform, opacity } = this.params;
+		const size = 200 * transform.scale;
+		const x = renderer.width / 2 + transform.position.x - size / 2;
+		const y = renderer.height / 2 + transform.position.y - size / 2;
 
-    renderer.context.save();
-    renderer.context.globalAlpha = opacity;
+		renderer.context.save();
+		renderer.context.globalAlpha = opacity;
 
-    if (transform.rotate !== 0) {
-      const centerX = x + size / 2;
-      const centerY = y + size / 2;
-      renderer.context.translate(centerX, centerY);
-      renderer.context.rotate((transform.rotate * Math.PI) / 180);
-      renderer.context.translate(-centerX, -centerY);
-    }
+		if (transform.rotate !== 0) {
+			const centerX = x + size / 2;
+			const centerY = y + size / 2;
+			renderer.context.translate(centerX, centerY);
+			renderer.context.rotate((transform.rotate * Math.PI) / 180);
+			renderer.context.translate(-centerX, -centerY);
+		}
 
-    renderer.context.drawImage(this.image, x, y, size, size);
-    renderer.context.restore();
-  }
+		renderer.context.drawImage(this.image, x, y, size, size);
+		renderer.context.restore();
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/text-node.ts b/apps/web/src/services/renderer/nodes/text-node.ts
index 98080e69..2cbf3d2a 100644
--- a/apps/web/src/services/renderer/nodes/text-node.ts
+++ b/apps/web/src/services/renderer/nodes/text-node.ts
@@ -1,74 +1,74 @@
-import { CanvasRenderer } from "../canvas-renderer";
+import type { CanvasRenderer } from "../canvas-renderer";
 import { BaseNode } from "./base-node";
-import { TextElement } from "@/types/timeline";
+import type { TextElement } from "@/types/timeline";
 
 export type TextNodeParams = TextElement & {
-  canvasCenter: { x: number; y: number };
-  textBaseline?: CanvasTextBaseline;
+	canvasCenter: { x: number; y: number };
+	textBaseline?: CanvasTextBaseline;
 };
 
 export class TextNode extends BaseNode<TextNodeParams> {
-  isInRange({ time }: { time: number }) {
-    return (
-      time >= this.params.startTime &&
-      time < this.params.startTime + this.params.duration
-    );
-  }
+	isInRange({ time }: { time: number }) {
+		return (
+			time >= this.params.startTime &&
+			time < this.params.startTime + this.params.duration
+		);
+	}
 
-  async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
-    if (!this.isInRange({ time })) {
-      return;
-    }
+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
+		if (!this.isInRange({ time })) {
+			return;
+		}
 
-    renderer.context.save();
+		renderer.context.save();
 
-    const x = this.params.transform.position.x + this.params.canvasCenter.x;
-    const y = this.params.transform.position.y + this.params.canvasCenter.y;
+		const x = this.params.transform.position.x + this.params.canvasCenter.x;
+		const y = this.params.transform.position.y + this.params.canvasCenter.y;
 
-    renderer.context.translate(x, y);
-    if (this.params.transform.rotate) {
-      renderer.context.rotate((this.params.transform.rotate * Math.PI) / 180);
-    }
+		renderer.context.translate(x, y);
+		if (this.params.transform.rotate) {
+			renderer.context.rotate((this.params.transform.rotate * Math.PI) / 180);
+		}
 
-    const fontWeight = this.params.fontWeight === "bold" ? "bold" : "normal";
-    const fontStyle = this.params.fontStyle === "italic" ? "italic" : "normal";
-    renderer.context.font = `${fontStyle} ${fontWeight} ${this.params.fontSize}px ${this.params.fontFamily}`;
-    renderer.context.textAlign = this.params.textAlign;
-    renderer.context.textBaseline = this.params.textBaseline || "middle";
-    renderer.context.fillStyle = this.params.color;
+		const fontWeight = this.params.fontWeight === "bold" ? "bold" : "normal";
+		const fontStyle = this.params.fontStyle === "italic" ? "italic" : "normal";
+		renderer.context.font = `${fontStyle} ${fontWeight} ${this.params.fontSize}px ${this.params.fontFamily}`;
+		renderer.context.textAlign = this.params.textAlign;
+		renderer.context.textBaseline = this.params.textBaseline || "middle";
+		renderer.context.fillStyle = this.params.color;
 
-    const prevAlpha = renderer.context.globalAlpha;
-    renderer.context.globalAlpha = this.params.opacity;
+		const prevAlpha = renderer.context.globalAlpha;
+		renderer.context.globalAlpha = this.params.opacity;
 
-    if (this.params.backgroundColor) {
-      const metrics = renderer.context.measureText(this.params.content);
-      const ascent =
-        metrics.actualBoundingBoxAscent ?? this.params.fontSize * 0.8;
-      const descent =
-        metrics.actualBoundingBoxDescent ?? this.params.fontSize * 0.2;
-      const textW = metrics.width;
-      const textH = ascent + descent;
-      const padX = 8;
-      const padY = 4;
+		if (this.params.backgroundColor) {
+			const metrics = renderer.context.measureText(this.params.content);
+			const ascent =
+				metrics.actualBoundingBoxAscent ?? this.params.fontSize * 0.8;
+			const descent =
+				metrics.actualBoundingBoxDescent ?? this.params.fontSize * 0.2;
+			const textW = metrics.width;
+			const textH = ascent + descent;
+			const padX = 8;
+			const padY = 4;
 
-      renderer.context.fillStyle = this.params.backgroundColor;
-      let bgLeft = -textW / 2;
-      if (renderer.context.textAlign === "left") bgLeft = 0;
-      if (renderer.context.textAlign === "right") bgLeft = -textW;
+			renderer.context.fillStyle = this.params.backgroundColor;
+			let bgLeft = -textW / 2;
+			if (renderer.context.textAlign === "left") bgLeft = 0;
+			if (renderer.context.textAlign === "right") bgLeft = -textW;
 
-      renderer.context.fillRect(
-        bgLeft - padX,
-        -textH / 2 - padY,
-        textW + padX * 2,
-        textH + padY * 2,
-      );
+			renderer.context.fillRect(
+				bgLeft - padX,
+				-textH / 2 - padY,
+				textW + padX * 2,
+				textH + padY * 2,
+			);
 
-      renderer.context.fillStyle = this.params.color;
-    }
+			renderer.context.fillStyle = this.params.color;
+		}
 
-    renderer.context.fillText(this.params.content, 0, 0);
+		renderer.context.fillText(this.params.content, 0, 0);
 
-    renderer.context.globalAlpha = prevAlpha;
-    renderer.context.restore();
-  }
+		renderer.context.globalAlpha = prevAlpha;
+		renderer.context.restore();
+	}
 }
diff --git a/apps/web/src/services/renderer/nodes/video-node.ts b/apps/web/src/services/renderer/nodes/video-node.ts
index 200c2003..e22c9082 100644
--- a/apps/web/src/services/renderer/nodes/video-node.ts
+++ b/apps/web/src/services/renderer/nodes/video-node.ts
@@ -1,108 +1,108 @@
 import { Input, ALL_FORMATS, BlobSource, VideoSampleSink } from "mediabunny";
-import { CanvasRenderer } from "../canvas-renderer";
+import type { CanvasRenderer } from "../canvas-renderer";
 import { BaseNode } from "./base-node";
 
 const VIDEO_EPSILON = 1 / 1000;
 
 export interface BaseMediaNodeParams {
-  file: File;
-  duration: number;
-  timeOffset: number;
-  trimStart: number;
-  trimEnd: number;
-  x?: number;
-  y?: number;
-  width?: number;
-  height?: number;
-  opacity?: number;
+	file: File;
+	duration: number;
+	timeOffset: number;
+	trimStart: number;
+	trimEnd: number;
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	opacity?: number;
 }
 
 export type VideoNodeParams = BaseMediaNodeParams;
 
 export class VideoNode extends BaseNode<VideoNodeParams> {
-  private sink?: VideoSampleSink;
-  private readyPromise: Promise<void>;
+	private sink?: VideoSampleSink;
+	private readyPromise: Promise<void>;
 
-  constructor(params: VideoNodeParams) {
-    super(params);
-    this.readyPromise = this.load();
-  }
+	constructor(params: VideoNodeParams) {
+		super(params);
+		this.readyPromise = this.load();
+	}
 
-  private async load() {
-    const input = new Input({
-      source: new BlobSource(this.params.file),
-      formats: ALL_FORMATS,
-    });
+	private async load() {
+		const input = new Input({
+			source: new BlobSource(this.params.file),
+			formats: ALL_FORMATS,
+		});
 
-    const videoTrack = await input.getPrimaryVideoTrack();
-    if (!videoTrack) {
-      throw new Error("No video track found");
-    }
+		const videoTrack = await input.getPrimaryVideoTrack();
+		if (!videoTrack) {
+			throw new Error("No video track found");
+		}
 
-    if (!(await videoTrack.canDecode())) {
-      throw new Error("Unable to decode the video track.");
-    }
+		if (!(await videoTrack.canDecode())) {
+			throw new Error("Unable to decode the video track.");
+		}
 
-    this.sink = new VideoSampleSink(videoTrack);
-  }
+		this.sink = new VideoSampleSink(videoTrack);
+	}
 
-  private getVideoTime(time: number) {
-    return time - this.params.timeOffset + this.params.trimStart;
-  }
+	private getVideoTime(time: number) {
+		return time - this.params.timeOffset + this.params.trimStart;
+	}
 
-  private isInRange(time: number) {
-    const videoTime = this.getVideoTime(time);
-    return (
-      videoTime >= this.params.trimStart - VIDEO_EPSILON &&
-      videoTime < this.params.trimStart + this.params.duration
-    );
-  }
+	private isInRange(time: number) {
+		const videoTime = this.getVideoTime(time);
+		return (
+			videoTime >= this.params.trimStart - VIDEO_EPSILON &&
+			videoTime < this.params.trimStart + this.params.duration
+		);
+	}
 
-  async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
-    await super.render({ renderer, time });
+	async render({ renderer, time }: { renderer: CanvasRenderer; time: number }) {
+		await super.render({ renderer, time });
 
-    if (!this.isInRange(time)) {
-      return;
-    }
+		if (!this.isInRange(time)) {
+			return;
+		}
 
-    await this.readyPromise;
+		await this.readyPromise;
 
-    if (!this.sink) {
-      throw new Error("Sink not initialized");
-    }
+		if (!this.sink) {
+			throw new Error("Sink not initialized");
+		}
 
-    const videoTime = this.getVideoTime(time);
-    const sample = await this.sink.getSample(videoTime);
+		const videoTime = this.getVideoTime(time);
+		const sample = await this.sink.getSample(videoTime);
 
-    if (sample) {
-      try {
-        renderer.context.save();
+		if (sample) {
+			try {
+				renderer.context.save();
 
-        if (this.params.opacity !== undefined) {
-          renderer.context.globalAlpha = this.params.opacity;
-        }
+				if (this.params.opacity !== undefined) {
+					renderer.context.globalAlpha = this.params.opacity;
+				}
 
-        if (
-          this.params.x !== undefined &&
-          this.params.y !== undefined &&
-          this.params.width !== undefined &&
-          this.params.height !== undefined
-        ) {
-          sample.draw(
-            renderer.context,
-            this.params.x,
-            this.params.y,
-            this.params.width,
-            this.params.height,
-          );
-        } else {
-          sample.draw(renderer.context, 0, 0, renderer.width, renderer.height);
-        }
+				if (
+					this.params.x !== undefined &&
+					this.params.y !== undefined &&
+					this.params.width !== undefined &&
+					this.params.height !== undefined
+				) {
+					sample.draw(
+						renderer.context,
+						this.params.x,
+						this.params.y,
+						this.params.width,
+						this.params.height,
+					);
+				} else {
+					sample.draw(renderer.context, 0, 0, renderer.width, renderer.height);
+				}
 
-        renderer.context.restore();
-      } finally {
-        sample.close();
-      }
-    }
-  }
+				renderer.context.restore();
+			} finally {
+				sample.close();
+			}
+		}
+	}
 }
diff --git a/apps/web/src/services/renderer/scene-builder.ts b/apps/web/src/services/renderer/scene-builder.ts
index 53c5cafd..01827945 100644
--- a/apps/web/src/services/renderer/scene-builder.ts
+++ b/apps/web/src/services/renderer/scene-builder.ts
@@ -1,5 +1,5 @@
 import type { TimelineTrack } from "@/types/timeline";
-import { MediaAsset } from "@/types/assets";
+import type { MediaAsset } from "@/types/assets";
 import { RootNode } from "./nodes/root-node";
 import { VideoNode } from "./nodes/video-node";
 import { ImageNode } from "./nodes/image-node";
@@ -7,120 +7,123 @@ import { TextNode } from "./nodes/text-node";
 import { StickerNode } from "./nodes/sticker-node";
 import { ColorNode } from "./nodes/color-node";
 import { BlurBackgroundNode } from "./nodes/blur-background-node";
-import { TBackground, TCanvasSize } from "@/types/project";
+import type { TBackground, TCanvasSize } from "@/types/project";
 import { DEFAULT_BLUR_INTENSITY } from "@/constants/project-constants";
 import { isMainTrack } from "@/lib/timeline";
 
 export type BuildSceneParams = {
-  canvasSize: TCanvasSize;
-  tracks: TimelineTrack[];
-  mediaAssets: MediaAsset[];
-  duration: number;
-  background: TBackground;
+	canvasSize: TCanvasSize;
+	tracks: TimelineTrack[];
+	mediaAssets: MediaAsset[];
+	duration: number;
+	background: TBackground;
 };
 
 export function buildScene(params: BuildSceneParams) {
-  const { tracks, mediaAssets, duration, canvasSize, background } = params;
+	const { tracks, mediaAssets, duration, canvasSize, background } = params;
 
-  const rootNode = new RootNode({ duration });
-  const mediaMap = new Map(mediaAssets.map((m) => [m.id, m]));
+	const rootNode = new RootNode({ duration });
+	const mediaMap = new Map(mediaAssets.map((m) => [m.id, m]));
 
-  const visibleTracks = tracks.filter(
-    (track) => !("hidden" in track && track.hidden),
-  );
+	const visibleTracks = tracks.filter(
+		(track) => !("hidden" in track && track.hidden),
+	);
 
-  const mainTrack = visibleTracks.find((track) => isMainTrack(track)) ?? null;
-  const orderedTracksTopToBottom = [
-    ...visibleTracks.filter((track) => !isMainTrack(track)),
-    ...(mainTrack ? [mainTrack] : []),
-  ];
+	const mainTrack = visibleTracks.find((track) => isMainTrack(track)) ?? null;
+	const orderedTracksTopToBottom = [
+		...visibleTracks.filter((track) => !isMainTrack(track)),
+		...(mainTrack ? [mainTrack] : []),
+	];
 
-  const orderedTracksBottomToTop = orderedTracksTopToBottom.slice().reverse();
+	const orderedTracksBottomToTop = orderedTracksTopToBottom.slice().reverse();
 
-  const contentNodes = [];
+	const contentNodes = [];
 
-  for (const track of orderedTracksBottomToTop) {
-    const elements = track.elements
-      .filter((element) => !("hidden" in element && element.hidden))
-      .slice()
-      .sort((a, b) => {
-        if (a.startTime !== b.startTime) return a.startTime - b.startTime;
-        return a.id.localeCompare(b.id);
-      });
+	for (const track of orderedTracksBottomToTop) {
+		const elements = track.elements
+			.filter((element) => !("hidden" in element && element.hidden))
+			.slice()
+			.sort((a, b) => {
+				if (a.startTime !== b.startTime) return a.startTime - b.startTime;
+				return a.id.localeCompare(b.id);
+			});
 
-    for (const element of elements) {
-      if (element.type === "video" || element.type === "image") {
-        const mediaAsset = mediaMap.get(element.mediaId);
-        if (mediaAsset && mediaAsset.file) {
-          if (mediaAsset.type === "video") {
-            contentNodes.push(
-              new VideoNode({
-                file: mediaAsset.file,
-                duration: element.duration,
-                timeOffset: element.startTime,
-                trimStart: element.trimStart,
-                trimEnd: element.trimEnd,
-              }),
-            );
-          } else if (mediaAsset.type === "image") {
-            contentNodes.push(
-              new ImageNode({
-                file: mediaAsset.file,
-                duration: element.duration,
-                timeOffset: element.startTime,
-                trimStart: element.trimStart,
-                trimEnd: element.trimEnd,
-              }),
-            );
-          }
-        }
-      }
+		for (const element of elements) {
+			if (element.type === "video" || element.type === "image") {
+				const mediaAsset = mediaMap.get(element.mediaId);
+				if (!mediaAsset?.file) {
+					continue;
+				}
 
-      if (element.type === "text") {
-        contentNodes.push(
-          new TextNode({
-            ...element,
-            canvasCenter: { x: canvasSize.width / 2, y: canvasSize.height / 2 },
-            textBaseline: "middle",
-          }),
-        );
-      }
+				if (mediaAsset.type === "video") {
+					contentNodes.push(
+						new VideoNode({
+							file: mediaAsset.file,
+							duration: element.duration,
+							timeOffset: element.startTime,
+							trimStart: element.trimStart,
+							trimEnd: element.trimEnd,
+						}),
+					);
+				}
+				if (mediaAsset.type === "image") {
+					contentNodes.push(
+						new ImageNode({
+							file: mediaAsset.file,
+							duration: element.duration,
+							timeOffset: element.startTime,
+							trimStart: element.trimStart,
+							trimEnd: element.trimEnd,
+						}),
+					);
+				}
+			}
 
-      if (element.type === "sticker") {
-        contentNodes.push(
-          new StickerNode({
-            iconName: element.iconName,
-            duration: element.duration,
-            timeOffset: element.startTime,
-            trimStart: element.trimStart,
-            trimEnd: element.trimEnd,
-            transform: element.transform,
-            opacity: element.opacity,
-            color: element.color,
-          }),
-        );
-      }
-    }
-  }
+			if (element.type === "text") {
+				contentNodes.push(
+					new TextNode({
+						...element,
+						canvasCenter: { x: canvasSize.width / 2, y: canvasSize.height / 2 },
+						textBaseline: "middle",
+					}),
+				);
+			}
 
-  if (background.type === "blur") {
-    rootNode.add(
-      new BlurBackgroundNode({
-        blurIntensity: background.blurIntensity ?? DEFAULT_BLUR_INTENSITY,
-        contentNodes,
-      }),
-    );
-    for (const node of contentNodes) {
-      rootNode.add(node);
-    }
-  } else {
-    if (background.type === "color" && background.color !== "transparent") {
-      rootNode.add(new ColorNode({ color: background.color }));
-    }
-    for (const node of contentNodes) {
-      rootNode.add(node);
-    }
-  }
+			if (element.type === "sticker") {
+				contentNodes.push(
+					new StickerNode({
+						iconName: element.iconName,
+						duration: element.duration,
+						timeOffset: element.startTime,
+						trimStart: element.trimStart,
+						trimEnd: element.trimEnd,
+						transform: element.transform,
+						opacity: element.opacity,
+						color: element.color,
+					}),
+				);
+			}
+		}
+	}
 
-  return rootNode;
+	if (background.type === "blur") {
+		rootNode.add(
+			new BlurBackgroundNode({
+				blurIntensity: background.blurIntensity ?? DEFAULT_BLUR_INTENSITY,
+				contentNodes,
+			}),
+		);
+		for (const node of contentNodes) {
+			rootNode.add(node);
+		}
+	} else {
+		if (background.type === "color" && background.color !== "transparent") {
+			rootNode.add(new ColorNode({ color: background.color }));
+		}
+		for (const node of contentNodes) {
+			rootNode.add(node);
+		}
+	}
+
+	return rootNode;
 }
diff --git a/apps/web/src/services/renderer/scene-exporter.ts b/apps/web/src/services/renderer/scene-exporter.ts
index 36801757..1db1daf3 100644
--- a/apps/web/src/services/renderer/scene-exporter.ts
+++ b/apps/web/src/services/renderer/scene-exporter.ts
@@ -1,143 +1,143 @@
 import EventEmitter from "eventemitter3";
 
 import {
-  Output,
-  Mp4OutputFormat,
-  WebMOutputFormat,
-  BufferTarget,
-  CanvasSource,
-  AudioBufferSource,
-  QUALITY_LOW,
-  QUALITY_MEDIUM,
-  QUALITY_HIGH,
-  QUALITY_VERY_HIGH,
+	Output,
+	Mp4OutputFormat,
+	WebMOutputFormat,
+	BufferTarget,
+	CanvasSource,
+	AudioBufferSource,
+	QUALITY_LOW,
+	QUALITY_MEDIUM,
+	QUALITY_HIGH,
+	QUALITY_VERY_HIGH,
 } from "mediabunny";
-import { RootNode } from "./nodes/root-node";
+import type { RootNode } from "./nodes/root-node";
 import { CanvasRenderer } from "./canvas-renderer";
 
 export type ExportFormat = "mp4" | "webm";
 export type ExportQuality = "low" | "medium" | "high" | "very_high";
 
 type ExportParams = {
-  width: number;
-  height: number;
-  fps: number;
-  format: ExportFormat;
-  quality: ExportQuality;
-  includeAudio?: boolean;
-  audioBuffer?: AudioBuffer;
+	width: number;
+	height: number;
+	fps: number;
+	format: ExportFormat;
+	quality: ExportQuality;
+	includeAudio?: boolean;
+	audioBuffer?: AudioBuffer;
 };
 
 const qualityMap = {
-  low: QUALITY_LOW,
-  medium: QUALITY_MEDIUM,
-  high: QUALITY_HIGH,
-  very_high: QUALITY_VERY_HIGH,
+	low: QUALITY_LOW,
+	medium: QUALITY_MEDIUM,
+	high: QUALITY_HIGH,
+	very_high: QUALITY_VERY_HIGH,
 };
 
 export type SceneExporterEvents = {
-  progress: [progress: number];
-  complete: [buffer: ArrayBuffer];
-  error: [error: Error];
-  cancelled: [];
+	progress: [progress: number];
+	complete: [buffer: ArrayBuffer];
+	error: [error: Error];
+	cancelled: [];
 };
 
 export class SceneExporter extends EventEmitter<SceneExporterEvents> {
-  private renderer: CanvasRenderer;
-  private format: ExportFormat;
-  private quality: ExportQuality;
-  private includeAudio: boolean;
-  private audioBuffer?: AudioBuffer;
+	private renderer: CanvasRenderer;
+	private format: ExportFormat;
+	private quality: ExportQuality;
+	private includeAudio: boolean;
+	private audioBuffer?: AudioBuffer;
 
-  private cancelled = false;
+	private cancelled = false;
 
-  constructor(params: ExportParams) {
-    super();
-    this.renderer = new CanvasRenderer({
-      width: params.width,
-      height: params.height,
-      fps: params.fps,
-    });
+	constructor(params: ExportParams) {
+		super();
+		this.renderer = new CanvasRenderer({
+			width: params.width,
+			height: params.height,
+			fps: params.fps,
+		});
 
-    this.format = params.format;
-    this.quality = params.quality;
-    this.includeAudio = params.includeAudio ?? false;
-    this.audioBuffer = params.audioBuffer;
-  }
+		this.format = params.format;
+		this.quality = params.quality;
+		this.includeAudio = params.includeAudio ?? false;
+		this.audioBuffer = params.audioBuffer;
+	}
 
-  cancel() {
-    this.cancelled = true;
-  }
+	cancel() {
+		this.cancelled = true;
+	}
 
-  async export(rootNode: RootNode) {
-    const { fps } = this.renderer;
-    const frameCount = Math.ceil(rootNode.duration * fps);
+	async export(rootNode: RootNode) {
+		const { fps } = this.renderer;
+		const frameCount = Math.ceil(rootNode.duration * fps);
 
-    const outputFormat =
-      this.format === "webm" ? new WebMOutputFormat() : new Mp4OutputFormat();
+		const outputFormat =
+			this.format === "webm" ? new WebMOutputFormat() : new Mp4OutputFormat();
 
-    const output = new Output({
-      format: outputFormat,
-      target: new BufferTarget(),
-    });
+		const output = new Output({
+			format: outputFormat,
+			target: new BufferTarget(),
+		});
 
-    const videoSource = new CanvasSource(this.renderer.canvas as any, {
-      codec: this.format === "webm" ? "vp9" : "avc",
-      bitrate: qualityMap[this.quality],
-    });
+		const videoSource = new CanvasSource(this.renderer.canvas as any, {
+			codec: this.format === "webm" ? "vp9" : "avc",
+			bitrate: qualityMap[this.quality],
+		});
 
-    output.addVideoTrack(videoSource, { frameRate: fps });
+		output.addVideoTrack(videoSource, { frameRate: fps });
 
-    // Add audio track if requested
-    let audioSource: AudioBufferSource | null = null;
-    if (this.includeAudio && this.audioBuffer) {
-      audioSource = new AudioBufferSource({
-        codec: this.format === "webm" ? "opus" : "aac",
-        bitrate: qualityMap[this.quality],
-      });
-      output.addAudioTrack(audioSource);
-    }
+		// Add audio track if requested
+		let audioSource: AudioBufferSource | null = null;
+		if (this.includeAudio && this.audioBuffer) {
+			audioSource = new AudioBufferSource({
+				codec: this.format === "webm" ? "opus" : "aac",
+				bitrate: qualityMap[this.quality],
+			});
+			output.addAudioTrack(audioSource);
+		}
 
-    await output.start();
+		await output.start();
 
-    // Add audio data after starting
-    if (audioSource && this.audioBuffer) {
-      await audioSource.add(this.audioBuffer);
-      audioSource.close();
-    }
+		// Add audio data after starting
+		if (audioSource && this.audioBuffer) {
+			await audioSource.add(this.audioBuffer);
+			audioSource.close();
+		}
 
-    // Render video frames
-    for (let i = 0; i < frameCount; i++) {
-      if (this.cancelled) {
-        await output.cancel();
-        this.emit("cancelled");
-        return null;
-      }
+		// Render video frames
+		for (let i = 0; i < frameCount; i++) {
+			if (this.cancelled) {
+				await output.cancel();
+				this.emit("cancelled");
+				return null;
+			}
 
-      const time = i / fps;
-      await this.renderer.render({ node: rootNode, time });
-      await videoSource.add(time, 1 / fps);
+			const time = i / fps;
+			await this.renderer.render({ node: rootNode, time });
+			await videoSource.add(time, 1 / fps);
 
-      this.emit("progress", i / frameCount);
-    }
+			this.emit("progress", i / frameCount);
+		}
 
-    if (this.cancelled) {
-      await output.cancel();
-      this.emit("cancelled");
-      return null;
-    }
+		if (this.cancelled) {
+			await output.cancel();
+			this.emit("cancelled");
+			return null;
+		}
 
-    videoSource.close();
-    await output.finalize();
-    this.emit("progress", 1);
+		videoSource.close();
+		await output.finalize();
+		this.emit("progress", 1);
 
-    const buffer = output.target.buffer;
-    if (!buffer) {
-      this.emit("error", new Error("Failed to export video"));
-      return null;
-    }
+		const buffer = output.target.buffer;
+		if (!buffer) {
+			this.emit("error", new Error("Failed to export video"));
+			return null;
+		}
 
-    this.emit("complete", buffer);
-    return buffer;
-  }
+		this.emit("complete", buffer);
+		return buffer;
+	}
 }
diff --git a/apps/web/src/services/storage/indexeddb-adapter.ts b/apps/web/src/services/storage/indexeddb-adapter.ts
index ac62585b..cc4d03a0 100644
--- a/apps/web/src/services/storage/indexeddb-adapter.ts
+++ b/apps/web/src/services/storage/indexeddb-adapter.ts
@@ -1,101 +1,101 @@
-import { StorageAdapter } from "./types";
+import type { StorageAdapter } from "./types";
 
 export class IndexedDBAdapter<T> implements StorageAdapter<T> {
-  private dbName: string;
-  private storeName: string;
-  private version: number;
+	private dbName: string;
+	private storeName: string;
+	private version: number;
 
-  constructor(dbName: string, storeName: string, version = 1) {
-    this.dbName = dbName;
-    this.storeName = storeName;
-    this.version = version;
-  }
+	constructor(dbName: string, storeName: string, version = 1) {
+		this.dbName = dbName;
+		this.storeName = storeName;
+		this.version = version;
+	}
 
-  private async getDB(): Promise<IDBDatabase> {
-    return new Promise((resolve, reject) => {
-      const request = indexedDB.open(this.dbName, this.version);
+	private async getDB(): Promise<IDBDatabase> {
+		return new Promise((resolve, reject) => {
+			const request = indexedDB.open(this.dbName, this.version);
 
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve(request.result);
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve(request.result);
 
-      request.onupgradeneeded = (event) => {
-        const db = (event.target as IDBOpenDBRequest).result;
-        if (!db.objectStoreNames.contains(this.storeName)) {
-          db.createObjectStore(this.storeName, { keyPath: "id" });
-        }
-      };
-    });
-  }
+			request.onupgradeneeded = (event) => {
+				const db = (event.target as IDBOpenDBRequest).result;
+				if (!db.objectStoreNames.contains(this.storeName)) {
+					db.createObjectStore(this.storeName, { keyPath: "id" });
+				}
+			};
+		});
+	}
 
-  async get(key: string): Promise<T | null> {
-    const db = await this.getDB();
-    const transaction = db.transaction([this.storeName], "readonly");
-    const store = transaction.objectStore(this.storeName);
+	async get(key: string): Promise<T | null> {
+		const db = await this.getDB();
+		const transaction = db.transaction([this.storeName], "readonly");
+		const store = transaction.objectStore(this.storeName);
 
-    return new Promise((resolve, reject) => {
-      const request = store.get(key);
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve(request.result || null);
-    });
-  }
+		return new Promise((resolve, reject) => {
+			const request = store.get(key);
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve(request.result || null);
+		});
+	}
 
-  async set(key: string, value: T): Promise<void> {
-    const db = await this.getDB();
-    const transaction = db.transaction([this.storeName], "readwrite");
-    const store = transaction.objectStore(this.storeName);
+	async set(key: string, value: T): Promise<void> {
+		const db = await this.getDB();
+		const transaction = db.transaction([this.storeName], "readwrite");
+		const store = transaction.objectStore(this.storeName);
 
-    return new Promise((resolve, reject) => {
-      const request = store.put({ id: key, ...value });
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve();
-    });
-  }
+		return new Promise((resolve, reject) => {
+			const request = store.put({ id: key, ...value });
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve();
+		});
+	}
 
-  async remove(key: string): Promise<void> {
-    const db = await this.getDB();
-    const transaction = db.transaction([this.storeName], "readwrite");
-    const store = transaction.objectStore(this.storeName);
+	async remove(key: string): Promise<void> {
+		const db = await this.getDB();
+		const transaction = db.transaction([this.storeName], "readwrite");
+		const store = transaction.objectStore(this.storeName);
 
-    return new Promise((resolve, reject) => {
-      const request = store.delete(key);
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve();
-    });
-  }
+		return new Promise((resolve, reject) => {
+			const request = store.delete(key);
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve();
+		});
+	}
 
-  async list(): Promise<string[]> {
-    const db = await this.getDB();
-    const transaction = db.transaction([this.storeName], "readonly");
-    const store = transaction.objectStore(this.storeName);
+	async list(): Promise<string[]> {
+		const db = await this.getDB();
+		const transaction = db.transaction([this.storeName], "readonly");
+		const store = transaction.objectStore(this.storeName);
 
-    return new Promise((resolve, reject) => {
-      const request = store.getAllKeys();
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve(request.result as string[]);
-    });
-  }
+		return new Promise((resolve, reject) => {
+			const request = store.getAllKeys();
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve(request.result as string[]);
+		});
+	}
 
-  async getAll(): Promise<T[]> {
-    const db = await this.getDB();
-    const transaction = db.transaction([this.storeName], "readonly");
-    const store = transaction.objectStore(this.storeName);
+	async getAll(): Promise<T[]> {
+		const db = await this.getDB();
+		const transaction = db.transaction([this.storeName], "readonly");
+		const store = transaction.objectStore(this.storeName);
 
-    return new Promise((resolve, reject) => {
-      const request = store.getAll();
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve(request.result || []);
-    });
-  }
+		return new Promise((resolve, reject) => {
+			const request = store.getAll();
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve(request.result || []);
+		});
+	}
 
-  async clear(): Promise<void> {
-    const db = await this.getDB();
-    const transaction = db.transaction([this.storeName], "readwrite");
-    const store = transaction.objectStore(this.storeName);
+	async clear(): Promise<void> {
+		const db = await this.getDB();
+		const transaction = db.transaction([this.storeName], "readwrite");
+		const store = transaction.objectStore(this.storeName);
 
-    return new Promise((resolve, reject) => {
-      const request = store.clear();
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve();
-    });
-  }
+		return new Promise((resolve, reject) => {
+			const request = store.clear();
+			request.onerror = () => reject(request.error);
+			request.onsuccess = () => resolve();
+		});
+	}
 }
diff --git a/apps/web/src/services/storage/migrations/base.ts b/apps/web/src/services/storage/migrations/base.ts
index f134d731..c7558264 100644
--- a/apps/web/src/services/storage/migrations/base.ts
+++ b/apps/web/src/services/storage/migrations/base.ts
@@ -1,5 +1,5 @@
 export abstract class StorageMigration {
-  abstract from: number;
-  abstract to: number;
-  abstract run(): Promise<void>;
+	abstract from: number;
+	abstract to: number;
+	abstract run(): Promise<void>;
 }
diff --git a/apps/web/src/services/storage/migrations/runner.ts b/apps/web/src/services/storage/migrations/runner.ts
index d0eb6b01..d9277cb0 100644
--- a/apps/web/src/services/storage/migrations/runner.ts
+++ b/apps/web/src/services/storage/migrations/runner.ts
@@ -1,134 +1,134 @@
 import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
-import { StorageMigration } from "./base";
+import type { StorageMigration } from "./base";
 import { StorageVersionManager } from "./version-manager";
 
 export interface StorageMigrationResult {
-  fromVersion: number;
-  toVersion: number;
-  migrated: boolean;
+	fromVersion: number;
+	toVersion: number;
+	migrated: boolean;
 }
 
 export type StorageMigrationCallbacks = {
-  onMigrationStart?: ({
-    fromVersion,
-    toVersion,
-  }: {
-    fromVersion: number;
-    toVersion: number;
-  }) => void;
-  onMigrationComplete?: ({
-    fromVersion,
-    toVersion,
-  }: {
-    fromVersion: number;
-    toVersion: number;
-  }) => void;
+	onMigrationStart?: ({
+		fromVersion,
+		toVersion,
+	}: {
+		fromVersion: number;
+		toVersion: number;
+	}) => void;
+	onMigrationComplete?: ({
+		fromVersion,
+		toVersion,
+	}: {
+		fromVersion: number;
+		toVersion: number;
+	}) => void;
 };
 
 type ProjectRecord = Record<string, unknown>;
 
 export async function runStorageMigrations({
-  migrations,
-  versionManager = new StorageVersionManager(),
-  callbacks,
+	migrations,
+	versionManager = new StorageVersionManager(),
+	callbacks,
 }: {
-  migrations: StorageMigration[];
-  versionManager?: StorageVersionManager;
-  callbacks?: StorageMigrationCallbacks;
+	migrations: StorageMigration[];
+	versionManager?: StorageVersionManager;
+	callbacks?: StorageMigrationCallbacks;
 }): Promise<StorageMigrationResult> {
-  const versionRecord = await versionManager.getVersionRecord();
-  const inferredVersion = versionRecord
-    ? null
-    : await inferStorageVersionFromProjects();
-  const fromVersion =
-    versionRecord?.inProgress?.from ??
-    versionRecord?.version ??
-    inferredVersion ??
-    0;
+	const versionRecord = await versionManager.getVersionRecord();
+	const inferredVersion = versionRecord
+		? null
+		: await inferStorageVersionFromProjects();
+	const fromVersion =
+		versionRecord?.inProgress?.from ??
+		versionRecord?.version ??
+		inferredVersion ??
+		0;
 
-  if (!versionRecord) {
-    await versionManager.setVersion({ version: fromVersion });
-  }
+	if (!versionRecord) {
+		await versionManager.setVersion({ version: fromVersion });
+	}
 
-  const orderedMigrations = [...migrations].sort((a, b) => a.from - b.from);
-  let currentVersion = fromVersion;
+	const orderedMigrations = [...migrations].sort((a, b) => a.from - b.from);
+	let currentVersion = fromVersion;
 
-  for (const migration of orderedMigrations) {
-    if (migration.from !== currentVersion) {
-      continue;
-    }
+	for (const migration of orderedMigrations) {
+		if (migration.from !== currentVersion) {
+			continue;
+		}
 
-    await versionManager.setInProgress({
-      from: migration.from,
-      to: migration.to,
-    });
-    callbacks?.onMigrationStart?.({
-      fromVersion: migration.from,
-      toVersion: migration.to,
-    });
-    await migration.run();
-    currentVersion = migration.to;
-    await versionManager.setVersion({ version: currentVersion });
-    await versionManager.clearInProgress();
-    callbacks?.onMigrationComplete?.({
-      fromVersion: migration.from,
-      toVersion: migration.to,
-    });
-  }
+		await versionManager.setInProgress({
+			from: migration.from,
+			to: migration.to,
+		});
+		callbacks?.onMigrationStart?.({
+			fromVersion: migration.from,
+			toVersion: migration.to,
+		});
+		await migration.run();
+		currentVersion = migration.to;
+		await versionManager.setVersion({ version: currentVersion });
+		await versionManager.clearInProgress();
+		callbacks?.onMigrationComplete?.({
+			fromVersion: migration.from,
+			toVersion: migration.to,
+		});
+	}
 
-  return {
-    fromVersion,
-    toVersion: currentVersion,
-    migrated: currentVersion !== fromVersion,
-  };
+	return {
+		fromVersion,
+		toVersion: currentVersion,
+		migrated: currentVersion !== fromVersion,
+	};
 }
 
 async function inferStorageVersionFromProjects(): Promise<number> {
-  const projectsAdapter = new IndexedDBAdapter<unknown>(
-    "video-editor-projects",
-    "projects",
-    1,
-  );
-  const projects = await projectsAdapter.getAll();
+	const projectsAdapter = new IndexedDBAdapter<unknown>(
+		"video-editor-projects",
+		"projects",
+		1,
+	);
+	const projects = await projectsAdapter.getAll();
 
-  if (projects.length === 0) {
-    return 0;
-  }
+	if (projects.length === 0) {
+		return 0;
+	}
 
-  let lowestVersion = Number.POSITIVE_INFINITY;
+	let lowestVersion = Number.POSITIVE_INFINITY;
 
-  for (const project of projects) {
-    const projectVersion = checkProjectVersion({ project });
-    if (projectVersion < lowestVersion) {
-      lowestVersion = projectVersion;
-    }
-  }
+	for (const project of projects) {
+		const projectVersion = checkProjectVersion({ project });
+		if (projectVersion < lowestVersion) {
+			lowestVersion = projectVersion;
+		}
+	}
 
-  if (lowestVersion === Number.POSITIVE_INFINITY) {
-    return 0;
-  }
+	if (lowestVersion === Number.POSITIVE_INFINITY) {
+		return 0;
+	}
 
-  return lowestVersion;
+	return lowestVersion;
 }
 
 function checkProjectVersion({ project }: { project: unknown }): number {
-  if (!isRecord(project)) {
-    return 0;
-  }
+	if (!isRecord(project)) {
+		return 0;
+	}
 
-  const versionValue = project.version;
-  if (typeof versionValue === "number") {
-    return versionValue;
-  }
+	const versionValue = project.version;
+	if (typeof versionValue === "number") {
+		return versionValue;
+	}
 
-  const scenesValue = project.scenes;
-  if (Array.isArray(scenesValue) && scenesValue.length > 0) {
-    return 1;
-  }
+	const scenesValue = project.scenes;
+	if (Array.isArray(scenesValue) && scenesValue.length > 0) {
+		return 1;
+	}
 
-  return 0;
+	return 0;
 }
 
 function isRecord(value: unknown): value is ProjectRecord {
-  return typeof value === "object" && value !== null;
+	return typeof value === "object" && value !== null;
 }
diff --git a/apps/web/src/services/storage/migrations/v0-to-v1.ts b/apps/web/src/services/storage/migrations/v0-to-v1.ts
index ab70eabe..7ec388f1 100644
--- a/apps/web/src/services/storage/migrations/v0-to-v1.ts
+++ b/apps/web/src/services/storage/migrations/v0-to-v1.ts
@@ -1,93 +1,93 @@
 import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
-import { SerializedScene } from "@/services/storage/types";
+import type { SerializedScene } from "@/services/storage/types";
 import { buildDefaultScene } from "@/lib/scenes";
-import { TScene } from "@/types/timeline";
+import type { TScene } from "@/types/timeline";
 import { StorageMigration } from "./base";
 
 type ProjectRecord = Record<string, unknown>;
 
 export class V0toV1Migration extends StorageMigration {
-  from = 0;
-  to = 1;
+	from = 0;
+	to = 1;
 
-  async run(): Promise<void> {
-    const projectsAdapter = new IndexedDBAdapter<unknown>(
-      "video-editor-projects",
-      "projects",
-      1,
-    );
-    const projects = await projectsAdapter.getAll();
+	async run(): Promise<void> {
+		const projectsAdapter = new IndexedDBAdapter<unknown>(
+			"video-editor-projects",
+			"projects",
+			1,
+		);
+		const projects = await projectsAdapter.getAll();
 
-    for (const project of projects) {
-      if (!isRecord(project)) {
-        continue;
-      }
+		for (const project of projects) {
+			if (!isRecord(project)) {
+				continue;
+			}
 
-      const scenesValue = project.scenes;
-      if (Array.isArray(scenesValue) && scenesValue.length > 0) {
-        continue;
-      }
+			const scenesValue = project.scenes;
+			if (Array.isArray(scenesValue) && scenesValue.length > 0) {
+				continue;
+			}
 
-      const mainScene = buildDefaultScene({ isMain: true, name: "Main scene" });
-      const serializedScene = serializeScene({ scene: mainScene });
-      const updatedProject: ProjectRecord = {
-        ...project,
-        scenes: [serializedScene],
-        currentSceneId: mainScene.id,
-        version: 1,
-      };
+			const mainScene = buildDefaultScene({ isMain: true, name: "Main scene" });
+			const serializedScene = serializeScene({ scene: mainScene });
+			const updatedProject: ProjectRecord = {
+				...project,
+				scenes: [serializedScene],
+				currentSceneId: mainScene.id,
+				version: 1,
+			};
 
-      const updatedAt = new Date().toISOString();
-      if (isRecord(project.metadata)) {
-        updatedProject.metadata = {
-          ...project.metadata,
-          updatedAt,
-        };
-      } else {
-        updatedProject.updatedAt = updatedAt;
-      }
+			const updatedAt = new Date().toISOString();
+			if (isRecord(project.metadata)) {
+				updatedProject.metadata = {
+					...project.metadata,
+					updatedAt,
+				};
+			} else {
+				updatedProject.updatedAt = updatedAt;
+			}
 
-      const projectId = getProjectId({ project: updatedProject });
-      if (!projectId) {
-        continue;
-      }
+			const projectId = getProjectId({ project: updatedProject });
+			if (!projectId) {
+				continue;
+			}
 
-      await projectsAdapter.set(projectId, updatedProject);
-    }
-  }
+			await projectsAdapter.set(projectId, updatedProject);
+		}
+	}
 }
 
 function serializeScene({ scene }: { scene: TScene }): SerializedScene {
-  return {
-    id: scene.id,
-    name: scene.name,
-    isMain: scene.isMain,
-    tracks: scene.tracks,
-    bookmarks: scene.bookmarks,
-    createdAt: scene.createdAt.toISOString(),
-    updatedAt: scene.updatedAt.toISOString(),
-  };
+	return {
+		id: scene.id,
+		name: scene.name,
+		isMain: scene.isMain,
+		tracks: scene.tracks,
+		bookmarks: scene.bookmarks,
+		createdAt: scene.createdAt.toISOString(),
+		updatedAt: scene.updatedAt.toISOString(),
+	};
 }
 
 function getProjectId({ project }: { project: ProjectRecord }): string | null {
-  const idValue = project.id;
-  if (typeof idValue === "string" && idValue.length > 0) {
-    return idValue;
-  }
+	const idValue = project.id;
+	if (typeof idValue === "string" && idValue.length > 0) {
+		return idValue;
+	}
 
-  const metadataValue = project.metadata;
-  if (!isRecord(metadataValue)) {
-    return null;
-  }
+	const metadataValue = project.metadata;
+	if (!isRecord(metadataValue)) {
+		return null;
+	}
 
-  const metadataId = metadataValue.id;
-  if (typeof metadataId === "string" && metadataId.length > 0) {
-    return metadataId;
-  }
+	const metadataId = metadataValue.id;
+	if (typeof metadataId === "string" && metadataId.length > 0) {
+		return metadataId;
+	}
 
-  return null;
+	return null;
 }
 
 function isRecord(value: unknown): value is ProjectRecord {
-  return typeof value === "object" && value !== null;
+	return typeof value === "object" && value !== null;
 }
diff --git a/apps/web/src/services/storage/migrations/v1-to-v2.ts b/apps/web/src/services/storage/migrations/v1-to-v2.ts
index c0d9460f..05d302ea 100644
--- a/apps/web/src/services/storage/migrations/v1-to-v2.ts
+++ b/apps/web/src/services/storage/migrations/v1-to-v2.ts
@@ -1,8 +1,8 @@
 import {
-  DEFAULT_BLUR_INTENSITY,
-  DEFAULT_CANVAS_SIZE,
-  DEFAULT_COLOR,
-  DEFAULT_FPS,
+	DEFAULT_BLUR_INTENSITY,
+	DEFAULT_CANVAS_SIZE,
+	DEFAULT_COLOR,
+	DEFAULT_FPS,
 } from "@/constants/project-constants";
 import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
 import { StorageMigration } from "./base";
@@ -10,330 +10,330 @@ import { StorageMigration } from "./base";
 type ProjectRecord = Record<string, unknown>;
 
 export class V1toV2Migration extends StorageMigration {
-  from = 1;
-  to = 2;
+	from = 1;
+	to = 2;
 
-  async run(): Promise<void> {
-    const projectsAdapter = new IndexedDBAdapter<unknown>(
-      "video-editor-projects",
-      "projects",
-      1,
-    );
-    const projects = await projectsAdapter.getAll();
+	async run(): Promise<void> {
+		const projectsAdapter = new IndexedDBAdapter<unknown>(
+			"video-editor-projects",
+			"projects",
+			1,
+		);
+		const projects = await projectsAdapter.getAll();
 
-    for (const project of projects) {
-      if (!isRecord(project)) {
-        continue;
-      }
+		for (const project of projects) {
+			if (!isRecord(project)) {
+				continue;
+			}
 
-      const projectId = getProjectId({ project });
-      if (!projectId) {
-        continue;
-      }
+			const projectId = getProjectId({ project });
+			if (!projectId) {
+				continue;
+			}
 
-      if (isV2Project({ project })) {
-        continue;
-      }
+			if (isV2Project({ project })) {
+				continue;
+			}
 
-      const migratedProject = migrateProject({ project, projectId });
-      await projectsAdapter.set(projectId, migratedProject);
-    }
-  }
+			const migratedProject = migrateProject({ project, projectId });
+			await projectsAdapter.set(projectId, migratedProject);
+		}
+	}
 }
 
 function migrateProject({
-  project,
-  projectId,
+	project,
+	projectId,
 }: {
-  project: ProjectRecord;
-  projectId: string;
+	project: ProjectRecord;
+	projectId: string;
 }): ProjectRecord {
-  const createdAt = normalizeDateString({ value: project.createdAt });
-  const updatedAt = normalizeDateString({ value: project.updatedAt });
-  const metadataValue = project.metadata;
+	const createdAt = normalizeDateString({ value: project.createdAt });
+	const updatedAt = normalizeDateString({ value: project.updatedAt });
+	const metadataValue = project.metadata;
 
-  const metadata = isRecord(metadataValue)
-    ? {
-        id: getStringValue({ value: metadataValue.id, fallback: projectId }),
-        name: getStringValue({ value: metadataValue.name, fallback: "" }),
-        thumbnail: getStringValue({ value: metadataValue.thumbnail }),
-        createdAt: normalizeDateString({ value: metadataValue.createdAt }),
-        updatedAt: normalizeDateString({ value: metadataValue.updatedAt }),
-      }
-    : {
-        id: projectId,
-        name: getStringValue({ value: project.name, fallback: "" }),
-        thumbnail: getStringValue({ value: project.thumbnail }),
-        createdAt,
-        updatedAt,
-      };
+	const metadata = isRecord(metadataValue)
+		? {
+				id: getStringValue({ value: metadataValue.id, fallback: projectId }),
+				name: getStringValue({ value: metadataValue.name, fallback: "" }),
+				thumbnail: getStringValue({ value: metadataValue.thumbnail }),
+				createdAt: normalizeDateString({ value: metadataValue.createdAt }),
+				updatedAt: normalizeDateString({ value: metadataValue.updatedAt }),
+			}
+		: {
+				id: projectId,
+				name: getStringValue({ value: project.name, fallback: "" }),
+				thumbnail: getStringValue({ value: project.thumbnail }),
+				createdAt,
+				updatedAt,
+			};
 
-  const scenesValue = project.scenes;
-  const scenes = Array.isArray(scenesValue) ? scenesValue : [];
-  const legacyBookmarks = Array.isArray(project.bookmarks)
-    ? project.bookmarks
-    : null;
-  const normalizedScenes = applyLegacyBookmarks({
-    scenes,
-    legacyBookmarks,
-  });
+	const scenesValue = project.scenes;
+	const scenes = Array.isArray(scenesValue) ? scenesValue : [];
+	const legacyBookmarks = Array.isArray(project.bookmarks)
+		? project.bookmarks
+		: null;
+	const normalizedScenes = applyLegacyBookmarks({
+		scenes,
+		legacyBookmarks,
+	});
 
-  const settingsValue = project.settings;
-  const settings = isRecord(settingsValue)
-    ? {
-        fps: getNumberValue({
-          value: settingsValue.fps,
-          fallback: DEFAULT_FPS,
-        }),
-        canvasSize: getCanvasSizeValue({
-          value: settingsValue.canvasSize,
-          fallback: DEFAULT_CANVAS_SIZE,
-        }),
-        background: getBackgroundValue({
-          value: settingsValue.background,
-        }),
-      }
-    : {
-        fps: getNumberValue({ value: project.fps, fallback: DEFAULT_FPS }),
-        canvasSize: getCanvasSizeValue({
-          value: project.canvasSize,
-          fallback: DEFAULT_CANVAS_SIZE,
-        }),
-        background: getBackgroundValue({
-          value: project.background,
-          backgroundType: project.backgroundType,
-          backgroundColor: project.backgroundColor,
-          blurIntensity: project.blurIntensity,
-        }),
-      };
+	const settingsValue = project.settings;
+	const settings = isRecord(settingsValue)
+		? {
+				fps: getNumberValue({
+					value: settingsValue.fps,
+					fallback: DEFAULT_FPS,
+				}),
+				canvasSize: getCanvasSizeValue({
+					value: settingsValue.canvasSize,
+					fallback: DEFAULT_CANVAS_SIZE,
+				}),
+				background: getBackgroundValue({
+					value: settingsValue.background,
+				}),
+			}
+		: {
+				fps: getNumberValue({ value: project.fps, fallback: DEFAULT_FPS }),
+				canvasSize: getCanvasSizeValue({
+					value: project.canvasSize,
+					fallback: DEFAULT_CANVAS_SIZE,
+				}),
+				background: getBackgroundValue({
+					value: project.background,
+					backgroundType: project.backgroundType,
+					backgroundColor: project.backgroundColor,
+					blurIntensity: project.blurIntensity,
+				}),
+			};
 
-  const currentSceneId = getCurrentSceneId({
-    value: project.currentSceneId,
-    scenes: normalizedScenes,
-  });
+	const currentSceneId = getCurrentSceneId({
+		value: project.currentSceneId,
+		scenes: normalizedScenes,
+	});
 
-  return {
-    ...project,
-    metadata,
-    scenes: normalizedScenes,
-    currentSceneId,
-    settings,
-    version: 2,
-  };
+	return {
+		...project,
+		metadata,
+		scenes: normalizedScenes,
+		currentSceneId,
+		settings,
+		version: 2,
+	};
 }
 
 function getProjectId({ project }: { project: ProjectRecord }): string | null {
-  const idValue = project.id;
-  if (typeof idValue === "string" && idValue.length > 0) {
-    return idValue;
-  }
+	const idValue = project.id;
+	if (typeof idValue === "string" && idValue.length > 0) {
+		return idValue;
+	}
 
-  const metadataValue = project.metadata;
-  if (!isRecord(metadataValue)) {
-    return null;
-  }
+	const metadataValue = project.metadata;
+	if (!isRecord(metadataValue)) {
+		return null;
+	}
 
-  const metadataId = metadataValue.id;
-  if (typeof metadataId === "string" && metadataId.length > 0) {
-    return metadataId;
-  }
+	const metadataId = metadataValue.id;
+	if (typeof metadataId === "string" && metadataId.length > 0) {
+		return metadataId;
+	}
 
-  return null;
+	return null;
 }
 
 function getCurrentSceneId({
-  value,
-  scenes,
+	value,
+	scenes,
 }: {
-  value: unknown;
-  scenes: unknown[];
+	value: unknown;
+	scenes: unknown[];
 }): string {
-  if (typeof value === "string" && value.length > 0) {
-    return value;
-  }
+	if (typeof value === "string" && value.length > 0) {
+		return value;
+	}
 
-  const mainSceneId = findMainSceneId({ scenes });
-  if (mainSceneId) {
-    return mainSceneId;
-  }
+	const mainSceneId = findMainSceneId({ scenes });
+	if (mainSceneId) {
+		return mainSceneId;
+	}
 
-  return "";
+	return "";
 }
 
 function findMainSceneId({ scenes }: { scenes: unknown[] }): string | null {
-  for (const scene of scenes) {
-    if (!isRecord(scene)) {
-      continue;
-    }
+	for (const scene of scenes) {
+		if (!isRecord(scene)) {
+			continue;
+		}
 
-    if (scene.isMain === true && typeof scene.id === "string") {
-      return scene.id;
-    }
-  }
+		if (scene.isMain === true && typeof scene.id === "string") {
+			return scene.id;
+		}
+	}
 
-  for (const scene of scenes) {
-    if (!isRecord(scene)) {
-      continue;
-    }
+	for (const scene of scenes) {
+		if (!isRecord(scene)) {
+			continue;
+		}
 
-    if (typeof scene.id === "string") {
-      return scene.id;
-    }
-  }
+		if (typeof scene.id === "string") {
+			return scene.id;
+		}
+	}
 
-  return null;
+	return null;
 }
 
 function applyLegacyBookmarks({
-  scenes,
-  legacyBookmarks,
+	scenes,
+	legacyBookmarks,
 }: {
-  scenes: unknown[];
-  legacyBookmarks: unknown[] | null;
+	scenes: unknown[];
+	legacyBookmarks: unknown[] | null;
 }): unknown[] {
-  if (!legacyBookmarks || legacyBookmarks.length === 0) {
-    return scenes;
-  }
+	if (!legacyBookmarks || legacyBookmarks.length === 0) {
+		return scenes;
+	}
 
-  const mainSceneId = findMainSceneId({ scenes });
+	const mainSceneId = findMainSceneId({ scenes });
 
-  return scenes.map((scene) => {
-    if (!isRecord(scene)) {
-      return scene;
-    }
+	return scenes.map((scene) => {
+		if (!isRecord(scene)) {
+			return scene;
+		}
 
-    if (mainSceneId && scene.id !== mainSceneId) {
-      return scene;
-    }
+		if (mainSceneId && scene.id !== mainSceneId) {
+			return scene;
+		}
 
-    if (Array.isArray(scene.bookmarks) && scene.bookmarks.length > 0) {
-      return scene;
-    }
+		if (Array.isArray(scene.bookmarks) && scene.bookmarks.length > 0) {
+			return scene;
+		}
 
-    return {
-      ...scene,
-      bookmarks: legacyBookmarks,
-    };
-  });
+		return {
+			...scene,
+			bookmarks: legacyBookmarks,
+		};
+	});
 }
 
 function getBackgroundValue({
-  value,
-  backgroundType,
-  backgroundColor,
-  blurIntensity,
+	value,
+	backgroundType,
+	backgroundColor,
+	blurIntensity,
 }: {
-  value: unknown;
-  backgroundType?: unknown;
-  backgroundColor?: unknown;
-  blurIntensity?: unknown;
+	value: unknown;
+	backgroundType?: unknown;
+	backgroundColor?: unknown;
+	blurIntensity?: unknown;
 }): {
-  type: "color" | "blur";
-  color?: string;
-  blurIntensity?: number;
+	type: "color" | "blur";
+	color?: string;
+	blurIntensity?: number;
 } {
-  if (isRecord(value)) {
-    const typeValue = value.type;
-    if (typeValue === "blur") {
-      return {
-        type: "blur",
-        blurIntensity: getNumberValue({
-          value: value.blurIntensity,
-          fallback: DEFAULT_BLUR_INTENSITY,
-        }),
-      };
-    }
+	if (isRecord(value)) {
+		const typeValue = value.type;
+		if (typeValue === "blur") {
+			return {
+				type: "blur",
+				blurIntensity: getNumberValue({
+					value: value.blurIntensity,
+					fallback: DEFAULT_BLUR_INTENSITY,
+				}),
+			};
+		}
 
-    return {
-      type: "color",
-      color: getStringValue({ value: value.color, fallback: DEFAULT_COLOR }),
-    };
-  }
+		return {
+			type: "color",
+			color: getStringValue({ value: value.color, fallback: DEFAULT_COLOR }),
+		};
+	}
 
-  if (backgroundType === "blur") {
-    return {
-      type: "blur",
-      blurIntensity: getNumberValue({
-        value: blurIntensity,
-        fallback: DEFAULT_BLUR_INTENSITY,
-      }),
-    };
-  }
+	if (backgroundType === "blur") {
+		return {
+			type: "blur",
+			blurIntensity: getNumberValue({
+				value: blurIntensity,
+				fallback: DEFAULT_BLUR_INTENSITY,
+			}),
+		};
+	}
 
-  return {
-    type: "color",
-    color: getStringValue({ value: backgroundColor, fallback: DEFAULT_COLOR }),
-  };
+	return {
+		type: "color",
+		color: getStringValue({ value: backgroundColor, fallback: DEFAULT_COLOR }),
+	};
 }
 
 function getCanvasSizeValue({
-  value,
-  fallback,
+	value,
+	fallback,
 }: {
-  value: unknown;
-  fallback: { width: number; height: number };
+	value: unknown;
+	fallback: { width: number; height: number };
 }): { width: number; height: number } {
-  if (isRecord(value)) {
-    const width = getNumberValue({
-      value: value.width,
-      fallback: fallback.width,
-    });
-    const height = getNumberValue({
-      value: value.height,
-      fallback: fallback.height,
-    });
+	if (isRecord(value)) {
+		const width = getNumberValue({
+			value: value.width,
+			fallback: fallback.width,
+		});
+		const height = getNumberValue({
+			value: value.height,
+			fallback: fallback.height,
+		});
 
-    return { width, height };
-  }
+		return { width, height };
+	}
 
-  return fallback;
+	return fallback;
 }
 
 function getNumberValue({
-  value,
-  fallback,
+	value,
+	fallback,
 }: {
-  value: unknown;
-  fallback: number;
+	value: unknown;
+	fallback: number;
 }): number {
-  return typeof value === "number" ? value : fallback;
+	return typeof value === "number" ? value : fallback;
 }
 
 function getStringValue({
-  value,
-  fallback,
+	value,
+	fallback,
 }: {
-  value: unknown;
-  fallback?: string;
+	value: unknown;
+	fallback?: string;
 }): string | undefined {
-  if (typeof value === "string") {
-    return value;
-  }
+	if (typeof value === "string") {
+		return value;
+	}
 
-  return fallback;
+	return fallback;
 }
 
 function normalizeDateString({ value }: { value: unknown }): string {
-  if (value instanceof Date) {
-    return value.toISOString();
-  }
+	if (value instanceof Date) {
+		return value.toISOString();
+	}
 
-  if (typeof value === "string") {
-    return value;
-  }
+	if (typeof value === "string") {
+		return value;
+	}
 
-  return new Date().toISOString();
+	return new Date().toISOString();
 }
 
 function isV2Project({ project }: { project: ProjectRecord }): boolean {
-  const versionValue = project.version;
-  if (typeof versionValue === "number" && versionValue >= 2) {
-    return true;
-  }
+	const versionValue = project.version;
+	if (typeof versionValue === "number" && versionValue >= 2) {
+		return true;
+	}
 
-  return isRecord(project.metadata) && isRecord(project.settings);
+	return isRecord(project.metadata) && isRecord(project.settings);
 }
 
 function isRecord(value: unknown): value is ProjectRecord {
-  return typeof value === "object" && value !== null;
+	return typeof value === "object" && value !== null;
 }
diff --git a/apps/web/src/services/storage/migrations/version-manager.ts b/apps/web/src/services/storage/migrations/version-manager.ts
index 6a647473..879498ce 100644
--- a/apps/web/src/services/storage/migrations/version-manager.ts
+++ b/apps/web/src/services/storage/migrations/version-manager.ts
@@ -1,11 +1,11 @@
 import { IndexedDBAdapter } from "@/services/storage/indexeddb-adapter";
 
 type StorageVersionRecord = {
-  version: number;
-  inProgress?: {
-    from: number;
-    to: number;
-  };
+	version: number;
+	inProgress?: {
+		from: number;
+		to: number;
+	};
 };
 
 const DEFAULT_DB_NAME = "video-editor-meta";
@@ -14,60 +14,60 @@ const DEFAULT_DB_VERSION = 1;
 const STORAGE_VERSION_KEY = "storage-version";
 
 export class StorageVersionManager {
-  private adapter: IndexedDBAdapter<StorageVersionRecord>;
+	private adapter: IndexedDBAdapter<StorageVersionRecord>;
 
-  constructor({
-    dbName = DEFAULT_DB_NAME,
-    storeName = DEFAULT_STORE_NAME,
-    version = DEFAULT_DB_VERSION,
-  }: {
-    dbName?: string;
-    storeName?: string;
-    version?: number;
-  } = {}) {
-    this.adapter = new IndexedDBAdapter<StorageVersionRecord>(
-      dbName,
-      storeName,
-      version,
-    );
-  }
+	constructor({
+		dbName = DEFAULT_DB_NAME,
+		storeName = DEFAULT_STORE_NAME,
+		version = DEFAULT_DB_VERSION,
+	}: {
+		dbName?: string;
+		storeName?: string;
+		version?: number;
+	} = {}) {
+		this.adapter = new IndexedDBAdapter<StorageVersionRecord>(
+			dbName,
+			storeName,
+			version,
+		);
+	}
 
-  async getVersion(): Promise<number> {
-    const record = await this.adapter.get(STORAGE_VERSION_KEY);
-    return record?.version ?? 0;
-  }
+	async getVersion(): Promise<number> {
+		const record = await this.adapter.get(STORAGE_VERSION_KEY);
+		return record?.version ?? 0;
+	}
 
-  async getVersionRecord(): Promise<StorageVersionRecord | null> {
-    return this.adapter.get(STORAGE_VERSION_KEY);
-  }
+	async getVersionRecord(): Promise<StorageVersionRecord | null> {
+		return this.adapter.get(STORAGE_VERSION_KEY);
+	}
 
-  async setVersion({ version }: { version: number }): Promise<void> {
-    const record = await this.getVersionRecord();
-    const inProgress = record?.inProgress;
-    await this.adapter.set(STORAGE_VERSION_KEY, {
-      version,
-      ...(inProgress ? { inProgress } : {}),
-    });
-  }
+	async setVersion({ version }: { version: number }): Promise<void> {
+		const record = await this.getVersionRecord();
+		const inProgress = record?.inProgress;
+		await this.adapter.set(STORAGE_VERSION_KEY, {
+			version,
+			...(inProgress ? { inProgress } : {}),
+		});
+	}
 
-  async setInProgress({
-    from,
-    to,
-  }: {
-    from: number;
-    to: number;
-  }): Promise<void> {
-    const record = await this.getVersionRecord();
-    const version = record?.version ?? 0;
-    await this.adapter.set(STORAGE_VERSION_KEY, {
-      version,
-      inProgress: { from, to },
-    });
-  }
+	async setInProgress({
+		from,
+		to,
+	}: {
+		from: number;
+		to: number;
+	}): Promise<void> {
+		const record = await this.getVersionRecord();
+		const version = record?.version ?? 0;
+		await this.adapter.set(STORAGE_VERSION_KEY, {
+			version,
+			inProgress: { from, to },
+		});
+	}
 
-  async clearInProgress(): Promise<void> {
-    const record = await this.getVersionRecord();
-    const version = record?.version ?? 0;
-    await this.adapter.set(STORAGE_VERSION_KEY, { version });
-  }
+	async clearInProgress(): Promise<void> {
+		const record = await this.getVersionRecord();
+		const version = record?.version ?? 0;
+		await this.adapter.set(STORAGE_VERSION_KEY, { version });
+	}
 }
diff --git a/apps/web/src/services/storage/opfs-adapter.ts b/apps/web/src/services/storage/opfs-adapter.ts
index 87b5c886..879223b5 100644
--- a/apps/web/src/services/storage/opfs-adapter.ts
+++ b/apps/web/src/services/storage/opfs-adapter.ts
@@ -1,73 +1,73 @@
-import { StorageAdapter } from "./types";
+import type { StorageAdapter } from "./types";
 
 export class OPFSAdapter implements StorageAdapter<File> {
-  private directoryName: string;
+	private directoryName: string;
 
-  constructor(directoryName = "media") {
-    this.directoryName = directoryName;
-  }
+	constructor(directoryName = "media") {
+		this.directoryName = directoryName;
+	}
 
-  private async getDirectory(): Promise<FileSystemDirectoryHandle> {
-    const opfsRoot = await navigator.storage.getDirectory();
-    return await opfsRoot.getDirectoryHandle(this.directoryName, {
-      create: true,
-    });
-  }
+	private async getDirectory(): Promise<FileSystemDirectoryHandle> {
+		const opfsRoot = await navigator.storage.getDirectory();
+		return await opfsRoot.getDirectoryHandle(this.directoryName, {
+			create: true,
+		});
+	}
 
-  async get(key: string): Promise<File | null> {
-    try {
-      const directory = await this.getDirectory();
-      const fileHandle = await directory.getFileHandle(key);
-      return await fileHandle.getFile();
-    } catch (error) {
-      if ((error as Error).name === "NotFoundError") {
-        return null;
-      }
-      throw error;
-    }
-  }
+	async get(key: string): Promise<File | null> {
+		try {
+			const directory = await this.getDirectory();
+			const fileHandle = await directory.getFileHandle(key);
+			return await fileHandle.getFile();
+		} catch (error) {
+			if ((error as Error).name === "NotFoundError") {
+				return null;
+			}
+			throw error;
+		}
+	}
 
-  async set(key: string, file: File): Promise<void> {
-    const directory = await this.getDirectory();
-    const fileHandle = await directory.getFileHandle(key, { create: true });
-    const writable = await fileHandle.createWritable();
+	async set(key: string, file: File): Promise<void> {
+		const directory = await this.getDirectory();
+		const fileHandle = await directory.getFileHandle(key, { create: true });
+		const writable = await fileHandle.createWritable();
 
-    await writable.write(file);
-    await writable.close();
-  }
+		await writable.write(file);
+		await writable.close();
+	}
 
-  async remove(key: string): Promise<void> {
-    try {
-      const directory = await this.getDirectory();
-      await directory.removeEntry(key);
-    } catch (error) {
-      if ((error as Error).name !== "NotFoundError") {
-        throw error;
-      }
-    }
-  }
+	async remove(key: string): Promise<void> {
+		try {
+			const directory = await this.getDirectory();
+			await directory.removeEntry(key);
+		} catch (error) {
+			if ((error as Error).name !== "NotFoundError") {
+				throw error;
+			}
+		}
+	}
 
-  async list(): Promise<string[]> {
-    const directory = await this.getDirectory();
-    const keys: string[] = [];
+	async list(): Promise<string[]> {
+		const directory = await this.getDirectory();
+		const keys: string[] = [];
 
-    for await (const name of directory.keys()) {
-      keys.push(name);
-    }
+		for await (const name of directory.keys()) {
+			keys.push(name);
+		}
 
-    return keys;
-  }
+		return keys;
+	}
 
-  async clear(): Promise<void> {
-    const directory = await this.getDirectory();
+	async clear(): Promise<void> {
+		const directory = await this.getDirectory();
 
-    for await (const name of directory.keys()) {
-      await directory.removeEntry(name);
-    }
-  }
+		for await (const name of directory.keys()) {
+			await directory.removeEntry(name);
+		}
+	}
 
-  // Helper method to check OPFS support
-  static isSupported(): boolean {
-    return "storage" in navigator && "getDirectory" in navigator.storage;
-  }
+	// Helper method to check OPFS support
+	static isSupported(): boolean {
+		return "storage" in navigator && "getDirectory" in navigator.storage;
+	}
 }
diff --git a/apps/web/src/services/storage/storage-service.ts b/apps/web/src/services/storage/storage-service.ts
index 8a25ad0a..4604128d 100644
--- a/apps/web/src/services/storage/storage-service.ts
+++ b/apps/web/src/services/storage/storage-service.ts
@@ -1,458 +1,458 @@
-import { TProject, TProjectMetadata } from "@/types/project";
-import { MediaAsset } from "@/types/assets";
+import type { TProject, TProjectMetadata } from "@/types/project";
+import type { MediaAsset } from "@/types/assets";
 import { IndexedDBAdapter } from "./indexeddb-adapter";
 import { OPFSAdapter } from "./opfs-adapter";
 import type {
-  MediaAssetData,
-  StorageConfig,
-  SerializedProject,
-  SerializedScene,
+	MediaAssetData,
+	StorageConfig,
+	SerializedProject,
+	SerializedScene,
 } from "./types";
-import { SavedSoundsData, SavedSound, SoundEffect } from "@/types/sounds";
+import type { SavedSoundsData, SavedSound, SoundEffect } from "@/types/sounds";
 import {
-  migrations,
-  runStorageMigrations,
+	migrations,
+	runStorageMigrations,
 } from "@/services/storage/migrations";
-import { TimelineTrack } from "@/types/timeline";
+import type { TimelineTrack } from "@/types/timeline";
 
 class StorageService {
-  private projectsAdapter: IndexedDBAdapter<SerializedProject>;
-  private savedSoundsAdapter: IndexedDBAdapter<SavedSoundsData>;
-  private config: StorageConfig;
-  private migrationsPromise: Promise<void> | null = null;
+	private projectsAdapter: IndexedDBAdapter<SerializedProject>;
+	private savedSoundsAdapter: IndexedDBAdapter<SavedSoundsData>;
+	private config: StorageConfig;
+	private migrationsPromise: Promise<void> | null = null;
 
-  constructor() {
-    this.config = {
-      projectsDb: "video-editor-projects",
-      mediaDb: "video-editor-media",
-      savedSoundsDb: "video-editor-saved-sounds",
-      version: 1,
-    };
+	constructor() {
+		this.config = {
+			projectsDb: "video-editor-projects",
+			mediaDb: "video-editor-media",
+			savedSoundsDb: "video-editor-saved-sounds",
+			version: 1,
+		};
 
-    this.projectsAdapter = new IndexedDBAdapter<SerializedProject>(
-      this.config.projectsDb,
-      "projects",
-      this.config.version,
-    );
+		this.projectsAdapter = new IndexedDBAdapter<SerializedProject>(
+			this.config.projectsDb,
+			"projects",
+			this.config.version,
+		);
 
-    this.savedSoundsAdapter = new IndexedDBAdapter<SavedSoundsData>(
-      this.config.savedSoundsDb,
-      "saved-sounds",
-      this.config.version,
-    );
-  }
+		this.savedSoundsAdapter = new IndexedDBAdapter<SavedSoundsData>(
+			this.config.savedSoundsDb,
+			"saved-sounds",
+			this.config.version,
+		);
+	}
 
-  private async ensureMigrations(): Promise<void> {
-    if (this.migrationsPromise) {
-      await this.migrationsPromise;
-      return;
-    }
+	private async ensureMigrations(): Promise<void> {
+		if (this.migrationsPromise) {
+			await this.migrationsPromise;
+			return;
+		}
 
-    this.migrationsPromise = runStorageMigrations({ migrations }).then(
-      () => undefined,
-    );
-    await this.migrationsPromise;
-  }
+		this.migrationsPromise = runStorageMigrations({ migrations }).then(
+			() => undefined,
+		);
+		await this.migrationsPromise;
+	}
 
-  private getProjectMediaAdapters({ projectId }: { projectId: string }) {
-    const mediaMetadataAdapter = new IndexedDBAdapter<MediaAssetData>(
-      `${this.config.mediaDb}-${projectId}`,
-      "media-metadata",
-      this.config.version,
-    );
+	private getProjectMediaAdapters({ projectId }: { projectId: string }) {
+		const mediaMetadataAdapter = new IndexedDBAdapter<MediaAssetData>(
+			`${this.config.mediaDb}-${projectId}`,
+			"media-metadata",
+			this.config.version,
+		);
 
-    const mediaAssetsAdapter = new OPFSAdapter(`media-files-${projectId}`);
+		const mediaAssetsAdapter = new OPFSAdapter(`media-files-${projectId}`);
 
-    return { mediaMetadataAdapter, mediaAssetsAdapter };
-  }
+		return { mediaMetadataAdapter, mediaAssetsAdapter };
+	}
 
-  private stripAudioBuffers({
-    tracks,
-  }: {
-    tracks: TimelineTrack[];
-  }): TimelineTrack[] {
-    return tracks.map((track) => {
-      if (track.type !== "audio") return track;
-      return {
-        ...track,
-        elements: track.elements.map((element) => {
-          const { buffer: _buffer, ...rest } = element;
-          return rest;
-        }),
-      };
-    });
-  }
+	private stripAudioBuffers({
+		tracks,
+	}: {
+		tracks: TimelineTrack[];
+	}): TimelineTrack[] {
+		return tracks.map((track) => {
+			if (track.type !== "audio") return track;
+			return {
+				...track,
+				elements: track.elements.map((element) => {
+					const { buffer: _buffer, ...rest } = element;
+					return rest;
+				}),
+			};
+		});
+	}
 
-  async saveProject({ project }: { project: TProject }): Promise<void> {
-    const serializedScenes: SerializedScene[] = project.scenes.map((scene) => ({
-      id: scene.id,
-      name: scene.name,
-      isMain: scene.isMain,
-      tracks: this.stripAudioBuffers({ tracks: scene.tracks }),
-      bookmarks: scene.bookmarks,
-      createdAt: scene.createdAt.toISOString(),
-      updatedAt: scene.updatedAt.toISOString(),
-    }));
+	async saveProject({ project }: { project: TProject }): Promise<void> {
+		const serializedScenes: SerializedScene[] = project.scenes.map((scene) => ({
+			id: scene.id,
+			name: scene.name,
+			isMain: scene.isMain,
+			tracks: this.stripAudioBuffers({ tracks: scene.tracks }),
+			bookmarks: scene.bookmarks,
+			createdAt: scene.createdAt.toISOString(),
+			updatedAt: scene.updatedAt.toISOString(),
+		}));
 
-    const serializedProject: SerializedProject = {
-      metadata: {
-        id: project.metadata.id,
-        name: project.metadata.name,
-        thumbnail: project.metadata.thumbnail,
-        createdAt: project.metadata.createdAt.toISOString(),
-        updatedAt: project.metadata.updatedAt.toISOString(),
-      },
-      scenes: serializedScenes,
-      currentSceneId: project.currentSceneId,
-      settings: project.settings,
-      version: project.version,
-    };
+		const serializedProject: SerializedProject = {
+			metadata: {
+				id: project.metadata.id,
+				name: project.metadata.name,
+				thumbnail: project.metadata.thumbnail,
+				createdAt: project.metadata.createdAt.toISOString(),
+				updatedAt: project.metadata.updatedAt.toISOString(),
+			},
+			scenes: serializedScenes,
+			currentSceneId: project.currentSceneId,
+			settings: project.settings,
+			version: project.version,
+		};
 
-    await this.projectsAdapter.set(project.metadata.id, serializedProject);
-  }
+		await this.projectsAdapter.set(project.metadata.id, serializedProject);
+	}
 
-  async loadProject({
-    id,
-  }: {
-    id: string;
-  }): Promise<{ project: TProject } | null> {
-    await this.ensureMigrations();
-    const serializedProject = await this.projectsAdapter.get(id);
+	async loadProject({
+		id,
+	}: {
+		id: string;
+	}): Promise<{ project: TProject } | null> {
+		await this.ensureMigrations();
+		const serializedProject = await this.projectsAdapter.get(id);
 
-    if (!serializedProject) return null;
+		if (!serializedProject) return null;
 
-    const scenes =
-      serializedProject.scenes?.map((scene) => ({
-        id: scene.id,
-        name: scene.name,
-        isMain: scene.isMain,
-        tracks: (scene.tracks ?? []).map((track) =>
-          track.type === "video"
-            ? { ...track, isMain: track.isMain ?? false } // legacy: isMain was optional
-            : track,
-        ),
-        bookmarks: scene.bookmarks ?? [],
-        createdAt: new Date(scene.createdAt),
-        updatedAt: new Date(scene.updatedAt),
-      })) ?? [];
+		const scenes =
+			serializedProject.scenes?.map((scene) => ({
+				id: scene.id,
+				name: scene.name,
+				isMain: scene.isMain,
+				tracks: (scene.tracks ?? []).map((track) =>
+					track.type === "video"
+						? { ...track, isMain: track.isMain ?? false } // legacy: isMain was optional
+						: track,
+				),
+				bookmarks: scene.bookmarks ?? [],
+				createdAt: new Date(scene.createdAt),
+				updatedAt: new Date(scene.updatedAt),
+			})) ?? [];
 
-    const project: TProject = {
-      metadata: {
-        id: serializedProject.metadata.id,
-        name: serializedProject.metadata.name,
-        thumbnail: serializedProject.metadata.thumbnail,
-        createdAt: new Date(serializedProject.metadata.createdAt),
-        updatedAt: new Date(serializedProject.metadata.updatedAt),
-      },
-      scenes,
-      currentSceneId: serializedProject.currentSceneId || "",
-      settings: serializedProject.settings,
-      version: serializedProject.version,
-    };
+		const project: TProject = {
+			metadata: {
+				id: serializedProject.metadata.id,
+				name: serializedProject.metadata.name,
+				thumbnail: serializedProject.metadata.thumbnail,
+				createdAt: new Date(serializedProject.metadata.createdAt),
+				updatedAt: new Date(serializedProject.metadata.updatedAt),
+			},
+			scenes,
+			currentSceneId: serializedProject.currentSceneId || "",
+			settings: serializedProject.settings,
+			version: serializedProject.version,
+		};
 
-    return { project };
-  }
+		return { project };
+	}
 
-  async loadAllProjects(): Promise<TProject[]> {
-    const projectIds = await this.projectsAdapter.list();
-    const projects: TProject[] = [];
+	async loadAllProjects(): Promise<TProject[]> {
+		const projectIds = await this.projectsAdapter.list();
+		const projects: TProject[] = [];
 
-    for (const id of projectIds) {
-      const result = await this.loadProject({ id });
-      if (result?.project) {
-        projects.push(result.project);
-      }
-    }
+		for (const id of projectIds) {
+			const result = await this.loadProject({ id });
+			if (result?.project) {
+				projects.push(result.project);
+			}
+		}
 
-    return projects.sort(
-      (a, b) => b.metadata.updatedAt.getTime() - a.metadata.updatedAt.getTime(),
-    );
-  }
+		return projects.sort(
+			(a, b) => b.metadata.updatedAt.getTime() - a.metadata.updatedAt.getTime(),
+		);
+	}
 
-  async loadAllProjectsMetadata(): Promise<TProjectMetadata[]> {
-    await this.ensureMigrations();
-    const serializedProjects = await this.projectsAdapter.getAll();
+	async loadAllProjectsMetadata(): Promise<TProjectMetadata[]> {
+		await this.ensureMigrations();
+		const serializedProjects = await this.projectsAdapter.getAll();
 
-    const metadata = serializedProjects.map((serializedProject) => ({
-      id: serializedProject.metadata.id,
-      name: serializedProject.metadata.name,
-      thumbnail: serializedProject.metadata.thumbnail,
-      createdAt: new Date(serializedProject.metadata.createdAt),
-      updatedAt: new Date(serializedProject.metadata.updatedAt),
-    }));
+		const metadata = serializedProjects.map((serializedProject) => ({
+			id: serializedProject.metadata.id,
+			name: serializedProject.metadata.name,
+			thumbnail: serializedProject.metadata.thumbnail,
+			createdAt: new Date(serializedProject.metadata.createdAt),
+			updatedAt: new Date(serializedProject.metadata.updatedAt),
+		}));
 
-    return metadata.sort(
-      (a, b) => b.updatedAt.getTime() - a.updatedAt.getTime(),
-    );
-  }
+		return metadata.sort(
+			(a, b) => b.updatedAt.getTime() - a.updatedAt.getTime(),
+		);
+	}
 
-  async deleteProject({ id }: { id: string }): Promise<void> {
-    await this.projectsAdapter.remove(id);
-  }
+	async deleteProject({ id }: { id: string }): Promise<void> {
+		await this.projectsAdapter.remove(id);
+	}
 
-  async saveMediaAsset({
-    projectId,
-    mediaAsset,
-  }: {
-    projectId: string;
-    mediaAsset: MediaAsset;
-  }): Promise<void> {
-    const { mediaMetadataAdapter, mediaAssetsAdapter } =
-      this.getProjectMediaAdapters({ projectId });
+	async saveMediaAsset({
+		projectId,
+		mediaAsset,
+	}: {
+		projectId: string;
+		mediaAsset: MediaAsset;
+	}): Promise<void> {
+		const { mediaMetadataAdapter, mediaAssetsAdapter } =
+			this.getProjectMediaAdapters({ projectId });
 
-    await mediaAssetsAdapter.set(mediaAsset.id, mediaAsset.file);
+		await mediaAssetsAdapter.set(mediaAsset.id, mediaAsset.file);
 
-    const metadata: MediaAssetData = {
-      id: mediaAsset.id,
-      name: mediaAsset.name,
-      type: mediaAsset.type,
-      size: mediaAsset.file.size,
-      lastModified: mediaAsset.file.lastModified,
-      width: mediaAsset.width,
-      height: mediaAsset.height,
-      duration: mediaAsset.duration,
-      thumbnailUrl: mediaAsset.thumbnailUrl,
-      ephemeral: mediaAsset.ephemeral,
-    };
+		const metadata: MediaAssetData = {
+			id: mediaAsset.id,
+			name: mediaAsset.name,
+			type: mediaAsset.type,
+			size: mediaAsset.file.size,
+			lastModified: mediaAsset.file.lastModified,
+			width: mediaAsset.width,
+			height: mediaAsset.height,
+			duration: mediaAsset.duration,
+			thumbnailUrl: mediaAsset.thumbnailUrl,
+			ephemeral: mediaAsset.ephemeral,
+		};
 
-    await mediaMetadataAdapter.set(mediaAsset.id, metadata);
-  }
+		await mediaMetadataAdapter.set(mediaAsset.id, metadata);
+	}
 
-  async loadMediaAsset({
-    projectId,
-    id,
-  }: {
-    projectId: string;
-    id: string;
-  }): Promise<MediaAsset | null> {
-    const { mediaMetadataAdapter, mediaAssetsAdapter } =
-      this.getProjectMediaAdapters({ projectId });
+	async loadMediaAsset({
+		projectId,
+		id,
+	}: {
+		projectId: string;
+		id: string;
+	}): Promise<MediaAsset | null> {
+		const { mediaMetadataAdapter, mediaAssetsAdapter } =
+			this.getProjectMediaAdapters({ projectId });
 
-    const [file, metadata] = await Promise.all([
-      mediaAssetsAdapter.get(id),
-      mediaMetadataAdapter.get(id),
-    ]);
+		const [file, metadata] = await Promise.all([
+			mediaAssetsAdapter.get(id),
+			mediaMetadataAdapter.get(id),
+		]);
 
-    if (!file || !metadata) return null;
+		if (!file || !metadata) return null;
 
-    let url: string;
-    if (metadata.type === "image" && (!file.type || file.type === "")) {
-      try {
-        const text = await file.text();
-        if (text.trim().startsWith("<svg")) {
-          const svgBlob = new Blob([text], { type: "image/svg+xml" });
-          url = URL.createObjectURL(svgBlob);
-        } else {
-          url = URL.createObjectURL(file);
-        }
-      } catch {
-        url = URL.createObjectURL(file);
-      }
-    } else {
-      url = URL.createObjectURL(file);
-    }
+		let url: string;
+		if (metadata.type === "image" && (!file.type || file.type === "")) {
+			try {
+				const text = await file.text();
+				if (text.trim().startsWith("<svg")) {
+					const svgBlob = new Blob([text], { type: "image/svg+xml" });
+					url = URL.createObjectURL(svgBlob);
+				} else {
+					url = URL.createObjectURL(file);
+				}
+			} catch {
+				url = URL.createObjectURL(file);
+			}
+		} else {
+			url = URL.createObjectURL(file);
+		}
 
-    return {
-      id: metadata.id,
-      name: metadata.name,
-      type: metadata.type,
-      file,
-      url,
-      width: metadata.width,
-      height: metadata.height,
-      duration: metadata.duration,
-      thumbnailUrl: metadata.thumbnailUrl,
-      ephemeral: metadata.ephemeral,
-    };
-  }
+		return {
+			id: metadata.id,
+			name: metadata.name,
+			type: metadata.type,
+			file,
+			url,
+			width: metadata.width,
+			height: metadata.height,
+			duration: metadata.duration,
+			thumbnailUrl: metadata.thumbnailUrl,
+			ephemeral: metadata.ephemeral,
+		};
+	}
 
-  async loadAllMediaAssets({
-    projectId,
-  }: {
-    projectId: string;
-  }): Promise<MediaAsset[]> {
-    const { mediaMetadataAdapter } = this.getProjectMediaAdapters({
-      projectId,
-    });
+	async loadAllMediaAssets({
+		projectId,
+	}: {
+		projectId: string;
+	}): Promise<MediaAsset[]> {
+		const { mediaMetadataAdapter } = this.getProjectMediaAdapters({
+			projectId,
+		});
 
-    const mediaIds = await mediaMetadataAdapter.list();
-    const mediaItems: MediaAsset[] = [];
+		const mediaIds = await mediaMetadataAdapter.list();
+		const mediaItems: MediaAsset[] = [];
 
-    for (const id of mediaIds) {
-      const item = await this.loadMediaAsset({ projectId, id });
-      if (item) {
-        mediaItems.push(item);
-      }
-    }
+		for (const id of mediaIds) {
+			const item = await this.loadMediaAsset({ projectId, id });
+			if (item) {
+				mediaItems.push(item);
+			}
+		}
 
-    return mediaItems;
-  }
+		return mediaItems;
+	}
 
-  async deleteMediaAsset({
-    projectId,
-    id,
-  }: {
-    projectId: string;
-    id: string;
-  }): Promise<void> {
-    const { mediaMetadataAdapter, mediaAssetsAdapter } =
-      this.getProjectMediaAdapters({ projectId });
+	async deleteMediaAsset({
+		projectId,
+		id,
+	}: {
+		projectId: string;
+		id: string;
+	}): Promise<void> {
+		const { mediaMetadataAdapter, mediaAssetsAdapter } =
+			this.getProjectMediaAdapters({ projectId });
 
-    await Promise.all([
-      mediaAssetsAdapter.remove(id),
-      mediaMetadataAdapter.remove(id),
-    ]);
-  }
+		await Promise.all([
+			mediaAssetsAdapter.remove(id),
+			mediaMetadataAdapter.remove(id),
+		]);
+	}
 
-  async deleteProjectMedia({
-    projectId,
-  }: {
-    projectId: string;
-  }): Promise<void> {
-    const { mediaMetadataAdapter, mediaAssetsAdapter } =
-      this.getProjectMediaAdapters({ projectId });
+	async deleteProjectMedia({
+		projectId,
+	}: {
+		projectId: string;
+	}): Promise<void> {
+		const { mediaMetadataAdapter, mediaAssetsAdapter } =
+			this.getProjectMediaAdapters({ projectId });
 
-    await Promise.all([
-      mediaMetadataAdapter.clear(),
-      mediaAssetsAdapter.clear(),
-    ]);
-  }
+		await Promise.all([
+			mediaMetadataAdapter.clear(),
+			mediaAssetsAdapter.clear(),
+		]);
+	}
 
-  // Utility methods
-  async clearAllData(): Promise<void> {
-    // Clear all projects
-    await this.projectsAdapter.clear();
+	// Utility methods
+	async clearAllData(): Promise<void> {
+		// Clear all projects
+		await this.projectsAdapter.clear();
 
-    // Note: Project-specific media and timelines will be cleaned up when projects are deleted
-  }
+		// Note: Project-specific media and timelines will be cleaned up when projects are deleted
+	}
 
-  async getStorageInfo(): Promise<{
-    projects: number;
-    isOPFSSupported: boolean;
-    isIndexedDBSupported: boolean;
-  }> {
-    const projectIds = await this.projectsAdapter.list();
+	async getStorageInfo(): Promise<{
+		projects: number;
+		isOPFSSupported: boolean;
+		isIndexedDBSupported: boolean;
+	}> {
+		const projectIds = await this.projectsAdapter.list();
 
-    return {
-      projects: projectIds.length,
-      isOPFSSupported: this.isOPFSSupported(),
-      isIndexedDBSupported: this.isIndexedDBSupported(),
-    };
-  }
+		return {
+			projects: projectIds.length,
+			isOPFSSupported: this.isOPFSSupported(),
+			isIndexedDBSupported: this.isIndexedDBSupported(),
+		};
+	}
 
-  async getProjectStorageInfo({ projectId }: { projectId: string }): Promise<{
-    mediaItems: number;
-  }> {
-    const { mediaMetadataAdapter } = this.getProjectMediaAdapters({
-      projectId,
-    });
+	async getProjectStorageInfo({ projectId }: { projectId: string }): Promise<{
+		mediaItems: number;
+	}> {
+		const { mediaMetadataAdapter } = this.getProjectMediaAdapters({
+			projectId,
+		});
 
-    const mediaIds = await mediaMetadataAdapter.list();
+		const mediaIds = await mediaMetadataAdapter.list();
 
-    return {
-      mediaItems: mediaIds.length,
-    };
-  }
+		return {
+			mediaItems: mediaIds.length,
+		};
+	}
 
-  async loadSavedSounds(): Promise<SavedSoundsData> {
-    try {
-      const savedSoundsData = await this.savedSoundsAdapter.get("user-sounds");
-      return (
-        savedSoundsData || {
-          sounds: [],
-          lastModified: new Date().toISOString(),
-        }
-      );
-    } catch (error) {
-      console.error("Failed to load saved sounds:", error);
-      return { sounds: [], lastModified: new Date().toISOString() };
-    }
-  }
+	async loadSavedSounds(): Promise<SavedSoundsData> {
+		try {
+			const savedSoundsData = await this.savedSoundsAdapter.get("user-sounds");
+			return (
+				savedSoundsData || {
+					sounds: [],
+					lastModified: new Date().toISOString(),
+				}
+			);
+		} catch (error) {
+			console.error("Failed to load saved sounds:", error);
+			return { sounds: [], lastModified: new Date().toISOString() };
+		}
+	}
 
-  async saveSoundEffect({
-    soundEffect,
-  }: {
-    soundEffect: SoundEffect;
-  }): Promise<void> {
-    try {
-      const currentData = await this.loadSavedSounds();
+	async saveSoundEffect({
+		soundEffect,
+	}: {
+		soundEffect: SoundEffect;
+	}): Promise<void> {
+		try {
+			const currentData = await this.loadSavedSounds();
 
-      // Check if sound is already saved
-      if (currentData.sounds.some((sound) => sound.id === soundEffect.id)) {
-        return; // Already saved
-      }
+			// Check if sound is already saved
+			if (currentData.sounds.some((sound) => sound.id === soundEffect.id)) {
+				return; // Already saved
+			}
 
-      const savedSound: SavedSound = {
-        id: soundEffect.id,
-        name: soundEffect.name,
-        username: soundEffect.username,
-        previewUrl: soundEffect.previewUrl,
-        downloadUrl: soundEffect.downloadUrl,
-        duration: soundEffect.duration,
-        tags: soundEffect.tags,
-        license: soundEffect.license,
-        savedAt: new Date().toISOString(),
-      };
+			const savedSound: SavedSound = {
+				id: soundEffect.id,
+				name: soundEffect.name,
+				username: soundEffect.username,
+				previewUrl: soundEffect.previewUrl,
+				downloadUrl: soundEffect.downloadUrl,
+				duration: soundEffect.duration,
+				tags: soundEffect.tags,
+				license: soundEffect.license,
+				savedAt: new Date().toISOString(),
+			};
 
-      const updatedData: SavedSoundsData = {
-        sounds: [...currentData.sounds, savedSound],
-        lastModified: new Date().toISOString(),
-      };
+			const updatedData: SavedSoundsData = {
+				sounds: [...currentData.sounds, savedSound],
+				lastModified: new Date().toISOString(),
+			};
 
-      await this.savedSoundsAdapter.set("user-sounds", updatedData);
-    } catch (error) {
-      console.error("Failed to save sound effect:", error);
-      throw error;
-    }
-  }
+			await this.savedSoundsAdapter.set("user-sounds", updatedData);
+		} catch (error) {
+			console.error("Failed to save sound effect:", error);
+			throw error;
+		}
+	}
 
-  async removeSavedSound({ soundId }: { soundId: number }): Promise<void> {
-    try {
-      const currentData = await this.loadSavedSounds();
+	async removeSavedSound({ soundId }: { soundId: number }): Promise<void> {
+		try {
+			const currentData = await this.loadSavedSounds();
 
-      const updatedData: SavedSoundsData = {
-        sounds: currentData.sounds.filter((sound) => sound.id !== soundId),
-        lastModified: new Date().toISOString(),
-      };
+			const updatedData: SavedSoundsData = {
+				sounds: currentData.sounds.filter((sound) => sound.id !== soundId),
+				lastModified: new Date().toISOString(),
+			};
 
-      await this.savedSoundsAdapter.set("user-sounds", updatedData);
-    } catch (error) {
-      console.error("Failed to remove saved sound:", error);
-      throw error;
-    }
-  }
+			await this.savedSoundsAdapter.set("user-sounds", updatedData);
+		} catch (error) {
+			console.error("Failed to remove saved sound:", error);
+			throw error;
+		}
+	}
 
-  async isSoundSaved({ soundId }: { soundId: number }): Promise<boolean> {
-    try {
-      const currentData = await this.loadSavedSounds();
-      return currentData.sounds.some((sound) => sound.id === soundId);
-    } catch (error) {
-      console.error("Failed to check if sound is saved:", error);
-      return false;
-    }
-  }
+	async isSoundSaved({ soundId }: { soundId: number }): Promise<boolean> {
+		try {
+			const currentData = await this.loadSavedSounds();
+			return currentData.sounds.some((sound) => sound.id === soundId);
+		} catch (error) {
+			console.error("Failed to check if sound is saved:", error);
+			return false;
+		}
+	}
 
-  async clearSavedSounds(): Promise<void> {
-    try {
-      await this.savedSoundsAdapter.remove("user-sounds");
-    } catch (error) {
-      console.error("Failed to clear saved sounds:", error);
-      throw error;
-    }
-  }
+	async clearSavedSounds(): Promise<void> {
+		try {
+			await this.savedSoundsAdapter.remove("user-sounds");
+		} catch (error) {
+			console.error("Failed to clear saved sounds:", error);
+			throw error;
+		}
+	}
 
-  // Check browser support
-  isOPFSSupported(): boolean {
-    return OPFSAdapter.isSupported();
-  }
+	// Check browser support
+	isOPFSSupported(): boolean {
+		return OPFSAdapter.isSupported();
+	}
 
-  isIndexedDBSupported(): boolean {
-    return "indexedDB" in window;
-  }
+	isIndexedDBSupported(): boolean {
+		return "indexedDB" in window;
+	}
 
-  isFullySupported(): boolean {
-    return this.isIndexedDBSupported() && this.isOPFSSupported();
-  }
+	isFullySupported(): boolean {
+		return this.isIndexedDBSupported() && this.isOPFSSupported();
+	}
 }
 
 // Export singleton instance
diff --git a/apps/web/src/services/storage/types.ts b/apps/web/src/services/storage/types.ts
index 3e492955..1c349d32 100644
--- a/apps/web/src/services/storage/types.ts
+++ b/apps/web/src/services/storage/types.ts
@@ -1,61 +1,61 @@
-import { MediaType } from "@/types/assets";
-import { TProject, TProjectMetadata } from "@/types/project";
-import { TScene } from "@/types/timeline";
+import type { MediaType } from "@/types/assets";
+import type { TProject, TProjectMetadata } from "@/types/project";
+import type { TScene } from "@/types/timeline";
 
 export interface StorageAdapter<T> {
-  get(key: string): Promise<T | null>;
-  set(key: string, value: T): Promise<void>;
-  remove(key: string): Promise<void>;
-  list(): Promise<string[]>;
-  clear(): Promise<void>;
+	get(key: string): Promise<T | null>;
+	set(key: string, value: T): Promise<void>;
+	remove(key: string): Promise<void>;
+	list(): Promise<string[]>;
+	clear(): Promise<void>;
 }
 
 export interface MediaAssetData {
-  id: string;
-  name: string;
-  type: MediaType;
-  size: number;
-  lastModified: number;
-  width?: number;
-  height?: number;
-  duration?: number;
-  fps?: number;
-  ephemeral?: boolean;
-  thumbnailUrl?: string;
-  sourceStickerIconName?: string;
+	id: string;
+	name: string;
+	type: MediaType;
+	size: number;
+	lastModified: number;
+	width?: number;
+	height?: number;
+	duration?: number;
+	fps?: number;
+	ephemeral?: boolean;
+	thumbnailUrl?: string;
+	sourceStickerIconName?: string;
 }
 
 export type SerializedScene = Omit<TScene, "createdAt" | "updatedAt"> & {
-  createdAt: string;
-  updatedAt: string;
+	createdAt: string;
+	updatedAt: string;
 };
 
 export type SerializedProjectMetadata = Omit<
-  TProjectMetadata,
-  "createdAt" | "updatedAt"
+	TProjectMetadata,
+	"createdAt" | "updatedAt"
 > & {
-  createdAt: string;
-  updatedAt: string;
+	createdAt: string;
+	updatedAt: string;
 };
 
 export type SerializedProject = Omit<TProject, "metadata" | "scenes"> & {
-  metadata: SerializedProjectMetadata;
-  scenes: SerializedScene[];
+	metadata: SerializedProjectMetadata;
+	scenes: SerializedScene[];
 };
 
 export interface StorageConfig {
-  projectsDb: string;
-  mediaDb: string;
-  savedSoundsDb: string;
-  version: number;
+	projectsDb: string;
+	mediaDb: string;
+	savedSoundsDb: string;
+	version: number;
 }
 
 // TypeScript type augmentation to add async iterator methods to FileSystemDirectoryHandle
 // These methods are part of the File System Access API spec but may not be in all type definitions
 declare global {
-  interface FileSystemDirectoryHandle {
-    keys(): AsyncIterableIterator<string>;
-    values(): AsyncIterableIterator<FileSystemHandle>;
-    entries(): AsyncIterableIterator<[string, FileSystemHandle]>;
-  }
+	interface FileSystemDirectoryHandle {
+		keys(): AsyncIterableIterator<string>;
+		values(): AsyncIterableIterator<FileSystemHandle>;
+		entries(): AsyncIterableIterator<[string, FileSystemHandle]>;
+	}
 }
diff --git a/apps/web/src/services/transcription/index.ts b/apps/web/src/services/transcription/index.ts
index a2ac8ce3..37c650da 100644
--- a/apps/web/src/services/transcription/index.ts
+++ b/apps/web/src/services/transcription/index.ts
@@ -1,185 +1,186 @@
 import type {
-  TranscriptionResult,
-  TranscriptionProgress,
-  TranscriptionModelId,
+	TranscriptionResult,
+	TranscriptionProgress,
+	TranscriptionModelId,
 } from "@/types/transcription";
 import {
-  DEFAULT_TRANSCRIPTION_MODEL,
-  TRANSCRIPTION_MODELS,
+	DEFAULT_TRANSCRIPTION_MODEL,
+	TRANSCRIPTION_MODELS,
 } from "@/constants/transcription-constants";
 import type { WorkerMessage, WorkerResponse } from "./worker";
+import type { LanguageCode } from "@/types/language";
 
 type ProgressCallback = (progress: TranscriptionProgress) => void;
 
 class TranscriptionService {
-  private worker: Worker | null = null;
-  private currentModelId: TranscriptionModelId | null = null;
-  private isInitialized = false;
-  private isInitializing = false;
+	private worker: Worker | null = null;
+	private currentModelId: TranscriptionModelId | null = null;
+	private isInitialized = false;
+	private isInitializing = false;
 
-  async transcribe({
-    audioData,
-    language = "auto",
-    modelId = DEFAULT_TRANSCRIPTION_MODEL,
-    onProgress,
-  }: {
-    audioData: Float32Array;
-    language?: string;
-    modelId?: TranscriptionModelId;
-    onProgress?: ProgressCallback;
-  }): Promise<TranscriptionResult> {
-    await this.ensureWorker({ modelId, onProgress });
+	async transcribe({
+		audioData,
+		language,
+		modelId = DEFAULT_TRANSCRIPTION_MODEL,
+		onProgress,
+	}: {
+		audioData: Float32Array;
+		language?: LanguageCode;
+		modelId?: TranscriptionModelId;
+		onProgress?: ProgressCallback;
+	}): Promise<TranscriptionResult> {
+		await this.ensureWorker({ modelId, onProgress });
 
-    return new Promise((resolve, reject) => {
-      if (!this.worker) {
-        reject(new Error("Worker not initialized"));
-        return;
-      }
+		return new Promise((resolve, reject) => {
+			if (!this.worker) {
+				reject(new Error("Worker not initialized"));
+				return;
+			}
 
-      const handleMessage = (event: MessageEvent<WorkerResponse>) => {
-        const response = event.data;
+			const handleMessage = (event: MessageEvent<WorkerResponse>) => {
+				const response = event.data;
 
-        switch (response.type) {
-          case "transcribe-progress":
-            onProgress?.({
-              status: "transcribing",
-              progress: response.progress,
-              message: "Transcribing audio...",
-            });
-            break;
+				switch (response.type) {
+					case "transcribe-progress":
+						onProgress?.({
+							status: "transcribing",
+							progress: response.progress,
+							message: "Transcribing audio...",
+						});
+						break;
 
-          case "transcribe-complete":
-            this.worker?.removeEventListener("message", handleMessage);
-            resolve({
-              text: response.text,
-              segments: response.segments,
-              language,
-            });
-            break;
+					case "transcribe-complete":
+						this.worker?.removeEventListener("message", handleMessage);
+						resolve({
+							text: response.text,
+							segments: response.segments,
+							language,
+						});
+						break;
 
-          case "transcribe-error":
-            this.worker?.removeEventListener("message", handleMessage);
-            reject(new Error(response.error));
-            break;
+					case "transcribe-error":
+						this.worker?.removeEventListener("message", handleMessage);
+						reject(new Error(response.error));
+						break;
 
-          case "cancelled":
-            this.worker?.removeEventListener("message", handleMessage);
-            reject(new Error("Transcription cancelled"));
-            break;
-        }
-      };
+					case "cancelled":
+						this.worker?.removeEventListener("message", handleMessage);
+						reject(new Error("Transcription cancelled"));
+						break;
+				}
+			};
 
-      this.worker.addEventListener("message", handleMessage);
+			this.worker.addEventListener("message", handleMessage);
 
-      this.worker.postMessage({
-        type: "transcribe",
-        audio: audioData,
-        language,
-      } satisfies WorkerMessage);
-    });
-  }
+			this.worker.postMessage({
+				type: "transcribe",
+				audio: audioData,
+				language,
+			} satisfies WorkerMessage);
+		});
+	}
 
-  cancel() {
-    this.worker?.postMessage({ type: "cancel" } satisfies WorkerMessage);
-  }
+	cancel() {
+		this.worker?.postMessage({ type: "cancel" } satisfies WorkerMessage);
+	}
 
-  private async ensureWorker({
-    modelId,
-    onProgress,
-  }: {
-    modelId: TranscriptionModelId;
-    onProgress?: ProgressCallback;
-  }): Promise<void> {
-    const needsNewModel = this.currentModelId !== modelId;
+	private async ensureWorker({
+		modelId,
+		onProgress,
+	}: {
+		modelId: TranscriptionModelId;
+		onProgress?: ProgressCallback;
+	}): Promise<void> {
+		const needsNewModel = this.currentModelId !== modelId;
 
-    if (this.worker && this.isInitialized && !needsNewModel) {
-      return;
-    }
+		if (this.worker && this.isInitialized && !needsNewModel) {
+			return;
+		}
 
-    if (this.isInitializing && !needsNewModel) {
-      await this.waitForInit();
-      return;
-    }
+		if (this.isInitializing && !needsNewModel) {
+			await this.waitForInit();
+			return;
+		}
 
-    this.terminate();
-    this.isInitializing = true;
-    this.isInitialized = false;
+		this.terminate();
+		this.isInitializing = true;
+		this.isInitialized = false;
 
-    const model = TRANSCRIPTION_MODELS.find((m) => m.id === modelId);
-    if (!model) {
-      throw new Error(`Unknown model: ${modelId}`);
-    }
+		const model = TRANSCRIPTION_MODELS.find((m) => m.id === modelId);
+		if (!model) {
+			throw new Error(`Unknown model: ${modelId}`);
+		}
 
-    this.worker = new Worker(new URL("./worker.ts", import.meta.url), {
-      type: "module",
-    });
+		this.worker = new Worker(new URL("./worker.ts", import.meta.url), {
+			type: "module",
+		});
 
-    return new Promise((resolve, reject) => {
-      if (!this.worker) {
-        reject(new Error("Failed to create worker"));
-        return;
-      }
+		return new Promise((resolve, reject) => {
+			if (!this.worker) {
+				reject(new Error("Failed to create worker"));
+				return;
+			}
 
-      const handleMessage = (event: MessageEvent<WorkerResponse>) => {
-        const response = event.data;
+			const handleMessage = (event: MessageEvent<WorkerResponse>) => {
+				const response = event.data;
 
-        switch (response.type) {
-          case "init-progress":
-            onProgress?.({
-              status: "loading-model",
-              progress: response.progress,
-              message: `Loading ${model.name} model...`,
-            });
-            break;
+				switch (response.type) {
+					case "init-progress":
+						onProgress?.({
+							status: "loading-model",
+							progress: response.progress,
+							message: `Loading ${model.name} model...`,
+						});
+						break;
 
-          case "init-complete":
-            this.worker?.removeEventListener("message", handleMessage);
-            this.isInitialized = true;
-            this.isInitializing = false;
-            this.currentModelId = modelId;
-            resolve();
-            break;
+					case "init-complete":
+						this.worker?.removeEventListener("message", handleMessage);
+						this.isInitialized = true;
+						this.isInitializing = false;
+						this.currentModelId = modelId;
+						resolve();
+						break;
 
-          case "init-error":
-            this.worker?.removeEventListener("message", handleMessage);
-            this.isInitializing = false;
-            this.terminate();
-            reject(new Error(response.error));
-            break;
-        }
-      };
+					case "init-error":
+						this.worker?.removeEventListener("message", handleMessage);
+						this.isInitializing = false;
+						this.terminate();
+						reject(new Error(response.error));
+						break;
+				}
+			};
 
-      this.worker.addEventListener("message", handleMessage);
+			this.worker.addEventListener("message", handleMessage);
 
-      this.worker.postMessage({
-        type: "init",
-        modelId: model.huggingFaceId,
-      } satisfies WorkerMessage);
-    });
-  }
+			this.worker.postMessage({
+				type: "init",
+				modelId: model.huggingFaceId,
+			} satisfies WorkerMessage);
+		});
+	}
 
-  private waitForInit(): Promise<void> {
-    return new Promise((resolve) => {
-      const checkInit = () => {
-        if (this.isInitialized) {
-          resolve();
-        } else if (!this.isInitializing) {
-          resolve();
-        } else {
-          setTimeout(checkInit, 100);
-        }
-      };
-      checkInit();
-    });
-  }
+	private waitForInit(): Promise<void> {
+		return new Promise((resolve) => {
+			const checkInit = () => {
+				if (this.isInitialized) {
+					resolve();
+				} else if (!this.isInitializing) {
+					resolve();
+				} else {
+					setTimeout(checkInit, 100);
+				}
+			};
+			checkInit();
+		});
+	}
 
-  terminate() {
-    this.worker?.terminate();
-    this.worker = null;
-    this.isInitialized = false;
-    this.isInitializing = false;
-    this.currentModelId = null;
-  }
+	terminate() {
+		this.worker?.terminate();
+		this.worker = null;
+		this.isInitialized = false;
+		this.isInitializing = false;
+		this.currentModelId = null;
+	}
 }
 
 export const transcriptionService = new TranscriptionService();
diff --git a/apps/web/src/services/transcription/worker.ts b/apps/web/src/services/transcription/worker.ts
index 332e7e41..2aa9673c 100644
--- a/apps/web/src/services/transcription/worker.ts
+++ b/apps/web/src/services/transcription/worker.ts
@@ -1,31 +1,31 @@
 import {
-  pipeline,
-  type AutomaticSpeechRecognitionPipeline,
-  type AutomaticSpeechRecognitionOutput,
+	pipeline,
+	type AutomaticSpeechRecognitionPipeline,
+	type AutomaticSpeechRecognitionOutput,
 } from "@huggingface/transformers";
 import type { TranscriptionSegment } from "@/types/transcription";
 import {
-  DEFAULT_CHUNK_LENGTH_SECONDS,
-  DEFAULT_STRIDE_SECONDS,
+	DEFAULT_CHUNK_LENGTH_SECONDS,
+	DEFAULT_STRIDE_SECONDS,
 } from "@/constants/transcription-constants";
 
 export type WorkerMessage =
-  | { type: "init"; modelId: string }
-  | { type: "transcribe"; audio: Float32Array; language: string }
-  | { type: "cancel" };
+	| { type: "init"; modelId: string }
+	| { type: "transcribe"; audio: Float32Array; language: string }
+	| { type: "cancel" };
 
 export type WorkerResponse =
-  | { type: "init-progress"; progress: number }
-  | { type: "init-complete" }
-  | { type: "init-error"; error: string }
-  | { type: "transcribe-progress"; progress: number }
-  | {
-      type: "transcribe-complete";
-      text: string;
-      segments: TranscriptionSegment[];
-    }
-  | { type: "transcribe-error"; error: string }
-  | { type: "cancelled" };
+	| { type: "init-progress"; progress: number }
+	| { type: "init-complete" }
+	| { type: "init-error"; error: string }
+	| { type: "transcribe-progress"; progress: number }
+	| {
+			type: "transcribe-complete";
+			text: string;
+			segments: TranscriptionSegment[];
+	  }
+	| { type: "transcribe-error"; error: string }
+	| { type: "cancelled" };
 
 let transcriber: AutomaticSpeechRecognitionPipeline | null = null;
 let cancelled = false;
@@ -33,144 +33,144 @@ let lastReportedProgress = -1;
 const fileBytes = new Map<string, { loaded: number; total: number }>();
 
 self.onmessage = async (event: MessageEvent<WorkerMessage>) => {
-  const message = event.data;
+	const message = event.data;
 
-  switch (message.type) {
-    case "init":
-      await handleInit({ modelId: message.modelId });
-      break;
-    case "transcribe":
-      await handleTranscribe({
-        audio: message.audio,
-        language: message.language,
-      });
-      break;
-    case "cancel":
-      cancelled = true;
-      self.postMessage({ type: "cancelled" } satisfies WorkerResponse);
-      break;
-  }
+	switch (message.type) {
+		case "init":
+			await handleInit({ modelId: message.modelId });
+			break;
+		case "transcribe":
+			await handleTranscribe({
+				audio: message.audio,
+				language: message.language,
+			});
+			break;
+		case "cancel":
+			cancelled = true;
+			self.postMessage({ type: "cancelled" } satisfies WorkerResponse);
+			break;
+	}
 };
 
 async function handleInit({ modelId }: { modelId: string }) {
-  lastReportedProgress = -1;
-  fileBytes.clear();
+	lastReportedProgress = -1;
+	fileBytes.clear();
 
-  try {
-    transcriber = (await pipeline("automatic-speech-recognition", modelId, {
-      dtype: "q4",
-      device: "auto",
-      progress_callback: (progressInfo: {
-        status?: string;
-        file?: string;
-        loaded?: number;
-        total?: number;
-      }) => {
-        const file = progressInfo.file;
-        if (!file) return;
+	try {
+		transcriber = (await pipeline("automatic-speech-recognition", modelId, {
+			dtype: "q4",
+			device: "auto",
+			progress_callback: (progressInfo: {
+				status?: string;
+				file?: string;
+				loaded?: number;
+				total?: number;
+			}) => {
+				const file = progressInfo.file;
+				if (!file) return;
 
-        const loaded = progressInfo.loaded ?? 0;
-        const total = progressInfo.total ?? 0;
+				const loaded = progressInfo.loaded ?? 0;
+				const total = progressInfo.total ?? 0;
 
-        if (progressInfo.status === "progress" && total > 0) {
-          fileBytes.set(file, { loaded, total });
-        } else if (progressInfo.status === "done") {
-          const existing = fileBytes.get(file);
-          if (existing) {
-            fileBytes.set(file, {
-              loaded: existing.total,
-              total: existing.total,
-            });
-          }
-        }
+				if (progressInfo.status === "progress" && total > 0) {
+					fileBytes.set(file, { loaded, total });
+				} else if (progressInfo.status === "done") {
+					const existing = fileBytes.get(file);
+					if (existing) {
+						fileBytes.set(file, {
+							loaded: existing.total,
+							total: existing.total,
+						});
+					}
+				}
 
-        // sum all bytes
-        let totalLoaded = 0;
-        let totalSize = 0;
-        for (const { loaded, total } of fileBytes.values()) {
-          totalLoaded += loaded;
-          totalSize += total;
-        }
+				// sum all bytes
+				let totalLoaded = 0;
+				let totalSize = 0;
+				for (const { loaded, total } of fileBytes.values()) {
+					totalLoaded += loaded;
+					totalSize += total;
+				}
 
-        if (totalSize === 0) return;
+				if (totalSize === 0) return;
 
-        const overallProgress = (totalLoaded / totalSize) * 100;
-        const roundedProgress = Math.floor(overallProgress);
+				const overallProgress = (totalLoaded / totalSize) * 100;
+				const roundedProgress = Math.floor(overallProgress);
 
-        if (roundedProgress !== lastReportedProgress) {
-          lastReportedProgress = roundedProgress;
-          self.postMessage({
-            type: "init-progress",
-            progress: roundedProgress,
-          } satisfies WorkerResponse);
-        }
-      },
-    })) as unknown as AutomaticSpeechRecognitionPipeline;
+				if (roundedProgress !== lastReportedProgress) {
+					lastReportedProgress = roundedProgress;
+					self.postMessage({
+						type: "init-progress",
+						progress: roundedProgress,
+					} satisfies WorkerResponse);
+				}
+			},
+		})) as unknown as AutomaticSpeechRecognitionPipeline;
 
-    self.postMessage({ type: "init-complete" } satisfies WorkerResponse);
-  } catch (error) {
-    self.postMessage({
-      type: "init-error",
-      error: error instanceof Error ? error.message : "Failed to load model",
-    } satisfies WorkerResponse);
-  }
+		self.postMessage({ type: "init-complete" } satisfies WorkerResponse);
+	} catch (error) {
+		self.postMessage({
+			type: "init-error",
+			error: error instanceof Error ? error.message : "Failed to load model",
+		} satisfies WorkerResponse);
+	}
 }
 
 async function handleTranscribe({
-  audio,
-  language,
+	audio,
+	language,
 }: {
-  audio: Float32Array;
-  language: string;
+	audio: Float32Array;
+	language: string;
 }) {
-  if (!transcriber) {
-    self.postMessage({
-      type: "transcribe-error",
-      error: "Model not initialized",
-    } satisfies WorkerResponse);
-    return;
-  }
+	if (!transcriber) {
+		self.postMessage({
+			type: "transcribe-error",
+			error: "Model not initialized",
+		} satisfies WorkerResponse);
+		return;
+	}
 
-  cancelled = false;
+	cancelled = false;
 
-  try {
-    const rawResult = await transcriber(audio, {
-      chunk_length_s: DEFAULT_CHUNK_LENGTH_SECONDS,
-      stride_length_s: DEFAULT_STRIDE_SECONDS,
-      language: language === "auto" ? undefined : language,
-      return_timestamps: true,
-    });
+	try {
+		const rawResult = await transcriber(audio, {
+			chunk_length_s: DEFAULT_CHUNK_LENGTH_SECONDS,
+			stride_length_s: DEFAULT_STRIDE_SECONDS,
+			language: language === "auto" ? undefined : language,
+			return_timestamps: true,
+		});
 
-    if (cancelled) return;
+		if (cancelled) return;
 
-    const result: AutomaticSpeechRecognitionOutput = Array.isArray(rawResult)
-      ? rawResult[0]
-      : rawResult;
+		const result: AutomaticSpeechRecognitionOutput = Array.isArray(rawResult)
+			? rawResult[0]
+			: rawResult;
 
-    const segments: TranscriptionSegment[] = [];
+		const segments: TranscriptionSegment[] = [];
 
-    if (result.chunks) {
-      for (const chunk of result.chunks) {
-        if (chunk.timestamp && chunk.timestamp.length >= 2) {
-          segments.push({
-            text: chunk.text,
-            start: chunk.timestamp[0] ?? 0,
-            end: chunk.timestamp[1] ?? chunk.timestamp[0] ?? 0,
-          });
-        }
-      }
-    }
+		if (result.chunks) {
+			for (const chunk of result.chunks) {
+				if (chunk.timestamp && chunk.timestamp.length >= 2) {
+					segments.push({
+						text: chunk.text,
+						start: chunk.timestamp[0] ?? 0,
+						end: chunk.timestamp[1] ?? chunk.timestamp[0] ?? 0,
+					});
+				}
+			}
+		}
 
-    self.postMessage({
-      type: "transcribe-complete",
-      text: result.text,
-      segments,
-    } satisfies WorkerResponse);
-  } catch (error) {
-    if (cancelled) return;
-    self.postMessage({
-      type: "transcribe-error",
-      error: error instanceof Error ? error.message : "Transcription failed",
-    } satisfies WorkerResponse);
-  }
+		self.postMessage({
+			type: "transcribe-complete",
+			text: result.text,
+			segments,
+		} satisfies WorkerResponse);
+	} catch (error) {
+		if (cancelled) return;
+		self.postMessage({
+			type: "transcribe-error",
+			error: error instanceof Error ? error.message : "Transcription failed",
+		} satisfies WorkerResponse);
+	}
 }
diff --git a/apps/web/src/stores/assets-panel-store.ts b/apps/web/src/stores/assets-panel-store.ts
index 1c451488..965d3590 100644
--- a/apps/web/src/stores/assets-panel-store.ts
+++ b/apps/web/src/stores/assets-panel-store.ts
@@ -1,97 +1,97 @@
 import {
-  CaptionsIcon,
-  ArrowLeftRightIcon,
-  SparklesIcon,
-  StickerIcon,
-  MusicIcon,
-  VideoIcon,
-  BlendIcon,
-  SlidersHorizontalIcon,
-  LucideIcon,
-  TypeIcon,
-  SettingsIcon,
+	CaptionsIcon,
+	ArrowLeftRightIcon,
+	SparklesIcon,
+	StickerIcon,
+	MusicIcon,
+	VideoIcon,
+	BlendIcon,
+	SlidersHorizontalIcon,
+	type LucideIcon,
+	TypeIcon,
+	SettingsIcon,
 } from "lucide-react";
 import { create } from "zustand";
 
 export const TAB_KEYS = [
-  "media",
-  "sounds",
-  "text",
-  "stickers",
-  "effects",
-  "transitions",
-  "captions",
-  "filters",
-  "adjustment",
-  "settings",
+	"media",
+	"sounds",
+	"text",
+	"stickers",
+	"effects",
+	"transitions",
+	"captions",
+	"filters",
+	"adjustment",
+	"settings",
 ] as const;
 
 export type Tab = (typeof TAB_KEYS)[number];
 
 export const tabs = {
-  media: {
-    icon: VideoIcon,
-    label: "Media",
-  },
-  sounds: {
-    icon: MusicIcon,
-    label: "Sounds",
-  },
-  text: {
-    icon: TypeIcon,
-    label: "Text",
-  },
-  stickers: {
-    icon: StickerIcon,
-    label: "Stickers",
-  },
-  effects: {
-    icon: SparklesIcon,
-    label: "Effects",
-  },
-  transitions: {
-    icon: ArrowLeftRightIcon,
-    label: "Transitions",
-  },
-  captions: {
-    icon: CaptionsIcon,
-    label: "Captions",
-  },
-  filters: {
-    icon: BlendIcon,
-    label: "Filters",
-  },
-  adjustment: {
-    icon: SlidersHorizontalIcon,
-    label: "Adjustment",
-  },
-  settings: {
-    icon: SettingsIcon,
-    label: "Settings",
-  },
+	media: {
+		icon: VideoIcon,
+		label: "Media",
+	},
+	sounds: {
+		icon: MusicIcon,
+		label: "Sounds",
+	},
+	text: {
+		icon: TypeIcon,
+		label: "Text",
+	},
+	stickers: {
+		icon: StickerIcon,
+		label: "Stickers",
+	},
+	effects: {
+		icon: SparklesIcon,
+		label: "Effects",
+	},
+	transitions: {
+		icon: ArrowLeftRightIcon,
+		label: "Transitions",
+	},
+	captions: {
+		icon: CaptionsIcon,
+		label: "Captions",
+	},
+	filters: {
+		icon: BlendIcon,
+		label: "Filters",
+	},
+	adjustment: {
+		icon: SlidersHorizontalIcon,
+		label: "Adjustment",
+	},
+	settings: {
+		icon: SettingsIcon,
+		label: "Settings",
+	},
 } satisfies Record<Tab, { icon: LucideIcon; label: string }>;
 
 type MediaViewMode = "grid" | "list";
 
 interface AssetsPanelStore {
-  activeTab: Tab;
-  setActiveTab: (tab: Tab) => void;
-  highlightMediaId: string | null;
-  requestRevealMedia: (mediaId: string) => void;
-  clearHighlight: () => void;
+	activeTab: Tab;
+	setActiveTab: (tab: Tab) => void;
+	highlightMediaId: string | null;
+	requestRevealMedia: (mediaId: string) => void;
+	clearHighlight: () => void;
 
-  /* Media */
-  mediaViewMode: MediaViewMode;
-  setMediaViewMode: (mode: MediaViewMode) => void;
+	/* Media */
+	mediaViewMode: MediaViewMode;
+	setMediaViewMode: (mode: MediaViewMode) => void;
 }
 
 export const useAssetsPanelStore = create<AssetsPanelStore>((set) => ({
-  activeTab: "media",
-  setActiveTab: (tab) => set({ activeTab: tab }),
-  highlightMediaId: null,
-  requestRevealMedia: (mediaId) =>
-    set({ activeTab: "media", highlightMediaId: mediaId }),
-  clearHighlight: () => set({ highlightMediaId: null }),
-  mediaViewMode: "grid",
-  setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
+	activeTab: "media",
+	setActiveTab: (tab) => set({ activeTab: tab }),
+	highlightMediaId: null,
+	requestRevealMedia: (mediaId) =>
+		set({ activeTab: "media", highlightMediaId: mediaId }),
+	clearHighlight: () => set({ highlightMediaId: null }),
+	mediaViewMode: "grid",
+	setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
 }));
diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts
index 99844c79..5c4856d3 100644
--- a/apps/web/src/stores/editor-store.ts
+++ b/apps/web/src/stores/editor-store.ts
@@ -2,69 +2,69 @@ import { create } from "zustand";
 import { persist } from "zustand/middleware";
 import type { TPlatformLayout } from "@/types/editor";
 import { DEFAULT_CANVAS_PRESETS } from "@/constants/project-constants";
-import { TCanvasSize } from "@/types/project";
+import type { TCanvasSize } from "@/types/project";
 
 interface LayoutGuideSettings {
-  platform: TPlatformLayout | null;
+	platform: TPlatformLayout | null;
 }
 
 interface EditorState {
-  isInitializing: boolean;
-  isPanelsReady: boolean;
-  canvasPresets: TCanvasSize[];
-  layoutGuide: LayoutGuideSettings;
-  setInitializing: (loading: boolean) => void;
-  setPanelsReady: (ready: boolean) => void;
-  initializeApp: () => Promise<void>;
-  setLayoutGuide: (settings: Partial<LayoutGuideSettings>) => void;
-  toggleLayoutGuide: (platform: TPlatformLayout) => void;
+	isInitializing: boolean;
+	isPanelsReady: boolean;
+	canvasPresets: TCanvasSize[];
+	layoutGuide: LayoutGuideSettings;
+	setInitializing: (loading: boolean) => void;
+	setPanelsReady: (ready: boolean) => void;
+	initializeApp: () => Promise<void>;
+	setLayoutGuide: (settings: Partial<LayoutGuideSettings>) => void;
+	toggleLayoutGuide: (platform: TPlatformLayout) => void;
 }
 
 export const useEditorStore = create<EditorState>()(
-  persist(
-    (set) => ({
-      isInitializing: true,
-      isPanelsReady: false,
-      canvasPresets: DEFAULT_CANVAS_PRESETS,
-      layoutGuide: {
-        platform: null,
-      },
-      setInitializing: (loading) => {
-        set({ isInitializing: loading });
-      },
+	persist(
+		(set) => ({
+			isInitializing: true,
+			isPanelsReady: false,
+			canvasPresets: DEFAULT_CANVAS_PRESETS,
+			layoutGuide: {
+				platform: null,
+			},
+			setInitializing: (loading) => {
+				set({ isInitializing: loading });
+			},
 
-      setPanelsReady: (ready) => {
-        set({ isPanelsReady: ready });
-      },
+			setPanelsReady: (ready) => {
+				set({ isPanelsReady: ready });
+			},
 
-      initializeApp: async () => {
-        set({ isInitializing: true, isPanelsReady: false });
+			initializeApp: async () => {
+				set({ isInitializing: true, isPanelsReady: false });
 
-        set({ isPanelsReady: true, isInitializing: false });
-      },
+				set({ isPanelsReady: true, isInitializing: false });
+			},
 
-      setLayoutGuide: (settings) => {
-        set((state) => ({
-          layoutGuide: {
-            ...state.layoutGuide,
-            ...settings,
-          },
-        }));
-      },
+			setLayoutGuide: (settings) => {
+				set((state) => ({
+					layoutGuide: {
+						...state.layoutGuide,
+						...settings,
+					},
+				}));
+			},
 
-      toggleLayoutGuide: (platform) => {
-        set((state) => ({
-          layoutGuide: {
-            platform: state.layoutGuide.platform === platform ? null : platform,
-          },
-        }));
-      },
-    }),
-    {
-      name: "editor-settings",
-      partialize: (state) => ({
-        layoutGuide: state.layoutGuide,
-      }),
-    },
-  ),
+			toggleLayoutGuide: (platform) => {
+				set((state) => ({
+					layoutGuide: {
+						platform: state.layoutGuide.platform === platform ? null : platform,
+					},
+				}));
+			},
+		}),
+		{
+			name: "editor-settings",
+			partialize: (state) => ({
+				layoutGuide: state.layoutGuide,
+			}),
+		},
+	),
 );
diff --git a/apps/web/src/stores/keybindings-store.ts b/apps/web/src/stores/keybindings-store.ts
index d65774bc..a1d9ff4c 100644
--- a/apps/web/src/stores/keybindings-store.ts
+++ b/apps/web/src/stores/keybindings-store.ts
@@ -6,243 +6,243 @@ import type { TActionWithOptionalArgs } from "@/lib/actions";
 import { getDefaultShortcuts } from "@/lib/actions";
 import { isTypableDOMElement } from "@/utils/browser";
 import { isAppleDevice } from "@/utils/platform";
-import { KeybindingConfig, ShortcutKey } from "@/types/keybinding";
+import type { KeybindingConfig, ShortcutKey } from "@/types/keybinding";
 
 export const defaultKeybindings: KeybindingConfig = getDefaultShortcuts();
 
 export interface KeybindingConflict {
-  key: ShortcutKey;
-  existingAction: TActionWithOptionalArgs;
-  newAction: TActionWithOptionalArgs;
+	key: ShortcutKey;
+	existingAction: TActionWithOptionalArgs;
+	newAction: TActionWithOptionalArgs;
 }
 
 interface KeybindingsState {
-  keybindings: KeybindingConfig;
-  isCustomized: boolean;
-  keybindingsEnabled: boolean;
-  isRecording: boolean;
+	keybindings: KeybindingConfig;
+	isCustomized: boolean;
+	keybindingsEnabled: boolean;
+	isRecording: boolean;
 
-  updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => void;
-  removeKeybinding: (key: ShortcutKey) => void;
-  resetToDefaults: () => void;
-  importKeybindings: (config: KeybindingConfig) => void;
-  exportKeybindings: () => KeybindingConfig;
-  enableKeybindings: () => void;
-  disableKeybindings: () => void;
-  setIsRecording: (isRecording: boolean) => void;
-  validateKeybinding: (
-    key: ShortcutKey,
-    action: TActionWithOptionalArgs,
-  ) => KeybindingConflict | null;
-  getKeybindingsForAction: (action: TActionWithOptionalArgs) => ShortcutKey[];
+	updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => void;
+	removeKeybinding: (key: ShortcutKey) => void;
+	resetToDefaults: () => void;
+	importKeybindings: (config: KeybindingConfig) => void;
+	exportKeybindings: () => KeybindingConfig;
+	enableKeybindings: () => void;
+	disableKeybindings: () => void;
+	setIsRecording: (isRecording: boolean) => void;
+	validateKeybinding: (
+		key: ShortcutKey,
+		action: TActionWithOptionalArgs,
+	) => KeybindingConflict | null;
+	getKeybindingsForAction: (action: TActionWithOptionalArgs) => ShortcutKey[];
 
-  // Utility
-  getKeybindingString: (ev: KeyboardEvent) => ShortcutKey | null;
+	// Utility
+	getKeybindingString: (ev: KeyboardEvent) => ShortcutKey | null;
 }
 
 function isDOMElement(el: EventTarget | null): el is HTMLElement {
-  return !!el && (el instanceof Element || el instanceof HTMLElement);
+	return !!el && (el instanceof Element || el instanceof HTMLElement);
 }
 
 export const useKeybindingsStore = create<KeybindingsState>()(
-  persist(
-    (set, get) => ({
-      keybindings: { ...defaultKeybindings },
-      isCustomized: false,
-      keybindingsEnabled: true,
-      isRecording: false,
+	persist(
+		(set, get) => ({
+			keybindings: { ...defaultKeybindings },
+			isCustomized: false,
+			keybindingsEnabled: true,
+			isRecording: false,
 
-      updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => {
-        set((state) => {
-          const newKeybindings = { ...state.keybindings };
-          newKeybindings[key] = action;
+			updateKeybinding: (key: ShortcutKey, action: TActionWithOptionalArgs) => {
+				set((state) => {
+					const newKeybindings = { ...state.keybindings };
+					newKeybindings[key] = action;
 
-          return {
-            keybindings: newKeybindings,
-            isCustomized: true,
-          };
-        });
-      },
+					return {
+						keybindings: newKeybindings,
+						isCustomized: true,
+					};
+				});
+			},
 
-      removeKeybinding: (key: ShortcutKey) => {
-        set((state) => {
-          const newKeybindings = { ...state.keybindings };
-          delete newKeybindings[key];
+			removeKeybinding: (key: ShortcutKey) => {
+				set((state) => {
+					const newKeybindings = { ...state.keybindings };
+					delete newKeybindings[key];
 
-          return {
-            keybindings: newKeybindings,
-            isCustomized: true,
-          };
-        });
-      },
+					return {
+						keybindings: newKeybindings,
+						isCustomized: true,
+					};
+				});
+			},
 
-      resetToDefaults: () => {
-        set({
-          keybindings: { ...defaultKeybindings },
-          isCustomized: false,
-        });
-      },
+			resetToDefaults: () => {
+				set({
+					keybindings: { ...defaultKeybindings },
+					isCustomized: false,
+				});
+			},
 
-      enableKeybindings: () => {
-        set({ keybindingsEnabled: true });
-      },
+			enableKeybindings: () => {
+				set({ keybindingsEnabled: true });
+			},
 
-      disableKeybindings: () => {
-        set({ keybindingsEnabled: false });
-      },
+			disableKeybindings: () => {
+				set({ keybindingsEnabled: false });
+			},
 
-      importKeybindings: (config: KeybindingConfig) => {
-        // Validate all keys and actions
-        for (const [key, action] of Object.entries(config)) {
-          // Validate the key format
-          if (typeof key !== "string" || key.length === 0) {
-            throw new Error(`Invalid key format: ${key}`);
-          }
-        }
-        set({
-          keybindings: { ...config },
-          isCustomized: true,
-        });
-      },
+			importKeybindings: (config: KeybindingConfig) => {
+				// Validate all keys and actions
+				for (const [key, action] of Object.entries(config)) {
+					// Validate the key format
+					if (typeof key !== "string" || key.length === 0) {
+						throw new Error(`Invalid key format: ${key}`);
+					}
+				}
+				set({
+					keybindings: { ...config },
+					isCustomized: true,
+				});
+			},
 
-      exportKeybindings: () => {
-        return get().keybindings;
-      },
+			exportKeybindings: () => {
+				return get().keybindings;
+			},
 
-      validateKeybinding: (
-        key: ShortcutKey,
-        action: TActionWithOptionalArgs,
-      ) => {
-        const { keybindings } = get();
-        const existingAction = keybindings[key];
+			validateKeybinding: (
+				key: ShortcutKey,
+				action: TActionWithOptionalArgs,
+			) => {
+				const { keybindings } = get();
+				const existingAction = keybindings[key];
 
-        if (existingAction && existingAction !== action) {
-          return {
-            key,
-            existingAction,
-            newAction: action,
-          };
-        }
+				if (existingAction && existingAction !== action) {
+					return {
+						key,
+						existingAction,
+						newAction: action,
+					};
+				}
 
-        return null;
-      },
-      setIsRecording: (isRecording: boolean) => {
-        set({ isRecording });
-      },
+				return null;
+			},
+			setIsRecording: (isRecording: boolean) => {
+				set({ isRecording });
+			},
 
-      getKeybindingsForAction: (action: TActionWithOptionalArgs) => {
-        const { keybindings } = get();
-        return Object.keys(keybindings).filter(
-          (key) => keybindings[key as ShortcutKey] === action,
-        ) as ShortcutKey[];
-      },
+			getKeybindingsForAction: (action: TActionWithOptionalArgs) => {
+				const { keybindings } = get();
+				return Object.keys(keybindings).filter(
+					(key) => keybindings[key as ShortcutKey] === action,
+				) as ShortcutKey[];
+			},
 
-      getKeybindingString: (ev: KeyboardEvent) => {
-        return generateKeybindingString(ev) as ShortcutKey | null;
-      },
-    }),
-    {
-      name: "opencut-keybindings",
-      version: 2,
-    },
-  ),
+			getKeybindingString: (ev: KeyboardEvent) => {
+				return generateKeybindingString(ev) as ShortcutKey | null;
+			},
+		}),
+		{
+			name: "opencut-keybindings",
+			version: 2,
+		},
+	),
 );
 
 // Utility functions
 function generateKeybindingString(ev: KeyboardEvent): ShortcutKey | null {
-  const target = ev.target;
+	const target = ev.target;
 
-  // We may or may not have a modifier key
-  const modifierKey = getActiveModifier(ev);
+	// We may or may not have a modifier key
+	const modifierKey = getActiveModifier(ev);
 
-  // We will always have a non-modifier key
-  const key = getPressedKey(ev);
-  if (!key) return null;
+	// We will always have a non-modifier key
+	const key = getPressedKey(ev);
+	if (!key) return null;
 
-  // All key combos backed by modifiers are valid shortcuts (whether currently typing or not)
-  if (modifierKey) {
-    // If the modifier is shift and the target is an input, we ignore
-    if (
-      modifierKey === "shift" &&
-      isDOMElement(target) &&
-      isTypableDOMElement({ element: target as HTMLElement })
-    ) {
-      return null;
-    }
+	// All key combos backed by modifiers are valid shortcuts (whether currently typing or not)
+	if (modifierKey) {
+		// If the modifier is shift and the target is an input, we ignore
+		if (
+			modifierKey === "shift" &&
+			isDOMElement(target) &&
+			isTypableDOMElement({ element: target as HTMLElement })
+		) {
+			return null;
+		}
 
-    return `${modifierKey}+${key}` as ShortcutKey;
-  }
+		return `${modifierKey}+${key}` as ShortcutKey;
+	}
 
-  // no modifier key here then we do not do anything while on input
-  if (
-    isDOMElement(target) &&
-    isTypableDOMElement({ element: target as HTMLElement })
-  )
-    return null;
+	// no modifier key here then we do not do anything while on input
+	if (
+		isDOMElement(target) &&
+		isTypableDOMElement({ element: target as HTMLElement })
+	)
+		return null;
 
-  // single key while not input
-  return `${key}` as ShortcutKey;
+	// single key while not input
+	return `${key}` as ShortcutKey;
 }
 
 function getPressedKey(ev: KeyboardEvent): string | null {
-  // Sometimes the property code is not available on the KeyboardEvent object
-  const key = (ev.key ?? "").toLowerCase();
-  const code = ev.code ?? "";
+	// Sometimes the property code is not available on the KeyboardEvent object
+	const key = (ev.key ?? "").toLowerCase();
+	const code = ev.code ?? "";
 
-  if (code === "Space" || key === " " || key === "spacebar" || key === "space")
-    return "space";
+	if (code === "Space" || key === " " || key === "spacebar" || key === "space")
+		return "space";
 
-  // Check arrow keys
-  if (key.startsWith("arrow")) {
-    return key.slice(5);
-  }
+	// Check arrow keys
+	if (key.startsWith("arrow")) {
+		return key.slice(5);
+	}
 
-  // Check for special keys
-  if (key === "tab") return "tab";
-  if (key === "home") return "home";
-  if (key === "end") return "end";
-  if (key === "delete") return "delete";
-  if (key === "backspace") return "backspace";
+	// Check for special keys
+	if (key === "tab") return "tab";
+	if (key === "home") return "home";
+	if (key === "end") return "end";
+	if (key === "delete") return "delete";
+	if (key === "backspace") return "backspace";
 
-  // Check letter keys
-  if (code.startsWith("Key")) {
-    const letter = code.slice(3).toLowerCase();
-    if (letter.length === 1 && letter >= "a" && letter <= "z") {
-      return letter;
-    }
-  }
+	// Check letter keys
+	if (code.startsWith("Key")) {
+		const letter = code.slice(3).toLowerCase();
+		if (letter.length === 1 && letter >= "a" && letter <= "z") {
+			return letter;
+		}
+	}
 
-  // Check number keys using physical position for AZERTY support
-  if (code.startsWith("Digit")) {
-    const digit = code.slice(5);
-    if (digit.length === 1 && digit >= "0" && digit <= "9") {
-      return digit;
-    }
-  }
+	// Check number keys using physical position for AZERTY support
+	if (code.startsWith("Digit")) {
+		const digit = code.slice(5);
+		if (digit.length === 1 && digit >= "0" && digit <= "9") {
+			return digit;
+		}
+	}
 
-  // Fallback for other layouts
-  const isDigit = key.length === 1 && key >= "0" && key <= "9";
-  if (isDigit) return key;
+	// Fallback for other layouts
+	const isDigit = key.length === 1 && key >= "0" && key <= "9";
+	if (isDigit) return key;
 
-  // Check if slash, period or enter
-  if (key === "/" || key === "." || key === "enter") return key;
+	// Check if slash, period or enter
+	if (key === "/" || key === "." || key === "enter") return key;
 
-  // If no other cases match, this is not a valid key
-  return null;
+	// If no other cases match, this is not a valid key
+	return null;
 }
 
 function getActiveModifier(ev: KeyboardEvent): string | null {
-  const modifierKeys = {
-    ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,
-    alt: ev.altKey,
-    shift: ev.shiftKey,
-  };
+	const modifierKeys = {
+		ctrl: isAppleDevice() ? ev.metaKey : ev.ctrlKey,
+		alt: ev.altKey,
+		shift: ev.shiftKey,
+	};
 
-  // active modifier: ctrl | alt | ctrl+alt | ctrl+shift | ctrl+alt+shift | alt+shift
-  // modiferKeys object's keys are sorted to match the above order
-  const activeModifier = Object.keys(modifierKeys)
-    .filter((key) => modifierKeys[key as keyof typeof modifierKeys])
-    .join("+");
+	// active modifier: ctrl | alt | ctrl+alt | ctrl+shift | ctrl+alt+shift | alt+shift
+	// modiferKeys object's keys are sorted to match the above order
+	const activeModifier = Object.keys(modifierKeys)
+		.filter((key) => modifierKeys[key as keyof typeof modifierKeys])
+		.join("+");
 
-  return activeModifier === "" ? null : activeModifier;
+	return activeModifier === "" ? null : activeModifier;
 }
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index 3e5e4d75..5d2621a4 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -3,91 +3,91 @@ import { persist } from "zustand/middleware";
 import { PANEL_CONFIG } from "@/constants/editor-constants";
 
 export interface PanelSizes {
-  tools: number;
-  preview: number;
-  properties: number;
-  mainContent: number;
-  timeline: number;
+	tools: number;
+	preview: number;
+	properties: number;
+	mainContent: number;
+	timeline: number;
 }
 
 export type PanelId = keyof PanelSizes;
 
 interface PanelState {
-  panels: PanelSizes;
-  setPanel: (panel: PanelId, size: number) => void;
-  setPanels: (sizes: Partial<PanelSizes>) => void;
-  resetPanels: () => void;
+	panels: PanelSizes;
+	setPanel: (panel: PanelId, size: number) => void;
+	setPanels: (sizes: Partial<PanelSizes>) => void;
+	resetPanels: () => void;
 }
 
 export const usePanelStore = create<PanelState>()(
-  persist(
-    (set) => ({
-      ...PANEL_CONFIG,
-      setPanel: (panel, size) =>
-        set((state) => ({
-          panels: {
-            ...state.panels,
-            [panel]: size,
-          },
-        })),
-      setPanels: (sizes) =>
-        set((state) => ({
-          panels: {
-            ...state.panels,
-            ...sizes,
-          },
-        })),
-      resetPanels: () => set({ ...PANEL_CONFIG }),
-    }),
-    {
-      name: "panel-sizes",
-      version: 2,
-      migrate: (persistedState) => {
-        const state = persistedState as
-          | {
-              panels?: Partial<PanelSizes> | null;
-              toolsPanel?: number;
-              previewPanel?: number;
-              propertiesPanel?: number;
-              mainContent?: number;
-              timeline?: number;
-              tools?: number;
-              preview?: number;
-              properties?: number;
-            }
-          | undefined
-          | null;
+	persist(
+		(set) => ({
+			...PANEL_CONFIG,
+			setPanel: (panel, size) =>
+				set((state) => ({
+					panels: {
+						...state.panels,
+						[panel]: size,
+					},
+				})),
+			setPanels: (sizes) =>
+				set((state) => ({
+					panels: {
+						...state.panels,
+						...sizes,
+					},
+				})),
+			resetPanels: () => set({ ...PANEL_CONFIG }),
+		}),
+		{
+			name: "panel-sizes",
+			version: 2,
+			migrate: (persistedState) => {
+				const state = persistedState as
+					| {
+							panels?: Partial<PanelSizes> | null;
+							toolsPanel?: number;
+							previewPanel?: number;
+							propertiesPanel?: number;
+							mainContent?: number;
+							timeline?: number;
+							tools?: number;
+							preview?: number;
+							properties?: number;
+					  }
+					| undefined
+					| null;
 
-        if (!state) return { panels: { ...PANEL_CONFIG.panels } };
+				if (!state) return { panels: { ...PANEL_CONFIG.panels } };
 
-        if (state.panels && typeof state.panels === "object") {
-          return {
-            panels: {
-              ...PANEL_CONFIG.panels,
-              ...state.panels,
-            },
-          };
-        }
+				if (state.panels && typeof state.panels === "object") {
+					return {
+						panels: {
+							...PANEL_CONFIG.panels,
+							...state.panels,
+						},
+					};
+				}
 
-        return {
-          panels: {
-            tools: state.tools ?? state.toolsPanel ?? PANEL_CONFIG.panels.tools,
-            preview:
-              state.preview ??
-              state.previewPanel ??
-              PANEL_CONFIG.panels.preview,
-            properties:
-              state.properties ??
-              state.propertiesPanel ??
-              PANEL_CONFIG.panels.properties,
-            mainContent: state.mainContent ?? PANEL_CONFIG.panels.mainContent,
-            timeline: state.timeline ?? PANEL_CONFIG.panels.timeline,
-          },
-        };
-      },
-      partialize: (state) => ({
-        panels: state.panels,
-      }),
-    },
-  ),
+				return {
+					panels: {
+						tools: state.tools ?? state.toolsPanel ?? PANEL_CONFIG.panels.tools,
+						preview:
+							state.preview ??
+							state.previewPanel ??
+							PANEL_CONFIG.panels.preview,
+						properties:
+							state.properties ??
+							state.propertiesPanel ??
+							PANEL_CONFIG.panels.properties,
+						mainContent: state.mainContent ?? PANEL_CONFIG.panels.mainContent,
+						timeline: state.timeline ?? PANEL_CONFIG.panels.timeline,
+					},
+				};
+			},
+			partialize: (state) => ({
+				panels: state.panels,
+			}),
+		},
+	),
 );
diff --git a/apps/web/src/stores/sounds-store.ts b/apps/web/src/stores/sounds-store.ts
index f17bdea5..b15c2829 100644
--- a/apps/web/src/stores/sounds-store.ts
+++ b/apps/web/src/stores/sounds-store.ts
@@ -6,256 +6,256 @@ import { EditorCore } from "@/core";
 import { buildLibraryAudioElement } from "@/lib/timeline/element-utils";
 
 interface SoundsStore {
-  topSoundEffects: SoundEffect[];
-  isLoading: boolean;
-  error: string | null;
-  hasLoaded: boolean;
-  showCommercialOnly: boolean;
-  toggleCommercialFilter: () => void;
-  searchQuery: string;
-  searchResults: SoundEffect[];
-  isSearching: boolean;
-  searchError: string | null;
-  lastSearchQuery: string;
-  scrollPosition: number;
-  currentPage: number;
-  hasNextPage: boolean;
-  totalCount: number;
-  isLoadingMore: boolean;
-  savedSounds: SavedSound[];
-  isSavedSoundsLoaded: boolean;
-  isLoadingSavedSounds: boolean;
-  savedSoundsError: string | null;
+	topSoundEffects: SoundEffect[];
+	isLoading: boolean;
+	error: string | null;
+	hasLoaded: boolean;
+	showCommercialOnly: boolean;
+	toggleCommercialFilter: () => void;
+	searchQuery: string;
+	searchResults: SoundEffect[];
+	isSearching: boolean;
+	searchError: string | null;
+	lastSearchQuery: string;
+	scrollPosition: number;
+	currentPage: number;
+	hasNextPage: boolean;
+	totalCount: number;
+	isLoadingMore: boolean;
+	savedSounds: SavedSound[];
+	isSavedSoundsLoaded: boolean;
+	isLoadingSavedSounds: boolean;
+	savedSoundsError: string | null;
 
-  addSoundToTimeline: ({ sound }: { sound: SoundEffect }) => Promise<boolean>;
-  setTopSoundEffects: ({ sounds }: { sounds: SoundEffect[] }) => void;
-  setLoading: ({ loading }: { loading: boolean }) => void;
-  setError: ({ error }: { error: string | null }) => void;
-  setHasLoaded: ({ loaded }: { loaded: boolean }) => void;
-  setSearchQuery: ({ query }: { query: string }) => void;
-  setSearchResults: ({ results }: { results: SoundEffect[] }) => void;
-  setSearching: ({ searching }: { searching: boolean }) => void;
-  setSearchError: ({ error }: { error: string | null }) => void;
-  setLastSearchQuery: ({ query }: { query: string }) => void;
-  setScrollPosition: ({ position }: { position: number }) => void;
-  setCurrentPage: ({ page }: { page: number }) => void;
-  setHasNextPage: ({ hasNext }: { hasNext: boolean }) => void;
-  setTotalCount: ({ count }: { count: number }) => void;
-  setLoadingMore: ({ loading }: { loading: boolean }) => void;
-  appendSearchResults: ({ results }: { results: SoundEffect[] }) => void;
-  appendTopSounds: ({ results }: { results: SoundEffect[] }) => void;
-  resetPagination: () => void;
-  loadSavedSounds: () => Promise<void>;
-  saveSoundEffect: ({
-    soundEffect,
-  }: {
-    soundEffect: SoundEffect;
-  }) => Promise<void>;
-  removeSavedSound: ({ soundId }: { soundId: number }) => Promise<void>;
-  isSoundSaved: ({ soundId }: { soundId: number }) => boolean;
-  toggleSavedSound: ({
-    soundEffect,
-  }: {
-    soundEffect: SoundEffect;
-  }) => Promise<void>;
-  clearSavedSounds: () => Promise<void>;
+	addSoundToTimeline: ({ sound }: { sound: SoundEffect }) => Promise<boolean>;
+	setTopSoundEffects: ({ sounds }: { sounds: SoundEffect[] }) => void;
+	setLoading: ({ loading }: { loading: boolean }) => void;
+	setError: ({ error }: { error: string | null }) => void;
+	setHasLoaded: ({ loaded }: { loaded: boolean }) => void;
+	setSearchQuery: ({ query }: { query: string }) => void;
+	setSearchResults: ({ results }: { results: SoundEffect[] }) => void;
+	setSearching: ({ searching }: { searching: boolean }) => void;
+	setSearchError: ({ error }: { error: string | null }) => void;
+	setLastSearchQuery: ({ query }: { query: string }) => void;
+	setScrollPosition: ({ position }: { position: number }) => void;
+	setCurrentPage: ({ page }: { page: number }) => void;
+	setHasNextPage: ({ hasNext }: { hasNext: boolean }) => void;
+	setTotalCount: ({ count }: { count: number }) => void;
+	setLoadingMore: ({ loading }: { loading: boolean }) => void;
+	appendSearchResults: ({ results }: { results: SoundEffect[] }) => void;
+	appendTopSounds: ({ results }: { results: SoundEffect[] }) => void;
+	resetPagination: () => void;
+	loadSavedSounds: () => Promise<void>;
+	saveSoundEffect: ({
+		soundEffect,
+	}: {
+		soundEffect: SoundEffect;
+	}) => Promise<void>;
+	removeSavedSound: ({ soundId }: { soundId: number }) => Promise<void>;
+	isSoundSaved: ({ soundId }: { soundId: number }) => boolean;
+	toggleSavedSound: ({
+		soundEffect,
+	}: {
+		soundEffect: SoundEffect;
+	}) => Promise<void>;
+	clearSavedSounds: () => Promise<void>;
 }
 
 export const useSoundsStore = create<SoundsStore>((set, get) => ({
-  topSoundEffects: [],
-  isLoading: false,
-  error: null,
-  hasLoaded: false,
-  showCommercialOnly: true,
+	topSoundEffects: [],
+	isLoading: false,
+	error: null,
+	hasLoaded: false,
+	showCommercialOnly: true,
 
-  toggleCommercialFilter: () => {
-    set((state) => ({ showCommercialOnly: !state.showCommercialOnly }));
-  },
+	toggleCommercialFilter: () => {
+		set((state) => ({ showCommercialOnly: !state.showCommercialOnly }));
+	},
 
-  searchQuery: "",
-  searchResults: [],
-  isSearching: false,
-  searchError: null,
-  lastSearchQuery: "",
-  scrollPosition: 0,
-  currentPage: 1,
-  hasNextPage: false,
-  totalCount: 0,
-  isLoadingMore: false,
-  savedSounds: [],
-  isSavedSoundsLoaded: false,
-  isLoadingSavedSounds: false,
-  savedSoundsError: null,
+	searchQuery: "",
+	searchResults: [],
+	isSearching: false,
+	searchError: null,
+	lastSearchQuery: "",
+	scrollPosition: 0,
+	currentPage: 1,
+	hasNextPage: false,
+	totalCount: 0,
+	isLoadingMore: false,
+	savedSounds: [],
+	isSavedSoundsLoaded: false,
+	isLoadingSavedSounds: false,
+	savedSoundsError: null,
 
-  setTopSoundEffects: ({ sounds }) => set({ topSoundEffects: sounds }),
-  setLoading: ({ loading }) => set({ isLoading: loading }),
-  setError: ({ error }) => set({ error }),
-  setHasLoaded: ({ loaded }) => set({ hasLoaded: loaded }),
-  setSearchQuery: ({ query }) => set({ searchQuery: query }),
-  setSearchResults: ({ results }) =>
-    set({ searchResults: results, currentPage: 1 }),
-  setSearching: ({ searching }) => set({ isSearching: searching }),
-  setSearchError: ({ error }) => set({ searchError: error }),
-  setLastSearchQuery: ({ query }) => set({ lastSearchQuery: query }),
-  setScrollPosition: ({ position }) => set({ scrollPosition: position }),
-  setCurrentPage: ({ page }) => set({ currentPage: page }),
-  setHasNextPage: ({ hasNext }) => set({ hasNextPage: hasNext }),
-  setTotalCount: ({ count }) => set({ totalCount: count }),
-  setLoadingMore: ({ loading }) => set({ isLoadingMore: loading }),
+	setTopSoundEffects: ({ sounds }) => set({ topSoundEffects: sounds }),
+	setLoading: ({ loading }) => set({ isLoading: loading }),
+	setError: ({ error }) => set({ error }),
+	setHasLoaded: ({ loaded }) => set({ hasLoaded: loaded }),
+	setSearchQuery: ({ query }) => set({ searchQuery: query }),
+	setSearchResults: ({ results }) =>
+		set({ searchResults: results, currentPage: 1 }),
+	setSearching: ({ searching }) => set({ isSearching: searching }),
+	setSearchError: ({ error }) => set({ searchError: error }),
+	setLastSearchQuery: ({ query }) => set({ lastSearchQuery: query }),
+	setScrollPosition: ({ position }) => set({ scrollPosition: position }),
+	setCurrentPage: ({ page }) => set({ currentPage: page }),
+	setHasNextPage: ({ hasNext }) => set({ hasNextPage: hasNext }),
+	setTotalCount: ({ count }) => set({ totalCount: count }),
+	setLoadingMore: ({ loading }) => set({ isLoadingMore: loading }),
 
-  appendSearchResults: ({ results }) =>
-    set((state) => ({
-      searchResults: [...state.searchResults, ...results],
-    })),
+	appendSearchResults: ({ results }) =>
+		set((state) => ({
+			searchResults: [...state.searchResults, ...results],
+		})),
 
-  appendTopSounds: ({ results }) =>
-    set((state) => ({
-      topSoundEffects: [...state.topSoundEffects, ...results],
-    })),
+	appendTopSounds: ({ results }) =>
+		set((state) => ({
+			topSoundEffects: [...state.topSoundEffects, ...results],
+		})),
 
-  resetPagination: () =>
-    set({
-      currentPage: 1,
-      hasNextPage: false,
-      totalCount: 0,
-      isLoadingMore: false,
-    }),
+	resetPagination: () =>
+		set({
+			currentPage: 1,
+			hasNextPage: false,
+			totalCount: 0,
+			isLoadingMore: false,
+		}),
 
-  loadSavedSounds: async () => {
-    if (get().isSavedSoundsLoaded) return;
+	loadSavedSounds: async () => {
+		if (get().isSavedSoundsLoaded) return;
 
-    try {
-      set({ isLoadingSavedSounds: true, savedSoundsError: null });
-      const savedSoundsData = await storageService.loadSavedSounds();
-      set({
-        savedSounds: savedSoundsData.sounds,
-        isSavedSoundsLoaded: true,
-        isLoadingSavedSounds: false,
-      });
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Failed to load saved sounds";
-      set({
-        savedSoundsError: errorMessage,
-        isLoadingSavedSounds: false,
-      });
-      console.error("Failed to load saved sounds:", error);
-    }
-  },
+		try {
+			set({ isLoadingSavedSounds: true, savedSoundsError: null });
+			const savedSoundsData = await storageService.loadSavedSounds();
+			set({
+				savedSounds: savedSoundsData.sounds,
+				isSavedSoundsLoaded: true,
+				isLoadingSavedSounds: false,
+			});
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : "Failed to load saved sounds";
+			set({
+				savedSoundsError: errorMessage,
+				isLoadingSavedSounds: false,
+			});
+			console.error("Failed to load saved sounds:", error);
+		}
+	},
 
-  saveSoundEffect: async ({ soundEffect }) => {
-    try {
-      await storageService.saveSoundEffect({ soundEffect });
+	saveSoundEffect: async ({ soundEffect }) => {
+		try {
+			await storageService.saveSoundEffect({ soundEffect });
 
-      const savedSoundsData = await storageService.loadSavedSounds();
-      set({ savedSounds: savedSoundsData.sounds });
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Failed to save sound";
-      set({ savedSoundsError: errorMessage });
-      toast.error("Failed to save sound");
-      console.error("Failed to save sound:", error);
-    }
-  },
+			const savedSoundsData = await storageService.loadSavedSounds();
+			set({ savedSounds: savedSoundsData.sounds });
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : "Failed to save sound";
+			set({ savedSoundsError: errorMessage });
+			toast.error("Failed to save sound");
+			console.error("Failed to save sound:", error);
+		}
+	},
 
-  removeSavedSound: async ({ soundId }) => {
-    try {
-      await storageService.removeSavedSound({ soundId });
+	removeSavedSound: async ({ soundId }) => {
+		try {
+			await storageService.removeSavedSound({ soundId });
 
-      set((state) => ({
-        savedSounds: state.savedSounds.filter((sound) => sound.id !== soundId),
-      }));
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Failed to remove sound";
-      set({ savedSoundsError: errorMessage });
-      toast.error("Failed to remove sound");
-      console.error("Failed to remove sound:", error);
-    }
-  },
+			set((state) => ({
+				savedSounds: state.savedSounds.filter((sound) => sound.id !== soundId),
+			}));
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : "Failed to remove sound";
+			set({ savedSoundsError: errorMessage });
+			toast.error("Failed to remove sound");
+			console.error("Failed to remove sound:", error);
+		}
+	},
 
-  isSoundSaved: ({ soundId }) => {
-    const { savedSounds } = get();
-    return savedSounds.some((sound) => sound.id === soundId);
-  },
+	isSoundSaved: ({ soundId }) => {
+		const { savedSounds } = get();
+		return savedSounds.some((sound) => sound.id === soundId);
+	},
 
-  toggleSavedSound: async ({ soundEffect }) => {
-    const { isSoundSaved, saveSoundEffect, removeSavedSound } = get();
+	toggleSavedSound: async ({ soundEffect }) => {
+		const { isSoundSaved, saveSoundEffect, removeSavedSound } = get();
 
-    if (isSoundSaved({ soundId: soundEffect.id })) {
-      await removeSavedSound({ soundId: soundEffect.id });
-    } else {
-      await saveSoundEffect({ soundEffect });
-    }
-  },
+		if (isSoundSaved({ soundId: soundEffect.id })) {
+			await removeSavedSound({ soundId: soundEffect.id });
+		} else {
+			await saveSoundEffect({ soundEffect });
+		}
+	},
 
-  clearSavedSounds: async () => {
-    try {
-      await storageService.clearSavedSounds();
-      set({
-        savedSounds: [],
-        savedSoundsError: null,
-      });
-    } catch (error) {
-      const errorMessage =
-        error instanceof Error ? error.message : "Failed to clear saved sounds";
-      set({ savedSoundsError: errorMessage });
-      toast.error("Failed to clear saved sounds");
-      console.error("Failed to clear saved sounds:", error);
-    }
-  },
+	clearSavedSounds: async () => {
+		try {
+			await storageService.clearSavedSounds();
+			set({
+				savedSounds: [],
+				savedSoundsError: null,
+			});
+		} catch (error) {
+			const errorMessage =
+				error instanceof Error ? error.message : "Failed to clear saved sounds";
+			set({ savedSoundsError: errorMessage });
+			toast.error("Failed to clear saved sounds");
+			console.error("Failed to clear saved sounds:", error);
+		}
+	},
 
-  addSoundToTimeline: async ({ sound }) => {
-    const audioUrl = sound.previewUrl;
-    if (!audioUrl) {
-      toast.error("Sound file not available");
-      return false;
-    }
+	addSoundToTimeline: async ({ sound }) => {
+		const audioUrl = sound.previewUrl;
+		if (!audioUrl) {
+			toast.error("Sound file not available");
+			return false;
+		}
 
-    try {
-      const editor = EditorCore.getInstance();
-      const currentTime = editor.playback.getCurrentTime();
-      const tracks = editor.timeline.getTracks();
+		try {
+			const editor = EditorCore.getInstance();
+			const currentTime = editor.playback.getCurrentTime();
+			const tracks = editor.timeline.getTracks();
 
-      const response = await fetch(audioUrl);
-      if (!response.ok)
-        throw new Error(`Failed to download audio: ${response.statusText}`);
+			const response = await fetch(audioUrl);
+			if (!response.ok)
+				throw new Error(`Failed to download audio: ${response.statusText}`);
 
-      const arrayBuffer = await response.arrayBuffer();
-      const audioContext = new AudioContext();
-      const buffer = await audioContext.decodeAudioData(arrayBuffer);
+			const arrayBuffer = await response.arrayBuffer();
+			const audioContext = new AudioContext();
+			const buffer = await audioContext.decodeAudioData(arrayBuffer);
 
-      let audioTrack = tracks.find((t) => t.type === "audio");
-      let trackId: string;
+			const audioTrack = tracks.find((t) => t.type === "audio");
+			let trackId: string;
 
-      if (audioTrack) {
-        trackId = audioTrack.id;
-      } else {
-        trackId = editor.timeline.addTrack({ type: "audio" });
-      }
+			if (audioTrack) {
+				trackId = audioTrack.id;
+			} else {
+				trackId = editor.timeline.addTrack({ type: "audio" });
+			}
 
-      const element = buildLibraryAudioElement({
-        sourceUrl: audioUrl,
-        name: sound.name,
-        duration: sound.duration,
-        startTime: currentTime,
-        buffer,
-      });
+			const element = buildLibraryAudioElement({
+				sourceUrl: audioUrl,
+				name: sound.name,
+				duration: sound.duration,
+				startTime: currentTime,
+				buffer,
+			});
 
-      editor.timeline.insertElement({
-        placement: { mode: "explicit", trackId },
-        element,
-      });
-      return true;
-    } catch (error) {
-      console.error("Failed to add sound to timeline:", error);
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to add sound to timeline",
-        { id: `sound-${sound.id}` },
-      );
-      return false;
-    }
-  },
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId },
+				element,
+			});
+			return true;
+		} catch (error) {
+			console.error("Failed to add sound to timeline:", error);
+			toast.error(
+				error instanceof Error
+					? error.message
+					: "Failed to add sound to timeline",
+				{ id: `sound-${sound.id}` },
+			);
+			return false;
+		}
+	},
 }));
diff --git a/apps/web/src/stores/stickers-store.ts b/apps/web/src/stores/stickers-store.ts
index 81593809..edc78220 100644
--- a/apps/web/src/stores/stickers-store.ts
+++ b/apps/web/src/stores/stickers-store.ts
@@ -1,11 +1,11 @@
 import { create } from "zustand";
 import {
-  getCollections,
-  getCollection,
-  searchIcons,
-  type IconSet,
-  type CollectionInfo,
-  type IconSearchResult,
+	getCollections,
+	getCollection,
+	searchIcons,
+	type IconSet,
+	type CollectionInfo,
+	type IconSearchResult,
 } from "@/lib/iconify-api";
 import { EditorCore } from "@/core";
 import { buildStickerElement } from "@/lib/timeline/element-utils";
@@ -15,162 +15,162 @@ import type { StickerCategory } from "@/types/stickers";
 type ViewMode = "search" | "browse" | "collection";
 
 interface StickersStore {
-  searchQuery: string;
-  selectedCategory: StickerCategory;
-  selectedCollection: string | null;
-  viewMode: ViewMode;
-  collections: Record<string, IconSet>;
-  currentCollection: CollectionInfo | null;
-  searchResults: IconSearchResult | null;
-  recentStickers: string[];
-  isLoadingCollections: boolean;
-  isLoadingCollection: boolean;
-  isSearching: boolean;
-  addingSticker: string | null;
+	searchQuery: string;
+	selectedCategory: StickerCategory;
+	selectedCollection: string | null;
+	viewMode: ViewMode;
+	collections: Record<string, IconSet>;
+	currentCollection: CollectionInfo | null;
+	searchResults: IconSearchResult | null;
+	recentStickers: string[];
+	isLoadingCollections: boolean;
+	isLoadingCollection: boolean;
+	isSearching: boolean;
+	addingSticker: string | null;
 
-  setSearchQuery: ({ query }: { query: string }) => void;
-  setSelectedCategory: ({ category }: { category: StickerCategory }) => void;
-  setSelectedCollection: ({
-    collection,
-  }: {
-    collection: string | null;
-  }) => void;
-  setViewMode: ({ mode }: { mode: ViewMode }) => void;
-  loadCollections: () => Promise<void>;
-  loadCollection: ({ prefix }: { prefix: string }) => Promise<void>;
-  searchStickers: ({ query }: { query: string }) => Promise<void>;
-  addStickerToTimeline: ({ iconName }: { iconName: string }) => void;
-  addToRecentStickers: ({ iconName }: { iconName: string }) => void;
-  clearRecentStickers: () => void;
+	setSearchQuery: ({ query }: { query: string }) => void;
+	setSelectedCategory: ({ category }: { category: StickerCategory }) => void;
+	setSelectedCollection: ({
+		collection,
+	}: {
+		collection: string | null;
+	}) => void;
+	setViewMode: ({ mode }: { mode: ViewMode }) => void;
+	loadCollections: () => Promise<void>;
+	loadCollection: ({ prefix }: { prefix: string }) => Promise<void>;
+	searchStickers: ({ query }: { query: string }) => Promise<void>;
+	addStickerToTimeline: ({ iconName }: { iconName: string }) => void;
+	addToRecentStickers: ({ iconName }: { iconName: string }) => void;
+	clearRecentStickers: () => void;
 }
 
 const MAX_RECENT_STICKERS = 50;
 
 export const useStickersStore = create<StickersStore>((set, get) => ({
-  searchQuery: "",
-  selectedCategory: "all",
-  selectedCollection: null,
-  viewMode: "browse",
+	searchQuery: "",
+	selectedCategory: "all",
+	selectedCollection: null,
+	viewMode: "browse",
 
-  collections: {},
-  currentCollection: null,
-  searchResults: null,
-  recentStickers: [],
+	collections: {},
+	currentCollection: null,
+	searchResults: null,
+	recentStickers: [],
 
-  isLoadingCollections: false,
-  isLoadingCollection: false,
-  isSearching: false,
-  addingSticker: null,
+	isLoadingCollections: false,
+	isLoadingCollection: false,
+	isSearching: false,
+	addingSticker: null,
 
-  setSearchQuery: ({ query }) => set({ searchQuery: query }),
+	setSearchQuery: ({ query }) => set({ searchQuery: query }),
 
-  setSelectedCategory: ({ category }) =>
-    set({
-      selectedCategory: category,
-      viewMode: "browse",
-      selectedCollection: null,
-      currentCollection: null,
-    }),
+	setSelectedCategory: ({ category }) =>
+		set({
+			selectedCategory: category,
+			viewMode: "browse",
+			selectedCollection: null,
+			currentCollection: null,
+		}),
 
-  setSelectedCollection: ({ collection }) => {
-    set({
-      selectedCollection: collection,
-      viewMode: collection ? "collection" : "browse",
-      currentCollection: null,
-    });
+	setSelectedCollection: ({ collection }) => {
+		set({
+			selectedCollection: collection,
+			viewMode: collection ? "collection" : "browse",
+			currentCollection: null,
+		});
 
-    if (collection) {
-      get().loadCollection({ prefix: collection });
-    }
-  },
+		if (collection) {
+			get().loadCollection({ prefix: collection });
+		}
+	},
 
-  setViewMode: ({ mode }) => set({ viewMode: mode }),
+	setViewMode: ({ mode }) => set({ viewMode: mode }),
 
-  loadCollections: async () => {
-    set({ isLoadingCollections: true });
-    try {
-      const collections = await getCollections();
-      set({ collections });
-    } catch (error) {
-      console.error("Failed to load collections:", error);
-    } finally {
-      set({ isLoadingCollections: false });
-    }
-  },
+	loadCollections: async () => {
+		set({ isLoadingCollections: true });
+		try {
+			const collections = await getCollections();
+			set({ collections });
+		} catch (error) {
+			console.error("Failed to load collections:", error);
+		} finally {
+			set({ isLoadingCollections: false });
+		}
+	},
 
-  loadCollection: async ({ prefix }: { prefix: string }) => {
-    set({ isLoadingCollection: true });
-    try {
-      const collection = await getCollection(prefix);
-      set({ currentCollection: collection });
-    } catch (error) {
-      console.error(`Failed to load collection ${prefix}:`, error);
-      set({ currentCollection: null });
-    } finally {
-      set({ isLoadingCollection: false });
-    }
-  },
+	loadCollection: async ({ prefix }: { prefix: string }) => {
+		set({ isLoadingCollection: true });
+		try {
+			const collection = await getCollection(prefix);
+			set({ currentCollection: collection });
+		} catch (error) {
+			console.error(`Failed to load collection ${prefix}:`, error);
+			set({ currentCollection: null });
+		} finally {
+			set({ isLoadingCollection: false });
+		}
+	},
 
-  searchStickers: async ({ query }: { query: string }) => {
-    if (!query.trim()) {
-      set({ searchResults: null, viewMode: "browse" });
-      return;
-    }
+	searchStickers: async ({ query }: { query: string }) => {
+		if (!query.trim()) {
+			set({ searchResults: null, viewMode: "browse" });
+			return;
+		}
 
-    const { selectedCategory } = get();
+		const { selectedCategory } = get();
 
-    set({ isSearching: true, viewMode: "search" });
-    try {
-      const category = STICKER_CATEGORY_CONFIG[selectedCategory];
-      const results = await searchIcons(query, 100, undefined, category);
-      set({ searchResults: results });
-    } catch (error) {
-      console.error("Search failed:", error);
-      set({ searchResults: null });
-    } finally {
-      set({ isSearching: false });
-    }
-  },
+		set({ isSearching: true, viewMode: "search" });
+		try {
+			const category = STICKER_CATEGORY_CONFIG[selectedCategory];
+			const results = await searchIcons(query, 100, undefined, category);
+			set({ searchResults: results });
+		} catch (error) {
+			console.error("Search failed:", error);
+			set({ searchResults: null });
+		} finally {
+			set({ isSearching: false });
+		}
+	},
 
-  addStickerToTimeline: ({ iconName }: { iconName: string }) => {
-    set({ addingSticker: iconName });
-    try {
-      const editor = EditorCore.getInstance();
-      const currentTime = editor.playback.getCurrentTime();
-      const tracks = editor.timeline.getTracks();
+	addStickerToTimeline: ({ iconName }: { iconName: string }) => {
+		set({ addingSticker: iconName });
+		try {
+			const editor = EditorCore.getInstance();
+			const currentTime = editor.playback.getCurrentTime();
+			const tracks = editor.timeline.getTracks();
 
-      let stickerTrack = tracks.find((t) => t.type === "sticker");
-      let trackId: string;
+			const stickerTrack = tracks.find((t) => t.type === "sticker");
+			let trackId: string;
 
-      if (stickerTrack) {
-        trackId = stickerTrack.id;
-      } else {
-        trackId = editor.timeline.addTrack({ type: "sticker" });
-      }
+			if (stickerTrack) {
+				trackId = stickerTrack.id;
+			} else {
+				trackId = editor.timeline.addTrack({ type: "sticker" });
+			}
 
-      const element = buildStickerElement({ iconName, startTime: currentTime });
-      editor.timeline.insertElement({
-        placement: { mode: "explicit", trackId },
-        element,
-      });
+			const element = buildStickerElement({ iconName, startTime: currentTime });
+			editor.timeline.insertElement({
+				placement: { mode: "explicit", trackId },
+				element,
+			});
 
-      get().addToRecentStickers({ iconName });
-    } finally {
-      set({ addingSticker: null });
-    }
-  },
+			get().addToRecentStickers({ iconName });
+		} finally {
+			set({ addingSticker: null });
+		}
+	},
 
-  addToRecentStickers: ({ iconName }: { iconName: string }) => {
-    set((state) => {
-      const recent = [
-        iconName,
-        ...state.recentStickers.filter((s) => s !== iconName),
-      ];
-      return {
-        recentStickers: recent.slice(0, MAX_RECENT_STICKERS),
-      };
-    });
-  },
+	addToRecentStickers: ({ iconName }: { iconName: string }) => {
+		set((state) => {
+			const recent = [
+				iconName,
+				...state.recentStickers.filter((s) => s !== iconName),
+			];
+			return {
+				recentStickers: recent.slice(0, MAX_RECENT_STICKERS),
+			};
+		});
+	},
 
-  clearRecentStickers: () => set({ recentStickers: [] }),
+	clearRecentStickers: () => set({ recentStickers: [] }),
 }));
diff --git a/apps/web/src/stores/text-properties-store.ts b/apps/web/src/stores/text-properties-store.ts
index eae45e73..c0b23028 100644
--- a/apps/web/src/stores/text-properties-store.ts
+++ b/apps/web/src/stores/text-properties-store.ts
@@ -4,30 +4,30 @@ import { persist } from "zustand/middleware";
 export type TextPropertiesTab = "text" | "transform";
 
 export interface TextPropertiesTabMeta {
-  value: TextPropertiesTab;
-  label: string;
+	value: TextPropertiesTab;
+	label: string;
 }
 
 export const TEXT_PROPERTIES_TABS: ReadonlyArray<TextPropertiesTabMeta> = [
-  { value: "text", label: "Text" },
-  { value: "transform", label: "Transform" },
+	{ value: "text", label: "Text" },
+	{ value: "transform", label: "Transform" },
 ] as const;
 
 export function isTextPropertiesTab(value: string): value is TextPropertiesTab {
-  return TEXT_PROPERTIES_TABS.some((t) => t.value === value);
+	return TEXT_PROPERTIES_TABS.some((t) => t.value === value);
 }
 
 interface TextPropertiesState {
-  activeTab: TextPropertiesTab;
-  setActiveTab: (tab: TextPropertiesTab) => void;
+	activeTab: TextPropertiesTab;
+	setActiveTab: (tab: TextPropertiesTab) => void;
 }
 
 export const useTextPropertiesStore = create<TextPropertiesState>()(
-  persist(
-    (set) => ({
-      activeTab: "text",
-      setActiveTab: (tab) => set({ activeTab: tab }),
-    }),
-    { name: "text-properties" },
-  ),
+	persist(
+		(set) => ({
+			activeTab: "text",
+			setActiveTab: (tab) => set({ activeTab: tab }),
+		}),
+		{ name: "text-properties" },
+	),
 );
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 68f4ac6c..86768c83 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -7,50 +7,50 @@ import { create } from "zustand";
 import type { ClipboardItem } from "@/types/timeline";
 
 interface TimelineStore {
-  selectedElements: { trackId: string; elementId: string }[];
-  setSelectedElements: ({
-    elements,
-  }: {
-    elements: { trackId: string; elementId: string }[];
-  }) => void;
-  snappingEnabled: boolean;
-  toggleSnapping: () => void;
-  rippleEditingEnabled: boolean;
-  toggleRippleEditing: () => void;
-  clipboard: {
-    items: ClipboardItem[];
-  } | null;
-  setClipboard: (
-    clipboard: {
-      items: ClipboardItem[];
-    } | null,
-  ) => void;
+	selectedElements: { trackId: string; elementId: string }[];
+	setSelectedElements: ({
+		elements,
+	}: {
+		elements: { trackId: string; elementId: string }[];
+	}) => void;
+	snappingEnabled: boolean;
+	toggleSnapping: () => void;
+	rippleEditingEnabled: boolean;
+	toggleRippleEditing: () => void;
+	clipboard: {
+		items: ClipboardItem[];
+	} | null;
+	setClipboard: (
+		clipboard: {
+			items: ClipboardItem[];
+		} | null,
+	) => void;
 }
 
 export const useTimelineStore = create<TimelineStore>((set) => ({
-  selectedElements: [],
+	selectedElements: [],
 
-  setSelectedElements: ({ elements }) => {
-    set({ selectedElements: elements });
-  },
+	setSelectedElements: ({ elements }) => {
+		set({ selectedElements: elements });
+	},
 
-  snappingEnabled: true,
+	snappingEnabled: true,
 
-  toggleSnapping: () => {
-    set((state) => ({ snappingEnabled: !state.snappingEnabled }));
-  },
+	toggleSnapping: () => {
+		set((state) => ({ snappingEnabled: !state.snappingEnabled }));
+	},
 
-  rippleEditingEnabled: false,
+	rippleEditingEnabled: false,
 
-  toggleRippleEditing: () => {
-    set((state) => ({
-      rippleEditingEnabled: !state.rippleEditingEnabled,
-    }));
-  },
+	toggleRippleEditing: () => {
+		set((state) => ({
+			rippleEditingEnabled: !state.rippleEditingEnabled,
+		}));
+	},
 
-  clipboard: null,
+	clipboard: null,
 
-  setClipboard: (clipboard) => {
-    set({ clipboard });
-  },
+	setClipboard: (clipboard) => {
+		set({ clipboard });
+	},
 }));
diff --git a/apps/web/src/types/assets.ts b/apps/web/src/types/assets.ts
index 3da4187f..c8dddfc7 100644
--- a/apps/web/src/types/assets.ts
+++ b/apps/web/src/types/assets.ts
@@ -2,10 +2,8 @@ import type { MediaAssetData } from "@/services/storage/types";
 
 export type MediaType = "image" | "video" | "audio";
 
-export interface MediaAsset extends Omit<
-  MediaAssetData,
-  "size" | "lastModified"
-> {
-  file: File;
-  url?: string;
+export interface MediaAsset
+	extends Omit<MediaAssetData, "size" | "lastModified"> {
+	file: File;
+	url?: string;
 }
diff --git a/apps/web/src/types/blog.ts b/apps/web/src/types/blog.ts
index fbee239e..16795b02 100644
--- a/apps/web/src/types/blog.ts
+++ b/apps/web/src/types/blog.ts
@@ -1,92 +1,92 @@
 export type Post = {
-  id: string;
-  slug: string;
-  title: string;
-  content: string;
-  description: string;
-  coverImage: string;
-  publishedAt: Date;
-  updatedAt: Date;
-  authors: {
-    id: string;
-    name: string;
-    image: string;
-  }[];
-  category: {
-    id: string;
-    slug: string;
-    name: string;
-  };
-  tags: {
-    id: string;
-    slug: string;
-    name: string;
-  }[];
-  attribution: {
-    author: string;
-    url: string;
-  } | null;
+	id: string;
+	slug: string;
+	title: string;
+	content: string;
+	description: string;
+	coverImage: string;
+	publishedAt: Date;
+	updatedAt: Date;
+	authors: {
+		id: string;
+		name: string;
+		image: string;
+	}[];
+	category: {
+		id: string;
+		slug: string;
+		name: string;
+	};
+	tags: {
+		id: string;
+		slug: string;
+		name: string;
+	}[];
+	attribution: {
+		author: string;
+		url: string;
+	} | null;
 };
 
 export type Pagination = {
-  limit: number;
-  currpage: number;
-  nextPage: number | null;
-  prevPage: number | null;
-  totalItems: number;
-  totalPages: number;
+	limit: number;
+	currpage: number;
+	nextPage: number | null;
+	prevPage: number | null;
+	totalItems: number;
+	totalPages: number;
 };
 
 export type MarblePostList = {
-  posts: Post[];
-  pagination: Pagination;
+	posts: Post[];
+	pagination: Pagination;
 };
 
 export type MarblePost = {
-  post: Post;
+	post: Post;
 };
 
 export type Tag = {
-  id: string;
-  name: string;
-  slug: string;
+	id: string;
+	name: string;
+	slug: string;
 };
 
 export type MarbleTag = {
-  tag: Tag;
+	tag: Tag;
 };
 
 export type MarbleTagList = {
-  tags: Tag[];
-  pagination: Pagination;
+	tags: Tag[];
+	pagination: Pagination;
 };
 
 export type Category = {
-  id: string;
-  name: string;
-  slug: string;
+	id: string;
+	name: string;
+	slug: string;
 };
 
 export type MarbleCategory = {
-  category: Category;
+	category: Category;
 };
 
 export type MarbleCategoryList = {
-  categories: Category[];
-  pagination: Pagination;
+	categories: Category[];
+	pagination: Pagination;
 };
 
 export type Author = {
-  id: string;
-  name: string;
-  image: string;
+	id: string;
+	name: string;
+	image: string;
 };
 
 export type MarbleAuthor = {
-  author: Author;
+	author: Author;
 };
 
 export type MarbleAuthorList = {
-  authors: Author[];
-  pagination: Pagination;
+	authors: Author[];
+	pagination: Pagination;
 };
diff --git a/apps/web/src/types/drag.ts b/apps/web/src/types/drag.ts
index 1a9d6ed0..e6e5daba 100644
--- a/apps/web/src/types/drag.ts
+++ b/apps/web/src/types/drag.ts
@@ -1,21 +1,21 @@
 interface BaseDragData {
-  id: string;
-  name: string;
+	id: string;
+	name: string;
 }
 
 export interface MediaDragData extends BaseDragData {
-  type: "media";
-  mediaType: "image" | "video" | "audio";
+	type: "media";
+	mediaType: "image" | "video" | "audio";
 }
 
 export interface TextDragData extends BaseDragData {
-  type: "text";
-  content: string;
+	type: "text";
+	content: string;
 }
 
 export interface StickerDragData extends BaseDragData {
-  type: "sticker";
-  iconName: string;
+	type: "sticker";
+	iconName: string;
 }
 
 export type TimelineDragData = MediaDragData | TextDragData | StickerDragData;
diff --git a/apps/web/src/types/export.ts b/apps/web/src/types/export.ts
index ab277f3e..351f5fc4 100644
--- a/apps/web/src/types/export.ts
+++ b/apps/web/src/types/export.ts
@@ -1,8 +1,8 @@
 export const EXPORT_QUALITY_VALUES = [
-  "low",
-  "medium",
-  "high",
-  "very_high",
+	"low",
+	"medium",
+	"high",
+	"very_high",
 ] as const;
 
 export const EXPORT_FORMAT_VALUES = ["mp4", "webm"] as const;
@@ -11,17 +11,17 @@ export type ExportFormat = (typeof EXPORT_FORMAT_VALUES)[number];
 export type ExportQuality = (typeof EXPORT_QUALITY_VALUES)[number];
 
 export interface ExportOptions {
-  format: ExportFormat;
-  quality: ExportQuality;
-  fps?: number;
-  includeAudio?: boolean;
-  onProgress?: ({ progress }: { progress: number }) => void;
-  onCancel?: () => boolean;
+	format: ExportFormat;
+	quality: ExportQuality;
+	fps?: number;
+	includeAudio?: boolean;
+	onProgress?: ({ progress }: { progress: number }) => void;
+	onCancel?: () => boolean;
 }
 
 export interface ExportResult {
-  success: boolean;
-  buffer?: ArrayBuffer;
-  error?: string;
-  cancelled?: boolean;
+	success: boolean;
+	buffer?: ArrayBuffer;
+	error?: string;
+	cancelled?: boolean;
 }
diff --git a/apps/web/src/types/keybinding.ts b/apps/web/src/types/keybinding.ts
index 56494361..f9b84e31 100644
--- a/apps/web/src/types/keybinding.ts
+++ b/apps/web/src/types/keybinding.ts
@@ -5,67 +5,67 @@ import type { TActionWithOptionalArgs } from "@/lib/actions";
  * Ctrl is also regarded as macOS COMMAND (⌘) key (NOTE: this differs from HTML Keyboard spec where COMMAND is Meta key!)
  */
 export type ModifierKeys =
-  | "ctrl"
-  | "alt"
-  | "shift"
-  | "ctrl+shift"
-  | "alt+shift"
-  | "ctrl+alt"
-  | "ctrl+alt+shift";
+	| "ctrl"
+	| "alt"
+	| "shift"
+	| "ctrl+shift"
+	| "alt+shift"
+	| "ctrl+alt"
+	| "ctrl+alt+shift";
 
 export type Key =
-  | "a"
-  | "b"
-  | "c"
-  | "d"
-  | "e"
-  | "f"
-  | "g"
-  | "h"
-  | "i"
-  | "j"
-  | "k"
-  | "l"
-  | "m"
-  | "n"
-  | "o"
-  | "p"
-  | "q"
-  | "r"
-  | "s"
-  | "t"
-  | "u"
-  | "v"
-  | "w"
-  | "x"
-  | "y"
-  | "z"
-  | "0"
-  | "1"
-  | "2"
-  | "3"
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "up"
-  | "down"
-  | "left"
-  | "right"
-  | "/"
-  | "?"
-  | "."
-  | "enter"
-  | "tab"
-  | "space"
-  | "escape"
-  | "esc"
-  | "backspace"
-  | "delete"
-  | "home"
-  | "end";
+	| "a"
+	| "b"
+	| "c"
+	| "d"
+	| "e"
+	| "f"
+	| "g"
+	| "h"
+	| "i"
+	| "j"
+	| "k"
+	| "l"
+	| "m"
+	| "n"
+	| "o"
+	| "p"
+	| "q"
+	| "r"
+	| "s"
+	| "t"
+	| "u"
+	| "v"
+	| "w"
+	| "x"
+	| "y"
+	| "z"
+	| "0"
+	| "1"
+	| "2"
+	| "3"
+	| "4"
+	| "5"
+	| "6"
+	| "7"
+	| "8"
+	| "9"
+	| "up"
+	| "down"
+	| "left"
+	| "right"
+	| "/"
+	| "?"
+	| "."
+	| "enter"
+	| "tab"
+	| "space"
+	| "escape"
+	| "esc"
+	| "backspace"
+	| "delete"
+	| "home"
+	| "end";
 /* eslint-enable */
 
 export type ModifierBasedShortcutKey = `${ModifierKeys}+${Key}`;
@@ -75,5 +75,5 @@ export type SingleCharacterShortcutKey = `${Key}`;
 export type ShortcutKey = ModifierBasedShortcutKey | SingleCharacterShortcutKey;
 
 export type KeybindingConfig = {
-  [key in ShortcutKey]?: TActionWithOptionalArgs;
+	[key in ShortcutKey]?: TActionWithOptionalArgs;
 };
diff --git a/apps/web/src/types/language.ts b/apps/web/src/types/language.ts
new file mode 100644
index 00000000..a3f527c8
--- /dev/null
+++ b/apps/web/src/types/language.ts
@@ -0,0 +1,4 @@
+import type { LANGUAGES } from "@/constants/language-constants";
+
+export type Language = (typeof LANGUAGES)[number];
+export type LanguageCode = Language["code"];
diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts
index ad915b36..42628e4b 100644
--- a/apps/web/src/types/project.ts
+++ b/apps/web/src/types/project.ts
@@ -1,39 +1,39 @@
-import { TScene } from "./timeline";
+import type { TScene } from "./timeline";
 
 export type TBackground =
-  | {
-      type: "color";
-      color: string;
-    }
-  | {
-      type: "blur";
-      blurIntensity: number;
-    };
+	| {
+			type: "color";
+			color: string;
+	  }
+	| {
+			type: "blur";
+			blurIntensity: number;
+	  };
 
 export interface TCanvasSize {
-  width: number;
-  height: number;
+	width: number;
+	height: number;
 }
 
 export interface TProjectMetadata {
-  id: string;
-  name: string;
-  thumbnail?: string;
-  createdAt: Date;
-  updatedAt: Date;
+	id: string;
+	name: string;
+	thumbnail?: string;
+	createdAt: Date;
+	updatedAt: Date;
 }
 
 export interface TProjectSettings {
-  fps: number;
-  canvasSize: TCanvasSize;
-  originalCanvasSize?: TCanvasSize | null;
-  background: TBackground;
+	fps: number;
+	canvasSize: TCanvasSize;
+	originalCanvasSize?: TCanvasSize | null;
+	background: TBackground;
 }
 
 export interface TProject {
-  metadata: TProjectMetadata;
-  scenes: TScene[];
-  currentSceneId: string;
-  settings: TProjectSettings;
-  version: number;
+	metadata: TProjectMetadata;
+	scenes: TScene[];
+	currentSceneId: string;
+	settings: TProjectSettings;
+	version: number;
 }
diff --git a/apps/web/src/types/sounds.ts b/apps/web/src/types/sounds.ts
index 8b47edfa..eecf7701 100644
--- a/apps/web/src/types/sounds.ts
+++ b/apps/web/src/types/sounds.ts
@@ -1,39 +1,39 @@
 export interface SoundEffect {
-  id: number;
-  name: string;
-  description: string;
-  url: string;
-  previewUrl?: string;
-  downloadUrl?: string;
-  duration: number;
-  filesize: number;
-  type: string;
-  channels: number;
-  bitrate: number;
-  bitdepth: number;
-  samplerate: number;
-  username: string;
-  tags: string[];
-  license: string;
-  created: string;
-  downloads: number;
-  rating: number;
-  ratingCount: number;
+	id: number;
+	name: string;
+	description: string;
+	url: string;
+	previewUrl?: string;
+	downloadUrl?: string;
+	duration: number;
+	filesize: number;
+	type: string;
+	channels: number;
+	bitrate: number;
+	bitdepth: number;
+	samplerate: number;
+	username: string;
+	tags: string[];
+	license: string;
+	created: string;
+	downloads: number;
+	rating: number;
+	ratingCount: number;
 }
 
 export interface SavedSound {
-  id: number; // freesound id
-  name: string;
-  username: string;
-  previewUrl?: string;
-  downloadUrl?: string;
-  duration: number;
-  tags: string[];
-  license: string;
-  savedAt: string; // iso date string
+	id: number; // freesound id
+	name: string;
+	username: string;
+	previewUrl?: string;
+	downloadUrl?: string;
+	duration: number;
+	tags: string[];
+	license: string;
+	savedAt: string; // iso date string
 }
 
 export interface SavedSoundsData {
-  sounds: SavedSound[];
-  lastModified: string;
+	sounds: SavedSound[];
+	lastModified: string;
 }
diff --git a/apps/web/src/types/stickers.ts b/apps/web/src/types/stickers.ts
index a6f82a33..c6adfd7a 100644
--- a/apps/web/src/types/stickers.ts
+++ b/apps/web/src/types/stickers.ts
@@ -1,3 +1,3 @@
-import { STICKER_CATEGORIES } from "@/constants/stickers-constants";
+import type { STICKER_CATEGORIES } from "@/constants/stickers-constants";
 
 export type StickerCategory = (typeof STICKER_CATEGORIES)[number];
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index 4fd9c71a..e5845528 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -1,190 +1,190 @@
 export interface TScene {
-  id: string;
-  name: string;
-  isMain: boolean;
-  tracks: TimelineTrack[];
-  bookmarks: number[];
-  createdAt: Date;
-  updatedAt: Date;
+	id: string;
+	name: string;
+	isMain: boolean;
+	tracks: TimelineTrack[];
+	bookmarks: number[];
+	createdAt: Date;
+	updatedAt: Date;
 }
 
 export type TrackType = "video" | "text" | "audio" | "sticker";
 
 interface BaseTrack {
-  id: string;
-  name: string;
+	id: string;
+	name: string;
 }
 
 export interface VideoTrack extends BaseTrack {
-  type: "video";
-  elements: (VideoElement | ImageElement)[];
-  isMain: boolean;
-  muted: boolean;
-  hidden: boolean;
+	type: "video";
+	elements: (VideoElement | ImageElement)[];
+	isMain: boolean;
+	muted: boolean;
+	hidden: boolean;
 }
 
 export interface TextTrack extends BaseTrack {
-  type: "text";
-  elements: TextElement[];
-  hidden: boolean;
+	type: "text";
+	elements: TextElement[];
+	hidden: boolean;
 }
 
 export interface AudioTrack extends BaseTrack {
-  type: "audio";
-  elements: AudioElement[];
-  muted: boolean;
+	type: "audio";
+	elements: AudioElement[];
+	muted: boolean;
 }
 
 export interface StickerTrack extends BaseTrack {
-  type: "sticker";
-  elements: StickerElement[];
-  hidden: boolean;
+	type: "sticker";
+	elements: StickerElement[];
+	hidden: boolean;
 }
 
 export type TimelineTrack = VideoTrack | TextTrack | AudioTrack | StickerTrack;
 
 export interface Transform {
-  scale: number;
-  position: {
-    x: number;
-    y: number;
-  };
-  rotate: number;
+	scale: number;
+	position: {
+		x: number;
+		y: number;
+	};
+	rotate: number;
 }
 
 interface BaseAudioElement extends BaseTimelineElement {
-  type: "audio";
-  volume: number;
-  muted?: boolean;
-  buffer?: AudioBuffer;
+	type: "audio";
+	volume: number;
+	muted?: boolean;
+	buffer?: AudioBuffer;
 }
 
 export interface UploadAudioElement extends BaseAudioElement {
-  sourceType: "upload";
-  mediaId: string;
+	sourceType: "upload";
+	mediaId: string;
 }
 
 export interface LibraryAudioElement extends BaseAudioElement {
-  sourceType: "library";
-  sourceUrl: string;
+	sourceType: "library";
+	sourceUrl: string;
 }
 
 interface BaseTimelineElement {
-  id: string;
-  name: string;
-  duration: number;
-  startTime: number;
-  trimStart: number;
-  trimEnd: number;
+	id: string;
+	name: string;
+	duration: number;
+	startTime: number;
+	trimStart: number;
+	trimEnd: number;
 }
 
 export type AudioElement = UploadAudioElement | LibraryAudioElement;
 
 export interface VideoElement extends BaseTimelineElement {
-  type: "video";
-  mediaId: string;
-  muted?: boolean;
-  hidden?: boolean;
-  transform: Transform;
-  opacity: number;
+	type: "video";
+	mediaId: string;
+	muted?: boolean;
+	hidden?: boolean;
+	transform: Transform;
+	opacity: number;
 }
 
 export interface ImageElement extends BaseTimelineElement {
-  type: "image";
-  mediaId: string;
-  hidden?: boolean;
-  transform: Transform;
-  opacity: number;
+	type: "image";
+	mediaId: string;
+	hidden?: boolean;
+	transform: Transform;
+	opacity: number;
 }
 
 export interface TextElement extends BaseTimelineElement {
-  type: "text";
-  content: string;
-  fontSize: number;
-  fontFamily: string;
-  color: string;
-  backgroundColor: string;
-  textAlign: "left" | "center" | "right";
-  fontWeight: "normal" | "bold";
-  fontStyle: "normal" | "italic";
-  textDecoration: "none" | "underline" | "line-through";
-  hidden?: boolean;
-  transform: Transform;
-  opacity: number;
+	type: "text";
+	content: string;
+	fontSize: number;
+	fontFamily: string;
+	color: string;
+	backgroundColor: string;
+	textAlign: "left" | "center" | "right";
+	fontWeight: "normal" | "bold";
+	fontStyle: "normal" | "italic";
+	textDecoration: "none" | "underline" | "line-through";
+	hidden?: boolean;
+	transform: Transform;
+	opacity: number;
 }
 
 export interface StickerElement extends BaseTimelineElement {
-  type: "sticker";
-  iconName: string;
-  hidden?: boolean;
-  transform: Transform;
-  opacity: number;
-  color?: string;
+	type: "sticker";
+	iconName: string;
+	hidden?: boolean;
+	transform: Transform;
+	opacity: number;
+	color?: string;
 }
 
 export type TimelineElement =
-  | AudioElement
-  | VideoElement
-  | ImageElement
-  | TextElement
-  | StickerElement;
+	| AudioElement
+	| VideoElement
+	| ImageElement
+	| TextElement
+	| StickerElement;
 
 export type ElementType = TimelineElement["type"];
 
 export type CreateUploadAudioElement = Omit<UploadAudioElement, "id">;
 export type CreateLibraryAudioElement = Omit<LibraryAudioElement, "id">;
 export type CreateAudioElement =
-  | CreateUploadAudioElement
-  | CreateLibraryAudioElement;
+	| CreateUploadAudioElement
+	| CreateLibraryAudioElement;
 export type CreateVideoElement = Omit<VideoElement, "id">;
 export type CreateImageElement = Omit<ImageElement, "id">;
 export type CreateTextElement = Omit<TextElement, "id">;
 export type CreateStickerElement = Omit<StickerElement, "id">;
 export type CreateTimelineElement =
-  | CreateAudioElement
-  | CreateVideoElement
-  | CreateImageElement
-  | CreateTextElement
-  | CreateStickerElement;
+	| CreateAudioElement
+	| CreateVideoElement
+	| CreateImageElement
+	| CreateTextElement
+	| CreateStickerElement;
 
 // ---- Drag State ----
 
 export interface ElementDragState {
-  isDragging: boolean;
-  elementId: string | null;
-  trackId: string | null;
-  startMouseX: number;
-  startMouseY: number;
-  startElementTime: number;
-  clickOffsetTime: number;
-  currentTime: number;
-  currentMouseY: number;
+	isDragging: boolean;
+	elementId: string | null;
+	trackId: string | null;
+	startMouseX: number;
+	startMouseY: number;
+	startElementTime: number;
+	clickOffsetTime: number;
+	currentTime: number;
+	currentMouseY: number;
 }
 
 export interface DropTarget {
-  trackIndex: number;
-  isNewTrack: boolean;
-  insertPosition: "above" | "below" | null;
-  xPosition: number;
+	trackIndex: number;
+	isNewTrack: boolean;
+	insertPosition: "above" | "below" | null;
+	xPosition: number;
 }
 
 export interface ComputeDropTargetParams {
-  elementType: ElementType;
-  mouseX: number;
-  mouseY: number;
-  tracks: TimelineTrack[];
-  playheadTime: number;
-  isExternalDrop: boolean;
-  elementDuration: number;
-  pixelsPerSecond: number;
-  zoomLevel: number;
-  verticalDragDirection?: "up" | "down" | null;
-  startTimeOverride?: number;
-  excludeElementId?: string;
+	elementType: ElementType;
+	mouseX: number;
+	mouseY: number;
+	tracks: TimelineTrack[];
+	playheadTime: number;
+	isExternalDrop: boolean;
+	elementDuration: number;
+	pixelsPerSecond: number;
+	zoomLevel: number;
+	verticalDragDirection?: "up" | "down" | null;
+	startTimeOverride?: number;
+	excludeElementId?: string;
 }
 
 export interface ClipboardItem {
-  trackId: string;
-  trackType: TrackType;
-  element: CreateTimelineElement;
+	trackId: string;
+	trackType: TrackType;
+	element: CreateTimelineElement;
 }
diff --git a/apps/web/src/types/transcription.ts b/apps/web/src/types/transcription.ts
index 797bbd47..f189c6c9 100644
--- a/apps/web/src/types/transcription.ts
+++ b/apps/web/src/types/transcription.ts
@@ -1,43 +1,47 @@
+import type { LanguageCode } from "./language";
+
+export type TranscriptionLanguage = LanguageCode | "auto";
+
 export interface TranscriptionSegment {
-  text: string;
-  start: number;
-  end: number;
+	text: string;
+	start: number;
+	end: number;
 }
 
 export interface TranscriptionResult {
-  text: string;
-  segments: TranscriptionSegment[];
-  language: string;
+	text: string;
+	segments: TranscriptionSegment[];
+	language: string;
 }
 
 export type TranscriptionStatus =
-  | "idle"
-  | "loading-model"
-  | "transcribing"
-  | "complete"
-  | "error";
+	| "idle"
+	| "loading-model"
+	| "transcribing"
+	| "complete"
+	| "error";
 
 export interface TranscriptionProgress {
-  status: TranscriptionStatus;
-  progress: number;
-  message?: string;
+	status: TranscriptionStatus;
+	progress: number;
+	message?: string;
 }
 
 export type TranscriptionModelId =
-  | "whisper-tiny"
-  | "whisper-small"
-  | "whisper-medium"
-  | "whisper-large-v3-turbo";
+	| "whisper-tiny"
+	| "whisper-small"
+	| "whisper-medium"
+	| "whisper-large-v3-turbo";
 
 export interface TranscriptionModel {
-  id: TranscriptionModelId;
-  name: string;
-  huggingFaceId: string;
-  description: string;
+	id: TranscriptionModelId;
+	name: string;
+	huggingFaceId: string;
+	description: string;
 }
 
 export interface CaptionChunk {
-  text: string;
-  startTime: number;
-  duration: number;
+	text: string;
+	startTime: number;
+	duration: number;
 }
diff --git a/apps/web/src/utils/browser.ts b/apps/web/src/utils/browser.ts
index e0942574..2b9aa297 100644
--- a/apps/web/src/utils/browser.ts
+++ b/apps/web/src/utils/browser.ts
@@ -1,17 +1,17 @@
 export function isTypableDOMElement({
-  element,
+	element,
 }: {
-  element: HTMLElement;
+	element: HTMLElement;
 }): boolean {
-  if (element.isContentEditable) return true;
+	if (element.isContentEditable) return true;
 
-  if (element.tagName === "INPUT") {
-    return !(element as HTMLInputElement).disabled;
-  }
+	if (element.tagName === "INPUT") {
+		return !(element as HTMLInputElement).disabled;
+	}
 
-  if (element.tagName === "TEXTAREA") {
-    return !(element as HTMLTextAreaElement).disabled;
-  }
+	if (element.tagName === "TEXTAREA") {
+		return !(element as HTMLTextAreaElement).disabled;
+	}
 
-  return false;
+	return false;
 }
diff --git a/apps/web/src/utils/date.ts b/apps/web/src/utils/date.ts
index 6f3e10a5..6a7e9ca5 100644
--- a/apps/web/src/utils/date.ts
+++ b/apps/web/src/utils/date.ts
@@ -1,7 +1,7 @@
 export function formatDate({ date }: { date: Date }): string {
-  return date.toLocaleDateString("en-US", {
-    month: "short",
-    day: "numeric",
-    year: "numeric",
-  });
+	return date.toLocaleDateString("en-US", {
+		month: "short",
+		day: "numeric",
+		year: "numeric",
+	});
 }
diff --git a/apps/web/src/utils/geometry.ts b/apps/web/src/utils/geometry.ts
index 622c5057..23fc4f46 100644
--- a/apps/web/src/utils/geometry.ts
+++ b/apps/web/src/utils/geometry.ts
@@ -1,13 +1,13 @@
 export function dimensionToAspectRatio({
-  width,
-  height,
+	width,
+	height,
 }: {
-  width: number;
-  height: number;
+	width: number;
+	height: number;
 }): string {
-  const gcd = (a: number, b: number): number => (b === 0 ? a : gcd(b, a % b));
-  const divisor = gcd(width, height);
-  const aspectWidth = width / divisor;
-  const aspectHeight = height / divisor;
-  return `${aspectWidth}:${aspectHeight}`;
+	const gcd = (a: number, b: number): number => (b === 0 ? a : gcd(b, a % b));
+	const divisor = gcd(width, height);
+	const aspectWidth = width / divisor;
+	const aspectHeight = height / divisor;
+	return `${aspectWidth}:${aspectHeight}`;
 }
diff --git a/apps/web/src/utils/id.ts b/apps/web/src/utils/id.ts
index e315e09e..e452af43 100644
--- a/apps/web/src/utils/id.ts
+++ b/apps/web/src/utils/id.ts
@@ -1,28 +1,28 @@
 export function generateUUID(): string {
-  if (
-    typeof crypto !== "undefined" &&
-    typeof crypto.randomUUID === "function"
-  ) {
-    return crypto.randomUUID();
-  }
+	if (
+		typeof crypto !== "undefined" &&
+		typeof crypto.randomUUID === "function"
+	) {
+		return crypto.randomUUID();
+	}
 
-  const bytes = new Uint8Array(16);
-  crypto.getRandomValues(bytes);
+	const bytes = new Uint8Array(16);
+	crypto.getRandomValues(bytes);
 
-  bytes[6] = (bytes[6] & 0x0f) | 0x40;
-  bytes[8] = (bytes[8] & 0x3f) | 0x80;
+	bytes[6] = (bytes[6] & 0x0f) | 0x40;
+	bytes[8] = (bytes[8] & 0x3f) | 0x80;
 
-  const hex = [...bytes].map((b) => b.toString(16).padStart(2, "0"));
+	const hex = [...bytes].map((b) => b.toString(16).padStart(2, "0"));
 
-  return (
-    hex.slice(0, 4).join("") +
-    "-" +
-    hex.slice(4, 6).join("") +
-    "-" +
-    hex.slice(6, 8).join("") +
-    "-" +
-    hex.slice(8, 10).join("") +
-    "-" +
-    hex.slice(10, 16).join("")
-  );
+	return (
+		hex.slice(0, 4).join("") +
+		"-" +
+		hex.slice(4, 6).join("") +
+		"-" +
+		hex.slice(6, 8).join("") +
+		"-" +
+		hex.slice(8, 10).join("") +
+		"-" +
+		hex.slice(10, 16).join("")
+	);
 }
diff --git a/apps/web/src/utils/math.ts b/apps/web/src/utils/math.ts
index fd92dc20..012ac747 100644
--- a/apps/web/src/utils/math.ts
+++ b/apps/web/src/utils/math.ts
@@ -1,11 +1,11 @@
 export function clamp({
-  value,
-  min,
-  max,
+	value,
+	min,
+	max,
 }: {
-  value: number;
-  min: number;
-  max: number;
+	value: number;
+	min: number;
+	max: number;
 }): number {
-  return Math.max(min, Math.min(max, value));
+	return Math.max(min, Math.min(max, value));
 }
diff --git a/apps/web/src/utils/platform.ts b/apps/web/src/utils/platform.ts
index 0ed90b46..3b1f748b 100644
--- a/apps/web/src/utils/platform.ts
+++ b/apps/web/src/utils/platform.ts
@@ -1,11 +1,11 @@
 export function getPlatformSpecialKey(): string {
-  return isAppleDevice() ? "⌘" : "Ctrl";
+	return isAppleDevice() ? "⌘" : "Ctrl";
 }
 
 export function getPlatformAlternateKey(): string {
-  return isAppleDevice() ? "⌥" : "Alt";
+	return isAppleDevice() ? "⌥" : "Alt";
 }
 
 export function isAppleDevice(): boolean {
-  return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
+	return /(Mac|iPhone|iPod|iPad)/i.test(navigator.platform);
 }
diff --git a/apps/web/src/utils/strings.ts b/apps/web/src/utils/strings.ts
index daa80535..893456ed 100644
--- a/apps/web/src/utils/strings.ts
+++ b/apps/web/src/utils/strings.ts
@@ -1,7 +1,7 @@
 export function capitalizeFirstLetter({ string }: { string: string }) {
-  return string.charAt(0).toUpperCase() + string.slice(1);
+	return string.charAt(0).toUpperCase() + string.slice(1);
 }
 
 export function uppercase({ string }: { string: string }) {
-  return string.toUpperCase();
+	return string.toUpperCase();
 }
diff --git a/apps/web/src/utils/ui.ts b/apps/web/src/utils/ui.ts
index a70ebb68..a92aab43 100644
--- a/apps/web/src/utils/ui.ts
+++ b/apps/web/src/utils/ui.ts
@@ -2,5 +2,5 @@ import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
+	return twMerge(clsx(inputs));
 }
diff --git a/biome.json b/biome.json
new file mode 100644
index 00000000..798ab9d2
--- /dev/null
+++ b/biome.json
@@ -0,0 +1,45 @@
+{
+	"$schema": "https://biomejs.dev/schemas/2.1.2/schema.json",
+	"vcs": {
+		"enabled": false,
+		"clientKind": "git",
+		"useIgnoreFile": false
+	},
+	"files": {
+		"ignoreUnknown": false,
+		"includes": [
+			"**",
+			"!**/.next/**",
+			"!**/node_modules/**",
+			"!**/dist/**",
+			"!**/build/**",
+			"!**/apps/web/public/ffmpeg/**",
+			"!**/apps/web/src/components/ui/**"
+		]
+	},
+	"formatter": {
+		"enabled": true,
+		"indentStyle": "tab",
+		"lineWidth": 80
+	},
+	"linter": {
+		"enabled": true,
+		"rules": {
+			"recommended": true
+		}
+	},
+	"javascript": {
+		"formatter": {
+			"quoteStyle": "double"
+			
+		}
+	},
+	"assist": {
+		"enabled": true,
+		"actions": {
+			"source": {
+				"organizeImports": "off"
+			}
+		}
+	}
+}
diff --git a/bun.lock b/bun.lock
index 785e0587..e7127c2a 100644
--- a/bun.lock
+++ b/bun.lock
@@ -8,8 +8,6 @@
         "next": "^16.1.3",
       },
       "devDependencies": {
-        "prettier": "^3.8.0",
-        "prettier-plugin-tailwindcss": "^0.7.2",
         "turbo": "^2.7.5",
         "typescript": "5.8.3",
       },
@@ -27,7 +25,9 @@
         "@opencut/env": "workspace:*",
         "@opencut/ui": "workspace:*",
         "@radix-ui/react-dialog": "^1.1.15",
-        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-separator": "^1.1.8",
+        "@radix-ui/react-slot": "^1.2.4",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@upstash/ratelimit": "^2.0.6",
         "@upstash/redis": "^1.35.4",
         "@vercel/analytics": "^1.4.1",
@@ -43,7 +43,7 @@
         "eventemitter3": "^5.0.1",
         "feed": "^5.1.0",
         "input-otp": "^1.4.1",
-        "lucide-react": "^0.468.0",
+        "lucide-react": "^0.562.0",
         "mediabunny": "^1.29.1",
         "motion": "^12.18.1",
         "nanoid": "^5.1.5",
@@ -53,7 +53,6 @@
         "postgres": "^3.4.5",
         "radix-ui": "^1.4.2",
         "react": "^18.2.0",
-        "react-country-flag": "^3.1.0",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.2.0",
         "react-hook-form": "^7.54.0",
@@ -89,8 +88,6 @@
         "dotenv": "^16.5.0",
         "drizzle-kit": "^0.31.4",
         "postcss": "^8",
-        "prettier": "^3.6.2",
-        "prettier-plugin-tailwindcss": "^0.6.14",
         "tailwindcss": "^4.1.11",
         "tsx": "^4.7.1",
         "typescript": "^5.8.3",
@@ -113,6 +110,7 @@
       "name": "@opencut/ui",
       "version": "0.0.0",
       "dependencies": {
+        "@iconify/react": "^6.0.2",
         "@types/react": "^19.2.7",
         "react": "^19.2.0",
       },
@@ -224,6 +222,10 @@
 
     "@huggingface/transformers": ["@huggingface/transformers@3.8.1", "", { "dependencies": { "@huggingface/jinja": "^0.5.3", "onnxruntime-node": "1.21.0", "onnxruntime-web": "1.22.0-dev.20250409-89f8206ba4", "sharp": "^0.34.1" } }, "sha512-tsTk4zVjImqdqjS8/AOZg2yNLd1z9S5v+7oUPpXaasDRwEDhB+xnglK1k5cad26lL5/ZIaeREgWWy0bs9y9pPA=="],
 
+    "@iconify/react": ["@iconify/react@6.0.2", "", { "dependencies": { "@iconify/types": "^2.0.0" }, "peerDependencies": { "react": ">=16" } }, "sha512-SMmC2sactfpJD427WJEDN6PMyznTFMhByK9yLW0gOTtnjzzbsi/Ke/XqsumsavFPwNiXs8jSiYeZTmLCLwO+Fg=="],
+
+    "@iconify/types": ["@iconify/types@2.0.0", "", {}, "sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg=="],
+
     "@img/colour": ["@img/colour@1.0.0", "", {}, "sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw=="],
 
     "@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.34.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.2.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-imtQ3WMJXbMY4fxb/Ndp6HBTNVtWCUI0WdobyheGf5+ad6xX8VIDO8u2xE4qc/fr08CKG/7dDseFtn6M6g/r3w=="],
@@ -392,7 +394,7 @@
 
     "@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw=="],
 
-    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+    "@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
 
     "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
 
@@ -410,11 +412,11 @@
 
     "@radix-ui/react-select": ["@radix-ui/react-select@2.2.5", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA=="],
 
-    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA=="],
+    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-sDvqVY4itsKwwSMEe0jtKgfTh+72Sy3gPmQpjqcQneqQ4PFmr/1I0YA+2/puilhggCe2gJcx5EBAYFkWkdpa5g=="],
 
     "@radix-ui/react-slider": ["@radix-ui/react-slider@1.3.5", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.2", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw=="],
 
-    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
     "@radix-ui/react-switch": ["@radix-ui/react-switch@1.2.5", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-use-size": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ=="],
 
@@ -428,7 +430,7 @@
 
     "@radix-ui/react-toolbar": ["@radix-ui/react-toolbar@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.10", "@radix-ui/react-separator": "1.1.7", "@radix-ui/react-toggle-group": "1.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-jiwQsduEL++M4YBIurjSa+voD86OIytCod0/dbIxFZDLD8NfO1//keXYMfsW8BPcfqwoNjt+y06XcJqAb4KR7A=="],
 
-    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw=="],
+    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
 
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
@@ -812,7 +814,7 @@
 
     "loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
 
-    "lucide-react": ["lucide-react@0.468.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" } }, "sha512-6koYRhnM2N0GGZIdXzSeiNwguv1gt/FAjZOiPl76roBi3xKEXa4WmfpxgQwTTL4KipXjefrnf3oV4IsYhi4JFA=="],
+    "lucide-react": ["lucide-react@0.562.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-82hOAu7y0dbVuFfmO4bYF1XEwYk/mEbM5E+b1jgci/udUBEE/R7LF5Ip0CCEmXe8AybRM8L+04eP+LGZeDvkiw=="],
 
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
@@ -950,10 +952,6 @@
 
     "postgres-interval": ["postgres-interval@1.2.0", "", { "dependencies": { "xtend": "^4.0.0" } }, "sha512-9ZhXKM/rw350N1ovuWHbGxnGh/SNJ4cnxHiM0rxE4VN41wsg8P8zWn9hv/buK00RP4WvlOyr/RBDiptyxVbkZQ=="],
 
-    "prettier": ["prettier@3.8.0", "", { "bin": { "prettier": "bin/prettier.cjs" } }, "sha512-yEPsovQfpxYfgWNhCfECjG5AQaO+K3dp6XERmOepyPDVqcJm+bjyCVO3pmU+nAPe0N5dDvekfGezt/EIiRe1TA=="],
-
-    "prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.7.2", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-svelte"] }, "sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA=="],
-
     "prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
 
     "property-information": ["property-information@7.1.0", "", {}, "sha512-TwEZ+X+yCJmYfL7TPUOcvBZ4QfoT5YenQiJuX//0th53DE6w0xxLEtfK3iyryQFddXuvkIk51EEgrJQ0WJkOmQ=="],
@@ -966,8 +964,6 @@
 
     "react": ["react@19.2.0", "", {}, "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ=="],
 
-    "react-country-flag": ["react-country-flag@3.1.0", "", { "peerDependencies": { "react": ">=16" } }, "sha512-JWQFw1efdv9sTC+TGQvTKXQg1NKbDU2mBiAiRWcKM9F1sK+/zjhP2yGmm8YDddWyZdXVkR8Md47rPMJmo4YO5g=="],
-
     "react-day-picker": ["react-day-picker@8.10.1", "", { "peerDependencies": { "date-fns": "^2.28.0 || ^3.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, "sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA=="],
 
     "react-dom": ["react-dom@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.2" }, "peerDependencies": { "react": "^18.3.1" } }, "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw=="],
@@ -1158,8 +1154,6 @@
 
     "@opencut/web/@types/react": ["@types/react@18.3.23", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.0.2" } }, "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w=="],
 
-    "@opencut/web/prettier-plugin-tailwindcss": ["prettier-plugin-tailwindcss@0.6.14", "", { "peerDependencies": { "@ianvs/prettier-plugin-sort-imports": "*", "@prettier/plugin-hermes": "*", "@prettier/plugin-oxc": "*", "@prettier/plugin-pug": "*", "@shopify/prettier-plugin-liquid": "*", "@trivago/prettier-plugin-sort-imports": "*", "@zackad/prettier-plugin-twig": "*", "prettier": "^3.0", "prettier-plugin-astro": "*", "prettier-plugin-css-order": "*", "prettier-plugin-import-sort": "*", "prettier-plugin-jsdoc": "*", "prettier-plugin-marko": "*", "prettier-plugin-multiline-arrays": "*", "prettier-plugin-organize-attributes": "*", "prettier-plugin-organize-imports": "*", "prettier-plugin-sort-imports": "*", "prettier-plugin-style-order": "*", "prettier-plugin-svelte": "*" }, "optionalPeers": ["@ianvs/prettier-plugin-sort-imports", "@prettier/plugin-hermes", "@prettier/plugin-oxc", "@prettier/plugin-pug", "@shopify/prettier-plugin-liquid", "@trivago/prettier-plugin-sort-imports", "@zackad/prettier-plugin-twig", "prettier-plugin-astro", "prettier-plugin-css-order", "prettier-plugin-import-sort", "prettier-plugin-jsdoc", "prettier-plugin-marko", "prettier-plugin-multiline-arrays", "prettier-plugin-organize-attributes", "prettier-plugin-organize-imports", "prettier-plugin-sort-imports", "prettier-plugin-style-order", "prettier-plugin-svelte"] }, "sha512-pi2e/+ZygeIqntN+vC573BcW5Cve8zUB0SSAGxqpB4f96boZF4M3phPVoOFCeypwkpRYdi7+jQ5YJJUwrkGUAg=="],
-
     "@opencut/web/react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
 
     "@opencut/web/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
@@ -1170,6 +1164,8 @@
 
     "@radix-ui/react-alert-dialog/@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.14", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-focus-guards": "1.1.2", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw=="],
 
+    "@radix-ui/react-alert-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-checkbox/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
     "@radix-ui/react-checkbox/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
@@ -1178,8 +1174,12 @@
 
     "@radix-ui/react-collapsible/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
 
+    "@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-context-menu/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
+    "@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-dropdown-menu/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
     "@radix-ui/react-form/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
@@ -1188,6 +1188,8 @@
 
     "@radix-ui/react-hover-card/@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ=="],
 
+    "@radix-ui/react-hover-card/@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+
     "@radix-ui/react-hover-card/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
 
     "@radix-ui/react-menu/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
@@ -1196,8 +1198,12 @@
 
     "@radix-ui/react-menu/@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
 
+    "@radix-ui/react-menu/@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+
     "@radix-ui/react-menu/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
 
+    "@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-menubar/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
     "@radix-ui/react-navigation-menu/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
@@ -1216,8 +1222,14 @@
 
     "@radix-ui/react-popover/@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
 
+    "@radix-ui/react-popover/@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+
     "@radix-ui/react-popover/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
 
+    "@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "@radix-ui/react-radio-group/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
     "@radix-ui/react-radio-group/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
@@ -1234,6 +1246,12 @@
 
     "@radix-ui/react-select/@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
 
+    "@radix-ui/react-select/@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+
+    "@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "@radix-ui/react-separator/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
+
     "@radix-ui/react-slider/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
     "@radix-ui/react-switch/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
@@ -1254,11 +1272,9 @@
 
     "@radix-ui/react-toolbar/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
 
-    "@radix-ui/react-tooltip/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
+    "@radix-ui/react-toolbar/@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA=="],
 
-    "@radix-ui/react-tooltip/@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.10", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ=="],
-
-    "@radix-ui/react-tooltip/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
+    "@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
     "@tailwindcss/oxide/detect-libc": ["detect-libc@2.0.4", "", {}, "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA=="],
 
@@ -1304,8 +1320,16 @@
 
     "radix-ui/@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
 
+    "radix-ui/@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.7", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ=="],
+
     "radix-ui/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
 
+    "radix-ui/@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA=="],
+
+    "radix-ui/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
+    "radix-ui/@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.7", "", { "dependencies": { "@radix-ui/primitive": "1.1.2", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.10", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.7", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.4", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw=="],
+
     "react-day-picker/react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
 
     "react-dom/react": ["react@18.3.1", "", { "dependencies": { "loose-envify": "^1.1.0" } }, "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ=="],
@@ -1380,6 +1404,8 @@
 
     "cmdk/@radix-ui/react-dialog/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
 
+    "cmdk/@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
+
     "next/postcss/nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="],
 
     "vaul/@radix-ui/react-dialog/@radix-ui/primitive": ["@radix-ui/primitive@1.1.2", "", {}, "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA=="],
@@ -1389,5 +1415,7 @@
     "vaul/@radix-ui/react-dialog/@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-fyjAACV62oPV925xFCrH8DR5xWhg9KYtJT4s3u54jxp+L/hbpTY2kIeEFFbFe+a/HCE94zGQMZLIpVTPVZDhaA=="],
 
     "vaul/@radix-ui/react-dialog/@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA=="],
+
+    "vaul/@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
   }
 }
diff --git a/html/design1.html b/html/design1.html
new file mode 100644
index 00000000..07fe7145
--- /dev/null
+++ b/html/design1.html
@@ -0,0 +1,319 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projects - Brand Design</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        
+        /* Brand Colors */
+        :root {
+            --brand-blue: #00A3FF;
+        }
+
+        .project-card:hover .card-actions { opacity: 1; }
+        .checkbox-wrapper:checked + div { border-color: var(--brand-blue); background-color: #eff6ff; }
+        .controls-row.has-selection .controls-select { opacity: 1; }
+        .project-select-wrapper { opacity: 0; }
+        .project-card:hover .project-select-wrapper { opacity: 1; }
+        .project-card:has(.project-select:checked) .project-select-wrapper { opacity: 1; }
+        .multi-select .project-menu { opacity: 0 !important; pointer-events: none; }
+        
+        /* Custom Checkbox - Softer and Rounder */
+        .custom-checkbox {
+            appearance: none;
+            background-color: #fff;
+            border: 2px solid #e2e8f0;
+            border-radius: 8px; /* Rounder checkbox */
+            display: inline-grid;
+            place-content: center;
+        }
+        .custom-checkbox:checked {
+            background-color: var(--brand-blue);
+            border-color: var(--brand-blue);
+        }
+        .custom-checkbox:checked::after {
+            content: "";
+            width: 10px;
+            height: 10px;
+            background-color: #fff;
+            clip-path: polygon(14% 44%, 0 58%, 40% 100%, 100% 24%, 86% 10%, 40% 70%);
+        }
+    </style>
+</head>
+<body class="bg-[#ffffff] text-slate-900 h-screen flex overflow-hidden">
+
+    <!-- Sidebar -->
+    <aside class="w-64 bg-white border-r border-slate-100 flex flex-col flex-shrink-0">
+        <div class="p-6 pl-8 flex items-center gap-3">
+            <img src="../apps/web/public/logos/opencut/1k/logo-black.png" alt="OpenCut Logo" class="size-6">
+            <span class="font-semibold text-lg tracking-tight text-slate-900">OpenCut</span>
+        </div>
+
+        <nav class="flex-1 px-4 space-y-2 mt-2">
+            <a href="#" class="flex items-center gap-3 px-4 py-3 text-sm font-medium bg-blue-50/50 text-[#00A3FF] rounded-2xl">
+                <i data-lucide="layout-grid" class="w-5 h-5"></i>
+                Projects
+            </a>
+            <div class="pt-6 pb-2 px-4">
+                <p class="text-xs font-bold text-slate-400 uppercase tracking-wider">Folders</p>
+            </div>
+            <a href="#" class="flex items-center gap-3 px-4 py-3 text-sm font-medium text-slate-500 hover:bg-slate-50 hover:text-slate-900 rounded-2xl">
+                <i data-lucide="folder" class="w-5 h-5 text-slate-400"></i>
+                Marketing
+            </a>
+            <a href="#" class="flex items-center gap-3 px-4 py-3 text-sm font-medium text-slate-500 hover:bg-slate-50 hover:text-slate-900 rounded-2xl">
+                <i data-lucide="folder" class="w-5 h-5 text-slate-400"></i>
+                Social media
+            </a>
+        </nav>
+
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col min-w-0">
+        <!-- Header -->
+        <header class="h-20 flex items-center justify-between px-8 flex-shrink-0">
+            <div class="flex items-center gap-4">
+                <h1 class="text-xl font-bold text-slate-900">All projects</h1>
+            </div>
+
+            <div class="flex items-center gap-4">
+                <div class="relative group">
+                    <i data-lucide="search" class="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
+                    <input type="text" placeholder="Search..." class="w-64 bg-white border border-slate-200 text-slate-900 text-sm rounded-full pl-10 pr-4 py-2.5 focus:outline-none focus:border-[#00A3FF] focus:ring-4 focus:ring-blue-500/10 placeholder:text-slate-400 shadow-sm">
+                </div>
+                
+                <div class="flex bg-white rounded-full border border-slate-200 p-1 shadow-sm">
+                    <button class="p-2 rounded-full bg-slate-100 text-slate-900 shadow-sm">
+                        <i data-lucide="layout-grid" class="w-4 h-4"></i>
+                    </button>
+                    <button class="p-2 rounded-full text-slate-400 hover:text-slate-600">
+                        <i data-lucide="list" class="w-4 h-4"></i>
+                    </button>
+                </div>
+
+                <button class="bg-[#00A3FF] hover:bg-[#008BE0] text-white px-5 py-2.5 rounded-full text-sm font-semibold flex items-center gap-2 active:scale-95">
+                    <i data-lucide="plus" class="w-4 h-4"></i>
+                    New project
+                </button>
+            </div>
+        </header>
+
+        <!-- Content Area -->
+        <div class="flex-1 overflow-y-auto px-8 pb-8">
+
+            <!-- Controls Row (Select all + Sort) -->
+            <div id="controls-row" class="controls-row group mb-4 flex items-center gap-3 text-slate-700">
+                <div class="flex items-center gap-2">
+                    <label class="flex items-center gap-3 text-sm font-medium cursor-pointer select-none p-1 rounded-lg">
+                        <input id="select-all" type="checkbox" class="custom-checkbox controls-select size-5" />
+                        <span class="text-slate-500 group-hover:text-slate-700">Select all</span>
+                    </label>
+                </div>
+                <div class="h-4 w-px bg-slate-200 mx-2"></div>
+                <button type="button" class="inline-flex items-center gap-1.5 rounded-lg p-1 text-sm font-medium text-slate-500 hover:text-slate-900">
+                    Name
+                    <i data-lucide="arrow-down" class="size-3.5"></i>
+                </button>
+            </div>
+
+            <!-- Grid -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
+
+                <!-- Project Card 1 -->
+                <div class="project-card group rounded-[24px] overflow-hidden relative h-auto flex flex-col">
+                    
+                    <!-- Selection Checkbox -->
+                    <div class="project-select-wrapper absolute top-4 left-4 z-20">
+                        <input type="checkbox" class="custom-checkbox project-select w-6 h-6 cursor-pointer shadow-md" onchange="toggleSelection(this)">
+                    </div>
+                    
+                    <!-- Menu -->
+                    <div class="project-menu absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100">
+                        <button class="p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:bg-white text-slate-600 hover:text-[#00A3FF]">
+                            <i data-lucide="more-horizontal" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+
+                    <!-- Thumbnail -->
+                    <div class="aspect-video bg-slate-50 relative overflow-hidden m-1 rounded-lg">
+                        <img src="C:\Users\heart\Downloads\download.jpg" class="w-full h-full object-cover" alt="Project">
+                        <div class="absolute bottom-2 right-2 bg-black/60 text-white text-[11px] font-semibold px-2 py-1 rounded-lg">
+                            02:14
+                        </div>
+                    </div>
+
+                    <!-- Info -->
+                    <div class="px-2 pb-5 pt-3 flex-1 flex flex-col justify-between">
+                        <div>
+                            <h3 class="font-semibold text-slate-900 truncate text-[15px]">Summer Vlog 2025</h3>
+                            <div class="flex items-center gap-2 mt-2 text-slate-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" className="">
+                                    <circle cx="12" cy="12" r="10" />
+                                    <path d="M12 8V12L14 14" />
+                                </svg>
+                                <p class="text-xs font-medium">Created Jan 20, 2026</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Project Card 2 -->
+                <div class="project-card group rounded-[24px] overflow-hidden relative h-auto flex flex-col">
+                    <!-- Selection Checkbox -->
+                    <div class="project-select-wrapper absolute top-4 left-4 z-20">
+                        <input type="checkbox" class="custom-checkbox project-select w-6 h-6 cursor-pointer shadow-md" onchange="toggleSelection(this)">
+                    </div>
+                    <!-- Menu -->
+                    <div class="project-menu absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100">
+                        <button class="p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:bg-white text-slate-600 hover:text-[#00A3FF]">
+                            <i data-lucide="more-horizontal" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+
+                    <div class="aspect-video bg-slate-50 relative overflow-hidden m-1 rounded-lg">
+                        <img src="C:\Users\heart\Downloads\download.jpg" class="w-full h-full object-cover" alt="Project">
+                        <div class="absolute bottom-2 right-2 bg-black/60 text-white text-[11px] font-semibold px-2 py-1 rounded-lg">
+                            00:45
+                        </div>
+                    </div>
+
+                    <div class="px-2 pb-5 pt-3 flex-1 flex flex-col justify-between">
+                        <div>
+                            <h3 class="font-semibold text-slate-900 truncate text-[15px]">Product Launch Teaser</h3>
+                            <div class="flex items-center gap-2 mt-2 text-slate-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" className="">
+                                    <circle cx="12" cy="12" r="10" />
+                                    <path d="M12 8V12L14 14" />
+                                </svg>
+                                <p class="text-xs font-medium">Created Jan 20, 2026</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                 <!-- Project Card 3 -->
+                 <div class="project-card group rounded-[24px] overflow-hidden relative h-auto flex flex-col">
+                    <!-- Selection Checkbox -->
+                    <div class="project-select-wrapper absolute top-4 left-4 z-20">
+                        <input type="checkbox" class="custom-checkbox project-select w-6 h-6 cursor-pointer shadow-md" onchange="toggleSelection(this)">
+                    </div>
+                    <!-- Menu -->
+                    <div class="project-menu absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100">
+                        <button class="p-2 bg-white/90 backdrop-blur-sm rounded-full shadow-sm hover:bg-white text-slate-600 hover:text-[#00A3FF]">
+                            <i data-lucide="more-horizontal" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+
+                    <div class="aspect-video bg-slate-50 relative overflow-hidden m-1 rounded-lg">
+                        <img src="C:\Users\heart\Downloads\download.jpg" class="w-full h-full object-cover" alt="Project">
+                         <div class="absolute bottom-2 right-2 bg-black/60 text-white text-[11px] font-semibold px-2 py-1 rounded-lg">
+                            03:30
+                        </div>
+                    </div>
+
+                    <div class="px-2 pb-5 pt-3 flex-1 flex flex-col justify-between">
+                        <div>
+                            <h3 class="font-semibold text-slate-900 truncate text-[15px]">Podcast Ep. 4</h3>
+                            <div class="flex items-center gap-2 mt-2 text-slate-400">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="size-4" width="24" height="24" color="currentColor" fill="none" stroke="currentColor" stroke-width="1.5" className="">
+    <circle cx="12" cy="12" r="10" />
+    <path d="M12 8V12L14 14" />
+</svg>
+                                <p class="text-xs font-medium">Created Jan 18, 2026</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+    </main>
+
+    <script>
+        lucide.createIcons();
+        
+        const selectedProjectIds = new Set();
+
+        function getProjectId({ card, index }) {
+            return card.getAttribute('data-project-id') ?? `project-${index}`;
+        }
+
+
+        function updateControlsSelectionState() {
+            const controlsRow = document.getElementById('controls-row');
+            const selectAll = document.getElementById('select-all');
+            const projectCheckboxes = document.querySelectorAll('.project-select');
+            if (!controlsRow || !selectAll) {
+                return;
+            }
+            const selectedCount = selectedProjectIds.size;
+            document.body.classList.toggle('multi-select', selectedCount > 1);
+            controlsRow.classList.toggle('has-selection', selectedCount > 0);
+            const totalCount = projectCheckboxes.length;
+            selectAll.checked = selectedCount > 0 && selectedCount === totalCount;
+            selectAll.indeterminate = selectedCount > 0 && selectedCount < totalCount;
+        }
+
+        function syncSelectionState() {
+            const projectCards = Array.from(document.querySelectorAll('.project-card'));
+            for (const [index, card] of projectCards.entries()) {
+                const checkbox = card.querySelector('.project-select');
+                if (!checkbox) {
+                    continue;
+                }
+                const projectId = getProjectId({ card, index });
+                const isSelected = selectedProjectIds.has(projectId);
+                checkbox.checked = isSelected;
+            }
+            updateControlsSelectionState();
+        }
+
+        function toggleSelection(checkbox) {
+            const card = checkbox.closest('.project-card');
+            if (!card) {
+                return;
+            }
+            const projectCards = Array.from(document.querySelectorAll('.project-card'));
+            const projectId = getProjectId({
+                card,
+                index: projectCards.indexOf(card),
+            });
+            if (checkbox.checked) {
+                selectedProjectIds.add(projectId);
+            } else {
+                selectedProjectIds.delete(projectId);
+            }
+            syncSelectionState();
+        }
+
+        function toggleSelectAll({ isSelected }) {
+            const projectCards = Array.from(document.querySelectorAll('.project-card'));
+            if (!isSelected) {
+                selectedProjectIds.clear();
+                syncSelectionState();
+                return;
+            }
+            for (const [index, card] of projectCards.entries()) {
+                selectedProjectIds.add(getProjectId({ card, index }));
+            }
+            syncSelectionState();
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const selectAll = document.getElementById('select-all');
+            if (selectAll) {
+                selectAll.addEventListener('change', () => {
+                    toggleSelectAll({ isSelected: selectAll.checked });
+                });
+            }
+            syncSelectionState();
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/design2.html b/html/design2.html
new file mode 100644
index 00000000..ae1ac98f
--- /dev/null
+++ b/html/design2.html
@@ -0,0 +1,301 @@
+<!DOCTYPE html>
+<html lang="en" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projects - Design 2</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');
+        body { font-family: 'Inter', sans-serif; background-color: #09090b; color: #e4e4e7; }
+        .font-mono { font-family: 'JetBrains Mono', monospace; }
+        
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #09090b; }
+        ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #3f3f46; }
+    </style>
+    <script>
+        tailwind.config = {
+            darkMode: 'class',
+            theme: {
+                extend: {
+                    colors: {
+                        zinc: {
+                            850: '#1f1f22',
+                            900: '#18181b',
+                            950: '#09090b',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="h-screen flex overflow-hidden selection:bg-indigo-500/30">
+
+    <!-- Sidebar -->
+    <aside class="w-72 bg-zinc-950 border-r border-zinc-800 flex flex-col flex-shrink-0">
+        <!-- Brand -->
+        <div class="h-14 flex items-center px-4 border-b border-zinc-900">
+            <div class="flex items-center gap-2 text-zinc-100">
+                <div class="w-6 h-6 bg-indigo-600 rounded flex items-center justify-center">
+                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
+                </div>
+                <span class="font-bold tracking-tight">STUDIO</span>
+                <span class="text-xs font-mono text-zinc-500 ml-auto">v2.4</span>
+            </div>
+        </div>
+
+        <!-- User -->
+        <div class="p-3">
+            <button class="w-full flex items-center gap-3 p-2 rounded-lg hover:bg-zinc-900 transition-colors text-left group">
+                <div class="w-8 h-8 rounded bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-xs font-bold text-white shadow-lg shadow-indigo-900/20">
+                    JD
+                </div>
+                <div class="flex-1 min-w-0">
+                    <div class="text-sm font-medium text-zinc-200 truncate">John Doe</div>
+                    <div class="text-xs text-zinc-500 truncate group-hover:text-zinc-400">Pro Plan</div>
+                </div>
+                <i data-lucide="chevron-down" class="w-4 h-4 text-zinc-600"></i>
+            </button>
+        </div>
+
+        <!-- Nav -->
+        <nav class="flex-1 overflow-y-auto px-3 py-2 space-y-6">
+            <div>
+                <div class="text-[10px] font-bold text-zinc-600 uppercase tracking-wider mb-2 px-2">Workspace</div>
+                <div class="space-y-0.5">
+                    <a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium bg-zinc-900 text-indigo-400 rounded-md border border-zinc-800/50">
+                        <i data-lucide="grid" class="w-4 h-4"></i>
+                        Projects
+                    </a>
+                    <a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
+                        <i data-lucide="film" class="w-4 h-4"></i>
+                        Media Library
+                    </a>
+                    <a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm font-medium text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
+                        <i data-lucide="wand-2" class="w-4 h-4"></i>
+                        Templates
+                    </a>
+                </div>
+            </div>
+
+            <div>
+                <div class="flex items-center justify-between px-2 mb-2 group">
+                    <div class="text-[10px] font-bold text-zinc-600 uppercase tracking-wider">Folders</div>
+                    <button class="text-zinc-600 hover:text-zinc-300 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <i data-lucide="plus" class="w-3 h-3"></i>
+                    </button>
+                </div>
+                <div class="space-y-0.5">
+                    <a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
+                        <i data-lucide="folder" class="w-4 h-4 text-zinc-700"></i>
+                        Client Work
+                    </a>
+                    <a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
+                        <i data-lucide="folder" class="w-4 h-4 text-purple-900/50"></i>
+                        Personal
+                    </a>
+                    <a href="#" class="flex items-center gap-2 px-2 py-1.5 text-sm text-zinc-400 hover:text-zinc-200 hover:bg-zinc-900/50 rounded-md transition-colors">
+                        <i data-lucide="folder" class="w-4 h-4 text-zinc-700"></i>
+                        Archive 2024
+                    </a>
+                </div>
+            </div>
+        </nav>
+
+        <!-- Storage Status -->
+        <div class="p-4 border-t border-zinc-900">
+            <div class="flex items-center justify-between text-xs mb-2">
+                <span class="text-zinc-400">Storage</span>
+                <span class="text-zinc-500">75%</span>
+            </div>
+            <div class="h-1 bg-zinc-800 rounded-full overflow-hidden">
+                <div class="h-full bg-indigo-600 w-3/4"></div>
+            </div>
+            <div class="mt-2 text-[10px] text-zinc-600">15GB of 20GB used</div>
+        </div>
+    </aside>
+
+    <!-- Main -->
+    <main class="flex-1 flex flex-col min-w-0 bg-zinc-950">
+        <!-- Top Bar -->
+        <header class="h-14 border-b border-zinc-800 flex items-center justify-between px-6 bg-zinc-950/50 backdrop-blur sticky top-0 z-20">
+            <div class="flex items-center gap-4">
+                <h1 class="text-sm font-semibold text-zinc-100">All Projects</h1>
+                <div class="h-4 w-px bg-zinc-800"></div>
+                <div class="flex items-center gap-2 text-xs text-zinc-500">
+                    <span>Sort by:</span>
+                    <button class="flex items-center gap-1 text-zinc-300 hover:text-white">
+                        Last Modified
+                        <i data-lucide="chevron-down" class="w-3 h-3"></i>
+                    </button>
+                </div>
+            </div>
+
+            <div class="flex items-center gap-3">
+                <div class="relative">
+                    <i data-lucide="search" class="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-zinc-500"></i>
+                    <input type="text" placeholder="Search..." class="w-64 bg-zinc-900 border border-zinc-800 text-zinc-300 text-sm rounded-md pl-9 pr-3 py-1.5 focus:outline-none focus:border-indigo-500/50 focus:ring-1 focus:ring-indigo-500/50 transition-all placeholder:text-zinc-600">
+                </div>
+                <div class="flex bg-zinc-900 rounded-md border border-zinc-800 p-0.5">
+                    <button class="p-1.5 rounded bg-zinc-800 text-zinc-200 shadow-sm">
+                        <i data-lucide="layout-grid" class="w-3.5 h-3.5"></i>
+                    </button>
+                    <button class="p-1.5 rounded text-zinc-500 hover:text-zinc-300">
+                        <i data-lucide="list" class="w-3.5 h-3.5"></i>
+                    </button>
+                </div>
+                <button class="bg-indigo-600 hover:bg-indigo-500 text-white px-3 py-1.5 rounded-md text-sm font-medium flex items-center gap-2 transition-colors shadow-lg shadow-indigo-900/20">
+                    <i data-lucide="plus" class="w-3.5 h-3.5"></i>
+                    New
+                </button>
+            </div>
+        </header>
+
+        <!-- Content -->
+        <div class="flex-1 overflow-y-auto p-6">
+            
+            <!-- Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+
+                <!-- Project Card 1 -->
+                <div class="group relative bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-lg overflow-hidden transition-all hover:shadow-xl hover:shadow-black/50">
+                    <!-- Hover Actions -->
+                    <div class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
+                        <button class="p-1.5 bg-black/80 backdrop-blur rounded text-zinc-400 hover:text-white hover:bg-black">
+                            <i data-lucide="more-vertical" class="w-3.5 h-3.5"></i>
+                        </button>
+                    </div>
+                    
+                    <!-- Selection -->
+                    <div class="absolute top-2 left-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity">
+                         <div class="bg-black/50 backdrop-blur rounded p-0.5">
+                            <input type="checkbox" class="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-zinc-900">
+                        </div>
+                    </div>
+
+                    <!-- Thumbnail -->
+                    <div class="aspect-video bg-zinc-950 relative group-hover:opacity-90 transition-opacity">
+                        <img src="https://images.unsplash.com/photo-1626814026160-2237a95fc5a0?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover" alt="Project">
+                        <!-- Progress Bar -->
+                        <div class="absolute bottom-0 left-0 right-0 h-1 bg-zinc-800/50">
+                            <div class="h-full bg-indigo-500 w-1/3"></div>
+                        </div>
+                        <div class="absolute bottom-2 right-2 bg-black/80 text-zinc-300 text-[10px] font-mono px-1.5 py-0.5 rounded border border-white/10">
+                            1080p
+                        </div>
+                    </div>
+
+                    <!-- Meta -->
+                    <div class="p-3">
+                        <div class="flex items-start justify-between gap-2">
+                            <h3 class="text-sm font-medium text-zinc-200 truncate group-hover:text-white transition-colors">Cyberpunk Intro</h3>
+                            <span class="text-[10px] text-zinc-500 font-mono whitespace-nowrap">00:15</span>
+                        </div>
+                        <div class="mt-2 flex items-center justify-between">
+                            <div class="flex items-center gap-2 text-[11px] text-zinc-500">
+                                <span class="w-2 h-2 rounded-full bg-green-500/20 border border-green-500/50"></span>
+                                2h ago
+                            </div>
+                            <div class="flex -space-x-1.5">
+                                <div class="w-5 h-5 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">JD</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Project Card 2 -->
+                <div class="group relative bg-zinc-900 border border-zinc-800 hover:border-zinc-700 rounded-lg overflow-hidden transition-all hover:shadow-xl hover:shadow-black/50">
+                    <div class="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
+                        <button class="p-1.5 bg-black/80 backdrop-blur rounded text-zinc-400 hover:text-white hover:bg-black">
+                            <i data-lucide="more-vertical" class="w-3.5 h-3.5"></i>
+                        </button>
+                    </div>
+                    
+                    <div class="aspect-video bg-zinc-950 relative group-hover:opacity-90 transition-opacity flex items-center justify-center">
+                        <div class="absolute inset-0 bg-gradient-to-br from-zinc-800 to-zinc-900"></div>
+                        <i data-lucide="clapperboard" class="w-8 h-8 text-zinc-700"></i>
+                        <div class="absolute bottom-2 right-2 bg-black/80 text-zinc-300 text-[10px] font-mono px-1.5 py-0.5 rounded border border-white/10">
+                            4K
+                        </div>
+                    </div>
+
+                    <div class="p-3">
+                        <div class="flex items-start justify-between gap-2">
+                            <h3 class="text-sm font-medium text-zinc-200 truncate group-hover:text-white transition-colors">Documentary_Final_v2</h3>
+                            <span class="text-[10px] text-zinc-500 font-mono whitespace-nowrap">45:20</span>
+                        </div>
+                        <div class="mt-2 flex items-center justify-between">
+                            <div class="flex items-center gap-2 text-[11px] text-zinc-500">
+                                <span class="w-2 h-2 rounded-full bg-yellow-500/20 border border-yellow-500/50"></span>
+                                1d ago
+                            </div>
+                            <div class="flex -space-x-1.5">
+                                <div class="w-5 h-5 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">JD</div>
+                                <div class="w-5 h-5 rounded-full bg-indigo-900 border border-zinc-900 flex items-center justify-center text-[8px] text-indigo-200">AK</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Project Card 3 (Selected) -->
+                <div class="group relative bg-zinc-800/50 border border-indigo-500/50 rounded-lg overflow-hidden transition-all shadow-lg shadow-indigo-900/10">
+                    <div class="absolute top-2 right-2 z-10 opacity-100 flex gap-1">
+                        <button class="p-1.5 bg-black/80 backdrop-blur rounded text-zinc-400 hover:text-white hover:bg-black">
+                            <i data-lucide="more-vertical" class="w-3.5 h-3.5"></i>
+                        </button>
+                    </div>
+                    
+                    <div class="absolute top-2 left-2 z-10 opacity-100">
+                         <div class="bg-black/50 backdrop-blur rounded p-0.5">
+                            <input type="checkbox" checked class="w-4 h-4 rounded border-zinc-600 bg-zinc-800 text-indigo-600 focus:ring-indigo-500 focus:ring-offset-zinc-900">
+                        </div>
+                    </div>
+
+                    <div class="aspect-video bg-zinc-950 relative">
+                        <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover opacity-80" alt="Project">
+                         <div class="absolute inset-0 ring-1 ring-inset ring-indigo-500/20"></div>
+                    </div>
+
+                    <div class="p-3">
+                        <div class="flex items-start justify-between gap-2">
+                            <h3 class="text-sm font-medium text-indigo-200 truncate">Tech Review 2025</h3>
+                            <span class="text-[10px] text-zinc-500 font-mono whitespace-nowrap">12:00</span>
+                        </div>
+                        <div class="mt-2 flex items-center justify-between">
+                            <div class="flex items-center gap-2 text-[11px] text-zinc-500">
+                                <span class="w-2 h-2 rounded-full bg-blue-500/20 border border-blue-500/50"></span>
+                                5h ago
+                            </div>
+                            <div class="flex -space-x-1.5">
+                                <div class="w-5 h-5 rounded-full bg-zinc-800 border border-zinc-900 flex items-center justify-center text-[8px] text-zinc-400">JD</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+        <!-- Footer / Status Bar -->
+        <footer class="h-8 border-t border-zinc-800 bg-zinc-950 flex items-center px-4 justify-between text-[10px] text-zinc-500 select-none">
+            <div class="flex items-center gap-4">
+                <span>3 Projects</span>
+                <span>1 Selected</span>
+            </div>
+            <div class="flex items-center gap-4">
+                <span class="flex items-center gap-1"><div class="w-1.5 h-1.5 rounded-full bg-green-500"></div> Online</span>
+                <span>v2.4.0</span>
+            </div>
+        </footer>
+    </main>
+
+    <script>
+        lucide.createIcons();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/design3.html b/html/design3.html
new file mode 100644
index 00000000..bbcf6450
--- /dev/null
+++ b/html/design3.html
@@ -0,0 +1,217 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Projects - Design 3</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
+        body { font-family: 'Space Grotesk', sans-serif; }
+        .border-b-1 { border-bottom-width: 1px; }
+        
+        /* Brutalist hover effect */
+        .project-row:hover {
+            background-color: #000;
+            color: #fff;
+        }
+        .project-row:hover .meta-text { color: #9ca3af; }
+        .project-row:hover .icon-btn { color: #fff; border-color: #fff; }
+        
+        /* Custom Checkbox */
+        .custom-checkbox {
+            appearance: none;
+            width: 1.25rem;
+            height: 1.25rem;
+            border: 2px solid #000;
+            cursor: pointer;
+            position: relative;
+        }
+        .custom-checkbox:checked {
+            background-color: #000;
+        }
+        .custom-checkbox:checked::after {
+            content: '✓';
+            color: #fff;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 0.8rem;
+        }
+        .project-row:hover .custom-checkbox { border-color: #fff; }
+        .project-row:hover .custom-checkbox:checked { background-color: #fff; }
+        .project-row:hover .custom-checkbox:checked::after { color: #000; }
+    </style>
+</head>
+<body class="bg-white text-black min-h-screen flex flex-col">
+
+    <!-- Navigation -->
+    <nav class="border-b-2 border-black h-20 flex items-center justify-between px-8 sticky top-0 bg-white z-50">
+        <div class="flex items-center gap-12">
+            <a href="#" class="text-3xl font-bold tracking-tighter uppercase">Editor<span class="text-gray-400">.</span></a>
+            <div class="hidden md:flex gap-8 text-sm font-medium tracking-wide">
+                <a href="#" class="uppercase border-b-2 border-black pb-1">Projects</a>
+                <a href="#" class="uppercase text-gray-400 hover:text-black transition-colors">Assets</a>
+                <a href="#" class="uppercase text-gray-400 hover:text-black transition-colors">Team</a>
+            </div>
+        </div>
+        <div class="flex items-center gap-6">
+            <div class="relative group">
+                <input type="text" placeholder="SEARCH" class="border-b-2 border-gray-200 focus:border-black outline-none py-1 w-48 text-sm uppercase placeholder-gray-300 transition-all">
+                <i data-lucide="search" class="absolute right-0 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-300 group-focus-within:text-black"></i>
+            </div>
+            <button class="w-10 h-10 border-2 border-black rounded-full flex items-center justify-center hover:bg-black hover:text-white transition-colors">
+                <span class="font-bold text-sm">JD</span>
+            </button>
+        </div>
+    </nav>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex flex-col max-w-7xl mx-auto w-full px-8 py-12">
+        
+        <!-- Header Actions -->
+        <div class="flex items-end justify-between mb-16">
+            <div>
+                <h1 class="text-6xl font-bold tracking-tighter mb-4">WORK</h1>
+                <p class="text-xl text-gray-500 max-w-md leading-relaxed">Manage your creative output. Organize, edit, and publish your stories.</p>
+            </div>
+            <div class="flex gap-4">
+                <button class="px-8 py-4 border-2 border-black font-bold uppercase tracking-wider hover:bg-black hover:text-white transition-all flex items-center gap-3">
+                    <i data-lucide="plus" class="w-5 h-5"></i>
+                    New Project
+                </button>
+            </div>
+        </div>
+
+        <!-- Filters / Sort -->
+        <div class="flex items-center justify-between border-b-2 border-black pb-4 mb-0">
+            <div class="flex gap-8 text-sm font-bold uppercase tracking-wider">
+                <button class="text-black">All (12)</button>
+                <button class="text-gray-400 hover:text-black">Drafts (4)</button>
+                <button class="text-gray-400 hover:text-black">Published (8)</button>
+            </div>
+            <div class="flex items-center gap-4">
+                <button class="p-2 hover:bg-gray-100 rounded">
+                    <i data-lucide="layout-list" class="w-5 h-5"></i>
+                </button>
+                <button class="p-2 text-gray-400 hover:text-black">
+                    <i data-lucide="layout-grid" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </div>
+
+        <!-- List View (Table-ish) -->
+        <div class="flex flex-col">
+            <!-- Header Row -->
+            <div class="grid grid-cols-12 gap-4 py-4 border-b border-gray-200 text-xs font-bold uppercase text-gray-400 tracking-wider">
+                <div class="col-span-1 flex justify-center">
+                    <input type="checkbox" class="custom-checkbox">
+                </div>
+                <div class="col-span-5">Project Name</div>
+                <div class="col-span-2">Last Edited</div>
+                <div class="col-span-2">Duration</div>
+                <div class="col-span-2 text-right">Actions</div>
+            </div>
+
+            <!-- Row 1 -->
+            <div class="project-row group grid grid-cols-12 gap-4 py-6 border-b border-gray-200 items-center transition-colors cursor-pointer">
+                <div class="col-span-1 flex justify-center">
+                    <input type="checkbox" class="custom-checkbox">
+                </div>
+                <div class="col-span-5 flex items-center gap-6">
+                    <div class="w-24 h-16 bg-gray-100 overflow-hidden relative border border-gray-200 group-hover:border-white/20">
+                        <img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all" alt="Thumb">
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-bold uppercase tracking-tight">Nike Commercial_V3</h3>
+                        <span class="text-xs text-gray-400 meta-text uppercase tracking-wider">Client: Nike</span>
+                    </div>
+                </div>
+                <div class="col-span-2 font-mono text-sm text-gray-500 meta-text">Today, 10:23 AM</div>
+                <div class="col-span-2 font-mono text-sm text-gray-500 meta-text">00:30:00</div>
+                <div class="col-span-2 flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+                        <i data-lucide="pencil" class="w-3 h-3"></i>
+                    </button>
+                    <button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+                        <i data-lucide="trash-2" class="w-3 h-3"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Row 2 -->
+            <div class="project-row group grid grid-cols-12 gap-4 py-6 border-b border-gray-200 items-center transition-colors cursor-pointer bg-gray-50">
+                <div class="col-span-1 flex justify-center">
+                    <input type="checkbox" class="custom-checkbox" checked>
+                </div>
+                <div class="col-span-5 flex items-center gap-6">
+                    <div class="w-24 h-16 bg-gray-100 overflow-hidden relative border border-gray-200 group-hover:border-white/20">
+                        <img src="https://images.unsplash.com/photo-1558655146-d09347e0b7a8?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3" class="w-full h-full object-cover grayscale group-hover:grayscale-0 transition-all" alt="Thumb">
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-bold uppercase tracking-tight">Fashion Week Recap</h3>
+                        <span class="text-xs text-gray-400 meta-text uppercase tracking-wider">Personal</span>
+                    </div>
+                </div>
+                <div class="col-span-2 font-mono text-sm text-gray-500 meta-text">Yesterday</div>
+                <div class="col-span-2 font-mono text-sm text-gray-500 meta-text">02:15:00</div>
+                <div class="col-span-2 flex justify-end gap-2 opacity-100 md:opacity-0 md:group-hover:opacity-100 transition-opacity">
+                    <button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+                        <i data-lucide="pencil" class="w-3 h-3"></i>
+                    </button>
+                    <button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+                        <i data-lucide="trash-2" class="w-3 h-3"></i>
+                    </button>
+                </div>
+            </div>
+
+            <!-- Row 3 -->
+            <div class="project-row group grid grid-cols-12 gap-4 py-6 border-b border-gray-200 items-center transition-colors cursor-pointer">
+                <div class="col-span-1 flex justify-center">
+                    <input type="checkbox" class="custom-checkbox">
+                </div>
+                <div class="col-span-5 flex items-center gap-6">
+                    <div class="w-24 h-16 bg-gray-100 overflow-hidden relative border border-gray-200 group-hover:border-white/20">
+                         <div class="w-full h-full flex items-center justify-center bg-gray-200 text-gray-400">
+                            <i data-lucide="film" class="w-6 h-6"></i>
+                         </div>
+                    </div>
+                    <div>
+                        <h3 class="text-lg font-bold uppercase tracking-tight">Untitled Project 04</h3>
+                        <span class="text-xs text-gray-400 meta-text uppercase tracking-wider">Draft</span>
+                    </div>
+                </div>
+                <div class="col-span-2 font-mono text-sm text-gray-500 meta-text">Oct 24, 2025</div>
+                <div class="col-span-2 font-mono text-sm text-gray-500 meta-text">--:--:--</div>
+                <div class="col-span-2 flex justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+                        <i data-lucide="pencil" class="w-3 h-3"></i>
+                    </button>
+                    <button class="icon-btn w-8 h-8 border border-gray-300 rounded-full flex items-center justify-center hover:bg-white hover:text-black transition-colors">
+                        <i data-lucide="trash-2" class="w-3 h-3"></i>
+                    </button>
+                </div>
+            </div>
+
+        </div>
+
+        <!-- Selection Action Bar (Sticky Bottom) -->
+        <div class="fixed bottom-8 left-1/2 -translate-x-1/2 bg-black text-white px-8 py-4 flex items-center gap-8 shadow-2xl z-50">
+            <span class="font-mono text-sm uppercase tracking-wider">1 Selected</span>
+            <div class="h-4 w-px bg-gray-700"></div>
+            <div class="flex gap-6">
+                <button class="hover:text-gray-300 uppercase text-sm font-bold tracking-wider">Delete</button>
+                <button class="hover:text-gray-300 uppercase text-sm font-bold tracking-wider">Duplicate</button>
+                <button class="hover:text-gray-300 uppercase text-sm font-bold tracking-wider">Archive</button>
+            </div>
+        </div>
+
+    </main>
+
+    <script>
+        lucide.createIcons();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/html/dropdown_designs.html b/html/dropdown_designs.html
new file mode 100644
index 00000000..11212633
--- /dev/null
+++ b/html/dropdown_designs.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Dropdown Options</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');
+        body { font-family: 'Inter', sans-serif; }
+        
+        :root {
+            --brand-blue: #00A3FF;
+        }
+
+        /* Utility to hide/show */
+        .dropdown-menu { display: none; }
+        .dropdown-menu.open { display: block; }
+        
+        /* Custom scrollbar for dropdowns if needed */
+        .custom-scroll::-webkit-scrollbar { width: 4px; }
+        .custom-scroll::-webkit-scrollbar-track { background: transparent; }
+        .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+    </style>
+</head>
+<body class="bg-[#ffffff] text-slate-900 min-h-screen p-12">
+
+    <div class="max-w-6xl mx-auto space-y-4 mb-12">
+        <h1 class="text-2xl font-bold">Dropdown Design Explorations</h1>
+        <p class="text-slate-500">Single interaction for the same brand language. Click the button to toggle.</p>
+    </div>
+
+    <div class="grid grid-cols-1 gap-16 items-start max-w-6xl mx-auto">
+
+        <!-- Option 1: The "Soft & Minimal" -->
+        <!-- Characteristics: Extra rounded corners, blue text on hover, very subtle dividers -->
+        <div class="space-y-4">
+            <h2 class="text-sm font-bold text-slate-400 uppercase tracking-wider">Option 1: Soft & Minimal</h2>
+            <div class="relative w-72">
+                <button onclick="toggle(1)" class="w-72 bg-white border border-slate-200 px-3 py-2 rounded-2xl flex items-center justify-between font-medium text-slate-700 hover:border-slate-300 hover:text-slate-900 shadow-sm">
+                    <span>Sort by</span>
+                    <i data-lucide="chevron-down" class="w-4 h-4 text-slate-400"></i>
+                </button>
+
+                <div id="menu-1" class="dropdown-menu absolute top-full left-0 mt-2 w-72 bg-white rounded-[20px] shadow-lg border border-slate-200 overflow-hidden py-2 z-10">
+                    <div class="flex flex-col gap-0.5">
+                        <div class="px-2 pb-2 mb-2 border-b border-slate-50">
+                            <p class="text-[11px] font-bold text-slate-400 uppercase px-3 pt-2 pb-1">Order</p>
+                        </div>
+                        
+                        <a href="#" class="block px-4 py-2.5 mx-2 text-sm text-[#00A3FF] bg-blue-50 rounded-xl hover:bg-blue-50 hover:text-[#00A3FF] flex items-center justify-between group">
+                            <span>Date created</span>
+                            <i data-lucide="check" class="w-4 h-4 text-[#00A3FF]"></i>
+                        </a>
+                        <a href="#" class="block px-4 py-2.5 mx-2 text-sm text-slate-600 rounded-xl hover:bg-slate-50 flex items-center justify-between group">
+                            <span>Last modified</span>
+                        </a>
+                        <a href="#" class="block px-4 py-2.5 mx-2 text-sm text-slate-600 rounded-xl hover:bg-slate-50 flex items-center justify-between group">
+                            <span>Alphabetical</span>
+                        </a>
+                        
+                        <div class="h-px bg-slate-50 my-2 mx-2"></div>
+                        
+                        <a href="#" class="block px-4 py-2.5 mx-2 text-sm text-red-500 rounded-xl hover:bg-red-50 flex items-center gap-2">
+                            <i data-lucide="trash" class="w-4 h-4"></i>
+                            <span>Reset sort</span>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+
+    </div>
+
+    <script>
+        lucide.createIcons();
+
+        function toggle(id) {
+            const menu = document.getElementById(`menu-${id}`);
+            if (menu) {
+                menu.classList.toggle('open');
+            }
+        }
+
+        // Close when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('button') && !e.target.closest('.dropdown-menu')) {
+                document.querySelectorAll('.dropdown-menu').forEach(el => el.classList.remove('open'));
+            }
+        });
+
+        // Open all by default for the demo view so user doesn't have to click
+        // toggle(1);
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/package.json b/package.json
index dca0ce35..8de84865 100644
--- a/package.json
+++ b/package.json
@@ -10,15 +10,16 @@
     "build:web": "turbo run build --filter=@opencut/web",
     "dev:tools": "turbo run dev --filter=@opencut/tools",
     "build:tools": "turbo run build --filter=@opencut/tools",
-    "start:tools": "turbo run start --filter=@opencut/tools"
+    "start:tools": "turbo run start --filter=@opencut/tools",
+    "lint:web": "biome lint apps/web/src --max-diagnostics=1000",
+    "lint:web:fix": "biome lint apps/web/src --write --max-diagnostics=1000",
+    "format:web": "biome format apps/web/src/services/renderer --write --max-diagnostics=1000"
   },
   "dependencies": {
     "better-auth": "^1.4.15",
     "next": "^16.1.3"
   },
   "devDependencies": {
-    "prettier": "^3.8.0",
-    "prettier-plugin-tailwindcss": "^0.7.2",
     "turbo": "^2.7.5",
     "typescript": "5.8.3"
   },
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d5fd27ba..059b78ce 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -9,6 +9,7 @@
     "./icons": "./src/icons/index.tsx"
   },
   "dependencies": {
+    "@iconify/react": "^6.0.2",
     "@types/react": "^19.2.7",
     "react": "^19.2.0"
   },
diff --git a/packages/ui/src/icons/base-icon.tsx b/packages/ui/src/icons/base-icon.tsx
new file mode 100644
index 00000000..9a63a4f6
--- /dev/null
+++ b/packages/ui/src/icons/base-icon.tsx
@@ -0,0 +1,31 @@
+import { useId, type ReactNode } from "react";
+import type { IconProps } from "./types";
+
+type BaseIconProps = Omit<IconProps, "title"> & {
+	title: string;
+	children: ReactNode;
+};
+
+export function BaseIcon({
+	title,
+	size = 24,
+	viewBox = "0 0 24 24",
+	children,
+	...props
+}: BaseIconProps) {
+	const titleId = useId();
+
+	return (
+		<svg
+			{...props}
+			width={size}
+			height={size}
+			viewBox={viewBox}
+			role="img"
+			aria-labelledby={titleId}
+		>
+			<title id={titleId}>{title}</title>
+			{children}
+		</svg>
+	);
+}
diff --git a/packages/ui/src/icons/create-icon.tsx b/packages/ui/src/icons/create-icon.tsx
new file mode 100644
index 00000000..262ffee7
--- /dev/null
+++ b/packages/ui/src/icons/create-icon.tsx
@@ -0,0 +1,47 @@
+import { BaseIcon } from "./base-icon";
+import type { IconDefinition, IconNode, IconProps } from "./types";
+import type { JSX } from "react";
+
+type CreateIconParams = {
+	definition: IconDefinition;
+};
+
+function renderIconNodes({ nodes }: { nodes: IconNode }) {
+	const elements: Array<JSX.Element> = [];
+
+	for (const [index, node] of nodes.entries()) {
+		const Element = node.element;
+		const children = node.children
+			? renderIconNodes({ nodes: node.children })
+			: undefined;
+
+		elements.push(
+			<Element key={`${node.element}-${index}`} {...node.props}>
+				{children}
+			</Element>,
+		);
+	}
+
+	return elements;
+}
+
+export function createIcon({ definition }: CreateIconParams) {
+	function Icon({ title, size, ...props }: IconProps) {
+		const iconTitle = title ?? definition.title;
+
+		return (
+			<BaseIcon
+				title={iconTitle}
+				size={size}
+				viewBox={definition.viewBox}
+				{...props}
+			>
+				{renderIconNodes({ nodes: definition.nodes })}
+			</BaseIcon>
+		);
+	}
+
+	Icon.displayName = `${definition.title}Icon`;
+
+	return Icon;
+}
diff --git a/packages/ui/src/icons/index.tsx b/packages/ui/src/icons/index.tsx
index 62109ca4..c95d07c8 100644
--- a/packages/ui/src/icons/index.tsx
+++ b/packages/ui/src/icons/index.tsx
@@ -1,289 +1,54 @@
-export function GoogleIcon({ className }: { className?: string }) {
-  return (
-    <svg className={className} viewBox="0 0 24 24">
-      <path
-        fill="#4285F4"
-        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-      />
-      <path
-        fill="#34A853"
-        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-      />
-      <path
-        fill="#FBBC05"
-        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
-      />
-      <path
-        fill="#EA4335"
-        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-      />
-    </svg>
-  );
-}
+import { createIcon } from "./create-icon";
+import { ICON_DEFINITIONS } from "./registry";
 
-export function GithubIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-      viewBox="0 -3.5 256 256"
-      preserveAspectRatio="xMinYMin meet"
-    >
-      <g fill="currentColor">
-        <path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0" />
+export const GoogleIcon = createIcon({
+	definition: ICON_DEFINITIONS.google,
+});
 
-        <path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398" />
-      </g>
-    </svg>
-  );
-}
+export const GithubIcon = createIcon({
+	definition: ICON_DEFINITIONS.github,
+});
 
-export function VercelIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      className={className}
-      width="20"
-      height="18"
-      viewBox="0 0 76 65"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M37.5274 0L75.0548 65H0L37.5274 0Z" fill="currentColor" />
-    </svg>
-  );
-}
+export const VercelIcon = createIcon({
+	definition: ICON_DEFINITIONS.vercel,
+});
 
-export function BackgroundIcon({ className }: { className?: string }) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="353"
-      height="353"
-      viewBox="0 0 353 353"
-      fill="none"
-      className={className}
-    >
-      <g clipPath="url(#clip0_1_3)">
-        <rect
-          x="-241.816"
-          y="233.387"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -241.816 233.387)"
-          fill="white"
-        />
-        <rect
-          x="-189.907"
-          y="306.804"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -189.907 306.804)"
-          fill="white"
-        />
-        <rect
-          x="-146.928"
-          y="389.501"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -146.928 389.501)"
-          fill="white"
-        />
-        <rect
-          x="-103.144"
-          y="477.904"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -103.144 477.904)"
-          fill="white"
-        />
-        <rect
-          x="-57.169"
-          y="570.714"
-          width="592.187"
-          height="17.765"
-          transform="rotate(-37 -57.169 570.714)"
-          fill="white"
-        />
-      </g>
-      <defs>
-        <clipPath id="clip0_1_3">
-          <rect width="353" height="353" fill="white" />
-        </clipPath>
-      </defs>
-    </svg>
-  );
-}
+export const DataBuddyIcon = createIcon({
+	definition: ICON_DEFINITIONS.databuddy,
+});
 
-export function MarbleIcon({
-  className = "",
-  size = 32,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      className={className}
-      fill="none"
-      viewBox="0 0 256 256"
-    >
-      <path fill="#202027" d="M0 0h256v256H0z" />
-      <path
-        fill="#fff"
-        d="M116.032 94.016q1.408.256 6.272 9.856 4.856 9.472 11.904 24.576l4.096 8.576a42.4 42.4 0 0 0 4.992-6.784q2.304-3.96 5.76-10.624 3.96-7.56 5.504-9.728 6.144-9.344 13.312-19.84.896-1.408 3.2-1.92a4.8 4.8 0 0 1 1.28-.128q3.072 0 6.784 2.56 3.84 2.56 4.992 5.248a4.8 4.8 0 0 1 .256 1.92q0 1.28-.128 1.92l-.64 2.944q-.256 1.664-.512 3.968a3200 3200 0 0 0-5.888 46.848 56 56 0 0 0-.512 8.064l-.256 4.096a32 32 0 0 0-.128 2.944q0 1.672-.384 2.304-.384.64-1.408.64-.768 0-2.304-.384-4.096-.896-6.272-3.2-2.176-2.432-2.432-6.656-.128-2.176-.128-6.784 0-4.736.256-14.464l.128-7.04.256-10.112q-1.152 1.024-5.888 8.064a328 328 0 0 0-9.088 14.464q-4.48 7.56-5.888 11.648-1.28 3.2-2.56 4.736-1.152 1.536-2.816 1.536-1.536 0-3.968-1.408-6.912-4.224-8.448-11.648a336 336 0 0 0-6.016-23.68 40 40 0 0 0-2.56-6.272q-1.792-3.968-2.304-4.992l-1.664-3.328q-18.68 24.832-25.344 45.568-1.28 4.352-2.432 6.272-1.152 1.792-2.688 1.792-2.432 0-6.912-4.352Q72 158.144 72 154.304q0-2.04.768-4.096a108 108 0 0 1 16-30.08l3.968-5.248a432 432 0 0 0 12.16-16.64q3.072-4.48 8.192-4.48.896 0 2.944.256"
-      />
-    </svg>
-  );
-}
+export const MarbleIcon = createIcon({
+	definition: ICON_DEFINITIONS.marble,
+});
 
-export function DataBuddyIcon({
-  className = "",
-  size = 32,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      className={className}
-      viewBox="0 0 8 8"
-      shapeRendering="crispEdges"
-    >
-      <path d="M0 0h8v8H0z" />
-      <path
-        fill="#fff"
-        d="M1 1h1v6H1zm1 0h4v1H2zm4 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zM2 6h4v1H2zm1-3h1v1H3zm1 1h1v1H4z"
-      />
-    </svg>
-  );
-}
+export const BackgroundIcon = createIcon({
+	definition: ICON_DEFINITIONS.background,
+});
 
-export function SocialsIcon({
-  className = "",
-  size = 32,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 345 243"
-      fill="none"
-      className={className}
-    >
-      <g opacity="0.5">
-        <path
-          d="M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z"
-          fill="#FFFC00"
-        />
-        <path
-          d="M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z"
-          fill="white"
-        />
-        <path
-          d="M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z"
-          stroke="black"
-          strokeWidth="7"
-        />
-        <path
-          d="M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z"
-          stroke="black"
-          strokeWidth="7"
-        />
-      </g>
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M133.5 4H321.5C334.48 4 345 14.5205 345 27.5V215.5C345 228.48 334.48 239 321.5 239H133.5C120.52 239 110 228.48 110 215.5V27.5C110 14.5205 120.52 4 133.5 4Z"
-        fill="#010101"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M261.497 99.4086C271.784 106.758 284.388 111.083 297.999 111.083V84.9035C295.423 84.9045 292.854 84.6357 290.333 84.1016V104.709C276.723 104.709 264.121 100.384 253.831 93.0345V146.459C253.831 173.185 232.155 194.85 205.417 194.85C195.44 194.85 186.167 191.835 178.464 186.665C187.256 195.65 199.516 201.224 213.08 201.224C239.821 201.224 261.498 179.56 261.498 152.833L261.497 99.4086ZM270.953 72.9965C265.696 67.2559 262.244 59.8365 261.497 51.634V48.267H254.233C256.061 58.6916 262.298 67.5981 270.953 72.9965ZM195.376 166.157C192.438 162.308 190.851 157.598 190.858 152.756C190.858 140.533 200.773 130.622 213.005 130.622C215.285 130.621 217.551 130.97 219.723 131.659V104.894C217.185 104.547 214.622 104.399 212.061 104.454V125.286C209.887 124.597 207.62 124.247 205.34 124.249C193.107 124.249 183.193 134.159 183.193 146.384C183.193 155.027 188.149 162.512 195.376 166.157Z"
-        fill="#EE1D52"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M253.831 93.0345C264.121 100.384 276.723 104.709 290.333 104.709V84.1016C282.736 82.4848 276.011 78.5162 270.953 72.9965C262.298 67.5981 256.061 58.6916 254.233 48.267H235.152V152.832C235.108 165.022 225.21 174.892 213.004 174.892C205.811 174.892 199.422 171.465 195.376 166.157C188.149 162.512 183.193 155.027 183.193 146.384C183.193 134.159 193.107 124.249 205.34 124.249C207.683 124.249 209.942 124.614 212.061 125.286V104.454C185.792 104.996 164.665 126.449 164.665 152.833C164.665 166.003 169.926 177.942 178.464 186.665C186.167 191.835 195.44 194.85 205.417 194.85C232.155 194.85 253.831 173.185 253.831 146.459V93.0345Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M290.333 84.1016V78.5293C283.482 78.5396 276.766 76.6229 270.953 72.9965C276.099 78.6269 282.874 82.5087 290.333 84.1016ZM254.233 48.267C254.058 47.2708 253.924 46.2679 253.831 45.2608V41.8938H227.485V146.459C227.443 158.648 217.545 168.518 205.339 168.518C201.754 168.518 198.372 167.669 195.376 166.157C199.422 171.465 205.811 174.892 213.004 174.892C225.21 174.892 235.108 165.022 235.152 152.832V48.267H254.233ZM212.061 104.454L212.061 98.5212C209.859 98.2202 207.64 98.0698 205.418 98.071C178.676 98.071 157 119.736 157 146.459C157 163.214 165.518 177.979 178.464 186.665C169.926 177.942 164.666 166.002 164.666 152.832C164.666 126.449 185.791 104.996 212.061 104.454Z"
-        fill="#69C9D0"
-      />
-    </svg>
-  );
-}
+export const SocialsIcon = createIcon({
+	definition: ICON_DEFINITIONS.socials,
+});
 
-export function TransitionUpIcon({
-  className = "",
-  size = 16,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 16 16"
-      fill="none"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2.5 12.6667C2.5 13.4951 3.17157 14.1667 4 14.1667H12C12.8284 14.1667 13.5 13.4951 13.5 12.6667V11.3333C13.5 10.5049 12.8284 9.83333 12 9.83333H4C3.17157 9.83333 2.5 10.5049 2.5 11.3333V12.6667ZM4 15.1667C2.61929 15.1667 1.5 14.0474 1.5 12.6667V11.3333C1.5 9.95262 2.61929 8.83333 4 8.83333H12C13.3807 8.83333 14.5 9.95262 14.5 11.3333V12.6667C14.5 14.0474 13.3807 15.1667 12 15.1667H4Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M2 5.83333C1.72386 5.83333 1.5 5.60947 1.5 5.33333L1.5 4C1.5 2.2511 2.91777 0.833332 4.66667 0.833332L11.3333 0.833332C13.0822 0.833332 14.5 2.2511 14.5 4V5.33333C14.5 5.60947 14.2761 5.83333 14 5.83333C13.7239 5.83333 13.5 5.60947 13.5 5.33333V4C13.5 2.80338 12.53 1.83333 11.3333 1.83333L4.66667 1.83333C3.47005 1.83333 2.5 2.80338 2.5 4V5.33333C2.5 5.60947 2.27614 5.83333 2 5.83333Z"
-        fill="white"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.35355 3.64645C8.15829 3.45118 7.84171 3.45118 7.64645 3.64645L5.64645 5.64645C5.45118 5.84171 5.45118 6.15829 5.64645 6.35355C5.84171 6.54882 6.15829 6.54882 6.35355 6.35355L7.5 5.20711L7.5 9.33333C7.5 9.60948 7.72386 9.83333 8 9.83333C8.27614 9.83333 8.5 9.60948 8.5 9.33333V5.20711L9.64645 6.35355C9.84171 6.54882 10.1583 6.54882 10.3536 6.35355C10.5488 6.15829 10.5488 5.84171 10.3536 5.64645L8.35355 3.64645Z"
-        fill="white"
-      />
-    </svg>
-  );
-}
+export const TransitionUpIcon = createIcon({
+	definition: ICON_DEFINITIONS.transitionUp,
+});
 
-export function MenuIcon({
-  className = "",
-  size = 16,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      viewBox="0 0 141 111"
-      fill="none"
-      className={className}
-    >
-      <rect y="19.5" width="141" height="12" rx="7.5" fill="currentColor" />
-      <rect y="67.5" width="141" height="12" rx="7.5" fill="currentColor" />
-    </svg>
-  );
-}
+export const MenuIcon = createIcon({
+	definition: ICON_DEFINITIONS.menu,
+});
+
+export const PencilIcon = createIcon({
+	definition: ICON_DEFINITIONS.pencil,
+});
+
+export const LeftArrowIcon = createIcon({
+	definition: ICON_DEFINITIONS.leftArrow,
+});
+
+export const TrashIcon = createIcon({
+	definition: ICON_DEFINITIONS.trash,
+});
+
+export type { IconDefinition, IconNode, IconProps } from "./types";
+export { BaseIcon } from "./base-icon";
+export { createIcon } from "./create-icon";
diff --git a/packages/ui/src/icons/registry/brand.ts b/packages/ui/src/icons/registry/brand.ts
new file mode 100644
index 00000000..be6f1984
--- /dev/null
+++ b/packages/ui/src/icons/registry/brand.ts
@@ -0,0 +1,116 @@
+import type { IconDefinition } from "../types";
+
+export const BRAND_ICONS = {
+	google: {
+		title: "Google",
+		viewBox: "0 0 24 24",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					fill: "#4285F4",
+					d: "M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fill: "#34A853",
+					d: "M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fill: "#FBBC05",
+					d: "M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fill: "#EA4335",
+					d: "M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z",
+				},
+			},
+		],
+	},
+	github: {
+		title: "GitHub",
+		viewBox: "0 -3.5 256 256",
+		nodes: [
+			{
+				element: "g",
+				props: {
+					fill: "currentColor",
+				},
+				children: [
+					{
+						element: "path",
+						props: {
+							d: "M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0",
+						},
+					},
+					{
+						element: "path",
+						props: {
+							d: "M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398",
+						},
+					},
+				],
+			},
+		],
+	},
+	vercel: {
+		title: "Vercel",
+		viewBox: "0 0 76 65",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					d: "M37.5274 0L75.0548 65H0L37.5274 0Z",
+					fill: "currentColor",
+				},
+			},
+		],
+	},
+	marble: {
+		title: "Marble",
+		viewBox: "0 0 256 256",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					fill: "#202027",
+					d: "M0 0h256v256H0z",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fill: "#fff",
+					d: "M116.032 94.016q1.408.256 6.272 9.856 4.856 9.472 11.904 24.576l4.096 8.576a42.4 42.4 0 0 0 4.992-6.784q2.304-3.96 5.76-10.624 3.96-7.56 5.504-9.728 6.144-9.344 13.312-19.84.896-1.408 3.2-1.92a4.8 4.8 0 0 1 1.28-.128q3.072 0 6.784 2.56 3.84 2.56 4.992 5.248a4.8 4.8 0 0 1 .256 1.92q0 1.28-.128 1.92l-.64 2.944q-.256 1.664-.512 3.968a3200 3200 0 0 0-5.888 46.848 56 56 0 0 0-.512 8.064l-.256 4.096a32 32 0 0 0-.128 2.944q0 1.672-.384 2.304-.384.64-1.408.64-.768 0-2.304-.384-4.096-.896-6.272-3.2-2.176-2.432-2.432-6.656-.128-2.176-.128-6.784 0-4.736.256-14.464l.128-7.04.256-10.112q-1.152 1.024-5.888 8.064a328 328 0 0 0-9.088 14.464q-4.48 7.56-5.888 11.648-1.28 3.2-2.56 4.736-1.152 1.536-2.816 1.536-1.536 0-3.968-1.408-6.912-4.224-8.448-11.648a336 336 0 0 0-6.016-23.68 40 40 0 0 0-2.56-6.272q-1.792-3.968-2.304-4.992l-1.664-3.328q-18.68 24.832-25.344 45.568-1.28 4.352-2.432 6.272-1.152 1.792-2.688 1.792-2.432 0-6.912-4.352Q72 158.144 72 154.304q0-2.04.768-4.096a108 108 0 0 1 16-30.08l3.968-5.248a432 432 0 0 0 12.16-16.64q3.072-4.48 8.192-4.48.896 0 2.944.256",
+				},
+			},
+		],
+	},
+	databuddy: {
+		title: "Data Buddy",
+		viewBox: "0 0 8 8",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					d: "M0 0h8v8H0z",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fill: "#fff",
+					d: "M1 1h1v6H1zm1 0h4v1H2zm4 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zM2 6h4v1H2zm1-3h1v1H3zm1 1h1v1H4z",
+				},
+			},
+		],
+	},
+} satisfies Record<string, IconDefinition>;
diff --git a/packages/ui/src/icons/registry/editor.ts b/packages/ui/src/icons/registry/editor.ts
new file mode 100644
index 00000000..cb713abb
--- /dev/null
+++ b/packages/ui/src/icons/registry/editor.ts
@@ -0,0 +1,208 @@
+import type { IconDefinition } from "../types";
+
+export const EDITOR_ICONS = {
+	background: {
+		title: "Background",
+		viewBox: "0 0 353 353",
+		nodes: [
+			{
+				element: "g",
+				props: {
+					clipPath: "url(#clip0_1_3)",
+				},
+				children: [
+					{
+						element: "rect",
+						props: {
+							x: "-241.816",
+							y: "233.387",
+							width: "592.187",
+							height: "17.765",
+							transform: "rotate(-37 -241.816 233.387)",
+							fill: "white",
+						},
+					},
+					{
+						element: "rect",
+						props: {
+							x: "-189.907",
+							y: "306.804",
+							width: "592.187",
+							height: "17.765",
+							transform: "rotate(-37 -189.907 306.804)",
+							fill: "white",
+						},
+					},
+					{
+						element: "rect",
+						props: {
+							x: "-146.928",
+							y: "389.501",
+							width: "592.187",
+							height: "17.765",
+							transform: "rotate(-37 -146.928 389.501)",
+							fill: "white",
+						},
+					},
+					{
+						element: "rect",
+						props: {
+							x: "-103.144",
+							y: "477.904",
+							width: "592.187",
+							height: "17.765",
+							transform: "rotate(-37 -103.144 477.904)",
+							fill: "white",
+						},
+					},
+					{
+						element: "rect",
+						props: {
+							x: "-57.169",
+							y: "570.714",
+							width: "592.187",
+							height: "17.765",
+							transform: "rotate(-37 -57.169 570.714)",
+							fill: "white",
+						},
+					},
+				],
+			},
+			{
+				element: "defs",
+				props: {},
+				children: [
+					{
+						element: "clipPath",
+						props: {
+							id: "clip0_1_3",
+						},
+						children: [
+							{
+								element: "rect",
+								props: {
+									width: "353",
+									height: "353",
+									fill: "white",
+								},
+							},
+						],
+					},
+				],
+			},
+		],
+	},
+	socials: {
+		title: "Socials",
+		viewBox: "0 0 345 243",
+		nodes: [
+			{
+				element: "g",
+				props: {
+					opacity: "0.5",
+				},
+				children: [
+					{
+						element: "path",
+						props: {
+							d: "M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z",
+							fill: "#FFFC00",
+						},
+					},
+					{
+						element: "path",
+						props: {
+							d: "M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z",
+							fill: "white",
+						},
+					},
+					{
+						element: "path",
+						props: {
+							d: "M203.75 4H39.25C19.782 4 4 19.782 4 39.25V203.75C4 223.218 19.782 239 39.25 239H203.75C223.218 239 239 223.218 239 203.75V39.25C239 19.782 223.218 4 203.75 4Z",
+							stroke: "black",
+							strokeWidth: "7",
+						},
+					},
+					{
+						element: "path",
+						props: {
+							d: "M97.1738 194.02C88.9121 188.053 82.4863 184.84 66.8809 187.594C64.5859 188.053 60.4551 189.43 59.9961 185.299C59.0781 182.086 59.0781 177.037 56.7832 176.578C42.5547 174.742 37.5059 171.988 35.2109 169.234C34.293 168.316 33.834 166.021 35.6699 165.562C59.9961 160.973 71.4707 137.564 73.7656 132.975C76.5195 126.09 71.9297 121.959 63.209 119.205C59.0781 117.828 52.1934 115.992 52.1934 111.402C52.1934 109.107 54.4883 107.73 56.7832 106.812C58.6191 106.354 60.4551 105.895 62.291 106.812C67.7988 109.107 72.8477 110.025 75.6016 107.73C75.6016 95.3379 72.3887 79.7324 77.4375 66.8809C83.4043 52.6523 98.0918 39.8008 121.5 39.8008C144.908 39.8008 159.596 52.6523 165.562 66.8809C170.611 79.7324 167.398 95.3379 167.398 107.73C170.152 110.025 175.201 109.107 180.709 106.812C182.545 105.895 184.381 106.354 186.217 106.812C188.512 107.73 190.807 109.107 190.807 111.402C190.807 115.992 183.922 117.828 179.791 119.205C171.07 121.959 166.48 126.09 169.234 132.975C171.529 137.564 183.004 160.973 207.33 165.562C209.166 166.021 208.707 168.316 207.789 169.234C205.494 171.988 200.445 174.742 186.217 176.578C183.922 177.037 183.922 182.086 183.004 185.299C182.545 189.43 178.414 188.053 176.119 187.594C160.514 184.84 154.088 188.053 145.826 194.02C139.065 199.872 130.442 203.126 121.5 203.199C111.861 203.658 104.059 199.527 97.1738 194.02Z",
+							stroke: "black",
+							strokeWidth: "7",
+						},
+					},
+				],
+			},
+			{
+				element: "path",
+				props: {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M133.5 4H321.5C334.48 4 345 14.5205 345 27.5V215.5C345 228.48 334.48 239 321.5 239H133.5C120.52 239 110 228.48 110 215.5V27.5C110 14.5205 120.52 4 133.5 4Z",
+					fill: "#010101",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M261.497 99.4086C271.784 106.758 284.388 111.083 297.999 111.083V84.9035C295.423 84.9045 292.854 84.6357 290.333 84.1016V104.709C276.723 104.709 264.121 100.384 253.831 93.0345V146.459C253.831 173.185 232.155 194.85 205.417 194.85C195.44 194.85 186.167 191.835 178.464 186.665C187.256 195.65 199.516 201.224 213.08 201.224C239.821 201.224 261.498 179.56 261.498 152.833L261.497 99.4086ZM270.953 72.9965C265.696 67.2559 262.244 59.8365 261.497 51.634V48.267H254.233C256.061 58.6916 262.298 67.5981 270.953 72.9965ZM195.376 166.157C192.438 162.308 190.851 157.598 190.858 152.756C190.858 140.533 200.773 130.622 213.005 130.622C215.285 130.621 217.551 130.97 219.723 131.659V104.894C217.185 104.547 214.622 104.399 212.061 104.454V125.286C209.887 124.597 207.62 124.247 205.34 124.249C193.107 124.249 183.193 134.159 183.193 146.384C183.193 155.027 188.149 162.512 195.376 166.157Z",
+					fill: "#EE1D52",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M253.831 93.0345C264.121 100.384 276.723 104.709 290.333 104.709V84.1016C282.736 82.4848 276.011 78.5162 270.953 72.9965C262.298 67.5981 256.061 58.6916 254.233 48.267H235.152V152.832C235.108 165.022 225.21 174.892 213.004 174.892C205.811 174.892 199.422 171.465 195.376 166.157C188.149 162.512 183.193 155.027 183.193 146.384C183.193 134.159 193.107 124.249 205.34 124.249C207.683 124.249 209.942 124.614 212.061 125.286V104.454C185.792 104.996 164.665 126.449 164.665 152.833C164.665 166.003 169.926 177.942 178.464 186.665C186.167 191.835 195.44 194.85 205.417 194.85C232.155 194.85 253.831 173.185 253.831 146.459V93.0345Z",
+					fill: "white",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M290.333 84.1016V78.5293C283.482 78.5396 276.766 76.6229 270.953 72.9965C276.099 78.6269 282.874 82.5087 290.333 84.1016ZM254.233 48.267C254.058 47.2708 253.924 46.2679 253.831 45.2608V41.8938H227.485V146.459C227.443 158.648 217.545 168.518 205.339 168.518C201.754 168.518 198.372 167.669 195.376 166.157C199.422 171.465 205.811 174.892 213.004 174.892C225.21 174.892 235.108 165.022 235.152 152.832V48.267H254.233ZM212.061 104.454L212.061 98.5212C209.859 98.2202 207.64 98.0698 205.418 98.071C178.676 98.071 157 119.736 157 146.459C157 163.214 165.518 177.979 178.464 186.665C169.926 177.942 164.666 166.002 164.666 152.832C164.666 126.449 185.791 104.996 212.061 104.454Z",
+					fill: "#69C9D0",
+				},
+			},
+		],
+	},
+	transitionUp: {
+		title: "Transition Up",
+		viewBox: "0 0 16 16",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M2.5 12.6667C2.5 13.4951 3.17157 14.1667 4 14.1667H12C12.8284 14.1667 13.5 13.4951 13.5 12.6667V11.3333C13.5 10.5049 12.8284 9.83333 12 9.83333H4C3.17157 9.83333 2.5 10.5049 2.5 11.3333V12.6667ZM4 15.1667C2.61929 15.1667 1.5 14.0474 1.5 12.6667V11.3333C1.5 9.95262 2.61929 8.83333 4 8.83333H12C13.3807 8.83333 14.5 9.95262 14.5 11.3333V12.6667C14.5 14.0474 13.3807 15.1667 12 15.1667H4Z",
+					fill: "white",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M2 5.83333C1.72386 5.83333 1.5 5.60947 1.5 5.33333L1.5 4C1.5 2.2511 2.91777 0.833332 4.66667 0.833332L11.3333 0.833332C13.0822 0.833332 14.5 2.2511 14.5 4V5.33333C14.5 5.60947 14.2761 5.83333 14 5.83333C13.7239 5.83333 13.5 5.60947 13.5 5.33333V4C13.5 2.80338 12.53 1.83333 11.3333 1.83333L4.66667 1.83333C3.47005 1.83333 2.5 2.80338 2.5 4V5.33333C2.5 5.60947 2.27614 5.83333 2 5.83333Z",
+					fill: "white",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					fillRule: "evenodd",
+					clipRule: "evenodd",
+					d: "M8.35355 3.64645C8.15829 3.45118 7.84171 3.45118 7.64645 3.64645L5.64645 5.64645C5.45118 5.84171 5.45118 6.15829 5.64645 6.35355C5.84171 6.54882 6.15829 6.54882 6.35355 6.35355L7.5 5.20711L7.5 9.33333C7.5 9.60948 7.72386 9.83333 8 9.83333C8.27614 9.83333 8.5 9.60948 8.5 9.33333V5.20711L9.64645 6.35355C9.84171 6.54882 10.1583 6.54882 10.3536 6.35355C10.5488 6.15829 10.5488 5.84171 10.3536 5.64645L8.35355 3.64645Z",
+					fill: "white",
+				},
+			},
+		],
+	},
+} satisfies Record<string, IconDefinition>;
diff --git a/packages/ui/src/icons/registry/index.ts b/packages/ui/src/icons/registry/index.ts
new file mode 100644
index 00000000..51a38913
--- /dev/null
+++ b/packages/ui/src/icons/registry/index.ts
@@ -0,0 +1,8 @@
+import type { IconDefinition } from "../types";
+import { BRAND_ICONS } from "./brand";
+import { UI_ICONS } from "./ui";
+
+export const ICON_DEFINITIONS = {
+	...BRAND_ICONS,
+	...UI_ICONS,
+} satisfies Record<string, IconDefinition>;
diff --git a/packages/ui/src/icons/registry/ui.ts b/packages/ui/src/icons/registry/ui.ts
new file mode 100644
index 00000000..21e29190
--- /dev/null
+++ b/packages/ui/src/icons/registry/ui.ts
@@ -0,0 +1,96 @@
+import type { IconDefinition } from "../types";
+
+export const UI_ICONS = {
+	menu: {
+		title: "Menu",
+		viewBox: "0 0 141 111",
+		nodes: [
+			{
+				element: "rect",
+				props: {
+					y: "19.5",
+					width: "141",
+					height: "12",
+					rx: "7.5",
+					fill: "currentColor",
+				},
+			},
+			{
+				element: "rect",
+				props: {
+					y: "67.5",
+					width: "141",
+					height: "12",
+					rx: "7.5",
+					fill: "currentColor",
+				},
+			},
+		],
+	},
+	pencil: {
+		title: "Edit",
+		viewBox: "0 0 24 24",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					d: "M14.0737 3.88545C14.8189 3.07808 15.1915 2.6744 15.5874 2.43893C16.5427 1.87076 17.7191 1.85309 18.6904 2.39232C19.0929 2.6158 19.4769 3.00812 20.245 3.79276C21.0131 4.5774 21.3972 4.96972 21.6159 5.38093C22.1438 6.37312 22.1265 7.57479 21.5703 8.5507C21.3398 8.95516 20.9446 9.33578 20.1543 10.097L10.7506 19.1543C9.25288 20.5969 8.504 21.3182 7.56806 21.6837C6.63212 22.0493 5.6032 22.0224 3.54536 21.9686L3.26538 21.9613C2.63891 21.9449 2.32567 21.9367 2.14359 21.73C1.9615 21.5234 1.98636 21.2043 2.03608 20.5662L2.06308 20.2197C2.20301 18.4235 2.27297 17.5255 2.62371 16.7182C2.97444 15.9109 3.57944 15.2555 4.78943 13.9445L14.0737 3.88545Z",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					d: "M13 4L20 11",
+				},
+			},
+		],
+	},
+	leftArrow: {
+		title: "Left Arrow",
+		viewBox: "0 0 24 24",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					d: "M5.5 12.002H19",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					d: "M10.9999 18.002C10.9999 18.002 4.99998 13.583 4.99997 12.0019C4.99996 10.4208 11 6.00195 11 6.00195",
+				},
+			},
+		],
+	},
+	trash: {
+		title: "Trash",
+		viewBox: "0 0 24 24",
+		nodes: [
+			{
+				element: "path",
+				props: {
+					d: "M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					d: "M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					d: "M9.5 16.5L9.5 10.5",
+				},
+			},
+			{
+				element: "path",
+				props: {
+					d: "M14.5 16.5L14.5 10.5",
+				},
+			},
+		],
+	},
+} satisfies Record<string, IconDefinition>;
diff --git a/packages/ui/src/icons/types.ts b/packages/ui/src/icons/types.ts
new file mode 100644
index 00000000..a0fc4e42
--- /dev/null
+++ b/packages/ui/src/icons/types.ts
@@ -0,0 +1,21 @@
+import type { SVGProps, JSX } from "react";
+
+export type IconProps = Omit<
+	SVGProps<SVGSVGElement>,
+	"children" | "width" | "height"
+> & {
+	size?: number;
+	title?: string;
+};
+
+export type IconNode = Array<{
+	element: keyof JSX.IntrinsicElements;
+	props: Record<string, string | number | undefined>;
+	children?: IconNode;
+}>;
+
+export type IconDefinition = {
+	title: string;
+	viewBox?: string;
+	nodes: IconNode;
+};
diff --git a/rules.md b/rules.md
index 3f95b911..f934c1cf 100644
--- a/rules.md
+++ b/rules.md
@@ -1,6 +1,6 @@
 Review every point below carefully for files to ensure they follow consistent code style and best practices.
 
-1. Every single function must use a destructured props object for parameters, regardless of whether there's one or multiple parameters. This applies to all functions, not just react components. Even zustand stores. exception: tiny one-liner callbacks (e.g. `array.find(x => ...)`, `map`, `filter`, `sort`) do not need destructuring if it hurts readability or adds noise.
+1. Every single function must accept a single object parameter and destructure it in the signature (for readability and future extensibility), if there's 1 or more values. This applies to all functions, not just react components. Even zustand stores. exception: tiny one-liner callbacks (e.g. `array.find(x => ...)`, `map`, `filter`, `sort`) do not need destructuring if it hurts readability or adds noise.
 2. No `any` references.
 3. JSX is clean; No comments in there explaining what each part does. Must extract JSX into sub-components (always placed below the main component). A part only needs to be extracted if it's either used in multiple places of the file OR is complex enough to be worth extracting. If a component is used acrosss multiple files, it should be extracted to a separate file.
 4. General interfaces must be placed in the `types` folder. Example: `src/components/timeline/index.tsx` defining a `TimelineTrack` interface is wrong and should be moved to `src/types/timeline.ts`.