Revert "merge main"

This reverts commit 1ccacf6bb5db579cf6f343d9de57bce92d296f5f.

99 files changed, 7009 insertions, 7100 deletions

diff --git a/apps/web/components.json b/apps/web/components.json
index 405a08cd..0e8b6332 100644
--- a/apps/web/components.json
+++ b/apps/web/components.json
@@ -18,4 +18,4 @@
     "hooks": "@/hooks"
   },
   "iconLibrary": "lucide"
-}
+}
\ No newline at end of file
diff --git a/apps/web/drizzle.config.ts b/apps/web/drizzle.config.ts
index a0602a74..6b7a1605 100644
--- a/apps/web/drizzle.config.ts
+++ b/apps/web/drizzle.config.ts
@@ -1,19 +1,19 @@
-import type { Config } from "drizzle-kit";
-import * as dotenv from "dotenv";
-
-// Load the right env file based on environment
-if (process.env.NODE_ENV === "production") {
-  dotenv.config({ path: ".env.production" });
-} else {
-  dotenv.config({ path: ".env.local" });
-}
-
-export default {
-  schema: "../../packages/db/src/schema.ts",
-  dialect: "postgresql",
-  dbCredentials: {
-    url: process.env.DATABASE_URL!,
-  },
-  out: "./migrations",
-  strict: process.env.NODE_ENV === "production",
-} satisfies Config;
+import type { Config } from "drizzle-kit";

+import * as dotenv from "dotenv";

+

+// Load the right env file based on environment

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

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

+} else {

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

+}

+

+export default {

+  schema: "../../packages/db/src/schema.ts",

+  dialect: "postgresql",

+  dbCredentials: {

+    url: process.env.DATABASE_URL!,

+  },

+  out: "./migrations",

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

+} satisfies Config;

diff --git a/apps/web/migrations/meta/0000_snapshot.json b/apps/web/migrations/meta/0000_snapshot.json
index 2da63d5c..7ea2b944 100644
--- a/apps/web/migrations/meta/0000_snapshot.json
+++ b/apps/web/migrations/meta/0000_snapshot.json
@@ -93,8 +93,12 @@
           "name": "accounts_user_id_users_id_fk",
           "tableFrom": "accounts",
           "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -164,8 +168,12 @@
           "name": "sessions_user_id_users_id_fk",
           "tableFrom": "sessions",
           "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -175,7 +183,9 @@
         "sessions_token_unique": {
           "name": "sessions_token_unique",
           "nullsNotDistinct": false,
-          "columns": ["token"]
+          "columns": [
+            "token"
+          ]
         }
       },
       "policies": {},
@@ -236,7 +246,9 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": ["email"]
+          "columns": [
+            "email"
+          ]
         }
       },
       "policies": {},
@@ -304,4 +316,4 @@
     "schemas": {},
     "tables": {}
   }
-}
+}
\ No newline at end of file
diff --git a/apps/web/migrations/meta/0001_snapshot.json b/apps/web/migrations/meta/0001_snapshot.json
index 008540ad..78c3cffb 100644
--- a/apps/web/migrations/meta/0001_snapshot.json
+++ b/apps/web/migrations/meta/0001_snapshot.json
@@ -93,8 +93,12 @@
           "name": "accounts_user_id_users_id_fk",
           "tableFrom": "accounts",
           "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -164,8 +168,12 @@
           "name": "sessions_user_id_users_id_fk",
           "tableFrom": "sessions",
           "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -175,7 +183,9 @@
         "sessions_token_unique": {
           "name": "sessions_token_unique",
           "nullsNotDistinct": false,
-          "columns": ["token"]
+          "columns": [
+            "token"
+          ]
         }
       },
       "policies": {},
@@ -236,7 +246,9 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": ["email"]
+          "columns": [
+            "email"
+          ]
         }
       },
       "policies": {},
@@ -322,7 +334,9 @@
         "waitlist_email_unique": {
           "name": "waitlist_email_unique",
           "nullsNotDistinct": false,
-          "columns": ["email"]
+          "columns": [
+            "email"
+          ]
         }
       },
       "policies": {},
@@ -341,4 +355,4 @@
     "schemas": {},
     "tables": {}
   }
-}
+}
\ No newline at end of file
diff --git a/apps/web/migrations/meta/0002_snapshot.json b/apps/web/migrations/meta/0002_snapshot.json
index 42512564..9155d971 100644
--- a/apps/web/migrations/meta/0002_snapshot.json
+++ b/apps/web/migrations/meta/0002_snapshot.json
@@ -93,8 +93,12 @@
           "name": "accounts_user_id_users_id_fk",
           "tableFrom": "accounts",
           "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -164,8 +168,12 @@
           "name": "sessions_user_id_users_id_fk",
           "tableFrom": "sessions",
           "tableTo": "users",
-          "columnsFrom": ["user_id"],
-          "columnsTo": ["id"],
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
           "onDelete": "cascade",
           "onUpdate": "no action"
         }
@@ -175,7 +183,9 @@
         "sessions_token_unique": {
           "name": "sessions_token_unique",
           "nullsNotDistinct": false,
-          "columns": ["token"]
+          "columns": [
+            "token"
+          ]
         }
       },
       "policies": {},
@@ -237,7 +247,9 @@
         "users_email_unique": {
           "name": "users_email_unique",
           "nullsNotDistinct": false,
-          "columns": ["email"]
+          "columns": [
+            "email"
+          ]
         }
       },
       "policies": {},
@@ -323,7 +335,9 @@
         "waitlist_email_unique": {
           "name": "waitlist_email_unique",
           "nullsNotDistinct": false,
-          "columns": ["email"]
+          "columns": [
+            "email"
+          ]
         }
       },
       "policies": {},
@@ -342,4 +356,4 @@
     "schemas": {},
     "tables": {}
   }
-}
+}
\ No newline at end of file
diff --git a/apps/web/migrations/meta/_journal.json b/apps/web/migrations/meta/_journal.json
index 58b995c8..309c040e 100644
--- a/apps/web/migrations/meta/_journal.json
+++ b/apps/web/migrations/meta/_journal.json
@@ -24,4 +24,4 @@
       "breakpoints": true
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/apps/web/public/ffmpeg/ffmpeg-core.js b/apps/web/public/ffmpeg/ffmpeg-core.js
index 405d1dbc..83363183 100644
--- a/apps/web/public/ffmpeg/ffmpeg-core.js
+++ b/apps/web/public/ffmpeg/ffmpeg-core.js
@@ -1,18 +1,21 @@
+
 var createFFmpegCore = (() => {
-  var _scriptDir =
-    typeof document !== "undefined" && document.currentScript
-      ? document.currentScript.src
-      : undefined;
+  var _scriptDir = typeof document !== 'undefined' && document.currentScript ? document.currentScript.src : undefined;
+  
+  return (
+function(createFFmpegCore = {})  {
+
+var Module=typeof createFFmpegCore!="undefined"?createFFmpegCore:{}; // Ensure that createFFmpegCore is defined and available.var readyPromiseResolve,readyPromiseReject;Module["ready"]=new Promise((resolve,reject)=>{readyPromiseResolve=resolve;readyPromiseReject=reject});const NULL=0;const SIZE_I32=Uint32Array.BYTES_PER_ELEMENT;const DEFAULT_ARGS=["./ffmpeg","-nostdin","-y"];const DEFAULT_ARGS_FFPROBE=["./ffprobe"];Module["NULL"]=NULL;Module["SIZE_I32"]=SIZE_I32;Module["DEFAULT_ARGS"]=DEFAULT_ARGS;Module["DEFAULT_ARGS_FFPROBE"]=DEFAULT_ARGS_FFPROBE;Module["ret"]=-1;Module["timeout"]=-1;Module["logger"]=()=>{};Module["progress"]=()=>{};function stringToPtr(str){const len=Module["lengthBytesUTF8"](str)+1;const ptr=Module["_malloc"](len);Module["stringToUTF8"](str,ptr,len);return ptr}function stringsToPtr(strs){const len=strs.length;const ptr=Module["_malloc"](len*SIZE_I32);for(let i=0;i<len;i++){Module["setValue"](ptr+SIZE_I32*i,stringToPtr(strs[i]),"i32")}return ptr}function print(message){Module["logger"]({type:"stdout",message:message})}function printErr(message){if(!message.startsWith("Aborted(native code called abort())"))Module["logger"]({type:"stderr",message:message})}function exec(..._args){const args=[...Module["DEFAULT_ARGS"],..._args];try{Module["_ffmpeg"](args.length,stringsToPtr(args))}catch(e){if(!e.message.startsWith("Aborted")){throw e}}return Module["ret"]}function ffprobe(..._args){const args=[...Module["DEFAULT_ARGS_FFPROBE"],..._args];try{Module["_ffprobe"](args.length,stringsToPtr(args))}catch(e){if(!e.message.startsWith("Aborted")){throw e}}return Module["ret"]}function setLogger(logger){Module["logger"]=logger}function setTimeout(timeout){Module["timeout"]=timeout}function setProgress(handler){Module["progress"]=handler}function receiveProgress(progress,time){Module["progress"]({progress:progress,time:time})}function reset(){Module["ret"]=-1;Module["timeout"]=-1}function _locateFile(path,prefix){const mainScriptUrlOrBlob=Module["mainScriptUrlOrBlob"];if(mainScriptUrlOrBlob){const{wasmURL:wasmURL,workerURL:workerURL}=JSON.parse(atob(mainScriptUrlOrBlob.slice(mainScriptUrlOrBlob.lastIndexOf("#")+1)));if(path.endsWith(".wasm"))return wasmURL;if(path.endsWith(".worker.js"))return workerURL}return prefix+path}Module["stringToPtr"]=stringToPtr;Module["stringsToPtr"]=stringsToPtr;Module["print"]=print;Module["printErr"]=printErr;Module["locateFile"]=_locateFile;Module["exec"]=exec;Module["ffprobe"]=ffprobe;Module["setLogger"]=setLogger;Module["setTimeout"]=setTimeout;Module["setProgress"]=setProgress;Module["reset"]=reset;Module["receiveProgress"]=receiveProgress;var moduleOverrides=Object.assign({},Module);var arguments_=[];var thisProgram="./this.program";var quit_=(status,toThrow)=>{throw toThrow};var ENVIRONMENT_IS_WEB=false;var ENVIRONMENT_IS_WORKER=true;var ENVIRONMENT_IS_NODE=false;var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(typeof document!="undefined"&&document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.replace(/[?#].*/,"").lastIndexOf("/")+1)}else{scriptDirectory=""}{read_=url=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.send(null);return xhr.responseText};if(ENVIRONMENT_IS_WORKER){readBinary=url=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.responseType="arraybuffer";xhr.send(null);return new Uint8Array(xhr.response)}}readAsync=(url,onload,onerror)=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,true);xhr.responseType="arraybuffer";xhr.onload=()=>{if(xhr.status==200||xhr.status==0&&xhr.response){onload(xhr.response);return}onerror()};xhr.onerror=onerror;xhr.send(null)}}setWindowTitle=title=>document.title=title}else{}var out=Module["print"]||console.log.bind(console);var err=Module["printErr"]||console.error.bind(console);Object.assign(Module,moduleOverrides);moduleOverrides=null;if(Module["arguments"])arguments_=Module["arguments"];if(Module["thisProgram"])thisProgram=Module["thisProgram"];if(Module["quit"])quit_=Module["quit"];var wasmBinary;if(Module["wasmBinary"])wasmBinary=Module["wasmBinary"];var noExitRuntime=Module["noExitRuntime"]||true;if(typeof WebAssembly!="object"){abort("no native wasm support detected")}var wasmMemory;var ABORT=false;var EXITSTATUS;function assert(condition,text){if(!condition){abort(text)}}var HEAP8,HEAPU8,HEAP16,HEAPU16,HEAP32,HEAPU32,HEAPF32,HEAP64,HEAPU64,HEAPF64;function updateMemoryViews(){var b=wasmMemory.buffer;Module["HEAP8"]=HEAP8=new Int8Array(b);Module["HEAP16"]=HEAP16=new Int16Array(b);Module["HEAP32"]=HEAP32=new Int32Array(b);Module["HEAPU8"]=HEAPU8=new Uint8Array(b);Module["HEAPU16"]=HEAPU16=new Uint16Array(b);Module["HEAPU32"]=HEAPU32=new Uint32Array(b);Module["HEAPF32"]=HEAPF32=new Float32Array(b);Module["HEAPF64"]=HEAPF64=new Float64Array(b);Module["HEAP64"]=HEAP64=new BigInt64Array(b);Module["HEAPU64"]=HEAPU64=new BigUint64Array(b)}var wasmTable;var __ATPRERUN__=[];var __ATINIT__=[];var __ATPOSTRUN__=[];var runtimeInitialized=false;var runtimeKeepaliveCounter=0;function keepRuntimeAlive(){return noExitRuntime||runtimeKeepaliveCounter>0}function preRun(){if(Module["preRun"]){if(typeof Module["preRun"]=="function")Module["preRun"]=[Module["preRun"]];while(Module["preRun"].length){addOnPreRun(Module["preRun"].shift())}}callRuntimeCallbacks(__ATPRERUN__)}function initRuntime(){runtimeInitialized=true;if(!Module["noFSInit"]&&!FS.init.initialized)FS.init();FS.ignorePermissions=false;TTY.init();SOCKFS.root=FS.mount(SOCKFS,{},null);callRuntimeCallbacks(__ATINIT__)}function postRun(){if(Module["postRun"]){if(typeof Module["postRun"]=="function")Module["postRun"]=[Module["postRun"]];while(Module["postRun"].length){addOnPostRun(Module["postRun"].shift())}}callRuntimeCallbacks(__ATPOSTRUN__)}function addOnPreRun(cb){__ATPRERUN__.unshift(cb)}function addOnInit(cb){__ATINIT__.unshift(cb)}function addOnPostRun(cb){__ATPOSTRUN__.unshift(cb)}var runDependencies=0;var runDependencyWatcher=null;var dependenciesFulfilled=null;function getUniqueRunDependency(id){return id}function addRunDependency(id){runDependencies++;if(Module["monitorRunDependencies"]){Module["monitorRunDependencies"](runDependencies)}}function removeRunDependency(id){runDependencies--;if(Module["monitorRunDependencies"]){Module["monitorRunDependencies"](runDependencies)}if(runDependencies==0){if(runDependencyWatcher!==null){clearInterval(runDependencyWatcher);runDependencyWatcher=null}if(dependenciesFulfilled){var callback=dependenciesFulfilled;dependenciesFulfilled=null;callback()}}}function abort(what){if(Module["onAbort"]){Module["onAbort"](what)}what="Aborted("+what+")";err(what);ABORT=true;EXITSTATUS=1;what+=". Build with -sASSERTIONS for more info.";var e=new WebAssembly.RuntimeError(what);readyPromiseReject(e);throw e}var dataURIPrefix="data:application/octet-stream;base64,";function isDataURI(filename){return filename.startsWith(dataURIPrefix)}var wasmBinaryFile;wasmBinaryFile="ffmpeg-core.wasm";if(!isDataURI(wasmBinaryFile)){wasmBinaryFile=locateFile(wasmBinaryFile)}function getBinary(file){try{if(file==wasmBinaryFile&&wasmBinary){return new Uint8Array(wasmBinary)}if(readBinary){return readBinary(file)}throw"both async and sync fetching of the wasm failed"}catch(err){abort(err)}}function getBinaryPromise(binaryFile){if(!wasmBinary&&(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER)){if(typeof fetch=="function"){return fetch(binaryFile,{credentials:"same-origin"}).then(response=>{if(!response["ok"]){throw"failed to load wasm binary file at '"+binaryFile+"'"}return response["arrayBuffer"]()}).catch(()=>getBinary(binaryFile))}}return Promise.resolve().then(()=>getBinary(binaryFile))}function instantiateArrayBuffer(binaryFile,imports,receiver){return getBinaryPromise(binaryFile).then(binary=>{return WebAssembly.instantiate(binary,imports)}).then(instance=>{return instance}).then(receiver,reason=>{err("failed to asynchronously prepare wasm: "+reason);abort(reason)})}function instantiateAsync(binary,binaryFile,imports,callback){if(!binary&&typeof WebAssembly.instantiateStreaming=="function"&&!isDataURI(binaryFile)&&typeof fetch=="function"){return fetch(binaryFile,{credentials:"same-origin"}).then(response=>{var result=WebAssembly.instantiateStreaming(response,imports);return result.then(callback,function(reason){err("wasm streaming compile failed: "+reason);err("falling back to ArrayBuffer instantiation");return instantiateArrayBuffer(binaryFile,imports,callback)})})}else{return instantiateArrayBuffer(binaryFile,imports,callback)}}function createWasm(){var info={"a":wasmImports};function receiveInstance(instance,module){var exports=instance.exports;Module["asm"]=exports;wasmMemory=Module["asm"]["ra"];updateMemoryViews();wasmTable=Module["asm"]["ua"];addOnInit(Module["asm"]["sa"]);removeRunDependency("wasm-instantiate");return exports}addRunDependency("wasm-instantiate");function receiveInstantiationResult(result){receiveInstance(result["instance"])}if(Module["instantiateWasm"]){try{return Module["instantiateWasm"](info,receiveInstance)}catch(e){err("Module.instantiateWasm callback failed with error: "+e);readyPromiseReject(e)}}instantiateAsync(wasmBinary,wasmBinaryFile,info,receiveInstantiationResult).catch(readyPromiseReject);return{}}var ASM_CONSTS={6077464:$0=>{Module.ret=$0}};function send_progress(progress,time){Module.receiveProgress(progress,time)}function is_timeout(diff){if(Module.timeout===-1)return 0;else{return Module.timeout<=diff}}function ExitStatus(status){this.name="ExitStatus";this.message=`Program terminated with exit(${status})`;this.status=status}function callRuntimeCallbacks(callbacks){while(callbacks.length>0){callbacks.shift()(Module)}}var wasmTableMirror=[];function getWasmTableEntry(funcPtr){var func=wasmTableMirror[funcPtr];if(!func){if(funcPtr>=wasmTableMirror.length)wasmTableMirror.length=funcPtr+1;wasmTableMirror[funcPtr]=func=wasmTable.get(funcPtr)}return func}function getValue(ptr,type="i8"){if(type.endsWith("*"))type="*";switch(type){case"i1":return HEAP8[ptr>>0];case"i8":return HEAP8[ptr>>0];case"i16":return HEAP16[ptr>>1];case"i32":return HEAP32[ptr>>2];case"i64":return HEAP64[ptr>>3];case"float":return HEAPF32[ptr>>2];case"double":return HEAPF64[ptr>>3];case"*":return HEAPU32[ptr>>2];default:abort(`invalid type for getValue: ${type}`)}}function setValue(ptr,value,type="i8"){if(type.endsWith("*"))type="*";switch(type){case"i1":HEAP8[ptr>>0]=value;break;case"i8":HEAP8[ptr>>0]=value;break;case"i16":HEAP16[ptr>>1]=value;break;case"i32":HEAP32[ptr>>2]=value;break;case"i64":HEAP64[ptr>>3]=BigInt(value);break;case"float":HEAPF32[ptr>>2]=value;break;case"double":HEAPF64[ptr>>3]=value;break;case"*":HEAPU32[ptr>>2]=value;break;default:abort(`invalid type for setValue: ${type}`)}}var UTF8Decoder=typeof TextDecoder!="undefined"?new TextDecoder("utf8"):undefined;function UTF8ArrayToString(heapOrArray,idx,maxBytesToRead){var endIdx=idx+maxBytesToRead;var endPtr=idx;while(heapOrArray[endPtr]&&!(endPtr>=endIdx))++endPtr;if(endPtr-idx>16&&heapOrArray.buffer&&UTF8Decoder){return UTF8Decoder.decode(heapOrArray.subarray(idx,endPtr))}var str="";while(idx<endPtr){var u0=heapOrArray[idx++];if(!(u0&128)){str+=String.fromCharCode(u0);continue}var u1=heapOrArray[idx++]&63;if((u0&224)==192){str+=String.fromCharCode((u0&31)<<6|u1);continue}var u2=heapOrArray[idx++]&63;if((u0&240)==224){u0=(u0&15)<<12|u1<<6|u2}else{u0=(u0&7)<<18|u1<<12|u2<<6|heapOrArray[idx++]&63}if(u0<65536){str+=String.fromCharCode(u0)}else{var ch=u0-65536;str+=String.fromCharCode(55296|ch>>10,56320|ch&1023)}}return str}function UTF8ToString(ptr,maxBytesToRead){return ptr?UTF8ArrayToString(HEAPU8,ptr,maxBytesToRead):""}function ___assert_fail(condition,filename,line,func){abort(`Assertion failed: ${UTF8ToString(condition)}, at: `+[filename?UTF8ToString(filename):"unknown filename",line,func?UTF8ToString(func):"unknown function"])}function ExceptionInfo(excPtr){this.excPtr=excPtr;this.ptr=excPtr-24;this.set_type=function(type){HEAPU32[this.ptr+4>>2]=type};this.get_type=function(){return HEAPU32[this.ptr+4>>2]};this.set_destructor=function(destructor){HEAPU32[this.ptr+8>>2]=destructor};this.get_destructor=function(){return HEAPU32[this.ptr+8>>2]};this.set_caught=function(caught){caught=caught?1:0;HEAP8[this.ptr+12>>0]=caught};this.get_caught=function(){return HEAP8[this.ptr+12>>0]!=0};this.set_rethrown=function(rethrown){rethrown=rethrown?1:0;HEAP8[this.ptr+13>>0]=rethrown};this.get_rethrown=function(){return HEAP8[this.ptr+13>>0]!=0};this.init=function(type,destructor){this.set_adjusted_ptr(0);this.set_type(type);this.set_destructor(destructor)};this.set_adjusted_ptr=function(adjustedPtr){HEAPU32[this.ptr+16>>2]=adjustedPtr};this.get_adjusted_ptr=function(){return HEAPU32[this.ptr+16>>2]};this.get_exception_ptr=function(){var isPointer=___cxa_is_pointer_type(this.get_type());if(isPointer){return HEAPU32[this.excPtr>>2]}var adjusted=this.get_adjusted_ptr();if(adjusted!==0)return adjusted;return this.excPtr}}var exceptionLast=0;var uncaughtExceptionCount=0;function ___cxa_throw(ptr,type,destructor){var info=new ExceptionInfo(ptr);info.init(type,destructor);exceptionLast=ptr;uncaughtExceptionCount++;throw exceptionLast}var dlopenMissingError="To use dlopen, you need enable dynamic linking, see https://emscripten.org/docs/compiling/Dynamic-Linking.html";function ___dlsym(handle,symbol){abort(dlopenMissingError)}var PATH={isAbs:path=>path.charAt(0)==="/",splitPath:filename=>{var splitPathRe=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;return splitPathRe.exec(filename).slice(1)},normalizeArray:(parts,allowAboveRoot)=>{var up=0;for(var i=parts.length-1;i>=0;i--){var last=parts[i];if(last==="."){parts.splice(i,1)}else if(last===".."){parts.splice(i,1);up++}else if(up){parts.splice(i,1);up--}}if(allowAboveRoot){for(;up;up--){parts.unshift("..")}}return parts},normalize:path=>{var isAbsolute=PATH.isAbs(path),trailingSlash=path.substr(-1)==="/";path=PATH.normalizeArray(path.split("/").filter(p=>!!p),!isAbsolute).join("/");if(!path&&!isAbsolute){path="."}if(path&&trailingSlash){path+="/"}return(isAbsolute?"/":"")+path},dirname:path=>{var result=PATH.splitPath(path),root=result[0],dir=result[1];if(!root&&!dir){return"."}if(dir){dir=dir.substr(0,dir.length-1)}return root+dir},basename:path=>{if(path==="/")return"/";path=PATH.normalize(path);path=path.replace(/\/$/,"");var lastSlash=path.lastIndexOf("/");if(lastSlash===-1)return path;return path.substr(lastSlash+1)},join:function(){var paths=Array.prototype.slice.call(arguments);return PATH.normalize(paths.join("/"))},join2:(l,r)=>{return PATH.normalize(l+"/"+r)}};function initRandomFill(){if(typeof crypto=="object"&&typeof crypto["getRandomValues"]=="function"){return view=>crypto.getRandomValues(view)}else abort("initRandomDevice")}function randomFill(view){return(randomFill=initRandomFill())(view)}var PATH_FS={resolve:function(){var resolvedPath="",resolvedAbsolute=false;for(var i=arguments.length-1;i>=-1&&!resolvedAbsolute;i--){var path=i>=0?arguments[i]:FS.cwd();if(typeof path!="string"){throw new TypeError("Arguments to path.resolve must be strings")}else if(!path){return""}resolvedPath=path+"/"+resolvedPath;resolvedAbsolute=PATH.isAbs(path)}resolvedPath=PATH.normalizeArray(resolvedPath.split("/").filter(p=>!!p),!resolvedAbsolute).join("/");return(resolvedAbsolute?"/":"")+resolvedPath||"."},relative:(from,to)=>{from=PATH_FS.resolve(from).substr(1);to=PATH_FS.resolve(to).substr(1);function trim(arr){var start=0;for(;start<arr.length;start++){if(arr[start]!=="")break}var end=arr.length-1;for(;end>=0;end--){if(arr[end]!=="")break}if(start>end)return[];return arr.slice(start,end-start+1)}var fromParts=trim(from.split("/"));var toParts=trim(to.split("/"));var length=Math.min(fromParts.length,toParts.length);var samePartsLength=length;for(var i=0;i<length;i++){if(fromParts[i]!==toParts[i]){samePartsLength=i;break}}var outputParts=[];for(var i=samePartsLength;i<fromParts.length;i++){outputParts.push("..")}outputParts=outputParts.concat(toParts.slice(samePartsLength));return outputParts.join("/")}};function lengthBytesUTF8(str){var len=0;for(var i=0;i<str.length;++i){var c=str.charCodeAt(i);if(c<=127){len++}else if(c<=2047){len+=2}else if(c>=55296&&c<=57343){len+=4;++i}else{len+=3}}return len}function stringToUTF8Array(str,heap,outIdx,maxBytesToWrite){if(!(maxBytesToWrite>0))return 0;var startIdx=outIdx;var endIdx=outIdx+maxBytesToWrite-1;for(var i=0;i<str.length;++i){var u=str.charCodeAt(i);if(u>=55296&&u<=57343){var u1=str.charCodeAt(++i);u=65536+((u&1023)<<10)|u1&1023}if(u<=127){if(outIdx>=endIdx)break;heap[outIdx++]=u}else if(u<=2047){if(outIdx+1>=endIdx)break;heap[outIdx++]=192|u>>6;heap[outIdx++]=128|u&63}else if(u<=65535){if(outIdx+2>=endIdx)break;heap[outIdx++]=224|u>>12;heap[outIdx++]=128|u>>6&63;heap[outIdx++]=128|u&63}else{if(outIdx+3>=endIdx)break;heap[outIdx++]=240|u>>18;heap[outIdx++]=128|u>>12&63;heap[outIdx++]=128|u>>6&63;heap[outIdx++]=128|u&63}}heap[outIdx]=0;return outIdx-startIdx}function intArrayFromString(stringy,dontAddNull,length){var len=length>0?length:lengthBytesUTF8(stringy)+1;var u8array=new Array(len);var numBytesWritten=stringToUTF8Array(stringy,u8array,0,u8array.length);if(dontAddNull)u8array.length=numBytesWritten;return u8array}var TTY={ttys:[],init:function(){},shutdown:function(){},register:function(dev,ops){TTY.ttys[dev]={input:[],output:[],ops:ops};FS.registerDevice(dev,TTY.stream_ops)},stream_ops:{open:function(stream){var tty=TTY.ttys[stream.node.rdev];if(!tty){throw new FS.ErrnoError(43)}stream.tty=tty;stream.seekable=false},close:function(stream){stream.tty.ops.fsync(stream.tty)},fsync:function(stream){stream.tty.ops.fsync(stream.tty)},read:function(stream,buffer,offset,length,pos){if(!stream.tty||!stream.tty.ops.get_char){throw new FS.ErrnoError(60)}var bytesRead=0;for(var i=0;i<length;i++){var result;try{result=stream.tty.ops.get_char(stream.tty)}catch(e){throw new FS.ErrnoError(29)}if(result===undefined&&bytesRead===0){throw new FS.ErrnoError(6)}if(result===null||result===undefined)break;bytesRead++;buffer[offset+i]=result}if(bytesRead){stream.node.timestamp=Date.now()}return bytesRead},write:function(stream,buffer,offset,length,pos){if(!stream.tty||!stream.tty.ops.put_char){throw new FS.ErrnoError(60)}try{for(var i=0;i<length;i++){stream.tty.ops.put_char(stream.tty,buffer[offset+i])}}catch(e){throw new FS.ErrnoError(29)}if(length){stream.node.timestamp=Date.now()}return i}},default_tty_ops:{get_char:function(tty){if(!tty.input.length){var result=null;if(typeof window!="undefined"&&typeof window.prompt=="function"){result=window.prompt("Input: ");if(result!==null){result+="\n"}}else if(typeof readline=="function"){result=readline();if(result!==null){result+="\n"}}if(!result){return null}tty.input=intArrayFromString(result,true)}return tty.input.shift()},put_char:function(tty,val){if(val===null||val===10){out(UTF8ArrayToString(tty.output,0));tty.output=[]}else{if(val!=0)tty.output.push(val)}},fsync:function(tty){if(tty.output&&tty.output.length>0){out(UTF8ArrayToString(tty.output,0));tty.output=[]}}},default_tty1_ops:{put_char:function(tty,val){if(val===null||val===10){err(UTF8ArrayToString(tty.output,0));tty.output=[]}else{if(val!=0)tty.output.push(val)}},fsync:function(tty){if(tty.output&&tty.output.length>0){err(UTF8ArrayToString(tty.output,0));tty.output=[]}}}};function zeroMemory(address,size){HEAPU8.fill(0,address,address+size);return address}function alignMemory(size,alignment){return Math.ceil(size/alignment)*alignment}function mmapAlloc(size){size=alignMemory(size,65536);var ptr=_emscripten_builtin_memalign(65536,size);if(!ptr)return 0;return zeroMemory(ptr,size)}var MEMFS={ops_table:null,mount:function(mount){return MEMFS.createNode(null,"/",16384|511,0)},createNode:function(parent,name,mode,dev){if(FS.isBlkdev(mode)||FS.isFIFO(mode)){throw new FS.ErrnoError(63)}if(!MEMFS.ops_table){MEMFS.ops_table={dir:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr,lookup:MEMFS.node_ops.lookup,mknod:MEMFS.node_ops.mknod,rename:MEMFS.node_ops.rename,unlink:MEMFS.node_ops.unlink,rmdir:MEMFS.node_ops.rmdir,readdir:MEMFS.node_ops.readdir,symlink:MEMFS.node_ops.symlink},stream:{llseek:MEMFS.stream_ops.llseek}},file:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr},stream:{llseek:MEMFS.stream_ops.llseek,read:MEMFS.stream_ops.read,write:MEMFS.stream_ops.write,allocate:MEMFS.stream_ops.allocate,mmap:MEMFS.stream_ops.mmap,msync:MEMFS.stream_ops.msync}},link:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr,readlink:MEMFS.node_ops.readlink},stream:{}},chrdev:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr},stream:FS.chrdev_stream_ops}}}var node=FS.createNode(parent,name,mode,dev);if(FS.isDir(node.mode)){node.node_ops=MEMFS.ops_table.dir.node;node.stream_ops=MEMFS.ops_table.dir.stream;node.contents={}}else if(FS.isFile(node.mode)){node.node_ops=MEMFS.ops_table.file.node;node.stream_ops=MEMFS.ops_table.file.stream;node.usedBytes=0;node.contents=null}else if(FS.isLink(node.mode)){node.node_ops=MEMFS.ops_table.link.node;node.stream_ops=MEMFS.ops_table.link.stream}else if(FS.isChrdev(node.mode)){node.node_ops=MEMFS.ops_table.chrdev.node;node.stream_ops=MEMFS.ops_table.chrdev.stream}node.timestamp=Date.now();if(parent){parent.contents[name]=node;parent.timestamp=node.timestamp}return node},getFileDataAsTypedArray:function(node){if(!node.contents)return new Uint8Array(0);if(node.contents.subarray)return node.contents.subarray(0,node.usedBytes);return new Uint8Array(node.contents)},expandFileStorage:function(node,newCapacity){var prevCapacity=node.contents?node.contents.length:0;if(prevCapacity>=newCapacity)return;var CAPACITY_DOUBLING_MAX=1024*1024;newCapacity=Math.max(newCapacity,prevCapacity*(prevCapacity<CAPACITY_DOUBLING_MAX?2:1.125)>>>0);if(prevCapacity!=0)newCapacity=Math.max(newCapacity,256);var oldContents=node.contents;node.contents=new Uint8Array(newCapacity);if(node.usedBytes>0)node.contents.set(oldContents.subarray(0,node.usedBytes),0)},resizeFileStorage:function(node,newSize){if(node.usedBytes==newSize)return;if(newSize==0){node.contents=null;node.usedBytes=0}else{var oldContents=node.contents;node.contents=new Uint8Array(newSize);if(oldContents){node.contents.set(oldContents.subarray(0,Math.min(newSize,node.usedBytes)))}node.usedBytes=newSize}},node_ops:{getattr:function(node){var attr={};attr.dev=FS.isChrdev(node.mode)?node.id:1;attr.ino=node.id;attr.mode=node.mode;attr.nlink=1;attr.uid=0;attr.gid=0;attr.rdev=node.rdev;if(FS.isDir(node.mode)){attr.size=4096}else if(FS.isFile(node.mode)){attr.size=node.usedBytes}else if(FS.isLink(node.mode)){attr.size=node.link.length}else{attr.size=0}attr.atime=new Date(node.timestamp);attr.mtime=new Date(node.timestamp);attr.ctime=new Date(node.timestamp);attr.blksize=4096;attr.blocks=Math.ceil(attr.size/attr.blksize);return attr},setattr:function(node,attr){if(attr.mode!==undefined){node.mode=attr.mode}if(attr.timestamp!==undefined){node.timestamp=attr.timestamp}if(attr.size!==undefined){MEMFS.resizeFileStorage(node,attr.size)}},lookup:function(parent,name){throw FS.genericErrors[44]},mknod:function(parent,name,mode,dev){return MEMFS.createNode(parent,name,mode,dev)},rename:function(old_node,new_dir,new_name){if(FS.isDir(old_node.mode)){var new_node;try{new_node=FS.lookupNode(new_dir,new_name)}catch(e){}if(new_node){for(var i in new_node.contents){throw new FS.ErrnoError(55)}}}delete old_node.parent.contents[old_node.name];old_node.parent.timestamp=Date.now();old_node.name=new_name;new_dir.contents[new_name]=old_node;new_dir.timestamp=old_node.parent.timestamp;old_node.parent=new_dir},unlink:function(parent,name){delete parent.contents[name];parent.timestamp=Date.now()},rmdir:function(parent,name){var node=FS.lookupNode(parent,name);for(var i in node.contents){throw new FS.ErrnoError(55)}delete parent.contents[name];parent.timestamp=Date.now()},readdir:function(node){var entries=[".",".."];for(var key in node.contents){if(!node.contents.hasOwnProperty(key)){continue}entries.push(key)}return entries},symlink:function(parent,newname,oldpath){var node=MEMFS.createNode(parent,newname,511|40960,0);node.link=oldpath;return node},readlink:function(node){if(!FS.isLink(node.mode)){throw new FS.ErrnoError(28)}return node.link}},stream_ops:{read:function(stream,buffer,offset,length,position){var contents=stream.node.contents;if(position>=stream.node.usedBytes)return 0;var size=Math.min(stream.node.usedBytes-position,length);if(size>8&&contents.subarray){buffer.set(contents.subarray(position,position+size),offset)}else{for(var i=0;i<size;i++)buffer[offset+i]=contents[position+i]}return size},write:function(stream,buffer,offset,length,position,canOwn){if(buffer.buffer===HEAP8.buffer){canOwn=false}if(!length)return 0;var node=stream.node;node.timestamp=Date.now();if(buffer.subarray&&(!node.contents||node.contents.subarray)){if(canOwn){node.contents=buffer.subarray(offset,offset+length);node.usedBytes=length;return length}else if(node.usedBytes===0&&position===0){node.contents=buffer.slice(offset,offset+length);node.usedBytes=length;return length}else if(position+length<=node.usedBytes){node.contents.set(buffer.subarray(offset,offset+length),position);return length}}MEMFS.expandFileStorage(node,position+length);if(node.contents.subarray&&buffer.subarray){node.contents.set(buffer.subarray(offset,offset+length),position)}else{for(var i=0;i<length;i++){node.contents[position+i]=buffer[offset+i]}}node.usedBytes=Math.max(node.usedBytes,position+length);return length},llseek:function(stream,offset,whence){var position=offset;if(whence===1){position+=stream.position}else if(whence===2){if(FS.isFile(stream.node.mode)){position+=stream.node.usedBytes}}if(position<0){throw new FS.ErrnoError(28)}return position},allocate:function(stream,offset,length){MEMFS.expandFileStorage(stream.node,offset+length);stream.node.usedBytes=Math.max(stream.node.usedBytes,offset+length)},mmap:function(stream,length,position,prot,flags){if(!FS.isFile(stream.node.mode)){throw new FS.ErrnoError(43)}var ptr;var allocated;var contents=stream.node.contents;if(!(flags&2)&&contents.buffer===HEAP8.buffer){allocated=false;ptr=contents.byteOffset}else{if(position>0||position+length<contents.length){if(contents.subarray){contents=contents.subarray(position,position+length)}else{contents=Array.prototype.slice.call(contents,position,position+length)}}allocated=true;ptr=mmapAlloc(length);if(!ptr){throw new FS.ErrnoError(48)}HEAP8.set(contents,ptr)}return{ptr:ptr,allocated:allocated}},msync:function(stream,buffer,offset,length,mmapFlags){MEMFS.stream_ops.write(stream,buffer,0,length,offset,false);return 0}}};function asyncLoad(url,onload,onerror,noRunDep){var dep=!noRunDep?getUniqueRunDependency(`al ${url}`):"";readAsync(url,arrayBuffer=>{assert(arrayBuffer,`Loading data file "${url}" failed (no arrayBuffer).`);onload(new Uint8Array(arrayBuffer));if(dep)removeRunDependency(dep)},event=>{if(onerror){onerror()}else{throw`Loading data file "${url}" failed.`}});if(dep)addRunDependency(dep)}var preloadPlugins=Module["preloadPlugins"]||[];function FS_handledByPreloadPlugin(byteArray,fullname,finish,onerror){if(typeof Browser!="undefined")Browser.init();var handled=false;preloadPlugins.forEach(function(plugin){if(handled)return;if(plugin["canHandle"](fullname)){plugin["handle"](byteArray,fullname,finish,onerror);handled=true}});return handled}function FS_createPreloadedFile(parent,name,url,canRead,canWrite,onload,onerror,dontCreateFile,canOwn,preFinish){var fullname=name?PATH_FS.resolve(PATH.join2(parent,name)):parent;var dep=getUniqueRunDependency(`cp ${fullname}`);function processData(byteArray){function finish(byteArray){if(preFinish)preFinish();if(!dontCreateFile){FS.createDataFile(parent,name,byteArray,canRead,canWrite,canOwn)}if(onload)onload();removeRunDependency(dep)}if(FS_handledByPreloadPlugin(byteArray,fullname,finish,()=>{if(onerror)onerror();removeRunDependency(dep)})){return}finish(byteArray)}addRunDependency(dep);if(typeof url=="string"){asyncLoad(url,byteArray=>processData(byteArray),onerror)}else{processData(url)}}function FS_modeStringToFlags(str){var flagModes={"r":0,"r+":2,"w":512|64|1,"w+":512|64|2,"a":1024|64|1,"a+":1024|64|2};var flags=flagModes[str];if(typeof flags=="undefined"){throw new Error(`Unknown file open mode: ${str}`)}return flags}function FS_getMode(canRead,canWrite){var mode=0;if(canRead)mode|=292|73;if(canWrite)mode|=146;return mode}var WORKERFS={DIR_MODE:16895,FILE_MODE:33279,reader:null,mount:function(mount){assert(ENVIRONMENT_IS_WORKER);if(!WORKERFS.reader)WORKERFS.reader=new FileReaderSync;var root=WORKERFS.createNode(null,"/",WORKERFS.DIR_MODE,0);var createdParents={};function ensureParent(path){var parts=path.split("/");var parent=root;for(var i=0;i<parts.length-1;i++){var curr=parts.slice(0,i+1).join("/");if(!createdParents[curr]){createdParents[curr]=WORKERFS.createNode(parent,parts[i],WORKERFS.DIR_MODE,0)}parent=createdParents[curr]}return parent}function base(path){var parts=path.split("/");return parts[parts.length-1]}Array.prototype.forEach.call(mount.opts["files"]||[],function(file){WORKERFS.createNode(ensureParent(file.name),base(file.name),WORKERFS.FILE_MODE,0,file,file.lastModifiedDate)});(mount.opts["blobs"]||[]).forEach(function(obj){WORKERFS.createNode(ensureParent(obj["name"]),base(obj["name"]),WORKERFS.FILE_MODE,0,obj["data"])});(mount.opts["packages"]||[]).forEach(function(pack){pack["metadata"].files.forEach(function(file){var name=file.filename.substr(1);WORKERFS.createNode(ensureParent(name),base(name),WORKERFS.FILE_MODE,0,pack["blob"].slice(file.start,file.end))})});return root},createNode:function(parent,name,mode,dev,contents,mtime){var node=FS.createNode(parent,name,mode);node.mode=mode;node.node_ops=WORKERFS.node_ops;node.stream_ops=WORKERFS.stream_ops;node.timestamp=(mtime||new Date).getTime();assert(WORKERFS.FILE_MODE!==WORKERFS.DIR_MODE);if(mode===WORKERFS.FILE_MODE){node.size=contents.size;node.contents=contents}else{node.size=4096;node.contents={}}if(parent){parent.contents[name]=node}return node},node_ops:{getattr:function(node){return{dev:1,ino:node.id,mode:node.mode,nlink:1,uid:0,gid:0,rdev:undefined,size:node.size,atime:new Date(node.timestamp),mtime:new Date(node.timestamp),ctime:new Date(node.timestamp),blksize:4096,blocks:Math.ceil(node.size/4096)}},setattr:function(node,attr){if(attr.mode!==undefined){node.mode=attr.mode}if(attr.timestamp!==undefined){node.timestamp=attr.timestamp}},lookup:function(parent,name){throw new FS.ErrnoError(44)},mknod:function(parent,name,mode,dev){throw new FS.ErrnoError(63)},rename:function(oldNode,newDir,newName){throw new FS.ErrnoError(63)},unlink:function(parent,name){throw new FS.ErrnoError(63)},rmdir:function(parent,name){throw new FS.ErrnoError(63)},readdir:function(node){var entries=[".",".."];for(var key in node.contents){if(!node.contents.hasOwnProperty(key)){continue}entries.push(key)}return entries},symlink:function(parent,newName,oldPath){throw new FS.ErrnoError(63)}},stream_ops:{read:function(stream,buffer,offset,length,position){if(position>=stream.node.size)return 0;var chunk=stream.node.contents.slice(position,position+length);var ab=WORKERFS.reader.readAsArrayBuffer(chunk);buffer.set(new Uint8Array(ab),offset);return chunk.size},write:function(stream,buffer,offset,length,position){throw new FS.ErrnoError(29)},llseek:function(stream,offset,whence){var position=offset;if(whence===1){position+=stream.position}else if(whence===2){if(FS.isFile(stream.node.mode)){position+=stream.node.size}}if(position<0){throw new FS.ErrnoError(28)}return position}}};var FS={root:null,mounts:[],devices:{},streams:[],nextInode:1,nameTable:null,currentPath:"/",initialized:false,ignorePermissions:true,ErrnoError:null,genericErrors:{},filesystems:null,syncFSRequests:0,lookupPath:(path,opts={})=>{path=PATH_FS.resolve(path);if(!path)return{path:"",node:null};var defaults={follow_mount:true,recurse_count:0};opts=Object.assign(defaults,opts);if(opts.recurse_count>8){throw new FS.ErrnoError(32)}var parts=path.split("/").filter(p=>!!p);var current=FS.root;var current_path="/";for(var i=0;i<parts.length;i++){var islast=i===parts.length-1;if(islast&&opts.parent){break}current=FS.lookupNode(current,parts[i]);current_path=PATH.join2(current_path,parts[i]);if(FS.isMountpoint(current)){if(!islast||islast&&opts.follow_mount){current=current.mounted.root}}if(!islast||opts.follow){var count=0;while(FS.isLink(current.mode)){var link=FS.readlink(current_path);current_path=PATH_FS.resolve(PATH.dirname(current_path),link);var lookup=FS.lookupPath(current_path,{recurse_count:opts.recurse_count+1});current=lookup.node;if(count++>40){throw new FS.ErrnoError(32)}}}}return{path:current_path,node:current}},getPath:node=>{var path;while(true){if(FS.isRoot(node)){var mount=node.mount.mountpoint;if(!path)return mount;return mount[mount.length-1]!=="/"?`${mount}/${path}`:mount+path}path=path?`${node.name}/${path}`:node.name;node=node.parent}},hashName:(parentid,name)=>{var hash=0;for(var i=0;i<name.length;i++){hash=(hash<<5)-hash+name.charCodeAt(i)|0}return(parentid+hash>>>0)%FS.nameTable.length},hashAddNode:node=>{var hash=FS.hashName(node.parent.id,node.name);node.name_next=FS.nameTable[hash];FS.nameTable[hash]=node},hashRemoveNode:node=>{var hash=FS.hashName(node.parent.id,node.name);if(FS.nameTable[hash]===node){FS.nameTable[hash]=node.name_next}else{var current=FS.nameTable[hash];while(current){if(current.name_next===node){current.name_next=node.name_next;break}current=current.name_next}}},lookupNode:(parent,name)=>{var errCode=FS.mayLookup(parent);if(errCode){throw new FS.ErrnoError(errCode,parent)}var hash=FS.hashName(parent.id,name);for(var node=FS.nameTable[hash];node;node=node.name_next){var nodeName=node.name;if(node.parent.id===parent.id&&nodeName===name){return node}}return FS.lookup(parent,name)},createNode:(parent,name,mode,rdev)=>{var node=new FS.FSNode(parent,name,mode,rdev);FS.hashAddNode(node);return node},destroyNode:node=>{FS.hashRemoveNode(node)},isRoot:node=>{return node===node.parent},isMountpoint:node=>{return!!node.mounted},isFile:mode=>{return(mode&61440)===32768},isDir:mode=>{return(mode&61440)===16384},isLink:mode=>{return(mode&61440)===40960},isChrdev:mode=>{return(mode&61440)===8192},isBlkdev:mode=>{return(mode&61440)===24576},isFIFO:mode=>{return(mode&61440)===4096},isSocket:mode=>{return(mode&49152)===49152},flagsToPermissionString:flag=>{var perms=["r","w","rw"][flag&3];if(flag&512){perms+="w"}return perms},nodePermissions:(node,perms)=>{if(FS.ignorePermissions){return 0}if(perms.includes("r")&&!(node.mode&292)){return 2}else if(perms.includes("w")&&!(node.mode&146)){return 2}else if(perms.includes("x")&&!(node.mode&73)){return 2}return 0},mayLookup:dir=>{var errCode=FS.nodePermissions(dir,"x");if(errCode)return errCode;if(!dir.node_ops.lookup)return 2;return 0},mayCreate:(dir,name)=>{try{var node=FS.lookupNode(dir,name);return 20}catch(e){}return FS.nodePermissions(dir,"wx")},mayDelete:(dir,name,isdir)=>{var node;try{node=FS.lookupNode(dir,name)}catch(e){return e.errno}var errCode=FS.nodePermissions(dir,"wx");if(errCode){return errCode}if(isdir){if(!FS.isDir(node.mode)){return 54}if(FS.isRoot(node)||FS.getPath(node)===FS.cwd()){return 10}}else{if(FS.isDir(node.mode)){return 31}}return 0},mayOpen:(node,flags)=>{if(!node){return 44}if(FS.isLink(node.mode)){return 32}else if(FS.isDir(node.mode)){if(FS.flagsToPermissionString(flags)!=="r"||flags&512){return 31}}return FS.nodePermissions(node,FS.flagsToPermissionString(flags))},MAX_OPEN_FDS:4096,nextfd:()=>{for(var fd=0;fd<=FS.MAX_OPEN_FDS;fd++){if(!FS.streams[fd]){return fd}}throw new FS.ErrnoError(33)},getStream:fd=>FS.streams[fd],createStream:(stream,fd=-1)=>{if(!FS.FSStream){FS.FSStream=function(){this.shared={}};FS.FSStream.prototype={};Object.defineProperties(FS.FSStream.prototype,{object:{get:function(){return this.node},set:function(val){this.node=val}},isRead:{get:function(){return(this.flags&2097155)!==1}},isWrite:{get:function(){return(this.flags&2097155)!==0}},isAppend:{get:function(){return this.flags&1024}},flags:{get:function(){return this.shared.flags},set:function(val){this.shared.flags=val}},position:{get:function(){return this.shared.position},set:function(val){this.shared.position=val}}})}stream=Object.assign(new FS.FSStream,stream);if(fd==-1){fd=FS.nextfd()}stream.fd=fd;FS.streams[fd]=stream;return stream},closeStream:fd=>{FS.streams[fd]=null},chrdev_stream_ops:{open:stream=>{var device=FS.getDevice(stream.node.rdev);stream.stream_ops=device.stream_ops;if(stream.stream_ops.open){stream.stream_ops.open(stream)}},llseek:()=>{throw new FS.ErrnoError(70)}},major:dev=>dev>>8,minor:dev=>dev&255,makedev:(ma,mi)=>ma<<8|mi,registerDevice:(dev,ops)=>{FS.devices[dev]={stream_ops:ops}},getDevice:dev=>FS.devices[dev],getMounts:mount=>{var mounts=[];var check=[mount];while(check.length){var m=check.pop();mounts.push(m);check.push.apply(check,m.mounts)}return mounts},syncfs:(populate,callback)=>{if(typeof populate=="function"){callback=populate;populate=false}FS.syncFSRequests++;if(FS.syncFSRequests>1){err(`warning: ${FS.syncFSRequests} FS.syncfs operations in flight at once, probably just doing extra work`)}var mounts=FS.getMounts(FS.root.mount);var completed=0;function doCallback(errCode){FS.syncFSRequests--;return callback(errCode)}function done(errCode){if(errCode){if(!done.errored){done.errored=true;return doCallback(errCode)}return}if(++completed>=mounts.length){doCallback(null)}}mounts.forEach(mount=>{if(!mount.type.syncfs){return done(null)}mount.type.syncfs(mount,populate,done)})},mount:(type,opts,mountpoint)=>{var root=mountpoint==="/";var pseudo=!mountpoint;var node;if(root&&FS.root){throw new FS.ErrnoError(10)}else if(!root&&!pseudo){var lookup=FS.lookupPath(mountpoint,{follow_mount:false});mountpoint=lookup.path;node=lookup.node;if(FS.isMountpoint(node)){throw new FS.ErrnoError(10)}if(!FS.isDir(node.mode)){throw new FS.ErrnoError(54)}}var mount={type:type,opts:opts,mountpoint:mountpoint,mounts:[]};var mountRoot=type.mount(mount);mountRoot.mount=mount;mount.root=mountRoot;if(root){FS.root=mountRoot}else if(node){node.mounted=mount;if(node.mount){node.mount.mounts.push(mount)}}return mountRoot},unmount:mountpoint=>{var lookup=FS.lookupPath(mountpoint,{follow_mount:false});if(!FS.isMountpoint(lookup.node)){throw new FS.ErrnoError(28)}var node=lookup.node;var mount=node.mounted;var mounts=FS.getMounts(mount);Object.keys(FS.nameTable).forEach(hash=>{var current=FS.nameTable[hash];while(current){var next=current.name_next;if(mounts.includes(current.mount)){FS.destroyNode(current)}current=next}});node.mounted=null;var idx=node.mount.mounts.indexOf(mount);node.mount.mounts.splice(idx,1)},lookup:(parent,name)=>{return parent.node_ops.lookup(parent,name)},mknod:(path,mode,dev)=>{var lookup=FS.lookupPath(path,{parent:true});var parent=lookup.node;var name=PATH.basename(path);if(!name||name==="."||name===".."){throw new FS.ErrnoError(28)}var errCode=FS.mayCreate(parent,name);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.mknod){throw new FS.ErrnoError(63)}return parent.node_ops.mknod(parent,name,mode,dev)},create:(path,mode)=>{mode=mode!==undefined?mode:438;mode&=4095;mode|=32768;return FS.mknod(path,mode,0)},mkdir:(path,mode)=>{mode=mode!==undefined?mode:511;mode&=511|512;mode|=16384;return FS.mknod(path,mode,0)},mkdirTree:(path,mode)=>{var dirs=path.split("/");var d="";for(var i=0;i<dirs.length;++i){if(!dirs[i])continue;d+="/"+dirs[i];try{FS.mkdir(d,mode)}catch(e){if(e.errno!=20)throw e}}},mkdev:(path,mode,dev)=>{if(typeof dev=="undefined"){dev=mode;mode=438}mode|=8192;return FS.mknod(path,mode,dev)},symlink:(oldpath,newpath)=>{if(!PATH_FS.resolve(oldpath)){throw new FS.ErrnoError(44)}var lookup=FS.lookupPath(newpath,{parent:true});var parent=lookup.node;if(!parent){throw new FS.ErrnoError(44)}var newname=PATH.basename(newpath);var errCode=FS.mayCreate(parent,newname);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.symlink){throw new FS.ErrnoError(63)}return parent.node_ops.symlink(parent,newname,oldpath)},rename:(old_path,new_path)=>{var old_dirname=PATH.dirname(old_path);var new_dirname=PATH.dirname(new_path);var old_name=PATH.basename(old_path);var new_name=PATH.basename(new_path);var lookup,old_dir,new_dir;lookup=FS.lookupPath(old_path,{parent:true});old_dir=lookup.node;lookup=FS.lookupPath(new_path,{parent:true});new_dir=lookup.node;if(!old_dir||!new_dir)throw new FS.ErrnoError(44);if(old_dir.mount!==new_dir.mount){throw new FS.ErrnoError(75)}var old_node=FS.lookupNode(old_dir,old_name);var relative=PATH_FS.relative(old_path,new_dirname);if(relative.charAt(0)!=="."){throw new FS.ErrnoError(28)}relative=PATH_FS.relative(new_path,old_dirname);if(relative.charAt(0)!=="."){throw new FS.ErrnoError(55)}var new_node;try{new_node=FS.lookupNode(new_dir,new_name)}catch(e){}if(old_node===new_node){return}var isdir=FS.isDir(old_node.mode);var errCode=FS.mayDelete(old_dir,old_name,isdir);if(errCode){throw new FS.ErrnoError(errCode)}errCode=new_node?FS.mayDelete(new_dir,new_name,isdir):FS.mayCreate(new_dir,new_name);if(errCode){throw new FS.ErrnoError(errCode)}if(!old_dir.node_ops.rename){throw new FS.ErrnoError(63)}if(FS.isMountpoint(old_node)||new_node&&FS.isMountpoint(new_node)){throw new FS.ErrnoError(10)}if(new_dir!==old_dir){errCode=FS.nodePermissions(old_dir,"w");if(errCode){throw new FS.ErrnoError(errCode)}}FS.hashRemoveNode(old_node);try{old_dir.node_ops.rename(old_node,new_dir,new_name)}catch(e){throw e}finally{FS.hashAddNode(old_node)}},rmdir:path=>{var lookup=FS.lookupPath(path,{parent:true});var parent=lookup.node;var name=PATH.basename(path);var node=FS.lookupNode(parent,name);var errCode=FS.mayDelete(parent,name,true);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.rmdir){throw new FS.ErrnoError(63)}if(FS.isMountpoint(node)){throw new FS.ErrnoError(10)}parent.node_ops.rmdir(parent,name);FS.destroyNode(node)},readdir:path=>{var lookup=FS.lookupPath(path,{follow:true});var node=lookup.node;if(!node.node_ops.readdir){throw new FS.ErrnoError(54)}return node.node_ops.readdir(node)},unlink:path=>{var lookup=FS.lookupPath(path,{parent:true});var parent=lookup.node;if(!parent){throw new FS.ErrnoError(44)}var name=PATH.basename(path);var node=FS.lookupNode(parent,name);var errCode=FS.mayDelete(parent,name,false);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.unlink){throw new FS.ErrnoError(63)}if(FS.isMountpoint(node)){throw new FS.ErrnoError(10)}parent.node_ops.unlink(parent,name);FS.destroyNode(node)},readlink:path=>{var lookup=FS.lookupPath(path);var link=lookup.node;if(!link){throw new FS.ErrnoError(44)}if(!link.node_ops.readlink){throw new FS.ErrnoError(28)}return PATH_FS.resolve(FS.getPath(link.parent),link.node_ops.readlink(link))},stat:(path,dontFollow)=>{var lookup=FS.lookupPath(path,{follow:!dontFollow});var node=lookup.node;if(!node){throw new FS.ErrnoError(44)}if(!node.node_ops.getattr){throw new FS.ErrnoError(63)}return node.node_ops.getattr(node)},lstat:path=>{return FS.stat(path,true)},chmod:(path,mode,dontFollow)=>{var node;if(typeof path=="string"){var lookup=FS.lookupPath(path,{follow:!dontFollow});node=lookup.node}else{node=path}if(!node.node_ops.setattr){throw new FS.ErrnoError(63)}node.node_ops.setattr(node,{mode:mode&4095|node.mode&~4095,timestamp:Date.now()})},lchmod:(path,mode)=>{FS.chmod(path,mode,true)},fchmod:(fd,mode)=>{var stream=FS.getStream(fd);if(!stream){throw new FS.ErrnoError(8)}FS.chmod(stream.node,mode)},chown:(path,uid,gid,dontFollow)=>{var node;if(typeof path=="string"){var lookup=FS.lookupPath(path,{follow:!dontFollow});node=lookup.node}else{node=path}if(!node.node_ops.setattr){throw new FS.ErrnoError(63)}node.node_ops.setattr(node,{timestamp:Date.now()})},lchown:(path,uid,gid)=>{FS.chown(path,uid,gid,true)},fchown:(fd,uid,gid)=>{var stream=FS.getStream(fd);if(!stream){throw new FS.ErrnoError(8)}FS.chown(stream.node,uid,gid)},truncate:(path,len)=>{if(len<0){throw new FS.ErrnoError(28)}var node;if(typeof path=="string"){var lookup=FS.lookupPath(path,{follow:true});node=lookup.node}else{node=path}if(!node.node_ops.setattr){throw new FS.ErrnoError(63)}if(FS.isDir(node.mode)){throw new FS.ErrnoError(31)}if(!FS.isFile(node.mode)){throw new FS.ErrnoError(28)}var errCode=FS.nodePermissions(node,"w");if(errCode){throw new FS.ErrnoError(errCode)}node.node_ops.setattr(node,{size:len,timestamp:Date.now()})},ftruncate:(fd,len)=>{var stream=FS.getStream(fd);if(!stream){throw new FS.ErrnoError(8)}if((stream.flags&2097155)===0){throw new FS.ErrnoError(28)}FS.truncate(stream.node,len)},utime:(path,atime,mtime)=>{var lookup=FS.lookupPath(path,{follow:true});var node=lookup.node;node.node_ops.setattr(node,{timestamp:Math.max(atime,mtime)})},open:(path,flags,mode)=>{if(path===""){throw new FS.ErrnoError(44)}flags=typeof flags=="string"?FS_modeStringToFlags(flags):flags;mode=typeof mode=="undefined"?438:mode;if(flags&64){mode=mode&4095|32768}else{mode=0}var node;if(typeof path=="object"){node=path}else{path=PATH.normalize(path);try{var lookup=FS.lookupPath(path,{follow:!(flags&131072)});node=lookup.node}catch(e){}}var created=false;if(flags&64){if(node){if(flags&128){throw new FS.ErrnoError(20)}}else{node=FS.mknod(path,mode,0);created=true}}if(!node){throw new FS.ErrnoError(44)}if(FS.isChrdev(node.mode)){flags&=~512}if(flags&65536&&!FS.isDir(node.mode)){throw new FS.ErrnoError(54)}if(!created){var errCode=FS.mayOpen(node,flags);if(errCode){throw new FS.ErrnoError(errCode)}}if(flags&512&&!created){FS.truncate(node,0)}flags&=~(128|512|131072);var stream=FS.createStream({node:node,path:FS.getPath(node),flags:flags,seekable:true,position:0,stream_ops:node.stream_ops,ungotten:[],error:false});if(stream.stream_ops.open){stream.stream_ops.open(stream)}if(Module["logReadFiles"]&&!(flags&1)){if(!FS.readFiles)FS.readFiles={};if(!(path in FS.readFiles)){FS.readFiles[path]=1}}return stream},close:stream=>{if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if(stream.getdents)stream.getdents=null;try{if(stream.stream_ops.close){stream.stream_ops.close(stream)}}catch(e){throw e}finally{FS.closeStream(stream.fd)}stream.fd=null},isClosed:stream=>{return stream.fd===null},llseek:(stream,offset,whence)=>{if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if(!stream.seekable||!stream.stream_ops.llseek){throw new FS.ErrnoError(70)}if(whence!=0&&whence!=1&&whence!=2){throw new FS.ErrnoError(28)}stream.position=stream.stream_ops.llseek(stream,offset,whence);stream.ungotten=[];return stream.position},read:(stream,buffer,offset,length,position)=>{if(length<0||position<0){throw new FS.ErrnoError(28)}if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if((stream.flags&2097155)===1){throw new FS.ErrnoError(8)}if(FS.isDir(stream.node.mode)){throw new FS.ErrnoError(31)}if(!stream.stream_ops.read){throw new FS.ErrnoError(28)}var seeking=typeof position!="undefined";if(!seeking){position=stream.position}else if(!stream.seekable){throw new FS.ErrnoError(70)}var bytesRead=stream.stream_ops.read(stream,buffer,offset,length,position);if(!seeking)stream.position+=bytesRead;return bytesRead},write:(stream,buffer,offset,length,position,canOwn)=>{if(length<0||position<0){throw new FS.ErrnoError(28)}if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if((stream.flags&2097155)===0){throw new FS.ErrnoError(8)}if(FS.isDir(stream.node.mode)){throw new FS.ErrnoError(31)}if(!stream.stream_ops.write){throw new FS.ErrnoError(28)}if(stream.seekable&&stream.flags&1024){FS.llseek(stream,0,2)}var seeking=typeof position!="undefined";if(!seeking){position=stream.position}else if(!stream.seekable){throw new FS.ErrnoError(70)}var bytesWritten=stream.stream_ops.write(stream,buffer,offset,length,position,canOwn);if(!seeking)stream.position+=bytesWritten;return bytesWritten},allocate:(stream,offset,length)=>{if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if(offset<0||length<=0){throw new FS.ErrnoError(28)}if((stream.flags&2097155)===0){throw new FS.ErrnoError(8)}if(!FS.isFile(stream.node.mode)&&!FS.isDir(stream.node.mode)){throw new FS.ErrnoError(43)}if(!stream.stream_ops.allocate){throw new FS.ErrnoError(138)}stream.stream_ops.allocate(stream,offset,length)},mmap:(stream,length,position,prot,flags)=>{if((prot&2)!==0&&(flags&2)===0&&(stream.flags&2097155)!==2){throw new FS.ErrnoError(2)}if((stream.flags&2097155)===1){throw new FS.ErrnoError(2)}if(!stream.stream_ops.mmap){throw new FS.ErrnoError(43)}return stream.stream_ops.mmap(stream,length,position,prot,flags)},msync:(stream,buffer,offset,length,mmapFlags)=>{if(!stream.stream_ops.msync){return 0}return stream.stream_ops.msync(stream,buffer,offset,length,mmapFlags)},munmap:stream=>0,ioctl:(stream,cmd,arg)=>{if(!stream.stream_ops.ioctl){throw new FS.ErrnoError(59)}return stream.stream_ops.ioctl(stream,cmd,arg)},readFile:(path,opts={})=>{opts.flags=opts.flags||0;opts.encoding=opts.encoding||"binary";if(opts.encoding!=="utf8"&&opts.encoding!=="binary"){throw new Error(`Invalid encoding type "${opts.encoding}"`)}var ret;var stream=FS.open(path,opts.flags);var stat=FS.stat(path);var length=stat.size;var buf=new Uint8Array(length);FS.read(stream,buf,0,length,0);if(opts.encoding==="utf8"){ret=UTF8ArrayToString(buf,0)}else if(opts.encoding==="binary"){ret=buf}FS.close(stream);return ret},writeFile:(path,data,opts={})=>{opts.flags=opts.flags||577;var stream=FS.open(path,opts.flags,opts.mode);if(typeof data=="string"){var buf=new Uint8Array(lengthBytesUTF8(data)+1);var actualNumBytes=stringToUTF8Array(data,buf,0,buf.length);FS.write(stream,buf,0,actualNumBytes,undefined,opts.canOwn)}else if(ArrayBuffer.isView(data)){FS.write(stream,data,0,data.byteLength,undefined,opts.canOwn)}else{throw new Error("Unsupported data type")}FS.close(stream)},cwd:()=>FS.currentPath,chdir:path=>{var lookup=FS.lookupPath(path,{follow:true});if(lookup.node===null){throw new FS.ErrnoError(44)}if(!FS.isDir(lookup.node.mode)){throw new FS.ErrnoError(54)}var errCode=FS.nodePermissions(lookup.node,"x");if(errCode){throw new FS.ErrnoError(errCode)}FS.currentPath=lookup.path},createDefaultDirectories:()=>{FS.mkdir("/tmp");FS.mkdir("/home");FS.mkdir("/home/web_user")},createDefaultDevices:()=>{FS.mkdir("/dev");FS.registerDevice(FS.makedev(1,3),{read:()=>0,write:(stream,buffer,offset,length,pos)=>length});FS.mkdev("/dev/null",FS.makedev(1,3));TTY.register(FS.makedev(5,0),TTY.default_tty_ops);TTY.register(FS.makedev(6,0),TTY.default_tty1_ops);FS.mkdev("/dev/tty",FS.makedev(5,0));FS.mkdev("/dev/tty1",FS.makedev(6,0));var randomBuffer=new Uint8Array(1024),randomLeft=0;var randomByte=()=>{if(randomLeft===0){randomLeft=randomFill(randomBuffer).byteLength}return randomBuffer[--randomLeft]};FS.createDevice("/dev","random",randomByte);FS.createDevice("/dev","urandom",randomByte);FS.mkdir("/dev/shm");FS.mkdir("/dev/shm/tmp")},createSpecialDirectories:()=>{FS.mkdir("/proc");var proc_self=FS.mkdir("/proc/self");FS.mkdir("/proc/self/fd");FS.mount({mount:()=>{var node=FS.createNode(proc_self,"fd",16384|511,73);node.node_ops={lookup:(parent,name)=>{var fd=+name;var stream=FS.getStream(fd);if(!stream)throw new FS.ErrnoError(8);var ret={parent:null,mount:{mountpoint:"fake"},node_ops:{readlink:()=>stream.path}};ret.parent=ret;return ret}};return node}},{},"/proc/self/fd")},createStandardStreams:()=>{if(Module["stdin"]){FS.createDevice("/dev","stdin",Module["stdin"])}else{FS.symlink("/dev/tty","/dev/stdin")}if(Module["stdout"]){FS.createDevice("/dev","stdout",null,Module["stdout"])}else{FS.symlink("/dev/tty","/dev/stdout")}if(Module["stderr"]){FS.createDevice("/dev","stderr",null,Module["stderr"])}else{FS.symlink("/dev/tty1","/dev/stderr")}var stdin=FS.open("/dev/stdin",0);var stdout=FS.open("/dev/stdout",1);var stderr=FS.open("/dev/stderr",1)},ensureErrnoError:()=>{if(FS.ErrnoError)return;FS.ErrnoError=function ErrnoError(errno,node){this.name="ErrnoError";this.node=node;this.setErrno=function(errno){this.errno=errno};this.setErrno(errno);this.message="FS error"};FS.ErrnoError.prototype=new Error;FS.ErrnoError.prototype.constructor=FS.ErrnoError;[44].forEach(code=>{FS.genericErrors[code]=new FS.ErrnoError(code);FS.genericErrors[code].stack="<generic error, no stack>"})},staticInit:()=>{FS.ensureErrnoError();FS.nameTable=new Array(4096);FS.mount(MEMFS,{},"/");FS.createDefaultDirectories();FS.createDefaultDevices();FS.createSpecialDirectories();FS.filesystems={"MEMFS":MEMFS,"WORKERFS":WORKERFS}},init:(input,output,error)=>{FS.init.initialized=true;FS.ensureErrnoError();Module["stdin"]=input||Module["stdin"];Module["stdout"]=output||Module["stdout"];Module["stderr"]=error||Module["stderr"];FS.createStandardStreams()},quit:()=>{FS.init.initialized=false;for(var i=0;i<FS.streams.length;i++){var stream=FS.streams[i];if(!stream){continue}FS.close(stream)}},findObject:(path,dontResolveLastLink)=>{var ret=FS.analyzePath(path,dontResolveLastLink);if(!ret.exists){return null}return ret.object},analyzePath:(path,dontResolveLastLink)=>{try{var lookup=FS.lookupPath(path,{follow:!dontResolveLastLink});path=lookup.path}catch(e){}var ret={isRoot:false,exists:false,error:0,name:null,path:null,object:null,parentExists:false,parentPath:null,parentObject:null};try{var lookup=FS.lookupPath(path,{parent:true});ret.parentExists=true;ret.parentPath=lookup.path;ret.parentObject=lookup.node;ret.name=PATH.basename(path);lookup=FS.lookupPath(path,{follow:!dontResolveLastLink});ret.exists=true;ret.path=lookup.path;ret.object=lookup.node;ret.name=lookup.node.name;ret.isRoot=lookup.path==="/"}catch(e){ret.error=e.errno}return ret},createPath:(parent,path,canRead,canWrite)=>{parent=typeof parent=="string"?parent:FS.getPath(parent);var parts=path.split("/").reverse();while(parts.length){var part=parts.pop();if(!part)continue;var current=PATH.join2(parent,part);try{FS.mkdir(current)}catch(e){}parent=current}return current},createFile:(parent,name,properties,canRead,canWrite)=>{var path=PATH.join2(typeof parent=="string"?parent:FS.getPath(parent),name);var mode=FS_getMode(canRead,canWrite);return FS.create(path,mode)},createDataFile:(parent,name,data,canRead,canWrite,canOwn)=>{var path=name;if(parent){parent=typeof parent=="string"?parent:FS.getPath(parent);path=name?PATH.join2(parent,name):parent}var mode=FS_getMode(canRead,canWrite);var node=FS.create(path,mode);if(data){if(typeof data=="string"){var arr=new Array(data.length);for(var i=0,len=data.length;i<len;++i)arr[i]=data.charCodeAt(i);data=arr}FS.chmod(node,mode|146);var stream=FS.open(node,577);FS.write(stream,data,0,data.length,0,canOwn);FS.close(stream);FS.chmod(node,mode)}return node},createDevice:(parent,name,input,output)=>{var path=PATH.join2(typeof parent=="string"?parent:FS.getPath(parent),name);var mode=FS_getMode(!!input,!!output);if(!FS.createDevice.major)FS.createDevice.major=64;var dev=FS.makedev(FS.createDevice.major++,0);FS.registerDevice(dev,{open:stream=>{stream.seekable=false},close:stream=>{if(output&&output.buffer&&output.buffer.length){output(10)}},read:(stream,buffer,offset,length,pos)=>{var bytesRead=0;for(var i=0;i<length;i++){var result;try{result=input()}catch(e){throw new FS.ErrnoError(29)}if(result===undefined&&bytesRead===0){throw new FS.ErrnoError(6)}if(result===null||result===undefined)break;bytesRead++;buffer[offset+i]=result}if(bytesRead){stream.node.timestamp=Date.now()}return bytesRead},write:(stream,buffer,offset,length,pos)=>{for(var i=0;i<length;i++){try{output(buffer[offset+i])}catch(e){throw new FS.ErrnoError(29)}}if(length){stream.node.timestamp=Date.now()}return i}});return FS.mkdev(path,mode,dev)},forceLoadFile:obj=>{if(obj.isDevice||obj.isFolder||obj.link||obj.contents)return true;if(typeof XMLHttpRequest!="undefined"){throw new Error("Lazy loading should have been performed (contents set) in createLazyFile, but it was not. Lazy loading only works in web workers. Use --embed-file or --preload-file in emcc on the main thread.")}else if(read_){try{obj.contents=intArrayFromString(read_(obj.url),true);obj.usedBytes=obj.contents.length}catch(e){throw new FS.ErrnoError(29)}}else{throw new Error("Cannot load without read() or XMLHttpRequest.")}},createLazyFile:(parent,name,url,canRead,canWrite)=>{function LazyUint8Array(){this.lengthKnown=false;this.chunks=[]}LazyUint8Array.prototype.get=function LazyUint8Array_get(idx){if(idx>this.length-1||idx<0){return undefined}var chunkOffset=idx%this.chunkSize;var chunkNum=idx/this.chunkSize|0;return this.getter(chunkNum)[chunkOffset]};LazyUint8Array.prototype.setDataGetter=function LazyUint8Array_setDataGetter(getter){this.getter=getter};LazyUint8Array.prototype.cacheLength=function LazyUint8Array_cacheLength(){var xhr=new XMLHttpRequest;xhr.open("HEAD",url,false);xhr.send(null);if(!(xhr.status>=200&&xhr.status<300||xhr.status===304))throw new Error("Couldn't load "+url+". Status: "+xhr.status);var datalength=Number(xhr.getResponseHeader("Content-length"));var header;var hasByteServing=(header=xhr.getResponseHeader("Accept-Ranges"))&&header==="bytes";var usesGzip=(header=xhr.getResponseHeader("Content-Encoding"))&&header==="gzip";var chunkSize=1024*1024;if(!hasByteServing)chunkSize=datalength;var doXHR=(from,to)=>{if(from>to)throw new Error("invalid range ("+from+", "+to+") or no bytes requested!");if(to>datalength-1)throw new Error("only "+datalength+" bytes available! programmer error!");var xhr=new XMLHttpRequest;xhr.open("GET",url,false);if(datalength!==chunkSize)xhr.setRequestHeader("Range","bytes="+from+"-"+to);xhr.responseType="arraybuffer";if(xhr.overrideMimeType){xhr.overrideMimeType("text/plain; charset=x-user-defined")}xhr.send(null);if(!(xhr.status>=200&&xhr.status<300||xhr.status===304))throw new Error("Couldn't load "+url+". Status: "+xhr.status);if(xhr.response!==undefined){return new Uint8Array(xhr.response||[])}return intArrayFromString(xhr.responseText||"",true)};var lazyArray=this;lazyArray.setDataGetter(chunkNum=>{var start=chunkNum*chunkSize;var end=(chunkNum+1)*chunkSize-1;end=Math.min(end,datalength-1);if(typeof lazyArray.chunks[chunkNum]=="undefined"){lazyArray.chunks[chunkNum]=doXHR(start,end)}if(typeof lazyArray.chunks[chunkNum]=="undefined")throw new Error("doXHR failed!");return lazyArray.chunks[chunkNum]});if(usesGzip||!datalength){chunkSize=datalength=1;datalength=this.getter(0).length;chunkSize=datalength;out("LazyFiles on gzip forces download of the whole file when length is accessed")}this._length=datalength;this._chunkSize=chunkSize;this.lengthKnown=true};if(typeof XMLHttpRequest!="undefined"){if(!ENVIRONMENT_IS_WORKER)throw"Cannot do synchronous binary XHRs outside webworkers in modern browsers. Use --embed-file or --preload-file in emcc";var lazyArray=new LazyUint8Array;Object.defineProperties(lazyArray,{length:{get:function(){if(!this.lengthKnown){this.cacheLength()}return this._length}},chunkSize:{get:function(){if(!this.lengthKnown){this.cacheLength()}return this._chunkSize}}});var properties={isDevice:false,contents:lazyArray}}else{var properties={isDevice:false,url:url}}var node=FS.createFile(parent,name,properties,canRead,canWrite);if(properties.contents){node.contents=properties.contents}else if(properties.url){node.contents=null;node.url=properties.url}Object.defineProperties(node,{usedBytes:{get:function(){return this.contents.length}}});var stream_ops={};var keys=Object.keys(node.stream_ops);keys.forEach(key=>{var fn=node.stream_ops[key];stream_ops[key]=function forceLoadLazyFile(){FS.forceLoadFile(node);return fn.apply(null,arguments)}});function writeChunks(stream,buffer,offset,length,position){var contents=stream.node.contents;if(position>=contents.length)return 0;var size=Math.min(contents.length-position,length);if(contents.slice){for(var i=0;i<size;i++){buffer[offset+i]=contents[position+i]}}else{for(var i=0;i<size;i++){buffer[offset+i]=contents.get(position+i)}}return size}stream_ops.read=(stream,buffer,offset,length,position)=>{FS.forceLoadFile(node);return writeChunks(stream,buffer,offset,length,position)};stream_ops.mmap=(stream,length,position,prot,flags)=>{FS.forceLoadFile(node);var ptr=mmapAlloc(length);if(!ptr){throw new FS.ErrnoError(48)}writeChunks(stream,HEAP8,ptr,length,position);return{ptr:ptr,allocated:true}};node.stream_ops=stream_ops;return node}};var SYSCALLS={DEFAULT_POLLMASK:5,calculateAt:function(dirfd,path,allowEmpty){if(PATH.isAbs(path)){return path}var dir;if(dirfd===-100){dir=FS.cwd()}else{var dirstream=SYSCALLS.getStreamFromFD(dirfd);dir=dirstream.path}if(path.length==0){if(!allowEmpty){throw new FS.ErrnoError(44)}return dir}return PATH.join2(dir,path)},doStat:function(func,path,buf){try{var stat=func(path)}catch(e){if(e&&e.node&&PATH.normalize(path)!==PATH.normalize(FS.getPath(e.node))){return-54}throw e}HEAP32[buf>>2]=stat.dev;HEAP32[buf+8>>2]=stat.ino;HEAP32[buf+12>>2]=stat.mode;HEAPU32[buf+16>>2]=stat.nlink;HEAP32[buf+20>>2]=stat.uid;HEAP32[buf+24>>2]=stat.gid;HEAP32[buf+28>>2]=stat.rdev;HEAP64[buf+40>>3]=BigInt(stat.size);HEAP32[buf+48>>2]=4096;HEAP32[buf+52>>2]=stat.blocks;var atime=stat.atime.getTime();var mtime=stat.mtime.getTime();var ctime=stat.ctime.getTime();HEAP64[buf+56>>3]=BigInt(Math.floor(atime/1e3));HEAPU32[buf+64>>2]=atime%1e3*1e3;HEAP64[buf+72>>3]=BigInt(Math.floor(mtime/1e3));HEAPU32[buf+80>>2]=mtime%1e3*1e3;HEAP64[buf+88>>3]=BigInt(Math.floor(ctime/1e3));HEAPU32[buf+96>>2]=ctime%1e3*1e3;HEAP64[buf+104>>3]=BigInt(stat.ino);return 0},doMsync:function(addr,stream,len,flags,offset){if(!FS.isFile(stream.node.mode)){throw new FS.ErrnoError(43)}if(flags&2){return 0}var buffer=HEAPU8.slice(addr,addr+len);FS.msync(stream,buffer,offset,len,flags)},varargs:undefined,get:function(){SYSCALLS.varargs+=4;var ret=HEAP32[SYSCALLS.varargs-4>>2];return ret},getStr:function(ptr){var ret=UTF8ToString(ptr);return ret},getStreamFromFD:function(fd){var stream=FS.getStream(fd);if(!stream)throw new FS.ErrnoError(8);return stream}};function ___syscall__newselect(nfds,readfds,writefds,exceptfds,timeout){try{var total=0;var srcReadLow=readfds?HEAP32[readfds>>2]:0,srcReadHigh=readfds?HEAP32[readfds+4>>2]:0;var srcWriteLow=writefds?HEAP32[writefds>>2]:0,srcWriteHigh=writefds?HEAP32[writefds+4>>2]:0;var srcExceptLow=exceptfds?HEAP32[exceptfds>>2]:0,srcExceptHigh=exceptfds?HEAP32[exceptfds+4>>2]:0;var dstReadLow=0,dstReadHigh=0;var dstWriteLow=0,dstWriteHigh=0;var dstExceptLow=0,dstExceptHigh=0;var allLow=(readfds?HEAP32[readfds>>2]:0)|(writefds?HEAP32[writefds>>2]:0)|(exceptfds?HEAP32[exceptfds>>2]:0);var allHigh=(readfds?HEAP32[readfds+4>>2]:0)|(writefds?HEAP32[writefds+4>>2]:0)|(exceptfds?HEAP32[exceptfds+4>>2]:0);var check=function(fd,low,high,val){return fd<32?low&val:high&val};for(var fd=0;fd<nfds;fd++){var mask=1<<fd%32;if(!check(fd,allLow,allHigh,mask)){continue}var stream=SYSCALLS.getStreamFromFD(fd);var flags=SYSCALLS.DEFAULT_POLLMASK;if(stream.stream_ops.poll){flags=stream.stream_ops.poll(stream)}if(flags&1&&check(fd,srcReadLow,srcReadHigh,mask)){fd<32?dstReadLow=dstReadLow|mask:dstReadHigh=dstReadHigh|mask;total++}if(flags&4&&check(fd,srcWriteLow,srcWriteHigh,mask)){fd<32?dstWriteLow=dstWriteLow|mask:dstWriteHigh=dstWriteHigh|mask;total++}if(flags&2&&check(fd,srcExceptLow,srcExceptHigh,mask)){fd<32?dstExceptLow=dstExceptLow|mask:dstExceptHigh=dstExceptHigh|mask;total++}}if(readfds){HEAP32[readfds>>2]=dstReadLow;HEAP32[readfds+4>>2]=dstReadHigh}if(writefds){HEAP32[writefds>>2]=dstWriteLow;HEAP32[writefds+4>>2]=dstWriteHigh}if(exceptfds){HEAP32[exceptfds>>2]=dstExceptLow;HEAP32[exceptfds+4>>2]=dstExceptHigh}return total}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}var SOCKFS={mount:function(mount){Module["websocket"]=Module["websocket"]&&"object"===typeof Module["websocket"]?Module["websocket"]:{};Module["websocket"]._callbacks={};Module["websocket"]["on"]=function(event,callback){if("function"===typeof callback){this._callbacks[event]=callback}return this};Module["websocket"].emit=function(event,param){if("function"===typeof this._callbacks[event]){this._callbacks[event].call(this,param)}};return FS.createNode(null,"/",16384|511,0)},createSocket:function(family,type,protocol){type&=~526336;var streaming=type==1;if(streaming&&protocol&&protocol!=6){throw new FS.ErrnoError(66)}var sock={family:family,type:type,protocol:protocol,server:null,error:null,peers:{},pending:[],recv_queue:[],sock_ops:SOCKFS.websocket_sock_ops};var name=SOCKFS.nextname();var node=FS.createNode(SOCKFS.root,name,49152,0);node.sock=sock;var stream=FS.createStream({path:name,node:node,flags:2,seekable:false,stream_ops:SOCKFS.stream_ops});sock.stream=stream;return sock},getSocket:function(fd){var stream=FS.getStream(fd);if(!stream||!FS.isSocket(stream.node.mode)){return null}return stream.node.sock},stream_ops:{poll:function(stream){var sock=stream.node.sock;return sock.sock_ops.poll(sock)},ioctl:function(stream,request,varargs){var sock=stream.node.sock;return sock.sock_ops.ioctl(sock,request,varargs)},read:function(stream,buffer,offset,length,position){var sock=stream.node.sock;var msg=sock.sock_ops.recvmsg(sock,length);if(!msg){return 0}buffer.set(msg.buffer,offset);return msg.buffer.length},write:function(stream,buffer,offset,length,position){var sock=stream.node.sock;return sock.sock_ops.sendmsg(sock,buffer,offset,length)},close:function(stream){var sock=stream.node.sock;sock.sock_ops.close(sock)}},nextname:function(){if(!SOCKFS.nextname.current){SOCKFS.nextname.current=0}return"socket["+SOCKFS.nextname.current+++"]"},websocket_sock_ops:{createPeer:function(sock,addr,port){var ws;if(typeof addr=="object"){ws=addr;addr=null;port=null}if(ws){if(ws._socket){addr=ws._socket.remoteAddress;port=ws._socket.remotePort}else{var result=/ws[s]?:\/\/([^:]+):(\d+)/.exec(ws.url);if(!result){throw new Error("WebSocket URL must be in the format ws(s)://address:port")}addr=result[1];port=parseInt(result[2],10)}}else{try{var runtimeConfig=Module["websocket"]&&"object"===typeof Module["websocket"];var url="ws:#".replace("#","//");if(runtimeConfig){if("string"===typeof Module["websocket"]["url"]){url=Module["websocket"]["url"]}}if(url==="ws://"||url==="wss://"){var parts=addr.split("/");url=url+parts[0]+":"+port+"/"+parts.slice(1).join("/")}var subProtocols="binary";if(runtimeConfig){if("string"===typeof Module["websocket"]["subprotocol"]){subProtocols=Module["websocket"]["subprotocol"]}}var opts=undefined;if(subProtocols!=="null"){subProtocols=subProtocols.replace(/^ +| +$/g,"").split(/ *, */);opts=subProtocols}if(runtimeConfig&&null===Module["websocket"]["subprotocol"]){subProtocols="null";opts=undefined}var WebSocketConstructor;{WebSocketConstructor=WebSocket}ws=new WebSocketConstructor(url,opts);ws.binaryType="arraybuffer"}catch(e){throw new FS.ErrnoError(23)}}var peer={addr:addr,port:port,socket:ws,dgram_send_queue:[]};SOCKFS.websocket_sock_ops.addPeer(sock,peer);SOCKFS.websocket_sock_ops.handlePeerEvents(sock,peer);if(sock.type===2&&typeof sock.sport!="undefined"){peer.dgram_send_queue.push(new Uint8Array([255,255,255,255,"p".charCodeAt(0),"o".charCodeAt(0),"r".charCodeAt(0),"t".charCodeAt(0),(sock.sport&65280)>>8,sock.sport&255]))}return peer},getPeer:function(sock,addr,port){return sock.peers[addr+":"+port]},addPeer:function(sock,peer){sock.peers[peer.addr+":"+peer.port]=peer},removePeer:function(sock,peer){delete sock.peers[peer.addr+":"+peer.port]},handlePeerEvents:function(sock,peer){var first=true;var handleOpen=function(){Module["websocket"].emit("open",sock.stream.fd);try{var queued=peer.dgram_send_queue.shift();while(queued){peer.socket.send(queued);queued=peer.dgram_send_queue.shift()}}catch(e){peer.socket.close()}};function handleMessage(data){if(typeof data=="string"){var encoder=new TextEncoder;data=encoder.encode(data)}else{assert(data.byteLength!==undefined);if(data.byteLength==0){return}data=new Uint8Array(data)}var wasfirst=first;first=false;if(wasfirst&&data.length===10&&data[0]===255&&data[1]===255&&data[2]===255&&data[3]===255&&data[4]==="p".charCodeAt(0)&&data[5]==="o".charCodeAt(0)&&data[6]==="r".charCodeAt(0)&&data[7]==="t".charCodeAt(0)){var newport=data[8]<<8|data[9];SOCKFS.websocket_sock_ops.removePeer(sock,peer);peer.port=newport;SOCKFS.websocket_sock_ops.addPeer(sock,peer);return}sock.recv_queue.push({addr:peer.addr,port:peer.port,data:data});Module["websocket"].emit("message",sock.stream.fd)}if(ENVIRONMENT_IS_NODE){peer.socket.on("open",handleOpen);peer.socket.on("message",function(data,isBinary){if(!isBinary){return}handleMessage(new Uint8Array(data).buffer)});peer.socket.on("close",function(){Module["websocket"].emit("close",sock.stream.fd)});peer.socket.on("error",function(error){sock.error=14;Module["websocket"].emit("error",[sock.stream.fd,sock.error,"ECONNREFUSED: Connection refused"])})}else{peer.socket.onopen=handleOpen;peer.socket.onclose=function(){Module["websocket"].emit("close",sock.stream.fd)};peer.socket.onmessage=function peer_socket_onmessage(event){handleMessage(event.data)};peer.socket.onerror=function(error){sock.error=14;Module["websocket"].emit("error",[sock.stream.fd,sock.error,"ECONNREFUSED: Connection refused"])}}},poll:function(sock){if(sock.type===1&&sock.server){return sock.pending.length?64|1:0}var mask=0;var dest=sock.type===1?SOCKFS.websocket_sock_ops.getPeer(sock,sock.daddr,sock.dport):null;if(sock.recv_queue.length||!dest||dest&&dest.socket.readyState===dest.socket.CLOSING||dest&&dest.socket.readyState===dest.socket.CLOSED){mask|=64|1}if(!dest||dest&&dest.socket.readyState===dest.socket.OPEN){mask|=4}if(dest&&dest.socket.readyState===dest.socket.CLOSING||dest&&dest.socket.readyState===dest.socket.CLOSED){mask|=16}return mask},ioctl:function(sock,request,arg){switch(request){case 21531:var bytes=0;if(sock.recv_queue.length){bytes=sock.recv_queue[0].data.length}HEAP32[arg>>2]=bytes;return 0;default:return 28}},close:function(sock){if(sock.server){try{sock.server.close()}catch(e){}sock.server=null}var peers=Object.keys(sock.peers);for(var i=0;i<peers.length;i++){var peer=sock.peers[peers[i]];try{peer.socket.close()}catch(e){}SOCKFS.websocket_sock_ops.removePeer(sock,peer)}return 0},bind:function(sock,addr,port){if(typeof sock.saddr!="undefined"||typeof sock.sport!="undefined"){throw new FS.ErrnoError(28)}sock.saddr=addr;sock.sport=port;if(sock.type===2){if(sock.server){sock.server.close();sock.server=null}try{sock.sock_ops.listen(sock,0)}catch(e){if(!(e.name==="ErrnoError"))throw e;if(e.errno!==138)throw e}}},connect:function(sock,addr,port){if(sock.server){throw new FS.ErrnoError(138)}if(typeof sock.daddr!="undefined"&&typeof sock.dport!="undefined"){var dest=SOCKFS.websocket_sock_ops.getPeer(sock,sock.daddr,sock.dport);if(dest){if(dest.socket.readyState===dest.socket.CONNECTING){throw new FS.ErrnoError(7)}else{throw new FS.ErrnoError(30)}}}var peer=SOCKFS.websocket_sock_ops.createPeer(sock,addr,port);sock.daddr=peer.addr;sock.dport=peer.port;throw new FS.ErrnoError(26)},listen:function(sock,backlog){if(!ENVIRONMENT_IS_NODE){throw new FS.ErrnoError(138)}},accept:function(listensock){if(!listensock.server||!listensock.pending.length){throw new FS.ErrnoError(28)}var newsock=listensock.pending.shift();newsock.stream.flags=listensock.stream.flags;return newsock},getname:function(sock,peer){var addr,port;if(peer){if(sock.daddr===undefined||sock.dport===undefined){throw new FS.ErrnoError(53)}addr=sock.daddr;port=sock.dport}else{addr=sock.saddr||0;port=sock.sport||0}return{addr:addr,port:port}},sendmsg:function(sock,buffer,offset,length,addr,port){if(sock.type===2){if(addr===undefined||port===undefined){addr=sock.daddr;port=sock.dport}if(addr===undefined||port===undefined){throw new FS.ErrnoError(17)}}else{addr=sock.daddr;port=sock.dport}var dest=SOCKFS.websocket_sock_ops.getPeer(sock,addr,port);if(sock.type===1){if(!dest||dest.socket.readyState===dest.socket.CLOSING||dest.socket.readyState===dest.socket.CLOSED){throw new FS.ErrnoError(53)}else if(dest.socket.readyState===dest.socket.CONNECTING){throw new FS.ErrnoError(6)}}if(ArrayBuffer.isView(buffer)){offset+=buffer.byteOffset;buffer=buffer.buffer}var data;data=buffer.slice(offset,offset+length);if(sock.type===2){if(!dest||dest.socket.readyState!==dest.socket.OPEN){if(!dest||dest.socket.readyState===dest.socket.CLOSING||dest.socket.readyState===dest.socket.CLOSED){dest=SOCKFS.websocket_sock_ops.createPeer(sock,addr,port)}dest.dgram_send_queue.push(data);return length}}try{dest.socket.send(data);return length}catch(e){throw new FS.ErrnoError(28)}},recvmsg:function(sock,length){if(sock.type===1&&sock.server){throw new FS.ErrnoError(53)}var queued=sock.recv_queue.shift();if(!queued){if(sock.type===1){var dest=SOCKFS.websocket_sock_ops.getPeer(sock,sock.daddr,sock.dport);if(!dest){throw new FS.ErrnoError(53)}if(dest.socket.readyState===dest.socket.CLOSING||dest.socket.readyState===dest.socket.CLOSED){return null}throw new FS.ErrnoError(6)}throw new FS.ErrnoError(6)}var queuedLength=queued.data.byteLength||queued.data.length;var queuedOffset=queued.data.byteOffset||0;var queuedBuffer=queued.data.buffer||queued.data;var bytesRead=Math.min(length,queuedLength);var res={buffer:new Uint8Array(queuedBuffer,queuedOffset,bytesRead),addr:queued.addr,port:queued.port};if(sock.type===1&&bytesRead<queuedLength){var bytesRemaining=queuedLength-bytesRead;queued.data=new Uint8Array(queuedBuffer,queuedOffset+bytesRead,bytesRemaining);sock.recv_queue.unshift(queued)}return res}}};function getSocketFromFD(fd){var socket=SOCKFS.getSocket(fd);if(!socket)throw new FS.ErrnoError(8);return socket}function setErrNo(value){HEAP32[___errno_location()>>2]=value;return value}function inetPton4(str){var b=str.split(".");for(var i=0;i<4;i++){var tmp=Number(b[i]);if(isNaN(tmp))return null;b[i]=tmp}return(b[0]|b[1]<<8|b[2]<<16|b[3]<<24)>>>0}function jstoi_q(str){return parseInt(str)}function inetPton6(str){var words;var w,offset,z;var valid6regx=/^((?=.*::)(?!.*::.+::)(::)?([\dA-F]{1,4}:(:|\b)|){5}|([\dA-F]{1,4}:){6})((([\dA-F]{1,4}((?!\3)::|:\b|$))|(?!\2\3)){2}|(((2[0-4]|1\d|[1-9])?\d|25[0-5])\.?\b){4})$/i;var parts=[];if(!valid6regx.test(str)){return null}if(str==="::"){return[0,0,0,0,0,0,0,0]}if(str.startsWith("::")){str=str.replace("::","Z:")}else{str=str.replace("::",":Z:")}if(str.indexOf(".")>0){str=str.replace(new RegExp("[.]","g"),":");words=str.split(":");words[words.length-4]=jstoi_q(words[words.length-4])+jstoi_q(words[words.length-3])*256;words[words.length-3]=jstoi_q(words[words.length-2])+jstoi_q(words[words.length-1])*256;words=words.slice(0,words.length-2)}else{words=str.split(":")}offset=0;z=0;for(w=0;w<words.length;w++){if(typeof words[w]=="string"){if(words[w]==="Z"){for(z=0;z<8-words.length+1;z++){parts[w+z]=0}offset=z-1}else{parts[w+offset]=_htons(parseInt(words[w],16))}}else{parts[w+offset]=words[w]}}return[parts[1]<<16|parts[0],parts[3]<<16|parts[2],parts[5]<<16|parts[4],parts[7]<<16|parts[6]]}function writeSockaddr(sa,family,addr,port,addrlen){switch(family){case 2:addr=inetPton4(addr);zeroMemory(sa,16);if(addrlen){HEAP32[addrlen>>2]=16}HEAP16[sa>>1]=family;HEAP32[sa+4>>2]=addr;HEAP16[sa+2>>1]=_htons(port);break;case 10:addr=inetPton6(addr);zeroMemory(sa,28);if(addrlen){HEAP32[addrlen>>2]=28}HEAP32[sa>>2]=family;HEAP32[sa+8>>2]=addr[0];HEAP32[sa+12>>2]=addr[1];HEAP32[sa+16>>2]=addr[2];HEAP32[sa+20>>2]=addr[3];HEAP16[sa+2>>1]=_htons(port);break;default:return 5}return 0}var DNS={address_map:{id:1,addrs:{},names:{}},lookup_name:function(name){var res=inetPton4(name);if(res!==null){return name}res=inetPton6(name);if(res!==null){return name}var addr;if(DNS.address_map.addrs[name]){addr=DNS.address_map.addrs[name]}else{var id=DNS.address_map.id++;assert(id<65535,"exceeded max address mappings of 65535");addr="172.29."+(id&255)+"."+(id&65280);DNS.address_map.names[addr]=name;DNS.address_map.addrs[name]=addr}return addr},lookup_addr:function(addr){if(DNS.address_map.names[addr]){return DNS.address_map.names[addr]}return null}};function ___syscall_accept4(fd,addr,addrlen,flags,d1,d2){try{var sock=getSocketFromFD(fd);var newsock=sock.sock_ops.accept(sock);if(addr){var errno=writeSockaddr(addr,newsock.family,DNS.lookup_name(newsock.daddr),newsock.dport,addrlen)}return newsock.stream.fd}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function inetNtop4(addr){return(addr&255)+"."+(addr>>8&255)+"."+(addr>>16&255)+"."+(addr>>24&255)}function inetNtop6(ints){var str="";var word=0;var longest=0;var lastzero=0;var zstart=0;var len=0;var i=0;var parts=[ints[0]&65535,ints[0]>>16,ints[1]&65535,ints[1]>>16,ints[2]&65535,ints[2]>>16,ints[3]&65535,ints[3]>>16];var hasipv4=true;var v4part="";for(i=0;i<5;i++){if(parts[i]!==0){hasipv4=false;break}}if(hasipv4){v4part=inetNtop4(parts[6]|parts[7]<<16);if(parts[5]===-1){str="::ffff:";str+=v4part;return str}if(parts[5]===0){str="::";if(v4part==="0.0.0.0")v4part="";if(v4part==="0.0.0.1")v4part="1";str+=v4part;return str}}for(word=0;word<8;word++){if(parts[word]===0){if(word-lastzero>1){len=0}lastzero=word;len++}if(len>longest){longest=len;zstart=word-longest+1}}for(word=0;word<8;word++){if(longest>1){if(parts[word]===0&&word>=zstart&&word<zstart+longest){if(word===zstart){str+=":";if(zstart===0)str+=":"}continue}}str+=Number(_ntohs(parts[word]&65535)).toString(16);str+=word<7?":":""}return str}function readSockaddr(sa,salen){var family=HEAP16[sa>>1];var port=_ntohs(HEAPU16[sa+2>>1]);var addr;switch(family){case 2:if(salen!==16){return{errno:28}}addr=HEAP32[sa+4>>2];addr=inetNtop4(addr);break;case 10:if(salen!==28){return{errno:28}}addr=[HEAP32[sa+8>>2],HEAP32[sa+12>>2],HEAP32[sa+16>>2],HEAP32[sa+20>>2]];addr=inetNtop6(addr);break;default:return{errno:5}}return{family:family,addr:addr,port:port}}function getSocketAddress(addrp,addrlen,allowNull){if(allowNull&&addrp===0)return null;var info=readSockaddr(addrp,addrlen);if(info.errno)throw new FS.ErrnoError(info.errno);info.addr=DNS.lookup_addr(info.addr)||info.addr;return info}function ___syscall_bind(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);var info=getSocketAddress(addr,addrlen);sock.sock_ops.bind(sock,info.addr,info.port);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_connect(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);var info=getSocketAddress(addr,addrlen);sock.sock_ops.connect(sock,info.addr,info.port);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_faccessat(dirfd,path,amode,flags){try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);if(amode&~7){return-28}var lookup=FS.lookupPath(path,{follow:true});var node=lookup.node;if(!node){return-44}var perms="";if(amode&4)perms+="r";if(amode&2)perms+="w";if(amode&1)perms+="x";if(perms&&FS.nodePermissions(node,perms)){return-2}return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_fcntl64(fd,cmd,varargs){SYSCALLS.varargs=varargs;try{var stream=SYSCALLS.getStreamFromFD(fd);switch(cmd){case 0:{var arg=SYSCALLS.get();if(arg<0){return-28}var newStream;newStream=FS.createStream(stream,arg);return newStream.fd}case 1:case 2:return 0;case 3:return stream.flags;case 4:{var arg=SYSCALLS.get();stream.flags|=arg;return 0}case 5:{var arg=SYSCALLS.get();var offset=0;HEAP16[arg+offset>>1]=2;return 0}case 6:case 7:return 0;case 16:case 8:return-28;case 9:setErrNo(28);return-1;default:{return-28}}}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_fstat64(fd,buf){try{var stream=SYSCALLS.getStreamFromFD(fd);return SYSCALLS.doStat(FS.stat,stream.path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function stringToUTF8(str,outPtr,maxBytesToWrite){return stringToUTF8Array(str,HEAPU8,outPtr,maxBytesToWrite)}function ___syscall_getdents64(fd,dirp,count){try{var stream=SYSCALLS.getStreamFromFD(fd);if(!stream.getdents){stream.getdents=FS.readdir(stream.path)}var struct_size=280;var pos=0;var off=FS.llseek(stream,0,1);var idx=Math.floor(off/struct_size);while(idx<stream.getdents.length&&pos+struct_size<=count){var id;var type;var name=stream.getdents[idx];if(name==="."){id=stream.node.id;type=4}else if(name===".."){var lookup=FS.lookupPath(stream.path,{parent:true});id=lookup.node.id;type=4}else{var child=FS.lookupNode(stream.node,name);id=child.id;type=FS.isChrdev(child.mode)?2:FS.isDir(child.mode)?4:FS.isLink(child.mode)?10:8}HEAP64[dirp+pos>>3]=BigInt(id);HEAP64[dirp+pos+8>>3]=BigInt((idx+1)*struct_size);HEAP16[dirp+pos+16>>1]=280;HEAP8[dirp+pos+18>>0]=type;stringToUTF8(name,dirp+pos+19,256);pos+=struct_size;idx+=1}FS.llseek(stream,idx*struct_size,0);return pos}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_getpeername(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);if(!sock.daddr){return-53}var errno=writeSockaddr(addr,sock.family,DNS.lookup_name(sock.daddr),sock.dport,addrlen);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_getsockname(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);var errno=writeSockaddr(addr,sock.family,DNS.lookup_name(sock.saddr||"0.0.0.0"),sock.sport,addrlen);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_getsockopt(fd,level,optname,optval,optlen,d1){try{var sock=getSocketFromFD(fd);if(level===1){if(optname===4){HEAP32[optval>>2]=sock.error;HEAP32[optlen>>2]=4;sock.error=null;return 0}}return-50}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_ioctl(fd,op,varargs){SYSCALLS.varargs=varargs;try{var stream=SYSCALLS.getStreamFromFD(fd);switch(op){case 21509:case 21505:{if(!stream.tty)return-59;return 0}case 21510:case 21511:case 21512:case 21506:case 21507:case 21508:{if(!stream.tty)return-59;return 0}case 21519:{if(!stream.tty)return-59;var argp=SYSCALLS.get();HEAP32[argp>>2]=0;return 0}case 21520:{if(!stream.tty)return-59;return-28}case 21531:{var argp=SYSCALLS.get();return FS.ioctl(stream,op,argp)}case 21523:{if(!stream.tty)return-59;return 0}case 21524:{if(!stream.tty)return-59;return 0}default:return-28}}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_listen(fd,backlog){try{var sock=getSocketFromFD(fd);sock.sock_ops.listen(sock,backlog);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_lstat64(path,buf){try{path=SYSCALLS.getStr(path);return SYSCALLS.doStat(FS.lstat,path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_mkdirat(dirfd,path,mode){try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);path=PATH.normalize(path);if(path[path.length-1]==="/")path=path.substr(0,path.length-1);FS.mkdir(path,mode,0);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_newfstatat(dirfd,path,buf,flags){try{path=SYSCALLS.getStr(path);var nofollow=flags&256;var allowEmpty=flags&4096;flags=flags&~6400;path=SYSCALLS.calculateAt(dirfd,path,allowEmpty);return SYSCALLS.doStat(nofollow?FS.lstat:FS.stat,path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_openat(dirfd,path,flags,varargs){SYSCALLS.varargs=varargs;try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);var mode=varargs?SYSCALLS.get():0;return FS.open(path,flags,mode).fd}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_poll(fds,nfds,timeout){try{var nonzero=0;for(var i=0;i<nfds;i++){var pollfd=fds+8*i;var fd=HEAP32[pollfd>>2];var events=HEAP16[pollfd+4>>1];var mask=32;var stream=FS.getStream(fd);if(stream){mask=SYSCALLS.DEFAULT_POLLMASK;if(stream.stream_ops.poll){mask=stream.stream_ops.poll(stream)}}mask&=events|8|16;if(mask)nonzero++;HEAP16[pollfd+6>>1]=mask}return nonzero}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_recvfrom(fd,buf,len,flags,addr,addrlen){try{var sock=getSocketFromFD(fd);var msg=sock.sock_ops.recvmsg(sock,len);if(!msg)return 0;if(addr){var errno=writeSockaddr(addr,sock.family,DNS.lookup_name(msg.addr),msg.port,addrlen)}HEAPU8.set(msg.buffer,buf);return msg.buffer.byteLength}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_renameat(olddirfd,oldpath,newdirfd,newpath){try{oldpath=SYSCALLS.getStr(oldpath);newpath=SYSCALLS.getStr(newpath);oldpath=SYSCALLS.calculateAt(olddirfd,oldpath);newpath=SYSCALLS.calculateAt(newdirfd,newpath);FS.rename(oldpath,newpath);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_rmdir(path){try{path=SYSCALLS.getStr(path);FS.rmdir(path);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_sendto(fd,message,length,flags,addr,addr_len){try{var sock=getSocketFromFD(fd);var dest=getSocketAddress(addr,addr_len,true);if(!dest){return FS.write(sock.stream,HEAP8,message,length)}return sock.sock_ops.sendmsg(sock,HEAP8,message,length,dest.addr,dest.port)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_socket(domain,type,protocol){try{var sock=SOCKFS.createSocket(domain,type,protocol);return sock.stream.fd}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_stat64(path,buf){try{path=SYSCALLS.getStr(path);return SYSCALLS.doStat(FS.stat,path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_unlinkat(dirfd,path,flags){try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);if(flags===0){FS.unlink(path)}else if(flags===512){FS.rmdir(path)}else{abort("Invalid flags passed to unlinkat")}return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}var nowIsMonotonic=true;function __emscripten_get_now_is_monotonic(){return nowIsMonotonic}function __emscripten_throw_longjmp(){throw Infinity}function readI53FromI64(ptr){return HEAPU32[ptr>>2]+HEAP32[ptr+4>>2]*4294967296}function __gmtime_js(time,tmPtr){var date=new Date(readI53FromI64(time)*1e3);HEAP32[tmPtr>>2]=date.getUTCSeconds();HEAP32[tmPtr+4>>2]=date.getUTCMinutes();HEAP32[tmPtr+8>>2]=date.getUTCHours();HEAP32[tmPtr+12>>2]=date.getUTCDate();HEAP32[tmPtr+16>>2]=date.getUTCMonth();HEAP32[tmPtr+20>>2]=date.getUTCFullYear()-1900;HEAP32[tmPtr+24>>2]=date.getUTCDay();var start=Date.UTC(date.getUTCFullYear(),0,1,0,0,0,0);var yday=(date.getTime()-start)/(1e3*60*60*24)|0;HEAP32[tmPtr+28>>2]=yday}function isLeapYear(year){return year%4===0&&(year%100!==0||year%400===0)}var MONTH_DAYS_LEAP_CUMULATIVE=[0,31,60,91,121,152,182,213,244,274,305,335];var MONTH_DAYS_REGULAR_CUMULATIVE=[0,31,59,90,120,151,181,212,243,273,304,334];function ydayFromDate(date){var leap=isLeapYear(date.getFullYear());var monthDaysCumulative=leap?MONTH_DAYS_LEAP_CUMULATIVE:MONTH_DAYS_REGULAR_CUMULATIVE;var yday=monthDaysCumulative[date.getMonth()]+date.getDate()-1;return yday}function __localtime_js(time,tmPtr){var date=new Date(readI53FromI64(time)*1e3);HEAP32[tmPtr>>2]=date.getSeconds();HEAP32[tmPtr+4>>2]=date.getMinutes();HEAP32[tmPtr+8>>2]=date.getHours();HEAP32[tmPtr+12>>2]=date.getDate();HEAP32[tmPtr+16>>2]=date.getMonth();HEAP32[tmPtr+20>>2]=date.getFullYear()-1900;HEAP32[tmPtr+24>>2]=date.getDay();var yday=ydayFromDate(date)|0;HEAP32[tmPtr+28>>2]=yday;HEAP32[tmPtr+36>>2]=-(date.getTimezoneOffset()*60);var start=new Date(date.getFullYear(),0,1);var summerOffset=new Date(date.getFullYear(),6,1).getTimezoneOffset();var winterOffset=start.getTimezoneOffset();var dst=(summerOffset!=winterOffset&&date.getTimezoneOffset()==Math.min(winterOffset,summerOffset))|0;HEAP32[tmPtr+32>>2]=dst}function __mktime_js(tmPtr){var date=new Date(HEAP32[tmPtr+20>>2]+1900,HEAP32[tmPtr+16>>2],HEAP32[tmPtr+12>>2],HEAP32[tmPtr+8>>2],HEAP32[tmPtr+4>>2],HEAP32[tmPtr>>2],0);var dst=HEAP32[tmPtr+32>>2];var guessedOffset=date.getTimezoneOffset();var start=new Date(date.getFullYear(),0,1);var summerOffset=new Date(date.getFullYear(),6,1).getTimezoneOffset();var winterOffset=start.getTimezoneOffset();var dstOffset=Math.min(winterOffset,summerOffset);if(dst<0){HEAP32[tmPtr+32>>2]=Number(summerOffset!=winterOffset&&dstOffset==guessedOffset)}else if(dst>0!=(dstOffset==guessedOffset)){var nonDstOffset=Math.max(winterOffset,summerOffset);var trueOffset=dst>0?dstOffset:nonDstOffset;date.setTime(date.getTime()+(trueOffset-guessedOffset)*6e4)}HEAP32[tmPtr+24>>2]=date.getDay();var yday=ydayFromDate(date)|0;HEAP32[tmPtr+28>>2]=yday;HEAP32[tmPtr>>2]=date.getSeconds();HEAP32[tmPtr+4>>2]=date.getMinutes();HEAP32[tmPtr+8>>2]=date.getHours();HEAP32[tmPtr+12>>2]=date.getDate();HEAP32[tmPtr+16>>2]=date.getMonth();HEAP32[tmPtr+20>>2]=date.getYear();return date.getTime()/1e3|0}function __mmap_js(len,prot,flags,fd,off,allocated,addr){try{var stream=SYSCALLS.getStreamFromFD(fd);var res=FS.mmap(stream,len,off,prot,flags);var ptr=res.ptr;HEAP32[allocated>>2]=res.allocated;HEAPU32[addr>>2]=ptr;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function __munmap_js(addr,len,prot,flags,fd,offset){try{var stream=SYSCALLS.getStreamFromFD(fd);if(prot&2){SYSCALLS.doMsync(addr,stream,len,flags,offset)}FS.munmap(stream)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function stringToNewUTF8(str){var size=lengthBytesUTF8(str)+1;var ret=_malloc(size);if(ret)stringToUTF8(str,ret,size);return ret}function __tzset_js(timezone,daylight,tzname){var currentYear=(new Date).getFullYear();var winter=new Date(currentYear,0,1);var summer=new Date(currentYear,6,1);var winterOffset=winter.getTimezoneOffset();var summerOffset=summer.getTimezoneOffset();var stdTimezoneOffset=Math.max(winterOffset,summerOffset);HEAPU32[timezone>>2]=stdTimezoneOffset*60;HEAP32[daylight>>2]=Number(winterOffset!=summerOffset);function extractZone(date){var match=date.toTimeString().match(/\(([A-Za-z ]+)\)$/);return match?match[1]:"GMT"}var winterName=extractZone(winter);var summerName=extractZone(summer);var winterNamePtr=stringToNewUTF8(winterName);var summerNamePtr=stringToNewUTF8(summerName);if(summerOffset<winterOffset){HEAPU32[tzname>>2]=winterNamePtr;HEAPU32[tzname+4>>2]=summerNamePtr}else{HEAPU32[tzname>>2]=summerNamePtr;HEAPU32[tzname+4>>2]=winterNamePtr}}function _abort(){abort("")}Module["_abort"]=_abort;function _dlopen(handle){abort(dlopenMissingError)}var readEmAsmArgsArray=[];function readEmAsmArgs(sigPtr,buf){readEmAsmArgsArray.length=0;var ch;buf>>=2;while(ch=HEAPU8[sigPtr++]){buf+=ch!=105&buf;readEmAsmArgsArray.push(ch==105?HEAP32[buf]:(ch==106?HEAP64:HEAPF64)[buf++>>1]);++buf}return readEmAsmArgsArray}function runEmAsmFunction(code,sigPtr,argbuf){var args=readEmAsmArgs(sigPtr,argbuf);return ASM_CONSTS[code].apply(null,args)}function _emscripten_asm_const_int(code,sigPtr,argbuf){return runEmAsmFunction(code,sigPtr,argbuf)}function _emscripten_date_now(){return Date.now()}function getHeapMax(){return 2147483648}function _emscripten_get_heap_max(){return getHeapMax()}var _emscripten_get_now;_emscripten_get_now=()=>performance.now();function _emscripten_memcpy_big(dest,src,num){HEAPU8.copyWithin(dest,src,src+num)}function emscripten_realloc_buffer(size){var b=wasmMemory.buffer;try{wasmMemory.grow(size-b.byteLength+65535>>>16);updateMemoryViews();return 1}catch(e){}}function _emscripten_resize_heap(requestedSize){var oldSize=HEAPU8.length;requestedSize=requestedSize>>>0;var maxHeapSize=getHeapMax();if(requestedSize>maxHeapSize){return false}var alignUp=(x,multiple)=>x+(multiple-x%multiple)%multiple;for(var cutDown=1;cutDown<=4;cutDown*=2){var overGrownHeapSize=oldSize*(1+.2/cutDown);overGrownHeapSize=Math.min(overGrownHeapSize,requestedSize+100663296);var newSize=Math.min(maxHeapSize,alignUp(Math.max(requestedSize,overGrownHeapSize),65536));var replacement=emscripten_realloc_buffer(newSize);if(replacement){return true}}return false}var ENV={};function getExecutableName(){return thisProgram||"./this.program"}function getEnvStrings(){if(!getEnvStrings.strings){var lang=(typeof navigator=="object"&&navigator.languages&&navigator.languages[0]||"C").replace("-","_")+".UTF-8";var env={"USER":"web_user","LOGNAME":"web_user","PATH":"/","PWD":"/","HOME":"/home/web_user","LANG":lang,"_":getExecutableName()};for(var x in ENV){if(ENV[x]===undefined)delete env[x];else env[x]=ENV[x]}var strings=[];for(var x in env){strings.push(`${x}=${env[x]}`)}getEnvStrings.strings=strings}return getEnvStrings.strings}function stringToAscii(str,buffer){for(var i=0;i<str.length;++i){HEAP8[buffer++>>0]=str.charCodeAt(i)}HEAP8[buffer>>0]=0}function _environ_get(__environ,environ_buf){var bufSize=0;getEnvStrings().forEach(function(string,i){var ptr=environ_buf+bufSize;HEAPU32[__environ+i*4>>2]=ptr;stringToAscii(string,ptr);bufSize+=string.length+1});return 0}function _environ_sizes_get(penviron_count,penviron_buf_size){var strings=getEnvStrings();HEAPU32[penviron_count>>2]=strings.length;var bufSize=0;strings.forEach(function(string){bufSize+=string.length+1});HEAPU32[penviron_buf_size>>2]=bufSize;return 0}function _proc_exit(code){EXITSTATUS=code;if(!keepRuntimeAlive()){if(Module["onExit"])Module["onExit"](code);ABORT=true}quit_(code,new ExitStatus(code))}function exitJS(status,implicit){EXITSTATUS=status;_proc_exit(status)}var _exit=exitJS;function _fd_close(fd){try{var stream=SYSCALLS.getStreamFromFD(fd);FS.close(stream);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function _fd_fdstat_get(fd,pbuf){try{var rightsBase=0;var rightsInheriting=0;var flags=0;{var stream=SYSCALLS.getStreamFromFD(fd);var type=stream.tty?2:FS.isDir(stream.mode)?3:FS.isLink(stream.mode)?7:4}HEAP8[pbuf>>0]=type;HEAP16[pbuf+2>>1]=flags;HEAP64[pbuf+8>>3]=BigInt(rightsBase);HEAP64[pbuf+16>>3]=BigInt(rightsInheriting);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function doReadv(stream,iov,iovcnt,offset){var ret=0;for(var i=0;i<iovcnt;i++){var ptr=HEAPU32[iov>>2];var len=HEAPU32[iov+4>>2];iov+=8;var curr=FS.read(stream,HEAP8,ptr,len,offset);if(curr<0)return-1;ret+=curr;if(curr<len)break;if(typeof offset!=="undefined"){offset+=curr}}return ret}function _fd_read(fd,iov,iovcnt,pnum){try{var stream=SYSCALLS.getStreamFromFD(fd);var num=doReadv(stream,iov,iovcnt);HEAPU32[pnum>>2]=num;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}var MAX_INT53=9007199254740992;var MIN_INT53=-9007199254740992;function bigintToI53Checked(num){return num<MIN_INT53||num>MAX_INT53?NaN:Number(num)}function _fd_seek(fd,offset,whence,newOffset){try{offset=bigintToI53Checked(offset);if(isNaN(offset))return 61;var stream=SYSCALLS.getStreamFromFD(fd);FS.llseek(stream,offset,whence);HEAP64[newOffset>>3]=BigInt(stream.position);if(stream.getdents&&offset===0&&whence===0)stream.getdents=null;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function doWritev(stream,iov,iovcnt,offset){var ret=0;for(var i=0;i<iovcnt;i++){var ptr=HEAPU32[iov>>2];var len=HEAPU32[iov+4>>2];iov+=8;var curr=FS.write(stream,HEAP8,ptr,len,offset);if(curr<0)return-1;ret+=curr;if(typeof offset!=="undefined"){offset+=curr}}return ret}function _fd_write(fd,iov,iovcnt,pnum){try{var stream=SYSCALLS.getStreamFromFD(fd);var num=doWritev(stream,iov,iovcnt);HEAPU32[pnum>>2]=num;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function _getaddrinfo(node,service,hint,out){var addr=0;var port=0;var flags=0;var family=0;var type=0;var proto=0;var ai;function allocaddrinfo(family,type,proto,canon,addr,port){var sa,salen,ai;var errno;salen=family===10?28:16;addr=family===10?inetNtop6(addr):inetNtop4(addr);sa=_malloc(salen);errno=writeSockaddr(sa,family,addr,port);assert(!errno);ai=_malloc(32);HEAP32[ai+4>>2]=family;HEAP32[ai+8>>2]=type;HEAP32[ai+12>>2]=proto;HEAPU32[ai+24>>2]=canon;HEAPU32[ai+20>>2]=sa;if(family===10){HEAP32[ai+16>>2]=28}else{HEAP32[ai+16>>2]=16}HEAP32[ai+28>>2]=0;return ai}if(hint){flags=HEAP32[hint>>2];family=HEAP32[hint+4>>2];type=HEAP32[hint+8>>2];proto=HEAP32[hint+12>>2]}if(type&&!proto){proto=type===2?17:6}if(!type&&proto){type=proto===17?2:1}if(proto===0){proto=6}if(type===0){type=1}if(!node&&!service){return-2}if(flags&~(1|2|4|1024|8|16|32)){return-1}if(hint!==0&&HEAP32[hint>>2]&2&&!node){return-1}if(flags&32){return-2}if(type!==0&&type!==1&&type!==2){return-7}if(family!==0&&family!==2&&family!==10){return-6}if(service){service=UTF8ToString(service);port=parseInt(service,10);if(isNaN(port)){if(flags&1024){return-2}return-8}}if(!node){if(family===0){family=2}if((flags&1)===0){if(family===2){addr=_htonl(2130706433)}else{addr=[0,0,0,1]}}ai=allocaddrinfo(family,type,proto,null,addr,port);HEAPU32[out>>2]=ai;return 0}node=UTF8ToString(node);addr=inetPton4(node);if(addr!==null){if(family===0||family===2){family=2}else if(family===10&&flags&8){addr=[0,0,_htonl(65535),addr];family=10}else{return-2}}else{addr=inetPton6(node);if(addr!==null){if(family===0||family===10){family=10}else{return-2}}}if(addr!=null){ai=allocaddrinfo(family,type,proto,node,addr,port);HEAPU32[out>>2]=ai;return 0}if(flags&4){return-2}node=DNS.lookup_name(node);addr=inetPton4(node);if(family===0){family=2}else if(family===10){addr=[0,0,_htonl(65535),addr]}ai=allocaddrinfo(family,type,proto,null,addr,port);HEAPU32[out>>2]=ai;return 0}function _getnameinfo(sa,salen,node,nodelen,serv,servlen,flags){var info=readSockaddr(sa,salen);if(info.errno){return-6}var port=info.port;var addr=info.addr;var overflowed=false;if(node&&nodelen){var lookup;if(flags&1||!(lookup=DNS.lookup_addr(addr))){if(flags&8){return-2}}else{addr=lookup}var numBytesWrittenExclNull=stringToUTF8(addr,node,nodelen);if(numBytesWrittenExclNull+1>=nodelen){overflowed=true}}if(serv&&servlen){port=""+port;var numBytesWrittenExclNull=stringToUTF8(port,serv,servlen);if(numBytesWrittenExclNull+1>=servlen){overflowed=true}}if(overflowed){return-12}return 0}function arraySum(array,index){var sum=0;for(var i=0;i<=index;sum+=array[i++]){}return sum}var MONTH_DAYS_LEAP=[31,29,31,30,31,30,31,31,30,31,30,31];var MONTH_DAYS_REGULAR=[31,28,31,30,31,30,31,31,30,31,30,31];function addDays(date,days){var newDate=new Date(date.getTime());while(days>0){var leap=isLeapYear(newDate.getFullYear());var currentMonth=newDate.getMonth();var daysInCurrentMonth=(leap?MONTH_DAYS_LEAP:MONTH_DAYS_REGULAR)[currentMonth];if(days>daysInCurrentMonth-newDate.getDate()){days-=daysInCurrentMonth-newDate.getDate()+1;newDate.setDate(1);if(currentMonth<11){newDate.setMonth(currentMonth+1)}else{newDate.setMonth(0);newDate.setFullYear(newDate.getFullYear()+1)}}else{newDate.setDate(newDate.getDate()+days);return newDate}}return newDate}function writeArrayToMemory(array,buffer){HEAP8.set(array,buffer)}function _strftime(s,maxsize,format,tm){var tm_zone=HEAP32[tm+40>>2];var date={tm_sec:HEAP32[tm>>2],tm_min:HEAP32[tm+4>>2],tm_hour:HEAP32[tm+8>>2],tm_mday:HEAP32[tm+12>>2],tm_mon:HEAP32[tm+16>>2],tm_year:HEAP32[tm+20>>2],tm_wday:HEAP32[tm+24>>2],tm_yday:HEAP32[tm+28>>2],tm_isdst:HEAP32[tm+32>>2],tm_gmtoff:HEAP32[tm+36>>2],tm_zone:tm_zone?UTF8ToString(tm_zone):""};var pattern=UTF8ToString(format);var EXPANSION_RULES_1={"%c":"%a %b %d %H:%M:%S %Y","%D":"%m/%d/%y","%F":"%Y-%m-%d","%h":"%b","%r":"%I:%M:%S %p","%R":"%H:%M","%T":"%H:%M:%S","%x":"%m/%d/%y","%X":"%H:%M:%S","%Ec":"%c","%EC":"%C","%Ex":"%m/%d/%y","%EX":"%H:%M:%S","%Ey":"%y","%EY":"%Y","%Od":"%d","%Oe":"%e","%OH":"%H","%OI":"%I","%Om":"%m","%OM":"%M","%OS":"%S","%Ou":"%u","%OU":"%U","%OV":"%V","%Ow":"%w","%OW":"%W","%Oy":"%y"};for(var rule in EXPANSION_RULES_1){pattern=pattern.replace(new RegExp(rule,"g"),EXPANSION_RULES_1[rule])}var WEEKDAYS=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];var MONTHS=["January","February","March","April","May","June","July","August","September","October","November","December"];function leadingSomething(value,digits,character){var str=typeof value=="number"?value.toString():value||"";while(str.length<digits){str=character[0]+str}return str}function leadingNulls(value,digits){return leadingSomething(value,digits,"0")}function compareByDay(date1,date2){function sgn(value){return value<0?-1:value>0?1:0}var compare;if((compare=sgn(date1.getFullYear()-date2.getFullYear()))===0){if((compare=sgn(date1.getMonth()-date2.getMonth()))===0){compare=sgn(date1.getDate()-date2.getDate())}}return compare}function getFirstWeekStartDate(janFourth){switch(janFourth.getDay()){case 0:return new Date(janFourth.getFullYear()-1,11,29);case 1:return janFourth;case 2:return new Date(janFourth.getFullYear(),0,3);case 3:return new Date(janFourth.getFullYear(),0,2);case 4:return new Date(janFourth.getFullYear(),0,1);case 5:return new Date(janFourth.getFullYear()-1,11,31);case 6:return new Date(janFourth.getFullYear()-1,11,30)}}function getWeekBasedYear(date){var thisDate=addDays(new Date(date.tm_year+1900,0,1),date.tm_yday);var janFourthThisYear=new Date(thisDate.getFullYear(),0,4);var janFourthNextYear=new Date(thisDate.getFullYear()+1,0,4);var firstWeekStartThisYear=getFirstWeekStartDate(janFourthThisYear);var firstWeekStartNextYear=getFirstWeekStartDate(janFourthNextYear);if(compareByDay(firstWeekStartThisYear,thisDate)<=0){if(compareByDay(firstWeekStartNextYear,thisDate)<=0){return thisDate.getFullYear()+1}return thisDate.getFullYear()}return thisDate.getFullYear()-1}var EXPANSION_RULES_2={"%a":function(date){return WEEKDAYS[date.tm_wday].substring(0,3)},"%A":function(date){return WEEKDAYS[date.tm_wday]},"%b":function(date){return MONTHS[date.tm_mon].substring(0,3)},"%B":function(date){return MONTHS[date.tm_mon]},"%C":function(date){var year=date.tm_year+1900;return leadingNulls(year/100|0,2)},"%d":function(date){return leadingNulls(date.tm_mday,2)},"%e":function(date){return leadingSomething(date.tm_mday,2," ")},"%g":function(date){return getWeekBasedYear(date).toString().substring(2)},"%G":function(date){return getWeekBasedYear(date)},"%H":function(date){return leadingNulls(date.tm_hour,2)},"%I":function(date){var twelveHour=date.tm_hour;if(twelveHour==0)twelveHour=12;else if(twelveHour>12)twelveHour-=12;return leadingNulls(twelveHour,2)},"%j":function(date){return leadingNulls(date.tm_mday+arraySum(isLeapYear(date.tm_year+1900)?MONTH_DAYS_LEAP:MONTH_DAYS_REGULAR,date.tm_mon-1),3)},"%m":function(date){return leadingNulls(date.tm_mon+1,2)},"%M":function(date){return leadingNulls(date.tm_min,2)},"%n":function(){return"\n"},"%p":function(date){if(date.tm_hour>=0&&date.tm_hour<12){return"AM"}return"PM"},"%S":function(date){return leadingNulls(date.tm_sec,2)},"%t":function(){return"\t"},"%u":function(date){return date.tm_wday||7},"%U":function(date){var days=date.tm_yday+7-date.tm_wday;return leadingNulls(Math.floor(days/7),2)},"%V":function(date){var val=Math.floor((date.tm_yday+7-(date.tm_wday+6)%7)/7);if((date.tm_wday+371-date.tm_yday-2)%7<=2){val++}if(!val){val=52;var dec31=(date.tm_wday+7-date.tm_yday-1)%7;if(dec31==4||dec31==5&&isLeapYear(date.tm_year%400-1)){val++}}else if(val==53){var jan1=(date.tm_wday+371-date.tm_yday)%7;if(jan1!=4&&(jan1!=3||!isLeapYear(date.tm_year)))val=1}return leadingNulls(val,2)},"%w":function(date){return date.tm_wday},"%W":function(date){var days=date.tm_yday+7-(date.tm_wday+6)%7;return leadingNulls(Math.floor(days/7),2)},"%y":function(date){return(date.tm_year+1900).toString().substring(2)},"%Y":function(date){return date.tm_year+1900},"%z":function(date){var off=date.tm_gmtoff;var ahead=off>=0;off=Math.abs(off)/60;off=off/60*100+off%60;return(ahead?"+":"-")+String("0000"+off).slice(-4)},"%Z":function(date){return date.tm_zone},"%%":function(){return"%"}};pattern=pattern.replace(/%%/g,"\0\0");for(var rule in EXPANSION_RULES_2){if(pattern.includes(rule)){pattern=pattern.replace(new RegExp(rule,"g"),EXPANSION_RULES_2[rule](date))}}pattern=pattern.replace(/\0\0/g,"%");var bytes=intArrayFromString(pattern,false);if(bytes.length>maxsize){return 0}writeArrayToMemory(bytes,s);return bytes.length-1}var FSNode=function(parent,name,mode,rdev){if(!parent){parent=this}this.parent=parent;this.mount=parent.mount;this.mounted=null;this.id=FS.nextInode++;this.name=name;this.mode=mode;this.node_ops={};this.stream_ops={};this.rdev=rdev};var readMode=292|73;var writeMode=146;Object.defineProperties(FSNode.prototype,{read:{get:function(){return(this.mode&readMode)===readMode},set:function(val){val?this.mode|=readMode:this.mode&=~readMode}},write:{get:function(){return(this.mode&writeMode)===writeMode},set:function(val){val?this.mode|=writeMode:this.mode&=~writeMode}},isFolder:{get:function(){return FS.isDir(this.mode)}},isDevice:{get:function(){return FS.isChrdev(this.mode)}}});FS.FSNode=FSNode;FS.createPreloadedFile=FS_createPreloadedFile;FS.staticInit();var wasmImports={"b":___assert_fail,"f":___cxa_throw,"ka":___dlsym,"R":___syscall__newselect,"L":___syscall_accept4,"K":___syscall_bind,"J":___syscall_connect,"la":___syscall_faccessat,"g":___syscall_fcntl64,"ha":___syscall_fstat64,"U":___syscall_getdents64,"I":___syscall_getpeername,"H":___syscall_getsockname,"G":___syscall_getsockopt,"y":___syscall_ioctl,"F":___syscall_listen,"ea":___syscall_lstat64,"$":___syscall_mkdirat,"fa":___syscall_newfstatat,"w":___syscall_openat,"V":___syscall_poll,"E":___syscall_recvfrom,"T":___syscall_renameat,"S":___syscall_rmdir,"D":___syscall_sendto,"v":___syscall_socket,"ga":___syscall_stat64,"O":___syscall_unlinkat,"ia":__emscripten_get_now_is_monotonic,"M":__emscripten_throw_longjmp,"Y":__gmtime_js,"Z":__localtime_js,"_":__mktime_js,"W":__mmap_js,"X":__munmap_js,"P":__tzset_js,"a":_abort,"t":_dlopen,"oa":_emscripten_asm_const_int,"m":_emscripten_date_now,"Q":_emscripten_get_heap_max,"p":_emscripten_get_now,"ja":_emscripten_memcpy_big,"N":_emscripten_resize_heap,"ca":_environ_get,"da":_environ_sizes_get,"l":_exit,"n":_fd_close,"ba":_fd_fdstat_get,"x":_fd_read,"aa":_fd_seek,"q":_fd_write,"k":_getaddrinfo,"i":_getnameinfo,"pa":invoke_i,"na":invoke_ii,"c":invoke_iii,"o":invoke_iiii,"s":invoke_iiiii,"z":invoke_iiiiii,"r":invoke_iiiiiiiii,"B":invoke_iiiijj,"qa":invoke_iij,"h":invoke_vi,"j":invoke_vii,"d":invoke_viiii,"ma":invoke_viiiiii,"A":invoke_viiiiiiii,"C":is_timeout,"u":send_progress,"e":_strftime};var asm=createWasm();var ___wasm_call_ctors=function(){return(___wasm_call_ctors=Module["asm"]["sa"]).apply(null,arguments)};var _malloc=Module["_malloc"]=function(){return(_malloc=Module["_malloc"]=Module["asm"]["ta"]).apply(null,arguments)};var ___errno_location=function(){return(___errno_location=Module["asm"]["va"]).apply(null,arguments)};var _ntohs=function(){return(_ntohs=Module["asm"]["wa"]).apply(null,arguments)};var _htons=function(){return(_htons=Module["asm"]["xa"]).apply(null,arguments)};var _ffmpeg=Module["_ffmpeg"]=function(){return(_ffmpeg=Module["_ffmpeg"]=Module["asm"]["ya"]).apply(null,arguments)};var _ffprobe=Module["_ffprobe"]=function(){return(_ffprobe=Module["_ffprobe"]=Module["asm"]["za"]).apply(null,arguments)};var _htonl=function(){return(_htonl=Module["asm"]["Aa"]).apply(null,arguments)};var _emscripten_builtin_memalign=function(){return(_emscripten_builtin_memalign=Module["asm"]["Ba"]).apply(null,arguments)};var _setThrew=function(){return(_setThrew=Module["asm"]["Ca"]).apply(null,arguments)};var stackSave=function(){return(stackSave=Module["asm"]["Da"]).apply(null,arguments)};var stackRestore=function(){return(stackRestore=Module["asm"]["Ea"]).apply(null,arguments)};var ___cxa_is_pointer_type=function(){return(___cxa_is_pointer_type=Module["asm"]["Fa"]).apply(null,arguments)};var _ff_h264_cabac_tables=Module["_ff_h264_cabac_tables"]=1546732;var ___start_em_js=Module["___start_em_js"]=6077485;var ___stop_em_js=Module["___stop_em_js"]=6077662;function invoke_iiiii(index,a1,a2,a3,a4){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vii(index,a1,a2){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iii(index,a1,a2){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiijj(index,a1,a2,a3,a4,a5){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiiiiiii(index,a1,a2,a3,a4,a5,a6,a7,a8){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vi(index,a1){var sp=stackSave();try{getWasmTableEntry(index)(a1)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiii(index,a1,a2,a3,a4){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiii(index,a1,a2,a3){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iij(index,a1,a2){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_i(index){var sp=stackSave();try{return getWasmTableEntry(index)()}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_ii(index,a1){var sp=stackSave();try{return getWasmTableEntry(index)(a1)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiiiiii(index,a1,a2,a3,a4,a5,a6,a7,a8){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiiii(index,a1,a2,a3,a4,a5){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiiii(index,a1,a2,a3,a4,a5,a6){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}Module["setValue"]=setValue;Module["getValue"]=getValue;Module["UTF8ToString"]=UTF8ToString;Module["stringToUTF8"]=stringToUTF8;Module["lengthBytesUTF8"]=lengthBytesUTF8;Module["FS"]=FS;var calledRun;dependenciesFulfilled=function runCaller(){if(!calledRun)run();if(!calledRun)dependenciesFulfilled=runCaller};function run(){if(runDependencies>0){return}preRun();if(runDependencies>0){return}function doRun(){if(calledRun)return;calledRun=true;Module["calledRun"]=true;if(ABORT)return;initRuntime();readyPromiseResolve(Module);if(Module["onRuntimeInitialized"])Module["onRuntimeInitialized"]();postRun()}if(Module["setStatus"]){Module["setStatus"]("Running...");setTimeout(function(){setTimeout(function(){Module["setStatus"]("")},1);doRun()},1)}else{doRun()}}if(Module["preInit"]){if(typeof Module["preInit"]=="function")Module["preInit"]=[Module["preInit"]];while(Module["preInit"].length>0){Module["preInit"].pop()()}}run();
+
 
-  return (createFFmpegCore = {}) => {
-    var Module = typeof createFFmpegCore != "undefined" ? createFFmpegCore : {}; // Ensure that createFFmpegCore is defined and available.var readyPromiseResolve,readyPromiseReject;Module["ready"]=new Promise((resolve,reject)=>{readyPromiseResolve=resolve;readyPromiseReject=reject});const NULL=0;const SIZE_I32=Uint32Array.BYTES_PER_ELEMENT;const DEFAULT_ARGS=["./ffmpeg","-nostdin","-y"];const DEFAULT_ARGS_FFPROBE=["./ffprobe"];Module["NULL"]=NULL;Module["SIZE_I32"]=SIZE_I32;Module["DEFAULT_ARGS"]=DEFAULT_ARGS;Module["DEFAULT_ARGS_FFPROBE"]=DEFAULT_ARGS_FFPROBE;Module["ret"]=-1;Module["timeout"]=-1;Module["logger"]=()=>{};Module["progress"]=()=>{};function stringToPtr(str){const len=Module["lengthBytesUTF8"](str)+1;const ptr=Module["_malloc"](len);Module["stringToUTF8"](str,ptr,len);return ptr}function stringsToPtr(strs){const len=strs.length;const ptr=Module["_malloc"](len*SIZE_I32);for(let i=0;i<len;i++){Module["setValue"](ptr+SIZE_I32*i,stringToPtr(strs[i]),"i32")}return ptr}function print(message){Module["logger"]({type:"stdout",message:message})}function printErr(message){if(!message.startsWith("Aborted(native code called abort())"))Module["logger"]({type:"stderr",message:message})}function exec(..._args){const args=[...Module["DEFAULT_ARGS"],..._args];try{Module["_ffmpeg"](args.length,stringsToPtr(args))}catch(e){if(!e.message.startsWith("Aborted")){throw e}}return Module["ret"]}function ffprobe(..._args){const args=[...Module["DEFAULT_ARGS_FFPROBE"],..._args];try{Module["_ffprobe"](args.length,stringsToPtr(args))}catch(e){if(!e.message.startsWith("Aborted")){throw e}}return Module["ret"]}function setLogger(logger){Module["logger"]=logger}function setTimeout(timeout){Module["timeout"]=timeout}function setProgress(handler){Module["progress"]=handler}function receiveProgress(progress,time){Module["progress"]({progress:progress,time:time})}function reset(){Module["ret"]=-1;Module["timeout"]=-1}function _locateFile(path,prefix){const mainScriptUrlOrBlob=Module["mainScriptUrlOrBlob"];if(mainScriptUrlOrBlob){const{wasmURL:wasmURL,workerURL:workerURL}=JSON.parse(atob(mainScriptUrlOrBlob.slice(mainScriptUrlOrBlob.lastIndexOf("#")+1)));if(path.endsWith(".wasm"))return wasmURL;if(path.endsWith(".worker.js"))return workerURL}return prefix+path}Module["stringToPtr"]=stringToPtr;Module["stringsToPtr"]=stringsToPtr;Module["print"]=print;Module["printErr"]=printErr;Module["locateFile"]=_locateFile;Module["exec"]=exec;Module["ffprobe"]=ffprobe;Module["setLogger"]=setLogger;Module["setTimeout"]=setTimeout;Module["setProgress"]=setProgress;Module["reset"]=reset;Module["receiveProgress"]=receiveProgress;var moduleOverrides=Object.assign({},Module);var arguments_=[];var thisProgram="./this.program";var quit_=(status,toThrow)=>{throw toThrow};var ENVIRONMENT_IS_WEB=false;var ENVIRONMENT_IS_WORKER=true;var ENVIRONMENT_IS_NODE=false;var scriptDirectory="";function locateFile(path){if(Module["locateFile"]){return Module["locateFile"](path,scriptDirectory)}return scriptDirectory+path}var read_,readAsync,readBinary,setWindowTitle;if(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER){if(ENVIRONMENT_IS_WORKER){scriptDirectory=self.location.href}else if(typeof document!="undefined"&&document.currentScript){scriptDirectory=document.currentScript.src}if(_scriptDir){scriptDirectory=_scriptDir}if(scriptDirectory.indexOf("blob:")!==0){scriptDirectory=scriptDirectory.substr(0,scriptDirectory.replace(/[?#].*/,"").lastIndexOf("/")+1)}else{scriptDirectory=""}{read_=url=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.send(null);return xhr.responseText};if(ENVIRONMENT_IS_WORKER){readBinary=url=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,false);xhr.responseType="arraybuffer";xhr.send(null);return new Uint8Array(xhr.response)}}readAsync=(url,onload,onerror)=>{var xhr=new XMLHttpRequest;xhr.open("GET",url,true);xhr.responseType="arraybuffer";xhr.onload=()=>{if(xhr.status==200||xhr.status==0&&xhr.response){onload(xhr.response);return}onerror()};xhr.onerror=onerror;xhr.send(null)}}setWindowTitle=title=>document.title=title}else{}var out=Module["print"]||console.log.bind(console);var err=Module["printErr"]||console.error.bind(console);Object.assign(Module,moduleOverrides);moduleOverrides=null;if(Module["arguments"])arguments_=Module["arguments"];if(Module["thisProgram"])thisProgram=Module["thisProgram"];if(Module["quit"])quit_=Module["quit"];var wasmBinary;if(Module["wasmBinary"])wasmBinary=Module["wasmBinary"];var noExitRuntime=Module["noExitRuntime"]||true;if(typeof WebAssembly!="object"){abort("no native wasm support detected")}var wasmMemory;var ABORT=false;var EXITSTATUS;function assert(condition,text){if(!condition){abort(text)}}var HEAP8,HEAPU8,HEAP16,HEAPU16,HEAP32,HEAPU32,HEAPF32,HEAP64,HEAPU64,HEAPF64;function updateMemoryViews(){var b=wasmMemory.buffer;Module["HEAP8"]=HEAP8=new Int8Array(b);Module["HEAP16"]=HEAP16=new Int16Array(b);Module["HEAP32"]=HEAP32=new Int32Array(b);Module["HEAPU8"]=HEAPU8=new Uint8Array(b);Module["HEAPU16"]=HEAPU16=new Uint16Array(b);Module["HEAPU32"]=HEAPU32=new Uint32Array(b);Module["HEAPF32"]=HEAPF32=new Float32Array(b);Module["HEAPF64"]=HEAPF64=new Float64Array(b);Module["HEAP64"]=HEAP64=new BigInt64Array(b);Module["HEAPU64"]=HEAPU64=new BigUint64Array(b)}var wasmTable;var __ATPRERUN__=[];var __ATINIT__=[];var __ATPOSTRUN__=[];var runtimeInitialized=false;var runtimeKeepaliveCounter=0;function keepRuntimeAlive(){return noExitRuntime||runtimeKeepaliveCounter>0}function preRun(){if(Module["preRun"]){if(typeof Module["preRun"]=="function")Module["preRun"]=[Module["preRun"]];while(Module["preRun"].length){addOnPreRun(Module["preRun"].shift())}}callRuntimeCallbacks(__ATPRERUN__)}function initRuntime(){runtimeInitialized=true;if(!Module["noFSInit"]&&!FS.init.initialized)FS.init();FS.ignorePermissions=false;TTY.init();SOCKFS.root=FS.mount(SOCKFS,{},null);callRuntimeCallbacks(__ATINIT__)}function postRun(){if(Module["postRun"]){if(typeof Module["postRun"]=="function")Module["postRun"]=[Module["postRun"]];while(Module["postRun"].length){addOnPostRun(Module["postRun"].shift())}}callRuntimeCallbacks(__ATPOSTRUN__)}function addOnPreRun(cb){__ATPRERUN__.unshift(cb)}function addOnInit(cb){__ATINIT__.unshift(cb)}function addOnPostRun(cb){__ATPOSTRUN__.unshift(cb)}var runDependencies=0;var runDependencyWatcher=null;var dependenciesFulfilled=null;function getUniqueRunDependency(id){return id}function addRunDependency(id){runDependencies++;if(Module["monitorRunDependencies"]){Module["monitorRunDependencies"](runDependencies)}}function removeRunDependency(id){runDependencies--;if(Module["monitorRunDependencies"]){Module["monitorRunDependencies"](runDependencies)}if(runDependencies==0){if(runDependencyWatcher!==null){clearInterval(runDependencyWatcher);runDependencyWatcher=null}if(dependenciesFulfilled){var callback=dependenciesFulfilled;dependenciesFulfilled=null;callback()}}}function abort(what){if(Module["onAbort"]){Module["onAbort"](what)}what="Aborted("+what+")";err(what);ABORT=true;EXITSTATUS=1;what+=". Build with -sASSERTIONS for more info.";var e=new WebAssembly.RuntimeError(what);readyPromiseReject(e);throw e}var dataURIPrefix="data:application/octet-stream;base64,";function isDataURI(filename){return filename.startsWith(dataURIPrefix)}var wasmBinaryFile;wasmBinaryFile="ffmpeg-core.wasm";if(!isDataURI(wasmBinaryFile)){wasmBinaryFile=locateFile(wasmBinaryFile)}function getBinary(file){try{if(file==wasmBinaryFile&&wasmBinary){return new Uint8Array(wasmBinary)}if(readBinary){return readBinary(file)}throw"both async and sync fetching of the wasm failed"}catch(err){abort(err)}}function getBinaryPromise(binaryFile){if(!wasmBinary&&(ENVIRONMENT_IS_WEB||ENVIRONMENT_IS_WORKER)){if(typeof fetch=="function"){return fetch(binaryFile,{credentials:"same-origin"}).then(response=>{if(!response["ok"]){throw"failed to load wasm binary file at '"+binaryFile+"'"}return response["arrayBuffer"]()}).catch(()=>getBinary(binaryFile))}}return Promise.resolve().then(()=>getBinary(binaryFile))}function instantiateArrayBuffer(binaryFile,imports,receiver){return getBinaryPromise(binaryFile).then(binary=>{return WebAssembly.instantiate(binary,imports)}).then(instance=>{return instance}).then(receiver,reason=>{err("failed to asynchronously prepare wasm: "+reason);abort(reason)})}function instantiateAsync(binary,binaryFile,imports,callback){if(!binary&&typeof WebAssembly.instantiateStreaming=="function"&&!isDataURI(binaryFile)&&typeof fetch=="function"){return fetch(binaryFile,{credentials:"same-origin"}).then(response=>{var result=WebAssembly.instantiateStreaming(response,imports);return result.then(callback,function(reason){err("wasm streaming compile failed: "+reason);err("falling back to ArrayBuffer instantiation");return instantiateArrayBuffer(binaryFile,imports,callback)})})}else{return instantiateArrayBuffer(binaryFile,imports,callback)}}function createWasm(){var info={"a":wasmImports};function receiveInstance(instance,module){var exports=instance.exports;Module["asm"]=exports;wasmMemory=Module["asm"]["ra"];updateMemoryViews();wasmTable=Module["asm"]["ua"];addOnInit(Module["asm"]["sa"]);removeRunDependency("wasm-instantiate");return exports}addRunDependency("wasm-instantiate");function receiveInstantiationResult(result){receiveInstance(result["instance"])}if(Module["instantiateWasm"]){try{return Module["instantiateWasm"](info,receiveInstance)}catch(e){err("Module.instantiateWasm callback failed with error: "+e);readyPromiseReject(e)}}instantiateAsync(wasmBinary,wasmBinaryFile,info,receiveInstantiationResult).catch(readyPromiseReject);return{}}var ASM_CONSTS={6077464:$0=>{Module.ret=$0}};function send_progress(progress,time){Module.receiveProgress(progress,time)}function is_timeout(diff){if(Module.timeout===-1)return 0;else{return Module.timeout<=diff}}function ExitStatus(status){this.name="ExitStatus";this.message=`Program terminated with exit(${status})`;this.status=status}function callRuntimeCallbacks(callbacks){while(callbacks.length>0){callbacks.shift()(Module)}}var wasmTableMirror=[];function getWasmTableEntry(funcPtr){var func=wasmTableMirror[funcPtr];if(!func){if(funcPtr>=wasmTableMirror.length)wasmTableMirror.length=funcPtr+1;wasmTableMirror[funcPtr]=func=wasmTable.get(funcPtr)}return func}function getValue(ptr,type="i8"){if(type.endsWith("*"))type="*";switch(type){case"i1":return HEAP8[ptr>>0];case"i8":return HEAP8[ptr>>0];case"i16":return HEAP16[ptr>>1];case"i32":return HEAP32[ptr>>2];case"i64":return HEAP64[ptr>>3];case"float":return HEAPF32[ptr>>2];case"double":return HEAPF64[ptr>>3];case"*":return HEAPU32[ptr>>2];default:abort(`invalid type for getValue: ${type}`)}}function setValue(ptr,value,type="i8"){if(type.endsWith("*"))type="*";switch(type){case"i1":HEAP8[ptr>>0]=value;break;case"i8":HEAP8[ptr>>0]=value;break;case"i16":HEAP16[ptr>>1]=value;break;case"i32":HEAP32[ptr>>2]=value;break;case"i64":HEAP64[ptr>>3]=BigInt(value);break;case"float":HEAPF32[ptr>>2]=value;break;case"double":HEAPF64[ptr>>3]=value;break;case"*":HEAPU32[ptr>>2]=value;break;default:abort(`invalid type for setValue: ${type}`)}}var UTF8Decoder=typeof TextDecoder!="undefined"?new TextDecoder("utf8"):undefined;function UTF8ArrayToString(heapOrArray,idx,maxBytesToRead){var endIdx=idx+maxBytesToRead;var endPtr=idx;while(heapOrArray[endPtr]&&!(endPtr>=endIdx))++endPtr;if(endPtr-idx>16&&heapOrArray.buffer&&UTF8Decoder){return UTF8Decoder.decode(heapOrArray.subarray(idx,endPtr))}var str="";while(idx<endPtr){var u0=heapOrArray[idx++];if(!(u0&128)){str+=String.fromCharCode(u0);continue}var u1=heapOrArray[idx++]&63;if((u0&224)==192){str+=String.fromCharCode((u0&31)<<6|u1);continue}var u2=heapOrArray[idx++]&63;if((u0&240)==224){u0=(u0&15)<<12|u1<<6|u2}else{u0=(u0&7)<<18|u1<<12|u2<<6|heapOrArray[idx++]&63}if(u0<65536){str+=String.fromCharCode(u0)}else{var ch=u0-65536;str+=String.fromCharCode(55296|ch>>10,56320|ch&1023)}}return str}function UTF8ToString(ptr,maxBytesToRead){return ptr?UTF8ArrayToString(HEAPU8,ptr,maxBytesToRead):""}function ___assert_fail(condition,filename,line,func){abort(`Assertion failed: ${UTF8ToString(condition)}, at: `+[filename?UTF8ToString(filename):"unknown filename",line,func?UTF8ToString(func):"unknown function"])}function ExceptionInfo(excPtr){this.excPtr=excPtr;this.ptr=excPtr-24;this.set_type=function(type){HEAPU32[this.ptr+4>>2]=type};this.get_type=function(){return HEAPU32[this.ptr+4>>2]};this.set_destructor=function(destructor){HEAPU32[this.ptr+8>>2]=destructor};this.get_destructor=function(){return HEAPU32[this.ptr+8>>2]};this.set_caught=function(caught){caught=caught?1:0;HEAP8[this.ptr+12>>0]=caught};this.get_caught=function(){return HEAP8[this.ptr+12>>0]!=0};this.set_rethrown=function(rethrown){rethrown=rethrown?1:0;HEAP8[this.ptr+13>>0]=rethrown};this.get_rethrown=function(){return HEAP8[this.ptr+13>>0]!=0};this.init=function(type,destructor){this.set_adjusted_ptr(0);this.set_type(type);this.set_destructor(destructor)};this.set_adjusted_ptr=function(adjustedPtr){HEAPU32[this.ptr+16>>2]=adjustedPtr};this.get_adjusted_ptr=function(){return HEAPU32[this.ptr+16>>2]};this.get_exception_ptr=function(){var isPointer=___cxa_is_pointer_type(this.get_type());if(isPointer){return HEAPU32[this.excPtr>>2]}var adjusted=this.get_adjusted_ptr();if(adjusted!==0)return adjusted;return this.excPtr}}var exceptionLast=0;var uncaughtExceptionCount=0;function ___cxa_throw(ptr,type,destructor){var info=new ExceptionInfo(ptr);info.init(type,destructor);exceptionLast=ptr;uncaughtExceptionCount++;throw exceptionLast}var dlopenMissingError="To use dlopen, you need enable dynamic linking, see https://emscripten.org/docs/compiling/Dynamic-Linking.html";function ___dlsym(handle,symbol){abort(dlopenMissingError)}var PATH={isAbs:path=>path.charAt(0)==="/",splitPath:filename=>{var splitPathRe=/^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;return splitPathRe.exec(filename).slice(1)},normalizeArray:(parts,allowAboveRoot)=>{var up=0;for(var i=parts.length-1;i>=0;i--){var last=parts[i];if(last==="."){parts.splice(i,1)}else if(last===".."){parts.splice(i,1);up++}else if(up){parts.splice(i,1);up--}}if(allowAboveRoot){for(;up;up--){parts.unshift("..")}}return parts},normalize:path=>{var isAbsolute=PATH.isAbs(path),trailingSlash=path.substr(-1)==="/";path=PATH.normalizeArray(path.split("/").filter(p=>!!p),!isAbsolute).join("/");if(!path&&!isAbsolute){path="."}if(path&&trailingSlash){path+="/"}return(isAbsolute?"/":"")+path},dirname:path=>{var result=PATH.splitPath(path),root=result[0],dir=result[1];if(!root&&!dir){return"."}if(dir){dir=dir.substr(0,dir.length-1)}return root+dir},basename:path=>{if(path==="/")return"/";path=PATH.normalize(path);path=path.replace(/\/$/,"");var lastSlash=path.lastIndexOf("/");if(lastSlash===-1)return path;return path.substr(lastSlash+1)},join:function(){var paths=Array.prototype.slice.call(arguments);return PATH.normalize(paths.join("/"))},join2:(l,r)=>{return PATH.normalize(l+"/"+r)}};function initRandomFill(){if(typeof crypto=="object"&&typeof crypto["getRandomValues"]=="function"){return view=>crypto.getRandomValues(view)}else abort("initRandomDevice")}function randomFill(view){return(randomFill=initRandomFill())(view)}var PATH_FS={resolve:function(){var resolvedPath="",resolvedAbsolute=false;for(var i=arguments.length-1;i>=-1&&!resolvedAbsolute;i--){var path=i>=0?arguments[i]:FS.cwd();if(typeof path!="string"){throw new TypeError("Arguments to path.resolve must be strings")}else if(!path){return""}resolvedPath=path+"/"+resolvedPath;resolvedAbsolute=PATH.isAbs(path)}resolvedPath=PATH.normalizeArray(resolvedPath.split("/").filter(p=>!!p),!resolvedAbsolute).join("/");return(resolvedAbsolute?"/":"")+resolvedPath||"."},relative:(from,to)=>{from=PATH_FS.resolve(from).substr(1);to=PATH_FS.resolve(to).substr(1);function trim(arr){var start=0;for(;start<arr.length;start++){if(arr[start]!=="")break}var end=arr.length-1;for(;end>=0;end--){if(arr[end]!=="")break}if(start>end)return[];return arr.slice(start,end-start+1)}var fromParts=trim(from.split("/"));var toParts=trim(to.split("/"));var length=Math.min(fromParts.length,toParts.length);var samePartsLength=length;for(var i=0;i<length;i++){if(fromParts[i]!==toParts[i]){samePartsLength=i;break}}var outputParts=[];for(var i=samePartsLength;i<fromParts.length;i++){outputParts.push("..")}outputParts=outputParts.concat(toParts.slice(samePartsLength));return outputParts.join("/")}};function lengthBytesUTF8(str){var len=0;for(var i=0;i<str.length;++i){var c=str.charCodeAt(i);if(c<=127){len++}else if(c<=2047){len+=2}else if(c>=55296&&c<=57343){len+=4;++i}else{len+=3}}return len}function stringToUTF8Array(str,heap,outIdx,maxBytesToWrite){if(!(maxBytesToWrite>0))return 0;var startIdx=outIdx;var endIdx=outIdx+maxBytesToWrite-1;for(var i=0;i<str.length;++i){var u=str.charCodeAt(i);if(u>=55296&&u<=57343){var u1=str.charCodeAt(++i);u=65536+((u&1023)<<10)|u1&1023}if(u<=127){if(outIdx>=endIdx)break;heap[outIdx++]=u}else if(u<=2047){if(outIdx+1>=endIdx)break;heap[outIdx++]=192|u>>6;heap[outIdx++]=128|u&63}else if(u<=65535){if(outIdx+2>=endIdx)break;heap[outIdx++]=224|u>>12;heap[outIdx++]=128|u>>6&63;heap[outIdx++]=128|u&63}else{if(outIdx+3>=endIdx)break;heap[outIdx++]=240|u>>18;heap[outIdx++]=128|u>>12&63;heap[outIdx++]=128|u>>6&63;heap[outIdx++]=128|u&63}}heap[outIdx]=0;return outIdx-startIdx}function intArrayFromString(stringy,dontAddNull,length){var len=length>0?length:lengthBytesUTF8(stringy)+1;var u8array=new Array(len);var numBytesWritten=stringToUTF8Array(stringy,u8array,0,u8array.length);if(dontAddNull)u8array.length=numBytesWritten;return u8array}var TTY={ttys:[],init:function(){},shutdown:function(){},register:function(dev,ops){TTY.ttys[dev]={input:[],output:[],ops:ops};FS.registerDevice(dev,TTY.stream_ops)},stream_ops:{open:function(stream){var tty=TTY.ttys[stream.node.rdev];if(!tty){throw new FS.ErrnoError(43)}stream.tty=tty;stream.seekable=false},close:function(stream){stream.tty.ops.fsync(stream.tty)},fsync:function(stream){stream.tty.ops.fsync(stream.tty)},read:function(stream,buffer,offset,length,pos){if(!stream.tty||!stream.tty.ops.get_char){throw new FS.ErrnoError(60)}var bytesRead=0;for(var i=0;i<length;i++){var result;try{result=stream.tty.ops.get_char(stream.tty)}catch(e){throw new FS.ErrnoError(29)}if(result===undefined&&bytesRead===0){throw new FS.ErrnoError(6)}if(result===null||result===undefined)break;bytesRead++;buffer[offset+i]=result}if(bytesRead){stream.node.timestamp=Date.now()}return bytesRead},write:function(stream,buffer,offset,length,pos){if(!stream.tty||!stream.tty.ops.put_char){throw new FS.ErrnoError(60)}try{for(var i=0;i<length;i++){stream.tty.ops.put_char(stream.tty,buffer[offset+i])}}catch(e){throw new FS.ErrnoError(29)}if(length){stream.node.timestamp=Date.now()}return i}},default_tty_ops:{get_char:function(tty){if(!tty.input.length){var result=null;if(typeof window!="undefined"&&typeof window.prompt=="function"){result=window.prompt("Input: ");if(result!==null){result+="\n"}}else if(typeof readline=="function"){result=readline();if(result!==null){result+="\n"}}if(!result){return null}tty.input=intArrayFromString(result,true)}return tty.input.shift()},put_char:function(tty,val){if(val===null||val===10){out(UTF8ArrayToString(tty.output,0));tty.output=[]}else{if(val!=0)tty.output.push(val)}},fsync:function(tty){if(tty.output&&tty.output.length>0){out(UTF8ArrayToString(tty.output,0));tty.output=[]}}},default_tty1_ops:{put_char:function(tty,val){if(val===null||val===10){err(UTF8ArrayToString(tty.output,0));tty.output=[]}else{if(val!=0)tty.output.push(val)}},fsync:function(tty){if(tty.output&&tty.output.length>0){err(UTF8ArrayToString(tty.output,0));tty.output=[]}}}};function zeroMemory(address,size){HEAPU8.fill(0,address,address+size);return address}function alignMemory(size,alignment){return Math.ceil(size/alignment)*alignment}function mmapAlloc(size){size=alignMemory(size,65536);var ptr=_emscripten_builtin_memalign(65536,size);if(!ptr)return 0;return zeroMemory(ptr,size)}var MEMFS={ops_table:null,mount:function(mount){return MEMFS.createNode(null,"/",16384|511,0)},createNode:function(parent,name,mode,dev){if(FS.isBlkdev(mode)||FS.isFIFO(mode)){throw new FS.ErrnoError(63)}if(!MEMFS.ops_table){MEMFS.ops_table={dir:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr,lookup:MEMFS.node_ops.lookup,mknod:MEMFS.node_ops.mknod,rename:MEMFS.node_ops.rename,unlink:MEMFS.node_ops.unlink,rmdir:MEMFS.node_ops.rmdir,readdir:MEMFS.node_ops.readdir,symlink:MEMFS.node_ops.symlink},stream:{llseek:MEMFS.stream_ops.llseek}},file:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr},stream:{llseek:MEMFS.stream_ops.llseek,read:MEMFS.stream_ops.read,write:MEMFS.stream_ops.write,allocate:MEMFS.stream_ops.allocate,mmap:MEMFS.stream_ops.mmap,msync:MEMFS.stream_ops.msync}},link:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr,readlink:MEMFS.node_ops.readlink},stream:{}},chrdev:{node:{getattr:MEMFS.node_ops.getattr,setattr:MEMFS.node_ops.setattr},stream:FS.chrdev_stream_ops}}}var node=FS.createNode(parent,name,mode,dev);if(FS.isDir(node.mode)){node.node_ops=MEMFS.ops_table.dir.node;node.stream_ops=MEMFS.ops_table.dir.stream;node.contents={}}else if(FS.isFile(node.mode)){node.node_ops=MEMFS.ops_table.file.node;node.stream_ops=MEMFS.ops_table.file.stream;node.usedBytes=0;node.contents=null}else if(FS.isLink(node.mode)){node.node_ops=MEMFS.ops_table.link.node;node.stream_ops=MEMFS.ops_table.link.stream}else if(FS.isChrdev(node.mode)){node.node_ops=MEMFS.ops_table.chrdev.node;node.stream_ops=MEMFS.ops_table.chrdev.stream}node.timestamp=Date.now();if(parent){parent.contents[name]=node;parent.timestamp=node.timestamp}return node},getFileDataAsTypedArray:function(node){if(!node.contents)return new Uint8Array(0);if(node.contents.subarray)return node.contents.subarray(0,node.usedBytes);return new Uint8Array(node.contents)},expandFileStorage:function(node,newCapacity){var prevCapacity=node.contents?node.contents.length:0;if(prevCapacity>=newCapacity)return;var CAPACITY_DOUBLING_MAX=1024*1024;newCapacity=Math.max(newCapacity,prevCapacity*(prevCapacity<CAPACITY_DOUBLING_MAX?2:1.125)>>>0);if(prevCapacity!=0)newCapacity=Math.max(newCapacity,256);var oldContents=node.contents;node.contents=new Uint8Array(newCapacity);if(node.usedBytes>0)node.contents.set(oldContents.subarray(0,node.usedBytes),0)},resizeFileStorage:function(node,newSize){if(node.usedBytes==newSize)return;if(newSize==0){node.contents=null;node.usedBytes=0}else{var oldContents=node.contents;node.contents=new Uint8Array(newSize);if(oldContents){node.contents.set(oldContents.subarray(0,Math.min(newSize,node.usedBytes)))}node.usedBytes=newSize}},node_ops:{getattr:function(node){var attr={};attr.dev=FS.isChrdev(node.mode)?node.id:1;attr.ino=node.id;attr.mode=node.mode;attr.nlink=1;attr.uid=0;attr.gid=0;attr.rdev=node.rdev;if(FS.isDir(node.mode)){attr.size=4096}else if(FS.isFile(node.mode)){attr.size=node.usedBytes}else if(FS.isLink(node.mode)){attr.size=node.link.length}else{attr.size=0}attr.atime=new Date(node.timestamp);attr.mtime=new Date(node.timestamp);attr.ctime=new Date(node.timestamp);attr.blksize=4096;attr.blocks=Math.ceil(attr.size/attr.blksize);return attr},setattr:function(node,attr){if(attr.mode!==undefined){node.mode=attr.mode}if(attr.timestamp!==undefined){node.timestamp=attr.timestamp}if(attr.size!==undefined){MEMFS.resizeFileStorage(node,attr.size)}},lookup:function(parent,name){throw FS.genericErrors[44]},mknod:function(parent,name,mode,dev){return MEMFS.createNode(parent,name,mode,dev)},rename:function(old_node,new_dir,new_name){if(FS.isDir(old_node.mode)){var new_node;try{new_node=FS.lookupNode(new_dir,new_name)}catch(e){}if(new_node){for(var i in new_node.contents){throw new FS.ErrnoError(55)}}}delete old_node.parent.contents[old_node.name];old_node.parent.timestamp=Date.now();old_node.name=new_name;new_dir.contents[new_name]=old_node;new_dir.timestamp=old_node.parent.timestamp;old_node.parent=new_dir},unlink:function(parent,name){delete parent.contents[name];parent.timestamp=Date.now()},rmdir:function(parent,name){var node=FS.lookupNode(parent,name);for(var i in node.contents){throw new FS.ErrnoError(55)}delete parent.contents[name];parent.timestamp=Date.now()},readdir:function(node){var entries=[".",".."];for(var key in node.contents){if(!node.contents.hasOwnProperty(key)){continue}entries.push(key)}return entries},symlink:function(parent,newname,oldpath){var node=MEMFS.createNode(parent,newname,511|40960,0);node.link=oldpath;return node},readlink:function(node){if(!FS.isLink(node.mode)){throw new FS.ErrnoError(28)}return node.link}},stream_ops:{read:function(stream,buffer,offset,length,position){var contents=stream.node.contents;if(position>=stream.node.usedBytes)return 0;var size=Math.min(stream.node.usedBytes-position,length);if(size>8&&contents.subarray){buffer.set(contents.subarray(position,position+size),offset)}else{for(var i=0;i<size;i++)buffer[offset+i]=contents[position+i]}return size},write:function(stream,buffer,offset,length,position,canOwn){if(buffer.buffer===HEAP8.buffer){canOwn=false}if(!length)return 0;var node=stream.node;node.timestamp=Date.now();if(buffer.subarray&&(!node.contents||node.contents.subarray)){if(canOwn){node.contents=buffer.subarray(offset,offset+length);node.usedBytes=length;return length}else if(node.usedBytes===0&&position===0){node.contents=buffer.slice(offset,offset+length);node.usedBytes=length;return length}else if(position+length<=node.usedBytes){node.contents.set(buffer.subarray(offset,offset+length),position);return length}}MEMFS.expandFileStorage(node,position+length);if(node.contents.subarray&&buffer.subarray){node.contents.set(buffer.subarray(offset,offset+length),position)}else{for(var i=0;i<length;i++){node.contents[position+i]=buffer[offset+i]}}node.usedBytes=Math.max(node.usedBytes,position+length);return length},llseek:function(stream,offset,whence){var position=offset;if(whence===1){position+=stream.position}else if(whence===2){if(FS.isFile(stream.node.mode)){position+=stream.node.usedBytes}}if(position<0){throw new FS.ErrnoError(28)}return position},allocate:function(stream,offset,length){MEMFS.expandFileStorage(stream.node,offset+length);stream.node.usedBytes=Math.max(stream.node.usedBytes,offset+length)},mmap:function(stream,length,position,prot,flags){if(!FS.isFile(stream.node.mode)){throw new FS.ErrnoError(43)}var ptr;var allocated;var contents=stream.node.contents;if(!(flags&2)&&contents.buffer===HEAP8.buffer){allocated=false;ptr=contents.byteOffset}else{if(position>0||position+length<contents.length){if(contents.subarray){contents=contents.subarray(position,position+length)}else{contents=Array.prototype.slice.call(contents,position,position+length)}}allocated=true;ptr=mmapAlloc(length);if(!ptr){throw new FS.ErrnoError(48)}HEAP8.set(contents,ptr)}return{ptr:ptr,allocated:allocated}},msync:function(stream,buffer,offset,length,mmapFlags){MEMFS.stream_ops.write(stream,buffer,0,length,offset,false);return 0}}};function asyncLoad(url,onload,onerror,noRunDep){var dep=!noRunDep?getUniqueRunDependency(`al ${url}`):"";readAsync(url,arrayBuffer=>{assert(arrayBuffer,`Loading data file "${url}" failed (no arrayBuffer).`);onload(new Uint8Array(arrayBuffer));if(dep)removeRunDependency(dep)},event=>{if(onerror){onerror()}else{throw`Loading data file "${url}" failed.`}});if(dep)addRunDependency(dep)}var preloadPlugins=Module["preloadPlugins"]||[];function FS_handledByPreloadPlugin(byteArray,fullname,finish,onerror){if(typeof Browser!="undefined")Browser.init();var handled=false;preloadPlugins.forEach(function(plugin){if(handled)return;if(plugin["canHandle"](fullname)){plugin["handle"](byteArray,fullname,finish,onerror);handled=true}});return handled}function FS_createPreloadedFile(parent,name,url,canRead,canWrite,onload,onerror,dontCreateFile,canOwn,preFinish){var fullname=name?PATH_FS.resolve(PATH.join2(parent,name)):parent;var dep=getUniqueRunDependency(`cp ${fullname}`);function processData(byteArray){function finish(byteArray){if(preFinish)preFinish();if(!dontCreateFile){FS.createDataFile(parent,name,byteArray,canRead,canWrite,canOwn)}if(onload)onload();removeRunDependency(dep)}if(FS_handledByPreloadPlugin(byteArray,fullname,finish,()=>{if(onerror)onerror();removeRunDependency(dep)})){return}finish(byteArray)}addRunDependency(dep);if(typeof url=="string"){asyncLoad(url,byteArray=>processData(byteArray),onerror)}else{processData(url)}}function FS_modeStringToFlags(str){var flagModes={"r":0,"r+":2,"w":512|64|1,"w+":512|64|2,"a":1024|64|1,"a+":1024|64|2};var flags=flagModes[str];if(typeof flags=="undefined"){throw new Error(`Unknown file open mode: ${str}`)}return flags}function FS_getMode(canRead,canWrite){var mode=0;if(canRead)mode|=292|73;if(canWrite)mode|=146;return mode}var WORKERFS={DIR_MODE:16895,FILE_MODE:33279,reader:null,mount:function(mount){assert(ENVIRONMENT_IS_WORKER);if(!WORKERFS.reader)WORKERFS.reader=new FileReaderSync;var root=WORKERFS.createNode(null,"/",WORKERFS.DIR_MODE,0);var createdParents={};function ensureParent(path){var parts=path.split("/");var parent=root;for(var i=0;i<parts.length-1;i++){var curr=parts.slice(0,i+1).join("/");if(!createdParents[curr]){createdParents[curr]=WORKERFS.createNode(parent,parts[i],WORKERFS.DIR_MODE,0)}parent=createdParents[curr]}return parent}function base(path){var parts=path.split("/");return parts[parts.length-1]}Array.prototype.forEach.call(mount.opts["files"]||[],function(file){WORKERFS.createNode(ensureParent(file.name),base(file.name),WORKERFS.FILE_MODE,0,file,file.lastModifiedDate)});(mount.opts["blobs"]||[]).forEach(function(obj){WORKERFS.createNode(ensureParent(obj["name"]),base(obj["name"]),WORKERFS.FILE_MODE,0,obj["data"])});(mount.opts["packages"]||[]).forEach(function(pack){pack["metadata"].files.forEach(function(file){var name=file.filename.substr(1);WORKERFS.createNode(ensureParent(name),base(name),WORKERFS.FILE_MODE,0,pack["blob"].slice(file.start,file.end))})});return root},createNode:function(parent,name,mode,dev,contents,mtime){var node=FS.createNode(parent,name,mode);node.mode=mode;node.node_ops=WORKERFS.node_ops;node.stream_ops=WORKERFS.stream_ops;node.timestamp=(mtime||new Date).getTime();assert(WORKERFS.FILE_MODE!==WORKERFS.DIR_MODE);if(mode===WORKERFS.FILE_MODE){node.size=contents.size;node.contents=contents}else{node.size=4096;node.contents={}}if(parent){parent.contents[name]=node}return node},node_ops:{getattr:function(node){return{dev:1,ino:node.id,mode:node.mode,nlink:1,uid:0,gid:0,rdev:undefined,size:node.size,atime:new Date(node.timestamp),mtime:new Date(node.timestamp),ctime:new Date(node.timestamp),blksize:4096,blocks:Math.ceil(node.size/4096)}},setattr:function(node,attr){if(attr.mode!==undefined){node.mode=attr.mode}if(attr.timestamp!==undefined){node.timestamp=attr.timestamp}},lookup:function(parent,name){throw new FS.ErrnoError(44)},mknod:function(parent,name,mode,dev){throw new FS.ErrnoError(63)},rename:function(oldNode,newDir,newName){throw new FS.ErrnoError(63)},unlink:function(parent,name){throw new FS.ErrnoError(63)},rmdir:function(parent,name){throw new FS.ErrnoError(63)},readdir:function(node){var entries=[".",".."];for(var key in node.contents){if(!node.contents.hasOwnProperty(key)){continue}entries.push(key)}return entries},symlink:function(parent,newName,oldPath){throw new FS.ErrnoError(63)}},stream_ops:{read:function(stream,buffer,offset,length,position){if(position>=stream.node.size)return 0;var chunk=stream.node.contents.slice(position,position+length);var ab=WORKERFS.reader.readAsArrayBuffer(chunk);buffer.set(new Uint8Array(ab),offset);return chunk.size},write:function(stream,buffer,offset,length,position){throw new FS.ErrnoError(29)},llseek:function(stream,offset,whence){var position=offset;if(whence===1){position+=stream.position}else if(whence===2){if(FS.isFile(stream.node.mode)){position+=stream.node.size}}if(position<0){throw new FS.ErrnoError(28)}return position}}};var FS={root:null,mounts:[],devices:{},streams:[],nextInode:1,nameTable:null,currentPath:"/",initialized:false,ignorePermissions:true,ErrnoError:null,genericErrors:{},filesystems:null,syncFSRequests:0,lookupPath:(path,opts={})=>{path=PATH_FS.resolve(path);if(!path)return{path:"",node:null};var defaults={follow_mount:true,recurse_count:0};opts=Object.assign(defaults,opts);if(opts.recurse_count>8){throw new FS.ErrnoError(32)}var parts=path.split("/").filter(p=>!!p);var current=FS.root;var current_path="/";for(var i=0;i<parts.length;i++){var islast=i===parts.length-1;if(islast&&opts.parent){break}current=FS.lookupNode(current,parts[i]);current_path=PATH.join2(current_path,parts[i]);if(FS.isMountpoint(current)){if(!islast||islast&&opts.follow_mount){current=current.mounted.root}}if(!islast||opts.follow){var count=0;while(FS.isLink(current.mode)){var link=FS.readlink(current_path);current_path=PATH_FS.resolve(PATH.dirname(current_path),link);var lookup=FS.lookupPath(current_path,{recurse_count:opts.recurse_count+1});current=lookup.node;if(count++>40){throw new FS.ErrnoError(32)}}}}return{path:current_path,node:current}},getPath:node=>{var path;while(true){if(FS.isRoot(node)){var mount=node.mount.mountpoint;if(!path)return mount;return mount[mount.length-1]!=="/"?`${mount}/${path}`:mount+path}path=path?`${node.name}/${path}`:node.name;node=node.parent}},hashName:(parentid,name)=>{var hash=0;for(var i=0;i<name.length;i++){hash=(hash<<5)-hash+name.charCodeAt(i)|0}return(parentid+hash>>>0)%FS.nameTable.length},hashAddNode:node=>{var hash=FS.hashName(node.parent.id,node.name);node.name_next=FS.nameTable[hash];FS.nameTable[hash]=node},hashRemoveNode:node=>{var hash=FS.hashName(node.parent.id,node.name);if(FS.nameTable[hash]===node){FS.nameTable[hash]=node.name_next}else{var current=FS.nameTable[hash];while(current){if(current.name_next===node){current.name_next=node.name_next;break}current=current.name_next}}},lookupNode:(parent,name)=>{var errCode=FS.mayLookup(parent);if(errCode){throw new FS.ErrnoError(errCode,parent)}var hash=FS.hashName(parent.id,name);for(var node=FS.nameTable[hash];node;node=node.name_next){var nodeName=node.name;if(node.parent.id===parent.id&&nodeName===name){return node}}return FS.lookup(parent,name)},createNode:(parent,name,mode,rdev)=>{var node=new FS.FSNode(parent,name,mode,rdev);FS.hashAddNode(node);return node},destroyNode:node=>{FS.hashRemoveNode(node)},isRoot:node=>{return node===node.parent},isMountpoint:node=>{return!!node.mounted},isFile:mode=>{return(mode&61440)===32768},isDir:mode=>{return(mode&61440)===16384},isLink:mode=>{return(mode&61440)===40960},isChrdev:mode=>{return(mode&61440)===8192},isBlkdev:mode=>{return(mode&61440)===24576},isFIFO:mode=>{return(mode&61440)===4096},isSocket:mode=>{return(mode&49152)===49152},flagsToPermissionString:flag=>{var perms=["r","w","rw"][flag&3];if(flag&512){perms+="w"}return perms},nodePermissions:(node,perms)=>{if(FS.ignorePermissions){return 0}if(perms.includes("r")&&!(node.mode&292)){return 2}else if(perms.includes("w")&&!(node.mode&146)){return 2}else if(perms.includes("x")&&!(node.mode&73)){return 2}return 0},mayLookup:dir=>{var errCode=FS.nodePermissions(dir,"x");if(errCode)return errCode;if(!dir.node_ops.lookup)return 2;return 0},mayCreate:(dir,name)=>{try{var node=FS.lookupNode(dir,name);return 20}catch(e){}return FS.nodePermissions(dir,"wx")},mayDelete:(dir,name,isdir)=>{var node;try{node=FS.lookupNode(dir,name)}catch(e){return e.errno}var errCode=FS.nodePermissions(dir,"wx");if(errCode){return errCode}if(isdir){if(!FS.isDir(node.mode)){return 54}if(FS.isRoot(node)||FS.getPath(node)===FS.cwd()){return 10}}else{if(FS.isDir(node.mode)){return 31}}return 0},mayOpen:(node,flags)=>{if(!node){return 44}if(FS.isLink(node.mode)){return 32}else if(FS.isDir(node.mode)){if(FS.flagsToPermissionString(flags)!=="r"||flags&512){return 31}}return FS.nodePermissions(node,FS.flagsToPermissionString(flags))},MAX_OPEN_FDS:4096,nextfd:()=>{for(var fd=0;fd<=FS.MAX_OPEN_FDS;fd++){if(!FS.streams[fd]){return fd}}throw new FS.ErrnoError(33)},getStream:fd=>FS.streams[fd],createStream:(stream,fd=-1)=>{if(!FS.FSStream){FS.FSStream=function(){this.shared={}};FS.FSStream.prototype={};Object.defineProperties(FS.FSStream.prototype,{object:{get:function(){return this.node},set:function(val){this.node=val}},isRead:{get:function(){return(this.flags&2097155)!==1}},isWrite:{get:function(){return(this.flags&2097155)!==0}},isAppend:{get:function(){return this.flags&1024}},flags:{get:function(){return this.shared.flags},set:function(val){this.shared.flags=val}},position:{get:function(){return this.shared.position},set:function(val){this.shared.position=val}}})}stream=Object.assign(new FS.FSStream,stream);if(fd==-1){fd=FS.nextfd()}stream.fd=fd;FS.streams[fd]=stream;return stream},closeStream:fd=>{FS.streams[fd]=null},chrdev_stream_ops:{open:stream=>{var device=FS.getDevice(stream.node.rdev);stream.stream_ops=device.stream_ops;if(stream.stream_ops.open){stream.stream_ops.open(stream)}},llseek:()=>{throw new FS.ErrnoError(70)}},major:dev=>dev>>8,minor:dev=>dev&255,makedev:(ma,mi)=>ma<<8|mi,registerDevice:(dev,ops)=>{FS.devices[dev]={stream_ops:ops}},getDevice:dev=>FS.devices[dev],getMounts:mount=>{var mounts=[];var check=[mount];while(check.length){var m=check.pop();mounts.push(m);check.push.apply(check,m.mounts)}return mounts},syncfs:(populate,callback)=>{if(typeof populate=="function"){callback=populate;populate=false}FS.syncFSRequests++;if(FS.syncFSRequests>1){err(`warning: ${FS.syncFSRequests} FS.syncfs operations in flight at once, probably just doing extra work`)}var mounts=FS.getMounts(FS.root.mount);var completed=0;function doCallback(errCode){FS.syncFSRequests--;return callback(errCode)}function done(errCode){if(errCode){if(!done.errored){done.errored=true;return doCallback(errCode)}return}if(++completed>=mounts.length){doCallback(null)}}mounts.forEach(mount=>{if(!mount.type.syncfs){return done(null)}mount.type.syncfs(mount,populate,done)})},mount:(type,opts,mountpoint)=>{var root=mountpoint==="/";var pseudo=!mountpoint;var node;if(root&&FS.root){throw new FS.ErrnoError(10)}else if(!root&&!pseudo){var lookup=FS.lookupPath(mountpoint,{follow_mount:false});mountpoint=lookup.path;node=lookup.node;if(FS.isMountpoint(node)){throw new FS.ErrnoError(10)}if(!FS.isDir(node.mode)){throw new FS.ErrnoError(54)}}var mount={type:type,opts:opts,mountpoint:mountpoint,mounts:[]};var mountRoot=type.mount(mount);mountRoot.mount=mount;mount.root=mountRoot;if(root){FS.root=mountRoot}else if(node){node.mounted=mount;if(node.mount){node.mount.mounts.push(mount)}}return mountRoot},unmount:mountpoint=>{var lookup=FS.lookupPath(mountpoint,{follow_mount:false});if(!FS.isMountpoint(lookup.node)){throw new FS.ErrnoError(28)}var node=lookup.node;var mount=node.mounted;var mounts=FS.getMounts(mount);Object.keys(FS.nameTable).forEach(hash=>{var current=FS.nameTable[hash];while(current){var next=current.name_next;if(mounts.includes(current.mount)){FS.destroyNode(current)}current=next}});node.mounted=null;var idx=node.mount.mounts.indexOf(mount);node.mount.mounts.splice(idx,1)},lookup:(parent,name)=>{return parent.node_ops.lookup(parent,name)},mknod:(path,mode,dev)=>{var lookup=FS.lookupPath(path,{parent:true});var parent=lookup.node;var name=PATH.basename(path);if(!name||name==="."||name===".."){throw new FS.ErrnoError(28)}var errCode=FS.mayCreate(parent,name);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.mknod){throw new FS.ErrnoError(63)}return parent.node_ops.mknod(parent,name,mode,dev)},create:(path,mode)=>{mode=mode!==undefined?mode:438;mode&=4095;mode|=32768;return FS.mknod(path,mode,0)},mkdir:(path,mode)=>{mode=mode!==undefined?mode:511;mode&=511|512;mode|=16384;return FS.mknod(path,mode,0)},mkdirTree:(path,mode)=>{var dirs=path.split("/");var d="";for(var i=0;i<dirs.length;++i){if(!dirs[i])continue;d+="/"+dirs[i];try{FS.mkdir(d,mode)}catch(e){if(e.errno!=20)throw e}}},mkdev:(path,mode,dev)=>{if(typeof dev=="undefined"){dev=mode;mode=438}mode|=8192;return FS.mknod(path,mode,dev)},symlink:(oldpath,newpath)=>{if(!PATH_FS.resolve(oldpath)){throw new FS.ErrnoError(44)}var lookup=FS.lookupPath(newpath,{parent:true});var parent=lookup.node;if(!parent){throw new FS.ErrnoError(44)}var newname=PATH.basename(newpath);var errCode=FS.mayCreate(parent,newname);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.symlink){throw new FS.ErrnoError(63)}return parent.node_ops.symlink(parent,newname,oldpath)},rename:(old_path,new_path)=>{var old_dirname=PATH.dirname(old_path);var new_dirname=PATH.dirname(new_path);var old_name=PATH.basename(old_path);var new_name=PATH.basename(new_path);var lookup,old_dir,new_dir;lookup=FS.lookupPath(old_path,{parent:true});old_dir=lookup.node;lookup=FS.lookupPath(new_path,{parent:true});new_dir=lookup.node;if(!old_dir||!new_dir)throw new FS.ErrnoError(44);if(old_dir.mount!==new_dir.mount){throw new FS.ErrnoError(75)}var old_node=FS.lookupNode(old_dir,old_name);var relative=PATH_FS.relative(old_path,new_dirname);if(relative.charAt(0)!=="."){throw new FS.ErrnoError(28)}relative=PATH_FS.relative(new_path,old_dirname);if(relative.charAt(0)!=="."){throw new FS.ErrnoError(55)}var new_node;try{new_node=FS.lookupNode(new_dir,new_name)}catch(e){}if(old_node===new_node){return}var isdir=FS.isDir(old_node.mode);var errCode=FS.mayDelete(old_dir,old_name,isdir);if(errCode){throw new FS.ErrnoError(errCode)}errCode=new_node?FS.mayDelete(new_dir,new_name,isdir):FS.mayCreate(new_dir,new_name);if(errCode){throw new FS.ErrnoError(errCode)}if(!old_dir.node_ops.rename){throw new FS.ErrnoError(63)}if(FS.isMountpoint(old_node)||new_node&&FS.isMountpoint(new_node)){throw new FS.ErrnoError(10)}if(new_dir!==old_dir){errCode=FS.nodePermissions(old_dir,"w");if(errCode){throw new FS.ErrnoError(errCode)}}FS.hashRemoveNode(old_node);try{old_dir.node_ops.rename(old_node,new_dir,new_name)}catch(e){throw e}finally{FS.hashAddNode(old_node)}},rmdir:path=>{var lookup=FS.lookupPath(path,{parent:true});var parent=lookup.node;var name=PATH.basename(path);var node=FS.lookupNode(parent,name);var errCode=FS.mayDelete(parent,name,true);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.rmdir){throw new FS.ErrnoError(63)}if(FS.isMountpoint(node)){throw new FS.ErrnoError(10)}parent.node_ops.rmdir(parent,name);FS.destroyNode(node)},readdir:path=>{var lookup=FS.lookupPath(path,{follow:true});var node=lookup.node;if(!node.node_ops.readdir){throw new FS.ErrnoError(54)}return node.node_ops.readdir(node)},unlink:path=>{var lookup=FS.lookupPath(path,{parent:true});var parent=lookup.node;if(!parent){throw new FS.ErrnoError(44)}var name=PATH.basename(path);var node=FS.lookupNode(parent,name);var errCode=FS.mayDelete(parent,name,false);if(errCode){throw new FS.ErrnoError(errCode)}if(!parent.node_ops.unlink){throw new FS.ErrnoError(63)}if(FS.isMountpoint(node)){throw new FS.ErrnoError(10)}parent.node_ops.unlink(parent,name);FS.destroyNode(node)},readlink:path=>{var lookup=FS.lookupPath(path);var link=lookup.node;if(!link){throw new FS.ErrnoError(44)}if(!link.node_ops.readlink){throw new FS.ErrnoError(28)}return PATH_FS.resolve(FS.getPath(link.parent),link.node_ops.readlink(link))},stat:(path,dontFollow)=>{var lookup=FS.lookupPath(path,{follow:!dontFollow});var node=lookup.node;if(!node){throw new FS.ErrnoError(44)}if(!node.node_ops.getattr){throw new FS.ErrnoError(63)}return node.node_ops.getattr(node)},lstat:path=>{return FS.stat(path,true)},chmod:(path,mode,dontFollow)=>{var node;if(typeof path=="string"){var lookup=FS.lookupPath(path,{follow:!dontFollow});node=lookup.node}else{node=path}if(!node.node_ops.setattr){throw new FS.ErrnoError(63)}node.node_ops.setattr(node,{mode:mode&4095|node.mode&~4095,timestamp:Date.now()})},lchmod:(path,mode)=>{FS.chmod(path,mode,true)},fchmod:(fd,mode)=>{var stream=FS.getStream(fd);if(!stream){throw new FS.ErrnoError(8)}FS.chmod(stream.node,mode)},chown:(path,uid,gid,dontFollow)=>{var node;if(typeof path=="string"){var lookup=FS.lookupPath(path,{follow:!dontFollow});node=lookup.node}else{node=path}if(!node.node_ops.setattr){throw new FS.ErrnoError(63)}node.node_ops.setattr(node,{timestamp:Date.now()})},lchown:(path,uid,gid)=>{FS.chown(path,uid,gid,true)},fchown:(fd,uid,gid)=>{var stream=FS.getStream(fd);if(!stream){throw new FS.ErrnoError(8)}FS.chown(stream.node,uid,gid)},truncate:(path,len)=>{if(len<0){throw new FS.ErrnoError(28)}var node;if(typeof path=="string"){var lookup=FS.lookupPath(path,{follow:true});node=lookup.node}else{node=path}if(!node.node_ops.setattr){throw new FS.ErrnoError(63)}if(FS.isDir(node.mode)){throw new FS.ErrnoError(31)}if(!FS.isFile(node.mode)){throw new FS.ErrnoError(28)}var errCode=FS.nodePermissions(node,"w");if(errCode){throw new FS.ErrnoError(errCode)}node.node_ops.setattr(node,{size:len,timestamp:Date.now()})},ftruncate:(fd,len)=>{var stream=FS.getStream(fd);if(!stream){throw new FS.ErrnoError(8)}if((stream.flags&2097155)===0){throw new FS.ErrnoError(28)}FS.truncate(stream.node,len)},utime:(path,atime,mtime)=>{var lookup=FS.lookupPath(path,{follow:true});var node=lookup.node;node.node_ops.setattr(node,{timestamp:Math.max(atime,mtime)})},open:(path,flags,mode)=>{if(path===""){throw new FS.ErrnoError(44)}flags=typeof flags=="string"?FS_modeStringToFlags(flags):flags;mode=typeof mode=="undefined"?438:mode;if(flags&64){mode=mode&4095|32768}else{mode=0}var node;if(typeof path=="object"){node=path}else{path=PATH.normalize(path);try{var lookup=FS.lookupPath(path,{follow:!(flags&131072)});node=lookup.node}catch(e){}}var created=false;if(flags&64){if(node){if(flags&128){throw new FS.ErrnoError(20)}}else{node=FS.mknod(path,mode,0);created=true}}if(!node){throw new FS.ErrnoError(44)}if(FS.isChrdev(node.mode)){flags&=~512}if(flags&65536&&!FS.isDir(node.mode)){throw new FS.ErrnoError(54)}if(!created){var errCode=FS.mayOpen(node,flags);if(errCode){throw new FS.ErrnoError(errCode)}}if(flags&512&&!created){FS.truncate(node,0)}flags&=~(128|512|131072);var stream=FS.createStream({node:node,path:FS.getPath(node),flags:flags,seekable:true,position:0,stream_ops:node.stream_ops,ungotten:[],error:false});if(stream.stream_ops.open){stream.stream_ops.open(stream)}if(Module["logReadFiles"]&&!(flags&1)){if(!FS.readFiles)FS.readFiles={};if(!(path in FS.readFiles)){FS.readFiles[path]=1}}return stream},close:stream=>{if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if(stream.getdents)stream.getdents=null;try{if(stream.stream_ops.close){stream.stream_ops.close(stream)}}catch(e){throw e}finally{FS.closeStream(stream.fd)}stream.fd=null},isClosed:stream=>{return stream.fd===null},llseek:(stream,offset,whence)=>{if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if(!stream.seekable||!stream.stream_ops.llseek){throw new FS.ErrnoError(70)}if(whence!=0&&whence!=1&&whence!=2){throw new FS.ErrnoError(28)}stream.position=stream.stream_ops.llseek(stream,offset,whence);stream.ungotten=[];return stream.position},read:(stream,buffer,offset,length,position)=>{if(length<0||position<0){throw new FS.ErrnoError(28)}if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if((stream.flags&2097155)===1){throw new FS.ErrnoError(8)}if(FS.isDir(stream.node.mode)){throw new FS.ErrnoError(31)}if(!stream.stream_ops.read){throw new FS.ErrnoError(28)}var seeking=typeof position!="undefined";if(!seeking){position=stream.position}else if(!stream.seekable){throw new FS.ErrnoError(70)}var bytesRead=stream.stream_ops.read(stream,buffer,offset,length,position);if(!seeking)stream.position+=bytesRead;return bytesRead},write:(stream,buffer,offset,length,position,canOwn)=>{if(length<0||position<0){throw new FS.ErrnoError(28)}if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if((stream.flags&2097155)===0){throw new FS.ErrnoError(8)}if(FS.isDir(stream.node.mode)){throw new FS.ErrnoError(31)}if(!stream.stream_ops.write){throw new FS.ErrnoError(28)}if(stream.seekable&&stream.flags&1024){FS.llseek(stream,0,2)}var seeking=typeof position!="undefined";if(!seeking){position=stream.position}else if(!stream.seekable){throw new FS.ErrnoError(70)}var bytesWritten=stream.stream_ops.write(stream,buffer,offset,length,position,canOwn);if(!seeking)stream.position+=bytesWritten;return bytesWritten},allocate:(stream,offset,length)=>{if(FS.isClosed(stream)){throw new FS.ErrnoError(8)}if(offset<0||length<=0){throw new FS.ErrnoError(28)}if((stream.flags&2097155)===0){throw new FS.ErrnoError(8)}if(!FS.isFile(stream.node.mode)&&!FS.isDir(stream.node.mode)){throw new FS.ErrnoError(43)}if(!stream.stream_ops.allocate){throw new FS.ErrnoError(138)}stream.stream_ops.allocate(stream,offset,length)},mmap:(stream,length,position,prot,flags)=>{if((prot&2)!==0&&(flags&2)===0&&(stream.flags&2097155)!==2){throw new FS.ErrnoError(2)}if((stream.flags&2097155)===1){throw new FS.ErrnoError(2)}if(!stream.stream_ops.mmap){throw new FS.ErrnoError(43)}return stream.stream_ops.mmap(stream,length,position,prot,flags)},msync:(stream,buffer,offset,length,mmapFlags)=>{if(!stream.stream_ops.msync){return 0}return stream.stream_ops.msync(stream,buffer,offset,length,mmapFlags)},munmap:stream=>0,ioctl:(stream,cmd,arg)=>{if(!stream.stream_ops.ioctl){throw new FS.ErrnoError(59)}return stream.stream_ops.ioctl(stream,cmd,arg)},readFile:(path,opts={})=>{opts.flags=opts.flags||0;opts.encoding=opts.encoding||"binary";if(opts.encoding!=="utf8"&&opts.encoding!=="binary"){throw new Error(`Invalid encoding type "${opts.encoding}"`)}var ret;var stream=FS.open(path,opts.flags);var stat=FS.stat(path);var length=stat.size;var buf=new Uint8Array(length);FS.read(stream,buf,0,length,0);if(opts.encoding==="utf8"){ret=UTF8ArrayToString(buf,0)}else if(opts.encoding==="binary"){ret=buf}FS.close(stream);return ret},writeFile:(path,data,opts={})=>{opts.flags=opts.flags||577;var stream=FS.open(path,opts.flags,opts.mode);if(typeof data=="string"){var buf=new Uint8Array(lengthBytesUTF8(data)+1);var actualNumBytes=stringToUTF8Array(data,buf,0,buf.length);FS.write(stream,buf,0,actualNumBytes,undefined,opts.canOwn)}else if(ArrayBuffer.isView(data)){FS.write(stream,data,0,data.byteLength,undefined,opts.canOwn)}else{throw new Error("Unsupported data type")}FS.close(stream)},cwd:()=>FS.currentPath,chdir:path=>{var lookup=FS.lookupPath(path,{follow:true});if(lookup.node===null){throw new FS.ErrnoError(44)}if(!FS.isDir(lookup.node.mode)){throw new FS.ErrnoError(54)}var errCode=FS.nodePermissions(lookup.node,"x");if(errCode){throw new FS.ErrnoError(errCode)}FS.currentPath=lookup.path},createDefaultDirectories:()=>{FS.mkdir("/tmp");FS.mkdir("/home");FS.mkdir("/home/web_user")},createDefaultDevices:()=>{FS.mkdir("/dev");FS.registerDevice(FS.makedev(1,3),{read:()=>0,write:(stream,buffer,offset,length,pos)=>length});FS.mkdev("/dev/null",FS.makedev(1,3));TTY.register(FS.makedev(5,0),TTY.default_tty_ops);TTY.register(FS.makedev(6,0),TTY.default_tty1_ops);FS.mkdev("/dev/tty",FS.makedev(5,0));FS.mkdev("/dev/tty1",FS.makedev(6,0));var randomBuffer=new Uint8Array(1024),randomLeft=0;var randomByte=()=>{if(randomLeft===0){randomLeft=randomFill(randomBuffer).byteLength}return randomBuffer[--randomLeft]};FS.createDevice("/dev","random",randomByte);FS.createDevice("/dev","urandom",randomByte);FS.mkdir("/dev/shm");FS.mkdir("/dev/shm/tmp")},createSpecialDirectories:()=>{FS.mkdir("/proc");var proc_self=FS.mkdir("/proc/self");FS.mkdir("/proc/self/fd");FS.mount({mount:()=>{var node=FS.createNode(proc_self,"fd",16384|511,73);node.node_ops={lookup:(parent,name)=>{var fd=+name;var stream=FS.getStream(fd);if(!stream)throw new FS.ErrnoError(8);var ret={parent:null,mount:{mountpoint:"fake"},node_ops:{readlink:()=>stream.path}};ret.parent=ret;return ret}};return node}},{},"/proc/self/fd")},createStandardStreams:()=>{if(Module["stdin"]){FS.createDevice("/dev","stdin",Module["stdin"])}else{FS.symlink("/dev/tty","/dev/stdin")}if(Module["stdout"]){FS.createDevice("/dev","stdout",null,Module["stdout"])}else{FS.symlink("/dev/tty","/dev/stdout")}if(Module["stderr"]){FS.createDevice("/dev","stderr",null,Module["stderr"])}else{FS.symlink("/dev/tty1","/dev/stderr")}var stdin=FS.open("/dev/stdin",0);var stdout=FS.open("/dev/stdout",1);var stderr=FS.open("/dev/stderr",1)},ensureErrnoError:()=>{if(FS.ErrnoError)return;FS.ErrnoError=function ErrnoError(errno,node){this.name="ErrnoError";this.node=node;this.setErrno=function(errno){this.errno=errno};this.setErrno(errno);this.message="FS error"};FS.ErrnoError.prototype=new Error;FS.ErrnoError.prototype.constructor=FS.ErrnoError;[44].forEach(code=>{FS.genericErrors[code]=new FS.ErrnoError(code);FS.genericErrors[code].stack="<generic error, no stack>"})},staticInit:()=>{FS.ensureErrnoError();FS.nameTable=new Array(4096);FS.mount(MEMFS,{},"/");FS.createDefaultDirectories();FS.createDefaultDevices();FS.createSpecialDirectories();FS.filesystems={"MEMFS":MEMFS,"WORKERFS":WORKERFS}},init:(input,output,error)=>{FS.init.initialized=true;FS.ensureErrnoError();Module["stdin"]=input||Module["stdin"];Module["stdout"]=output||Module["stdout"];Module["stderr"]=error||Module["stderr"];FS.createStandardStreams()},quit:()=>{FS.init.initialized=false;for(var i=0;i<FS.streams.length;i++){var stream=FS.streams[i];if(!stream){continue}FS.close(stream)}},findObject:(path,dontResolveLastLink)=>{var ret=FS.analyzePath(path,dontResolveLastLink);if(!ret.exists){return null}return ret.object},analyzePath:(path,dontResolveLastLink)=>{try{var lookup=FS.lookupPath(path,{follow:!dontResolveLastLink});path=lookup.path}catch(e){}var ret={isRoot:false,exists:false,error:0,name:null,path:null,object:null,parentExists:false,parentPath:null,parentObject:null};try{var lookup=FS.lookupPath(path,{parent:true});ret.parentExists=true;ret.parentPath=lookup.path;ret.parentObject=lookup.node;ret.name=PATH.basename(path);lookup=FS.lookupPath(path,{follow:!dontResolveLastLink});ret.exists=true;ret.path=lookup.path;ret.object=lookup.node;ret.name=lookup.node.name;ret.isRoot=lookup.path==="/"}catch(e){ret.error=e.errno}return ret},createPath:(parent,path,canRead,canWrite)=>{parent=typeof parent=="string"?parent:FS.getPath(parent);var parts=path.split("/").reverse();while(parts.length){var part=parts.pop();if(!part)continue;var current=PATH.join2(parent,part);try{FS.mkdir(current)}catch(e){}parent=current}return current},createFile:(parent,name,properties,canRead,canWrite)=>{var path=PATH.join2(typeof parent=="string"?parent:FS.getPath(parent),name);var mode=FS_getMode(canRead,canWrite);return FS.create(path,mode)},createDataFile:(parent,name,data,canRead,canWrite,canOwn)=>{var path=name;if(parent){parent=typeof parent=="string"?parent:FS.getPath(parent);path=name?PATH.join2(parent,name):parent}var mode=FS_getMode(canRead,canWrite);var node=FS.create(path,mode);if(data){if(typeof data=="string"){var arr=new Array(data.length);for(var i=0,len=data.length;i<len;++i)arr[i]=data.charCodeAt(i);data=arr}FS.chmod(node,mode|146);var stream=FS.open(node,577);FS.write(stream,data,0,data.length,0,canOwn);FS.close(stream);FS.chmod(node,mode)}return node},createDevice:(parent,name,input,output)=>{var path=PATH.join2(typeof parent=="string"?parent:FS.getPath(parent),name);var mode=FS_getMode(!!input,!!output);if(!FS.createDevice.major)FS.createDevice.major=64;var dev=FS.makedev(FS.createDevice.major++,0);FS.registerDevice(dev,{open:stream=>{stream.seekable=false},close:stream=>{if(output&&output.buffer&&output.buffer.length){output(10)}},read:(stream,buffer,offset,length,pos)=>{var bytesRead=0;for(var i=0;i<length;i++){var result;try{result=input()}catch(e){throw new FS.ErrnoError(29)}if(result===undefined&&bytesRead===0){throw new FS.ErrnoError(6)}if(result===null||result===undefined)break;bytesRead++;buffer[offset+i]=result}if(bytesRead){stream.node.timestamp=Date.now()}return bytesRead},write:(stream,buffer,offset,length,pos)=>{for(var i=0;i<length;i++){try{output(buffer[offset+i])}catch(e){throw new FS.ErrnoError(29)}}if(length){stream.node.timestamp=Date.now()}return i}});return FS.mkdev(path,mode,dev)},forceLoadFile:obj=>{if(obj.isDevice||obj.isFolder||obj.link||obj.contents)return true;if(typeof XMLHttpRequest!="undefined"){throw new Error("Lazy loading should have been performed (contents set) in createLazyFile, but it was not. Lazy loading only works in web workers. Use --embed-file or --preload-file in emcc on the main thread.")}else if(read_){try{obj.contents=intArrayFromString(read_(obj.url),true);obj.usedBytes=obj.contents.length}catch(e){throw new FS.ErrnoError(29)}}else{throw new Error("Cannot load without read() or XMLHttpRequest.")}},createLazyFile:(parent,name,url,canRead,canWrite)=>{function LazyUint8Array(){this.lengthKnown=false;this.chunks=[]}LazyUint8Array.prototype.get=function LazyUint8Array_get(idx){if(idx>this.length-1||idx<0){return undefined}var chunkOffset=idx%this.chunkSize;var chunkNum=idx/this.chunkSize|0;return this.getter(chunkNum)[chunkOffset]};LazyUint8Array.prototype.setDataGetter=function LazyUint8Array_setDataGetter(getter){this.getter=getter};LazyUint8Array.prototype.cacheLength=function LazyUint8Array_cacheLength(){var xhr=new XMLHttpRequest;xhr.open("HEAD",url,false);xhr.send(null);if(!(xhr.status>=200&&xhr.status<300||xhr.status===304))throw new Error("Couldn't load "+url+". Status: "+xhr.status);var datalength=Number(xhr.getResponseHeader("Content-length"));var header;var hasByteServing=(header=xhr.getResponseHeader("Accept-Ranges"))&&header==="bytes";var usesGzip=(header=xhr.getResponseHeader("Content-Encoding"))&&header==="gzip";var chunkSize=1024*1024;if(!hasByteServing)chunkSize=datalength;var doXHR=(from,to)=>{if(from>to)throw new Error("invalid range ("+from+", "+to+") or no bytes requested!");if(to>datalength-1)throw new Error("only "+datalength+" bytes available! programmer error!");var xhr=new XMLHttpRequest;xhr.open("GET",url,false);if(datalength!==chunkSize)xhr.setRequestHeader("Range","bytes="+from+"-"+to);xhr.responseType="arraybuffer";if(xhr.overrideMimeType){xhr.overrideMimeType("text/plain; charset=x-user-defined")}xhr.send(null);if(!(xhr.status>=200&&xhr.status<300||xhr.status===304))throw new Error("Couldn't load "+url+". Status: "+xhr.status);if(xhr.response!==undefined){return new Uint8Array(xhr.response||[])}return intArrayFromString(xhr.responseText||"",true)};var lazyArray=this;lazyArray.setDataGetter(chunkNum=>{var start=chunkNum*chunkSize;var end=(chunkNum+1)*chunkSize-1;end=Math.min(end,datalength-1);if(typeof lazyArray.chunks[chunkNum]=="undefined"){lazyArray.chunks[chunkNum]=doXHR(start,end)}if(typeof lazyArray.chunks[chunkNum]=="undefined")throw new Error("doXHR failed!");return lazyArray.chunks[chunkNum]});if(usesGzip||!datalength){chunkSize=datalength=1;datalength=this.getter(0).length;chunkSize=datalength;out("LazyFiles on gzip forces download of the whole file when length is accessed")}this._length=datalength;this._chunkSize=chunkSize;this.lengthKnown=true};if(typeof XMLHttpRequest!="undefined"){if(!ENVIRONMENT_IS_WORKER)throw"Cannot do synchronous binary XHRs outside webworkers in modern browsers. Use --embed-file or --preload-file in emcc";var lazyArray=new LazyUint8Array;Object.defineProperties(lazyArray,{length:{get:function(){if(!this.lengthKnown){this.cacheLength()}return this._length}},chunkSize:{get:function(){if(!this.lengthKnown){this.cacheLength()}return this._chunkSize}}});var properties={isDevice:false,contents:lazyArray}}else{var properties={isDevice:false,url:url}}var node=FS.createFile(parent,name,properties,canRead,canWrite);if(properties.contents){node.contents=properties.contents}else if(properties.url){node.contents=null;node.url=properties.url}Object.defineProperties(node,{usedBytes:{get:function(){return this.contents.length}}});var stream_ops={};var keys=Object.keys(node.stream_ops);keys.forEach(key=>{var fn=node.stream_ops[key];stream_ops[key]=function forceLoadLazyFile(){FS.forceLoadFile(node);return fn.apply(null,arguments)}});function writeChunks(stream,buffer,offset,length,position){var contents=stream.node.contents;if(position>=contents.length)return 0;var size=Math.min(contents.length-position,length);if(contents.slice){for(var i=0;i<size;i++){buffer[offset+i]=contents[position+i]}}else{for(var i=0;i<size;i++){buffer[offset+i]=contents.get(position+i)}}return size}stream_ops.read=(stream,buffer,offset,length,position)=>{FS.forceLoadFile(node);return writeChunks(stream,buffer,offset,length,position)};stream_ops.mmap=(stream,length,position,prot,flags)=>{FS.forceLoadFile(node);var ptr=mmapAlloc(length);if(!ptr){throw new FS.ErrnoError(48)}writeChunks(stream,HEAP8,ptr,length,position);return{ptr:ptr,allocated:true}};node.stream_ops=stream_ops;return node}};var SYSCALLS={DEFAULT_POLLMASK:5,calculateAt:function(dirfd,path,allowEmpty){if(PATH.isAbs(path)){return path}var dir;if(dirfd===-100){dir=FS.cwd()}else{var dirstream=SYSCALLS.getStreamFromFD(dirfd);dir=dirstream.path}if(path.length==0){if(!allowEmpty){throw new FS.ErrnoError(44)}return dir}return PATH.join2(dir,path)},doStat:function(func,path,buf){try{var stat=func(path)}catch(e){if(e&&e.node&&PATH.normalize(path)!==PATH.normalize(FS.getPath(e.node))){return-54}throw e}HEAP32[buf>>2]=stat.dev;HEAP32[buf+8>>2]=stat.ino;HEAP32[buf+12>>2]=stat.mode;HEAPU32[buf+16>>2]=stat.nlink;HEAP32[buf+20>>2]=stat.uid;HEAP32[buf+24>>2]=stat.gid;HEAP32[buf+28>>2]=stat.rdev;HEAP64[buf+40>>3]=BigInt(stat.size);HEAP32[buf+48>>2]=4096;HEAP32[buf+52>>2]=stat.blocks;var atime=stat.atime.getTime();var mtime=stat.mtime.getTime();var ctime=stat.ctime.getTime();HEAP64[buf+56>>3]=BigInt(Math.floor(atime/1e3));HEAPU32[buf+64>>2]=atime%1e3*1e3;HEAP64[buf+72>>3]=BigInt(Math.floor(mtime/1e3));HEAPU32[buf+80>>2]=mtime%1e3*1e3;HEAP64[buf+88>>3]=BigInt(Math.floor(ctime/1e3));HEAPU32[buf+96>>2]=ctime%1e3*1e3;HEAP64[buf+104>>3]=BigInt(stat.ino);return 0},doMsync:function(addr,stream,len,flags,offset){if(!FS.isFile(stream.node.mode)){throw new FS.ErrnoError(43)}if(flags&2){return 0}var buffer=HEAPU8.slice(addr,addr+len);FS.msync(stream,buffer,offset,len,flags)},varargs:undefined,get:function(){SYSCALLS.varargs+=4;var ret=HEAP32[SYSCALLS.varargs-4>>2];return ret},getStr:function(ptr){var ret=UTF8ToString(ptr);return ret},getStreamFromFD:function(fd){var stream=FS.getStream(fd);if(!stream)throw new FS.ErrnoError(8);return stream}};function ___syscall__newselect(nfds,readfds,writefds,exceptfds,timeout){try{var total=0;var srcReadLow=readfds?HEAP32[readfds>>2]:0,srcReadHigh=readfds?HEAP32[readfds+4>>2]:0;var srcWriteLow=writefds?HEAP32[writefds>>2]:0,srcWriteHigh=writefds?HEAP32[writefds+4>>2]:0;var srcExceptLow=exceptfds?HEAP32[exceptfds>>2]:0,srcExceptHigh=exceptfds?HEAP32[exceptfds+4>>2]:0;var dstReadLow=0,dstReadHigh=0;var dstWriteLow=0,dstWriteHigh=0;var dstExceptLow=0,dstExceptHigh=0;var allLow=(readfds?HEAP32[readfds>>2]:0)|(writefds?HEAP32[writefds>>2]:0)|(exceptfds?HEAP32[exceptfds>>2]:0);var allHigh=(readfds?HEAP32[readfds+4>>2]:0)|(writefds?HEAP32[writefds+4>>2]:0)|(exceptfds?HEAP32[exceptfds+4>>2]:0);var check=function(fd,low,high,val){return fd<32?low&val:high&val};for(var fd=0;fd<nfds;fd++){var mask=1<<fd%32;if(!check(fd,allLow,allHigh,mask)){continue}var stream=SYSCALLS.getStreamFromFD(fd);var flags=SYSCALLS.DEFAULT_POLLMASK;if(stream.stream_ops.poll){flags=stream.stream_ops.poll(stream)}if(flags&1&&check(fd,srcReadLow,srcReadHigh,mask)){fd<32?dstReadLow=dstReadLow|mask:dstReadHigh=dstReadHigh|mask;total++}if(flags&4&&check(fd,srcWriteLow,srcWriteHigh,mask)){fd<32?dstWriteLow=dstWriteLow|mask:dstWriteHigh=dstWriteHigh|mask;total++}if(flags&2&&check(fd,srcExceptLow,srcExceptHigh,mask)){fd<32?dstExceptLow=dstExceptLow|mask:dstExceptHigh=dstExceptHigh|mask;total++}}if(readfds){HEAP32[readfds>>2]=dstReadLow;HEAP32[readfds+4>>2]=dstReadHigh}if(writefds){HEAP32[writefds>>2]=dstWriteLow;HEAP32[writefds+4>>2]=dstWriteHigh}if(exceptfds){HEAP32[exceptfds>>2]=dstExceptLow;HEAP32[exceptfds+4>>2]=dstExceptHigh}return total}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}var SOCKFS={mount:function(mount){Module["websocket"]=Module["websocket"]&&"object"===typeof Module["websocket"]?Module["websocket"]:{};Module["websocket"]._callbacks={};Module["websocket"]["on"]=function(event,callback){if("function"===typeof callback){this._callbacks[event]=callback}return this};Module["websocket"].emit=function(event,param){if("function"===typeof this._callbacks[event]){this._callbacks[event].call(this,param)}};return FS.createNode(null,"/",16384|511,0)},createSocket:function(family,type,protocol){type&=~526336;var streaming=type==1;if(streaming&&protocol&&protocol!=6){throw new FS.ErrnoError(66)}var sock={family:family,type:type,protocol:protocol,server:null,error:null,peers:{},pending:[],recv_queue:[],sock_ops:SOCKFS.websocket_sock_ops};var name=SOCKFS.nextname();var node=FS.createNode(SOCKFS.root,name,49152,0);node.sock=sock;var stream=FS.createStream({path:name,node:node,flags:2,seekable:false,stream_ops:SOCKFS.stream_ops});sock.stream=stream;return sock},getSocket:function(fd){var stream=FS.getStream(fd);if(!stream||!FS.isSocket(stream.node.mode)){return null}return stream.node.sock},stream_ops:{poll:function(stream){var sock=stream.node.sock;return sock.sock_ops.poll(sock)},ioctl:function(stream,request,varargs){var sock=stream.node.sock;return sock.sock_ops.ioctl(sock,request,varargs)},read:function(stream,buffer,offset,length,position){var sock=stream.node.sock;var msg=sock.sock_ops.recvmsg(sock,length);if(!msg){return 0}buffer.set(msg.buffer,offset);return msg.buffer.length},write:function(stream,buffer,offset,length,position){var sock=stream.node.sock;return sock.sock_ops.sendmsg(sock,buffer,offset,length)},close:function(stream){var sock=stream.node.sock;sock.sock_ops.close(sock)}},nextname:function(){if(!SOCKFS.nextname.current){SOCKFS.nextname.current=0}return"socket["+SOCKFS.nextname.current+++"]"},websocket_sock_ops:{createPeer:function(sock,addr,port){var ws;if(typeof addr=="object"){ws=addr;addr=null;port=null}if(ws){if(ws._socket){addr=ws._socket.remoteAddress;port=ws._socket.remotePort}else{var result=/ws[s]?:\/\/([^:]+):(\d+)/.exec(ws.url);if(!result){throw new Error("WebSocket URL must be in the format ws(s)://address:port")}addr=result[1];port=parseInt(result[2],10)}}else{try{var runtimeConfig=Module["websocket"]&&"object"===typeof Module["websocket"];var url="ws:#".replace("#","//");if(runtimeConfig){if("string"===typeof Module["websocket"]["url"]){url=Module["websocket"]["url"]}}if(url==="ws://"||url==="wss://"){var parts=addr.split("/");url=url+parts[0]+":"+port+"/"+parts.slice(1).join("/")}var subProtocols="binary";if(runtimeConfig){if("string"===typeof Module["websocket"]["subprotocol"]){subProtocols=Module["websocket"]["subprotocol"]}}var opts=undefined;if(subProtocols!=="null"){subProtocols=subProtocols.replace(/^ +| +$/g,"").split(/ *, */);opts=subProtocols}if(runtimeConfig&&null===Module["websocket"]["subprotocol"]){subProtocols="null";opts=undefined}var WebSocketConstructor;{WebSocketConstructor=WebSocket}ws=new WebSocketConstructor(url,opts);ws.binaryType="arraybuffer"}catch(e){throw new FS.ErrnoError(23)}}var peer={addr:addr,port:port,socket:ws,dgram_send_queue:[]};SOCKFS.websocket_sock_ops.addPeer(sock,peer);SOCKFS.websocket_sock_ops.handlePeerEvents(sock,peer);if(sock.type===2&&typeof sock.sport!="undefined"){peer.dgram_send_queue.push(new Uint8Array([255,255,255,255,"p".charCodeAt(0),"o".charCodeAt(0),"r".charCodeAt(0),"t".charCodeAt(0),(sock.sport&65280)>>8,sock.sport&255]))}return peer},getPeer:function(sock,addr,port){return sock.peers[addr+":"+port]},addPeer:function(sock,peer){sock.peers[peer.addr+":"+peer.port]=peer},removePeer:function(sock,peer){delete sock.peers[peer.addr+":"+peer.port]},handlePeerEvents:function(sock,peer){var first=true;var handleOpen=function(){Module["websocket"].emit("open",sock.stream.fd);try{var queued=peer.dgram_send_queue.shift();while(queued){peer.socket.send(queued);queued=peer.dgram_send_queue.shift()}}catch(e){peer.socket.close()}};function handleMessage(data){if(typeof data=="string"){var encoder=new TextEncoder;data=encoder.encode(data)}else{assert(data.byteLength!==undefined);if(data.byteLength==0){return}data=new Uint8Array(data)}var wasfirst=first;first=false;if(wasfirst&&data.length===10&&data[0]===255&&data[1]===255&&data[2]===255&&data[3]===255&&data[4]==="p".charCodeAt(0)&&data[5]==="o".charCodeAt(0)&&data[6]==="r".charCodeAt(0)&&data[7]==="t".charCodeAt(0)){var newport=data[8]<<8|data[9];SOCKFS.websocket_sock_ops.removePeer(sock,peer);peer.port=newport;SOCKFS.websocket_sock_ops.addPeer(sock,peer);return}sock.recv_queue.push({addr:peer.addr,port:peer.port,data:data});Module["websocket"].emit("message",sock.stream.fd)}if(ENVIRONMENT_IS_NODE){peer.socket.on("open",handleOpen);peer.socket.on("message",function(data,isBinary){if(!isBinary){return}handleMessage(new Uint8Array(data).buffer)});peer.socket.on("close",function(){Module["websocket"].emit("close",sock.stream.fd)});peer.socket.on("error",function(error){sock.error=14;Module["websocket"].emit("error",[sock.stream.fd,sock.error,"ECONNREFUSED: Connection refused"])})}else{peer.socket.onopen=handleOpen;peer.socket.onclose=function(){Module["websocket"].emit("close",sock.stream.fd)};peer.socket.onmessage=function peer_socket_onmessage(event){handleMessage(event.data)};peer.socket.onerror=function(error){sock.error=14;Module["websocket"].emit("error",[sock.stream.fd,sock.error,"ECONNREFUSED: Connection refused"])}}},poll:function(sock){if(sock.type===1&&sock.server){return sock.pending.length?64|1:0}var mask=0;var dest=sock.type===1?SOCKFS.websocket_sock_ops.getPeer(sock,sock.daddr,sock.dport):null;if(sock.recv_queue.length||!dest||dest&&dest.socket.readyState===dest.socket.CLOSING||dest&&dest.socket.readyState===dest.socket.CLOSED){mask|=64|1}if(!dest||dest&&dest.socket.readyState===dest.socket.OPEN){mask|=4}if(dest&&dest.socket.readyState===dest.socket.CLOSING||dest&&dest.socket.readyState===dest.socket.CLOSED){mask|=16}return mask},ioctl:function(sock,request,arg){switch(request){case 21531:var bytes=0;if(sock.recv_queue.length){bytes=sock.recv_queue[0].data.length}HEAP32[arg>>2]=bytes;return 0;default:return 28}},close:function(sock){if(sock.server){try{sock.server.close()}catch(e){}sock.server=null}var peers=Object.keys(sock.peers);for(var i=0;i<peers.length;i++){var peer=sock.peers[peers[i]];try{peer.socket.close()}catch(e){}SOCKFS.websocket_sock_ops.removePeer(sock,peer)}return 0},bind:function(sock,addr,port){if(typeof sock.saddr!="undefined"||typeof sock.sport!="undefined"){throw new FS.ErrnoError(28)}sock.saddr=addr;sock.sport=port;if(sock.type===2){if(sock.server){sock.server.close();sock.server=null}try{sock.sock_ops.listen(sock,0)}catch(e){if(!(e.name==="ErrnoError"))throw e;if(e.errno!==138)throw e}}},connect:function(sock,addr,port){if(sock.server){throw new FS.ErrnoError(138)}if(typeof sock.daddr!="undefined"&&typeof sock.dport!="undefined"){var dest=SOCKFS.websocket_sock_ops.getPeer(sock,sock.daddr,sock.dport);if(dest){if(dest.socket.readyState===dest.socket.CONNECTING){throw new FS.ErrnoError(7)}else{throw new FS.ErrnoError(30)}}}var peer=SOCKFS.websocket_sock_ops.createPeer(sock,addr,port);sock.daddr=peer.addr;sock.dport=peer.port;throw new FS.ErrnoError(26)},listen:function(sock,backlog){if(!ENVIRONMENT_IS_NODE){throw new FS.ErrnoError(138)}},accept:function(listensock){if(!listensock.server||!listensock.pending.length){throw new FS.ErrnoError(28)}var newsock=listensock.pending.shift();newsock.stream.flags=listensock.stream.flags;return newsock},getname:function(sock,peer){var addr,port;if(peer){if(sock.daddr===undefined||sock.dport===undefined){throw new FS.ErrnoError(53)}addr=sock.daddr;port=sock.dport}else{addr=sock.saddr||0;port=sock.sport||0}return{addr:addr,port:port}},sendmsg:function(sock,buffer,offset,length,addr,port){if(sock.type===2){if(addr===undefined||port===undefined){addr=sock.daddr;port=sock.dport}if(addr===undefined||port===undefined){throw new FS.ErrnoError(17)}}else{addr=sock.daddr;port=sock.dport}var dest=SOCKFS.websocket_sock_ops.getPeer(sock,addr,port);if(sock.type===1){if(!dest||dest.socket.readyState===dest.socket.CLOSING||dest.socket.readyState===dest.socket.CLOSED){throw new FS.ErrnoError(53)}else if(dest.socket.readyState===dest.socket.CONNECTING){throw new FS.ErrnoError(6)}}if(ArrayBuffer.isView(buffer)){offset+=buffer.byteOffset;buffer=buffer.buffer}var data;data=buffer.slice(offset,offset+length);if(sock.type===2){if(!dest||dest.socket.readyState!==dest.socket.OPEN){if(!dest||dest.socket.readyState===dest.socket.CLOSING||dest.socket.readyState===dest.socket.CLOSED){dest=SOCKFS.websocket_sock_ops.createPeer(sock,addr,port)}dest.dgram_send_queue.push(data);return length}}try{dest.socket.send(data);return length}catch(e){throw new FS.ErrnoError(28)}},recvmsg:function(sock,length){if(sock.type===1&&sock.server){throw new FS.ErrnoError(53)}var queued=sock.recv_queue.shift();if(!queued){if(sock.type===1){var dest=SOCKFS.websocket_sock_ops.getPeer(sock,sock.daddr,sock.dport);if(!dest){throw new FS.ErrnoError(53)}if(dest.socket.readyState===dest.socket.CLOSING||dest.socket.readyState===dest.socket.CLOSED){return null}throw new FS.ErrnoError(6)}throw new FS.ErrnoError(6)}var queuedLength=queued.data.byteLength||queued.data.length;var queuedOffset=queued.data.byteOffset||0;var queuedBuffer=queued.data.buffer||queued.data;var bytesRead=Math.min(length,queuedLength);var res={buffer:new Uint8Array(queuedBuffer,queuedOffset,bytesRead),addr:queued.addr,port:queued.port};if(sock.type===1&&bytesRead<queuedLength){var bytesRemaining=queuedLength-bytesRead;queued.data=new Uint8Array(queuedBuffer,queuedOffset+bytesRead,bytesRemaining);sock.recv_queue.unshift(queued)}return res}}};function getSocketFromFD(fd){var socket=SOCKFS.getSocket(fd);if(!socket)throw new FS.ErrnoError(8);return socket}function setErrNo(value){HEAP32[___errno_location()>>2]=value;return value}function inetPton4(str){var b=str.split(".");for(var i=0;i<4;i++){var tmp=Number(b[i]);if(isNaN(tmp))return null;b[i]=tmp}return(b[0]|b[1]<<8|b[2]<<16|b[3]<<24)>>>0}function jstoi_q(str){return parseInt(str)}function inetPton6(str){var words;var w,offset,z;var valid6regx=/^((?=.*::)(?!.*::.+::)(::)?([\dA-F]{1,4}:(:|\b)|){5}|([\dA-F]{1,4}:){6})((([\dA-F]{1,4}((?!\3)::|:\b|$))|(?!\2\3)){2}|(((2[0-4]|1\d|[1-9])?\d|25[0-5])\.?\b){4})$/i;var parts=[];if(!valid6regx.test(str)){return null}if(str==="::"){return[0,0,0,0,0,0,0,0]}if(str.startsWith("::")){str=str.replace("::","Z:")}else{str=str.replace("::",":Z:")}if(str.indexOf(".")>0){str=str.replace(new RegExp("[.]","g"),":");words=str.split(":");words[words.length-4]=jstoi_q(words[words.length-4])+jstoi_q(words[words.length-3])*256;words[words.length-3]=jstoi_q(words[words.length-2])+jstoi_q(words[words.length-1])*256;words=words.slice(0,words.length-2)}else{words=str.split(":")}offset=0;z=0;for(w=0;w<words.length;w++){if(typeof words[w]=="string"){if(words[w]==="Z"){for(z=0;z<8-words.length+1;z++){parts[w+z]=0}offset=z-1}else{parts[w+offset]=_htons(parseInt(words[w],16))}}else{parts[w+offset]=words[w]}}return[parts[1]<<16|parts[0],parts[3]<<16|parts[2],parts[5]<<16|parts[4],parts[7]<<16|parts[6]]}function writeSockaddr(sa,family,addr,port,addrlen){switch(family){case 2:addr=inetPton4(addr);zeroMemory(sa,16);if(addrlen){HEAP32[addrlen>>2]=16}HEAP16[sa>>1]=family;HEAP32[sa+4>>2]=addr;HEAP16[sa+2>>1]=_htons(port);break;case 10:addr=inetPton6(addr);zeroMemory(sa,28);if(addrlen){HEAP32[addrlen>>2]=28}HEAP32[sa>>2]=family;HEAP32[sa+8>>2]=addr[0];HEAP32[sa+12>>2]=addr[1];HEAP32[sa+16>>2]=addr[2];HEAP32[sa+20>>2]=addr[3];HEAP16[sa+2>>1]=_htons(port);break;default:return 5}return 0}var DNS={address_map:{id:1,addrs:{},names:{}},lookup_name:function(name){var res=inetPton4(name);if(res!==null){return name}res=inetPton6(name);if(res!==null){return name}var addr;if(DNS.address_map.addrs[name]){addr=DNS.address_map.addrs[name]}else{var id=DNS.address_map.id++;assert(id<65535,"exceeded max address mappings of 65535");addr="172.29."+(id&255)+"."+(id&65280);DNS.address_map.names[addr]=name;DNS.address_map.addrs[name]=addr}return addr},lookup_addr:function(addr){if(DNS.address_map.names[addr]){return DNS.address_map.names[addr]}return null}};function ___syscall_accept4(fd,addr,addrlen,flags,d1,d2){try{var sock=getSocketFromFD(fd);var newsock=sock.sock_ops.accept(sock);if(addr){var errno=writeSockaddr(addr,newsock.family,DNS.lookup_name(newsock.daddr),newsock.dport,addrlen)}return newsock.stream.fd}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function inetNtop4(addr){return(addr&255)+"."+(addr>>8&255)+"."+(addr>>16&255)+"."+(addr>>24&255)}function inetNtop6(ints){var str="";var word=0;var longest=0;var lastzero=0;var zstart=0;var len=0;var i=0;var parts=[ints[0]&65535,ints[0]>>16,ints[1]&65535,ints[1]>>16,ints[2]&65535,ints[2]>>16,ints[3]&65535,ints[3]>>16];var hasipv4=true;var v4part="";for(i=0;i<5;i++){if(parts[i]!==0){hasipv4=false;break}}if(hasipv4){v4part=inetNtop4(parts[6]|parts[7]<<16);if(parts[5]===-1){str="::ffff:";str+=v4part;return str}if(parts[5]===0){str="::";if(v4part==="0.0.0.0")v4part="";if(v4part==="0.0.0.1")v4part="1";str+=v4part;return str}}for(word=0;word<8;word++){if(parts[word]===0){if(word-lastzero>1){len=0}lastzero=word;len++}if(len>longest){longest=len;zstart=word-longest+1}}for(word=0;word<8;word++){if(longest>1){if(parts[word]===0&&word>=zstart&&word<zstart+longest){if(word===zstart){str+=":";if(zstart===0)str+=":"}continue}}str+=Number(_ntohs(parts[word]&65535)).toString(16);str+=word<7?":":""}return str}function readSockaddr(sa,salen){var family=HEAP16[sa>>1];var port=_ntohs(HEAPU16[sa+2>>1]);var addr;switch(family){case 2:if(salen!==16){return{errno:28}}addr=HEAP32[sa+4>>2];addr=inetNtop4(addr);break;case 10:if(salen!==28){return{errno:28}}addr=[HEAP32[sa+8>>2],HEAP32[sa+12>>2],HEAP32[sa+16>>2],HEAP32[sa+20>>2]];addr=inetNtop6(addr);break;default:return{errno:5}}return{family:family,addr:addr,port:port}}function getSocketAddress(addrp,addrlen,allowNull){if(allowNull&&addrp===0)return null;var info=readSockaddr(addrp,addrlen);if(info.errno)throw new FS.ErrnoError(info.errno);info.addr=DNS.lookup_addr(info.addr)||info.addr;return info}function ___syscall_bind(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);var info=getSocketAddress(addr,addrlen);sock.sock_ops.bind(sock,info.addr,info.port);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_connect(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);var info=getSocketAddress(addr,addrlen);sock.sock_ops.connect(sock,info.addr,info.port);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_faccessat(dirfd,path,amode,flags){try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);if(amode&~7){return-28}var lookup=FS.lookupPath(path,{follow:true});var node=lookup.node;if(!node){return-44}var perms="";if(amode&4)perms+="r";if(amode&2)perms+="w";if(amode&1)perms+="x";if(perms&&FS.nodePermissions(node,perms)){return-2}return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_fcntl64(fd,cmd,varargs){SYSCALLS.varargs=varargs;try{var stream=SYSCALLS.getStreamFromFD(fd);switch(cmd){case 0:{var arg=SYSCALLS.get();if(arg<0){return-28}var newStream;newStream=FS.createStream(stream,arg);return newStream.fd}case 1:case 2:return 0;case 3:return stream.flags;case 4:{var arg=SYSCALLS.get();stream.flags|=arg;return 0}case 5:{var arg=SYSCALLS.get();var offset=0;HEAP16[arg+offset>>1]=2;return 0}case 6:case 7:return 0;case 16:case 8:return-28;case 9:setErrNo(28);return-1;default:{return-28}}}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_fstat64(fd,buf){try{var stream=SYSCALLS.getStreamFromFD(fd);return SYSCALLS.doStat(FS.stat,stream.path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function stringToUTF8(str,outPtr,maxBytesToWrite){return stringToUTF8Array(str,HEAPU8,outPtr,maxBytesToWrite)}function ___syscall_getdents64(fd,dirp,count){try{var stream=SYSCALLS.getStreamFromFD(fd);if(!stream.getdents){stream.getdents=FS.readdir(stream.path)}var struct_size=280;var pos=0;var off=FS.llseek(stream,0,1);var idx=Math.floor(off/struct_size);while(idx<stream.getdents.length&&pos+struct_size<=count){var id;var type;var name=stream.getdents[idx];if(name==="."){id=stream.node.id;type=4}else if(name===".."){var lookup=FS.lookupPath(stream.path,{parent:true});id=lookup.node.id;type=4}else{var child=FS.lookupNode(stream.node,name);id=child.id;type=FS.isChrdev(child.mode)?2:FS.isDir(child.mode)?4:FS.isLink(child.mode)?10:8}HEAP64[dirp+pos>>3]=BigInt(id);HEAP64[dirp+pos+8>>3]=BigInt((idx+1)*struct_size);HEAP16[dirp+pos+16>>1]=280;HEAP8[dirp+pos+18>>0]=type;stringToUTF8(name,dirp+pos+19,256);pos+=struct_size;idx+=1}FS.llseek(stream,idx*struct_size,0);return pos}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_getpeername(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);if(!sock.daddr){return-53}var errno=writeSockaddr(addr,sock.family,DNS.lookup_name(sock.daddr),sock.dport,addrlen);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_getsockname(fd,addr,addrlen,d1,d2,d3){try{var sock=getSocketFromFD(fd);var errno=writeSockaddr(addr,sock.family,DNS.lookup_name(sock.saddr||"0.0.0.0"),sock.sport,addrlen);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_getsockopt(fd,level,optname,optval,optlen,d1){try{var sock=getSocketFromFD(fd);if(level===1){if(optname===4){HEAP32[optval>>2]=sock.error;HEAP32[optlen>>2]=4;sock.error=null;return 0}}return-50}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_ioctl(fd,op,varargs){SYSCALLS.varargs=varargs;try{var stream=SYSCALLS.getStreamFromFD(fd);switch(op){case 21509:case 21505:{if(!stream.tty)return-59;return 0}case 21510:case 21511:case 21512:case 21506:case 21507:case 21508:{if(!stream.tty)return-59;return 0}case 21519:{if(!stream.tty)return-59;var argp=SYSCALLS.get();HEAP32[argp>>2]=0;return 0}case 21520:{if(!stream.tty)return-59;return-28}case 21531:{var argp=SYSCALLS.get();return FS.ioctl(stream,op,argp)}case 21523:{if(!stream.tty)return-59;return 0}case 21524:{if(!stream.tty)return-59;return 0}default:return-28}}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_listen(fd,backlog){try{var sock=getSocketFromFD(fd);sock.sock_ops.listen(sock,backlog);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_lstat64(path,buf){try{path=SYSCALLS.getStr(path);return SYSCALLS.doStat(FS.lstat,path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_mkdirat(dirfd,path,mode){try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);path=PATH.normalize(path);if(path[path.length-1]==="/")path=path.substr(0,path.length-1);FS.mkdir(path,mode,0);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_newfstatat(dirfd,path,buf,flags){try{path=SYSCALLS.getStr(path);var nofollow=flags&256;var allowEmpty=flags&4096;flags=flags&~6400;path=SYSCALLS.calculateAt(dirfd,path,allowEmpty);return SYSCALLS.doStat(nofollow?FS.lstat:FS.stat,path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_openat(dirfd,path,flags,varargs){SYSCALLS.varargs=varargs;try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);var mode=varargs?SYSCALLS.get():0;return FS.open(path,flags,mode).fd}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_poll(fds,nfds,timeout){try{var nonzero=0;for(var i=0;i<nfds;i++){var pollfd=fds+8*i;var fd=HEAP32[pollfd>>2];var events=HEAP16[pollfd+4>>1];var mask=32;var stream=FS.getStream(fd);if(stream){mask=SYSCALLS.DEFAULT_POLLMASK;if(stream.stream_ops.poll){mask=stream.stream_ops.poll(stream)}}mask&=events|8|16;if(mask)nonzero++;HEAP16[pollfd+6>>1]=mask}return nonzero}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_recvfrom(fd,buf,len,flags,addr,addrlen){try{var sock=getSocketFromFD(fd);var msg=sock.sock_ops.recvmsg(sock,len);if(!msg)return 0;if(addr){var errno=writeSockaddr(addr,sock.family,DNS.lookup_name(msg.addr),msg.port,addrlen)}HEAPU8.set(msg.buffer,buf);return msg.buffer.byteLength}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_renameat(olddirfd,oldpath,newdirfd,newpath){try{oldpath=SYSCALLS.getStr(oldpath);newpath=SYSCALLS.getStr(newpath);oldpath=SYSCALLS.calculateAt(olddirfd,oldpath);newpath=SYSCALLS.calculateAt(newdirfd,newpath);FS.rename(oldpath,newpath);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_rmdir(path){try{path=SYSCALLS.getStr(path);FS.rmdir(path);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_sendto(fd,message,length,flags,addr,addr_len){try{var sock=getSocketFromFD(fd);var dest=getSocketAddress(addr,addr_len,true);if(!dest){return FS.write(sock.stream,HEAP8,message,length)}return sock.sock_ops.sendmsg(sock,HEAP8,message,length,dest.addr,dest.port)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_socket(domain,type,protocol){try{var sock=SOCKFS.createSocket(domain,type,protocol);return sock.stream.fd}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_stat64(path,buf){try{path=SYSCALLS.getStr(path);return SYSCALLS.doStat(FS.stat,path,buf)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function ___syscall_unlinkat(dirfd,path,flags){try{path=SYSCALLS.getStr(path);path=SYSCALLS.calculateAt(dirfd,path);if(flags===0){FS.unlink(path)}else if(flags===512){FS.rmdir(path)}else{abort("Invalid flags passed to unlinkat")}return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}var nowIsMonotonic=true;function __emscripten_get_now_is_monotonic(){return nowIsMonotonic}function __emscripten_throw_longjmp(){throw Infinity}function readI53FromI64(ptr){return HEAPU32[ptr>>2]+HEAP32[ptr+4>>2]*4294967296}function __gmtime_js(time,tmPtr){var date=new Date(readI53FromI64(time)*1e3);HEAP32[tmPtr>>2]=date.getUTCSeconds();HEAP32[tmPtr+4>>2]=date.getUTCMinutes();HEAP32[tmPtr+8>>2]=date.getUTCHours();HEAP32[tmPtr+12>>2]=date.getUTCDate();HEAP32[tmPtr+16>>2]=date.getUTCMonth();HEAP32[tmPtr+20>>2]=date.getUTCFullYear()-1900;HEAP32[tmPtr+24>>2]=date.getUTCDay();var start=Date.UTC(date.getUTCFullYear(),0,1,0,0,0,0);var yday=(date.getTime()-start)/(1e3*60*60*24)|0;HEAP32[tmPtr+28>>2]=yday}function isLeapYear(year){return year%4===0&&(year%100!==0||year%400===0)}var MONTH_DAYS_LEAP_CUMULATIVE=[0,31,60,91,121,152,182,213,244,274,305,335];var MONTH_DAYS_REGULAR_CUMULATIVE=[0,31,59,90,120,151,181,212,243,273,304,334];function ydayFromDate(date){var leap=isLeapYear(date.getFullYear());var monthDaysCumulative=leap?MONTH_DAYS_LEAP_CUMULATIVE:MONTH_DAYS_REGULAR_CUMULATIVE;var yday=monthDaysCumulative[date.getMonth()]+date.getDate()-1;return yday}function __localtime_js(time,tmPtr){var date=new Date(readI53FromI64(time)*1e3);HEAP32[tmPtr>>2]=date.getSeconds();HEAP32[tmPtr+4>>2]=date.getMinutes();HEAP32[tmPtr+8>>2]=date.getHours();HEAP32[tmPtr+12>>2]=date.getDate();HEAP32[tmPtr+16>>2]=date.getMonth();HEAP32[tmPtr+20>>2]=date.getFullYear()-1900;HEAP32[tmPtr+24>>2]=date.getDay();var yday=ydayFromDate(date)|0;HEAP32[tmPtr+28>>2]=yday;HEAP32[tmPtr+36>>2]=-(date.getTimezoneOffset()*60);var start=new Date(date.getFullYear(),0,1);var summerOffset=new Date(date.getFullYear(),6,1).getTimezoneOffset();var winterOffset=start.getTimezoneOffset();var dst=(summerOffset!=winterOffset&&date.getTimezoneOffset()==Math.min(winterOffset,summerOffset))|0;HEAP32[tmPtr+32>>2]=dst}function __mktime_js(tmPtr){var date=new Date(HEAP32[tmPtr+20>>2]+1900,HEAP32[tmPtr+16>>2],HEAP32[tmPtr+12>>2],HEAP32[tmPtr+8>>2],HEAP32[tmPtr+4>>2],HEAP32[tmPtr>>2],0);var dst=HEAP32[tmPtr+32>>2];var guessedOffset=date.getTimezoneOffset();var start=new Date(date.getFullYear(),0,1);var summerOffset=new Date(date.getFullYear(),6,1).getTimezoneOffset();var winterOffset=start.getTimezoneOffset();var dstOffset=Math.min(winterOffset,summerOffset);if(dst<0){HEAP32[tmPtr+32>>2]=Number(summerOffset!=winterOffset&&dstOffset==guessedOffset)}else if(dst>0!=(dstOffset==guessedOffset)){var nonDstOffset=Math.max(winterOffset,summerOffset);var trueOffset=dst>0?dstOffset:nonDstOffset;date.setTime(date.getTime()+(trueOffset-guessedOffset)*6e4)}HEAP32[tmPtr+24>>2]=date.getDay();var yday=ydayFromDate(date)|0;HEAP32[tmPtr+28>>2]=yday;HEAP32[tmPtr>>2]=date.getSeconds();HEAP32[tmPtr+4>>2]=date.getMinutes();HEAP32[tmPtr+8>>2]=date.getHours();HEAP32[tmPtr+12>>2]=date.getDate();HEAP32[tmPtr+16>>2]=date.getMonth();HEAP32[tmPtr+20>>2]=date.getYear();return date.getTime()/1e3|0}function __mmap_js(len,prot,flags,fd,off,allocated,addr){try{var stream=SYSCALLS.getStreamFromFD(fd);var res=FS.mmap(stream,len,off,prot,flags);var ptr=res.ptr;HEAP32[allocated>>2]=res.allocated;HEAPU32[addr>>2]=ptr;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function __munmap_js(addr,len,prot,flags,fd,offset){try{var stream=SYSCALLS.getStreamFromFD(fd);if(prot&2){SYSCALLS.doMsync(addr,stream,len,flags,offset)}FS.munmap(stream)}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return-e.errno}}function stringToNewUTF8(str){var size=lengthBytesUTF8(str)+1;var ret=_malloc(size);if(ret)stringToUTF8(str,ret,size);return ret}function __tzset_js(timezone,daylight,tzname){var currentYear=(new Date).getFullYear();var winter=new Date(currentYear,0,1);var summer=new Date(currentYear,6,1);var winterOffset=winter.getTimezoneOffset();var summerOffset=summer.getTimezoneOffset();var stdTimezoneOffset=Math.max(winterOffset,summerOffset);HEAPU32[timezone>>2]=stdTimezoneOffset*60;HEAP32[daylight>>2]=Number(winterOffset!=summerOffset);function extractZone(date){var match=date.toTimeString().match(/\(([A-Za-z ]+)\)$/);return match?match[1]:"GMT"}var winterName=extractZone(winter);var summerName=extractZone(summer);var winterNamePtr=stringToNewUTF8(winterName);var summerNamePtr=stringToNewUTF8(summerName);if(summerOffset<winterOffset){HEAPU32[tzname>>2]=winterNamePtr;HEAPU32[tzname+4>>2]=summerNamePtr}else{HEAPU32[tzname>>2]=summerNamePtr;HEAPU32[tzname+4>>2]=winterNamePtr}}function _abort(){abort("")}Module["_abort"]=_abort;function _dlopen(handle){abort(dlopenMissingError)}var readEmAsmArgsArray=[];function readEmAsmArgs(sigPtr,buf){readEmAsmArgsArray.length=0;var ch;buf>>=2;while(ch=HEAPU8[sigPtr++]){buf+=ch!=105&buf;readEmAsmArgsArray.push(ch==105?HEAP32[buf]:(ch==106?HEAP64:HEAPF64)[buf++>>1]);++buf}return readEmAsmArgsArray}function runEmAsmFunction(code,sigPtr,argbuf){var args=readEmAsmArgs(sigPtr,argbuf);return ASM_CONSTS[code].apply(null,args)}function _emscripten_asm_const_int(code,sigPtr,argbuf){return runEmAsmFunction(code,sigPtr,argbuf)}function _emscripten_date_now(){return Date.now()}function getHeapMax(){return 2147483648}function _emscripten_get_heap_max(){return getHeapMax()}var _emscripten_get_now;_emscripten_get_now=()=>performance.now();function _emscripten_memcpy_big(dest,src,num){HEAPU8.copyWithin(dest,src,src+num)}function emscripten_realloc_buffer(size){var b=wasmMemory.buffer;try{wasmMemory.grow(size-b.byteLength+65535>>>16);updateMemoryViews();return 1}catch(e){}}function _emscripten_resize_heap(requestedSize){var oldSize=HEAPU8.length;requestedSize=requestedSize>>>0;var maxHeapSize=getHeapMax();if(requestedSize>maxHeapSize){return false}var alignUp=(x,multiple)=>x+(multiple-x%multiple)%multiple;for(var cutDown=1;cutDown<=4;cutDown*=2){var overGrownHeapSize=oldSize*(1+.2/cutDown);overGrownHeapSize=Math.min(overGrownHeapSize,requestedSize+100663296);var newSize=Math.min(maxHeapSize,alignUp(Math.max(requestedSize,overGrownHeapSize),65536));var replacement=emscripten_realloc_buffer(newSize);if(replacement){return true}}return false}var ENV={};function getExecutableName(){return thisProgram||"./this.program"}function getEnvStrings(){if(!getEnvStrings.strings){var lang=(typeof navigator=="object"&&navigator.languages&&navigator.languages[0]||"C").replace("-","_")+".UTF-8";var env={"USER":"web_user","LOGNAME":"web_user","PATH":"/","PWD":"/","HOME":"/home/web_user","LANG":lang,"_":getExecutableName()};for(var x in ENV){if(ENV[x]===undefined)delete env[x];else env[x]=ENV[x]}var strings=[];for(var x in env){strings.push(`${x}=${env[x]}`)}getEnvStrings.strings=strings}return getEnvStrings.strings}function stringToAscii(str,buffer){for(var i=0;i<str.length;++i){HEAP8[buffer++>>0]=str.charCodeAt(i)}HEAP8[buffer>>0]=0}function _environ_get(__environ,environ_buf){var bufSize=0;getEnvStrings().forEach(function(string,i){var ptr=environ_buf+bufSize;HEAPU32[__environ+i*4>>2]=ptr;stringToAscii(string,ptr);bufSize+=string.length+1});return 0}function _environ_sizes_get(penviron_count,penviron_buf_size){var strings=getEnvStrings();HEAPU32[penviron_count>>2]=strings.length;var bufSize=0;strings.forEach(function(string){bufSize+=string.length+1});HEAPU32[penviron_buf_size>>2]=bufSize;return 0}function _proc_exit(code){EXITSTATUS=code;if(!keepRuntimeAlive()){if(Module["onExit"])Module["onExit"](code);ABORT=true}quit_(code,new ExitStatus(code))}function exitJS(status,implicit){EXITSTATUS=status;_proc_exit(status)}var _exit=exitJS;function _fd_close(fd){try{var stream=SYSCALLS.getStreamFromFD(fd);FS.close(stream);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function _fd_fdstat_get(fd,pbuf){try{var rightsBase=0;var rightsInheriting=0;var flags=0;{var stream=SYSCALLS.getStreamFromFD(fd);var type=stream.tty?2:FS.isDir(stream.mode)?3:FS.isLink(stream.mode)?7:4}HEAP8[pbuf>>0]=type;HEAP16[pbuf+2>>1]=flags;HEAP64[pbuf+8>>3]=BigInt(rightsBase);HEAP64[pbuf+16>>3]=BigInt(rightsInheriting);return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function doReadv(stream,iov,iovcnt,offset){var ret=0;for(var i=0;i<iovcnt;i++){var ptr=HEAPU32[iov>>2];var len=HEAPU32[iov+4>>2];iov+=8;var curr=FS.read(stream,HEAP8,ptr,len,offset);if(curr<0)return-1;ret+=curr;if(curr<len)break;if(typeof offset!=="undefined"){offset+=curr}}return ret}function _fd_read(fd,iov,iovcnt,pnum){try{var stream=SYSCALLS.getStreamFromFD(fd);var num=doReadv(stream,iov,iovcnt);HEAPU32[pnum>>2]=num;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}var MAX_INT53=9007199254740992;var MIN_INT53=-9007199254740992;function bigintToI53Checked(num){return num<MIN_INT53||num>MAX_INT53?NaN:Number(num)}function _fd_seek(fd,offset,whence,newOffset){try{offset=bigintToI53Checked(offset);if(isNaN(offset))return 61;var stream=SYSCALLS.getStreamFromFD(fd);FS.llseek(stream,offset,whence);HEAP64[newOffset>>3]=BigInt(stream.position);if(stream.getdents&&offset===0&&whence===0)stream.getdents=null;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function doWritev(stream,iov,iovcnt,offset){var ret=0;for(var i=0;i<iovcnt;i++){var ptr=HEAPU32[iov>>2];var len=HEAPU32[iov+4>>2];iov+=8;var curr=FS.write(stream,HEAP8,ptr,len,offset);if(curr<0)return-1;ret+=curr;if(typeof offset!=="undefined"){offset+=curr}}return ret}function _fd_write(fd,iov,iovcnt,pnum){try{var stream=SYSCALLS.getStreamFromFD(fd);var num=doWritev(stream,iov,iovcnt);HEAPU32[pnum>>2]=num;return 0}catch(e){if(typeof FS=="undefined"||!(e.name==="ErrnoError"))throw e;return e.errno}}function _getaddrinfo(node,service,hint,out){var addr=0;var port=0;var flags=0;var family=0;var type=0;var proto=0;var ai;function allocaddrinfo(family,type,proto,canon,addr,port){var sa,salen,ai;var errno;salen=family===10?28:16;addr=family===10?inetNtop6(addr):inetNtop4(addr);sa=_malloc(salen);errno=writeSockaddr(sa,family,addr,port);assert(!errno);ai=_malloc(32);HEAP32[ai+4>>2]=family;HEAP32[ai+8>>2]=type;HEAP32[ai+12>>2]=proto;HEAPU32[ai+24>>2]=canon;HEAPU32[ai+20>>2]=sa;if(family===10){HEAP32[ai+16>>2]=28}else{HEAP32[ai+16>>2]=16}HEAP32[ai+28>>2]=0;return ai}if(hint){flags=HEAP32[hint>>2];family=HEAP32[hint+4>>2];type=HEAP32[hint+8>>2];proto=HEAP32[hint+12>>2]}if(type&&!proto){proto=type===2?17:6}if(!type&&proto){type=proto===17?2:1}if(proto===0){proto=6}if(type===0){type=1}if(!node&&!service){return-2}if(flags&~(1|2|4|1024|8|16|32)){return-1}if(hint!==0&&HEAP32[hint>>2]&2&&!node){return-1}if(flags&32){return-2}if(type!==0&&type!==1&&type!==2){return-7}if(family!==0&&family!==2&&family!==10){return-6}if(service){service=UTF8ToString(service);port=parseInt(service,10);if(isNaN(port)){if(flags&1024){return-2}return-8}}if(!node){if(family===0){family=2}if((flags&1)===0){if(family===2){addr=_htonl(2130706433)}else{addr=[0,0,0,1]}}ai=allocaddrinfo(family,type,proto,null,addr,port);HEAPU32[out>>2]=ai;return 0}node=UTF8ToString(node);addr=inetPton4(node);if(addr!==null){if(family===0||family===2){family=2}else if(family===10&&flags&8){addr=[0,0,_htonl(65535),addr];family=10}else{return-2}}else{addr=inetPton6(node);if(addr!==null){if(family===0||family===10){family=10}else{return-2}}}if(addr!=null){ai=allocaddrinfo(family,type,proto,node,addr,port);HEAPU32[out>>2]=ai;return 0}if(flags&4){return-2}node=DNS.lookup_name(node);addr=inetPton4(node);if(family===0){family=2}else if(family===10){addr=[0,0,_htonl(65535),addr]}ai=allocaddrinfo(family,type,proto,null,addr,port);HEAPU32[out>>2]=ai;return 0}function _getnameinfo(sa,salen,node,nodelen,serv,servlen,flags){var info=readSockaddr(sa,salen);if(info.errno){return-6}var port=info.port;var addr=info.addr;var overflowed=false;if(node&&nodelen){var lookup;if(flags&1||!(lookup=DNS.lookup_addr(addr))){if(flags&8){return-2}}else{addr=lookup}var numBytesWrittenExclNull=stringToUTF8(addr,node,nodelen);if(numBytesWrittenExclNull+1>=nodelen){overflowed=true}}if(serv&&servlen){port=""+port;var numBytesWrittenExclNull=stringToUTF8(port,serv,servlen);if(numBytesWrittenExclNull+1>=servlen){overflowed=true}}if(overflowed){return-12}return 0}function arraySum(array,index){var sum=0;for(var i=0;i<=index;sum+=array[i++]){}return sum}var MONTH_DAYS_LEAP=[31,29,31,30,31,30,31,31,30,31,30,31];var MONTH_DAYS_REGULAR=[31,28,31,30,31,30,31,31,30,31,30,31];function addDays(date,days){var newDate=new Date(date.getTime());while(days>0){var leap=isLeapYear(newDate.getFullYear());var currentMonth=newDate.getMonth();var daysInCurrentMonth=(leap?MONTH_DAYS_LEAP:MONTH_DAYS_REGULAR)[currentMonth];if(days>daysInCurrentMonth-newDate.getDate()){days-=daysInCurrentMonth-newDate.getDate()+1;newDate.setDate(1);if(currentMonth<11){newDate.setMonth(currentMonth+1)}else{newDate.setMonth(0);newDate.setFullYear(newDate.getFullYear()+1)}}else{newDate.setDate(newDate.getDate()+days);return newDate}}return newDate}function writeArrayToMemory(array,buffer){HEAP8.set(array,buffer)}function _strftime(s,maxsize,format,tm){var tm_zone=HEAP32[tm+40>>2];var date={tm_sec:HEAP32[tm>>2],tm_min:HEAP32[tm+4>>2],tm_hour:HEAP32[tm+8>>2],tm_mday:HEAP32[tm+12>>2],tm_mon:HEAP32[tm+16>>2],tm_year:HEAP32[tm+20>>2],tm_wday:HEAP32[tm+24>>2],tm_yday:HEAP32[tm+28>>2],tm_isdst:HEAP32[tm+32>>2],tm_gmtoff:HEAP32[tm+36>>2],tm_zone:tm_zone?UTF8ToString(tm_zone):""};var pattern=UTF8ToString(format);var EXPANSION_RULES_1={"%c":"%a %b %d %H:%M:%S %Y","%D":"%m/%d/%y","%F":"%Y-%m-%d","%h":"%b","%r":"%I:%M:%S %p","%R":"%H:%M","%T":"%H:%M:%S","%x":"%m/%d/%y","%X":"%H:%M:%S","%Ec":"%c","%EC":"%C","%Ex":"%m/%d/%y","%EX":"%H:%M:%S","%Ey":"%y","%EY":"%Y","%Od":"%d","%Oe":"%e","%OH":"%H","%OI":"%I","%Om":"%m","%OM":"%M","%OS":"%S","%Ou":"%u","%OU":"%U","%OV":"%V","%Ow":"%w","%OW":"%W","%Oy":"%y"};for(var rule in EXPANSION_RULES_1){pattern=pattern.replace(new RegExp(rule,"g"),EXPANSION_RULES_1[rule])}var WEEKDAYS=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"];var MONTHS=["January","February","March","April","May","June","July","August","September","October","November","December"];function leadingSomething(value,digits,character){var str=typeof value=="number"?value.toString():value||"";while(str.length<digits){str=character[0]+str}return str}function leadingNulls(value,digits){return leadingSomething(value,digits,"0")}function compareByDay(date1,date2){function sgn(value){return value<0?-1:value>0?1:0}var compare;if((compare=sgn(date1.getFullYear()-date2.getFullYear()))===0){if((compare=sgn(date1.getMonth()-date2.getMonth()))===0){compare=sgn(date1.getDate()-date2.getDate())}}return compare}function getFirstWeekStartDate(janFourth){switch(janFourth.getDay()){case 0:return new Date(janFourth.getFullYear()-1,11,29);case 1:return janFourth;case 2:return new Date(janFourth.getFullYear(),0,3);case 3:return new Date(janFourth.getFullYear(),0,2);case 4:return new Date(janFourth.getFullYear(),0,1);case 5:return new Date(janFourth.getFullYear()-1,11,31);case 6:return new Date(janFourth.getFullYear()-1,11,30)}}function getWeekBasedYear(date){var thisDate=addDays(new Date(date.tm_year+1900,0,1),date.tm_yday);var janFourthThisYear=new Date(thisDate.getFullYear(),0,4);var janFourthNextYear=new Date(thisDate.getFullYear()+1,0,4);var firstWeekStartThisYear=getFirstWeekStartDate(janFourthThisYear);var firstWeekStartNextYear=getFirstWeekStartDate(janFourthNextYear);if(compareByDay(firstWeekStartThisYear,thisDate)<=0){if(compareByDay(firstWeekStartNextYear,thisDate)<=0){return thisDate.getFullYear()+1}return thisDate.getFullYear()}return thisDate.getFullYear()-1}var EXPANSION_RULES_2={"%a":function(date){return WEEKDAYS[date.tm_wday].substring(0,3)},"%A":function(date){return WEEKDAYS[date.tm_wday]},"%b":function(date){return MONTHS[date.tm_mon].substring(0,3)},"%B":function(date){return MONTHS[date.tm_mon]},"%C":function(date){var year=date.tm_year+1900;return leadingNulls(year/100|0,2)},"%d":function(date){return leadingNulls(date.tm_mday,2)},"%e":function(date){return leadingSomething(date.tm_mday,2," ")},"%g":function(date){return getWeekBasedYear(date).toString().substring(2)},"%G":function(date){return getWeekBasedYear(date)},"%H":function(date){return leadingNulls(date.tm_hour,2)},"%I":function(date){var twelveHour=date.tm_hour;if(twelveHour==0)twelveHour=12;else if(twelveHour>12)twelveHour-=12;return leadingNulls(twelveHour,2)},"%j":function(date){return leadingNulls(date.tm_mday+arraySum(isLeapYear(date.tm_year+1900)?MONTH_DAYS_LEAP:MONTH_DAYS_REGULAR,date.tm_mon-1),3)},"%m":function(date){return leadingNulls(date.tm_mon+1,2)},"%M":function(date){return leadingNulls(date.tm_min,2)},"%n":function(){return"\n"},"%p":function(date){if(date.tm_hour>=0&&date.tm_hour<12){return"AM"}return"PM"},"%S":function(date){return leadingNulls(date.tm_sec,2)},"%t":function(){return"\t"},"%u":function(date){return date.tm_wday||7},"%U":function(date){var days=date.tm_yday+7-date.tm_wday;return leadingNulls(Math.floor(days/7),2)},"%V":function(date){var val=Math.floor((date.tm_yday+7-(date.tm_wday+6)%7)/7);if((date.tm_wday+371-date.tm_yday-2)%7<=2){val++}if(!val){val=52;var dec31=(date.tm_wday+7-date.tm_yday-1)%7;if(dec31==4||dec31==5&&isLeapYear(date.tm_year%400-1)){val++}}else if(val==53){var jan1=(date.tm_wday+371-date.tm_yday)%7;if(jan1!=4&&(jan1!=3||!isLeapYear(date.tm_year)))val=1}return leadingNulls(val,2)},"%w":function(date){return date.tm_wday},"%W":function(date){var days=date.tm_yday+7-(date.tm_wday+6)%7;return leadingNulls(Math.floor(days/7),2)},"%y":function(date){return(date.tm_year+1900).toString().substring(2)},"%Y":function(date){return date.tm_year+1900},"%z":function(date){var off=date.tm_gmtoff;var ahead=off>=0;off=Math.abs(off)/60;off=off/60*100+off%60;return(ahead?"+":"-")+String("0000"+off).slice(-4)},"%Z":function(date){return date.tm_zone},"%%":function(){return"%"}};pattern=pattern.replace(/%%/g,"\0\0");for(var rule in EXPANSION_RULES_2){if(pattern.includes(rule)){pattern=pattern.replace(new RegExp(rule,"g"),EXPANSION_RULES_2[rule](date))}}pattern=pattern.replace(/\0\0/g,"%");var bytes=intArrayFromString(pattern,false);if(bytes.length>maxsize){return 0}writeArrayToMemory(bytes,s);return bytes.length-1}var FSNode=function(parent,name,mode,rdev){if(!parent){parent=this}this.parent=parent;this.mount=parent.mount;this.mounted=null;this.id=FS.nextInode++;this.name=name;this.mode=mode;this.node_ops={};this.stream_ops={};this.rdev=rdev};var readMode=292|73;var writeMode=146;Object.defineProperties(FSNode.prototype,{read:{get:function(){return(this.mode&readMode)===readMode},set:function(val){val?this.mode|=readMode:this.mode&=~readMode}},write:{get:function(){return(this.mode&writeMode)===writeMode},set:function(val){val?this.mode|=writeMode:this.mode&=~writeMode}},isFolder:{get:function(){return FS.isDir(this.mode)}},isDevice:{get:function(){return FS.isChrdev(this.mode)}}});FS.FSNode=FSNode;FS.createPreloadedFile=FS_createPreloadedFile;FS.staticInit();var wasmImports={"b":___assert_fail,"f":___cxa_throw,"ka":___dlsym,"R":___syscall__newselect,"L":___syscall_accept4,"K":___syscall_bind,"J":___syscall_connect,"la":___syscall_faccessat,"g":___syscall_fcntl64,"ha":___syscall_fstat64,"U":___syscall_getdents64,"I":___syscall_getpeername,"H":___syscall_getsockname,"G":___syscall_getsockopt,"y":___syscall_ioctl,"F":___syscall_listen,"ea":___syscall_lstat64,"$":___syscall_mkdirat,"fa":___syscall_newfstatat,"w":___syscall_openat,"V":___syscall_poll,"E":___syscall_recvfrom,"T":___syscall_renameat,"S":___syscall_rmdir,"D":___syscall_sendto,"v":___syscall_socket,"ga":___syscall_stat64,"O":___syscall_unlinkat,"ia":__emscripten_get_now_is_monotonic,"M":__emscripten_throw_longjmp,"Y":__gmtime_js,"Z":__localtime_js,"_":__mktime_js,"W":__mmap_js,"X":__munmap_js,"P":__tzset_js,"a":_abort,"t":_dlopen,"oa":_emscripten_asm_const_int,"m":_emscripten_date_now,"Q":_emscripten_get_heap_max,"p":_emscripten_get_now,"ja":_emscripten_memcpy_big,"N":_emscripten_resize_heap,"ca":_environ_get,"da":_environ_sizes_get,"l":_exit,"n":_fd_close,"ba":_fd_fdstat_get,"x":_fd_read,"aa":_fd_seek,"q":_fd_write,"k":_getaddrinfo,"i":_getnameinfo,"pa":invoke_i,"na":invoke_ii,"c":invoke_iii,"o":invoke_iiii,"s":invoke_iiiii,"z":invoke_iiiiii,"r":invoke_iiiiiiiii,"B":invoke_iiiijj,"qa":invoke_iij,"h":invoke_vi,"j":invoke_vii,"d":invoke_viiii,"ma":invoke_viiiiii,"A":invoke_viiiiiiii,"C":is_timeout,"u":send_progress,"e":_strftime};var asm=createWasm();var ___wasm_call_ctors=function(){return(___wasm_call_ctors=Module["asm"]["sa"]).apply(null,arguments)};var _malloc=Module["_malloc"]=function(){return(_malloc=Module["_malloc"]=Module["asm"]["ta"]).apply(null,arguments)};var ___errno_location=function(){return(___errno_location=Module["asm"]["va"]).apply(null,arguments)};var _ntohs=function(){return(_ntohs=Module["asm"]["wa"]).apply(null,arguments)};var _htons=function(){return(_htons=Module["asm"]["xa"]).apply(null,arguments)};var _ffmpeg=Module["_ffmpeg"]=function(){return(_ffmpeg=Module["_ffmpeg"]=Module["asm"]["ya"]).apply(null,arguments)};var _ffprobe=Module["_ffprobe"]=function(){return(_ffprobe=Module["_ffprobe"]=Module["asm"]["za"]).apply(null,arguments)};var _htonl=function(){return(_htonl=Module["asm"]["Aa"]).apply(null,arguments)};var _emscripten_builtin_memalign=function(){return(_emscripten_builtin_memalign=Module["asm"]["Ba"]).apply(null,arguments)};var _setThrew=function(){return(_setThrew=Module["asm"]["Ca"]).apply(null,arguments)};var stackSave=function(){return(stackSave=Module["asm"]["Da"]).apply(null,arguments)};var stackRestore=function(){return(stackRestore=Module["asm"]["Ea"]).apply(null,arguments)};var ___cxa_is_pointer_type=function(){return(___cxa_is_pointer_type=Module["asm"]["Fa"]).apply(null,arguments)};var _ff_h264_cabac_tables=Module["_ff_h264_cabac_tables"]=1546732;var ___start_em_js=Module["___start_em_js"]=6077485;var ___stop_em_js=Module["___stop_em_js"]=6077662;function invoke_iiiii(index,a1,a2,a3,a4){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vii(index,a1,a2){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iii(index,a1,a2){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiijj(index,a1,a2,a3,a4,a5){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiiiiiii(index,a1,a2,a3,a4,a5,a6,a7,a8){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_vi(index,a1){var sp=stackSave();try{getWasmTableEntry(index)(a1)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiii(index,a1,a2,a3,a4){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiii(index,a1,a2,a3){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iij(index,a1,a2){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_i(index){var sp=stackSave();try{return getWasmTableEntry(index)()}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_ii(index,a1){var sp=stackSave();try{return getWasmTableEntry(index)(a1)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiiiiii(index,a1,a2,a3,a4,a5,a6,a7,a8){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6,a7,a8)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_iiiiii(index,a1,a2,a3,a4,a5){var sp=stackSave();try{return getWasmTableEntry(index)(a1,a2,a3,a4,a5)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}function invoke_viiiiii(index,a1,a2,a3,a4,a5,a6){var sp=stackSave();try{getWasmTableEntry(index)(a1,a2,a3,a4,a5,a6)}catch(e){stackRestore(sp);if(e!==e+0)throw e;_setThrew(1,0)}}Module["setValue"]=setValue;Module["getValue"]=getValue;Module["UTF8ToString"]=UTF8ToString;Module["stringToUTF8"]=stringToUTF8;Module["lengthBytesUTF8"]=lengthBytesUTF8;Module["FS"]=FS;var calledRun;dependenciesFulfilled=function runCaller(){if(!calledRun)run();if(!calledRun)dependenciesFulfilled=runCaller};function run(){if(runDependencies>0){return}preRun();if(runDependencies>0){return}function doRun(){if(calledRun)return;calledRun=true;Module["calledRun"]=true;if(ABORT)return;initRuntime();readyPromiseResolve(Module);if(Module["onRuntimeInitialized"])Module["onRuntimeInitialized"]();postRun()}if(Module["setStatus"]){Module["setStatus"]("Running...");setTimeout(function(){setTimeout(function(){Module["setStatus"]("")},1);doRun()},1)}else{doRun()}}if(Module["preInit"]){if(typeof Module["preInit"]=="function")Module["preInit"]=[Module["preInit"]];while(Module["preInit"].length>0){Module["preInit"].pop()()}}run();
+  return createFFmpegCore.ready
+}
 
-    return createFFmpegCore.ready;
-  };
+);
 })();
-if (typeof exports === "object" && typeof module === "object")
+if (typeof exports === 'object' && typeof module === 'object')
   module.exports = createFFmpegCore;
-else if (typeof define === "function" && define["amd"])
-  define([], () => createFFmpegCore);
-else if (typeof exports === "object")
+else if (typeof define === 'function' && define['amd'])
+  define([], function() { return createFFmpegCore; });
+else if (typeof exports === 'object')
   exports["createFFmpegCore"] = createFFmpegCore;
diff --git a/apps/web/public/manifest.json b/apps/web/public/manifest.json
index d4a41dc0..fcbfad59 100644
--- a/apps/web/public/manifest.json
+++ b/apps/web/public/manifest.json
@@ -1,44 +1,44 @@
 {
-  "name": "OpenCut",
-  "description": "A simple but powerful video editor that gets the job done. In your browser.",
-  "display": "standalone",
-  "start_url": "/",
-  "icons": [
-    {
-      "src": "/icons/android-icon-36x36.png",
-      "sizes": "36x36",
-      "type": "image\/png",
-      "density": "0.75"
-    },
-    {
-      "src": "/icons/android-icon-48x48.png",
-      "sizes": "48x48",
-      "type": "image\/png",
-      "density": "1.0"
-    },
-    {
-      "src": "/icons/android-icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image\/png",
-      "density": "1.5"
-    },
-    {
-      "src": "/icons/android-icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image\/png",
-      "density": "2.0"
-    },
-    {
-      "src": "/icons/android-icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image\/png",
-      "density": "3.0"
-    },
-    {
-      "src": "/icons/android-icon-192x192.png",
-      "sizes": "192x192",
-      "type": "image\/png",
-      "density": "4.0"
-    }
-  ]
-}
+    "name": "OpenCut",
+    "description": "A simple but powerful video editor that gets the job done. In your browser.",
+    "display": "standalone",
+    "start_url": "/",
+    "icons": [
+        {
+            "src": "/icons/android-icon-36x36.png",
+            "sizes": "36x36",
+            "type": "image\/png",
+            "density": "0.75"
+        },
+        {
+            "src": "/icons/android-icon-48x48.png",
+            "sizes": "48x48",
+            "type": "image\/png",
+            "density": "1.0"
+        },
+        {
+            "src": "/icons/android-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image\/png",
+            "density": "1.5"
+        },
+        {
+            "src": "/icons/android-icon-96x96.png",
+            "sizes": "96x96",
+            "type": "image\/png",
+            "density": "2.0"
+        },
+        {
+            "src": "/icons/android-icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image\/png",
+            "density": "3.0"
+        },
+        {
+            "src": "/icons/android-icon-192x192.png",
+            "sizes": "192x192",
+            "type": "image\/png",
+            "density": "4.0"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/apps/web/src/app/api/auth/[...all]/route.ts b/apps/web/src/app/api/auth/[...all]/route.ts
index 5deef204..55510dcb 100644
--- a/apps/web/src/app/api/auth/[...all]/route.ts
+++ b/apps/web/src/app/api/auth/[...all]/route.ts
@@ -1,4 +1,4 @@
-import { auth } from "@opencut/auth";
-import { toNextJsHandler } from "better-auth/next-js";
-
-export const { POST, GET } = toNextJsHandler(auth);
+import { auth } from "@opencut/auth";

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

+

+export const { POST, GET } = toNextJsHandler(auth);
\ No newline at end of file
diff --git a/apps/web/src/app/api/waitlist/route.ts b/apps/web/src/app/api/waitlist/route.ts
index 9f00f221..e5c9fd94 100644
--- a/apps/web/src/app/api/waitlist/route.ts
+++ b/apps/web/src/app/api/waitlist/route.ts
@@ -1,105 +1,83 @@
-import { NextRequest, NextResponse } from "next/server";
-import { db, eq, waitlist } from "@opencut/db";
-import { checkBotId } from "botid/server";
-import { nanoid } from "nanoid";
-import { waitlistRateLimit } from "@/lib/rate-limit";
-import { z } from "zod";
-import { env } from "@/env";
-import { cookies } from "next/headers";
-import crypto from "crypto";
-
-const waitlistSchema = z.object({
-  email: z.string().email("Invalid email format").min(1, "Email is required"),
-});
-
-const CSRF_TOKEN_NAME = "waitlist-csrf";
-const TOKEN_EXPIRY = 60 * 60 * 1000;
-
-async function validateCSRFToken(request: NextRequest): Promise<boolean> {
-  const clientToken = request.headers.get("x-csrf-token");
-  if (!clientToken) return false;
-
-  const cookieStore = await cookies();
-  const cookieValue = cookieStore.get(CSRF_TOKEN_NAME)?.value;
-  if (!cookieValue) return false;
-
-  const [token, timestamp, signature] = cookieValue.split(":");
-  if (!token || !timestamp || !signature) return false;
-
-  if (clientToken !== token) return false;
-
-  const now = Date.now();
-  const tokenTime = parseInt(timestamp);
-  if (now - tokenTime > TOKEN_EXPIRY) return false;
-
-  const expectedSignature = crypto
-    .createHmac("sha256", env.BETTER_AUTH_SECRET)
-    .update(`${token}:${timestamp}`)
-    .digest("hex");
-
-  return signature === expectedSignature;
-}
-
-export async function POST(request: NextRequest) {
-  const verification = await checkBotId();
-
-  if (verification.isBot) {
-    return NextResponse.json({ error: "Access denied" }, { status: 403 });
-  }
-
-  const identifier = request.headers.get("x-forwarded-for") ?? "127.0.0.1";
-  const { success } = await waitlistRateLimit.limit(identifier);
-
-  if (!success) {
-    return NextResponse.json(
-      { error: "Too many requests. Please try again later." },
-      { status: 429 }
-    );
-  }
-  const isValidToken = await validateCSRFToken(request);
-  if (!isValidToken) {
-    return NextResponse.json(
-      { error: "Invalid security token" },
-      { status: 403 }
-    );
-  }
-
-  try {
-    const body = await request.json();
-    const { email } = waitlistSchema.parse(body);
-
-    const existingEmail = await db
-      .select()
-      .from(waitlist)
-      .where(eq(waitlist.email, email.toLowerCase()))
-      .limit(1);
-
-    if (existingEmail.length > 0) {
-      return NextResponse.json(
-        { error: "Email already registered" },
-        { status: 409 }
-      );
-    }
-
-    await db.insert(waitlist).values({
-      id: nanoid(),
-      email: email.toLowerCase(),
-    });
-
-    return NextResponse.json(
-      { message: "Successfully joined waitlist!" },
-      { status: 201 }
-    );
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      const firstError = error.errors[0];
-      return NextResponse.json({ error: firstError.message }, { status: 400 });
-    }
-
-    console.error("Waitlist signup error:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
+import { NextRequest, NextResponse } from "next/server";

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

+import { checkBotId } from "botid/server";

+import { nanoid } from "nanoid";

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

+import { z } from "zod";

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

+import { cookies } from "next/headers";

+import crypto from "crypto";

+

+const waitlistSchema = z.object({

+  email: z.string().email("Invalid email format").min(1, "Email is required"),

+});

+

+const CSRF_TOKEN_NAME = "waitlist-csrf";

+const TOKEN_EXPIRY = 60 * 60 * 1000;

+

+async function validateCSRFToken(request: NextRequest): Promise<boolean> {

+  const clientToken = request.headers.get("x-csrf-token");

+  if (!clientToken) return false;

+

+  const cookieStore = await cookies();

+  const cookieValue = cookieStore.get(CSRF_TOKEN_NAME)?.value;

+  if (!cookieValue) return false;

+

+  const [token, timestamp, signature] = cookieValue.split(":");

+  if (!token || !timestamp || !signature) return false;

+

+  if (clientToken !== token) return false;

+

+  const now = Date.now();

+  const tokenTime = parseInt(timestamp);

+  if (now - tokenTime > TOKEN_EXPIRY) return false;

+

+  const expectedSignature = crypto.createHmac("sha256", env.BETTER_AUTH_SECRET).update(`${token}:${timestamp}`).digest("hex");

+

+  return signature === expectedSignature;

+}

+

+export async function POST(request: NextRequest) {

+  const verification = await checkBotId();

+

+  if (verification.isBot) {

+    return NextResponse.json({ error: "Access denied" }, { status: 403 });

+  }

+

+  const identifier = request.headers.get("x-forwarded-for") ?? "127.0.0.1";

+  const { success } = await waitlistRateLimit.limit(identifier);

+

+  if (!success) {

+    return NextResponse.json({ error: "Too many requests. Please try again later." }, { status: 429 });

+  }

+  const isValidToken = await validateCSRFToken(request);

+  if (!isValidToken) {

+    return NextResponse.json({ error: "Invalid security token" }, { status: 403 });

+  }

+

+  try {

+    const body = await request.json();

+    const { email } = waitlistSchema.parse(body);

+

+    const existingEmail = await db.select().from(waitlist).where(eq(waitlist.email, email.toLowerCase())).limit(1);

+

+    if (existingEmail.length > 0) {

+      return NextResponse.json({ error: "Email already registered" }, { status: 409 });

+    }

+

+    await db.insert(waitlist).values({

+      id: nanoid(),

+      email: email.toLowerCase(),

+    });

+

+    return NextResponse.json({ message: "Successfully joined waitlist!" }, { status: 201 });

+  } catch (error) {

+    if (error instanceof z.ZodError) {

+      const firstError = error.errors[0];

+      return NextResponse.json({ error: firstError.message }, { status: 400 });

+    }

+

+    console.error("Waitlist signup error:", error);

+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });

+  }

+}

diff --git a/apps/web/src/app/api/waitlist/token/route.ts b/apps/web/src/app/api/waitlist/token/route.ts
index fc2ff32c..4c7695fa 100644
--- a/apps/web/src/app/api/waitlist/token/route.ts
+++ b/apps/web/src/app/api/waitlist/token/route.ts
@@ -5,10 +5,7 @@ import { env } from "@/env";
 
 const CSRF_TOKEN_NAME = "waitlist-csrf";
 const TOKEN_EXPIRY = 60 * 60 * 1000;
-const allowedHosts =
-  env.NODE_ENV === "development"
-    ? ["localhost:3000", "127.0.0.1:3000"]
-    : ["opencut.app", "www.opencut.app"];
+const allowedHosts = env.NODE_ENV === "development" ? ["localhost:3000", "127.0.0.1:3000"] : ["opencut.app", "www.opencut.app"];
 
 export async function GET(request: NextRequest) {
   const referer = request.headers.get("referer");
@@ -17,20 +14,11 @@ export async function GET(request: NextRequest) {
   if (referer) {
     const refererUrl = new URL(referer);
 
-    if (
-      !allowedHosts.some(
-        (allowed) =>
-          refererUrl.host === allowed || refererUrl.host.endsWith(allowed)
-      )
-    ) {
+    if (!allowedHosts.some((allowed) => refererUrl.host === allowed || refererUrl.host.endsWith(allowed))) {
       return NextResponse.json({ error: "Forbidden" }, { status: 403 });
     }
   } else if (host) {
-    if (
-      !allowedHosts.some(
-        (allowed) => host === allowed || host.endsWith(allowed)
-      )
-    ) {
+    if (!allowedHosts.some((allowed) => host === allowed || host.endsWith(allowed))) {
       return NextResponse.json({ error: "Forbidden" }, { status: 403 });
     }
   } else {
@@ -43,10 +31,7 @@ export async function GET(request: NextRequest) {
 
   const token = crypto.randomBytes(32).toString("hex");
   const timestamp = Date.now();
-  const signature = crypto
-    .createHmac("sha256", env.BETTER_AUTH_SECRET)
-    .update(`${token}:${timestamp}`)
-    .digest("hex");
+  const signature = crypto.createHmac("sha256", env.BETTER_AUTH_SECRET).update(`${token}:${timestamp}`).digest("hex");
 
   const cookieStore = await cookies();
   cookieStore.set(CSRF_TOKEN_NAME, `${token}:${timestamp}:${signature}`, {
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index 6a524866..5613f1f9 100644
--- a/apps/web/src/app/contributors/page.tsx
+++ b/apps/web/src/app/contributors/page.tsx
@@ -1,277 +1,277 @@
-import { Metadata } from "next";
-import { Header } from "@/components/header";
-import { Card, CardContent } from "@/components/ui/card";
-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 "@/components/icons";
-import { Badge } from "@/components/ui/badge";
-
-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",
-  },
-};
-
-interface Contributor {
-  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
-      }
-    );
-
-    if (!response.ok) {
-      console.error("Failed to fetch contributors");
-      return [];
-    }
-
-    const contributors = (await response.json()) as Contributor[];
-
-    const filteredContributors = contributors.filter(
-      (contributor: Contributor) => contributor.type === "User"
-    );
-
-    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);
-
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-
-      <main className="relative">
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative container mx-auto px-4 py-16">
-          <div className="max-w-6xl mx-auto">
-            <div className="text-center mb-20">
-              <Link
-                href={"https://github.com/OpenCut-app/OpenCut"}
-                target="_blank"
-              >
-                <Badge variant="secondary" className="gap-2 mb-6">
-                  <GithubIcon className="h-3 w-3" />
-                  Open Source
-                </Badge>
-              </Link>
-              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">
-                Contributors
-              </h1>
-              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
-                Meet the amazing developers who are building the future of video
-                editing
-              </p>
-
-              <div className="flex items-center justify-center gap-8 text-sm">
-                <div className="flex items-center gap-2">
-                  <div className="w-2 h-2 bg-foreground rounded-full" />
-                  <span className="font-medium">{contributors.length}</span>
-                  <span className="text-muted-foreground">contributors</span>
-                </div>
-                <div className="flex items-center gap-2">
-                  <div className="w-2 h-2 bg-foreground rounded-full" />
-                  <span className="font-medium">
-                    {contributors.reduce((sum, c) => sum + c.contributions, 0)}
-                  </span>
-                  <span className="text-muted-foreground">contributions</span>
-                </div>
-              </div>
-            </div>
-
-            {topContributors.length > 0 && (
-              <div className="mb-20">
-                <div className="text-center mb-12">
-                  <h2 className="text-2xl font-semibold mb-2">
-                    Top Contributors
-                  </h2>
-                  <p className="text-muted-foreground">
-                    Leading the way in contributions
-                  </p>
-                </div>
-
-                <div className="flex flex-col md:flex-row gap-6 justify-center max-w-4xl mx-auto">
-                  {topContributors.map((contributor, index) => (
-                    <Link
-                      key={contributor.id}
-                      href={contributor.html_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="group block flex-1"
-                    >
-                      <div className="relative mx-auto max-w-md">
-                        <div className="absolute inset-0 bg-gradient-to-r from-muted/50 to-muted/30 rounded-2xl blur group-hover:blur-md transition-all duration-300" />
-                        <Card className="relative bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
-                          <CardContent className="p-8 text-center">
-                            <div className="relative mb-6">
-                              <Avatar className="h-24 w-24 mx-auto ring-4 ring-background shadow-2xl">
-                                <AvatarImage
-                                  src={contributor.avatar_url}
-                                  alt={`${contributor.login}'s avatar`}
-                                />
-                                <AvatarFallback className="text-lg font-semibold">
-                                  {contributor.login.charAt(0).toUpperCase()}
-                                </AvatarFallback>
-                              </Avatar>
-                            </div>
-                            <h3 className="text-xl font-semibold mb-2 group-hover:text-foreground/80 transition-colors">
-                              {contributor.login}
-                            </h3>
-                            <div className="flex items-center justify-center gap-2 text-muted-foreground">
-                              <span className="font-medium text-foreground">
-                                {contributor.contributions}
-                              </span>
-                              <span>contributions</span>
-                            </div>
-                          </CardContent>
-                        </Card>
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {otherContributors.length > 0 && (
-              <div>
-                <div className="text-center mb-12">
-                  <h2 className="text-2xl font-semibold mb-2">
-                    All Contributors
-                  </h2>
-                  <p className="text-muted-foreground">
-                    Everyone who makes OpenCut better
-                  </p>
-                </div>
-
-                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
-                  {otherContributors.map((contributor, index) => (
-                    <Link
-                      key={contributor.id}
-                      href={contributor.html_url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="group block"
-                      style={{
-                        animationDelay: `${index * 50}ms`,
-                      }}
-                    >
-                      <div className="text-center p-2 rounded-xl transition-all duration-300 hover:opacity-50">
-                        <Avatar className="h-16 w-16 mx-auto mb-3">
-                          <AvatarImage
-                            src={contributor.avatar_url}
-                            alt={`${contributor.login}'s avatar`}
-                          />
-                          <AvatarFallback className="font-medium">
-                            {contributor.login.charAt(0).toUpperCase()}
-                          </AvatarFallback>
-                        </Avatar>
-                        <h3 className="font-medium text-sm truncate group-hover:text-foreground transition-colors mb-1">
-                          {contributor.login}
-                        </h3>
-                        <p className="text-xs text-muted-foreground">
-                          {contributor.contributions}
-                        </p>
-                      </div>
-                    </Link>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            {contributors.length === 0 && (
-              <div className="text-center py-20">
-                <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-muted/50 flex items-center justify-center">
-                  <GithubIcon className="h-8 w-8 text-muted-foreground" />
-                </div>
-                <h3 className="text-xl font-medium mb-3">
-                  No contributors found
-                </h3>
-                <p className="text-muted-foreground mb-8 max-w-md mx-auto">
-                  Unable to load contributors at the moment. Check back later or
-                  view on GitHub.
-                </p>
-                <Link
-                  href="https://github.com/OpenCut-app/OpenCut/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>
-            )}
-
-            <div className="mt-32 text-center">
-              <div className="max-w-2xl mx-auto">
-                <h2 className="text-3xl font-bold mb-4">Join the community</h2>
-                <p className="text-lg text-muted-foreground mb-10 leading-relaxed">
-                  OpenCut is built by developers like you. Every contribution,
-                  no matter how small, helps make video editing more accessible
-                  for everyone.
-                </p>
-
-                <div className="flex flex-col sm:flex-row gap-4 justify-center">
-                  <Link
-                    href="https://github.com/OpenCut-app/OpenCut/blob/main/.github/CONTRIBUTING.md"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button size="lg" className="gap-2 group">
-                      <GithubIcon className="h-4 w-4 group-hover:scale-110 transition-transform" />
-                      Start Contributing
-                    </Button>
-                  </Link>
-                  <Link
-                    href="https://github.com/OpenCut-app/OpenCut/issues"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Button variant="outline" size="lg" className="gap-2 group">
-                      Browse Issues
-                      <ExternalLink className="h-4 w-4 group-hover:scale-110 transition-transform" />
-                    </Button>
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
+import { Metadata } from "next";

+import { Header } from "@/components/header";

+import { Card, CardContent } from "@/components/ui/card";

+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 "@/components/icons";

+import { Badge } from "@/components/ui/badge";

+

+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",

+  },

+};

+

+interface Contributor {

+  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

+      }

+    );

+

+    if (!response.ok) {

+      console.error("Failed to fetch contributors");

+      return [];

+    }

+

+    const contributors = (await response.json()) as Contributor[];

+

+    const filteredContributors = contributors.filter(

+      (contributor: Contributor) => contributor.type === "User"

+    );

+

+    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);

+

+  return (

+    <div className="min-h-screen bg-background">

+      <Header />

+

+      <main className="relative">

+        <div className="absolute inset-0 overflow-hidden pointer-events-none">

+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />

+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />

+        </div>

+

+        <div className="relative container mx-auto px-4 py-16">

+          <div className="max-w-6xl mx-auto">

+            <div className="text-center mb-20">

+              <Link

+                href={"https://github.com/OpenCut-app/OpenCut"}

+                target="_blank"

+              >

+                <Badge variant="secondary" className="gap-2 mb-6">

+                  <GithubIcon className="h-3 w-3" />

+                  Open Source

+                </Badge>

+              </Link>

+              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">

+                Contributors

+              </h1>

+              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">

+                Meet the amazing developers who are building the future of video

+                editing

+              </p>

+

+              <div className="flex items-center justify-center gap-8 text-sm">

+                <div className="flex items-center gap-2">

+                  <div className="w-2 h-2 bg-foreground rounded-full" />

+                  <span className="font-medium">{contributors.length}</span>

+                  <span className="text-muted-foreground">contributors</span>

+                </div>

+                <div className="flex items-center gap-2">

+                  <div className="w-2 h-2 bg-foreground rounded-full" />

+                  <span className="font-medium">

+                    {contributors.reduce((sum, c) => sum + c.contributions, 0)}

+                  </span>

+                  <span className="text-muted-foreground">contributions</span>

+                </div>

+              </div>

+            </div>

+

+            {topContributors.length > 0 && (

+              <div className="mb-20">

+                <div className="text-center mb-12">

+                  <h2 className="text-2xl font-semibold mb-2">

+                    Top Contributors

+                  </h2>

+                  <p className="text-muted-foreground">

+                    Leading the way in contributions

+                  </p>

+                </div>

+

+                <div className="flex flex-col md:flex-row gap-6 justify-center max-w-4xl mx-auto">

+                  {topContributors.map((contributor, index) => (

+                    <Link

+                      key={contributor.id}

+                      href={contributor.html_url}

+                      target="_blank"

+                      rel="noopener noreferrer"

+                      className="group block flex-1"

+                    >

+                      <div className="relative mx-auto max-w-md">

+                        <div className="absolute inset-0 bg-gradient-to-r from-muted/50 to-muted/30 rounded-2xl blur group-hover:blur-md transition-all duration-300" />

+                        <Card className="relative bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">

+                          <CardContent className="p-8 text-center">

+                            <div className="relative mb-6">

+                              <Avatar className="h-24 w-24 mx-auto ring-4 ring-background shadow-2xl">

+                                <AvatarImage

+                                  src={contributor.avatar_url}

+                                  alt={`${contributor.login}'s avatar`}

+                                />

+                                <AvatarFallback className="text-lg font-semibold">

+                                  {contributor.login.charAt(0).toUpperCase()}

+                                </AvatarFallback>

+                              </Avatar>

+                            </div>

+                            <h3 className="text-xl font-semibold mb-2 group-hover:text-foreground/80 transition-colors">

+                              {contributor.login}

+                            </h3>

+                            <div className="flex items-center justify-center gap-2 text-muted-foreground">

+                              <span className="font-medium text-foreground">

+                                {contributor.contributions}

+                              </span>

+                              <span>contributions</span>

+                            </div>

+                          </CardContent>

+                        </Card>

+                      </div>

+                    </Link>

+                  ))}

+                </div>

+              </div>

+            )}

+

+            {otherContributors.length > 0 && (

+              <div>

+                <div className="text-center mb-12">

+                  <h2 className="text-2xl font-semibold mb-2">

+                    All Contributors

+                  </h2>

+                  <p className="text-muted-foreground">

+                    Everyone who makes OpenCut better

+                  </p>

+                </div>

+

+                <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">

+                  {otherContributors.map((contributor, index) => (

+                    <Link

+                      key={contributor.id}

+                      href={contributor.html_url}

+                      target="_blank"

+                      rel="noopener noreferrer"

+                      className="group block"

+                      style={{

+                        animationDelay: `${index * 50}ms`,

+                      }}

+                    >

+                      <div className="text-center p-2 rounded-xl transition-all duration-300 hover:opacity-50">

+                        <Avatar className="h-16 w-16 mx-auto mb-3">

+                          <AvatarImage

+                            src={contributor.avatar_url}

+                            alt={`${contributor.login}'s avatar`}

+                          />

+                          <AvatarFallback className="font-medium">

+                            {contributor.login.charAt(0).toUpperCase()}

+                          </AvatarFallback>

+                        </Avatar>

+                        <h3 className="font-medium text-sm truncate group-hover:text-foreground transition-colors mb-1">

+                          {contributor.login}

+                        </h3>

+                        <p className="text-xs text-muted-foreground">

+                          {contributor.contributions}

+                        </p>

+                      </div>

+                    </Link>

+                  ))}

+                </div>

+              </div>

+            )}

+

+            {contributors.length === 0 && (

+              <div className="text-center py-20">

+                <div className="w-20 h-20 mx-auto mb-6 rounded-full bg-muted/50 flex items-center justify-center">

+                  <GithubIcon className="h-8 w-8 text-muted-foreground" />

+                </div>

+                <h3 className="text-xl font-medium mb-3">

+                  No contributors found

+                </h3>

+                <p className="text-muted-foreground mb-8 max-w-md mx-auto">

+                  Unable to load contributors at the moment. Check back later or

+                  view on GitHub.

+                </p>

+                <Link

+                  href="https://github.com/OpenCut-app/OpenCut/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>

+            )}

+

+            <div className="mt-32 text-center">

+              <div className="max-w-2xl mx-auto">

+                <h2 className="text-3xl font-bold mb-4">Join the community</h2>

+                <p className="text-lg text-muted-foreground mb-10 leading-relaxed">

+                  OpenCut is built by developers like you. Every contribution,

+                  no matter how small, helps make video editing more accessible

+                  for everyone.

+                </p>

+

+                <div className="flex flex-col sm:flex-row gap-4 justify-center">

+                  <Link

+                    href="https://github.com/OpenCut-app/OpenCut/blob/main/.github/CONTRIBUTING.md"

+                    target="_blank"

+                    rel="noopener noreferrer"

+                  >

+                    <Button size="lg" className="gap-2 group">

+                      <GithubIcon className="h-4 w-4 group-hover:scale-110 transition-transform" />

+                      Start Contributing

+                    </Button>

+                  </Link>

+                  <Link

+                    href="https://github.com/OpenCut-app/OpenCut/issues"

+                    target="_blank"

+                    rel="noopener noreferrer"

+                  >

+                    <Button variant="outline" size="lg" className="gap-2 group">

+                      Browse Issues

+                      <ExternalLink className="h-4 w-4 group-hover:scale-110 transition-transform" />

+                    </Button>

+                  </Link>

+                </div>

+              </div>

+            </div>

+          </div>

+        </div>

+      </main>

+    </div>

+  );

+}

diff --git a/apps/web/src/app/metadata.ts b/apps/web/src/app/metadata.ts
index 0608974d..de8cf6f0 100644
--- a/apps/web/src/app/metadata.ts
+++ b/apps/web/src/app/metadata.ts
@@ -1,15 +1,24 @@
-import type { Metadata } from "next";
-import { SITE_INFO, SITE_URL } from "@/constants/site";
+import { Metadata } from "next";
+
+export const SITE_INFO = {
+  title: "OpenCut",
+  description:
+    "A simple but powerful video editor that gets the job done. In your browser.",
+  url: "https://opencut.app",
+  openGraphImage: "https://opencut.app/open-graph/default.jpg",
+  twitterImage: "/open-graph/default.jpg",
+  favicon: "/favicon.ico",
+};
 
 export const baseMetaData: Metadata = {
-  metadataBase: new URL(SITE_URL),
+  metadataBase: new URL("https://opencut.app"),
   title: SITE_INFO.title,
   description: SITE_INFO.description,
   openGraph: {
     title: SITE_INFO.title,
     description: SITE_INFO.description,
-    url: SITE_URL,
-    siteName: SITE_INFO.title,
+    url: "https://opencut.app",
+    siteName: "OpenCut",
     locale: "en_US",
     type: "website",
     images: [
@@ -17,7 +26,7 @@ export const baseMetaData: Metadata = {
         url: SITE_INFO.openGraphImage,
         width: 1200,
         height: 630,
-        alt: "OpenCut Wordmark",
+        alt: "OpenCut",
       },
     ],
   },
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 818884ed..74961549 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,14 +1,6 @@
 import { Hero } from "@/components/landing/hero";
 import { Header } from "@/components/header";
 import { Footer } from "@/components/footer";
-import type { Metadata } from "next";
-import { SITE_URL } from "@/constants/site";
-
-export const metadata: Metadata = {
-  alternates: {
-    canonical: SITE_URL,
-  },
-};
 
 export default async function Home() {
   return (
diff --git a/apps/web/src/app/privacy/page.tsx b/apps/web/src/app/privacy/page.tsx
index b7d700b5..42dd0f9a 100644
--- a/apps/web/src/app/privacy/page.tsx
+++ b/apps/web/src/app/privacy/page.tsx
@@ -1,253 +1,253 @@
-import { Metadata } from "next";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { GithubIcon } from "@/components/icons";
-import Link from "next/link";
-import { Footer } from "@/components/footer";
-import { Header } from "@/components/header";
-
-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",
-  },
-};
-
-export default function PrivacyPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-      <main className="relative">
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
-        </div>
-        <div className="relative container mx-auto px-4 py-16">
-          <div className="max-w-4xl mx-auto">
-            <div className="text-center mb-10">
-              <Link
-                href="https://github.com/OpenCut-app/OpenCut"
-                target="_blank"
-              >
-                <Badge variant="secondary" className="gap-2 mb-6">
-                  <GithubIcon className="h-3 w-3" />
-                  Open Source
-                </Badge>
-              </Link>
-              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">
-                Privacy Policy
-              </h1>
-              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
-                Learn how we handle your data and privacy. Contact us if you
-                have any questions.
-              </p>
-            </div>
-            <Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">
-              <CardContent className="p-8 text-base leading-relaxed space-y-8">
-                <section>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Your Videos Stay Private
-                  </h2>
-                  <p className="mb-4">
-                    <strong>
-                      OpenCut processes all videos locally on your device.
-                    </strong>{" "}
-                    We never upload, store, or have access to your video files.
-                    Your content remains completely private and under your
-                    control at all times.
-                  </p>
-                  <p>
-                    All video editing, rendering, and processing happens in your
-                    browser using WebAssembly and local storage. No video data
-                    is transmitted to our servers.
-                  </p>
-                </section>
-
-                <section>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Account Information
-                  </h2>
-                  <p className="mb-4">
-                    When you create an account, we only collect:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <li>Email address (for account access)</li>
-                    <li>
-                      Profile information from Google OAuth (if you choose to
-                      sign in with Google)
-                    </li>
-                  </ul>
-                  <p className="mb-4">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">Analytics</h2>
-                  <p className="mb-4">
-                    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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Local Storage & Cookies
-                  </h2>
-                  <p className="mb-4">
-                    We use browser local storage and IndexedDB to:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Third-Party Services
-                  </h2>
-                  <p className="mb-4">
-                    OpenCut integrates with these services:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">Your Rights</h2>
-                  <p className="mb-4">
-                    You have complete control over your data:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Open Source Transparency
-                  </h2>
-                  <p className="mb-4">
-                    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="https://github.com/OpenCut-app/OpenCut"
-                      target="_blank"
-                      rel="noopener"
-                      className="text-primary hover:underline"
-                    >
-                      GitHub
-                    </a>
-                    .
-                  </p>
-                </section>
-
-                <section>
-                  <h2 className="text-2xl font-semibold mb-4">Contact Us</h2>
-                  <p className="mb-4">
-                    Questions about this privacy policy or how we handle your
-                    data?
-                  </p>
-                  <p>
-                    Open an issue on our{" "}
-                    <a
-                      href="https://github.com/OpenCut-app/OpenCut/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="https://x.com/opencutapp"
-                      target="_blank"
-                      rel="noopener"
-                      className="text-primary hover:underline"
-                    >
-                      X (Twitter)
-                    </a>
-                    .
-                  </p>
-                </section>
-
-                <p className="text-sm text-muted-foreground mt-8 pt-8 border-t border-muted/20">
-                  Last updated: July 14, 2025
-                </p>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-}
+import { Metadata } from "next";

+import { Card, CardContent } from "@/components/ui/card";

+import { Badge } from "@/components/ui/badge";

+import { GithubIcon } from "@/components/icons";

+import Link from "next/link";

+import { Footer } from "@/components/footer";

+import { Header } from "@/components/header";

+

+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",

+  },

+};

+

+export default function PrivacyPage() {

+  return (

+    <div className="min-h-screen bg-background">

+      <Header />

+      <main className="relative">

+        <div className="absolute inset-0 overflow-hidden pointer-events-none">

+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />

+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />

+        </div>

+        <div className="relative container mx-auto px-4 py-16">

+          <div className="max-w-4xl mx-auto">

+            <div className="text-center mb-10">

+              <Link

+                href="https://github.com/OpenCut-app/OpenCut"

+                target="_blank"

+              >

+                <Badge variant="secondary" className="gap-2 mb-6">

+                  <GithubIcon className="h-3 w-3" />

+                  Open Source

+                </Badge>

+              </Link>

+              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">

+                Privacy Policy

+              </h1>

+              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">

+                Learn how we handle your data and privacy. Contact us if you

+                have any questions.

+              </p>

+            </div>

+            <Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">

+              <CardContent className="p-8 text-base leading-relaxed space-y-8">

+                <section>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Your Videos Stay Private

+                  </h2>

+                  <p className="mb-4">

+                    <strong>

+                      OpenCut processes all videos locally on your device.

+                    </strong>{" "}

+                    We never upload, store, or have access to your video files.

+                    Your content remains completely private and under your

+                    control at all times.

+                  </p>

+                  <p>

+                    All video editing, rendering, and processing happens in your

+                    browser using WebAssembly and local storage. No video data

+                    is transmitted to our servers.

+                  </p>

+                </section>

+

+                <section>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Account Information

+                  </h2>

+                  <p className="mb-4">

+                    When you create an account, we only collect:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <li>Email address (for account access)</li>

+                    <li>

+                      Profile information from Google OAuth (if you choose to

+                      sign in with Google)

+                    </li>

+                  </ul>

+                  <p className="mb-4">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">Analytics</h2>

+                  <p className="mb-4">

+                    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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Local Storage & Cookies

+                  </h2>

+                  <p className="mb-4">

+                    We use browser local storage and IndexedDB to:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Third-Party Services

+                  </h2>

+                  <p className="mb-4">

+                    OpenCut integrates with these services:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">Your Rights</h2>

+                  <p className="mb-4">

+                    You have complete control over your data:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Open Source Transparency

+                  </h2>

+                  <p className="mb-4">

+                    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="https://github.com/OpenCut-app/OpenCut"

+                      target="_blank"

+                      rel="noopener"

+                      className="text-primary hover:underline"

+                    >

+                      GitHub

+                    </a>

+                    .

+                  </p>

+                </section>

+

+                <section>

+                  <h2 className="text-2xl font-semibold mb-4">Contact Us</h2>

+                  <p className="mb-4">

+                    Questions about this privacy policy or how we handle your

+                    data?

+                  </p>

+                  <p>

+                    Open an issue on our{" "}

+                    <a

+                      href="https://github.com/OpenCut-app/OpenCut/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="https://x.com/opencutapp"

+                      target="_blank"

+                      rel="noopener"

+                      className="text-primary hover:underline"

+                    >

+                      X (Twitter)

+                    </a>

+                    .

+                  </p>

+                </section>

+

+                <p className="text-sm text-muted-foreground mt-8 pt-8 border-t border-muted/20">

+                  Last updated: July 14, 2025

+                </p>

+              </CardContent>

+            </Card>

+          </div>

+        </div>

+      </main>

+      <Footer />

+    </div>

+  );

+}

diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx
index 5c003cf0..c62dce3a 100644
--- a/apps/web/src/app/roadmap/page.tsx
+++ b/apps/web/src/app/roadmap/page.tsx
@@ -1,247 +1,247 @@
-import { Metadata } from "next";
-import { Badge } from "@/components/ui/badge";
-import { GithubIcon } from "@/components/icons";
-import Link from "next/link";
-import { Footer } from "@/components/footer";
-import { Header } from "@/components/header";
-import ReactMarkdown from "react-markdown";
-import { cn } from "@/lib/utils";
-
-const roadmapItems: {
-  title: string;
-  description: string;
-  status: {
-    text: string;
-    type: "complete" | "pending" | "default" | "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: "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: "Not Started",
-      type: "default",
-    },
-  },
-  {
-    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"],
-  },
-};
-
-export default function RoadmapPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-      <main className="relative">
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
-        </div>
-        <div className="relative container mx-auto px-4 py-16">
-          <div className="max-w-4xl mx-auto">
-            <div className="text-center mb-10">
-              <Link
-                href="https://github.com/OpenCut-app/OpenCut"
-                target="_blank"
-              >
-                <Badge variant="secondary" className="gap-2 mb-6">
-                  <GithubIcon className="h-3 w-3" />
-                  Open Source
-                </Badge>
-              </Link>
-              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">
-                Roadmap
-              </h1>
-              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
-                What's coming next for OpenCut (last updated: July 14, 2025)
-              </p>
-            </div>
-            <div className="space-y-6">
-              {roadmapItems.map((item, index) => (
-                <div key={index} className="relative">
-                  <div className="flex items-start gap-2">
-                    <span className="text-lg font-medium text-muted-foreground select-none leading-[1.5]">
-                      {index + 1}.
-                    </span>
-                    <div className="flex-1 pt-[2px]">
-                      <div className="flex items-center gap-2 mb-2">
-                        <h3 className="font-medium text-lg">{item.title}</h3>
-                        <Badge
-                          className={cn("shadow-none", {
-                            "!bg-green-500 text-white":
-                              item.status.type === "complete",
-                            "!bg-yellow-500 text-white":
-                              item.status.type === "pending",
-                            "!bg-blue-500 text-white":
-                              item.status.type === "info",
-                            "!bg-foreground/10 text-accent-foreground":
-                              item.status.type === "default",
-                          })}
-                        >
-                          {item.status.text}
-                        </Badge>
-                      </div>
-                      <div className="text-foreground/70 leading-relaxed">
-                        <ReactMarkdown
-                          components={{
-                            a: ({ className, children, ...props }) => (
-                              <a
-                                className={cn(
-                                  "text-primary hover:underline",
-                                  className
-                                )}
-                                target="_blank"
-                                rel="noopener noreferrer"
-                                {...props}
-                              >
-                                {children}
-                              </a>
-                            ),
-                            strong: ({ children }) => (
-                              <strong className="font-semibold text-foreground">
-                                {children}
-                              </strong>
-                            ),
-                          }}
-                        >
-                          {item.description}
-                        </ReactMarkdown>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              ))}
-            </div>
-
-            <div className="mt-12 pt-8 border-t border-muted/20">
-              <div className="text-center space-y-4">
-                <h3 className="text-xl font-semibold">Want to Help?</h3>
-                <p className="text-muted-foreground max-w-2xl mx-auto">
-                  OpenCut is open source and built by the community. Every
-                  contribution, no matter how small, helps us build the best
-                  free video editor possible.
-                </p>
-                <div className="flex flex-col sm:flex-row gap-4 justify-center mt-6">
-                  <Link
-                    href="https://github.com/OpenCut-app/OpenCut/blob/main/.github/CONTRIBUTING.md"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Badge
-                      variant="outline"
-                      className="text-sm px-4 py-2 hover:bg-muted/50 transition-colors"
-                    >
-                      <GithubIcon className="h-4 w-4 mr-2" />
-                      Start Contributing
-                    </Badge>
-                  </Link>
-                  <Link
-                    href="https://github.com/OpenCut-app/OpenCut/issues"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Badge
-                      variant="outline"
-                      className="text-sm px-4 py-2 hover:bg-muted/50 transition-colors"
-                    >
-                      Report Issues
-                    </Badge>
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-}
+import { Metadata } from "next";

+import { Badge } from "@/components/ui/badge";

+import { GithubIcon } from "@/components/icons";

+import Link from "next/link";

+import { Footer } from "@/components/footer";

+import { Header } from "@/components/header";

+import ReactMarkdown from "react-markdown";

+import { cn } from "@/lib/utils";

+

+const roadmapItems: {

+  title: string;

+  description: string;

+  status: {

+    text: string;

+    type: "complete" | "pending" | "default" | "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: "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: "Not Started",

+      type: "default",

+    },

+  },

+  {

+    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"],

+  },

+};

+

+export default function RoadmapPage() {

+  return (

+    <div className="min-h-screen bg-background">

+      <Header />

+      <main className="relative">

+        <div className="absolute inset-0 overflow-hidden pointer-events-none">

+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />

+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />

+        </div>

+        <div className="relative container mx-auto px-4 py-16">

+          <div className="max-w-4xl mx-auto">

+            <div className="text-center mb-10">

+              <Link

+                href="https://github.com/OpenCut-app/OpenCut"

+                target="_blank"

+              >

+                <Badge variant="secondary" className="gap-2 mb-6">

+                  <GithubIcon className="h-3 w-3" />

+                  Open Source

+                </Badge>

+              </Link>

+              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">

+                Roadmap

+              </h1>

+              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">

+                What's coming next for OpenCut (last updated: July 14, 2025)

+              </p>

+            </div>

+            <div className="space-y-6">

+              {roadmapItems.map((item, index) => (

+                <div key={index} className="relative">

+                  <div className="flex items-start gap-2">

+                    <span className="text-lg font-medium text-muted-foreground select-none leading-[1.5]">

+                      {index + 1}.

+                    </span>

+                    <div className="flex-1 pt-[2px]">

+                      <div className="flex items-center gap-2 mb-2">

+                        <h3 className="font-medium text-lg">{item.title}</h3>

+                        <Badge

+                          className={cn("shadow-none", {

+                            "!bg-green-500 text-white":

+                              item.status.type === "complete",

+                            "!bg-yellow-500 text-white":

+                              item.status.type === "pending",

+                            "!bg-blue-500 text-white":

+                              item.status.type === "info",

+                            "!bg-foreground/10 text-accent-foreground":

+                              item.status.type === "default",

+                          })}

+                        >

+                          {item.status.text}

+                        </Badge>

+                      </div>

+                      <div className="text-foreground/70 leading-relaxed">

+                        <ReactMarkdown

+                          components={{

+                            a: ({ className, children, ...props }) => (

+                              <a

+                                className={cn(

+                                  "text-primary hover:underline",

+                                  className

+                                )}

+                                target="_blank"

+                                rel="noopener noreferrer"

+                                {...props}

+                              >

+                                {children}

+                              </a>

+                            ),

+                            strong: ({ children }) => (

+                              <strong className="font-semibold text-foreground">

+                                {children}

+                              </strong>

+                            ),

+                          }}

+                        >

+                          {item.description}

+                        </ReactMarkdown>

+                      </div>

+                    </div>

+                  </div>

+                </div>

+              ))}

+            </div>

+

+            <div className="mt-12 pt-8 border-t border-muted/20">

+              <div className="text-center space-y-4">

+                <h3 className="text-xl font-semibold">Want to Help?</h3>

+                <p className="text-muted-foreground max-w-2xl mx-auto">

+                  OpenCut is open source and built by the community. Every

+                  contribution, no matter how small, helps us build the best

+                  free video editor possible.

+                </p>

+                <div className="flex flex-col sm:flex-row gap-4 justify-center mt-6">

+                  <Link

+                    href="https://github.com/OpenCut-app/OpenCut/blob/main/.github/CONTRIBUTING.md"

+                    target="_blank"

+                    rel="noopener noreferrer"

+                  >

+                    <Badge

+                      variant="outline"

+                      className="text-sm px-4 py-2 hover:bg-muted/50 transition-colors"

+                    >

+                      <GithubIcon className="h-4 w-4 mr-2" />

+                      Start Contributing

+                    </Badge>

+                  </Link>

+                  <Link

+                    href="https://github.com/OpenCut-app/OpenCut/issues"

+                    target="_blank"

+                    rel="noopener noreferrer"

+                  >

+                    <Badge

+                      variant="outline"

+                      className="text-sm px-4 py-2 hover:bg-muted/50 transition-colors"

+                    >

+                      Report Issues

+                    </Badge>

+                  </Link>

+                </div>

+              </div>

+            </div>

+          </div>

+        </div>

+      </main>

+      <Footer />

+    </div>

+  );

+}

diff --git a/apps/web/src/app/rss.xml/route.ts b/apps/web/src/app/rss.xml/route.ts
index ab645655..b16bd856 100644
--- a/apps/web/src/app/rss.xml/route.ts
+++ b/apps/web/src/app/rss.xml/route.ts
@@ -1,33 +1,33 @@
-import { Feed } from "feed";
-import { getPosts } from "@/lib/blog-query";
-import { SITE_INFO, SITE_URL } from "@/constants/site";
+import { Feed } from 'feed';
+import { getPosts } from '@/lib/blog-query';
+import { SITE_INFO } from '../metadata';
 
 export async function GET() {
   try {
     const { posts } = await getPosts();
-
+    
     const feed = new Feed({
-      title: `${SITE_INFO.title} Blog`,
+      title: 'OpenCut Blog',
       description: SITE_INFO.description,
-      id: `${SITE_URL}`,
-      link: `${SITE_URL}/blog/`,
-      language: "en",
+      id: `${SITE_INFO.url}`,
+      link: `${SITE_INFO.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,
-        })),
+          title: post.title,
+          id: `${SITE_INFO.url}/blog/${post.slug}`,
+          link: `${SITE_INFO.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,
       });
@@ -35,12 +35,12 @@ export async function GET() {
 
     return new Response(feed.rss2(), {
       headers: {
-        "Content-Type": "text/xml",
-        "Cache-Control": "public, max-age=86400, stale-while-revalidate",
+        '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 });
+    console.error('Error generating RSS feed', error);
+    return new Response('Internal Server Error', { status: 500 });
   }
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/app/terms/page.tsx b/apps/web/src/app/terms/page.tsx
index 7d1fda7f..c56e8fc1 100644
--- a/apps/web/src/app/terms/page.tsx
+++ b/apps/web/src/app/terms/page.tsx
@@ -1,317 +1,317 @@
-import { Metadata } from "next";
-import { Card, CardContent } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { GithubIcon } from "@/components/icons";
-import Link from "next/link";
-import { Footer } from "@/components/footer";
-import { Header } from "@/components/header";
-
-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",
-  },
-};
-
-export default function TermsPage() {
-  return (
-    <div className="min-h-screen bg-background">
-      <Header />
-      <main className="relative">
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
-        </div>
-        <div className="relative container mx-auto px-4 py-16">
-          <div className="max-w-4xl mx-auto">
-            <div className="text-center mb-10">
-              <Link
-                href="https://github.com/OpenCut-app/OpenCut"
-                target="_blank"
-              >
-                <Badge variant="secondary" className="gap-2 mb-6">
-                  <GithubIcon className="h-3 w-3" />
-                  Open Source
-                </Badge>
-              </Link>
-              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">
-                Terms of Service
-              </h1>
-              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
-                Fair and transparent terms for our free, open-source video
-                editor.
-              </p>
-            </div>
-            <Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">
-              <CardContent className="p-8 text-base leading-relaxed space-y-8">
-                <section>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Welcome to OpenCut
-                  </h2>
-                  <p className="mb-4">
-                    OpenCut is a free, open-source video editor that runs in
-                    your browser. By using our service, you agree to these
-                    terms. We've designed these terms to be fair and protect
-                    both you and our project.
-                  </p>
-                  <p>
-                    <strong>Key principle:</strong> Your content stays on your
-                    device. We never claim ownership of your videos or projects.
-                  </p>
-                </section>
-
-                <section>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Your Content, Your Rights
-                  </h2>
-                  <p className="mb-4">
-                    <strong>You own everything you create.</strong> OpenCut
-                    processes your videos locally on your device, so we never
-                    have access to your content. 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 pl-6 mb-4 space-y-2">
-                    <li>
-                      Your videos remain completely private and under your
-                      control
-                    </li>
-                    <li>
-                      You retain all intellectual property rights to your
-                      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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    How You Can Use OpenCut
-                  </h2>
-                  <p className="mb-4">
-                    OpenCut is free for personal and commercial use. You can:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Account and Service
-                  </h2>
-                  <p className="mb-4">
-                    To use certain features, you may create an account:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Open Source Benefits
-                  </h2>
-                  <p className="mb-4">
-                    Because OpenCut is open source, you have additional rights:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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="https://github.com/OpenCut-app/OpenCut"
-                      target="_blank"
-                      rel="noopener"
-                      className="text-primary hover:underline"
-                    >
-                      GitHub
-                    </a>
-                    .
-                  </p>
-                </section>
-
-                <section>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Third-Party Content
-                  </h2>
-                  <p className="mb-4">
-                    When using OpenCut, make sure you have the right to use any
-                    content you import:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Limitations and Liability
-                  </h2>
-                  <p className="mb-4">
-                    OpenCut is provided free of charge. To the extent permitted
-                    by law:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Service Changes
-                  </h2>
-                  <p className="mb-4">We may update OpenCut and these terms:</p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">Termination</h2>
-                  <p className="mb-4">
-                    You can stop using OpenCut at any time:
-                  </p>
-                  <ul className="list-disc pl-6 mb-4 space-y-2">
-                    <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>
-                  <h2 className="text-2xl font-semibold mb-4">
-                    Contact and Disputes
-                  </h2>
-                  <p className="mb-4">
-                    Questions about these terms or need to report an issue?
-                  </p>
-                  <p className="mb-4">
-                    Contact us through our{" "}
-                    <a
-                      href="https://github.com/OpenCut-app/OpenCut/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="https://x.com/opencutapp"
-                      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>
-
-                <p className="text-sm text-muted-foreground mt-8 pt-8 border-t border-muted/20">
-                  Last updated: July 14, 2025
-                </p>
-              </CardContent>
-            </Card>
-          </div>
-        </div>
-      </main>
-      <Footer />
-    </div>
-  );
-}
+import { Metadata } from "next";

+import { Card, CardContent } from "@/components/ui/card";

+import { Badge } from "@/components/ui/badge";

+import { GithubIcon } from "@/components/icons";

+import Link from "next/link";

+import { Footer } from "@/components/footer";

+import { Header } from "@/components/header";

+

+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",

+  },

+};

+

+export default function TermsPage() {

+  return (

+    <div className="min-h-screen bg-background">

+      <Header />

+      <main className="relative">

+        <div className="absolute inset-0 overflow-hidden pointer-events-none">

+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />

+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />

+        </div>

+        <div className="relative container mx-auto px-4 py-16">

+          <div className="max-w-4xl mx-auto">

+            <div className="text-center mb-10">

+              <Link

+                href="https://github.com/OpenCut-app/OpenCut"

+                target="_blank"

+              >

+                <Badge variant="secondary" className="gap-2 mb-6">

+                  <GithubIcon className="h-3 w-3" />

+                  Open Source

+                </Badge>

+              </Link>

+              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">

+                Terms of Service

+              </h1>

+              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">

+                Fair and transparent terms for our free, open-source video

+                editor.

+              </p>

+            </div>

+            <Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">

+              <CardContent className="p-8 text-base leading-relaxed space-y-8">

+                <section>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Welcome to OpenCut

+                  </h2>

+                  <p className="mb-4">

+                    OpenCut is a free, open-source video editor that runs in

+                    your browser. By using our service, you agree to these

+                    terms. We've designed these terms to be fair and protect

+                    both you and our project.

+                  </p>

+                  <p>

+                    <strong>Key principle:</strong> Your content stays on your

+                    device. We never claim ownership of your videos or projects.

+                  </p>

+                </section>

+

+                <section>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Your Content, Your Rights

+                  </h2>

+                  <p className="mb-4">

+                    <strong>You own everything you create.</strong> OpenCut

+                    processes your videos locally on your device, so we never

+                    have access to your content. 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 pl-6 mb-4 space-y-2">

+                    <li>

+                      Your videos remain completely private and under your

+                      control

+                    </li>

+                    <li>

+                      You retain all intellectual property rights to your

+                      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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    How You Can Use OpenCut

+                  </h2>

+                  <p className="mb-4">

+                    OpenCut is free for personal and commercial use. You can:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Account and Service

+                  </h2>

+                  <p className="mb-4">

+                    To use certain features, you may create an account:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Open Source Benefits

+                  </h2>

+                  <p className="mb-4">

+                    Because OpenCut is open source, you have additional rights:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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="https://github.com/OpenCut-app/OpenCut"

+                      target="_blank"

+                      rel="noopener"

+                      className="text-primary hover:underline"

+                    >

+                      GitHub

+                    </a>

+                    .

+                  </p>

+                </section>

+

+                <section>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Third-Party Content

+                  </h2>

+                  <p className="mb-4">

+                    When using OpenCut, make sure you have the right to use any

+                    content you import:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Limitations and Liability

+                  </h2>

+                  <p className="mb-4">

+                    OpenCut is provided free of charge. To the extent permitted

+                    by law:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Service Changes

+                  </h2>

+                  <p className="mb-4">We may update OpenCut and these terms:</p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">Termination</h2>

+                  <p className="mb-4">

+                    You can stop using OpenCut at any time:

+                  </p>

+                  <ul className="list-disc pl-6 mb-4 space-y-2">

+                    <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>

+                  <h2 className="text-2xl font-semibold mb-4">

+                    Contact and Disputes

+                  </h2>

+                  <p className="mb-4">

+                    Questions about these terms or need to report an issue?

+                  </p>

+                  <p className="mb-4">

+                    Contact us through our{" "}

+                    <a

+                      href="https://github.com/OpenCut-app/OpenCut/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="https://x.com/opencutapp"

+                      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>

+

+                <p className="text-sm text-muted-foreground mt-8 pt-8 border-t border-muted/20">

+                  Last updated: July 14, 2025

+                </p>

+              </CardContent>

+            </Card>

+          </div>

+        </div>

+      </main>

+      <Footer />

+    </div>

+  );

+}

diff --git a/apps/web/src/app/why-not-capcut/page.tsx b/apps/web/src/app/why-not-capcut/page.tsx
index 7fe6df66..56b3d27a 100644
--- a/apps/web/src/app/why-not-capcut/page.tsx
+++ b/apps/web/src/app/why-not-capcut/page.tsx
@@ -1,191 +1,191 @@
-import { Header } from "@/components/header";
-
-export default function WhyNotCapcut() {
-  return (
-    <div className="min-h-screen bg-background px-5">
-      <Header />
-
-      <main className="relative mt-12">
-        <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
-        </div>
-
-        <div className="relative container mx-auto px-4 py-16">
-          <div className="max-w-6xl mx-auto">
-            <div className="text-center mb-20">
-              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">
-                Fuck CapCut
-              </h1>
-              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
-                Roasting time, so get ready motherfucker.
-              </p>
-            </div>
-
-            <div className="max-w-4xl mx-auto space-y-12">
-              <div>
-                <h2 className="text-3xl font-bold mb-6">
-                  Seriously, what the fuck else do you want?
-                </h2>
-                <p className="text-lg mb-6">
-                  You probably use CapCut and think your video editing is
-                  special. You think your fucking TikTok with 47 transitions and
-                  12 different fonts is going to get you some viral fame. You
-                  think loading up every goddamn effect in their library makes
-                  your content better. Wrong, motherfucker. Let me describe what
-                  CapCut actually gives you:
-                </p>
-                <ul className="text-lg space-y-2 mb-6 list-disc list-inside">
-                  <li>A paywall every time you breathe</li>
-                  <li>Terms of service that steal your shit</li>
-                  <li>
-                    More "Get Pro" dialogs than a Windows 95 error message
-                  </li>
-                  <li>
-                    Features that disappear behind paywalls while you're fucking
-                    using them
-                  </li>
-                  <li>Bugs disguised as "premium features"</li>
-                </ul>
-                <p className="text-lg mb-6">
-                  <strong>Well guess what, motherfucker:</strong>
-                </p>
-                <p className="text-lg mb-6">
-                  You. Are. Getting. Scammed. Look at this shit. It's a fucking
-                  video editor. Why the fuck do you need to pay $20/month just
-                  to remove a goddamn watermark? You spent hours editing your
-                  video and they slap their logo on it like they fucking made
-                  it.
-                </p>
-              </div>
-
-              <div>
-                <h2 className="text-3xl font-bold mb-6">
-                  The "Get Pro" dialog is everywhere
-                </h2>
-                <p className="text-lg mb-6">
-                  This motherfucking dialog pops up more than ads on a pirated
-                  movie site. Want to add a transition? Get Pro. Want to export
-                  without their watermark? Get Pro. Want to use more than 2
-                  fonts? Get fucking Pro, peasant.
-                </p>
-                <p className="text-lg mb-6">
-                  Did you seriously think you could edit a video without seeing
-                  this dialog 47 times? You click one button and BAM - there it
-                  is again, asking for your credit card like a desperate ex
-                  asking for money.
-                </p>
-              </div>
-
-              <div>
-                <h2 className="text-3xl font-bold mb-6">
-                  Everything costs money now
-                </h2>
-                <p className="text-lg mb-6">
-                  You dumbass. You thought CapCut was free, but no. Free means
-                  they let you open the app. Everything else costs money. Basic
-                  shake effect? That'll be $20/month. A decent transition that
-                  isn't "fade"? Pay up, motherfucker.
-                </p>
-                <p className="text-lg mb-6">
-                  Here's my favorite piece of bullshit: You import an MP3 file -
-                  you know, AUDIO - and try to export. "Sorry, can't export
-                  because you're using our premium extract audio feature!"
-                </p>
-                <p className="text-lg mb-6">
-                  <strong>
-                    My MP3 was already fucking audio, you absolute morons.
-                  </strong>
-                </p>
-                <p className="text-lg mb-6">
-                  But wait, there's more! If you drag that same MP3 to their
-                  media panel first, then to the timeline, it magically works.
-                  This isn't a bug, it's a fucking scam disguised as software
-                  engineering.
-                </p>
-              </div>
-
-              <div>
-                <h2 className="text-3xl font-bold mb-6">
-                  Their Terms of Service are insane
-                </h2>
-                <p className="text-lg mb-6">
-                  Look at this shit. You upload your content and they basically
-                  say "thanks for the free content, we own it now, but if Disney
-                  sues anyone, that's your problem."
-                </p>
-                <p className="text-lg mb-6">
-                  <strong>CapCut's Terms of Service:</strong> We get full rights
-                  to use, modify, distribute, and monetize everything you upload
-                  - permanently and without paying you shit. But you're still
-                  responsible if anything goes wrong.
-                </p>
-                <p className="text-lg mb-6">
-                  Translation: "We'll make money off your viral video, you
-                  handle the lawsuits." Brilliant legal strategy, you fucks.
-                </p>
-              </div>
-
-              <div>
-                <h2 className="text-3xl font-bold mb-6">
-                  The editor is actually good
-                </h2>
-                <p className="text-lg mb-6">
-                  Here's the thing that makes me want to punch my monitor: the
-                  actual video editor is fucking good. It's intuitive, powerful,
-                  and anyone can figure it out. When it's not begging for money
-                  every 30 seconds, it actually works well.
-                </p>
-                <p className="text-lg mb-6">
-                  Which makes everything else so much worse. They built
-                  something people want to use, then turned it into a digital
-                  slot machine. Every click might trigger a payment request.
-                </p>
-              </div>
-
-              <div>
-                <h2 className="text-3xl font-bold mb-6">
-                  This is a video editor. Look at it. You've never seen one
-                  before.
-                </h2>
-                <p className="text-lg mb-6">
-                  Like the person who's never used software that doesn't
-                  constantly beg for money, you have no fucking idea what a
-                  video editor should be. All you've ever seen are predatory
-                  apps disguised as creative tools.
-                </p>
-                <p className="text-lg mb-6">
-                  A real video editor lets you edit videos. It doesn't steal
-                  your content. It doesn't pop up payment dialogs every 5
-                  seconds. It doesn't charge you separately for basic features
-                  that should be free.
-                </p>
-              </div>
-
-              <div>
-                <h2 className="text-3xl font-bold mb-6">
-                  Yes, this is fucking satire, you fuck
-                </h2>
-                <p className="text-lg mb-6">
-                  I'm not actually saying all video editors should be basic as
-                  shit. What I'm saying is that all the problems we have with
-                  video editing apps are{" "}
-                  <strong>ones they create themselves</strong>. Video editors
-                  aren't broken by default - they edit videos, export them, and
-                  let you use basic features without constantly begging for
-                  money. CapCut breaks them. They turn them into payment
-                  processors with video editing as a side feature.
-                </p>
-                <p className="text-lg">
-                  <em>"Good software gets out of your way."</em>
-                  <br />- Some smart motherfucker who definitely wasn't working
-                  at CapCut
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-}
+import { Header } from "@/components/header";

+

+export default function WhyNotCapcut() {

+  return (

+    <div className="min-h-screen bg-background px-5">

+      <Header />

+

+      <main className="relative mt-12">

+        <div className="absolute inset-0 overflow-hidden pointer-events-none">

+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />

+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />

+        </div>

+

+        <div className="relative container mx-auto px-4 py-16">

+          <div className="max-w-6xl mx-auto">

+            <div className="text-center mb-20">

+              <h1 className="text-5xl md:text-6xl font-bold tracking-tight mb-6">

+                Fuck CapCut

+              </h1>

+              <p className="text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">

+                Roasting time, so get ready motherfucker.

+              </p>

+            </div>

+

+            <div className="max-w-4xl mx-auto space-y-12">

+              <div>

+                <h2 className="text-3xl font-bold mb-6">

+                  Seriously, what the fuck else do you want?

+                </h2>

+                <p className="text-lg mb-6">

+                  You probably use CapCut and think your video editing is

+                  special. You think your fucking TikTok with 47 transitions and

+                  12 different fonts is going to get you some viral fame. You

+                  think loading up every goddamn effect in their library makes

+                  your content better. Wrong, motherfucker. Let me describe what

+                  CapCut actually gives you:

+                </p>

+                <ul className="text-lg space-y-2 mb-6 list-disc list-inside">

+                  <li>A paywall every time you breathe</li>

+                  <li>Terms of service that steal your shit</li>

+                  <li>

+                    More "Get Pro" dialogs than a Windows 95 error message

+                  </li>

+                  <li>

+                    Features that disappear behind paywalls while you're fucking

+                    using them

+                  </li>

+                  <li>Bugs disguised as "premium features"</li>

+                </ul>

+                <p className="text-lg mb-6">

+                  <strong>Well guess what, motherfucker:</strong>

+                </p>

+                <p className="text-lg mb-6">

+                  You. Are. Getting. Scammed. Look at this shit. It's a fucking

+                  video editor. Why the fuck do you need to pay $20/month just

+                  to remove a goddamn watermark? You spent hours editing your

+                  video and they slap their logo on it like they fucking made

+                  it.

+                </p>

+              </div>

+

+              <div>

+                <h2 className="text-3xl font-bold mb-6">

+                  The "Get Pro" dialog is everywhere

+                </h2>

+                <p className="text-lg mb-6">

+                  This motherfucking dialog pops up more than ads on a pirated

+                  movie site. Want to add a transition? Get Pro. Want to export

+                  without their watermark? Get Pro. Want to use more than 2

+                  fonts? Get fucking Pro, peasant.

+                </p>

+                <p className="text-lg mb-6">

+                  Did you seriously think you could edit a video without seeing

+                  this dialog 47 times? You click one button and BAM - there it

+                  is again, asking for your credit card like a desperate ex

+                  asking for money.

+                </p>

+              </div>

+

+              <div>

+                <h2 className="text-3xl font-bold mb-6">

+                  Everything costs money now

+                </h2>

+                <p className="text-lg mb-6">

+                  You dumbass. You thought CapCut was free, but no. Free means

+                  they let you open the app. Everything else costs money. Basic

+                  shake effect? That'll be $20/month. A decent transition that isn't

+                  "fade"? Pay up, motherfucker.

+                </p>

+                <p className="text-lg mb-6">

+                  Here's my favorite piece of bullshit: You import an MP3 file -

+                  you know, AUDIO - and try to export. "Sorry, can't export

+                  because you're using our premium extract audio feature!"

+                </p>

+                <p className="text-lg mb-6">

+                  <strong>

+                    My MP3 was already fucking audio, you absolute morons.

+                  </strong>

+                </p>

+                <p className="text-lg mb-6">

+                  But wait, there's more! If you drag that same MP3 to their

+                  media panel first, then to the timeline, it magically works.

+                  This isn't a bug, it's a fucking scam disguised as software

+                  engineering.

+                </p>

+              </div>

+

+              <div>

+                <h2 className="text-3xl font-bold mb-6">

+                  Their Terms of Service are insane

+                </h2>

+                <p className="text-lg mb-6">

+                  Look at this shit. You upload your content and they basically

+                  say "thanks for the free content, we own it now, but if Disney

+                  sues anyone, that's your problem."

+                </p>

+                <p className="text-lg mb-6">

+                  <strong>CapCut's Terms of Service:</strong> We get full rights

+                  to use, modify, distribute, and monetize everything you upload

+                  - permanently and without paying you shit. But you're still

+                  responsible if anything goes wrong.

+                </p>

+                <p className="text-lg mb-6">

+                  Translation: "We'll make money off your viral video, you

+                  handle the lawsuits." Brilliant legal strategy, you fucks.

+                </p>

+              </div>

+

+              <div>

+                <h2 className="text-3xl font-bold mb-6">

+                  The editor is actually good

+                </h2>

+                <p className="text-lg mb-6">

+                  Here's the thing that makes me want to punch my monitor: the

+                  actual video editor is fucking good. It's intuitive, powerful,

+                  and anyone can figure it out. When it's not begging for money

+                  every 30 seconds, it actually works well.

+                </p>

+                <p className="text-lg mb-6">

+                  Which makes everything else so much worse. They built

+                  something people want to use, then turned it into a digital

+                  slot machine. Every click might trigger a payment request.

+                </p>

+              </div>

+

+              <div>

+                <h2 className="text-3xl font-bold mb-6">

+                  This is a video editor. Look at it. You've never seen one

+                  before.

+                </h2>

+                <p className="text-lg mb-6">

+                  Like the person who's never used software that doesn't

+                  constantly beg for money, you have no fucking idea what a

+                  video editor should be. All you've ever seen are predatory

+                  apps disguised as creative tools.

+                </p>

+                <p className="text-lg mb-6">

+                  A real video editor lets you edit videos. It doesn't steal

+                  your content. It doesn't pop up payment dialogs every 5

+                  seconds. It doesn't charge you separately for basic features

+                  that should be free.

+                </p>

+              </div>

+

+              <div>

+                <h2 className="text-3xl font-bold mb-6">

+                  Yes, this is fucking satire, you fuck

+                </h2>

+                <p className="text-lg mb-6">

+                  I'm not actually saying all video editors should be basic as

+                  shit. What I'm saying is that all the problems we have with

+                  video editing apps are{" "}

+                  <strong>ones they create themselves</strong>. Video editors

+                  aren't broken by default - they edit videos, export them, and

+                  let you use basic features without constantly begging for

+                  money. CapCut breaks them. They turn them into payment

+                  processors with video editing as a side feature.

+                </p>

+                <p className="text-lg">

+                  <em>"Good software gets out of your way."</em>

+                  <br />- Some smart motherfucker who definitely wasn't working

+                  at CapCut

+                </p>

+              </div>

+            </div>

+          </div>

+        </div>

+      </main>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
index a640dc4c..721564ea 100644
--- a/apps/web/src/components/background-settings.tsx
+++ b/apps/web/src/components/background-settings.tsx
@@ -1,184 +1,184 @@
-import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
-import { Button } from "./ui/button";
-import { BackgroundIcon } from "./icons";
-import { cn } from "@/lib/utils";
-import Image from "next/image";
-import { colors } from "@/data/colors";
-import { useProjectStore } from "@/stores/project-store";
-import { PipetteIcon } from "lucide-react";
-
-type BackgroundTab = "color" | "blur";
-
-export function BackgroundSettings() {
-  const { activeProject, updateBackgroundType } = useProjectStore();
-
-  // ✅ Good: derive activeTab from activeProject during rendering
-  const activeTab = activeProject?.backgroundType || "color";
-
-  const handleColorSelect = (color: string) => {
-    updateBackgroundType("color", { backgroundColor: color });
-  };
-
-  const handleBlurSelect = (blurIntensity: number) => {
-    updateBackgroundType("blur", { blurIntensity });
-  };
-
-  const tabs = [
-    {
-      label: "Color",
-      value: "color",
-    },
-    {
-      label: "Blur",
-      value: "blur",
-    },
-  ];
-
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          variant="text"
-          size="icon"
-          className="!size-4 border border-muted-foreground"
-        >
-          <BackgroundIcon className="!size-3" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent className="flex flex-col items-start w-[20rem] h-[16rem] overflow-hidden p-0">
-        <div className="flex items-center justify-between w-full gap-2 z-10 bg-popover p-3">
-          <h2 className="text-sm">Background</h2>
-          <div className="flex items-center gap-2 text-sm">
-            {tabs.map((tab) => (
-              <span
-                key={tab.value}
-                onClick={() => {
-                  // Switch to the background type when clicking tabs
-                  if (tab.value === "color") {
-                    updateBackgroundType("color", {
-                      backgroundColor:
-                        activeProject?.backgroundColor || "#000000",
-                    });
-                  } else {
-                    updateBackgroundType("blur", {
-                      blurIntensity: activeProject?.blurIntensity || 8,
-                    });
-                  }
-                }}
-                className={cn(
-                  "text-muted-foreground cursor-pointer",
-                  activeTab === tab.value && "text-foreground"
-                )}
-              >
-                {tab.label}
-              </span>
-            ))}
-          </div>
-        </div>
-        {activeTab === "color" ? (
-          <ColorView
-            selectedColor={activeProject?.backgroundColor || "#000000"}
-            onColorSelect={handleColorSelect}
-          />
-        ) : (
-          <BlurView
-            selectedBlur={activeProject?.blurIntensity || 8}
-            onBlurSelect={handleBlurSelect}
-          />
-        )}
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-function ColorView({
-  selectedColor,
-  onColorSelect,
-}: {
-  selectedColor: string;
-  onColorSelect: (color: string) => void;
-}) {
-  return (
-    <div className="w-full h-full">
-      <div className="absolute top-8 left-0 w-[calc(100%-1rem)] h-12 bg-gradient-to-b from-popover to-transparent pointer-events-none" />
-      <div className="grid grid-cols-4 gap-2 w-full h-full p-3 pt-0 overflow-auto">
-        <div className="w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary flex items-center justify-center">
-          <PipetteIcon className="size-4" />
-        </div>
-        {colors.map((color) => (
-          <ColorItem
-            key={color}
-            color={color}
-            isSelected={color === selectedColor}
-            onClick={() => onColorSelect(color)}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-function ColorItem({
-  color,
-  isSelected,
-  onClick,
-}: {
-  color: string;
-  isSelected: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <div
-      className={cn(
-        "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary",
-        isSelected && "border-2 border-primary"
-      )}
-      style={{ backgroundColor: color }}
-      onClick={onClick}
-    />
-  );
-}
-
-function BlurView({
-  selectedBlur,
-  onBlurSelect,
-}: {
-  selectedBlur: number;
-  onBlurSelect: (blurIntensity: number) => void;
-}) {
-  const blurLevels = [
-    { label: "Light", value: 4 },
-    { label: "Medium", value: 8 },
-    { label: "Heavy", value: 18 },
-  ];
-  const blurImage =
-    "https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";
-
-  return (
-    <div className="grid grid-cols-3 gap-2 w-full p-3 pt-0">
-      {blurLevels.map((blur) => (
-        <div
-          key={blur.value}
-          className={cn(
-            "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary relative overflow-hidden",
-            selectedBlur === blur.value && "border-2 border-primary"
-          )}
-          onClick={() => onBlurSelect(blur.value)}
-        >
-          <Image
-            src={blurImage}
-            alt={`Blur preview ${blur.label}`}
-            fill
-            className="object-cover"
-            style={{ filter: `blur(${blur.value}px)` }}
-          />
-          <div className="absolute bottom-1 left-1 right-1 text-center">
-            <span className="text-xs text-white bg-black/50 px-1 rounded">
-              {blur.label}
-            </span>
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}
+import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";

+import { Button } from "./ui/button";

+import { BackgroundIcon } from "./icons";

+import { cn } from "@/lib/utils";

+import Image from "next/image";

+import { colors } from "@/data/colors";

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

+import { PipetteIcon } from "lucide-react";

+

+type BackgroundTab = "color" | "blur";

+

+export function BackgroundSettings() {

+  const { activeProject, updateBackgroundType } = useProjectStore();

+

+  // ✅ Good: derive activeTab from activeProject during rendering

+  const activeTab = activeProject?.backgroundType || "color";

+

+  const handleColorSelect = (color: string) => {

+    updateBackgroundType("color", { backgroundColor: color });

+  };

+

+  const handleBlurSelect = (blurIntensity: number) => {

+    updateBackgroundType("blur", { blurIntensity });

+  };

+

+  const tabs = [

+    {

+      label: "Color",

+      value: "color",

+    },

+    {

+      label: "Blur",

+      value: "blur",

+    },

+  ];

+

+  return (

+    <Popover>

+      <PopoverTrigger asChild>

+        <Button

+          variant="text"

+          size="icon"

+          className="!size-4 border border-muted-foreground"

+        >

+          <BackgroundIcon className="!size-3" />

+        </Button>

+      </PopoverTrigger>

+      <PopoverContent className="flex flex-col items-start w-[20rem] h-[16rem] overflow-hidden p-0">

+        <div className="flex items-center justify-between w-full gap-2 z-10 bg-popover p-3">

+          <h2 className="text-sm">Background</h2>

+          <div className="flex items-center gap-2 text-sm">

+            {tabs.map((tab) => (

+              <span

+                key={tab.value}

+                onClick={() => {

+                  // Switch to the background type when clicking tabs

+                  if (tab.value === "color") {

+                    updateBackgroundType("color", {

+                      backgroundColor:

+                        activeProject?.backgroundColor || "#000000",

+                    });

+                  } else {

+                    updateBackgroundType("blur", {

+                      blurIntensity: activeProject?.blurIntensity || 8,

+                    });

+                  }

+                }}

+                className={cn(

+                  "text-muted-foreground cursor-pointer",

+                  activeTab === tab.value && "text-foreground"

+                )}

+              >

+                {tab.label}

+              </span>

+            ))}

+          </div>

+        </div>

+        {activeTab === "color" ? (

+          <ColorView

+            selectedColor={activeProject?.backgroundColor || "#000000"}

+            onColorSelect={handleColorSelect}

+          />

+        ) : (

+          <BlurView

+            selectedBlur={activeProject?.blurIntensity || 8}

+            onBlurSelect={handleBlurSelect}

+          />

+        )}

+      </PopoverContent>

+    </Popover>

+  );

+}

+

+function ColorView({

+  selectedColor,

+  onColorSelect,

+}: {

+  selectedColor: string;

+  onColorSelect: (color: string) => void;

+}) {

+  return (

+    <div className="w-full h-full">

+      <div className="absolute top-8 left-0 w-[calc(100%-1rem)] h-12 bg-gradient-to-b from-popover to-transparent pointer-events-none"></div>

+      <div className="grid grid-cols-4 gap-2 w-full h-full p-3 pt-0 overflow-auto">

+        <div className="w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary flex items-center justify-center">

+          <PipetteIcon className="size-4" />

+        </div>

+        {colors.map((color) => (

+          <ColorItem

+            key={color}

+            color={color}

+            isSelected={color === selectedColor}

+            onClick={() => onColorSelect(color)}

+          />

+        ))}

+      </div>

+    </div>

+  );

+}

+

+function ColorItem({

+  color,

+  isSelected,

+  onClick,

+}: {

+  color: string;

+  isSelected: boolean;

+  onClick: () => void;

+}) {

+  return (

+    <div

+      className={cn(

+        "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary",

+        isSelected && "border-2 border-primary"

+      )}

+      style={{ backgroundColor: color }}

+      onClick={onClick}

+    />

+  );

+}

+

+function BlurView({

+  selectedBlur,

+  onBlurSelect,

+}: {

+  selectedBlur: number;

+  onBlurSelect: (blurIntensity: number) => void;

+}) {

+  const blurLevels = [

+    { label: "Light", value: 4 },

+    { label: "Medium", value: 8 },

+    { label: "Heavy", value: 18 },

+  ];

+  const blurImage =

+    "https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D";

+

+  return (

+    <div className="grid grid-cols-3 gap-2 w-full p-3 pt-0">

+      {blurLevels.map((blur) => (

+        <div

+          key={blur.value}

+          className={cn(

+            "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary relative overflow-hidden",

+            selectedBlur === blur.value && "border-2 border-primary"

+          )}

+          onClick={() => onBlurSelect(blur.value)}

+        >

+          <Image

+            src={blurImage}

+            alt={`Blur preview ${blur.label}`}

+            fill

+            className="object-cover"

+            style={{ filter: `blur(${blur.value}px)` }}

+          />

+          <div className="absolute bottom-1 left-1 right-1 text-center">

+            <span className="text-xs text-white bg-black/50 px-1 rounded">

+              {blur.label}

+            </span>

+          </div>

+        </div>

+      ))}

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index b0b384da..e7df2896 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -1,135 +1,142 @@
-"use client";
-
-import Link from "next/link";
-import { Button } from "./ui/button";
-import { Download, SquarePen } from "lucide-react";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { HeaderBase } from "./header-base";
-import { formatTimeCode } from "@/lib/time";
-import { useProjectStore } from "@/stores/project-store";
-import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
-import { useState, useRef } from "react";
-import { Input } from "@/components/ui/input";
-import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "./ui/breadcrumb";
-
-export function EditorHeader() {
-  const { getTotalDuration } = useTimelineStore();
-  const { activeProject, renameProject } = useProjectStore();
-  const [isEditing, setIsEditing] = useState(false);
-  const [newName, setNewName] = useState(activeProject?.name || "");
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const handleExport = () => {
-    // TODO: Implement export functionality
-    // NOTE: This is already being worked on
-    console.log("Export project");
-  };
-
-  const handleNameEdit = () => {
-    if (!activeProject) return;
-    setNewName(activeProject.name);
-    setIsEditing(true);
-  };
-
-  const handleNameSave = async () => {
-    if (activeProject && newName.trim() && newName !== activeProject.name) {
-      try {
-        await renameProject(activeProject.id, newName.trim());
-      } catch (error) {
-        console.error("Failed to rename project:", error);
-        setNewName(activeProject.name);
-      }
-    }
-    setIsEditing(false);
-  };
-
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") handleNameSave();
-    else if (e.key === "Escape") setIsEditing(false);
-  };
-
-  const leftContent = (
-    <div className="flex items-center gap-2">
-      <Breadcrumb>
-        <BreadcrumbList className="text-current">
-          <BreadcrumbItem>
-            <BreadcrumbLink asChild>
-              <Link
-                href="/projects"
-                className="hover:text-muted-foreground inline-flex items-center"
-              >
-                All Projects
-              </Link>
-            </BreadcrumbLink>
-          </BreadcrumbItem>
-          <BreadcrumbSeparator />
-          <BreadcrumbItem>
-            {isEditing ? (
-              <Input
-                ref={inputRef}
-                className="text-sm font-medium w-40 xl:w-60 px-2 py-1 h-9 truncate"
-                value={newName}
-                onChange={(e) => setNewName(e.target.value)}
-                onBlur={handleNameSave}
-                onKeyDown={handleInputKeyDown}
-                onFocus={(e) => e.target.select()}
-                maxLength={64}
-                aria-label="Project name"
-                autoFocus
-              />
-            ) : (
-              <Button
-                className="text-sm font-medium cursor-pointer hover:text-muted-foreground flex items-center gap-2 group"
-                title="Click to rename"
-                variant="text"
-                tabIndex={0}
-                onClick={handleNameEdit}
-              >
-                <div className="truncate text-ellipsis overflow-clip max-w-40 xl:max-w-60">
-                  {activeProject?.name}
-                </div>
-                <SquarePen className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />
-              </Button>
-            )}
-          </BreadcrumbItem>
-        </BreadcrumbList>
-      </Breadcrumb>
-    </div>
-  );
-
-  const centerContent = (
-    <div className="flex items-center justify-center gap-2 text-xs">
-      <span>
-        {formatTimeCode(
-          getTotalDuration(),
-          "HH:MM:SS:FF",
-          activeProject?.fps || 30
-        )}
-      </span>
-    </div>
-  );
-
-  const rightContent = (
-    <nav className="flex items-center justify-end gap-2">
-      <KeyboardShortcutsHelp />
-      <Button
-        size="sm"
-        variant="primary"
-        className="h-7 text-xs"
-        onClick={handleExport}
-      >
-        <Download className="h-4 w-4" />
-        <span className="text-sm">Export</span>
-      </Button>
-    </nav>
-  );
-
-  return (
-    <HeaderBase
-      leftContent={leftContent}
-      centerContent={centerContent}
-      rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-4 items-center grid grid-cols-3"
-    />
-  );
-}
+"use client";

+

+import { Download, SquarePen } from "lucide-react";

+import Link from "next/link";

+import { type MouseEvent, useRef, useState } from "react";

+import { Input } from "@/components/ui/input";

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

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

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

+import { HeaderBase } from "./header-base";

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

+import {

+  Breadcrumb,

+  BreadcrumbItem,

+  BreadcrumbLink,

+  BreadcrumbList,

+  BreadcrumbSeparator,

+} from "./ui/breadcrumb";

+import { Button } from "./ui/button";

+

+export function EditorHeader() {

+  const { getTotalDuration } = useTimelineStore();

+  const { activeProject, renameProject } = useProjectStore();

+  const [isEditing, setIsEditing] = useState(false);

+  const [newName, setNewName] = useState(activeProject?.name || "");

+  const inputRef = useRef<HTMLInputElement>(null);

+

+  const handleExport = () => {

+    // TODO: Implement export functionality

+    // NOTE: This is already being worked on

+    console.log("Export project");

+  };

+

+  const handleNameEdit = (e: MouseEvent<HTMLButtonElement>) => {

+    if (!activeProject) return;

+    e.stopPropagation();

+    setIsEditing(true);

+    setNewName(activeProject.name);

+  };

+

+  const handleNameSave = async () => {

+    if (activeProject && newName.trim() && newName !== activeProject.name) {

+      try {

+        await renameProject(activeProject.id, newName.trim());

+      } catch (error) {

+        console.error("Failed to rename project:", error);

+        setNewName(activeProject.name);

+      }

+    }

+    setIsEditing(false);

+  };

+

+  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {

+    if (e.key === "Enter") handleNameSave();

+    else if (e.key === "Escape") setIsEditing(false);

+  };

+

+  const leftContent = (

+    <div className="flex items-center gap-2">

+      <Breadcrumb>

+        <BreadcrumbList className="text-current">

+          <BreadcrumbItem>

+            <BreadcrumbLink asChild>

+              <Link

+                href="/projects"

+                className="hover:text-muted-foreground inline-flex items-center"

+              >

+                All Projects

+              </Link>

+            </BreadcrumbLink>

+          </BreadcrumbItem>

+          <BreadcrumbSeparator />

+          <BreadcrumbItem>

+            {isEditing ? (

+              <Input

+                ref={inputRef}

+                className="text-sm font-medium w-40 xl:w-60 px-2 py-1 h-9 truncate"

+                value={newName}

+                onChange={(e) => setNewName(e.target.value)}

+                onBlur={handleNameSave}

+                onKeyDown={handleInputKeyDown}

+                onFocus={(e) => e.target.select()}

+                maxLength={64}

+                aria-label="Project name"

+                autoFocus

+              />

+            ) : (

+              <Button

+                className="text-sm font-medium cursor-pointer hover:text-muted-foreground flex items-center gap-2 group"

+                title="Click to rename"

+                variant="text"

+                tabIndex={0}

+                onClick={handleNameEdit}

+              >

+                <div className="truncate text-ellipsis overflow-clip max-w-40 xl:max-w-60">

+                  {activeProject?.name}

+                </div>

+                <SquarePen className="w-3 h-3 opacity-0 group-hover:opacity-100 transition-opacity" />

+              </Button>

+            )}

+          </BreadcrumbItem>

+        </BreadcrumbList>

+      </Breadcrumb>

+    </div>

+  );

+

+  const centerContent = (

+    <div className="flex items-center justify-center gap-2 text-xs">

+      <span>

+        {formatTimeCode(

+          getTotalDuration(),

+          "HH:MM:SS:FF",

+          activeProject?.fps || 30,

+        )}

+      </span>

+    </div>

+  );

+

+  const rightContent = (

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

+      <KeyboardShortcutsHelp />

+      <Button

+        size="sm"

+        variant="primary"

+        className="h-7 text-xs"

+        onClick={handleExport}

+      >

+        <Download className="h-4 w-4" />

+        <span className="text-sm">Export</span>

+      </Button>

+    </nav>

+  );

+

+  return (

+    <HeaderBase

+      leftContent={leftContent}

+      centerContent={centerContent}

+      rightContent={rightContent}

+      className="bg-background h-[3.2rem] px-4 items-center grid grid-cols-3"

+    />

+  );

+}

diff --git a/apps/web/src/components/editor-provider.tsx b/apps/web/src/components/editor-provider.tsx
index b8e9ae1d..25d040db 100644
--- a/apps/web/src/components/editor-provider.tsx
+++ b/apps/web/src/components/editor-provider.tsx
@@ -1,53 +1,53 @@
-"use client";
-
-import { useEffect } from "react";
-import { Loader2 } from "lucide-react";
-import { useEditorStore } from "@/stores/editor-store";
-import {
-  useKeybindingsListener,
-  useKeybindingDisabler,
-} from "@/hooks/use-keybindings";
-import { useEditorActions } from "@/hooks/use-editor-actions";
-
-interface EditorProviderProps {
-  children: React.ReactNode;
-}
-
-export function EditorProvider({ children }: EditorProviderProps) {
-  const { isInitializing, isPanelsReady, initializeApp } = useEditorStore();
-  const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();
-
-  // Set up action handlers
-  useEditorActions();
-
-  // Set up keybinding listener
-  useKeybindingsListener();
-
-  // Disable keybindings when initializing
-  useEffect(() => {
-    if (isInitializing || !isPanelsReady) {
-      disableKeybindings();
-    } else {
-      enableKeybindings();
-    }
-  }, [isInitializing, isPanelsReady, disableKeybindings, enableKeybindings]);
-
-  useEffect(() => {
-    initializeApp();
-  }, [initializeApp]);
-
-  // Show loading screen while initializing
-  if (isInitializing || !isPanelsReady) {
-    return (
-      <div className="h-screen w-screen flex items-center justify-center bg-background">
-        <div className="flex flex-col items-center gap-4">
-          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-          <p className="text-sm text-muted-foreground">Loading editor...</p>
-        </div>
-      </div>
-    );
-  }
-
-  // App is ready, render children
-  return <>{children}</>;
-}
+"use client";

+

+import { useEffect } from "react";

+import { Loader2 } from "lucide-react";

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

+import {

+  useKeybindingsListener,

+  useKeybindingDisabler,

+} from "@/hooks/use-keybindings";

+import { useEditorActions } from "@/hooks/use-editor-actions";

+

+interface EditorProviderProps {

+  children: React.ReactNode;

+}

+

+export function EditorProvider({ children }: EditorProviderProps) {

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

+  const { disableKeybindings, enableKeybindings } = useKeybindingDisabler();

+

+  // Set up action handlers

+  useEditorActions();

+

+  // Set up keybinding listener

+  useKeybindingsListener();

+

+  // Disable keybindings when initializing

+  useEffect(() => {

+    if (isInitializing || !isPanelsReady) {

+      disableKeybindings();

+    } else {

+      enableKeybindings();

+    }

+  }, [isInitializing, isPanelsReady, disableKeybindings, enableKeybindings]);

+

+  useEffect(() => {

+    initializeApp();

+  }, [initializeApp]);

+

+  // Show loading screen while initializing

+  if (isInitializing || !isPanelsReady) {

+    return (

+      <div className="h-screen w-screen flex items-center justify-center bg-background">

+        <div className="flex flex-col items-center gap-4">

+          <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />

+          <p className="text-sm text-muted-foreground">Loading editor...</p>

+        </div>

+      </div>

+    );

+  }

+

+  // App is ready, render children

+  return <>{children}</>;

+}

diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx
index a673f995..75a5ae06 100644
--- a/apps/web/src/components/editor/audio-waveform.tsx
+++ b/apps/web/src/components/editor/audio-waveform.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect, useRef, useState } from "react";
-import WaveSurfer from "wavesurfer.js";
+import React, { useEffect, useRef, useState } from 'react';
+import WaveSurfer from 'wavesurfer.js';
 
 interface AudioWaveformProps {
   audioUrl: string;
@@ -7,10 +7,10 @@ interface AudioWaveformProps {
   className?: string;
 }
 
-const AudioWaveform: React.FC<AudioWaveformProps> = ({
-  audioUrl,
-  height = 32,
-  className = "",
+const AudioWaveform: React.FC<AudioWaveformProps> = ({ 
+  audioUrl, 
+  height = 32, 
+  className = '' 
 }) => {
   const waveformRef = useRef<HTMLDivElement>(null);
   const wavesurfer = useRef<WaveSurfer | null>(null);
@@ -36,26 +36,26 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
 
         wavesurfer.current = WaveSurfer.create({
           container: waveformRef.current,
-          waveColor: "rgba(255, 255, 255, 0.6)",
-          progressColor: "rgba(255, 255, 255, 0.9)",
-          cursorColor: "transparent",
+          waveColor: 'rgba(255, 255, 255, 0.6)',
+          progressColor: 'rgba(255, 255, 255, 0.9)',
+          cursorColor: 'transparent',
           barWidth: 2,
           barGap: 1,
-          height,
+          height: height,
           normalize: true,
           interact: false,
         });
 
         // Event listeners
-        wavesurfer.current.on("ready", () => {
+        wavesurfer.current.on('ready', () => {
           if (mounted) {
             setIsLoading(false);
             setError(false);
           }
         });
 
-        wavesurfer.current.on("error", (err) => {
-          console.error("WaveSurfer error:", err);
+        wavesurfer.current.on('error', (err) => {
+          console.error('WaveSurfer error:', err);
           if (mounted) {
             setError(true);
             setIsLoading(false);
@@ -63,8 +63,9 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
         });
 
         await wavesurfer.current.load(audioUrl);
+
       } catch (err) {
-        console.error("Failed to initialize WaveSurfer:", err);
+        console.error('Failed to initialize WaveSurfer:', err);
         if (mounted) {
           setError(true);
           setIsLoading(false);
@@ -89,10 +90,7 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
 
   if (error) {
     return (
-      <div
-        className={`flex items-center justify-center ${className}`}
-        style={{ height }}
-      >
+      <div className={`flex items-center justify-center ${className}`} style={{ height }}>
         <span className="text-xs text-foreground/60">Audio unavailable</span>
       </div>
     );
@@ -105,13 +103,13 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
           <span className="text-xs text-foreground/60">Loading...</span>
         </div>
       )}
-      <div
-        ref={waveformRef}
-        className={`w-full transition-opacity duration-200 ${isLoading ? "opacity-0" : "opacity-100"}`}
+      <div 
+        ref={waveformRef} 
+        className={`w-full transition-opacity duration-200 ${isLoading ? 'opacity-0' : 'opacity-100'}`}
         style={{ height }}
       />
     </div>
   );
 };
 
-export default AudioWaveform;
+export default AudioWaveform;
\ No newline at end of file
diff --git a/apps/web/src/components/editor/media-panel/drag-overlay.tsx b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
index e1fd257e..3f3820db 100644
--- a/apps/web/src/components/editor/media-panel/drag-overlay.tsx
+++ b/apps/web/src/components/editor/media-panel/drag-overlay.tsx
@@ -1,57 +1,57 @@
-import { Upload, Plus, Image } from "lucide-react";
-import { Button } from "@/components/ui/button";
-
-interface MediaDragOverlayProps {
-  isVisible: boolean;
-  isProcessing?: boolean;
-  progress?: number;
-  onClick?: () => void;
-  isEmptyState?: boolean;
-}
-
-export function MediaDragOverlay({
-  isVisible,
-  isProcessing = false,
-  progress = 0,
-  onClick,
-  isEmptyState = false,
-}: MediaDragOverlayProps) {
-  if (!isVisible) return null;
-
-  const handleClick = (e: React.MouseEvent) => {
-    if (isProcessing || !onClick) return;
-    e.preventDefault();
-    e.stopPropagation();
-    onClick();
-  };
-
-  return (
-    <div
-      className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"
-      onClick={handleClick}
-    >
-      <div className="flex items-center justify-center">
-        <Upload className="h-10 w-10 text-foreground" />
-      </div>
-
-      <div className="space-y-2">
-        <p className="text-xs text-muted-foreground max-w-sm">
-          {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="w-full bg-muted/50 rounded-full h-2">
-            <div
-              className="bg-primary h-2 rounded-full transition-all duration-300"
-              style={{ width: `${progress}%` }}
-            />
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+import { Upload, Plus, Image } from "lucide-react";

+import { Button } from "@/components/ui/button";

+

+interface MediaDragOverlayProps {

+  isVisible: boolean;

+  isProcessing?: boolean;

+  progress?: number;

+  onClick?: () => void;

+  isEmptyState?: boolean;

+}

+

+export function MediaDragOverlay({

+  isVisible,

+  isProcessing = false,

+  progress = 0,

+  onClick,

+  isEmptyState = false,

+}: MediaDragOverlayProps) {

+  if (!isVisible) return null;

+

+  const handleClick = (e: React.MouseEvent) => {

+    if (isProcessing || !onClick) return;

+    e.preventDefault();

+    e.stopPropagation();

+    onClick();

+  };

+

+  return (

+    <div

+      className="flex flex-col items-center justify-center gap-4 h-full text-center rounded-lg bg-foreground/5 hover:bg-foreground/10 transition-all duration-200 p-8"

+      onClick={handleClick}

+    >

+      <div className="flex items-center justify-center">

+        <Upload className="h-10 w-10 text-foreground" />

+      </div>

+

+      <div className="space-y-2">

+        <p className="text-xs text-muted-foreground max-w-sm">

+          {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="w-full bg-muted/50 rounded-full h-2">

+            <div

+              className="bg-primary h-2 rounded-full transition-all duration-300"

+              style={{ width: `${progress}%` }}

+            />

+          </div>

+        </div>

+      )}

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 2c743618..90ac84f0 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -1,54 +1,54 @@
-"use client";
-
-import { TabBar } from "./tabbar";
-import { MediaView } from "./views/media";
-import { useMediaPanelStore, Tab } from "./store";
-import { TextView } from "./views/text";
-import { AudioView } from "./views/audio";
-
-export function MediaPanel() {
-  const { activeTab } = useMediaPanelStore();
-
-  const viewMap: Record<Tab, React.ReactNode> = {
-    media: <MediaView />,
-    audio: <AudioView />,
-    text: <TextView />,
-    stickers: (
-      <div className="p-4 text-muted-foreground">
-        Stickers view coming soon...
-      </div>
-    ),
-    effects: (
-      <div className="p-4 text-muted-foreground">
-        Effects view coming soon...
-      </div>
-    ),
-    transitions: (
-      <div className="p-4 text-muted-foreground">
-        Transitions view coming soon...
-      </div>
-    ),
-    captions: (
-      <div className="p-4 text-muted-foreground">
-        Captions view coming soon...
-      </div>
-    ),
-    filters: (
-      <div className="p-4 text-muted-foreground">
-        Filters view coming soon...
-      </div>
-    ),
-    adjustment: (
-      <div className="p-4 text-muted-foreground">
-        Adjustment view coming soon...
-      </div>
-    ),
-  };
-
-  return (
-    <div className="h-full flex flex-col bg-panel rounded-sm overflow-hidden">
-      <TabBar />
-      <div className="flex-1">{viewMap[activeTab]}</div>
-    </div>
-  );
-}
+"use client";

+

+import { TabBar } from "./tabbar";

+import { MediaView } from "./views/media";

+import { useMediaPanelStore, Tab } from "./store";

+import { TextView } from "./views/text";

+import { AudioView } from "./views/audio";

+

+export function MediaPanel() {

+  const { activeTab } = useMediaPanelStore();

+

+  const viewMap: Record<Tab, React.ReactNode> = {

+    media: <MediaView />,

+    audio: <AudioView />,

+    text: <TextView />,

+    stickers: (

+      <div className="p-4 text-muted-foreground">

+        Stickers view coming soon...

+      </div>

+    ),

+    effects: (

+      <div className="p-4 text-muted-foreground">

+        Effects view coming soon...

+      </div>

+    ),

+    transitions: (

+      <div className="p-4 text-muted-foreground">

+        Transitions view coming soon...

+      </div>

+    ),

+    captions: (

+      <div className="p-4 text-muted-foreground">

+        Captions view coming soon...

+      </div>

+    ),

+    filters: (

+      <div className="p-4 text-muted-foreground">

+        Filters view coming soon...

+      </div>

+    ),

+    adjustment: (

+      <div className="p-4 text-muted-foreground">

+        Adjustment view coming soon...

+      </div>

+    ),

+  };

+

+  return (

+    <div className="h-full flex flex-col bg-panel rounded-sm overflow-hidden">

+      <TabBar />

+      <div className="flex-1">{viewMap[activeTab]}</div>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts
index c661f51e..9668f285 100644
--- a/apps/web/src/components/editor/media-panel/store.ts
+++ b/apps/web/src/components/editor/media-panel/store.ts
@@ -1,73 +1,73 @@
-import {
-  CaptionsIcon,
-  ArrowLeftRightIcon,
-  SparklesIcon,
-  StickerIcon,
-  MusicIcon,
-  VideoIcon,
-  BlendIcon,
-  SlidersHorizontalIcon,
-  LucideIcon,
-  TypeIcon,
-} from "lucide-react";
-import { create } from "zustand";
-
-export type Tab =
-  | "media"
-  | "audio"
-  | "text"
-  | "stickers"
-  | "effects"
-  | "transitions"
-  | "captions"
-  | "filters"
-  | "adjustment";
-
-export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
-  media: {
-    icon: VideoIcon,
-    label: "Media",
-  },
-  audio: {
-    icon: MusicIcon,
-    label: "Audio",
-  },
-  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",
-  },
-};
-
-interface MediaPanelStore {
-  activeTab: Tab;
-  setActiveTab: (tab: Tab) => void;
-}
-
-export const useMediaPanelStore = create<MediaPanelStore>((set) => ({
-  activeTab: "media",
-  setActiveTab: (tab) => set({ activeTab: tab }),
-}));
+import {

+  CaptionsIcon,

+  ArrowLeftRightIcon,

+  SparklesIcon,

+  StickerIcon,

+  MusicIcon,

+  VideoIcon,

+  BlendIcon,

+  SlidersHorizontalIcon,

+  LucideIcon,

+  TypeIcon,

+} from "lucide-react";

+import { create } from "zustand";

+

+export type Tab =

+  | "media"

+  | "audio"

+  | "text"

+  | "stickers"

+  | "effects"

+  | "transitions"

+  | "captions"

+  | "filters"

+  | "adjustment";

+

+export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {

+  media: {

+    icon: VideoIcon,

+    label: "Media",

+  },

+  audio: {

+    icon: MusicIcon,

+    label: "Audio",

+  },

+  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",

+  },

+};

+

+interface MediaPanelStore {

+  activeTab: Tab;

+  setActiveTab: (tab: Tab) => void;

+}

+

+export const useMediaPanelStore = create<MediaPanelStore>((set) => ({

+  activeTab: "media",

+  setActiveTab: (tab) => set({ activeTab: tab }),

+}));

diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index bce84a46..b05bee7e 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -1,124 +1,124 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { Tab, tabs, useMediaPanelStore } from "./store";
-import { Button } from "@/components/ui/button";
-import { ChevronRight, ChevronLeft } from "lucide-react";
-import { useRef, useState, useEffect } from "react";
-
-export function TabBar() {
-  const { activeTab, setActiveTab } = useMediaPanelStore();
-  const scrollContainerRef = useRef<HTMLDivElement>(null);
-  const [isAtEnd, setIsAtEnd] = useState(false);
-  const [isAtStart, setIsAtStart] = useState(true);
-
-  const scrollToEnd = () => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollTo({
-        left: scrollContainerRef.current.scrollWidth,
-      });
-      setIsAtEnd(true);
-      setIsAtStart(false);
-    }
-  };
-
-  const scrollToStart = () => {
-    if (scrollContainerRef.current) {
-      scrollContainerRef.current.scrollTo({
-        left: 0,
-      });
-      setIsAtStart(true);
-      setIsAtEnd(false);
-    }
-  };
-
-  const checkScrollPosition = () => {
-    if (scrollContainerRef.current) {
-      const { scrollLeft, scrollWidth, clientWidth } =
-        scrollContainerRef.current;
-      const isAtEndNow = scrollLeft + clientWidth >= scrollWidth - 1;
-      const isAtStartNow = scrollLeft <= 1;
-      setIsAtEnd(isAtEndNow);
-      setIsAtStart(isAtStartNow);
-    }
-  };
-
-  // We're using useEffect because we need to sync with external DOM scroll events
-  useEffect(() => {
-    const container = scrollContainerRef.current;
-    if (!container) return;
-
-    checkScrollPosition();
-    container.addEventListener("scroll", checkScrollPosition);
-
-    const resizeObserver = new ResizeObserver(checkScrollPosition);
-    resizeObserver.observe(container);
-
-    return () => {
-      container.removeEventListener("scroll", checkScrollPosition);
-      resizeObserver.disconnect();
-    };
-  }, []);
-
-  return (
-    <div className="flex">
-      <ScrollButton
-        direction="left"
-        onClick={scrollToStart}
-        isVisible={!isAtStart}
-      />
-      <div
-        ref={scrollContainerRef}
-        className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full"
-      >
-        {(Object.keys(tabs) as Tab[]).map((tabKey) => {
-          const tab = tabs[tabKey];
-          return (
-            <div
-              className={cn(
-                "flex flex-col gap-0.5 items-center cursor-pointer",
-                activeTab === tabKey ? "text-primary" : "text-muted-foreground"
-              )}
-              onClick={() => setActiveTab(tabKey)}
-              key={tabKey}
-            >
-              <tab.icon className="!size-[1.1rem]" />
-              <span className="text-[0.65rem]">{tab.label}</span>
-            </div>
-          );
-        })}
-      </div>
-      <ScrollButton
-        direction="right"
-        onClick={scrollToEnd}
-        isVisible={!isAtEnd}
-      />
-    </div>
-  );
-}
-
-function ScrollButton({
-  direction,
-  onClick,
-  isVisible,
-}: {
-  direction: "left" | "right";
-  onClick: () => void;
-  isVisible: boolean;
-}) {
-  if (!isVisible) return null;
-
-  const Icon = direction === "left" ? ChevronLeft : ChevronRight;
-
-  return (
-    <div className="bg-panel-accent w-12 h-full flex items-center justify-center">
-      <Button
-        size="icon"
-        className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"
-        onClick={onClick}
-      >
-        <Icon className="!size-4 text-foreground" />
-      </Button>
-    </div>
-  );
-}
+"use client";

+

+import { cn } from "@/lib/utils";

+import { Tab, tabs, useMediaPanelStore } from "./store";

+import { Button } from "@/components/ui/button";

+import { ChevronRight, ChevronLeft } from "lucide-react";

+import { useRef, useState, useEffect } from "react";

+

+export function TabBar() {

+  const { activeTab, setActiveTab } = useMediaPanelStore();

+  const scrollContainerRef = useRef<HTMLDivElement>(null);

+  const [isAtEnd, setIsAtEnd] = useState(false);

+  const [isAtStart, setIsAtStart] = useState(true);

+

+  const scrollToEnd = () => {

+    if (scrollContainerRef.current) {

+      scrollContainerRef.current.scrollTo({

+        left: scrollContainerRef.current.scrollWidth,

+      });

+      setIsAtEnd(true);

+      setIsAtStart(false);

+    }

+  };

+

+  const scrollToStart = () => {

+    if (scrollContainerRef.current) {

+      scrollContainerRef.current.scrollTo({

+        left: 0,

+      });

+      setIsAtStart(true);

+      setIsAtEnd(false);

+    }

+  };

+

+  const checkScrollPosition = () => {

+    if (scrollContainerRef.current) {

+      const { scrollLeft, scrollWidth, clientWidth } =

+        scrollContainerRef.current;

+      const isAtEndNow = scrollLeft + clientWidth >= scrollWidth - 1;

+      const isAtStartNow = scrollLeft <= 1;

+      setIsAtEnd(isAtEndNow);

+      setIsAtStart(isAtStartNow);

+    }

+  };

+

+  // We're using useEffect because we need to sync with external DOM scroll events

+  useEffect(() => {

+    const container = scrollContainerRef.current;

+    if (!container) return;

+

+    checkScrollPosition();

+    container.addEventListener("scroll", checkScrollPosition);

+

+    const resizeObserver = new ResizeObserver(checkScrollPosition);

+    resizeObserver.observe(container);

+

+    return () => {

+      container.removeEventListener("scroll", checkScrollPosition);

+      resizeObserver.disconnect();

+    };

+  }, []);

+

+  return (

+    <div className="flex">

+      <ScrollButton

+        direction="left"

+        onClick={scrollToStart}

+        isVisible={!isAtStart}

+      />

+      <div

+        ref={scrollContainerRef}

+        className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full"

+      >

+        {(Object.keys(tabs) as Tab[]).map((tabKey) => {

+          const tab = tabs[tabKey];

+          return (

+            <div

+              className={cn(

+                "flex flex-col gap-0.5 items-center cursor-pointer",

+                activeTab === tabKey ? "text-primary" : "text-muted-foreground"

+              )}

+              onClick={() => setActiveTab(tabKey)}

+              key={tabKey}

+            >

+              <tab.icon className="!size-[1.1rem]" />

+              <span className="text-[0.65rem]">{tab.label}</span>

+            </div>

+          );

+        })}

+      </div>

+      <ScrollButton

+        direction="right"

+        onClick={scrollToEnd}

+        isVisible={!isAtEnd}

+      />

+    </div>

+  );

+}

+

+function ScrollButton({

+  direction,

+  onClick,

+  isVisible,

+}: {

+  direction: "left" | "right";

+  onClick: () => void;

+  isVisible: boolean;

+}) {

+  if (!isVisible) return null;

+

+  const Icon = direction === "left" ? ChevronLeft : ChevronRight;

+

+  return (

+    <div className="bg-panel-accent w-12 h-full flex items-center justify-center">

+      <Button

+        size="icon"

+        className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"

+        onClick={onClick}

+      >

+        <Icon className="!size-4 text-foreground" />

+      </Button>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/views/audio.tsx b/apps/web/src/components/editor/media-panel/views/audio.tsx
index ba64d749..7ddf465c 100644
--- a/apps/web/src/components/editor/media-panel/views/audio.tsx
+++ b/apps/web/src/components/editor/media-panel/views/audio.tsx
@@ -1,18 +1,18 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-
-export function AudioView() {
-  const [search, setSearch] = useState("");
-  return (
-    <div className="h-full flex flex-col gap-2 p-4">
-      <Input
-        placeholder="Search songs and artists"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-      />
-      <div className="flex flex-col gap-2" />
-    </div>
-  );
-}
+"use client";

+

+import { Input } from "@/components/ui/input";

+import { useState } from "react";

+

+export function AudioView() {

+  const [search, setSearch] = useState("");

+  return (

+    <div className="h-full flex flex-col gap-2 p-4">

+      <Input

+        placeholder="Search songs and artists"

+        value={search}

+        onChange={(e) => setSearch(e.target.value)}

+      />

+      <div className="flex flex-col gap-2"></div>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index 66d0d00d..0189720f 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -1,298 +1,298 @@
-"use client";
-
-import { useDragDrop } from "@/hooks/use-drag-drop";
-import { processMediaFiles } from "@/lib/media-processing";
-import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { Image, Loader2, Music, Plus, Video } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
-import { toast } from "sonner";
-import { Button } from "@/components/ui/button";
-import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";
-import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
-} from "@/components/ui/context-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-
-export function MediaView() {
-  const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
-  const { activeProject } = useProjectStore();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [searchQuery, setSearchQuery] = useState("");
-  const [mediaFilter, setMediaFilter] = useState("all");
-
-  const processFiles = async (files: FileList | File[]) => {
-    if (!files || files.length === 0) return;
-    if (!activeProject) {
-      toast.error("No active project");
-      return;
-    }
-
-    setIsProcessing(true);
-    setProgress(0);
-    try {
-      // Process files (extract metadata, generate thumbnails, etc.)
-      const processedItems = await processMediaFiles(files, (p) =>
-        setProgress(p)
-      );
-      // Add each processed media item to the store
-      for (const item of processedItems) {
-        await addMediaItem(activeProject.id, item);
-      }
-    } catch (error) {
-      // Show error toast if processing fails
-      console.error("Error processing files:", error);
-      toast.error("Failed to process files");
-    } finally {
-      setIsProcessing(false);
-      setProgress(0);
-    }
-  };
-
-  const { isDragOver, dragProps } = useDragDrop({
-    // When files are dropped, process them
-    onDrop: processFiles,
-  });
-
-  const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker
-
-  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // When files are selected via file picker, process them
-    if (e.target.files) processFiles(e.target.files);
-    e.target.value = ""; // Reset input
-  };
-
-  const handleRemove = async (e: React.MouseEvent, id: string) => {
-    // Remove a media item from the store
-    e.stopPropagation();
-
-    if (!activeProject) {
-      toast.error("No active project");
-      return;
-    }
-
-    // Media store now handles cascade deletion automatically
-    await removeMediaItem(activeProject.id, id);
-  };
-
-  const formatDuration = (duration: number) => {
-    // Format seconds as mm:ss
-    const min = Math.floor(duration / 60);
-    const sec = Math.floor(duration % 60);
-    return `${min}:${sec.toString().padStart(2, "0")}`;
-  };
-
-  const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems);
-
-  useEffect(() => {
-    const filtered = mediaItems.filter((item) => {
-      if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
-        return false;
-      }
-
-      if (
-        searchQuery &&
-        !item.name.toLowerCase().includes(searchQuery.toLowerCase())
-      ) {
-        return false;
-      }
-
-      return true;
-    });
-
-    setFilteredMediaItems(filtered);
-  }, [mediaItems, mediaFilter, searchQuery]);
-
-  const renderPreview = (item: MediaItem) => {
-    // Render a preview for each media type (image, video, audio, unknown)
-    if (item.type === "image") {
-      return (
-        <div className="w-full h-full flex items-center justify-center">
-          <img
-            src={item.url}
-            alt={item.name}
-            className="max-w-full max-h-full object-contain"
-            loading="lazy"
-          />
-        </div>
-      );
-    }
-
-    if (item.type === "video") {
-      if (item.thumbnailUrl) {
-        return (
-          <div className="relative w-full h-full">
-            <img
-              src={item.thumbnailUrl}
-              alt={item.name}
-              className="w-full h-full object-cover rounded"
-              loading="lazy"
-            />
-            <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
-              <Video className="h-6 w-6 text-white drop-shadow-md" />
-            </div>
-            {item.duration && (
-              <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
-                {formatDuration(item.duration)}
-              </div>
-            )}
-          </div>
-        );
-      }
-      return (
-        <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-          <Video className="h-6 w-6 mb-1" />
-          <span className="text-xs">Video</span>
-          {item.duration && (
-            <span className="text-xs opacity-70">
-              {formatDuration(item.duration)}
-            </span>
-          )}
-        </div>
-      );
-    }
-
-    if (item.type === "audio") {
-      return (
-        <div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
-          <Music className="h-6 w-6 mb-1" />
-          <span className="text-xs">Audio</span>
-          {item.duration && (
-            <span className="text-xs opacity-70">
-              {formatDuration(item.duration)}
-            </span>
-          )}
-        </div>
-      );
-    }
-
-    return (
-      <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-        <Image className="h-6 w-6" />
-        <span className="text-xs mt-1">Unknown</span>
-      </div>
-    );
-  };
-
-  return (
-    <>
-      {/* Hidden file input for uploading media */}
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*,video/*,audio/*"
-        multiple
-        className="hidden"
-        onChange={handleFileChange}
-      />
-
-      <div
-        className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}
-        {...dragProps}
-      >
-        <div className="p-3 pb-2">
-          {/* Search and filter controls */}
-          <div className="flex gap-2">
-            <Select value={mediaFilter} onValueChange={setMediaFilter}>
-              <SelectTrigger className="w-[80px] h-9 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="video">Video</SelectItem>
-                <SelectItem value="audio">Audio</SelectItem>
-                <SelectItem value="image">Image</SelectItem>
-              </SelectContent>
-            </Select>
-            <Input
-              type="text"
-              placeholder="Search media..."
-              className="min-w-[60px] flex-1 h-9 text-xs"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
-            <Button
-              variant="outline"
-              size="lg"
-              onClick={handleFileSelect}
-              disabled={isProcessing}
-              className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center h-9"
-            >
-              {isProcessing ? (
-                <Loader2 className="h-4 w-4 animate-spin" />
-              ) : (
-                <Plus className="h-4 w-4" />
-              )}
-            </Button>
-          </div>
-        </div>
-
-        <div className="flex-1 overflow-y-auto p-3 pt-0">
-          {isDragOver || filteredMediaItems.length === 0 ? (
-            <MediaDragOverlay
-              isVisible={true}
-              isProcessing={isProcessing}
-              progress={progress}
-              onClick={handleFileSelect}
-              isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
-            />
-          ) : (
-            <div
-              className="grid gap-2"
-              style={{
-                gridTemplateColumns: "repeat(auto-fill, 160px)",
-              }}
-            >
-              {/* Render each media item as a draggable button */}
-              {filteredMediaItems.map((item) => (
-                <ContextMenu key={item.id}>
-                  <ContextMenuTrigger>
-                    <DraggableMediaItem
-                      name={item.name}
-                      preview={renderPreview(item)}
-                      dragData={{
-                        id: item.id,
-                        type: item.type,
-                        name: item.name,
-                      }}
-                      showPlusOnDrag={false}
-                      onAddToTimeline={(currentTime) =>
-                        useTimelineStore
-                          .getState()
-                          .addMediaAtTime(item, currentTime)
-                      }
-                      rounded={false}
-                    />
-                  </ContextMenuTrigger>
-                  <ContextMenuContent>
-                    <ContextMenuItem>Export clips</ContextMenuItem>
-                    <ContextMenuItem
-                      variant="destructive"
-                      onClick={(e) => handleRemove(e, item.id)}
-                    >
-                      Delete
-                    </ContextMenuItem>
-                  </ContextMenuContent>
-                </ContextMenu>
-              ))}
-            </div>
-          )}
-        </div>
-      </div>
-    </>
-  );
-}
+"use client";

+

+import { useDragDrop } from "@/hooks/use-drag-drop";

+import { processMediaFiles } from "@/lib/media-processing";

+import { useMediaStore, type MediaItem } from "@/stores/media-store";

+import { Image, Loader2, Music, Plus, Video } from "lucide-react";

+import { useEffect, useRef, useState } from "react";

+import { toast } from "sonner";

+import { Button } from "@/components/ui/button";

+import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";

+import {

+  ContextMenu,

+  ContextMenuContent,

+  ContextMenuItem,

+  ContextMenuTrigger,

+} from "@/components/ui/context-menu";

+import { Input } from "@/components/ui/input";

+import {

+  Select,

+  SelectContent,

+  SelectItem,

+  SelectTrigger,

+  SelectValue,

+} from "@/components/ui/select";

+import { DraggableMediaItem } from "@/components/ui/draggable-item";

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

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

+

+export function MediaView() {

+  const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();

+  const { activeProject } = useProjectStore();

+  const fileInputRef = useRef<HTMLInputElement>(null);

+  const [isProcessing, setIsProcessing] = useState(false);

+  const [progress, setProgress] = useState(0);

+  const [searchQuery, setSearchQuery] = useState("");

+  const [mediaFilter, setMediaFilter] = useState("all");

+

+  const processFiles = async (files: FileList | File[]) => {

+    if (!files || files.length === 0) return;

+    if (!activeProject) {

+      toast.error("No active project");

+      return;

+    }

+

+    setIsProcessing(true);

+    setProgress(0);

+    try {

+      // Process files (extract metadata, generate thumbnails, etc.)

+      const processedItems = await processMediaFiles(files, (p) =>

+        setProgress(p)

+      );

+      // Add each processed media item to the store

+      for (const item of processedItems) {

+        await addMediaItem(activeProject.id, item);

+      }

+    } catch (error) {

+      // Show error toast if processing fails

+      console.error("Error processing files:", error);

+      toast.error("Failed to process files");

+    } finally {

+      setIsProcessing(false);

+      setProgress(0);

+    }

+  };

+

+  const { isDragOver, dragProps } = useDragDrop({

+    // When files are dropped, process them

+    onDrop: processFiles,

+  });

+

+  const handleFileSelect = () => fileInputRef.current?.click(); // Open file picker

+

+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {

+    // When files are selected via file picker, process them

+    if (e.target.files) processFiles(e.target.files);

+    e.target.value = ""; // Reset input

+  };

+

+  const handleRemove = async (e: React.MouseEvent, id: string) => {

+    // Remove a media item from the store

+    e.stopPropagation();

+

+    if (!activeProject) {

+      toast.error("No active project");

+      return;

+    }

+

+    // Media store now handles cascade deletion automatically

+    await removeMediaItem(activeProject.id, id);

+  };

+

+  const formatDuration = (duration: number) => {

+    // Format seconds as mm:ss

+    const min = Math.floor(duration / 60);

+    const sec = Math.floor(duration % 60);

+    return `${min}:${sec.toString().padStart(2, "0")}`;

+  };

+

+  const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems);

+

+  useEffect(() => {

+    const filtered = mediaItems.filter((item) => {

+      if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {

+        return false;

+      }

+

+      if (

+        searchQuery &&

+        !item.name.toLowerCase().includes(searchQuery.toLowerCase())

+      ) {

+        return false;

+      }

+

+      return true;

+    });

+

+    setFilteredMediaItems(filtered);

+  }, [mediaItems, mediaFilter, searchQuery]);

+

+  const renderPreview = (item: MediaItem) => {

+    // Render a preview for each media type (image, video, audio, unknown)

+    if (item.type === "image") {

+      return (

+        <div className="w-full h-full flex items-center justify-center">

+          <img

+            src={item.url}

+            alt={item.name}

+            className="max-w-full max-h-full object-contain"

+            loading="lazy"

+          />

+        </div>

+      );

+    }

+

+    if (item.type === "video") {

+      if (item.thumbnailUrl) {

+        return (

+          <div className="relative w-full h-full">

+            <img

+              src={item.thumbnailUrl}

+              alt={item.name}

+              className="w-full h-full object-cover rounded"

+              loading="lazy"

+            />

+            <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">

+              <Video className="h-6 w-6 text-white drop-shadow-md" />

+            </div>

+            {item.duration && (

+              <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">

+                {formatDuration(item.duration)}

+              </div>

+            )}

+          </div>

+        );

+      }

+      return (

+        <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">

+          <Video className="h-6 w-6 mb-1" />

+          <span className="text-xs">Video</span>

+          {item.duration && (

+            <span className="text-xs opacity-70">

+              {formatDuration(item.duration)}

+            </span>

+          )}

+        </div>

+      );

+    }

+

+    if (item.type === "audio") {

+      return (

+        <div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">

+          <Music className="h-6 w-6 mb-1" />

+          <span className="text-xs">Audio</span>

+          {item.duration && (

+            <span className="text-xs opacity-70">

+              {formatDuration(item.duration)}

+            </span>

+          )}

+        </div>

+      );

+    }

+

+    return (

+      <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">

+        <Image className="h-6 w-6" />

+        <span className="text-xs mt-1">Unknown</span>

+      </div>

+    );

+  };

+

+  return (

+    <>

+      {/* Hidden file input for uploading media */}

+      <input

+        ref={fileInputRef}

+        type="file"

+        accept="image/*,video/*,audio/*"

+        multiple

+        className="hidden"

+        onChange={handleFileChange}

+      />

+

+      <div

+        className={`h-full flex flex-col gap-1 transition-colors relative ${isDragOver ? "bg-accent/30" : ""}`}

+        {...dragProps}

+      >

+        <div className="p-3 pb-2">

+          {/* Search and filter controls */}

+          <div className="flex gap-2">

+            <Select value={mediaFilter} onValueChange={setMediaFilter}>

+              <SelectTrigger className="w-[80px] h-9 text-xs">

+                <SelectValue />

+              </SelectTrigger>

+              <SelectContent>

+                <SelectItem value="all">All</SelectItem>

+                <SelectItem value="video">Video</SelectItem>

+                <SelectItem value="audio">Audio</SelectItem>

+                <SelectItem value="image">Image</SelectItem>

+              </SelectContent>

+            </Select>

+            <Input

+              type="text"

+              placeholder="Search media..."

+              className="min-w-[60px] flex-1 h-9 text-xs"

+              value={searchQuery}

+              onChange={(e) => setSearchQuery(e.target.value)}

+            />

+            <Button

+              variant="outline"

+              size="lg"

+              onClick={handleFileSelect}

+              disabled={isProcessing}

+              className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center h-9"

+            >

+              {isProcessing ? (

+                <Loader2 className="h-4 w-4 animate-spin" />

+              ) : (

+                <Plus className="h-4 w-4" />

+              )}

+            </Button>

+          </div>

+        </div>

+

+        <div className="flex-1 overflow-y-auto p-3 pt-0">

+          {isDragOver || filteredMediaItems.length === 0 ? (

+            <MediaDragOverlay

+              isVisible={true}

+              isProcessing={isProcessing}

+              progress={progress}

+              onClick={handleFileSelect}

+              isEmptyState={filteredMediaItems.length === 0 && !isDragOver}

+            />

+          ) : (

+            <div

+              className="grid gap-2"

+              style={{

+                gridTemplateColumns: "repeat(auto-fill, 160px)",

+              }}

+            >

+              {/* Render each media item as a draggable button */}

+              {filteredMediaItems.map((item) => (

+                <ContextMenu key={item.id}>

+                  <ContextMenuTrigger>

+                    <DraggableMediaItem

+                      name={item.name}

+                      preview={renderPreview(item)}

+                      dragData={{

+                        id: item.id,

+                        type: item.type,

+                        name: item.name,

+                      }}

+                      showPlusOnDrag={false}

+                      onAddToTimeline={(currentTime) =>

+                        useTimelineStore

+                          .getState()

+                          .addMediaAtTime(item, currentTime)

+                      }

+                      rounded={false}

+                    />

+                  </ContextMenuTrigger>

+                  <ContextMenuContent>

+                    <ContextMenuItem>Export clips</ContextMenuItem>

+                    <ContextMenuItem

+                      variant="destructive"

+                      onClick={(e) => handleRemove(e, item.id)}

+                    >

+                      Delete

+                    </ContextMenuItem>

+                  </ContextMenuContent>

+                </ContextMenu>

+              ))}

+            </div>

+          )}

+        </div>

+      </div>

+    </>

+  );

+}

diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
index 0686190e..6d0d310b 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/apps/web/src/components/editor/media-panel/views/text.tsx
@@ -1,53 +1,53 @@
-import { DraggableMediaItem } from "@/components/ui/draggable-item";
-import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { type TextElement } from "@/types/timeline";
-
-const textData: TextElement = {
-  id: "default-text",
-  type: "text",
-  name: "Default text",
-  content: "Default text",
-  fontSize: 48,
-  fontFamily: "Arial",
-  color: "#ffffff",
-  backgroundColor: "transparent",
-  textAlign: "center" as const,
-  fontWeight: "normal" as const,
-  fontStyle: "normal" as const,
-  textDecoration: "none" as const,
-  x: 0,
-  y: 0,
-  rotation: 0,
-  opacity: 1,
-  duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-  startTime: 0,
-  trimStart: 0,
-  trimEnd: 0,
-};
-
-export function TextView() {
-  return (
-    <div className="p-4">
-      <DraggableMediaItem
-        name="Default text"
-        preview={
-          <div className="flex items-center justify-center w-full h-full bg-accent rounded">
-            <span className="text-xs select-none">Default text</span>
-          </div>
-        }
-        dragData={{
-          id: textData.id,
-          type: textData.type,
-          name: textData.name,
-          content: textData.content,
-        }}
-        aspectRatio={1}
-        onAddToTimeline={(currentTime) =>
-          useTimelineStore.getState().addTextAtTime(textData, currentTime)
-        }
-        showLabel={false}
-      />
-    </div>
-  );
-}
+import { DraggableMediaItem } from "@/components/ui/draggable-item";

+import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants";

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

+import { type TextElement } from "@/types/timeline";

+

+let textData: TextElement = {

+  id: "default-text",

+  type: "text",

+  name: "Default text",

+  content: "Default text",

+  fontSize: 48,

+  fontFamily: "Arial",

+  color: "#ffffff",

+  backgroundColor: "transparent",

+  textAlign: "center" as const,

+  fontWeight: "normal" as const,

+  fontStyle: "normal" as const,

+  textDecoration: "none" as const,

+  x: 0,

+  y: 0,

+  rotation: 0,

+  opacity: 1,

+  duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,

+  startTime: 0,

+  trimStart: 0,

+  trimEnd: 0,

+};

+

+export function TextView() {

+  return (

+    <div className="p-4">

+      <DraggableMediaItem

+        name="Default text"

+        preview={

+          <div className="flex items-center justify-center w-full h-full bg-accent rounded">

+            <span className="text-xs select-none">Default text</span>

+          </div>

+        }

+        dragData={{

+          id: textData.id,

+          type: textData.type,

+          name: textData.name,

+          content: textData.content,

+        }}

+        aspectRatio={1}

+        onAddToTimeline={(currentTime) =>

+          useTimelineStore.getState().addTextAtTime(textData, currentTime)

+        }

+        showLabel={false}

+      />

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index f09e8462..2cba1374 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -368,7 +368,7 @@ export function PreviewPanel() {
           ref={containerRef}
           className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0"
         >
-          <div className="flex-1" />
+          <div className="flex-1"></div>
           {hasAnyElements ? (
             <div
               ref={previewRef}
@@ -402,7 +402,7 @@ export function PreviewPanel() {
             </div>
           ) : null}
 
-          <div className="flex-1" />
+          <div className="flex-1"></div>
 
           <PreviewToolbar
             hasAnyElements={hasAnyElements}
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 8d69e36a..384f0c5e 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 { MediaElement } from "@/types/timeline";
-
-export function AudioProperties({ element }: { element: MediaElement }) {
-  return <div className="space-y-4 p-5">Audio properties</div>;
-}
+import { MediaElement } from "@/types/timeline";

+

+export function AudioProperties({ element }: { element: MediaElement }) {

+  return <div className="space-y-4 p-5">Audio properties</div>;

+}
\ No newline at end of file
diff --git a/apps/web/src/components/editor/properties-panel/media-properties.tsx b/apps/web/src/components/editor/properties-panel/media-properties.tsx
index 4ea28bb2..c2c514cf 100644
--- a/apps/web/src/components/editor/properties-panel/media-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/media-properties.tsx
@@ -1,5 +1,5 @@
-import { MediaElement } from "@/types/timeline";
-
-export function MediaProperties({ element }: { element: MediaElement }) {
-  return <div className="space-y-4 p-5">Media properties</div>;
-}
+import { MediaElement } from "@/types/timeline";

+

+export function MediaProperties({ element }: { element: MediaElement }) {

+  return <div className="space-y-4 p-5">Media properties</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 804ffb39..beb8c799 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/apps/web/src/components/editor/properties-panel/property-item.tsx
@@ -1,47 +1,47 @@
-import { cn } from "@/lib/utils";
-
-interface PropertyItemProps {
-  direction?: "row" | "column";
-  children: React.ReactNode;
-  className?: string;
-}
-
-export function PropertyItem({
-  direction = "row",
-  children,
-  className,
-}: PropertyItemProps) {
-  return (
-    <div
-      className={cn(
-        "flex gap-2",
-        direction === "row"
-          ? "items-center justify-between gap-6"
-          : "flex-col gap-1",
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function PropertyItemLabel({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <label className={cn("text-xs", className)}>{children}</label>;
-}
-
-export function PropertyItemValue({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("flex-1", className)}>{children}</div>;
-}
+import { cn } from "@/lib/utils";

+

+interface PropertyItemProps {

+  direction?: "row" | "column";

+  children: React.ReactNode;

+  className?: string;

+}

+

+export function PropertyItem({

+  direction = "row",

+  children,

+  className,

+}: PropertyItemProps) {

+  return (

+    <div

+      className={cn(

+        "flex gap-2",

+        direction === "row"

+          ? "items-center justify-between gap-6"

+          : "flex-col gap-1",

+        className

+      )}

+    >

+      {children}

+    </div>

+  );

+}

+

+export function PropertyItemLabel({

+  children,

+  className,

+}: {

+  children: React.ReactNode;

+  className?: string;

+}) {

+  return <label className={cn("text-xs", className)}>{children}</label>;

+}

+

+export function PropertyItemValue({

+  children,

+  className,

+}: {

+  children: React.ReactNode;

+  className?: string;

+}) {

+  return <div className={cn("flex-1", className)}>{children}</div>;

+}

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 c55c3dae..e13dabc8 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -1,76 +1,76 @@
-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 { useTimelineStore } from "@/stores/timeline-store";
-import { Slider } from "@/components/ui/slider";
-import { Input } from "@/components/ui/input";
-import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
-} from "./property-item";
-
-export function TextProperties({
-  element,
-  trackId,
-}: {
-  element: TextElement;
-  trackId: string;
-}) {
-  const { updateTextElement } = useTimelineStore();
-
-  return (
-    <div className="space-y-6 p-5">
-      <Textarea
-        placeholder="Name"
-        defaultValue={element.content}
-        className="min-h-[4.5rem] resize-none bg-background/50"
-        onChange={(e) =>
-          updateTextElement(trackId, element.id, { content: e.target.value })
-        }
-      />
-      <PropertyItem direction="row">
-        <PropertyItemLabel>Font</PropertyItemLabel>
-        <PropertyItemValue>
-          <FontPicker
-            defaultValue={element.fontFamily}
-            onValueChange={(value: FontFamily) =>
-              updateTextElement(trackId, element.id, { fontFamily: value })
-            }
-          />
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="column">
-        <PropertyItemLabel>Font size</PropertyItemLabel>
-        <PropertyItemValue>
-          <div className="flex items-center gap-2">
-            <Slider
-              defaultValue={[element.fontSize]}
-              min={8}
-              max={300}
-              step={1}
-              onValueChange={([value]) =>
-                updateTextElement(trackId, element.id, { fontSize: value })
-              }
-              className="w-full"
-            />
-            <Input
-              type="number"
-              value={element.fontSize}
-              onChange={(e) =>
-                updateTextElement(trackId, element.id, {
-                  fontSize: parseInt(e.target.value),
-                })
-              }
-              className="w-12 !text-xs h-7 rounded-sm text-center
-               [appearance:textfield]
-               [&::-webkit-outer-spin-button]:appearance-none
-               [&::-webkit-inner-spin-button]:appearance-none"
-            />
-          </div>
-        </PropertyItemValue>
-      </PropertyItem>
-    </div>
-  );
-}
+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 { useTimelineStore } from "@/stores/timeline-store";

+import { Slider } from "@/components/ui/slider";

+import { Input } from "@/components/ui/input";

+import {

+  PropertyItem,

+  PropertyItemLabel,

+  PropertyItemValue,

+} from "./property-item";

+

+export function TextProperties({

+  element,

+  trackId,

+}: {

+  element: TextElement;

+  trackId: string;

+}) {

+  const { updateTextElement } = useTimelineStore();

+

+  return (

+    <div className="space-y-6 p-5">

+      <Textarea

+        placeholder="Name"

+        defaultValue={element.content}

+        className="min-h-[4.5rem] resize-none bg-background/50"

+        onChange={(e) =>

+          updateTextElement(trackId, element.id, { content: e.target.value })

+        }

+      />

+      <PropertyItem direction="row">

+        <PropertyItemLabel>Font</PropertyItemLabel>

+        <PropertyItemValue>

+          <FontPicker

+            defaultValue={element.fontFamily}

+            onValueChange={(value: FontFamily) =>

+              updateTextElement(trackId, element.id, { fontFamily: value })

+            }

+          />

+        </PropertyItemValue>

+      </PropertyItem>

+      <PropertyItem direction="column">

+        <PropertyItemLabel>Font size</PropertyItemLabel>

+        <PropertyItemValue>

+          <div className="flex items-center gap-2">

+            <Slider

+              defaultValue={[element.fontSize]}

+              min={8}

+              max={300}

+              step={1}

+              onValueChange={([value]) =>

+                updateTextElement(trackId, element.id, { fontSize: value })

+              }

+              className="w-full"

+            />

+            <Input

+              type="number"

+              value={element.fontSize}

+              onChange={(e) =>

+                updateTextElement(trackId, element.id, {

+                  fontSize: parseInt(e.target.value),

+                })

+              }

+              className="w-12 !text-xs h-7 rounded-sm text-center

+               [appearance:textfield]

+               [&::-webkit-outer-spin-button]:appearance-none

+               [&::-webkit-inner-spin-button]:appearance-none"

+            />

+          </div>

+        </PropertyItemValue>

+      </PropertyItem>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/selection-box.tsx b/apps/web/src/components/editor/selection-box.tsx
index 0a97c6f8..5c452f7c 100644
--- a/apps/web/src/components/editor/selection-box.tsx
+++ b/apps/web/src/components/editor/selection-box.tsx
@@ -1,58 +1,58 @@
-"use client";
-
-import { useEffect, useRef } from "react";
-
-interface SelectionBoxProps {
-  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,
-}: SelectionBoxProps) {
-  const selectionBoxRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (!isActive || !startPos || !currentPos || !containerRef.current) return;
-
-    const container = containerRef.current;
-    const containerRect = container.getBoundingClientRect();
-
-    // Calculate relative positions within the container
-    const startX = startPos.x - containerRect.left;
-    const startY = startPos.y - containerRect.top;
-    const currentX = currentPos.x - containerRect.left;
-    const currentY = currentPos.y - containerRect.top;
-
-    // Calculate the selection rectangle bounds
-    const left = Math.min(startX, currentX);
-    const top = Math.min(startY, currentY);
-    const width = Math.abs(currentX - startX);
-    const height = Math.abs(currentY - startY);
-
-    // Update the selection box position and size
-    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 (!isActive || !startPos || !currentPos) return null;
-
-  return (
-    <div
-      ref={selectionBoxRef}
-      className="absolute pointer-events-none z-50"
-      style={{
-        backgroundColor: "hsl(var(--foreground) / 0.1)",
-      }}
-    />
-  );
-}
+"use client";

+

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

+

+interface SelectionBoxProps {

+  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,

+}: SelectionBoxProps) {

+  const selectionBoxRef = useRef<HTMLDivElement>(null);

+

+  useEffect(() => {

+    if (!isActive || !startPos || !currentPos || !containerRef.current) return;

+

+    const container = containerRef.current;

+    const containerRect = container.getBoundingClientRect();

+

+    // Calculate relative positions within the container

+    const startX = startPos.x - containerRect.left;

+    const startY = startPos.y - containerRect.top;

+    const currentX = currentPos.x - containerRect.left;

+    const currentY = currentPos.y - containerRect.top;

+

+    // Calculate the selection rectangle bounds

+    const left = Math.min(startX, currentX);

+    const top = Math.min(startY, currentY);

+    const width = Math.abs(currentX - startX);

+    const height = Math.abs(currentY - startY);

+

+    // Update the selection box position and size

+    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 (!isActive || !startPos || !currentPos) return null;

+

+  return (

+    <div

+      ref={selectionBoxRef}

+      className="absolute pointer-events-none z-50"

+      style={{

+        backgroundColor: "hsl(var(--foreground) / 0.1)",

+      }}

+    />

+  );

+}

diff --git a/apps/web/src/components/editor/snap-indicator.tsx b/apps/web/src/components/editor/snap-indicator.tsx
index 302a52bb..83a1f678 100644
--- a/apps/web/src/components/editor/snap-indicator.tsx
+++ b/apps/web/src/components/editor/snap-indicator.tsx
@@ -48,7 +48,7 @@ export function SnapIndicator({
         width: "2px",
       }}
     >
-      <div className={"w-0.5 h-full bg-primary/40 opacity-80"} />
+      <div className={`w-0.5 h-full bg-primary/40 opacity-80`} />
     </div>
   );
 }
diff --git a/apps/web/src/components/editor/speed-control.tsx b/apps/web/src/components/editor/speed-control.tsx
index f2b0568d..39281a9a 100644
--- a/apps/web/src/components/editor/speed-control.tsx
+++ b/apps/web/src/components/editor/speed-control.tsx
@@ -43,4 +43,4 @@ export function SpeedControl() {
       </div>
     </div>
   );
-}
+} 
\ No newline at end of file
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index fd2b2a11..2360eb8a 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -278,7 +278,7 @@ export function Timeline() {
         Math.min(
           duration,
           (mouseX + scrollLeft) /
-            (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
+          (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
         )
       );
 
@@ -501,9 +501,7 @@ export function Timeline() {
 
   return (
     <div
-      className={
-        "h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden"
-      }
+      className={`h-full flex flex-col transition-colors duration-200 relative bg-panel rounded-sm overflow-hidden`}
       {...dragProps}
       onMouseEnter={() => setIsInTimeline(true)}
       onMouseLeave={() => setIsInTimeline(false)}
@@ -600,21 +598,19 @@ export function Timeline() {
                     return (
                       <div
                         key={i}
-                        className={`absolute top-0 bottom-0 ${
-                          isMainMarker
+                        className={`absolute top-0 bottom-0 ${isMainMarker
                             ? "border-l border-muted-foreground/40"
                             : "border-l border-muted-foreground/20"
-                        }`}
+                          }`}
                         style={{
                           left: `${time * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
                         }}
                       >
                         <span
-                          className={`absolute top-1 left-1 text-[0.6rem] ${
-                            isMainMarker
+                          className={`absolute top-1 left-1 text-[0.6rem] ${isMainMarker
                               ? "text-muted-foreground font-medium"
                               : "text-muted-foreground/70"
-                          }`}
+                            }`}
                         >
                           {(() => {
                             const formatTime = (seconds: number) => {
@@ -624,14 +620,13 @@ export function Timeline() {
 
                               if (hours > 0) {
                                 return `${hours}:${minutes.toString().padStart(2, "0")}:${Math.floor(secs).toString().padStart(2, "0")}`;
-                              }
-                              if (minutes > 0) {
+                              } else if (minutes > 0) {
                                 return `${minutes}:${Math.floor(secs).toString().padStart(2, "0")}`;
-                              }
-                              if (interval >= 1) {
+                              } else if (interval >= 1) {
                                 return `${Math.floor(secs)}s`;
+                              } else {
+                                return `${secs.toFixed(1)}s`;
                               }
-                              return `${secs.toFixed(1)}s`;
                             };
                             return formatTime(time);
                           })()}
@@ -714,7 +709,7 @@ export function Timeline() {
                 }}
               >
                 {tracks.length === 0 ? (
-                  <div />
+                  <div></div>
                 ) : (
                   <>
                     {tracks.map((track, index) => (
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index 509ce9d7..7a357067 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -1,116 +1,116 @@
-"use client";
-
-import { useRef } from "react";
-import { TimelineTrack } from "@/types/timeline";
-import {
-  TIMELINE_CONSTANTS,
-  getTotalTracksHeight,
-} from "@/constants/timeline-constants";
-import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";
-
-interface TimelinePlayheadProps {
-  currentTime: number;
-  duration: number;
-  zoomLevel: number;
-  tracks: TimelineTrack[];
-  seek: (time: number) => void;
-  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({
-  currentTime,
-  duration,
-  zoomLevel,
-  tracks,
-  seek,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  trackLabelsRef,
-  timelineRef,
-  playheadRef: externalPlayheadRef,
-  isSnappingToPlayhead = false,
-}: TimelinePlayheadProps) {
-  const internalPlayheadRef = useRef<HTMLDivElement>(null);
-  const playheadRef = externalPlayheadRef || internalPlayheadRef;
-  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
-
-  // Use timeline container height minus a few pixels for breathing room
-  const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-  const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
-
-  // Get dynamic track labels width, fallback to 0 if no tracks or no ref
-  const trackLabelsWidth =
-    tracks.length > 0 && trackLabelsRef?.current
-      ? trackLabelsRef.current.offsetWidth
-      : 0;
-  const leftPosition =
-    trackLabelsWidth +
-    playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;
-
-  return (
-    <div
-      ref={playheadRef}
-      className="absolute pointer-events-auto z-[150]"
-      style={{
-        left: `${leftPosition}px`,
-        top: 0,
-        height: `${totalHeight}px`,
-        width: "2px", // Slightly wider for better click target
-      }}
-      onMouseDown={handlePlayheadMouseDown}
-    >
-      {/* The playhead line spanning full height */}
-      <div
-        className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
-      />
-
-      {/* Playhead dot indicator at the top (in ruler area) */}
-      <div
-        className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
-      />
-    </div>
-  );
-}
-
-// Also export a hook for getting ruler handlers
-export function useTimelinePlayheadRuler({
-  currentTime,
-  duration,
-  zoomLevel,
-  seek,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  playheadRef,
-}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {
-  const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({
-    currentTime,
-    duration,
-    zoomLevel,
-    seek,
-    rulerRef,
-    rulerScrollRef,
-    tracksScrollRef,
-    playheadRef,
-  });
-
-  return { handleRulerMouseDown, isDraggingRuler };
-}
-
-export { TimelinePlayhead as default };
+"use client";

+

+import { useRef } from "react";

+import { TimelineTrack } from "@/types/timeline";

+import {

+  TIMELINE_CONSTANTS,

+  getTotalTracksHeight,

+} from "@/constants/timeline-constants";

+import { useTimelinePlayhead } from "@/hooks/use-timeline-playhead";

+

+interface TimelinePlayheadProps {

+  currentTime: number;

+  duration: number;

+  zoomLevel: number;

+  tracks: TimelineTrack[];

+  seek: (time: number) => void;

+  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({

+  currentTime,

+  duration,

+  zoomLevel,

+  tracks,

+  seek,

+  rulerRef,

+  rulerScrollRef,

+  tracksScrollRef,

+  trackLabelsRef,

+  timelineRef,

+  playheadRef: externalPlayheadRef,

+  isSnappingToPlayhead = false,

+}: TimelinePlayheadProps) {

+  const internalPlayheadRef = useRef<HTMLDivElement>(null);

+  const playheadRef = externalPlayheadRef || internalPlayheadRef;

+  const { playheadPosition, handlePlayheadMouseDown } = useTimelinePlayhead({

+    currentTime,

+    duration,

+    zoomLevel,

+    seek,

+    rulerRef,

+    rulerScrollRef,

+    tracksScrollRef,

+    playheadRef,

+  });

+

+  // Use timeline container height minus a few pixels for breathing room

+  const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;

+  const totalHeight = timelineContainerHeight - 8; // 8px padding from edges

+

+  // Get dynamic track labels width, fallback to 0 if no tracks or no ref

+  const trackLabelsWidth =

+    tracks.length > 0 && trackLabelsRef?.current

+      ? trackLabelsRef.current.offsetWidth

+      : 0;

+  const leftPosition =

+    trackLabelsWidth +

+    playheadPosition * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel;

+

+  return (

+    <div

+      ref={playheadRef}

+      className="absolute pointer-events-auto z-[150]"

+      style={{

+        left: `${leftPosition}px`,

+        top: 0,

+        height: `${totalHeight}px`,

+        width: "2px", // Slightly wider for better click target

+      }}

+      onMouseDown={handlePlayheadMouseDown}

+    >

+      {/* The playhead line spanning full height */}

+      <div

+        className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}

+      />

+

+      {/* Playhead dot indicator at the top (in ruler area) */}

+      <div

+        className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}

+      />

+    </div>

+  );

+}

+

+// Also export a hook for getting ruler handlers

+export function useTimelinePlayheadRuler({

+  currentTime,

+  duration,

+  zoomLevel,

+  seek,

+  rulerRef,

+  rulerScrollRef,

+  tracksScrollRef,

+  playheadRef,

+}: Omit<TimelinePlayheadProps, "tracks" | "trackLabelsRef" | "timelineRef">) {

+  const { handleRulerMouseDown, isDraggingRuler } = useTimelinePlayhead({

+    currentTime,

+    duration,

+    zoomLevel,

+    seek,

+    rulerRef,

+    rulerScrollRef,

+    tracksScrollRef,

+    playheadRef,

+  });

+

+  return { handleRulerMouseDown, isDraggingRuler };

+}

+

+export { TimelinePlayhead as default };

diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index 097fc051..82ca0b98 100644
--- a/apps/web/src/components/editor/timeline/timeline-track.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-track.tsx
@@ -1,1151 +1,1151 @@
-"use client";
-
-import { useRef, useState, useEffect } from "react";
-import { useTimelineStore } from "@/stores/timeline-store";
-import { useMediaStore } from "@/stores/media-store";
-import { toast } from "sonner";
-import { TimelineElement } from "./timeline-element";
-import {
-  TimelineTrack,
-  sortTracksByOrder,
-  ensureMainTrack,
-  getMainTrack,
-  canElementGoOnTrack,
-} from "@/types/timeline";
-import { usePlaybackStore } from "@/stores/playback-store";
-import type {
-  TimelineElement as TimelineElementType,
-  DragData,
-} from "@/types/timeline";
-import {
-  snapTimeToFrame,
-  TIMELINE_CONSTANTS,
-} from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
-import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";
-
-export function TimelineTrackContent({
-  track,
-  zoomLevel,
-  onSnapPointChange,
-}: {
-  track: TimelineTrack;
-  zoomLevel: number;
-  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;
-}) {
-  const { mediaItems } = useMediaStore();
-  const {
-    tracks,
-    addTrack,
-    moveElementToTrack,
-    updateElementStartTime,
-    updateElementStartTimeWithRipple,
-    addElementToTrack,
-    selectedElements,
-    selectElement,
-    dragState,
-    startDrag: startDragAction,
-    updateDragTime,
-    endDrag: endDragAction,
-    clearSelectedElements,
-    insertTrackAt,
-    snappingEnabled,
-    rippleEditingEnabled,
-  } = useTimelineStore();
-
-  const { currentTime } = usePlaybackStore();
-
-  // Initialize snapping hook
-  const { snapElementPosition, snapElementEdge } = useTimelineSnapping({
-    snapThreshold: 10,
-    enableElementSnapping: snappingEnabled,
-    enablePlayheadSnapping: snappingEnabled,
-  });
-
-  // Helper function for drop snapping that tries both edges
-  const getDropSnappedTime = (
-    dropTime: number,
-    elementDuration: number,
-    excludeElementId?: string
-  ) => {
-    if (!snappingEnabled) {
-      // Use frame snapping if project has FPS, otherwise use decimal snapping
-      const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
-      return snapTimeToFrame(dropTime, projectFps);
-    }
-
-    // Try snapping both start and end edges for drops
-    const startSnapResult = snapElementEdge(
-      dropTime,
-      elementDuration,
-      tracks,
-      currentTime,
-      zoomLevel,
-      excludeElementId,
-      true // snap to start edge
-    );
-
-    const endSnapResult = snapElementEdge(
-      dropTime,
-      elementDuration,
-      tracks,
-      currentTime,
-      zoomLevel,
-      excludeElementId,
-      false // snap to end edge
-    );
-
-    // Choose the snap result with the smaller distance (closer snap)
-    let bestSnapResult = startSnapResult;
-    if (
-      endSnapResult.snapPoint &&
-      (!startSnapResult.snapPoint ||
-        endSnapResult.snapDistance < startSnapResult.snapDistance)
-    ) {
-      bestSnapResult = endSnapResult;
-    }
-
-    return bestSnapResult.snappedTime;
-  };
-
-  const timelineRef = useRef<HTMLDivElement>(null);
-  const [isDropping, setIsDropping] = useState(false);
-  const [dropPosition, setDropPosition] = useState<number | null>(null);
-  const [wouldOverlap, setWouldOverlap] = useState(false);
-  const dragCounterRef = useRef(0);
-  const [mouseDownLocation, setMouseDownLocation] = useState<{
-    x: number;
-    y: number;
-  } | null>(null);
-
-  // Set up mouse event listeners for drag
-  useEffect(() => {
-    if (!dragState.isDragging) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      if (!timelineRef.current) return;
-
-      // On first mouse move during drag, ensure the element is selected
-      if (dragState.elementId && dragState.trackId) {
-        const isSelected = selectedElements.some(
-          (c) =>
-            c.trackId === dragState.trackId &&
-            c.elementId === dragState.elementId
-        );
-
-        if (!isSelected) {
-          // Select this element (replacing other selections) since we're dragging it
-          selectElement(dragState.trackId, dragState.elementId, false);
-        }
-      }
-
-      const timelineRect = timelineRef.current.getBoundingClientRect();
-      const mouseX = e.clientX - timelineRect.left;
-      const mouseTime = Math.max(
-        0,
-        mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)
-      );
-      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
-
-      // Apply snapping if enabled
-      let finalTime = adjustedTime;
-      let snapPoint = null;
-      if (snappingEnabled) {
-        // Find the element being dragged to get its duration
-        let elementDuration = 5; // fallback duration
-        if (dragState.elementId && dragState.trackId) {
-          const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-          const element = sourceTrack?.elements.find(
-            (e) => e.id === dragState.elementId
-          );
-          if (element) {
-            elementDuration =
-              element.duration - element.trimStart - element.trimEnd;
-          }
-        }
-
-        // Try snapping both start and end edges
-        const startSnapResult = snapElementEdge(
-          adjustedTime,
-          elementDuration,
-          tracks,
-          currentTime,
-          zoomLevel,
-          dragState.elementId || undefined,
-          true // snap to start edge
-        );
-
-        const endSnapResult = snapElementEdge(
-          adjustedTime,
-          elementDuration,
-          tracks,
-          currentTime,
-          zoomLevel,
-          dragState.elementId || undefined,
-          false // snap to end edge
-        );
-
-        // Choose the snap result with the smaller distance (closer snap)
-        let bestSnapResult = startSnapResult;
-        if (
-          endSnapResult.snapPoint &&
-          (!startSnapResult.snapPoint ||
-            endSnapResult.snapDistance < startSnapResult.snapDistance)
-        ) {
-          bestSnapResult = endSnapResult;
-        }
-
-        finalTime = bestSnapResult.snappedTime;
-        snapPoint = bestSnapResult.snapPoint;
-
-        // Notify parent component about snap point change
-        onSnapPointChange?.(snapPoint);
-      } else {
-        // Use frame snapping if project has FPS, otherwise use decimal snapping
-        const projectStore = useProjectStore.getState();
-        const projectFps = projectStore.activeProject?.fps || 30;
-        finalTime = snapTimeToFrame(adjustedTime, projectFps);
-
-        // Clear snap point when not snapping
-        onSnapPointChange?.(null);
-      }
-
-      updateDragTime(finalTime);
-    };
-
-    const handleMouseUp = (e: MouseEvent) => {
-      if (!dragState.elementId || !dragState.trackId) return;
-
-      // If this track initiated the drag, we should handle the mouse up regardless of where it occurs
-      const isTrackThatStartedDrag = dragState.trackId === track.id;
-
-      const timelineRect = timelineRef.current?.getBoundingClientRect();
-      if (!timelineRect) {
-        if (isTrackThatStartedDrag) {
-          if (rippleEditingEnabled) {
-            updateElementStartTimeWithRipple(
-              track.id,
-              dragState.elementId,
-              dragState.currentTime
-            );
-          } else {
-            updateElementStartTime(
-              track.id,
-              dragState.elementId,
-              dragState.currentTime
-            );
-          }
-          endDragAction();
-          // Clear snap point when drag ends
-          onSnapPointChange?.(null);
-        }
-        return;
-      }
-
-      const isMouseOverThisTrack =
-        e.clientY >= timelineRect.top && e.clientY <= timelineRect.bottom;
-
-      if (!isMouseOverThisTrack && !isTrackThatStartedDrag) return;
-
-      const finalTime = dragState.currentTime;
-
-      if (isMouseOverThisTrack) {
-        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-        const movingElement = sourceTrack?.elements.find(
-          (c) => c.id === dragState.elementId
-        );
-
-        if (movingElement) {
-          const movingElementDuration =
-            movingElement.duration -
-            movingElement.trimStart -
-            movingElement.trimEnd;
-          const movingElementEnd = finalTime + movingElementDuration;
-
-          const targetTrack = tracks.find((t) => t.id === track.id);
-          const hasOverlap = targetTrack?.elements.some((existingElement) => {
-            if (
-              dragState.trackId === track.id &&
-              existingElement.id === dragState.elementId
-            ) {
-              return false;
-            }
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-            return finalTime < existingEnd && movingElementEnd > existingStart;
-          });
-
-          if (!hasOverlap) {
-            if (dragState.trackId === track.id) {
-              if (rippleEditingEnabled) {
-                updateElementStartTimeWithRipple(
-                  track.id,
-                  dragState.elementId,
-                  finalTime
-                );
-              } else {
-                updateElementStartTime(
-                  track.id,
-                  dragState.elementId,
-                  finalTime
-                );
-              }
-            } else {
-              moveElementToTrack(
-                dragState.trackId,
-                track.id,
-                dragState.elementId
-              );
-              requestAnimationFrame(() => {
-                if (rippleEditingEnabled) {
-                  updateElementStartTimeWithRipple(
-                    track.id,
-                    dragState.elementId!,
-                    finalTime
-                  );
-                } else {
-                  updateElementStartTime(
-                    track.id,
-                    dragState.elementId!,
-                    finalTime
-                  );
-                }
-              });
-            }
-          }
-        }
-      } else if (isTrackThatStartedDrag) {
-        // Mouse is not over this track, but this track started the drag
-        // This means user released over ruler/outside - update position within same track
-        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
-        const movingElement = sourceTrack?.elements.find(
-          (c) => c.id === dragState.elementId
-        );
-
-        if (movingElement) {
-          const movingElementDuration =
-            movingElement.duration -
-            movingElement.trimStart -
-            movingElement.trimEnd;
-          const movingElementEnd = finalTime + movingElementDuration;
-
-          const hasOverlap = track.elements.some((existingElement) => {
-            if (existingElement.id === dragState.elementId) {
-              return false;
-            }
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-            return finalTime < existingEnd && movingElementEnd > existingStart;
-          });
-
-          if (!hasOverlap) {
-            if (rippleEditingEnabled) {
-              updateElementStartTimeWithRipple(
-                track.id,
-                dragState.elementId,
-                finalTime
-              );
-            } else {
-              updateElementStartTime(track.id, dragState.elementId, finalTime);
-            }
-          }
-        }
-      }
-
-      if (isTrackThatStartedDrag) {
-        endDragAction();
-        // Clear snap point when drag ends
-        onSnapPointChange?.(null);
-      }
-    };
-
-    document.addEventListener("mousemove", handleMouseMove);
-    document.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      document.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [
-    dragState.isDragging,
-    dragState.clickOffsetTime,
-    dragState.elementId,
-    dragState.trackId,
-    dragState.currentTime,
-    zoomLevel,
-    tracks,
-    track.id,
-    updateDragTime,
-    updateElementStartTime,
-    moveElementToTrack,
-    endDragAction,
-    selectedElements,
-    selectElement,
-    onSnapPointChange,
-  ]);
-
-  const handleElementMouseDown = (
-    e: React.MouseEvent,
-    element: TimelineElementType
-  ) => {
-    setMouseDownLocation({ x: e.clientX, y: e.clientY });
-
-    // Detect right-click (button 2) and handle selection without starting drag
-    const isRightClick = e.button === 2;
-    const isMultiSelect = e.metaKey || e.ctrlKey || e.shiftKey;
-
-    if (isRightClick) {
-      // Handle right-click selection
-      const isSelected = selectedElements.some(
-        (c) => c.trackId === track.id && c.elementId === element.id
-      );
-
-      // If element is not selected, select it (keep other selections if multi-select)
-      if (!isSelected) {
-        selectElement(track.id, element.id, isMultiSelect);
-      }
-      // If element is already selected, keep it selected
-
-      // Don't start drag action for right-clicks
-      return;
-    }
-
-    // Handle multi-selection for left-click with modifiers
-    if (isMultiSelect) {
-      selectElement(track.id, element.id, true);
-    }
-
-    // Calculate the offset from the left edge of the element to where the user clicked
-    const elementElement = e.currentTarget as HTMLElement;
-    const elementRect = elementElement.getBoundingClientRect();
-    const clickOffsetX = e.clientX - elementRect.left;
-    const clickOffsetTime =
-      clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-
-    startDragAction(
-      element.id,
-      track.id,
-      e.clientX,
-      element.startTime,
-      clickOffsetTime
-    );
-  };
-
-  const handleElementClick = (
-    e: React.MouseEvent,
-    element: TimelineElementType
-  ) => {
-    e.stopPropagation();
-
-    // Check if mouse moved significantly
-    if (mouseDownLocation) {
-      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);
-      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);
-      // If it moved more than a few pixels, consider it a drag and not a click.
-      if (deltaX > 5 || deltaY > 5) {
-        setMouseDownLocation(null); // Reset for next interaction
-        return;
-      }
-    }
-
-    // Skip selection logic for multi-selection (handled in mousedown)
-    if (e.metaKey || e.ctrlKey || e.shiftKey) {
-      return;
-    }
-
-    // Handle single selection
-    const isSelected = selectedElements.some(
-      (c) => c.trackId === track.id && c.elementId === element.id
-    );
-
-    if (!isSelected) {
-      // If element is not selected, select it (replacing other selections)
-      selectElement(track.id, element.id, false);
-    }
-    // If element is already selected, keep it selected (do nothing)
-  };
-
-  const handleTrackDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Handle both timeline elements and media items
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    // Calculate drop position for overlap checking
-    const trackContainer = e.currentTarget.querySelector(
-      ".track-elements-container"
-    ) as HTMLElement;
-    let dropTime = 0;
-    if (trackContainer) {
-      const rect = trackContainer.getBoundingClientRect();
-      const mouseX = Math.max(0, e.clientX - rect.left);
-      dropTime = mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-    }
-
-    // Check for potential overlaps and show appropriate feedback
-    let wouldOverlap = false;
-
-    if (hasMediaItem) {
-      try {
-        const mediaItemData = e.dataTransfer.getData(
-          "application/x-media-item"
-        );
-        if (mediaItemData) {
-          const dragData: DragData = JSON.parse(mediaItemData);
-
-          if (dragData.type === "text") {
-            // Text elements have default duration of 5 seconds
-            const newElementDuration = 5;
-            const snappedTime = getDropSnappedTime(
-              dropTime,
-              newElementDuration
-            );
-            const newElementEnd = snappedTime + newElementDuration;
-
-            wouldOverlap = track.elements.some((existingElement) => {
-              const existingStart = existingElement.startTime;
-              const existingEnd =
-                existingElement.startTime +
-                (existingElement.duration -
-                  existingElement.trimStart -
-                  existingElement.trimEnd);
-              return snappedTime < existingEnd && newElementEnd > existingStart;
-            });
-          } else {
-            // Media elements
-            const mediaItem = mediaItems.find(
-              (item) => item.id === dragData.id
-            );
-            if (mediaItem) {
-              const newElementDuration = mediaItem.duration || 5;
-              const snappedTime = getDropSnappedTime(
-                dropTime,
-                newElementDuration
-              );
-              const newElementEnd = snappedTime + newElementDuration;
-
-              wouldOverlap = track.elements.some((existingElement) => {
-                const existingStart = existingElement.startTime;
-                const existingEnd =
-                  existingElement.startTime +
-                  (existingElement.duration -
-                    existingElement.trimStart -
-                    existingElement.trimEnd);
-                return (
-                  snappedTime < existingEnd && newElementEnd > existingStart
-                );
-              });
-            }
-          }
-        }
-      } catch (error) {
-        // Continue with default behavior
-      }
-    } else if (hasTimelineElement) {
-      try {
-        const timelineElementData = e.dataTransfer.getData(
-          "application/x-timeline-element"
-        );
-        if (timelineElementData) {
-          const { elementId, trackId: fromTrackId } =
-            JSON.parse(timelineElementData);
-          const sourceTrack = tracks.find(
-            (t: TimelineTrack) => t.id === fromTrackId
-          );
-          const movingElement = sourceTrack?.elements.find(
-            (c: any) => c.id === elementId
-          );
-
-          if (movingElement) {
-            const movingElementDuration =
-              movingElement.duration -
-              movingElement.trimStart -
-              movingElement.trimEnd;
-            const snappedTime = getDropSnappedTime(
-              dropTime,
-              movingElementDuration,
-              elementId
-            );
-            const movingElementEnd = snappedTime + movingElementDuration;
-
-            wouldOverlap = track.elements.some((existingElement) => {
-              if (fromTrackId === track.id && existingElement.id === elementId)
-                return false;
-
-              const existingStart = existingElement.startTime;
-              const existingEnd =
-                existingElement.startTime +
-                (existingElement.duration -
-                  existingElement.trimStart -
-                  existingElement.trimEnd);
-              return (
-                snappedTime < existingEnd && movingElementEnd > existingStart
-              );
-            });
-          }
-        }
-      } catch (error) {
-        // Continue with default behavior
-      }
-    }
-
-    if (wouldOverlap) {
-      e.dataTransfer.dropEffect = "none";
-      setWouldOverlap(true);
-      // Use default duration for position indicator
-      setDropPosition(getDropSnappedTime(dropTime, 5));
-      return;
-    }
-
-    e.dataTransfer.dropEffect = hasTimelineElement ? "move" : "copy";
-    setWouldOverlap(false);
-    // Use default duration for position indicator
-    setDropPosition(getDropSnappedTime(dropTime, 5));
-  };
-
-  const handleTrackDragEnter = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    dragCounterRef.current++;
-    setIsDropping(true);
-  };
-
-  const handleTrackDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    dragCounterRef.current--;
-
-    if (dragCounterRef.current === 0) {
-      setIsDropping(false);
-      setWouldOverlap(false);
-      setDropPosition(null);
-    }
-  };
-
-  const handleTrackDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    // Debug logging
-    console.log(
-      JSON.stringify({
-        message: "Drop event started in timeline track",
-        dataTransferTypes: Array.from(e.dataTransfer.types),
-        trackId: track.id,
-        trackType: track.type,
-      })
-    );
-
-    // Reset all drag states
-    dragCounterRef.current = 0;
-    setIsDropping(false);
-    setWouldOverlap(false);
-
-    const hasTimelineElement = e.dataTransfer.types.includes(
-      "application/x-timeline-element"
-    );
-    const hasMediaItem = e.dataTransfer.types.includes(
-      "application/x-media-item"
-    );
-
-    if (!hasTimelineElement && !hasMediaItem) return;
-
-    const trackContainer = e.currentTarget.querySelector(
-      ".track-elements-container"
-    ) as HTMLElement;
-    if (!trackContainer) return;
-
-    const rect = trackContainer.getBoundingClientRect();
-    const mouseX = Math.max(0, e.clientX - rect.left);
-    const mouseY = e.clientY - rect.top; // Get Y position relative to this track
-    const newStartTime =
-      mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);
-    const projectStore = useProjectStore.getState();
-    const projectFps = projectStore.activeProject?.fps || 30;
-    const snappedTime = snapTimeToFrame(newStartTime, projectFps);
-
-    // Calculate drop position relative to tracks
-    const currentTrackIndex = tracks.findIndex((t) => t.id === track.id);
-
-    // Determine drop zone within the track (top 20px, middle 20px, bottom 20px)
-    let dropPosition: "above" | "on" | "below";
-    if (mouseY < 20) {
-      dropPosition = "above";
-    } else if (mouseY > 40) {
-      dropPosition = "below";
-    } else {
-      dropPosition = "on";
-    }
-
-    try {
-      if (hasTimelineElement) {
-        // Handle timeline element movement
-        const timelineElementData = e.dataTransfer.getData(
-          "application/x-timeline-element"
-        );
-        if (!timelineElementData) return;
-
-        const {
-          elementId,
-          trackId: fromTrackId,
-          clickOffsetTime = 0,
-        } = JSON.parse(timelineElementData);
-
-        // Find the element being moved
-        const sourceTrack = tracks.find(
-          (t: TimelineTrack) => t.id === fromTrackId
-        );
-        const movingElement = sourceTrack?.elements.find(
-          (c: TimelineElementType) => c.id === elementId
-        );
-
-        if (!movingElement) {
-          toast.error("Element not found");
-          return;
-        }
-
-        // Check for overlaps with existing elements (excluding the moving element itself)
-        const movingElementDuration =
-          movingElement.duration -
-          movingElement.trimStart -
-          movingElement.trimEnd;
-
-        // Adjust position based on where user clicked on the element
-        const adjustedStartTime = newStartTime - clickOffsetTime;
-        const snappedStartTime = getDropSnappedTime(
-          adjustedStartTime,
-          movingElementDuration,
-          elementId
-        );
-        const finalStartTime = Math.max(0, snappedStartTime);
-        const movingElementEnd = finalStartTime + movingElementDuration;
-
-        const hasOverlap = track.elements.some((existingElement) => {
-          // Skip the element being moved if it's on the same track
-          if (fromTrackId === track.id && existingElement.id === elementId)
-            return false;
-
-          const existingStart = existingElement.startTime;
-          const existingEnd =
-            existingElement.startTime +
-            (existingElement.duration -
-              existingElement.trimStart -
-              existingElement.trimEnd);
-
-          // Check if elements overlap
-          return (
-            finalStartTime < existingEnd && movingElementEnd > existingStart
-          );
-        });
-
-        if (hasOverlap) {
-          toast.error(
-            "Cannot move element here - it would overlap with existing elements"
-          );
-          return;
-        }
-
-        if (fromTrackId === track.id) {
-          // Moving within same track
-          if (rippleEditingEnabled) {
-            updateElementStartTimeWithRipple(
-              track.id,
-              elementId,
-              finalStartTime
-            );
-          } else {
-            updateElementStartTime(track.id, elementId, finalStartTime);
-          }
-        } else {
-          // Moving to different track
-          moveElementToTrack(fromTrackId, track.id, elementId);
-          requestAnimationFrame(() => {
-            if (rippleEditingEnabled) {
-              updateElementStartTimeWithRipple(
-                track.id,
-                elementId,
-                finalStartTime
-              );
-            } else {
-              updateElementStartTime(track.id, elementId, finalStartTime);
-            }
-          });
-        }
-      } else if (hasMediaItem) {
-        // Handle media item drop
-        const mediaItemData = e.dataTransfer.getData(
-          "application/x-media-item"
-        );
-        if (!mediaItemData) return;
-
-        const dragData: DragData = JSON.parse(mediaItemData);
-
-        if (dragData.type === "text") {
-          let targetTrackId = track.id;
-          let targetTrack = track;
-
-          // Handle position-aware track creation for text
-          if (track.type !== "text" || dropPosition !== "on") {
-            // Text tracks should go above the main track
-            const mainTrack = getMainTrack(tracks);
-            let insertIndex: number;
-
-            if (dropPosition === "above") {
-              insertIndex = currentTrackIndex;
-            } else if (dropPosition === "below") {
-              insertIndex = currentTrackIndex + 1;
-            } else {
-              // dropPosition === "on" but track is not text type
-              // Insert above main track if main track exists, otherwise at top
-              if (mainTrack) {
-                const mainTrackIndex = tracks.findIndex(
-                  (t) => t.id === mainTrack.id
-                );
-                insertIndex = mainTrackIndex;
-              } else {
-                insertIndex = 0; // Top of timeline
-              }
-            }
-
-            targetTrackId = insertTrackAt("text", insertIndex);
-            // Get the updated tracks array after creating the new track
-            const updatedTracks = useTimelineStore.getState().tracks;
-            const newTargetTrack = updatedTracks.find(
-              (t) => t.id === targetTrackId
-            );
-            if (!newTargetTrack) return;
-            targetTrack = newTargetTrack;
-          }
-
-          // Check for overlaps with existing elements in target track
-          const newElementDuration = 5; // Default text duration
-          const textSnappedTime = getDropSnappedTime(
-            newStartTime,
-            newElementDuration
-          );
-          const newElementEnd = textSnappedTime + newElementDuration;
-
-          const hasOverlap = targetTrack.elements.some((existingElement) => {
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-
-            // Check if elements overlap
-            return (
-              textSnappedTime < existingEnd && newElementEnd > existingStart
-            );
-          });
-
-          if (hasOverlap) {
-            toast.error(
-              "Cannot place element here - it would overlap with existing elements"
-            );
-            return;
-          }
-
-          addElementToTrack(targetTrackId, {
-            type: "text",
-            name: dragData.name || "Text",
-            content: dragData.content || "Default Text",
-            duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,
-            startTime: textSnappedTime,
-            trimStart: 0,
-            trimEnd: 0,
-            fontSize: 48,
-            fontFamily: "Arial",
-            color: "#ffffff",
-            backgroundColor: "transparent",
-            textAlign: "center",
-            fontWeight: "normal",
-            fontStyle: "normal",
-            textDecoration: "none",
-            x: 0,
-            y: 0,
-            rotation: 0,
-            opacity: 1,
-          });
-        } else {
-          // Handle media items
-          const mediaItem = mediaItems.find((item) => item.id === dragData.id);
-
-          if (!mediaItem) {
-            toast.error("Media item not found");
-            return;
-          }
-
-          let targetTrackId = track.id;
-
-          // Check if track type is compatible
-          const isVideoOrImage =
-            dragData.type === "video" || dragData.type === "image";
-          const isAudio = dragData.type === "audio";
-          const isCompatible = isVideoOrImage
-            ? canElementGoOnTrack("media", track.type)
-            : isAudio
-              ? canElementGoOnTrack("media", track.type)
-              : false;
-
-          let targetTrack = tracks.find((t) => t.id === targetTrackId);
-
-          // Handle position-aware track creation for media elements
-          if (!isCompatible || dropPosition !== "on") {
-            if (isVideoOrImage) {
-              // For video/image, check if we need a main track or additional media track
-              const mainTrack = getMainTrack(tracks);
-
-              if (!mainTrack) {
-                // No main track exists, create it
-                targetTrackId = addTrack("media");
-                const updatedTracks = useTimelineStore.getState().tracks;
-                const newTargetTrack = updatedTracks.find(
-                  (t) => t.id === targetTrackId
-                );
-                if (!newTargetTrack) return;
-                targetTrack = newTargetTrack;
-              } else if (
-                mainTrack.elements.length === 0 &&
-                dropPosition === "on"
-              ) {
-                // Main track exists and is empty, use it
-                targetTrackId = mainTrack.id;
-                targetTrack = mainTrack;
-              } else {
-                // Create new media track
-                let insertIndex: number;
-
-                if (dropPosition === "above") {
-                  insertIndex = currentTrackIndex;
-                } else if (dropPosition === "below") {
-                  insertIndex = currentTrackIndex + 1;
-                } else {
-                  // Insert above main track
-                  const mainTrackIndex = tracks.findIndex(
-                    (t) => t.id === mainTrack.id
-                  );
-                  insertIndex = mainTrackIndex;
-                }
-
-                targetTrackId = insertTrackAt("media", insertIndex);
-                const updatedTracks = useTimelineStore.getState().tracks;
-                const newTargetTrack = updatedTracks.find(
-                  (t) => t.id === targetTrackId
-                );
-                if (!newTargetTrack) return;
-                targetTrack = newTargetTrack;
-              }
-            } else if (isAudio) {
-              // Audio tracks go at the bottom
-              const mainTrack = getMainTrack(tracks);
-              let insertIndex: number;
-
-              if (dropPosition === "above") {
-                insertIndex = currentTrackIndex;
-              } else if (dropPosition === "below") {
-                insertIndex = currentTrackIndex + 1;
-              } else {
-                // Insert after main track (bottom area)
-                if (mainTrack) {
-                  const mainTrackIndex = tracks.findIndex(
-                    (t) => t.id === mainTrack.id
-                  );
-                  insertIndex = mainTrackIndex + 1;
-                } else {
-                  insertIndex = tracks.length; // Bottom of timeline
-                }
-              }
-
-              targetTrackId = insertTrackAt("audio", insertIndex);
-              const updatedTracks = useTimelineStore.getState().tracks;
-              const newTargetTrack = updatedTracks.find(
-                (t) => t.id === targetTrackId
-              );
-              if (!newTargetTrack) return;
-              targetTrack = newTargetTrack;
-            }
-          }
-
-          if (!targetTrack) return;
-
-          // Check for overlaps with existing elements in target track
-          const newElementDuration = mediaItem.duration || 5;
-          const mediaSnappedTime = getDropSnappedTime(
-            newStartTime,
-            newElementDuration
-          );
-          const newElementEnd = mediaSnappedTime + newElementDuration;
-
-          const hasOverlap = targetTrack.elements.some((existingElement) => {
-            const existingStart = existingElement.startTime;
-            const existingEnd =
-              existingElement.startTime +
-              (existingElement.duration -
-                existingElement.trimStart -
-                existingElement.trimEnd);
-
-            // Check if elements overlap
-            return (
-              mediaSnappedTime < existingEnd && newElementEnd > existingStart
-            );
-          });
-
-          if (hasOverlap) {
-            toast.error(
-              "Cannot place element here - it would overlap with existing elements"
-            );
-            return;
-          }
-
-          addElementToTrack(targetTrackId, {
-            type: "media",
-            mediaId: mediaItem.id,
-            name: mediaItem.name,
-            duration: mediaItem.duration || 5,
-            startTime: mediaSnappedTime,
-            trimStart: 0,
-            trimEnd: 0,
-          });
-        }
-      }
-    } catch (error) {
-      console.error("Error handling drop:", error);
-      toast.error("Failed to add media to track");
-    }
-  };
-
-  return (
-    <div
-      className="w-full h-full hover:bg-muted/20"
-      onClick={(e) => {
-        // If clicking empty area (not on an element), deselect all elements
-        if (!(e.target as HTMLElement).closest(".timeline-element")) {
-          clearSelectedElements();
-        }
-      }}
-      onDragOver={handleTrackDragOver}
-      onDragEnter={handleTrackDragEnter}
-      onDragLeave={handleTrackDragLeave}
-      onDrop={handleTrackDrop}
-    >
-      <div
-        ref={timelineRef}
-        className="h-full relative track-elements-container min-w-full"
-      >
-        {track.elements.length === 0 ? (
-          <div
-            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
-              isDropping
-                ? wouldOverlap
-                  ? "border-red-500 bg-red-500/10 text-red-600"
-                  : "border-blue-500 bg-blue-500/10 text-blue-600"
-                : "border-muted/30"
-            }`}
-          >
-            {isDropping
-              ? wouldOverlap
-                ? "Cannot drop - would overlap"
-                : "Drop element here"
-              : ""}
-          </div>
-        ) : (
-          <>
-            {track.elements.map((element) => {
-              const isSelected = selectedElements.some(
-                (c) => c.trackId === track.id && c.elementId === element.id
-              );
-
-              const handleElementSplit = () => {
-                const { currentTime } = usePlaybackStore();
-                const { splitElement } = useTimelineStore();
-                const splitTime = currentTime;
-                const effectiveStart = element.startTime;
-                const effectiveEnd =
-                  element.startTime +
-                  (element.duration - element.trimStart - element.trimEnd);
-
-                if (splitTime > effectiveStart && splitTime < effectiveEnd) {
-                  const secondElementId = splitElement(
-                    track.id,
-                    element.id,
-                    splitTime
-                  );
-                  if (!secondElementId) {
-                    toast.error("Failed to split element");
-                  }
-                } else {
-                  toast.error("Playhead must be within element to split");
-                }
-              };
-
-              const handleElementDuplicate = () => {
-                const { addElementToTrack } = useTimelineStore.getState();
-                const { id, ...elementWithoutId } = element;
-                addElementToTrack(track.id, {
-                  ...elementWithoutId,
-                  name: element.name + " (copy)",
-                  startTime:
-                    element.startTime +
-                    (element.duration - element.trimStart - element.trimEnd) +
-                    0.1,
-                });
-              };
-
-              const handleElementDelete = () => {
-                const { removeElementFromTrack } = useTimelineStore.getState();
-                removeElementFromTrack(track.id, element.id);
-              };
-
-              return (
-                <TimelineElement
-                  key={element.id}
-                  element={element}
-                  track={track}
-                  zoomLevel={zoomLevel}
-                  isSelected={isSelected}
-                  onElementMouseDown={handleElementMouseDown}
-                  onElementClick={handleElementClick}
-                />
-              );
-            })}
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
+"use client";

+

+import { useRef, useState, useEffect } from "react";

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

+import { useMediaStore } from "@/stores/media-store";

+import { toast } from "sonner";

+import { TimelineElement } from "./timeline-element";

+import {

+  TimelineTrack,

+  sortTracksByOrder,

+  ensureMainTrack,

+  getMainTrack,

+  canElementGoOnTrack,

+} from "@/types/timeline";

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

+import type {

+  TimelineElement as TimelineElementType,

+  DragData,

+} from "@/types/timeline";

+import {

+  snapTimeToFrame,

+  TIMELINE_CONSTANTS,

+} from "@/constants/timeline-constants";

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

+import { useTimelineSnapping, SnapPoint } from "@/hooks/use-timeline-snapping";

+

+export function TimelineTrackContent({

+  track,

+  zoomLevel,

+  onSnapPointChange,

+}: {

+  track: TimelineTrack;

+  zoomLevel: number;

+  onSnapPointChange?: (snapPoint: SnapPoint | null) => void;

+}) {

+  const { mediaItems } = useMediaStore();

+  const {

+    tracks,

+    addTrack,

+    moveElementToTrack,

+    updateElementStartTime,

+    updateElementStartTimeWithRipple,

+    addElementToTrack,

+    selectedElements,

+    selectElement,

+    dragState,

+    startDrag: startDragAction,

+    updateDragTime,

+    endDrag: endDragAction,

+    clearSelectedElements,

+    insertTrackAt,

+    snappingEnabled,

+    rippleEditingEnabled,

+  } = useTimelineStore();

+

+  const { currentTime } = usePlaybackStore();

+

+  // Initialize snapping hook

+  const { snapElementPosition, snapElementEdge } = useTimelineSnapping({

+    snapThreshold: 10,

+    enableElementSnapping: snappingEnabled,

+    enablePlayheadSnapping: snappingEnabled,

+  });

+

+  // Helper function for drop snapping that tries both edges

+  const getDropSnappedTime = (

+    dropTime: number,

+    elementDuration: number,

+    excludeElementId?: string

+  ) => {

+    if (!snappingEnabled) {

+      // Use frame snapping if project has FPS, otherwise use decimal snapping

+      const projectStore = useProjectStore.getState();

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

+      return snapTimeToFrame(dropTime, projectFps);

+    }

+

+    // Try snapping both start and end edges for drops

+    const startSnapResult = snapElementEdge(

+      dropTime,

+      elementDuration,

+      tracks,

+      currentTime,

+      zoomLevel,

+      excludeElementId,

+      true // snap to start edge

+    );

+

+    const endSnapResult = snapElementEdge(

+      dropTime,

+      elementDuration,

+      tracks,

+      currentTime,

+      zoomLevel,

+      excludeElementId,

+      false // snap to end edge

+    );

+

+    // Choose the snap result with the smaller distance (closer snap)

+    let bestSnapResult = startSnapResult;

+    if (

+      endSnapResult.snapPoint &&

+      (!startSnapResult.snapPoint ||

+        endSnapResult.snapDistance < startSnapResult.snapDistance)

+    ) {

+      bestSnapResult = endSnapResult;

+    }

+

+    return bestSnapResult.snappedTime;

+  };

+

+  const timelineRef = useRef<HTMLDivElement>(null);

+  const [isDropping, setIsDropping] = useState(false);

+  const [dropPosition, setDropPosition] = useState<number | null>(null);

+  const [wouldOverlap, setWouldOverlap] = useState(false);

+  const dragCounterRef = useRef(0);

+  const [mouseDownLocation, setMouseDownLocation] = useState<{

+    x: number;

+    y: number;

+  } | null>(null);

+

+  // Set up mouse event listeners for drag

+  useEffect(() => {

+    if (!dragState.isDragging) return;

+

+    const handleMouseMove = (e: MouseEvent) => {

+      if (!timelineRef.current) return;

+

+      // On first mouse move during drag, ensure the element is selected

+      if (dragState.elementId && dragState.trackId) {

+        const isSelected = selectedElements.some(

+          (c) =>

+            c.trackId === dragState.trackId &&

+            c.elementId === dragState.elementId

+        );

+

+        if (!isSelected) {

+          // Select this element (replacing other selections) since we're dragging it

+          selectElement(dragState.trackId, dragState.elementId, false);

+        }

+      }

+

+      const timelineRect = timelineRef.current.getBoundingClientRect();

+      const mouseX = e.clientX - timelineRect.left;

+      const mouseTime = Math.max(

+        0,

+        mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel)

+      );

+      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);

+

+      // Apply snapping if enabled

+      let finalTime = adjustedTime;

+      let snapPoint = null;

+      if (snappingEnabled) {

+        // Find the element being dragged to get its duration

+        let elementDuration = 5; // fallback duration

+        if (dragState.elementId && dragState.trackId) {

+          const sourceTrack = tracks.find((t) => t.id === dragState.trackId);

+          const element = sourceTrack?.elements.find(

+            (e) => e.id === dragState.elementId

+          );

+          if (element) {

+            elementDuration =

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

+          }

+        }

+

+        // Try snapping both start and end edges

+        const startSnapResult = snapElementEdge(

+          adjustedTime,

+          elementDuration,

+          tracks,

+          currentTime,

+          zoomLevel,

+          dragState.elementId || undefined,

+          true // snap to start edge

+        );

+

+        const endSnapResult = snapElementEdge(

+          adjustedTime,

+          elementDuration,

+          tracks,

+          currentTime,

+          zoomLevel,

+          dragState.elementId || undefined,

+          false // snap to end edge

+        );

+

+        // Choose the snap result with the smaller distance (closer snap)

+        let bestSnapResult = startSnapResult;

+        if (

+          endSnapResult.snapPoint &&

+          (!startSnapResult.snapPoint ||

+            endSnapResult.snapDistance < startSnapResult.snapDistance)

+        ) {

+          bestSnapResult = endSnapResult;

+        }

+

+        finalTime = bestSnapResult.snappedTime;

+        snapPoint = bestSnapResult.snapPoint;

+

+        // Notify parent component about snap point change

+        onSnapPointChange?.(snapPoint);

+      } else {

+        // Use frame snapping if project has FPS, otherwise use decimal snapping

+        const projectStore = useProjectStore.getState();

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

+        finalTime = snapTimeToFrame(adjustedTime, projectFps);

+

+        // Clear snap point when not snapping

+        onSnapPointChange?.(null);

+      }

+

+      updateDragTime(finalTime);

+    };

+

+    const handleMouseUp = (e: MouseEvent) => {

+      if (!dragState.elementId || !dragState.trackId) return;

+

+      // If this track initiated the drag, we should handle the mouse up regardless of where it occurs

+      const isTrackThatStartedDrag = dragState.trackId === track.id;

+

+      const timelineRect = timelineRef.current?.getBoundingClientRect();

+      if (!timelineRect) {

+        if (isTrackThatStartedDrag) {

+          if (rippleEditingEnabled) {

+            updateElementStartTimeWithRipple(

+              track.id,

+              dragState.elementId,

+              dragState.currentTime

+            );

+          } else {

+            updateElementStartTime(

+              track.id,

+              dragState.elementId,

+              dragState.currentTime

+            );

+          }

+          endDragAction();

+          // Clear snap point when drag ends

+          onSnapPointChange?.(null);

+        }

+        return;

+      }

+

+      const isMouseOverThisTrack =

+        e.clientY >= timelineRect.top && e.clientY <= timelineRect.bottom;

+

+      if (!isMouseOverThisTrack && !isTrackThatStartedDrag) return;

+

+      const finalTime = dragState.currentTime;

+

+      if (isMouseOverThisTrack) {

+        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);

+        const movingElement = sourceTrack?.elements.find(

+          (c) => c.id === dragState.elementId

+        );

+

+        if (movingElement) {

+          const movingElementDuration =

+            movingElement.duration -

+            movingElement.trimStart -

+            movingElement.trimEnd;

+          const movingElementEnd = finalTime + movingElementDuration;

+

+          const targetTrack = tracks.find((t) => t.id === track.id);

+          const hasOverlap = targetTrack?.elements.some((existingElement) => {

+            if (

+              dragState.trackId === track.id &&

+              existingElement.id === dragState.elementId

+            ) {

+              return false;

+            }

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+            return finalTime < existingEnd && movingElementEnd > existingStart;

+          });

+

+          if (!hasOverlap) {

+            if (dragState.trackId === track.id) {

+              if (rippleEditingEnabled) {

+                updateElementStartTimeWithRipple(

+                  track.id,

+                  dragState.elementId,

+                  finalTime

+                );

+              } else {

+                updateElementStartTime(

+                  track.id,

+                  dragState.elementId,

+                  finalTime

+                );

+              }

+            } else {

+              moveElementToTrack(

+                dragState.trackId,

+                track.id,

+                dragState.elementId

+              );

+              requestAnimationFrame(() => {

+                if (rippleEditingEnabled) {

+                  updateElementStartTimeWithRipple(

+                    track.id,

+                    dragState.elementId!,

+                    finalTime

+                  );

+                } else {

+                  updateElementStartTime(

+                    track.id,

+                    dragState.elementId!,

+                    finalTime

+                  );

+                }

+              });

+            }

+          }

+        }

+      } else if (isTrackThatStartedDrag) {

+        // Mouse is not over this track, but this track started the drag

+        // This means user released over ruler/outside - update position within same track

+        const sourceTrack = tracks.find((t) => t.id === dragState.trackId);

+        const movingElement = sourceTrack?.elements.find(

+          (c) => c.id === dragState.elementId

+        );

+

+        if (movingElement) {

+          const movingElementDuration =

+            movingElement.duration -

+            movingElement.trimStart -

+            movingElement.trimEnd;

+          const movingElementEnd = finalTime + movingElementDuration;

+

+          const hasOverlap = track.elements.some((existingElement) => {

+            if (existingElement.id === dragState.elementId) {

+              return false;

+            }

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+            return finalTime < existingEnd && movingElementEnd > existingStart;

+          });

+

+          if (!hasOverlap) {

+            if (rippleEditingEnabled) {

+              updateElementStartTimeWithRipple(

+                track.id,

+                dragState.elementId,

+                finalTime

+              );

+            } else {

+              updateElementStartTime(track.id, dragState.elementId, finalTime);

+            }

+          }

+        }

+      }

+

+      if (isTrackThatStartedDrag) {

+        endDragAction();

+        // Clear snap point when drag ends

+        onSnapPointChange?.(null);

+      }

+    };

+

+    document.addEventListener("mousemove", handleMouseMove);

+    document.addEventListener("mouseup", handleMouseUp);

+

+    return () => {

+      document.removeEventListener("mousemove", handleMouseMove);

+      document.removeEventListener("mouseup", handleMouseUp);

+    };

+  }, [

+    dragState.isDragging,

+    dragState.clickOffsetTime,

+    dragState.elementId,

+    dragState.trackId,

+    dragState.currentTime,

+    zoomLevel,

+    tracks,

+    track.id,

+    updateDragTime,

+    updateElementStartTime,

+    moveElementToTrack,

+    endDragAction,

+    selectedElements,

+    selectElement,

+    onSnapPointChange,

+  ]);

+

+  const handleElementMouseDown = (

+    e: React.MouseEvent,

+    element: TimelineElementType

+  ) => {

+    setMouseDownLocation({ x: e.clientX, y: e.clientY });

+

+    // Detect right-click (button 2) and handle selection without starting drag

+    const isRightClick = e.button === 2;

+    const isMultiSelect = e.metaKey || e.ctrlKey || e.shiftKey;

+

+    if (isRightClick) {

+      // Handle right-click selection

+      const isSelected = selectedElements.some(

+        (c) => c.trackId === track.id && c.elementId === element.id

+      );

+

+      // If element is not selected, select it (keep other selections if multi-select)

+      if (!isSelected) {

+        selectElement(track.id, element.id, isMultiSelect);

+      }

+      // If element is already selected, keep it selected

+

+      // Don't start drag action for right-clicks

+      return;

+    }

+

+    // Handle multi-selection for left-click with modifiers

+    if (isMultiSelect) {

+      selectElement(track.id, element.id, true);

+    }

+

+    // Calculate the offset from the left edge of the element to where the user clicked

+    const elementElement = e.currentTarget as HTMLElement;

+    const elementRect = elementElement.getBoundingClientRect();

+    const clickOffsetX = e.clientX - elementRect.left;

+    const clickOffsetTime =

+      clickOffsetX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);

+

+    startDragAction(

+      element.id,

+      track.id,

+      e.clientX,

+      element.startTime,

+      clickOffsetTime

+    );

+  };

+

+  const handleElementClick = (

+    e: React.MouseEvent,

+    element: TimelineElementType

+  ) => {

+    e.stopPropagation();

+

+    // Check if mouse moved significantly

+    if (mouseDownLocation) {

+      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);

+      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);

+      // If it moved more than a few pixels, consider it a drag and not a click.

+      if (deltaX > 5 || deltaY > 5) {

+        setMouseDownLocation(null); // Reset for next interaction

+        return;

+      }

+    }

+

+    // Skip selection logic for multi-selection (handled in mousedown)

+    if (e.metaKey || e.ctrlKey || e.shiftKey) {

+      return;

+    }

+

+    // Handle single selection

+    const isSelected = selectedElements.some(

+      (c) => c.trackId === track.id && c.elementId === element.id

+    );

+

+    if (!isSelected) {

+      // If element is not selected, select it (replacing other selections)

+      selectElement(track.id, element.id, false);

+    }

+    // If element is already selected, keep it selected (do nothing)

+  };

+

+  const handleTrackDragOver = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    // Handle both timeline elements and media items

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    // Calculate drop position for overlap checking

+    const trackContainer = e.currentTarget.querySelector(

+      ".track-elements-container"

+    ) as HTMLElement;

+    let dropTime = 0;

+    if (trackContainer) {

+      const rect = trackContainer.getBoundingClientRect();

+      const mouseX = Math.max(0, e.clientX - rect.left);

+      dropTime = mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);

+    }

+

+    // Check for potential overlaps and show appropriate feedback

+    let wouldOverlap = false;

+

+    if (hasMediaItem) {

+      try {

+        const mediaItemData = e.dataTransfer.getData(

+          "application/x-media-item"

+        );

+        if (mediaItemData) {

+          const dragData: DragData = JSON.parse(mediaItemData);

+

+          if (dragData.type === "text") {

+            // Text elements have default duration of 5 seconds

+            const newElementDuration = 5;

+            const snappedTime = getDropSnappedTime(

+              dropTime,

+              newElementDuration

+            );

+            const newElementEnd = snappedTime + newElementDuration;

+

+            wouldOverlap = track.elements.some((existingElement) => {

+              const existingStart = existingElement.startTime;

+              const existingEnd =

+                existingElement.startTime +

+                (existingElement.duration -

+                  existingElement.trimStart -

+                  existingElement.trimEnd);

+              return snappedTime < existingEnd && newElementEnd > existingStart;

+            });

+          } else {

+            // Media elements

+            const mediaItem = mediaItems.find(

+              (item) => item.id === dragData.id

+            );

+            if (mediaItem) {

+              const newElementDuration = mediaItem.duration || 5;

+              const snappedTime = getDropSnappedTime(

+                dropTime,

+                newElementDuration

+              );

+              const newElementEnd = snappedTime + newElementDuration;

+

+              wouldOverlap = track.elements.some((existingElement) => {

+                const existingStart = existingElement.startTime;

+                const existingEnd =

+                  existingElement.startTime +

+                  (existingElement.duration -

+                    existingElement.trimStart -

+                    existingElement.trimEnd);

+                return (

+                  snappedTime < existingEnd && newElementEnd > existingStart

+                );

+              });

+            }

+          }

+        }

+      } catch (error) {

+        // Continue with default behavior

+      }

+    } else if (hasTimelineElement) {

+      try {

+        const timelineElementData = e.dataTransfer.getData(

+          "application/x-timeline-element"

+        );

+        if (timelineElementData) {

+          const { elementId, trackId: fromTrackId } =

+            JSON.parse(timelineElementData);

+          const sourceTrack = tracks.find(

+            (t: TimelineTrack) => t.id === fromTrackId

+          );

+          const movingElement = sourceTrack?.elements.find(

+            (c: any) => c.id === elementId

+          );

+

+          if (movingElement) {

+            const movingElementDuration =

+              movingElement.duration -

+              movingElement.trimStart -

+              movingElement.trimEnd;

+            const snappedTime = getDropSnappedTime(

+              dropTime,

+              movingElementDuration,

+              elementId

+            );

+            const movingElementEnd = snappedTime + movingElementDuration;

+

+            wouldOverlap = track.elements.some((existingElement) => {

+              if (fromTrackId === track.id && existingElement.id === elementId)

+                return false;

+

+              const existingStart = existingElement.startTime;

+              const existingEnd =

+                existingElement.startTime +

+                (existingElement.duration -

+                  existingElement.trimStart -

+                  existingElement.trimEnd);

+              return (

+                snappedTime < existingEnd && movingElementEnd > existingStart

+              );

+            });

+          }

+        }

+      } catch (error) {

+        // Continue with default behavior

+      }

+    }

+

+    if (wouldOverlap) {

+      e.dataTransfer.dropEffect = "none";

+      setWouldOverlap(true);

+      // Use default duration for position indicator

+      setDropPosition(getDropSnappedTime(dropTime, 5));

+      return;

+    }

+

+    e.dataTransfer.dropEffect = hasTimelineElement ? "move" : "copy";

+    setWouldOverlap(false);

+    // Use default duration for position indicator

+    setDropPosition(getDropSnappedTime(dropTime, 5));

+  };

+

+  const handleTrackDragEnter = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    dragCounterRef.current++;

+    setIsDropping(true);

+  };

+

+  const handleTrackDragLeave = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    dragCounterRef.current--;

+

+    if (dragCounterRef.current === 0) {

+      setIsDropping(false);

+      setWouldOverlap(false);

+      setDropPosition(null);

+    }

+  };

+

+  const handleTrackDrop = (e: React.DragEvent) => {

+    e.preventDefault();

+    e.stopPropagation();

+

+    // Debug logging

+    console.log(

+      JSON.stringify({

+        message: "Drop event started in timeline track",

+        dataTransferTypes: Array.from(e.dataTransfer.types),

+        trackId: track.id,

+        trackType: track.type,

+      })

+    );

+

+    // Reset all drag states

+    dragCounterRef.current = 0;

+    setIsDropping(false);

+    setWouldOverlap(false);

+

+    const hasTimelineElement = e.dataTransfer.types.includes(

+      "application/x-timeline-element"

+    );

+    const hasMediaItem = e.dataTransfer.types.includes(

+      "application/x-media-item"

+    );

+

+    if (!hasTimelineElement && !hasMediaItem) return;

+

+    const trackContainer = e.currentTarget.querySelector(

+      ".track-elements-container"

+    ) as HTMLElement;

+    if (!trackContainer) return;

+

+    const rect = trackContainer.getBoundingClientRect();

+    const mouseX = Math.max(0, e.clientX - rect.left);

+    const mouseY = e.clientY - rect.top; // Get Y position relative to this track

+    const newStartTime =

+      mouseX / (TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel);

+    const projectStore = useProjectStore.getState();

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

+    const snappedTime = snapTimeToFrame(newStartTime, projectFps);

+

+    // Calculate drop position relative to tracks

+    const currentTrackIndex = tracks.findIndex((t) => t.id === track.id);

+

+    // Determine drop zone within the track (top 20px, middle 20px, bottom 20px)

+    let dropPosition: "above" | "on" | "below";

+    if (mouseY < 20) {

+      dropPosition = "above";

+    } else if (mouseY > 40) {

+      dropPosition = "below";

+    } else {

+      dropPosition = "on";

+    }

+

+    try {

+      if (hasTimelineElement) {

+        // Handle timeline element movement

+        const timelineElementData = e.dataTransfer.getData(

+          "application/x-timeline-element"

+        );

+        if (!timelineElementData) return;

+

+        const {

+          elementId,

+          trackId: fromTrackId,

+          clickOffsetTime = 0,

+        } = JSON.parse(timelineElementData);

+

+        // Find the element being moved

+        const sourceTrack = tracks.find(

+          (t: TimelineTrack) => t.id === fromTrackId

+        );

+        const movingElement = sourceTrack?.elements.find(

+          (c: TimelineElementType) => c.id === elementId

+        );

+

+        if (!movingElement) {

+          toast.error("Element not found");

+          return;

+        }

+

+        // Check for overlaps with existing elements (excluding the moving element itself)

+        const movingElementDuration =

+          movingElement.duration -

+          movingElement.trimStart -

+          movingElement.trimEnd;

+

+        // Adjust position based on where user clicked on the element

+        const adjustedStartTime = newStartTime - clickOffsetTime;

+        const snappedStartTime = getDropSnappedTime(

+          adjustedStartTime,

+          movingElementDuration,

+          elementId

+        );

+        const finalStartTime = Math.max(0, snappedStartTime);

+        const movingElementEnd = finalStartTime + movingElementDuration;

+

+        const hasOverlap = track.elements.some((existingElement) => {

+          // Skip the element being moved if it's on the same track

+          if (fromTrackId === track.id && existingElement.id === elementId)

+            return false;

+

+          const existingStart = existingElement.startTime;

+          const existingEnd =

+            existingElement.startTime +

+            (existingElement.duration -

+              existingElement.trimStart -

+              existingElement.trimEnd);

+

+          // Check if elements overlap

+          return (

+            finalStartTime < existingEnd && movingElementEnd > existingStart

+          );

+        });

+

+        if (hasOverlap) {

+          toast.error(

+            "Cannot move element here - it would overlap with existing elements"

+          );

+          return;

+        }

+

+        if (fromTrackId === track.id) {

+          // Moving within same track

+          if (rippleEditingEnabled) {

+            updateElementStartTimeWithRipple(

+              track.id,

+              elementId,

+              finalStartTime

+            );

+          } else {

+            updateElementStartTime(track.id, elementId, finalStartTime);

+          }

+        } else {

+          // Moving to different track

+          moveElementToTrack(fromTrackId, track.id, elementId);

+          requestAnimationFrame(() => {

+            if (rippleEditingEnabled) {

+              updateElementStartTimeWithRipple(

+                track.id,

+                elementId,

+                finalStartTime

+              );

+            } else {

+              updateElementStartTime(track.id, elementId, finalStartTime);

+            }

+          });

+        }

+      } else if (hasMediaItem) {

+        // Handle media item drop

+        const mediaItemData = e.dataTransfer.getData(

+          "application/x-media-item"

+        );

+        if (!mediaItemData) return;

+

+        const dragData: DragData = JSON.parse(mediaItemData);

+

+        if (dragData.type === "text") {

+          let targetTrackId = track.id;

+          let targetTrack = track;

+

+          // Handle position-aware track creation for text

+          if (track.type !== "text" || dropPosition !== "on") {

+            // Text tracks should go above the main track

+            const mainTrack = getMainTrack(tracks);

+            let insertIndex: number;

+

+            if (dropPosition === "above") {

+              insertIndex = currentTrackIndex;

+            } else if (dropPosition === "below") {

+              insertIndex = currentTrackIndex + 1;

+            } else {

+              // dropPosition === "on" but track is not text type

+              // Insert above main track if main track exists, otherwise at top

+              if (mainTrack) {

+                const mainTrackIndex = tracks.findIndex(

+                  (t) => t.id === mainTrack.id

+                );

+                insertIndex = mainTrackIndex;

+              } else {

+                insertIndex = 0; // Top of timeline

+              }

+            }

+

+            targetTrackId = insertTrackAt("text", insertIndex);

+            // Get the updated tracks array after creating the new track

+            const updatedTracks = useTimelineStore.getState().tracks;

+            const newTargetTrack = updatedTracks.find(

+              (t) => t.id === targetTrackId

+            );

+            if (!newTargetTrack) return;

+            targetTrack = newTargetTrack;

+          }

+

+          // Check for overlaps with existing elements in target track

+          const newElementDuration = 5; // Default text duration

+          const textSnappedTime = getDropSnappedTime(

+            newStartTime,

+            newElementDuration

+          );

+          const newElementEnd = textSnappedTime + newElementDuration;

+

+          const hasOverlap = targetTrack.elements.some((existingElement) => {

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+

+            // Check if elements overlap

+            return (

+              textSnappedTime < existingEnd && newElementEnd > existingStart

+            );

+          });

+

+          if (hasOverlap) {

+            toast.error(

+              "Cannot place element here - it would overlap with existing elements"

+            );

+            return;

+          }

+

+          addElementToTrack(targetTrackId, {

+            type: "text",

+            name: dragData.name || "Text",

+            content: dragData.content || "Default Text",

+            duration: TIMELINE_CONSTANTS.DEFAULT_TEXT_DURATION,

+            startTime: textSnappedTime,

+            trimStart: 0,

+            trimEnd: 0,

+            fontSize: 48,

+            fontFamily: "Arial",

+            color: "#ffffff",

+            backgroundColor: "transparent",

+            textAlign: "center",

+            fontWeight: "normal",

+            fontStyle: "normal",

+            textDecoration: "none",

+            x: 0,

+            y: 0,

+            rotation: 0,

+            opacity: 1,

+          });

+        } else {

+          // Handle media items

+          const mediaItem = mediaItems.find((item) => item.id === dragData.id);

+

+          if (!mediaItem) {

+            toast.error("Media item not found");

+            return;

+          }

+

+          let targetTrackId = track.id;

+

+          // Check if track type is compatible

+          const isVideoOrImage =

+            dragData.type === "video" || dragData.type === "image";

+          const isAudio = dragData.type === "audio";

+          const isCompatible = isVideoOrImage

+            ? canElementGoOnTrack("media", track.type)

+            : isAudio

+              ? canElementGoOnTrack("media", track.type)

+              : false;

+

+          let targetTrack = tracks.find((t) => t.id === targetTrackId);

+

+          // Handle position-aware track creation for media elements

+          if (!isCompatible || dropPosition !== "on") {

+            if (isVideoOrImage) {

+              // For video/image, check if we need a main track or additional media track

+              const mainTrack = getMainTrack(tracks);

+

+              if (!mainTrack) {

+                // No main track exists, create it

+                targetTrackId = addTrack("media");

+                const updatedTracks = useTimelineStore.getState().tracks;

+                const newTargetTrack = updatedTracks.find(

+                  (t) => t.id === targetTrackId

+                );

+                if (!newTargetTrack) return;

+                targetTrack = newTargetTrack;

+              } else if (

+                mainTrack.elements.length === 0 &&

+                dropPosition === "on"

+              ) {

+                // Main track exists and is empty, use it

+                targetTrackId = mainTrack.id;

+                targetTrack = mainTrack;

+              } else {

+                // Create new media track

+                let insertIndex: number;

+

+                if (dropPosition === "above") {

+                  insertIndex = currentTrackIndex;

+                } else if (dropPosition === "below") {

+                  insertIndex = currentTrackIndex + 1;

+                } else {

+                  // Insert above main track

+                  const mainTrackIndex = tracks.findIndex(

+                    (t) => t.id === mainTrack.id

+                  );

+                  insertIndex = mainTrackIndex;

+                }

+

+                targetTrackId = insertTrackAt("media", insertIndex);

+                const updatedTracks = useTimelineStore.getState().tracks;

+                const newTargetTrack = updatedTracks.find(

+                  (t) => t.id === targetTrackId

+                );

+                if (!newTargetTrack) return;

+                targetTrack = newTargetTrack;

+              }

+            } else if (isAudio) {

+              // Audio tracks go at the bottom

+              const mainTrack = getMainTrack(tracks);

+              let insertIndex: number;

+

+              if (dropPosition === "above") {

+                insertIndex = currentTrackIndex;

+              } else if (dropPosition === "below") {

+                insertIndex = currentTrackIndex + 1;

+              } else {

+                // Insert after main track (bottom area)

+                if (mainTrack) {

+                  const mainTrackIndex = tracks.findIndex(

+                    (t) => t.id === mainTrack.id

+                  );

+                  insertIndex = mainTrackIndex + 1;

+                } else {

+                  insertIndex = tracks.length; // Bottom of timeline

+                }

+              }

+

+              targetTrackId = insertTrackAt("audio", insertIndex);

+              const updatedTracks = useTimelineStore.getState().tracks;

+              const newTargetTrack = updatedTracks.find(

+                (t) => t.id === targetTrackId

+              );

+              if (!newTargetTrack) return;

+              targetTrack = newTargetTrack;

+            }

+          }

+

+          if (!targetTrack) return;

+

+          // Check for overlaps with existing elements in target track

+          const newElementDuration = mediaItem.duration || 5;

+          const mediaSnappedTime = getDropSnappedTime(

+            newStartTime,

+            newElementDuration

+          );

+          const newElementEnd = mediaSnappedTime + newElementDuration;

+

+          const hasOverlap = targetTrack.elements.some((existingElement) => {

+            const existingStart = existingElement.startTime;

+            const existingEnd =

+              existingElement.startTime +

+              (existingElement.duration -

+                existingElement.trimStart -

+                existingElement.trimEnd);

+

+            // Check if elements overlap

+            return (

+              mediaSnappedTime < existingEnd && newElementEnd > existingStart

+            );

+          });

+

+          if (hasOverlap) {

+            toast.error(

+              "Cannot place element here - it would overlap with existing elements"

+            );

+            return;

+          }

+

+          addElementToTrack(targetTrackId, {

+            type: "media",

+            mediaId: mediaItem.id,

+            name: mediaItem.name,

+            duration: mediaItem.duration || 5,

+            startTime: mediaSnappedTime,

+            trimStart: 0,

+            trimEnd: 0,

+          });

+        }

+      }

+    } catch (error) {

+      console.error("Error handling drop:", error);

+      toast.error("Failed to add media to track");

+    }

+  };

+

+  return (

+    <div

+      className="w-full h-full hover:bg-muted/20"

+      onClick={(e) => {

+        // If clicking empty area (not on an element), deselect all elements

+        if (!(e.target as HTMLElement).closest(".timeline-element")) {

+          clearSelectedElements();

+        }

+      }}

+      onDragOver={handleTrackDragOver}

+      onDragEnter={handleTrackDragEnter}

+      onDragLeave={handleTrackDragLeave}

+      onDrop={handleTrackDrop}

+    >

+      <div

+        ref={timelineRef}

+        className="h-full relative track-elements-container min-w-full"

+      >

+        {track.elements.length === 0 ? (

+          <div

+            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${

+              isDropping

+                ? wouldOverlap

+                  ? "border-red-500 bg-red-500/10 text-red-600"

+                  : "border-blue-500 bg-blue-500/10 text-blue-600"

+                : "border-muted/30"

+            }`}

+          >

+            {isDropping

+              ? wouldOverlap

+                ? "Cannot drop - would overlap"

+                : "Drop element here"

+              : ""}

+          </div>

+        ) : (

+          <>

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

+              const isSelected = selectedElements.some(

+                (c) => c.trackId === track.id && c.elementId === element.id

+              );

+

+              const handleElementSplit = () => {

+                const { currentTime } = usePlaybackStore();

+                const { splitElement } = useTimelineStore();

+                const splitTime = currentTime;

+                const effectiveStart = element.startTime;

+                const effectiveEnd =

+                  element.startTime +

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

+

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

+                  const secondElementId = splitElement(

+                    track.id,

+                    element.id,

+                    splitTime

+                  );

+                  if (!secondElementId) {

+                    toast.error("Failed to split element");

+                  }

+                } else {

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

+                }

+              };

+

+              const handleElementDuplicate = () => {

+                const { addElementToTrack } = useTimelineStore.getState();

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

+                addElementToTrack(track.id, {

+                  ...elementWithoutId,

+                  name: element.name + " (copy)",

+                  startTime:

+                    element.startTime +

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

+                    0.1,

+                });

+              };

+

+              const handleElementDelete = () => {

+                const { removeElementFromTrack } = useTimelineStore.getState();

+                removeElementFromTrack(track.id, element.id);

+              };

+

+              return (

+                <TimelineElement

+                  key={element.id}

+                  element={element}

+                  track={track}

+                  zoomLevel={zoomLevel}

+                  isSelected={isSelected}

+                  onElementMouseDown={handleElementMouseDown}

+                  onElementClick={handleElementClick}

+                />

+              );

+            })}

+          </>

+        )}

+      </div>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/header-base.tsx b/apps/web/src/components/header-base.tsx
index a4863d27..0254f4a3 100644
--- a/apps/web/src/components/header-base.tsx
+++ b/apps/web/src/components/header-base.tsx
@@ -1,39 +1,37 @@
-"use client";
-
-import { cn } from "@/lib/utils";
-import { ReactNode } from "react";
-
-interface HeaderBaseProps {
-  leftContent?: ReactNode;
-  centerContent?: ReactNode;
-  rightContent?: ReactNode;
-  className?: string;
-  children?: ReactNode;
-}
-
-export function HeaderBase({
-  leftContent,
-  centerContent,
-  rightContent,
-  className,
-  children,
-}: HeaderBaseProps) {
-  // If children is provided, render it directly without the grid layout
-  if (children) {
-    return (
-      <header className={cn("px-6 h-16 flex items-center", className)}>
-        {children}
-      </header>
-    );
-  }
-
-  return (
-    <header
-      className={cn("px-6 h-14 flex justify-between items-center", className)}
-    >
-      {leftContent && leftContent}
-      {centerContent && centerContent}
-      {rightContent && rightContent}
-    </header>
-  );
-}
+"use client";

+

+import type { ReactNode } from "react";

+import { cn } from "@/lib/utils";

+

+interface HeaderBaseProps {

+  leftContent?: ReactNode;

+  centerContent?: ReactNode;

+  rightContent?: ReactNode;

+  className?: string;

+  children?: ReactNode;

+}

+

+export function HeaderBase({

+  leftContent,

+  centerContent,

+  rightContent,

+  className,

+  children,

+}: HeaderBaseProps) {

+  // If children is provided, render it directly without the grid layout

+  if (children) {

+    return (

+      <header className={cn("px-6 h-16 flex items-center", className)}>

+        {children}

+      </header>

+    );

+  }

+

+  return (

+    <header className={cn("px-6 h-14 flex justify-between", className)}>

+      {leftContent && leftContent}

+      {centerContent && centerContent}

+      {rightContent && rightContent}

+    </header>

+  );

+}

diff --git a/apps/web/src/components/header.tsx b/apps/web/src/components/header.tsx
index 2e6de534..7d11e68a 100644
--- a/apps/web/src/components/header.tsx
+++ b/apps/web/src/components/header.tsx
@@ -1,47 +1,47 @@
-"use client";
-
-import Link from "next/link";
-import { Button } from "./ui/button";
-import { ArrowRight } from "lucide-react";
-import { HeaderBase } from "./header-base";
-import Image from "next/image";
-
-export function Header() {
-  const leftContent = (
-    <Link href="/" className="flex items-center gap-3">
-      <Image src="/logo.svg" alt="OpenCut Logo" width={32} height={32} />
-      <span className="text-xl font-medium hidden md:block">OpenCut</span>
-    </Link>
-  );
-
-  const rightContent = (
-    <nav className="flex items-center gap-3">
-      <Link href="/blog">
-        <Button variant="text" className="text-sm p-0">
-          Blog
-        </Button>
-      </Link>
-      <Link href="/contributors">
-        <Button variant="text" className="text-sm p-0">
-          Contributors
-        </Button>
-      </Link>
-      <Link href="/projects">
-        <Button size="sm" className="text-sm ml-4">
-          Projects
-          <ArrowRight className="h-4 w-4" />
-        </Button>
-      </Link>
-    </nav>
-  );
-
-  return (
-    <div className="mx-4 md:mx-0">
-      <HeaderBase
-        className="bg-accent border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
-        leftContent={leftContent}
-        rightContent={rightContent}
-      />
-    </div>
-  );
-}
+"use client";

+

+import Link from "next/link";

+import { Button } from "./ui/button";

+import { ArrowRight } from "lucide-react";

+import { HeaderBase } from "./header-base";

+import Image from "next/image";

+

+export function Header() {

+  const leftContent = (

+    <Link href="/" className="flex items-center gap-3">

+      <Image src="/logo.svg" alt="OpenCut Logo" width={32} height={32} />

+      <span className="text-xl font-medium hidden md:block">OpenCut</span>

+    </Link>

+  );

+

+  const rightContent = (

+    <nav className="flex items-center gap-3">

+      <Link href="/blog">

+        <Button variant="text" className="text-sm p-0">

+          Blog

+        </Button>

+      </Link>

+      <Link href="/contributors">

+        <Button variant="text" className="text-sm p-0">

+          Contributors

+        </Button>

+      </Link>

+      <Link href="/projects">

+        <Button size="sm" className="text-sm ml-4">

+          Projects

+          <ArrowRight className="h-4 w-4" />

+        </Button>

+      </Link>

+    </nav>

+  );

+

+  return (

+    <div className="mx-4 md:mx-0">

+      <HeaderBase

+        className="bg-accent border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"

+        leftContent={leftContent}

+        rightContent={rightContent}

+      />

+    </div>

+  );

+}

diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 6099c052..68e8f0ff 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -40,15 +40,8 @@ export function GithubIcon({ className }: { className?: string }) {
 
 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 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>
   );
 }
@@ -112,4 +105,4 @@ export function BackgroundIcon({ className }: { className?: string }) {
       </defs>
     </svg>
   );
-}
+}
\ No newline at end of file
diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 94764dbe..36705e90 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -112,7 +112,7 @@ export function Handlebars({
             whileDrag={{ scale: 1.1 }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-yellow-500" />
+            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
           </motion.div>
 
           <motion.div
@@ -135,7 +135,7 @@ export function Handlebars({
             whileDrag={{ scale: 1.1 }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-yellow-500" />
+            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
           </motion.div>
         </div>
 
@@ -161,4 +161,4 @@ export function Handlebars({
       </div>
     </div>
   );
-}
+};
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx
index 1b43978e..80b5f99c 100644
--- a/apps/web/src/components/onboarding.tsx
+++ b/apps/web/src/components/onboarding.tsx
@@ -1,121 +1,121 @@
-"use client";
-
-import { Dialog, DialogContent } from "./ui/dialog";
-import { Button } from "./ui/button";
-import { ArrowRightIcon } from "lucide-react";
-import { useState, useEffect } from "react";
-import ReactMarkdown from "react-markdown";
-
-export function Onboarding() {
-  const [step, setStep] = useState(0);
-  const [isOpen, setIsOpen] = useState(false);
-
-  useEffect(() => {
-    const hasSeenOnboarding = localStorage.getItem("hasSeenOnboarding");
-    if (!hasSeenOnboarding) {
-      setIsOpen(true);
-    }
-  }, []);
-
-  const handleNext = () => {
-    setStep(step + 1);
-  };
-
-  const handleClose = () => {
-    setIsOpen(false);
-    localStorage.setItem("hasSeenOnboarding", "true");
-  };
-
-  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="⚠️ This is a super early beta!" />
-              <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
-              <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="🦋 Have fun testing!" />
-              <Description description="Join our [Discord](https://discord.gg/zmR9N35cjK), 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="sm:max-w-[425px] !outline-none">
-        {renderStepContent()}
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function Title({ title }: { title: string }) {
-  return <h2 className="text-lg md:text-xl font-bold">{title}</h2>;
-}
-
-function Subtitle({ subtitle }: { subtitle: string }) {
-  return <h3 className="text-lg font-medium">{subtitle}</h3>;
-}
-
-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>
-  );
-}
-
-function NextButton({
-  children,
-  onClick,
-}: {
-  children: React.ReactNode;
-  onClick: () => void;
-}) {
-  return (
-    <Button onClick={onClick} variant="default" className="w-full">
-      {children}
-      <ArrowRightIcon className="w-4 h-4" />
-    </Button>
-  );
-}
+"use client";

+

+import { Dialog, DialogContent } from "./ui/dialog";

+import { Button } from "./ui/button";

+import { ArrowRightIcon } from "lucide-react";

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

+import ReactMarkdown from "react-markdown";

+

+export function Onboarding() {

+  const [step, setStep] = useState(0);

+  const [isOpen, setIsOpen] = useState(false);

+

+  useEffect(() => {

+    const hasSeenOnboarding = localStorage.getItem("hasSeenOnboarding");

+    if (!hasSeenOnboarding) {

+      setIsOpen(true);

+    }

+  }, []);

+

+  const handleNext = () => {

+    setStep(step + 1);

+  };

+

+  const handleClose = () => {

+    setIsOpen(false);

+    localStorage.setItem("hasSeenOnboarding", "true");

+  };

+

+  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="⚠️ This is a super early beta!" />

+              <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />

+              <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="🦋 Have fun testing!" />

+              <Description description="Join our [Discord](https://discord.gg/zmR9N35cjK), 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="sm:max-w-[425px] !outline-none">

+        {renderStepContent()}

+      </DialogContent>

+    </Dialog>

+  );

+}

+

+function Title({ title }: { title: string }) {

+  return <h2 className="text-lg md:text-xl font-bold">{title}</h2>;

+}

+

+function Subtitle({ subtitle }: { subtitle: string }) {

+  return <h3 className="text-lg font-medium">{subtitle}</h3>;

+}

+

+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>

+  );

+}

+

+function NextButton({

+  children,

+  onClick,

+}: {

+  children: React.ReactNode;

+  onClick: () => void;

+}) {

+  return (

+    <Button onClick={onClick} variant="default" className="w-full">

+      {children}

+      <ArrowRightIcon className="w-4 h-4" />

+    </Button>

+  );

+}

diff --git a/apps/web/src/components/rename-project-dialog.tsx b/apps/web/src/components/rename-project-dialog.tsx
index c50f9f71..d84bad71 100644
--- a/apps/web/src/components/rename-project-dialog.tsx
+++ b/apps/web/src/components/rename-project-dialog.tsx
@@ -1,73 +1,73 @@
-import { Button } from "@/components/ui/button";
-import {
-  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: boolean;
-  onOpenChange: (open: boolean) => void;
-  onConfirm: (name: string) => void;
-  projectName: string;
-}) {
-  const [name, setName] = useState(projectName);
-
-  // Reset the name when dialog opens - this is better UX than syncing with every prop change
-  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>
-
-        <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="mt-4"
-        />
-
-        <DialogFooter>
-          <Button
-            variant="outline"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              onOpenChange(false);
-            }}
-          >
-            Cancel
-          </Button>
-          <Button onClick={() => onConfirm(name)}>Rename</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-}
+import { Button } from "@/components/ui/button";

+import {

+  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: boolean;

+  onOpenChange: (open: boolean) => void;

+  onConfirm: (name: string) => void;

+  projectName: string;

+}) {

+  const [name, setName] = useState(projectName);

+

+  // Reset the name when dialog opens - this is better UX than syncing with every prop change

+  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>

+

+        <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="mt-4"

+        />

+

+        <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 69105d0f..48423b5c 100644
--- a/apps/web/src/components/storage-provider.tsx
+++ b/apps/web/src/components/storage-provider.tsx
@@ -1,80 +1,80 @@
-"use client";
-
-import { createContext, useContext, useEffect, useState } from "react";
-import { useProjectStore } from "@/stores/project-store";
-import { useMediaStore } from "@/stores/media-store";
-import { storageService } from "@/lib/storage/storage-service";
-import { toast } from "sonner";
-
-interface StorageContextType {
-  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;
-}
-
-interface StorageProviderProps {
-  children: React.ReactNode;
-}
-
-export function StorageProvider({ children }: StorageProviderProps) {
-  const [status, setStatus] = useState<StorageContextType>({
-    isInitialized: false,
-    isLoading: true,
-    hasSupport: false,
-    error: null,
-  });
-
-  const loadAllProjects = useProjectStore((state) => state.loadAllProjects);
-
-  useEffect(() => {
-    const initializeStorage = async () => {
-      setStatus((prev) => ({ ...prev, isLoading: true }));
-
-      try {
-        // Check browser support
-        const hasSupport = storageService.isFullySupported();
-
-        if (!hasSupport) {
-          toast.warning(
-            "Storage not fully supported. Some features may not work."
-          );
-        }
-
-        // Load saved projects (media will be loaded when a project is loaded)
-        await 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",
-        });
-      }
-    };
-
-    initializeStorage();
-  }, [loadAllProjects]);
-
-  return (
-    <StorageContext.Provider value={status}>{children}</StorageContext.Provider>
-  );
-}
+"use client";

+

+import { createContext, useContext, useEffect, useState } from "react";

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

+import { useMediaStore } from "@/stores/media-store";

+import { storageService } from "@/lib/storage/storage-service";

+import { toast } from "sonner";

+

+interface StorageContextType {

+  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;

+}

+

+interface StorageProviderProps {

+  children: React.ReactNode;

+}

+

+export function StorageProvider({ children }: StorageProviderProps) {

+  const [status, setStatus] = useState<StorageContextType>({

+    isInitialized: false,

+    isLoading: true,

+    hasSupport: false,

+    error: null,

+  });

+

+  const loadAllProjects = useProjectStore((state) => state.loadAllProjects);

+

+  useEffect(() => {

+    const initializeStorage = async () => {

+      setStatus((prev) => ({ ...prev, isLoading: true }));

+

+      try {

+        // Check browser support

+        const hasSupport = storageService.isFullySupported();

+

+        if (!hasSupport) {

+          toast.warning(

+            "Storage not fully supported. Some features may not work."

+          );

+        }

+

+        // Load saved projects (media will be loaded when a project is loaded)

+        await 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",

+        });

+      }

+    };

+

+    initializeStorage();

+  }, [loadAllProjects]);

+

+  return (

+    <StorageContext.Provider value={status}>{children}</StorageContext.Provider>

+  );

+}

diff --git a/apps/web/src/components/ui/aspect-ratio.tsx b/apps/web/src/components/ui/aspect-ratio.tsx
index 082de9df..6f90bbb8 100644
--- a/apps/web/src/components/ui/aspect-ratio.tsx
+++ b/apps/web/src/components/ui/aspect-ratio.tsx
@@ -1,7 +1,7 @@
-"use client";
+"use client"
 
-import { AspectRatio as AspectRatioPrimitive } from "radix-ui";
+import { AspectRatio as AspectRatioPrimitive } from "radix-ui"
 
-const AspectRatio = AspectRatioPrimitive.Root;
+const AspectRatio = AspectRatioPrimitive.Root
 
-export { AspectRatio };
+export { AspectRatio }
diff --git a/apps/web/src/components/ui/audio-player.tsx b/apps/web/src/components/ui/audio-player.tsx
index 37bf8ca9..774dd95c 100644
--- a/apps/web/src/components/ui/audio-player.tsx
+++ b/apps/web/src/components/ui/audio-player.tsx
@@ -1,127 +1,127 @@
-"use client";
-
-import { useRef, useEffect } from "react";
-import { usePlaybackStore } from "@/stores/playback-store";
-
-interface AudioPlayerProps {
-  src: string;
-  className?: string;
-  clipStartTime: number;
-  trimStart: number;
-  trimEnd: number;
-  clipDuration: number;
-  trackMuted?: boolean;
-}
-
-export function AudioPlayer({
-  src,
-  className = "",
-  clipStartTime,
-  trimStart,
-  trimEnd,
-  clipDuration,
-  trackMuted = false,
-}: AudioPlayerProps) {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore();
-
-  // Calculate if we're within this clip's timeline range
-  const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
-  const isInClipRange =
-    currentTime >= clipStartTime && currentTime < clipEndTime;
-
-  // Sync playback events
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio || !isInClipRange) return;
-
-    const handleSeekEvent = (e: CustomEvent) => {
-      // Always update audio time, even if outside clip range
-      const timelineTime = e.detail.time;
-      const audioTime = Math.max(
-        trimStart,
-        Math.min(
-          clipDuration - trimEnd,
-          timelineTime - clipStartTime + trimStart
-        )
-      );
-      audio.currentTime = audioTime;
-    };
-
-    const handleUpdateEvent = (e: CustomEvent) => {
-      // Always update audio time, even if outside clip range
-      const timelineTime = e.detail.time;
-      const targetTime = Math.max(
-        trimStart,
-        Math.min(
-          clipDuration - trimEnd,
-          timelineTime - clipStartTime + trimStart
-        )
-      );
-
-      if (Math.abs(audio.currentTime - targetTime) > 0.5) {
-        audio.currentTime = targetTime;
-      }
-    };
-
-    const handleSpeed = (e: CustomEvent) => {
-      audio.playbackRate = e.detail.speed;
-    };
-
-    window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-    window.addEventListener(
-      "playback-update",
-      handleUpdateEvent as EventListener
-    );
-    window.addEventListener("playback-speed", handleSpeed as EventListener);
-
-    return () => {
-      window.removeEventListener(
-        "playback-seek",
-        handleSeekEvent as EventListener
-      );
-      window.removeEventListener(
-        "playback-update",
-        handleUpdateEvent as EventListener
-      );
-      window.removeEventListener(
-        "playback-speed",
-        handleSpeed as EventListener
-      );
-    };
-  }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
-
-  // Sync playback state
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    if (isPlaying && isInClipRange && !trackMuted) {
-      audio.play().catch(() => {});
-    } else {
-      audio.pause();
-    }
-  }, [isPlaying, isInClipRange, trackMuted]);
-
-  // Sync volume and speed
-  useEffect(() => {
-    const audio = audioRef.current;
-    if (!audio) return;
-
-    audio.volume = volume;
-    audio.muted = muted || trackMuted;
-    audio.playbackRate = speed;
-  }, [volume, speed, muted, trackMuted]);
-
-  return (
-    <audio
-      ref={audioRef}
-      src={src}
-      className={className}
-      preload="auto"
-      controls={false}
-      style={{ display: "none" }} // Audio elements don't need visual representation
-      onContextMenu={(e) => e.preventDefault()}
-    />
-  );
-}
+"use client";

+

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

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

+

+interface AudioPlayerProps {

+  src: string;

+  className?: string;

+  clipStartTime: number;

+  trimStart: number;

+  trimEnd: number;

+  clipDuration: number;

+  trackMuted?: boolean;

+}

+

+export function AudioPlayer({

+  src,

+  className = "",

+  clipStartTime,

+  trimStart,

+  trimEnd,

+  clipDuration,

+  trackMuted = false,

+}: AudioPlayerProps) {

+  const audioRef = useRef<HTMLAudioElement>(null);

+  const { isPlaying, currentTime, volume, speed, muted } = usePlaybackStore();

+

+  // Calculate if we're within this clip's timeline range

+  const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);

+  const isInClipRange =

+    currentTime >= clipStartTime && currentTime < clipEndTime;

+

+  // Sync playback events

+  useEffect(() => {

+    const audio = audioRef.current;

+    if (!audio || !isInClipRange) return;

+

+    const handleSeekEvent = (e: CustomEvent) => {

+      // Always update audio time, even if outside clip range

+      const timelineTime = e.detail.time;

+      const audioTime = Math.max(

+        trimStart,

+        Math.min(

+          clipDuration - trimEnd,

+          timelineTime - clipStartTime + trimStart

+        )

+      );

+      audio.currentTime = audioTime;

+    };

+

+    const handleUpdateEvent = (e: CustomEvent) => {

+      // Always update audio time, even if outside clip range

+      const timelineTime = e.detail.time;

+      const targetTime = Math.max(

+        trimStart,

+        Math.min(

+          clipDuration - trimEnd,

+          timelineTime - clipStartTime + trimStart

+        )

+      );

+

+      if (Math.abs(audio.currentTime - targetTime) > 0.5) {

+        audio.currentTime = targetTime;

+      }

+    };

+

+    const handleSpeed = (e: CustomEvent) => {

+      audio.playbackRate = e.detail.speed;

+    };

+

+    window.addEventListener("playback-seek", handleSeekEvent as EventListener);

+    window.addEventListener(

+      "playback-update",

+      handleUpdateEvent as EventListener

+    );

+    window.addEventListener("playback-speed", handleSpeed as EventListener);

+

+    return () => {

+      window.removeEventListener(

+        "playback-seek",

+        handleSeekEvent as EventListener

+      );

+      window.removeEventListener(

+        "playback-update",

+        handleUpdateEvent as EventListener

+      );

+      window.removeEventListener(

+        "playback-speed",

+        handleSpeed as EventListener

+      );

+    };

+  }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);

+

+  // Sync playback state

+  useEffect(() => {

+    const audio = audioRef.current;

+    if (!audio) return;

+

+    if (isPlaying && isInClipRange && !trackMuted) {

+      audio.play().catch(() => {});

+    } else {

+      audio.pause();

+    }

+  }, [isPlaying, isInClipRange, trackMuted]);

+

+  // Sync volume and speed

+  useEffect(() => {

+    const audio = audioRef.current;

+    if (!audio) return;

+

+    audio.volume = volume;

+    audio.muted = muted || trackMuted;

+    audio.playbackRate = speed;

+  }, [volume, speed, muted, trackMuted]);

+

+  return (

+    <audio

+      ref={audioRef}

+      src={src}

+      className={className}

+      preload="auto"

+      controls={false}

+      style={{ display: "none" }} // Audio elements don't need visual representation

+      onContextMenu={(e) => e.preventDefault()}

+    />

+  );

+}

diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 5902af65..b8b9ab2f 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -9,7 +9,8 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-foreground text-background shadow hover:bg-foreground/90",
+        default:
+          "bg-foreground text-background shadow hover:bg-foreground/90",
         primary:
           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
index 6d0b37cc..c5ca9d9f 100644
--- a/apps/web/src/components/ui/card.tsx
+++ b/apps/web/src/components/ui/card.tsx
@@ -8,7 +8,10 @@ const Card = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn("rounded-xl border bg-card text-card-foreground", className)}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground",
+      className
+    )}
     {...props}
   />
 ));
diff --git a/apps/web/src/components/ui/carousel.tsx b/apps/web/src/components/ui/carousel.tsx
index a9c98b67..3c0efdc6 100644
--- a/apps/web/src/components/ui/carousel.tsx
+++ b/apps/web/src/components/ui/carousel.tsx
@@ -124,7 +124,7 @@ const Carousel = React.forwardRef<
       <CarouselContext.Provider
         value={{
           carouselRef,
-          api,
+          api: api,
           opts,
           orientation:
             orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
diff --git a/apps/web/src/components/ui/chart.tsx b/apps/web/src/components/ui/chart.tsx
index 82d77752..a2c19116 100644
--- a/apps/web/src/components/ui/chart.tsx
+++ b/apps/web/src/components/ui/chart.tsx
@@ -188,7 +188,7 @@ const ChartTooltipContent = React.forwardRef<
           className
         )}
       >
-        {nestLabel ? null : tooltipLabel}
+        {!nestLabel ? tooltipLabel : null}
         <div className="grid gap-1.5">
           {payload.map((item, index) => {
             const key = `${nameKey || item.name || item.dataKey || "value"}`;
@@ -328,7 +328,7 @@ function getPayloadConfigFromPayload(
   key: string
 ) {
   if (typeof payload !== "object" || payload === null) {
-    return;
+    return undefined;
   }
 
   const payloadPayload =
diff --git a/apps/web/src/components/ui/collapsible.tsx b/apps/web/src/components/ui/collapsible.tsx
index acb56414..6642d604 100644
--- a/apps/web/src/components/ui/collapsible.tsx
+++ b/apps/web/src/components/ui/collapsible.tsx
@@ -1,11 +1,11 @@
-"use client";
+"use client"
 
-import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+import { Collapsible as CollapsiblePrimitive } from "radix-ui"
 
-const Collapsible = CollapsiblePrimitive.Root;
+const Collapsible = CollapsiblePrimitive.Root
 
-const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
 
-const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }
diff --git a/apps/web/src/components/ui/font-picker.tsx b/apps/web/src/components/ui/font-picker.tsx
index 479a5f0c..9a152fd4 100644
--- a/apps/web/src/components/ui/font-picker.tsx
+++ b/apps/web/src/components/ui/font-picker.tsx
@@ -1,40 +1,40 @@
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";
-
-interface FontPickerProps {
-  defaultValue?: FontFamily;
-  onValueChange?: (value: FontFamily) => void;
-  className?: string;
-}
-
-export function FontPicker({
-  defaultValue,
-  onValueChange,
-  className,
-}: FontPickerProps) {
-  return (
-    <Select defaultValue={defaultValue} onValueChange={onValueChange}>
-      <SelectTrigger className={`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>
-  );
-}
+import {

+  Select,

+  SelectContent,

+  SelectItem,

+  SelectTrigger,

+  SelectValue,

+} from "@/components/ui/select";

+import { FONT_OPTIONS, FontFamily } from "@/constants/font-constants";

+

+interface FontPickerProps {

+  defaultValue?: FontFamily;

+  onValueChange?: (value: FontFamily) => void;

+  className?: string;

+}

+

+export function FontPicker({

+  defaultValue,

+  onValueChange,

+  className,

+}: FontPickerProps) {

+  return (

+    <Select defaultValue={defaultValue} onValueChange={onValueChange}>

+      <SelectTrigger className={`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 cab151e1..cb4f53a9 100644
--- a/apps/web/src/components/ui/form.tsx
+++ b/apps/web/src/components/ui/form.tsx
@@ -115,7 +115,9 @@ const FormControl = React.forwardRef<
       ref={ref}
       id={formItemId}
       aria-describedby={
-        error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
       }
       aria-invalid={!!error}
       {...props}
diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx
index 7a64be18..31847df5 100644
--- a/apps/web/src/components/ui/image-timeline-treatment.tsx
+++ b/apps/web/src/components/ui/image-timeline-treatment.tsx
@@ -1,102 +1,102 @@
-"use client";
-
-import { useState } from "react";
-import { cn } from "@/lib/utils";
-import type { BackgroundType } from "@/types/editor";
-
-interface ImageTimelineTreatmentProps {
-  src: string;
-  alt: string;
-  targetAspectRatio?: number; // Default to 16:9 for video
-  className?: string;
-  backgroundType?: BackgroundType;
-  backgroundColor?: string;
-}
-
-export function ImageTimelineTreatment({
-  src,
-  alt,
-  targetAspectRatio = 16 / 9,
-  className,
-  backgroundType = "blur",
-  backgroundColor = "#000000",
-}: ImageTimelineTreatmentProps) {
-  const [imageLoaded, setImageLoaded] = useState(false);
-  const [imageDimensions, setImageDimensions] = useState<{
-    width: number;
-    height: number;
-  } | null>(null);
-
-  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const img = e.currentTarget;
-    setImageDimensions({
-      width: img.naturalWidth,
-      height: img.naturalHeight,
-    });
-    setImageLoaded(true);
-  };
-
-  const imageAspectRatio = imageDimensions
-    ? imageDimensions.width / imageDimensions.height
-    : 1;
-
-  const needsAspectRatioTreatment = imageAspectRatio !== targetAspectRatio;
-
-  return (
-    <div
-      className={cn("relative overflow-hidden", className)}
-      style={{ aspectRatio: targetAspectRatio }}
-    >
-      {/* Background Layer */}
-      {needsAspectRatioTreatment && imageLoaded && (
-        <>
-          {backgroundType === "blur" && (
-            <div className="absolute inset-0">
-              <img
-                src={src}
-                alt=""
-                className="w-full h-full object-cover filter blur-xl scale-110 opacity-60"
-                aria-hidden="true"
-              />
-              <div className="absolute inset-0 bg-black/20" />
-            </div>
-          )}
-
-          {backgroundType === "mirror" && (
-            <div className="absolute inset-0">
-              <img
-                src={src}
-                alt=""
-                className="w-full h-full object-cover opacity-30"
-                aria-hidden="true"
-              />
-            </div>
-          )}
-
-          {backgroundType === "color" && (
-            <div className="absolute inset-0" style={{ backgroundColor }} />
-          )}
-        </>
-      )}
-
-      {/* Main Image Layer */}
-      <div className="absolute inset-0">
-        <img
-          src={src}
-          alt={alt}
-          className="w-full h-full object-cover"
-          onLoad={handleImageLoad}
-        />
-      </div>
-
-      {/* Loading state */}
-      {!imageLoaded && (
-        <div className="absolute inset-0 flex items-center justify-center bg-muted/30">
-          <div className="animate-pulse text-xs text-muted-foreground">
-            Loading...
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
+"use client";

+

+import { useState } from "react";

+import { cn } from "@/lib/utils";

+import type { BackgroundType } from "@/types/editor";

+

+interface ImageTimelineTreatmentProps {

+  src: string;

+  alt: string;

+  targetAspectRatio?: number; // Default to 16:9 for video

+  className?: string;

+  backgroundType?: BackgroundType;

+  backgroundColor?: string;

+}

+

+export function ImageTimelineTreatment({

+  src,

+  alt,

+  targetAspectRatio = 16 / 9,

+  className,

+  backgroundType = "blur",

+  backgroundColor = "#000000",

+}: ImageTimelineTreatmentProps) {

+  const [imageLoaded, setImageLoaded] = useState(false);

+  const [imageDimensions, setImageDimensions] = useState<{

+    width: number;

+    height: number;

+  } | null>(null);

+

+  const handleImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {

+    const img = e.currentTarget;

+    setImageDimensions({

+      width: img.naturalWidth,

+      height: img.naturalHeight,

+    });

+    setImageLoaded(true);

+  };

+

+  const imageAspectRatio = imageDimensions

+    ? imageDimensions.width / imageDimensions.height

+    : 1;

+

+  const needsAspectRatioTreatment = imageAspectRatio !== targetAspectRatio;

+

+  return (

+    <div

+      className={cn("relative overflow-hidden", className)}

+      style={{ aspectRatio: targetAspectRatio }}

+    >

+      {/* Background Layer */}

+      {needsAspectRatioTreatment && imageLoaded && (

+        <>

+          {backgroundType === "blur" && (

+            <div className="absolute inset-0">

+              <img

+                src={src}

+                alt=""

+                className="w-full h-full object-cover filter blur-xl scale-110 opacity-60"

+                aria-hidden="true"

+              />

+              <div className="absolute inset-0 bg-black/20" />

+            </div>

+          )}

+

+          {backgroundType === "mirror" && (

+            <div className="absolute inset-0">

+              <img

+                src={src}

+                alt=""

+                className="w-full h-full object-cover opacity-30"

+                aria-hidden="true"

+              />

+            </div>

+          )}

+

+          {backgroundType === "color" && (

+            <div className="absolute inset-0" style={{ backgroundColor }} />

+          )}

+        </>

+      )}

+

+      {/* Main Image Layer */}

+      <div className="absolute inset-0">

+        <img

+          src={src}

+          alt={alt}

+          className="w-full h-full object-cover"

+          onLoad={handleImageLoad}

+        />

+      </div>

+

+      {/* Loading state */}

+      {!imageLoaded && (

+        <div className="absolute inset-0 flex items-center justify-center bg-muted/30">

+          <div className="animate-pulse text-xs text-muted-foreground">

+            Loading...

+          </div>

+        </div>

+      )}

+    </div>

+  );

+}

diff --git a/apps/web/src/components/ui/phone-input.tsx b/apps/web/src/components/ui/phone-input.tsx
index ca85df8f..95ad9131 100644
--- a/apps/web/src/components/ui/phone-input.tsx
+++ b/apps/web/src/components/ui/phone-input.tsx
@@ -1,167 +1,167 @@
-import * as React from "react";
-import { CheckIcon, ChevronsUpDown } from "lucide-react";
-import * as RPNInput from "react-phone-number-input";
-import flags from "react-phone-number-input/flags";
-
-import { Button } from "./button";
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-} from "./command";
-import { Input } from "./input";
-import { Popover, PopoverContent, PopoverTrigger } from "./popover";
-import { ScrollArea } from "./scroll-area";
-import { cn } from "../../lib/utils";
-
-type PhoneInputProps = Omit<
-  React.ComponentProps<"input">,
-  "onChange" | "value" | "ref"
-> &
-  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}
-        />
-      );
-    }
-  );
-PhoneInput.displayName = "PhoneInput";
-
-const InputComponent = React.forwardRef<
-  HTMLInputElement,
-  React.ComponentProps<"input">
->(({ className, ...props }, ref) => (
-  <Input
-    className={cn("rounded-e-lg rounded-s-none", 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;
-};
-
-const CountrySelect = ({
-  disabled,
-  value: selectedCountry,
-  options: countryList,
-  onChange,
-}: CountrySelectProps) => {
-  return (
-    <Popover>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          className="flex gap-1 rounded-e-none rounded-s-lg 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;
-}
-
-const CountrySelectOption = ({
-  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-sm text-foreground/50">{`+${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];
-
-  return (
-    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg]:size-full">
-      {Flag && <Flag title={countryName} />}
-    </span>
-  );
-};
-
-export { PhoneInput };
+import * as React from "react";

+import { CheckIcon, ChevronsUpDown } from "lucide-react";

+import * as RPNInput from "react-phone-number-input";

+import flags from "react-phone-number-input/flags";

+

+import { Button } from "./button";

+import {

+  Command,

+  CommandEmpty,

+  CommandGroup,

+  CommandInput,

+  CommandItem,

+  CommandList,

+} from "./command";

+import { Input } from "./input";

+import { Popover, PopoverContent, PopoverTrigger } from "./popover";

+import { ScrollArea } from "./scroll-area";

+import { cn } from "../../lib/utils";

+

+type PhoneInputProps = Omit<

+  React.ComponentProps<"input">,

+  "onChange" | "value" | "ref"

+> &

+  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}

+        />

+      );

+    }

+  );

+PhoneInput.displayName = "PhoneInput";

+

+const InputComponent = React.forwardRef<

+  HTMLInputElement,

+  React.ComponentProps<"input">

+>(({ className, ...props }, ref) => (

+  <Input

+    className={cn("rounded-e-lg rounded-s-none", 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;

+};

+

+const CountrySelect = ({

+  disabled,

+  value: selectedCountry,

+  options: countryList,

+  onChange,

+}: CountrySelectProps) => {

+  return (

+    <Popover>

+      <PopoverTrigger asChild>

+        <Button

+          type="button"

+          variant="outline"

+          className="flex gap-1 rounded-e-none rounded-s-lg 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;

+}

+

+const CountrySelectOption = ({

+  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-sm text-foreground/50">{`+${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];

+

+  return (

+    <span className="flex h-4 w-6 overflow-hidden rounded-sm bg-foreground/20 [&_svg]:size-full">

+      {Flag && <Flag title={countryName} />}

+    </span>

+  );

+};

+

+export { PhoneInput };

diff --git a/apps/web/src/components/ui/separator.tsx b/apps/web/src/components/ui/separator.tsx
index 5b6774dc..12d81c4a 100644
--- a/apps/web/src/components/ui/separator.tsx
+++ b/apps/web/src/components/ui/separator.tsx
@@ -1,9 +1,9 @@
-"use client";
+"use client"
 
-import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
-import { cn } from "@/lib/utils";
+import { cn } from "@/lib/utils"
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
@@ -25,7 +25,7 @@ const Separator = React.forwardRef<
       {...props}
     />
   )
-);
-Separator.displayName = SeparatorPrimitive.Root.displayName;
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
 
-export { Separator };
+export { Separator }
diff --git a/apps/web/src/components/ui/sonner.tsx b/apps/web/src/components/ui/sonner.tsx
index 549cf841..452f4d9f 100644
--- a/apps/web/src/components/ui/sonner.tsx
+++ b/apps/web/src/components/ui/sonner.tsx
@@ -1,12 +1,12 @@
-"use client";
+"use client"
 
-import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
+import { useTheme } from "next-themes"
+import { Toaster as Sonner } from "sonner"
 
-type ToasterProps = React.ComponentProps<typeof Sonner>;
+type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
-  const { theme = "system" } = useTheme();
+  const { theme = "system" } = useTheme()
 
   return (
     <Sonner
@@ -25,7 +25,7 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       {...props}
     />
-  );
-};
+  )
+}
 
-export { Toaster };
+export { Toaster }
diff --git a/apps/web/src/components/ui/sponsor-button.tsx b/apps/web/src/components/ui/sponsor-button.tsx
index a060e428..79c708a2 100644
--- a/apps/web/src/components/ui/sponsor-button.tsx
+++ b/apps/web/src/components/ui/sponsor-button.tsx
@@ -14,6 +14,7 @@ export function SponsorButton({
   companyName,
   className = "",
 }: SponsorButtonProps) {
+
   return (
     <motion.a
       href={href}
diff --git a/apps/web/src/components/ui/toaster.tsx b/apps/web/src/components/ui/toaster.tsx
index baf623f0..3eb8a720 100644
--- a/apps/web/src/components/ui/toaster.tsx
+++ b/apps/web/src/components/ui/toaster.tsx
@@ -15,16 +15,20 @@ export function Toaster() {
 
   return (
     <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
       <ToastViewport />
     </ToastProvider>
   );
diff --git a/apps/web/src/constants/actions.ts b/apps/web/src/constants/actions.ts
index 4278ce7e..5f1883f1 100644
--- a/apps/web/src/constants/actions.ts
+++ b/apps/web/src/constants/actions.ts
@@ -191,7 +191,7 @@ export function isActionBound(action: Action): boolean {
 export function useActionHandler<A extends Action>(
   action: A,
   handler: ActionFunc<A>,
-  isActive: MutableRefObject<boolean> | boolean | undefined
+  isActive: MutableRefObject<boolean> | boolean | undefined = undefined
 ) {
   const handlerRef = useRef(handler);
   const [isBound, setIsBound] = useState(false);
diff --git a/apps/web/src/constants/font-constants.ts b/apps/web/src/constants/font-constants.ts
index a1c4e4d5..bfddc182 100644
--- a/apps/web/src/constants/font-constants.ts
+++ b/apps/web/src/constants/font-constants.ts
@@ -1,79 +1,79 @@
-export interface FontOption {
-  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,
-  },
-
-  // 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";
-
-// Type-safe font family union
-export type FontFamily = (typeof FONT_OPTIONS)[number]["value"];
-
-// Helper functions
-export const getFontByValue = (value: string): FontOption | undefined =>
-  FONT_OPTIONS.find((font) => font.value === value);
-
-export const getGoogleFonts = (): FontOption[] =>
-  FONT_OPTIONS.filter((font) => font.category === "google");
-
-export const getSystemFonts = (): FontOption[] =>
-  FONT_OPTIONS.filter((font) => font.category === "system");
+export interface FontOption {

+  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,

+  },

+

+  // 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";

+

+// Type-safe font family union

+export type FontFamily = (typeof FONT_OPTIONS)[number]["value"];

+

+// Helper functions

+export const getFontByValue = (value: string): FontOption | undefined =>

+  FONT_OPTIONS.find((font) => font.value === value);

+

+export const getGoogleFonts = (): FontOption[] =>

+  FONT_OPTIONS.filter((font) => font.category === "google");

+

+export const getSystemFonts = (): FontOption[] =>

+  FONT_OPTIONS.filter((font) => font.category === "system");

diff --git a/apps/web/src/constants/site.ts b/apps/web/src/constants/site.ts
index f47f6470..61ec29c1 100644
--- a/apps/web/src/constants/site.ts
+++ b/apps/web/src/constants/site.ts
@@ -1,11 +1 @@
-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",
-};
+export const SITE_URL = "https://opencut.app";
\ No newline at end of file
diff --git a/apps/web/src/data/colors.ts b/apps/web/src/data/colors.ts
index 9a12a587..3ef094d6 100644
--- a/apps/web/src/data/colors.ts
+++ b/apps/web/src/data/colors.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",
-];
+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",

+];

diff --git a/apps/web/src/hooks/auth/useLogin.ts b/apps/web/src/hooks/auth/useLogin.ts
index b2c5ef98..12eddcbf 100644
--- a/apps/web/src/hooks/auth/useLogin.ts
+++ b/apps/web/src/hooks/auth/useLogin.ts
@@ -3,58 +3,58 @@ import { useRouter } from "next/navigation";
 import { signIn } from "@opencut/auth/client";
 
 export function useLogin() {
-  const router = useRouter();
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+    const router = useRouter();
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [isEmailLoading, setIsEmailLoading] = useState(false);
+    const [isGoogleLoading, setIsGoogleLoading] = useState(false);
 
-  const handleLogin = useCallback(async () => {
-    setError(null);
-    setIsEmailLoading(true);
+    const handleLogin = useCallback(async () => {
+        setError(null);
+        setIsEmailLoading(true);
 
-    const { error } = await signIn.email({
-      email,
-      password,
-    });
+        const { error } = await signIn.email({
+            email,
+            password,
+        });
 
-    if (error) {
-      setError(error.message || "An unexpected error occurred.");
-      setIsEmailLoading(false);
-      return;
-    }
+        if (error) {
+            setError(error.message || "An unexpected error occurred.");
+            setIsEmailLoading(false);
+            return;
+        }
 
-    router.push("/projects");
-  }, [router, email, password]);
+        router.push("/projects");
+    }, [router, email, password]);
 
-  const handleGoogleLogin = async () => {
-    setError(null);
-    setIsGoogleLoading(true);
+    const handleGoogleLogin = async () => {
+        setError(null);
+        setIsGoogleLoading(true);
 
-    try {
-      await signIn.social({
-        provider: "google",
-        callbackURL: "/projects",
-      });
-    } catch (error) {
-      setError("Failed to sign in with Google. Please try again.");
-      setIsGoogleLoading(false);
-    }
-  };
+        try {
+            await signIn.social({
+                provider: "google",
+                callbackURL: "/projects",
+            });
+        } catch (error) {
+            setError("Failed to sign in with Google. Please try again.");
+            setIsGoogleLoading(false);
+        }
+    };
 
-  const isAnyLoading = isEmailLoading || isGoogleLoading;
+    const isAnyLoading = isEmailLoading || isGoogleLoading;
 
-  return {
-    email,
-    setEmail,
-    password,
-    setPassword,
-    error,
-    isEmailLoading,
-    isGoogleLoading,
-    isAnyLoading,
-    handleLogin,
-    handleGoogleLogin,
-  };
+    return {
+        email,
+        setEmail,
+        password,
+        setPassword,
+        error,
+        isEmailLoading,
+        isGoogleLoading,
+        isAnyLoading,
+        handleLogin,
+        handleGoogleLogin,
+    };
 }
diff --git a/apps/web/src/hooks/auth/useSignUp.ts b/apps/web/src/hooks/auth/useSignUp.ts
index b6039f85..4cd2850a 100644
--- a/apps/web/src/hooks/auth/useSignUp.ts
+++ b/apps/web/src/hooks/auth/useSignUp.ts
@@ -3,63 +3,63 @@ import { useRouter } from "next/navigation";
 import { signUp, signIn } from "@opencut/auth/client";
 
 export function useSignUp() {
-  const router = useRouter();
-  const [name, setName] = useState("");
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-  const [error, setError] = useState<string | null>(null);
-  const [isEmailLoading, setIsEmailLoading] = useState(false);
-  const [isGoogleLoading, setIsGoogleLoading] = useState(false);
+    const router = useRouter();
+    const [name, setName] = useState("");
+    const [email, setEmail] = useState("");
+    const [password, setPassword] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [isEmailLoading, setIsEmailLoading] = useState(false);
+    const [isGoogleLoading, setIsGoogleLoading] = useState(false);
 
-  const handleSignUp = useCallback(async () => {
-    setError(null);
-    setIsEmailLoading(true);
+    const handleSignUp = useCallback(async () => {
+        setError(null);
+        setIsEmailLoading(true);
 
-    const { error } = await signUp.email({
-      name,
-      email,
-      password,
-    });
+        const { error } = await signUp.email({
+            name,
+            email,
+            password,
+        });
 
-    if (error) {
-      setError(error.message || "An unexpected error occurred.");
-      setIsEmailLoading(false);
-      return;
-    }
+        if (error) {
+            setError(error.message || "An unexpected error occurred.");
+            setIsEmailLoading(false);
+            return;
+        }
 
-    router.push("/login");
-  }, [name, email, password, router]);
+        router.push("/login");
+    }, [name, email, password, router]);
 
-  const handleGoogleSignUp = useCallback(async () => {
-    setError(null);
-    setIsGoogleLoading(true);
+    const handleGoogleSignUp = useCallback(async () => {
+        setError(null);
+        setIsGoogleLoading(true);
 
-    try {
-      await signIn.social({
-        provider: "google",
-      });
+        try {
+            await signIn.social({
+                provider: "google",
+            });
 
-      router.push("/editor");
-    } catch (error) {
-      setError("Failed to sign up with Google. Please try again.");
-      setIsGoogleLoading(false);
-    }
-  }, [router]);
+            router.push("/editor");
+        } catch (error) {
+            setError("Failed to sign up with Google. Please try again.");
+            setIsGoogleLoading(false);
+        }
+    }, [router]);
 
-  const isAnyLoading = isEmailLoading || isGoogleLoading;
+    const isAnyLoading = isEmailLoading || isGoogleLoading;
 
-  return {
-    name,
-    setName,
-    email,
-    setEmail,
-    password,
-    setPassword,
-    error,
-    isEmailLoading,
-    isGoogleLoading,
-    isAnyLoading,
-    handleSignUp,
-    handleGoogleSignUp,
-  };
-}
+    return {
+        name,
+        setName,
+        email,
+        setEmail,
+        password,
+        setPassword,
+        error,
+        isEmailLoading,
+        isGoogleLoading,
+        isAnyLoading,
+        handleSignUp,
+        handleGoogleSignUp,
+    };
+}
\ No newline at end of file
diff --git a/apps/web/src/hooks/use-aspect-ratio.ts b/apps/web/src/hooks/use-aspect-ratio.ts
index e3e85141..40de8454 100644
--- a/apps/web/src/hooks/use-aspect-ratio.ts
+++ b/apps/web/src/hooks/use-aspect-ratio.ts
@@ -1,92 +1,92 @@
-import { useEditorStore } from "@/stores/editor-store";
-import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store";
-import { useTimelineStore } from "@/stores/timeline-store";
-
-export function useAspectRatio() {
-  const { canvasSize, canvasMode, canvasPresets } = useEditorStore();
-  const { mediaItems } = useMediaStore();
-  const { tracks } = useTimelineStore();
-
-  // Find the current preset based on canvas size
-  const currentPreset = canvasPresets.find(
-    (preset) =>
-      preset.width === canvasSize.width && preset.height === canvasSize.height
-  );
-
-  // Get the original aspect ratio from the first video/image in timeline
-  const getOriginalAspectRatio = (): number => {
-    // Find first video or image in timeline
-    for (const track of tracks) {
-      for (const element of track.elements) {
-        if (element.type === "media") {
-          const mediaItem = mediaItems.find(
-            (item) => item.id === element.mediaId
-          );
-          if (
-            mediaItem &&
-            (mediaItem.type === "video" || mediaItem.type === "image")
-          ) {
-            return getMediaAspectRatio(mediaItem);
-          }
-        }
-      }
-    }
-    return 16 / 9; // Default aspect ratio
-  };
-
-  // Get current aspect ratio
-  const getCurrentAspectRatio = (): number => {
-    return canvasSize.width / canvasSize.height;
-  };
-
-  // Format aspect ratio as a readable string
-  const formatAspectRatio = (aspectRatio: number): string => {
-    // Check if it matches a common aspect ratio
-    const ratios = [
-      { ratio: 16 / 9, label: "16:9" },
-      { ratio: 9 / 16, label: "9:16" },
-      { ratio: 1, label: "1:1" },
-      { ratio: 4 / 3, label: "4:3" },
-      { ratio: 3 / 4, label: "3:4" },
-      { ratio: 21 / 9, label: "21:9" },
-    ];
-
-    for (const { ratio, label } of ratios) {
-      if (Math.abs(aspectRatio - ratio) < 0.01) {
-        return label;
-      }
-    }
-
-    // If not a common ratio, format as decimal
-    return aspectRatio.toFixed(2);
-  };
-
-  // Check if current mode is "Original"
-  const isOriginal = canvasMode === "original";
-
-  // Get display name for current aspect ratio
-  const getDisplayName = (): string => {
-    // If explicitly set to original mode, always show "Original"
-    if (canvasMode === "original") {
-      return "Original";
-    }
-
-    if (currentPreset) {
-      return currentPreset.name;
-    }
-
-    return formatAspectRatio(getCurrentAspectRatio());
-  };
-
-  return {
-    currentPreset,
-    canvasMode,
-    isOriginal,
-    getCurrentAspectRatio,
-    getOriginalAspectRatio,
-    formatAspectRatio,
-    getDisplayName,
-    canvasSize,
-    canvasPresets,
-  };
-}
+import { useEditorStore } from "@/stores/editor-store";

+import { useMediaStore, getMediaAspectRatio } from "@/stores/media-store";

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

+

+export function useAspectRatio() {

+  const { canvasSize, canvasMode, canvasPresets } = useEditorStore();

+  const { mediaItems } = useMediaStore();

+  const { tracks } = useTimelineStore();

+

+  // Find the current preset based on canvas size

+  const currentPreset = canvasPresets.find(

+    (preset) =>

+      preset.width === canvasSize.width && preset.height === canvasSize.height

+  );

+

+  // Get the original aspect ratio from the first video/image in timeline

+  const getOriginalAspectRatio = (): number => {

+    // Find first video or image in timeline

+    for (const track of tracks) {

+      for (const element of track.elements) {

+        if (element.type === "media") {

+          const mediaItem = mediaItems.find(

+            (item) => item.id === element.mediaId

+          );

+          if (

+            mediaItem &&

+            (mediaItem.type === "video" || mediaItem.type === "image")

+          ) {

+            return getMediaAspectRatio(mediaItem);

+          }

+        }

+      }

+    }

+    return 16 / 9; // Default aspect ratio

+  };

+

+  // Get current aspect ratio

+  const getCurrentAspectRatio = (): number => {

+    return canvasSize.width / canvasSize.height;

+  };

+

+  // Format aspect ratio as a readable string

+  const formatAspectRatio = (aspectRatio: number): string => {

+    // Check if it matches a common aspect ratio

+    const ratios = [

+      { ratio: 16 / 9, label: "16:9" },

+      { ratio: 9 / 16, label: "9:16" },

+      { ratio: 1, label: "1:1" },

+      { ratio: 4 / 3, label: "4:3" },

+      { ratio: 3 / 4, label: "3:4" },

+      { ratio: 21 / 9, label: "21:9" },

+    ];

+

+    for (const { ratio, label } of ratios) {

+      if (Math.abs(aspectRatio - ratio) < 0.01) {

+        return label;

+      }

+    }

+

+    // If not a common ratio, format as decimal

+    return aspectRatio.toFixed(2);

+  };

+

+  // Check if current mode is "Original"

+  const isOriginal = canvasMode === "original";

+

+  // Get display name for current aspect ratio

+  const getDisplayName = (): string => {

+    // If explicitly set to original mode, always show "Original"

+    if (canvasMode === "original") {

+      return "Original";

+    }

+

+    if (currentPreset) {

+      return currentPreset.name;

+    }

+

+    return formatAspectRatio(getCurrentAspectRatio());

+  };

+

+  return {

+    currentPreset,

+    canvasMode,

+    isOriginal,

+    getCurrentAspectRatio,

+    getOriginalAspectRatio,

+    formatAspectRatio,

+    getDisplayName,

+    canvasSize,

+    canvasPresets,

+  };

+}

diff --git a/apps/web/src/hooks/use-drag-drop.ts b/apps/web/src/hooks/use-drag-drop.ts
index 0b1d4008..eaab89d8 100644
--- a/apps/web/src/hooks/use-drag-drop.ts
+++ b/apps/web/src/hooks/use-drag-drop.ts
@@ -1,85 +1,85 @@
-import { useState, useRef } from "react";
-
-interface UseDragDropOptions {
-  onDrop?: (files: FileList) => void;
-}
-
-// Helper function to check if drag contains files from external sources (not internal app drags)
-const containsFiles = (dataTransfer: DataTransfer): boolean => {
-  // Check if this is an internal app drag (media item)
-  if (dataTransfer.types.includes("application/x-media-item")) {
-    return false;
-  }
-
-  // Only show overlay for external file drags
-  return dataTransfer.types.includes("Files");
-};
-
-export function useDragDrop(options: UseDragDropOptions = {}) {
-  const [isDragOver, setIsDragOver] = useState(false);
-  const dragCounterRef = useRef(0);
-
-  const handleDragEnter = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Only handle external file drags, not internal app element drags
-    if (!containsFiles(e.dataTransfer)) {
-      return;
-    }
-
-    dragCounterRef.current += 1;
-    if (!isDragOver) {
-      setIsDragOver(true);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Only handle file drags
-    if (!containsFiles(e.dataTransfer)) {
-      return;
-    }
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    e.preventDefault();
-
-    // Only handle file drags
-    if (!containsFiles(e.dataTransfer)) {
-      return;
-    }
-
-    dragCounterRef.current -= 1;
-    if (dragCounterRef.current === 0) {
-      setIsDragOver(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setIsDragOver(false);
-    dragCounterRef.current = 0;
-
-    // Only handle file drops
-    if (
-      options.onDrop &&
-      e.dataTransfer.files &&
-      containsFiles(e.dataTransfer)
-    ) {
-      options.onDrop(e.dataTransfer.files);
-    }
-  };
-
-  const dragProps = {
-    onDragEnter: handleDragEnter,
-    onDragOver: handleDragOver,
-    onDragLeave: handleDragLeave,
-    onDrop: handleDrop,
-  };
-
-  return {
-    isDragOver,
-    dragProps,
-  };
-}
+import { useState, useRef } from "react";

+

+interface UseDragDropOptions {

+  onDrop?: (files: FileList) => void;

+}

+

+// Helper function to check if drag contains files from external sources (not internal app drags)

+const containsFiles = (dataTransfer: DataTransfer): boolean => {

+  // Check if this is an internal app drag (media item)

+  if (dataTransfer.types.includes("application/x-media-item")) {

+    return false;

+  }

+

+  // Only show overlay for external file drags

+  return dataTransfer.types.includes("Files");

+};

+

+export function useDragDrop(options: UseDragDropOptions = {}) {

+  const [isDragOver, setIsDragOver] = useState(false);

+  const dragCounterRef = useRef(0);

+

+  const handleDragEnter = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    // Only handle external file drags, not internal app element drags

+    if (!containsFiles(e.dataTransfer)) {

+      return;

+    }

+

+    dragCounterRef.current += 1;

+    if (!isDragOver) {

+      setIsDragOver(true);

+    }

+  };

+

+  const handleDragOver = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    // Only handle file drags

+    if (!containsFiles(e.dataTransfer)) {

+      return;

+    }

+  };

+

+  const handleDragLeave = (e: React.DragEvent) => {

+    e.preventDefault();

+

+    // Only handle file drags

+    if (!containsFiles(e.dataTransfer)) {

+      return;

+    }

+

+    dragCounterRef.current -= 1;

+    if (dragCounterRef.current === 0) {

+      setIsDragOver(false);

+    }

+  };

+

+  const handleDrop = (e: React.DragEvent) => {

+    e.preventDefault();

+    setIsDragOver(false);

+    dragCounterRef.current = 0;

+

+    // Only handle file drops

+    if (

+      options.onDrop &&

+      e.dataTransfer.files &&

+      containsFiles(e.dataTransfer)

+    ) {

+      options.onDrop(e.dataTransfer.files);

+    }

+  };

+

+  const dragProps = {

+    onDragEnter: handleDragEnter,

+    onDragOver: handleDragOver,

+    onDragLeave: handleDragLeave,

+    onDrop: handleDrop,

+  };

+

+  return {

+    isDragOver,

+    dragProps,

+  };

+}

diff --git a/apps/web/src/hooks/use-keybindings.ts b/apps/web/src/hooks/use-keybindings.ts
index 7224c1c8..7887f3f1 100644
--- a/apps/web/src/hooks/use-keybindings.ts
+++ b/apps/web/src/hooks/use-keybindings.ts
@@ -25,7 +25,7 @@ export function useKeybindingsListener() {
       ev.preventDefault();
 
       // Handle actions with default arguments
-      let actionArgs: any;
+      let actionArgs: any = undefined;
 
       if (boundAction === "seek-forward") {
         actionArgs = { seconds: 1 };
diff --git a/apps/web/src/hooks/use-mobile.tsx b/apps/web/src/hooks/use-mobile.tsx
index 48fab93c..2b0fe1df 100644
--- a/apps/web/src/hooks/use-mobile.tsx
+++ b/apps/web/src/hooks/use-mobile.tsx
@@ -1,21 +1,19 @@
-import * as React from "react";
+import * as React from "react"
 
-const MOBILE_BREAKPOINT = 768;
+const MOBILE_BREAKPOINT = 768
 
 export function useIsMobile() {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
-    undefined
-  );
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
 
   React.useEffect(() => {
-    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    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);
-  }, []);
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
 
-  return !!isMobile;
+  return !!isMobile
 }
diff --git a/apps/web/src/hooks/use-selection-box.ts b/apps/web/src/hooks/use-selection-box.ts
index 46e77fa9..c40617c1 100644
--- a/apps/web/src/hooks/use-selection-box.ts
+++ b/apps/web/src/hooks/use-selection-box.ts
@@ -1,199 +1,199 @@
-import { useState, useEffect, useCallback } from "react";
-
-interface UseSelectionBoxProps {
-  containerRef: React.RefObject<HTMLElement>;
-  playheadRef?: React.RefObject<HTMLElement>;
-  onSelectionComplete: (
-    elements: { trackId: string; elementId: string }[]
-  ) => void;
-  isEnabled?: boolean;
-}
-
-interface SelectionBoxState {
-  startPos: { x: number; y: number };
-  currentPos: { x: number; y: number };
-  isActive: boolean;
-}
-
-export function useSelectionBox({
-  containerRef,
-  playheadRef,
-  onSelectionComplete,
-  isEnabled = true,
-}: UseSelectionBoxProps) {
-  const [selectionBox, setSelectionBox] = useState<SelectionBoxState | null>(
-    null
-  );
-  const [justFinishedSelecting, setJustFinishedSelecting] = useState(false);
-
-  // Mouse down handler to start selection
-  const handleMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      if (!isEnabled) return;
-
-      // Only start selection on empty space clicks
-      if ((e.target as HTMLElement).closest(".timeline-element")) {
-        return;
-      }
-      if (playheadRef?.current?.contains(e.target as Node)) {
-        return;
-      }
-      if ((e.target as HTMLElement).closest("[data-track-labels]")) {
-        return;
-      }
-      // Don't start selection when clicking in the ruler area - this interferes with playhead dragging
-      if ((e.target as HTMLElement).closest("[data-ruler-area]")) {
-        return;
-      }
-
-      setSelectionBox({
-        startPos: { x: e.clientX, y: e.clientY },
-        currentPos: { x: e.clientX, y: e.clientY },
-        isActive: false, // Will become active when mouse moves
-      });
-    },
-    [isEnabled, playheadRef]
-  );
-
-  // Function to select elements within the selection box
-  const selectElementsInBox = useCallback(
-    (startPos: { x: number; y: number }, endPos: { x: number; y: number }) => {
-      if (!containerRef.current) return;
-
-      const container = containerRef.current;
-      const containerRect = container.getBoundingClientRect();
-
-      // Calculate selection rectangle in container coordinates
-      const startX = startPos.x - containerRect.left;
-      const startY = startPos.y - containerRect.top;
-      const endX = endPos.x - containerRect.left;
-      const endY = endPos.y - containerRect.top;
-
-      const selectionRect = {
-        left: Math.min(startX, endX),
-        top: Math.min(startY, endY),
-        right: Math.max(startX, endX),
-        bottom: Math.max(startY, endY),
-      };
-
-      // Find all timeline elements within the selection rectangle
-      const timelineElements = container.querySelectorAll(".timeline-element");
-
-      const selectedElements: { trackId: string; elementId: string }[] = [];
-
-      timelineElements.forEach((element) => {
-        const elementRect = element.getBoundingClientRect();
-        // Use absolute coordinates for more accurate intersection detection
-        const elementAbsolute = {
-          left: elementRect.left,
-          top: elementRect.top,
-          right: elementRect.right,
-          bottom: elementRect.bottom,
-        };
-
-        const selectionAbsolute = {
-          left: startPos.x,
-          top: startPos.y,
-          right: endPos.x,
-          bottom: endPos.y,
-        };
-
-        // Normalize selection rectangle (handle dragging in any direction)
-        const normalizedSelection = {
-          left: Math.min(selectionAbsolute.left, selectionAbsolute.right),
-          top: Math.min(selectionAbsolute.top, selectionAbsolute.bottom),
-          right: Math.max(selectionAbsolute.left, selectionAbsolute.right),
-          bottom: Math.max(selectionAbsolute.top, selectionAbsolute.bottom),
-        };
-
-        const elementId = element.getAttribute("data-element-id");
-        const trackId = element.getAttribute("data-track-id");
-
-        // Check if element intersects with selection rectangle (any overlap)
-        // Using absolute coordinates for more precise detection
-        const intersects = !(
-          elementAbsolute.right < normalizedSelection.left ||
-          elementAbsolute.left > normalizedSelection.right ||
-          elementAbsolute.bottom < normalizedSelection.top ||
-          elementAbsolute.top > normalizedSelection.bottom
-        );
-
-        if (intersects && elementId && trackId) {
-          selectedElements.push({ trackId, elementId });
-        }
-      });
-
-      // Always call the callback - with elements or empty array to clear selection
-      console.log(
-        JSON.stringify({ selectElementsInBox: selectedElements.length })
-      );
-      onSelectionComplete(selectedElements);
-    },
-    [containerRef, onSelectionComplete]
-  );
-
-  // Effect to track selection box movement
-  useEffect(() => {
-    if (!selectionBox) return;
-
-    const handleMouseMove = (e: MouseEvent) => {
-      const deltaX = Math.abs(e.clientX - selectionBox.startPos.x);
-      const deltaY = Math.abs(e.clientY - selectionBox.startPos.y);
-
-      // Start selection if mouse moved more than 5px
-      const shouldActivate = deltaX > 5 || deltaY > 5;
-
-      const newSelectionBox = {
-        ...selectionBox,
-        currentPos: { x: e.clientX, y: e.clientY },
-        isActive: shouldActivate || selectionBox.isActive,
-      };
-
-      setSelectionBox(newSelectionBox);
-
-      // Real-time visual feedback: update selection as we drag
-      if (newSelectionBox.isActive) {
-        selectElementsInBox(
-          newSelectionBox.startPos,
-          newSelectionBox.currentPos
-        );
-      }
-    };
-
-    const handleMouseUp = () => {
-      console.log(
-        JSON.stringify({ mouseUp: { wasActive: selectionBox?.isActive } })
-      );
-
-      // If we had an active selection, mark that we just finished selecting
-      if (selectionBox?.isActive) {
-        console.log(JSON.stringify({ settingJustFinishedSelecting: true }));
-        setJustFinishedSelecting(true);
-        // Clear the flag after a short delay to allow click events to check it
-        setTimeout(() => {
-          console.log(JSON.stringify({ clearingJustFinishedSelecting: true }));
-          setJustFinishedSelecting(false);
-        }, 50);
-      }
-
-      // Don't call selectElementsInBox again - real-time selection already handled it
-      // Just clean up the selection box visual
-      setSelectionBox(null);
-    };
-
-    window.addEventListener("mousemove", handleMouseMove);
-    window.addEventListener("mouseup", handleMouseUp);
-
-    return () => {
-      window.removeEventListener("mousemove", handleMouseMove);
-      window.removeEventListener("mouseup", handleMouseUp);
-    };
-  }, [selectionBox, selectElementsInBox]);
-
-  return {
-    selectionBox,
-    handleMouseDown,
-    isSelecting: selectionBox?.isActive || false,
-    justFinishedSelecting,
-  };
-}
+import { useState, useEffect, useCallback } from "react";

+

+interface UseSelectionBoxProps {

+  containerRef: React.RefObject<HTMLElement>;

+  playheadRef?: React.RefObject<HTMLElement>;

+  onSelectionComplete: (

+    elements: { trackId: string; elementId: string }[]

+  ) => void;

+  isEnabled?: boolean;

+}

+

+interface SelectionBoxState {

+  startPos: { x: number; y: number };

+  currentPos: { x: number; y: number };

+  isActive: boolean;

+}

+

+export function useSelectionBox({

+  containerRef,

+  playheadRef,

+  onSelectionComplete,

+  isEnabled = true,

+}: UseSelectionBoxProps) {

+  const [selectionBox, setSelectionBox] = useState<SelectionBoxState | null>(

+    null

+  );

+  const [justFinishedSelecting, setJustFinishedSelecting] = useState(false);

+

+  // Mouse down handler to start selection

+  const handleMouseDown = useCallback(

+    (e: React.MouseEvent) => {

+      if (!isEnabled) return;

+

+      // Only start selection on empty space clicks

+      if ((e.target as HTMLElement).closest(".timeline-element")) {

+        return;

+      }

+      if (playheadRef?.current?.contains(e.target as Node)) {

+        return;

+      }

+      if ((e.target as HTMLElement).closest("[data-track-labels]")) {

+        return;

+      }

+      // Don't start selection when clicking in the ruler area - this interferes with playhead dragging

+      if ((e.target as HTMLElement).closest("[data-ruler-area]")) {

+        return;

+      }

+

+      setSelectionBox({

+        startPos: { x: e.clientX, y: e.clientY },

+        currentPos: { x: e.clientX, y: e.clientY },

+        isActive: false, // Will become active when mouse moves

+      });

+    },

+    [isEnabled, playheadRef]

+  );

+

+  // Function to select elements within the selection box

+  const selectElementsInBox = useCallback(

+    (startPos: { x: number; y: number }, endPos: { x: number; y: number }) => {

+      if (!containerRef.current) return;

+

+      const container = containerRef.current;

+      const containerRect = container.getBoundingClientRect();

+

+      // Calculate selection rectangle in container coordinates

+      const startX = startPos.x - containerRect.left;

+      const startY = startPos.y - containerRect.top;

+      const endX = endPos.x - containerRect.left;

+      const endY = endPos.y - containerRect.top;

+

+      const selectionRect = {

+        left: Math.min(startX, endX),

+        top: Math.min(startY, endY),

+        right: Math.max(startX, endX),

+        bottom: Math.max(startY, endY),

+      };

+

+      // Find all timeline elements within the selection rectangle

+      const timelineElements = container.querySelectorAll(".timeline-element");

+

+      const selectedElements: { trackId: string; elementId: string }[] = [];

+

+      timelineElements.forEach((element) => {

+        const elementRect = element.getBoundingClientRect();

+        // Use absolute coordinates for more accurate intersection detection

+        const elementAbsolute = {

+          left: elementRect.left,

+          top: elementRect.top,

+          right: elementRect.right,

+          bottom: elementRect.bottom,

+        };

+

+        const selectionAbsolute = {

+          left: startPos.x,

+          top: startPos.y,

+          right: endPos.x,

+          bottom: endPos.y,

+        };

+

+        // Normalize selection rectangle (handle dragging in any direction)

+        const normalizedSelection = {

+          left: Math.min(selectionAbsolute.left, selectionAbsolute.right),

+          top: Math.min(selectionAbsolute.top, selectionAbsolute.bottom),

+          right: Math.max(selectionAbsolute.left, selectionAbsolute.right),

+          bottom: Math.max(selectionAbsolute.top, selectionAbsolute.bottom),

+        };

+

+        const elementId = element.getAttribute("data-element-id");

+        const trackId = element.getAttribute("data-track-id");

+

+        // Check if element intersects with selection rectangle (any overlap)

+        // Using absolute coordinates for more precise detection

+        const intersects = !(

+          elementAbsolute.right < normalizedSelection.left ||

+          elementAbsolute.left > normalizedSelection.right ||

+          elementAbsolute.bottom < normalizedSelection.top ||

+          elementAbsolute.top > normalizedSelection.bottom

+        );

+

+        if (intersects && elementId && trackId) {

+          selectedElements.push({ trackId, elementId });

+        }

+      });

+

+      // Always call the callback - with elements or empty array to clear selection

+      console.log(

+        JSON.stringify({ selectElementsInBox: selectedElements.length })

+      );

+      onSelectionComplete(selectedElements);

+    },

+    [containerRef, onSelectionComplete]

+  );

+

+  // Effect to track selection box movement

+  useEffect(() => {

+    if (!selectionBox) return;

+

+    const handleMouseMove = (e: MouseEvent) => {

+      const deltaX = Math.abs(e.clientX - selectionBox.startPos.x);

+      const deltaY = Math.abs(e.clientY - selectionBox.startPos.y);

+

+      // Start selection if mouse moved more than 5px

+      const shouldActivate = deltaX > 5 || deltaY > 5;

+

+      const newSelectionBox = {

+        ...selectionBox,

+        currentPos: { x: e.clientX, y: e.clientY },

+        isActive: shouldActivate || selectionBox.isActive,

+      };

+

+      setSelectionBox(newSelectionBox);

+

+      // Real-time visual feedback: update selection as we drag

+      if (newSelectionBox.isActive) {

+        selectElementsInBox(

+          newSelectionBox.startPos,

+          newSelectionBox.currentPos

+        );

+      }

+    };

+

+    const handleMouseUp = () => {

+      console.log(

+        JSON.stringify({ mouseUp: { wasActive: selectionBox?.isActive } })

+      );

+

+      // If we had an active selection, mark that we just finished selecting

+      if (selectionBox?.isActive) {

+        console.log(JSON.stringify({ settingJustFinishedSelecting: true }));

+        setJustFinishedSelecting(true);

+        // Clear the flag after a short delay to allow click events to check it

+        setTimeout(() => {

+          console.log(JSON.stringify({ clearingJustFinishedSelecting: true }));

+          setJustFinishedSelecting(false);

+        }, 50);

+      }

+

+      // Don't call selectElementsInBox again - real-time selection already handled it

+      // Just clean up the selection box visual

+      setSelectionBox(null);

+    };

+

+    window.addEventListener("mousemove", handleMouseMove);

+    window.addEventListener("mouseup", handleMouseUp);

+

+    return () => {

+      window.removeEventListener("mousemove", handleMouseMove);

+      window.removeEventListener("mouseup", handleMouseUp);

+    };

+  }, [selectionBox, selectElementsInBox]);

+

+  return {

+    selectionBox,

+    handleMouseDown,

+    isSelecting: selectionBox?.isActive || false,

+    justFinishedSelecting,

+  };

+}

diff --git a/apps/web/src/hooks/use-timeline-playhead.ts b/apps/web/src/hooks/use-timeline-playhead.ts
index 008f61a4..9a82c23f 100644
--- a/apps/web/src/hooks/use-timeline-playhead.ts
+++ b/apps/web/src/hooks/use-timeline-playhead.ts
@@ -1,157 +1,157 @@
-import { snapTimeToFrame } from "@/constants/timeline-constants";
-import { useProjectStore } from "@/stores/project-store";
-import { useState, useEffect, useCallback } from "react";
-
-interface UseTimelinePlayheadProps {
-  currentTime: number;
-  duration: number;
-  zoomLevel: number;
-  seek: (time: number) => void;
-  rulerRef: React.RefObject<HTMLDivElement>;
-  rulerScrollRef: React.RefObject<HTMLDivElement>;
-  tracksScrollRef: React.RefObject<HTMLDivElement>;
-  playheadRef?: React.RefObject<HTMLDivElement>;
-}
-
-export function useTimelinePlayhead({
-  currentTime,
-  duration,
-  zoomLevel,
-  seek,
-  rulerRef,
-  rulerScrollRef,
-  tracksScrollRef,
-  playheadRef,
-}: UseTimelinePlayheadProps) {
-  // 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 playheadPosition =
-    isScrubbing && scrubTime !== null ? scrubTime : currentTime;
-
-  // --- Playhead Scrubbing Handlers ---
-  const handlePlayheadMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      e.preventDefault();
-      e.stopPropagation(); // Prevent ruler drag from triggering
-      setIsScrubbing(true);
-      handleScrub(e);
-    },
-    [duration, zoomLevel]
-  );
-
-  // Ruler mouse down handler
-  const handleRulerMouseDown = useCallback(
-    (e: React.MouseEvent) => {
-      // Only handle left mouse button
-      if (e.button !== 0) return;
-
-      // Don't interfere if clicking on the playhead itself
-      if (playheadRef?.current?.contains(e.target as Node)) return;
-
-      e.preventDefault();
-      setIsDraggingRuler(true);
-      setHasDraggedRuler(false);
-
-      // Start scrubbing immediately
-      setIsScrubbing(true);
-      handleScrub(e);
-    },
-    [duration, zoomLevel]
-  );
-
-  const handleScrub = useCallback(
-    (e: MouseEvent | React.MouseEvent) => {
-      const ruler = rulerRef.current;
-      if (!ruler) return;
-      const rect = ruler.getBoundingClientRect();
-      const x = e.clientX - rect.left;
-      const rawTime = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));
-      // Use frame snapping for playhead scrubbing
-      const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
-      const time = snapTimeToFrame(rawTime, projectFps);
-      setScrubTime(time);
-      seek(time); // update video preview in real time
-    },
-    [duration, zoomLevel, seek, rulerRef]
-  );
-
-  // Mouse move/up event handlers
-  useEffect(() => {
-    if (!isScrubbing) return;
-    const onMouseMove = (e: MouseEvent) => {
-      handleScrub(e);
-      // Mark that we've dragged if ruler drag is active
-      if (isDraggingRuler) {
-        setHasDraggedRuler(true);
-      }
-    };
-    const onMouseUp = (e: 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(e);
-        }
-        setHasDraggedRuler(false);
-      }
-    };
-    window.addEventListener("mousemove", onMouseMove);
-    window.addEventListener("mouseup", onMouseUp);
-    return () => {
-      window.removeEventListener("mousemove", onMouseMove);
-      window.removeEventListener("mouseup", onMouseUp);
-    };
-  }, [
-    isScrubbing,
-    scrubTime,
-    seek,
-    handleScrub,
-    isDraggingRuler,
-    hasDraggedRuler,
-  ]);
-
-  // --- Playhead auto-scroll effect ---
-  useEffect(() => {
-    const rulerViewport = rulerScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    const tracksViewport = tracksScrollRef.current?.querySelector(
-      "[data-radix-scroll-area-viewport]"
-    ) as HTMLElement;
-    if (!rulerViewport || !tracksViewport) return;
-    const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50
-    const viewportWidth = rulerViewport.clientWidth;
-    const scrollMin = 0;
-    const scrollMax = rulerViewport.scrollWidth - viewportWidth;
-    // Center the playhead if it's not visible (100px buffer)
-    const desiredScroll = Math.max(
-      scrollMin,
-      Math.min(scrollMax, playheadPx - viewportWidth / 2)
-    );
-    if (
-      playheadPx < rulerViewport.scrollLeft + 100 ||
-      playheadPx > rulerViewport.scrollLeft + viewportWidth - 100
-    ) {
-      rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll;
-    }
-  }, [playheadPosition, duration, zoomLevel, rulerScrollRef, tracksScrollRef]);
-
-  return {
-    playheadPosition,
-    handlePlayheadMouseDown,
-    handleRulerMouseDown,
-    isDraggingRuler,
-  };
-}
+import { snapTimeToFrame } from "@/constants/timeline-constants";

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

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

+

+interface UseTimelinePlayheadProps {

+  currentTime: number;

+  duration: number;

+  zoomLevel: number;

+  seek: (time: number) => void;

+  rulerRef: React.RefObject<HTMLDivElement>;

+  rulerScrollRef: React.RefObject<HTMLDivElement>;

+  tracksScrollRef: React.RefObject<HTMLDivElement>;

+  playheadRef?: React.RefObject<HTMLDivElement>;

+}

+

+export function useTimelinePlayhead({

+  currentTime,

+  duration,

+  zoomLevel,

+  seek,

+  rulerRef,

+  rulerScrollRef,

+  tracksScrollRef,

+  playheadRef,

+}: UseTimelinePlayheadProps) {

+  // 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 playheadPosition =

+    isScrubbing && scrubTime !== null ? scrubTime : currentTime;

+

+  // --- Playhead Scrubbing Handlers ---

+  const handlePlayheadMouseDown = useCallback(

+    (e: React.MouseEvent) => {

+      e.preventDefault();

+      e.stopPropagation(); // Prevent ruler drag from triggering

+      setIsScrubbing(true);

+      handleScrub(e);

+    },

+    [duration, zoomLevel]

+  );

+

+  // Ruler mouse down handler

+  const handleRulerMouseDown = useCallback(

+    (e: React.MouseEvent) => {

+      // Only handle left mouse button

+      if (e.button !== 0) return;

+

+      // Don't interfere if clicking on the playhead itself

+      if (playheadRef?.current?.contains(e.target as Node)) return;

+

+      e.preventDefault();

+      setIsDraggingRuler(true);

+      setHasDraggedRuler(false);

+

+      // Start scrubbing immediately

+      setIsScrubbing(true);

+      handleScrub(e);

+    },

+    [duration, zoomLevel]

+  );

+

+  const handleScrub = useCallback(

+    (e: MouseEvent | React.MouseEvent) => {

+      const ruler = rulerRef.current;

+      if (!ruler) return;

+      const rect = ruler.getBoundingClientRect();

+      const x = e.clientX - rect.left;

+      const rawTime = Math.max(0, Math.min(duration, x / (50 * zoomLevel)));

+      // Use frame snapping for playhead scrubbing

+      const projectStore = useProjectStore.getState();

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

+      const time = snapTimeToFrame(rawTime, projectFps);

+      setScrubTime(time);

+      seek(time); // update video preview in real time

+    },

+    [duration, zoomLevel, seek, rulerRef]

+  );

+

+  // Mouse move/up event handlers

+  useEffect(() => {

+    if (!isScrubbing) return;

+    const onMouseMove = (e: MouseEvent) => {

+      handleScrub(e);

+      // Mark that we've dragged if ruler drag is active

+      if (isDraggingRuler) {

+        setHasDraggedRuler(true);

+      }

+    };

+    const onMouseUp = (e: 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(e);

+        }

+        setHasDraggedRuler(false);

+      }

+    };

+    window.addEventListener("mousemove", onMouseMove);

+    window.addEventListener("mouseup", onMouseUp);

+    return () => {

+      window.removeEventListener("mousemove", onMouseMove);

+      window.removeEventListener("mouseup", onMouseUp);

+    };

+  }, [

+    isScrubbing,

+    scrubTime,

+    seek,

+    handleScrub,

+    isDraggingRuler,

+    hasDraggedRuler,

+  ]);

+

+  // --- Playhead auto-scroll effect ---

+  useEffect(() => {

+    const rulerViewport = rulerScrollRef.current?.querySelector(

+      "[data-radix-scroll-area-viewport]"

+    ) as HTMLElement;

+    const tracksViewport = tracksScrollRef.current?.querySelector(

+      "[data-radix-scroll-area-viewport]"

+    ) as HTMLElement;

+    if (!rulerViewport || !tracksViewport) return;

+    const playheadPx = playheadPosition * 50 * zoomLevel; // TIMELINE_CONSTANTS.PIXELS_PER_SECOND = 50

+    const viewportWidth = rulerViewport.clientWidth;

+    const scrollMin = 0;

+    const scrollMax = rulerViewport.scrollWidth - viewportWidth;

+    // Center the playhead if it's not visible (100px buffer)

+    const desiredScroll = Math.max(

+      scrollMin,

+      Math.min(scrollMax, playheadPx - viewportWidth / 2)

+    );

+    if (

+      playheadPx < rulerViewport.scrollLeft + 100 ||

+      playheadPx > rulerViewport.scrollLeft + viewportWidth - 100

+    ) {

+      rulerViewport.scrollLeft = tracksViewport.scrollLeft = desiredScroll;

+    }

+  }, [playheadPosition, duration, zoomLevel, rulerScrollRef, tracksScrollRef]);

+

+  return {

+    playheadPosition,

+    handlePlayheadMouseDown,

+    handleRulerMouseDown,

+    isDraggingRuler,

+  };

+}

diff --git a/apps/web/src/hooks/use-timeline-zoom.ts b/apps/web/src/hooks/use-timeline-zoom.ts
index e764c550..4f5e0af0 100644
--- a/apps/web/src/hooks/use-timeline-zoom.ts
+++ b/apps/web/src/hooks/use-timeline-zoom.ts
@@ -1,60 +1,60 @@
-import { useState, useCallback, useEffect, RefObject } from "react";
-
-interface UseTimelineZoomProps {
-  containerRef: RefObject<HTMLDivElement>;
-  isInTimeline?: boolean;
-}
-
-interface UseTimelineZoomReturn {
-  zoomLevel: number;
-  setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;
-  handleWheel: (e: React.WheelEvent) => void;
-}
-
-export function useTimelineZoom({
-  containerRef,
-  isInTimeline = false,
-}: UseTimelineZoomProps): UseTimelineZoomReturn {
-  const [zoomLevel, setZoomLevel] = useState(1);
-
-  const handleWheel = useCallback((e: React.WheelEvent) => {
-    // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true)
-    if (e.ctrlKey || e.metaKey) {
-      e.preventDefault();
-      const delta = e.deltaY > 0 ? -0.15 : 0.15;
-      setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));
-    }
-    // For horizontal scrolling (when shift is held or horizontal wheel movement),
-    // let the event bubble up to allow ScrollArea to handle it
-    else if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
-      // Don't prevent default - let ScrollArea handle horizontal scrolling
-      return;
-    }
-    // Otherwise, allow normal scrolling
-  }, []);
-
-  // Prevent browser zooming in/out when in timeline
-  useEffect(() => {
-    const preventZoom = (e: WheelEvent) => {
-      if (
-        isInTimeline &&
-        (e.ctrlKey || e.metaKey) &&
-        containerRef.current?.contains(e.target as Node)
-      ) {
-        e.preventDefault();
-      }
-    };
-
-    document.addEventListener("wheel", preventZoom, { passive: false });
-
-    return () => {
-      document.removeEventListener("wheel", preventZoom);
-    };
-  }, [isInTimeline, containerRef]);
-
-  return {
-    zoomLevel,
-    setZoomLevel,
-    handleWheel,
-  };
-}
+import { useState, useCallback, useEffect, RefObject } from "react";

+

+interface UseTimelineZoomProps {

+  containerRef: RefObject<HTMLDivElement>;

+  isInTimeline?: boolean;

+}

+

+interface UseTimelineZoomReturn {

+  zoomLevel: number;

+  setZoomLevel: (zoomLevel: number | ((prev: number) => number)) => void;

+  handleWheel: (e: React.WheelEvent) => void;

+}

+

+export function useTimelineZoom({

+  containerRef,

+  isInTimeline = false,

+}: UseTimelineZoomProps): UseTimelineZoomReturn {

+  const [zoomLevel, setZoomLevel] = useState(1);

+

+  const handleWheel = useCallback((e: React.WheelEvent) => {

+    // Only zoom if user is using pinch gesture (ctrlKey or metaKey is true)

+    if (e.ctrlKey || e.metaKey) {

+      e.preventDefault();

+      const delta = e.deltaY > 0 ? -0.15 : 0.15;

+      setZoomLevel((prev) => Math.max(0.1, Math.min(10, prev + delta)));

+    }

+    // For horizontal scrolling (when shift is held or horizontal wheel movement),

+    // let the event bubble up to allow ScrollArea to handle it

+    else if (e.shiftKey || Math.abs(e.deltaX) > Math.abs(e.deltaY)) {

+      // Don't prevent default - let ScrollArea handle horizontal scrolling

+      return;

+    }

+    // Otherwise, allow normal scrolling

+  }, []);

+

+  // Prevent browser zooming in/out when in timeline

+  useEffect(() => {

+    const preventZoom = (e: WheelEvent) => {

+      if (

+        isInTimeline &&

+        (e.ctrlKey || e.metaKey) &&

+        containerRef.current?.contains(e.target as Node)

+      ) {

+        e.preventDefault();

+      }

+    };

+

+    document.addEventListener("wheel", preventZoom, { passive: false });

+

+    return () => {

+      document.removeEventListener("wheel", preventZoom);

+    };

+  }, [isInTimeline, containerRef]);

+

+  return {

+    zoomLevel,

+    setZoomLevel,

+    handleWheel,

+  };

+}

diff --git a/apps/web/src/hooks/use-toast.ts b/apps/web/src/hooks/use-toast.ts
index dcc02dcd..c682cd1f 100644
--- a/apps/web/src/hooks/use-toast.ts
+++ b/apps/web/src/hooks/use-toast.ts
@@ -6,7 +6,7 @@ import * as React from "react";
 import type { ToastActionElement, ToastProps } from "../components/ui/toast";
 
 const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1_000_000;
+const TOAST_REMOVE_DELAY = 1000000;
 
 type ToasterToast = ToastProps & {
   id: string;
@@ -64,7 +64,7 @@ const addToRemoveQueue = (toastId: string) => {
     toastTimeouts.delete(toastId);
     dispatch({
       type: "REMOVE_TOAST",
-      toastId,
+      toastId: toastId,
     });
   }, TOAST_REMOVE_DELAY);
 
@@ -162,7 +162,7 @@ function toast({ ...props }: Toast) {
   });
 
   return {
-    id,
+    id: id,
     dismiss,
     update,
   };
diff --git a/apps/web/src/lib/blog-query.ts b/apps/web/src/lib/blog-query.ts
index 5cba0cf3..430f58bf 100644
--- a/apps/web/src/lib/blog-query.ts
+++ b/apps/web/src/lib/blog-query.ts
@@ -1,10 +1,4 @@
-import type {
-  MarbleAuthorList,
-  MarbleCategoryList,
-  MarblePost,
-  MarblePostList,
-  MarbleTagList,
-} from "@/types/post";
+import type { MarbleAuthorList, MarbleCategoryList, MarblePost, MarblePostList, MarbleTagList } from '@/types/post';
 import { unified } from "unified";
 import rehypeParse from "rehype-parse";
 import rehypeStringify from "rehype-stringify";
@@ -12,53 +6,50 @@ import rehypeSlug from "rehype-slug";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypeSanitize from "rehype-sanitize";
 
-const url =
-  process.env.NEXT_PUBLIC_MARBLE_API_URL ?? "https://api.marblecms.com";
+const url = process.env.NEXT_PUBLIC_MARBLE_API_URL ?? "https://api.marblecms.com";
 const key = process.env.MARBLE_WORKSPACE_KEY ?? "cmd4iw9mm0006l804kwqv0k46";
 
 async function fetchFromMarble<T>(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}`
-      );
+    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;
     }
-    return (await response.json()) as T;
-  } catch (error) {
-    console.error(`Error fetching ${endpoint}:`, error);
-    throw error;
   }
-}
-
-export async function getPosts() {
-  return fetchFromMarble<MarblePostList>("posts");
-}
-
-export async function getTags() {
-  return fetchFromMarble<MarbleTagList>("tags");
-}
-
-export async function getSinglePost(slug: string) {
-  return fetchFromMarble<MarblePost>(`posts/${slug}`);
-}
-
-export async function getCategories() {
-  return fetchFromMarble<MarbleCategoryList>("categories");
-}
-
-export async function getAuthors() {
-  return fetchFromMarble<MarbleAuthorList>("authors");
-}
+  
+  export async function getPosts() {
+    return fetchFromMarble<MarblePostList>('posts');
+  }
+  
+  export async function getTags() {
+    return fetchFromMarble<MarbleTagList>('tags');
+  }
+  
+  export async function getSinglePost(slug: string) {
+    return fetchFromMarble<MarblePost>(`posts/${slug}`);
+  }
+  
+  export async function getCategories() {
+    return fetchFromMarble<MarbleCategoryList>('categories');
+  }
+  
+  export async function getAuthors() {
+    return fetchFromMarble<MarbleAuthorList>('authors');
+  }
 
 export async function processHtmlContent(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(html);
-  return String(file);
+	const file = await processor.process(html);
+	return String(file);
 }
diff --git a/apps/web/src/lib/fetch-github-stars.ts b/apps/web/src/lib/fetch-github-stars.ts
index 0372f25b..c4444a62 100644
--- a/apps/web/src/lib/fetch-github-stars.ts
+++ b/apps/web/src/lib/fetch-github-stars.ts
@@ -19,8 +19,8 @@ export async function getStars(): Promise<string> {
 
     if (count >= 1_000_000)
       return (count / 1_000_000).toFixed(1).replace(/\.0$/, "") + "M";
-    if (count >= 1000)
-      return (count / 1000).toFixed(1).replace(/\.0$/, "") + "k";
+    if (count >= 1_000)
+      return (count / 1_000).toFixed(1).replace(/\.0$/, "") + "k";
     return count.toString();
   } catch (error) {
     console.error("Failed to fetch GitHub stars:", error);
diff --git a/apps/web/src/lib/ffmpeg-utils.ts b/apps/web/src/lib/ffmpeg-utils.ts
index c34200f6..ae0c267b 100644
--- a/apps/web/src/lib/ffmpeg-utils.ts
+++ b/apps/web/src/lib/ffmpeg-utils.ts
@@ -1,5 +1,5 @@
-import { FFmpeg } from "@ffmpeg/ffmpeg";
-import { toBlobURL } from "@ffmpeg/util";
+import { FFmpeg } from '@ffmpeg/ffmpeg';
+import { toBlobURL } from '@ffmpeg/util';
 
 let ffmpeg: FFmpeg | null = null;
 
@@ -7,13 +7,13 @@ export const initFFmpeg = async (): Promise<FFmpeg> => {
   if (ffmpeg) return ffmpeg;
 
   ffmpeg = new FFmpeg();
-
+  
   // Use locally hosted files instead of CDN
-  const baseURL = "/ffmpeg";
-
+  const baseURL = '/ffmpeg';
+  
   await ffmpeg.load({
-    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, "text/javascript"),
-    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, "application/wasm"),
+    coreURL: await toBlobURL(`${baseURL}/ffmpeg-core.js`, 'text/javascript'),
+    wasmURL: await toBlobURL(`${baseURL}/ffmpeg-core.wasm`, 'application/wasm'),
   });
 
   return ffmpeg;
@@ -21,42 +21,34 @@ export const initFFmpeg = async (): Promise<FFmpeg> => {
 
 export const generateThumbnail = async (
   videoFile: File,
-  timeInSeconds = 1
+  timeInSeconds: number = 1
 ): Promise<string> => {
   const ffmpeg = await initFFmpeg();
-
-  const inputName = "input.mp4";
-  const outputName = "thumbnail.jpg";
-
+  
+  const inputName = 'input.mp4';
+  const outputName = 'thumbnail.jpg';
+  
   // Write input file
-  await ffmpeg.writeFile(
-    inputName,
-    new Uint8Array(await videoFile.arrayBuffer())
-  );
-
+  await ffmpeg.writeFile(inputName, new Uint8Array(await videoFile.arrayBuffer()));
+  
   // Generate thumbnail at specific time
   await ffmpeg.exec([
-    "-i",
-    inputName,
-    "-ss",
-    timeInSeconds.toString(),
-    "-vframes",
-    "1",
-    "-vf",
-    "scale=320:240",
-    "-q:v",
-    "2",
-    outputName,
+    '-i', inputName,
+    '-ss', timeInSeconds.toString(),
+    '-vframes', '1',
+    '-vf', 'scale=320:240',
+    '-q:v', '2',
+    outputName
   ]);
-
+  
   // Read output file
   const data = await ffmpeg.readFile(outputName);
-  const blob = new Blob([data], { type: "image/jpeg" });
-
+  const blob = new Blob([data], { type: 'image/jpeg' });
+  
   // Cleanup
   await ffmpeg.deleteFile(inputName);
   await ffmpeg.deleteFile(outputName);
-
+  
   return URL.createObjectURL(blob);
 };
 
@@ -67,52 +59,43 @@ export const trimVideo = async (
   onProgress?: (progress: number) => void
 ): Promise<Blob> => {
   const ffmpeg = await initFFmpeg();
-
-  const inputName = "input.mp4";
-  const outputName = "output.mp4";
-
+  
+  const inputName = 'input.mp4';
+  const outputName = 'output.mp4';
+  
   // Set up progress callback
   if (onProgress) {
-    ffmpeg.on("progress", ({ progress }) => {
+    ffmpeg.on('progress', ({ progress }) => {
       onProgress(progress * 100);
     });
   }
-
+  
   // Write input file
-  await ffmpeg.writeFile(
-    inputName,
-    new Uint8Array(await videoFile.arrayBuffer())
-  );
-
+  await ffmpeg.writeFile(inputName, new Uint8Array(await videoFile.arrayBuffer()));
+  
   const duration = endTime - startTime;
-
+  
   // Trim video
   await ffmpeg.exec([
-    "-i",
-    inputName,
-    "-ss",
-    startTime.toString(),
-    "-t",
-    duration.toString(),
-    "-c",
-    "copy", // Use stream copy for faster processing
-    outputName,
+    '-i', inputName,
+    '-ss', startTime.toString(),
+    '-t', duration.toString(),
+    '-c', 'copy', // Use stream copy for faster processing
+    outputName
   ]);
-
+  
   // Read output file
   const data = await ffmpeg.readFile(outputName);
-  const blob = new Blob([data], { type: "video/mp4" });
-
+  const blob = new Blob([data], { type: 'video/mp4' });
+  
   // Cleanup
   await ffmpeg.deleteFile(inputName);
   await ffmpeg.deleteFile(outputName);
-
+  
   return blob;
 };
 
-export const getVideoInfo = async (
-  videoFile: File
-): Promise<{
+export const getVideoInfo = async (videoFile: File): Promise<{
   duration: number;
   width: number;
   height: number;
@@ -120,32 +103,27 @@ export const getVideoInfo = async (
 }> => {
   const ffmpeg = await initFFmpeg();
 
-  const inputName = "input.mp4";
+  const inputName = 'input.mp4';
 
   // Write input file
-  await ffmpeg.writeFile(
-    inputName,
-    new Uint8Array(await videoFile.arrayBuffer())
-  );
+  await ffmpeg.writeFile(inputName, new Uint8Array(await videoFile.arrayBuffer()));
 
   // Capture FFmpeg stderr output with a one-time listener pattern
-  let ffmpegOutput = "";
+  let ffmpegOutput = '';
   let listening = true;
   const listener = (data: string) => {
     if (listening) ffmpegOutput += data;
   };
-  ffmpeg.on("log", ({ message }) => listener(message));
+  ffmpeg.on('log', ({ message }) => listener(message));
 
   // Run ffmpeg to get info (stderr will contain the info)
   try {
-    await ffmpeg.exec(["-i", inputName, "-f", "null", "-"]);
+    await ffmpeg.exec(['-i', inputName, '-f', 'null', '-']);
   } catch (error) {
     listening = false;
     await ffmpeg.deleteFile(inputName);
-    console.error("FFmpeg execution failed:", error);
-    throw new Error(
-      "Failed to extract video info. The file may be corrupted or in an unsupported format."
-    );
+    console.error('FFmpeg execution failed:', error);
+    throw new Error('Failed to extract video info. The file may be corrupted or in an unsupported format.');
   }
 
   // Disable listener after exec completes
@@ -165,12 +143,8 @@ export const getVideoInfo = async (
     duration = parseInt(h) * 3600 + parseInt(m) * 60 + parseFloat(s);
   }
 
-  const videoStreamMatch = ffmpegOutput.match(
-    /Video:.* (\d+)x(\d+)[^,]*, ([\d.]+) fps/
-  );
-  let width = 0,
-    height = 0,
-    fps = 0;
+  const videoStreamMatch = ffmpegOutput.match(/Video:.* (\d+)x(\d+)[^,]*, ([\d.]+) fps/);
+  let width = 0, height = 0, fps = 0;
   if (videoStreamMatch) {
     width = parseInt(videoStreamMatch[1]);
     height = parseInt(videoStreamMatch[2]);
@@ -181,7 +155,7 @@ export const getVideoInfo = async (
     duration,
     width,
     height,
-    fps,
+    fps
   };
 };
 
@@ -190,81 +164,68 @@ export const convertToWebM = async (
   onProgress?: (progress: number) => void
 ): Promise<Blob> => {
   const ffmpeg = await initFFmpeg();
-
-  const inputName = "input.mp4";
-  const outputName = "output.webm";
-
+  
+  const inputName = 'input.mp4';
+  const outputName = 'output.webm';
+  
   // Set up progress callback
   if (onProgress) {
-    ffmpeg.on("progress", ({ progress }) => {
+    ffmpeg.on('progress', ({ progress }) => {
       onProgress(progress * 100);
     });
   }
-
+  
   // Write input file
-  await ffmpeg.writeFile(
-    inputName,
-    new Uint8Array(await videoFile.arrayBuffer())
-  );
-
+  await ffmpeg.writeFile(inputName, new Uint8Array(await videoFile.arrayBuffer()));
+  
   // Convert to WebM
   await ffmpeg.exec([
-    "-i",
-    inputName,
-    "-c:v",
-    "libvpx-vp9",
-    "-crf",
-    "30",
-    "-b:v",
-    "0",
-    "-c:a",
-    "libopus",
-    outputName,
+    '-i', inputName,
+    '-c:v', 'libvpx-vp9',
+    '-crf', '30',
+    '-b:v', '0',
+    '-c:a', 'libopus',
+    outputName
   ]);
-
+  
   // Read output file
   const data = await ffmpeg.readFile(outputName);
-  const blob = new Blob([data], { type: "video/webm" });
-
+  const blob = new Blob([data], { type: 'video/webm' });
+  
   // Cleanup
   await ffmpeg.deleteFile(inputName);
   await ffmpeg.deleteFile(outputName);
-
+  
   return blob;
 };
 
 export const extractAudio = async (
   videoFile: File,
-  format: "mp3" | "wav" = "mp3"
+  format: 'mp3' | 'wav' = 'mp3'
 ): Promise<Blob> => {
   const ffmpeg = await initFFmpeg();
-
-  const inputName = "input.mp4";
+  
+  const inputName = 'input.mp4';
   const outputName = `output.${format}`;
-
+  
   // Write input file
-  await ffmpeg.writeFile(
-    inputName,
-    new Uint8Array(await videoFile.arrayBuffer())
-  );
-
+  await ffmpeg.writeFile(inputName, new Uint8Array(await videoFile.arrayBuffer()));
+  
   // Extract audio
   await ffmpeg.exec([
-    "-i",
-    inputName,
-    "-vn", // Disable video
-    "-acodec",
-    format === "mp3" ? "libmp3lame" : "pcm_s16le",
-    outputName,
+    '-i', inputName,
+    '-vn', // Disable video
+    '-acodec', format === 'mp3' ? 'libmp3lame' : 'pcm_s16le',
+    outputName
   ]);
-
+  
   // Read output file
   const data = await ffmpeg.readFile(outputName);
   const blob = new Blob([data], { type: `audio/${format}` });
-
+  
   // Cleanup
   await ffmpeg.deleteFile(inputName);
   await ffmpeg.deleteFile(outputName);
-
+  
   return blob;
-};
+};
\ No newline at end of file
diff --git a/apps/web/src/lib/font-config.ts b/apps/web/src/lib/font-config.ts
index b47b3c3e..0389054a 100644
--- a/apps/web/src/lib/font-config.ts
+++ b/apps/web/src/lib/font-config.ts
@@ -1,39 +1,39 @@
-import {
-  Inter,
-  Roboto,
-  Open_Sans,
-  Playfair_Display,
-  Comic_Neue,
-} from "next/font/google";
-
-// Configure all fonts
-const inter = Inter({ subsets: ["latin"] });
-const roboto = Roboto({ subsets: ["latin"], weight: ["400", "700"] });
-const openSans = Open_Sans({ subsets: ["latin"] });
-const playfairDisplay = Playfair_Display({ subsets: ["latin"] });
-const comicNeue = Comic_Neue({ subsets: ["latin"], weight: ["400", "700"] });
-
-// Export font class mapping for use in components
-export const FONT_CLASS_MAP = {
-  Inter: inter.className,
-  Roboto: roboto.className,
-  "Open Sans": openSans.className,
-  "Playfair Display": playfairDisplay.className,
-  "Comic Neue": comicNeue.className,
-  Arial: "",
-  Helvetica: "",
-  "Times New Roman": "",
-  Georgia: "",
-} as const;
-
-// Export individual fonts for use in layout
-export const fonts = {
-  inter,
-  roboto,
-  openSans,
-  playfairDisplay,
-  comicNeue,
-};
-
-// Default font for the body
-export const defaultFont = inter;
+import {

+  Inter,

+  Roboto,

+  Open_Sans,

+  Playfair_Display,

+  Comic_Neue,

+} from "next/font/google";

+

+// Configure all fonts

+const inter = Inter({ subsets: ["latin"] });

+const roboto = Roboto({ subsets: ["latin"], weight: ["400", "700"] });

+const openSans = Open_Sans({ subsets: ["latin"] });

+const playfairDisplay = Playfair_Display({ subsets: ["latin"] });

+const comicNeue = Comic_Neue({ subsets: ["latin"], weight: ["400", "700"] });

+

+// Export font class mapping for use in components

+export const FONT_CLASS_MAP = {

+  Inter: inter.className,

+  Roboto: roboto.className,

+  "Open Sans": openSans.className,

+  "Playfair Display": playfairDisplay.className,

+  "Comic Neue": comicNeue.className,

+  Arial: "",

+  Helvetica: "",

+  "Times New Roman": "",

+  Georgia: "",

+} as const;

+

+// Export individual fonts for use in layout

+export const fonts = {

+  inter,

+  roboto,

+  openSans,

+  playfairDisplay,

+  comicNeue,

+};

+

+// Default font for the body

+export const defaultFont = inter;

diff --git a/apps/web/src/lib/rate-limit.ts b/apps/web/src/lib/rate-limit.ts
index e1996cf5..ac63a64c 100644
--- a/apps/web/src/lib/rate-limit.ts
+++ b/apps/web/src/lib/rate-limit.ts
@@ -1,16 +1,16 @@
-// lib/rate-limit.ts
-import { Ratelimit } from "@upstash/ratelimit";
-import { Redis } from "@upstash/redis";
-import { env } from "@/env";
-
-const redis = new Redis({
-  url: env.UPSTASH_REDIS_REST_URL,
-  token: env.UPSTASH_REDIS_REST_TOKEN,
-});
-
-export const waitlistRateLimit = new Ratelimit({
-  redis,
-  limiter: Ratelimit.slidingWindow(5, "1 m"), // 5 requests per minute
-  analytics: true,
-  prefix: "waitlist-rate-limit",
-});
+// lib/rate-limit.ts

+import { Ratelimit } from "@upstash/ratelimit";

+import { Redis } from "@upstash/redis";

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

+

+const redis = new Redis({

+  url: env.UPSTASH_REDIS_REST_URL,

+  token: env.UPSTASH_REDIS_REST_TOKEN,

+});

+

+export const waitlistRateLimit = new Ratelimit({

+  redis,

+  limiter: Ratelimit.slidingWindow(5, "1 m"), // 5 requests per minute

+  analytics: true,

+  prefix: "waitlist-rate-limit",

+});

diff --git a/apps/web/src/lib/storage/indexeddb-adapter.ts b/apps/web/src/lib/storage/indexeddb-adapter.ts
index 597305c7..f43a8798 100644
--- a/apps/web/src/lib/storage/indexeddb-adapter.ts
+++ b/apps/web/src/lib/storage/indexeddb-adapter.ts
@@ -1,89 +1,89 @@
-import { StorageAdapter } from "./types";
-
-export class IndexedDBAdapter<T> implements StorageAdapter<T> {
-  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;
-  }
-
-  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.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);
-
-    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);
-
-    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);
-
-    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);
-
-    return new Promise((resolve, reject) => {
-      const request = store.getAllKeys();
-      request.onerror = () => reject(request.error);
-      request.onsuccess = () => resolve(request.result as string[]);
-    });
-  }
-
-  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();
-    });
-  }
-}
+import { StorageAdapter } from "./types";

+

+export class IndexedDBAdapter<T> implements StorageAdapter<T> {

+  private dbName: string;

+  private storeName: string;

+  private version: number;

+

+  constructor(dbName: string, storeName: string, version: number = 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);

+

+      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" });

+        }

+      };

+    });

+  }

+

+  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);

+    });

+  }

+

+  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();

+    });

+  }

+

+  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();

+    });

+  }

+

+  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[]);

+    });

+  }

+

+  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();

+    });

+  }

+}

diff --git a/apps/web/src/lib/storage/opfs-adapter.ts b/apps/web/src/lib/storage/opfs-adapter.ts
index 87b5c886..c01954e5 100644
--- a/apps/web/src/lib/storage/opfs-adapter.ts
+++ b/apps/web/src/lib/storage/opfs-adapter.ts
@@ -3,7 +3,7 @@ import { StorageAdapter } from "./types";
 export class OPFSAdapter implements StorageAdapter<File> {
   private directoryName: string;
 
-  constructor(directoryName = "media") {
+  constructor(directoryName: string = "media") {
     this.directoryName = directoryName;
   }
 
diff --git a/apps/web/src/lib/time.ts b/apps/web/src/lib/time.ts
index df02d837..b3147946 100644
--- a/apps/web/src/lib/time.ts
+++ b/apps/web/src/lib/time.ts
@@ -1,25 +1,25 @@
-// Time-related utility functions
-
-// Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS, HH:MM:SS:FF)
-export const formatTimeCode = (
-  timeInSeconds: number,
-  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",
-  fps = 30
-): 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 = Math.floor((timeInSeconds % 1) * fps);
-
-  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":
-      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${frames.toString().padStart(2, "0")}`;
-  }
-};
+// Time-related utility functions

+

+// Helper function to format time in various formats (MM:SS, HH:MM:SS, HH:MM:SS:CS, HH:MM:SS:FF)

+export const formatTimeCode = (

+  timeInSeconds: number,

+  format: "MM:SS" | "HH:MM:SS" | "HH:MM:SS:CS" | "HH:MM:SS:FF" = "HH:MM:SS:CS",

+  fps: number = 30

+): 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 = Math.floor((timeInSeconds % 1) * fps);

+

+  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":

+      return `${hours.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}:${frames.toString().padStart(2, "0")}`;

+  }

+};

diff --git a/apps/web/src/lib/timeline.ts b/apps/web/src/lib/timeline.ts
index 85fcabe6..531defac 100644
--- a/apps/web/src/lib/timeline.ts
+++ b/apps/web/src/lib/timeline.ts
@@ -1,54 +1,54 @@
-import { TimelineElement } from "@/types/timeline";
-
-// Helper function to check for element overlaps and prevent invalid timeline states
-export const checkElementOverlaps = (elements: TimelineElement[]): boolean => {
-  // Sort elements by start time
-  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];
-
-    const currentEnd =
-      current.startTime +
-      (current.duration - current.trimStart - current.trimEnd);
-
-    // Check if current element overlaps with next element
-    if (currentEnd > next.startTime) return true; // Overlap detected
-  }
-
-  return false; // No overlaps
-};
-
-// Helper function to resolve overlaps by adjusting element positions
-export const resolveElementOverlaps = (
-  elements: TimelineElement[]
-): TimelineElement[] => {
-  // Sort elements by start time
-  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] };
-
-    if (resolvedElements.length > 0) {
-      const previous = resolvedElements[resolvedElements.length - 1];
-      const previousEnd =
-        previous.startTime +
-        (previous.duration - previous.trimStart - previous.trimEnd);
-
-      // If current element would overlap with previous, push it after previous ends
-      if (current.startTime < previousEnd) {
-        current.startTime = previousEnd;
-      }
-    }
-
-    resolvedElements.push(current);
-  }
-
-  return resolvedElements;
-};
+import { TimelineElement } from "@/types/timeline";

+

+// Helper function to check for element overlaps and prevent invalid timeline states

+export const checkElementOverlaps = (elements: TimelineElement[]): boolean => {

+  // Sort elements by start time

+  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];

+

+    const currentEnd =

+      current.startTime +

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

+

+    // Check if current element overlaps with next element

+    if (currentEnd > next.startTime) return true; // Overlap detected

+  }

+

+  return false; // No overlaps

+};

+

+// Helper function to resolve overlaps by adjusting element positions

+export const resolveElementOverlaps = (

+  elements: TimelineElement[]

+): TimelineElement[] => {

+  // Sort elements by start time

+  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] };

+

+    if (resolvedElements.length > 0) {

+      const previous = resolvedElements[resolvedElements.length - 1];

+      const previousEnd =

+        previous.startTime +

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

+

+      // If current element would overlap with previous, push it after previous ends

+      if (current.startTime < previousEnd) {

+        current.startTime = previousEnd;

+      }

+    }

+

+    resolvedElements.push(current);

+  }

+

+  return resolvedElements;

+};

diff --git a/apps/web/src/lib/waitlist.ts b/apps/web/src/lib/waitlist.ts
index 43a620b0..22b15b78 100644
--- a/apps/web/src/lib/waitlist.ts
+++ b/apps/web/src/lib/waitlist.ts
@@ -1,13 +1,13 @@
-import { db, sql, waitlist } from "@opencut/db";
-
-export async function getWaitlistCount() {
-  try {
-    const result = await db
-      .select({ count: sql<number>`count(*)` })
-      .from(waitlist);
-    return result[0]?.count || 0;
-  } catch (error) {
-    console.error("Failed to fetch waitlist count:", error);
-    return 0;
-  }
-}
+import { db, sql, waitlist } from "@opencut/db";

+

+export async function getWaitlistCount() {

+  try {

+    const result = await db

+      .select({ count: sql<number>`count(*)` })

+      .from(waitlist);

+    return result[0]?.count || 0;

+  } catch (error) {

+    console.error("Failed to fetch waitlist count:", error);

+    return 0;

+  }

+}

diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index b5fc2b4b..e2562ef1 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -1,24 +1,24 @@
-import { NextResponse } from "next/server";
-import type { NextRequest } from "next/server";
-
-export async function middleware(request: NextRequest) {
-  // Handle fuckcapcut.com domain redirect
-  if (request.headers.get("host") === "fuckcapcut.com") {
-    return NextResponse.redirect("https://opencut.app/why-not-capcut", 301);
-  }
-
-  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).*)",
-  ],
-};
+import { NextResponse } from "next/server";

+import type { NextRequest } from "next/server";

+

+export async function middleware(request: NextRequest) {

+  // Handle fuckcapcut.com domain redirect

+  if (request.headers.get("host") === "fuckcapcut.com") {

+    return NextResponse.redirect("https://opencut.app/why-not-capcut", 301);

+  }

+

+  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).*)",

+  ],

+};

diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts
index aac7077e..c24929a2 100644
--- a/apps/web/src/stores/editor-store.ts
+++ b/apps/web/src/stores/editor-store.ts
@@ -1,104 +1,105 @@
-import { create } from "zustand";
-import { CanvasSize, CanvasPreset } from "@/types/editor";
-
-type CanvasMode = "preset" | "original" | "custom";
-
-interface EditorState {
-  // Loading states
-  isInitializing: boolean;
-  isPanelsReady: boolean;
-
-  // Canvas/Project settings
-  canvasSize: CanvasSize;
-  canvasMode: CanvasMode;
-  canvasPresets: CanvasPreset[];
-
-  // Actions
-  setInitializing: (loading: boolean) => void;
-  setPanelsReady: (ready: boolean) => void;
-  initializeApp: () => Promise<void>;
-  setCanvasSize: (size: CanvasSize) => void;
-  setCanvasSizeToOriginal: (aspectRatio: number) => void;
-  setCanvasSizeFromAspectRatio: (aspectRatio: number) => void;
-}
-
-const DEFAULT_CANVAS_PRESETS: CanvasPreset[] = [
-  { name: "16:9", width: 1920, height: 1080 },
-  { name: "9:16", width: 1080, height: 1920 },
-  { name: "1:1", width: 1080, height: 1080 },
-  { name: "4:3", width: 1440, height: 1080 },
-];
-
-// Helper function to find the best matching canvas preset for an aspect ratio
-const findBestCanvasPreset = (aspectRatio: number): CanvasSize => {
-  // Calculate aspect ratio for each preset and find the closest match
-  let bestMatch = DEFAULT_CANVAS_PRESETS[0]; // Default to 16:9 HD
-  let smallestDifference = Math.abs(
-    aspectRatio - bestMatch.width / bestMatch.height
-  );
-
-  for (const preset of DEFAULT_CANVAS_PRESETS) {
-    const presetAspectRatio = preset.width / preset.height;
-    const difference = Math.abs(aspectRatio - presetAspectRatio);
-
-    if (difference < smallestDifference) {
-      smallestDifference = difference;
-      bestMatch = preset;
-    }
-  }
-
-  // If the difference is still significant (> 0.1), create a custom size
-  // based on the media aspect ratio with a reasonable resolution
-  const bestAspectRatio = bestMatch.width / bestMatch.height;
-  if (Math.abs(aspectRatio - bestAspectRatio) > 0.1) {
-    // Create custom dimensions based on the aspect ratio
-    if (aspectRatio > 1) {
-      // Landscape - use 1920 width
-      return { width: 1920, height: Math.round(1920 / aspectRatio) };
-    }
-    // Portrait or square - use 1080 height
-    return { width: Math.round(1080 * aspectRatio), height: 1080 };
-  }
-
-  return { width: bestMatch.width, height: bestMatch.height };
-};
-
-export const useEditorStore = create<EditorState>((set, get) => ({
-  // Initial states
-  isInitializing: true,
-  isPanelsReady: false,
-  canvasSize: { width: 1920, height: 1080 }, // Default 16:9 HD
-  canvasMode: "preset" as CanvasMode,
-  canvasPresets: DEFAULT_CANVAS_PRESETS,
-
-  // Actions
-  setInitializing: (loading) => {
-    set({ isInitializing: loading });
-  },
-
-  setPanelsReady: (ready) => {
-    set({ isPanelsReady: ready });
-  },
-
-  initializeApp: async () => {
-    console.log("Initializing video editor...");
-    set({ isInitializing: true, isPanelsReady: false });
-
-    set({ isPanelsReady: true, isInitializing: false });
-    console.log("Video editor ready");
-  },
-
-  setCanvasSize: (size) => {
-    set({ canvasSize: size, canvasMode: "preset" });
-  },
-
-  setCanvasSizeToOriginal: (aspectRatio) => {
-    const newCanvasSize = findBestCanvasPreset(aspectRatio);
-    set({ canvasSize: newCanvasSize, canvasMode: "original" });
-  },
-
-  setCanvasSizeFromAspectRatio: (aspectRatio) => {
-    const newCanvasSize = findBestCanvasPreset(aspectRatio);
-    set({ canvasSize: newCanvasSize, canvasMode: "custom" });
-  },
-}));
+import { create } from "zustand";

+import { CanvasSize, CanvasPreset } from "@/types/editor";

+

+type CanvasMode = "preset" | "original" | "custom";

+

+interface EditorState {

+  // Loading states

+  isInitializing: boolean;

+  isPanelsReady: boolean;

+

+  // Canvas/Project settings

+  canvasSize: CanvasSize;

+  canvasMode: CanvasMode;

+  canvasPresets: CanvasPreset[];

+

+  // Actions

+  setInitializing: (loading: boolean) => void;

+  setPanelsReady: (ready: boolean) => void;

+  initializeApp: () => Promise<void>;

+  setCanvasSize: (size: CanvasSize) => void;

+  setCanvasSizeToOriginal: (aspectRatio: number) => void;

+  setCanvasSizeFromAspectRatio: (aspectRatio: number) => void;

+}

+

+const DEFAULT_CANVAS_PRESETS: CanvasPreset[] = [

+  { name: "16:9", width: 1920, height: 1080 },

+  { name: "9:16", width: 1080, height: 1920 },

+  { name: "1:1", width: 1080, height: 1080 },

+  { name: "4:3", width: 1440, height: 1080 },

+];

+

+// Helper function to find the best matching canvas preset for an aspect ratio

+const findBestCanvasPreset = (aspectRatio: number): CanvasSize => {

+  // Calculate aspect ratio for each preset and find the closest match

+  let bestMatch = DEFAULT_CANVAS_PRESETS[0]; // Default to 16:9 HD

+  let smallestDifference = Math.abs(

+    aspectRatio - bestMatch.width / bestMatch.height

+  );

+

+  for (const preset of DEFAULT_CANVAS_PRESETS) {

+    const presetAspectRatio = preset.width / preset.height;

+    const difference = Math.abs(aspectRatio - presetAspectRatio);

+

+    if (difference < smallestDifference) {

+      smallestDifference = difference;

+      bestMatch = preset;

+    }

+  }

+

+  // If the difference is still significant (> 0.1), create a custom size

+  // based on the media aspect ratio with a reasonable resolution

+  const bestAspectRatio = bestMatch.width / bestMatch.height;

+  if (Math.abs(aspectRatio - bestAspectRatio) > 0.1) {

+    // Create custom dimensions based on the aspect ratio

+    if (aspectRatio > 1) {

+      // Landscape - use 1920 width

+      return { width: 1920, height: Math.round(1920 / aspectRatio) };

+    } else {

+      // Portrait or square - use 1080 height

+      return { width: Math.round(1080 * aspectRatio), height: 1080 };

+    }

+  }

+

+  return { width: bestMatch.width, height: bestMatch.height };

+};

+

+export const useEditorStore = create<EditorState>((set, get) => ({

+  // Initial states

+  isInitializing: true,

+  isPanelsReady: false,

+  canvasSize: { width: 1920, height: 1080 }, // Default 16:9 HD

+  canvasMode: "preset" as CanvasMode,

+  canvasPresets: DEFAULT_CANVAS_PRESETS,

+

+  // Actions

+  setInitializing: (loading) => {

+    set({ isInitializing: loading });

+  },

+

+  setPanelsReady: (ready) => {

+    set({ isPanelsReady: ready });

+  },

+

+  initializeApp: async () => {

+    console.log("Initializing video editor...");

+    set({ isInitializing: true, isPanelsReady: false });

+

+    set({ isPanelsReady: true, isInitializing: false });

+    console.log("Video editor ready");

+  },

+

+  setCanvasSize: (size) => {

+    set({ canvasSize: size, canvasMode: "preset" });

+  },

+

+  setCanvasSizeToOriginal: (aspectRatio) => {

+    const newCanvasSize = findBestCanvasPreset(aspectRatio);

+    set({ canvasSize: newCanvasSize, canvasMode: "original" });

+  },

+

+  setCanvasSizeFromAspectRatio: (aspectRatio) => {

+    const newCanvasSize = findBestCanvasPreset(aspectRatio);

+    set({ canvasSize: newCanvasSize, canvasMode: "custom" });

+  },

+}));

diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
index 029307d9..c4ee5f3e 100644
--- a/apps/web/src/stores/media-store.ts
+++ b/apps/web/src/stores/media-store.ts
@@ -219,19 +219,15 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
         mediaItems.map(async (item) => {
           if (item.type === "video" && item.file) {
             try {
-              const { thumbnailUrl, width, height } =
-                await generateVideoThumbnail(item.file);
+              const { thumbnailUrl, width, height } = await generateVideoThumbnail(item.file);
               return {
                 ...item,
                 thumbnailUrl,
                 width: width || item.width,
-                height: height || item.height,
+                height: height || item.height
               };
             } catch (error) {
-              console.error(
-                `Failed to regenerate thumbnail for video ${item.id}:`,
-                error
-              );
+              console.error(`Failed to regenerate thumbnail for video ${item.id}:`, error);
               return item;
             }
           }
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index b97235fa..450b6a6e 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -1,45 +1,45 @@
-import { create } from "zustand";
-import { persist } from "zustand/middleware";
-
-const DEFAULT_PANEL_SIZES = {
-  toolsPanel: 45,
-  previewPanel: 75,
-  propertiesPanel: 20,
-  mainContent: 70,
-  timeline: 30,
-} as const;
-
-interface PanelState {
-  // Panel sizes as percentages
-  toolsPanel: number;
-  previewPanel: number;
-  propertiesPanel: number;
-  mainContent: number;
-  timeline: number;
-
-  // Actions
-  setToolsPanel: (size: number) => void;
-  setPreviewPanel: (size: number) => void;
-  setPropertiesPanel: (size: number) => void;
-  setMainContent: (size: number) => void;
-  setTimeline: (size: number) => void;
-}
-
-export const usePanelStore = create<PanelState>()(
-  persist(
-    (set) => ({
-      // Default sizes - optimized for responsiveness
-      ...DEFAULT_PANEL_SIZES,
-
-      // Actions
-      setToolsPanel: (size) => set({ toolsPanel: size }),
-      setPreviewPanel: (size) => set({ previewPanel: size }),
-      setPropertiesPanel: (size) => set({ propertiesPanel: size }),
-      setMainContent: (size) => set({ mainContent: size }),
-      setTimeline: (size) => set({ timeline: size }),
-    }),
-    {
-      name: "panel-sizes",
-    }
-  )
-);
+import { create } from "zustand";

+import { persist } from "zustand/middleware";

+

+const DEFAULT_PANEL_SIZES = {

+  toolsPanel: 45,

+  previewPanel: 75,

+  propertiesPanel: 20,

+  mainContent: 70,

+  timeline: 30,

+} as const;

+

+interface PanelState {

+  // Panel sizes as percentages

+  toolsPanel: number;

+  previewPanel: number;

+  propertiesPanel: number;

+  mainContent: number;

+  timeline: number;

+

+  // Actions

+  setToolsPanel: (size: number) => void;

+  setPreviewPanel: (size: number) => void;

+  setPropertiesPanel: (size: number) => void;

+  setMainContent: (size: number) => void;

+  setTimeline: (size: number) => void;

+}

+

+export const usePanelStore = create<PanelState>()(

+  persist(

+    (set) => ({

+      // Default sizes - optimized for responsiveness

+      ...DEFAULT_PANEL_SIZES,

+

+      // Actions

+      setToolsPanel: (size) => set({ toolsPanel: size }),

+      setPreviewPanel: (size) => set({ previewPanel: size }),

+      setPropertiesPanel: (size) => set({ propertiesPanel: size }),

+      setMainContent: (size) => set({ mainContent: size }),

+      setTimeline: (size) => set({ timeline: size }),

+    }),

+    {

+      name: "panel-sizes",

+    }

+  )

+);

diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 7bb38039..a8833982 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -1,360 +1,361 @@
-import { TProject } from "@/types/project";
-import { create } from "zustand";
-import { storageService } from "@/lib/storage/storage-service";
-import { toast } from "sonner";
-import { useMediaStore } from "./media-store";
-import { useTimelineStore } from "./timeline-store";
-import { generateUUID } from "@/lib/utils";
-
-interface ProjectStore {
-  activeProject: TProject | null;
-  savedProjects: TProject[];
-  isLoading: boolean;
-  isInitialized: boolean;
-
-  // Actions
-  createNewProject: (name: string) => Promise<string>;
-  loadProject: (id: string) => Promise<void>;
-  saveCurrentProject: () => Promise<void>;
-  loadAllProjects: () => Promise<void>;
-  deleteProject: (id: string) => Promise<void>;
-  closeProject: () => void;
-  renameProject: (projectId: string, name: string) => Promise<void>;
-  duplicateProject: (projectId: string) => Promise<string>;
-  updateProjectBackground: (backgroundColor: string) => Promise<void>;
-  updateBackgroundType: (
-    type: "color" | "blur",
-    options?: { backgroundColor?: string; blurIntensity?: number }
-  ) => Promise<void>;
-  updateProjectFps: (fps: number) => Promise<void>;
-
-  getFilteredAndSortedProjects: (
-    searchQuery: string,
-    sortOption: string
-  ) => TProject[];
-}
-
-export const useProjectStore = create<ProjectStore>((set, get) => ({
-  activeProject: null,
-  savedProjects: [],
-  isLoading: true,
-  isInitialized: false,
-
-  createNewProject: async (name: string) => {
-    const newProject: TProject = {
-      id: generateUUID(),
-      name,
-      thumbnail: "",
-      createdAt: new Date(),
-      updatedAt: new Date(),
-      backgroundColor: "#000000",
-      backgroundType: "color",
-      blurIntensity: 8,
-    };
-
-    set({ activeProject: newProject });
-
-    try {
-      await storageService.saveProject(newProject);
-      // Reload all projects to update the list
-      await get().loadAllProjects();
-      return newProject.id;
-    } catch (error) {
-      toast.error("Failed to save new project");
-      throw error;
-    }
-  },
-
-  loadProject: async (id: string) => {
-    if (!get().isInitialized) {
-      set({ isLoading: true });
-    }
-
-    // Clear media and timeline immediately to prevent flickering when switching projects
-    const mediaStore = useMediaStore.getState();
-    const timelineStore = useTimelineStore.getState();
-    mediaStore.clearAllMedia();
-    timelineStore.clearTimeline();
-
-    try {
-      const project = await storageService.loadProject(id);
-      if (project) {
-        set({ activeProject: project });
-
-        // Load project-specific data in parallel
-        await Promise.all([
-          mediaStore.loadProjectMedia(id),
-          timelineStore.loadProjectTimeline(id),
-        ]);
-      } else {
-        throw new Error(`Project with id ${id} not found`);
-      }
-    } catch (error) {
-      console.error("Failed to load project:", error);
-      throw error; // Re-throw so the editor page can handle it
-    } finally {
-      set({ isLoading: false });
-    }
-  },
-
-  saveCurrentProject: async () => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    try {
-      // Save project metadata and timeline data in parallel
-      const timelineStore = useTimelineStore.getState();
-      await Promise.all([
-        storageService.saveProject(activeProject),
-        timelineStore.saveProjectTimeline(activeProject.id),
-      ]);
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to save project:", error);
-    }
-  },
-
-  loadAllProjects: async () => {
-    if (!get().isInitialized) {
-      set({ isLoading: true });
-    }
-
-    try {
-      const projects = await storageService.loadAllProjects();
-      set({ savedProjects: projects });
-    } catch (error) {
-      console.error("Failed to load projects:", error);
-    } finally {
-      set({ isLoading: false, isInitialized: true });
-    }
-  },
-
-  deleteProject: async (id: string) => {
-    try {
-      // Delete project data in parallel
-      await Promise.all([
-        storageService.deleteProjectMedia(id),
-        storageService.deleteProjectTimeline(id),
-        storageService.deleteProject(id),
-      ]);
-      await get().loadAllProjects(); // Refresh the list
-
-      // If we deleted the active project, close it and clear data
-      const { activeProject } = get();
-      if (activeProject?.id === id) {
-        set({ activeProject: null });
-        const mediaStore = useMediaStore.getState();
-        const timelineStore = useTimelineStore.getState();
-        mediaStore.clearAllMedia();
-        timelineStore.clearTimeline();
-      }
-    } catch (error) {
-      console.error("Failed to delete project:", error);
-    }
-  },
-
-  closeProject: () => {
-    set({ activeProject: null });
-
-    // Clear data from stores when closing project
-    const mediaStore = useMediaStore.getState();
-    const timelineStore = useTimelineStore.getState();
-    mediaStore.clearAllMedia();
-    timelineStore.clearTimeline();
-  },
-
-  renameProject: async (id: string, name: string) => {
-    const { savedProjects } = get();
-
-    // Find the project to rename
-    const projectToRename = savedProjects.find((p) => p.id === id);
-    if (!projectToRename) {
-      toast.error("Project not found", {
-        description: "Please try again",
-      });
-      return;
-    }
-
-    const updatedProject = {
-      ...projectToRename,
-      name,
-      updatedAt: new Date(),
-    };
-
-    try {
-      // Save to storage
-      await storageService.saveProject(updatedProject);
-
-      await get().loadAllProjects();
-
-      // Update activeProject if it's the same project
-      const { activeProject } = get();
-      if (activeProject?.id === id) {
-        set({ activeProject: 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",
-      });
-    }
-  },
-
-  duplicateProject: async (projectId: string) => {
-    try {
-      const project = await storageService.loadProject(projectId);
-      if (!project) {
-        toast.error("Project not found", {
-          description: "Please try again",
-        });
-        throw new Error("Project not found");
-      }
-
-      const { savedProjects } = get();
-
-      // Extract the base name (remove any existing numbering)
-      const numberMatch = project.name.match(/^\((\d+)\)\s+(.+)$/);
-      const baseName = numberMatch ? numberMatch[2] : project.name;
-      const existingNumbers: number[] = [];
-
-      // Check for pattern "(number) baseName" in existing projects
-      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 newProject: TProject = {
-        id: generateUUID(),
-        name: `(${nextNumber}) ${baseName}`,
-        thumbnail: project.thumbnail,
-        createdAt: new Date(),
-        updatedAt: new Date(),
-      };
-
-      await storageService.saveProject(newProject);
-      await get().loadAllProjects();
-      return newProject.id;
-    } 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;
-    }
-  },
-
-  updateProjectBackground: async (backgroundColor: string) => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    const updatedProject = {
-      ...activeProject,
-      backgroundColor,
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject(updatedProject);
-      set({ activeProject: updatedProject });
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to update project background:", error);
-      toast.error("Failed to update background", {
-        description: "Please try again",
-      });
-    }
-  },
-
-  updateBackgroundType: async (
-    type: "color" | "blur",
-    options?: { backgroundColor?: string; blurIntensity?: number }
-  ) => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    const updatedProject = {
-      ...activeProject,
-      backgroundType: type,
-      ...(options?.backgroundColor && {
-        backgroundColor: options.backgroundColor,
-      }),
-      ...(options?.blurIntensity && { blurIntensity: options.blurIntensity }),
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject(updatedProject);
-      set({ activeProject: updatedProject });
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to update background type:", error);
-      toast.error("Failed to update background", {
-        description: "Please try again",
-      });
-    }
-  },
-
-  updateProjectFps: async (fps: number) => {
-    const { activeProject } = get();
-    if (!activeProject) return;
-
-    const updatedProject = {
-      ...activeProject,
-      fps,
-      updatedAt: new Date(),
-    };
-
-    try {
-      await storageService.saveProject(updatedProject);
-      set({ activeProject: updatedProject });
-      await get().loadAllProjects(); // Refresh the list
-    } catch (error) {
-      console.error("Failed to update project FPS:", error);
-      toast.error("Failed to update project FPS", {
-        description: "Please try again",
-      });
-    }
-  },
-
-  getFilteredAndSortedProjects: (searchQuery: string, sortOption: string) => {
-    const { savedProjects } = get();
-
-    // Filter projects by search query
-    const filteredProjects = savedProjects.filter((project) =>
-      project.name.toLowerCase().includes(searchQuery.toLowerCase())
-    );
-
-    // Sort filtered projects
-    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;
-  },
-}));
+import { TProject } from "@/types/project";

+import { create } from "zustand";

+import { storageService } from "@/lib/storage/storage-service";

+import { toast } from "sonner";

+import { useMediaStore } from "./media-store";

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

+import { generateUUID } from "@/lib/utils";

+

+interface ProjectStore {

+  activeProject: TProject | null;

+  savedProjects: TProject[];

+  isLoading: boolean;

+  isInitialized: boolean;

+

+  // Actions

+  createNewProject: (name: string) => Promise<string>;

+  loadProject: (id: string) => Promise<void>;

+  saveCurrentProject: () => Promise<void>;

+  loadAllProjects: () => Promise<void>;

+  deleteProject: (id: string) => Promise<void>;

+  closeProject: () => void;

+  renameProject: (projectId: string, name: string) => Promise<void>;

+  duplicateProject: (projectId: string) => Promise<string>;

+  updateProjectBackground: (backgroundColor: string) => Promise<void>;

+  updateBackgroundType: (

+    type: "color" | "blur",

+    options?: { backgroundColor?: string; blurIntensity?: number }

+  ) => Promise<void>;

+  updateProjectFps: (fps: number) => Promise<void>;

+

+  getFilteredAndSortedProjects: (

+    searchQuery: string,

+    sortOption: string

+  ) => TProject[];

+}

+

+export const useProjectStore = create<ProjectStore>((set, get) => ({

+  activeProject: null,

+  savedProjects: [],

+  isLoading: true,

+  isInitialized: false,

+

+  createNewProject: async (name: string) => {

+    const newProject: TProject = {

+      id: generateUUID(),

+      name,

+      thumbnail: "",

+      createdAt: new Date(),

+      updatedAt: new Date(),

+      backgroundColor: "#000000",

+      backgroundType: "color",

+      blurIntensity: 8,

+    };

+

+    set({ activeProject: newProject });

+

+    try {

+      await storageService.saveProject(newProject);

+      // Reload all projects to update the list

+      await get().loadAllProjects();

+      return newProject.id;

+    } catch (error) {

+      toast.error("Failed to save new project");

+      throw error;

+    }

+  },

+

+  loadProject: async (id: string) => {

+    if (!get().isInitialized) {

+      set({ isLoading: true });

+    }

+

+    // Clear media and timeline immediately to prevent flickering when switching projects

+    const mediaStore = useMediaStore.getState();

+    const timelineStore = useTimelineStore.getState();

+    mediaStore.clearAllMedia();

+    timelineStore.clearTimeline();

+

+    try {

+      const project = await storageService.loadProject(id);

+      if (project) {

+        set({ activeProject: project });

+

+        // Load project-specific data in parallel

+        await Promise.all([

+          mediaStore.loadProjectMedia(id),

+          timelineStore.loadProjectTimeline(id),

+        ]);

+      } else {

+        throw new Error(`Project with id ${id} not found`);

+      }

+    } catch (error) {

+      console.error("Failed to load project:", error);

+      throw error; // Re-throw so the editor page can handle it

+    } finally {

+      set({ isLoading: false });

+    }

+  },

+

+  saveCurrentProject: async () => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    try {

+      // Save project metadata and timeline data in parallel

+      const timelineStore = useTimelineStore.getState();

+      await Promise.all([

+        storageService.saveProject(activeProject),

+        timelineStore.saveProjectTimeline(activeProject.id),

+      ]);

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to save project:", error);

+    }

+  },

+

+  loadAllProjects: async () => {

+    if (!get().isInitialized) {

+      set({ isLoading: true });

+    }

+

+    try {

+      const projects = await storageService.loadAllProjects();

+      set({ savedProjects: projects });

+    } catch (error) {

+      console.error("Failed to load projects:", error);

+    } finally {

+      set({ isLoading: false, isInitialized: true });

+    }

+  },

+

+  deleteProject: async (id: string) => {

+    try {

+      // Delete project data in parallel

+      await Promise.all([

+        storageService.deleteProjectMedia(id),

+        storageService.deleteProjectTimeline(id),

+        storageService.deleteProject(id),

+      ]);

+      await get().loadAllProjects(); // Refresh the list

+

+      // If we deleted the active project, close it and clear data

+      const { activeProject } = get();

+      if (activeProject?.id === id) {

+        set({ activeProject: null });

+        const mediaStore = useMediaStore.getState();

+        const timelineStore = useTimelineStore.getState();

+        mediaStore.clearAllMedia();

+        timelineStore.clearTimeline();

+      }

+    } catch (error) {

+      console.error("Failed to delete project:", error);

+    }

+  },

+

+  closeProject: () => {

+    set({ activeProject: null });

+

+    // Clear data from stores when closing project

+    const mediaStore = useMediaStore.getState();

+    const timelineStore = useTimelineStore.getState();

+    mediaStore.clearAllMedia();

+    timelineStore.clearTimeline();

+  },

+

+  renameProject: async (id: string, name: string) => {

+    const { savedProjects } = get();

+

+    // Find the project to rename

+    const projectToRename = savedProjects.find((p) => p.id === id);

+    if (!projectToRename) {

+      toast.error("Project not found", {

+        description: "Please try again",

+      });

+      return;

+    }

+

+    const updatedProject = {

+      ...projectToRename,

+      name,

+      updatedAt: new Date(),

+    };

+

+    try {

+      // Save to storage

+      await storageService.saveProject(updatedProject);

+

+      await get().loadAllProjects();

+

+      // Update activeProject if it's the same project

+      const { activeProject } = get();

+      if (activeProject?.id === id) {

+        set({ activeProject: 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",

+      });

+    }

+  },

+

+  duplicateProject: async (projectId: string) => {

+    try {

+      const project = await storageService.loadProject(projectId);

+      if (!project) {

+        toast.error("Project not found", {

+          description: "Please try again",

+        });

+        throw new Error("Project not found");

+      }

+

+      const { savedProjects } = get();

+

+      // Extract the base name (remove any existing numbering)

+      const numberMatch = project.name.match(/^\((\d+)\)\s+(.+)$/);

+      const baseName = numberMatch ? numberMatch[2] : project.name;

+      const existingNumbers: number[] = [];

+

+      // Check for pattern "(number) baseName" in existing projects

+      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 newProject: TProject = {

+        id: generateUUID(),

+        name: `(${nextNumber}) ${baseName}`,

+        thumbnail: project.thumbnail,

+        createdAt: new Date(),

+        updatedAt: new Date(),

+      };

+

+      await storageService.saveProject(newProject);

+      await get().loadAllProjects();

+      return newProject.id;

+    } 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;

+    }

+  },

+

+  updateProjectBackground: async (backgroundColor: string) => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    const updatedProject = {

+      ...activeProject,

+      backgroundColor,

+      updatedAt: new Date(),

+    };

+

+    try {

+      await storageService.saveProject(updatedProject);

+      set({ activeProject: updatedProject });

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to update project background:", error);

+      toast.error("Failed to update background", {

+        description: "Please try again",

+      });

+    }

+  },

+

+  updateBackgroundType: async (

+    type: "color" | "blur",

+    options?: { backgroundColor?: string; blurIntensity?: number }

+  ) => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    const updatedProject = {

+      ...activeProject,

+      backgroundType: type,

+      ...(options?.backgroundColor && {

+        backgroundColor: options.backgroundColor,

+      }),

+      ...(options?.blurIntensity && { blurIntensity: options.blurIntensity }),

+      updatedAt: new Date(),

+    };

+

+    try {

+      await storageService.saveProject(updatedProject);

+      set({ activeProject: updatedProject });

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to update background type:", error);

+      toast.error("Failed to update background", {

+        description: "Please try again",

+      });

+    }

+  },

+

+  updateProjectFps: async (fps: number) => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    const updatedProject = {

+      ...activeProject,

+      fps,

+      updatedAt: new Date(),

+    };

+

+    try {

+      await storageService.saveProject(updatedProject);

+      set({ activeProject: updatedProject });

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to update project FPS:", error);

+      toast.error("Failed to update project FPS", {

+        description: "Please try again",

+      });

+    }

+  },

+

+  getFilteredAndSortedProjects: (searchQuery: string, sortOption: string) => {

+    const { savedProjects } = get();

+

+    // Filter projects by search query

+    const filteredProjects = savedProjects.filter((project) =>

+      project.name.toLowerCase().includes(searchQuery.toLowerCase())

+    );

+

+    // Sort filtered projects

+    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;

+      } else {

+        if (aValue > bValue) return -1;

+        if (aValue < bValue) return 1;

+        return 0;

+      }

+    });

+

+    return sortedProjects;

+  },

+}));

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 820025cc..8a4abc6a 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -295,8 +295,9 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
                   { trackId, elementId },
                 ],
               };
+        } else {
+          return { selectedElements: [{ trackId, elementId }] };
         }
-        return { selectedElements: [{ trackId, elementId }] };
       });
     },
 
@@ -679,8 +680,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
                 (element) => element.id !== elementId
               ),
             };
-          }
-          if (track.id === toTrackId) {
+          } else if (track.id === toTrackId) {
             return {
               ...track,
               elements: [...track.elements, elementToMove],
@@ -1091,7 +1091,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
         if (!fileType) return false;
 
         // Process the new media file
-        const mediaData: any = {
+        let mediaData: any = {
           name: newFile.name,
           type: fileType,
           file: newFile,
@@ -1204,8 +1204,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
           );
           const { thumbnailUrl } = await generateVideoThumbnail(mediaItem.file);
           return thumbnailUrl;
-        }
-        if (mediaItem.type === "image" && mediaItem.url) {
+        } else if (mediaItem.type === "image" && mediaItem.url) {
           return mediaItem.url;
         }
 
diff --git a/apps/web/src/types/editor.ts b/apps/web/src/types/editor.ts
index b0449991..dce7ac50 100644
--- a/apps/web/src/types/editor.ts
+++ b/apps/web/src/types/editor.ts
@@ -1,12 +1,12 @@
-export type BackgroundType = "blur" | "mirror" | "color";
-
-export interface CanvasSize {
-  width: number;
-  height: number;
-}
-
-export interface CanvasPreset {
-  name: string;
-  width: number;
-  height: number;
-}
+export type BackgroundType = "blur" | "mirror" | "color";

+

+export interface CanvasSize {

+  width: number;

+  height: number;

+}

+

+export interface CanvasPreset {

+  name: string;

+  width: number;

+  height: number;

+}

diff --git a/apps/web/src/types/keybinding.ts b/apps/web/src/types/keybinding.ts
index 831f3abd..d97c88da 100644
--- a/apps/web/src/types/keybinding.ts
+++ b/apps/web/src/types/keybinding.ts
@@ -16,58 +16,12 @@ export type ModifierKeys =
 /* eslint-disable prettier/prettier */
 // prettier-ignore
 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}`;
diff --git a/apps/web/src/types/post.ts b/apps/web/src/types/post.ts
index fbee239e..c3436847 100644
--- a/apps/web/src/types/post.ts
+++ b/apps/web/src/types/post.ts
@@ -1,92 +1,93 @@
 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;
+    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;
+  };
+  
+  export type MarblePostList = {
+    posts: Post[];
+    pagination: Pagination;
+  };
+  
+  export type MarblePost = {
+    post: Post;
+  };
+  
+  export type Tag = {
+    id: string;
     name: string;
+    slug: string;
+  };
+  
+  export type MarbleTag = {
+    tag: Tag;
   };
-  tags: {
+  
+  export type MarbleTagList = {
+    tags: Tag[];
+    pagination: Pagination;
+  };
+  
+  export type Category = {
     id: string;
+    name: string;
     slug: string;
+  };
+  
+  export type MarbleCategory = {
+    category: Category;
+  };
+  
+  export type MarbleCategoryList = {
+    categories: Category[];
+    pagination: Pagination;
+  };
+  
+  export type Author = {
+    id: 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;
-};
-
-export type MarblePostList = {
-  posts: Post[];
-  pagination: Pagination;
-};
-
-export type MarblePost = {
-  post: Post;
-};
-
-export type Tag = {
-  id: string;
-  name: string;
-  slug: string;
-};
-
-export type MarbleTag = {
-  tag: Tag;
-};
-
-export type MarbleTagList = {
-  tags: Tag[];
-  pagination: Pagination;
-};
-
-export type Category = {
-  id: string;
-  name: string;
-  slug: string;
-};
-
-export type MarbleCategory = {
-  category: Category;
-};
-
-export type MarbleCategoryList = {
-  categories: Category[];
-  pagination: Pagination;
-};
-
-export type Author = {
-  id: string;
-  name: string;
-  image: string;
-};
-
-export type MarbleAuthor = {
-  author: Author;
-};
-
-export type MarbleAuthorList = {
-  authors: Author[];
-  pagination: Pagination;
-};
+    image: string;
+  };
+  
+  export type MarbleAuthor = {
+    author: Author;
+  };
+  
+  export type MarbleAuthorList = {
+    authors: Author[];
+    pagination: Pagination;
+  };
+  
\ No newline at end of file
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index ef20c642..f8a79d03 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -138,8 +138,7 @@ export function canElementGoOnTrack(
 ): boolean {
   if (elementType === "text") {
     return trackType === "text";
-  }
-  if (elementType === "media") {
+  } else if (elementType === "media") {
     return trackType === "media" || trackType === "audio";
   }
   return false;
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
index 67a24946..d992b7b4 100644
--- a/apps/web/tailwind.config.ts
+++ b/apps/web/tailwind.config.ts
@@ -1,5 +1,6 @@
 import type { Config } from "tailwindcss";
 
+
 export default {
   darkMode: ["class"],
   content: [
@@ -109,11 +110,11 @@ export default {
   plugins: [
     require("@tailwindcss/typography"),
     require("tailwindcss-animate"),
-    ({
+    function ({
       addUtilities,
     }: {
       addUtilities: (utilities: Record<string, any>) => void;
-    }) => {
+    }) {
       addUtilities({
         ".scrollbar-hidden": {
           "-ms-overflow-style": "none",
diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
index 0a966d20..e291637a 100644
--- a/apps/web/tsconfig.json
+++ b/apps/web/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,7 +23,9 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": [
+        "./src/*"
+      ]
     },
     "forceConsistentCasingInFileNames": true
   },
@@ -31,5 +37,7 @@
     ".next/types/**/*.ts",
     "src/types/**/*.d.ts"
   ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }