From 6ea823c37d9ecb99d3c6e61a76ce47a2f13ee235 Mon Sep 17 00:00:00 2001
From: Sompalkar <palkarsom1@gmail.com>
Date: Mon, 23 Jun 2025 21:48:35 +0530
Subject: [PATCH] feat: Added playback to video  | Mute/Unmute for each Clip

---
 apps/web/migrations/0001_tricky_jackpot.sql   |   8 +
 apps/web/migrations/meta/0001_snapshot.json   | 358 +++++++
 apps/web/migrations/meta/_journal.json        |   7 +
 apps/web/netlify.toml                         |   6 +
 apps/web/package-lock.json                    | 897 ++++++++++++------
 .../src/components/editor/preview-panel.tsx   | 521 ++++++----
 .../components/editor/properties-panel.tsx    |  21 +
 .../src/components/editor/speed-control.tsx   |  46 +
 apps/web/src/components/editor/timeline.tsx   | 299 ++++--
 apps/web/src/components/ui/command.tsx        |   2 +-
 apps/web/src/components/ui/video-player.tsx   | 295 +++---
 apps/web/src/stores/playback-store.ts         |  61 +-
 apps/web/src/stores/timeline-store.ts         |  31 +
 apps/web/src/types/playback.ts                |   2 +
 14 files changed, 1893 insertions(+), 661 deletions(-)
 create mode 100644 apps/web/migrations/0001_tricky_jackpot.sql
 create mode 100644 apps/web/migrations/meta/0001_snapshot.json
 create mode 100644 apps/web/src/components/editor/speed-control.tsx

diff --git a/apps/web/migrations/0001_tricky_jackpot.sql b/apps/web/migrations/0001_tricky_jackpot.sql
new file mode 100644
index 000000000..6eaeb56ed
--- /dev/null
+++ b/apps/web/migrations/0001_tricky_jackpot.sql
@@ -0,0 +1,8 @@
+CREATE TABLE "waitlist" (
+	"id" text PRIMARY KEY NOT NULL,
+	"email" text NOT NULL,
+	"created_at" timestamp NOT NULL,
+	CONSTRAINT "waitlist_email_unique" UNIQUE("email")
+);
+--> statement-breakpoint
+ALTER TABLE "waitlist" ENABLE ROW LEVEL SECURITY;
\ No newline at end of file
diff --git a/apps/web/migrations/meta/0001_snapshot.json b/apps/web/migrations/meta/0001_snapshot.json
new file mode 100644
index 000000000..78c3cffbf
--- /dev/null
+++ b/apps/web/migrations/meta/0001_snapshot.json
@@ -0,0 +1,358 @@
+{
+  "id": "b7d920ca-6dd0-430f-8ee6-1d38fdf3e80f",
+  "prevId": "4440fb90-cf0e-4cb2-afad-08250ce3dc1e",
+  "version": "7",
+  "dialect": "postgresql",
+  "tables": {
+    "public.accounts": {
+      "name": "accounts",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "account_id": {
+          "name": "account_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "provider_id": {
+          "name": "provider_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "access_token": {
+          "name": "access_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token": {
+          "name": "refresh_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "id_token": {
+          "name": "id_token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "access_token_expires_at": {
+          "name": "access_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "refresh_token_expires_at": {
+          "name": "refresh_token_expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "scope": {
+          "name": "scope",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "password": {
+          "name": "password",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "accounts_user_id_users_id_fk": {
+          "name": "accounts_user_id_users_id_fk",
+          "tableFrom": "accounts",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": true
+    },
+    "public.sessions": {
+      "name": "sessions",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "token": {
+          "name": "token",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "ip_address": {
+          "name": "ip_address",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_agent": {
+          "name": "user_agent",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "user_id": {
+          "name": "user_id",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {
+        "sessions_user_id_users_id_fk": {
+          "name": "sessions_user_id_users_id_fk",
+          "tableFrom": "sessions",
+          "tableTo": "users",
+          "columnsFrom": [
+            "user_id"
+          ],
+          "columnsTo": [
+            "id"
+          ],
+          "onDelete": "cascade",
+          "onUpdate": "no action"
+        }
+      },
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "sessions_token_unique": {
+          "name": "sessions_token_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "token"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": true
+    },
+    "public.users": {
+      "name": "users",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "name": {
+          "name": "name",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "email_verified": {
+          "name": "email_verified",
+          "type": "boolean",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "image": {
+          "name": "image",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "users_email_unique": {
+          "name": "users_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": true
+    },
+    "public.verifications": {
+      "name": "verifications",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "identifier": {
+          "name": "identifier",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "value": {
+          "name": "value",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "expires_at": {
+          "name": "expires_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        },
+        "updated_at": {
+          "name": "updated_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": false
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {},
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": true
+    },
+    "public.waitlist": {
+      "name": "waitlist",
+      "schema": "",
+      "columns": {
+        "id": {
+          "name": "id",
+          "type": "text",
+          "primaryKey": true,
+          "notNull": true
+        },
+        "email": {
+          "name": "email",
+          "type": "text",
+          "primaryKey": false,
+          "notNull": true
+        },
+        "created_at": {
+          "name": "created_at",
+          "type": "timestamp",
+          "primaryKey": false,
+          "notNull": true
+        }
+      },
+      "indexes": {},
+      "foreignKeys": {},
+      "compositePrimaryKeys": {},
+      "uniqueConstraints": {
+        "waitlist_email_unique": {
+          "name": "waitlist_email_unique",
+          "nullsNotDistinct": false,
+          "columns": [
+            "email"
+          ]
+        }
+      },
+      "policies": {},
+      "checkConstraints": {},
+      "isRLSEnabled": true
+    }
+  },
+  "enums": {},
+  "schemas": {},
+  "sequences": {},
+  "roles": {},
+  "policies": {},
+  "views": {},
+  "_meta": {
+    "columns": {},
+    "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 3f918785d..9cbceb13c 100644
--- a/apps/web/migrations/meta/_journal.json
+++ b/apps/web/migrations/meta/_journal.json
@@ -8,6 +8,13 @@
       "when": 1750581188229,
       "tag": "0000_hot_the_fallen",
       "breakpoints": true
+    },
+    {
+      "idx": 1,
+      "version": "7",
+      "when": 1750689835736,
+      "tag": "0001_tricky_jackpot",
+      "breakpoints": true
     }
   ]
 }
\ No newline at end of file
diff --git a/apps/web/netlify.toml b/apps/web/netlify.toml
index 5aadb562b..4cf548436 100644
--- a/apps/web/netlify.toml
+++ b/apps/web/netlify.toml
@@ -4,3 +4,9 @@
 
 [[plugins]]
   package = "@netlify/plugin-nextjs"
+
+[[redirects]]
+  from = "https://appcut.app/*"
+  to = "https://opencut.app/:splat"
+  status = 301
+  force = true
diff --git a/apps/web/package-lock.json b/apps/web/package-lock.json
index 635be642e..7718a9712 100644
--- a/apps/web/package-lock.json
+++ b/apps/web/package-lock.json
@@ -8,34 +8,11 @@
       "name": "next-template",
       "version": "0.1.0",
       "dependencies": {
+        "@ffmpeg/core": "^0.12.10",
+        "@ffmpeg/ffmpeg": "^0.12.15",
+        "@ffmpeg/util": "^0.12.2",
+        "@hello-pangea/dnd": "^18.0.1",
         "@hookform/resolvers": "^3.9.1",
-        "@radix-ui/react-accordion": "^1.2.1",
-        "@radix-ui/react-alert-dialog": "^1.1.2",
-        "@radix-ui/react-aspect-ratio": "^1.1.0",
-        "@radix-ui/react-avatar": "^1.1.1",
-        "@radix-ui/react-checkbox": "^1.1.2",
-        "@radix-ui/react-collapsible": "^1.1.1",
-        "@radix-ui/react-context-menu": "^2.2.2",
-        "@radix-ui/react-dialog": "^1.1.6",
-        "@radix-ui/react-dropdown-menu": "^2.1.2",
-        "@radix-ui/react-hover-card": "^1.1.2",
-        "@radix-ui/react-label": "^2.1.0",
-        "@radix-ui/react-menubar": "^1.1.2",
-        "@radix-ui/react-navigation-menu": "^1.2.1",
-        "@radix-ui/react-popover": "^1.1.2",
-        "@radix-ui/react-progress": "^1.1.0",
-        "@radix-ui/react-radio-group": "^1.2.1",
-        "@radix-ui/react-scroll-area": "^1.2.1",
-        "@radix-ui/react-select": "^2.1.2",
-        "@radix-ui/react-separator": "^1.1.0",
-        "@radix-ui/react-slider": "^1.2.1",
-        "@radix-ui/react-slot": "^1.1.0",
-        "@radix-ui/react-switch": "^1.1.1",
-        "@radix-ui/react-tabs": "^1.1.1",
-        "@radix-ui/react-toast": "^1.2.2",
-        "@radix-ui/react-toggle": "^1.1.0",
-        "@radix-ui/react-toggle-group": "^1.1.0",
-        "@radix-ui/react-tooltip": "^1.1.5",
         "@types/pg": "^8.15.4",
         "@upstash/ratelimit": "^2.0.5",
         "@upstash/redis": "^1.35.0",
@@ -44,7 +21,7 @@
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "cmdk": "^1.0.0",
-        "date-fns": "^3.6.0",
+        "dayjs": "^1.11.13",
         "dotenv": "^16.5.0",
         "drizzle-orm": "^0.44.2",
         "embla-carousel-react": "^8.5.1",
@@ -55,6 +32,7 @@
         "next": "^15.2.0",
         "next-themes": "^0.4.4",
         "pg": "^8.16.2",
+        "radix-ui": "^1.4.2",
         "react": "^18.2.0",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.2.0",
@@ -999,6 +977,45 @@
         "node": ">=18"
       }
     },
+    "node_modules/@ffmpeg/core": {
+      "version": "0.12.10",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/core/-/core-0.12.10.tgz",
+      "integrity": "sha512-dzNplnn2Nxle2c2i2rrDhqcB19q9cglCkWnoMTDN9Q9l3PvdjZWd1HfSPjCNWc/p8Q3CT+Es9fWOR0UhAeYQZA==",
+      "license": "GPL-2.0-or-later",
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/@ffmpeg/ffmpeg": {
+      "version": "0.12.15",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/ffmpeg/-/ffmpeg-0.12.15.tgz",
+      "integrity": "sha512-1C8Obr4GsN3xw+/1Ww6PFM84wSQAGsdoTuTWPOj2OizsRDLT4CXTaVjPhkw6ARyDus1B9X/L2LiXHqYYsGnRFw==",
+      "license": "MIT",
+      "dependencies": {
+        "@ffmpeg/types": "^0.12.4"
+      },
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
+    "node_modules/@ffmpeg/types": {
+      "version": "0.12.4",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/types/-/types-0.12.4.tgz",
+      "integrity": "sha512-k9vJQNBGTxE5AhYDtOYR5rO5fKsspbg51gbcwtbkw2lCdoIILzklulcjJfIDwrtn7XhDeF2M+THwJ2FGrLeV6A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=16.x"
+      }
+    },
+    "node_modules/@ffmpeg/util": {
+      "version": "0.12.2",
+      "resolved": "https://registry.npmjs.org/@ffmpeg/util/-/util-0.12.2.tgz",
+      "integrity": "sha512-ouyoW+4JB7WxjeZ2y6KpRvB+dLp7Cp4ro8z0HIVpZVCM7AwFlHa0c4R8Y/a4M3wMqATpYKhC7lSFHQ0T11MEDw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.x"
+      }
+    },
     "node_modules/@floating-ui/core": {
       "version": "1.6.9",
       "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
@@ -1037,6 +1054,23 @@
       "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==",
       "license": "MIT"
     },
+    "node_modules/@hello-pangea/dnd": {
+      "version": "18.0.1",
+      "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
+      "integrity": "sha512-xojVWG8s/TGrKT1fC8K2tIWeejJYTAeJuj36zM//yEm/ZrnZUSFGS15BpO+jGZT1ybWvyXmeDJwPYb4dhWlbZQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/runtime": "^7.26.7",
+        "css-box-model": "^1.2.1",
+        "raf-schd": "^4.0.3",
+        "react-redux": "^9.2.0",
+        "redux": "^5.0.1"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@hexagon/base64": {
       "version": "1.1.28",
       "resolved": "https://registry.npmjs.org/@hexagon/base64/-/base64-1.1.28.tgz",
@@ -1770,21 +1804,44 @@
       "integrity": "sha512-XnbHrrprsNqZKQhStrSwgRUQzoCI1glLzdw79xiZPoofhGICeZRSQ3dIxAKH1gb3OHfNf4d6f+vAv3kil2eggA==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-accessible-icon": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accessible-icon/-/react-accessible-icon-1.1.7.tgz",
+      "integrity": "sha512-XM+E4WXl0OqUJFovy6GjmxxFyx9opfCAIUku4dlKRd5YEPqt4kALOkQOp0Of6reHuUkJuiPBEc5k0o4z4lTC8A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-accordion": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.4.tgz",
-      "integrity": "sha512-SGCxlSBaMvEzDROzyZjsVNzu9XY5E28B3k8jOENyrz6csOv/pG1eHyYfLJai1n9tRjwG61coXDhfpgtxKxUv5g==",
+      "version": "1.2.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-accordion/-/react-accordion-1.2.11.tgz",
+      "integrity": "sha512-l3W5D54emV2ues7jjeG1xcyN7S3jnK3zE2zHqgn0CmMsy9lNJwmgcrmaxS+7ipw15FAivzKNzH3d5EcGoFKw0A==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collapsible": "1.1.4",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collapsible": "1.1.11",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1802,17 +1859,17 @@
       }
     },
     "node_modules/@radix-ui/react-alert-dialog": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.7.tgz",
-      "integrity": "sha512-7Gx1gcoltd0VxKoR8mc+TAVbzvChJyZryZsTam0UhoL92z0L+W8ovxvcgvd+nkz24y7Qc51JQKBAGe4+825tYw==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.14.tgz",
+      "integrity": "sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dialog": "1.1.7",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-slot": "1.2.0"
+        "@radix-ui/react-dialog": "1.1.14",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1830,12 +1887,12 @@
       }
     },
     "node_modules/@radix-ui/react-arrow": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.3.tgz",
-      "integrity": "sha512-2dvVU4jva0qkNZH6HHWuSz5FN5GeU5tymvCgutF8WaXz9WnD1NgUhy73cqzkjkN4Zkn8lfTPv5JIfrC221W+Nw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.3"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1853,12 +1910,12 @@
       }
     },
     "node_modules/@radix-ui/react-aspect-ratio": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.3.tgz",
-      "integrity": "sha512-yIrYZUc2e/JtRkDpuJCmaR6kj/jzekDfQLcPFdEWzSOygCPy8poR4YcszaHP5A7mh25ncofHEpeTwfhxEuBv8Q==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.7.tgz",
+      "integrity": "sha512-Yq6lvO9HQyPwev1onK1daHCHqXVLzPhSVjmsNjCa2Zcxy2f7uJD2itDtxknv6FzAKCwD1qQkeVDmX/cev13n/g==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.3"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1876,14 +1933,15 @@
       }
     },
     "node_modules/@radix-ui/react-avatar": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.4.tgz",
-      "integrity": "sha512-+kBesLBzwqyDiYCtYFK+6Ktf+N7+Y6QOTUueLGLIbLZ/YeyFW6bsBGDsN+5HxHpM55C90u5fxsg0ErxzXTcwKA==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
+      "integrity": "sha512-V8piFfWapM5OmNCXTzVQY+E1rDa53zY+MQ4Y7356v4fFz6vqCyUtIz2rUD44ZEdwg78/jKmMJHj07+C/Z/rcog==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
         "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
@@ -1902,17 +1960,17 @@
       }
     },
     "node_modules/@radix-ui/react-checkbox": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.1.5.tgz",
-      "integrity": "sha512-B0gYIVxl77KYDR25AY9EGe/G//ef85RVBIxQvK+m5pxAC7XihAc/8leMHhDvjvhDu02SBSb6BuytlWr/G7F3+g==",
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-checkbox/-/react-checkbox-1.3.2.tgz",
+      "integrity": "sha512-yd+dI56KZqawxKZrJ31eENUwqc1QSqg4OZ15rybGjF2ZNwMO+wCyHzAVLRp9qoYJf7kYy0YpZ2b0JCzJ42HZpA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-previous": "1.1.1",
         "@radix-ui/react-use-size": "1.1.1"
       },
@@ -1932,18 +1990,18 @@
       }
     },
     "node_modules/@radix-ui/react-collapsible": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.4.tgz",
-      "integrity": "sha512-u7LCw1EYInQtBNLGjm9nZ89S/4GcvX1UR5XbekEgnQae2Hkpq39ycJ1OhdeN1/JDfVNG91kWaWoest127TaEKQ==",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collapsible/-/react-collapsible-1.1.11.tgz",
+      "integrity": "sha512-2qrRsVGSCYasSz1RFOorXwl0H7g7J1frQtgpQgYrt+MOidtPAINHn9CPovQXb83r8ahapdx3Tu0fa/pdFFSdPg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
@@ -1962,15 +2020,15 @@
       }
     },
     "node_modules/@radix-ui/react-collection": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.3.tgz",
