[WIP] Update

package.json

@@ -18,6 +18,7 @@
   "scripts": {
     "dev": "vite",
     "pre-commit": "lint-staged",
+    "pre-build": "run-s pre-build:*",
     "pre-build:license-report": "node license-emit.js",
     "build": "run-s pre-build build:*",
     "build:vite": "tsc && vite build",
@@ -27,16 +28,24 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@excalidraw/excalidraw": "^0.15.2",
     "@fontsource/roboto": "^5.0.5",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
-    "@mui/styled-engine-sc": "^5.12.0",
     "dexie": "^3.2.4",
     "dexie-react-hooks": "^1.1.6",
+    "i18next": "^23.2.11",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-http-backend": "^2.2.1",
     "jotai": "^2.2.2",
+    "just-diff": "^6.0.2",
+    "just-diff-apply": "^5.5.0",
+    "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.0.2",
     "react-router-dom": "^6.14.2",
     "styled-components": "^6.0.4",
     "ts-pattern": "^5.0.4",

pnpm-lock.yaml

@@ -5,6 +5,12 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@emotion/react':
+    specifier: ^11.11.1
+    version: 11.11.1(@types/react@18.2.14)(react@18.2.0)
+  '@emotion/styled':
+    specifier: ^11.11.0
+    version: 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
   '@excalidraw/excalidraw':
     specifier: ^0.15.2
     version: 0.15.2(react-dom@18.2.0)(react@18.2.0)
@@ -16,25 +22,43 @@ dependencies:
     version: 5.14.1(@mui/material@5.14.1)(@types/react@18.2.14)(react@18.2.0)
   '@mui/material':
     specifier: ^5.14.1
-    version: 5.14.1(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+    version: 5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
-  '@mui/styled-engine-sc':
-    specifier: ^5.12.0
-    version: 5.12.0(styled-components@6.0.4)
   dexie:
     specifier: ^3.2.4
     version: 3.2.4
   dexie-react-hooks:
     specifier: ^1.1.6
     version: 1.1.6(@types/react@18.2.14)(dexie@3.2.4)(react@18.2.0)
+  i18next:
+    specifier: ^23.2.11
+    version: 23.2.11
+  i18next-browser-languagedetector:
+    specifier: ^7.1.0
+    version: 7.1.0
+  i18next-http-backend:
+    specifier: ^2.2.1
+    version: 2.2.1
   jotai:
     specifier: ^2.2.2
     version: 2.2.2(react@18.2.0)
+  just-diff:
+    specifier: ^6.0.2
+    version: 6.0.2
+  just-diff-apply:
+    specifier: ^5.5.0
+    version: 5.5.0
+  qrcode.react:
+    specifier: ^3.1.0
+    version: 3.1.0(react@18.2.0)
   react:
     specifier: ^18.2.0
     version: 18.2.0
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-i18next:
+    specifier: ^13.0.2
+    version: 13.0.2(i18next@23.2.11)(react-dom@18.2.0)(react@18.2.0)
   react-router-dom:
     specifier: ^6.14.2
     version: 6.14.2(react-dom@18.2.0)(react@18.2.0)
@@ -1447,6 +1471,22 @@ packages:
       to-fast-properties: 2.0.0
     dev: false
 
+  /@emotion/babel-plugin@11.11.0:
+    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
+    dependencies:
+      '@babel/helper-module-imports': 7.22.5
+      '@babel/runtime': 7.22.6
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/serialize': 1.1.2
+      babel-plugin-macros: 3.1.0
+      convert-source-map: 1.9.0
+      escape-string-regexp: 4.0.0
+      find-root: 1.1.0
+      source-map: 0.5.7
+      stylis: 4.2.0
+    dev: false
+
   /@emotion/cache@11.11.0:
     resolution: {integrity: sha512-P34z9ssTCBi3e9EI1ZsWpNHcfY1r09ZO0rZbRO2ob3ZQMnFI35jB536qoXbkdesr5EUhYi22anuEJuyxifaqAQ==}
     dependencies:
@@ -1457,6 +1497,10 @@ packages:
       stylis: 4.2.0
     dev: false
 
+  /@emotion/hash@0.9.1:
+    resolution: {integrity: sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==}
+    dev: false
+
   /@emotion/is-prop-valid@1.2.1:
     resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
     dependencies:
@@ -1467,14 +1511,74 @@ packages:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
     dev: false
 
+  /@emotion/react@11.11.1(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==}
+    peerDependencies:
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/cache': 11.11.0
+      '@emotion/serialize': 1.1.2
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
+      '@emotion/utils': 1.2.1
+      '@emotion/weak-memoize': 0.3.1
+      '@types/react': 18.2.14
+      hoist-non-react-statics: 3.3.2
+      react: 18.2.0
+    dev: false
+
+  /@emotion/serialize@1.1.2:
+    resolution: {integrity: sha512-zR6a/fkFP4EAcCMQtLOhIgpprZOwNmCldtpaISpvz348+DP4Mz8ZoKaGGCQpbzepNIUWbq4w6hNZkwDyKoS+HA==}
+    dependencies:
+      '@emotion/hash': 0.9.1
+      '@emotion/memoize': 0.8.1
+      '@emotion/unitless': 0.8.1
+      '@emotion/utils': 1.2.1
+      csstype: 3.1.2
+    dev: false
+
   /@emotion/sheet@1.2.2:
     resolution: {integrity: sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==}
     dev: false
 
+  /@emotion/styled@11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==}
+    peerDependencies:
+      '@emotion/react': ^11.0.0-rc.0
+      '@types/react': '*'
+      react: '>=16.8.0'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      '@emotion/babel-plugin': 11.11.0
+      '@emotion/is-prop-valid': 1.2.1
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/serialize': 1.1.2
+      '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0)
+      '@emotion/utils': 1.2.1
+      '@types/react': 18.2.14
+      react: 18.2.0
+    dev: false
+
   /@emotion/unitless@0.8.1:
     resolution: {integrity: sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==}
     dev: false
 
+  /@emotion/use-insertion-effect-with-fallbacks@1.0.1(react@18.2.0):
+    resolution: {integrity: sha512-jT/qyKZ9rzLErtrjGgdkMBn2OP8wl0G3sQlBb3YPryvKHsjvINUhVaPFfP+fpBcOkmrVOVEEHQFJ7nbj2TH2gw==}
+    peerDependencies:
+      react: '>=16.8.0'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /@emotion/utils@1.2.1:
     resolution: {integrity: sha512-Y2tGf3I+XVnajdItskUCn6LX+VUDmP6lTL4fcqsXAv43dnlbZiuW4MWQW38rW/BVWSE7Q/7+XQocmpnRYILUmg==}
     dev: false
@@ -1830,12 +1934,12 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.6
-      '@mui/material': 5.14.1(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@mui/material': 5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@types/react': 18.2.14
       react: 18.2.0
     dev: false
 
-  /@mui/material@5.14.1(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
+  /@mui/material@5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-WtsgYuageTunLfxH3Ri+o1RuQTFImtRHxMcVNyD0Hhd2/znjW6KODNz0XfjvLRnNCAynBxZNiflcoIBW40h9PQ==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -1853,9 +1957,11 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.6
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
       '@mui/base': 5.0.0-beta.8(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
       '@mui/core-downloads-tracker': 5.14.1
-      '@mui/system': 5.14.1(@types/react@18.2.14)(react@18.2.0)
+      '@mui/system': 5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0)
       '@mui/types': 7.2.4(@types/react@18.2.14)
       '@mui/utils': 5.14.1(react@18.2.0)
       '@types/react': 18.2.14
@@ -1886,22 +1992,7 @@ packages:
       react: 18.2.0
     dev: false
 
-  /@mui/styled-engine-sc@5.12.0(styled-components@6.0.4):
+  /@mui/styled-engine@5.13.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0):
-    resolution: {integrity: sha512-3MgYoY2YG5tx0E5oKqvCv94oL0ABVBr+qpcyvciXW/v0wzPG6bXvuZV80GHYlJfasgnnRa1AbRWf5a9FcX8v6g==}
-    engines: {node: '>=12.0.0'}
-    peerDependencies:
-      '@types/styled-components': ^5.1.14
-      styled-components: ^5.3.1
-    peerDependenciesMeta:
-      '@types/styled-components':
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.22.6
-      prop-types: 15.8.1
-      styled-components: 6.0.4(react-dom@18.2.0)(react@18.2.0)
-    dev: false
-
-  /@mui/styled-engine@5.13.2(react@18.2.0):
     resolution: {integrity: sha512-VCYCU6xVtXOrIN8lcbuPmoG+u7FYuOERG++fpY74hPpEWkyFQG97F+/XfTQVYzlR2m7nPjnwVUgATcTCMEaMvw==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -1916,12 +2007,14 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.6
       '@emotion/cache': 11.11.0
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
       csstype: 3.1.2
       prop-types: 15.8.1
       react: 18.2.0
     dev: false
 
-  /@mui/system@5.14.1(@types/react@18.2.14)(react@18.2.0):
+  /@mui/system@5.14.1(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(@types/react@18.2.14)(react@18.2.0):
     resolution: {integrity: sha512-u+xlsU34Jdkgx1CxmBnIC4Y08uPdVX5iEd3S/1dggDFtOGp+Lj8xmKRJAQ8PJOOJLOh8pDwaZx4AwXikL4l1QA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -1938,8 +2031,10 @@ packages:
         optional: true
     dependencies:
       '@babel/runtime': 7.22.6
+      '@emotion/react': 11.11.1(@types/react@18.2.14)(react@18.2.0)
+      '@emotion/styled': 11.11.0(@emotion/react@11.11.1)(@types/react@18.2.14)(react@18.2.0)
       '@mui/private-theming': 5.13.7(@types/react@18.2.14)(react@18.2.0)
-      '@mui/styled-engine': 5.13.2(react@18.2.0)
+      '@mui/styled-engine': 5.13.2(@emotion/react@11.11.1)(@emotion/styled@11.11.0)(react@18.2.0)
       '@mui/types': 7.2.4(@types/react@18.2.14)
       '@mui/utils': 5.14.1(react@18.2.0)
       '@types/react': 18.2.14
@@ -2147,6 +2242,10 @@ packages:
     resolution: {integrity: sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==}
     dev: true
 
+  /@types/parse-json@4.0.0:
+    resolution: {integrity: sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==}
+    dev: false
+
   /@types/prop-types@15.7.5:
     resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==}
 
@@ -2440,6 +2539,15 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /babel-plugin-macros@3.1.0:
+    resolution: {integrity: sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==}
+    engines: {node: '>=10', npm: '>=6'}
+    dependencies:
+      '@babel/runtime': 7.22.6
+      cosmiconfig: 7.1.0
+      resolve: 1.22.2
+    dev: false
+
   /babel-plugin-polyfill-corejs2@0.4.4(@babel/core@7.22.9):
     resolution: {integrity: sha512-9WeK9snM1BfxB38goUEv2FLnA6ja07UMfazFHzCXUb3NyDZAwfXvQiURQ6guTTMeHcOsdknULm1PDhs4uWtKyA==}
     peerDependencies:
@@ -2536,7 +2644,6 @@ packages:
   /callsites@3.1.0:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
-    dev: true
 
   /camelize@1.0.1:
     resolution: {integrity: sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==}
@@ -2663,6 +2770,25 @@ packages:
       browserslist: 4.21.9
     dev: false
 
+  /cosmiconfig@7.1.0:
+    resolution: {integrity: sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: false
+
+  /cross-fetch@3.1.6:
+    resolution: {integrity: sha512-riRvo06crlE8HiqOwIpQhxwdOk4fOeR7FVM/wXoxchFEqMNUjvbs3bfo4OTgMEMHzppd4DxFBDbyySj8Cv781g==}
+    dependencies:
+      node-fetch: 2.6.12
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
   /cross-spawn@6.0.5:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
     engines: {node: '>=4.8'}
@@ -2801,7 +2927,6 @@ packages:
     resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}
     dependencies:
       is-arrayish: 0.2.1
-    dev: true
 
   /es-abstract@1.22.1:
     resolution: {integrity: sha512-ioRRcXMO6OFyRpyzV3kE1IIBd4WG5/kltnzdxSCqoP8CMGs/Li+M1uF5o7lOkZVFjDs+NLesthnF66Pg/0q0Lw==}
@@ -2908,7 +3033,6 @@ packages:
   /escape-string-regexp@4.0.0:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
-    dev: true
 
   /eslint-plugin-react-hooks@4.6.0(eslint@8.44.0):
     resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==}
@@ -3090,6 +3214,10 @@ packages:
     dependencies:
       to-regex-range: 5.0.1
 
+  /find-root@1.1.0:
+    resolution: {integrity: sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==}
+    dev: false
+
   /find-up@5.0.0:
     resolution: {integrity: sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==}
     engines: {node: '>=10'}
@@ -3324,10 +3452,22 @@ packages:
     dependencies:
       function-bind: 1.1.1
 
+  /hoist-non-react-statics@3.3.2:
+    resolution: {integrity: sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==}
+    dependencies:
+      react-is: 16.13.1
+    dev: false
+
   /hosted-git-info@2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
 
+  /html-parse-stringify@3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+    dependencies:
+      void-elements: 3.1.0
+    dev: false
+
   /http-cache-semantics@4.1.1:
     resolution: {integrity: sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==}
     dev: true
@@ -3351,6 +3491,26 @@ packages:
     hasBin: true
     dev: true
 
+  /i18next-browser-languagedetector@7.1.0:
+    resolution: {integrity: sha512-cr2k7u1XJJ4HTOjM9GyOMtbOA47RtUoWRAtt52z43r3AoMs2StYKyjS3URPhzHaf+mn10hY9dZWamga5WPQjhA==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+    dev: false
+
+  /i18next-http-backend@2.2.1:
+    resolution: {integrity: sha512-ZXIdn/8NJIBJ0X4hzXfc3STYxKrCKh1fYjji9HPyIpEJfvTvy8/ZlTl8RuTizzCPj2ZcWrfaecyOMKs6bQ7u5A==}
+    dependencies:
+      cross-fetch: 3.1.6
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
+  /i18next@23.2.11:
+    resolution: {integrity: sha512-MA4FsxOjyCaOZtRDB4yuwjCvqYEioD4G4LlXOn7SO3rnQUlxTufyLsOqfL9MKakeLRBkefe8bqcs0D6Z/xFk1w==}
+    dependencies:
+      '@babel/runtime': 7.22.6
+    dev: false
+
   /ignore@5.2.4:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
@@ -3362,7 +3522,6 @@ packages:
     dependencies:
       parent-module: 1.0.1
       resolve-from: 4.0.0
-    dev: true
 
   /imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
@@ -3406,7 +3565,6 @@ packages:
 
   /is-arrayish@0.2.1:
     resolution: {integrity: sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==}
-    dev: true
 
   /is-bigint@1.0.4:
     resolution: {integrity: sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==}
@@ -3584,6 +3742,10 @@ packages:
     resolution: {integrity: sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==}
     dev: true
 
+  /json-parse-even-better-errors@2.3.1:
+    resolution: {integrity: sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==}
+    dev: false
+
   /json-schema-traverse@0.4.1:
     resolution: {integrity: sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==}
     dev: true
@@ -3606,6 +3768,14 @@ packages:
       graceful-fs: 4.2.11
     dev: true
 
+  /just-diff-apply@5.5.0:
+    resolution: {integrity: sha512-OYTthRfSh55WOItVqwpefPtNt2VdKsq5AnAK6apdtR6yCH8pr0CmSr710J0Mf+WdQy7K/OzMy7K2MgAfdQURDw==}
+    dev: false
+
+  /just-diff@6.0.2:
+    resolution: {integrity: sha512-S59eriX5u3/QhMNq3v/gm8Kd0w8OS6Tz2FS1NG4blv+z0MuQcBRJyFWjdovM0Rad4/P4aUPFtnkNjMjyMlMSYA==}
+    dev: false
+
   /keyv@4.5.3:
     resolution: {integrity: sha512-QCiSav9WaX1PgETJ+SpNnx2PRRapJ/oRSXM4VO5OGYGSjrxbKPVFVhB3l2OCbLCk329N8qyAtsJjSjvVBWzEug==}
     dependencies:
@@ -3643,6 +3813,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /lines-and-columns@1.2.4:
+    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
+    dev: false
+
   /lint-staged@13.2.3:
     resolution: {integrity: sha512-zVVEXLuQIhr1Y7R7YAWx4TZLdvuzk7DnmrsTNL0fax6Z3jrpFcas+vKbzxhhvp6TA55m1SQuWkpzI1qbfDZbAg==}
     engines: {node: ^14.13.1 || >=16.0.0}
@@ -3837,6 +4011,18 @@ packages:
       tslib: 2.6.0
     dev: true
 
+  /node-fetch@2.6.12:
+    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
+    engines: {node: 4.x || >=6.0.0}
+    peerDependencies:
+      encoding: ^0.1.0
+    peerDependenciesMeta:
+      encoding:
+        optional: true
+    dependencies:
+      whatwg-url: 5.0.0
+    dev: false
+
   /node-releases@2.0.13:
     resolution: {integrity: sha512-uYr7J37ae/ORWdZeQ1xxMJe3NtdmqMC/JZK+geofDrkLUApKRHPd18/TxtBOJ4A0/+uUIliorNrfYV6s1b02eQ==}
     dev: false
@@ -3968,7 +4154,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       callsites: 3.1.0
-    dev: true
 
   /parse-json@4.0.0:
     resolution: {integrity: sha512-aOIos8bujGN93/8Ox/jPLh7RwVnPEysynVFE+fQZyg6jKELEHwzgKdLRFHUgXJL6kylijVSBC4BvN9OmsB48Rw==}
@@ -3978,6 +4163,16 @@ packages:
       json-parse-better-errors: 1.0.2
     dev: true
 
+  /parse-json@5.2.0:
+    resolution: {integrity: sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==}
+    engines: {node: '>=8'}
+    dependencies:
+      '@babel/code-frame': 7.22.5
+      error-ex: 1.3.2
+      json-parse-even-better-errors: 2.3.1
+      lines-and-columns: 1.2.4
+    dev: false
+
   /path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4015,7 +4210,6 @@ packages:
   /path-type@4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
     engines: {node: '>=8'}
-    dev: true
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -4082,6 +4276,14 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /qrcode.react@3.1.0(react@18.2.0):
+    resolution: {integrity: sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -4111,6 +4313,26 @@ packages:
       scheduler: 0.23.0
     dev: false
 
+  /react-i18next@13.0.2(i18next@23.2.11)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-NEVxC32v0oR4egwYM0QM0WE93AiJG5r0NTXTL8mhQfAhsMfDS2fSO6jpluyfsfypP988KzUQrAXncspcJ7+GHA==}
+    peerDependencies:
+      i18next: '>= 23.2.3'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.6
+      html-parse-stringify: 3.0.1
+      i18next: 23.2.11
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
     dev: false
@@ -4236,7 +4458,6 @@ packages:
   /resolve-from@4.0.0:
     resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
     engines: {node: '>=4'}
-    dev: true
 
   /resolve@1.22.2:
     resolution: {integrity: sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==}
@@ -4430,6 +4651,11 @@ packages:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
 
+  /source-map@0.5.7:
+    resolution: {integrity: sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /spdx-correct@3.2.0:
     resolution: {integrity: sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==}
     dependencies:
@@ -4639,6 +4865,10 @@ packages:
     dependencies:
       is-number: 7.0.0
 
+  /tr46@0.0.3:
+    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
+    dev: false
+
   /ts-pattern@5.0.4:
     resolution: {integrity: sha512-D5iVliqugv2C9541W2CNXFYNEZxr4TiHuLPuf49tKEdQFp/8y8fR0v1RExUvXkiWozKCwE7zv07C6EKxf0lKuQ==}
     dev: false
@@ -4857,6 +5087,22 @@ packages:
       fsevents: 2.3.2
     dev: true
 
+  /void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /webidl-conversions@3.0.1:
+    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
+    dev: false
+
+  /whatwg-url@5.0.0:
+    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
+    dependencies:
+      tr46: 0.0.3
+      webidl-conversions: 3.0.1
+    dev: false
+
   /which-boxed-primitive@1.0.2:
     resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
     dependencies:
@@ -4922,6 +5168,11 @@ packages:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
     dev: true
 
+  /yaml@1.10.2:
+    resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /yaml@2.3.1:
     resolution: {integrity: sha512-2eHWfjaoXgTBC2jNM1LRef62VQa0umtvRiDSk6HSzW7RvS5YtkabJrwYLLEKWBc8a5U2PTSCs+dJjUTJdlHsWQ==}
     engines: {node: '>= 14'}

src/Components/Excalidraw.tsx

@@ -3,7 +3,7 @@ import ExcalidrawContainer from './Excalidraw/Container';
 import { useCallback, useState } from 'react';
 import Sidebar, { SidebarVariant } from './Excalidraw/Sidebar';
 import RightTopUI from './Excalidraw/RightTopUI';
-import MainMenu from './Excalidraw/MainMenu';
+import MainMenuBase from './Excalidraw/MainMenu';
 
 export const ExcalidrawMain = () => {
   const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI>();
@@ -13,10 +13,7 @@ export const ExcalidrawMain = () => {
 
   const [toggleState, setToggleState] = useState<boolean>(false);
 
-  const onClose = useCallback(
+  const onClose = useCallback(() => setToggleState(false), []);
-    () => setToggleState(!toggleState),
-    [toggleState]
-  );
 
   return (
     <ExcalidrawContainer
@@ -35,7 +32,7 @@ export const ExcalidrawMain = () => {
         return <Sidebar variant={sidebarVariant} variantProps={{ onClose }} />;
       }}
     >
-      <MainMenu />
+      <MainMenuBase />
     </ExcalidrawContainer>
   );
 };

src/Components/Excalidraw/Container.tsx

@@ -3,7 +3,7 @@ import type {
   ExcalidrawProps,
   ExcalidrawImperativeAPI,
 } from '@excalidraw/excalidraw/types/types';
-import { FC, useCallback, useEffect, useMemo, useState } from 'react';
+import { FC, useEffect, useMemo, useState } from 'react';
 import styled from 'styled-components';
 
 export type WindowRect = {
@@ -46,17 +46,17 @@ export const ExcalidrawContainer: FC<ExcalidrawContainerProps> = (props) => {
     height: window.innerHeight,
   });
 
-  const onResize = useCallback(() => {
+  const onResize = () => {
     setWindowRect({
       width: window.innerWidth,
       height: window.innerHeight,
     });
-  }, []);
+  };
 
   useEffect(() => {
     window.addEventListener('resize', onResize);
     return () => window.removeEventListener('resize', onResize);
-  }, [onResize]);
+  }, []);
 
   return (
     <ExcalidrawBox $scale={scale} $windowRect={windowRect}>

src/Components/Excalidraw/MainMenu.tsx

@@ -1,14 +1,13 @@
-import { MainMenuLink, MainMenuProvider } from '@/Components/Utilities';
 import { MainMenu as MainMenuBase } from '@excalidraw/excalidraw';
 
 const MainMenu = () => {
   return (
-    <MainMenuProvider>
+    <MainMenuBase>
       <MainMenuBase.DefaultItems.ToggleTheme />
       <MainMenuBase.DefaultItems.Export />
       <MainMenuBase.DefaultItems.SaveAsImage />
-      <MainMenuLink href="/license">License</MainMenuLink>
+      <MainMenuBase.ItemLink href="/license">License</MainMenuBase.ItemLink>
-    </MainMenuProvider>
+    </MainMenuBase>
   );
 };
 

src/Components/Excalidraw/RightTopUI.tsx

@@ -1,17 +1,17 @@
 import { ExcalidrawImperativeAPI } from '@excalidraw/excalidraw/types/types';
 import { FC, useCallback } from 'react';
-import { ToggleButton, ToggleButtonGroup } from '@/Components/Utilities';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { SidebarVariant, SidebarVariantSchema } from './Sidebar';
 import { z } from 'zod';
 import { LiveCollaborationTrigger } from '@excalidraw/excalidraw';
 
-export const RightTopUIPropsScheme = z.object({
+export const RightTopUIPropsSchema = z.object({
   setSidebarVariant: z.function().args(SidebarVariantSchema).returns(z.void()),
   setToggleState: z.function().args(z.boolean()).returns(z.void()),
   toggleState: z.boolean(),
 });
 
-export type RightTopUIProps = z.infer<typeof RightTopUIPropsScheme> & {
+export type RightTopUIProps = z.infer<typeof RightTopUIPropsSchema> & {
   excalidrawAPI: ExcalidrawImperativeAPI;
 };
 
@@ -21,7 +21,7 @@ const RightTopUI: FC<RightTopUIProps> = (props) => {
   const sidebarToggle = useCallback(
     (variant: SidebarVariant) => {
       if (excalidrawAPI && !props.toggleState) {
-        props.setToggleState(props.toggleState);
+        props.setToggleState(true);
         props.setSidebarVariant(variant);
         excalidrawAPI.toggleMenu('customSidebar');
       }
@@ -33,7 +33,7 @@ const RightTopUI: FC<RightTopUIProps> = (props) => {
     <>
       <LiveCollaborationTrigger
         isCollaborating={false}
-        onSelect={() => console.log('nyya')}
+        onSelect={() => devlog.log('nyya')}
       />
       <ToggleButtonGroup
         exclusive

src/Components/Excalidraw/Sidebar/Base.tsx

@@ -1,22 +1,23 @@
-import { SidebarProvider } from '@/Components/Utilities';
+import { Sidebar } from '@excalidraw/excalidraw';
 import { FC } from 'react';
 import { z } from 'zod';
 import type { ReactNode } from 'react';
+import { Box } from '@mui/material';
 
 export const SidebarBasePropsSchema = z.object({
-  onClose: z.function().returns(z.void()),
+  onClose: z.function().args().returns(z.void()),
 });
 
 export type SidebarBaseProps = z.infer<typeof SidebarBasePropsSchema> & {
   children?: ReactNode;
 };
 
-const SidebarProviderBase: FC<SidebarBaseProps> = (props) => {
+const SidebarBase: FC<SidebarBaseProps> = (props) => {
   return (
-    <SidebarProvider dockable={true} onClose={props.onClose}>
+    <Sidebar dockable={true} onClose={props.onClose}>
-      {props.children}
+      <Box sx={{ p: 2 }}>{props.children}</Box>
-    </SidebarProvider>
+    </Sidebar>
   );
 };
 
-export default SidebarProviderBase;
+export default SidebarBase;

src/Components/Excalidraw/Sidebar/Collaboration.tsx

@@ -1,7 +1,11 @@
-import { FC } from 'react';
+import { FC, useCallback, useEffect, useMemo, useState } from 'react';
-import { Button, SidebarHeader } from '@/Components/Utilities';
+import { Sidebar } from '@excalidraw/excalidraw';
 import { z } from 'zod';
-import SidebarProviderBase, { SidebarBasePropsSchema } from './Base';
+import SidebarBase, { SidebarBasePropsSchema } from './Base';
+import { Button, Input, Link } from '@mui/material';
+import { copyToClipboard } from '@/utilities/clipboard';
+import { useAtom } from 'jotai';
+import { PeerConfigurationAtom, PeerConnectionAtom } from '@/atoms/webrtc';
 
 export type CollaborationSidebarProps = z.infer<
   typeof CollaborationSidebarPropsSchema
@@ -12,11 +16,54 @@ export const CollaborationSidebarPropsSchema = z
   .merge(SidebarBasePropsSchema);
 
 const CollaborationSidebar: FC<CollaborationSidebarProps> = (props) => {
+  const [peerConnection, setPeerConnection] = useAtom(PeerConnectionAtom);
+
+  const [peerConfiguration] = useAtom(PeerConfigurationAtom);
+
+  const initializePeerConnection = useCallback(() => {
+    if (peerConnection) {
+      devlog.warn('Peer connection already initialized');
+      return;
+    }
+
+    setPeerConnection(new RTCPeerConnection(peerConfiguration));
+  }, [peerConfiguration, peerConnection, setPeerConnection]);
+
+  const [collaborationUrl, setCollaborationUrl] = useState<URL | null>(null);
+  const [isCollaborationStarted, setIsCollaborationStarted] = useState(false);
+  const [providedCollaborationUrl, setProvidedCollaborationUrl] =
+    useState<URL | null>(null);
+
+  const onMessage = useCallback((event: MessageEvent) => {
+    devlog.log(event);
+  }, []);
+
+  const copyCollaborationUrl = useCallback(
+    () => copyToClipboard(collaborationUrl?.toString(), undefined),
+    [collaborationUrl]
+  );
+
+  // TODO: Check this !!
+  const offerWerapper = useCallback(async () => {
+    if (!peerConnection) {
+      devlog.error('Peer connection not initialized');
+      return;
+    }
+
+    const offer = await peerConnection.createOffer();
+    await peerConnection.setLocalDescription(offer);
+
+    devlog.log(offer);
+  }, []);
+
   return (
-    <SidebarProviderBase onClose={props.onClose}>
+    <SidebarBase onClose={props.onClose}>
-      <SidebarHeader>Collaboration Settings</SidebarHeader>
+      <Sidebar.Header>Collaboration</Sidebar.Header>
-      <Button>Button</Button>
+      <Button onClick={initializePeerConnection}>
-    </SidebarProviderBase>
+        Initialize a local peer.
+      </Button>
+      <Button> Create a new collaboration session. (offer)</Button>
+    </SidebarBase>
   );
 };
 

src/Components/Excalidraw/Sidebar/General.tsx

@@ -1,7 +1,11 @@
 import { FC } from 'react';
-import { Button, SidebarHeader } from '@/Components/Utilities';
+import { Sidebar } from '@excalidraw/excalidraw';
 import { z } from 'zod';
-import SidebarProviderBase, { SidebarBasePropsSchema } from './Base';
+import SidebarBase, { SidebarBasePropsSchema } from './Base';
+import { Switch, FormControlLabel, FormGroup } from '@mui/material';
+import { useAtom } from 'jotai';
+import { LoggerStateAtom } from '@/atoms/debug';
+import { useTranslation } from 'react-i18next';
 
 export type GeneralSidebarProps = z.infer<typeof GeneralSidebarPropsSchema>;
 
@@ -10,11 +14,24 @@ export const GeneralSidebarPropsSchema = z
   .merge(SidebarBasePropsSchema);
 
 const GeneralSidebar: FC<GeneralSidebarProps> = (props) => {
+  const { t } = useTranslation();
+  const [loggerState, setLoggerState] = useAtom(LoggerStateAtom);
+
   return (
-    <SidebarProviderBase onClose={props.onClose}>
+    <SidebarBase onClose={props.onClose}>
-      <SidebarHeader>General Settings</SidebarHeader>
+      <Sidebar.Header>{t('general-settings')}</Sidebar.Header>
-      <Button>Button</Button>
+      <FormGroup>
-    </SidebarProviderBase>
+        <FormControlLabel
+          control={
+            <Switch
+              checked={loggerState}
+              onChange={(e) => setLoggerState?.(e.target.checked)}
+            />
+          }
+          label={t('toggle-debug-mode')}
+        />
+      </FormGroup>
+    </SidebarBase>
   );
 };
 

src/Components/Utilities.tsx

@@ -1,19 +0,0 @@
-import styled from 'styled-components';
-import {
-  Button as ButtonBase,
-  ToggleButtonGroup as ToggleButtonGroupBase,
-  ToggleButton as ToggleButtonBase,
-} from '@mui/material';
-import { MainMenu, Sidebar } from '@excalidraw/excalidraw';
-
-export const SidebarProvider = styled(Sidebar)``;
-export const SidebarHeader = styled(Sidebar.Header)``;
-
-export const MainMenuProvider = styled(MainMenu)``;
-export const MainMenuLink = styled(MainMenu.ItemLink)``;
-
-export const Button = styled(ButtonBase)``;
-
-export const ToggleButtonGroup = styled(ToggleButtonGroupBase)``;
-
-export const ToggleButton = styled(ToggleButtonBase)``;

src/assets/licenses.json

@@ -55,6 +55,27 @@
     "link": "git+https://github.com/pmndrs/jotai.git",
     "installedFrom": "https://registry.npmjs.org/jotai/-/jotai-2.2.2.tgz"
   },
+  {
+    "name": "just-diff",
+    "licenseType": "MIT",
+    "author": "Angus Croll",
+    "link": "git+https://github.com/angus-c/just.git",
+    "installedFrom": "https://registry.npmjs.org/just-diff/-/just-diff-6.0.2.tgz"
+  },
+  {
+    "name": "just-diff-apply",
+    "licenseType": "MIT",
+    "author": "Angus Croll",
+    "link": "git+https://github.com/angus-c/just.git",
+    "installedFrom": "https://registry.npmjs.org/just-diff-apply/-/just-diff-apply-5.5.0.tgz"
+  },
+  {
+    "name": "qrcode.react",
+    "licenseType": "ISC",
+    "author": "Paul O’Shannessy <paul@oshannessy.com>",
+    "link": "git+https://github.com/zpao/qrcode.react.git",
+    "installedFrom": "https://registry.npmjs.org/qrcode.react/-/qrcode.react-3.1.0.tgz"
+  },
   {
     "name": "react",
     "licenseType": "MIT",

src/atoms/debug.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const LoggerStateAtom = atom(import.meta.env.DEV);

src/atoms/ui.ts

@@ -0,0 +1,3 @@
+import { atom } from 'jotai';
+
+export const LangCodeAtom = atom('en');

src/atoms/webrtc.ts

@@ -0,0 +1,10 @@
+import { DefaultPeerConfiguration } from '@/webrtc/connection';
+import { atom } from 'jotai';
+
+export const PeerConnectionAtom = atom<RTCPeerConnection | undefined>(
+  undefined
+);
+
+export const PeerConfigurationAtom = atom<RTCConfiguration>(
+  DefaultPeerConfiguration
+);

src/globals.ts

@@ -0,0 +1,8 @@
+import type { DevLog } from '@/types/devlog';
+
+declare global {
+  interface Window {
+    devlog: DevLog;
+  }
+  let devlog: DevLog;
+}

src/i18n.ts

@@ -0,0 +1,36 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+import Backend from 'i18next-http-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+import en from '@/i18n/en/translation.json';
+import ja_JP from '@/i18n/ja_JP/translation.json';
+
+i18n
+  .use(Backend)
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    fallbackLng: 'en',
+    returnEmptyString: false,
+    debug: true,
+
+    interpolation: {
+      escapeValue: false, // not needed for react as it escapes by default
+    },
+
+    resources: {
+      en: {
+        translation: en,
+      },
+      ja_JP: {
+        translation: ja_JP,
+      },
+    },
+  })
+  .catch((e) => {
+    devlog.error(e);
+  });
+
+export default i18n;

src/i18n/en/translation.json

@@ -0,0 +1,4 @@
+{
+  "toggle-debug-mode": "Toggle Debug Mode",
+  "general-settings": "General Settings"
+}

src/i18n/ja_JP/translation.json

@@ -0,0 +1 @@
+{}

src/main.tsx

@@ -1,11 +1,18 @@
+import '@/globals';
+
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import { RouterProvider } from 'react-router-dom';
 import router from './routes';
+import DevLogProvider from '@/utilities/DevLogProvider';
+
+import '@/i18n';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <RouterProvider router={router} />
+    <DevLogProvider>
+      <RouterProvider router={router} />
+    </DevLogProvider>
   </React.StrictMode>
 );

src/types/devlog.ts

@@ -0,0 +1,8 @@
+export type Logger = <T>(...args: T[]) => void;
+
+export type DevLog = {
+  info: Logger;
+  log: Logger;
+  error: Logger;
+  warn: Logger;
+};

src/types/language.ts

@@ -0,0 +1,65 @@
+import { languages } from '@excalidraw/excalidraw';
+import { Language } from '@excalidraw/excalidraw/types/i18n';
+
+// Reference:
+// https://github.com/excalidraw/excalidraw/blob/e57dc405fa575a330110699ee762dce5918e9e04/src/i18n.ts#L20
+const LangCodes = [
+  'en',
+  'ar-SA',
+  'bg-BG',
+  'ca-ES',
+  'cs-CZ',
+  'de-DE',
+  'el-GR',
+  'es-ES',
+  'eu-ES',
+  'fa-IR',
+  'fi-FI',
+  'fr-FR',
+  'gl-ES',
+  'he-IL',
+  'hi-IN',
+  'hu-HU',
+  'id-ID',
+  'it-IT',
+  'ja-JP',
+  'kab-KA',
+  'kk-KZ',
+  'ko-KR',
+  'ku-TR',
+  'lt-LT',
+  'lv-LV',
+  'my-MM',
+  'nb-NO',
+  'nl-NL',
+  'nn-NO',
+  'oc-FR',
+  'pa-IN',
+  'pl-PL',
+  'pt-BR',
+  'pt-PT',
+  'ro-RO',
+  'ru-RU',
+  'sk-SK',
+  'sv-SE',
+  'sl-SI',
+  'tr-TR',
+  'uk-UA',
+  'zh-CN',
+  'zh-TW',
+  'vi-VN',
+  'mr-IN',
+] as const;
+
+export type LangCode = (typeof LangCodes)[number];
+
+export type Languages = {
+  [key in LangCode]: Language;
+}[];
+
+export const Languages = languages
+  .map((lang) => (LangCodes.includes(lang.code as LangCode) ? lang : undefined))
+  .filter((item) => item !== undefined)
+  .map((langCode) => ({
+    langCode: languages.find((lang) => lang.code === langCode?.code),
+  }));

src/types/utilities.ts

@@ -0,0 +1,30 @@
+export type Result<T, E> = Ok<T> | Err<E>;
+
+export type Ok<T> = {
+  v: T;
+};
+
+export type Err<E> = {
+  e: E;
+};
+
+export const ok = <T>(v: T): Ok<T> => ({ v });
+
+export const err = <E>(e: E): Err<E> => ({ e });
+
+export const isOk = <T, E>(r: Result<T, E>): r is Ok<T> => 'v' in r;
+
+export const isErr = <T, E>(r: Result<T, E>): r is Err<E> => 'e' in r;
+
+export const unwrap = <T, E>(r: Result<T, E>): T => {
+  if (isOk(r)) return r.v;
+  throw r.e;
+};
+
+export const re = <T, E>(r: Result<T, E>) => ({
+  ok: ok(r),
+  err: err(r),
+  isOk: isOk(r),
+  isErr: isErr(r),
+  unwrap: unwrap(r),
+});

src/utilities/DevLogProvider.tsx

@@ -0,0 +1,55 @@
+import { LoggerStateAtom } from '@/atoms/debug';
+import { useAtom } from 'jotai';
+import { FC, ReactNode, useCallback, useEffect } from 'react';
+import type { Logger } from '@/types/devlog';
+
+export type DevLogProviderProps = {
+  children: ReactNode;
+};
+
+const DevLogProvider: FC<DevLogProviderProps> = (props) => {
+  const [loggerState] = useAtom(LoggerStateAtom);
+
+  const info: Logger = useCallback(
+    (...args) => {
+      loggerState && console.info(args);
+    },
+    [loggerState]
+  );
+
+  const log: Logger = useCallback(
+    (...args) => {
+      loggerState && console.log(args);
+    },
+    [loggerState]
+  );
+
+  const error: Logger = useCallback(
+    (...args) => {
+      loggerState && console.error(args);
+    },
+    [loggerState]
+  );
+
+  const warn: Logger = useCallback(
+    (...args) => {
+      loggerState && console.warn(args);
+    },
+    [loggerState]
+  );
+
+  useEffect(() => {
+    window.devlog = {
+      info,
+      log,
+      error,
+      warn,
+    };
+
+    devlog = window.devlog;
+  }, [info, log, error, warn]);
+
+  return <>{props.children}</>;
+};
+
+export default DevLogProvider;

src/utilities/clipboard.ts

@@ -0,0 +1,23 @@
+export const copyToClipboard = (
+  text: string | undefined | null,
+  callback: (() => void) | undefined
+) => {
+  if (!text) {
+    devlog.log('no text to copy');
+    return;
+  }
+
+  devlog.log('copy collaboration url');
+  devlog.log(text);
+
+  navigator.clipboard
+    .writeText(text)
+    .then(() => {
+      if (callback) {
+        callback();
+      }
+    })
+    .catch((err: DOMException) => {
+      devlog.error(`Could not copy text why: ${err.toString()}`);
+    });
+};

src/utilities/url.ts

@@ -0,0 +1,25 @@
+import { z } from 'zod';
+
+export const AvailableURLParametersSchema = z.object({
+  signalingData: z.string().optional(),
+});
+
+export type AvailableURLParameters = z.infer<
+  typeof AvailableURLParametersSchema
+>;
+
+export const toUrl = (params: AvailableURLParameters) => {
+  const url = new URL(window.location.href);
+
+  Object.entries(params).forEach(([key, value]) => {
+    url.searchParams.set(key, value);
+  });
+
+  return url;
+};
+
+export const fromUrl = (url: URL): AvailableURLParameters => {
+  const params = Object.fromEntries(url.searchParams.entries());
+
+  return AvailableURLParametersSchema.parse(params);
+};

src/webrtc/connection.ts

@@ -0,0 +1,62 @@
+import { match } from 'ts-pattern';
+import { SignalingDataType, SignalingData } from './utilities';
+
+export const DefaultPeerConfiguration: RTCConfiguration = {
+  iceServers: [{ urls: 'stun:stun.l.google.com:19302' }],
+};
+
+export const createOffer = async (peerConnection: RTCPeerConnection) => {
+  const offer = await peerConnection.createOffer();
+  await peerConnection.setLocalDescription(offer);
+
+  if (peerConnection.localDescription) {
+    const signalingData: SignalingData = {
+      type: 'offer',
+      sdp: peerConnection.localDescription,
+    };
+
+    return signalingData;
+  } else {
+    devlog.error('Local description is not set');
+  }
+};
+
+export type DataChannelCallbacks = {
+  onMessage: (event: MessageEvent) => void;
+};
+
+export const dataChannelHandler = (
+  type: SignalingDataType,
+  peerConnection: RTCPeerConnection,
+  DataChannelCallbacks: DataChannelCallbacks
+) => {
+  const { onMessage } = DataChannelCallbacks;
+
+  match(type)
+    .with('offer', () => {
+      const dataChannel = peerConnection.createDataChannel('dataChannel');
+      dataChannel.onmessage = onMessage;
+    })
+    .with('answer', () => {
+      peerConnection.ondatachannel = (event) => {
+        event.channel.onmessage = onMessage;
+      };
+    })
+    .exhaustive();
+};
+
+export const createAnswer = async (peerConnection: RTCPeerConnection) => {
+  const answer = await peerConnection.createAnswer();
+  await peerConnection.setLocalDescription(answer);
+
+  if (peerConnection.localDescription) {
+    const signalingData: SignalingData = {
+      type: 'answer',
+      sdp: peerConnection.localDescription,
+    };
+
+    return signalingData;
+  } else {
+    devlog.error('Local description is not set');
+  }
+};

src/webrtc/utilities.ts

@@ -0,0 +1,24 @@
+import { z } from 'zod';
+
+export const encodeSignalingData = (
+  data: SignalingData
+): EncodedSignalingData => {
+  return encodeURIComponent(JSON.stringify(data));
+};
+
+export const decodeSignalingData = (encodedData: string) => {
+  return JSON.parse(decodeURIComponent(encodedData)) as SignalingData;
+};
+
+export const SignanlingDataTypeSchema = z.enum(['offer', 'answer']);
+
+export type SignalingDataType = z.infer<typeof SignanlingDataTypeSchema>;
+
+export type SignalingData = {
+  type: SignalingDataType;
+  sdp: RTCSessionDescription;
+};
+
+export const EncodedSignalingDataSchema = z.string();
+
+export type EncodedSignalingData = z.infer<typeof EncodedSignalingDataSchema>;

vite.config.ts

@@ -4,10 +4,9 @@ import tsconfigPaths from 'vite-tsconfig-paths';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  resolve: {
+  define: {
-    alias: {
+    devlog: 'window.devlog',
-      '@mui/styled-engine': '@mui/styled-engine-sc',
+    'process.env': {},
-    },
   },
   optimizeDeps: {
     include: [