From 7c54cdd6120a3afdcb74d7e266703ec21d915f54 Mon Sep 17 00:00:00 2001
From: Klemek <klemek@outlook.fr>
Date: Mon, 17 Mar 2025 12:45:53 +0100
Subject: [PATCH] server/client workflow

---
 eslint.config.mjs |   2 -
 index.html        |  39 ++-
 main.js           | 367 +++++++++++++----------
 package-lock.json | 738 +++++++++++++++++++++++++++++++++++++---------
 package.json      |   5 +-
 5 files changed, 838 insertions(+), 313 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 3314c6e..ae7abda 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -9,9 +9,7 @@ export default [
     languageOptions: {
       globals: {
         ...globals.browser,
-        lucide: "readonly",
         Peer: "readonly",
-        streamSaver: "readonly",
       },
     },
   },
diff --git a/index.html b/index.html
index 727ad06..573cf26 100644
--- a/index.html
+++ b/index.html
@@ -6,12 +6,12 @@
   <title>File Whizz</title>
   <link rel="stylesheet" href="style.css" />
   <link rel="stylesheet" href="material-colors.css" />
-  <script src="https://unpkg.com/lucide@0"></script>
-  <script src="https://unpkg.com/peerjs@1.5.4/dist/peerjs.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/peerjs@1.5.4/dist/peerjs.min.js"></script>
   <script type="importmap">
       {
         "imports": {
-          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
+          "vue": "https://cdn.jsdelivr.net/npm/vue@3/dist/vue.esm-browser.js",
+          "lucide": "https://cdn.jsdelivr.net/npm/lucide@0/dist/esm/lucide.js"
         }
       }
     </script>
@@ -30,27 +30,42 @@
     <br />
     <div>
       <label>Local ID</label><br>
-      <input readonly :value="localId" />
+      <input :value="localId" disabled />
       <br>
       <br>
-      <template v-if="canConnect">
-        <label>Remote ID</label><br>
-        <input v-model="remoteId" @change="onRemoteIdChange" :readonly="isConnected">
+      <template v-if="serverIsReady">
+        <input disabled :value="server.url" />
+        <input type="submit" @click.prevent="onCopy" value="Share / Copy" />
         <br>
         <br>
       </template>
-      <template v-if="canConnect && !downloading && !readyToDownload">
-        <input type="file" @change="onFileChange" :disabled="data" />
+      <template v-if="remoteId">
+        <label>Remote ID</label><br>
+        <input v-model="remoteId" disabled>
+        <br>
+        <br>
+      </template>
+      <template v-if="isServer">
+        <input type="file" @change="onFileChange" :disabled="server.data" />
         <br>
       </template>
       <template v-if="readyToDownload">
-        <input type="submit" @click.prevent="clientStartTransfer" value="Download" />
+        <input type="submit" @click.prevent="onDownload" value="Download" />
+        <br>
+        <br>
+      </template>
+      <template v-if="downloading">
+        <progress :value="downloadProgress" :max="downloadTotal"></progress>
+        <br>
+        <br>
+      </template>
+      <template v-if="error">
+        <span class="red">{{error}}</span>
         <br>
         <br>
       </template>
-      <progress v-if="downloading" :value="downloadProgress" :max="downloadTotal"></progress>
     </div>
-    <br />
+    <br>
     <small class="footer">
       <i icon="at-sign"></i>&nbsp;<a href="https://github.com/klemek" target="_blank">klemek</a>
       -