-      "integrity": "sha512-mM2pxoQw5HJ49rkzwOs7Y6J4oYH22wS8BfK2/bBxROlI4xuR0c4jEenQP63LlTlDkO6Buj2Vt+QYAYcOgqtrXA==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.7.tgz",
+      "integrity": "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-slot": "1.2.0"
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2018,17 +2076,17 @@
       }
     },
     "node_modules/@radix-ui/react-context-menu": {
-      "version": "2.2.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.7.tgz",
-      "integrity": "sha512-EwO3tyyqwGaLPg0P64jmIKJnBywD0yjiL1eRuMPyhUXPkWWpa5JPDS+oyeIWHy2JbhF+NUlfUPVq6vE7OqgZww==",
+      "version": "2.2.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context-menu/-/react-context-menu-2.2.15.tgz",
+      "integrity": "sha512-UsQUMjcYTsBjTSXw0P3GO0werEQvUY2plgRQuKoCTtkNr45q1DiL51j4m7gxhABzZ0BadoXNsIbg7F3KwiUBbw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-menu": "2.1.7",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2046,23 +2104,23 @@
       }
     },
     "node_modules/@radix-ui/react-dialog": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.7.tgz",
-      "integrity": "sha512-EIdma8C0C/I6kL6sO02avaCRqi3fmWJpxH6mqbVScorW6nNktzKJT/le7VPho3o/7wCsyRg3z0+Q+Obr0Gy/VQ==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.14.tgz",
+      "integrity": "sha512-+CpweKjqpzTmwRwcYECQcNYbI8V9VSQt0SNFKeEBLgfucbsLssU6Ppq7wUdNXEGb573bMjFhVjKVll8rmV6zMw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
         "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-portal": "1.1.5",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "aria-hidden": "^1.2.4",
         "react-remove-scroll": "^2.6.3"
       },
@@ -2097,14 +2155,14 @@
       }
     },
     "node_modules/@radix-ui/react-dismissable-layer": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.6.tgz",
-      "integrity": "sha512-7gpgMT2gyKym9Jz2ZhlRXSg2y6cNQIK8d/cqBZ0RBCaps8pFryCWXiUKI+uHGFrhMrbGUP7U6PWgiXzIxoyF3Q==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.10.tgz",
+      "integrity": "sha512-IM1zzRV4W3HtVgftdQiiOmA0AdJlCtMLe00FXaHwgt3rAnNsIyDqshvkIW3hj/iu5hu8ERP7KIYki6NkqDxAwQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
         "@radix-ui/react-use-escape-keydown": "1.1.1"
       },
@@ -2124,18 +2182,18 @@
       }
     },
     "node_modules/@radix-ui/react-dropdown-menu": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.7.tgz",
-      "integrity": "sha512-7/1LiuNZuCQE3IzdicGoHdQOHkS2Q08+7p8w6TXZ6ZjgAULaCI85ZY15yPl4o4FVgoKLRT43/rsfNVN8osClQQ==",
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
+      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-menu": "2.1.7",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2168,13 +2226,13 @@
       }
     },
     "node_modules/@radix-ui/react-focus-scope": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.3.tgz",
-      "integrity": "sha512-4XaDlq0bPt7oJwR+0k0clCiCO/7lO7NKZTAaJBYxDNQT/vj4ig0/UvctrRscZaFREpRvUTkpKR96ov1e6jptQg==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.7.tgz",
+      "integrity": "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1"
       },
       "peerDependencies": {
@@ -2192,21 +2250,49 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-form": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-form/-/react-form-0.1.7.tgz",
+      "integrity": "sha512-IXLKFnaYvFg/KkeV5QfOX7tRnwHXp127koOFUjLWMTrRv5Rny3DQcAtIFFeA/Cli4HHM8DuJCXAUsgnFVJndlw==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-hover-card": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.7.tgz",
-      "integrity": "sha512-HwM03kP8psrv21J1+9T/hhxi0f5rARVbqIZl9+IAq13l4j4fX+oGIuxisukZZmebO7J35w9gpoILvtG8bbph0w==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-hover-card/-/react-hover-card-1.1.14.tgz",
+      "integrity": "sha512-CPYZ24Mhirm+g6D8jArmLzjYu4Eyg3TTUHswR26QgzXBHBe64BO/RHOJKzmF/Dxb4y4f9PKyJdwm/O/AhNkb+Q==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
-        "@radix-ui/react-popper": "1.2.3",
-        "@radix-ui/react-portal": "1.1.5",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2242,12 +2328,12 @@
       }
     },
     "node_modules/@radix-ui/react-label": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.3.tgz",
-      "integrity": "sha512-zwSQ1NzSKG95yA0tvBMgv6XPHoqapJCcg9nsUBaQQ66iRBhZNhlpaQG2ERYYX4O4stkYFK5rxj5NsWfO9CS+Hg==",
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-label/-/react-label-2.1.7.tgz",
+      "integrity": "sha512-YT1GqPSL8kJn20djelMX7/cTRp/Y9w5IZHvfxQTVHrOqa2yMl7i/UfMqKRU5V7mEyKTrUVgJXhNQPVCG8PBLoQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.3"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2265,26 +2351,26 @@
       }
     },
     "node_modules/@radix-ui/react-menu": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.7.tgz",
-      "integrity": "sha512-tBODsrk68rOi1/iQzbM54toFF+gSw/y+eQgttFflqlGekuSebNqvFNHjJgjqPhiMb4Fw9A0zNFly1QT6ZFdQ+Q==",
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
+      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
         "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.3",
-        "@radix-ui/react-portal": "1.1.5",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-roving-focus": "1.1.3",
-        "@radix-ui/react-slot": "1.2.0",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-slot": "1.2.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
         "aria-hidden": "^1.2.4",
         "react-remove-scroll": "^2.6.3"
@@ -2305,21 +2391,21 @@
       }
     },
     "node_modules/@radix-ui/react-menubar": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.7.tgz",
-      "integrity": "sha512-YB2zFhGdZ5SWEgRS+PgrF7EkwpsjEHntIFB/LRbT49LJdnIeK/xQQyuwLiRcOCgTDN+ALlPXQ08f0P0+TfR41g==",
+      "version": "1.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.15.tgz",
+      "integrity": "sha512-Z71C7LGD+YDYo3TV81paUs8f3Zbmkvg6VLRQpKYfzioOE6n7fOhA3ApK/V/2Odolxjoc4ENk8AYCjohCNayd5A==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-menu": "2.1.7",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-roving-focus": "1.1.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2337,25 +2423,89 @@
       }
     },
     "node_modules/@radix-ui/react-navigation-menu": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.6.tgz",
