From e5268c618983fa70bff40f55be0267c0384e44a1 Mon Sep 17 00:00:00 2001
From: Thomas <nyumat18@gmail.com>
Date: Sun, 3 Mar 2024 14:33:39 -0800
Subject: [PATCH 1/8] demo patches

---
 convex/sequencer.ts                 |  13 ++-
 package-lock.json                   | 150 ++++++++++++++++++++++++----
 src/app/layouts/ProtectecLayout.tsx |   2 +-
 src/components/add-track-action.tsx |  55 ++++------
 src/components/sequencer.tsx        |  32 +++---
 src/components/sidebar-nav.tsx      |  24 ++---
 src/types/index.ts                  |   3 +-
 7 files changed, 195 insertions(+), 84 deletions(-)

diff --git a/convex/sequencer.ts b/convex/sequencer.ts
index 7de70b4..f833fde 100644
--- a/convex/sequencer.ts
+++ b/convex/sequencer.ts
@@ -1,5 +1,5 @@
-import { mutation } from "./_generated/server";
 import { v } from "convex/values";
+import { mutation } from "./_generated/server";
 
 export const createSequenceSession = mutation({
   args: {
@@ -16,3 +16,14 @@ export const createSequenceSession = mutation({
     return newSequenceSession;
   },
 });
+
+export const deleteTrack = mutation({
+  args: {
+    name: v.string(),
+  },
+  handler: async (ctx, args) => {
+    const tracks = await ctx.db.query("files").collect();
+    const trackToDelete = tracks.filter((track) => track.name === args.name);
+    await ctx.db.delete(trackToDelete[0]?._id);
+  },
+});
diff --git a/package-lock.json b/package-lock.json
index 914f759..6cbbd46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -67,6 +67,7 @@
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       },
@@ -435,6 +436,7 @@
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
       "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
+      "dev": true,
       "dependencies": {
         "string-width": "^5.1.2",
         "string-width-cjs": "npm:string-width@^4.2.0",
@@ -451,6 +453,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
       "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -462,6 +465,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -476,6 +480,7 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -489,6 +494,7 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -497,6 +503,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
+      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -504,12 +511,14 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.24",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.24.tgz",
       "integrity": "sha512-+VaWXDa6+l6MhflBvVXjIEAzb59nQ2JUK3bwRp2zRpPtU+8TFRy9Gg/5oIcNlkEL5PGlBFGfemUVvIgLnTzq7Q==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -668,6 +677,7 @@
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
       "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
@@ -680,6 +690,7 @@
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
       "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -688,6 +699,7 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
       "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
@@ -736,6 +748,7 @@
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
       "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
+      "dev": true,
       "optional": true,
       "engines": {
         "node": ">=14"
@@ -1692,7 +1705,7 @@
       "version": "15.7.11",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz",
       "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/qs": {
       "version": "6.9.12",
@@ -1708,7 +1721,7 @@
       "version": "18.2.61",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.61.tgz",
       "integrity": "sha512-NURTN0qNnJa7O/k4XUkEW2yfygA+NxS0V5h1+kp9jPwhzZy95q3ADoGMP0+JypMhrZBTTgjKAUlTctde1zzeQA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -1719,7 +1732,7 @@
       "version": "18.2.19",
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.19.tgz",
       "integrity": "sha512-aZvQL6uUbIJpjZk4U8JZGbau9KDeAwMfmhyWorxgBkqDIEf6ROjRozcmPIicqsUwPUjbkDfHKgGee1Lq65APcA==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "@types/react": "*"
       }
@@ -1728,7 +1741,7 @@
       "version": "0.16.8",
       "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz",
       "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/@types/semver": {
       "version": "7.5.8",
@@ -2012,6 +2025,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
       "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2020,6 +2034,7 @@
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
       "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
       "dependencies": {
         "color-convert": "^2.0.1"
       },
@@ -2033,12 +2048,14 @@
     "node_modules/any-promise": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "dev": true
     },
     "node_modules/anymatch": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
       "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
         "picomatch": "^2.0.4"
@@ -2050,7 +2067,8 @@
     "node_modules/arg": {
       "version": "5.0.2",
       "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "dev": true
     },
     "node_modules/argparse": {
       "version": "2.0.1",
@@ -2357,12 +2375,14 @@
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true
     },
     "node_modules/binary-extensions": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -2381,6 +2401,7 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "dev": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -2471,6 +2492,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
       "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2530,6 +2552,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
       "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "dev": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -2553,6 +2576,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -2889,6 +2913,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
       "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -2970,6 +2995,7 @@
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
       "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
         "shebang-command": "^2.0.0",
@@ -2983,6 +3009,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
       "bin": {
         "cssesc": "bin/cssesc"
       },
@@ -2994,7 +3021,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
@@ -3100,7 +3127,8 @@
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "dev": true
     },
     "node_modules/dir-glob": {
       "version": "3.0.1",
@@ -3117,7 +3145,8 @@
     "node_modules/dlv": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
     },
     "node_modules/doctrine": {
       "version": "3.0.0",
@@ -3143,7 +3172,8 @@
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA=="
+      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
+      "dev": true
     },
     "node_modules/electron-to-chromium": {
       "version": "1.4.690",
@@ -3154,7 +3184,8 @@
     "node_modules/emoji-regex": {
       "version": "9.2.2",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg=="
+      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
+      "dev": true
     },
     "node_modules/enhanced-resolve": {
       "version": "5.15.1",
@@ -3815,6 +3846,7 @@
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
       "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
+      "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
@@ -3830,6 +3862,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -3858,6 +3891,7 @@
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
       "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
+      "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
       }
@@ -3889,6 +3923,7 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "dev": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -3945,6 +3980,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
       "integrity": "sha512-TMKDUnIte6bfb5nWv7V/caI169OHgvwjb7V4WkeUvbQQdjr5rWKqHFiKWb/fcOwB+CzBT+qbWjvj+DVwRskpIg==",
+      "dev": true,
       "dependencies": {
         "cross-spawn": "^7.0.0",
         "signal-exit": "^4.0.1"
@@ -4015,6 +4051,7 @@
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
       "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "dev": true,
       "hasInstallScript": true,
       "optional": true,
       "os": [
@@ -4028,6 +4065,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -4119,6 +4157,7 @@
       "version": "10.3.10",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.3.10.tgz",
       "integrity": "sha512-fa46+tv1Ak0UPK1TOy/pZrIybNNt4HCv7SDzwyfiOZkvZLEbjsZkJBPtDHVshZjbecAoAGSC20MjLDG/qr679g==",
+      "dev": true,
       "dependencies": {
         "foreground-child": "^3.1.0",
         "jackspeak": "^2.3.5",
@@ -4140,6 +4179,7 @@
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
       "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
       "dependencies": {
         "is-glob": "^4.0.3"
       },
@@ -4156,6 +4196,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
       "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
+      "dev": true,
       "dependencies": {
         "balanced-match": "^1.0.0"
       }
@@ -4164,6 +4205,7 @@
       "version": "9.0.3",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
       "integrity": "sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==",
+      "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
@@ -4320,6 +4362,7 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.1.tgz",
       "integrity": "sha512-1/th4MHjnwncwXsIW6QMzlvYL9kG5e/CpVvLRZe4XPa8TOUNbCELqmvhDmnkNsAjwaG4+I8gJJL0JBvTTLO9qA==",
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -4451,6 +4494,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "dev": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -4490,6 +4534,7 @@
       "version": "2.13.1",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.13.1.tgz",
       "integrity": "sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==",
+      "dev": true,
       "dependencies": {
         "hasown": "^2.0.0"
       },
@@ -4516,6 +4561,7 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -4536,6 +4582,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
       "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -4559,6 +4606,7 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
       },
@@ -4591,6 +4639,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "dev": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -4747,7 +4796,8 @@
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
+      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
+      "dev": true
     },
     "node_modules/iterator.prototype": {
       "version": "1.1.2",
@@ -4766,6 +4816,7 @@
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-2.3.6.tgz",
       "integrity": "sha512-N3yCS/NegsOBokc8GAdM8UcmfsKiSS8cipheD/nivzr700H+nsMOxJjQnvwOcRYVuFkdH0wGUvW2WbXGmrZGbQ==",
+      "dev": true,
       "dependencies": {
         "@isaacs/cliui": "^8.0.2"
       },
@@ -4783,6 +4834,7 @@
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.0.tgz",
       "integrity": "sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==",
+      "dev": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4906,6 +4958,7 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
       "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
+      "dev": true,
       "engines": {
         "node": ">=10"
       }
@@ -4913,7 +4966,8 @@
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
     },
     "node_modules/locate-path": {
       "version": "6.0.0",
@@ -4959,6 +5013,7 @@
       "version": "10.2.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.2.0.tgz",
       "integrity": "sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==",
+      "dev": true,
       "engines": {
         "node": "14 || >=16.14"
       }
@@ -4986,6 +5041,7 @@
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "dev": true,
       "engines": {
         "node": ">= 8"
       }
@@ -4994,6 +5050,7 @@
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
       "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "dev": true,
       "dependencies": {
         "braces": "^3.0.2",
         "picomatch": "^2.3.1"
@@ -5046,6 +5103,7 @@
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.0.4.tgz",
       "integrity": "sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==",
+      "dev": true,
       "engines": {
         "node": ">=16 || 14 >=14.17"
       }
@@ -5060,6 +5118,7 @@
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
       "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0",
         "object-assign": "^4.0.1",
@@ -5220,6 +5279,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5245,6 +5305,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
       "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5449,6 +5510,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -5456,12 +5518,14 @@
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "dev": true
     },
     "node_modules/path-scurry": {
       "version": "1.10.1",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.10.1.tgz",
       "integrity": "sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==",
+      "dev": true,
       "dependencies": {
         "lru-cache": "^9.1.1 || ^10.0.0",
         "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
@@ -5496,6 +5560,7 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "dev": true,
       "engines": {
         "node": ">=8.6"
       },
@@ -5507,6 +5572,7 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
       "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -5515,6 +5581,7 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
       "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
+      "dev": true,
       "engines": {
         "node": ">= 6"
       }
@@ -5532,6 +5599,7 @@
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
       "integrity": "sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5559,6 +5627,7 @@
       "version": "15.1.0",
       "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
       "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "dev": true,
       "dependencies": {
         "postcss-value-parser": "^4.0.0",
         "read-cache": "^1.0.0",
@@ -5575,6 +5644,7 @@
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
       "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
+      "dev": true,
       "dependencies": {
         "camelcase-css": "^2.0.1"
       },
@@ -5593,6 +5663,7 @@
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
       "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -5627,6 +5698,7 @@
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.1.tgz",
       "integrity": "sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==",
+      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -5638,6 +5710,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
       "integrity": "sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==",
+      "dev": true,
       "dependencies": {
         "postcss-selector-parser": "^6.0.11"
       },
@@ -5656,6 +5729,7 @@
       "version": "6.0.15",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
       "integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
+      "dev": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -5667,7 +5741,8 @@
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
     },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
@@ -5722,6 +5797,7 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -5860,6 +5936,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
       "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "dev": true,
       "dependencies": {
         "pify": "^2.3.0"
       }
@@ -5868,6 +5945,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -5928,6 +6006,7 @@
       "version": "1.22.8",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
       "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
+      "dev": true,
       "dependencies": {
         "is-core-module": "^2.13.0",
         "path-parse": "^1.0.7",
@@ -5962,6 +6041,7 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
       "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
+      "dev": true,
       "engines": {
         "iojs": ">=1.0.0",
         "node": ">=0.10.0"
@@ -6006,6 +6086,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
       "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -6167,6 +6248,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
       "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+      "dev": true,
       "dependencies": {
         "shebang-regex": "^3.0.0"
       },
@@ -6178,6 +6260,7 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -6204,6 +6287,7 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
       "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
       "engines": {
         "node": ">=14"
       },
@@ -6291,6 +6375,7 @@
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
       "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
+      "dev": true,
       "dependencies": {
         "eastasianwidth": "^0.2.0",
         "emoji-regex": "^9.2.2",
@@ -6308,6 +6393,7 @@
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -6320,12 +6406,14 @@
     "node_modules/string-width-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/string-width/node_modules/ansi-regex": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
       "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -6337,6 +6425,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -6416,6 +6505,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -6428,6 +6518,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
       "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^5.0.1"
       },
@@ -6482,6 +6573,7 @@
       "version": "3.35.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
       "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
+      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.2",
         "commander": "^4.0.0",
@@ -6515,6 +6607,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -6570,6 +6663,7 @@
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
       "integrity": "sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==",
+      "dev": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -6629,6 +6723,7 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
       "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "dev": true,
       "dependencies": {
         "any-promise": "^1.0.0"
       }
@@ -6637,6 +6732,7 @@
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
       "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "dev": true,
       "dependencies": {
         "thenify": ">= 3.1.0 < 4"
       },
@@ -6653,6 +6749,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "dev": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -6693,7 +6790,8 @@
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "dev": true
     },
     "node_modules/tsconfig-paths": {
       "version": "3.15.0",
@@ -6963,7 +7061,8 @@
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "dev": true
     },
     "node_modules/webcrypto-core": {
       "version": "1.7.8",
@@ -7000,6 +7099,7 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
       "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+      "dev": true,
       "dependencies": {
         "isexe": "^2.0.0"
       },
@@ -7090,6 +7190,7 @@
       "version": "8.1.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
       "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^6.1.0",
         "string-width": "^5.0.1",
@@ -7107,6 +7208,7 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
       "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
       "dependencies": {
         "ansi-styles": "^4.0.0",
         "string-width": "^4.1.0",
@@ -7122,12 +7224,14 @@
     "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true
     },
     "node_modules/wrap-ansi-cjs/node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
       "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
@@ -7141,6 +7245,7 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
       "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -7152,6 +7257,7 @@
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
       "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
       "engines": {
         "node": ">=12"
       },
@@ -7163,6 +7269,7 @@
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
       "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
       "dependencies": {
         "ansi-regex": "^6.0.1"
       },
@@ -7188,6 +7295,7 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.0.tgz",
       "integrity": "sha512-j9iR8g+/t0lArF4V6NE/QCfT+CO7iLqrXAHZbJdo+LfjqP1vR8Fg5bSiaq6Q2lOD1AUEVrEVIgABvBFYojJVYQ==",
+      "dev": true,
       "bin": {
         "yaml": "bin.mjs"
       },
diff --git a/src/app/layouts/ProtectecLayout.tsx b/src/app/layouts/ProtectecLayout.tsx
index 45f179a..1a2a5c1 100644
--- a/src/app/layouts/ProtectecLayout.tsx
+++ b/src/app/layouts/ProtectecLayout.tsx
@@ -9,7 +9,7 @@ export default function ProtectedLayout({
 }) {
   return (
     <div className="flex h-screen flex-row gap-3 p-3">
-      <aside className="sticky top-0 max-h-screen w-60 rounded-lg  border border-neutral-800 p-5 max-md:hidden ">
+      <aside className="sticky top-0 max-h-screen w-40 rounded-lg  border border-neutral-800 p-5 max-md:hidden ">
         <SidebarNav />
       </aside>
       <main className="relative max-h-screen flex-1  overflow-auto  rounded-lg border border-neutral-800 pb-5">
diff --git a/src/components/add-track-action.tsx b/src/components/add-track-action.tsx
index ffa566f..e365611 100644
--- a/src/components/add-track-action.tsx
+++ b/src/components/add-track-action.tsx
@@ -158,7 +158,7 @@ export function TrackActionsDialog({
   );
 
   useEffect(() => {
-    if (tempTrack.length !== 0) {
+    if (tempTrack?.length !== 0) {
       setSelectedSample(tempTrack[0]);
     }
   }, [tempTrack]);
@@ -179,7 +179,7 @@ export function TrackActionsDialog({
           </DialogDescription>
         </DialogHeader>
 
-        {tempTrack.length === 0 ? (
+        {tempTrack?.length === 0 ? (
           <>
             <p className="-mb-8 -mt-2 text-xs font-semibold text-neutral-100">
               Sample
@@ -198,7 +198,7 @@ export function TrackActionsDialog({
         ) : (
           <div className="flex gap-4">
             <FileIcon />
-            <p>{tempTrack[0].name}</p>
+            <p>{tempTrack[0]?.name}</p>
           </div>
         )}
         <p className="-mb-8 -mt-2 text-xs text-neutral-400">
@@ -210,7 +210,11 @@ export function TrackActionsDialog({
             type="button"
             variant="default"
             onClick={() => {
-              if (!selectedSample?.name || !selectedSample?.url) {
+              const hasSelectedSample =
+                selectedSample?.name && selectedSample?.url;
+              const hasFile = getInputProps().value !== "";
+
+              if (!hasSelectedSample && !hasFile) {
                 toast({
                   title: "Error",
                   description:
@@ -219,42 +223,21 @@ export function TrackActionsDialog({
                 });
                 return;
               }
-              if (selectedSample?.name !== "" && selectedSample?.url !== "") {
+
+              if (hasSelectedSample) {
                 addTrack(selectedSample);
-                setOpen(false);
                 setSelectedCategory(null);
                 setSelectedSample(null);
-                toast({
-                  title: "Success",
-                  description: "Track added successfully.",
-                  variant: "default",
-                });
-              } else if (!selectedSample && getInputProps().value !== "") {
-                const file = getInputProps();
-                if (file.value !== "") {
-                  onSampleSave();
-                  setOpen(false);
-                  toast({
-                    title: "Success",
-                    description: "Track added successfully.",
-                    variant: "default",
-                  });
-                } else {
-                  toast({
-                    title: "Error",
-                    description:
-                      "No file selected. Please select a file to upload first.",
-                    variant: "destructive",
-                  });
-                }
-              } else {
-                toast({
-                  title: "Error",
-                  description:
-                    "No sample selected. Please select a sample to add to the track.",
-                  variant: "destructive",
-                });
+              } else if (hasFile) {
+                onSampleSave();
               }
+
+              setOpen(false);
+              toast({
+                title: "Success",
+                description: "Track added successfully.",
+                variant: "default",
+              });
             }}
           >
             Add Track
diff --git a/src/components/sequencer.tsx b/src/components/sequencer.tsx
index bcac2d6..98cf700 100644
--- a/src/components/sequencer.tsx
+++ b/src/components/sequencer.tsx
@@ -16,11 +16,11 @@ import SequencerCommand from "./sequencer-command";
 import { SequencerMenu } from "./sequencer-menu";
 
 import { Sample } from "@/types";
+import { useUser } from "@clerk/clerk-react";
 import * as Tone from "tone";
 import { TrackActionsDialog } from "./add-track-action";
 import { useToast } from "./ui/use-toast";
 const NOTE = "C2";
-import { useUser } from "@clerk/clerk-react";
 
 type Track = {
   id: number;
@@ -29,7 +29,7 @@ type Track = {
 };
 
 type Props = {
-  samples: { url: string; name: string | undefined }[];
+  samples: { url: Tone.ToneAudioBuffer; name: string | undefined }[];
   numOfSteps?: number;
 };
 
@@ -40,7 +40,7 @@ const shadeToColor = (shade: string, step: number) => {
 };
 
 type TempTrack = {
-  url: string;
+  url: Tone.ToneAudioBuffer;
   name: string;
 };
 
@@ -64,15 +64,16 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
 
   const generateUploadUrl = useMutation(api.files.generateUploadUrl);
   const sendFile = useMutation(api.files.sendFile);
+  const deleteTrack = useMutation(api.sequencer.deleteTrack);
   /**@ts-ignore */
   const storedFiles = useQuery(api.files.getFiles, { userId: user?.id });
 
   // Check this it may lead to issues
   React.useEffect(() => {
     if (storedFiles && tempTrack && tempTrack.length === 0) {
-      const formatedStoredFiles = storedFiles.map((file) => ({
+      const formatedStoredFiles = storedFiles.map((file: any) => ({
         name: file.name,
-        url: file.filePath,
+        url: new Tone.Buffer(file.url),
       }));
       /**@ts-ignore */
       setSampleState((prev) => [...prev, ...formatedStoredFiles]);
@@ -81,7 +82,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
 
   const onDrop = React.useCallback(async (acceptedFiles: File[]) => {
     const formattedAcceptedFiles = acceptedFiles.map((file) => {
-      const url = URL.createObjectURL(file);
+      const url = new Tone.Buffer(URL.createObjectURL(file));
       const name = file.name.split(".");
       name.pop();
       return {
@@ -114,16 +115,18 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
         userId: user?.id,
         sessionId: "temp",
       });
+      setTempTrack(null);
     } catch (err) {
       console.error(err);
+      setTempTrack(null);
     }
   }, []);
 
   const addTrack = (sample: Sample) => {
-    const url = new Blob([sample.url]).toString();
+    const url = new Tone.Buffer(sample.url);
     const name = sample.name;
-    setSampleState((prev) => [...prev, { url, name }]);
-    setTempTrack([]);
+    const track = { url, name };
+    setSampleState((prev) => [...prev, track]);
   };
 
   const handleAddTrack = () => {
@@ -152,7 +155,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
     (url: string, id: string, track: [number, number]) => {
       setSampleState((prev) => {
         const mutatedPrev = [...prev];
-        mutatedPrev[track[0]].url = url;
+        mutatedPrev[track[0]].url = new Tone.Buffer(url);
         return mutatedPrev;
       });
     },
@@ -163,7 +166,8 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
     try {
       const samplesBase64 = await Promise.all(
         samplesState.map(async ({ url, name }) => {
-          const response = await fetch(url);
+          const actualUrl = url instanceof Tone.Buffer ? url.name : url;
+          const response = await fetch(actualUrl);
           const blob = await response.blob();
           return new Promise((resolve, reject) => {
             const reader = new FileReader();
@@ -334,6 +338,10 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
   };
 
   const removeTrack = (index: number) => {
+    const file = storedFiles?.find(
+      (file: any) => file.name === samplesState[index].name
+    );
+    if (file) deleteTrack({ name: samplesState[index].name ?? "" });
     setSampleState((prev) => {
       const modifiedArr = [...prev];
       modifiedArr.splice(index, 1);
@@ -408,7 +416,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
               >
                 <TrashIcon
                   onClick={() => {
-                    removeTrack(index);
+                    removeTrack(trackId);
                     toast({
                       /** @ts-ignore */
                       title: (
diff --git a/src/components/sidebar-nav.tsx b/src/components/sidebar-nav.tsx
index b8948c9..7bb0ae0 100644
--- a/src/components/sidebar-nav.tsx
+++ b/src/components/sidebar-nav.tsx
@@ -1,11 +1,11 @@
-'use client';
+"use client";
 
-import { routeConfig } from '@/config/routes';
-import { cn } from '@/lib/utils';
-import { Music } from 'lucide-react';
-import Link from 'next/link';
-import { usePathname } from 'next/navigation';
-import ThemeToggle from './theme-toggle';
+import { routeConfig } from "@/config/routes";
+import { cn } from "@/lib/utils";
+import { Music } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import ThemeToggle from "./theme-toggle";
 
 export default function SidebarNav() {
   const pathname = usePathname();
@@ -14,7 +14,7 @@ export default function SidebarNav() {
     <div className="flex h-full  flex-col gap-5">
       <div className="flex items-center gap-2">
         <Music className="mr-2 size-4 font-light text-purple-700 dark:text-purple-700 md:size-8" />
-        <h1 className="text-3xl font-medium">BeatBytes</h1>
+        <h1 className="text-lg font-medium">BeatBytes</h1>
       </div>
       <nav className="flex flex-1  flex-col gap-2">
         {routeConfig.sidebarNav.map((link) => {
@@ -22,11 +22,11 @@ export default function SidebarNav() {
             <Link
               href={link.href}
               className={cn(
-                'gap-5 py-1 text-sm md:text-lg lg:text-xl xl:text-2xl px-2 rounded-lg flex flex-row transition-colors items-center hover:bg-purple-900',
+                "gap-5 py-1 text-sm md:text-lg px-2 rounded-lg flex flex-row transition-colors items-center hover:bg-purple-900",
                 {
-                  'bg-purple-900/50': pathname === link.href,
-                  'text-gray-900': pathname === link.href,
-                  'hover:bg-purple-900 text-neutral-200':
+                  "bg-purple-900/50": pathname === link.href,
+                  "text-gray-900": pathname === link.href,
+                  "hover:bg-purple-900 text-neutral-200":
                     pathname === link.href,
                 }
               )}
diff --git a/src/types/index.ts b/src/types/index.ts
index 9b9e0cd..44b45fe 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,4 +1,5 @@
 import { Icons } from "@/components/icons";
+import * as Tone from "tone";
 
 export type SidebarNavItem = {
   title: string;
@@ -48,7 +49,7 @@ export type DashboardConfig = {
 };
 
 export interface Sample {
-  url: string;
+  url: Tone.ToneAudioBuffer;
   name: string;
 }
 

From f85174430e694b3af61b9aa0aa8707528970007d Mon Sep 17 00:00:00 2001
From: MaxPrehoda <maxprehoda@gmail.com>
Date: Sun, 3 Mar 2024 13:45:38 -0800
Subject: [PATCH 2/8] fixed synth UI

---
 src/app/synth/page.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/synth/page.tsx b/src/app/synth/page.tsx
index a6f2b49..118b200 100644
--- a/src/app/synth/page.tsx
+++ b/src/app/synth/page.tsx
@@ -205,7 +205,7 @@ export default function Home() {
   };
 
   return (
-    <div className="relative flex min-h-screen bg-neutral-900 text-white">
+    <div className="relative flex min-h-screen bg-black text-white">
       <div className="min-w-48">
         <div className="fixed top-3.5 h-full">
           <div className="flex h-full max-w-full flex-col border-r-2 p-2">
@@ -213,14 +213,14 @@ export default function Home() {
               <button
                 onClick={startRecording}
                 disabled={isRecording || isPlayingBack}
-                className="mr-2 h-fit rounded bg-neutral-700 px-4 py-2 text-lg hover:bg-neutral-600"
+                className="mr-2 h-fit rounded border-[1px] px-4 py-2 text-lg border-neutral-800"
               >
                 <div className="size-5 rounded-full bg-red-500"></div>
               </button>
               <button
                 onClick={stopRecording}
                 disabled={!isRecording}
-                className="mr-2 h-fit rounded bg-neutral-700 px-4 py-2 text-lg hover:bg-neutral-600"
+                className="mr-2 h-fit rounded border-[1px] px-4 py-2 text-lg border-neutral-800"
               >
                 <div className="size-5 rounded-sm bg-neutral-500"></div>
               </button>
@@ -229,7 +229,7 @@ export default function Home() {
                 disabled={
                   isRecording || isPlayingBack || recordedNotes.length === 0
                 }
-                className="h-fit rounded bg-neutral-700 px-3 py-1.5 text-lg hover:bg-neutral-600"
+                className="h-fit rounded border-[1px] px-3 py-1.5 text-lg border-neutral-800"
               >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"

From 5bca24e98cd460499f02e462b0f9649745e25f46 Mon Sep 17 00:00:00 2001
From: MaxPrehoda <maxprehoda@gmail.com>
Date: Sun, 3 Mar 2024 13:46:58 -0800
Subject: [PATCH 3/8] fixed synth UI

---
 src/app/synth/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/synth/page.tsx b/src/app/synth/page.tsx
index 118b200..e37372f 100644
--- a/src/app/synth/page.tsx
+++ b/src/app/synth/page.tsx
@@ -208,7 +208,7 @@ export default function Home() {
     <div className="relative flex min-h-screen bg-black text-white">
       <div className="min-w-48">
         <div className="fixed top-3.5 h-full">
-          <div className="flex h-full max-w-full flex-col border-r-2 p-2">
+          <div className="flex h-fit max-w-full flex-col p-2">
             <div className="flex flex-row">
               <button
                 onClick={startRecording}
@@ -222,7 +222,7 @@ export default function Home() {
                 disabled={!isRecording}
                 className="mr-2 h-fit rounded border-[1px] px-4 py-2 text-lg border-neutral-800"
               >
-                <div className="size-5 rounded-sm bg-neutral-500"></div>
+                <div className="size-5 rounded-sm bg-white"></div>
               </button>
               <button
                 onClick={playBackRecording}
@@ -241,7 +241,7 @@ export default function Home() {
                   stroke-width="2"
                   stroke-linecap="round"
                   stroke-linejoin="round"
-                  class=" text-neutral-400"
+                  class=" text-white"
                 >
                   <polygon points="5 3 19 12 5 21 5 3" />
                 </svg>

From 52d0edd736fb3f6aaae18191426afd3b9099b14d Mon Sep 17 00:00:00 2001
From: Cassius Villareal <cassiusfive@gmail.com>
Date: Sun, 3 Mar 2024 14:14:06 -0800
Subject: [PATCH 4/8] Punch-in SFX

---
 src/components/sequencer.tsx | 75 +++++++++++++++++++++++++++++++++++-
 1 file changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/components/sequencer.tsx b/src/components/sequencer.tsx
index 98cf700..9b59ea7 100644
--- a/src/components/sequencer.tsx
+++ b/src/components/sequencer.tsx
@@ -2,6 +2,7 @@
 
 import { Input } from "@/components/ui/input";
 
+import { Button } from "@/components/ui/button";
 import { Slider } from "@/components/ui/slider";
 import { Toaster } from "@/components/ui/toaster";
 import { cn } from "@/lib/utils";
@@ -62,6 +63,9 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
   const seqRef = React.useRef<Tone.Sequence | null>(null);
   const stepIds = [...Array(numOfSteps).keys()] as const;
 
+  // Sound Effects
+  const [sfxList, setSfxList] = React.useState<Tone.InputNode[]>([]);
+
   const generateUploadUrl = useMutation(api.files.generateUploadUrl);
   const sendFile = useMutation(api.files.sendFile);
   const deleteTrack = useMutation(api.sequencer.deleteTrack);
@@ -233,7 +237,9 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
             byteNumbers[i] = byteCharacters.charCodeAt(i);
           }
           const byteArray = new Uint8Array(byteNumbers);
-          const fileBlob = new Blob([byteArray], { type: "audio/mp3" });
+          const fileBlob = new Blob([byteArray], {
+            type: "audio/mp3",
+          });
 
           const blobUrl = URL.createObjectURL(fileBlob);
 
@@ -326,6 +332,19 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [samplesState, numOfSteps]);
 
+  React.useEffect(() => {
+    tracksRef.current.forEach((track) => {
+      if (sfxList.length > 0) {
+        track.sampler.disconnect();
+        track.sampler.chain(...sfxList, track.volume);
+        console.log(sfxList);
+      } else {
+        track.sampler.disconnect();
+        track.sampler.chain(track.volume);
+      }
+    });
+  }, [sfxList]);
+
   const handleRename = (
     e: React.ChangeEvent<HTMLInputElement>,
     trackId: number
@@ -554,6 +573,60 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
             />
           </label>
         </div>
+        <div className="grid grid-cols-4 gap-4">
+          <Button
+            onMouseDown={() => {
+              setSfxList([new Tone.PitchShift(6), new Tone.Volume(-10)]);
+            }}
+            onMouseUp={() => {
+              setSfxList([]);
+            }}
+            onMouseLeave={() => {
+              setSfxList([]);
+            }}
+          >
+            Octave Up
+          </Button>
+          <Button
+            onMouseDown={() => {
+              setSfxList([new Tone.PitchShift(-6), new Tone.Reverb()]);
+            }}
+            onMouseUp={() => {
+              setSfxList([]);
+            }}
+            onMouseLeave={() => {
+              setSfxList([]);
+            }}
+          >
+            Octave Down
+          </Button>
+          <Button
+            onMouseDown={() => {
+              setSfxList([new Tone.BitCrusher(), new Tone.Volume(-10)]);
+            }}
+            onMouseUp={() => {
+              setSfxList([]);
+            }}
+            onMouseLeave={() => {
+              setSfxList([]);
+            }}
+          >
+            Crunch
+          </Button>
+          <Button
+            onMouseDown={() => {
+              setSfxList([new Tone.Phaser(), new Tone.Volume(-6)]);
+            }}
+            onMouseUp={() => {
+              setSfxList([]);
+            }}
+            onMouseLeave={() => {
+              setSfxList([]);
+            }}
+          >
+            Phaser
+          </Button>
+        </div>
         <Toaster />
         <SequencerCommand
           toast={toast}

From 2485ae6381bd4102cd17ea9b30e7450f38ba6ee6 Mon Sep 17 00:00:00 2001
From: Thomas <nyumat18@gmail.com>
Date: Sun, 3 Mar 2024 14:51:32 -0800
Subject: [PATCH 5/8] build patches

---
 src/app/sequencer/page.tsx           | 4 ----
 src/components/sample-manager.tsx    | 6 +++++-
 src/components/sequencer-command.tsx | 4 ++--
 src/components/sequencer.tsx         | 6 ++++--
 4 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/sequencer/page.tsx b/src/app/sequencer/page.tsx
index febbef2..e0a82ed 100644
--- a/src/app/sequencer/page.tsx
+++ b/src/app/sequencer/page.tsx
@@ -10,10 +10,6 @@ export default function Page() {
             { url: "/0/hat.wav", name: "Closed Hat" },
             { url: "/0/kick.wav", name: "808 Kick" },
             { url: "/0/kick2.wav", name: "808 Kick 2" },
-            // { url: "/0/ohat.wav", name: "Open Hat" },
-            // { url: "/0/snare.wav", name: "Snare" },
-            // { url: "/0/tom.wav", name: "Tom" },
-            // { url: "/0/tom2.wav", name: "Tom 2" },
           ]}
         />
       </div>
diff --git a/src/components/sample-manager.tsx b/src/components/sample-manager.tsx
index 35676f0..9a9bd8d 100644
--- a/src/components/sample-manager.tsx
+++ b/src/components/sample-manager.tsx
@@ -102,7 +102,11 @@ function ManageSample({
                           }`}
                           onClick={() => {
                             setSelectedSample(sample);
-                            handleSampleChange(sample.url, id, track);
+                            handleSampleChange(
+                              sample.url.toString(),
+                              id,
+                              track
+                            );
                           }}
                         >
                           {sample.name}
diff --git a/src/components/sequencer-command.tsx b/src/components/sequencer-command.tsx
index 282c567..f4a1765 100644
--- a/src/components/sequencer-command.tsx
+++ b/src/components/sequencer-command.tsx
@@ -1,5 +1,4 @@
 import {
-  Command,
   CommandDialog,
   CommandEmpty,
   CommandGroup,
@@ -11,10 +10,11 @@ import {
 } from "@/components/ui/command";
 import { DeleteIcon, PlayIcon, SaveIcon, ShareIcon } from "lucide-react";
 import React from "react";
+import * as Tone from "tone";
 
 type Props = {
   toast: any;
-  samples: { url: string; name: string | undefined }[];
+  samples: { url: Tone.ToneAudioBuffer; name: string | undefined }[];
   numOfSteps?: number;
   checkedSteps: string[];
   handleSaveClick: () => void;
diff --git a/src/components/sequencer.tsx b/src/components/sequencer.tsx
index 9b59ea7..3e27925 100644
--- a/src/components/sequencer.tsx
+++ b/src/components/sequencer.tsx
@@ -30,7 +30,7 @@ type Track = {
 };
 
 type Props = {
-  samples: { url: Tone.ToneAudioBuffer; name: string | undefined }[];
+  samples: { url: Tone.ToneAudioBuffer | any; name: string | undefined }[];
   numOfSteps?: number;
 };
 
@@ -82,6 +82,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
       /**@ts-ignore */
       setSampleState((prev) => [...prev, ...formatedStoredFiles]);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [storedFiles]);
 
   const onDrop = React.useCallback(async (acceptedFiles: File[]) => {
@@ -124,6 +125,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
       console.error(err);
       setTempTrack(null);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const addTrack = (sample: Sample) => {
@@ -451,7 +453,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
                 {samplesState[trackId] !== undefined && (
                   <ManageSample
                     key={trackId}
-                    url={samplesState[trackId].url ?? ""}
+                    url={samplesState[trackId].url.toString()}
                     name={samplesState[trackId].name ?? ""}
                     id={trackId.toString()}
                     track={[trackId, index + 1]}

From c01437af3b2ae7667fb76cbc0da2ed3bd256765c Mon Sep 17 00:00:00 2001
From: Thomas <nyumat18@gmail.com>
Date: Sun, 3 Mar 2024 14:55:30 -0800
Subject: [PATCH 6/8] build patches

---
 src/types/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/types/index.ts b/src/types/index.ts
index 44b45fe..58d2fa4 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -54,6 +54,6 @@ export interface Sample {
 }
 
 export interface Category {
-  name: string;
+  name: string | any;
   samples: Sample[];
 }

From a8569f3b17cbc6ba28adcdeed5f457f78df21244 Mon Sep 17 00:00:00 2001
From: Thomas <nyumat18@gmail.com>
Date: Sun, 3 Mar 2024 14:57:18 -0800
Subject: [PATCH 7/8] build patches

---
 src/components/sample-manager.tsx | 2 +-
 src/types/index.ts                | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/sample-manager.tsx b/src/components/sample-manager.tsx
index 9a9bd8d..027485d 100644
--- a/src/components/sample-manager.tsx
+++ b/src/components/sample-manager.tsx
@@ -92,7 +92,7 @@ function ManageSample({
                   <Separator />
                   <ScrollArea className="h-52 w-full">
                     <div className="space-y-[0.5px]">
-                      {selectedCategory?.samples.map((sample) => (
+                      {selectedCategory?.samples.map((sample: any) => (
                         <div
                           key={sample.name}
                           className={`m-0 cursor-pointer p-1.5 text-sm hover:bg-neutral-800 ${
diff --git a/src/types/index.ts b/src/types/index.ts
index 58d2fa4..65d3ff6 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -55,5 +55,5 @@ export interface Sample {
 
 export interface Category {
   name: string | any;
-  samples: Sample[];
+  samples: Sample[] | any;
 }

From 2e485d8e6a25c17f449138805632c048d6fdffd0 Mon Sep 17 00:00:00 2001
From: Thomas <nyumat18@gmail.com>
Date: Sun, 3 Mar 2024 16:55:25 -0800
Subject: [PATCH 8/8] DEMO ONLY - NOT FOR JUDGING

---
 src/components/add-track-action.tsx | 41 +++++++++++------------------
 src/components/sequencer.tsx        | 31 ++++++++++++++--------
 src/types/index.ts                  |  3 +--
 3 files changed, 36 insertions(+), 39 deletions(-)

diff --git a/src/components/add-track-action.tsx b/src/components/add-track-action.tsx
index e365611..64c8eb7 100644
--- a/src/components/add-track-action.tsx
+++ b/src/components/add-track-action.tsx
@@ -26,7 +26,6 @@ import React, { useEffect } from "react";
 import { Icons } from "./icons";
 import { Separator } from "./ui/separator";
 import { useToast } from "./ui/use-toast";
-import { FileIcon } from "lucide-react";
 
 export function ActionsTabs({
   getRootProps,
@@ -158,11 +157,10 @@ export function TrackActionsDialog({
   );
 
   useEffect(() => {
-    if (tempTrack?.length !== 0) {
-      setSelectedSample(tempTrack[0]);
+    if (tempTrack) {
+      setSelectedSample(tempTrack);
     }
   }, [tempTrack]);
-
   return (
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
@@ -178,29 +176,20 @@ export function TrackActionsDialog({
             Let&apos;s add a new track to your session.
           </DialogDescription>
         </DialogHeader>
+        <p className="-mb-8 -mt-2 text-xs font-semibold text-neutral-100">
+          Sample
+        </p>
+        <ActionsTabs
+          {...{ getRootProps, getInputProps }}
+          isDragAccept={isDragAccept}
+          isDragReject={isDragReject}
+          addTrack={onSampleSave}
+          setSelectedCategory={setSelectedCategory}
+          setSelectedSample={setSelectedSample}
+          selectedCategory={selectedCategory}
+          selectedSample={selectedSample}
+        />
 
-        {tempTrack?.length === 0 ? (
-          <>
-            <p className="-mb-8 -mt-2 text-xs font-semibold text-neutral-100">
-              Sample
-            </p>
-            <ActionsTabs
-              {...{ getRootProps, getInputProps }}
-              isDragAccept={isDragAccept}
-              isDragReject={isDragReject}
-              addTrack={onSampleSave}
-              setSelectedCategory={setSelectedCategory}
-              setSelectedSample={setSelectedSample}
-              selectedCategory={selectedCategory}
-              selectedSample={selectedSample}
-            />
-          </>
-        ) : (
-          <div className="flex gap-4">
-            <FileIcon />
-            <p>{tempTrack[0]?.name}</p>
-          </div>
-        )}
         <p className="-mb-8 -mt-2 text-xs text-neutral-400">
           This is the sample that will be played when the track is triggered.
         </p>
diff --git a/src/components/sequencer.tsx b/src/components/sequencer.tsx
index 3e27925..06401e1 100644
--- a/src/components/sequencer.tsx
+++ b/src/components/sequencer.tsx
@@ -50,7 +50,11 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
   const [checkedSteps, setCheckedSteps] = React.useState([] as string[]);
   const [currentStep, setCurrentStep] = React.useState(0);
   const [tempTrack, setTempTrack] = React.useState<TempTrack[] | null>([]);
-  const [samplesState, setSampleState] = React.useState(samples);
+  const [samplesState, setSampleState] = React.useState(
+    samples.map((s) => {
+      return { url: new Tone.Buffer(s.url), name: s.name };
+    })
+  );
   const [trackIds, setTrackIds] = React.useState([
     ...Array(samples.length).keys(),
   ]);
@@ -72,18 +76,16 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
   /**@ts-ignore */
   const storedFiles = useQuery(api.files.getFiles, { userId: user?.id });
 
-  // Check this it may lead to issues
   React.useEffect(() => {
     if (storedFiles && tempTrack && tempTrack.length === 0) {
-      const formatedStoredFiles = storedFiles.map((file: any) => ({
+      const formattedStoredFiles = storedFiles.map((file: any) => ({
         name: file.name,
         url: new Tone.Buffer(file.url),
       }));
       /**@ts-ignore */
-      setSampleState((prev) => [...prev, ...formatedStoredFiles]);
+      setSampleState((prev) => [...prev, ...formattedStoredFiles]);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [storedFiles]);
+  }, [storedFiles, tempTrack]);
 
   const onDrop = React.useCallback(async (acceptedFiles: File[]) => {
     const formattedAcceptedFiles = acceptedFiles.map((file) => {
@@ -132,7 +134,9 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
     const url = new Tone.Buffer(sample.url);
     const name = sample.name;
     const track = { url, name };
-    setSampleState((prev) => [...prev, track]);
+    setSampleState((prev) => {
+      return [...prev, track];
+    });
   };
 
   const handleAddTrack = () => {
@@ -270,7 +274,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
         });
       };
     }
-  }, [checkedSteps]);
+  }, [checkedSteps, samplesState, seqRef, tracksRef, lampsRef]);
 
   const handleBpmChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     Tone.Transport.bpm.value = Number(e.target.value);
@@ -296,7 +300,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
         step.checked = false;
       });
     });
-  }, [setCheckedSteps, stepsRef]);
+  }, []);
 
   React.useEffect(() => {
     tracksRef.current = samplesState.map((sample, i) => {
@@ -332,7 +336,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
       tracksRef.current.map((trk) => void trk.sampler.dispose());
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [samplesState, numOfSteps]);
+  }, [samplesState]);
 
   React.useEffect(() => {
     tracksRef.current.forEach((track) => {
@@ -363,7 +367,7 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
       (file: any) => file.name === samplesState[index].name
     );
     if (file) deleteTrack({ name: samplesState[index].name ?? "" });
-    setSampleState((prev) => {
+    setTrackIds((prev) => {
       const modifiedArr = [...prev];
       modifiedArr.splice(index, 1);
       return [...modifiedArr];
@@ -374,6 +378,11 @@ export function Sequencer({ samples, numOfSteps = 16 }: Props) {
         return !parsedStringArr.includes(index.toString());
       });
     });
+    setSampleState((prev) => {
+      const modifiedArr = [...prev];
+      modifiedArr.splice(index, 1);
+      return [...modifiedArr];
+    });
   };
 
   const handleReorder = (newItems: number[]) => {
diff --git a/src/types/index.ts b/src/types/index.ts
index 65d3ff6..5cad128 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,5 +1,4 @@
 import { Icons } from "@/components/icons";
-import * as Tone from "tone";
 
 export type SidebarNavItem = {
   title: string;
@@ -49,7 +48,7 @@ export type DashboardConfig = {
 };
 
 export interface Sample {
-  url: Tone.ToneAudioBuffer;
+  url: string;
   name: string;
 }