diff --git a/main.js b/main.js
index 7ed9968..29e3e3b 100644
--- a/main.js
+++ b/main.js
@@ -1,8 +1,10 @@
+import { createIcons, icons } from "lucide";
 import { createApp } from "vue";
 
 const utils = {
   updateIcons() {
-    lucide.createIcons({
+    createIcons({
+      icons,
       nameAttr: "icon",
       attrs: {
         width: "1.1em",
@@ -10,24 +12,46 @@ const utils = {
       },
     });
   },
+  copyToClipboard(str) {
+    navigator.clipboard.writeText(str);
+  },
 };
 
-const MAX_CHUNK_SIZE = 12 * 1024; // 10 KB
+const MESSAGE_TYPE = {
+  ServerInfo: "server-info",
+  ServerChunk: "server-chunk",
+  ServerDone: "server-done",
+  ClientStartTransfer: "client-start-transfer",
+  ClientSeek: "client-seek",
+  ClientDone: "client-done",
+};
+
+const MAX_CHUNK_SIZE = 12 * 1024; // 12 KB
 
 const app = createApp({
   data() {
     return {
       peer: null,
-      localId: null,
-      remoteId: null,
-      connection: null, // TODO multiple connections
-      data: null, // TODO multiple file
-      buffer: null,
       fileName: null,
       fileSize: null,
-      t0: new Date(),
-      received: [],
-      downloading: false,
+      localId: null,
+
+      remoteId: null,
+      connection: null, // TODO multiple connections
+
+      // TODO separate vars
+      isServer: true,
+      server: {
+        url: null,
+        data: null, // TODO multiple files
+      },
+      client: {
+        remoteId: null,
+        downloadStart: null,
+        received: [],
+        buffer: null, // TODO multiple files
+      },
+      error: null,
     };
   },
   computed: {
@@ -38,16 +62,16 @@ const app = createApp({
       return this.connection !== null;
     },
     readyToDownload() {
-      return this.buffer !== null && !this.downloading;
+      return this.client.buffer !== null && !this.client.downloadStart;
     },
-    isServer() {
-      return this.data !== null;
+    serverIsReady() {
+      return this.server.data !== null;
     },
-    isClient() {
-      return this.isConnected && !this.isServer;
+    downloading() {
+      return this.client.downloadStart !== null;
     },
     downloadProgress() {
-      return this.received.length * MAX_CHUNK_SIZE;
+      return this.client.received.length * MAX_CHUNK_SIZE;
     },
     downloadTotal() {
       return this.fileSize ?? 0;
@@ -68,6 +92,19 @@ const app = createApp({
     showApp() {
       document.getElementById("app").setAttribute("style", "");
     },
+    initApp() {
+      this.initClient();
+      this.initPeer();
+    },
+    initClient() {
+      const url = new URL(window.location);
+      const remoteId = url.searchParams.get("s") ?? '';
+      const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-5][0-9a-f]{3}-[089ab][0-9a-f]{3}-[0-9a-f]{12}$/iu;
+      if (uuidRegex.test(remoteId)) {
+        this.isServer = false;
+        this.client.remoteId = remoteId;
+      }
+    },
     initPeer() {
       this.peer = new Peer({
         debug: 3,
@@ -76,7 +113,6 @@ const app = createApp({
         secure: true,
         config: {
           iceServers: [
-            { urls: ["stun:stun.l.google.com:19302"] },
             {
               urls: [`turn:klemek.fr:3478`, `turns:klemek.fr:5349`],
               username: "username",
@@ -85,94 +121,28 @@ const app = createApp({
           ],
         },
       });
-      this.peer.on("open", this.peerOpen);
-      this.peer.on("connection", this.peerConnection);
-      this.peer.on("close", this.peerClose);
-      this.peer.on("disconnected", this.peerDisconnected);
-      this.peer.on("error", this.peerError);
+      this.peer.on("open", this.onPeerOpen);
+      this.peer.on("connection", this.onPeerConnection);
+      this.peer.on("close", this.onPeerClose);
+      this.peer.on("disconnected", this.onPeerDisconnected);
+      this.peer.on("error", this.onPeerError);
     },
     initConnection(conn) {
-      conn.on("open", () => {
-        console.log("connOpen");
-        console.log(conn);
-        this.connection = conn;
-        this.connection.on("close", this.connClose);
-        this.connection.on("error", this.connError);
-        this.connection.on("data", this.connData);
-        this.serverInfo();
-      });
+      this.connection = conn;
+      this.connection.on("open", this.onConnectionOpen);
+      this.connection.on("close", this.onConnectionClose);
+      this.connection.on("data", this.onConnectionData);
+      this.connection.on("error", this.onConnectionError);
     },
-    peerOpen(id) {
-      console.log("peerOpen", id);
-      this.localId = id;
-    },
-    peerConnection(conn) {
-      console.log("peerConnection");
-      this.initConnection(conn);
-      this.remoteId = conn.peer;
-    },
-    peerClose() {
-      console.log("peerClose");
-      this.peer = null;
-    },
-    peerDisconnected() {
-      console.log("peerDisconnected");
-      this.peer.reconnect();
-    },
-    peerError(err) {
-      console.log("peerError", err);
-      // TODO handle error
-      throw err;
-    },
-    createStream() {
-      this.buffer = new ArrayBuffer(this.fileSize);
-    },
-    serverInfo() {
-      this.connection.send({
-        type: "server-info",
-        fileName: this.data ? this.fileName : null,
-        fileSize: this.data ? this.fileSize : null,
-      });
-    },
-    serverSendData(index) {
-      this.connection.send({
-        type: "server-chunk",
-        index,
-        bytes: this.data.slice(index, index + MAX_CHUNK_SIZE),
-      });
-    },
-    serverDone() {
-      this.connection.send({
-        type: "server-done",
-      });
-    },
-    clientStartTransfer() {
-      this.downloading = true;
-      this.connection.send({
-        type: "client-start-transfer",
-      });
-    },
-    clientSeek() {
-      const indexes = [];
-      for (let index = 0; index < this.fileSize; index += MAX_CHUNK_SIZE) {
-        if (!this.received.includes(index)) {
-          indexes.push(index);
-        }
+    clientCreateStream() {
+      try {
+        this.client.buffer = new ArrayBuffer(this.fileSize);
+      } catch {
+        this.error = "File is too big";
       }
-      if (indexes.length) {
-        this.connection.send({
-          type: "client-seek",
-          indexes,
-        });
-        return true;
-      }
-      return false;
     },
-    clientDone() {
-      this.connection.send({
-        type: "client-done",
-      });
-      const blob = new Blob([new Uint8Array(this.buffer)], {
+    clientDownloadFile() {
+      const blob = new Blob([new Uint8Array(this.client.buffer)], {
         type: "application/octet-stream",
       });
       const link = document.createElement("a");
@@ -180,88 +150,183 @@ const app = createApp({
       link.download = this.fileName;
       link.click();
     },
-    connData(data) {
-      console.log("connData");
-      console.log(data.type);
+    // PEER EVENTS
+    onPeerOpen(id) {
+      console.log("onPeerOpen", id);
+      this.localId = id;
+      this.error = null;
+      if (this.isServer) {
+        this.server.url = `${window.location.href}?s=${id}`;
+      } else {
+        this.initConnection(
+          this.peer.connect(this.client.remoteId, { reliable: false }),
+        );
+        this.remoteId = this.client.remoteId;
+      }
+    },
+    onPeerConnection(conn) {
+      console.log("onPeerConnection", conn);
+      // TODO multiple connections for server
+      this.initConnection(conn);
+      this.remoteId = conn.peer;
+    },
+    onPeerClose() {
+      console.log("onPeerClose");
+      this.peer = null;
+    },
+    onPeerDisconnected() {
+      console.log("onPeerDisconnected");
+      this.peer.reconnect();
+    },
+    onPeerError(err) {
+      console.log("onPeerError", err);
+      this.error = `Error connecting: ${err.type}. Reconnecting...`;
+      this.peer = null;
+      setTimeout(this.initPeer, 1000);
+    },
+    // CONNECTION EVENTS
+    onConnectionOpen() {
+      console.log("onConnectionOpen");
+      if (this.isServer) {
+        this.sendServerInfo();
+      }
+    },
+    onConnectionData(data) {
+      console.log("onConnectionData", data.type);
       switch (data.type) {
-        case "server-info":
-          this.fileName = data.fileName;
-          this.fileSize = data.fileSize;
-          if (this.fileName !== null) {
-            this.createStream();
-          }
+        case MESSAGE_TYPE.ServerInfo:
+          this.handleServerInfo(data);
           break;
-        case "server-chunk":
-          new Uint8Array(this.buffer).set(
-            new Uint8Array(data.bytes),
-            data.index,
-          );
-          this.received.push(data.index);
+        case MESSAGE_TYPE.ServerChunk:
+          this.handleServerChunk(data);
           break;
-        case "server-done":
-          if (!this.clientSeek()) {
-            this.clientDone();
-          }
+        case MESSAGE_TYPE.ServerDone:
+          this.handleServerDone(data);
           break;
-        case "client-start-transfer":
-          for (let index = 0; index < this.fileSize; index += MAX_CHUNK_SIZE) {
-            this.serverSendData(index);
-          }
-          this.serverDone();
+        case MESSAGE_TYPE.ClientSeek:
+          this.handleClientSeek(data);
           break;
-        case "client-seek":
-          data.indexes.forEach(this.serverSendData);
-          this.serverDone();
-          break;
-        case "client-done":
-          this.connection.close();
+        case MESSAGE_TYPE.ClientDone:
+          this.handleClientDone(data);
           break;
         default:
-          console.error("Invalid data type");
+          console.error("Invalid message type");
           break;
       }
     },
-    connClose() {
-      console.log("connClose");
+    onConnectionClose() {
+      console.log("onConnectionClose");
       this.connection = null;
       // TODO handle conn close
     },
-    connError(err) {
-      console.log("connError", err);
+    onConnectionError(err) {
+      console.log("onConnectionError", err);
       // TODO handle error
       throw err;
     },
-    onRemoteIdChange() {
-      if (this.remoteId) {
-        this.initConnection(
-          this.peer.connect(this.remoteId, { reliable: true }),
-        );
+    // EXCHANGES
+    sendServerInfo() {
+      this.connection.send({
+        type: MESSAGE_TYPE.ServerInfo,
+        fileName: this.server.data ? this.fileName : null,
+        fileSize: this.server.data ? this.fileSize : null,
+      });
+    },
+    handleServerInfo(data) {
+      this.fileName = data.fileName;
+      this.fileSize = data.fileSize;
+      this.clientCreateStream();
+    },
+    sendServerChunk(index) {
+      this.connection.send({
+        type: MESSAGE_TYPE.ServerChunk,
+        index,
+        bytes: this.server.data.slice(index, index + MAX_CHUNK_SIZE),
+      });
+    },
+    handleServerChunk(data) {
+      new Uint8Array(this.client.buffer).set(
+        new Uint8Array(data.bytes),
+        data.index,
+      );
+      this.client.received.push(data.index);
+    },
+    sendServerDone() {
+      this.connection.send({
+        type: MESSAGE_TYPE.ServerDone,
+      });
+    },
+    handleServerDone() {
+      const indexes = [];
+      for (let index = 0; index < this.fileSize; index += MAX_CHUNK_SIZE) {
+        if (!this.client.received.includes(index)) {
+          indexes.push(index);
+        }
+      }
+      if (indexes.length) {
+        this.sendClientSeek(indexes);
+      } else {
+        this.sendClientDone();
+        this.clientDownloadFile();
       }
     },
+    sendClientSeek(indexes = null) {
+      this.connection.send({
+        type: MESSAGE_TYPE.ClientSeek,
+        indexes,
+      });
+    },
+    handleClientSeek(data) {
+      if (data.indexes) {
+        data.indexes.forEach((index) => {
+          setTimeout(() => this.sendServerChunk(index));
+        });
+      } else {
+        for (let index = 0; index < this.fileSize; index += MAX_CHUNK_SIZE) {
+          setTimeout(() => this.sendServerChunk(index));
+        }
+      }
+      setTimeout(this.sendServerDone);
+    },
+    sendClientDone() {
+      this.connection.send({
+        type: MESSAGE_TYPE.ClientDone,
+      });
+    },
+    handleClientDone() {
+      this.connection.close();
+    },
+    // UI EVENTS
     onFileChange(event) {
-      console.log(event.target.files[0]);
-      const file = event.target.files[0]; // TODO multiple files
+      const [file] = event.target.files; // TODO multiple files
       if (!file) {
         return;
       }
       this.fileName = file.name;
       this.fileSize = file.size;
-      this.data = null;
+      this.server.data = null;
       const reader = new FileReader();
       reader.onload = () => {
-        this.data = reader.result;
-        if (this.isConnected) {
-          this.serverInfo();
-        }
+        this.server.data = reader.result;
       };
       reader.onerror = () => {
-        // TODO handle file reading error
+        this.error = "Error reading file";
       };
-      reader.readAsArrayBuffer(file); // TODO check ArrayBuffer.prototype.maxByteLength
+      reader.readAsArrayBuffer(file);
     },
-    initApp() {
-      this.initPeer();
+    onDownload() {
+      this.client.downloadStart = new Date();
+      this.sendClientSeek();
     },
+    onCopy() {
+      try {
+        navigator.share({
+          url: this.server.url,
+        })
+      } catch {
+        utils.copyToClipboard(this.server.url);
+      }
+    }
   },
 });
 
diff --git a/package-lock.json b/package-lock.json
index 5383acc..31093cd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,58 @@
       "devDependencies": {
         "@eslint/js": "^9.21.0",
         "eslint": "^9.21.0",
-        "eslint-config-prettier": "^10.1.1",
-        "eslint-plugin-prettier": "^5.2.3",
+        "eslint-config-prettier": "^10.0.2",
         "eslint-plugin-vue": "^9.32.0",
         "globals": "^16.0.0",
-        "prettier": "^3.5.3"
+        "lucide": "^0.482.0",
+        "peerjs": "^1.5.4",
+        "vue": "^3.5.13"
+      }
+    },
+    "node_modules/@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@babel/parser": {
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.10.tgz",
+      "integrity": "sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.26.10"
+      },
+      "bin": {
+        "parser": "bin/babel-parser.js"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@babel/types": {
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz",
+      "integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@eslint-community/eslint-utils": {
@@ -219,16 +266,19 @@
         "url": "https://github.com/sponsors/nzakas"
       }
     },
-    "node_modules/@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true
+    },
+    "node_modules/@msgpack/msgpack": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-2.8.0.tgz",
+      "integrity": "sha512-h9u4u/jiIRKbq25PM+zymTyW6bhTzELvOoUd+AvYriWOAKpLGnIamaET3pnHYoI5iYphAHBI4ayx0MehR+VVPQ==",
       "dev": true,
       "engines": {
-        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
+        "node": ">= 10"
       }
     },
     "node_modules/@types/estree": {
@@ -243,6 +293,106 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "node_modules/@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/compiler-sfc": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.48",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "node_modules/@vue/compiler-ssr": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dev": true,
+      "dependencies": {
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/runtime-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "dev": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "node_modules/@vue/runtime-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "dev": true,
+      "dependencies": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "csstype": "^3.1.3"
+      }
+    },
+    "node_modules/@vue/server-renderer": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
+      },
+      "peerDependencies": {
+        "vue": "3.5.13"
+      }
+    },
+    "node_modules/@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
     "node_modules/acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -398,6 +548,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -421,6 +577,18 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "node_modules/entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -505,36 +673,6 @@
         "eslint": ">=7.0.0"
       }
     },
-    "node_modules/eslint-plugin-prettier": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.3.tgz",
-      "integrity": "sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==",
-      "dev": true,
-      "dependencies": {
-        "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.9.1"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/eslint-plugin-prettier"
-      },
-      "peerDependencies": {
-        "@types/eslint": ">=8.0.0",
-        "eslint": ">=8.0.0",
-        "eslint-config-prettier": "*",
-        "prettier": ">=3.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/eslint": {
-          "optional": true
-        },
-        "eslint-config-prettier": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/eslint-plugin-vue": {
       "version": "9.33.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.33.0.tgz",
@@ -650,6 +788,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -659,18 +803,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
-    "node_modules/fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
-    },
     "node_modules/fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -903,6 +1047,21 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/lucide": {
+      "version": "0.482.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.482.0.tgz",
+      "integrity": "sha512-drJOzPud1QGiCgnkhUBuSKvShaD6LJovgKtHDJfvqKrzA0osfU284rymlXxjVWlp5A+S8JiCcIfgENvXlKsO7Q==",
+      "dev": true
+    },
+    "node_modules/magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -921,6 +1080,24 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.10.tgz",
+      "integrity": "sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -1016,6 +1193,72 @@
         "node": ">=8"
       }
     },
+    "node_modules/peerjs": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/peerjs/-/peerjs-1.5.4.tgz",
+      "integrity": "sha512-yFsoLMnurJKlQbx6kVSBpOp+AlNldY1JQS2BrSsHLKCZnq6t7saHleuHM5svuLNbQkUJXHLF3sKOJB1K0xulOw==",
+      "dev": true,
+      "dependencies": {
+        "@msgpack/msgpack": "^2.8.0",
+        "eventemitter3": "^4.0.7",
+        "peerjs-js-binarypack": "^2.1.0",
+        "webrtc-adapter": "^9.0.0"
+      },
+      "engines": {
+        "node": ">= 14"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/peer"
+      }
+    },
+    "node_modules/peerjs-js-binarypack": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/peerjs-js-binarypack/-/peerjs-js-binarypack-2.1.0.tgz",
+      "integrity": "sha512-YIwCC+pTzp3Bi8jPI9UFKO0t0SLo6xALnHkiNt/iUFmUUZG0fEEmEyFKvjsDKweiFitzHRyhuh6NvyJZ4nNxMg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/peer"
+      }
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "node_modules/postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -1038,33 +1281,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/prettier": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
-      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "dev": true,
-      "bin": {
-        "prettier": "bin/prettier.cjs"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/prettier/prettier?sponsor=1"
-      }
-    },
-    "node_modules/prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-      "dev": true,
-      "dependencies": {
-        "fast-diff": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -1083,6 +1299,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==",
+      "dev": true
+    },
     "node_modules/semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -1116,6 +1338,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -1140,28 +1371,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/synckit": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
-      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
-      "dev": true,
-      "dependencies": {
-        "@pkgr/core": "^0.1.0",
-        "tslib": "^2.6.2"
-      },
-      "engines": {
-        "node": "^14.18.0 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://opencollective.com/unts"
-      }
-    },
-    "node_modules/tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -1201,6 +1410,27 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/vue": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "dev": true,
+      "dependencies": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
+      },
+      "peerDependencies": {
+        "typescript": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
@@ -1270,6 +1500,19 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/webrtc-adapter": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz",
+      "integrity": "sha512-1AQO+d4ElfVSXyzNVTOewgGT/tAomwwztX/6e3totvyyzXPvXIIuUUjAmyZGbKBKbZOXauuJooZm3g6IuFuiNQ==",
+      "dev": true,
+      "dependencies": {
+        "sdp": "^3.2.0"
+      },
+      "engines": {
+        "node": ">=6.0.0",
+        "npm": ">=3.10.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -1317,6 +1560,37 @@
     }
   },
   "dependencies": {
+    "@babel/helper-string-parser": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz",
+      "integrity": "sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==",
+      "dev": true
+    },
+    "@babel/helper-validator-identifier": {
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz",
+      "integrity": "sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==",
+      "dev": true
+    },
+    "@babel/parser": {
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.10.tgz",
+      "integrity": "sha512-6aQR2zGE/QFi8JpDLjUZEPYOs7+mhKXm86VaKFiLP35JQwQb6bwUE+XbvkH0EptsYhbNBSUGaUBLKqxH1xSgsA==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.26.10"
+      }
+    },
+    "@babel/types": {
+      "version": "7.26.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.10.tgz",
+      "integrity": "sha512-emqcG3vHrpxUKTrxcblR36dcrcoRDvKmnL/dCL6ZsHaShW80qxCAcNhzQZrpeM765VzEos+xOi4s+r4IXzTwdQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-string-parser": "^7.25.9",
+        "@babel/helper-validator-identifier": "^7.25.9"
+      }
+    },
     "@eslint-community/eslint-utils": {
       "version": "4.5.1",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.5.1.tgz",
@@ -1449,10 +1723,16 @@
       "integrity": "sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==",
       "dev": true
     },
-    "@pkgr/core": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz",
-      "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==",
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
+      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "dev": true
+    },
+    "@msgpack/msgpack": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/@msgpack/msgpack/-/msgpack-2.8.0.tgz",
+      "integrity": "sha512-h9u4u/jiIRKbq25PM+zymTyW6bhTzELvOoUd+AvYriWOAKpLGnIamaET3pnHYoI5iYphAHBI4ayx0MehR+VVPQ==",
       "dev": true
     },
     "@types/estree": {
@@ -1467,6 +1747,103 @@
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
       "dev": true
     },
+    "@vue/compiler-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.5.13.tgz",
+      "integrity": "sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.25.3",
+        "@vue/shared": "3.5.13",
+        "entities": "^4.5.0",
+        "estree-walker": "^2.0.2",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "@vue/compiler-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.5.13.tgz",
+      "integrity": "sha512-ZOJ46sMOKUjO3e94wPdCzQ6P1Lx/vhp2RSvfaab88Ajexs0AHeV0uasYhi99WPaogmBlRHNRuly8xV75cNTMDA==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-core": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/compiler-sfc": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.5.13.tgz",
+      "integrity": "sha512-6VdaljMpD82w6c2749Zhf5T9u5uLBWKnVue6XWxprDobftnletJ8+oel7sexFfM3qIxNmVE7LSFGTpv6obNyaQ==",
+      "dev": true,
+      "requires": {
+        "@babel/parser": "^7.25.3",
+        "@vue/compiler-core": "3.5.13",
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "estree-walker": "^2.0.2",
+        "magic-string": "^0.30.11",
+        "postcss": "^8.4.48",
+        "source-map-js": "^1.2.0"
+      }
+    },
+    "@vue/compiler-ssr": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.5.13.tgz",
+      "integrity": "sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/reactivity": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.5.13.tgz",
+      "integrity": "sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==",
+      "dev": true,
+      "requires": {
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/runtime-core": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.5.13.tgz",
+      "integrity": "sha512-Fj4YRQ3Az0WTZw1sFe+QDb0aXCerigEpw418pw1HBUKFtnQHWzwojaukAs2X/c9DQz4MQ4bsXTGlcpGxU/RCIw==",
+      "dev": true,
+      "requires": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/runtime-dom": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.5.13.tgz",
+      "integrity": "sha512-dLaj94s93NYLqjLiyFzVs9X6dWhTdAlEAciC3Moq7gzAc13VJUdCnjjRurNM6uTLFATRHexHCTu/Xp3eW6yoog==",
+      "dev": true,
+      "requires": {
+        "@vue/reactivity": "3.5.13",
+        "@vue/runtime-core": "3.5.13",
+        "@vue/shared": "3.5.13",
+        "csstype": "^3.1.3"
+      }
+    },
+    "@vue/server-renderer": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.5.13.tgz",
+      "integrity": "sha512-wAi4IRJV/2SAW3htkTlB+dHeRmpTiVIK1OGLWV1yeStVSebSQQOwGwIq0D3ZIoBj2C2qpgz5+vX9iEBkTdk5YA==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-ssr": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
+    "@vue/shared": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.5.13.tgz",
+      "integrity": "sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==",
+      "dev": true
+    },
     "acorn": {
       "version": "8.14.1",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
@@ -1583,6 +1960,12 @@
       "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
       "dev": true
     },
+    "csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
+    },
     "debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -1598,6 +1981,12 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
       "dev": true
     },
+    "entities": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+      "dev": true
+    },
     "escape-string-regexp": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
@@ -1654,16 +2043,6 @@
       "dev": true,
       "requires": {}
     },
-    "eslint-plugin-prettier": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.2.3.tgz",
-      "integrity": "sha512-qJ+y0FfCp/mQYQ/vWQ3s7eUlFEL4PyKfAJxsnYTJ4YT73nsJBWqmEpFryxV9OeUiqmsTsYJ5Y+KDNaeP31wrRw==",
-      "dev": true,
-      "requires": {
-        "prettier-linter-helpers": "^1.0.0",
-        "synckit": "^0.9.1"
-      }
-    },
     "eslint-plugin-vue": {
       "version": "9.33.0",
       "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.33.0.tgz",
@@ -1742,24 +2121,30 @@
       "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==",
+      "dev": true
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
       "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
       "dev": true
     },
+    "eventemitter3": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
+      "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
+      "dev": true
+    },
     "fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