-      "integrity": "sha512-HJqyzqG74Lj7KV58rk73i/B1nnopVyCfUmKgeGWWrZZiCuMNcY0KKugTrmqMbIeMliUnkBUDKCy9J6Mzl6xeWw==",
+      "version": "1.2.13",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.13.tgz",
+      "integrity": "sha512-WG8wWfDiJlSF5hELjwfjSGOXcBR/ZMhBFCGYe8vERpC39CQYZeq1PQ2kaYHdye3V95d06H89KGMsVCIE4LWo3g==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-layout-effect": "1.1.1",
         "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.1.3"
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-one-time-password-field": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-one-time-password-field/-/react-one-time-password-field-0.1.7.tgz",
+      "integrity": "sha512-w1vm7AGI8tNXVovOK7TYQHrAGpRF7qQL+ENpT1a743De5Zmay2RbWGKAiYDKIyIuqptns+znCKwNztE2xl1n0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/number": "1.1.1",
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-password-toggle-field": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-password-toggle-field/-/react-password-toggle-field-0.1.2.tgz",
+      "integrity": "sha512-F90uYnlBsLPU1UbSLciLsWQmk8+hdWa6SFw4GXaIdNWxFxI5ITKVdAG64f+Twaa9ic6xE7pqxPyUmodrGjT4pQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-is-hydrated": "0.1.0"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2373,24 +2523,24 @@
       }
     },
     "node_modules/@radix-ui/react-popover": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.7.tgz",
-      "integrity": "sha512-I38OYWDmJF2kbO74LX8UsFydSHWOJuQ7LxPnTefjxxvdvPLempvAnmsyX9UsBlywcbSGpRH7oMLfkUf+ij4nrw==",
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
+      "integrity": "sha512-ODz16+1iIbGUfFEfKx2HTPKizg2MN39uIOV8MXeHnmdd3i/N9Wt7vU46wbHsqA0xoaQyXVcs0KIlBdOA2Y95bw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
         "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.3",
-        "@radix-ui/react-portal": "1.1.5",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "aria-hidden": "^1.2.4",
         "react-remove-scroll": "^2.6.3"
       },
@@ -2410,16 +2560,16 @@
       }
     },
     "node_modules/@radix-ui/react-popper": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.3.tgz",
-      "integrity": "sha512-iNb9LYUMkne9zIahukgQmHlSBp9XWGeQQ7FvUGNk45ywzOb6kQa+Ca38OphXlWDiKvyneo9S+KSJsLfLt8812A==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.7.tgz",
+      "integrity": "sha512-IUFAccz1JyKcf/RjB552PlWwxjeCJB8/4KxT7EhBHOJM+mN7LdW+B3kacJXILm32xawcMMjb2i0cIZpo+f9kiQ==",
       "license": "MIT",
       "dependencies": {
         "@floating-ui/react-dom": "^2.0.0",
-        "@radix-ui/react-arrow": "1.1.3",
+        "@radix-ui/react-arrow": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
         "@radix-ui/react-use-layout-effect": "1.1.1",
         "@radix-ui/react-use-rect": "1.1.1",
@@ -2442,12 +2592,12 @@
       }
     },
     "node_modules/@radix-ui/react-portal": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.5.tgz",
-      "integrity": "sha512-ps/67ZqsFm+Mb6lSPJpfhRLrVL2i2fntgCmGMqqth4eaGUf+knAuuRtWVJrNjUhExgmdRqftSgzpf0DF0n6yXA==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
+      "integrity": "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
@@ -2466,9 +2616,9 @@
       }
     },
     "node_modules/@radix-ui/react-presence": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.3.tgz",
-      "integrity": "sha512-IrVLIhskYhH3nLvtcBLQFZr61tBG7wx7O3kEmdzcYwRGAEBmBicGGL7ATzNgruYJ3xBTbuzEEq9OXJM3PAX3tA==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.4.tgz",
+      "integrity": "sha512-ueDqRbdc4/bkaQT3GIpLQssRlFgWaL/U2z/S31qRwwLWoxHLgry3SIfCwhxeQNbirEUXFa+lq3RL3oBYXtcmIA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2",
@@ -2490,12 +2640,12 @@
       }
     },
     "node_modules/@radix-ui/react-primitive": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.3.tgz",
-      "integrity": "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.1.3.tgz",
+      "integrity": "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-slot": "1.2.0"
+        "@radix-ui/react-slot": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2513,13 +2663,13 @@
       }
     },
     "node_modules/@radix-ui/react-progress": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.3.tgz",
-      "integrity": "sha512-F56aZPGTPb4qJQ/vDjnAq63oTu/DRoIG/Asb5XKOWj8rpefNLtUllR969j5QDN2sRrTk9VXIqQDRj5VvAuquaw==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-progress/-/react-progress-1.1.7.tgz",
+      "integrity": "sha512-vPdg/tF6YC/ynuBIJlk1mm7Le0VgW6ub6J2UWnTQ7/D23KXcPI1qy+0vBkgKgd38RCMJavBXpB83HPNFMTb0Fg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2537,19 +2687,19 @@
       }
     },
     "node_modules/@radix-ui/react-radio-group": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.2.4.tgz",
-      "integrity": "sha512-oLz7ATfKgVTUbpr5OBu6Q7hQcnV22uPT306bmG0QwgnKqBStR98RfWfJGCfW/MmhL4ISmrmmBPBW+c77SDwV9g==",
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-radio-group/-/react-radio-group-1.3.7.tgz",
+      "integrity": "sha512-9w5XhD0KPOrm92OTTE0SysH3sYzHsSTHNvZgUBo/VZ80VdYyB5RneDbc0dKpURS24IxkoFRu/hI0i4XyfFwY6g==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-roving-focus": "1.1.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-previous": "1.1.1",
         "@radix-ui/react-use-size": "1.1.1"
       },
@@ -2569,20 +2719,20 @@
       }
     },
     "node_modules/@radix-ui/react-roving-focus": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.3.tgz",
-      "integrity": "sha512-ufbpLUjZiOg4iYgb2hQrWXEPYX6jOLBbR27bDyAff5GYMRrCzcze8lukjuXVUQvJ6HZe8+oL+hhswDcjmcgVyg==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.10.tgz",
+      "integrity": "sha512-dT9aOXUen9JSsxnMPv/0VqySQf5eDQ6LCk5Sw28kamz8wSOW2bJdlX2Bg5VUIIcV+6XlHpWTIuTPCf/UNIyq8Q==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2600,9 +2750,9 @@
       }
     },
     "node_modules/@radix-ui/react-scroll-area": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.4.tgz",
-      "integrity": "sha512-G9rdWTQjOR4sk76HwSdROhPU0jZWpfozn9skU1v4N0/g9k7TmswrJn8W8WMU+aYktnLLpk5LX6fofj2bGe5NFQ==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.2.9.tgz",
+      "integrity": "sha512-YSjEfBXnhUELsO2VzjdtYYD4CfQjvao+lhhrX5XsHD7/cyUNzljF1FHEbgTPN7LH2MClfwRMIsYlqTYpKTTe2A==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/number": "1.1.1",
@@ -2610,8 +2760,8 @@
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
         "@radix-ui/react-use-layout-effect": "1.1.1"
       },
@@ -2631,30 +2781,30 @@
       }
     },
     "node_modules/@radix-ui/react-select": {
-      "version": "2.1.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.7.tgz",
-      "integrity": "sha512-exzGIRtc7S8EIM2KjFg+7lJZsH7O7tpaBaJbBNVDnOZNhtoQ2iV+iSNfi2Wth0m6h3trJkMVvzAehB3c6xj/3Q==",
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.2.5.tgz",
+      "integrity": "sha512-HnMTdXEVuuyzx63ME0ut4+sEMYW6oouHWNGUZc7ddvUWIcfCva/AMoqEW/3wnEllriMWBa0RHspCYnfCWJQYmA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/number": "1.1.1",
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
         "@radix-ui/react-focus-guards": "1.1.2",
-        "@radix-ui/react-focus-scope": "1.1.3",
+        "@radix-ui/react-focus-scope": "1.1.7",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.3",
-        "@radix-ui/react-portal": "1.1.5",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-slot": "1.2.0",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-layout-effect": "1.1.1",
         "@radix-ui/react-use-previous": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.1.3",
+        "@radix-ui/react-visually-hidden": "1.2.3",
         "aria-hidden": "^1.2.4",
         "react-remove-scroll": "^2.6.3"
       },
@@ -2674,12 +2824,12 @@
       }
     },
     "node_modules/@radix-ui/react-separator": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.3.tgz",
-      "integrity": "sha512-2omrWKJvxR0U/tkIXezcc1nFMwtLU0+b/rDK40gnzJqTLWQ/TD/D5IYVefp9sC3QWfeQbpSbEA6op9MQKyaALQ==",
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.7.tgz",
+      "integrity": "sha512-0HEb8R9E8A+jZjvmFCy/J4xhbXy3TV+9XSnGJ3KvTtjlIUy/YQ/p6UYZvi7YbeoeXdyU9+Y3scizK6hkY37baA==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.3"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2697,19 +2847,19 @@
       }
     },
     "node_modules/@radix-ui/react-slider": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.2.4.tgz",
-      "integrity": "sha512-Vr/OgNejNJPAghIhjS7Mf/2F/EXGDT0qgtiHf2BHz71+KqgN+jndFLKq5xAB9JOGejGzejfJLIvT04Do+yzhcg==",
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slider/-/react-slider-1.3.5.tgz",
+      "integrity": "sha512-rkfe2pU2NBAYfGaxa3Mqosi7VZEWX5CxKaanRv0vZd4Zhl9fvQrg0VM93dv3xGLGfrHuoTRF3JXH8nb9g+B3fw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/number": "1.1.1",
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-layout-effect": "1.1.1",
         "@radix-ui/react-use-previous": "1.1.1",
         "@radix-ui/react-use-size": "1.1.1"
@@ -2730,9 +2880,9 @@
       }
     },
     "node_modules/@radix-ui/react-slot": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz",
-      "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.3.tgz",
+      "integrity": "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-compose-refs": "1.1.2"
@@ -2748,16 +2898,16 @@
       }
     },
     "node_modules/@radix-ui/react-switch": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.1.4.tgz",
-      "integrity": "sha512-zGP6W8plLeogoeGMiTHJ/uvf+TE1C2chVsEwfP8YlvpQKJHktG+iCkUtCLGPAuDV8/qDSmIRPm4NggaTxFMVBQ==",
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-switch/-/react-switch-1.2.5.tgz",
+      "integrity": "sha512-5ijLkak6ZMylXsaImpZ8u4Rlf5grRmoc0p0QeX9VJtlrM4f5m3nCTX8tWga/zOA8PZYIR/t0p2Mnvd7InrJ6yQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-previous": "1.1.1",
         "@radix-ui/react-use-size": "1.1.1"
       },
@@ -2777,19 +2927,19 @@
       }
     },
     "node_modules/@radix-ui/react-tabs": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.4.tgz",
-      "integrity": "sha512-fuHMHWSf5SRhXke+DbHXj2wVMo+ghVH30vhX3XVacdXqDl+J4XWafMIGOOER861QpBx1jxgwKXL2dQnfrsd8MQ==",
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tabs/-/react-tabs-1.1.12.tgz",
+      "integrity": "sha512-GTVAlRVrQrSw3cEARM0nAx73ixrWDPNZAruETn3oHCNP6SbZ/hNxdxp+u7VkIEv3/sFoLq1PfcHrl7Pnp0CDpw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-roving-focus": "1.1.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2807,23 +2957,23 @@
       }
     },
     "node_modules/@radix-ui/react-toast": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.7.tgz",
-      "integrity": "sha512-0IWTbAUKvzdpOaWDMZisXZvScXzF0phaQjWspK8RUMEUxjLbli+886mB/kXTIC3F+t5vQ0n0vYn+dsX8s+WdfA==",
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.14.tgz",
+      "integrity": "sha512-nAP5FBxBJGQ/YfUB+r+O6USFVkWq3gAInkxyEnmvEV5jtSbfDhfa4hwX8CraCnbjMLsE7XSf/K75l9xXY7joWg==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-collection": "1.1.3",
+        "@radix-ui/react-collection": "1.1.7",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
-        "@radix-ui/react-portal": "1.1.5",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
         "@radix-ui/react-use-callback-ref": "1.1.1",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
         "@radix-ui/react-use-layout-effect": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.1.3"
+        "@radix-ui/react-visually-hidden": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2841,14 +2991,14 @@
       }
     },
     "node_modules/@radix-ui/react-toggle": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.3.tgz",
-      "integrity": "sha512-Za5HHd9nvsiZ2t3EI/dVd4Bm/JydK+D22uHKk46fPtvuPxVCJBUo5mQybN+g5sZe35y7I6GDTTfdkVv5SnxlFg==",
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.1.9.tgz",
+      "integrity": "sha512-ZoFkBBz9zv9GWer7wIjvdRxmh2wyc2oKWw6C6CseWd6/yq1DK/l5lJ+wnsmFwJZbBYqr02mrf8A2q/CVCuM3ZA==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2866,18 +3016,47 @@
       }
     },
     "node_modules/@radix-ui/react-toggle-group": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.3.tgz",
