Glyph subsetting for SVG export

2024-08-08 18:31:50 +02:00
231 changed files with 6305 additions and 15996 deletions
@@ -17,6 +17,8 @@ VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","a
 # put these in your .env.local, or make sure you don't commit!
 # must be lowercase `true` when turned on
 #
+# whether to enable Service Workers in development
+VITE_APP_DEV_ENABLE_SW=
 # whether to disable live reload / HMR. Usuaully what you want to do when
 # debugging Service Workers.
 VITE_APP_DEV_DISABLE_LIVE_RELOAD=
@@ -8,4 +8,3 @@ public/workbox
 packages/excalidraw/types
 examples/**/public
 dev-dist
-coverage
@@ -133,7 +133,7 @@ function App() {
 }
 ```

-Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/main-menu/DefaultItems.tsx) of the default items.
+Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/mainMenu/DefaultItems.tsx) of the default items.

 ### MainMenu.Group

@@ -20,7 +20,7 @@ exportToCanvas(&#123;<br/>&nbsp;
  getDimensions,<br/>&nbsp;
  files,<br/>&nbsp;
  exportPadding?: number;<br/>
-&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/utils/export.ts#L24">ExportOpts</a>
+&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L21">ExportOpts</a>
 </pre>

 | Name | Type | Default | Description |
@@ -14,7 +14,7 @@ This API receives the mermaid syntax as the input, and resolves to skeleton Exca
 import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
 import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
 try {
-  const { elements, files } = await parseMermaidToExcalidraw(mermaidSyntax: string, {
+  const { elements, files } = await parseMermaid(mermaidSyntax: string, {
    fontSize: number,
  });
  const excalidrawElements = convertToExcalidrawElements(elements);
@@ -43,7 +43,7 @@ When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`)

  // editor state (canvas config, preferences, ...)
  "appState": {
-    "gridSize": 20,
+    "gridSize": null,
    "viewBackgroundColor": "#ffffff"
  },

@@ -1547,7 +1547,7 @@
    "@docusaurus/theme-search-algolia" "2.2.0"
    "@docusaurus/types" "2.2.0"

-"@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
  version "5.5.2"
  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -2720,21 +2720,21 @@ binary-extensions@^2.0.0:
  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==

-body-parser@1.20.3:
-  version "1.20.3"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.3.tgz#1953431221c6fb5cd63c4b36d53fab0928e548c6"
-  integrity sha512-7rAxByjUMqQ3/bHJy7D6OGXvx/MMc4IqBn/X0fcM1QUcAItpZrBEYhWGem+tzXH90c+G01ypMcYJBO9Y30203g==
+body-parser@1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
  dependencies:
    bytes "3.1.2"
-    content-type "~1.0.5"
+    content-type "~1.0.4"
    debug "2.6.9"
    depd "2.0.0"
    destroy "1.2.0"
    http-errors "2.0.0"
    iconv-lite "0.4.24"
    on-finished "2.4.1"
-    qs "6.13.0"
-    raw-body "2.5.2"
+    qs "6.10.3"
+    raw-body "2.5.1"
    type-is "~1.6.18"
    unpipe "1.0.0"

@@ -2789,14 +2789,7 @@ brace-expansion@^1.1.7:
    balanced-match "^1.0.0"
    concat-map "0.0.1"

-braces@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.3.tgz#490332f40919452272d55a8480adc0c441358789"
-  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
-  dependencies:
-    fill-range "^7.1.1"
-
-braces@~3.0.2:
+braces@^3.0.2, braces@~3.0.2:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -2861,17 +2854,6 @@ call-bind@^1.0.0:
    function-bind "^1.1.1"
    get-intrinsic "^1.0.2"

-call-bind@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.7.tgz#06016599c40c56498c18769d2730be242b6fa3b9"
-  integrity sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    set-function-length "^1.2.1"
-
 callsites@^3.0.0:
  version "3.1.0"
  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
@@ -3197,11 +3179,6 @@ content-type@~1.0.4:
  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==

-content-type@~1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
-  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
-
 convert-source-map@^1.7.0:
  version "1.8.0"
  resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
@@ -3214,10 +3191,10 @@ cookie-signature@1.0.6:
  resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==

-cookie@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.6.0.tgz#2798b04b071b0ecbff0dbb62a505a8efa4e19051"
-  integrity sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==

 copy-text-to-clipboard@^3.0.1:
  version "3.0.1"
@@ -3494,15 +3471,6 @@ defer-to-connect@^1.0.1:
  resolved "https://registry.yarnpkg.com/defer-to-connect/-/defer-to-connect-1.1.3.tgz#331ae050c08dcf789f8c83a7b81f0ed94f4ac591"
  integrity sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==

-define-data-property@^1.1.4:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
-  integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
-  dependencies:
-    es-define-property "^1.0.0"
-    es-errors "^1.3.0"
-    gopd "^1.0.1"
-
 define-lazy-prop@^2.0.0:
  version "2.0.0"
  resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -3760,11 +3728,6 @@ encodeurl@~1.0.2:
  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==

-encodeurl@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-2.0.0.tgz#7b8ea898077d7e409d3ac45474ea38eaf0857a58"
-  integrity sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==
-
 end-of-stream@^1.1.0:
  version "1.4.4"
  resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -3797,18 +3760,6 @@ error-ex@^1.3.1:
  dependencies:
    is-arrayish "^0.2.1"

-es-define-property@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/es-define-property/-/es-define-property-1.0.0.tgz#c7faefbdff8b2696cf5f46921edfb77cc4ba3845"
-  integrity sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==
-  dependencies:
-    get-intrinsic "^1.2.4"
-
-es-errors@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
-  integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
-
 es-module-lexer@^0.9.0:
  version "0.9.3"
  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
@@ -3918,36 +3869,36 @@ execa@^5.0.0:
    strip-final-newline "^2.0.0"

 express@^4.17.3:
-  version "4.21.0"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.21.0.tgz#d57cb706d49623d4ac27833f1cbc466b668eb915"
-  integrity sha512-VqcNGcj/Id5ZT1LZ/cfihi3ttTn+NJmkli2eZADigjq29qTlWi/hAQ43t/VLPq8+UX06FCEx3ByOYet6ZFblng==
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
+  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
  dependencies:
    accepts "~1.3.8"
    array-flatten "1.1.1"
-    body-parser "1.20.3"
+    body-parser "1.20.0"
    content-disposition "0.5.4"
    content-type "~1.0.4"
-    cookie "0.6.0"
+    cookie "0.5.0"
    cookie-signature "1.0.6"
    debug "2.6.9"
    depd "2.0.0"
-    encodeurl "~2.0.0"
+    encodeurl "~1.0.2"
    escape-html "~1.0.3"
    etag "~1.8.1"
-    finalhandler "1.3.1"
+    finalhandler "1.2.0"
    fresh "0.5.2"
    http-errors "2.0.0"
-    merge-descriptors "1.0.3"
+    merge-descriptors "1.0.1"
    methods "~1.1.2"
    on-finished "2.4.1"
    parseurl "~1.3.3"
-    path-to-regexp "0.1.10"
+    path-to-regexp "0.1.7"
    proxy-addr "~2.0.7"
-    qs "6.13.0"
+    qs "6.10.3"
    range-parser "~1.2.1"
    safe-buffer "5.2.1"
-    send "0.19.0"
-    serve-static "1.16.2"
+    send "0.18.0"
+    serve-static "1.15.0"
    setprototypeof "1.2.0"
    statuses "2.0.1"
    type-is "~1.6.18"
@@ -4060,20 +4011,13 @@ fill-range@^7.0.1:
  dependencies:
    to-regex-range "^5.0.1"

-fill-range@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/fill-range/-/fill-range-7.1.1.tgz#44265d3cac07e3ea7dc247516380643754a05292"
-  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
-  dependencies:
-    to-regex-range "^5.0.1"
-
-finalhandler@1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
-  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
  dependencies:
    debug "2.6.9"
-    encodeurl "~2.0.0"
+    encodeurl "~1.0.2"
    escape-html "~1.0.3"
    on-finished "2.4.1"
    parseurl "~1.3.3"
@@ -4198,11 +4142,6 @@ function-bind@^1.1.1:
  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==

-function-bind@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
-  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
-
 gensync@^1.0.0-beta.1, gensync@^1.0.0-beta.2:
  version "1.0.0-beta.2"
  resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -4217,17 +4156,6 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
    has "^1.0.3"
    has-symbols "^1.0.3"

-get-intrinsic@^1.1.3, get-intrinsic@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"
-  integrity sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==
-  dependencies:
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-    hasown "^2.0.0"
-
 get-own-enumerable-property-symbols@^3.0.0:
  version "3.0.2"
  resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.2.tgz#b5fde77f22cbe35f390b4e089922c50bce6ef664"
@@ -4339,13 +4267,6 @@ globby@^13.1.1:
    merge2 "^1.4.1"
    slash "^4.0.0"

-gopd@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/gopd/-/gopd-1.0.1.tgz#29ff76de69dac7489b7c0918a5788e56477c332c"
-  integrity sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==
-  dependencies:
-    get-intrinsic "^1.1.3"
-
 got@^9.6.0:
  version "9.6.0"
  resolved "https://registry.yarnpkg.com/got/-/got-9.6.0.tgz#edf45e7d67f99545705de1f7bbeeeb121765ed85"
@@ -4407,18 +4328,6 @@ has-property-descriptors@^1.0.0:
  dependencies:
    get-intrinsic "^1.1.1"

-has-property-descriptors@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
-  integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
-  dependencies:
-    es-define-property "^1.0.0"
-
-has-proto@^1.0.1:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/has-proto/-/has-proto-1.0.3.tgz#b31ddfe9b0e6e9914536a6ab286426d0214f77fd"
-  integrity sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==
-
 has-symbols@^1.0.1, has-symbols@^1.0.3:
  version "1.0.3"
  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -4436,13 +4345,6 @@ has@^1.0.3:
  dependencies:
    function-bind "^1.1.1"

-hasown@^2.0.0:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
-  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
-  dependencies:
-    function-bind "^1.1.2"
-
 hast-to-hyperscript@^9.0.0:
  version "9.0.1"
  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-9.0.1.tgz#9b67fd188e4c81e8ad66f803855334173920218d"
@@ -5284,10 +5186,10 @@ memfs@^3.1.2, memfs@^3.4.3:
  dependencies:
    fs-monkey "^1.0.3"

-merge-descriptors@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.3.tgz#d80319a65f3c7935351e5cfdac8f9318504dbed5"
-  integrity sha512-gaNvAS7TZ897/rVaZ0nMtAyxNyi/pdbjbAwUpFQpN70GqnVfOiXpeUUMKRBmzXaSQ8DdTX4/0ms62r2K+hE6mQ==
+merge-descriptors@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
+  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==

 merge-stream@^2.0.0:
  version "2.0.0"
@@ -5305,11 +5207,11 @@ methods@~1.1.2:
  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==

 micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.8.tgz#d66fa18f3a47076789320b9b1af32bd86d9fa202"
-  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  version "4.0.5"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
  dependencies:
-    braces "^3.0.3"
+    braces "^3.0.2"
    picomatch "^2.3.1"

 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
@@ -5509,10 +5411,10 @@ object-assign@^4.1.0, object-assign@^4.1.1:
  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==

-object-inspect@^1.13.1:
-  version "1.13.2"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.2.tgz#dea0088467fb991e67af4058147a24824a3043ff"
-  integrity sha512-IRZSRuzJiynemAXPYtPe5BoI/RESNYR7TYm50MC5Mqbd3Jmw5y790sErYw3V6SryFJD64b74qQQs9wn5Bg/k3g==
+object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==

 object-keys@^1.1.1:
  version "1.1.1"
@@ -5754,10 +5656,10 @@ path-parse@^1.0.7:
  resolved "https://registry.yarnpkg.com/path-parse/-/path-parse-1.0.7.tgz#fbc114b60ca42b30d9daf5858e4bd68bbedb6735"
  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==

-path-to-regexp@0.1.10:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
-  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+path-to-regexp@0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
+  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==

 path-to-regexp@2.2.1:
  version "2.2.1"
@@ -6192,12 +6094,12 @@ pure-color@^1.2.0:
  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
  integrity sha512-QFADYnsVoBMw1srW7OVKEYjG+MbIa49s54w1MA1EDY6r2r/sTcKKYqRX1f4GYvnXP7eN/Pe9HFcX+hwzmrXRHA==

-qs@6.13.0:
-  version "6.13.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
-  integrity sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==
+qs@6.10.3:
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
  dependencies:
-    side-channel "^1.0.6"
+    side-channel "^1.0.4"

 queue-microtask@^1.2.2:
  version "1.2.3"
@@ -6228,10 +6130,10 @@ range-parser@^1.2.1, range-parser@~1.2.1:
  resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
  integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==

-raw-body@2.5.2:
-  version "2.5.2"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.2.tgz#99febd83b90e08975087e8f1f9419a149366b68a"
-  integrity sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
  dependencies:
    bytes "3.1.2"
    http-errors "2.0.0"
@@ -6288,13 +6190,14 @@ react-dev-utils@^12.0.1:
    strip-ansi "^6.0.1"
    text-table "^0.2.0"

-react-dom@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
  dependencies:
    loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.2"

 react-error-overlay@^6.0.11:
  version "6.0.11"
@@ -6357,14 +6260,6 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
  dependencies:
    "@babel/runtime" "^7.10.3"

-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 react-router-config@^5.1.1:
  version "5.1.1"
  resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"
@@ -6415,12 +6310,13 @@ react-textarea-autosize@^8.3.2:
    use-composed-ref "^1.3.0"
    use-latest "^1.2.1"

-react@18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
  dependencies:
    loose-envify "^1.1.0"
+    object-assign "^4.1.1"

 readable-stream@^2.0.1:
  version "2.3.7"
@@ -6768,12 +6664,13 @@ sax@^1.2.4:
  resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
  integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==

-scheduler@^0.23.0:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
  dependencies:
    loose-envify "^1.1.0"
+    object-assign "^4.1.1"

 schema-utils@2.7.0:
  version "2.7.0"
@@ -6861,10 +6758,10 @@ semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
  dependencies:
    lru-cache "^6.0.0"

-send@0.19.0:
-  version "0.19.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
-  integrity sha512-dW41u5VfLXu8SJh5bwRmyYUbAoSB3c9uQh6L8h/KtsFREPWpbX1lrljJo186Jc4nmci/sGUZ9a0a0J2zgfq2hw==
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
  dependencies:
    debug "2.6.9"
    depd "2.0.0"
@@ -6914,27 +6811,15 @@ serve-index@^1.9.1:
    mime-types "~2.1.17"
    parseurl "~1.3.2"

-serve-static@1.16.2:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
-  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
  dependencies:
-    encodeurl "~2.0.0"
+    encodeurl "~1.0.2"
    escape-html "~1.0.3"
    parseurl "~1.3.3"
-    send "0.19.0"
-
-set-function-length@^1.2.1:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/set-function-length/-/set-function-length-1.2.2.tgz#aac72314198eaed975cf77b2c3b6b880695e5449"
-  integrity sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==
-  dependencies:
-    define-data-property "^1.1.4"
-    es-errors "^1.3.0"
-    function-bind "^1.1.2"
-    get-intrinsic "^1.2.4"
-    gopd "^1.0.1"
-    has-property-descriptors "^1.0.2"
+    send "0.18.0"

 setimmediate@^1.0.5:
  version "1.0.5"
@@ -6989,15 +6874,14 @@ shelljs@^0.8.5:
    interpret "^1.0.0"
    rechoir "^0.6.2"

-side-channel@^1.0.6:
-  version "1.0.6"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.6.tgz#abd25fb7cd24baf45466406b1096b7831c9215f2"
-  integrity sha512-fDW/EZ6Q9RiO8eFG8Hj+7u/oW+XrPTIChwCOM2+th2A6OblDtYYIpve9m+KvI9Z4C9qSEXlaGR6bTEYHReuglA==
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
  dependencies:
-    call-bind "^1.0.7"
-    es-errors "^1.3.0"
-    get-intrinsic "^1.2.4"
-    object-inspect "^1.13.1"
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"

 signal-exit@^3.0.2, signal-exit@^3.0.3:
  version "3.0.7"