-    "fast-diff": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
-      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-      "dev": true
-    },
     "fast-json-stable-stringify": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
@@ -1938,6 +2323,21 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "lucide": {
+      "version": "0.482.0",
+      "resolved": "https://registry.npmjs.org/lucide/-/lucide-0.482.0.tgz",
+      "integrity": "sha512-drJOzPud1QGiCgnkhUBuSKvShaD6LJovgKtHDJfvqKrzA0osfU284rymlXxjVWlp5A+S8JiCcIfgENvXlKsO7Q==",
+      "dev": true
+    },
+    "magic-string": {
+      "version": "0.30.17",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.17.tgz",
+      "integrity": "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/sourcemap-codec": "^1.5.0"
+      }
+    },
     "minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -1953,6 +2353,12 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "nanoid": {
+      "version": "3.3.10",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.10.tgz",
+      "integrity": "sha512-vSJJTG+t/dIKAUhUDw/dLdZ9s//5OxcHqLaDWWrW4Cdq7o6tdLIczUkMXt2MBNmk6sJRZBZRXVixs7URY1CmIg==",
+      "dev": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
@@ -2021,6 +2427,41 @@
       "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
       "dev": true
     },
+    "peerjs": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/peerjs/-/peerjs-1.5.4.tgz",
+      "integrity": "sha512-yFsoLMnurJKlQbx6kVSBpOp+AlNldY1JQS2BrSsHLKCZnq6t7saHleuHM5svuLNbQkUJXHLF3sKOJB1K0xulOw==",
+      "dev": true,
+      "requires": {
+        "@msgpack/msgpack": "^2.8.0",
+        "eventemitter3": "^4.0.7",
+        "peerjs-js-binarypack": "^2.1.0",
+        "webrtc-adapter": "^9.0.0"
+      }
+    },
+    "peerjs-js-binarypack": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/peerjs-js-binarypack/-/peerjs-js-binarypack-2.1.0.tgz",
+      "integrity": "sha512-YIwCC+pTzp3Bi8jPI9UFKO0t0SLo6xALnHkiNt/iUFmUUZG0fEEmEyFKvjsDKweiFitzHRyhuh6NvyJZ4nNxMg==",
+      "dev": true
+    },
+    "picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "dev": true
+    },
+    "postcss": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
+      "integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.3.8",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      }
+    },
     "postcss-selector-parser": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