-      "integrity": "sha512-khTzdGIxy8WurYUEUrapvj5aOev/tUA8TDEFi1D0Dn3yX+KR5AqjX0b7E5sL9ngRRpxDN2RRJdn5siasu5jtcg==",
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.1.10.tgz",
+      "integrity": "sha512-kiU694Km3WFLTC75DdqgM/3Jauf3rD9wxeS9XtyWFKsBUeZA337lC+6uUazT7I1DhanZ5gyD5Stf8uf2dbQxOQ==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
         "@radix-ui/react-direction": "1.1.1",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-roving-focus": "1.1.3",
-        "@radix-ui/react-toggle": "1.1.3",
-        "@radix-ui/react-use-controllable-state": "1.1.1"
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-toggle": "1.1.9",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-toolbar": {
+      "version": "1.1.10",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.1.10.tgz",
+      "integrity": "sha512-jiwQsduEL++M4YBIurjSa+voD86OIytCod0/dbIxFZDLD8NfO1//keXYMfsW8BPcfqwoNjt+y06XcJqAb4KR7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-toggle-group": "1.1.10"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2895,23 +3074,23 @@
       }
     },
     "node_modules/@radix-ui/react-tooltip": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.0.tgz",
-      "integrity": "sha512-b1Sdc75s7zN9B8ONQTGBSHL3XS8+IcjcOIY51fhM4R1Hx8s0YbgqgyNZiri4qcYMVZK8hfCZVBiyCm7N9rs0rw==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.7.tgz",
+      "integrity": "sha512-Ap+fNYwKTYJ9pzqW+Xe2HtMRbQ/EeWkj2qykZ6SuEV4iS/o1bZI5ssJbk4D2r8XuDuOBVz/tIx2JObtuqU+5Zw==",
       "license": "MIT",
       "dependencies": {
         "@radix-ui/primitive": "1.1.2",
         "@radix-ui/react-compose-refs": "1.1.2",
         "@radix-ui/react-context": "1.1.2",
-        "@radix-ui/react-dismissable-layer": "1.1.6",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
         "@radix-ui/react-id": "1.1.1",
-        "@radix-ui/react-popper": "1.2.3",
-        "@radix-ui/react-portal": "1.1.5",
-        "@radix-ui/react-presence": "1.1.3",
-        "@radix-ui/react-primitive": "2.0.3",
-        "@radix-ui/react-slot": "1.2.0",
-        "@radix-ui/react-use-controllable-state": "1.1.1",
-        "@radix-ui/react-visually-hidden": "1.1.3"
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2944,12 +3123,31 @@
       }
     },
     "node_modules/@radix-ui/react-use-controllable-state": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.1.1.tgz",
-      "integrity": "sha512-YnEXIy8/ga01Y1PN0VfaNH//MhA91JlEGVBDxDzROqwrAtG5Yr2QGEPz8A/rJA3C7ZAHryOYGaUv8fLSW2H/mg==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.2.2.tgz",
+      "integrity": "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-use-callback-ref": "1.1.1"
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-effect-event": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-effect-event/-/react-use-effect-event-0.0.2.tgz",
+      "integrity": "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -2979,6 +3177,24 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-is-hydrated": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-is-hydrated/-/react-use-is-hydrated-0.1.0.tgz",
+      "integrity": "sha512-U+UORVEq+cTnRIaostJv9AGdV3G6Y+zbVd+12e18jQ5A3c0xL03IhnHuiU4UV69wolOQp5GfR58NW/EgdQhwOA==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-layout-effect": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.1.tgz",
@@ -3046,12 +3262,12 @@
       }
     },
     "node_modules/@radix-ui/react-visually-hidden": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.1.3.tgz",
-      "integrity": "sha512-oXSF3ZQRd5fvomd9hmUCb2EHSZbPp3ZSHAHJJU/DlF9XoFkJBBW8RHU/E8WEH+RbSfJd/QFA0sl8ClJXknBwHQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.3"
+        "@radix-ui/react-primitive": "2.1.3"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -3234,6 +3450,12 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
     "node_modules/@upstash/core-analytics": {
       "version": "0.0.10",
       "resolved": "https://registry.npmjs.org/@upstash/core-analytics/-/core-analytics-0.0.10.tgz",
@@ -3683,6 +3905,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-box-model": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "license": "MIT",
+      "dependencies": {
+        "tiny-invariant": "^1.0.6"
+      }
+    },
     "node_modules/cssesc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
@@ -3827,11 +4058,18 @@
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
       "license": "MIT",
+      "peer": true,
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
@@ -5240,6 +5478,89 @@
       ],
       "license": "MIT"
     },
+    "node_modules/radix-ui": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/radix-ui/-/radix-ui-1.4.2.tgz",
+      "integrity": "sha512-fT/3YFPJzf2WUpqDoQi005GS8EpCi+53VhcLaHUj5fwkPYiZAjk1mSxFvbMA8Uq71L03n+WysuYC+mlKkXxt/Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-accessible-icon": "1.1.7",
+        "@radix-ui/react-accordion": "1.2.11",
+        "@radix-ui/react-alert-dialog": "1.1.14",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-aspect-ratio": "1.1.7",
+        "@radix-ui/react-avatar": "1.1.10",
+        "@radix-ui/react-checkbox": "1.3.2",
+        "@radix-ui/react-collapsible": "1.1.11",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-context-menu": "2.2.15",
+        "@radix-ui/react-dialog": "1.1.14",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-dropdown-menu": "2.1.15",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-form": "0.1.7",
+        "@radix-ui/react-hover-card": "1.1.14",
+        "@radix-ui/react-label": "2.1.7",
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-menubar": "1.1.15",
+        "@radix-ui/react-navigation-menu": "1.2.13",
+        "@radix-ui/react-one-time-password-field": "0.1.7",
+        "@radix-ui/react-password-toggle-field": "0.1.2",
+        "@radix-ui/react-popover": "1.1.14",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-progress": "1.1.7",
+        "@radix-ui/react-radio-group": "1.3.7",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-scroll-area": "1.2.9",
+        "@radix-ui/react-select": "2.2.5",
+        "@radix-ui/react-separator": "1.1.7",
+        "@radix-ui/react-slider": "1.3.5",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-switch": "1.2.5",
+        "@radix-ui/react-tabs": "1.1.12",
+        "@radix-ui/react-toast": "1.2.14",
+        "@radix-ui/react-toggle": "1.1.9",
+        "@radix-ui/react-toggle-group": "1.1.10",
+        "@radix-ui/react-toolbar": "1.1.10",
+        "@radix-ui/react-tooltip": "1.2.7",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-use-effect-event": "0.0.2",
+        "@radix-ui/react-use-escape-keydown": "1.1.1",
+        "@radix-ui/react-use-is-hydrated": "0.1.0",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/raf-schd": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz",
+      "integrity": "sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ==",
+      "license": "MIT"
+    },
     "node_modules/react": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -5327,6 +5648,29 @@
         "react-dom": ">=16.8"
       }
     },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-remove-scroll": {
       "version": "2.6.3",
       "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.3.tgz",
@@ -5496,6 +5840,12 @@
       "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
       "license": "MIT"
     },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT"
+    },
     "node_modules/regenerator-runtime": {
       "version": "0.14.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -6123,6 +6473,15 @@
         }
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
+      "integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 5d03e9416..bfe1f8549 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -5,7 +5,15 @@ import { useMediaStore } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { VideoPlayer } from "@/components/ui/video-player";
 import { Button } from "@/components/ui/button";