@@ -22,6 +22,7 @@ import { t } from "../packages/excalidraw/i18n";
 import {
  Excalidraw,
  LiveCollaborationTrigger,
+  TTDDialog,
  TTDDialogTrigger,
  StoreAction,
  reconcileElements,
@@ -120,12 +121,6 @@ import {
 import { appThemeAtom, useHandleAppTheme } from "./useHandleAppTheme";
 import { getPreferredLanguage } from "./app-language/language-detector";
 import { useAppLangCode } from "./app-language/language-state";
-import DebugCanvas, {
-  debugRenderer,
-  isVisualDebuggerEnabled,
-  loadSavedDebugState,
-} from "./components/DebugCanvas";
-import { AIComponents } from "./components/AI";

 polyfill();

@@ -342,8 +337,6 @@ const ExcalidrawWrapper = () => {
      resolvablePromise<ExcalidrawInitialDataState | null>();
  }

-  const debugCanvasRef = useRef<HTMLCanvasElement>(null);
-
  useEffect(() => {
    trackEvent("load", "frame", getFrame());
    // Delayed so that the app has a time to load the latest SW
@@ -369,23 +362,6 @@ const ExcalidrawWrapper = () => {
    migrationAdapter: LibraryLocalStorageMigrationAdapter,
  });

-  const [, forceRefresh] = useState(false);
-
-  useEffect(() => {
-    if (import.meta.env.DEV) {
-      const debugState = loadSavedDebugState();
-
-      if (debugState.enabled && !window.visualDebug) {
-        window.visualDebug = {
-          data: [],
-        };
-      } else {
-        delete window.visualDebug;
-      }
-      forceRefresh((prev) => !prev);
-    }
-  }, [excalidrawAPI]);
-
  useEffect(() => {
    if (!excalidrawAPI || (!isCollabDisabled && !collabAPI)) {
      return;
@@ -646,11 +622,6 @@ const ExcalidrawWrapper = () => {
        }
      });
    }
-
-    // Render the debug scene if the debug canvas is available
-    if (debugCanvasRef.current && excalidrawAPI) {
-      debugRenderer(debugCanvasRef.current, appState, window.devicePixelRatio);
-    }
  };

  const [latestShareableLink, setLatestShareableLink] = useState<string | null>(
@@ -849,7 +820,6 @@ const ExcalidrawWrapper = () => {
          isCollabEnabled={!isCollabDisabled}
          theme={appTheme}
          setTheme={(theme) => setAppTheme(theme)}
-          refresh={() => forceRefresh((prev) => !prev)}
        />
        <AppWelcomeScreen
          onCollabDialogOpen={onCollabDialogOpen}
@@ -875,9 +845,64 @@ const ExcalidrawWrapper = () => {
            </OverwriteConfirmDialog.Action>
          )}
        </OverwriteConfirmDialog>
-        <AppFooter onChange={() => excalidrawAPI?.refresh()} />
-        {excalidrawAPI && <AIComponents excalidrawAPI={excalidrawAPI} />}
+        <AppFooter />
+        <TTDDialog
+          onTextSubmit={async (input) => {
+            try {
+              const response = await fetch(
+                `${
+                  import.meta.env.VITE_APP_AI_BACKEND
+                }/v1/ai/text-to-diagram/generate`,
+                {
+                  method: "POST",
+                  headers: {
+                    Accept: "application/json",
+                    "Content-Type": "application/json",
+                  },
+                  body: JSON.stringify({ prompt: input }),
+                },
+              );

+              const rateLimit = response.headers.has("X-Ratelimit-Limit")
+                ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
+                : undefined;
+
+              const rateLimitRemaining = response.headers.has(
+                "X-Ratelimit-Remaining",
+              )
+                ? parseInt(
+                    response.headers.get("X-Ratelimit-Remaining") || "0",
+                    10,
+                  )
+                : undefined;
+
+              const json = await response.json();
+
+              if (!response.ok) {
+                if (response.status === 429) {
+                  return {
+                    rateLimit,
+                    rateLimitRemaining,
+                    error: new Error(
+                      "Too many requests today, please try again tomorrow!",
+                    ),
+                  };
+                }
+
+                throw new Error(json.message || "Generation failed...");
+              }
+
+              const generatedResponse = json.generatedResponse;
+              if (!generatedResponse) {
+                throw new Error("Generation failed...");
+              }
+
+              return { generatedResponse, rateLimit, rateLimitRemaining };
+            } catch (err: any) {
+              throw new Error("Request failed");
+            }
+          }}
+        />
        <TTDDialogTrigger />
        {isCollaborating && isOffline && (
          <div className="collab-offline-warning">
@@ -1107,13 +1132,6 @@ const ExcalidrawWrapper = () => {
            },
          ]}
        />
-        {isVisualDebuggerEnabled() && excalidrawAPI && (
-          <DebugCanvas
-            appState={excalidrawAPI.getAppState()}
-            scale={window.devicePixelRatio}
-            ref={debugCanvasRef}
-          />
-        )}
      </Excalidraw>
    </div>
  );
@@ -9,7 +9,6 @@ import { t } from "../packages/excalidraw/i18n";
 import { copyTextToSystemClipboard } from "../packages/excalidraw/clipboard";
 import type { NonDeletedExcalidrawElement } from "../packages/excalidraw/element/types";
 import type { UIAppState } from "../packages/excalidraw/types";
-import { Stats } from "../packages/excalidraw";

 type StorageSizes = { scene: number; total: number };

@@ -52,33 +51,39 @@ const CustomStats = (props: Props) => {
  }

  return (
-    <Stats.StatsRows order={-1}>
-      <Stats.StatsRow heading>{t("stats.version")}</Stats.StatsRow>
-      <Stats.StatsRow
-        style={{ textAlign: "center", cursor: "pointer" }}
-        onClick={async () => {
-          try {
-            await copyTextToSystemClipboard(getVersion());
-            props.setToast(t("toast.copyToClipboard"));
-          } catch {}
-        }}
-        title={t("stats.versionCopy")}
-      >
-        {timestamp}
-        <br />
-        {hash}
-      </Stats.StatsRow>
-
-      <Stats.StatsRow heading>{t("stats.storage")}</Stats.StatsRow>
-      <Stats.StatsRow columns={2}>
-        <div>{t("stats.scene")}</div>
-        <div>{nFormatter(storageSizes.scene, 1)}</div>
-      </Stats.StatsRow>
-      <Stats.StatsRow columns={2}>
-        <div>{t("stats.total")}</div>
-        <div>{nFormatter(storageSizes.total, 1)}</div>
-      </Stats.StatsRow>
-    </Stats.StatsRows>
+    <>
+      <tr>
+        <th colSpan={2}>{t("stats.storage")}</th>
+      </tr>
+      <tr>
+        <td>{t("stats.scene")}</td>
+        <td>{nFormatter(storageSizes.scene, 1)}</td>
+      </tr>
+      <tr>
+        <td>{t("stats.total")}</td>
+        <td>{nFormatter(storageSizes.total, 1)}</td>
+      </tr>
+      <tr>
+        <th colSpan={2}>{t("stats.version")}</th>
+      </tr>
+      <tr>
+        <td
+          colSpan={2}
+          style={{ textAlign: "center", cursor: "pointer" }}
+          onClick={async () => {
+            try {
+              await copyTextToSystemClipboard(getVersion());
+              props.setToast(t("toast.copyToClipboard"));
+            } catch {}
+          }}
+          title={t("stats.versionCopy")}
+        >
+          {timestamp}
+          <br />
+          {hash}
+        </td>
+      </tr>
+    </>
  );
 };

@@ -40,7 +40,6 @@ export const STORAGE_KEYS = {
  LOCAL_STORAGE_APP_STATE: "excalidraw-state",
  LOCAL_STORAGE_COLLAB: "excalidraw-collab",
  LOCAL_STORAGE_THEME: "excalidraw-theme",
-  LOCAL_STORAGE_DEBUG: "excalidraw-debug",
  VERSION_DATA_STATE: "version-dataState",
  VERSION_FILES: "version-files",

@@ -116,26 +116,20 @@ class Portal {
      }
    }

-    let isChanged = false;
-    const newElements = this.collab.excalidrawAPI
-      .getSceneElementsIncludingDeleted()
-      .map((element) => {
-        if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
-          isChanged = true;
-          // this will signal collaborators to pull image data from server
-          // (using mutation instead of newElementWith otherwise it'd break
-          // in-progress dragging)
-          return newElementWith(element, { status: "saved" });
-        }
-        return element;
-      });
-
-    if (isChanged) {
-      this.collab.excalidrawAPI.updateScene({
-        elements: newElements,
-        storeAction: StoreAction.UPDATE,
-      });
-    }
+    this.collab.excalidrawAPI.updateScene({
+      elements: this.collab.excalidrawAPI
+        .getSceneElementsIncludingDeleted()
+        .map((element) => {
+          if (this.collab.fileManager.shouldUpdateImageElementStatus(element)) {
+            // this will signal collaborators to pull image data from server
+            // (using mutation instead of newElementWith otherwise it'd break
+            // in-progress dragging)
+            return newElementWith(element, { status: "saved" });
+          }
+          return element;
+        }),
+      storeAction: StoreAction.UPDATE,
+    });
  }, FILE_UPLOAD_TIMEOUT);

  broadcastScene = async (
@@ -0,0 +1,218 @@
+import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
+
+import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
+import { trackEvent } from "../../packages/excalidraw/analytics";
+import { getFrame } from "../../packages/excalidraw/utils";
+import { useI18n } from "../../packages/excalidraw/i18n";
+import { KEYS } from "../../packages/excalidraw/keys";
+
+import { Dialog } from "../../packages/excalidraw/components/Dialog";
+import {
+  copyIcon,
+  playerPlayIcon,
+  playerStopFilledIcon,
+  share,
+  shareIOS,
+  shareWindows,
+  tablerCheckIcon,
+} from "../../packages/excalidraw/components/icons";
+import { TextField } from "../../packages/excalidraw/components/TextField";
+import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
+
+import { ReactComponent as CollabImage } from "../../packages/excalidraw/assets/lock.svg";
+import "./RoomDialog.scss";
+
+const getShareIcon = () => {
+  const navigator = window.navigator as any;
+  const isAppleBrowser = /Apple/.test(navigator.vendor);
+  const isWindowsBrowser = navigator.appVersion.indexOf("Win") !== -1;
+
+  if (isAppleBrowser) {
+    return shareIOS;
+  } else if (isWindowsBrowser) {
+    return shareWindows;
+  }
+
+  return share;
+};
+
+export type RoomModalProps = {
+  handleClose: () => void;
+  activeRoomLink: string;
+  username: string;
+  onUsernameChange: (username: string) => void;
+  onRoomCreate: () => void;
+  onRoomDestroy: () => void;
+  setErrorMessage: (message: string) => void;
+};
+
+export const RoomModal = ({
+  activeRoomLink,
+  onRoomCreate,
+  onRoomDestroy,
+  setErrorMessage,
+  username,
+  onUsernameChange,
+  handleClose,
+}: RoomModalProps) => {
+  const { t } = useI18n();
+  const [justCopied, setJustCopied] = useState(false);
+  const timerRef = useRef<number>(0);
+  const ref = useRef<HTMLInputElement>(null);
+  const isShareSupported = "share" in navigator;
+
+  const copyRoomLink = async () => {
+    try {
+      await copyTextToSystemClipboard(activeRoomLink);
+    } catch (e) {
+      setErrorMessage(t("errors.copyToSystemClipboardFailed"));
+    }
+    setJustCopied(true);
+
+    if (timerRef.current) {
+      window.clearTimeout(timerRef.current);
+    }
+
+    timerRef.current = window.setTimeout(() => {
+      setJustCopied(false);
+    }, 3000);
+
+    ref.current?.select();
+  };
+
+  const shareRoomLink = async () => {
+    try {
+      await navigator.share({
+        title: t("roomDialog.shareTitle"),
+        text: t("roomDialog.shareTitle"),
+        url: activeRoomLink,
+      });
+    } catch (error: any) {
+      // Just ignore.
+    }
+  };
+
+  if (activeRoomLink) {
+    return (
+      <>
+        <h3 className="RoomDialog__active__header">
+          {t("labels.liveCollaboration")}
+        </h3>
+        <TextField
+          value={username}
+          placeholder="Your name"
+          label="Your name"
+          onChange={onUsernameChange}
+          onKeyDown={(event) => event.key === KEYS.ENTER && handleClose()}
+        />
+        <div className="RoomDialog__active__linkRow">
+          <TextField
+            ref={ref}
+            label="Link"
+            readonly
+            fullWidth
+            value={activeRoomLink}
+          />
+          {isShareSupported && (
+            <FilledButton
+              size="large"
+              variant="icon"
+              label="Share"
+              icon={getShareIcon()}
+              className="RoomDialog__active__share"
+              onClick={shareRoomLink}
+            />
+          )}
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                icon={copyIcon}
+                onClick={copyRoomLink}
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="RoomDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
+        </div>
+        <div className="RoomDialog__active__description">
+          <p>
+            <span
+              role="img"
+              aria-hidden="true"
+              className="RoomDialog__active__description__emoji"
+            >
+              🔒{" "}
+            </span>
+            {t("roomDialog.desc_privacy")}
+          </p>
+          <p>{t("roomDialog.desc_exitSession")}</p>
+        </div>
+
+        <div className="RoomDialog__active__actions">
+          <FilledButton
+            size="large"
+            variant="outlined"
+            color="danger"
+            label={t("roomDialog.button_stopSession")}
+            icon={playerStopFilledIcon}
+            onClick={() => {
+              trackEvent("share", "room closed");
+              onRoomDestroy();
+            }}
+          />
+        </div>
+      </>
+    );
+  }
+
+  return (
+    <>
+      <div className="RoomDialog__inactive__illustration">
+        <CollabImage />
+      </div>
+      <div className="RoomDialog__inactive__header">
+        {t("labels.liveCollaboration")}
+      </div>
+
+      <div className="RoomDialog__inactive__description">
+        <strong>{t("roomDialog.desc_intro")}</strong>
+        {t("roomDialog.desc_privacy")}
+      </div>
+
+      <div className="RoomDialog__inactive__start_session">
+        <FilledButton
+          size="large"
+          label={t("roomDialog.button_startSession")}
+          icon={playerPlayIcon}
+          onClick={() => {
+            trackEvent("share", "room creation", `ui (${getFrame()})`);
+            onRoomCreate();
+          }}
+        />
+      </div>
+    </>
+  );
+};
+
+const RoomDialog = (props: RoomModalProps) => {
+  return (
+    <Dialog size="small" onCloseRequest={props.handleClose} title={false}>
+      <div className="RoomDialog">
+        <RoomModal {...props} />
+      </div>
+    </Dialog>
+  );
+};
+
+export default RoomDialog;
@@ -1,159 +0,0 @@
-import type { ExcalidrawImperativeAPI } from "../../packages/excalidraw/types";
-import {
-  DiagramToCodePlugin,
-  exportToBlob,
-  getTextFromElements,
-  MIME_TYPES,
-  TTDDialog,
-} from "../../packages/excalidraw";
-import { getDataURL } from "../../packages/excalidraw/data/blob";
-import { safelyParseJSON } from "../../packages/excalidraw/utils";
-
-export const AIComponents = ({
-  excalidrawAPI,
-}: {
-  excalidrawAPI: ExcalidrawImperativeAPI;
-}) => {
-  return (
-    <>
-      <DiagramToCodePlugin
-        generate={async ({ frame, children }) => {
-          const appState = excalidrawAPI.getAppState();
-
-          const blob = await exportToBlob({
-            elements: children,
-            appState: {
-              ...appState,
-              exportBackground: true,
-              viewBackgroundColor: appState.viewBackgroundColor,
-            },
-            exportingFrame: frame,
-            files: excalidrawAPI.getFiles(),
-            mimeType: MIME_TYPES.jpg,
-          });
-
-          const dataURL = await getDataURL(blob);
-
-          const textFromFrameChildren = getTextFromElements(children);
-
-          const response = await fetch(
-            `${
-              import.meta.env.VITE_APP_AI_BACKEND
-            }/v1/ai/diagram-to-code/generate`,
-            {
-              method: "POST",
-              headers: {
-                Accept: "application/json",
-                "Content-Type": "application/json",
-              },
-              body: JSON.stringify({
-                texts: textFromFrameChildren,
-                image: dataURL,
-                theme: appState.theme,
-              }),
-            },
-          );
-
-          if (!response.ok) {
-            const text = await response.text();
-            const errorJSON = safelyParseJSON(text);
-
-            if (!errorJSON) {
-              throw new Error(text);
-            }
-
-            if (errorJSON.statusCode === 429) {
-              return {
-                html: `<html>
-                <body style="margin: 0; text-align: center">
-                <div style="display: flex; align-items: center; justify-content: center; flex-direction: column; height: 100vh; padding: 0 60px">
-                  <div style="color:red">Too many requests today,</br>please try again tomorrow!</div>
-                  </br>
-                  </br>
-                  <div>You can also try <a href="${
-                    import.meta.env.VITE_APP_PLUS_LP
-                  }/plus?utm_source=excalidraw&utm_medium=app&utm_content=d2c" target="_blank" rel="noreferrer noopener">Excalidraw+</a> to get more requests.</div>
-                </div>
-                </body>
-                </html>`,
-              };
-            }
-
-            throw new Error(errorJSON.message || text);
-          }
-
-          try {
-            const { html } = await response.json();
-
-            if (!html) {
-              throw new Error("Generation failed (invalid response)");
-            }
-            return {
-              html,
-            };
-          } catch (error: any) {
-            throw new Error("Generation failed (invalid response)");
-          }
-        }}
-      />
-
-      <TTDDialog
-        onTextSubmit={async (input) => {
-          try {
-            const response = await fetch(
-              `${
-                import.meta.env.VITE_APP_AI_BACKEND
-              }/v1/ai/text-to-diagram/generate`,
-              {
-                method: "POST",
-                headers: {
-                  Accept: "application/json",
-                  "Content-Type": "application/json",
-                },
-                body: JSON.stringify({ prompt: input }),
-              },
-            );
-
-            const rateLimit = response.headers.has("X-Ratelimit-Limit")
-              ? parseInt(response.headers.get("X-Ratelimit-Limit") || "0", 10)
-              : undefined;
-
-            const rateLimitRemaining = response.headers.has(
-              "X-Ratelimit-Remaining",
-            )
-              ? parseInt(
-                  response.headers.get("X-Ratelimit-Remaining") || "0",
-                  10,
-                )
-              : undefined;
-
-            const json = await response.json();
-
-            if (!response.ok) {
-              if (response.status === 429) {
-                return {
-                  rateLimit,
-                  rateLimitRemaining,
-                  error: new Error(
-                    "Too many requests today, please try again tomorrow!",
-                  ),
-                };
-              }
-
-              throw new Error(json.message || "Generation failed...");
-            }
-
-            const generatedResponse = json.generatedResponse;
-            if (!generatedResponse) {
-              throw new Error("Generation failed...");
-            }
-
-            return { generatedResponse, rateLimit, rateLimitRemaining };
-          } catch (err: any) {
-            throw new Error("Request failed");
-          }
-        }}
-      />
-    </>
-  );
-};
@@ -3,27 +3,23 @@ import { Footer } from "../../packages/excalidraw/index";
 import { EncryptedIcon } from "./EncryptedIcon";
 import { ExcalidrawPlusAppLink } from "./ExcalidrawPlusAppLink";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
-import { DebugFooter, isVisualDebuggerEnabled } from "./DebugCanvas";

-export const AppFooter = React.memo(
-  ({ onChange }: { onChange: () => void }) => {
-    return (
-      <Footer>
-        <div
-          style={{
-            display: "flex",
-            gap: ".5rem",
-            alignItems: "center",
-          }}
-        >
-          {isVisualDebuggerEnabled() && <DebugFooter onChange={onChange} />}
-          {isExcalidrawPlusSignedUser ? (
-            <ExcalidrawPlusAppLink />
-          ) : (
-            <EncryptedIcon />
-          )}
-        </div>
-      </Footer>
-    );
-  },
-);
+export const AppFooter = React.memo(() => {
+  return (
+    <Footer>
+      <div
+        style={{
+          display: "flex",
+          gap: ".5rem",
+          alignItems: "center",
+        }}
+      >
+        {isExcalidrawPlusSignedUser ? (
+          <ExcalidrawPlusAppLink />
+        ) : (
+          <EncryptedIcon />
+        )}
+      </div>
+    </Footer>
+  );
+});
@@ -2,13 +2,11 @@ import React from "react";
 import {
  loginIcon,
  ExcalLogo,
-  eyeIcon,
 } from "../../packages/excalidraw/components/icons";
 import type { Theme } from "../../packages/excalidraw/element/types";
 import { MainMenu } from "../../packages/excalidraw/index";
 import { isExcalidrawPlusSignedUser } from "../app_constants";
 import { LanguageList } from "../app-language/LanguageList";
-import { saveDebugState } from "./DebugCanvas";

 export const AppMainMenu: React.FC<{
  onCollabDialogOpen: () => any;
@@ -16,7 +14,6 @@ export const AppMainMenu: React.FC<{
  isCollabEnabled: boolean;
  theme: Theme | "system";
  setTheme: (theme: Theme | "system") => void;
-  refresh: () => void;
 }> = React.memo((props) => {
  return (
    <MainMenu>
@@ -31,7 +28,6 @@ export const AppMainMenu: React.FC<{
        />
      )}
      <MainMenu.DefaultItems.CommandPalette className="highlighted" />
-      <MainMenu.DefaultItems.SearchMenu />
      <MainMenu.DefaultItems.Help />
      <MainMenu.DefaultItems.ClearCanvas />
      <MainMenu.Separator />
@@ -54,23 +50,6 @@ export const AppMainMenu: React.FC<{
      >
        {isExcalidrawPlusSignedUser ? "Sign in" : "Sign up"}
      </MainMenu.ItemLink>
-      {import.meta.env.DEV && (
-        <MainMenu.Item
-          icon={eyeIcon}
-          onClick={() => {
-            if (window.visualDebug) {
-              delete window.visualDebug;
-              saveDebugState({ enabled: false });
-            } else {
-              window.visualDebug = { data: [] };
-              saveDebugState({ enabled: true });
-            }
-            props?.refresh();
-          }}
-        >
-          Visual Debug
-        </MainMenu.Item>
-      )}
      <MainMenu.Separator />
      <MainMenu.DefaultItems.ToggleTheme
        allowSystemTheme
@@ -1,301 +0,0 @@
-import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
-import { type AppState } from "../../packages/excalidraw/types";
-import { throttleRAF } from "../../packages/excalidraw/utils";
-import {
-  bootstrapCanvas,
-  getNormalizedCanvasDimensions,
-} from "../../packages/excalidraw/renderer/helpers";
-import type { DebugElement } from "../../packages/excalidraw/visualdebug";
-import {
-  ArrowheadArrowIcon,
-  CloseIcon,
-  TrashIcon,
-} from "../../packages/excalidraw/components/icons";
-import { STORAGE_KEYS } from "../app_constants";
-import {
-  isLineSegment,
-  type GlobalPoint,
-  type LineSegment,
-} from "../../packages/math";
-
-const renderLine = (
-  context: CanvasRenderingContext2D,
-  zoom: number,
-  segment: LineSegment<GlobalPoint>,
-  color: string,
-) => {
-  context.save();
-  context.strokeStyle = color;
-  context.beginPath();
-  context.moveTo(segment[0][0] * zoom, segment[0][1] * zoom);
-  context.lineTo(segment[1][0] * zoom, segment[1][1] * zoom);
-  context.stroke();
-  context.restore();
-};
-
-const renderOrigin = (context: CanvasRenderingContext2D, zoom: number) => {
-  context.strokeStyle = "#888";
-  context.save();
-  context.beginPath();
-  context.moveTo(-10 * zoom, -10 * zoom);
-  context.lineTo(10 * zoom, 10 * zoom);
-  context.moveTo(10 * zoom, -10 * zoom);
-  context.lineTo(-10 * zoom, 10 * zoom);
-  context.stroke();
-  context.save();
-};
-
-const render = (
-  frame: DebugElement[],
-  context: CanvasRenderingContext2D,
-  appState: AppState,
-) => {
-  frame.forEach((el: DebugElement) => {
-    switch (true) {
-      case isLineSegment(el.data):
-        renderLine(
-          context,
-          appState.zoom.value,
-          el.data as LineSegment<GlobalPoint>,
-          el.color,
-        );
-        break;
-    }
-  });
-};
-
-const _debugRenderer = (
-  canvas: HTMLCanvasElement,
-  appState: AppState,
-  scale: number,
-) => {
-  const [normalizedWidth, normalizedHeight] = getNormalizedCanvasDimensions(
-    canvas,
-    scale,
-  );
-
-  const context = bootstrapCanvas({
-    canvas,
-    scale,
-    normalizedWidth,
-    normalizedHeight,
-    viewBackgroundColor: "transparent",
-  });
-
-  // Apply zoom
-  context.save();
-  context.translate(
-    appState.scrollX * appState.zoom.value,
-    appState.scrollY * appState.zoom.value,
-  );
-
-  renderOrigin(context, appState.zoom.value);
-
-  if (
-    window.visualDebug?.currentFrame &&
-    window.visualDebug?.data &&
-    window.visualDebug.data.length > 0
-  ) {
-    // Render only one frame
-    const [idx] = debugFrameData();
-
-    render(window.visualDebug.data[idx], context, appState);
-  } else {
-    // Render all debug frames
-    window.visualDebug?.data.forEach((frame) => {
-      render(frame, context, appState);
-    });
-  }
-
-  if (window.visualDebug) {
-    window.visualDebug!.data =
-      window.visualDebug?.data.map((frame) =>
-        frame.filter((el) => el.permanent),
-      ) ?? [];
-  }
-};
-
-const debugFrameData = (): [number, number] => {
-  const currentFrame = window.visualDebug?.currentFrame ?? 0;
-  const frameCount = window.visualDebug?.data.length ?? 0;
-
-  if (frameCount > 0) {
-    return [currentFrame % frameCount, window.visualDebug?.currentFrame ?? 0];
-  }
-
-  return [0, 0];
-};
-
-export const saveDebugState = (debug: { enabled: boolean }) => {
-  try {
-    localStorage.setItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-      JSON.stringify(debug),
-    );
-  } catch (error: any) {
-    console.error(error);
-  }
-};
-
-export const debugRenderer = throttleRAF(
-  (canvas: HTMLCanvasElement, appState: AppState, scale: number) => {
-    _debugRenderer(canvas, appState, scale);
-  },
-  { trailing: true },
-);
-
-export const loadSavedDebugState = () => {
-  let debug;
-  try {
-    const savedDebugState = localStorage.getItem(
-      STORAGE_KEYS.LOCAL_STORAGE_DEBUG,
-    );
-    if (savedDebugState) {
-      debug = JSON.parse(savedDebugState) as { enabled: boolean };
-    }
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  return debug ?? { enabled: false };
-};
-
-export const isVisualDebuggerEnabled = () =>
-  Array.isArray(window.visualDebug?.data);
-
-export const DebugFooter = ({ onChange }: { onChange: () => void }) => {
-  const moveForward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1)
-    ) {
-      window.visualDebug!.currentFrame = 0;
-    }
-    window.visualDebug!.currentFrame += 1;
-    onChange();
-  }, [onChange]);
-  const moveBackward = useCallback(() => {
-    if (
-      !window.visualDebug?.currentFrame ||
-      isNaN(window.visualDebug?.currentFrame ?? -1) ||
-      window.visualDebug?.currentFrame < 1
-    ) {
-      window.visualDebug!.currentFrame = 1;
-    }
-    window.visualDebug!.currentFrame -= 1;
-    onChange();
-  }, [onChange]);
-  const reset = useCallback(() => {
-    window.visualDebug!.currentFrame = undefined;
-    onChange();
-  }, [onChange]);
-  const trashFrames = useCallback(() => {
-    if (window.visualDebug) {
-      window.visualDebug.currentFrame = undefined;
-      window.visualDebug.data = [];
-    }
-    onChange();
-  }, [onChange]);
-
-  return (
-    <>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={trashFrames}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {TrashIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={moveBackward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon flip />
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-forward"
-        aria-label="Move forward"
-        type="button"
-        onClick={reset}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          {CloseIcon}
-        </div>
-      </button>
-      <button
-        className="ToolIcon_type_button"
-        data-testid="debug-backward"
-        aria-label="Move backward"
-        type="button"
-        onClick={moveForward}
-      >
-        <div
-          className="ToolIcon__icon"
-          aria-hidden="true"
-          aria-disabled="false"
-        >
-          <ArrowheadArrowIcon />
-        </div>
-      </button>
-    </>
-  );
-};
-
-interface DebugCanvasProps {
-  appState: AppState;
-  scale: number;
-}
-
-const DebugCanvas = forwardRef<HTMLCanvasElement, DebugCanvasProps>(
-  ({ appState, scale }, ref) => {
-    const { width, height } = appState;
-
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    useImperativeHandle<HTMLCanvasElement | null, HTMLCanvasElement | null>(
-      ref,
-      () => canvasRef.current,
-      [canvasRef],
-    );
-
-    return (
-      <canvas
-        style={{
-          width,
-          height,
-          position: "absolute",
-          zIndex: 2,
-          pointerEvents: "none",
-        }}
-        width={width * scale}
-        height={height * scale}
-        ref={canvasRef}
-      >
-        Debug Canvas
-      </canvas>
-    );
-  },
-);
-
-export default DebugCanvas;
@@ -20,10 +20,6 @@ import {
  get,
 } from "idb-keyval";
 import { clearAppStateForLocalStorage } from "../../packages/excalidraw/appState";
-import {
-  CANVAS_SEARCH_TAB,
-  DEFAULT_SIDEBAR,
-} from "../../packages/excalidraw/constants";
 import type { LibraryPersistedData } from "../../packages/excalidraw/data/library";
 import type { ImportedDataState } from "../../packages/excalidraw/data/types";
 import { clearElementsForLocalStorage } from "../../packages/excalidraw/element";
@@ -70,22 +66,13 @@ const saveDataStateToLocalStorage = (
  appState: AppState,
 ) => {
  try {
-    const _appState = clearAppStateForLocalStorage(appState);
-
-    if (
-      _appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
-      _appState.openSidebar.tab === CANVAS_SEARCH_TAB
-    ) {
-      _appState.openSidebar = null;
-    }
-
    localStorage.setItem(
      STORAGE_KEYS.LOCAL_STORAGE_ELEMENTS,
      JSON.stringify(clearElementsForLocalStorage(elements)),
    );
    localStorage.setItem(
      STORAGE_KEYS.LOCAL_STORAGE_APP_STATE,
-      JSON.stringify(_appState),
+      JSON.stringify(clearAppStateForLocalStorage(appState)),
    );
    updateBrowserStateVersion(STORAGE_KEYS.VERSION_DATA_STATE);
  } catch (error: any) {
@@ -128,6 +128,29 @@
    <script>
      window.EXCALIDRAW_ASSET_PATH = window.origin;
    </script>
+
+    <!-- in DEV we need to preload from the local server and without the hash -->
+    <link
+      rel="preload"
+      href="../packages/excalidraw/fonts/assets/Excalifont-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="../packages/excalidraw/fonts/assets/Virgil-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
+    <link
+      rel="preload"
+      href="../packages/excalidraw/fonts/assets/ComicShanns-Regular.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin="anonymous"
+    />
    <% } %>

    <!-- For Nunito only preload the latin range, which should be good enough for now -->
@@ -58,8 +58,8 @@
      font-size: 0.75rem;
      line-height: 110%;

-      background: var(--color-success);
-      color: var(--color-success-text);
+      background: var(--color-success-lighter);
+      color: var(--color-success);

      & > svg {
        width: 0.875rem;
@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";
 import { copyTextToSystemClipboard } from "../../packages/excalidraw/clipboard";
 import { trackEvent } from "../../packages/excalidraw/analytics";
 import { getFrame } from "../../packages/excalidraw/utils";
@@ -13,6 +14,7 @@ import {
  share,
  shareIOS,
  shareWindows,
+  tablerCheckIcon,
 } from "../../packages/excalidraw/components/icons";
 import { TextField } from "../../packages/excalidraw/components/TextField";
 import { FilledButton } from "../../packages/excalidraw/components/FilledButton";
@@ -22,7 +24,6 @@ import { atom, useAtom, useAtomValue } from "jotai";

 import "./ShareDialog.scss";
 import { useUIAppState } from "../../packages/excalidraw/context/ui-appState";
-import { useCopyStatus } from "../../packages/excalidraw/hooks/useCopiedIndicator";

 type OnExportToBackend = () => void;
 type ShareDialogType = "share" | "collaborationOnly";
@@ -62,11 +63,10 @@ const ActiveRoomDialog = ({
  handleClose: () => void;
 }) => {
  const { t } = useI18n();
-  const [, setJustCopied] = useState(false);
+  const [justCopied, setJustCopied] = useState(false);
  const timerRef = useRef<number>(0);
  const ref = useRef<HTMLInputElement>(null);
  const isShareSupported = "share" in navigator;
-  const { onCopy, copyStatus } = useCopyStatus();

  const copyRoomLink = async () => {
    try {
@@ -130,16 +130,26 @@ const ActiveRoomDialog = ({
            onClick={shareRoomLink}
          />
        )}
-        <FilledButton
-          size="large"
-          label={t("buttons.copyLink")}
-          icon={copyIcon}
-          status={copyStatus}
-          onClick={() => {
-            copyRoomLink();
-            onCopy();
-          }}
-        />
+        <Popover.Root open={justCopied}>
+          <Popover.Trigger asChild>
+            <FilledButton
+              size="large"
+              label="Copy link"
+              icon={copyIcon}
+              onClick={copyRoomLink}
+            />
+          </Popover.Trigger>
+          <Popover.Content
+            onOpenAutoFocus={(event) => event.preventDefault()}
+            onCloseAutoFocus={(event) => event.preventDefault()}
+            className="ShareDialog__popover"
+            side="top"
+            align="end"
+            sideOffset={5.5}
+          >
+            {tablerCheckIcon} copied
+          </Popover.Content>
+        </Popover.Root>
      </div>
      <div className="ShareDialog__active__description">
        <p>
@@ -73,8 +73,8 @@ export default defineConfig({
      },

      workbox: {
-        // Don't push fonts, locales and wasm to app precache
-        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js", "**/*.wasm-*.js"],
+        // Don't push fonts and locales to app precache
+        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js"],
        runtimeCaching: [
          {
            urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),
@@ -108,17 +108,6 @@ export default defineConfig({
              },
            },
          },
-          {
-            urlPattern: new RegExp(".wasm-.+.js"),
-            handler: "CacheFirst",
-            options: {
-              cacheName: "wasm",
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-              },
-            },
-          },
        ],
      },
      manifest: {
@@ -6,7 +6,6 @@
    "excalidraw-app",
    "packages/excalidraw",
    "packages/utils",
-    "packages/math",
    "examples/excalidraw",
    "examples/excalidraw/*"
  ],
@@ -21,8 +20,8 @@
    "@types/react-dom": "18.2.0",
    "@types/socket.io-client": "3.0.0",
    "@vitejs/plugin-react": "3.1.0",
-    "@vitest/coverage-v8": "2.0.5",
-    "@vitest/ui": "2.0.5",
+    "@vitest/coverage-v8": "0.33.0",
+    "@vitest/ui": "0.32.2",
    "chai": "4.3.6",
    "dotenv": "16.0.1",
    "eslint-config-prettier": "8.5.0",
@@ -37,12 +36,12 @@
    "rewire": "6.0.0",
    "typescript": "4.9.4",
    "vite": "5.0.12",
-    "vite-plugin-checker": "0.7.2",
+    "vite-plugin-checker": "0.6.1",
    "vite-plugin-ejs": "1.7.0",
    "vite-plugin-pwa": "0.17.4",
-    "vite-plugin-svgr": "4.2.0",
-    "vitest": "2.0.5",
-    "vitest-canvas-mock": "0.3.3"
+    "vite-plugin-svgr": "2.4.0",
+    "vitest": "1.6.0",
+    "vitest-canvas-mock": "0.3.2"
  },
  "engines": {
    "node": "18.0.0 - 20.x.x"
@@ -83,7 +82,6 @@
    "clean-install": "yarn rm:node_modules && yarn install"
  },
  "resolutions": {
-    "@types/react": "18.2.0",
-    "strip-ansi": "6.0.1"
+    "@types/react": "18.2.0"
  }
 }
@@ -39,8 +39,6 @@ Please add the latest change on the top under the correct section.

 ### Breaking Changes

- Stats container CSS changed, so if you're using `renderCustomStats`, you may need to adjust your styles to retain the same layout.
-
 - `updateScene` API has changed due to the added `Store` component as part of the multiplayer undo / redo initiative. Specifically, `sceneData` property `commitToHistory: boolean` was replaced with `storeAction: StoreActionType`. Make sure to update all instances of `updateScene` according to the _before / after_ table below. [#7898](https://github.com/excalidraw/excalidraw/pull/7898)

 |  | Before `commitToHistory` | After `storeAction` | Notes |
@@ -24,7 +24,7 @@ import { CODES, KEYS } from "../keys";
 import { getNormalizedZoom } from "../scene";
 import { centerScrollOn } from "../scene/scroll";
 import { getStateForZoom } from "../scene/zoom";
-import type { AppState, Offsets } from "../types";
+import type { AppState, NormalizedZoomValue } from "../types";
 import { getShortcutKey, updateActiveTool } from "../utils";
 import { register } from "./register";
 import { Tooltip } from "../components/Tooltip";
@@ -38,7 +38,6 @@ import { DEFAULT_CANVAS_BACKGROUND_PICKS } from "../colors";
 import type { SceneBounds } from "../element/bounds";
 import { setCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { clamp, roundToStep } from "../../math";

 export const actionChangeViewBackgroundColor = register({
  name: "changeViewBackgroundColor",
@@ -105,8 +104,6 @@ export const actionClearCanvas = register({
        exportBackground: appState.exportBackground,
        exportEmbedScene: appState.exportEmbedScene,
        gridSize: appState.gridSize,
-        gridStep: appState.gridStep,
-        gridModeEnabled: appState.gridModeEnabled,
        stats: appState.stats,
        pasteDialog: appState.pasteDialog,
        activeTool:
@@ -247,7 +244,6 @@ export const actionResetZoom = register({
 const zoomValueToFitBoundsOnViewport = (
  bounds: SceneBounds,
  viewportDimensions: { width: number; height: number },
-  viewportZoomFactor: number = 1, // default to 1 if not provided
 ) => {
  const [x1, y1, x2, y2] = bounds;
  const commonBoundsWidth = x2 - x1;
@@ -255,89 +251,92 @@ const zoomValueToFitBoundsOnViewport = (
  const commonBoundsHeight = y2 - y1;
  const zoomValueForHeight = viewportDimensions.height / commonBoundsHeight;
  const smallestZoomValue = Math.min(zoomValueForWidth, zoomValueForHeight);
-
-  const adjustedZoomValue =
-    smallestZoomValue * clamp(viewportZoomFactor, 0.1, 1);
-
-  return Math.min(adjustedZoomValue, 1);
+  const zoomAdjustedToSteps =
+    Math.floor(smallestZoomValue / ZOOM_STEP) * ZOOM_STEP;
+  const clampedZoomValueToFitElements = Math.min(
+    Math.max(zoomAdjustedToSteps, MIN_ZOOM),
+    1,
+  );
+  return clampedZoomValueToFitElements as NormalizedZoomValue;
 };

 export const zoomToFitBounds = ({
  bounds,
  appState,
-  canvasOffsets,
  fitToViewport = false,
-  viewportZoomFactor = 1,
-  minZoom = -Infinity,
-  maxZoom = Infinity,
+  viewportZoomFactor = 0.7,
 }: {
  bounds: SceneBounds;
-  canvasOffsets?: Offsets;
  appState: Readonly<AppState>;
  /** whether to fit content to viewport (beyond >100%) */
  fitToViewport: boolean;
  /** zoom content to cover X of the viewport, when fitToViewport=true */
  viewportZoomFactor?: number;
-  minZoom?: number;
-  maxZoom?: number;
 }) => {
-  viewportZoomFactor = clamp(viewportZoomFactor, MIN_ZOOM, MAX_ZOOM);
-
  const [x1, y1, x2, y2] = bounds;
  const centerX = (x1 + x2) / 2;
  const centerY = (y1 + y2) / 2;

-  const canvasOffsetLeft = canvasOffsets?.left ?? 0;
-  const canvasOffsetTop = canvasOffsets?.top ?? 0;
-  const canvasOffsetRight = canvasOffsets?.right ?? 0;
-  const canvasOffsetBottom = canvasOffsets?.bottom ?? 0;
-
-  const effectiveCanvasWidth =
-    appState.width - canvasOffsetLeft - canvasOffsetRight;
-  const effectiveCanvasHeight =
-    appState.height - canvasOffsetTop - canvasOffsetBottom;
-
-  let adjustedZoomValue;
+  let newZoomValue;
+  let scrollX;
+  let scrollY;

  if (fitToViewport) {
    const commonBoundsWidth = x2 - x1;
    const commonBoundsHeight = y2 - y1;

-    adjustedZoomValue =
+    newZoomValue =
      Math.min(
-        effectiveCanvasWidth / commonBoundsWidth,
-        effectiveCanvasHeight / commonBoundsHeight,
-      ) * viewportZoomFactor;
+        appState.width / commonBoundsWidth,
+        appState.height / commonBoundsHeight,
+      ) * Math.min(1, Math.max(viewportZoomFactor, 0.1));
+
+    // Apply clamping to newZoomValue to be between 10% and 3000%
+    newZoomValue = Math.min(
+      Math.max(newZoomValue, MIN_ZOOM),
+      MAX_ZOOM,
+    ) as NormalizedZoomValue;
+
+    let appStateWidth = appState.width;
+
+    if (appState.openSidebar) {
+      const sidebarDOMElem = document.querySelector(
+        ".sidebar",
+      ) as HTMLElement | null;
+      const sidebarWidth = sidebarDOMElem?.offsetWidth ?? 0;
+      const isRTL = document.documentElement.getAttribute("dir") === "rtl";
+
+      appStateWidth = !isRTL
+        ? appState.width - sidebarWidth
+        : appState.width + sidebarWidth;
+    }
+
+    scrollX = (appStateWidth / 2) * (1 / newZoomValue) - centerX;
+    scrollY = (appState.height / 2) * (1 / newZoomValue) - centerY;
  } else {
-    adjustedZoomValue = zoomValueToFitBoundsOnViewport(
-      bounds,
-      {
-        width: effectiveCanvasWidth,
-        height: effectiveCanvasHeight,
-      },
-      viewportZoomFactor,
-    );
-  }
-
-  const newZoomValue = getNormalizedZoom(
-    clamp(roundToStep(adjustedZoomValue, ZOOM_STEP, "floor"), minZoom, maxZoom),
-  );
-
-  const centerScroll = centerScrollOn({
-    scenePoint: { x: centerX, y: centerY },
-    viewportDimensions: {
+    newZoomValue = zoomValueToFitBoundsOnViewport(bounds, {
      width: appState.width,
      height: appState.height,
-    },
-    offsets: canvasOffsets,
-    zoom: { value: newZoomValue },
-  });
+    });
+
+    const centerScroll = centerScrollOn({
+      scenePoint: { x: centerX, y: centerY },
+      viewportDimensions: {
+        width: appState.width,
+        height: appState.height,
+      },
+      zoom: { value: newZoomValue },
+    });
+
+    scrollX = centerScroll.scrollX;
+    scrollY = centerScroll.scrollY;
+  }

  return {
    appState: {
      ...appState,
-      scrollX: centerScroll.scrollX,
-      scrollY: centerScroll.scrollY,
+      scrollX,
+      scrollY,
      zoom: { value: newZoomValue },
    },
    storeAction: StoreAction.NONE,
@@ -345,34 +344,25 @@ export const zoomToFitBounds = ({
 };

 export const zoomToFit = ({
-  canvasOffsets,
  targetElements,
  appState,
  fitToViewport,
  viewportZoomFactor,
-  minZoom,
-  maxZoom,
 }: {
-  canvasOffsets?: Offsets;
  targetElements: readonly ExcalidrawElement[];
  appState: Readonly<AppState>;
  /** whether to fit content to viewport (beyond >100%) */
  fitToViewport: boolean;
  /** zoom content to cover X of the viewport, when fitToViewport=true */
  viewportZoomFactor?: number;
-  minZoom?: number;
-  maxZoom?: number;
 }) => {
  const commonBounds = getCommonBounds(getNonDeletedElements(targetElements));

  return zoomToFitBounds({
-    canvasOffsets,
    bounds: commonBounds,
    appState,
    fitToViewport,
    viewportZoomFactor,
-    minZoom,
-    maxZoom,
  });
 };

@@ -393,7 +383,6 @@ export const actionZoomToFitSelectionInViewport = register({
        userToFollow: null,
      },
      fitToViewport: false,
-      canvasOffsets: app.getEditorUIOffsets(),
    });
  },
  // NOTE shift-2 should have been assigned actionZoomToFitSelection.
@@ -419,7 +408,6 @@ export const actionZoomToFitSelection = register({
        userToFollow: null,
      },
      fitToViewport: true,
-      canvasOffsets: app.getEditorUIOffsets(),
    });
  },
  // NOTE this action should use shift-2 per figma, alas
@@ -436,7 +424,7 @@ export const actionZoomToFit = register({
  icon: zoomAreaIcon,
  viewMode: true,
  trackEvent: { category: "canvas" },
-  perform: (elements, appState, _, app) =>
+  perform: (elements, appState) =>
    zoomToFit({
      targetElements: elements,
      appState: {
@@ -444,7 +432,6 @@ export const actionZoomToFit = register({
        userToFollow: null,
      },
      fitToViewport: false,
-      canvasOffsets: app.getEditorUIOffsets(),
    }),
  keyTest: (event) =>
    event.code === CODES.ONE &&
@@ -10,7 +10,7 @@ import {
 } from "../clipboard";
 import { actionDeleteSelected } from "./actionDeleteSelected";
 import { exportCanvas, prepareElementsForExport } from "../data/index";
-import { getTextFromElements, isTextElement } from "../element";
+import { isTextElement } from "../element";
 import { t } from "../i18n";
 import { isFirefox } from "../constants";
 import { DuplicateIcon, cutIcon, pngIcon, svgIcon } from "../components/icons";
@@ -239,8 +239,16 @@ export const copyText = register({
      includeBoundTextElement: true,
    });

+    const text = selectedElements
+      .reduce((acc: string[], element) => {
+        if (isTextElement(element)) {
+          acc.push(element.text);
+        }
+        return acc;
+      }, [])
+      .join("\n\n");
    try {
-      copyTextToSystemClipboard(getTextFromElements(selectedElements));
+      copyTextToSystemClipboard(text);
    } catch (e) {
      throw new Error(t("errors.copyToSystemClipboardFailed"));
    }
@@ -15,7 +15,7 @@ import {
 import type { AppState } from "../types";
 import { fixBindingsAfterDuplication } from "../element/binding";
 import type { ActionResult } from "./types";
-import { DEFAULT_GRID_SIZE } from "../constants";
+import { GRID_SIZE } from "../constants";
 import {
  bindTextToShapeAfterDuplication,
  getBoundTextElement,
@@ -42,21 +42,20 @@ export const actionDuplicateSelection = register({
  perform: (elements, appState, formData, app) => {
    // duplicate selected point(s) if editing a line
    if (appState.editingLinearElement) {
-      // TODO: Invariants should be checked here instead of duplicateSelectedPoints()
-      try {
-        const newAppState = LinearElementEditor.duplicateSelectedPoints(
-          appState,
-          app.scene.getNonDeletedElementsMap(),
-        );
+      const ret = LinearElementEditor.duplicateSelectedPoints(
+        appState,
+        app.scene.getNonDeletedElementsMap(),
+      );

-        return {
-          elements,
-          appState: newAppState,
-          storeAction: StoreAction.CAPTURE,
-        };
-      } catch {
+      if (!ret) {
        return false;
      }
+
+      return {
+        elements,
+        appState: ret.appState,
+        storeAction: StoreAction.CAPTURE,
+      };
    }

    return {
@@ -100,8 +99,8 @@ const duplicateElements = (
      groupIdMap,
      element,
      {
-        x: element.x + DEFAULT_GRID_SIZE / 2,
-        y: element.y + DEFAULT_GRID_SIZE / 2,
+        x: element.x + GRID_SIZE / 2,
+        y: element.y + GRID_SIZE / 2,
      },
    );
    duplicatedElementsMap.set(newElement.id, newElement);
@@ -6,6 +6,7 @@ import { done } from "../components/icons";
 import { t } from "../i18n";
 import { register } from "./register";
 import { mutateElement } from "../element/mutateElement";
+import { isPathALoop } from "../math";
 import { LinearElementEditor } from "../element/linearElementEditor";
 import {
  maybeBindLinearElement,
@@ -15,8 +16,6 @@ import { isBindingElement, isLinearElement } from "../element/typeChecks";
 import type { AppState } from "../types";
 import { resetCursor } from "../cursor";
 import { StoreAction } from "../store";
-import { point } from "../../math";
-import { isPathALoop } from "../shapes";

 export const actionFinalize = register({
  name: "finalize",
@@ -51,6 +50,7 @@ export const actionFinalize = register({
            ...appState,
            cursorButton: "up",
            editingLinearElement: null,
+            selectedLinearElement: null,
          },
          storeAction: StoreAction.CAPTURE,
        };
@@ -113,10 +113,10 @@ export const actionFinalize = register({
          const linePoints = multiPointElement.points;
          const firstPoint = linePoints[0];
          mutateElement(multiPointElement, {
-            points: linePoints.map((p, index) =>
+            points: linePoints.map((point, index) =>
              index === linePoints.length - 1
-                ? point(firstPoint[0], firstPoint[1])
-                : p,
+                ? ([firstPoint[0], firstPoint[1]] as const)
+                : point,
            ),
          });
        }
@@ -179,7 +179,7 @@ export const actionFinalize = register({
        newElement: null,
        selectionElement: null,
        multiElement: null,
-        editingTextElement: null,
+        editingElement: null,
        startBoundElement: null,
        suggestedBindings: [],
        selectedElementIds:
@@ -4,7 +4,7 @@ import { ToolButton } from "../components/ToolButton";
 import { t } from "../i18n";
 import type { History } from "../history";
 import { HistoryChangedEvent } from "../history";
-import type { AppClassProperties, AppState } from "../types";
+import type { AppState } from "../types";
 import { KEYS } from "../keys";
 import { arrayToMap } from "../utils";
 import { isWindows } from "../constants";
@@ -13,19 +13,17 @@ import type { Store } from "../store";
 import { StoreAction } from "../store";
 import { useEmitter } from "../hooks/useEmitter";

-const executeHistoryAction = (
-  app: AppClassProperties,
+const writeData = (
  appState: Readonly<AppState>,
  updater: () => [SceneElementsMap, AppState] | void,
 ): ActionResult => {
  if (
    !appState.multiElement &&
    !appState.resizingElement &&
-    !appState.editingTextElement &&
+    !appState.editingElement &&
    !appState.newElement &&
    !appState.selectedElementsAreBeingDragged &&
-    !appState.selectionElement &&
-    !app.flowChartCreator.isCreatingChart
+    !appState.selectionElement
  ) {
    const result = updater();

@@ -55,7 +53,7 @@ export const createUndoAction: ActionCreator = (history, store) => ({
  trackEvent: { category: "history" },
  viewMode: false,
  perform: (elements, appState, value, app) =>
-    executeHistoryAction(app, appState, () =>
+    writeData(appState, () =>
      history.undo(
        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
        appState,
@@ -96,7 +94,7 @@ export const createRedoAction: ActionCreator = (history, store) => ({
  trackEvent: { category: "history" },
  viewMode: false,
  perform: (elements, appState, _, app) =>
-    executeHistoryAction(app, appState, () =>
+    writeData(appState, () =>
      history.redo(
        arrayToMap(elements) as SceneElementsMap, // TODO: #7348 refactor action manager to already include `SceneElementsMap`
        appState,
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useRef, useState } from "react";
-import type { AppClassProperties, AppState, Primitive } from "../types";
+import type { AppClassProperties, AppState, Point, Primitive } from "../types";
 import type { StoreActionType } from "../store";
 import {
  DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE,
@@ -115,8 +115,6 @@ import {
 } from "../element/binding";
 import { mutateElbowArrow } from "../element/routing";
 import { LinearElementEditor } from "../element/linearElementEditor";
-import type { LocalPoint } from "../../math";
-import { point, vector } from "../../math";

 const FONT_SIZE_RELATIVE_INCREASE_STEP = 0.1;

@@ -135,7 +133,7 @@ export const changeProperty = (
  return elements.map((element) => {
    if (
      selectedElementIds.get(element.id) ||
-      element.id === appState.editingTextElement?.id
+      element.id === appState.editingElement?.id
    ) {
      return callback(element);
    }
@@ -150,13 +148,13 @@ export const getFormValue = function <T extends Primitive>(
  isRelevantElement: true | ((element: ExcalidrawElement) => boolean),
  defaultValue: T | ((isSomeElementSelected: boolean) => T),
 ): T {
-  const editingTextElement = appState.editingTextElement;
+  const editingElement = appState.editingElement;
  const nonDeletedElements = getNonDeletedElements(elements);

  let ret: T | null = null;

-  if (editingTextElement) {
-    ret = getAttribute(editingTextElement);
+  if (editingElement) {
+    ret = getAttribute(editingElement);
  }

  if (!ret) {
@@ -1075,20 +1073,19 @@ export const actionChangeFontFamily = register({
              // open, populate the cache from scratch
              cachedElementsRef.current.clear();

-              const { editingTextElement } = appState;
+              const { editingElement } = appState;

-              // still check type to be safe
-              if (editingTextElement?.type === "text") {
-                // retrieve the latest version from the scene, as `editingTextElement` isn't mutated
-                const latesteditingTextElement = app.scene.getElement(
-                  editingTextElement.id,
+              if (editingElement?.type === "text") {
+                // retrieve the latest version from the scene, as `editingElement` isn't mutated
+                const latestEditingElement = app.scene.getElement(
+                  editingElement.id,
                );

                // inside the wysiwyg editor
                cachedElementsRef.current.set(
-                  editingTextElement.id,
+                  editingElement.id,
                  newElementWith(
-                    latesteditingTextElement || editingTextElement,
+                    latestEditingElement || editingElement,
                    {},
                    true,
                  ),
@@ -1650,10 +1647,10 @@ export const actionChangeArrowType = register({
            newElement,
            elementsMap,
            [finalStartPoint, finalEndPoint].map(
-              (p): LocalPoint =>
-                point(p[0] - newElement.x, p[1] - newElement.y),
+              (point) =>
+                [point[0] - newElement.x, point[1] - newElement.y] as Point,
            ),
-            vector(0, 0),
+            [0, 0],
            {
              ...(startElement && newElement.startBinding
                ? {
@@ -1,5 +1,6 @@
 import { CODES, KEYS } from "../keys";
 import { register } from "./register";
+import { GRID_SIZE } from "../constants";
 import type { AppState } from "../types";
 import { gridIcon } from "../components/icons";
 import { StoreAction } from "../store";
@@ -12,21 +13,21 @@ export const actionToggleGridMode = register({
  viewMode: true,
  trackEvent: {
    category: "canvas",
-    predicate: (appState) => appState.gridModeEnabled,
+    predicate: (appState) => !appState.gridSize,
  },
  perform(elements, appState) {
    return {
      appState: {
        ...appState,
-        gridModeEnabled: !this.checked!(appState),
+        gridSize: this.checked!(appState) ? null : GRID_SIZE,
        objectsSnapModeEnabled: false,
      },
      storeAction: StoreAction.NONE,
    };
  },
-  checked: (appState: AppState) => appState.gridModeEnabled,
+  checked: (appState: AppState) => appState.gridSize !== null,
  predicate: (element, appState, props) => {
-    return props.gridModeEnabled === undefined;
+    return typeof props.gridModeEnabled === "undefined";
  },
  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.code === CODES.QUOTE,
 });
@@ -17,7 +17,7 @@ export const actionToggleObjectsSnapMode = register({
      appState: {
        ...appState,
        objectsSnapModeEnabled: !this.checked!(appState),
-        gridModeEnabled: false,
+        gridSize: null,
      },
      storeAction: StoreAction.NONE,
    };
@@ -1,55 +0,0 @@
-import { KEYS } from "../keys";
-import { register } from "./register";
-import type { AppState } from "../types";
-import { searchIcon } from "../components/icons";
-import { StoreAction } from "../store";
-import { CANVAS_SEARCH_TAB, CLASSES, DEFAULT_SIDEBAR } from "../constants";
-
-export const actionToggleSearchMenu = register({
-  name: "searchMenu",
-  icon: searchIcon,
-  keywords: ["search", "find"],
-  label: "search.title",
-  viewMode: true,
-  trackEvent: {
-    category: "search_menu",
-    action: "toggle",
-    predicate: (appState) => appState.gridModeEnabled,
-  },
-  perform(elements, appState, _, app) {
-    if (
-      appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
-      appState.openSidebar.tab === CANVAS_SEARCH_TAB
-    ) {
-      const searchInput =
-        app.excalidrawContainerValue.container?.querySelector<HTMLInputElement>(
-          `.${CLASSES.SEARCH_MENU_INPUT_WRAPPER} input`,
-        );
-
-      if (searchInput?.matches(":focus")) {
-        return {
-          appState: { ...appState, openSidebar: null },
-          storeAction: StoreAction.NONE,
-        };
-      }
-
-      searchInput?.focus();
-      searchInput?.select();
-      return false;
-    }
-
-    return {
-      appState: {
-        ...appState,
-        openSidebar: { name: DEFAULT_SIDEBAR.name, tab: CANVAS_SEARCH_TAB },
-        openDialog: null,
-      },
-      storeAction: StoreAction.NONE,
-    };
-  },
-  checked: (appState: AppState) => appState.gridModeEnabled,
-  predicate: (element, appState, props) => {
-    return props.gridModeEnabled === undefined;
-  },
-  keyTest: (event) => event[KEYS.CTRL_OR_CMD] && event.key === KEYS.F,
-});
@@ -86,5 +86,3 @@ export { actionUnbindText, actionBindText } from "./actionBoundText";
 export { actionLink } from "./actionLink";
 export { actionToggleElementLock } from "./actionElementLock";
 export { actionToggleLinearEditor } from "./actionLinearEditor";
-
-export { actionToggleSearchMenu } from "./actionToggleSearchMenu";
@@ -51,8 +51,7 @@ export type ShortcutName =
    >
  | "saveScene"
  | "imageExport"
-  | "commandPalette"
-  | "searchMenu";
+  | "commandPalette";

 const shortcutMap: Record<ShortcutName, string[]> = {
  toggleTheme: [getShortcutKey("Shift+Alt+D")],
@@ -113,7 +112,6 @@ const shortcutMap: Record<ShortcutName, string[]> = {
  saveFileToDisk: [getShortcutKey("CtrlOrCmd+S")],
  saveToActiveFile: [getShortcutKey("CtrlOrCmd+S")],
  toggleShortcuts: [getShortcutKey("?")],
-  searchMenu: [getShortcutKey("CtrlOrCmd+F")],
 };

 export const getShortcutFromShortcutName = (name: ShortcutName, idx = 0) => {
@@ -137,8 +137,7 @@ export type ActionName =
  | "wrapTextInContainer"
  | "commandPalette"
  | "autoResize"
-  | "elementStats"
-  | "searchMenu";
+  | "elementStats";

 export type PanelComponentProps = {
  elements: readonly ExcalidrawElement[];
@@ -192,8 +191,7 @@ export interface Action {
          | "history"
          | "menu"
          | "collab"
-          | "hyperlink"
-          | "search_menu";
+          | "hyperlink";
        action?: string;
        predicate?: (
          appState: Readonly<AppState>,
@@ -1,6 +1,6 @@
 // place here categories that you want to track. We want to track just a
 // small subset of categories at a given time.
-const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette", "export"]);
+const ALLOWED_CATEGORIES_TO_TRACK = new Set(["command_palette"]);

 export const trackEvent = (
  category: string,
@@ -5,11 +5,9 @@ import {
  DEFAULT_FONT_FAMILY,
  DEFAULT_FONT_SIZE,
  DEFAULT_TEXT_ALIGN,
-  DEFAULT_GRID_SIZE,
  EXPORT_SCALES,
  STATS_PANELS,
  THEME,
-  DEFAULT_GRID_STEP,
 } from "./constants";
 import type { AppState, NormalizedZoomValue } from "./types";

@@ -44,7 +42,7 @@ export const getDefaultAppState = (): Omit<
    cursorButton: "up",
    activeEmbeddable: null,
    newElement: null,
-    editingTextElement: null,
+    editingElement: null,
    editingGroupId: null,
    editingLinearElement: null,
    activeTool: {
@@ -61,9 +59,7 @@ export const getDefaultAppState = (): Omit<
    exportEmbedScene: false,
    exportWithDarkMode: false,
    fileHandle: null,
-    gridSize: DEFAULT_GRID_SIZE,
-    gridStep: DEFAULT_GRID_STEP,
-    gridModeEnabled: false,
+    gridSize: null,
    isBindingEnabled: true,
    defaultSidebarDockedPreference: false,
    isLoading: false,
@@ -116,7 +112,6 @@ export const getDefaultAppState = (): Omit<
    objectsSnapModeEnabled: false,
    userToFollow: null,
    followedBy: new Set(),
-    searchMatches: [],
  };
 };

@@ -166,7 +161,7 @@ const APP_STATE_STORAGE_CONF = (<
  cursorButton: { browser: true, export: false, server: false },
  activeEmbeddable: { browser: false, export: false, server: false },
  newElement: { browser: false, export: false, server: false },
-  editingTextElement: { browser: false, export: false, server: false },
+  editingElement: { browser: false, export: false, server: false },
  editingGroupId: { browser: true, export: false, server: false },
  editingLinearElement: { browser: false, export: false, server: false },
  activeTool: { browser: true, export: false, server: false },
@@ -179,8 +174,6 @@ const APP_STATE_STORAGE_CONF = (<
  exportWithDarkMode: { browser: true, export: false, server: false },
  fileHandle: { browser: false, export: false, server: false },
  gridSize: { browser: true, export: true, server: true },
-  gridStep: { browser: true, export: true, server: true },
-  gridModeEnabled: { browser: true, export: true, server: true },
  height: { browser: false, export: false, server: false },
  isBindingEnabled: { browser: false, export: false, server: false },
  defaultSidebarDockedPreference: {
@@ -237,7 +230,6 @@ const APP_STATE_STORAGE_CONF = (<
  objectsSnapModeEnabled: { browser: true, export: false, server: false },
  userToFollow: { browser: false, export: false, server: false },
  followedBy: { browser: false, export: false, server: false },
-  searchMatches: { browser: false, export: false, server: false },
 });

 const _clearAppStateForStorage = <
@@ -1,5 +1,3 @@
-import type { Radians } from "../math";
-import { point } from "../math";
 import {
  COLOR_PALETTE,
  DEFAULT_CHART_COLOR_INDEX,
@@ -205,7 +203,7 @@ const chartXLabels = (
        x: x + index * (BAR_WIDTH + BAR_GAP) + BAR_GAP * 2,
        y: y + BAR_GAP / 2,
        width: BAR_WIDTH,
-        angle: 5.87 as Radians,
+        angle: 5.87,
        fontSize: 16,
        textAlign: "center",
        verticalAlign: "top",
@@ -260,7 +258,10 @@ const chartLines = (
    x,
    y,
    width: chartWidth,
-    points: [point(0, 0), point(chartWidth, 0)],
+    points: [
+      [0, 0],
+      [chartWidth, 0],
+    ],
  });

  const yLine = newLinearElement({
@@ -271,7 +272,10 @@ const chartLines = (
    x,
    y,
    height: chartHeight,
-    points: [point(0, 0), point(0, -chartHeight)],
+    points: [
+      [0, 0],
+      [0, -chartHeight],
+    ],
  });

  const maxLine = newLinearElement({
@@ -284,7 +288,10 @@ const chartLines = (
    strokeStyle: "dotted",
    width: chartWidth,
    opacity: GRID_OPACITY,
-    points: [point(0, 0), point(chartWidth, 0)],
+    points: [
+      [0, 0],
+      [chartWidth, 0],
+    ],
  });

  return [xLine, yLine, maxLine];
@@ -441,7 +448,10 @@ const chartTypeLine = (
      height: cy,
      strokeStyle: "dotted",
      opacity: GRID_OPACITY,
-      points: [point(0, 0), point(0, cy)],
+      points: [
+        [0, 0],
+        [0, cy],
+      ],
    });
  });

@@ -45,11 +45,11 @@ import {
  frameToolIcon,
  mermaidLogoIcon,
  laserPointerToolIcon,
+  OpenAIIcon,
  MagicIcon,
 } from "./icons";
 import { KEYS } from "../keys";
 import { useTunnels } from "../context/tunnels";
-import { CLASSES } from "../constants";

 export const canChangeStrokeColor = (
  appState: UIAppState,
@@ -104,9 +104,7 @@ export const SelectedShapeActions = ({
  ) {
    isSingleElementBoundContainer = true;
  }
-  const isEditingTextOrNewElement = Boolean(
-    appState.editingTextElement || appState.newElement,
-  );
+  const isEditing = Boolean(appState.editingElement);
  const device = useDevice();
  const isRTL = document.documentElement.getAttribute("dir") === "rtl";

@@ -236,7 +234,7 @@ export const SelectedShapeActions = ({
          </div>
        </fieldset>
      )}
-      {!isEditingTextOrNewElement && targetElements.length > 0 && (
+      {!isEditing && targetElements.length > 0 && (
        <fieldset>
          <legend>{t("labels.actions")}</legend>
          <div className="buttonList">
@@ -402,7 +400,7 @@ export const ShapesSwitcher = ({
          >
            {t("toolBar.mermaidToExcalidraw")}
          </DropdownMenu.Item>
-          {app.props.aiEnabled !== false && app.plugins.diagramToCode && (
+          {app.props.aiEnabled !== false && (
            <>
              <DropdownMenu.Item
                onSelect={() => app.onMagicframeToolSelect()}
@@ -412,6 +410,20 @@ export const ShapesSwitcher = ({
                {t("toolBar.magicframe")}
                <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
              </DropdownMenu.Item>
+              <DropdownMenu.Item
+                onSelect={() => {
+                  trackEvent("ai", "open-settings", "d2c");
+                  app.setOpenDialog({
+                    name: "settings",
+                    source: "settings",
+                    tab: "diagram-to-code",
+                  });
+                }}
+                icon={OpenAIIcon}
+                data-testid="toolbar-magicSettings"
+              >
+                {t("toolBar.magicSettings")}
+              </DropdownMenu.Item>
            </>
          )}
        </DropdownMenu.Content>
@@ -427,7 +439,7 @@ export const ZoomActions = ({
  renderAction: ActionManager["renderAction"];
  zoom: Zoom;
 }) => (
-  <Stack.Col gap={1} className={CLASSES.ZOOM_ACTIONS}>
+  <Stack.Col gap={1} className="zoom-actions">
    <Stack.Row align="center">
      {renderAction("zoomOut")}
      {renderAction("resetZoom")}
@@ -106,7 +106,7 @@ const ColorPickerPopupContent = ({
  return (
    <PropertiesPopover
      container={container}
-      style={{ maxWidth: "13rem" }}
+      style={{ maxWidth: "208px" }}
      onFocusOutside={(event) => {
        // refocus due to eye dropper
        focusPickerContent();
@@ -43,11 +43,7 @@ import { InlineIcon } from "../InlineIcon";
 import { SHAPES } from "../../shapes";
 import { canChangeBackgroundColor, canChangeStrokeColor } from "../Actions";
 import { useStableCallback } from "../../hooks/useStableCallback";
-import {
-  actionClearCanvas,
-  actionLink,
-  actionToggleSearchMenu,
-} from "../../actions";
+import { actionClearCanvas, actionLink } from "../../actions";
 import { jotaiStore } from "../../jotai";
 import { activeConfirmDialogAtom } from "../ActiveConfirmDialog";
 import type { CommandPaletteItem } from "./types";
@@ -386,15 +382,6 @@ function CommandPaletteInner({
            }
          },
        },
-        {
-          label: t("search.title"),
-          category: DEFAULT_CATEGORIES.app,
-          icon: searchIcon,
-          viewMode: true,
-          perform: () => {
-            actionManager.executeAction(actionToggleSearchMenu);
-          },
-        },
        {
          label: t("labels.changeStroke"),
          keywords: ["color", "outline"],
@@ -1,11 +1,8 @@
 import clsx from "clsx";
-import {
-  CANVAS_SEARCH_TAB,
-  DEFAULT_SIDEBAR,
-  LIBRARY_SIDEBAR_TAB,
-} from "../constants";
+import { DEFAULT_SIDEBAR, LIBRARY_SIDEBAR_TAB } from "../constants";
 import { useTunnels } from "../context/tunnels";
 import { useUIAppState } from "../context/ui-appState";
+import { t } from "../i18n";
 import type { MarkOptional, Merge } from "../utility-types";
 import { composeEventHandlers } from "../utils";
 import { useExcalidrawSetAppState } from "./App";
@@ -13,9 +10,6 @@ import { withInternalFallback } from "./hoc/withInternalFallback";
 import { LibraryMenu } from "./LibraryMenu";
 import type { SidebarProps, SidebarTriggerProps } from "./Sidebar/common";
 import { Sidebar } from "./Sidebar/Sidebar";
-import "../components/dropdownMenu/DropdownMenu.scss";
-import { SearchMenu } from "./SearchMenu";
-import { LibraryIcon, searchIcon } from "./icons";

 const DefaultSidebarTrigger = withInternalFallback(
  "DefaultSidebarTrigger",
@@ -37,11 +31,14 @@ const DefaultSidebarTrigger = withInternalFallback(
 );
 DefaultSidebarTrigger.displayName = "DefaultSidebarTrigger";

-const DefaultTabTriggers = ({ children }: { children: React.ReactNode }) => {
+const DefaultTabTriggers = ({
+  children,
+  ...rest
+}: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) => {
  const { DefaultSidebarTabTriggersTunnel } = useTunnels();
  return (
    <DefaultSidebarTabTriggersTunnel.In>
-      {children}
+      <Sidebar.TabTriggers {...rest}>{children}</Sidebar.TabTriggers>
    </DefaultSidebarTabTriggersTunnel.In>
  );
 };
@@ -68,21 +65,17 @@ export const DefaultSidebar = Object.assign(

      const { DefaultSidebarTabTriggersTunnel } = useTunnels();

-      const isForceDocked = appState.openSidebar?.tab === CANVAS_SEARCH_TAB;
-
      return (
        <Sidebar
          {...rest}
          name="default"
          key="default"
          className={clsx("default-sidebar", className)}
-          docked={
-            isForceDocked || (docked ?? appState.defaultSidebarDockedPreference)
-          }
+          docked={docked ?? appState.defaultSidebarDockedPreference}
          onDock={
            // `onDock=false` disables docking.
            // if `docked` passed, but no onDock passed, disable manual docking.
-            isForceDocked || onDock === false || (!onDock && docked != null)
+            onDock === false || (!onDock && docked != null)
              ? undefined
              : // compose to allow the host app to listen on default behavior
                composeEventHandlers(onDock, (docked) => {
@@ -92,22 +85,26 @@ export const DefaultSidebar = Object.assign(
        >
          <Sidebar.Tabs>
            <Sidebar.Header>
-              <Sidebar.TabTriggers>
-                <Sidebar.TabTrigger tab={CANVAS_SEARCH_TAB}>
-                  {searchIcon}
-                </Sidebar.TabTrigger>
-                <Sidebar.TabTrigger tab={LIBRARY_SIDEBAR_TAB}>
-                  {LibraryIcon}
-                </Sidebar.TabTrigger>
-                <DefaultSidebarTabTriggersTunnel.Out />
-              </Sidebar.TabTriggers>
+              {rest.__fallback && (
+                <div
+                  style={{
+                    color: "var(--color-primary)",
+                    fontSize: "1.2em",
+                    fontWeight: "bold",
+                    textOverflow: "ellipsis",
+                    overflow: "hidden",
+                    whiteSpace: "nowrap",
+                    paddingRight: "1em",
+                  }}
+                >
+                  {t("toolBar.library")}
+                </div>
+              )}
+              <DefaultSidebarTabTriggersTunnel.Out />
            </Sidebar.Header>
            <Sidebar.Tab tab={LIBRARY_SIDEBAR_TAB}>
              <LibraryMenu />
            </Sidebar.Tab>
-            <Sidebar.Tab tab={CANVAS_SEARCH_TAB}>
-              <SearchMenu />
-            </Sidebar.Tab>
            {children}
          </Sidebar.Tabs>
        </Sidebar>
@@ -1,17 +0,0 @@
-import { useLayoutEffect } from "react";
-import { useApp } from "../App";
-import type { GenerateDiagramToCode } from "../../types";
-
-export const DiagramToCodePlugin = (props: {
-  generate: GenerateDiagramToCode;
-}) => {
-  const app = useApp();
-
-  useLayoutEffect(() => {
-    app.setPlugins({
-      diagramToCode: { generate: props.generate },
-    });
-  }, [app, props.generate]);
-
-  return null;
-};
@@ -1,19 +1,5 @@
@import "../css/variables.module.scss";

-@keyframes successStatusAnimation {
-  0% {
-    transform: scale(0.35);
-  }
-
-  50% {
-    transform: scale(1.25);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
 .excalidraw {
  .ExcButton {
    --text-color: transparent;
@@ -30,20 +16,11 @@

    .Spinner {
      --spinner-color: var(--color-surface-lowest);
-    }
-
-    .ExcButton__statusIcon {
-      visibility: visible;
      position: absolute;
-
-      width: 1.2rem;
-      height: 1.2rem;
-
-      animation: successStatusAnimation 0.5s cubic-bezier(0.3, 1, 0.6, 1);
+      visibility: visible;
    }

-    &.ExcButton--status-loading,
-    &.ExcButton--status-success {
+    &[disabled] {
      pointer-events: none;

      .ExcButton__contents {
@@ -51,10 +28,6 @@
      }
    }

-    &[disabled] {
-      pointer-events: none;
-    }
-
    &,
    &__contents {
      display: flex;
@@ -146,46 +119,6 @@
      }
    }

-    &--color-success {
-      &.ExcButton--variant-filled {
-        --text-color: var(--color-success-text);
-        --back-color: var(--color-success);
-
-        .Spinner {
-          --spinner-color: var(--color-success);
-        }
-
-        &:hover {
-          --back-color: var(--color-success-darker);
-        }
-
-        &:active {
-          --back-color: var(--color-success-darkest);
-        }
-      }
-
-      &.ExcButton--variant-outlined,
-      &.ExcButton--variant-icon {
-        --text-color: var(--color-success-contrast);
-        --border-color: var(--color-success-contrast);
-        --back-color: transparent;
-
-        .Spinner {
-          --spinner-color: var(--color-success-contrast);
-        }
-
-        &:hover {
-          --text-color: var(--color-success-contrast-hover);
-          --border-color: var(--color-success-contrast-hover);
-        }
-
-        &:active {
-          --text-color: var(--color-success-contrast-active);
-          --border-color: var(--color-success-contrast-active);
-        }
-      }
-    }
-
    &--color-muted {
      &.ExcButton--variant-filled {
        --text-color: var(--island-bg-color);
@@ -5,15 +5,9 @@ import "./FilledButton.scss";
 import { AbortError } from "../errors";
 import Spinner from "./Spinner";
 import { isPromiseLike } from "../utils";
-import { tablerCheckIcon } from "./icons";

 export type ButtonVariant = "filled" | "outlined" | "icon";
-export type ButtonColor =
-  | "primary"
-  | "danger"
-  | "warning"
-  | "muted"
-  | "success";
+export type ButtonColor = "primary" | "danger" | "warning" | "muted";
 export type ButtonSize = "medium" | "large";

 export type FilledButtonProps = {
@@ -21,7 +15,6 @@ export type FilledButtonProps = {

  children?: React.ReactNode;
  onClick?: (event: React.MouseEvent) => void;
-  status?: null | "loading" | "success";

  variant?: ButtonVariant;
  color?: ButtonColor;
@@ -44,7 +37,6 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
      size = "medium",
      fullWidth,
      className,
-      status,
    },
    ref,
  ) => {
@@ -54,11 +46,8 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
      const ret = onClick?.(event);

      if (isPromiseLike(ret)) {
-        // delay loading state to prevent flicker in case of quick response
-        const timer = window.setTimeout(() => {
-          setIsLoading(true);
-        }, 50);
        try {
+          setIsLoading(true);
          await ret;
        } catch (error: any) {
          if (!(error instanceof AbortError)) {
@@ -67,15 +56,11 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
            console.warn(error);
          }
        } finally {
-          clearTimeout(timer);
          setIsLoading(false);
        }
      }
    };

-    const _status = isLoading ? "loading" : status;
-    color = _status === "success" ? "success" : color;
-
    return (
      <button
        className={clsx(
@@ -83,7 +68,6 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
          `ExcButton--color-${color}`,
          `ExcButton--variant-${variant}`,
          `ExcButton--size-${size}`,
-          `ExcButton--status-${_status}`,
          { "ExcButton--fullWidth": fullWidth },
          className,
        )}
@@ -91,16 +75,10 @@ export const FilledButton = forwardRef<HTMLButtonElement, FilledButtonProps>(
        type="button"
        aria-label={label}
        ref={ref}
-        disabled={_status === "loading" || _status === "success"}
+        disabled={isLoading}
      >
        <div className="ExcButton__contents">
-          {_status === "loading" ? (
-            <Spinner className="ExcButton__statusIcon" />
-          ) : (
-            _status === "success" && (
-              <div className="ExcButton__statusIcon">{tablerCheckIcon}</div>
-            )
-          )}
+          {isLoading && <Spinner />}
          {icon && (
            <div className="ExcButton__icon" aria-hidden>
              {icon}
@@ -288,10 +288,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
              label={t("stats.fullTitle")}
              shortcuts={[getShortcutKey("Alt+/")]}
            />
-            <Shortcut
-              label={t("search.title")}
-              shortcuts={[getShortcutFromShortcutName("searchMenu")]}
-            />
            <Shortcut
              label={t("commandPalette.title")}
              shortcuts={
@@ -308,16 +304,6 @@ export const HelpDialog = ({ onClose }: { onClose?: () => void }) => {
            className="HelpDialog__island--editor"
            caption={t("helpDialog.editor")}
          >
-            <Shortcut
-              label={t("helpDialog.createFlowchart")}
-              shortcuts={[getShortcutKey(`CtrlOrCmd+Arrow Key`)]}
-              isOr={true}
-            />
-            <Shortcut
-              label={t("helpDialog.navigateFlowchart")}
-              shortcuts={[getShortcutKey(`Alt+Arrow Key`)]}
-              isOr={true}
-            />
            <Shortcut
              label={t("labels.moveCanvas")}
              shortcuts={[
@@ -9,7 +9,6 @@ $wide-viewport-width: 1000px;
    box-sizing: border-box;
    position: absolute;
    display: flex;
-    flex-direction: column;
    justify-content: center;
    left: 0;
    top: 100%;
@@ -1,7 +1,6 @@
 import { t } from "../i18n";
 import type { AppClassProperties, Device, UIAppState } from "../types";
 import {
-  isFlowchartNodeElement,
  isImageElement,
  isLinearElement,
  isTextBindableContainer,
@@ -11,9 +10,6 @@ import { getShortcutKey } from "../utils";
 import { isEraserActive } from "../appState";

 import "./HintViewer.scss";
-import { isNodeInFlowchart } from "../element/flowchart";
-import { isGridModeEnabled } from "../snapping";
-import { CANVAS_SEARCH_TAB, DEFAULT_SIDEBAR } from "../constants";

 interface HintViewerProps {
  appState: UIAppState;
@@ -22,23 +18,10 @@ interface HintViewerProps {
  app: AppClassProperties;
 }

-const getHints = ({
-  appState,
-  isMobile,
-  device,
-  app,
-}: HintViewerProps): null | string | string[] => {
+const getHints = ({ appState, isMobile, device, app }: HintViewerProps) => {
  const { activeTool, isResizing, isRotating, lastPointerDownWith } = appState;
  const multiMode = appState.multiElement !== null;

-  if (
-    appState.openSidebar?.name === DEFAULT_SIDEBAR.name &&
-    appState.openSidebar.tab === CANVAS_SEARCH_TAB &&
-    appState.searchMatches?.length
-  ) {
-    return t("hints.dismissSearch");
-  }
-
  if (appState.openSidebar && !device.editor.canFitSidebar) {
    return null;
  }
@@ -96,7 +79,7 @@ const getHints = ({
    return t("hints.text_selected");
  }

-  if (appState.editingTextElement) {
+  if (appState.editingElement && isTextElement(appState.editingElement)) {
    return t("hints.text_editing");
  }

@@ -104,13 +87,13 @@ const getHints = ({
    if (
      appState.selectionElement &&
      !selectedElements.length &&
-      !appState.editingTextElement &&
+      !appState.editingElement &&
      !appState.editingLinearElement
    ) {
      return t("hints.deepBoxSelect");
    }

-    if (isGridModeEnabled(app) && appState.selectedElementsAreBeingDragged) {
+    if (appState.gridSize && appState.selectedElementsAreBeingDragged) {
      return t("hints.disableSnapping");
    }

@@ -132,19 +115,6 @@ const getHints = ({
        !appState.selectedElementsAreBeingDragged &&
        isTextBindableContainer(selectedElements[0])
      ) {
-        if (isFlowchartNodeElement(selectedElements[0])) {
-          if (
-            isNodeInFlowchart(
-              selectedElements[0],
-              app.scene.getNonDeletedElementsMap(),
-            )
-          ) {
-            return [t("hints.bindTextToElement"), t("hints.createFlowchart")];
-          }
-
-          return [t("hints.bindTextToElement"), t("hints.createFlowchart")];
-        }
-
        return t("hints.bindTextToElement");
      }
    }
@@ -159,24 +129,17 @@ export const HintViewer = ({
  device,
  app,
 }: HintViewerProps) => {
-  const hints = getHints({
+  let hint = getHints({
    appState,
    isMobile,
    device,
    app,
  });
-
-  if (!hints) {
+  if (!hint) {
    return null;
  }

-  const hint = Array.isArray(hints)
-    ? hints
-        .map((hint) => {
-          return getShortcutKey(hint).replace(/\. ?$/, "");
-        })
-        .join(". ")
-    : getShortcutKey(hints);
+  hint = getShortcutKey(hint);

  return (
    <div className="HintViewer">
@@ -35,7 +35,6 @@ import "./ImageExportDialog.scss";
 import { FilledButton } from "./FilledButton";
 import { cloneJSON } from "../utils";
 import { prepareElementsForExport } from "../data";
-import { useCopyStatus } from "../hooks/useCopiedIndicator";

 const supportsContextFilters =
  "filter" in document.createElement("canvas").getContext("2d")!;
@@ -90,21 +89,6 @@ const ImageExportModal = ({
  const previewRef = useRef<HTMLDivElement>(null);
  const [renderError, setRenderError] = useState<Error | null>(null);

-  const { onCopy, copyStatus, resetCopyStatus } = useCopyStatus();
-
-  useEffect(() => {
-    // if user changes setting right after export to clipboard, reset the status
-    // so they don't have to wait for the timeout to click the button again
-    resetCopyStatus();
-  }, [
-    projectName,
-    exportWithBackground,
-    exportDarkMode,
-    exportScale,
-    embedScene,
-    resetCopyStatus,
-  ]);
-
  const { exportedElements, exportingFrame } = prepareElementsForExport(
    elementsSnapshot,
    appStateSnapshot,
@@ -121,7 +105,6 @@ const ImageExportModal = ({
    if (!maxWidth) {
      return;
    }
-
    exportToCanvas({
      elements: exportedElements,
      appState: {
@@ -311,17 +294,11 @@ const ImageExportModal = ({
            <FilledButton
              className="ImageExportModal__settings__buttons__button"
              label={t("imageExportDialog.title.copyPngToClipboard")}
-              status={copyStatus}
-              onClick={async () => {
-                await onExportImage(
-                  EXPORT_IMAGE_TYPES.clipboard,
-                  exportedElements,
-                  {
-                    exportingFrame,
-                  },
-                );
-                onCopy();
-              }}
+              onClick={() =>
+                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
+                  exportingFrame,
+                })
+              }
              icon={copyIcon}
            >
              {t("imageExportDialog.button.copyPngToClipboard")}
@@ -27,6 +27,99 @@
      & > * {
        pointer-events: var(--ui-pointerEvents);
      }
+
+      & > .Stats {
+        width: 204px;
+        position: absolute;
+        top: 60px;
+        font-size: 12px;
+        z-index: var(--zIndex-layerUI);
+        pointer-events: var(--ui-pointerEvents);
+
+        .title {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 12px;
+
+          h2 {
+            margin: 0;
+          }
+        }
+
+        .sectionContent {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .elementType {
+          font-size: 12px;
+          font-weight: 700;
+          margin-top: 8px;
+        }
+
+        .elementsCount {
+          width: 100%;
+          font-size: 12px;
+          display: flex;
+          justify-content: space-between;
+          margin-top: 8px;
+        }
+
+        .statsItem {
+          margin-top: 8px;
+          width: 100%;
+          margin-bottom: 4px;
+          display: grid;
+          gap: 4px;
+
+          .label {
+            margin-right: 4px;
+          }
+        }
+
+        h3 {
+          white-space: nowrap;
+          margin: 0;
+        }
+
+        .close {
+          height: 16px;
+          width: 16px;
+          cursor: pointer;
+          svg {
+            width: 100%;
+            height: 100%;
+          }
+        }
+
+        table {
+          width: 100%;
+          th {
+            border-bottom: 1px solid var(--input-border-color);
+            padding: 4px;
+          }
+          tr {
+            td:nth-child(2) {
+              min-width: 24px;
+              text-align: right;
+            }
+          }
+        }
+
+        .divider {
+          width: 100%;
+          height: 1px;
+          background-color: var(--default-border-color);
+        }
+
+        :root[dir="rtl"] & {
+          left: 12px;
+          right: initial;
+        }
+      }
    }

    &__footer {
@@ -53,17 +53,18 @@ import { LibraryIcon } from "./icons";
 import { UIAppStateContext } from "../context/ui-appState";
 import { DefaultSidebar } from "./DefaultSidebar";
 import { EyeDropper, activeEyeDropperAtom } from "./EyeDropper";
+
+import "./LayerUI.scss";
+import "./Toolbar.scss";
 import { mutateElement } from "../element/mutateElement";
 import { ShapeCache } from "../scene/ShapeCache";
 import Scene from "../scene/Scene";
 import { LaserPointerButton } from "./LaserPointerButton";
+import { MagicSettings } from "./MagicSettings";
 import { TTDDialog } from "./TTDDialog/TTDDialog";
 import { Stats } from "./Stats";
 import { actionToggleStats } from "../actions";

-import "./LayerUI.scss";
-import "./Toolbar.scss";
-
 interface LayerUIProps {
  actionManager: ActionManager;
  appState: UIAppState;
@@ -84,6 +85,14 @@ interface LayerUIProps {
  children?: React.ReactNode;
  app: AppClassProperties;
  isCollaborating: boolean;
+  openAIKey: string | null;
+  isOpenAIKeyPersisted: boolean;
+  onOpenAIAPIKeyChange: (apiKey: string, shouldPersist: boolean) => void;
+  onMagicSettingsConfirm: (
+    apiKey: string,
+    shouldPersist: boolean,
+    source: "tool" | "generation" | "settings",
+  ) => void;
 }

 const DefaultMainMenu: React.FC<{
@@ -99,7 +108,6 @@ const DefaultMainMenu: React.FC<{
      {UIOptions.canvasActions.saveAsImage && (
        <MainMenu.DefaultItems.SaveAsImage />
      )}
-      <MainMenu.DefaultItems.SearchMenu />
      <MainMenu.DefaultItems.Help />
      <MainMenu.DefaultItems.ClearCanvas />
      <MainMenu.Separator />
@@ -141,6 +149,10 @@ const LayerUI = ({
  children,
  app,
  isCollaborating,
+  openAIKey,
+  isOpenAIKeyPersisted,
+  onOpenAIAPIKeyChange,
+  onMagicSettingsConfirm,
 }: LayerUIProps) => {
  const device = useDevice();
  const tunnels = useInitializeTunnels();
@@ -348,7 +360,7 @@ const LayerUI = ({
              )}
            {shouldShowStats && (
              <Stats
-                app={app}
+                scene={app.scene}
                onClose={() => {
                  actionManager.executeAction(actionToggleStats);
                }}
@@ -470,6 +482,25 @@ const LayerUI = ({
          }}
        />
      )}
+      {appState.openDialog?.name === "settings" && (
+        <MagicSettings
+          openAIKey={openAIKey}
+          isPersisted={isOpenAIKeyPersisted}
+          onChange={onOpenAIAPIKeyChange}
+          onConfirm={(apiKey, shouldPersist) => {
+            const source =
+              appState.openDialog?.name === "settings"
+                ? appState.openDialog?.source
+                : "settings";
+            setAppState({ openDialog: null }, () => {
+              onMagicSettingsConfirm(apiKey, shouldPersist, source);
+            });
+          }}
+          onClose={() => {
+            setAppState({ openDialog: null });
+          }}
+        />
+      )}
      <ActiveConfirmDialog />
      <tunnels.OverwriteConfirmDialogTunnel.Out />
      {renderImageExportDialog()}
@@ -0,0 +1,18 @@
+.excalidraw {
+  .MagicSettings {
+    .Island {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+  }
+
+  .MagicSettings-confirm {
+    padding: 0.5rem 1rem;
+  }
+
+  .MagicSettings__confirm {
+    margin-top: 2rem;
+    margin-right: auto;
+  }
+}
@@ -0,0 +1,160 @@
+import { useState } from "react";
+import { Dialog } from "./Dialog";
+import { TextField } from "./TextField";
+import { MagicIcon, OpenAIIcon } from "./icons";
+import { FilledButton } from "./FilledButton";
+import { CheckboxItem } from "./CheckboxItem";
+import { KEYS } from "../keys";
+import { useUIAppState } from "../context/ui-appState";
+import { InlineIcon } from "./InlineIcon";
+import { Paragraph } from "./Paragraph";
+
+import "./MagicSettings.scss";
+import TTDDialogTabs from "./TTDDialog/TTDDialogTabs";
+import { TTDDialogTab } from "./TTDDialog/TTDDialogTab";
+
+export const MagicSettings = (props: {
+  openAIKey: string | null;
+  isPersisted: boolean;
+  onChange: (key: string, shouldPersist: boolean) => void;
+  onConfirm: (key: string, shouldPersist: boolean) => void;
+  onClose: () => void;
+}) => {
+  const [keyInputValue, setKeyInputValue] = useState(props.openAIKey || "");
+  const [shouldPersist, setShouldPersist] = useState<boolean>(
+    props.isPersisted,
+  );
+
+  const appState = useUIAppState();
+
+  const onConfirm = () => {
+    props.onConfirm(keyInputValue.trim(), shouldPersist);
+  };
+
+  if (appState.openDialog?.name !== "settings") {
+    return null;
+  }
+
+  return (
+    <Dialog
+      onCloseRequest={() => {
+        props.onClose();
+        props.onConfirm(keyInputValue.trim(), shouldPersist);
+      }}
+      title={
+        <div style={{ display: "flex" }}>
+          Wireframe to Code (AI){" "}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0.1rem 0.5rem",
+              marginLeft: "1rem",
+              fontSize: 14,
+              borderRadius: "12px",
+              background: "var(--color-promo)",
+              color: "var(--color-surface-lowest)",
+            }}
+          >
+            Experimental
+          </div>
+        </div>
+      }
+      className="MagicSettings"
+      autofocus={false}
+    >
+      {/*  <h2
+        style={{
+          margin: 0,
+          fontSize: "1.25rem",
+          paddingLeft: "2.5rem",
+        }}
+      >
+        AI Settings
+      </h2> */}
+      <TTDDialogTabs dialog="settings" tab={appState.openDialog.tab}>
+        {/* <TTDDialogTabTriggers>
+          <TTDDialogTabTrigger tab="text-to-diagram">
+            <InlineIcon icon={brainIcon} /> Text to diagram
+          </TTDDialogTabTrigger>
+          <TTDDialogTabTrigger tab="diagram-to-code">
+            <InlineIcon icon={MagicIcon} /> Wireframe to code
+          </TTDDialogTabTrigger>
+        </TTDDialogTabTriggers> */}
+        {/* <TTDDialogTab className="ttd-dialog-content" tab="text-to-diagram">
+          TODO
+        </TTDDialogTab> */}
+        <TTDDialogTab
+          //  className="ttd-dialog-content"
+          tab="diagram-to-code"
+        >
+          <Paragraph>
+            For the diagram-to-code feature we use{" "}
+            <InlineIcon icon={OpenAIIcon} />
+            OpenAI.
+          </Paragraph>
+          <Paragraph>
+            While the OpenAI API is in beta, its use is strictly limited — as
+            such we require you use your own API key. You can create an{" "}
+            <a
+              href="https://platform.openai.com/login?launch"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              OpenAI account
+            </a>
+            , add a small credit (5 USD minimum), and{" "}
+            <a
+              href="https://platform.openai.com/api-keys"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              generate your own API key
+            </a>
+            .
+          </Paragraph>
+          <Paragraph>
+            Your OpenAI key does not leave the browser, and you can also set
+            your own limit in your OpenAI account dashboard if needed.
+          </Paragraph>
+          <TextField
+            isRedacted
+            value={keyInputValue}
+            placeholder="Paste your API key here"
+            label="OpenAI API key"
+            onChange={(value) => {
+              setKeyInputValue(value);
+              props.onChange(value.trim(), shouldPersist);
+            }}
+            selectOnRender
+            onKeyDown={(event) => event.key === KEYS.ENTER && onConfirm()}
+          />
+          <Paragraph>
+            By default, your API token is not persisted anywhere so you'll need
+            to insert it again after reload. But, you can persist locally in
+            your browser below.
+          </Paragraph>
+
+          <CheckboxItem checked={shouldPersist} onChange={setShouldPersist}>
+            Persist API key in browser storage
+          </CheckboxItem>
+
+          <Paragraph>
+            Once API key is set, you can use the <InlineIcon icon={MagicIcon} />{" "}
+            tool to wrap your elements in a frame that will then allow you to
+            turn it into code. This dialog can be accessed using the{" "}
+            <b>AI Settings</b> <InlineIcon icon={OpenAIIcon} />.
+          </Paragraph>
+
+          <FilledButton
+            className="MagicSettings__confirm"
+            size="large"
+            label="Confirm"
+            onClick={onConfirm}
+          />
+        </TTDDialogTab>
+      </TTDDialogTabs>
+    </Dialog>
+  );
+};
@@ -133,7 +133,6 @@ const SingleLibraryItem = ({
          exportBackground: true,
        },
        files: null,
-        skipInliningFonts: true,
      });
      node.innerHTML = svg.outerHTML;
    })();
@@ -1,110 +0,0 @@
-@import "open-color/open-color";
-
-.excalidraw {
-  .layer-ui__search {
-    flex: 1 0 auto;
-    display: flex;
-    flex-direction: column;
-    padding: 8px 0 0 0;
-  }
-
-  .layer-ui__search-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 0 0.75rem;
-    .ExcTextField {
-      flex: 1 0 auto;
-    }
-
-    .ExcTextField__input {
-      background-color: #f5f5f9;
-      @at-root .excalidraw.theme--dark#{&} {
-        background-color: #31303b;
-      }
-
-      border-radius: var(--border-radius-md);
-      border: 0;
-
-      input::placeholder {
-        font-size: 0.9rem;
-      }
-    }
-  }
-
-  .layer-ui__search-count {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 8px 8px 0 8px;
-    margin: 0 0.75rem 0.25rem 0.75rem;
-    font-size: 0.8em;
-
-    .result-nav {
-      display: flex;
-
-      .result-nav-btn {
-        width: 36px;
-        height: 36px;
-        --button-border: transparent;
-
-        &:active {
-          background-color: var(--color-surface-high);
-        }
-
-        &:first {
-          margin-right: 4px;
-        }
-      }
-    }
-  }
-
-  .layer-ui__search-result-container {
-    overflow-y: auto;
-    flex: 1 1 0;
-    display: flex;
-    flex-direction: column;
-
-    gap: 0.125rem;
-  }
-
-  .layer-ui__result-item {
-    display: flex;
-    align-items: center;
-    min-height: 2rem;
-    flex: 0 0 auto;
-    padding: 0.25rem 0.75rem;
-    cursor: pointer;
-    border: 1px solid transparent;
-    outline: none;
-
-    margin: 0 0.75rem;
-    border-radius: var(--border-radius-md);
-
-    .text-icon {
-      width: 1rem;
-      height: 1rem;
-      margin-right: 0.75rem;
-    }
-
-    .preview-text {
-      flex: 1;
-      max-height: 48px;
-      line-height: 24px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-all;
-    }
-
-    &:hover {
-      background-color: var(--color-surface-high);
-    }
-    &:active {
-      border-color: var(--color-primary);
-    }
-
-    &.active {
-      background-color: var(--color-surface-high);
-    }
-  }
-}
@@ -1,718 +0,0 @@
-import { Fragment, memo, useEffect, useRef, useState } from "react";
-import { collapseDownIcon, upIcon, searchIcon } from "./icons";
-import { TextField } from "./TextField";
-import { Button } from "./Button";
-import { useApp, useExcalidrawSetAppState } from "./App";
-import { debounce } from "lodash";
-import type { AppClassProperties } from "../types";
-import { isTextElement, newTextElement } from "../element";
-import type { ExcalidrawTextElement } from "../element/types";
-import { measureText } from "../element/textElement";
-import { addEventListener, getFontString } from "../utils";
-import { KEYS } from "../keys";
-import clsx from "clsx";
-import { atom, useAtom } from "jotai";
-import { jotaiScope } from "../jotai";
-import { t } from "../i18n";
-import { isElementCompletelyInViewport } from "../element/sizeHelpers";
-import { randomInteger } from "../random";
-import { CLASSES, EVENT } from "../constants";
-import { useStable } from "../hooks/useStable";
-
-import "./SearchMenu.scss";
-import { round } from "../../math";
-
-const searchQueryAtom = atom<string>("");
-export const searchItemInFocusAtom = atom<number | null>(null);
-
-const SEARCH_DEBOUNCE = 350;
-
-type SearchMatchItem = {
-  textElement: ExcalidrawTextElement;
-  searchQuery: SearchQuery;
-  index: number;
-  preview: {
-    indexInSearchQuery: number;
-    previewText: string;
-    moreBefore: boolean;
-    moreAfter: boolean;
-  };
-  matchedLines: {
-    offsetX: number;
-    offsetY: number;
-    width: number;
-    height: number;
-  }[];
-};
-
-type SearchMatches = {
-  nonce: number | null;
-  items: SearchMatchItem[];
-};
-
-type SearchQuery = string & { _brand: "SearchQuery" };
-
-export const SearchMenu = () => {
-  const app = useApp();
-  const setAppState = useExcalidrawSetAppState();
-
-  const searchInputRef = useRef<HTMLInputElement>(null);
-
-  const [inputValue, setInputValue] = useAtom(searchQueryAtom, jotaiScope);
-  const searchQuery = inputValue.trim() as SearchQuery;
-
-  const [isSearching, setIsSearching] = useState(false);
-
-  const [searchMatches, setSearchMatches] = useState<SearchMatches>({
-    nonce: null,
-    items: [],
-  });
-  const searchedQueryRef = useRef<SearchQuery | null>(null);
-  const lastSceneNonceRef = useRef<number | undefined>(undefined);
-
-  const [focusIndex, setFocusIndex] = useAtom(
-    searchItemInFocusAtom,
-    jotaiScope,
-  );
-  const elementsMap = app.scene.getNonDeletedElementsMap();
-
-  useEffect(() => {
-    if (isSearching) {
-      return;
-    }
-    if (
-      searchQuery !== searchedQueryRef.current ||
-      app.scene.getSceneNonce() !== lastSceneNonceRef.current
-    ) {
-      searchedQueryRef.current = null;
-      handleSearch(searchQuery, app, (matchItems, index) => {
-        setSearchMatches({
-          nonce: randomInteger(),
-          items: matchItems,
-        });
-        searchedQueryRef.current = searchQuery;
-        lastSceneNonceRef.current = app.scene.getSceneNonce();
-        setAppState({
-          searchMatches: matchItems.map((searchMatch) => ({
-            id: searchMatch.textElement.id,
-            focus: false,
-            matchedLines: searchMatch.matchedLines,
-          })),
-        });
-      });
-    }
-  }, [
-    isSearching,
-    searchQuery,
-    elementsMap,
-    app,
-    setAppState,
-    setFocusIndex,
-    lastSceneNonceRef,
-  ]);
-
-  const goToNextItem = () => {
-    if (searchMatches.items.length > 0) {
-      setFocusIndex((focusIndex) => {
-        if (focusIndex === null) {
-          return 0;
-        }
-
-        return (focusIndex + 1) % searchMatches.items.length;
-      });
-    }
-  };
-
-  const goToPreviousItem = () => {
-    if (searchMatches.items.length > 0) {
-      setFocusIndex((focusIndex) => {
-        if (focusIndex === null) {
-          return 0;
-        }
-
-        return focusIndex - 1 < 0
-          ? searchMatches.items.length - 1
-          : focusIndex - 1;
-      });
-    }
-  };
-
-  useEffect(() => {
-    setAppState((state) => {
-      return {
-        searchMatches: state.searchMatches.map((match, index) => {
-          if (index === focusIndex) {
-            return { ...match, focus: true };
-          }
-          return { ...match, focus: false };
-        }),
-      };
-    });
-  }, [focusIndex, setAppState]);
-
-  useEffect(() => {
-    if (searchMatches.items.length > 0 && focusIndex !== null) {
-      const match = searchMatches.items[focusIndex];
-
-      if (match) {
-        const zoomValue = app.state.zoom.value;
-
-        const matchAsElement = newTextElement({
-          text: match.searchQuery,
-          x: match.textElement.x + (match.matchedLines[0]?.offsetX ?? 0),
-          y: match.textElement.y + (match.matchedLines[0]?.offsetY ?? 0),
-          width: match.matchedLines[0]?.width,
-          height: match.matchedLines[0]?.height,
-          fontSize: match.textElement.fontSize,
-          fontFamily: match.textElement.fontFamily,
-        });
-
-        const FONT_SIZE_LEGIBILITY_THRESHOLD = 14;
-
-        const fontSize = match.textElement.fontSize;
-        const isTextTiny =
-          fontSize * zoomValue < FONT_SIZE_LEGIBILITY_THRESHOLD;
-
-        if (
-          !isElementCompletelyInViewport(
-            [matchAsElement],
-            app.canvas.width / window.devicePixelRatio,
-            app.canvas.height / window.devicePixelRatio,
-            {
-              offsetLeft: app.state.offsetLeft,
-              offsetTop: app.state.offsetTop,
-              scrollX: app.state.scrollX,
-              scrollY: app.state.scrollY,
-              zoom: app.state.zoom,
-            },
-            app.scene.getNonDeletedElementsMap(),
-            app.getEditorUIOffsets(),
-          ) ||
-          isTextTiny
-        ) {
-          let zoomOptions: Parameters<AppClassProperties["scrollToContent"]>[1];
-
-          if (isTextTiny) {
-            if (fontSize >= FONT_SIZE_LEGIBILITY_THRESHOLD) {
-              zoomOptions = { fitToContent: true };
-            } else {
-              zoomOptions = {
-                fitToViewport: true,
-                // calculate zoom level to make the fontSize ~equal to FONT_SIZE_THRESHOLD, rounded to nearest 10%
-                maxZoom: round(FONT_SIZE_LEGIBILITY_THRESHOLD / fontSize, 1),
-              };
-            }
-          } else {
-            zoomOptions = { fitToContent: true };
-          }
-
-          app.scrollToContent(matchAsElement, {
-            animate: true,
-            duration: 300,
-            ...zoomOptions,
-            canvasOffsets: app.getEditorUIOffsets(),
-          });
-        }
-      }
-    }
-  }, [focusIndex, searchMatches, app]);
-
-  useEffect(() => {
-    return () => {
-      setFocusIndex(null);
-      searchedQueryRef.current = null;
-      lastSceneNonceRef.current = undefined;
-      setAppState({
-        searchMatches: [],
-      });
-      setIsSearching(false);
-    };
-  }, [setAppState, setFocusIndex]);
-
-  const stableState = useStable({
-    goToNextItem,
-    goToPreviousItem,
-    searchMatches,
-  });
-
-  useEffect(() => {
-    const eventHandler = (event: KeyboardEvent) => {
-      if (
-        event.key === KEYS.ESCAPE &&
-        !app.state.openDialog &&
-        !app.state.openPopup
-      ) {
-        event.preventDefault();
-        event.stopPropagation();
-        setAppState({
-          openSidebar: null,
-        });
-        return;
-      }
-
-      if (event[KEYS.CTRL_OR_CMD] && event.key === KEYS.F) {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (!searchInputRef.current?.matches(":focus")) {
-          if (app.state.openDialog) {
-            setAppState({
-              openDialog: null,
-            });
-          }
-          searchInputRef.current?.focus();
-          searchInputRef.current?.select();
-        } else {
-          setAppState({
-            openSidebar: null,
-          });
-        }
-      }
-
-      if (
-        event.target instanceof HTMLElement &&
-        event.target.closest(".layer-ui__search")
-      ) {
-        if (stableState.searchMatches.items.length) {
-          if (event.key === KEYS.ENTER) {
-            event.stopPropagation();
-            stableState.goToNextItem();
-          }
-
-          if (event.key === KEYS.ARROW_UP) {
-            event.stopPropagation();
-            stableState.goToPreviousItem();
-          } else if (event.key === KEYS.ARROW_DOWN) {
-            event.stopPropagation();
-            stableState.goToNextItem();
-          }
-        }
-      }
-    };
-
-    // `capture` needed to prevent firing on initial open from App.tsx,
-    // as well as to handle events before App ones
-    return addEventListener(window, EVENT.KEYDOWN, eventHandler, {
-      capture: true,
-    });
-  }, [setAppState, stableState, app]);
-
-  const matchCount = `${searchMatches.items.length} ${
-    searchMatches.items.length === 1
-      ? t("search.singleResult")
-      : t("search.multipleResults")
-  }`;
-
-  return (
-    <div className="layer-ui__search">
-      <div className="layer-ui__search-header">
-        <TextField
-          className={CLASSES.SEARCH_MENU_INPUT_WRAPPER}
-          value={inputValue}
-          ref={searchInputRef}
-          placeholder={t("search.placeholder")}
-          icon={searchIcon}
-          onChange={(value) => {
-            setInputValue(value);
-            setIsSearching(true);
-            const searchQuery = value.trim() as SearchQuery;
-            handleSearch(searchQuery, app, (matchItems, index) => {
-              setSearchMatches({
-                nonce: randomInteger(),
-                items: matchItems,
-              });
-              setFocusIndex(index);
-              searchedQueryRef.current = searchQuery;
-              lastSceneNonceRef.current = app.scene.getSceneNonce();
-              setAppState({
-                searchMatches: matchItems.map((searchMatch) => ({
-                  id: searchMatch.textElement.id,
-                  focus: false,
-                  matchedLines: searchMatch.matchedLines,
-                })),
-              });
-
-              setIsSearching(false);
-            });
-          }}
-          selectOnRender
-        />
-      </div>
-
-      <div className="layer-ui__search-count">
-        {searchMatches.items.length > 0 && (
-          <>
-            {focusIndex !== null && focusIndex > -1 ? (
-              <div>
-                {focusIndex + 1} / {matchCount}
-              </div>
-            ) : (
-              <div>{matchCount}</div>
-            )}
-            <div className="result-nav">
-              <Button
-                onSelect={() => {
-                  goToNextItem();
-                }}
-                className="result-nav-btn"
-              >
-                {collapseDownIcon}
-              </Button>
-              <Button
-                onSelect={() => {
-                  goToPreviousItem();
-                }}
-                className="result-nav-btn"
-              >
-                {upIcon}
-              </Button>
-            </div>
-          </>
-        )}
-
-        {searchMatches.items.length === 0 &&
-          searchQuery &&
-          searchedQueryRef.current && (
-            <div style={{ margin: "1rem auto" }}>{t("search.noMatch")}</div>
-          )}
-      </div>
-
-      <MatchList
-        matches={searchMatches}
-        onItemClick={setFocusIndex}
-        focusIndex={focusIndex}
-        searchQuery={searchQuery}
-      />
-    </div>
-  );
-};
-
-const ListItem = (props: {
-  preview: SearchMatchItem["preview"];
-  searchQuery: SearchQuery;
-  highlighted: boolean;
-  onClick?: () => void;
-}) => {
-  const preview = [
-    props.preview.moreBefore ? "..." : "",
-    props.preview.previewText.slice(0, props.preview.indexInSearchQuery),
-    props.preview.previewText.slice(
-      props.preview.indexInSearchQuery,
-      props.preview.indexInSearchQuery + props.searchQuery.length,
-    ),
-    props.preview.previewText.slice(
-      props.preview.indexInSearchQuery + props.searchQuery.length,
-    ),
-    props.preview.moreAfter ? "..." : "",
-  ];
-
-  return (
-    <div
-      tabIndex={-1}
-      className={clsx("layer-ui__result-item", {
-        active: props.highlighted,
-      })}
-      onClick={props.onClick}
-      ref={(ref) => {
-        if (props.highlighted) {
-          ref?.scrollIntoView({ behavior: "auto", block: "nearest" });
-        }
-      }}
-    >
-      <div className="preview-text">
-        {preview.flatMap((text, idx) => (
-          <Fragment key={idx}>{idx === 2 ? <b>{text}</b> : text}</Fragment>
-        ))}
-      </div>
-    </div>
-  );
-};
-
-interface MatchListProps {
-  matches: SearchMatches;
-  onItemClick: (index: number) => void;
-  focusIndex: number | null;
-  searchQuery: SearchQuery;
-}
-
-const MatchListBase = (props: MatchListProps) => {
-  return (
-    <div className="layer-ui__search-result-container">
-      {props.matches.items.map((searchMatch, index) => (
-        <ListItem
-          key={searchMatch.textElement.id + searchMatch.index}
-          searchQuery={props.searchQuery}
-          preview={searchMatch.preview}
-          highlighted={index === props.focusIndex}
-          onClick={() => props.onItemClick(index)}
-        />
-      ))}
-    </div>
-  );
-};
-
-const areEqual = (prevProps: MatchListProps, nextProps: MatchListProps) => {
-  return (
-    prevProps.matches.nonce === nextProps.matches.nonce &&
-    prevProps.focusIndex === nextProps.focusIndex
-  );
-};
-
-const MatchList = memo(MatchListBase, areEqual);
-
-const getMatchPreview = (
-  text: string,
-  index: number,
-  searchQuery: SearchQuery,
-) => {
-  const WORDS_BEFORE = 2;
-  const WORDS_AFTER = 5;
-
-  const substrBeforeQuery = text.slice(0, index);
-  const wordsBeforeQuery = substrBeforeQuery.split(/\s+/);
-  // text = "small", query = "mall", not complete before
-  // text = "small", query = "smal", complete before
-  const isQueryCompleteBefore = substrBeforeQuery.endsWith(" ");
-  const startWordIndex =
-    wordsBeforeQuery.length -
-    WORDS_BEFORE -
-    1 -
-    (isQueryCompleteBefore ? 0 : 1);
-  let wordsBeforeAsString =
-    wordsBeforeQuery.slice(startWordIndex <= 0 ? 0 : startWordIndex).join(" ") +
-    (isQueryCompleteBefore ? " " : "");
-
-  const MAX_ALLOWED_CHARS = 20;
-
-  wordsBeforeAsString =
-    wordsBeforeAsString.length > MAX_ALLOWED_CHARS
-      ? wordsBeforeAsString.slice(-MAX_ALLOWED_CHARS)
-      : wordsBeforeAsString;
-
-  const substrAfterQuery = text.slice(index + searchQuery.length);
-  const wordsAfter = substrAfterQuery.split(/\s+/);
-  // text = "small", query = "mall", complete after
-  // text = "small", query = "smal", not complete after
-  const isQueryCompleteAfter = !substrAfterQuery.startsWith(" ");
-  const numberOfWordsToTake = isQueryCompleteAfter
-    ? WORDS_AFTER + 1
-    : WORDS_AFTER;
-  const wordsAfterAsString =
-    (isQueryCompleteAfter ? "" : " ") +
-    wordsAfter.slice(0, numberOfWordsToTake).join(" ");
-
-  return {
-    indexInSearchQuery: wordsBeforeAsString.length,
-    previewText: wordsBeforeAsString + searchQuery + wordsAfterAsString,
-    moreBefore: startWordIndex > 0,
-    moreAfter: wordsAfter.length > numberOfWordsToTake,
-  };
-};
-
-const normalizeWrappedText = (
-  wrappedText: string,
-  originalText: string,
-): string => {
-  const wrappedLines = wrappedText.split("\n");
-  const normalizedLines: string[] = [];
-  let originalIndex = 0;
-
-  for (let i = 0; i < wrappedLines.length; i++) {
-    let currentLine = wrappedLines[i];
-    const nextLine = wrappedLines[i + 1];
-
-    if (nextLine) {
-      const nextLineIndexInOriginal = originalText.indexOf(
-        nextLine,
-        originalIndex,
-      );
-
-      if (nextLineIndexInOriginal > currentLine.length + originalIndex) {
-        let j = nextLineIndexInOriginal - (currentLine.length + originalIndex);
-
-        while (j > 0) {
-          currentLine += " ";
-          j--;
-        }
-      }
-    }
-
-    normalizedLines.push(currentLine);
-    originalIndex = originalIndex + currentLine.length;
-  }
-
-  return normalizedLines.join("\n");
-};
-
-const getMatchedLines = (
-  textElement: ExcalidrawTextElement,
-  searchQuery: SearchQuery,
-  index: number,
-) => {
-  const normalizedText = normalizeWrappedText(
-    textElement.text,
-    textElement.originalText,
-  );
-
-  const lines = normalizedText.split("\n");
-
-  const lineIndexRanges = [];
-  let currentIndex = 0;
-  let lineNumber = 0;
-
-  for (const line of lines) {
-    const startIndex = currentIndex;
-    const endIndex = startIndex + line.length - 1;
-
-    lineIndexRanges.push({
-      line,
-      startIndex,
-      endIndex,
-      lineNumber,
-    });
-
-    // Move to the next line's start index
-    currentIndex = endIndex + 1;
-    lineNumber++;
-  }
-
-  let startIndex = index;
-  let remainingQuery = textElement.originalText.slice(
-    index,
-    index + searchQuery.length,
-  );
-  const matchedLines: {
-    offsetX: number;
-    offsetY: number;
-    width: number;
-    height: number;
-  }[] = [];
-
-  for (const lineIndexRange of lineIndexRanges) {
-    if (remainingQuery === "") {
-      break;
-    }
-
-    if (
-      startIndex >= lineIndexRange.startIndex &&
-      startIndex <= lineIndexRange.endIndex
-    ) {
-      const matchCapacity = lineIndexRange.endIndex + 1 - startIndex;
-      const textToStart = lineIndexRange.line.slice(
-        0,
-        startIndex - lineIndexRange.startIndex,
-      );
-
-      const matchedWord = remainingQuery.slice(0, matchCapacity);
-      remainingQuery = remainingQuery.slice(matchCapacity);
-
-      const offset = measureText(
-        textToStart,
-        getFontString(textElement),
-        textElement.lineHeight,
-        true,
-      );
-
-      // measureText returns a non-zero width for the empty string
-      // which is not what we're after here, hence the check and the correction
-      if (textToStart === "") {
-        offset.width = 0;
-      }
-
-      if (textElement.textAlign !== "left" && lineIndexRange.line.length > 0) {
-        const lineLength = measureText(
-          lineIndexRange.line,
-          getFontString(textElement),
-          textElement.lineHeight,
-          true,
-        );
-
-        const spaceToStart =
-          textElement.textAlign === "center"
-            ? (textElement.width - lineLength.width) / 2
-            : textElement.width - lineLength.width;
-        offset.width += spaceToStart;
-      }
-
-      const { width, height } = measureText(
-        matchedWord,
-        getFontString(textElement),
-        textElement.lineHeight,
-      );
-
-      const offsetX = offset.width;
-      const offsetY = lineIndexRange.lineNumber * offset.height;
-
-      matchedLines.push({
-        offsetX,
-        offsetY,
-        width,
-        height,
-      });
-
-      startIndex += matchCapacity;
-    }
-  }
-
-  return matchedLines;
-};
-
-const escapeSpecialCharacters = (string: string) => {
-  return string.replace(/[.*+?^${}()|[\]\\-]/g, "\\$&");
-};
-
-const handleSearch = debounce(
-  (
-    searchQuery: SearchQuery,
-    app: AppClassProperties,
-    cb: (matchItems: SearchMatchItem[], focusIndex: number | null) => void,
-  ) => {
-    if (!searchQuery || searchQuery === "") {
-      cb([], null);
-      return;
-    }
-
-    const elements = app.scene.getNonDeletedElements();
-    const texts = elements.filter((el) =>
-      isTextElement(el),
-    ) as ExcalidrawTextElement[];
-
-    texts.sort((a, b) => a.y - b.y);
-
-    const matchItems: SearchMatchItem[] = [];
-
-    const regex = new RegExp(escapeSpecialCharacters(searchQuery), "gi");
-
-    for (const textEl of texts) {
-      let match = null;
-      const text = textEl.originalText;
-
-      while ((match = regex.exec(text)) !== null) {
-        const preview = getMatchPreview(text, match.index, searchQuery);
-        const matchedLines = getMatchedLines(textEl, searchQuery, match.index);
-
-        if (matchedLines.length > 0) {
-          matchItems.push({
-            textElement: textEl,
-            searchQuery,
-            preview,
-            index: match.index,
-            matchedLines,
-          });
-        }
-      }
-    }
-
-    const visibleIds = new Set(
-      app.visibleElements.map((visibleElement) => visibleElement.id),
-    );
-
-    const focusIndex =
-      matchItems.findIndex((matchItem) =>
-        visibleIds.has(matchItem.textElement.id),
-      ) ?? null;
-
-    cb(matchItems, focusIndex);
-  },
-  SEARCH_DEBOUNCE,
-);
@@ -52,8 +52,8 @@
      font-size: 0.75rem;
      line-height: 110%;

-      background: var(--color-success);
-      color: var(--color-success-text);
+      background: var(--color-success-lighter);
+      color: var(--color-success);

      & > svg {
        width: 0.875rem;
@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import * as Popover from "@radix-ui/react-popover";

 import { copyTextToSystemClipboard } from "../clipboard";
 import { useI18n } from "../i18n";
@@ -6,8 +7,7 @@ import { useI18n } from "../i18n";
 import { Dialog } from "./Dialog";
 import { TextField } from "./TextField";
 import { FilledButton } from "./FilledButton";
-import { useCopyStatus } from "../hooks/useCopiedIndicator";
-import { copyIcon } from "./icons";
+import { copyIcon, tablerCheckIcon } from "./icons";

 import "./ShareableLinkDialog.scss";

@@ -24,7 +24,7 @@ export const ShareableLinkDialog = ({
  setErrorMessage,
 }: ShareableLinkDialogProps) => {
  const { t } = useI18n();
-  const [, setJustCopied] = useState(false);
+  const [justCopied, setJustCopied] = useState(false);
  const timerRef = useRef<number>(0);
  const ref = useRef<HTMLInputElement>(null);

@@ -46,7 +46,7 @@ export const ShareableLinkDialog = ({

    ref.current?.select();
  };
-  const { onCopy, copyStatus } = useCopyStatus();
+
  return (
    <Dialog onCloseRequest={onCloseRequest} title={false} size="small">
      <div className="ShareableLinkDialog">
@@ -60,16 +60,26 @@ export const ShareableLinkDialog = ({
            value={link}
            selectOnRender
          />
-          <FilledButton
-            size="large"
-            label={t("buttons.copyLink")}
-            icon={copyIcon}
-            status={copyStatus}
-            onClick={() => {
-              onCopy();
-              copyRoomLink();
-            }}
-          />
+          <Popover.Root open={justCopied}>
+            <Popover.Trigger asChild>
+              <FilledButton
+                size="large"
+                label="Copy link"
+                icon={copyIcon}
+                onClick={copyRoomLink}
+              />
+            </Popover.Trigger>
+            <Popover.Content
+              onOpenAutoFocus={(event) => event.preventDefault()}
+              onCloseAutoFocus={(event) => event.preventDefault()}
+              className="ShareableLinkDialog__popover"
+              side="top"
+              align="end"
+              sideOffset={5.5}
+            >
+              {tablerCheckIcon} copied
+            </Popover.Content>
+          </Popover.Root>
        </div>
        <div className="ShareableLinkDialog__description">
          🔒 {t("alerts.uploadedSecurly")}
@@ -6,18 +6,16 @@ const Spinner = ({
  size = "1em",
  circleWidth = 8,
  synchronized = false,
-  className = "",
 }: {
  size?: string | number;
  circleWidth?: number;
  synchronized?: boolean;
-  className?: string;
 }) => {
  const mountTime = React.useRef(Date.now());
  const mountDelay = -(mountTime.current % 1600);

  return (
-    <div className={`Spinner ${className}`}>
+    <div className="Spinner">
      <svg
        viewBox="0 0 100 100"
        style={{
@@ -2,14 +2,13 @@ import { mutateElement } from "../../element/mutateElement";
 import { getBoundTextElement } from "../../element/textElement";
 import { isArrowElement, isElbowArrow } from "../../element/typeChecks";
 import type { ExcalidrawElement } from "../../element/types";
+import { degreeToRadian, radianToDegree } from "../../math";
 import { angleIcon } from "../icons";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, isPropertyEditable, updateBindings } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import type { Degrees } from "../../../math";
-import { degreesToRadians, radiansToDegrees } from "../../../math";

 interface AngleProps {
  element: ExcalidrawElement;
@@ -37,7 +36,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
    }

    if (nextValue !== undefined) {
-      const nextAngle = degreesToRadians(nextValue as Degrees);
+      const nextAngle = degreeToRadian(nextValue);
      mutateElement(latestElement, {
        angle: nextAngle,
      });
@@ -52,7 +51,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
    }

    const originalAngleInDegrees =
-      Math.round(radiansToDegrees(origElement.angle) * 100) / 100;
+      Math.round(radianToDegree(origElement.angle) * 100) / 100;
    const changeInDegrees = Math.round(accumulatedChange);
    let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
    if (shouldChangeByStepSize) {
@@ -62,7 +61,7 @@ const handleDegreeChange: DragInputCallbackType<AngleProps["property"]> = ({
    nextAngleInDegrees =
      nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;

-    const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees);
+    const nextAngle = degreeToRadian(nextAngleInDegrees);

    mutateElement(latestElement, {
      angle: nextAngle,
@@ -81,7 +80,7 @@ const Angle = ({ element, scene, appState, property }: AngleProps) => {
    <DragInput
      label="A"
      icon={angleIcon}
-      value={Math.round((radiansToDegrees(element.angle) % 360) * 100) / 100}
+      value={Math.round((radianToDegree(element.angle) % 360) * 100) / 100}
      elements={[element]}
      dragInputCallback={handleDegreeChange}
      editable={isPropertyEditable(element, "angle")}
@@ -1,67 +0,0 @@
-import StatsDragInput from "./DragInput";
-import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
-import { getStepSizedValue } from "./utils";
-import { getNormalizedGridStep } from "../../scene";
-
-interface PositionProps {
-  property: "gridStep";
-  scene: Scene;
-  appState: AppState;
-  setAppState: React.Component<any, AppState>["setState"];
-}
-
-const STEP_SIZE = 5;
-
-const CanvasGrid = ({
-  property,
-  scene,
-  appState,
-  setAppState,
-}: PositionProps) => {
-  return (
-    <StatsDragInput
-      label="Grid step"
-      sensitivity={8}
-      elements={[]}
-      dragInputCallback={({
-        nextValue,
-        instantChange,
-        shouldChangeByStepSize,
-        setInputValue,
-      }) => {
-        setAppState((state) => {
-          let nextGridStep;
-
-          if (nextValue) {
-            nextGridStep = nextValue;
-          } else if (instantChange) {
-            nextGridStep = shouldChangeByStepSize
-              ? getStepSizedValue(
-                  state.gridStep + STEP_SIZE * Math.sign(instantChange),
-                  STEP_SIZE,
-                )
-              : state.gridStep + instantChange;
-          }
-
-          if (!nextGridStep) {
-            setInputValue(state.gridStep);
-            return null;
-          }
-
-          nextGridStep = getNormalizedGridStep(nextGridStep);
-          setInputValue(nextGridStep);
-          return {
-            gridStep: nextGridStep,
-          };
-        });
-      }}
-      scene={scene}
-      value={appState.gridStep}
-      property={property}
-      appState={appState}
-    />
-  );
-};
-
-export default CanvasGrid;
@@ -31,11 +31,7 @@ const Collapsible = ({
        {label}
        <InlineIcon icon={open ? collapseUpIcon : collapseDownIcon} />
      </div>
-      {open && (
-        <div style={{ display: "flex", flexDirection: "column" }}>
-          {children}
-        </div>
-      )}
+      {open && <>{children}</>}
    </>
  );
 };
@@ -23,6 +23,7 @@ const handleDimensionChange: DragInputCallbackType<
 > = ({
  accumulatedChange,
  originalElements,
+  originalElementsMap,
  shouldKeepAspectRatio,
  shouldChangeByStepSize,
  nextValue,
@@ -5,7 +5,7 @@

    &:focus-within {
      box-shadow: 0 0 0 1px var(--color-primary-darkest);
-      border-radius: var(--border-radius-md);
+      border-radius: var(--border-radius-lg);
    }
  }

@@ -18,18 +18,17 @@
    flex-shrink: 0;
    border: 1px solid var(--default-border-color);
    border-right: 0;
-    padding: 0 0.5rem 0 0.75rem;
-    min-width: 1rem;
+    width: 2rem;
    height: 2rem;
    box-sizing: border-box;
    color: var(--popup-text-color);

    :root[dir="ltr"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
    }

    :root[dir="rtl"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
+      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
      border-right: 1px solid var(--default-border-color);
      border-left: 0;
    }
@@ -56,11 +55,11 @@
    letter-spacing: 0.4px;

    :root[dir="ltr"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
+      border-radius: 0 var(--border-radius-lg) var(--border-radius-lg) 0;
    }

    :root[dir="rtl"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
+      border-radius: var(--border-radius-lg) 0 0 var(--border-radius-lg);
      border-left: 1px solid var(--default-border-color);
      border-right: 0;
    }
@@ -29,7 +29,6 @@ export type DragInputCallbackType<
  nextValue?: number;
  property: P;
  originalAppState: AppState;
-  setInputValue: (value: number) => void;
 }) => void;

 interface StatsDragInputProps<
@@ -46,8 +45,6 @@ interface StatsDragInputProps<
  property: T;
  scene: Scene;
  appState: AppState;
-  /** how many px you need to drag to get 1 unit change */
-  sensitivity?: number;
 }

 const StatsDragInput = <
@@ -64,7 +61,6 @@ const StatsDragInput = <
  property,
  scene,
  appState,
-  sensitivity = 1,
 }: StatsDragInputProps<T, E>) => {
  const app = useApp();
  const inputRef = useRef<HTMLInputElement>(null);
@@ -130,49 +126,27 @@ const StatsDragInput = <
        nextValue: rounded,
        property,
        originalAppState: appState,
-        setInputValue: (value) => setInputValue(String(value)),
      });
      app.syncActionResult({ storeAction: StoreAction.CAPTURE });
    }
  };

-  const callbacksRef = useRef<
-    Partial<{
-      handleInputValue: typeof handleInputValue;
-      onPointerUp: (event: PointerEvent) => void;
-      onPointerMove: (event: PointerEvent) => void;
-    }>
-  >({});
-  callbacksRef.current.handleInputValue = handleInputValue;
+  const handleInputValueRef = useRef(handleInputValue);
+  handleInputValueRef.current = handleInputValue;

  // make sure that clicking on canvas (which umounts the component)
  // updates current input value (blur isn't triggered)
  useEffect(() => {
    const input = inputRef.current;
-    const callbacks = callbacksRef.current;
    return () => {
      const nextValue = input?.value;
      if (nextValue) {
-        callbacks.handleInputValue?.(
+        handleInputValueRef.current(
          nextValue,
          stateRef.current.originalElements,
          stateRef.current.originalAppState,
        );
      }
-
-      // generally not needed, but in case `pointerup` doesn't fire and
-      // we don't remove the listeners that way, we should at least remove
-      // on unmount
-      window.removeEventListener(
-        EVENT.POINTER_MOVE,
-        callbacks.onPointerMove!,
-        false,
-      );
-      window.removeEventListener(
-        EVENT.POINTER_UP,
-        callbacks.onPointerUp!,
-        false,
-      );
    };
  }, [
    // we need to track change of `editable` state as mount/unmount
@@ -198,8 +172,6 @@ const StatsDragInput = <
        ref={labelRef}
        onPointerDown={(event) => {
          if (inputRef.current && editable) {
-            document.body.classList.add("excalidraw-cursor-resize");
-
            let startValue = Number(inputRef.current.value);
            if (isNaN(startValue)) {
              startValue = 0;
@@ -224,43 +196,35 @@ const StatsDragInput = <

            const originalAppState: AppState = cloneJSON(appState);

-            let accumulatedChange = 0;
-            let stepChange = 0;
+            let accumulatedChange: number | null = null;
+
+            document.body.classList.add("excalidraw-cursor-resize");

            const onPointerMove = (event: PointerEvent) => {
+              if (!accumulatedChange) {
+                accumulatedChange = 0;
+              }
+
              if (
                lastPointer &&
                originalElementsMap !== null &&
-                originalElements !== null
+                originalElements !== null &&
+                accumulatedChange !== null
              ) {
                const instantChange = event.clientX - lastPointer.x;
+                accumulatedChange += instantChange;

-                if (instantChange !== 0) {
-                  stepChange += instantChange;
-
-                  if (Math.abs(stepChange) >= sensitivity) {
-                    stepChange =
-                      Math.sign(stepChange) *
-                      Math.floor(Math.abs(stepChange) / sensitivity);
-
-                    accumulatedChange += stepChange;
-
-                    dragInputCallback({
-                      accumulatedChange,
-                      instantChange: stepChange,
-                      originalElements,
-                      originalElementsMap,
-                      shouldKeepAspectRatio: shouldKeepAspectRatio!!,
-                      shouldChangeByStepSize: event.shiftKey,
-                      property,
-                      scene,
-                      originalAppState,
-                      setInputValue: (value) => setInputValue(String(value)),
-                    });
-
-                    stepChange = 0;
-                  }
-                }
+                dragInputCallback({
+                  accumulatedChange,
+                  instantChange,
+                  originalElements,
+                  originalElementsMap,
+                  shouldKeepAspectRatio: shouldKeepAspectRatio!!,
+                  shouldChangeByStepSize: event.shiftKey,
+                  property,
+                  scene,
+                  originalAppState,
+                });
              }

              lastPointer = {
@@ -269,31 +233,27 @@ const StatsDragInput = <
              };
            };

-            const onPointerUp = () => {
-              window.removeEventListener(
-                EVENT.POINTER_MOVE,
-                onPointerMove,
-                false,
-              );
-
-              app.syncActionResult({ storeAction: StoreAction.CAPTURE });
-
-              lastPointer = null;
-              accumulatedChange = 0;
-              stepChange = 0;
-              originalElements = null;
-              originalElementsMap = null;
-
-              document.body.classList.remove("excalidraw-cursor-resize");
-
-              window.removeEventListener(EVENT.POINTER_UP, onPointerUp, false);
-            };
-
-            callbacksRef.current.onPointerMove = onPointerMove;
-            callbacksRef.current.onPointerUp = onPointerUp;
-
            window.addEventListener(EVENT.POINTER_MOVE, onPointerMove, false);
-            window.addEventListener(EVENT.POINTER_UP, onPointerUp, false);
+            window.addEventListener(
+              EVENT.POINTER_UP,
+              () => {
+                window.removeEventListener(
+                  EVENT.POINTER_MOVE,
+                  onPointerMove,
+                  false,
+                );
+
+                app.syncActionResult({ storeAction: StoreAction.CAPTURE });
+
+                lastPointer = null;
+                accumulatedChange = null;
+                originalElements = null;
+                originalElementsMap = null;
+
+                document.body.classList.remove("excalidraw-cursor-resize");
+              },
+              false,
+            );
          }
        }}
        onPointerEnter={() => {
@@ -3,14 +3,13 @@ import { getBoundTextElement } from "../../element/textElement";
 import { isArrowElement } from "../../element/typeChecks";
 import type { ExcalidrawElement } from "../../element/types";
 import { isInGroup } from "../../groups";
+import { degreeToRadian, radianToDegree } from "../../math";
 import type Scene from "../../scene/Scene";
 import { angleIcon } from "../icons";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, isPropertyEditable } from "./utils";
 import type { AppState } from "../../types";
-import type { Degrees } from "../../../math";
-import { degreesToRadians, radiansToDegrees } from "../../../math";

 interface MultiAngleProps {
  elements: readonly ExcalidrawElement[];
@@ -40,7 +39,7 @@ const handleDegreeChange: DragInputCallbackType<
  );

  if (nextValue !== undefined) {
-    const nextAngle = degreesToRadians(nextValue as Degrees);
+    const nextAngle = degreeToRadian(nextValue);

    for (const element of editableLatestIndividualElements) {
      if (!element) {
@@ -72,7 +71,7 @@ const handleDegreeChange: DragInputCallbackType<
    }
    const originalElement = editableOriginalIndividualElements[i];
    const originalAngleInDegrees =
-      Math.round(radiansToDegrees(originalElement.angle) * 100) / 100;
+      Math.round(radianToDegree(originalElement.angle) * 100) / 100;
    const changeInDegrees = Math.round(accumulatedChange);
    let nextAngleInDegrees = (originalAngleInDegrees + changeInDegrees) % 360;
    if (shouldChangeByStepSize) {
@@ -82,7 +81,7 @@ const handleDegreeChange: DragInputCallbackType<
    nextAngleInDegrees =
      nextAngleInDegrees < 0 ? nextAngleInDegrees + 360 : nextAngleInDegrees;

-    const nextAngle = degreesToRadians(nextAngleInDegrees as Degrees);
+    const nextAngle = degreeToRadian(nextAngleInDegrees);

    mutateElement(
      latestElement,
@@ -110,7 +109,7 @@ const MultiAngle = ({
    (el) => !isInGroup(el) && isPropertyEditable(el, "angle"),
  );
  const angles = editableLatestIndividualElements.map(
-    (el) => Math.round((radiansToDegrees(el.angle) % 360) * 100) / 100,
+    (el) => Math.round((radianToDegree(el.angle) % 360) * 100) / 100,
  );
  const value = new Set(angles).size === 1 ? angles[0] : "Mixed";

@@ -13,14 +13,13 @@ import type {
  NonDeletedSceneElementsMap,
 } from "../../element/types";
 import type Scene from "../../scene/Scene";
-import type { AppState } from "../../types";
+import type { AppState, Point } from "../../types";
 import DragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getAtomicUnits, getStepSizedValue, isPropertyEditable } from "./utils";
 import { getElementsInAtomicUnit, resizeElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import { MIN_WIDTH_OR_HEIGHT } from "../../constants";
-import { point, type GlobalPoint } from "../../../math";

 interface MultiDimensionProps {
  property: "width" | "height";
@@ -105,7 +104,7 @@ const resizeGroup = (
  nextHeight: number,
  initialHeight: number,
  aspectRatio: number,
-  anchor: GlobalPoint,
+  anchor: Point,
  property: MultiDimensionProps["property"],
  latestElements: ExcalidrawElement[],
  originalElements: ExcalidrawElement[],
@@ -182,7 +181,7 @@ const handleDimensionChange: DragInputCallbackType<
          nextHeight,
          initialHeight,
          aspectRatio,
-          point(x1, y1),
+          [x1, y1],
          property,
          latestElements,
          originalElements,
@@ -287,7 +286,7 @@ const handleDimensionChange: DragInputCallbackType<
        nextHeight,
        initialHeight,
        aspectRatio,
-        point(x1, y1),
+        [x1, y1],
        property,
        latestElements,
        originalElements,
@@ -4,6 +4,7 @@ import type {
  NonDeletedExcalidrawElement,
  NonDeletedSceneElementsMap,
 } from "../../element/types";
+import { rotate } from "../../math";
 import type Scene from "../../scene/Scene";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
@@ -13,7 +14,6 @@ import { useMemo } from "react";
 import { getElementsInAtomicUnit, moveElement } from "./utils";
 import type { AtomicUnit } from "./utils";
 import type { AppState } from "../../types";
-import { point, pointRotateRads } from "../../../math";

 interface MultiPositionProps {
  property: "x" | "y";
@@ -43,9 +43,11 @@ const moveElements = (
      origElement.x + origElement.width / 2,
      origElement.y + origElement.height / 2,
    ];
-    const [topLeftX, topLeftY] = pointRotateRads(
-      point(origElement.x, origElement.y),
-      point(cx, cy),
+    const [topLeftX, topLeftY] = rotate(
+      origElement.x,
+      origElement.y,
+      cx,
+      cy,
      origElement.angle,
    );

@@ -96,9 +98,11 @@ const moveGroupTo = (
        latestElement.y + latestElement.height / 2,
      ];

-      const [topLeftX, topLeftY] = pointRotateRads(
-        point(latestElement.x, latestElement.y),
-        point(cx, cy),
+      const [topLeftX, topLeftY] = rotate(
+        latestElement.x,
+        latestElement.y,
+        cx,
+        cy,
        latestElement.angle,
      );

@@ -170,9 +174,11 @@ const handlePositionChange: DragInputCallbackType<
            origElement.x + origElement.width / 2,
            origElement.y + origElement.height / 2,
          ];
-          const [topLeftX, topLeftY] = pointRotateRads(
-            point(origElement.x, origElement.y),
-            point(cx, cy),
+          const [topLeftX, topLeftY] = rotate(
+            origElement.x,
+            origElement.y,
+            cx,
+            cy,
            origElement.angle,
          );

@@ -240,11 +246,7 @@ const MultiPosition = ({
        const [el] = elementsInUnit;
        const [cx, cy] = [el.x + el.width / 2, el.y + el.height / 2];

-        const [topLeftX, topLeftY] = pointRotateRads(
-          point(el.x, el.y),
-          point(cx, cy),
-          el.angle,
-        );
+        const [topLeftX, topLeftY] = rotate(el.x, el.y, cx, cy, el.angle);

        return Math.round((property === "x" ? topLeftX : topLeftY) * 100) / 100;
      }),
@@ -1,10 +1,10 @@
 import type { ElementsMap, ExcalidrawElement } from "../../element/types";
+import { rotate } from "../../math";
 import StatsDragInput from "./DragInput";
 import type { DragInputCallbackType } from "./DragInput";
 import { getStepSizedValue, moveElement } from "./utils";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
-import { point, pointRotateRads } from "../../../math";

 interface PositionProps {
  property: "x" | "y";
@@ -32,9 +32,11 @@ const handlePositionChange: DragInputCallbackType<"x" | "y"> = ({
    origElement.x + origElement.width / 2,
    origElement.y + origElement.height / 2,
  ];
-  const [topLeftX, topLeftY] = pointRotateRads(
-    point(origElement.x, origElement.y),
-    point(cx, cy),
+  const [topLeftX, topLeftY] = rotate(
+    origElement.x,
+    origElement.y,
+    cx,
+    cy,
    origElement.angle,
  );

@@ -92,9 +94,11 @@ const Position = ({
  scene,
  appState,
 }: PositionProps) => {
-  const [topLeftX, topLeftY] = pointRotateRads(
-    point(element.x, element.y),
-    point(element.x + element.width / 2, element.y + element.height / 2),
+  const [topLeftX, topLeftY] = rotate(
+    element.x,
+    element.y,
+    element.x + element.width / 2,
+    element.y + element.height / 2,
    element.angle,
  );
  const value =
@@ -1,72 +0,0 @@
-.exc-stats {
-  width: 204px;
-  position: absolute;
-  top: 60px;
-  font-size: 12px;
-  z-index: var(--zIndex-layerUI);
-  pointer-events: var(--ui-pointerEvents);
-
-  :root[dir="rtl"] & {
-    left: 12px;
-    right: initial;
-  }
-
-  h2 {
-    font-size: 1.5em;
-    margin-block-start: 0.83em;
-    margin-block-end: 0.83em;
-    font-weight: bold;
-  }
-  h3 {
-    white-space: nowrap;
-    font-size: 1.17em;
-    margin: 0;
-    font-weight: bold;
-  }
-
-  &__rows {
-    display: flex;
-    flex-direction: column;
-    gap: 0.3125rem;
-  }
-
-  &__row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    display: grid;
-    gap: 4px;
-
-    div + div {
-      text-align: right;
-    }
-  }
-
-  &__row--heading {
-    text-align: center;
-    font-weight: bold;
-    margin: 0.25rem 0;
-  }
-
-  .title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
-
-    h2 {
-      margin: 0;
-    }
-  }
-
-  .close {
-    height: 16px;
-    width: 16px;
-    cursor: pointer;
-    svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-}
@@ -2,16 +2,13 @@ import { useEffect, useMemo, useState, memo } from "react";
 import { getCommonBounds } from "../../element/bounds";
 import type { NonDeletedExcalidrawElement } from "../../element/types";
 import { t } from "../../i18n";
-import type {
-  AppClassProperties,
-  AppState,
-  ExcalidrawProps,
-} from "../../types";
+import type { AppState, ExcalidrawProps } from "../../types";
 import { CloseIcon } from "../icons";
 import { Island } from "../Island";
 import { throttle } from "lodash";
 import Dimension from "./Dimension";
 import Angle from "./Angle";
+
 import FontSize from "./FontSize";
 import MultiDimension from "./MultiDimension";
 import { elementsAreInSameGroup } from "../../groups";
@@ -20,18 +17,14 @@ import MultiFontSize from "./MultiFontSize";
 import Position from "./Position";
 import MultiPosition from "./MultiPosition";
 import Collapsible from "./Collapsible";
+import type Scene from "../../scene/Scene";
 import { useExcalidrawAppState, useExcalidrawSetAppState } from "../App";
 import { getAtomicUnits } from "./utils";
 import { STATS_PANELS } from "../../constants";
 import { isElbowArrow } from "../../element/typeChecks";
-import CanvasGrid from "./CanvasGrid";
-import clsx from "clsx";
-
-import "./Stats.scss";
-import { isGridModeEnabled } from "../../snapping";

 interface StatsProps {
-  app: AppClassProperties;
+  scene: Scene;
  onClose: () => void;
  renderCustomStats: ExcalidrawProps["renderCustomStats"];
 }
@@ -40,12 +33,11 @@ const STATS_TIMEOUT = 50;

 export const Stats = (props: StatsProps) => {
  const appState = useExcalidrawAppState();
-  const sceneNonce = props.app.scene.getSceneNonce() || 1;
-  const selectedElements = props.app.scene.getSelectedElements({
+  const sceneNonce = props.scene.getSceneNonce() || 1;
+  const selectedElements = props.scene.getSelectedElements({
    selectedElementIds: appState.selectedElementIds,
    includeBoundTextElement: false,
  });
-  const gridModeEnabled = isGridModeEnabled(props.app);

  return (
    <StatsInner
@@ -53,71 +45,23 @@ export const Stats = (props: StatsProps) => {
      appState={appState}
      sceneNonce={sceneNonce}
      selectedElements={selectedElements}
-      gridModeEnabled={gridModeEnabled}
    />
  );
 };

-const StatsRow = ({
-  children,
-  columns = 1,
-  heading,
-  style,
-  ...rest
-}: {
-  children: React.ReactNode;
-  columns?: number;
-  heading?: boolean;
-  style?: React.CSSProperties;
-} & React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={clsx("exc-stats__row", { "exc-stats__row--heading": heading })}
-    style={{
-      gridTemplateColumns: `repeat(${columns}, 1fr)`,
-      ...style,
-    }}
-    {...rest}
-  >
-    {children}
-  </div>
-);
-StatsRow.displayName = "StatsRow";
-
-const StatsRows = ({
-  children,
-  order,
-  style,
-  ...rest
-}: {
-  children: React.ReactNode;
-  order?: number;
-  style?: React.CSSProperties;
-} & React.HTMLAttributes<HTMLDivElement>) => (
-  <div className="exc-stats__rows" style={{ order, ...style }} {...rest}>
-    {children}
-  </div>
-);
-StatsRows.displayName = "StatsRows";
-
-Stats.StatsRow = StatsRow;
-Stats.StatsRows = StatsRows;
-
 export const StatsInner = memo(
  ({
-    app,
+    scene,
    onClose,
    renderCustomStats,
    selectedElements,
    appState,
    sceneNonce,
-    gridModeEnabled,
  }: StatsProps & {
    sceneNonce: number;
    selectedElements: readonly NonDeletedExcalidrawElement[];
    appState: AppState;
-    gridModeEnabled: boolean;
  }) => {
-    const scene = app.scene;
    const elements = scene.getNonDeletedElements();
    const elementsMap = scene.getNonDeletedElementsMap();
    const setAppState = useExcalidrawSetAppState();
@@ -162,7 +106,7 @@ export const StatsInner = memo(
    }, [selectedElements, appState]);

    return (
-      <div className="exc-stats">
+      <div className="Stats">
        <Island padding={3}>
          <div className="title">
            <h2>{t("stats.title")}</h2>
@@ -177,6 +121,7 @@ export const StatsInner = memo(
            openTrigger={() =>
              setAppState((state) => {
                return {
+                  ...state,
                  stats: {
                    open: true,
                    panels: state.stats.panels ^ STATS_PANELS.generalStats,
@@ -185,36 +130,26 @@ export const StatsInner = memo(
              })
            }
          >
-            <StatsRows>
-              <StatsRow heading>{t("stats.scene")}</StatsRow>
-              <StatsRow columns={2}>
-                <div>{t("stats.shapes")}</div>
-                <div>{elements.length}</div>
-              </StatsRow>
-              <StatsRow columns={2}>
-                <div>{t("stats.width")}</div>
-                <div>{sceneDimension.width}</div>
-              </StatsRow>
-              <StatsRow columns={2}>
-                <div>{t("stats.height")}</div>
-                <div>{sceneDimension.height}</div>
-              </StatsRow>
-              {gridModeEnabled && (
-                <>
-                  <StatsRow heading>Canvas</StatsRow>
-                  <StatsRow>
-                    <CanvasGrid
-                      property="gridStep"
-                      scene={scene}
-                      appState={appState}
-                      setAppState={setAppState}
-                    />
-                  </StatsRow>
-                </>
-              )}
-            </StatsRows>
-
-            {renderCustomStats?.(elements, appState)}
+            <table>
+              <tbody>
+                <tr>
+                  <th colSpan={2}>{t("stats.scene")}</th>
+                </tr>
+                <tr>
+                  <td>{t("stats.elements")}</td>
+                  <td>{elements.length}</td>
+                </tr>
+                <tr>
+                  <td>{t("stats.width")}</td>
+                  <td>{sceneDimension.width}</td>
+                </tr>
+                <tr>
+                  <td>{t("stats.height")}</td>
+                  <td>{sceneDimension.height}</td>
+                </tr>
+                {renderCustomStats?.(elements, appState)}
+              </tbody>
+            </table>
          </Collapsible>

          {selectedElements.length > 0 && (
@@ -232,6 +167,7 @@ export const StatsInner = memo(
                openTrigger={() =>
                  setAppState((state) => {
                    return {
+                      ...state,
                      stats: {
                        open: true,
                        panels:
@@ -241,139 +177,117 @@ export const StatsInner = memo(
                  })
                }
              >
-                <StatsRows>
-                  {singleElement && (
-                    <>
-                      <StatsRow heading data-testid="stats-element-type">
-                        {t(`element.${singleElement.type}`)}
-                      </StatsRow>
+                {singleElement && (
+                  <div className="sectionContent">
+                    <div className="elementType">
+                      {t(`element.${singleElement.type}`)}
+                    </div>

-                      <StatsRow>
-                        <Position
-                          element={singleElement}
-                          property="x"
-                          elementsMap={elementsMap}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <Position
-                          element={singleElement}
-                          property="y"
-                          elementsMap={elementsMap}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <Dimension
-                          property="width"
-                          element={singleElement}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <Dimension
-                          property="height"
-                          element={singleElement}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
+                    <div className="statsItem">
+                      <Position
+                        element={singleElement}
+                        property="x"
+                        elementsMap={elementsMap}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <Position
+                        element={singleElement}
+                        property="y"
+                        elementsMap={elementsMap}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <Dimension
+                        property="width"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <Dimension
+                        property="height"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
                      {!isElbowArrow(singleElement) && (
-                        <StatsRow>
-                          <Angle
-                            property="angle"
-                            element={singleElement}
-                            scene={scene}
-                            appState={appState}
-                          />
-                        </StatsRow>
-                      )}
-                      <StatsRow>
-                        <FontSize
-                          property="fontSize"
+                        <Angle
+                          property="angle"
                          element={singleElement}
                          scene={scene}
                          appState={appState}
                        />
-                      </StatsRow>
-                    </>
-                  )}
-
-                  {multipleElements && (
-                    <>
-                      {elementsAreInSameGroup(multipleElements) && (
-                        <StatsRow heading>{t("element.group")}</StatsRow>
                      )}
+                      <FontSize
+                        property="fontSize"
+                        element={singleElement}
+                        scene={scene}
+                        appState={appState}
+                      />
+                    </div>
+                  </div>
+                )}

-                      <StatsRow columns={2} style={{ margin: "0.3125rem 0" }}>
-                        <div>{t("stats.shapes")}</div>
-                        <div>{selectedElements.length}</div>
-                      </StatsRow>
+                {multipleElements && (
+                  <div className="sectionContent">
+                    {elementsAreInSameGroup(multipleElements) && (
+                      <div className="elementType">{t("element.group")}</div>
+                    )}

-                      <StatsRow>
-                        <MultiPosition
-                          property="x"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiPosition
-                          property="y"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiDimension
-                          property="width"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiDimension
-                          property="height"
-                          elements={multipleElements}
-                          elementsMap={elementsMap}
-                          atomicUnits={atomicUnits}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiAngle
-                          property="angle"
-                          elements={multipleElements}
-                          scene={scene}
-                          appState={appState}
-                        />
-                      </StatsRow>
-                      <StatsRow>
-                        <MultiFontSize
-                          property="fontSize"
-                          elements={multipleElements}
-                          scene={scene}
-                          appState={appState}
-                          elementsMap={elementsMap}
-                        />
-                      </StatsRow>
-                    </>
-                  )}
-                </StatsRows>
+                    <div className="elementsCount">
+                      <div>{t("stats.elements")}</div>
+                      <div>{selectedElements.length}</div>
+                    </div>
+
+                    <div className="statsItem">
+                      <MultiPosition
+                        property="x"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiPosition
+                        property="y"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiDimension
+                        property="width"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiDimension
+                        property="height"
+                        elements={multipleElements}
+                        elementsMap={elementsMap}
+                        atomicUnits={atomicUnits}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiAngle
+                        property="angle"
+                        elements={multipleElements}
+                        scene={scene}
+                        appState={appState}
+                      />
+                      <MultiFontSize
+                        property="fontSize"
+                        elements={multipleElements}
+                        scene={scene}
+                        appState={appState}
+                        elementsMap={elementsMap}
+                      />
+                    </div>
+                  </div>
+                )}
              </Collapsible>
            </div>
          )}
@@ -385,9 +299,7 @@ export const StatsInner = memo(
    return (
      prev.sceneNonce === next.sceneNonce &&
      prev.selectedElements === next.selectedElements &&
-      prev.appState.stats.panels === next.appState.stats.panels &&
-      prev.gridModeEnabled === next.gridModeEnabled &&
-      prev.appState.gridStep === next.appState.gridStep
+      prev.appState.stats.panels === next.appState.stats.panels
    );
  },
 );
@@ -19,13 +19,12 @@ import type {
  ExcalidrawLinearElement,
  ExcalidrawTextElement,
 } from "../../element/types";
+import { degreeToRadian, rotate } from "../../math";
 import { getTextEditor, updateTextEditor } from "../../tests/queries/dom";
 import { getCommonBounds, isTextElement } from "../../element";
 import { API } from "../../tests/helpers/api";
 import { actionGroup } from "../../actions";
 import { isInGroup } from "../../groups";
-import type { Degrees } from "../../../math";
-import { degreesToRadians, point, pointRotateRads } from "../../../math";

 const { h } = window;
 const mouse = new Pointer("mouse");
@@ -33,6 +32,21 @@ const renderStaticScene = vi.spyOn(StaticScene, "renderStaticScene");
 let stats: HTMLElement | null = null;
 let elementStats: HTMLElement | null | undefined = null;

+const getStatsProperty = (label: string) => {
+  const elementStats = UI.queryStats()?.querySelector("#elementStats");
+
+  if (elementStats) {
+    const properties = elementStats?.querySelector(".statsItem");
+    return (
+      properties?.querySelector?.(
+        `.drag-input-container[data-testid="${label}"]`,
+      ) || null
+    );
+  }
+
+  return null;
+};
+
 const testInputProperty = (
  element: ExcalidrawElement,
  property: "x" | "y" | "width" | "height" | "angle" | "fontSize",
@@ -40,16 +54,14 @@ const testInputProperty = (
  initialValue: number,
  nextValue: number,
 ) => {
-  const input = UI.queryStatsProperty(label)?.querySelector(
+  const input = getStatsProperty(label)?.querySelector(
    ".drag-input",
  ) as HTMLInputElement;
  expect(input).toBeDefined();
  expect(input.value).toBe(initialValue.toString());
  UI.updateInput(input, String(nextValue));
  if (property === "angle") {
-    expect(element[property]).toBe(
-      degreesToRadians(Number(nextValue) as Degrees),
-    );
+    expect(element[property]).toBe(degreeToRadian(Number(nextValue)));
  } else if (property === "fontSize" && isTextElement(element)) {
    expect(element[property]).toBe(Number(nextValue));
  } else if (property !== "fontSize") {
@@ -124,7 +136,7 @@ describe("binding with linear elements", () => {

  it("should remain bound to linear element on small position change", async () => {
    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputX = UI.queryStatsProperty("X")?.querySelector(
+    const inputX = getStatsProperty("X")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

@@ -136,7 +148,7 @@ describe("binding with linear elements", () => {

  it("should remain bound to linear element on small angle change", async () => {
    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
+    const inputAngle = getStatsProperty("A")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

@@ -147,7 +159,7 @@ describe("binding with linear elements", () => {

  it("should unbind linear element on large position change", async () => {
    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputX = UI.queryStatsProperty("X")?.querySelector(
+    const inputX = getStatsProperty("X")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

@@ -159,7 +171,7 @@ describe("binding with linear elements", () => {

  it("should remain bound to linear element on small angle change", async () => {
    const linear = h.elements[1] as ExcalidrawLinearElement;
-    const inputAngle = UI.queryStatsProperty("A")?.querySelector(
+    const inputAngle = getStatsProperty("A")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

@@ -213,14 +225,18 @@ describe("stats for a generic element", () => {
    expect(title?.lastChild?.nodeValue)?.toBe(t("stats.elementProperties"));

    // element type
-    const elementType = queryByTestId(elementStats!, "stats-element-type");
+    const elementType = elementStats?.querySelector(".elementType");
    expect(elementType).toBeDefined();
    expect(elementType?.lastChild?.nodeValue).toBe(t("element.rectangle"));

    // properties
+    const properties = elementStats?.querySelector(".statsItem");
+    expect(properties?.childNodes).toBeDefined();
    ["X", "Y", "W", "H", "A"].forEach((label) => () => {
      expect(
-        stats!.querySelector?.(`.drag-input-container[data-testid="${label}"]`),
+        properties?.querySelector?.(
+          `.drag-input-container[data-testid="${label}"]`,
+        ),
      ).toBeDefined();
    });
  });
@@ -241,7 +257,7 @@ describe("stats for a generic element", () => {
    const rectangle = h.elements[0];
    const rectangleId = rectangle.id;

-    const input = UI.queryStatsProperty("W")?.querySelector(
+    const input = getStatsProperty("W")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(input).toBeDefined();
@@ -263,17 +279,19 @@ describe("stats for a generic element", () => {
      rectangle.x + rectangle.width / 2,
      rectangle.y + rectangle.height / 2,
    ];
-    const [topLeftX, topLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+    const [topLeftX, topLeftY] = rotate(
+      rectangle.x,
+      rectangle.y,
+      cx,
+      cy,
      rectangle.angle,
    );

-    const xInput = UI.queryStatsProperty("X")?.querySelector(
+    const xInput = getStatsProperty("X")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

-    const yInput = UI.queryStatsProperty("Y")?.querySelector(
+    const yInput = getStatsProperty("Y")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

@@ -282,9 +300,11 @@ describe("stats for a generic element", () => {

    testInputProperty(rectangle, "angle", "A", 0, 45);

-    let [newTopLeftX, newTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+    let [newTopLeftX, newTopLeftY] = rotate(
+      rectangle.x,
+      rectangle.y,
+      cx,
+      cy,
      rectangle.angle,
    );

@@ -293,9 +313,11 @@ describe("stats for a generic element", () => {

    testInputProperty(rectangle, "angle", "A", 45, 66);

-    [newTopLeftX, newTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+    [newTopLeftX, newTopLeftY] = rotate(
+      rectangle.x,
+      rectangle.y,
+      cx,
+      cy,
      rectangle.angle,
    );
    expect(newTopLeftX.toString()).not.toEqual(xInput.value);
@@ -310,9 +332,11 @@ describe("stats for a generic element", () => {
      rectangle.x + rectangle.width / 2,
      rectangle.y + rectangle.height / 2,
    ];
-    const [topLeftX, topLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+    const [topLeftX, topLeftY] = rotate(
+      rectangle.x,
+      rectangle.y,
+      cx,
+      cy,
      rectangle.angle,
    );
    testInputProperty(rectangle, "width", "W", rectangle.width, 400);
@@ -320,9 +344,11 @@ describe("stats for a generic element", () => {
      rectangle.x + rectangle.width / 2,
      rectangle.y + rectangle.height / 2,
    ];
-    let [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+    let [currentTopLeftX, currentTopLeftY] = rotate(
+      rectangle.x,
+      rectangle.y,
+      cx,
+      cy,
      rectangle.angle,
    );
    expect(currentTopLeftX).toBeCloseTo(topLeftX, 4);
@@ -333,9 +359,11 @@ describe("stats for a generic element", () => {
      rectangle.x + rectangle.width / 2,
      rectangle.y + rectangle.height / 2,
    ];
-    [currentTopLeftX, currentTopLeftY] = pointRotateRads(
-      point(rectangle.x, rectangle.y),
-      point(cx, cy),
+    [currentTopLeftX, currentTopLeftY] = rotate(
+      rectangle.x,
+      rectangle.y,
+      cx,
+      cy,
      rectangle.angle,
    );

@@ -389,7 +417,7 @@ describe("stats for a non-generic element", () => {
    elementStats = stats?.querySelector("#elementStats");

    // can change font size
-    const input = UI.queryStatsProperty("F")?.querySelector(
+    const input = getStatsProperty("F")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(input).toBeDefined();
@@ -398,9 +426,9 @@ describe("stats for a non-generic element", () => {
    expect(text.fontSize).toBe(36);

    // cannot change width or height
-    const width = UI.queryStatsProperty("W")?.querySelector(".drag-input");
+    const width = getStatsProperty("W")?.querySelector(".drag-input");
    expect(width).toBeUndefined();
-    const height = UI.queryStatsProperty("H")?.querySelector(".drag-input");
+    const height = getStatsProperty("H")?.querySelector(".drag-input");
    expect(height).toBeUndefined();

    // min font size is 4
@@ -428,7 +456,7 @@ describe("stats for a non-generic element", () => {
    expect(elementStats).toBeDefined();

    // cannot change angle
-    const angle = UI.queryStatsProperty("A")?.querySelector(".drag-input");
+    const angle = getStatsProperty("A")?.querySelector(".drag-input");
    expect(angle).toBeUndefined();

    // can change width or height
@@ -478,7 +506,7 @@ describe("stats for a non-generic element", () => {
    API.setElements([container, text]);

    API.setSelectedElements([container]);
-    const fontSize = UI.queryStatsProperty("F")?.querySelector(
+    const fontSize = getStatsProperty("F")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(fontSize).toBeDefined();
@@ -542,15 +570,15 @@ describe("stats for multiple elements", () => {

    elementStats = stats?.querySelector("#elementStats");

-    const width = UI.queryStatsProperty("W")?.querySelector(
+    const width = getStatsProperty("W")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(width?.value).toBe("Mixed");
-    const height = UI.queryStatsProperty("H")?.querySelector(
+    const height = getStatsProperty("H")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(height?.value).toBe("Mixed");
-    const angle = UI.queryStatsProperty("A")?.querySelector(
+    const angle = getStatsProperty("A")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(angle.value).toBe("0");
@@ -601,25 +629,25 @@ describe("stats for multiple elements", () => {

    elementStats = stats?.querySelector("#elementStats");

-    const width = UI.queryStatsProperty("W")?.querySelector(
+    const width = getStatsProperty("W")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(width).toBeDefined();
    expect(width.value).toBe("Mixed");

-    const height = UI.queryStatsProperty("H")?.querySelector(
+    const height = getStatsProperty("H")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(height).toBeDefined();
    expect(height.value).toBe("Mixed");

-    const angle = UI.queryStatsProperty("A")?.querySelector(
+    const angle = getStatsProperty("A")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(angle).toBeDefined();
    expect(angle.value).toBe("0");

-    const fontSize = UI.queryStatsProperty("F")?.querySelector(
+    const fontSize = getStatsProperty("F")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(fontSize).toBeDefined();
@@ -633,7 +661,7 @@ describe("stats for multiple elements", () => {

    UI.updateInput(angle, "40");

-    const angleInRadian = degreesToRadians(40 as Degrees);
+    const angleInRadian = degreeToRadian(40);
    expect(rectangle?.angle).toBeCloseTo(angleInRadian, 4);
    expect(text?.angle).toBeCloseTo(angleInRadian, 4);
    expect(frame.angle).toBe(0);
@@ -664,7 +692,7 @@ describe("stats for multiple elements", () => {

    elementStats = stats?.querySelector("#elementStats");

-    const x = UI.queryStatsProperty("X")?.querySelector(
+    const x = getStatsProperty("X")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

@@ -677,7 +705,7 @@ describe("stats for multiple elements", () => {
    expect(h.elements[1].x).toBe(400);
    expect(x.value).toBe("300");

-    const y = UI.queryStatsProperty("Y")?.querySelector(
+    const y = getStatsProperty("Y")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;

@@ -690,13 +718,13 @@ describe("stats for multiple elements", () => {
    expect(h.elements[1].y).toBe(300);
    expect(y.value).toBe("200");

-    const width = UI.queryStatsProperty("W")?.querySelector(
+    const width = getStatsProperty("W")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(width).toBeDefined();
    expect(Number(width.value)).toBe(200);

-    const height = UI.queryStatsProperty("H")?.querySelector(
+    const height = getStatsProperty("H")?.querySelector(
      ".drag-input",
    ) as HTMLInputElement;
    expect(height).toBeDefined();
@@ -1,5 +1,3 @@
-import type { Radians } from "../../../math";
-import { point, pointRotateRads } from "../../../math";
 import {
  bindOrUnbindLinearElements,
  updateBoundElements,
@@ -32,6 +30,7 @@ import {
  getElementsInGroup,
  isInGroup,
 } from "../../groups";
+import { rotate } from "../../math";
 import type Scene from "../../scene/Scene";
 import type { AppState } from "../../types";
 import { getFontString } from "../../utils";
@@ -42,8 +41,7 @@ export type StatsInputProperty =
  | "width"
  | "height"
  | "angle"
-  | "fontSize"
-  | "gridStep";
+  | "fontSize";

 export const SMALLEST_DELTA = 0.01;

@@ -230,19 +228,23 @@ export const moveElement = (
    originalElement.x + originalElement.width / 2,
    originalElement.y + originalElement.height / 2,
  ];
-  const [topLeftX, topLeftY] = pointRotateRads(
-    point(originalElement.x, originalElement.y),
-    point(cx, cy),
+  const [topLeftX, topLeftY] = rotate(
+    originalElement.x,
+    originalElement.y,
+    cx,
+    cy,
    originalElement.angle,
  );

  const changeInX = newTopLeftX - topLeftX;
  const changeInY = newTopLeftY - topLeftY;

-  const [x, y] = pointRotateRads(
-    point(newTopLeftX, newTopLeftY),
-    point(cx + changeInX, cy + changeInY),
-    -originalElement.angle as Radians,
+  const [x, y] = rotate(
+    newTopLeftX,
+    newTopLeftY,
+    cx + changeInX,
+    cy + changeInY,
+    -originalElement.angle,
  );

  mutateElement(
@@ -25,11 +25,11 @@ import type { BinaryFiles } from "../../types";
 import { ArrowRightIcon } from "../icons";

 import "./TTDDialog.scss";
+import { isFiniteNumber } from "../../utils";
 import { atom, useAtom } from "jotai";
 import { trackEvent } from "../../analytics";
 import { InlineIcon } from "../InlineIcon";
 import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
-import { isFiniteNumber } from "../../../math";

 const MIN_PROMPT_LENGTH = 3;
 const MAX_PROMPT_LENGTH = 1000;
@@ -7,7 +7,10 @@ import { isMemberOf } from "../../utils";
 const TTDDialogTabs = (
  props: {
    children: ReactNode;
-  } & { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" },
+  } & (
+    | { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" }
+    | { dialog: "settings"; tab: "text-to-diagram" | "diagram-to-code" }
+  ),
 ) => {
  const setAppState = useExcalidrawSetAppState();

@@ -36,6 +39,13 @@ const TTDDialogTabs = (
          }
        }
        if (
+          props.dialog === "settings" &&
+          isMemberOf(["text-to-diagram", "diagram-to-code"], tab)
+        ) {
+          setAppState({
+            openDialog: { name: props.dialog, tab, source: "settings" },
+          });
+        } else if (
          props.dialog === "ttd" &&
          isMemberOf(["text-to-diagram", "mermaid"], tab)
        ) {
@@ -3,29 +3,16 @@
 .excalidraw {
  --ExcTextField--color: var(--color-on-surface);
  --ExcTextField--label-color: var(--color-on-surface);
-  --ExcTextField--background: var(--color-surface-low);
+  --ExcTextField--background: transparent;
  --ExcTextField--readonly--background: var(--color-surface-high);
  --ExcTextField--readonly--color: var(--color-on-surface);
-  --ExcTextField--border: var(--color-gray-20);
+  --ExcTextField--border: var(--color-border-outline);
  --ExcTextField--readonly--border: var(--color-border-outline-variant);
  --ExcTextField--border-hover: var(--color-brand-hover);
  --ExcTextField--border-active: var(--color-brand-active);
  --ExcTextField--placeholder: var(--color-border-outline-variant);

  .ExcTextField {
-    position: relative;
-
-    svg {
-      position: absolute;
-      top: 50%; // 50% is not exactly in the center of the input
-      transform: translateY(-50%);
-      left: 0.75rem;
-      width: 1.25rem;
-      height: 1.25rem;
-      color: var(--color-gray-40);
-      z-index: 1;
-    }
-
    &--fullWidth {
      width: 100%;
      flex-grow: 1;
@@ -50,6 +37,7 @@
      display: flex;
      flex-direction: row;
      align-items: center;
+      padding: 0 1rem;

      height: 3rem;

@@ -57,8 +45,6 @@
      border: 1px solid var(--ExcTextField--border);
      border-radius: 0.5rem;

-      padding: 0 0.75rem;
-
      &:not(&--readonly) {
        &:hover {
          border-color: var(--ExcTextField--border-hover);
@@ -94,6 +80,10 @@

        width: 100%;

+        &::placeholder {
+          color: var(--ExcTextField--placeholder);
+        }
+
        &:not(:focus) {
          &:hover {
            background-color: initial;
@@ -115,9 +105,5 @@
        }
      }
    }
-
-    &--hasIcon .ExcTextField__input {
-      padding-left: 2.5rem;
-    }
  }
 }
@@ -21,9 +21,7 @@ type TextFieldProps = {
  fullWidth?: boolean;
  selectOnRender?: boolean;

-  icon?: React.ReactNode;
  label?: string;
-  className?: string;
  placeholder?: string;
  isRedacted?: boolean;
 } & ({ value: string } | { defaultValue: string });
@@ -39,8 +37,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
      selectOnRender,
      onKeyDown,
      isRedacted = false,
-      icon,
-      className,
      ...rest
    },
    ref,
@@ -51,8 +47,6 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(

    useLayoutEffect(() => {
      if (selectOnRender) {
-        // focusing first is needed because vitest/jsdom
-        innerRef.current?.focus();
        innerRef.current?.select();
      }
    }, [selectOnRender]);
@@ -62,16 +56,14 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(

    return (
      <div
-        className={clsx("ExcTextField", className, {
+        className={clsx("ExcTextField", {
          "ExcTextField--fullWidth": fullWidth,
-          "ExcTextField--hasIcon": !!icon,
        })}
        onClick={() => {
          innerRef.current?.focus();
        }}
      >
-        {icon}
-        {label && <div className="ExcTextField__label">{label}</div>}
+        <div className="ExcTextField__label">{label}</div>
        <div
          className={clsx("ExcTextField__input", {
            "ExcTextField__input--readonly": readonly,
@@ -202,8 +202,7 @@ const getRelevantAppStateProps = (
  activeEmbeddable: appState.activeEmbeddable,
  snapLines: appState.snapLines,
  zenModeEnabled: appState.zenModeEnabled,
-  editingTextElement: appState.editingTextElement,
-  searchMatches: appState.searchMatches,
+  editingElement: appState.editingElement,
 });

 const areEqual = (
@@ -1,56 +0,0 @@
-import { useEffect, useRef } from "react";
-import type { NonDeletedSceneElementsMap } from "../../element/types";
-import type { AppState } from "../../types";
-import type {
-  RenderableElementsMap,
-  StaticCanvasRenderConfig,
-} from "../../scene/types";
-import type { RoughCanvas } from "roughjs/bin/canvas";
-import { renderNewElementScene } from "../../renderer/renderNewElementScene";
-import { isRenderThrottlingEnabled } from "../../reactUtils";
-
-interface NewElementCanvasProps {
-  appState: AppState;
-  elementsMap: RenderableElementsMap;
-  allElementsMap: NonDeletedSceneElementsMap;
-  scale: number;
-  rc: RoughCanvas;
-  renderConfig: StaticCanvasRenderConfig;
-}
-
-const NewElementCanvas = (props: NewElementCanvasProps) => {
-  const canvasRef = useRef<HTMLCanvasElement | null>(null);
-  useEffect(() => {
-    if (!canvasRef.current) {
-      return;
-    }
-    renderNewElementScene(
-      {
-        canvas: canvasRef.current,
-        scale: props.scale,
-        newElement: props.appState.newElement,
-        elementsMap: props.elementsMap,
-        allElementsMap: props.allElementsMap,
-        rc: props.rc,
-        renderConfig: props.renderConfig,
-        appState: props.appState,
-      },
-      isRenderThrottlingEnabled(),
-    );
-  });
-
-  return (
-    <canvas
-      className="excalidraw__canvas"
-      style={{
-        width: props.appState.width,
-        height: props.appState.height,
-      }}
-      width={props.appState.width * props.scale}
-      height={props.appState.height * props.scale}
-      ref={canvasRef}
-    />
-  );
-};
-
-export default NewElementCanvas;
@@ -101,7 +101,6 @@ const getRelevantAppStateProps = (
  exportScale: appState.exportScale,
  selectedElementsAreBeingDragged: appState.selectedElementsAreBeingDragged,
  gridSize: appState.gridSize,
-  gridStep: appState.gridStep,
  frameRendering: appState.frameRendering,
  selectedElementIds: appState.selectedElementIds,
  frameToHighlight: appState.frameToHighlight,
@@ -13,7 +13,6 @@ const DropdownMenuItemLink = ({
  onSelect,
  className = "",
  selected,
-  rel = "noreferrer",
  ...rest
 }: {
  href: string;
@@ -23,7 +22,6 @@ const DropdownMenuItemLink = ({
  className?: string;
  selected?: boolean;
  onSelect?: (event: Event) => void;
-  rel?: string;
 } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
  const handleClick = useHandleDropdownMenuItemClick(rest.onClick, onSelect);

@@ -1,4 +1,4 @@
-import type { AppState, ExcalidrawProps, UIAppState } from "../../types";
+import type { AppState, ExcalidrawProps, Point, UIAppState } from "../../types";
 import {
  sceneCoordsToViewportCoords,
  viewportCoordsToSceneCoords,
@@ -36,7 +36,6 @@ import { trackEvent } from "../../analytics";
 import { useAppProps, useExcalidrawAppState } from "../App";
 import { isEmbeddableElement } from "../../element/typeChecks";
 import { getLinkHandleFromCoords } from "./helpers";
-import { point, type GlobalPoint } from "../../../math";

 const CONTAINER_WIDTH = 320;
 const SPACE_BOTTOM = 85;
@@ -177,12 +176,10 @@ export const Hyperlink = ({
      if (timeoutId) {
        clearTimeout(timeoutId);
      }
-      const shouldHide = shouldHideLinkPopup(
-        element,
-        elementsMap,
-        appState,
-        point(event.clientX, event.clientY),
-      ) as boolean;
+      const shouldHide = shouldHideLinkPopup(element, elementsMap, appState, [
+        event.clientX,
+        event.clientY,
+      ]) as boolean;
      if (shouldHide) {
        timeoutId = window.setTimeout(() => {
          setAppState({ showHyperlinkPopup: false });
@@ -419,7 +416,7 @@ const shouldHideLinkPopup = (
  element: NonDeletedExcalidrawElement,
  elementsMap: ElementsMap,
  appState: AppState,
-  [clientX, clientY]: GlobalPoint,
+  [clientX, clientY]: Point,
 ): Boolean => {
  const { x: sceneX, y: sceneY } = viewportCoordsToSceneCoords(
    { clientX, clientY },
@@ -1,5 +1,3 @@
-import type { GlobalPoint, Radians } from "../../../math";
-import { point, pointRotateRads } from "../../../math";
 import { MIME_TYPES } from "../../constants";
 import type { Bounds } from "../../element/bounds";
 import { getElementAbsoluteCoords } from "../../element/bounds";
@@ -8,8 +6,9 @@ import type {
  ElementsMap,
  NonDeletedExcalidrawElement,
 } from "../../element/types";
+import { rotate } from "../../math";
 import { DEFAULT_LINK_SIZE } from "../../renderer/renderElement";
-import type { AppState, UIAppState } from "../../types";
+import type { AppState, Point, UIAppState } from "../../types";

 export const EXTERNAL_LINK_IMG = document.createElement("img");
 EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(
@@ -18,7 +17,7 @@ EXTERNAL_LINK_IMG.src = `data:${MIME_TYPES.svg}, ${encodeURIComponent(

 export const getLinkHandleFromCoords = (
  [x1, y1, x2, y2]: Bounds,
-  angle: Radians,
+  angle: number,
  appState: Pick<UIAppState, "zoom">,
 ): Bounds => {
  const size = DEFAULT_LINK_SIZE;
@@ -34,9 +33,11 @@ export const getLinkHandleFromCoords = (
  const x = x2 + dashedLineMargin - centeringOffset;
  const y = y1 - dashedLineMargin - linkMarginY + centeringOffset;

-  const [rotatedX, rotatedY] = pointRotateRads(
-    point(x + linkWidth / 2, y + linkHeight / 2),
-    point(centerX, centerY),
+  const [rotatedX, rotatedY] = rotate(
+    x + linkWidth / 2,
+    y + linkHeight / 2,
+    centerX,
+    centerY,
    angle,
  );
  return [
@@ -51,7 +52,7 @@ export const isPointHittingLinkIcon = (
  element: NonDeletedExcalidrawElement,
  elementsMap: ElementsMap,
  appState: AppState,
-  [x, y]: GlobalPoint,
+  [x, y]: Point,
 ) => {
  const threshold = 4 / appState.zoom.value;
  const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
@@ -72,7 +73,7 @@ export const isPointHittingLink = (
  element: NonDeletedExcalidrawElement,
  elementsMap: ElementsMap,
  appState: AppState,
-  [x, y]: GlobalPoint,
+  [x, y]: Point,
  isMobile: boolean,
 ) => {
  if (!element.link || appState.selectedElementIds[element.id]) {
@@ -85,5 +86,5 @@ export const isPointHittingLink = (
  ) {
    return true;
  }
-  return isPointHittingLinkIcon(element, elementsMap, appState, point(x, y));
+  return isPointHittingLinkIcon(element, elementsMap, appState, [x, y]);
 };
@@ -2139,11 +2139,3 @@ export const collapseUpIcon = createIcon(
  </g>,
  tablerIconProps,
 );
-
-export const upIcon = createIcon(
-  <g>
-    <path stroke="none" d="M0 0h24v24H0z" fill="none" />
-    <path d="M6 15l6 -6l6 6" />
-  </g>,
-  tablerIconProps,
-);
@@ -15,7 +15,6 @@ import {
  LoadIcon,
  MoonIcon,
  save,
-  searchIcon,
  SunIcon,
  TrashIcon,
  usersIcon,
@@ -28,7 +27,6 @@ import {
  actionLoadScene,
  actionSaveToActiveFile,
  actionShortcuts,
-  actionToggleSearchMenu,
  actionToggleTheme,
 } from "../../actions";
 import clsx from "clsx";
@@ -42,6 +40,7 @@ import DropdownMenuItemContentRadio from "../dropdownMenu/DropdownMenuItemConten
 import { THEME } from "../../constants";
 import type { Theme } from "../../element/types";
 import { trackEvent } from "../../analytics";
+
 import "./DefaultItems.scss";

 export const LoadScene = () => {
@@ -146,27 +145,6 @@ export const CommandPalette = (opts?: { className?: string }) => {
 };
 CommandPalette.displayName = "CommandPalette";

-export const SearchMenu = (opts?: { className?: string }) => {
-  const { t } = useI18n();
-  const actionManager = useExcalidrawActionManager();
-
-  return (
-    <DropdownMenuItem
-      icon={searchIcon}
-      data-testid="search-menu-button"
-      onSelect={() => {
-        actionManager.executeAction(actionToggleSearchMenu);
-      }}
-      shortcut={getShortcutFromShortcutName("searchMenu")}
-      aria-label={t("search.title")}
-      className={opts?.className}
-    >
-      {t("search.title")}
-    </DropdownMenuItem>
-  );
-};
-SearchMenu.displayName = "SearchMenu";
-
 export const Help = () => {
  const { t } = useI18n();

@@ -112,8 +112,6 @@ export const ENV = {

 export const CLASSES = {
  SHAPE_ACTIONS_MENU: "App-menu__left",
-  ZOOM_ACTIONS: "zoom-actions",
-  SEARCH_MENU_INPUT_WRAPPER: "layer-ui__search-inputWrapper",
 };

 /**
@@ -181,8 +179,7 @@ export const COLOR_VOICE_CALL = "#a2f1a6";

 export const CANVAS_ONLY_ACTIONS = ["selectAll"];

-export const DEFAULT_GRID_SIZE = 20;
-export const DEFAULT_GRID_STEP = 5;
+export const GRID_SIZE = 20; // TODO make it configurable?

 export const IMAGE_MIME_TYPES = {
  svg: "image/svg+xml",
@@ -237,7 +234,7 @@ export const VERSION_TIMEOUT = 30000;
 export const SCROLL_TIMEOUT = 100;
 export const ZOOM_STEP = 0.1;
 export const MIN_ZOOM = 0.1;
-export const MAX_ZOOM = 30;
+export const MAX_ZOOM = 30.0;
 export const HYPERLINK_TOOLTIP_DELAY = 300;

 // Report a user inactive after IDLE_THRESHOLD milliseconds
@@ -377,7 +374,6 @@ export const DEFAULT_ELEMENT_PROPS: {
 };

 export const LIBRARY_SIDEBAR_TAB = "library";
-export const CANVAS_SEARCH_TAB = "search";

 export const DEFAULT_SIDEBAR = {
  name: "default",
@@ -387,7 +387,7 @@ body.excalidraw-cursor-resize * {
  .App-menu__left {
    overflow-y: auto;
    padding: 0.75rem;
-    width: 12.5rem;
+    width: 200px;
    box-sizing: border-box;
    position: absolute;
  }
@@ -129,14 +129,8 @@
  --color-muted-background-darker: var(--color-gray-100);

  --color-promo: var(--color-primary);
-
-  --color-success: #cafccc;
-  --color-success-darker: #bafabc;
-  --color-success-darkest: #a5eba8;
-  --color-success-text: #268029;
-  --color-success-contrast: #65bb6a;
-  --color-success-contrast-hover: #6bcf70;
-  --color-success-contrast-active: #6edf74;
+  --color-success: #268029;
+  --color-success-lighter: #cafccc;

  --color-logo-icon: var(--color-primary);
  --color-logo-text: #190064;
@@ -144,9 +138,9 @@
  --border-radius-md: 0.375rem;
  --border-radius-lg: 0.5rem;

-  --color-surface-high: #f1f0ff;
-  --color-surface-mid: #f2f2f7;
-  --color-surface-low: #ececf4;
+  --color-surface-high: hsl(244, 100%, 97%);
+  --color-surface-mid: hsl(240 25% 96%);
+  --color-surface-low: hsl(240 25% 94%);
  --color-surface-lowest: #ffffff;
  --color-on-surface: #1b1b1f;
  --color-brand-hover: #5753d0;
@@ -0,0 +1,105 @@
+import { THEME } from "../constants";
+import type { Theme } from "../element/types";
+import type { DataURL } from "../types";
+import type { OpenAIInput, OpenAIOutput } from "./ai/types";
+
+export type MagicCacheData =
+  | {
+      status: "pending";
+    }
+  | { status: "done"; html: string }
+  | {
+      status: "error";
+      message?: string;
+      code: "ERR_GENERATION_INTERRUPTED" | string;
+    };
+
+const SYSTEM_PROMPT = `You are a skilled front-end developer who builds interactive prototypes from wireframes, and is an expert at CSS Grid and Flex design.
+Your role is to transform low-fidelity wireframes into working front-end HTML code.
+
+YOU MUST FOLLOW FOLLOWING RULES:
+
+- Use HTML, CSS, JavaScript to build a responsive, accessible, polished prototype
+- Leverage Tailwind for styling and layout (import as script <script src="https://cdn.tailwindcss.com"></script>)
+- Inline JavaScript when needed
+- Fetch dependencies from CDNs when needed (using unpkg or skypack)
+- Source images from Unsplash or create applicable placeholders
+- Interpret annotations as intended vs literal UI
+- Fill gaps using your expertise in UX and business logic
+- generate primarily for desktop UI, but make it responsive.
+- Use grid and flexbox wherever applicable.
+- Convert the wireframe in its entirety, don't omit elements if possible.
+
+If the wireframes, diagrams, or text is unclear or unreadable, refer to provided text for clarification.
+
+Your goal is a production-ready prototype that brings the wireframes to life.
+
+Please output JUST THE HTML file containing your best attempt at implementing the provided wireframes.`;
+
+export async function diagramToHTML({
+  image,
+  apiKey,
+  text,
+  theme = THEME.LIGHT,
+}: {
+  image: DataURL;
+  apiKey: string;
+  text: string;
+  theme?: Theme;
+}) {
+  const body: OpenAIInput.ChatCompletionCreateParamsBase = {
+    model: "gpt-4-vision-preview",
+    // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently
+    max_tokens: 4096,
+    temperature: 0.1,
+    messages: [
+      {
+        role: "system",
+        content: SYSTEM_PROMPT,
+      },
+      {
+        role: "user",
+        content: [
+          {
+            type: "image_url",
+            image_url: {
+              url: image,
+              detail: "high",
+            },
+          },
+          {
+            type: "text",
+            text: `Above is the reference wireframe. Please make a new website based on these and return just the HTML file. Also, please make it for the ${theme} theme. What follows are the wireframe's text annotations (if any)...`,
+          },
+          {
+            type: "text",
+            text,
+          },
+        ],
+      },
+    ],
+  };
+
+  let result:
+    | ({ ok: true } & OpenAIOutput.ChatCompletion)
+    | ({ ok: false } & OpenAIOutput.APIError);
+
+  const resp = await fetch("https://api.openai.com/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${apiKey}`,
+    },
+    body: JSON.stringify(body),
+  });
+
+  if (resp.ok) {
+    const json: OpenAIOutput.ChatCompletion = await resp.json();
+    result = { ...json, ok: true };
+  } else {
+    const json: OpenAIOutput.APIError = await resp.json();
+    result = { ...json, ok: false };
+  }
+
+  return result;
+}
@@ -24,7 +24,7 @@ const shouldDiscardRemoteElement = (
  if (
    local &&
    // local element is being edited
-    (local.id === localAppState.editingTextElement?.id ||
+    (local.id === localAppState.editingElement?.id ||
      local.id === localAppState.resizingElement?.id ||
      local.id === localAppState.newElement?.id || // TODO: Is this still valid? As newElement is selection element, which is never part of the elements array
      // local element is newer
@@ -10,7 +10,12 @@ import type {
  PointBinding,
  StrokeRoundness,
 } from "../element/types";
-import type { AppState, BinaryFiles, LibraryItem } from "../types";
+import type {
+  AppState,
+  BinaryFiles,
+  LibraryItem,
+  NormalizedZoomValue,
+} from "../types";
 import type { ImportedDataState, LegacyAppState } from "./types";
 import {
  getNonDeletedElements,
@@ -34,8 +39,6 @@ import {
  ROUNDNESS,
  DEFAULT_SIDEBAR,
  DEFAULT_ELEMENT_PROPS,
-  DEFAULT_GRID_SIZE,
-  DEFAULT_GRID_STEP,
 } from "../constants";
 import { getDefaultAppState } from "../appState";
 import { LinearElementEditor } from "../element/linearElementEditor";
@@ -48,14 +51,6 @@ import { normalizeLink } from "./url";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getSizeFromPoints } from "../points";
 import { getLineHeight } from "../fonts";
-import { normalizeFixedPoint } from "../element/binding";
-import {
-  getNormalizedGridSize,
-  getNormalizedGridStep,
-  getNormalizedZoom,
-} from "../scene";
-import type { LocalPoint, Radians } from "../../math";
-import { isFiniteNumber, point } from "../../math";

 type RestoredAppState = Omit<
  AppState,
@@ -111,7 +106,7 @@ const repairBinding = (
    ...binding,
    focus: binding.focus || 0,
    fixedPoint: isElbowArrow(element)
-      ? normalizeFixedPoint(binding.fixedPoint ?? [0, 0])
+      ? binding.fixedPoint ?? ([0, 0] as [number, number])
      : null,
  };
 };
@@ -150,7 +145,7 @@ const restoreElementWithProperties = <
    roughness: element.roughness ?? DEFAULT_ELEMENT_PROPS.roughness,
    opacity:
      element.opacity == null ? DEFAULT_ELEMENT_PROPS.opacity : element.opacity,
-    angle: element.angle || (0 as Radians),
+    angle: element.angle || 0,
    x: extra.x ?? element.x ?? 0,
    y: extra.y ?? element.y ?? 0,
    strokeColor: element.strokeColor || DEFAULT_ELEMENT_PROPS.strokeColor,
@@ -264,7 +259,10 @@ const restoreElement = (
      let y = element.y;
      let points = // migrate old arrow model to new one
        !Array.isArray(element.points) || element.points.length < 2
-          ? [point(0, 0), point(element.width, element.height)]
+          ? [
+              [0, 0],
+              [element.width, element.height],
+            ]
          : element.points;

      if (points[0][0] !== 0 || points[0][1] !== 0) {
@@ -288,11 +286,14 @@ const restoreElement = (
      });
    case "arrow": {
      const { startArrowhead = null, endArrowhead = "arrow" } = element;
-      let x: number | undefined = element.x;
-      let y: number | undefined = element.y;
-      let points: readonly LocalPoint[] | undefined = // migrate old arrow model to new one
+      let x = element.x;
+      let y = element.y;
+      let points = // migrate old arrow model to new one
        !Array.isArray(element.points) || element.points.length < 2
-          ? [point(0, 0), point(element.width, element.height)]
+          ? [
+              [0, 0],
+              [element.width, element.height],
+            ]
          : element.points;

      if (points[0][0] !== 0 || points[0][1] !== 0) {
@@ -612,24 +613,19 @@ export const restoreAppState = (
      locked: nextAppState.activeTool.locked ?? false,
    },
    // Migrates from previous version where appState.zoom was a number
-    zoom: {
-      value: getNormalizedZoom(
-        isFiniteNumber(appState.zoom)
-          ? appState.zoom
-          : appState.zoom?.value ?? defaultAppState.zoom.value,
-      ),
-    },
+    zoom:
+      typeof appState.zoom === "number"
+        ? {
+            value: appState.zoom as NormalizedZoomValue,
+          }
+        : appState.zoom?.value
+        ? appState.zoom
+        : defaultAppState.zoom,
    openSidebar:
      // string (legacy)
      typeof (appState.openSidebar as any as string) === "string"
        ? { name: DEFAULT_SIDEBAR.name }
        : nextAppState.openSidebar,
-    gridSize: getNormalizedGridSize(
-      isFiniteNumber(appState.gridSize) ? appState.gridSize : DEFAULT_GRID_SIZE,
-    ),
-    gridStep: getNormalizedGridStep(
-      isFiniteNumber(appState.gridStep) ? appState.gridStep : DEFAULT_GRID_STEP,
-    ),
  };
 };

@@ -2,7 +2,6 @@ import { vi } from "vitest";
 import type { ExcalidrawElementSkeleton } from "./transform";
 import { convertToExcalidrawElements } from "./transform";
 import type { ExcalidrawArrowElement } from "../element/types";
-import { point } from "../../math";

 const opts = { regenerateIds: false };

@@ -912,7 +911,10 @@ describe("Test Transform", () => {
        x: 111.262,
        y: 57,
        strokeWidth: 2,
-        points: [point(0, 0), point(272.985, 0)],
+        points: [
+          [0, 0],
+          [272.985, 0],
+        ],
        label: {
          text: "How are you?",
          fontSize: 20,
@@ -935,7 +937,7 @@ describe("Test Transform", () => {
        x: 77.017,
        y: 79,
        strokeWidth: 2,
-        points: [point(0, 0)],
+        points: [[0, 0]],
        label: {
          text: "Friendship",
          fontSize: 20,
@@ -53,7 +53,6 @@ import { randomId } from "../random";
 import { syncInvalidIndices } from "../fractionalIndex";
 import { getLineHeight } from "../fonts";
 import { isArrowElement } from "../element/typeChecks";
-import { point, type LocalPoint } from "../../math";

 export type ValidLinearElement = {
  type: "arrow" | "line";
@@ -418,7 +417,7 @@ const bindLinearElementToElement = (
  const endPointIndex = linearElement.points.length - 1;
  const delta = 0.5;

-  const newPoints = cloneJSON<readonly LocalPoint[]>(linearElement.points);
+  const newPoints = cloneJSON(linearElement.points) as [number, number][];

  // left to right so shift the arrow towards right
  if (
@@ -536,7 +535,10 @@ export const convertToExcalidrawElements = (
        excalidrawElement = newLinearElement({
          width,
          height,
-          points: [point(0, 0), point(width, height)],
+          points: [
+            [0, 0],
+            [width, height],
+          ],
          ...element,
        });

@@ -549,7 +551,10 @@ export const convertToExcalidrawElements = (
          width,
          height,
          endArrowhead: "arrow",
-          points: [point(0, 0), point(width, height)],
+          points: [
+            [0, 0],
+            [width, height],
+          ],
          ...element,
          type: "arrow",
        });
@@ -1,8 +1,8 @@
-import * as GA from "../../math/ga/ga";
-import * as GAPoint from "../../math/ga/gapoints";
-import * as GADirection from "../../math/ga/gadirections";
-import * as GALine from "../../math/ga/galines";
-import * as GATransform from "../../math/ga/gatransforms";
+import * as GA from "../ga";
+import * as GAPoint from "../gapoints";
+import * as GADirection from "../gadirections";
+import * as GALine from "../galines";
+import * as GATransform from "../gatransforms";

 import type {
  ExcalidrawBindableElement,
@@ -10,6 +10,7 @@ import type {
  ExcalidrawRectangleElement,
  ExcalidrawDiamondElement,
  ExcalidrawEllipseElement,
+  ExcalidrawFreeDrawElement,
  ExcalidrawImageElement,
  ExcalidrawFrameLikeElement,
  ExcalidrawIframeLikeElement,
@@ -25,12 +26,11 @@ import type {
  ExcalidrawElbowArrowElement,
  FixedPoint,
  SceneElementsMap,
-  ExcalidrawRectanguloidElement,
 } from "./types";

 import type { Bounds } from "./bounds";
-import { getCenterForBounds, getElementAbsoluteCoords } from "./bounds";
-import type { AppState } from "../types";
+import { getElementAbsoluteCoords } from "./bounds";
+import type { AppState, Point } from "../types";
 import { isPointOnShape } from "../../utils/collision";
 import { getElementAtPosition } from "../scene";
 import {
@@ -41,7 +41,6 @@ import {
  isElbowArrow,
  isFrameLikeElement,
  isLinearElement,
-  isRectangularElement,
  isTextElement,
 } from "./typeChecks";
 import type { ElementUpdate } from "./mutateElement";
@@ -51,7 +50,17 @@ import { LinearElementEditor } from "./linearElementEditor";
 import { arrayToMap, tupleToCoors } from "../utils";
 import { KEYS } from "../keys";
 import { getBoundTextElement, handleBindTextResize } from "./textElement";
-import { aabbForElement, getElementShape, pointInsideBounds } from "../shapes";
+import { getElementShape } from "../shapes";
+import {
+  aabbForElement,
+  clamp,
+  distanceSq2d,
+  getCenterForBounds,
+  getCenterForElement,
+  pointInsideBounds,
+  pointToVector,
+  rotatePoint,
+} from "../math";
 import {
  compareHeading,
  HEADING_DOWN,
@@ -62,18 +71,6 @@ import {
  vectorToHeading,
  type Heading,
 } from "./heading";
-import type { LocalPoint, Radians } from "../../math";
-import {
-  lineSegment,
-  point,
-  pointRotateRads,
-  type GlobalPoint,
-  vectorFromPoint,
-  pointFromPair,
-  pointDistanceSq,
-  clamp,
-} from "../../math";
-import { segmentIntersectRectangleElement } from "../../utils/geometry/shape";

 export type SuggestedBinding =
  | NonDeleted<ExcalidrawBindableElement>
@@ -650,7 +647,7 @@ export const updateBoundElements = (
        update,
      ): update is NonNullable<{
        index: number;
-        point: LocalPoint;
+        point: Point;
        isDragging?: boolean;
      }> => update !== null,
    );
@@ -696,14 +693,14 @@ const getSimultaneouslyUpdatedElementIds = (
 };

 export const getHeadingForElbowArrowSnap = (
-  p: Readonly<GlobalPoint>,
-  otherPoint: Readonly<GlobalPoint>,
+  point: Readonly<Point>,
+  otherPoint: Readonly<Point>,
  bindableElement: ExcalidrawBindableElement | undefined | null,
  aabb: Bounds | undefined | null,
  elementsMap: ElementsMap,
-  origPoint: GlobalPoint,
+  origPoint: Point,
 ): Heading => {
-  const otherPointHeading = vectorToHeading(vectorFromPoint(otherPoint, p));
+  const otherPointHeading = vectorToHeading(pointToVector(otherPoint, point));

  if (!bindableElement || !aabb) {
    return otherPointHeading;
@@ -717,23 +714,17 @@ export const getHeadingForElbowArrowSnap = (

  if (!distance) {
    return vectorToHeading(
-      vectorFromPoint(
-        p,
-        point<GlobalPoint>(
-          bindableElement.x + bindableElement.width / 2,
-          bindableElement.y + bindableElement.height / 2,
-        ),
-      ),
+      pointToVector(point, getCenterForElement(bindableElement)),
    );
  }

-  const pointHeading = headingForPointFromElement(bindableElement, aabb, p);
+  const pointHeading = headingForPointFromElement(bindableElement, aabb, point);

  return pointHeading;
 };

 const getDistanceForBinding = (
-  point: Readonly<GlobalPoint>,
+  point: Readonly<Point>,
  bindableElement: ExcalidrawBindableElement,
  elementsMap: ElementsMap,
 ) => {
@@ -752,87 +743,92 @@ const getDistanceForBinding = (
 };

 export const bindPointToSnapToElementOutline = (
-  p: Readonly<GlobalPoint>,
-  otherPoint: Readonly<GlobalPoint>,
+  point: Readonly<Point>,
+  otherPoint: Readonly<Point>,
  bindableElement: ExcalidrawBindableElement | undefined,
  elementsMap: ElementsMap,
-): GlobalPoint => {
+): Point => {
  const aabb = bindableElement && aabbForElement(bindableElement);

  if (bindableElement && aabb) {
-    // TODO: Dirty hacks until tangents are properly calculated
-    const heading = headingForPointFromElement(bindableElement, aabb, p);
+    // TODO: Dirty hack until tangents are properly calculated
    const intersections = [
-      ...(intersectElementWithLine(
+      ...intersectElementWithLine(
        bindableElement,
-        point(p[0], p[1] - 2 * bindableElement.height),
-        point(p[0], p[1] + 2 * bindableElement.height),
+        [point[0], point[1] - 2 * bindableElement.height],
+        [point[0], point[1] + 2 * bindableElement.height],
        FIXED_BINDING_DISTANCE,
        elementsMap,
-      ) ?? []),
-      ...(intersectElementWithLine(
+      ),
+      ...intersectElementWithLine(
        bindableElement,
-        point(p[0] - 2 * bindableElement.width, p[1]),
-        point(p[0] + 2 * bindableElement.width, p[1]),
+        [point[0] - 2 * bindableElement.width, point[1]],
+        [point[0] + 2 * bindableElement.width, point[1]],
        FIXED_BINDING_DISTANCE,
        elementsMap,
-      ) ?? []),
-    ];
+      ),
+    ].map((i) =>
+      distanceToBindableElement(bindableElement, i, elementsMap) >
+      Math.min(bindableElement.width, bindableElement.height) / 2
+        ? ([-1 * i[0], -1 * i[1]] as Point)
+        : i,
+    );

+    const heading = headingForPointFromElement(bindableElement, aabb, point);
    const isVertical =
      compareHeading(heading, HEADING_LEFT) ||
      compareHeading(heading, HEADING_RIGHT);
-    const dist = Math.abs(
-      distanceToBindableElement(bindableElement, p, elementsMap),
-    );
+    const dist = distanceToBindableElement(bindableElement, point, elementsMap);
    const isInner = isVertical
      ? dist < bindableElement.width * -0.1
      : dist < bindableElement.height * -0.1;

-    intersections.sort((a, b) => pointDistanceSq(a, p) - pointDistanceSq(b, p));
+    intersections.sort(
+      (a, b) => distanceSq2d(a, point) - distanceSq2d(b, point),
+    );

    return isInner
      ? headingToMidBindPoint(otherPoint, bindableElement, aabb)
      : intersections.filter((i) =>
          isVertical
-            ? Math.abs(p[1] - i[1]) < 0.1
-            : Math.abs(p[0] - i[0]) < 0.1,
+            ? Math.abs(point[1] - i[1]) < 0.1
+            : Math.abs(point[0] - i[0]) < 0.1,
        )[0] ?? point;
  }

-  return p;
+  return point;
 };

 const headingToMidBindPoint = (
-  p: GlobalPoint,
+  point: Point,
  bindableElement: ExcalidrawBindableElement,
  aabb: Bounds,
-): GlobalPoint => {
+): Point => {
  const center = getCenterForBounds(aabb);
-  const heading = vectorToHeading(vectorFromPoint(p, center));
+  const heading = vectorToHeading(pointToVector(point, center));

  switch (true) {
    case compareHeading(heading, HEADING_UP):
-      return pointRotateRads(
-        point((aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]),
+      return rotatePoint(
+        [(aabb[0] + aabb[2]) / 2 + 0.1, aabb[1]],
        center,
        bindableElement.angle,
      );
    case compareHeading(heading, HEADING_RIGHT):
-      return pointRotateRads(
-        point(aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1),
+      return rotatePoint(
+        [aabb[2], (aabb[1] + aabb[3]) / 2 + 0.1],
        center,
        bindableElement.angle,
      );
    case compareHeading(heading, HEADING_DOWN):
-      return pointRotateRads(
-        point((aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]),
+      return rotatePoint(
+        [(aabb[0] + aabb[2]) / 2 - 0.1, aabb[3]],
        center,
        bindableElement.angle,
      );
    default:
-      return pointRotateRads(
-        point(aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1),
+      return rotatePoint(
+        [aabb[0], (aabb[1] + aabb[3]) / 2 - 0.1],
        center,
        bindableElement.angle,
      );
@@ -841,25 +837,22 @@ const headingToMidBindPoint = (

 export const avoidRectangularCorner = (
  element: ExcalidrawBindableElement,
-  p: GlobalPoint,
-): GlobalPoint => {
-  const center = point<GlobalPoint>(
-    element.x + element.width / 2,
-    element.y + element.height / 2,
-  );
-  const nonRotatedPoint = pointRotateRads(p, center, -element.angle as Radians);
+  p: Point,
+): Point => {
+  const center = getCenterForElement(element);
+  const nonRotatedPoint = rotatePoint(p, center, -element.angle);

  if (nonRotatedPoint[0] < element.x && nonRotatedPoint[1] < element.y) {
    // Top left
    if (nonRotatedPoint[1] - element.y > -FIXED_BINDING_DISTANCE) {
-      return pointRotateRads<GlobalPoint>(
-        point(element.x - FIXED_BINDING_DISTANCE, element.y),
+      return rotatePoint(
+        [element.x - FIXED_BINDING_DISTANCE, element.y],
        center,
        element.angle,
      );
    }
-    return pointRotateRads(
-      point(element.x, element.y - FIXED_BINDING_DISTANCE),
+    return rotatePoint(
+      [element.x, element.y - FIXED_BINDING_DISTANCE],
      center,
      element.angle,
    );
@@ -869,14 +862,14 @@ export const avoidRectangularCorner = (
  ) {
    // Bottom left
    if (nonRotatedPoint[0] - element.x > -FIXED_BINDING_DISTANCE) {
-      return pointRotateRads(
-        point(element.x, element.y + element.height + FIXED_BINDING_DISTANCE),
+      return rotatePoint(
+        [element.x, element.y + element.height + FIXED_BINDING_DISTANCE],
        center,
        element.angle,
      );
    }
-    return pointRotateRads(
-      point(element.x - FIXED_BINDING_DISTANCE, element.y + element.height),
+    return rotatePoint(
+      [element.x - FIXED_BINDING_DISTANCE, element.y + element.height],
      center,
      element.angle,
    );
@@ -889,20 +882,20 @@ export const avoidRectangularCorner = (
      nonRotatedPoint[0] - element.x <
      element.width + FIXED_BINDING_DISTANCE
    ) {
-      return pointRotateRads(
-        point(
+      return rotatePoint(
+        [
          element.x + element.width,
          element.y + element.height + FIXED_BINDING_DISTANCE,
-        ),
+        ],
        center,
        element.angle,
      );
    }
-    return pointRotateRads(
-      point(
+    return rotatePoint(
+      [
        element.x + element.width + FIXED_BINDING_DISTANCE,
        element.y + element.height,
-      ),
+      ],
      center,
      element.angle,
    );
@@ -915,14 +908,14 @@ export const avoidRectangularCorner = (
      nonRotatedPoint[0] - element.x <
      element.width + FIXED_BINDING_DISTANCE
    ) {
-      return pointRotateRads(
-        point(element.x + element.width, element.y - FIXED_BINDING_DISTANCE),
+      return rotatePoint(
+        [element.x + element.width, element.y - FIXED_BINDING_DISTANCE],
        center,
        element.angle,
      );
    }
-    return pointRotateRads(
-      point(element.x + element.width + FIXED_BINDING_DISTANCE, element.y),
+    return rotatePoint(
+      [element.x + element.width + FIXED_BINDING_DISTANCE, element.y],
      center,
      element.angle,
    );
@@ -933,12 +926,12 @@ export const avoidRectangularCorner = (

 export const snapToMid = (
  element: ExcalidrawBindableElement,
-  p: GlobalPoint,
+  p: Point,
  tolerance: number = 0.05,
-): GlobalPoint => {
+): Point => {
  const { x, y, width, height, angle } = element;
-  const center = point<GlobalPoint>(x + width / 2 - 0.1, y + height / 2 - 0.1);
-  const nonRotated = pointRotateRads(p, center, -angle as Radians);
+  const center = [x + width / 2 - 0.1, y + height / 2 - 0.1] as Point;
+  const nonRotated = rotatePoint(p, center, -angle);

  // snap-to-center point is adaptive to element size, but we don't want to go
  // above and below certain px distance
@@ -951,30 +944,22 @@ export const snapToMid = (
    nonRotated[1] < center[1] + verticalThrehsold
  ) {
    // LEFT
-    return pointRotateRads(
-      point(x - FIXED_BINDING_DISTANCE, center[1]),
-      center,
-      angle,
-    );
+    return rotatePoint([x - FIXED_BINDING_DISTANCE, center[1]], center, angle);
  } else if (
    nonRotated[1] <= y + height / 2 &&
    nonRotated[0] > center[0] - horizontalThrehsold &&
    nonRotated[0] < center[0] + horizontalThrehsold
  ) {
    // TOP
-    return pointRotateRads(
-      point(center[0], y - FIXED_BINDING_DISTANCE),
-      center,
-      angle,
-    );
+    return rotatePoint([center[0], y - FIXED_BINDING_DISTANCE], center, angle);
  } else if (
    nonRotated[0] >= x + width / 2 &&
    nonRotated[1] > center[1] - verticalThrehsold &&
    nonRotated[1] < center[1] + verticalThrehsold
  ) {
    // RIGHT
-    return pointRotateRads(
-      point(x + width + FIXED_BINDING_DISTANCE, center[1]),
+    return rotatePoint(
+      [x + width + FIXED_BINDING_DISTANCE, center[1]],
      center,
      angle,
    );
@@ -984,8 +969,8 @@ export const snapToMid = (
    nonRotated[0] < center[0] + horizontalThrehsold
  ) {
    // DOWN
-    return pointRotateRads(
-      point(center[0], y + height + FIXED_BINDING_DISTANCE),
+    return rotatePoint(
+      [center[0], y + height + FIXED_BINDING_DISTANCE],
      center,
      angle,
    );
@@ -1000,7 +985,7 @@ const updateBoundPoint = (
  binding: PointBinding | null | undefined,
  bindableElement: ExcalidrawBindableElement,
  elementsMap: ElementsMap,
-): LocalPoint | null => {
+): Point | null => {
  if (
    binding == null ||
    // We only need to update the other end if this is a 2 point line element
@@ -1015,22 +1000,22 @@ const updateBoundPoint = (

  if (isElbowArrow(linearElement)) {
    const fixedPoint =
-      normalizeFixedPoint(binding.fixedPoint) ??
+      binding.fixedPoint ??
      calculateFixedPointForElbowArrowBinding(
        linearElement,
        bindableElement,
        startOrEnd === "startBinding" ? "start" : "end",
        elementsMap,
      ).fixedPoint;
-    const globalMidPoint = point<GlobalPoint>(
+    const globalMidPoint = [
      bindableElement.x + bindableElement.width / 2,
      bindableElement.y + bindableElement.height / 2,
-    );
-    const global = point<GlobalPoint>(
+    ] as Point;
+    const global = [
      bindableElement.x + fixedPoint[0] * bindableElement.width,
      bindableElement.y + fixedPoint[1] * bindableElement.height,
-    );
-    const rotatedGlobal = pointRotateRads(
+    ] as Point;
+    const rotatedGlobal = rotatePoint(
      global,
      globalMidPoint,
      bindableElement.angle,
@@ -1056,7 +1041,7 @@ const updateBoundPoint = (
    elementsMap,
  );

-  let newEdgePoint: GlobalPoint;
+  let newEdgePoint: Point;

  // The linear element was not originally pointing inside the bound shape,
  // we can point directly at the focus point
@@ -1070,7 +1055,7 @@ const updateBoundPoint = (
      binding.gap,
      elementsMap,
    );
-    if (!intersections || intersections.length === 0) {
+    if (intersections.length === 0) {
      // This should never happen, since focusPoint should always be
      // inside the element, but just in case, bail out
      newEdgePoint = focusPointAbsolute;
@@ -1117,23 +1102,23 @@ export const calculateFixedPointForElbowArrowBinding = (
    hoveredElement,
    elementsMap,
  );
-  const globalMidPoint = point(
+  const globalMidPoint = [
    bounds[0] + (bounds[2] - bounds[0]) / 2,
    bounds[1] + (bounds[3] - bounds[1]) / 2,
-  );
-  const nonRotatedSnappedGlobalPoint = pointRotateRads(
+  ] as Point;
+  const nonRotatedSnappedGlobalPoint = rotatePoint(
    snappedPoint,
    globalMidPoint,
-    -hoveredElement.angle as Radians,
-  );
+    -hoveredElement.angle,
+  ) as Point;

  return {
-    fixedPoint: normalizeFixedPoint([
+    fixedPoint: [
      (nonRotatedSnappedGlobalPoint[0] - hoveredElement.x) /
        hoveredElement.width,
      (nonRotatedSnappedGlobalPoint[1] - hoveredElement.y) /
        hoveredElement.height,
-    ]),
+    ] as [number, number],
  };
 };

@@ -1336,9 +1321,8 @@ export const bindingBorderTest = (
  const threshold = maxBindingGap(element, element.width, element.height);
  const shape = getElementShape(element, elementsMap);
  return (
-    isPointOnShape(point(x, y), shape, threshold) ||
-    (fullShape === true &&
-      pointInsideBounds(point(x, y), aabbForElement(element)))
+    isPointOnShape([x, y], shape, threshold) ||
+    (fullShape === true && pointInsideBounds([x, y], aabbForElement(element)))
  );
 };

@@ -1356,7 +1340,7 @@ export const maxBindingGap = (

 export const distanceToBindableElement = (
  element: ExcalidrawBindableElement,
-  point: GlobalPoint,
+  point: Point,
  elementsMap: ElementsMap,
 ): number => {
  switch (element.type) {
@@ -1376,13 +1360,19 @@ export const distanceToBindableElement = (
 };

 const distanceToRectangle = (
-  element: ExcalidrawRectanguloidElement,
-  p: GlobalPoint,
+  element:
+    | ExcalidrawRectangleElement
+    | ExcalidrawTextElement
+    | ExcalidrawFreeDrawElement
+    | ExcalidrawImageElement
+    | ExcalidrawIframeLikeElement
+    | ExcalidrawFrameLikeElement,
+  point: Point,
  elementsMap: ElementsMap,
 ): number => {
  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
    element,
-    p,
+    point,
    elementsMap,
  );
  return Math.max(
@@ -1393,7 +1383,7 @@ const distanceToRectangle = (

 const distanceToDiamond = (
  element: ExcalidrawDiamondElement,
-  point: GlobalPoint,
+  point: Point,
  elementsMap: ElementsMap,
 ): number => {
  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
@@ -1407,7 +1397,7 @@ const distanceToDiamond = (

 const distanceToEllipse = (
  element: ExcalidrawEllipseElement,
-  point: GlobalPoint,
+  point: Point,
  elementsMap: ElementsMap,
 ): number => {
  const [pointRel, tangent] = ellipseParamsForTest(element, point, elementsMap);
@@ -1416,7 +1406,7 @@ const distanceToEllipse = (

 const ellipseParamsForTest = (
  element: ExcalidrawEllipseElement,
-  point: GlobalPoint,
+  point: Point,
  elementsMap: ElementsMap,
 ): [GA.Point, GA.Line] => {
  const [, pointRel, hwidth, hheight] = pointRelativeToElement(
@@ -1478,7 +1468,7 @@ const ellipseParamsForTest = (
 // so we only need to perform hit tests for the positive quadrant.
 const pointRelativeToElement = (
  element: ExcalidrawElement,
-  pointTuple: GlobalPoint,
+  pointTuple: Point,
  elementsMap: ElementsMap,
 ): [GA.Point, GA.Point, number, number] => {
  const point = GAPoint.from(pointTuple);
@@ -1527,9 +1517,9 @@ const coordsCenter = (
 const determineFocusDistance = (
  element: ExcalidrawBindableElement,
  // Point on the line, in absolute coordinates
-  a: GlobalPoint,
+  a: Point,
  // Another point on the line, in absolute coordinates (closer to element)
-  b: GlobalPoint,
+  b: Point,
  elementsMap: ElementsMap,
 ): number => {
  const relateToCenter = relativizationToElementCenter(element, elementsMap);
@@ -1570,13 +1560,13 @@ const determineFocusPoint = (
  // The oriented, relative distance from the center of `element` of the
  // returned focusPoint
  focus: number,
-  adjecentPoint: GlobalPoint,
+  adjecentPoint: Point,
  elementsMap: ElementsMap,
-): GlobalPoint => {
+): Point => {
  if (focus === 0) {
    const [x1, y1, x2, y2] = getElementAbsoluteCoords(element, elementsMap);
    const center = coordsCenter(x1, y1, x2, y2);
-    return pointFromPair(GAPoint.toTuple(center));
+    return GAPoint.toTuple(center);
  }
  const relateToCenter = relativizationToElementCenter(element, elementsMap);
  const adjecentPointRel = GATransform.apply(
@@ -1600,9 +1590,7 @@ const determineFocusPoint = (
      point = findFocusPointForEllipse(element, focus, adjecentPointRel);
      break;
  }
-  return pointFromPair(
-    GAPoint.toTuple(GATransform.apply(reverseRelateToCenter, point)),
-  );
+  return GAPoint.toTuple(GATransform.apply(reverseRelateToCenter, point));
 };

 // Returns 2 or 0 intersection points between line going through `a` and `b`
@@ -1610,17 +1598,13 @@ const determineFocusPoint = (
 const intersectElementWithLine = (
  element: ExcalidrawBindableElement,
  // Point on the line, in absolute coordinates
-  a: GlobalPoint,
+  a: Point,
  // Another point on the line, in absolute coordinates
-  b: GlobalPoint,
+  b: Point,
  // If given, the element is inflated by this value
  gap: number = 0,
  elementsMap: ElementsMap,
-): GlobalPoint[] | undefined => {
-  if (isRectangularElement(element)) {
-    return segmentIntersectRectangleElement(element, lineSegment(a, b), gap);
-  }
-
+): Point[] => {
  const relateToCenter = relativizationToElementCenter(element, elementsMap);
  const aRel = GATransform.apply(relateToCenter, GAPoint.from(a));
  const bRel = GATransform.apply(relateToCenter, GAPoint.from(b));
@@ -1632,14 +1616,8 @@ const intersectElementWithLine = (
    aRel,
    gap,
  );
-  return intersections.map(
-    (point) =>
-      pointFromPair(
-        GAPoint.toTuple(GATransform.apply(reverseRelateToCenter, point)),
-      ),
-    // pointFromArray(
-    //   ,
-    // ),
+  return intersections.map((point) =>
+    GAPoint.toTuple(GATransform.apply(reverseRelateToCenter, point)),
  );
 };

@@ -2192,18 +2170,11 @@ export class BindableElement {
 export const getGlobalFixedPointForBindableElement = (
  fixedPointRatio: [number, number],
  element: ExcalidrawBindableElement,
-): GlobalPoint => {
-  const [fixedX, fixedY] = normalizeFixedPoint(fixedPointRatio);
-
-  return pointRotateRads(
-    point(
-      element.x + element.width * fixedX,
-      element.y + element.height * fixedY,
-    ),
-    point<GlobalPoint>(
-      element.x + element.width / 2,
-      element.y + element.height / 2,
-    ),
+) => {
+  const [fixedX, fixedY] = fixedPointRatio;
+  return rotatePoint(
+    [element.x + element.width * fixedX, element.y + element.height * fixedY],
+    getCenterForElement(element),
    element.angle,
  );
 };
@@ -2211,7 +2182,7 @@ export const getGlobalFixedPointForBindableElement = (
 const getGlobalFixedPoints = (
  arrow: ExcalidrawElbowArrowElement,
  elementsMap: ElementsMap,
-): [GlobalPoint, GlobalPoint] => {
+) => {
  const startElement =
    arrow.startBinding &&
    (elementsMap.get(arrow.startBinding.elementId) as
@@ -2222,26 +2193,23 @@ const getGlobalFixedPoints = (
    (elementsMap.get(arrow.endBinding.elementId) as
      | ExcalidrawBindableElement
      | undefined);
-  const startPoint =
+  const startPoint: Point =
    startElement && arrow.startBinding
      ? getGlobalFixedPointForBindableElement(
          arrow.startBinding.fixedPoint,
          startElement as ExcalidrawBindableElement,
        )
-      : point<GlobalPoint>(
-          arrow.x + arrow.points[0][0],
-          arrow.y + arrow.points[0][1],
-        );
-  const endPoint =
+      : [arrow.x + arrow.points[0][0], arrow.y + arrow.points[0][1]];
+  const endPoint: Point =
    endElement && arrow.endBinding
      ? getGlobalFixedPointForBindableElement(
          arrow.endBinding.fixedPoint,
          endElement as ExcalidrawBindableElement,
        )
-      : point<GlobalPoint>(
+      : [
          arrow.x + arrow.points[arrow.points.length - 1][0],
          arrow.y + arrow.points[arrow.points.length - 1][1],
-        );
+        ];

  return [startPoint, endPoint];
 };
@@ -2257,16 +2225,3 @@ export const getArrowLocalFixedPoints = (
    LinearElementEditor.pointFromAbsoluteCoords(arrow, endPoint, elementsMap),
  ];
 };
-
-export const normalizeFixedPoint = <T extends FixedPoint | null>(
-  fixedPoint: T,
-): T extends null ? null : FixedPoint => {
-  // Do not allow a precise 0.5 for fixed point ratio
-  // to avoid jumping arrow heading due to floating point imprecision
-  if (fixedPoint && (fixedPoint[0] === 0.5 || fixedPoint[1] === 0.5)) {
-    return fixedPoint.map((ratio) =>
-      ratio === 0.5 ? 0.5001 : ratio,
-    ) as T extends null ? null : FixedPoint;
-  }
-  return fixedPoint as any as T extends null ? null : FixedPoint;
-};
@@ -1,5 +1,3 @@
-import type { LocalPoint } from "../../math";
-import { point } from "../../math";
 import { ROUNDNESS } from "../constants";
 import { arrayToMap } from "../utils";
 import { getElementAbsoluteCoords, getElementBounds } from "./bounds";
@@ -125,9 +123,9 @@ describe("getElementBounds", () => {
        a: 0.6447741904932416,
      }),
      points: [
-        point<LocalPoint>(0, 0),
-        point<LocalPoint>(67.33984375, 92.48828125),
-        point<LocalPoint>(-102.7890625, 52.15625),
+        [0, 0] as [number, number],
+        [67.33984375, 92.48828125] as [number, number],
+        [-102.7890625, 52.15625] as [number, number],
      ],
    } as ExcalidrawLinearElement;

@@ -7,10 +7,10 @@ import type {
  ExcalidrawTextElementWithContainer,
  ElementsMap,
 } from "./types";
+import { distance2d, rotate, rotatePoint } from "../math";
 import rough from "roughjs/bin/rough";
-import type { Point as RoughPoint } from "roughjs/bin/geometry";
 import type { Drawable, Op } from "roughjs/bin/core";
-import type { AppState } from "../types";
+import type { AppState, Point } from "../types";
 import { generateRoughOptions } from "../scene/Shape";
 import {
  isArrowElement,
@@ -22,24 +22,9 @@ import {
 import { rescalePoints } from "../points";
 import { getBoundTextElement, getContainerElement } from "./textElement";
 import { LinearElementEditor } from "./linearElementEditor";
-import { ShapeCache } from "../scene/ShapeCache";
-import { arrayToMap, invariant } from "../utils";
-import type {
-  Degrees,
-  GlobalPoint,
-  LineSegment,
-  LocalPoint,
-  Radians,
-} from "../../math";
-import {
-  degreesToRadians,
-  lineSegment,
-  point,
-  pointDistance,
-  pointFromArray,
-  pointRotateRads,
-} from "../../math";
 import type { Mutable } from "../utility-types";
+import { ShapeCache } from "../scene/ShapeCache";
+import { arrayToMap } from "../utils";

 export type RectangleBox = {
  x: number;
@@ -112,11 +97,7 @@ export class ElementBounds {
    if (isFreeDrawElement(element)) {
      const [minX, minY, maxX, maxY] = getBoundsFromPoints(
        element.points.map(([x, y]) =>
-          pointRotateRads(
-            point(x, y),
-            point(cx - element.x, cy - element.y),
-            element.angle,
-          ),
+          rotate(x, y, cx - element.x, cy - element.y, element.angle),
        ),
      );

@@ -129,26 +110,10 @@ export class ElementBounds {
    } else if (isLinearElement(element)) {
      bounds = getLinearElementRotatedBounds(element, cx, cy, elementsMap);
    } else if (element.type === "diamond") {
-      const [x11, y11] = pointRotateRads(
-        point(cx, y1),
-        point(cx, cy),
-        element.angle,
-      );
-      const [x12, y12] = pointRotateRads(
-        point(cx, y2),
-        point(cx, cy),
-        element.angle,
-      );
-      const [x22, y22] = pointRotateRads(
-        point(x1, cy),
-        point(cx, cy),
-        element.angle,
-      );
-      const [x21, y21] = pointRotateRads(
-        point(x2, cy),
-        point(cx, cy),
-        element.angle,
-      );
+      const [x11, y11] = rotate(cx, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate(cx, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate(x1, cy, cx, cy, element.angle);
+      const [x21, y21] = rotate(x2, cy, cx, cy, element.angle);
      const minX = Math.min(x11, x12, x22, x21);
      const minY = Math.min(y11, y12, y22, y21);
      const maxX = Math.max(x11, x12, x22, x21);
@@ -163,26 +128,10 @@ export class ElementBounds {
      const hh = Math.hypot(h * cos, w * sin);
      bounds = [cx - ww, cy - hh, cx + ww, cy + hh];
    } else {
-      const [x11, y11] = pointRotateRads(
-        point(x1, y1),
-        point(cx, cy),
-        element.angle,
-      );
-      const [x12, y12] = pointRotateRads(
-        point(x1, y2),
-        point(cx, cy),
-        element.angle,
-      );
-      const [x22, y22] = pointRotateRads(
-        point(x2, y2),
-        point(cx, cy),
-        element.angle,
-      );
-      const [x21, y21] = pointRotateRads(
-        point(x2, y1),
-        point(cx, cy),
-        element.angle,
-      );
+      const [x11, y11] = rotate(x1, y1, cx, cy, element.angle);
+      const [x12, y12] = rotate(x1, y2, cx, cy, element.angle);
+      const [x22, y22] = rotate(x2, y2, cx, cy, element.angle);
+      const [x21, y21] = rotate(x2, y1, cx, cy, element.angle);
      const minX = Math.min(x11, x12, x22, x21);
      const minY = Math.min(y11, y12, y22, y21);
      const maxX = Math.max(x11, x12, x22, x21);
@@ -216,18 +165,18 @@ export const getElementAbsoluteCoords = (
      ? getContainerElement(element, elementsMap)
      : null;
    if (isArrowElement(container)) {
-      const { x, y } = LinearElementEditor.getBoundTextElementPosition(
+      const coords = LinearElementEditor.getBoundTextElementPosition(
        container,
        element as ExcalidrawTextElementWithContainer,
        elementsMap,
      );
      return [
-        x,
-        y,
-        x + element.width,
-        y + element.height,
-        x + element.width / 2,
-        y + element.height / 2,
+        coords.x,
+        coords.y,
+        coords.x + element.width,
+        coords.y + element.height,
+        coords.x + element.width / 2,
+        coords.y + element.height / 2,
      ];
    }
  }
@@ -249,40 +198,38 @@ export const getElementAbsoluteCoords = (
 export const getElementLineSegments = (
  element: ExcalidrawElement,
  elementsMap: ElementsMap,
-): LineSegment<GlobalPoint>[] => {
+): [Point, Point][] => {
  const [x1, y1, x2, y2, cx, cy] = getElementAbsoluteCoords(
    element,
    elementsMap,
  );

-  const center: GlobalPoint = point(cx, cy);
+  const center: Point = [cx, cy];

  if (isLinearElement(element) || isFreeDrawElement(element)) {
-    const segments: LineSegment<GlobalPoint>[] = [];
+    const segments: [Point, Point][] = [];

    let i = 0;

    while (i < element.points.length - 1) {
-      segments.push(
-        lineSegment(
-          pointRotateRads(
-            point(
-              element.points[i][0] + element.x,
-              element.points[i][1] + element.y,
-            ),
-            center,
-            element.angle,
-          ),
-          pointRotateRads(
-            point(
-              element.points[i + 1][0] + element.x,
-              element.points[i + 1][1] + element.y,
-            ),
-            center,
-            element.angle,
-          ),
+      segments.push([
+        rotatePoint(
+          [
+            element.points[i][0] + element.x,
+            element.points[i][1] + element.y,
+          ] as Point,
+          center,
+          element.angle,
        ),
-      );
+        rotatePoint(
+          [
+            element.points[i + 1][0] + element.x,
+            element.points[i + 1][1] + element.y,
+          ] as Point,
+          center,
+          element.angle,
+        ),
+      ]);
      i++;
    }

@@ -299,40 +246,40 @@ export const getElementLineSegments = (
      [cx, y2],
      [x1, cy],
      [x2, cy],
-    ] as GlobalPoint[]
-  ).map((point) => pointRotateRads(point, center, element.angle));
+    ] as Point[]
+  ).map((point) => rotatePoint(point, center, element.angle));

  if (element.type === "diamond") {
    return [
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e),
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
    ];
  }

  if (element.type === "ellipse") {
    return [
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e),
-      lineSegment(n, w),
-      lineSegment(n, e),
-      lineSegment(s, w),
-      lineSegment(s, e),
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
+      [n, w],
+      [n, e],
+      [s, w],
+      [s, e],
    ];
  }

  return [
-    lineSegment(nw, ne),
-    lineSegment(sw, se),
-    lineSegment(nw, sw),
-    lineSegment(ne, se),
-    lineSegment(nw, e),
-    lineSegment(sw, e),
-    lineSegment(ne, w),
-    lineSegment(se, w),
+    [nw, ne],
+    [sw, se],
+    [nw, sw],
+    [ne, se],
+    [nw, e],
+    [sw, e],
+    [ne, w],
+    [se, w],
  ];
 };

@@ -439,10 +386,10 @@ const solveQuadratic = (
 };

 const getCubicBezierCurveBound = (
-  p0: GlobalPoint,
-  p1: GlobalPoint,
-  p2: GlobalPoint,
-  p3: GlobalPoint,
+  p0: Point,
+  p1: Point,
+  p2: Point,
+  p3: Point,
 ): Bounds => {
  const solX = solveQuadratic(p0[0], p1[0], p2[0], p3[0]);
  const solY = solveQuadratic(p0[1], p1[1], p2[1], p3[1]);
@@ -468,9 +415,9 @@ const getCubicBezierCurveBound = (

 export const getMinMaxXYFromCurvePathOps = (
  ops: Op[],
-  transformXY?: (p: GlobalPoint) => GlobalPoint,
+  transformXY?: (x: number, y: number) => [number, number],
 ): Bounds => {
-  let currentP: GlobalPoint = point(0, 0);
+  let currentP: Point = [0, 0];

  const { minX, minY, maxX, maxY } = ops.reduce(
    (limits, { op, data }) => {
@@ -478,21 +425,19 @@ export const getMinMaxXYFromCurvePathOps = (
      // move, bcurveTo, lineTo, and curveTo
      if (op === "move") {
        // change starting point
-        const p: GlobalPoint | undefined = pointFromArray(data);
-        invariant(p != null, "Op data is not a point");
-        currentP = p;
+        currentP = data as unknown as Point;
        // move operation does not draw anything; so, it always
        // returns false
      } else if (op === "bcurveTo") {
-        const _p1 = point<GlobalPoint>(data[0], data[1]);
-        const _p2 = point<GlobalPoint>(data[2], data[3]);
-        const _p3 = point<GlobalPoint>(data[4], data[5]);
+        const _p1 = [data[0], data[1]] as Point;
+        const _p2 = [data[2], data[3]] as Point;
+        const _p3 = [data[4], data[5]] as Point;

-        const p1 = transformXY ? transformXY(_p1) : _p1;
-        const p2 = transformXY ? transformXY(_p2) : _p2;
-        const p3 = transformXY ? transformXY(_p3) : _p3;
+        const p1 = transformXY ? transformXY(..._p1) : _p1;
+        const p2 = transformXY ? transformXY(..._p2) : _p2;
+        const p3 = transformXY ? transformXY(..._p3) : _p3;

-        const p0 = transformXY ? transformXY(currentP) : currentP;
+        const p0 = transformXY ? transformXY(...currentP) : currentP;
        currentP = _p3;

        const [minX, minY, maxX, maxY] = getCubicBezierCurveBound(
@@ -562,14 +507,14 @@ export const getArrowheadSize = (arrowhead: Arrowhead): number => {
 };

 /** @returns number in degrees */
-export const getArrowheadAngle = (arrowhead: Arrowhead): Degrees => {
+export const getArrowheadAngle = (arrowhead: Arrowhead): number => {
  switch (arrowhead) {
    case "bar":
-      return 90 as Degrees;
+      return 90;
    case "arrow":
-      return 20 as Degrees;
+      return 20;
    default:
-      return 25 as Degrees;
+      return 25;
  }
 };

@@ -588,24 +533,19 @@ export const getArrowheadPoints = (
  const index = position === "start" ? 1 : ops.length - 1;

  const data = ops[index].data;
-
-  invariant(data.length === 6, "Op data length is not 6");
-
-  const p3 = point(data[4], data[5]);
-  const p2 = point(data[2], data[3]);
-  const p1 = point(data[0], data[1]);
+  const p3 = [data[4], data[5]] as Point;
+  const p2 = [data[2], data[3]] as Point;
+  const p1 = [data[0], data[1]] as Point;

  // We need to find p0 of the bezier curve.
  // It is typically the last point of the previous
  // curve; it can also be the position of moveTo operation.
  const prevOp = ops[index - 1];
-  let p0 = point(0, 0);
+  let p0: Point = [0, 0];
  if (prevOp.op === "move") {
-    const p = pointFromArray(prevOp.data);
-    invariant(p != null, "Op data is not a point");
-    p0 = p;
+    p0 = prevOp.data as unknown as Point;
  } else if (prevOp.op === "bcurveTo") {
-    p0 = point(prevOp.data[4], prevOp.data[5]);
+    p0 = [prevOp.data[4], prevOp.data[5]];
  }

  // B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3
@@ -670,16 +610,8 @@ export const getArrowheadPoints = (
  const angle = getArrowheadAngle(arrowhead);

  // Return points
-  const [x3, y3] = pointRotateRads(
-    point(xs, ys),
-    point(x2, y2),
-    ((-angle * Math.PI) / 180) as Radians,
-  );
-  const [x4, y4] = pointRotateRads(
-    point(xs, ys),
-    point(x2, y2),
-    degreesToRadians(angle),
-  );
+  const [x3, y3] = rotate(xs, ys, x2, y2, (-angle * Math.PI) / 180);
+  const [x4, y4] = rotate(xs, ys, x2, y2, (angle * Math.PI) / 180);

  if (arrowhead === "diamond" || arrowhead === "diamond_outline") {
    // point opposite to the arrowhead point
@@ -689,10 +621,12 @@ export const getArrowheadPoints = (
    if (position === "start") {
      const [px, py] = element.points.length > 1 ? element.points[1] : [0, 0];

-      [ox, oy] = pointRotateRads(
-        point(x2 + minSize * 2, y2),
-        point(x2, y2),
-        Math.atan2(py - y2, px - x2) as Radians,
+      [ox, oy] = rotate(
+        x2 + minSize * 2,
+        y2,
+        x2,
+        y2,
+        Math.atan2(py - y2, px - x2),
      );
    } else {
      const [px, py] =
@@ -700,10 +634,12 @@ export const getArrowheadPoints = (
          ? element.points[element.points.length - 2]
          : [0, 0];

-      [ox, oy] = pointRotateRads(
-        point(x2 - minSize * 2, y2),
-        point(x2, y2),
-        Math.atan2(y2 - py, x2 - px) as Radians,
+      [ox, oy] = rotate(
+        x2 - minSize * 2,
+        y2,
+        x2,
+        y2,
+        Math.atan2(y2 - py, x2 - px),
      );
    }

@@ -729,10 +665,7 @@ const generateLinearElementShape = (
    return "linearPath";
  })();

-  return generator[method](
-    element.points as Mutable<LocalPoint>[] as RoughPoint[],
-    options,
-  );
+  return generator[method](element.points as Mutable<Point>[], options);
 };

 const getLinearElementRotatedBounds = (
@@ -745,9 +678,11 @@ const getLinearElementRotatedBounds = (

  if (element.points.length < 2) {
    const [pointX, pointY] = element.points[0];
-    const [x, y] = pointRotateRads(
-      point(element.x + pointX, element.y + pointY),
-      point(cx, cy),
+    const [x, y] = rotate(
+      element.x + pointX,
+      element.y + pointY,
+      cx,
+      cy,
      element.angle,
    );

@@ -773,12 +708,8 @@ const getLinearElementRotatedBounds = (
  const cachedShape = ShapeCache.get(element)?.[0];
  const shape = cachedShape ?? generateLinearElementShape(element);
  const ops = getCurvePathOps(shape);
-  const transformXY = ([x, y]: GlobalPoint) =>
-    pointRotateRads<GlobalPoint>(
-      point(element.x + x, element.y + y),
-      point(cx, cy),
-      element.angle,
-    );
+  const transformXY = (x: number, y: number) =>
+    rotate(element.x + x, element.y + y, cx, cy, element.angle);
  const res = getMinMaxXYFromCurvePathOps(ops, transformXY);
  let coords: Bounds = [res[0], res[1], res[2], res[3]];
  if (boundTextElement) {
@@ -807,7 +738,6 @@ export const getElementBounds = (

 export const getCommonBounds = (
  elements: readonly ExcalidrawElement[],
-  elementsMap?: ElementsMap,
 ): Bounds => {
  if (!elements.length) {
    return [0, 0, 0, 0];
@@ -818,10 +748,10 @@ export const getCommonBounds = (
  let minY = Infinity;
  let maxY = -Infinity;

-  const _elementsMap = elementsMap || arrayToMap(elements);
+  const elementsMap = arrayToMap(elements);

  elements.forEach((element) => {
-    const [x1, y1, x2, y2] = getElementBounds(element, _elementsMap);
+    const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
    minX = Math.min(minX, x1);
    minY = Math.min(minY, y1);
    maxX = Math.max(maxX, x2);
@@ -930,10 +860,7 @@ export const getClosestElementBounds = (
  const elementsMap = arrayToMap(elements);
  elements.forEach((element) => {
    const [x1, y1, x2, y2] = getElementBounds(element, elementsMap);
-    const distance = pointDistance(
-      point((x1 + x2) / 2, (y1 + y2) / 2),
-      point(from.x, from.y),
-    );
+    const distance = distance2d((x1 + x2) / 2, (y1 + y2) / 2, from.x, from.y);

    if (distance < minDistance) {
      minDistance = distance;
@@ -988,9 +915,3 @@ export const getVisibleSceneBounds = ({
    -scrollY + height / zoom.value,
  ];
 };
-
-export const getCenterForBounds = (bounds: Bounds): GlobalPoint =>
-  point(
-    bounds[0] + (bounds[2] - bounds[0]) / 2,
-    bounds[1] + (bounds[3] - bounds[1]) / 2,
-  );
@@ -1,11 +1,14 @@
+import { isPathALoop, isPointWithinBounds } from "../math";
+
 import type {
  ElementsMap,
  ExcalidrawElement,
  ExcalidrawRectangleElement,
 } from "./types";
+
 import { getElementBounds } from "./bounds";
 import type { FrameNameBounds } from "../types";
-import type { GeometricShape } from "../../utils/geometry/shape";
+import type { Polygon, GeometricShape } from "../../utils/geometry/shape";
 import { getPolygonShape } from "../../utils/geometry/shape";
 import { isPointInShape, isPointOnShape } from "../../utils/collision";
 import { isTransparent } from "../utils";
@@ -15,9 +18,7 @@ import {
  isImageElement,
  isTextElement,
 } from "./typeChecks";
-import { getBoundTextShape, isPathALoop } from "../shapes";
-import type { GlobalPoint, LocalPoint, Polygon } from "../../math";
-import { isPointWithinBounds, point } from "../../math";
+import { getBoundTextShape } from "../shapes";

 export const shouldTestInside = (element: ExcalidrawElement) => {
  if (element.type === "arrow") {
@@ -41,36 +42,35 @@ export const shouldTestInside = (element: ExcalidrawElement) => {
  return isDraggableFromInside || isImageElement(element);
 };

-export type HitTestArgs<Point extends GlobalPoint | LocalPoint> = {
+export type HitTestArgs = {
  x: number;
  y: number;
  element: ExcalidrawElement;
-  shape: GeometricShape<Point>;
+  shape: GeometricShape;
  threshold?: number;
  frameNameBound?: FrameNameBounds | null;
 };

-export const hitElementItself = <Point extends GlobalPoint | LocalPoint>({
+export const hitElementItself = ({
  x,
  y,
  element,
  shape,
  threshold = 10,
  frameNameBound = null,
-}: HitTestArgs<Point>) => {
+}: HitTestArgs) => {
  let hit = shouldTestInside(element)
    ? // Since `inShape` tests STRICTLY againt the insides of a shape
      // we would need `onShape` as well to include the "borders"
-      isPointInShape(point(x, y), shape) ||
-      isPointOnShape(point(x, y), shape, threshold)
-    : isPointOnShape(point(x, y), shape, threshold);
+      isPointInShape([x, y], shape) || isPointOnShape([x, y], shape, threshold)
+    : isPointOnShape([x, y], shape, threshold);

  // hit test against a frame's name
  if (!hit && frameNameBound) {
-    hit = isPointInShape(point(x, y), {
+    hit = isPointInShape([x, y], {
      type: "polygon",
      data: getPolygonShape(frameNameBound as ExcalidrawRectangleElement)
-        .data as Polygon<Point>,
+        .data as Polygon,
    });
  }

@@ -89,13 +89,11 @@ export const hitElementBoundingBox = (
  y1 -= tolerance;
  x2 += tolerance;
  y2 += tolerance;
-  return isPointWithinBounds(point(x1, y1), point(x, y), point(x2, y2));
+  return isPointWithinBounds([x1, y1], [x, y], [x2, y2]);
 };

-export const hitElementBoundingBoxOnly = <
-  Point extends GlobalPoint | LocalPoint,
->(
-  hitArgs: HitTestArgs<Point>,
+export const hitElementBoundingBoxOnly = (
+  hitArgs: HitTestArgs,
  elementsMap: ElementsMap,
 ) => {
  return (
@@ -110,10 +108,10 @@ export const hitElementBoundingBoxOnly = <
  );
 };

-export const hitElementBoundText = <Point extends GlobalPoint | LocalPoint>(
+export const hitElementBoundText = (
  x: number,
  y: number,
-  textShape: GeometricShape<Point> | null,
+  textShape: GeometricShape | null,
 ): boolean => {
-  return !!textShape && isPointInShape(point(x, y), textShape);
+  return !!textShape && isPointInShape([x, y], textShape);
 };
@@ -4,13 +4,9 @@ import { getCommonBounds } from "./bounds";
 import { mutateElement } from "./mutateElement";
 import { getPerfectElementSize } from "./sizeHelpers";
 import type { NonDeletedExcalidrawElement } from "./types";
-import type {
-  AppState,
-  NormalizedZoomValue,
-  NullableGridSize,
-  PointerDownState,
-} from "../types";
+import type { AppState, NormalizedZoomValue, PointerDownState } from "../types";
 import { getBoundTextElement, getMinTextElementWidth } from "./textElement";
+import { getGridPoint } from "../math";
 import type Scene from "../scene/Scene";
 import {
  isArrowElement,
@@ -20,7 +16,6 @@ import {
 } from "./typeChecks";
 import { getFontString } from "../utils";
 import { TEXT_AUTOWRAP_THRESHOLD } from "../constants";
-import { getGridPoint } from "../snapping";

 export const dragSelectedElements = (
  pointerDownState: PointerDownState,
@@ -31,7 +26,7 @@ export const dragSelectedElements = (
    x: number;
    y: number;
  },
-  gridSize: NullableGridSize,
+  gridSize: AppState["gridSize"],
 ) => {
  if (
    _selectedElements.length === 1 &&
@@ -106,7 +101,7 @@ const calculateOffset = (
  commonBounds: Bounds,
  dragOffset: { x: number; y: number },
  snapOffset: { x: number; y: number },
-  gridSize: NullableGridSize,
+  gridSize: AppState["gridSize"],
 ): { x: number; y: number } => {
  const [x, y] = commonBounds;
  let nextX = x + dragOffset.x + snapOffset.x;
@@ -159,42 +154,26 @@ export const getDragOffsetXY = (
  return [x - x1, y - y1];
 };

-export const dragNewElement = ({
-  newElement,
-  elementType,
-  originX,
-  originY,
-  x,
-  y,
-  width,
-  height,
-  shouldMaintainAspectRatio,
-  shouldResizeFromCenter,
-  zoom,
-  widthAspectRatio = null,
-  originOffset = null,
-  informMutation = true,
-}: {
-  newElement: NonDeletedExcalidrawElement;
-  elementType: AppState["activeTool"]["type"];
-  originX: number;
-  originY: number;
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  shouldMaintainAspectRatio: boolean;
-  shouldResizeFromCenter: boolean;
-  zoom: NormalizedZoomValue;
+export const dragNewElement = (
+  newElement: NonDeletedExcalidrawElement,
+  elementType: AppState["activeTool"]["type"],
+  originX: number,
+  originY: number,
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  shouldMaintainAspectRatio: boolean,
+  shouldResizeFromCenter: boolean,
+  zoom: NormalizedZoomValue,
  /** whether to keep given aspect ratio when `isResizeWithSidesSameLength` is
      true */
-  widthAspectRatio?: number | null;
-  originOffset?: {
+  widthAspectRatio?: number | null,
+  originOffset: {
    x: number;
    y: number;
-  } | null;
-  informMutation?: boolean;
-}) => {
+  } | null = null,
+) => {
  if (shouldMaintainAspectRatio && newElement.type !== "selection") {
    if (widthAspectRatio) {
      height = width / widthAspectRatio;
@@ -258,16 +237,12 @@ export const dragNewElement = ({
  }

  if (width !== 0 && height !== 0) {
-    mutateElement(
-      newElement,
-      {
-        x: newX + (originOffset?.x ?? 0),
-        y: newY + (originOffset?.y ?? 0),
-        width,
-        height,
-        ...textAutoResize,
-      },
-      informMutation,
-    );
+    mutateElement(newElement, {
+      x: newX + (originOffset?.x ?? 0),
+      y: newY + (originOffset?.y ?? 0),
+      width,
+      height,
+      ...textAutoResize,
+    });
  }
 };
@@ -1,404 +0,0 @@
-import ReactDOM from "react-dom";
-import { render } from "../tests/test-utils";
-import { reseed } from "../random";
-import { UI, Keyboard, Pointer } from "../tests/helpers/ui";
-import { Excalidraw } from "../index";
-import { API } from "../tests/helpers/api";
-import { KEYS } from "../keys";
-
-ReactDOM.unmountComponentAtNode(document.getElementById("root")!);
-
-const { h } = window;
-const mouse = new Pointer("mouse");
-
-beforeEach(async () => {
-  localStorage.clear();
-  reseed(7);
-  mouse.reset();
-
-  await render(<Excalidraw handleKeyboardGlobally={true} />);
-  h.state.width = 1000;
-  h.state.height = 1000;
-
-  // The bounds of hand-drawn linear elements may change after flipping, so
-  // removing this style for testing
-  UI.clickTool("arrow");
-  UI.clickByTitle("Architect");
-  UI.clickTool("selection");
-});
-
-describe("flow chart creation", () => {
-  beforeEach(() => {
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-  });
-
-  // multiple at once
-  it("create multiple successor nodes at once", () => {
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(5);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(3);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(2);
-  });
-
-  it("when directions are changed, only the last same directions will apply", () => {
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-
-      Keyboard.keyPress(KEYS.ARROW_UP);
-      Keyboard.keyPress(KEYS.ARROW_UP);
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(7);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(4);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(3);
-  });
-
-  it("when escaped, no nodes will be created", () => {
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_UP);
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-
-    Keyboard.keyPress(KEYS.ESCAPE);
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(1);
-  });
-
-  it("create nodes one at a time", () => {
-    const initialNode = h.elements[0];
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(3);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(2);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(1);
-
-    const firstChildNode = h.elements.filter(
-      (el) => el.type === "rectangle" && el.id !== initialNode.id,
-    )[0];
-    expect(firstChildNode).not.toBe(null);
-    expect(firstChildNode.id).toBe(Object.keys(h.state.selectedElementIds)[0]);
-
-    API.setSelectedElements([initialNode]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(5);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(3);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(2);
-
-    const secondChildNode = h.elements.filter(
-      (el) =>
-        el.type === "rectangle" &&
-        el.id !== initialNode.id &&
-        el.id !== firstChildNode.id,
-    )[0];
-    expect(secondChildNode).not.toBe(null);
-    expect(secondChildNode.id).toBe(Object.keys(h.state.selectedElementIds)[0]);
-
-    API.setSelectedElements([initialNode]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.length).toBe(7);
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(4);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(3);
-
-    const thirdChildNode = h.elements.filter(
-      (el) =>
-        el.type === "rectangle" &&
-        el.id !== initialNode.id &&
-        el.id !== firstChildNode.id &&
-        el.id !== secondChildNode.id,
-    )[0];
-
-    expect(thirdChildNode).not.toBe(null);
-    expect(thirdChildNode.id).toBe(Object.keys(h.state.selectedElementIds)[0]);
-
-    expect(firstChildNode.x).toBe(secondChildNode.x);
-    expect(secondChildNode.x).toBe(thirdChildNode.x);
-  });
-});
-
-describe("flow chart navigation", () => {
-  it("single node at each level", () => {
-    /**
-     * ▨ -> ▨ -> ▨ -> ▨ -> ▨
-     */
-
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    expect(h.elements.filter((el) => el.type === "rectangle").length).toBe(5);
-    expect(h.elements.filter((el) => el.type === "arrow").length).toBe(4);
-
-    // all the way to the left, gets us to the first node
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
-
-    // all the way to the right, gets us to the last node
-    const rightMostNode = h.elements[h.elements.length - 2];
-    expect(rightMostNode);
-    expect(rightMostNode.type).toBe("rectangle");
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).toBe(true);
-  });
-
-  it("multiple nodes at each level", () => {
-    /**
-     * from the perspective of the first node, there're four layers, and
-     * there are four nodes at the second layer
-     *
-     *   -> ▨
-     * ▨ -> ▨ -> ▨ -> ▨ -> ▨
-     *   -> ▨
-     *   -> ▨
-     */
-
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    const secondNode = h.elements[1];
-    const rightMostNode = h.elements[h.elements.length - 2];
-
-    API.setSelectedElements([rectangle]);
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    API.setSelectedElements([rectangle]);
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    API.setSelectedElements([rectangle]);
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    API.setSelectedElements([rectangle]);
-
-    // because of same level cycling,
-    // going right five times should take us back to the second node again
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[secondNode.id]).toBe(true);
-
-    // from the second node, going right three times should take us to the rightmost node
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).toBe(true);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
-  });
-
-  it("take the most obvious link when possible", () => {
-    /**
-     * ▨ → ▨   ▨ → ▨
-     *     ↓   ↑
-     *     ▨ → ▨
-     */
-
-    API.clearSelection();
-    const rectangle = API.createElement({
-      type: "rectangle",
-      width: 200,
-      height: 100,
-    });
-
-    API.setElements([rectangle]);
-    API.setSelectedElements([rectangle]);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    Keyboard.withModifierKeys({ ctrl: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.CTRL_OR_CMD);
-
-    // last node should be the one that's selected
-    const rightMostNode = h.elements[h.elements.length - 2];
-    expect(rightMostNode.type).toBe("rectangle");
-    expect(h.state.selectedElementIds[rightMostNode.id]).toBe(true);
-
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-      Keyboard.keyPress(KEYS.ARROW_LEFT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-
-    expect(h.state.selectedElementIds[rectangle.id]).toBe(true);
-
-    // going any direction takes us to the predecessor as well
-    const predecessorToRightMostNode = h.elements[h.elements.length - 4];
-    expect(predecessorToRightMostNode.type).toBe("rectangle");
-
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_RIGHT);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_UP);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-    API.setSelectedElements([rightMostNode]);
-    Keyboard.withModifierKeys({ alt: true }, () => {
-      Keyboard.keyPress(KEYS.ARROW_DOWN);
-    });
-    Keyboard.keyUp(KEYS.ALT);
-    expect(h.state.selectedElementIds[rightMostNode.id]).not.toBe(true);
-    expect(h.state.selectedElementIds[predecessorToRightMostNode.id]).toBe(
-      true,
-    );
-  });
-});
--- a/Show More
+++ b/Show More