@@ -2037,21 +2478,6 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
-    "prettier": {
-      "version": "3.5.3",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
-      "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
-      "dev": true
-    },
-    "prettier-linter-helpers": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
-      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
-      "dev": true,
-      "requires": {
-        "fast-diff": "^1.1.2"
-      }
-    },
     "punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -2064,6 +2490,12 @@
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
       "dev": true
     },
+    "sdp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/sdp/-/sdp-3.2.0.tgz",
+      "integrity": "sha512-d7wDPgDV3DDiqulJjKiV2865wKsJ34YI+NDREbm+FySq6WuKOikwyNQcm+doLAZ1O6ltdO0SeKle2xMpN3Brgw==",
+      "dev": true
+    },
     "semver": {
       "version": "7.7.1",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
@@ -2085,6 +2517,12 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true
+    },
     "strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -2100,22 +2538,6 @@
         "has-flag": "^4.0.0"
       }
     },
-    "synckit": {
-      "version": "0.9.2",
-      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.9.2.tgz",
-      "integrity": "sha512-vrozgXDQwYO72vHjUb/HnFbQx1exDjoKzqx23aXEg2a9VIg2TSFZ8FmeZpTjUCFMYw7mpX4BE2SFu8wI7asYsw==",
-      "dev": true,
-      "requires": {
-        "@pkgr/core": "^0.1.0",
-        "tslib": "^2.6.2"
-      }
-    },
-    "tslib": {
-      "version": "2.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
-      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "dev": true
-    },
     "type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -2146,6 +2568,19 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "vue": {