-import { Play, Pause, Move, RotateCw, Crop, ZoomIn, ZoomOut } from "lucide-react";
+import {
+  Play,
+  Pause,
+  Move,
+  RotateCw,
+  Crop,
+  ZoomIn,
+  ZoomOut,
+} from "lucide-react";
 import { useState, useRef, useEffect, useCallback } from "react";
 
 interface ClipTransform {
@@ -25,7 +33,18 @@ interface ClipTransform {
 
 interface DragState {
   isDragging: boolean;
-  dragType: 'move' | 'resize-nw' | 'resize-ne' | 'resize-sw' | 'resize-se' | 'rotate' | 'scale' | 'crop-n' | 'crop-s' | 'crop-e' | 'crop-w';
+  dragType:
+    | "move"
+    | "resize-nw"
+    | "resize-ne"
+    | "resize-sw"
+    | "resize-se"
+    | "rotate"
+    | "scale"
+    | "crop-n"
+    | "crop-s"
+    | "crop-e"
+    | "crop-w";
   startMouseX: number;
   startMouseY: number;
   startTransform: ClipTransform;
@@ -37,7 +56,9 @@ export function PreviewPanel() {
   const { mediaItems } = useMediaStore();
   const { isPlaying, toggle, currentTime } = usePlaybackStore();
 
-  const [clipTransforms, setClipTransforms] = useState<Record<string, ClipTransform>>({});
+  const [clipTransforms, setClipTransforms] = useState<
+    Record<string, ClipTransform>
+  >({});
   const [canvasSize, setCanvasSize] = useState({ width: 1920, height: 1080 }); // Default 16:9
   const [dragState, setDragState] = useState<DragState | null>(null);
   const previewRef = useRef<HTMLDivElement>(null);
@@ -54,12 +75,14 @@ export function PreviewPanel() {
     tracks.forEach((track, trackIndex) => {
       track.clips.forEach((clip) => {
         const clipStart = clip.startTime;
-        const clipEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
+        const clipEnd =
+          clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
 
         if (currentTime >= clipStart && currentTime < clipEnd) {
-          const mediaItem = clip.mediaId === "test"
-            ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }
-            : mediaItems.find((item) => item.id === clip.mediaId);
+          const mediaItem =
+            clip.mediaId === "test"
+              ? { type: "test", name: clip.name, url: "", thumbnailUrl: "" }
+              : mediaItems.find((item) => item.id === clip.mediaId);
 
           if (mediaItem || clip.mediaId === "test") {
             activeClips.push({
@@ -82,49 +105,58 @@ export function PreviewPanel() {
 
   // Get or create transform for a clip
   const getClipTransform = (clipId: string): ClipTransform => {
-    return clipTransforms[clipId] || {
-      x: 0,
-      y: 0,
-      scale: 1,
-      rotation: 0,
-      opacity: 1,
-      width: 100, // Percentage of canvas
-      height: 100,
-      blendMode: 'normal',
-      cropTop: 0,
-      cropBottom: 0,
-      cropLeft: 0,
-      cropRight: 0,
-    };
-  };
-
-  // Update clip transform
-  const updateClipTransform = useCallback((clipId: string, updates: Partial<ClipTransform>) => {
-    setClipTransforms(prev => {
-      const currentTransform = prev[clipId] || {
+    return (
+      clipTransforms[clipId] || {
         x: 0,
         y: 0,
         scale: 1,
         rotation: 0,
         opacity: 1,
-        width: 100,
+        width: 100, // Percentage of canvas
         height: 100,
-        blendMode: 'normal',
+        blendMode: "normal",
         cropTop: 0,
         cropBottom: 0,
         cropLeft: 0,
         cropRight: 0,
-      };
+      }
+    );
+  };
 
-      return {
-        ...prev,
-        [clipId]: { ...currentTransform, ...updates }
-      };
-    });
-  }, []);
+  // Update clip transform
+  const updateClipTransform = useCallback(
+    (clipId: string, updates: Partial<ClipTransform>) => {
+      setClipTransforms((prev) => {
+        const currentTransform = prev[clipId] || {
+          x: 0,
+          y: 0,
+          scale: 1,
+          rotation: 0,
+          opacity: 1,
+          width: 100,
+          height: 100,
+          blendMode: "normal",
+          cropTop: 0,
+          cropBottom: 0,
+          cropLeft: 0,
+          cropRight: 0,
+        };
+
+        return {
+          ...prev,
+          [clipId]: { ...currentTransform, ...updates },
+        };
+      });
+    },
+    []
+  );
 
   // Mouse event handlers
-  const handleMouseDown = (e: React.MouseEvent, clipId: string, dragType: DragState['dragType']) => {
+  const handleMouseDown = (
+    e: React.MouseEvent,
+    clipId: string,
+    dragType: DragState["dragType"]
+  ) => {
     e.preventDefault();
     e.stopPropagation();
 
@@ -134,90 +166,108 @@ export function PreviewPanel() {
       startMouseX: e.clientX,
       startMouseY: e.clientY,
       startTransform: getClipTransform(clipId),
-      clipId
+      clipId,
     });
   };
 
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (!dragState || !dragState.isDragging) return;
-
-    const deltaX = e.clientX - dragState.startMouseX;
-    const deltaY = e.clientY - dragState.startMouseY;
-    const { startTransform, clipId, dragType } = dragState;
-
-    switch (dragType) {
-      case 'move':
-        updateClipTransform(clipId, {
-          x: Math.max(-100, Math.min(100, startTransform.x + deltaX * 0.3)),
-          y: Math.max(-100, Math.min(100, startTransform.y + deltaY * 0.3))
-        });
-        break;
-
-      case 'resize-nw':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width - deltaX * 0.5),
-          height: Math.max(20, startTransform.height - deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-ne':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width + deltaX * 0.5),
-          height: Math.max(20, startTransform.height - deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-sw':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width - deltaX * 0.5),
-          height: Math.max(20, startTransform.height + deltaY * 0.5)
-        });
-        break;
-
-      case 'resize-se':
-        updateClipTransform(clipId, {
-          width: Math.max(20, startTransform.width + deltaX * 0.5),
-          height: Math.max(20, startTransform.height + deltaY * 0.5)
-        });
-        break;
-
-      case 'rotate':
-        updateClipTransform(clipId, {
-          rotation: (startTransform.rotation + deltaX * 2) % 360
-        });
-        break;
-
-      case 'scale':
-        updateClipTransform(clipId, {
-          scale: Math.max(0.1, Math.min(3, startTransform.scale + deltaX * 0.01))
-        });
-        break;
-
-      case 'crop-n':
-        updateClipTransform(clipId, {
-          cropTop: Math.max(0, Math.min(40, startTransform.cropTop + deltaY * 0.2))
-        });
-        break;
-
-      case 'crop-s':
-        updateClipTransform(clipId, {
-          cropBottom: Math.max(0, Math.min(40, startTransform.cropBottom - deltaY * 0.2))
-        });
-        break;
-
-      case 'crop-e':
-        updateClipTransform(clipId, {
-          cropRight: Math.max(0, Math.min(40, startTransform.cropRight - deltaX * 0.2))
-        });
-        break;
-
-      case 'crop-w':
-        updateClipTransform(clipId, {
-          cropLeft: Math.max(0, Math.min(40, startTransform.cropLeft + deltaX * 0.2))
-        });
-        break;
-    }
-  }, [dragState, updateClipTransform]);
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!dragState || !dragState.isDragging) return;
+
+      const deltaX = e.clientX - dragState.startMouseX;
+      const deltaY = e.clientY - dragState.startMouseY;
+      const { startTransform, clipId, dragType } = dragState;
+
+      switch (dragType) {
+        case "move":
+          updateClipTransform(clipId, {
+            x: Math.max(-100, Math.min(100, startTransform.x + deltaX * 0.3)),
+            y: Math.max(-100, Math.min(100, startTransform.y + deltaY * 0.3)),
+          });
+          break;
+
+        case "resize-nw":
+          updateClipTransform(clipId, {
+            width: Math.max(20, startTransform.width - deltaX * 0.5),
+            height: Math.max(20, startTransform.height - deltaY * 0.5),
+          });
+          break;
+
+        case "resize-ne":
+          updateClipTransform(clipId, {
+            width: Math.max(20, startTransform.width + deltaX * 0.5),
+            height: Math.max(20, startTransform.height - deltaY * 0.5),
+          });
+          break;
+
+        case "resize-sw":
+          updateClipTransform(clipId, {
+            width: Math.max(20, startTransform.width - deltaX * 0.5),
+            height: Math.max(20, startTransform.height + deltaY * 0.5),
+          });
+          break;
+
+        case "resize-se":
+          updateClipTransform(clipId, {
+            width: Math.max(20, startTransform.width + deltaX * 0.5),
+            height: Math.max(20, startTransform.height + deltaY * 0.5),
+          });
+          break;
+
+        case "rotate":
+          updateClipTransform(clipId, {
+            rotation: (startTransform.rotation + deltaX * 2) % 360,
+          });
+          break;
+
+        case "scale":
+          updateClipTransform(clipId, {
+            scale: Math.max(
+              0.1,
+              Math.min(3, startTransform.scale + deltaX * 0.01)
+            ),
+          });
+          break;
+
+        case "crop-n":
+          updateClipTransform(clipId, {
+            cropTop: Math.max(
+              0,
+              Math.min(40, startTransform.cropTop + deltaY * 0.2)
+            ),
+          });
+          break;
+
+        case "crop-s":
+          updateClipTransform(clipId, {
+            cropBottom: Math.max(
+              0,
+              Math.min(40, startTransform.cropBottom - deltaY * 0.2)
+            ),
+          });
+          break;
+
+        case "crop-e":
+          updateClipTransform(clipId, {
+            cropRight: Math.max(
+              0,
+              Math.min(40, startTransform.cropRight - deltaX * 0.2)
+            ),
+          });
+          break;
+
+        case "crop-w":
+          updateClipTransform(clipId, {
+            cropLeft: Math.max(
+              0,
+              Math.min(40, startTransform.cropLeft + deltaX * 0.2)
+            ),
+          });
+          break;
+      }
+    },
+    [dragState, updateClipTransform]
+  );
 
   const handleMouseUp = useCallback(() => {
     setDragState(null);
@@ -226,11 +276,11 @@ export function PreviewPanel() {
   // Add global mouse event listeners
   useEffect(() => {
     if (dragState?.isDragging) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
       return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
       };
     }
   }, [dragState, handleMouseMove, handleMouseUp]);
@@ -252,7 +302,7 @@ export function PreviewPanel() {
           opacity: 1,
           width: 100,
           height: 100,
-          blendMode: 'normal',
+          blendMode: "normal",
           cropTop: 0,
           cropBottom: 0,
           cropLeft: 0,
@@ -262,21 +312,19 @@ export function PreviewPanel() {
     });
 
     if (hasNewClips) {
-      setClipTransforms(prev => ({ ...prev, ...newTransforms }));
+      setClipTransforms((prev) => ({ ...prev, ...newTransforms }));
     }
   }, [tracks, currentTime]); // Re-run when tracks or time changes
 
-
-
   // Render a single clip layer
   const renderClipLayer = (clipData: any, index: number) => {
     const { clip, mediaItem } = clipData;
     const transform = getClipTransform(clip.id);
 
     const layerStyle = {
-      position: 'absolute' as const,
-      left: '50%',
-      top: '50%',
+      position: "absolute" as const,
+      left: "50%",
+      top: "50%",
       width: `${transform.width}%`,
       height: `${transform.height}%`,
       transform: `translate(-50%, -50%) translate(${transform.x}%, ${transform.y}%) scale(${transform.scale}) rotate(${transform.rotation}deg)`,
@@ -284,13 +332,16 @@ export function PreviewPanel() {
       mixBlendMode: transform.blendMode as any,
       clipPath: `inset(${transform.cropTop}% ${transform.cropRight}% ${transform.cropBottom}% ${transform.cropLeft}%)`,
       zIndex: index + 10,
-      cursor: dragState?.isDragging && dragState.clipId === clip.id ? 'grabbing' : 'grab',
-      userSelect: 'none' as const,
+      cursor:
+        dragState?.isDragging && dragState.clipId === clip.id
+          ? "grabbing"
+          : "grab",
+      userSelect: "none" as const,
     };
 
     const handleClipMouseDown = (e: React.MouseEvent) => {
       e.stopPropagation();
-      handleMouseDown(e, clip.id, 'move');
+      handleMouseDown(e, clip.id, "move");
     };
 
     // Handle test clips
@@ -308,14 +359,34 @@ export function PreviewPanel() {
           </div>
 
           {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
+          <div
+            className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-nw");
+            }}
+          ></div>
+          <div
+            className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-ne");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-sw");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-se");
+            }}
+          ></div>
         </div>
       );
     }
@@ -323,7 +394,12 @@ export function PreviewPanel() {
     // Render video
     if (mediaItem.type === "video") {
       return (
-        <div key={clip.id} style={layerStyle} onMouseDown={handleClipMouseDown} className="group">
+        <div
+          key={clip.id}
+          style={layerStyle}
+          onMouseDown={handleClipMouseDown}
+          className="group"
+        >
           <VideoPlayer
             src={mediaItem.url}
             poster={mediaItem.thumbnailUrl}
@@ -332,17 +408,38 @@ export function PreviewPanel() {
             trimStart={clip.trimStart}
             trimEnd={clip.trimEnd}
             clipDuration={clip.duration}
+            muted={!!clip.muted}
           />
 
           {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
+          <div
+            className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-nw");
+            }}
+          ></div>
+          <div
+            className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-ne");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-sw");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-se");
+            }}
+          ></div>
         </div>
       );
     }
@@ -350,7 +447,12 @@ export function PreviewPanel() {
     // Render image
     if (mediaItem.type === "image") {
       return (
-        <div key={clip.id} style={layerStyle} onMouseDown={handleClipMouseDown} className="group">
+        <div
+          key={clip.id}
+          style={layerStyle}
+          onMouseDown={handleClipMouseDown}
+          className="group"
+        >
           <img
             src={mediaItem.url}
             alt={mediaItem.name}
@@ -359,14 +461,34 @@ export function PreviewPanel() {
           />
 
           {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
+          <div
+            className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-nw");
+            }}
+          ></div>
+          <div
+            className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-ne");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-sw");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-se");
+            }}
+          ></div>
         </div>
       );
     }
@@ -386,14 +508,34 @@ export function PreviewPanel() {
           </div>
 
           {/* Hover resize corners */}
-          <div className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-nw'); }}></div>
-          <div className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-ne'); }}></div>
-          <div className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-sw'); }}></div>
-          <div className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
-            onMouseDown={(e) => { e.stopPropagation(); handleMouseDown(e, clip.id, 'resize-se'); }}></div>
+          <div
+            className="absolute -top-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-nw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-nw");
+            }}
+          ></div>
+          <div
+            className="absolute -top-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-ne-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-ne");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -left-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-sw-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-sw");
+            }}
+          ></div>
+          <div
+            className="absolute -bottom-1 -right-1 w-3 h-3 bg-blue-500 border border-white rounded-sm cursor-se-resize opacity-0 group-hover:opacity-100 transition-opacity"
+            onMouseDown={(e) => {
+              e.stopPropagation();
+              handleMouseDown(e, clip.id, "resize-se");
+            }}
+          ></div>
         </div>
       );
     }
@@ -418,13 +560,19 @@ export function PreviewPanel() {
         <select
           value={`${canvasSize.width}x${canvasSize.height}`}
           onChange={(e) => {
-            const preset = canvasPresets.find(p => `${p.width}x${p.height}` === e.target.value);
-            if (preset) setCanvasSize({ width: preset.width, height: preset.height });
+            const preset = canvasPresets.find(
+              (p) => `${p.width}x${p.height}` === e.target.value
+            );
+            if (preset)
+              setCanvasSize({ width: preset.width, height: preset.height });
           }}
           className="bg-background border rounded px-2 py-1"
         >
-          {canvasPresets.map(preset => (
-            <option key={preset.name} value={`${preset.width}x${preset.height}`}>
+          {canvasPresets.map((preset) => (
+            <option
+              key={preset.name}
+              value={`${preset.width}x${preset.height}`}
+            >
               {preset.name} ({preset.width}×{preset.height})
             </option>
           ))}
@@ -436,7 +584,11 @@ export function PreviewPanel() {
           onClick={toggle}
           className="ml-auto"
         >
-          {isPlaying ? <Pause className="h-3 w-3 mr-1" /> : <Play className="h-3 w-3 mr-1" />}
+          {isPlaying ? (
+            <Pause className="h-3 w-3 mr-1" />
+          ) : (
+            <Play className="h-3 w-3 mr-1" />
+          )}
           {isPlaying ? "Pause" : "Play"}
         </Button>
       </div>
@@ -452,23 +604,22 @@ export function PreviewPanel() {
             height: aspectRatio <= 1 ? "100%" : "auto",
             maxWidth: "100%",
             maxHeight: "100%",
-            background: '#000000',
-            border: '1px solid #374151'
+            background: "#000000",
+            border: "1px solid #374151",
           }}
-
         >
-
-
           {/* Render all active clips as layers */}
           {activeClips.length === 0 ? (
             <div className="absolute inset-0 flex items-center justify-center text-white/50">
-              {tracks.length === 0 ? "Drop media to start editing" : "No clips at current time"}
+              {tracks.length === 0
+                ? "Drop media to start editing"
+                : "No clips at current time"}
             </div>
           ) : (
-            activeClips.map((clipData, index) => renderClipLayer(clipData, index))
+            activeClips.map((clipData, index) =>
+              renderClipLayer(clipData, index)
+            )
           )}
-
-
         </div>
       </div>
 
@@ -476,7 +627,9 @@ export function PreviewPanel() {
       <div className="border-t bg-background">
         {/* Layer List */}
         <div className="p-2 border-b">
-          <div className="text-xs font-medium mb-2">Active Layers ({activeClips.length})</div>
+          <div className="text-xs font-medium mb-2">
+            Active Layers ({activeClips.length})
+          </div>
           <div className="space-y-1 max-h-20 overflow-y-auto">
             {activeClips.map((clipData, index) => (
               <div
@@ -487,13 +640,13 @@ export function PreviewPanel() {
                   {index + 1}
                 </span>
                 <span className="flex-1 truncate">{clipData.clip.name}</span>
-                <span className="text-muted-foreground">{clipData.track.name}</span>
+                <span className="text-muted-foreground">
+                  {clipData.track.name}
+                </span>
               </div>
             ))}
           </div>
         </div>
-
-
       </div>
     </div>
   );
diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index af80f4645..0df75fd94 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -16,6 +16,7 @@ import { useTimelineStore } from "@/stores/timeline-store";
 import { useMediaStore } from "@/stores/media-store";
 import { ImageTimelineTreatment } from "@/components/ui/image-timeline-treatment";
 import { useState } from "react";
+import { SpeedControl } from "./speed-control";
 
 export function PropertiesPanel() {
   const { tracks } = useTimelineStore();
@@ -25,6 +26,18 @@ export function PropertiesPanel() {
   >("blur");
   const [backgroundColor, setBackgroundColor] = useState("#000000");
 
+  // Get the first video clip for preview (simplified)
+  const firstVideoClip = tracks
+    .flatMap((track) => track.clips)
+    .find((clip) => {
+      const mediaItem = mediaItems.find((item) => item.id === clip.mediaId);
+      return mediaItem?.type === "video";
+    });
+
+  const firstVideoItem = firstVideoClip
+    ? mediaItems.find((item) => item.id === firstVideoClip.mediaId)
+    : null;
+
   // Get the first image clip for preview (simplified)
   const firstImageClip = tracks
     .flatMap((track) => track.clips)
@@ -107,6 +120,14 @@ export function PropertiesPanel() {
           </>
         )}
 
+        {/* Video Controls - only show if a video is selected */}
+        {firstVideoItem && (
+          <>
+            <SpeedControl />
+            <Separator />
+          </>
+        )}
+
         {/* Transform */}
         <div className="space-y-4">
           <h3 className="text-sm font-medium">Transform</h3>
diff --git a/apps/web/src/components/editor/speed-control.tsx b/apps/web/src/components/editor/speed-control.tsx
new file mode 100644
index 000000000..f2b0568dd
--- /dev/null
+++ b/apps/web/src/components/editor/speed-control.tsx
@@ -0,0 +1,46 @@
+import { Slider } from "../ui/slider";
+import { Label } from "../ui/label";
+import { Button } from "../ui/button";
+import { usePlaybackStore } from "@/stores/playback-store";
+
+const SPEED_PRESETS = [
+  { label: "0.5x", value: 0.5 },
+  { label: "1x", value: 1.0 },
+  { label: "1.5x", value: 1.5 },
+  { label: "2x", value: 2.0 },
+];
+
+export function SpeedControl() {
+  const { speed, setSpeed } = usePlaybackStore();
+
+  return (
+    <div className="space-y-4">
+      <h3 className="text-sm font-medium">Playback Speed</h3>
+      <div className="space-y-4">
+        <div className="flex gap-2">
+          {SPEED_PRESETS.map((preset) => (
+            <Button
+              key={preset.value}
+              variant={speed === preset.value ? "default" : "outline"}
+              className="flex-1"
+              onClick={() => setSpeed(preset.value)}
+            >
+              {preset.label}
+            </Button>
+          ))}
+        </div>
+        <div className="space-y-1">
+          <Label>Custom ({speed.toFixed(1)}x)</Label>
+          <Slider
+            value={[speed]}
+            min={0.1}
+            max={2.0}
+            step={0.1}
+            onValueChange={(value) => setSpeed(value[0])}
+            className="mt-2"
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 1d2df66d2..16221b14d 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -28,15 +28,43 @@ import { usePlaybackStore } from "@/stores/playback-store";
 import { processMediaFiles } from "@/lib/media-processing";
 import { toast } from "sonner";
 import { useState, useRef, useEffect } from "react";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "../ui/select";
 
 export function Timeline() {
   // Timeline shows all tracks (video, audio, effects) and their clips.
   // You can drag media here to add it to your project.
   // Clips can be trimmed, deleted, and moved.
-  const { tracks, addTrack, addClipToTrack, removeTrack, toggleTrackMute, removeClipFromTrack, moveClipToTrack, getTotalDuration } =
-    useTimelineStore();
+  const {
+    tracks,
+    addTrack,
+    addClipToTrack,
+    removeTrack,
+    toggleTrackMute,
+    removeClipFromTrack,
+    moveClipToTrack,
+    getTotalDuration,
+    selectedClip,
+    clearSelectedClip,
+  } = useTimelineStore();
   const { mediaItems, addMediaItem } = useMediaStore();
-  const { currentTime, duration, seek, setDuration, isPlaying, play, pause, toggle } = usePlaybackStore();
+  const {
+    currentTime,
+    duration,
+    seek,
+    setDuration,
+    isPlaying,
+    play,
+    pause,
+    toggle,
+    setSpeed,
+    speed,
+  } = usePlaybackStore();
   const [isDragOver, setIsDragOver] = useState(false);
   const [isProcessing, setIsProcessing] = useState(false);
   const [zoomLevel, setZoomLevel] = useState(1);
@@ -45,7 +73,7 @@ export function Timeline() {
 
   // Unified context menu state
   const [contextMenu, setContextMenu] = useState<{
-    type: 'track' | 'clip';
+    type: "track" | "clip";
     trackId: string;
     clipId?: string;
     x: number;
@@ -67,6 +95,18 @@ export function Timeline() {
     }
   }, [contextMenu]);
 
+  // Keyboard event for deleting selected clip
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if ((e.key === "Delete" || e.key === "Backspace") && selectedClip) {
+        removeClipFromTrack(selectedClip.trackId, selectedClip.clipId);
+        clearSelectedClip();
+      }
+    };
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [selectedClip, removeClipFromTrack, clearSelectedClip]);
+
   const handleDragEnter = (e: React.DragEvent) => {
     // When something is dragged over the timeline, show overlay
     e.preventDefault();
@@ -105,7 +145,9 @@ export function Timeline() {
     dragCounterRef.current = 0;
 
     // Ignore timeline clip drags - they're handled by track-specific handlers
-    const hasTimelineClip = e.dataTransfer.types.includes("application/x-timeline-clip");
+    const hasTimelineClip = e.dataTransfer.types.includes(
+      "application/x-timeline-clip"
+    );
     if (hasTimelineClip) {
       return;
     }
@@ -225,17 +267,24 @@ export function Timeline() {
                 onClick={toggle}
                 className="mr-2"
               >
-                {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+                {isPlaying ? (
+                  <Pause className="h-4 w-4" />
+                ) : (
+                  <Play className="h-4 w-4" />
+                )}
               </Button>
             </TooltipTrigger>
-            <TooltipContent>{isPlaying ? "Pause (Space)" : "Play (Space)"}</TooltipContent>
+            <TooltipContent>
+              {isPlaying ? "Pause (Space)" : "Play (Space)"}
+            </TooltipContent>
           </Tooltip>
 
           <div className="w-px h-6 bg-border mx-1" />
 
           {/* Time Display */}
           <div className="text-xs text-muted-foreground font-mono px-2">
-            {Math.floor(currentTime * 10) / 10}s / {Math.floor(duration * 10) / 10}s
+            {Math.floor(currentTime * 10) / 10}s /{" "}
+            {Math.floor(duration * 10) / 10}s
           </div>
 
           <div className="w-px h-6 bg-border mx-1" />
@@ -331,6 +380,29 @@ export function Timeline() {
             </TooltipTrigger>
             <TooltipContent>Delete clip (Delete)</TooltipContent>
           </Tooltip>
+
+          <div className="w-px h-6 bg-border mx-1" />
+
+          {/* Speed Control */}
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Select
+                value={speed.toFixed(1)}
+                onValueChange={(value) => setSpeed(parseFloat(value))}
+              >
+                <SelectTrigger className="w-[90px] h-8">
+                  <SelectValue placeholder="1.0x" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="0.5">0.5x</SelectItem>
+                  <SelectItem value="1.0">1.0x</SelectItem>
+                  <SelectItem value="1.5">1.5x</SelectItem>
+                  <SelectItem value="2.0">2.0x</SelectItem>
+                </SelectContent>
+              </Select>
+            </TooltipTrigger>
+            <TooltipContent>Playback Speed</TooltipContent>
+          </Tooltip>
         </TooltipProvider>
       </div>
 
@@ -356,6 +428,7 @@ export function Timeline() {
                 style={{
                   width: `${Math.max(1000, duration * 50 * zoomLevel)}px`,
                 }}
+                onClick={handleTimelineClick}
               >
                 {/* Time markers */}
                 {(() => {
@@ -384,17 +457,19 @@ export function Timeline() {
                     return (
                       <div
                         key={i}
-                        className={`absolute top-0 bottom-0 ${isMainMarker
-                          ? "border-l border-muted-foreground/40"
-                          : "border-l border-muted-foreground/20"
-                          }`}
+                        className={`absolute top-0 bottom-0 ${
+                          isMainMarker
+                            ? "border-l border-muted-foreground/40"
+                            : "border-l border-muted-foreground/20"
+                        }`}
                         style={{ left: `${time * 50 * zoomLevel}px` }}
                       >
                         <span
-                          className={`absolute top-1 left-1 text-xs ${isMainMarker
-                            ? "text-muted-foreground font-medium"
-                            : "text-muted-foreground/70"
-                            }`}
+                          className={`absolute top-1 left-1 text-xs ${
+                            isMainMarker
+                              ? "text-muted-foreground font-medium"
+                              : "text-muted-foreground/70"
+                          }`}
                         >
                           {(() => {
                             const formatTime = (seconds: number) => {
@@ -455,12 +530,13 @@ export function Timeline() {
                   >
                     <div className="flex items-center gap-2 flex-1 min-w-0">
                       <div
-                        className={`w-3 h-3 rounded-full flex-shrink-0 ${track.type === "video"
-                          ? "bg-blue-500"
-                          : track.type === "audio"
-                            ? "bg-green-500"
-                            : "bg-purple-500"
-                          }`}
+                        className={`w-3 h-3 rounded-full flex-shrink-0 ${
+                          track.type === "video"
+                            ? "bg-blue-500"
+                            : track.type === "audio"
+                              ? "bg-green-500"
+                              : "bg-purple-500"
+                        }`}
                       />
                       <span className="text-sm font-medium truncate">
                         {track.name}
@@ -516,7 +592,7 @@ export function Timeline() {
                         onContextMenu={(e) => {
                           e.preventDefault();
                           setContextMenu({
-                            type: 'track',
+                            type: "track",
                             trackId: track.id,
                             x: e.clientX,
                             y: e.clientY,
@@ -528,7 +604,6 @@ export function Timeline() {
                           zoomLevel={zoomLevel}
                           setContextMenu={setContextMenu}
                         />
-
                       </div>
                     ))}
 
@@ -555,19 +630,23 @@ export function Timeline() {
           style={{ left: contextMenu.x, top: contextMenu.y }}
           onContextMenu={(e) => e.preventDefault()}
         >
-          {contextMenu.type === 'track' ? (
+          {contextMenu.type === "track" ? (
             // Track context menu
             <>
               <button
                 className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
                 onClick={() => {
-                  const track = tracks.find(t => t.id === contextMenu.trackId);
+                  const track = tracks.find(
+                    (t) => t.id === contextMenu.trackId
+                  );
                   if (track) toggleTrackMute(track.id);
                   setContextMenu(null);
                 }}
               >
                 {(() => {
-                  const track = tracks.find(t => t.id === contextMenu.trackId);
+                  const track = tracks.find(
+                    (t) => t.id === contextMenu.trackId
+                  );
                   return track?.muted ? (
                     <>
                       <Volume2 className="h-4 w-4 mr-2" />
@@ -601,26 +680,37 @@ export function Timeline() {
                 className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
                 onClick={() => {
                   if (contextMenu.clipId) {
-                    const track = tracks.find(t => t.id === contextMenu.trackId);
-                    const clip = track?.clips.find(c => c.id === contextMenu.clipId);
+                    const track = tracks.find(
+                      (t) => t.id === contextMenu.trackId
+                    );
+                    const clip = track?.clips.find(
+                      (c) => c.id === contextMenu.clipId
+                    );
                     if (clip && track) {
                       const splitTime = currentTime;
                       const effectiveStart = clip.startTime;
-                      const effectiveEnd = clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd);
-
-                      if (splitTime > effectiveStart && splitTime < effectiveEnd) {
-                        useTimelineStore.getState().updateClipTrim(
-                          track.id,
-                          clip.id,
-                          clip.trimStart,
-                          clip.trimEnd + (effectiveEnd - splitTime)
-                        );
+                      const effectiveEnd =
+                        clip.startTime +
+                        (clip.duration - clip.trimStart - clip.trimEnd);
+                      if (
+                        splitTime > effectiveStart &&
+                        splitTime < effectiveEnd
+                      ) {
+                        useTimelineStore
+                          .getState()
+                          .updateClipTrim(
+                            track.id,
+                            clip.id,
+                            clip.trimStart,
+                            clip.trimEnd + (effectiveEnd - splitTime)
+                          );
                         useTimelineStore.getState().addClipToTrack(track.id, {
                           mediaId: clip.mediaId,
                           name: clip.name + " (split)",
                           duration: clip.duration,
                           startTime: splitTime,
-                          trimStart: clip.trimStart + (splitTime - effectiveStart),
+                          trimStart:
+                            clip.trimStart + (splitTime - effectiveStart),
                           trimEnd: clip.trimEnd,
                         });
                         toast.success("Clip split successfully");
@@ -639,14 +729,61 @@ export function Timeline() {
                 className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
                 onClick={() => {
                   if (contextMenu.clipId) {
-                    const track = tracks.find(t => t.id === contextMenu.trackId);
-                    const clip = track?.clips.find(c => c.id === contextMenu.clipId);
+                    const track = tracks.find(
+                      (t) => t.id === contextMenu.trackId
+                    );
+                    const clip = track?.clips.find(
+                      (c) => c.id === contextMenu.clipId
+                    );
+                    if (clip && track) {
+                      useTimelineStore
+                        .getState()
+                        .toggleClipMute(track.id, clip.id);
+                      toast.success(clip.muted ? "Clip unmuted" : "Clip muted");
+                    }
+                  }
+                  setContextMenu(null);
+                }}
+              >
+                {(() => {
+                  const track = tracks.find(
+                    (t) => t.id === contextMenu.trackId
+                  );
+                  const clip = track?.clips.find(
+                    (c) => c.id === contextMenu.clipId
+                  );
+                  return clip?.muted ? (
+                    <>
+                      <Volume2 className="h-4 w-4 mr-2" />
+                      Unmute Clip
+                    </>
+                  ) : (
+                    <>
+                      <VolumeX className="h-4 w-4 mr-2" />
+                      Mute Clip
+                    </>
+                  );
+                })()}
+              </button>
+              <button
+                className="flex items-center w-full px-3 py-2 hover:bg-accent hover:text-accent-foreground transition-colors text-left"
+                onClick={() => {
+                  if (contextMenu.clipId) {
+                    const track = tracks.find(
+                      (t) => t.id === contextMenu.trackId
+                    );
+                    const clip = track?.clips.find(
+                      (c) => c.id === contextMenu.clipId
+                    );
                     if (clip && track) {
                       useTimelineStore.getState().addClipToTrack(track.id, {
                         mediaId: clip.mediaId,
                         name: clip.name + " (copy)",
                         duration: clip.duration,
-                        startTime: clip.startTime + (clip.duration - clip.trimStart - clip.trimEnd) + 0.1,
+                        startTime:
+                          clip.startTime +
+                          (clip.duration - clip.trimStart - clip.trimEnd) +
+                          0.1,
                         trimStart: clip.trimStart,
                         trimEnd: clip.trimEnd,
                       });
@@ -664,7 +801,10 @@ export function Timeline() {
                 className="flex items-center w-full px-3 py-2 text-destructive hover:bg-destructive/10 transition-colors text-left"
                 onClick={() => {
                   if (contextMenu.clipId) {
-                    removeClipFromTrack(contextMenu.trackId, contextMenu.clipId);
+                    removeClipFromTrack(
+                      contextMenu.trackId,
+                      contextMenu.clipId
+                    );
                     toast.success("Clip deleted");
                   }
                   setContextMenu(null);
@@ -688,7 +828,15 @@ function TimelineTrackContent({
 }: {
   track: TimelineTrack;
   zoomLevel: number;
-  setContextMenu: (menu: { type: 'track' | 'clip'; trackId: string; clipId?: string; x: number; y: number; } | null) => void;
+  setContextMenu: (
+    menu: {
+      type: "track" | "clip";
+      trackId: string;
+      clipId?: string;
+      x: number;
+      y: number;
+    } | null
+  ) => void;
 }) {
   const { mediaItems } = useMediaStore();
   const {
@@ -699,6 +847,8 @@ function TimelineTrackContent({
     addClipToTrack,
     removeClipFromTrack,
     toggleTrackMute,
+    selectedClip,
+    selectClip,
   } = useTimelineStore();
   const { currentTime } = usePlaybackStore();
   const [isDropping, setIsDropping] = useState(false);
@@ -830,7 +980,7 @@ function TimelineTrackContent({
             return;
           }
         }
-      } catch (error) { }
+      } catch (error) {}
     }
 
     // Calculate drop position for overlap checking
@@ -1208,18 +1358,19 @@ function TimelineTrackContent({
 
   return (
     <div
-      className={`w-full h-full transition-all duration-150 ease-out ${isDraggedOver
-        ? wouldOverlap
-          ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
-          : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
-        : "hover:bg-muted/20"
-        }`}
+      className={`w-full h-full transition-all duration-150 ease-out ${
+        isDraggedOver
+          ? wouldOverlap
+            ? "bg-red-500/15 border-2 border-dashed border-red-400 shadow-lg"
+            : "bg-blue-500/15 border-2 border-dashed border-blue-400 shadow-lg"
+          : "hover:bg-muted/20"
+      }`}
       onContextMenu={(e) => {
         e.preventDefault();
         // Only show track menu if we didn't click on a clip
         if (!(e.target as HTMLElement).closest(".timeline-clip")) {
           setContextMenu({
-            type: 'track',
+            type: "track",
             trackId: track.id,
             x: e.clientX,
             y: e.clientY,
@@ -1237,12 +1388,13 @@ function TimelineTrackContent({
       <div className="h-full relative track-clips-container min-w-full">
         {track.clips.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"
-              }`}
+            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
@@ -1261,16 +1413,27 @@ function TimelineTrackContent({
               );
               const clipLeft = clip.startTime * 50 * zoomLevel;
 
+              // Correctly declare isSelected inside the map
+              const isSelected =
+                selectedClip &&
+                selectedClip.trackId === track.id &&
+                selectedClip.clipId === clip.id;
+
               return (
                 <div
                   key={clip.id}
-                  className={`timeline-clip absolute h-full rounded-sm border transition-all duration-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg`}
+                  className={`timeline-clip absolute h-full rounded-sm border transition-all duration-200 ${getTrackColor(track.type)} flex items-center py-3 min-w-[80px] overflow-hidden group hover:shadow-lg ${isSelected ? "ring-2 ring-blue-500 z-10" : ""}`}
                   style={{ width: `${clipWidth}px`, left: `${clipLeft}px` }}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    selectClip(track.id, clip.id);
+                  }}
+                  tabIndex={0}
                   onContextMenu={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     setContextMenu({
-                      type: 'clip',
+                      type: "clip",
                       trackId: track.id,
                       clipId: clip.id,
                       x: e.clientX,
@@ -1334,24 +1497,22 @@ function TimelineTrackContent({
             {/* Drop position indicator */}
             {isDraggedOver && dropPosition !== null && (
               <div
-                className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${wouldOverlap ? "bg-red-500" : "bg-blue-500"
-                  }`}
+                className={`absolute top-0 bottom-0 w-1 pointer-events-none z-30 transition-all duration-75 ease-out ${
+                  wouldOverlap ? "bg-red-500" : "bg-blue-500"
+                }`}
                 style={{
                   left: `${dropPosition * 50 * zoomLevel}px`,
                   transform: "translateX(-50%)",
                 }}
               >
                 <div
-                  className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"
-                    }`}
+                  className={`absolute -top-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
                 />
                 <div
-                  className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"
-                    }`}
+                  className={`absolute -bottom-2 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 border-white shadow-md ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
                 />
                 <div
-                  className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"
-                    }`}
+                  className={`absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs text-white px-1 py-0.5 rounded whitespace-nowrap ${wouldOverlap ? "bg-red-500" : "bg-blue-500"}`}
                 >
                   {wouldOverlap ? "⚠️" : ""}
                   {dropPosition.toFixed(1)}s
@@ -1363,4 +1524,4 @@ function TimelineTrackContent({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 29f29cf2e..11b27041f 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import * as React from "react";
-import { type DialogProps } from "radix-ui";
+import { DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { Search } from "lucide-react";
 
diff --git a/apps/web/src/components/ui/video-player.tsx b/apps/web/src/components/ui/video-player.tsx
index 0c4f8498d..2bf337f27 100644
--- a/apps/web/src/components/ui/video-player.tsx
+++ b/apps/web/src/components/ui/video-player.tsx
@@ -6,132 +6,179 @@ import { Play, Pause, Volume2 } from "lucide-react";
 import { usePlaybackStore } from "@/stores/playback-store";
 
 interface VideoPlayerProps {
-    src: string;
-    poster?: string;
-    className?: string;
-    clipStartTime: number;
-    trimStart: number;
-    trimEnd: number;
-    clipDuration: number;
+  src: string;
+  poster?: string;
+  className?: string;
+  clipStartTime: number;
+  trimStart: number;
+  trimEnd: number;
+  clipDuration: number;
+  muted?: boolean;
 }
 
 export function VideoPlayer({
-    src,
-    poster,
-    className = "",
-    clipStartTime,
-    trimStart,
-    trimEnd,
-    clipDuration
+  src,
+  poster,
+  className = "",
+  clipStartTime,
+  trimStart,
+  trimEnd,
+  clipDuration,
+  muted = false,
 }: VideoPlayerProps) {
-    const videoRef = useRef<HTMLVideoElement>(null);
-    const { isPlaying, currentTime, volume, play, pause, setVolume } = usePlaybackStore();
-
-    // Calculate if we're within this clip's timeline range
-    const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
-    const isInClipRange = currentTime >= clipStartTime && currentTime < clipEndTime;
-
-    // Calculate the video's internal time based on timeline position
-    const videoTime = Math.max(trimStart, Math.min(
-        clipDuration - trimEnd,
-        currentTime - clipStartTime + trimStart
-    ));
-
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        const handleSeekEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
-            const timelineTime = e.detail.time;
-            const newVideoTime = Math.max(trimStart, Math.min(
-                clipDuration - trimEnd,
-                timelineTime - clipStartTime + trimStart
-            ));
-            video.currentTime = newVideoTime;
-        };
-
-        const handleUpdateEvent = (e: CustomEvent) => {
-            if (!isInClipRange) return;
-            const timelineTime = e.detail.time;
-            const targetVideoTime = Math.max(trimStart, Math.min(
-                clipDuration - trimEnd,
-                timelineTime - clipStartTime + trimStart
-            ));
-
-            // Only sync if there's a significant difference
-            if (Math.abs(video.currentTime - targetVideoTime) > 0.2) {
-                video.currentTime = targetVideoTime;
-            }
-        };
-
-        window.addEventListener("playback-seek", handleSeekEvent as EventListener);
-        window.addEventListener("playback-update", handleUpdateEvent as EventListener);
-
-        return () => {
-            window.removeEventListener("playback-seek", handleSeekEvent as EventListener);
-            window.removeEventListener("playback-update", handleUpdateEvent as EventListener);
-        };
-    }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
-
-    // Sync video playback state - only play if in clip range
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-
-        if (isPlaying && isInClipRange) {
-            video.play().catch(console.error);
-        } else {
-            video.pause();
-        }
-    }, [isPlaying, isInClipRange]);
-
-    // Sync volume
-    useEffect(() => {
-        const video = videoRef.current;
-        if (!video) return;
-        video.volume = volume;
-    }, [volume]);
-
-    return (
-        <div className={`relative group ${className}`}>
-            <video
-                ref={videoRef}
-                src={src}
-                poster={poster}
-                className="w-full h-full object-cover"
-                playsInline
-                preload="metadata"
-            />
-
-            <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
-
-            <div className="absolute bottom-2 left-2 right-2 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
-                    onClick={isPlaying ? pause : play}
-                >
-                    {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
-                </Button>
-
-                <div className="flex-1 h-1 bg-white/30 rounded-full overflow-hidden">
-                    <div
-                        className="h-full bg-white transition-all duration-100"
-                        style={{ width: `${(currentTime / usePlaybackStore.getState().duration) * 100}%` }}
-                    />
-                </div>
-
-                <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
-                    onClick={() => setVolume(volume > 0 ? 0 : 1)}
-                >
-                    <Volume2 className="h-4 w-4" />
-                </Button>
-            </div>
-        </div>
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const { isPlaying, currentTime, volume, speed, play, pause, setVolume } =
+    usePlaybackStore();
+
+  // Calculate if we're within this clip's timeline range
+  const clipEndTime = clipStartTime + (clipDuration - trimStart - trimEnd);
+  const isInClipRange =
+    currentTime >= clipStartTime && currentTime < clipEndTime;
+
+  // Calculate the video's internal time based on timeline position
+  const videoTime = Math.max(
+    trimStart,
+    Math.min(clipDuration - trimEnd, currentTime - clipStartTime + trimStart)
+  );
+
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    const handleSeekEvent = (e: CustomEvent) => {
+      if (!isInClipRange) return;
+      const timelineTime = e.detail.time;
+      const newVideoTime = Math.max(
+        trimStart,
+        Math.min(
+          clipDuration - trimEnd,
+          timelineTime - clipStartTime + trimStart
+        )
+      );
+      video.currentTime = newVideoTime;
+    };
+
+    const handleUpdateEvent = (e: CustomEvent) => {
+      if (!isInClipRange) return;
+      const timelineTime = e.detail.time;
+      const targetVideoTime = Math.max(
+        trimStart,
+        Math.min(
+          clipDuration - trimEnd,
+          timelineTime - clipStartTime + trimStart
+        )
+      );
+
+      // Only sync if there's a significant difference to avoid micro-adjustments
+      if (Math.abs(video.currentTime - targetVideoTime) > 0.5) {
+        video.currentTime = targetVideoTime;
+      }
+    };
+
+    const handleSpeedEvent = (e: CustomEvent) => {
+      if (!isInClipRange) return;
+      // Set playbackRate directly without any additional checks
+      video.playbackRate = e.detail.speed;
+    };
+
+    window.addEventListener("playback-seek", handleSeekEvent as EventListener);
+    window.addEventListener(
+      "playback-update",
+      handleUpdateEvent as EventListener
     );
-} 
\ No newline at end of file
+    window.addEventListener(
+      "playback-speed",
+      handleSpeedEvent as EventListener
+    );
+
+    return () => {
+      window.removeEventListener(
+        "playback-seek",
+        handleSeekEvent as EventListener
+      );
+      window.removeEventListener(
+        "playback-update",
+        handleUpdateEvent as EventListener
+      );
+      window.removeEventListener(
+        "playback-speed",
+        handleSpeedEvent as EventListener
+      );
+    };
+  }, [clipStartTime, trimStart, trimEnd, clipDuration, isInClipRange]);
+
+  // Sync video playback state - only play if in clip range
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+
+    if (isPlaying && isInClipRange) {
+      video.play().catch(console.error);
+    } else {
+      video.pause();
+    }
+  }, [isPlaying, isInClipRange]);
+
+  // Sync volume
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.volume = volume;
+  }, [volume]);
+
+  // Sync speed immediately when it changes
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video) return;
+    video.playbackRate = speed;
+  }, [speed]);
+
+  return (
+    <div className={`relative group ${className}`}>
+      <video
+        ref={videoRef}
+        src={src}
+        poster={poster}
+        className="w-full h-full object-cover"
+        playsInline
+        preload="auto"
+        muted={muted}
+      />
+
+      <div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none" />
+
+      <div className="absolute bottom-2 left-2 right-2 flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
+          onClick={isPlaying ? pause : play}
+        >
+          {isPlaying ? (
+            <Pause className="h-4 w-4" />
+          ) : (
+            <Play className="h-4 w-4" />
+          )}
+        </Button>
+
+        <div className="flex-1 h-1 bg-white/30 rounded-full overflow-hidden">
+          <div
+            className="h-full bg-white transition-all duration-100"
+            style={{
+              width: `${(currentTime / usePlaybackStore.getState().duration) * 100}%`,
+            }}
+          />
+        </div>
+
+        <Button
+          variant="ghost"
+          size="icon"
+          className="h-8 w-8 bg-black/50 text-white hover:bg-black/70"
+          onClick={() => setVolume(volume > 0 ? 0 : 1)}
+        >
+          <Volume2 className="h-4 w-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 3c0bfdec6..4f45964ea 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -6,29 +6,46 @@ interface PlaybackStore extends PlaybackState, PlaybackControls {
   setCurrentTime: (time: number) => void;
 }
 
-let playbackTimer: NodeJS.Timeout | null = null;
+let playbackTimer: number | null = null;
 
 const startTimer = (store: any) => {
-  if (playbackTimer) clearInterval(playbackTimer);
-  
-  playbackTimer = setInterval(() => {
+  if (playbackTimer) cancelAnimationFrame(playbackTimer);
+
+  // Use requestAnimationFrame for smoother updates
+  const updateTime = () => {
     const state = store();
     if (state.isPlaying && state.currentTime < state.duration) {
-      const newTime = state.currentTime + 0.1;
+      const now = performance.now();
+      const delta = (now - lastUpdate) / 1000; // Convert to seconds
+      lastUpdate = now;
+
+      const newTime = state.currentTime + delta * state.speed;
       if (newTime >= state.duration) {
-        state.pause();
+        // Loop: restart from 0 and keep playing
+        state.seek(0);
+        state.setCurrentTime(0);
+        // Notify video elements to sync
+        window.dispatchEvent(
+          new CustomEvent("playback-update", { detail: { time: 0 } })
+        );
       } else {
         state.setCurrentTime(newTime);
         // Notify video elements to sync
-        window.dispatchEvent(new CustomEvent('playback-update', { detail: { time: newTime } }));
+        window.dispatchEvent(
+          new CustomEvent("playback-update", { detail: { time: newTime } })
+        );
       }
     }
-  }, 100);
+    playbackTimer = requestAnimationFrame(updateTime);
+  };
+
+  let lastUpdate = performance.now();
+  playbackTimer = requestAnimationFrame(updateTime);
 };
 
 const stopTimer = () => {
   if (playbackTimer) {
-    clearInterval(playbackTimer);
+    cancelAnimationFrame(playbackTimer);
     playbackTimer = null;
   }
 };
@@ -38,6 +55,7 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
   currentTime: 0,
   duration: 0,
   volume: 1,
+  speed: 1.0,
 
   play: () => {
     set({ isPlaying: true });
@@ -62,12 +80,27 @@ export const usePlaybackStore = create<PlaybackStore>((set, get) => ({
     const { duration } = get();
     const clampedTime = Math.max(0, Math.min(duration, time));
     set({ currentTime: clampedTime });
-    
+
     // Notify video elements to seek
-    window.dispatchEvent(new CustomEvent('playback-seek', { detail: { time: clampedTime } }));
+    const event = new CustomEvent("playback-seek", {
+      detail: { time: clampedTime },
+    });
+    window.dispatchEvent(event);
   },
-  
-  setVolume: (volume: number) => set({ volume: Math.max(0, Math.min(1, volume)) }),
+
+  setVolume: (volume: number) =>
+    set({ volume: Math.max(0, Math.min(1, volume)) }),
+
+  setSpeed: (speed: number) => {
+    const newSpeed = Math.max(0.1, Math.min(2.0, speed));
+    set({ speed: newSpeed });
+
+    const event = new CustomEvent("playback-speed", {
+      detail: { speed: newSpeed },
+    });
+    window.dispatchEvent(event);
+  },
+
   setDuration: (duration: number) => set({ duration }),
   setCurrentTime: (time: number) => set({ currentTime: time }),
-})); 
\ No newline at end of file
+}));
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index c569ae11b..dde7b633e 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -8,6 +8,7 @@ export interface TimelineClip {
   startTime: number;
   trimStart: number;
   trimEnd: number;
+  muted?: boolean;
 }
 
 export interface TimelineTrack {
@@ -21,6 +22,11 @@ export interface TimelineTrack {
 interface TimelineStore {
   tracks: TimelineTrack[];
 
+  // Selection
+  selectedClip: { trackId: string; clipId: string } | null;
+  selectClip: (trackId: string, clipId: string) => void;
+  clearSelectedClip: () => void;
+
   // Actions
   addTrack: (type: "video" | "audio" | "effects") => string;
   removeTrack: (trackId: string) => void;
@@ -43,6 +49,7 @@ interface TimelineStore {
     startTime: number
   ) => void;
   toggleTrackMute: (trackId: string) => void;
+  toggleClipMute: (trackId: string, clipId: string) => void;
 
   // Computed values
   getTotalDuration: () => number;
@@ -50,6 +57,14 @@ interface TimelineStore {
 
 export const useTimelineStore = create<TimelineStore>((set, get) => ({
   tracks: [],
+  selectedClip: null,
+
+  selectClip: (trackId, clipId) => {
+    set({ selectedClip: { trackId, clipId } });
+  },
+  clearSelectedClip: () => {
+    set({ selectedClip: null });
+  },
 
   addTrack: (type) => {
     const newTrack: TimelineTrack = {
@@ -78,6 +93,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
       startTime: clipData.startTime || 0,
       trimStart: 0,
       trimEnd: 0,
+      muted: false,
     };
 
     set((state) => ({
@@ -166,6 +182,21 @@ export const useTimelineStore = create<TimelineStore>((set, get) => ({
     }));
   },
 
+  toggleClipMute: (trackId, clipId) => {
+    set((state) => ({
+      tracks: state.tracks.map((track) =>
+        track.id === trackId
+          ? {
+              ...track,
+              clips: track.clips.map((clip) =>
+                clip.id === clipId ? { ...clip, muted: !clip.muted } : clip
+              ),
+            }
+          : track
+      ),
+    }));
+  },
+
   getTotalDuration: () => {
     const { tracks } = get();
     if (tracks.length === 0) return 0;
diff --git a/apps/web/src/types/playback.ts b/apps/web/src/types/playback.ts
index 88113ef32..3fbd1a023 100644
--- a/apps/web/src/types/playback.ts
+++ b/apps/web/src/types/playback.ts
@@ -3,6 +3,7 @@ export interface PlaybackState {
   currentTime: number;
   duration: number;
   volume: number;
+  speed: number;
 }
 
 export interface PlaybackControls {
@@ -10,5 +11,6 @@ export interface PlaybackControls {
   pause: () => void;
   seek: (time: number) => void;
   setVolume: (volume: number) => void;
+  setSpeed: (speed: number) => void;
   toggle: () => void;
 } 
\ No newline at end of file