+      "version": "3.5.13",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz",
+      "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==",
+      "dev": true,
+      "requires": {
+        "@vue/compiler-dom": "3.5.13",
+        "@vue/compiler-sfc": "3.5.13",
+        "@vue/runtime-dom": "3.5.13",
+        "@vue/server-renderer": "3.5.13",
+        "@vue/shared": "3.5.13"
+      }
+    },
     "vue-eslint-parser": {
       "version": "9.4.3",
       "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.4.3.tgz",
@@ -2190,6 +2625,15 @@
         }
       }
     },
+    "webrtc-adapter": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-9.0.1.tgz",
+      "integrity": "sha512-1AQO+d4ElfVSXyzNVTOewgGT/tAomwwztX/6e3totvyyzXPvXIIuUUjAmyZGbKBKbZOXauuJooZm3g6IuFuiNQ==",
+      "dev": true,
+      "requires": {
+        "sdp": "^3.2.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 9956ae6..c42f672 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,9 @@
     "eslint": "^9.21.0",
     "eslint-config-prettier": "^10.0.2",
     "eslint-plugin-vue": "^9.32.0",
-    "globals": "^16.0.0"
+    "globals": "^16.0.0",
+    "lucide": "^0.482.0",
+    "peerjs": "^1.5.4",
+    "vue": "^3.5.13"
   }
 }