fix hitbox

.codesandbox/Dockerfile

@@ -1,5 +0,0 @@
-FROM node:18-bullseye
-
-# Vite wants to open the browser using `open`, so we
-# need to install those utils.
-RUN apt update -y && apt install -y xdg-utils

.codesandbox/tasks.json

@@ -27,10 +27,7 @@
     "start": {
       "name": "Start Excalidraw",
       "command": "yarn start",
-      "runAtStart": true,
-      "preview": {
-        "port": 3000
-      }
+      "runAtStart": true
     },
     "test": {
       "name": "Run Tests",
@@ -40,11 +37,7 @@
     "install-deps": {
       "name": "Install Dependencies",
       "command": "yarn install",
-      "restartOn": {
-        "files": ["yarn.lock"],
-        "branch": false,
-        "resume": false
-      }
+      "restartOn": { "files": ["yarn.lock"] }
     }
   }
 }

.dockerignore

@@ -6,6 +6,6 @@
 !.prettierrc
 !package.json
 !public/
-!packages/
+!src/
 !tsconfig.json
 !yarn.lock

.env.development

@@ -1,44 +1,24 @@
-VITE_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
-VITE_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
+REACT_APP_BACKEND_V2_GET_URL=https://json-dev.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json-dev.excalidraw.com/api/v2/post/
 
-VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
-VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
+REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
+REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
 # collaboration WebSocket server (https://github.com/excalidraw/excalidraw-room)
-VITE_APP_WS_SERVER_URL=http://localhost:3002
+REACT_APP_WS_SERVER_URL=http://localhost:3002
 
 # set this only if using the collaboration workflow we use on excalidraw.com
-VITE_APP_PORTAL_URL=
+REACT_APP_PORTAL_URL=
 
-VITE_APP_PLUS_LP=https://plus.excalidraw.com
-VITE_APP_PLUS_APP=https://app.excalidraw.com
-
-VITE_APP_AI_BACKEND=http://localhost:3015
-
-VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
+REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyCMkxA60XIW8KbqMYL7edC4qT5l4qHX2h8","authDomain":"excalidraw-oss-dev.firebaseapp.com","projectId":"excalidraw-oss-dev","storageBucket":"excalidraw-oss-dev.appspot.com","messagingSenderId":"664559512677","appId":"1:664559512677:web:a385181f2928d328a7aa8c"}'
 
 # 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=
+REACT_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=
-VITE_APP_DISABLE_TRACKING=true
+REACT_APP_DEV_DISABLE_LIVE_RELOAD=
 
 FAST_REFRESH=false
-
-# The port the run the dev server
-VITE_APP_PORT=3000
-
-#Debug flags
-
-# To enable bounding box for text containers
-VITE_APP_DEBUG_ENABLE_TEXT_CONTAINER_BOUNDING_BOX=
-
-# Set this flag to false if you want to open the overlay by default
-VITE_APP_COLLAPSE_OVERLAY=true
-
-# Set this flag to false to disable eslint
-VITE_APP_ENABLE_ESLINT=true

.env.production

@@ -1,20 +1,17 @@
-VITE_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
-VITE_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
+REACT_APP_BACKEND_V2_GET_URL=https://json.excalidraw.com/api/v2/
+REACT_APP_BACKEND_V2_POST_URL=https://json.excalidraw.com/api/v2/post/
 
-VITE_APP_LIBRARY_URL=https://libraries.excalidraw.com
-VITE_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
-
-VITE_APP_PORTAL_URL=https://portal.excalidraw.com
-
-VITE_APP_PLUS_LP=https://plus.excalidraw.com
-VITE_APP_PLUS_APP=https://app.excalidraw.com
-
-VITE_APP_AI_BACKEND=https://oss-ai.excalidraw.com
+REACT_APP_LIBRARY_URL=https://libraries.excalidraw.com
+REACT_APP_LIBRARY_BACKEND=https://us-central1-excalidraw-room-persistence.cloudfunctions.net/libraries
 
+REACT_APP_PORTAL_URL=https://portal.excalidraw.com
 # Fill to set socket server URL used for collaboration.
-# Meant for forks only: excalidraw.com uses custom VITE_APP_PORTAL_URL flow
-VITE_APP_WS_SERVER_URL=
+# Meant for forks only: excalidraw.com uses custom REACT_APP_PORTAL_URL flow
+REACT_APP_WS_SERVER_URL=
 
-VITE_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
+REACT_APP_FIREBASE_CONFIG='{"apiKey":"AIzaSyAd15pYlMci_xIp9ko6wkEsDzAAA0Dn0RU","authDomain":"excalidraw-room-persistence.firebaseapp.com","databaseURL":"https://excalidraw-room-persistence.firebaseio.com","projectId":"excalidraw-room-persistence","storageBucket":"excalidraw-room-persistence.appspot.com","messagingSenderId":"654800341332","appId":"1:654800341332:web:4a692de832b55bd57ce0c1"}'
 
-VITE_APP_DISABLE_TRACKING=
+# production-only vars
+REACT_APP_GOOGLE_ANALYTICS_ID=UA-387204-13
+
+REACT_APP_PLUS_APP=https://app.excalidraw.com

.eslintignore

@@ -5,4 +5,4 @@ package-lock.json
 firebase/
 dist/
 public/workbox
-packages/excalidraw/types
+src/packages/excalidraw/types

.github/workflows/autorelease-excalidraw.yml

@@ -12,10 +12,10 @@ jobs:
       - uses: actions/checkout@v2
         with:
           fetch-depth: 2
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 14.x
       - name: Set up publish access
         run: |
           npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}

.github/workflows/autorelease-preview.yml

@@ -32,10 +32,10 @@ jobs:
         with:
           ref: ${{ steps.sha.outputs.result }}
           fetch-depth: 2
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 14.x
       - name: Set up publish access
         run: |
           npm config set //registry.npmjs.org/:_authToken ${NPM_TOKEN}
@@ -44,7 +44,7 @@ jobs:
       - name: Auto release preview
         id: "autorelease"
         run: |
-          yarn add @actions/core -W
+          yarn add @actions/core
           yarn autorelease preview ${{ github.event.issue.number }}
       - name: Post comment post release
         if: always()

.github/workflows/lint.yml

@@ -9,14 +9,14 @@ jobs:
     steps:
       - uses: actions/checkout@v2
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 14.x
 
       - name: Install and lint
         run: |
-          yarn install
+          yarn --frozen-lockfile
           yarn test:other
           yarn test:code
           yarn test:typecheck

.github/workflows/locales-coverage.yml

@@ -14,19 +14,19 @@ jobs:
         with:
           token: ${{ secrets.PUSH_TRANSLATIONS_COVERAGE_PAT }}
 
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 14.x
 
       - name: Create report file
         run: |
           yarn locales-coverage
-          FILE_CHANGED=$(git diff packages/excalidraw/locales/percentages.json)
+          FILE_CHANGED=$(git diff src/locales/percentages.json)
           if [ ! -z "${FILE_CHANGED}" ]; then
             git config --global user.name 'Excalidraw Bot'
             git config --global user.email 'bot@excalidraw.com'
-            git add packages/excalidraw/locales/percentages.json
+            git add src/locales/percentages.json
             git commit -am "Auto commit: Calculate translation coverage"
             git push
           fi

.github/workflows/semantic-pr-title.yml

@@ -1,7 +1,7 @@
 name: Semantic PR title
 
 on:
-  pull_request:
+  pull_request_target:
     types:
       - opened
       - edited

.github/workflows/sentry-production.yml

@@ -10,10 +10,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 14.x
       - name: Install and build
         run: |
           yarn --frozen-lockfile

.github/workflows/size-limit.yml

@@ -1,28 +0,0 @@
-name: "Bundle Size check @excalidraw/excalidraw"
-on:
-  pull_request:
-    branches:
-      - master
-jobs:
-  size:
-    runs-on: ubuntu-latest
-    env:
-      CI_JOB_NUMBER: 1
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v3
-      - name: Setup Node.js 18.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-      - name: Install in packages/excalidraw
-        run: yarn
-        working-directory: packages/excalidraw
-        env:
-          CI: true
-      - uses: andresz1/size-limit-action@v1
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          build_script: build:esm
-          skip_step: install
-          directory: packages/excalidraw

.github/workflows/test-coverage-pr.yml

@@ -1,26 +0,0 @@
-name: Test Coverage PR
-on:
-  pull_request:
-
-jobs:
-  coverage:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      pull-requests: write
-
-    steps:
-      - uses: actions/checkout@v2
-      - name: "Install Node"
-        uses: actions/setup-node@v2
-        with:
-          node-version: "18.x"
-      - name: "Install Deps"
-        run: yarn install
-      - name: "Test Coverage"
-        run: yarn test:coverage
-      - name: "Report Coverage"
-        if: always() # Also generate the report if tests are failing
-        uses: davelosert/vitest-coverage-report-action@v2
-        with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test.yml

@@ -7,11 +7,11 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - name: Setup Node.js 18.x
+      - name: Setup Node.js 14.x
         uses: actions/setup-node@v2
         with:
-          node-version: 18.x
+          node-version: 14.x
       - name: Install and test
         run: |
-          yarn install
+          yarn --frozen-lockfile
           yarn test:app

.gitignore

@@ -21,7 +21,7 @@ npm-debug.log*
 package-lock.json
 yarn-debug.log*
 yarn-error.log*
-packages/excalidraw/types
-coverage
-dev-dist
-html
+src/packages/excalidraw/types
+src/packages/excalidraw/example/public/bundle.js
+src/packages/excalidraw/example/public/excalidraw-assets-dev
+src/packages/excalidraw/example/public/excalidraw.development.js

.npmrc

@@ -1,2 +1 @@
 save-exact=true
-legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-18
+14

CHANGELOG.md

@@ -0,0 +1,3 @@
+## 2020-10-13
+
+- Added ability to embed scene source into exported PNG/SVG files so you can import the scene from them (open via `Load` button or drag & drop). #2219

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:18 AS build
+FROM node:14-alpine AS build
 
 WORKDIR /opt/node_app
 

README.md

@@ -1,124 +1,29 @@
-<a href="https://excalidraw.com/" target="_blank" rel="noopener">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" alt="Excalidraw" srcset="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2_dark.png" />
-    <img alt="Excalidraw" src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github/excalidraw_github_cover_2.png" />
-  </picture>
-</a>
-
-<h4 align="center">
-  <a href="https://excalidraw.com">Excalidraw Editor</a> |
-  <a href="https://blog.excalidraw.com">Blog</a> |
-  <a href="https://docs.excalidraw.com">Documentation</a> |
-  <a href="https://plus.excalidraw.com">Excalidraw+</a>
-</h4>
-
-<div align="center">
-  <h2>
-    An open source virtual hand-drawn style whiteboard. </br>
-    Collaborative and end-to-end encrypted. </br>
-  <br />
-  </h2>
-</div>
-
-<br />
-<p align="center">
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/LICENSE">
-    <img alt="Excalidraw is released under the MIT license." src="https://img.shields.io/badge/license-MIT-blue.svg"  />
+<div align="center" style="display:flex;flex-direction:column;"}>
+  <a href="https://excalidraw.com">
+    <img width="540" src="./public/og-image-sm.png" alt="Excalidraw logo: Sketch handrawn like diagrams."/>
   </a>
-  <a href="https://www.npmjs.com/package/@excalidraw/excalidraw">
-    <img alt="npm downloads/month" src="https://img.shields.io/npm/dm/@excalidraw/excalidraw"  />
-  </a>
-  <a href="https://docs.excalidraw.com/docs/introduction/contributing">
-    <img alt="PRs welcome!" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat"  />
-  </a>
-  <a href="https://discord.gg/UexuTaE">
-    <img alt="Chat on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
-  </a>
-  <a href="https://twitter.com/excalidraw">
-    <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
-  </a>
-</p>
-
-<div align="center">
-  <figure>
-    <a href="https://excalidraw.com" target="_blank" rel="noopener">
-      <img src="https://excalidraw.nyc3.cdn.digitaloceanspaces.com/github%2Fproduct_showcase.png" alt="Product showcase" />
+  <h3>Virtual whiteboard for sketching hand-drawn like diagrams.<br/>Collaborative and end-to-end encrypted.</h3>
+  <p>
+    <a href="https://twitter.com/excalidraw">
+      <img alt="Follow Excalidraw on Twitter" src="https://img.shields.io/twitter/follow/excalidraw.svg?label=follow+@excalidraw&style=social&logo=twitter"/>
     </a>
-    <figcaption>
-      <p align="center">
-        Create beautiful hand-drawn like diagrams, wireframes, or whatever you like.
-      </p>
-    </figcaption>
-  </figure>
+    <a href="https://discord.gg/UexuTaE">
+      <img alt="Chat with us on Discord" src="https://img.shields.io/discord/723672430744174682?color=738ad6&label=Chat%20on%20Discord&logo=discord&logoColor=ffffff&widge=false"/>
+    </a>
+  </p>
 </div>
 
-## Features
+## Try now
 
-The Excalidraw editor (npm package) supports:
+Visit [excalidraw.com](https://excalidraw.com) to start sketching.
 
-- 💯&nbsp;Free & open-source.
-- 🎨&nbsp;Infinite, canvas-based whiteboard.
-- ✍️&nbsp;Hand-drawn like style.
-- 🌓&nbsp;Dark mode.
-- 🏗️&nbsp;Customizable.
-- 📷&nbsp;Image support.
-- 😀&nbsp;Shape libraries support.
-- 👅&nbsp;Localization (i18n) support.
-- 🖼️&nbsp;Export to PNG, SVG & clipboard.
-- 💾&nbsp;Open format - export drawings as an `.excalidraw` json file.
-- ⚒️&nbsp;Wide range of tools - rectangle, circle, diamond, arrow, line, free-draw, eraser...
-- ➡️&nbsp;Arrow-binding & labeled arrows.
-- 🔙&nbsp;Undo / Redo.
-- 🔍&nbsp;Zoom and panning support.
+## Community
 
-## Excalidraw.com
+For latest updates, follow us on [twitter](https://twitter.com/excalidraw). If you need help or want to chat, join us on [Discord](https://discord.gg/UexuTaE). For releases and deep dives, check out our [blog](https://blog.excalidraw.com). Report bugs on [GitHub](https://github.com/excalidraw/excalidraw/issues).
 
-The app hosted at [excalidraw.com](https://excalidraw.com) is a minimal showcase of what you can build with Excalidraw. Its [source code](https://github.com/excalidraw/excalidraw/tree/master/excalidraw-app) is part of this repository as well, and the app features:
+## Supporting Excalidraw
 
-- 📡&nbsp;PWA support (works offline).
-- 🤼&nbsp;Real-time collaboration.
-- 🔒&nbsp;End-to-end encryption.
-- 💾&nbsp;Local-first support (autosaves to the browser).
-- 🔗&nbsp;Shareable links (export to a readonly link you can share with others).
-
-We'll be adding these features as drop-in plugins for the npm package in the future.
-
-## Quick start
-
-**Note:** following instructions are for installing the Excalidraw [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw) when integrating Excalidraw into your own app. To run the repository locally for development, please refer to our [Development Guide](https://docs.excalidraw.com/docs/introduction/development).
-
-```
-npm install react react-dom @excalidraw/excalidraw
-```
-
-or via yarn
-
-```
-yarn add react react-dom @excalidraw/excalidraw
-```
-
-Check out our [documentation](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation) for more details!
-
-## Contributing
-
-- Missing something or found a bug? [Report here](https://github.com/excalidraw/excalidraw/issues).
-- Want to contribute? Check out our [contribution guide](https://docs.excalidraw.com/docs/introduction/contributing) or let us know on [Discord](https://discord.gg/UexuTaE).
-- Want to help with translations? See the [translation guide](https://docs.excalidraw.com/docs/introduction/contributing#translating).
-
-## Integrations
-
-- [VScode extension](https://marketplace.visualstudio.com/items?itemName=pomdtr.excalidraw-editor)
-- [npm package](https://www.npmjs.com/package/@excalidraw/excalidraw)
-
-## Who's integrating Excalidraw
-
-[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/) • and many others
-
-## Sponsors & support
-
-If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw) or use [Excalidraw+](https://plus.excalidraw.com/).
-
-## Thank you for supporting Excalidraw
+If you like the project, you can become a sponsor at [Open Collective](https://opencollective.com/excalidraw).
 
 [<img src="https://opencollective.com/excalidraw/tiers/sponsors/0/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/0/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/1/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/1/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/2/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/2/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/3/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/3/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/4/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/4/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/5/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/5/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/6/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/6/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/7/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/7/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/8/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/8/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/9/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/9/website) [<img src="https://opencollective.com/excalidraw/tiers/sponsors/10/avatar.svg?avatarHeight=120"/>](https://opencollective.com/excalidraw/tiers/sponsors/10/website)
 
@@ -127,3 +32,13 @@ If you like the project, you can become a sponsor at [Open Collective](https://o
 Last but not least, we're thankful to these companies for offering their services for free:
 
 [![Vercel](./.github/assets/vercel.svg)](https://vercel.com) [![Sentry](./.github/assets/sentry.svg)](https://sentry.io) [![Crowdin](./.github/assets/crowdin.svg)](https://crowdin.com)
+
+## Developers
+
+You can integrate Excalidraw into your app by installing our [npm component](https://npmjs.com/package/@excalidraw/excalidraw).
+
+Visit our documentation on [https://docs.excalidraw.com](https://docs.excalidraw.com).
+
+## Who's integrating Excalidraw
+
+[Google Cloud](https://googlecloudcheatsheet.withgoogle.com/architecture) • [Meta](https://meta.com/) • [CodeSandbox](https://codesandbox.io/) • [Obsidian Excalidraw](https://github.com/zsviczian/obsidian-excalidraw-plugin) • [Replit](https://replit.com/) • [Slite](https://slite.com/) • [Notion](https://notion.so/) • [HackerRank](https://www.hackerrank.com/)

crowdin.yml

@@ -1,3 +1,3 @@
 files:
-  - source: /packages/excalidraw/locales/en.json
-    translation: /packages/excalidraw/locales/%locale%.json
+  - source: /src/locales/en.json
+    translation: /src/locales/%locale%.json

dev-docs/docs/@excalidraw/excalidraw/api/children-components/children-components-intro.mdx

@@ -17,6 +17,5 @@ Below are the currently supported components:
 
 - [MainMenu](/docs/@excalidraw/excalidraw/api/children-components/main-menu)
 - [WelcomeScreen](/docs/@excalidraw/excalidraw/api/children-components/welcome-screen)
-- [Sidebar](/docs/@excalidraw/excalidraw/api/children-components/sidebar)
 - [Footer](/docs/@excalidraw/excalidraw/api/children-components/footer)
 - [LiveCollaborationTrigger](/docs/@excalidraw/excalidraw/api/children-components/live-collaboration-trigger)

dev-docs/docs/@excalidraw/excalidraw/api/children-components/footer.mdx

@@ -16,6 +16,7 @@ function App() {
             className="custom-footer"
             onClick={() => alert("This is dummy footer")}
           >
+            {" "}
             custom footer
           </button>
         </Footer>
@@ -34,7 +35,7 @@ Open the `Menu` in the below playground and you will see the `custom footer` ren
 ```jsx live noInline
 const MobileFooter = ({}) => {
   const device = useDevice();
-  if (device.editor.isMobile) {
+  if (device.isMobile) {
     return (
       <Footer>
         <button

dev-docs/docs/@excalidraw/excalidraw/api/children-components/main-menu.mdx

@@ -14,7 +14,8 @@ function App() {
             Item1
           </MainMenu.Item>
           <MainMenu.Item onSelect={() => window.alert("Item2")}>
-            Item 2
+            {" "}
+            Item 2{" "}
           </MainMenu.Item>
         </MainMenu>
       </Excalidraw>
@@ -38,7 +39,6 @@ To render an item, its recommended to use `MainMenu.Item`.
 | Prop | Type | Required | Default | Description |
 | --- | --- | :-: | :-: | --- |
 | `onSelect` | `function` | Yes | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
-| `selected` | `boolean` | No | `false` | Whether item is active |
 | `children` | `React.ReactNode` | Yes | - | The content of the menu item |
 | `icon` | `JSX.Element` | No | - | The icon used in the menu item |
 | `shortcut` | `string` | No | - | The shortcut to be shown for the menu item |
@@ -71,7 +71,6 @@ function App() {
 | Prop | Type | Required | Default | Description |
 | --- | --- | :-: | :-: | --- |
 | `onSelect` | `function` | No | - | Triggered when selected (via mouse). Calling `event.preventDefault()` will stop menu from closing. |
-| `selected` | `boolean` | No | `false` | Whether item is active |
 | `href` | `string` | Yes | - | The `href` attribute to be added to the `anchor` element. |
 | `children` | `React.ReactNode` | Yes | - | The content of the menu item |
 | `icon` | `JSX.Element` | No | - | The icon used in the menu item |
@@ -94,6 +93,7 @@ function App() {
               style={{ height: "2rem" }}
               onClick={() => window.alert("custom menu item")}
             >
+              {" "}
               custom item
             </button>
           </MainMenu.ItemCustom>
@@ -133,7 +133,7 @@ function App() {
 }
 ```
 
-Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/components/mainMenu/DefaultItems.tsx) of the default items.
+Here is a [complete list](https://github.com/excalidraw/excalidraw/blob/master/src/components/mainMenu/DefaultItems.tsx) of the default items.
 
 ### MainMenu.Group
 

dev-docs/docs/@excalidraw/excalidraw/api/children-components/sidebar.mdx

@@ -1,129 +0,0 @@
-# Sidebar
-
-The editor comes with a default sidebar on the right in LTR (Left to Right) mode which contains the library. You can also add your own custom sidebar(s) by rendering this component as a child of `<Excalidraw>`.
-
-## Props
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `name` | `string` | Yes | Sidebar name that uniquely identifies it. |
-| `children` | `React.ReactNode` | Yes | Content you want to render inside the sidebar. |
-| `onStateChange` | `(state: AppState["openSidebar"]) => void` | No | Invoked on open/close or tab change. No need to act on this event, as the editor manages the sidebar open state on its own. |
-| `onDock` | `(docked: boolean) => void` | No | Invoked when the user toggles the `dock` button. Passed the current docked state. |
-| `docked` | `boolean` | No | Indicates whether the sidebar is `docked`. By default, the sidebar is `undocked`. If passed, the docking becomes controlled. |
-| `className` | `string` | No |  |
-| `style` | `React.CSSProperties` | No |  |
-
-At minimum, each sidebar needs to have a unique `name` prop, and render some content inside it, which can be either composed from the exported sidebar sub-components, or custom elements.
-
-Unless `docked={true}` is passed, the sidebar will close when the user clicks outside of it. It can also be closed using the close button in the header, if you render the `<Sidebar.Header>` component.
-
-Further, if the sidebader doesn't comfortably fit in the editor, it won't be dockable. To decide the breakpoint for docking you can use [UIOptions.dockedSidebarBreakpoint](/docs/@excalidraw/excalidraw/api/props/ui-options#dockedsidebarbreakpoint).
-
-To make your sidebar user-dockable, you need to supply `props.docked` (current docked state) alongside `props.onDock` callback (to listen for and handle docked state changes). The component doesn't track local state for the `docked` prop, so you need to manage it yourself.
-
-## Sidebar.Header
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `children` | `React.ReactNode` | No | Content you want to render inside the sidebar header next to the `close` / `dock` buttons. |
-| `className` | `string` | No |  |
-
-Renders a sidebar header which contains a close button, and a dock button (when applicable). You can also render custom content in addition.
-
-Can be nested inside specific tabs, or rendered as direct child of `<Sidebar>` for the whole sidebar component.
-
-## Sidebar.Tabs
-
-| Prop       | Type              | Required | Description                    |
-| ---------- | ----------------- | -------- | ------------------------------ |
-| `children` | `React.ReactNode` | No       | Container for individual tabs. |
-
-Sidebar may contain inner tabs. Each `<Sidebar.Tab>` must be rendered inside this `<Sidebar.Tabs>` container component.
-
-## Sidebar.Tab
-
-| Prop       | Type              | Required | Description      |
-| ---------- | ----------------- | -------- | ---------------- |
-| `tab`      | `string`          | Yes      | Unique tab name. |
-| `children` | `React.ReactNode` | No       | Tab content.     |
-
-Content of a given sidebar tab. It must be rendered inside `<Sidebar.Tabs>`.
-
-## Sidebar.TabTriggers
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `children` | `React.ReactNode` | No | Container for individual tab triggers. |
-
-Container component for tab trigger buttons to switch between tabs.
-
-## Sidebar.TabTrigger
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `tab` | `string` | Yes | Tab name to toggle. |
-| `children` | `React.ReactNode` | No | Tab trigger content, such as a label. |
-
-A given tab trigger button that switches to a given sidebar tab. It must be rendered inside `<Sidebar.TabTriggers>`.
-
-## Sidebar.Trigger
-
-| Prop | Type | Required | Description |
-| --- | --- | --- | --- |
-| `name` | `string` | Yes | Sidebar name the trigger will control. |
-| `tab` | `string` | No | Optional tab to open. |
-| `onToggle` | `(open: boolean) => void` | No | Callback invoked on toggle. |
-| `title` | `string` | No | A11y title. |
-| `children` | `React.ReactNode` | No | Content (usually label) you want to render inside the button. |
-| `icon` | `JSX.Element` | No | Trigger icon if any. |
-| `className` | `string` | No |  |
-| `style` | `React.CSSProperties` | No |  |
-
-You can use the [`ref.toggleSidebar({ name: "custom" })`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api#toggleSidebar) api to control the sidebar, but we export a trigger button to make UI use cases easier.
-
-## Example
-
-```tsx live
-function App() {
-  const [docked, setDocked] = useState(false);
-
-  return (
-    <div style={{ height: "580px" }}>
-      <Excalidraw
-        UIOptions={{
-          // this effectively makes the sidebar dockable on any screen size,
-          // ignoring if it fits or not
-          dockedSidebarBreakpoint: 0,
-        }}
-      >
-        <Sidebar name="custom" docked={docked} onDock={setDocked}>
-          <Sidebar.Header />
-          <Sidebar.Tabs style={{ padding: "0.5rem" }}>
-            <Sidebar.Tab tab="one">Tab one!</Sidebar.Tab>
-            <Sidebar.Tab tab="two">Tab two!</Sidebar.Tab>
-            <Sidebar.TabTriggers>
-              <Sidebar.TabTrigger tab="one">One</Sidebar.TabTrigger>
-              <Sidebar.TabTrigger tab="two">Two</Sidebar.TabTrigger>
-            </Sidebar.TabTriggers>
-          </Sidebar.Tabs>
-        </Sidebar>
-
-        <Footer>
-          <Sidebar.Trigger
-            name="custom"
-            tab="one"
-            style={{
-              marginLeft: "0.5rem",
-              background: "#70b1ec",
-              color: "white",
-            }}
-          >
-            Toggle Custom Sidebar
-          </Sidebar.Trigger>
-        </Footer>
-      </Excalidraw>
-    </div>
-  );
-}
-```

dev-docs/docs/@excalidraw/excalidraw/api/constants.mdx

@@ -37,7 +37,7 @@ Defaults to `THEME.LIGHT` unless passed in `initialData.appState.theme`
 
 ### MIME_TYPES
 
-[`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L101) contains all the mime types supported by `Excalidraw`.
+[`MIME_TYPES`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L101) contains all the mime types supported by `Excalidraw`.
 
 **How to use **
 

dev-docs/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton.mdx

@@ -1,475 +0,0 @@
-# Creating Elements programmatically
-
-We support a simplified API to make it easier to generate Excalidraw elements programmatically. This API is in beta and subject to change before stable. You can check the [PR](https://github.com/excalidraw/excalidraw/pull/6546) for more details.
-
-For this purpose we introduced a new type [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133). This is the simplified version of [`ExcalidrawElement`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L134) type with the minimum possible attributes so that creating elements programmatically is much easier (especially for cases like binding arrows or creating text containers).
-
-The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133) can be converted to fully qualified Excalidraw elements by using [`convertToExcalidrawElements`](/docs/@excalidraw/excalidraw/api/excalidraw-element-skeleton#converttoexcalidrawelements).
-
-## convertToExcalidrawElements
-
-**_Signature_**
-
-```ts
-convertToExcalidrawElements(
-  elements: ExcalidrawElementSkeleton,
-  opts?: { regenerateIds: boolean }
-): ExcalidrawElement[]
-```
-
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `elements` | [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L137) |  | The Excalidraw element Skeleton which needs to be converted to Excalidraw elements. |
-| `opts` | `{ regenerateIds: boolean }` | ` {regenerateIds: true}` | By default `id` will be regenerated for all the elements irrespective of whether you pass the `id` so if you don't want the ids to regenerated, you can set this attribute to `false`. |
-
-**_How to use_**
-
-```js
-import { convertToExcalidrawElements } from "@excalidraw/excalidraw";
-```
-
-This function converts the Excalidraw Element Skeleton to excalidraw elements which could be then rendered on the canvas. Hence calling this function is necessary before passing it to APIs like [`initialData`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/initialdata), [`updateScene`](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/api/props/excalidraw-api#updatescene) if you are using the Skeleton API
-
-## Supported Features
-
-### Rectangle, Ellipse, and Diamond
-
-To create these shapes you need to pass its `type` and `x` and `y` coordinates for position. The rest of the attributes are optional\_.
-
-For the Skeleton API to work, `convertToExcalidrawElements` needs to be called before passing it to Excalidraw Component via initialData, updateScene or any such API.
-
-```jsx live
-function App() {
-  const elements = convertToExcalidrawElements([
-    {
-      type: "rectangle",
-      x: 100,
-      y: 250,
-    },
-    {
-      type: "ellipse",
-      x: 250,
-      y: 250,
-    },
-    {
-      type: "diamond",
-      x: 380,
-      y: 250,
-    },
-  ]);
-  return (
-    <div style={{ height: "500px" }}>
-      <Excalidraw
-        initialData={{
-          elements,
-          appState: { zenModeEnabled: true, viewBackgroundColor: "#a5d8ff" },
-          scrollToContent: true,
-        }}
-      />
-    </div>
-  );
-}
-```
-
-You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L27) as well to decorate the shapes.
-
-:::info
-
-You can copy the below test examples and replace the elements in the live editor above to test it out.
-
-:::
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "rectangle",
-    x: 50,
-    y: 250,
-    width: 200,
-    height: 100,
-    backgroundColor: "#c0eb75",
-    strokeWidth: 2,
-  },
-  {
-    type: "ellipse",
-    x: 300,
-    y: 250,
-    width: 200,
-    height: 100,
-    backgroundColor: "#ffc9c9",
-    strokeStyle: "dotted",
-    fillStyle: "solid",
-    strokeWidth: 2,
-  },
-  {
-    type: "diamond",
-    x: 550,
-    y: 250,
-    width: 200,
-    height: 100,
-    backgroundColor: "#a5d8ff",
-    strokeColor: "#1971c2",
-    strokeStyle: "dashed",
-    fillStyle: "cross-hatch",
-    strokeWidth: 2,
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/70ca7063-88fb-434c-838a-cd466e1bc3c2)
-
-### Text Element
-
-The `type`, `x`, `y` and `text` properties are required to create a text element, rest of the attributes are optional
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "text",
-    x: 100,
-    y: 100,
-    text: "HELLO WORLD!",
-  },
-  {
-    type: "text",
-    x: 100,
-    y: 150,
-    text: "STYLED HELLO WORLD!",
-    fontSize: 20,
-    strokeColor: "#5f3dc4",
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/085c7ac3-7952-4f22-b9c3-6beb51438526)
-
-### Lines and Arrows
-
-The `type`, `x`, and `y` properties are required, rest of the attributes are optional
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "arrow",
-    x: 100,
-    y: 20,
-  },
-  {
-    type: "line",
-    x: 100,
-    y: 60,
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/0c22a06b-b568-4ab5-9848-a5f0160f66a6)
-
-#### With Addtional properties
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "arrow",
-    x: 450,
-    y: 20,
-    startArrowhead: "dot",
-    endArrowhead: "triangle",
-    strokeColor: "#1971c2",
-    strokeWidth: 2,
-  },
-  {
-    type: "line",
-    x: 450,
-    y: 60,
-    strokeColor: "#2f9e44",
-    strokeWidth: 2,
-    strokeStyle: "dotted",
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/14f1bf3f-ad81-4096-8c1c-f35235084ec5)
-
-### Text Containers
-
-In addition to `type`, `x` and `y` properties, [`label`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L124C7-L130C59) property is required for text containers. The `text` property in `label` is required, rest of the attributes are optional.
-
-If you don't provide the dimensions of container, we calculate it based of the label dimensions.
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "rectangle",
-    x: 300,
-    y: 290,
-    label: {
-      text: "RECTANGLE TEXT CONTAINER",
-    },
-  },
-  {
-    type: "ellipse",
-    x: 500,
-    y: 100,
-    label: {
-      text: "ELLIPSE\n TEXT CONTAINER",
-    },
-  },
-  {
-    type: "diamond",
-    x: 100,
-    y: 100,
-    label: {
-      text: "DIAMOND\nTEXT CONTAINER",
-    },
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/1e2c7b5d-fcb4-4f86-946d-0bfb0e97d532)
-
-#### With Additional properties
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "diamond",
-    x: -120,
-    y: 100,
-    width: 270,
-    backgroundColor: "#fff3bf",
-    strokeWidth: 2,
-    label: {
-      text: "STYLED DIAMOND TEXT CONTAINER",
-      strokeColor: "#099268",
-      fontSize: 20,
-    },
-  },
-  {
-    type: "rectangle",
-    x: 180,
-    y: 150,
-    width: 200,
-    strokeColor: "#c2255c",
-    label: {
-      text: "TOP LEFT ALIGNED RECTANGLE TEXT CONTAINER",
-      textAlign: "left",
-      verticalAlign: "top",
-      fontSize: 20,
-    },
-  },
-  {
-    type: "ellipse",
-    x: 400,
-    y: 130,
-    strokeColor: "#f08c00",
-    backgroundColor: "#ffec99",
-    width: 200,
-    label: {
-      text: "STYLED ELLIPSE TEXT CONTAINER",
-      strokeColor: "#c2255c",
-    },
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/f8123cd1-c9aa-452d-b96b-05c846c5030d)
-
-### Labelled Arrows
-
-Similar to Text Containers, you can create labelled arrows as well.
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "arrow",
-    x: 100,
-    y: 100,
-    label: {
-      text: "LABELED ARROW",
-    },
-  },
-  {
-    type: "arrow",
-    x: 100,
-    y: 200,
-    label: {
-      text: "STYLED LABELED ARROW",
-      strokeColor: "#099268",
-      fontSize: 20,
-    },
-  },
-  {
-    type: "arrow",
-    x: 100,
-    y: 300,
-    strokeColor: "#1098ad",
-    strokeWidth: 2,
-    label: {
-      text: "ANOTHER STYLED LABELLED ARROW",
-    },
-  },
-  {
-    type: "arrow",
-    x: 100,
-    y: 400,
-    strokeColor: "#1098ad",
-    strokeWidth: 2,
-    label: {
-      text: "ANOTHER STYLED LABELLED ARROW",
-      strokeColor: "#099268",
-    },
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/70635e9b-f1c8-4839-89e1-73b813abeb93)
-
-### Arrow bindings
-
-To bind arrow to a shape you need to specify its [`start`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L86) and [`end`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L54) properties. You need to pass either `type` or `id` property in `start` and `end` properties, rest of the attributes are optional
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "arrow",
-    x: 255,
-    y: 239,
-    label: {
-      text: "HELLO WORLD!!",
-    },
-    start: {
-      type: "rectangle",
-    },
-    end: {
-      type: "ellipse",
-    },
-  },
-]);
-```
-
-When position for `start` and `end ` properties are not specified, we compute it according to arrow position.
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/5aff09fd-b7e8-4c63-98be-da40b0698704)
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "arrow",
-    x: 255,
-    y: 239,
-    label: {
-      text: "HELLO WORLD!!",
-    },
-    start: {
-      type: "text",
-      text: "HEYYYYY",
-    },
-    end: {
-      type: "text",
-      text: "WHATS UP ?",
-    },
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/2a9f03ac-e45c-4fbd-9be0-5d9f8c8e0343)
-
-#### When passing `id`
-
-Useful when you want to bind multiple arrows to one diagram / use some existing diagram
-
-```js
-convertToExcalidrawElements([
-  {
-    type: "ellipse",
-    id: "ellipse-1",
-    strokeColor: "#66a80f",
-    x: 390,
-    y: 356,
-    width: 150,
-    height: 150,
-    backgroundColor: "#d8f5a2",
-  },
-  {
-    type: "diamond",
-    id: "diamond-1",
-    strokeColor: "#9c36b5",
-    width: 100,
-    x: -30,
-    y: 380,
-  },
-  {
-    type: "arrow",
-    x: 100,
-    y: 440,
-    width: 295,
-    height: 35,
-    strokeColor: "#1864ab",
-    start: {
-      type: "rectangle",
-      width: 150,
-      height: 150,
-    },
-    end: {
-      id: "ellipse-1",
-    },
-  },
-  {
-    type: "arrow",
-    x: 60,
-    y: 420,
-    width: 330,
-    strokeColor: "#e67700",
-    start: {
-      id: "diamond-1",
-    },
-    end: {
-      id: "ellipse-1",
-    },
-  },
-]);
-```
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/a8b047c8-2eed-4aea-82a2-e1e6bbddb8d4)
-
-### Frames
-
-To create a frame, you need to pass `type`, `children` (list of Excalidraw element ids). The rest of the attributes are optional.
-
-```ts
-{
-  type: "frame";
-  children: readonly ExcalidrawElement["id"][];
-  name?: string;
- } & Partial<ExcalidrawFrameElement>);
-```
-
-```ts
-convertToExcalidrawElements([
-  {
-    "type": "rectangle",
-    "x": 10,
-    "y": 10,
-    "strokeWidth": 2,
-    "id": "1"
-  },
-  {
-    "type": "diamond",
-    "x": 120,
-    "y": 20,
-    "backgroundColor": "#fff3bf",
-    "strokeWidth": 2,
-    "label": {
-      "text": "HELLO EXCALIDRAW",
-      "strokeColor": "#099268",
-      "fontSize": 30
-    },
-    "id": "2"
-  },
-  {
-    "type": "frame",
-    "children": ["1", "2"],
-    "name": "My frame"
-  }]
-}
-```

dev-docs/docs/@excalidraw/excalidraw/api/props/initialdata.mdx

@@ -1,18 +1,18 @@
 # initialData
 
 <pre>
-&#123; elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a> &#125;
+&#123; elements?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>, appState?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a> &#125;
 </pre>
 
 This helps to load Excalidraw with `initialData`. It must be an object or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to an object containing the below optional fields.
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) | The `elements` with which `Excalidraw` should be mounted. |
-| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | The `AppState` with which `Excalidraw` should be mounted. |
+| `elements` | [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) | The `elements` with which `Excalidraw` should be mounted. |
+| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | The `AppState` with which `Excalidraw` should be mounted. |
 | `scrollToContent` | `boolean` | This attribute indicates whether to `scroll` to the nearest element to center once `Excalidraw` is mounted. By default, it will not scroll the nearest element to the center. Make sure you pass `initialData.appState.scrollX` and `initialData.appState.scrollY` when `scrollToContent` is false so that scroll positions are retained |
-| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L247) &#124; Promise&lt;[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L200)&gt; | This library items with which `Excalidraw` should be mounted. |
-| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L82) | The `files` added to the scene. |
+| `libraryItems` | [LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L247) &#124; Promise&lt;[LibraryItems](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200)&gt; | This library items with which `Excalidraw` should be mounted. |
+| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L82) | The `files` added to the scene. |
 
 You might want to use this when you want to load excalidraw with some initial elements and app state.
 

dev-docs/docs/@excalidraw/excalidraw/api/props/props.mdx

@@ -1,11 +1,11 @@
 # Props
 
-All `props` are _optional_.
+All `props` are *optional*.
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) | `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
-| [`excalidrawAPI`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api) | `function` | _ | Callback triggered with the excalidraw api once rendered |
+| [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata) |  `object` &#124; `null` &#124; <code>Promise<object &#124; null></code> | `null` | The initial data with which app loads. |
+| [`ref`](/docs/@excalidraw/excalidraw/api/props/ref) | `object` | _ | `Ref` to be passed to Excalidraw |
 | [`isCollaborating`](#iscollaborating) | `boolean` | _ | This indicates if the app is in `collaboration` mode |
 | [`onChange`](#onchange) | `function` | _ | This callback is triggered whenever the component updates due to any change. This callback will receive the excalidraw `elements` and the current `app state`. |
 | [`onPointerUpdate`](#onpointerupdate) | `function` | _ | Callback triggered when mouse pointer is updated. |
@@ -17,27 +17,26 @@ All `props` are _optional_.
 | [`langCode`](#langcode) | `string` | `en` | Language code string to be used in Excalidraw |
 | [`renderTopRightUI`](/docs/@excalidraw/excalidraw/api/props/render-props#rendertoprightui) | `function` | _ | Render function that renders custom UI in top right corner |
 | [`renderCustomStats`](/docs/@excalidraw/excalidraw/api/props/render-props#rendercustomstats) | `function` | _ | Render function that can be used to render custom stats on the stats dialog. |
+| [`renderSidebar`](/docs/@excalidraw/excalidraw/api/props/render-props#rendersidebar) | `function` | _ | Render function that renders custom sidebar. |
 | [`viewModeEnabled`](#viewmodeenabled) | `boolean` | _ | This indicates if the app is in `view` mode. |
 | [`zenModeEnabled`](#zenmodeenabled) | `boolean` | _ | This indicates if the `zen` mode is enabled |
 | [`gridModeEnabled`](#gridmodeenabled) | `boolean` | _ | This indicates if the `grid` mode is enabled |
 | [`libraryReturnUrl`](#libraryreturnurl) | `string` | _ | What URL should [libraries.excalidraw.com](https://libraries.excalidraw.com) be installed to |
 | [`theme`](#theme) | `"light"` &#124; `"dark"` | `"light"` | The theme of the Excalidraw component |
 | [`name`](#name) | `string` |  | Name of the drawing |
-| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](/docs/@excalidraw/excalidraw/api/props/ui-options#canvasactions) |
+| [`UIOptions`](/docs/@excalidraw/excalidraw/api/props/ui-options) | `object` | [DEFAULT UI OPTIONS](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L151) | To customise UI options. Currently we support customising [`canvas actions`](#canvasactions) |
 | [`detectScroll`](#detectscroll) | `boolean` | `true` | Indicates whether to update the offsets when nearest ancestor is scrolled. |
 | [`handleKeyboardGlobally`](#handlekeyboardglobally) | `boolean` | `false` | Indicates whether to bind the keyboard events to document. |
 | [`autoFocus`](#autofocus) | `boolean` | `false` | indicates whether to focus the Excalidraw component on page load |
 | [`generateIdForFile`](#generateidforfile) | `function` | _ | Allows you to override `id` generation for files added on canvas |
-| [`validateEmbeddable`](#validateEmbeddable) | string[] | `boolean | RegExp | RegExp[] | ((link: string) => boolean | undefined)` | \_ | use for custom src url validation |
-| [`renderEmbeddable`](/docs/@excalidraw/excalidraw/api/props/render-props#renderEmbeddable) | `function` | \_ | Render function that can override the built-in `<iframe>` |
 
 ### Storing custom data on Excalidraw elements
 
-Beyond attributes that Excalidraw elements already support, you can store `custom` data on each `element` in a `customData` object. The type of the attribute is [`Record<string, any>`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L66) and is optional.
+Beyond attributes that Excalidraw elements already support, you can store `custom` data on each `element` in a `customData` object. The type of the attribute is [`Record<string, any>`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L66) and is optional.
 
 You can use this to add any extra information you need to keep track of.
 
-You can add `customData` to elements when passing them as [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata), or using [`updateScene`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api#updatescene) / [`updateLibrary`](/docs/@excalidraw/excalidraw/api/props/excalidraw-api#updatelibrary) afterwards.
+You can add `customData` to elements when passing them as [`initialData`](/docs/@excalidraw/excalidraw/api/props/initialdata), or using [`updateScene`](/docs/@excalidraw/excalidraw/api/props/ref#updatescene) / [`updateLibrary`](/docs/@excalidraw/excalidraw/api/props/ref#updatelibrary) afterwards.
 
 ```js showLineNumbers
 {
@@ -59,11 +58,11 @@ Every time component updates, this callback if passed will get triggered and has
 (excalidrawElements, appState, files) => void;
 ```
 
-1. `excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) in the scene.
+1. `excalidrawElements`: Array of [excalidrawElements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) in the scene.
 
-2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) of the scene.
+2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) of the scene.
 
-3. `files`: The [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) which are added to the scene.
+3. `files`: The [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) which are added to the scene.
 
 Here you can try saving the data to your backend or local storage for example.
 
@@ -79,30 +78,22 @@ This callback is triggered when mouse pointer is updated.
 
 2.`button`: The position of the button. This will be one of `["down", "up"]`
 
-3.`pointersMap`: [`pointers`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L131) map of the scene
+3.`pointersMap`: [`pointers`](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L131) map of the scene
 
 ```js
 (exportedElements, appState, canvas) => void
 ```
 
-1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L87) which needs to be exported.
-2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) of the scene.
+1. `exportedElements`: An array of [non deleted elements](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L87) which needs to be exported.
+2. `appState`: [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) of the scene.
 3. `canvas`: The `HTMLCanvasElement` of the scene.
 
 ### onPointerDown
 
 This prop if passed will be triggered on pointer down events and has the below signature.
 
-
 <pre>
-(activeTool:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L115">
-    {" "}
-    AppState["activeTool"]
-  </a>
-  , pointerDownState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L424">
-    PointerDownState
-  </a>) => void
+(activeTool: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L115"> AppState["activeTool"]</a>, pointerDownState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L424">PointerDownState</a>) => void
 </pre>
 
 ### onScrollChange
@@ -118,11 +109,7 @@ This prop if passed will be triggered when canvas is scrolled and has the below
 This callback is triggered if passed when something is pasted into the scene. You can use this callback in case you want to do something additional when the paste event occurs.
 
 <pre>
-  (data:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/clipboard.ts#L18">
-    ClipboardData
-  </a>
-  , event: ClipboardEvent &#124; null) => boolean
+(data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/clipboard.ts#L18">ClipboardData</a>, event: ClipboardEvent &#124; null) => boolean
 </pre>
 
 This callback must return a `boolean` value or a [promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/Promise) which resolves to a boolean value.
@@ -135,7 +122,7 @@ This callback if supplied will get triggered when the library is updated and has
 
 <pre>
   (items:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L200">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">
     LibraryItems
   </a>
   ) => void | Promise&lt;any&gt;
@@ -148,11 +135,8 @@ It is invoked with empty items when user clears the library. You can use this ca
 This prop if passed will be triggered when clicked on `link`. To handle the redirect yourself (such as when using your own router for internal links), you must call `event.preventDefault()`.
 
 <pre>
-  (element:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
-    ExcalidrawElement
-  </a>
-  , event: CustomEvent&lt;&#123; nativeEvent: MouseEvent }&gt;) => void
+(element: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement</a>, 
+ event: CustomEvent&lt;&#123; nativeEvent: MouseEvent }&gt;) => void
 </pre>
 
 Example:
@@ -182,7 +166,7 @@ const onLinkOpen: ExcalidrawProps["onLinkOpen"] = useCallback(
 
 ### langCode
 
-Determines the `language` of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below.
+Determines the `language` of the UI. It should be one of the [available language codes](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L14). Defaults to `en` (English). We also export default language and supported languages which you can import as shown below.
 
 ```js
 import { defaultLang, languages } from "@excalidraw/excalidraw";
@@ -191,34 +175,34 @@ import { defaultLang, languages } from "@excalidraw/excalidraw";
 | name | type |
 | --- | --- |
 | `defaultLang` | `string` |
-| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L15) |
+| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) |
 
 ### viewModeEnabled
 
-This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over _intialData.appState.viewModeEnabled_, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+This prop indicates whether the app is in `view mode`. When supplied, the value takes precedence over *intialData.appState.viewModeEnabled*, the `view mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
 ### zenModeEnabled
 
-This prop indicates whether the app is in `zen mode`. When supplied, the value takes precedence over _intialData.appState.zenModeEnabled_, the `zen mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+This prop indicates whether the app is in `zen mode`. When supplied, the value takes precedence over *intialData.appState.zenModeEnabled*, the `zen mode` will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
 ### gridModeEnabled
 
-This prop indicates whether the shows the grid. When supplied, the value takes precedence over _intialData.appState.gridModeEnabled_, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app.
+This prop indicates whether the shows the grid. When supplied, the value takes precedence over *intialData.appState.gridModeEnabled*, the grid will be fully controlled by the host app, and users won't be able to toggle it from within the app.
 
 ### libraryReturnUrl
 
 If supplied, this URL will be used when user tries to install a library from [libraries.excalidraw.com](https://libraries.excalidraw.com).  
-Defaults to _window.location.origin + window.location.pathname_. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
+Defaults to *window.location.origin + window.location.pathname*. To install the libraries in the same tab from which it was opened, you need to set `window.name` (to any alphanumeric string) — if it's not set it will open in a new tab.
 
 ### theme
 
-This prop controls Excalidraw's theme. When supplied, the value takes precedence over _intialData.appState.theme_, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app unless _UIOptions.canvasActions.toggleTheme_ is set to `true`, in which case the `theme` prop will control Excalidraw's default theme with ability to allow theme switching (you must take care of updating the `theme` prop when you detect a change to `appState.theme` from the [onChange](#onchange) callback).
+This prop controls Excalidraw's theme. When supplied, the value takes precedence over *intialData.appState.theme*, the theme will be fully controlled by the host app, and users won't be able to toggle it from within the app unless *UIOptions.canvasActions.toggleTheme* is set to `true`, in which case the `theme` prop will control Excalidraw's default theme with ability to allow theme switching (you must take care of updating the `theme` prop when you detect a change to `appState.theme` from the [onChange](#onchange) callback).
 
 You can use [`THEME`](/docs/@excalidraw/excalidraw/api/utils#theme) to specify the theme.
 
 ### name
 
-This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over _intialData.appState.name_, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
+This prop sets the `name` of the drawing which will be used when exporting the drawing. When supplied, the value takes precedence over *intialData.appState.name*, the `name` will be fully controlled by host app and the users won't be able to edit from within Excalidraw.
 
 
 ### detectScroll
@@ -231,6 +215,7 @@ Indicates whether to bind keyboard events to `document`. Disabled by default, me
 
 Enable this if you want Excalidraw to handle keyboard even if the component isn't focused (e.g. a user is interacting with the navbar, sidebar, or similar).
 
+
 ### autoFocus
 
 This prop indicates whether to `focus` the Excalidraw component on page load. Defaults to false.
@@ -243,12 +228,3 @@ Allows you to override `id` generation for files added on canvas (images). By de
 (file: File) => string | Promise<string>
 ```
 
-### validateEmbeddable
-
-```tsx
-validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) => boolean | undefined)
-```
-
-This is an optional property. By default we support a handful of well-known sites. You may allow additional sites or disallow the default ones by supplying a custom validator. If you pass `true`, all URLs will be allowed. You can also supply a list of hostnames, RegExp (or list of RegExp objects), or a function. If the function returns `undefined`, the built-in validator will be used.
-
-Supplying a list of hostnames (with or without `www.`) is the preferred way to allow a specific list of domains.

dev-docs/docs/@excalidraw/excalidraw/api/props/ref.mdx

@@ -1,26 +1,14 @@
-# excalidrawAPI
-
+# ref
 <pre>
-  (api:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L616">
-    ExcalidrawAPI
-  </a>
-  ) => void;
+<a href="https://reactjs.org/docs/refs-and-the-dom.html#creating-refs">createRef</a> &#124; <a href="https://reactjs.org/docs/hooks-reference.html#useref">useRef</a> &#124; <a href="https://reactjs.org/docs/refs-and-the-dom.html#callback-refs">callbackRef</a> &#124; <br/>&#123; current: &#123; readyPromise: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L460">resolvablePromise</a> } }
 </pre>
 
-Once the callback is triggered, you will need to store the api in state to access it later.
-
-```jsx showLineNumbers
-export default function App() {
-  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
-  return <Excalidraw excalidrawAPI={{(api)=> setExcalidrawAPI(api)}} />;
-}
-```
-
-You can use this prop when you want to access some [Excalidraw APIs](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L616). We expose the below APIs :point_down:
+You can pass a `ref` when you want to access some excalidraw APIs. We expose the below APIs:
 
 | API | Signature | Usage |
 | --- | --- | --- |
+| ready | `boolean` | This is set to true once Excalidraw is rendered |
+| [readyPromise](#readypromise) | `function` | This promise will be resolved with the api once excalidraw has rendered. This will be helpful when you want do some action on the host app once this promise resolves. For this to work you will have to pass ref as shown [here](#readypromise) |
 | [updateScene](#updatescene) | `function` | updates the scene with the sceneData |
 | [updateLibrary](#updatelibrary) | `function` | updates the scene with the sceneData |
 | [addFiles](#addfiles) | `function` | add files data to the appState |
@@ -38,21 +26,60 @@ You can use this prop when you want to access some [Excalidraw APIs](https://git
 | [setCursor](#setcursor) | `function` | This API can be used to set customise the mouse cursor on the canvas |
 | [resetCursor](#resetcursor) | `function` | This API can be used to reset to default mouse cursor on the canvas |
 | [toggleMenu](#togglemenu) | `function` | Toggles specific menus on/off |
-| [onChange](#onChange) | `function` | Subscribes to change events |
-| [onPointerDown](#onPointerDown) | `function` | Subscribes to `pointerdown` events |
-| [onPointerUp](#onPointerUp) | `function` | Subscribes to `pointerup` events |
 
-:::info The `Ref` support has been removed in v0.17.0 so if you are using refs, please update the integration to use the `excalidrawAPI`.
+## readyPromise
 
-Additionally `ready` and `readyPromise` from the API have been discontinued. These APIs were found to be superfluous, and as part of the effort to streamline the APIs and maintain simplicity, they were removed in version v0.17.0.
+<pre>
+  const excalidrawRef = &#123; current:&#123; readyPromise:
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/utils.ts#L460">
+    &nbsp;resolvablePromise
+  </a>
+  &nbsp;&#125; &#125;
+</pre>
 
-:::
+Since plain object is passed as a `ref`, the `readyPromise` is resolved as soon as the component is mounted. Most of the time you will not need this unless you have a specific use case where you can't pass the `ref` in the react way and want to do some action on the host when this promise resolves.
+
+```jsx showLineNumbers
+const resolvablePromise = () => {
+  let resolve;
+  let reject;
+  const promise = new Promise((_resolve, _reject) => {
+    resolve = _resolve;
+    reject = _reject;
+  });
+  promise.resolve = resolve;
+  promise.reject = reject;
+  return promise;
+};
+
+const App = () => {
+  const excalidrawRef = useMemo(
+    () => ({
+      current: {
+        readyPromise: resolvablePromise(),
+      },
+    }),
+    [],
+  );
+
+  useEffect(() => {
+    excalidrawRef.current.readyPromise.then((api) => {
+      console.log("loaded", api);
+    });
+  }, [excalidrawRef]);
+  return (
+    <div style={{ height: "500px" }}>
+      <Excalidraw ref={excalidrawRef} />
+    </div>
+  );
+};
+```
 
 ## updateScene
 
 <pre>
   (scene:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L339">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L339">
     sceneData
   </a>
   ) => void
@@ -62,9 +89,9 @@ You can use this function to update the scene with the sceneData. It accepts the
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L38) | The `elements` to be updated in the scene |
-| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L39) | The `appState` to be updated in the scene. |
-| `collaborators` | <code>Map<string, <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L37">Collaborator></a></code> | The list of collaborators to be updated in the scene. |
+| `elements` | [`ImportedDataState["elements"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L38) | The `elements` to be updated in the scene |
+| `appState` | [`ImportedDataState["appState"]`](https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L39) | The `appState` to be updated in the scene. |
+| `collaborators` | <code>Map<string, <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L37">Collaborator></a></code> | The list of collaborators to be updated in the scene. |
 | `commitToHistory` | `boolean` | Implies if the `history (undo/redo)` should be recorded. Defaults to `false`. |
 
 ```jsx live
@@ -112,9 +139,7 @@ function App() {
   return (
     <div style={{ height: "500px" }}>
       <p style={{ fontSize: "16px" }}> Click to update the scene</p>
-      <button className="custom-button" onClick={updateScene}>
-        Update Scene
-      </button>
+      <button className="custom-button" onClick={updateScene}>Update Scene</button>
       <Excalidraw ref={(api) => setExcalidrawAPI(api)} />
     </div>
   );
@@ -125,13 +150,13 @@ function App() {
 
 <pre>
   (opts: &#123; <br /> libraryItems:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L249">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L249">
     LibraryItemsSource
   </a>
   ;<br /> merge?: boolean; <br /> prompt?: boolean;
   <br /> openLibraryMenu?: boolean;
   <br /> defaultStatus?: "unpublished" | "published"; <br /> &#125;) => Promise&lt;
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L246">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L246">
     LibraryItems
   </a>
   &gt;
@@ -141,7 +166,7 @@ You can use this function to update the library. It accepts the below attributes
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `libraryItems` | [LibraryItemsSource](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L249) | \_ | The `libraryItems` to be replaced/merged with current library |
+| `libraryItems` | [LibraryItemsSource](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L249) | \_ | The `libraryItems` to be replaced/merged with current library |
 | `merge` | boolean | `false` | Whether to merge with existing library items. |
 | `prompt` | boolean | `false` | Whether to prompt user for confirmation. |
 | `openLibraryMenu` | boolean | `false` | Keep the library menu open after library is updated. |
@@ -162,8 +187,7 @@ function App() {
   return (
     <div style={{ height: "500px" }}>
       <p style={{ fontSize: "16px" }}> Click to update the library items</p>
-      <button
-        className="custom-button"
+      <button className="custom-button"
         onClick={() => {
           const libraryItems = [
             {
@@ -181,15 +205,17 @@ function App() {
           ];
           excalidrawAPI.updateLibrary({
             libraryItems,
-            openLibraryMenu: true,
+            openLibraryMenu: true
+
           });
+         
         }}
       >
         Update Library
       </button>
       <Excalidraw
         ref={(api) => setExcalidrawAPI(api)}
-        // initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/packages/excalidraw/initialData.js
+        // initial data retrieved from https://github.com/excalidraw/excalidraw/blob/master/dev-docs/src/initialData.js
         initialData={{
           libraryItems: initialData.libraryItems,
           appState: { openSidebar: "library" },
@@ -204,7 +230,7 @@ function App() {
 
 <pre>
   (files:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59">
     BinaryFileData
   </a>
   ) => void
@@ -224,7 +250,7 @@ Resets the scene. If `resetLoadingState` is passed as true then it will also for
 
 <pre>
   () =>{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
     ExcalidrawElement[]
   </a>
 </pre>
@@ -235,7 +261,7 @@ Returns all the elements including the deleted in the scene.
 
 <pre>
   () => NonDeleted&#60;
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
     ExcalidrawElement
   </a>
   []&#62;
@@ -247,7 +273,7 @@ Returns all the elements excluding the deleted in the scene
 
 <pre>
   () =>{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
     AppState
   </a>
 </pre>
@@ -266,34 +292,19 @@ This is the history API. history.clear() will clear the history.
 
 ## scrollToContent
 
-```tsx
-(
-  target?: ExcalidrawElement | ExcalidrawElement[],
-  opts?:
-      | {
-          fitToContent?: boolean;
-          animate?: boolean;
-          duration?: number;
-        }
-      | {
-          fitToViewport?: boolean;
-          viewportZoomFactor?: number;
-          animate?: boolean;
-          duration?: number;
-        }
-) => void
-```
+<pre>
+  (target?:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement
+  </a>{" "}
+  &#124;{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
+    ExcalidrawElement
+  </a>
+  []) => void
+</pre>
 
-Scroll the nearest element out of the elements supplied to the center of the viewport. Defaults to the elements on the scene.
-
-| Attribute | type | default | Description |
-| --- | --- | --- | --- |
-| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) &#124; [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L115) | All scene elements | The element(s) to scroll to. |
-| opts.fitToContent | boolean | false | Whether to fit the elements to viewport by automatically changing zoom as needed. Note that the zoom range is between 10%-100%. |
-| opts.fitToViewport | boolean | false | Similar to fitToContent but the zoom range is not limited. If elements are smaller than the viewport, zoom will go above 100%. |
-| opts.viewportZoomFactor | number | 0.7 | when fitToViewport=true, how much screen should the content cover, between 0.1 (10%) and 1 (100%) |
-| opts.animate | boolean | false | Whether to animate between starting and ending position. Note that for larger scenes the animation may not be smooth due to performance issues. |
-| opts.duration | number | 500 | Duration of the animation if `opts.animate` is `true`. |
+Scroll the nearest element out of the elements supplied to the center. Defaults to the elements on the scene.
 
 ## refresh
 
@@ -312,7 +323,7 @@ For any other cases if the position of excalidraw is updated (example due to scr
 This API can be used to show the toast with custom message.
 
 ```tsx
-({ message: string, closable?:boolean,duration?:number
+({ message: string, closable?:boolean,duration?:number 
   } | null) => void
 ```
 
@@ -336,7 +347,7 @@ The unique id of the excalidraw component. This can be used to identify the exca
 
 <pre>
   () =>{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L82">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L82">
     files
   </a>
 </pre>
@@ -347,43 +358,29 @@ This API can be used to get the files present in the scene. It may contain files
 
 This API has the below signature. It sets the `tool` passed in param as the active tool.
 
-```ts
-(
-  tool: (
-    | (
-        | { type: Exclude<ToolType, "image"> }
-        | {
-            type: Extract<ToolType, "image">;
-            insertOnCanvasDirectly?: boolean;
-          }
-      )
-    | { type: "custom"; customType: string }
-  ) & { locked?: boolean },
-) => {};
-```
 
-| Name | Type | Default | Description |
-| --- | --- | --- | --- |
-| `type` | [ToolType](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L91) | `selection` | The tool type which should be set as active tool. When setting `image` as active tool, the insertion onto canvas when using image tool is disabled by default, so you can enable it by setting `insertOnCanvasDirectly` to `true` |
-| `locked` | `boolean` | `false` | Indicates whether the the active tool should be locked. It behaves the same way when using the `lock` tool in the editor interface |
+<pre>
+(tool: <br/>  &#123; type: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/shapes.tsx#L15">SHAPES</a>[number]["value"]&#124; "eraser" &#125; &#124;<br/>  &#123; type: "custom"; customType: string &#125;) => void
+</pre>
 
 ## setCursor
 
-This API can be used to customise the mouse cursor on the canvas and has the below signature. It sets the mouse cursor to the cursor passed in param.
+This API can be used to customise the mouse cursor on the canvas and has the below signature.   
+It sets the mouse cursor to the cursor passed in param.
 
 ```tsx
 (cursor: string) => void
 ```
 
-## toggleSidebar
+## toggleMenu
 
 ```tsx
-(opts: { name: string; tab?: string; force?: boolean }) => boolean;
+(type: "library" | "customSidebar", force?: boolean) => boolean;
 ```
 
-This API can be used to toggle sidebar, optionally opening a specific sidebar tab. It returns whether the sidebar was toggled on or off. If the `force` flag passed, it will force the sidebar to be toggled either on/off.
+This API can be used to toggle a specific menu (currently only the sidebars), and returns whether the menu was toggled on or off. If the `force` flag passed, it will force the menu to be toggled either on/off based on the `boolean` passed.
 
-This API is especially useful when you render a custom [`<Sidebar/>`](/docs/@excalidraw/excalidraw/api/children-components/sidebar), and you want to toggle it from your app based on a user action.
+This API is especially useful when you render a custom sidebar using [`renderSidebar`](#rendersidebar) prop, and you want to toggle it from your app based on a user action.
 
 ## resetCursor
 
@@ -392,51 +389,3 @@ This API is especially useful when you render a custom [`<Sidebar/>`](/docs/@exc
 ```
 
 This API can be used to reset to default mouse cursor.
-
-## onChange
-
-```tsx
-(
-  callback: (
-    elements: readonly ExcalidrawElement[],
-    appState: AppState,
-    files: BinaryFiles,
-  ) => void
-) => () => void
-```
-
-Subscribes to change events, similar to [`props.onChange`](/docs/@excalidraw/excalidraw/api/props#onchange).
-
-Returns an unsubscribe function.
-
-## onPointerDown
-
-```tsx
-(
-  callback: (
-    activeTool: AppState["activeTool"],
-    pointerDownState: PointerDownState,
-    event: React.PointerEvent<HTMLElement>,
-  ) => void,
-) => () => void
-```
-
-Subscribes to canvas `pointerdown` events.
-
-Returns an unsubscribe function.
-
-## onPointerUp
-
-```tsx
-(
-  callback: (
-    activeTool: AppState["activeTool"],
-    pointerDownState: PointerDownState,
-    event: PointerEvent,
-  ) => void,
-) => () => void
-```
-
-Subscribes to canvas `pointerup` events.
-
-Returns an unsubscribe function.

dev-docs/docs/@excalidraw/excalidraw/api/props/render-props.mdx

@@ -3,10 +3,11 @@
 ## renderTopRightUI
 
 <pre>
-  (isMobile: boolean, appState:
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
+  (isMobile: boolean, appState:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">
     AppState
-  </a>) => JSX | null
+  </a>
+  ) => JSX | null
 </pre>
 
 A function returning `JSX` to render `custom` UI in the top right corner of the app.
@@ -28,7 +29,8 @@ function App() {
               }}
               onClick={() => window.alert("This is dummy top right UI")}
             >
-              Click me
+              {" "}
+              Click me{" "}
             </button>
           );
         }}
@@ -53,7 +55,8 @@ function App() {
       <Excalidraw
         renderCustomStats={() => (
           <p style={{ color: "#70b1ec", fontWeight: "bold" }}>
-            Dummy stats will be shown here
+            {" "}
+            Dummy stats will be shown here{" "}
           </p>
         )}
       />
@@ -62,19 +65,62 @@ function App() {
 }
 ```
 
-## renderEmbeddable
+## renderSidebar
 
-<pre>
-  (element: NonDeleted&lt;ExcalidrawEmbeddableElement&gt;, appState:{" "}
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">
-    AppState
-  </a>
-  ) => JSX.Element | null
-</pre>
+```tsx
+() => JSX | null;
+```
 
-Allows you to replace the renderer for embeddable elements (which renders `<iframe>` elements).
+You can render `custom sidebar` using this prop. This sidebar is the same that the library menu sidebar is using, and can be used for any purposes your app needs.
 
-| Parameter | Type | Description |
+You need to import the `Sidebar` component from `excalidraw` package and pass your content as its `children`. The function `renderSidebar` should return the `Sidebar` instance.
+
+### Sidebar
+The `<Sidebar>` component takes these props (all are optional except `children`):
+
+| Prop | Type | Description |
 | --- | --- | --- |
-| `element` | `NonDeleted<ExcalidrawEmbeddableElement>` | The embeddable element to be rendered. |
-| `appState` | `AppState` | The current state of the UI. |
+| `children` | `React.ReactNode` | Content you want to render inside the `sidebar`. |
+| `onClose` | `function` | Invoked when the component is closed (by user, or the editor). No need to act on this event, as the editor manages the sidebar open state on its own. |
+| `onDock` | `function` | Invoked when the user toggles the `dock` button. The callback recieves a `boolean` parameter `isDocked` which indicates whether the sidebar is `docked` |
+| `docked` | `boolean` | Indicates whether the sidebar is`docked`. By default, the sidebar is `undocked`. If passed, the docking becomes controlled, and you are responsible for updating the `docked` state by listening on `onDock` callback. To decide the breakpoint for docking you can use [UIOptions.dockedSidebarBreakpoint](/docs/@excalidraw/excalidraw/api/props/ui-options#dockedsidebarbreakpoint) for more info on docking. |
+| `dockable` | `boolean` | Indicates whether to show the `dock` button so that user can `dock` the sidebar. If `false`, you can still dock programmatically by passing `docked` as `true`. |
+
+The sidebar will always include a header with `close / dock` buttons (when applicable).
+You can also add custom content to the header, by rendering `<Sidebar.Header>` as a child of the `<Sidebar>` component. Note that the custom header will still include the default buttons.
+
+
+### Sidebar.Header
+
+| name | type | description |
+| --- | --- | --- |
+| children | `React.ReactNode` | Content you want to render inside the sidebar header as a sibling of `close` / `dock` buttons. |
+
+To control the visibility of the sidebar you can use [`toggleMenu("customSidebar")`](/docs/@excalidraw/excalidraw/api/props/ref#togglemenu) api available via `ref`.
+
+```tsx live
+function App() {
+  const [excalidrawAPI, setExcalidrawAPI] = useState(null);
+
+  return (
+    <div style={{ height: "500px" }}>
+      <button className="custom-button" onClick={() => excalidrawAPI.toggleMenu("customSidebar")}>
+        {" "}
+        Toggle Custom Sidebar{" "}
+      </button>
+      <Excalidraw
+        UIOptions={{ dockedSidebarBreakpoint: 100 }}
+        ref={(api) => setExcalidrawAPI(api)}
+        renderSidebar={() => {
+          return (
+            <Sidebar dockable={true}>
+              <Sidebar.Header>Custom Sidebar Header </Sidebar.Header>
+              <p style={{ padding: "1rem" }}> custom Sidebar Content </p>
+            </Sidebar>
+          );
+        }}
+      />
+    </div>
+  );
+}
+```

dev-docs/docs/@excalidraw/excalidraw/api/props/ui-options.mdx

@@ -1,10 +1,10 @@
 # UIOptions
 
-This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) [`welcomeScreen`](#welcmescreen) and [`tools`](#tools).
+This prop can be used to customise UI of Excalidraw. Currently we support customising [`canvasActions`](#canvasactions), [`dockedSidebarBreakpoint`](#dockedsidebarbreakpoint) and [`welcomeScreen`](#welcmescreen).
 
 <pre>
   &#123;
-  <br /> canvasActions?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L372">
+  <br /> canvasActions?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L372">
     CanvasActions
   </a>, <br /> dockedSidebarBreakpoint?: number, <br /> welcomeScreen?: boolean <br />
 
@@ -55,7 +55,7 @@ If `UIOptions.canvasActions.export` is `false` the export button will not be ren
 
 ## dockedSidebarBreakpoint
 
-This prop indicates at what point should we break to a docked, permanent sidebar. If not passed it defaults to [`MQ_RIGHT_SIDEBAR_MAX_WIDTH_PORTRAIT`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/constants.ts#L161).  
+This prop indicates at what point should we break to a docked, permanent sidebar. If not passed it defaults to [`MQ_RIGHT_SIDEBAR_MAX_WIDTH_PORTRAIT`](https://github.com/excalidraw/excalidraw/blob/master/src/constants.ts#L161).  
 If the _width_ of the _excalidraw_ container exceeds _dockedSidebarBreakpoint_, the sidebar will be `dockable` and the button to `dock` the sidebar will be shown  
 If user choses to `dock` the sidebar, it will push the right part of the UI towards the left, making space for the sidebar as shown below.
 
@@ -70,12 +70,3 @@ function App() {
   );
 }
 ```
-
-## tools
-
-This `prop` controls the visibility of the tools in the editor.
-Currently you can control the visibility of `image` tool via this prop.
-
-| Prop | Type | Default | Description |
-| --- | --- | --- | --- |
-| image | boolean | true | Decides whether `image` tool should be visible.

dev-docs/docs/@excalidraw/excalidraw/api/utils/export.mdx

@@ -20,16 +20,16 @@ exportToCanvas(&#123;<br/>&nbsp;
   getDimensions,<br/>&nbsp;
   files,<br/>&nbsp;
   exportPadding?: number;<br/>
-&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L21">ExportOpts</a>
+&#125;: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L21">ExportOpts</a>
 </pre>
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to be exported to canvas. |
-| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L17) | The app state of the scene. |
+| `elements` | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) |  | The elements to be exported to canvas. |
+| `appState` | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L23) | [Default App State](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L17) | The app state of the scene. |
 | [`getDimensions`](#getdimensions) | `function` | _ | A function which returns the `width`, `height`, and optionally `scale` (defaults to  `1`), with which canvas is to be exported. |
 | `maxWidthOrHeight` | `number` | _ | The maximum `width` or `height` of the exported image. If provided, `getDimensions` is ignored. |
-| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59) | _ | The files added to the scene. |
+| `files` | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59) | _ | The files added to the scene. |
 | `exportPadding` | `number` | `10` | The `padding` to be added on canvas. |
 
 
@@ -105,7 +105,7 @@ function App() {
 
 <pre>
 exportToBlob(<br/>&nbsp;
-  opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L14">ExportOpts</a> & &#123;<br/>&nbsp;
+  opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L14">ExportOpts</a> & &#123;<br/>&nbsp;
   mimeType?: string,<br/>&nbsp;
   quality?: number,<br/>&nbsp;
   exportPadding?: number;<br/>
@@ -134,16 +134,16 @@ Returns a promise which resolves with a [blob](https://developer.mozilla.org/en-
 <pre>
 exportToSvg(&#123;<br/>&nbsp;
   elements:&nbsp; 
-    <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">
+    <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">
       ExcalidrawElement[]
     </a>,<br/>&nbsp;
   appState:
-    <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95"> AppState
+    <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95"> AppState
     </a>,<br/>&nbsp;
   exportPadding: number,<br/>&nbsp;
   metadata: string,<br/>&nbsp;
   files:&nbsp;
-  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L59">
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L59">
       BinaryFiles
     </a>,<br/>
 &#125;);
@@ -151,10 +151,10 @@ exportToSvg(&#123;<br/>&nbsp;
 
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
-| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114) |  | The elements to exported as `svg `|
-| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/appState.ts#L11) | The `appState` of the scene |
+| elements | [Excalidraw Element []](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114) |  | The elements to exported as `svg `|
+| appState | [AppState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) | [defaultAppState](https://github.com/excalidraw/excalidraw/blob/master/src/appState.ts#L11) | The `appState` of the scene |
 | exportPadding | number | 10 | The `padding` to be added on canvas |
-| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L64) | undefined | The `files` added to the scene. |
+| files | [BinaryFiles](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L64) | undefined | The `files` added to the scene. |
 
 This function returns a promise which resolves to `svg` of the exported drawing.
 
@@ -164,7 +164,7 @@ This function returns a promise which resolves to `svg` of the exported drawing.
 
 <pre>
 exportToClipboard(<br/>&nbsp;
-  opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/utils.ts#L21">ExportOpts</a> & &#123;<br/>&nbsp;
+  opts: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/packages/utils.ts#L21">ExportOpts</a> & &#123;<br/>&nbsp;
   mimeType?: string,<br/>&nbsp;
   quality?: number;<br/>&nbsp;
   type: 'png' | 'svg' |'json'<br/>

dev-docs/docs/@excalidraw/excalidraw/api/utils/restore.mdx

@@ -8,7 +8,7 @@ id: "restore"
 **_Signature_**
 
 <pre>
-restoreAppState(appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState["appState"]</a>,<br/>&nbsp; localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>> | null): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>
+restoreAppState(appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState["appState"]</a>,<br/>&nbsp; localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>> | null): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>
 </pre>
 
 **_How to use_**
@@ -17,7 +17,7 @@ restoreAppState(appState: <a href="https://github.com/excalidraw/excalidraw/blob
 import { restoreAppState } from "@excalidraw/excalidraw";
 ```
 
-This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95) and if any key is missing, it will be set to its `default` value.
+This function will make sure all the `keys` have appropriate `values` in [appState](https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95) and if any key is missing, it will be set to its `default` value.
 
 When `localAppState` is supplied, it's used in place of values that are missing (`undefined`) in `appState` instead of the defaults.  
 Use this as a way to not override user's defaults if you persist them.
@@ -29,31 +29,12 @@ You can pass `null` / `undefined` if not applicable.
 
 <pre>
 restoreElements(
-  elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a>,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
+  elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a>,<br/>&nbsp;
+  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
+  refreshDimensions?: boolean<br/>
 )
 </pre>
 
-| Prop | Type | Description |
-| ---- | ---- | ---- |
-| `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
-| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> &#124; null &#124; undefined |  When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`. |
-| [`opts`](#opts) | `Object` | The extra optional parameter to configure restored elements
-
-#### localElements
-
-When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`.  
-Use this when you `import` elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the update
-
-#### opts
-The extra optional parameter to configure restored elements. It has the following attributes
-
-| Prop | Type | Description|
-| --- | --- | ------|
-| `refreshDimensions` | `boolean` | Indicates whether we should also `recalculate` text element dimensions. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration. |
-| `repairBindings` |`boolean` | Indicates whether the `bindings` for the elements should be repaired. This is to make sure there are no containers with non existent bound text element id and no bound text elements with non existent container id. |
-
 **_How to use_**
 
 ```js
@@ -62,6 +43,9 @@ import { restoreElements } from "@excalidraw/excalidraw";
 
 This function will make sure all properties of element is correctly set and if any attribute is missing, it will be set to its default value.
 
+When `localElements` are supplied, they are used to ensure that existing restored elements reuse `version` (and increment it), and regenerate `versionNonce`.  
+Use this when you import elements which may already be present in the scene to ensure that you do not disregard the newly imported elements if you're using element version to detect the updates.
+
 Parameter `refreshDimensions` indicates whether we should also `recalculate` text element dimensions. Defaults to `false`. Since this is a potentially costly operation, you may want to disable it if you restore elements in tight loops, such as during collaboration.
 
 ### restore
@@ -69,16 +53,14 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
 **_Signature_**
 
 <pre>
-restore(
-  data: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState</a>,<br/>&nbsp;
-  localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>> | null | undefined,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L4">DataState</a><br/>
-  opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
-
+restoreElements(
+  data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState</a>,<br/>&nbsp;
+  localAppState: Partial&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>> | null | undefined,<br/>&nbsp;
+  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null | undefined<br/>): <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L4">DataState</a>
 )
 </pre>
 
-See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/packages/excalidraw/README.md#restoreElements) about `localElements`.
+See [`restoreAppState()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreAppState) about `localAppState`, and [`restoreElements()`](https://github.com/excalidraw/excalidraw/blob/master/src/packages/excalidraw/README.md#restoreElements) about `localElements`.
 
 **_How to use_**
 
@@ -93,7 +75,7 @@ This function makes sure elements and state is set to appropriate values and set
 **_Signature_**
 
 <pre>
-restoreLibraryItems(libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L34">ImportedDataState["libraryItems"]</a>,<br/>&nbsp;
+restoreLibraryItems(libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L34">ImportedDataState["libraryItems"]</a>,<br/>&nbsp;
 defaultStatus: "published" | "unpublished")
 </pre>
 

dev-docs/docs/@excalidraw/excalidraw/api/utils/utils-intro.md

@@ -8,7 +8,7 @@ These are pure Javascript functions exported from the @excalidraw/excalidraw [`@
 
 ### serializeAsJSON
 
-Takes the scene elements and state and returns a JSON string. `Deleted` elements as well as most properties from `AppState` are removed from the resulting JSON. (see [`serializeAsJSON()`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/json.ts#L42) source for details).
+Takes the scene elements and state and returns a JSON string. `Deleted` elements as well as most properties from `AppState` are removed from the resulting JSON. (see [`serializeAsJSON()`](https://github.com/excalidraw/excalidraw/blob/master/src/data/json.ts#L42) source for details).
 
 If you want to overwrite the `source` field in the `JSON` string, you can set `window.EXCALIDRAW_EXPORT_SOURCE` to the desired value.
 
@@ -16,8 +16,8 @@ If you want to overwrite the `source` field in the `JSON` string, you can set `w
 
 <pre>
 serializeAsJSON(&#123;<br/>&nbsp;
-  elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
-  appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a>,<br/>
+  elements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>,<br/>&nbsp;
+  appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a>,<br/>
 }): string
 </pre>
 
@@ -37,7 +37,7 @@ If you want to overwrite the source field in the JSON string, you can set `windo
 
 <pre>
 serializeLibraryAsJSON(
-  libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L200">LibraryItems[]</a>)
+  libraryItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems[]</a>)
 </pre>
 
 **How to use**
@@ -53,7 +53,7 @@ Returns `true` if element is invisibly small (e.g. width & height are zero).
 **_Signature_**
 
 <pre>
-isInvisiblySmallElement(element:  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement</a>): boolean
+isInvisiblySmallElement(element:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement</a>): boolean
 </pre>
 
 **How to use**
@@ -80,10 +80,10 @@ excalidrawAPI.updateScene(scene);
 <pre>
 loadFromBlob(<br/>&nbsp;
   blob: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>,<br/>&nbsp;
-  localAppState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a> | null,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null,<br/>&nbsp;
+  localAppState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a> | null,<br/>&nbsp;
+  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null,<br/>&nbsp;
   fileHandle?: FileSystemHandle | null <br/>
-) => Promise&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/restore.ts#L61">RestoredDataState</a>>
+) => Promise&lt;<a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L61">RestoredDataState</a>>
 </pre>
 
 ### loadLibraryFromBlob
@@ -129,11 +129,11 @@ if (contents.type === MIME_TYPES.excalidraw) {
 
 <pre>
 loadSceneOrLibraryFromBlob(<br/>&nbsp;
-  blob: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>,<br/>&nbsp;
-  localAppState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a> | null,<br/>&nbsp;
-  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a> | null,<br/>&nbsp;
+  blob: <a href="https://developer.mozilla.org/en-US/docs/Web/API/Blob">Blob</a>,
+  localAppState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a> | null,<br/>&nbsp;
+  localElements: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a> | null,<br/>&nbsp;
   fileHandle?: FileSystemHandle | null<br/>
-) => Promise&lt;&#123; type: string, data: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/restore.ts#L53">RestoredDataState</a> | <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/types.ts#L33">ImportedLibraryState</a>}>
+) => Promise&lt;&#123; type: string, data: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/restore.ts#L53">RestoredDataState</a> | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/types.ts#L33">ImportedLibraryState</a>}>
 </pre>
 
 ### getFreeDrawSvgPath
@@ -149,7 +149,7 @@ import { getFreeDrawSvgPath } from "@excalidraw/excalidraw";
 **Signature**
 
 <pre>
-getFreeDrawSvgPath(element: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L182">ExcalidrawFreeDrawElement</a>)
+getFreeDrawSvgPath(element: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L182">ExcalidrawFreeDrawElement</a>)
 </pre>
 
 ### isLinearElement
@@ -164,9 +164,9 @@ import { isLinearElement } from "@excalidraw/excalidraw";
 
 **Signature**
 
-<pre>
-isLinearElement(elementType?: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L80">ExcalidrawElement</a>): boolean
-</pre>
+```tsx
+isLinearElement(elementType?: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L80">ExcalidrawElement</a>): boolean
+```
 
 ### getNonDeletedElements
 
@@ -181,7 +181,7 @@ import { getNonDeletedElements } from "@excalidraw/excalidraw";
 **Signature**
 
 <pre>
-getNonDeletedElements(elements:<a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114"> readonly ExcalidrawElement[]</a>): as readonly <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L125">NonDeletedExcalidrawElement[]</a>
+getNonDeletedElements(elements:<a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114"> readonly ExcalidrawElement[]</a>): as readonly <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L125">NonDeletedExcalidrawElement[]</a>
 </pre>
 
 ### mergeLibraryItems
@@ -195,10 +195,8 @@ import { mergeLibraryItems } from "@excalidraw/excalidraw";
 **_Signature_**
 
 <pre>
-mergeLibraryItems(<br/>&nbsp;
-  localItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L250">LibraryItems</a>,<br/>&nbsp;
-  otherItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L200">LibraryItems</a><br/>
-): <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L250">LibraryItems</a>
+mergeLibraryItems(localItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L250">LibraryItems</a>,<br/>&nbsp;
+ otherItems: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L200">LibraryItems</a>) => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L250">LibraryItems</a>
 </pre>
 
 ### parseLibraryTokensFromUrl
@@ -239,8 +237,8 @@ export const App = () => {
 
 <pre>
 useHandleLibrary(opts: &#123;<br/>&nbsp;
-  excalidrawAPI: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L494">ExcalidrawAPI</a>,<br/>&nbsp;
-  getInitialLibraryItems?: () => <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L253">LibraryItemsSource</a><br/>
+  excalidrawAPI: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L494">ExcalidrawAPI</a>,<br/>&nbsp;
+  getInitialLibraryItems?: () => <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L253">LibraryItemsSource</a><br/>
 });
 </pre>
 
@@ -253,7 +251,7 @@ This function returns the current `scene` version.
 **_Signature_**
 
 <pre>
-getSceneVersion(elements:  <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L114">ExcalidrawElement[]</a>)
+getSceneVersion(elements:  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ExcalidrawElement[]</a>)
 </pre>
 
 **How to use**
@@ -274,7 +272,7 @@ import { sceneCoordsToViewportCoords } from "@excalidraw/excalidraw";
 
 <pre>
 sceneCoordsToViewportCoords(&#123; sceneX: number, sceneY: number },<br/>&nbsp;
-  appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a><br/>): &#123; x: number, y: number }
+  appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a><br/>): &#123; x: number, y: number }
 </pre>
 
 ### viewportCoordsToSceneCoords
@@ -289,7 +287,7 @@ import { viewportCoordsToSceneCoords } from "@excalidraw/excalidraw";
 
 <pre>
 viewportCoordsToSceneCoords(&#123; clientX: number, clientY: number },<br/>&nbsp;
-  appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/types.ts#L95">AppState</a><br/>): &#123;x: number, y: number}
+  appState: <a href="https://github.com/excalidraw/excalidraw/blob/master/src/types.ts#L95">AppState</a><br/>): &#123;x: number, y: number}
 </pre>
 
 ### useDevice
@@ -301,7 +299,7 @@ Open the `main menu` in the below example to view the footer.
 ```jsx live noInline
 const MobileFooter = ({}) => {
   const device = useDevice();
-  if (device.editor.isMobile) {
+  if (device.isMobile) {
     return (
       <Footer>
         <button
@@ -333,147 +331,11 @@ const App = () => (
 render(<App />);
 ```
 
-The `device` has the following `attributes`, some grouped into `viewport` and `editor` objects, per context.
+The `device` has the following `attributes`
 
 | Name | Type | Description |
 | --- | --- | --- |
-| `viewport.isMobile` | `boolean` | Set to `true` when viewport is in `mobile` breakpoint |
-| `viewport.isLandscape` | `boolean` | Set to `true` when the viewport is in `landscape` mode |
-| `editor.canFitSidebar` | `boolean` | Set to `true` if there's enough space to fit the `sidebar` |
-| `editor.isMobile` | `boolean` | Set to `true` when editor container is in `mobile` breakpoint |
-| `isTouchScreen` | `boolean` | Set to `true` for `touch` when touch event detected |
-
-### i18n
-
-To help with localization, we export the following.
-
-| name | type |
-| --- | --- |
-| `defaultLang` | `string` |
-| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L15) |
-| `useI18n` | [`() => { langCode, t }`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/i18n.ts#L15) |
-
-```js
-import { defaultLang, languages, useI18n } from "@excalidraw/excalidraw";
-```
-
-#### defaultLang
-
-Default language code, `en`.
-
-#### languages
-
-List of supported language codes. You can pass any of these to `Excalidraw`'s [`langCode` prop](/docs/@excalidraw/excalidraw/api/props/#langcode).
-
-#### useI18n
-
-A hook that returns the current language code and translation helper function. You can use this to translate strings in the components you render as children of `<Excalidraw>`.
-
-```jsx live
-function App() {
-  const { t } = useI18n();
-  return (
-    <div style={{ height: "500px" }}>
-      <Excalidraw>
-        <button
-          style={{ position: "absolute", zIndex: 10, height: "2rem" }}
-          onClick={() => window.alert(t("labels.madeWithExcalidraw"))}
-        >
-          {t("buttons.confirm")}
-        </button>
-      </Excalidraw>
-    </div>
-  );
-}
-```
-
-### getCommonBounds
-
-This util can be used to get the common bounds of the passed elements.
-
-**_Signature_**
-
-```ts
-getCommonBounds(
-  elements: readonly ExcalidrawElement[]
-): readonly [
-  minX: number,
-  minY: number,
-  maxX: number,
-  maxY: number,
-]
-```
-
-**_How to use_**
-
-```js
-import { getCommonBounds } from "@excalidraw/excalidraw";
-```
-
-### elementsOverlappingBBox
-
-To filter `elements` that are inside, overlap, or contain the `bounds` rectangle.
-
-The bounds check is approximate and does not precisely follow the element's shape. You can also supply `errorMargin` which effectively makes the `bounds` larger by that amount.
-
-This API has 3 `type`s of operation: `overlap`, `contain`, and `inside`:
-
-- `overlap` - filters elements that are overlapping or inside bounds.
-- `contain` - filters elements that are inside bounds or bounds inside elements.
-- `inside` - filters elements that are inside bounds.
-
-**_Signature_**
-
-<pre>
-elementsOverlappingBBox(<br/>&nbsp;
-  elements: readonly NonDeletedExcalidrawElement[];<br/>&nbsp;
-  bounds: <a href="https://github.com/excalidraw/excalidraw/blob/9c425224c789d083bf16e0597ce4a429b9ee008e/src/element/bounds.ts#L37-L42">Bounds</a> | ExcalidrawElement;<br/>&nbsp;
-  errorMargin?: number;<br/>&nbsp;
-  type: "overlap" | "contain" | "inside";<br/>
-): NonDeletedExcalidrawElement[];
-</pre>
-
-**_How to use_**
-
-```js
-import { elementsOverlappingBBox } from "@excalidraw/excalidraw";
-```
-
-### isElementInsideBBox
-
-Lower-level API than `elementsOverlappingBBox` to check if a single `element` is inside `bounds`. If `eitherDirection=true`, returns `true` if `element` is fully inside `bounds` rectangle, or vice versa. When `false`, it returns `true` only for the former case.
-
-**_Signature_**
-
-<pre>
-isElementInsideBBox(<br/>&nbsp;
-  element: NonDeletedExcalidrawElement,<br/>&nbsp;
-  bounds: <a href="https://github.com/excalidraw/excalidraw/blob/9c425224c789d083bf16e0597ce4a429b9ee008e/src/element/bounds.ts#L37-L42">Bounds</a>,<br/>&nbsp;
-  eitherDirection = false,<br/>
-): boolean
-</pre>
-
-**_How to use_**
-
-```js
-import { isElementInsideBBox } from "@excalidraw/excalidraw";
-```
-
-### elementPartiallyOverlapsWithOrContainsBBox
-
-Checks if `element` is overlapping the `bounds` rectangle, or is fully inside.
-
-**_Signature_**
-
-<pre>
-elementPartiallyOverlapsWithOrContainsBBox(<br/>&nbsp;
-  element: NonDeletedExcalidrawElement,<br/>&nbsp;
-  bounds: <a href="https://github.com/excalidraw/excalidraw/blob/9c425224c789d083bf16e0597ce4a429b9ee008e/src/element/bounds.ts#L37-L42">Bounds</a>,<br/>
-): boolean
-</pre>
-
-**_How to use_**
-
-```js
-import { elementPartiallyOverlapsWithOrContainsBBox } from "@excalidraw/excalidraw";
-```
+| `isSmScreen` | `boolean` | Set to `true` when the device small screen is small (Width < `640px` ) |
+| `isMobile` | `boolean` | Set to `true` when the device is `mobile` |
+| `isTouchScreen` | `boolean` | Set to `true` for `touch` devices |
+| `canDeviceFitSidebar` | `boolean` | Implies whether there is enough space to fit the `sidebar` |

dev-docs/docs/@excalidraw/excalidraw/customizing-styles.mdx

@@ -1,6 +1,6 @@
 # Customizing Styles
 
-Excalidraw uses CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.
+Excalidraw is using CSS variables to style certain components. To override them, you should set your own on the `.excalidraw` and `.excalidraw.theme--dark` (for dark mode variables) selectors.
 
 Make sure the selector has higher specificity, e.g. by prefixing it with your app's selector:
 
@@ -21,7 +21,7 @@ Most notably, you can customize the primary colors, by overriding these variable
 - `--color-primary-light`
 - `--color-primary-contrast-offset` — a slightly darker (in light mode), or lighter (in dark mode) `--color-primary` color to fix contrast issues (see [Chubb illusion](https://en.wikipedia.org/wiki/Chubb_illusion)). It will fall back to `--color-primary` if not present.
 
-For a complete list of variables, check [theme.scss](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/css/theme.scss), though most of them will not make sense to override.
+For a complete list of variables, check [theme.scss](https://github.com/excalidraw/excalidraw/blob/master/src/css/theme.scss), though most of them will not make sense to override.
 
 ```css showLineNumbers
 .custom-styles .excalidraw {

dev-docs/docs/@excalidraw/excalidraw/development.mdx

@@ -13,7 +13,7 @@ To start the example app using the `@excalidraw/excalidraw` package, follow the
 1. Install the dependencies
 
    ```bash
-   cd packages/excalidraw && yarn
+   cd src/packages/excalidraw && yarn
    ```
 
 2. Start the example app
@@ -43,7 +43,7 @@ Once the version is released `@excalibot` will post a comment with the release v
 To release the next stable version follow the below steps:
 
 ```bash
-yarn prerelease:excalidraw
+yarn prerelease version
 ```
 
 You need to pass the `version` for which you want to create the release. This will make the changes needed before making the release like updating `package.json`, `changelog` and more.
@@ -51,7 +51,7 @@ You need to pass the `version` for which you want to create the release. This wi
 The next step is to run the `release` script:
 
 ```bash
-yarn release:excalidraw
+yarn release
 ```
 
 This will publish the package.

dev-docs/docs/@excalidraw/excalidraw/faq.mdx

@@ -2,46 +2,7 @@
 
 ### Does this package support collaboration ?
 
-No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.
-
-### Turning off Aggressive Anti-Fingerprinting in Brave browser
-
-When *Aggressive Anti-Fingerprinting* is turned on, the `measureText` API breaks which in turn breaks the Text Elements in your drawings. Here is more [info](https://github.com/excalidraw/excalidraw/pull/6336) on the same.
-
-We strongly recommend turning it off. You can follow the steps below on how to do so.
-
-
-1. Open [excalidraw.com](https://excalidraw.com) in Brave and click on the **Shield** button
-![Shield button](../../assets/brave-shield.png)
-
-<div style={{width:'30rem'}}>
-
-2. Once opened, look for **Aggressively Block Fingerprinting**
-
-![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
-
-3. Switch to **Block Fingerprinting**
-
-![Block filtering](../../assets/block-fingerprint.png)
-
-4. Thats all. All text elements should be fixed now 🎉
-
-</div>
-
-If disabling this setting doesn't fix the display of text elements, please consider opening an [issue](https://github.com/excalidraw/excalidraw/issues/new) on our GitHub, or message us on [Discord](https://discord.gg/UexuTaE).
-
-
-### ReferenceError: process is not defined
-
-When using `vite` or any build tools, you will have to make sure the `process` is accessible as we are accessing `process.env.IS_PREACT` to decide whether to use `preact` build.
-
-Since Vite removes env variables by default, you can update the vite config to ensure its available :point_down:
-
-```
- define: {
-    "process.env.IS_PREACT": JSON.stringify("true"),
-  },
-```
+No, Excalidraw package doesn't come with collaboration built in, since the implementation is specific to each host app. We expose APIs which you can use to communicate with Excalidraw which you can use to implement it. You can check our own implementation [here](https://github.com/excalidraw/excalidraw/blob/master/src/excalidraw-app/index.tsx). Here is a [detailed answer](https://github.com/excalidraw/excalidraw/discussions/3879#discussioncomment-1110524) on how you can achieve the same.
 
 ## Need help?
 

dev-docs/docs/@excalidraw/excalidraw/integration.mdx

@@ -30,74 +30,23 @@ function App() {
 }
 ```
 
-### Next.js
+### Rendering Excalidraw only on client
 
 Since _Excalidraw_ doesn't support server side rendering, you should render the component once the host is `mounted`.
 
-Here are two ways on how you can render **Excalidraw** on **Next.js**.
-
-
-
-1. Using **Next.js Dynamic** import [Recommended].
-
-Since Excalidraw doesn't support server side rendering so you can also use `dynamic import` to render by setting `ssr` to `false`.
-
-```jsx showLineNumbers
-import dynamic from "next/dynamic";
-const Excalidraw = dynamic(
-  async () => (await import("@excalidraw/excalidraw")).Excalidraw,
-  {
-    ssr: false,
-  },
-);
-export default function App() {
-  return <Excalidraw />;
-}
-```
-
-Here is a working [demo](https://codesandbox.io/p/sandbox/excalidraw-with-next-dynamic-k8yjq2).
-
-
-2. Importing Excalidraw once **client** is rendered.
-
 ```jsx showLineNumbers
 import { useState, useEffect } from "react";
 export default function App() {
-  const [Excalidraw, setExcalidraw] = useState(null);
+  const [Comp, setComp] = useState(null);
   useEffect(() => {
-    import("@excalidraw/excalidraw").then((comp) =>
-      setExcalidraw(comp.Excalidraw),
-    );
+    import("@excalidraw/excalidraw").then((comp) => setComp(comp.default));
   }, []);
-  return <>{Excalidraw && <Excalidraw />}</>;
+  return <>{Comp && <Comp />}</>;
 }
 ```
 
-Here is a working [demo](https://codesandbox.io/p/sandbox/excalidraw-with-next-5xb3d)
-
 The `types` are available at `@excalidraw/excalidraw/types`, you can view [example for typescript](https://codesandbox.io/s/excalidraw-types-9h2dm)
 
-### Preact
-
-Since we support `umd` build ships with `react/jsx-runtime` and `react-dom/client` inlined with the package. This conflicts with `Preact` and hence the build doesn't work directly with `Preact`.
-
-However we have shipped a separate build for `Preact` so if you are using `Preact` you need to set `process.env.IS_PREACT` to `true` to use the `Preact` build.
-
-Once the above `env` variable is set, you will be able to use the package in `Preact` as well.
-
-:::info
-
-When using `vite` or any build tools, you will have to make sure the `process` is accessible as we are accessing `process.env.IS_PREACT` to decide whether to use `preact` build.
-
-Since Vite removes env variables by default, you can update the vite config to ensure its available :point_down:
-
-```
- define: {
-    "process.env.IS_PREACT": JSON.stringify("true"),
-  },
-```
-::: 
-
 ## Browser
 
 To use it in a browser directly:
@@ -148,7 +97,7 @@ import TabItem from "@theme/TabItem";
       <h1>Excalidraw Embed Example</h1>
       <div id="app"></div>
     </div>
-    <script type="text/javascript" src="packages/excalidraw/index.js"></script>
+    <script type="text/javascript" src="src/index.js"></script>
   </body>
 </html>
 ```

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/api.mdx

@@ -1,155 +0,0 @@
-# API
-
-At the moment the mermaid-to-excalidraw works in two steps. First, you call `parseMermaidToExcalidraw(mermaidSyntax)` on the mermaid diagram definition string, which resolves with elements in a skeleton format — a simplified excalidraw JSON format (docs coming soon). You then pass them to `convertToExcalidrawElements(elements)` to get the fully qualified excalidraw elements you can render in the editor.
-
-The need for these two steps is due to the [@excalidraw/excalidraw](/docs/@excalidraw/excalidraw/installation) being a **UMD** build so we currently cannot import the `convertToExcalidrawElements()` util alone, until we support a tree-shakeable **ESM** build.
-
-## parseMermaidToExcalidraw
-
-This API receives the mermaid syntax as the input, and resolves to skeleton Excalidraw elements. You will need to call `convertToExcalidraw` API to convert them to fully qualified elements that you can render in Excalidraw.
-
-** Example **
-
-```ts
-import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
-import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
-try {
-  const { elements, files } = await parseMermaid(mermaidSyntax: string, {
-    fontSize: number,
-  });
-  const excalidrawElements = convertToExcalidrawElements(elements);
-  // Render elements and files on Excalidraw
-} catch (e) {
-  // Parse error, displaying error message to users
-}
-```
-
-## Supported Diagram Types
-
-Currently only [flowcharts](https://mermaid.js.org/syntax/flowchart.html) are supported. Oother diagram types will be rendered as an image in Excalidraw.
-
-### Flowchart
-
-#### Excalidraw Regular Shapes
-
-**Rectangles**, **Circle**, **Diamond**, and **Arrows** are fully supported in Excalidraw
-
-```
-flowchart TD
-  A[Christmas] -->|Get money| B(Go shopping)
-  B --> C{Let me think}
-  C -->|One| D[Laptop]
-  C -->|Two| E[iPhone]
-  C -->|Three| F[Car]
- ```
-
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c8ea84fc-e9fb-4652-9a12-154136d1a798"  width="250" height="200"/>
-
-
-```
-flowchart LR
-  id1((Hello from Circle))
-```
-
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/6202a8b9-8aa7-451e-9478-4d8d75c0f2fa"  width="250" height="200"/>
-
-
-#### Subgraphs
-
-Subgraphs are grouped diagrams hence they are also supported in Excalidraw
-
-```
-flowchart TB
-  c1-->a2
-  subgraph one
-  a1-->a2
-  end
-  subgraph two
-  b1-->b2
-  end
-  subgraph three
-  c1-->c2
-  end
-```
-
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/098bce52-8f93-437c-9a06-c6972e27c70a"  width="350" height="200"/>
-
-#### Unsupported shapes fallback to Rectangle
-
-**Subroutine**, **Cylindrical**, **Asymmetric**, **Hexagon**, **Parallelogram**, **Trapezoid** are not supported in Excalidraw hence they fallback to the closest shape **Rectangle**
-
-```
-flowchart LR
-  id1[[Subroutine fallback to Rectangle]]
-  id2[(Cylindrical fallback to Rectangle)]
-  id3>Asymmetric fallback to Rectangle]
-  id4{{Hexagon fallback to Rectangle}}
-  id5[/Parallelogram fallback to Rectangle /]
-  id6[/Trapezoid fallback to Rectangle\]
-```
-The above shapes are not supported in Excalidraw hence they fallback to Rectangle
-
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/cb269473-16c5-4c35-bd7a-d631d8cc5b47"  width="350" height="200"/>
-
-#### Markdown fallback to Regular text
-
-Since we don't support wysiwyg text editor yet, hence [Markdown Strings](https://mermaid.js.org/syntax/flowchart.html#markdown-strings) will fallback to regular text.
-
-```
-flowchart LR
-  A("`Hello **World**`") --> B("`Whats **up** ?`")
-```
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/107bd428-9ab9-42d4-ba12-b1e29c8db478"  width="250" height="200"/>
-
-#### Basic FontAwesome fallback to text
-
-The [FontAwesome](https://mermaid.js.org/syntax/flowchart.html#basic-support-for-fontawesome) icons aren't support so they won't be rendered in Excalidraw
-
-```
-flowchart TD
-  B["fab:fa-twitter for peace"]
-  B-->C[fa:fa-ban forbidden]
-  B-->E(A fa:fa-camera-retro perhaps?)
-```
-
-
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/7a693863-c3f9-42ff-b325-4b3f8303c7af"  width="250" height="200"/>
-
-#### Cross Arrow head fallback to Bar Arrow head
-
-```
-flowchart LR
-  Start x--x Stop
-```
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/217dd1ad-7f4e-4c80-8c1c-03647b42d821"  width="250" height="200"/>
-
-
-## Unsupported Diagram Types
-
-Currently only [flowcharts](https://mermaid.js.org/syntax/flowchart.html) are supported. All other diagram types will be rendered as an image in Excalidraw.
-
-```
-erDiagram
-  CUSTOMER ||--o{ ORDER : places
-  ORDER ||--|{ LINE-ITEM : contains
-  CUSTOMER }|..|{ DELIVERY-ADDRESS : uses
-```
-
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/c1d3fdb3-32ef-4bf3-a38a-02ac3d7d2cb9"  width="300" height="200"/>
-
-```
-gitGraph
-  commit
-  commit
-  branch develop
-  checkout develop
-  commit
-  commit
-  checkout main
-  merge develop
-  commit
-  commit
-
-```
-
-<img src="https://github.com/excalidraw/excalidraw/assets/11256141/e5dcec0b-d570-4eb4-b981-412a996aa96c"  width="400" height="300"/>

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/codebase.mdx

@@ -1,7 +0,0 @@
-# Codebase
-
-The Codebase is divided into 2 Sections
-
-* [How Parser Works under the hood](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser) - If you are interested in understanding and deep diving into inner workings of the Parser, then make sure to checkout this section.
-
-* [Adding a new diagram type](/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type) - If you want to help us make the mermaid to Excalidraw Parser more powerful, you will find all information in this section to do so.

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type.mdx

@@ -1,54 +0,0 @@
-# Adding a new Diagram Type
-
-To add a new diagram type to the parser you can follow the below steps :point_down:
-
-All the code for the parser resides in [`src`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/src) folder and for playground resides in [`playground`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/playground) folder.
-
-lets run the playground server in local :point_down:
-
-```bash
-yarn start
-```
-
-This will start the playground server in port `1234` and open it in browser so  you start playing with the playground.
-
-## Update Supported Diagram Types
-
-First step is to add the new diagram type in [`SUPPORTED_DIAGRAM_TYPES`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/constants.ts#L2).
-
-Once this is done the new diagram type won't be rendered as an image but start throwing error since we don't support parsing the data yet.
-
-## Writing the Diagram Parser
-
-Once the diagram type is added in previous step. Next step is to write the parser to parse the mermaid diagram.
-
-For this create a file named `{{diagramType}}.ts` in [`src/parser`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/src/parser) and write a function `parseMermaid{{diagramType}}Diagram` similar to how we [`parseMermaidFlowChartDiagram`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parser/flowchart.ts#L256) for parsing flowchart diagram.
-
-The main aim of the parser is :point_down:
-
-1. Determine how elements are connected in the diagram and thus finding arrow and text bindings. 
-
-For this you might have to dig in to the parser `diagram.parser.yy` and which attributes to parse for the new diagram.
-
-2. Determine the position and dimensions of each element, for this would be using the `svg`
-
-Once the parser is ready, lets start using it. 
-
-Add the diagram type in switch case in [`parseMermaid`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L97) and call the parser for the same.
-
-## Writing the Excalidraw Skeleton Convertor
-
-With the completion of previous step, we have all the data, now we need to transform it so to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133) format.
-
-Similar to [`FlowChartToExcalidrawSkeletonConverter`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24), you have to write the `{{diagramType}}ToExcalidrawSkeletonConverter` which parses the data received in previous step and returns the [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133).
-
-Thats it, you have added the new diagram type 🥳, now lets test it out!
-
-## Updating the Playground
-
-1. Create a file named `{{diagramType}}.ts` in [`playround/testcases/`](https://github.com/excalidraw/mermaid-to-excalidraw/tree/master/playground/testcases). For reference you can check [`flowchart.ts`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/playground/testcases/flowchart.ts).
-
-2. Incase the new diagram type added is present in [`unsupported.ts`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/playground/testcases/unsupported.ts) then remove it from there.
-
-3. Verify if the test cases are running fine in playground.
-

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/flowchart.mdx

@@ -1,177 +0,0 @@
-# Flowchart Parser
-
-As mentioned in the previous section, we use [getDiagramFromText](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L80) to parse the full defination and get the [Diagram](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L15) json from it.
-
-In this section we will be diving into how the [flowchart parser](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parser/flowchart.ts#L256) works behind the scenes.
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/2a097bbb-64bf-49d6-bf7f-21172bdb538d)
-
-We use `diagram.parser.yy` attribute to parse the data. If you want to know more about how the `diagram.parse.yy` attribute looks like, you can check it [here](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/diagrams/flowchart/flowDb.js#L768), however for scope of flowchart we are using **3** APIs from this parser to compute `vertices`, `edges` and `clusters` as we need these data to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
-
-
-For computing `vertices` and `edge`s lets consider the below svg generated by mermaid
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/d7013305-0b90-4fa0-a66e-b4f4604ad0b2)
-
-
-## Computing the vertices
-
-We use `getVertices` API from `diagram.parse.yy` to get the vertices for a given flowchart.
-
-Considering the same example this is the response from the API
-
-```js
-{
-	"start": {
-		"id": "start",
-		"labelType": "text",
-		"domId": "flowchart-start-1414",
-		"styles": [],
-		"classes": [],
-		"text": "start",
-		"props": {}
-	},
-	"stop": {
-		"id": "stop",
-		"labelType": "text",
-		"domId": "flowchart-stop-1415",
-		"styles": [],
-		"classes": [],
-		"text": "stop",
-		"props": {}
-	}
-}
-```
-The dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38), for this we have our own parser [`parseVertex`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L178) which takes the above response and uses the `svg` together to compute position, dimensions and cleans up the response.
-
- The final output from `parseVertex` looks like :point_down:
-
-```js
-{
-	"start": {
-		"id": "start",
-		"labelType": "text",
-		"text": "start",
-		"x": 0,
-		"y": 0,
-		"width": 67.796875,
-		"height": 44,
-		"containerStyle": {},
-		"labelStyle": {}
-	},
-	"stop": {
-		"id": "stop",
-		"labelType": "text",
-		"text": "stop",
-		"x": 117.796875,
-		"y": 0,
-		"width": 62.3828125,
-		"height": 44,
-		"containerStyle": {},
-		"labelStyle": {}
-	}
-}
-```
-
-
-## Computing the edges
-
-The lines and arrows are considered as `edges` in mermaid as shown in the above diagram.
-We use `getEdges` API from `diagram.parse.yy` to get the edges for a given flowchart.
-Considering the same example this is the response from the API
-
-```js
-[
-	{
-		"start": "start",
-		"end": "stop",
-		"type": "arrow_point",
-		"text": "",
-		"labelType": "text",
-		"stroke": "normal",
-		"length": 1
-	}
-]
-```
-
-Similarly here the dimensions and position is missing and we compute that from the svg. The [`parseEdge`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L245) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
-
- The final output from `parseEdge` looks like :point_down:
-
-```js
-[
-	{
-		"start": "start",
-		"end": "stop",
-		"type": "arrow_point",
-		"text": "",
-		"labelType": "text",
-		"stroke": "normal",
-		"startX": 67.797,
-		"startY": 22,
-		"endX": 117.797,
-		"endY": 22,
-		"reflectionPoints": [
-			{
-				"x": 67.797,
-				"y": 22
-			},
-			{
-				"x": 117.797,
-				"y": 22
-			}
-		]
-	}
-]
-```
-## Computing the Subgraphs
-
-`Subgraphs` is collection of elements grouped together. The Subgraphs map to `grouping` elements in Excalidraw.
-
-Lets consider the below example :point_down:
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/5243ce4c-beaa-43d2-812a-0577b0a574d7)
-
-We use `getSubgraphs` API to get the subgraph data for a given flowchart.
-Considering the same example this is the response from the API
-
-```js
-[
-	{
-		"id": "one",
-		"nodes": [
-				"flowchart-a2-1399",
-				"flowchart-a1-1400"
-		],
-		"title": "one",
-		"classes": [],
-		"labelType": "text"
-	}
-]
-```
-
-For position and dimensions we use the svg to compute. The [`parseSubgraph`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L139) takes the above response along with `svg` and computes the position, dimensions and cleans up the response.
-
-
-```js
-[
-	{
-		"id": "one",
-		"nodes": [
-				"flowchart-a2-1399",
-				"flowchart-a1-1400"
-		],
-		"title": "one",
-		"labelType": "text",
-		"nodeIds": [
-				"a2",
-				"a1"
-		],
-		"x": 75.4921875,
-		"y": 0,
-		"width": 121.25,
-		"height": 188,
-		"text": "one"
-	}
-]
-```

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/parser.mdx

@@ -1,65 +0,0 @@
-# How the Parser works under the hood ?
-
-[This](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/index.ts) is the entry point of the library.
-
-
-`parseMermaidToExcalidraw` function is the only function exposed which receives mermaid syntax as the input, parses the mermaid syntax and resolves to Excalidraw Skeleton.
-
-Lets look at the high level overview at how the parse works :point_down:
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/8e060de7-b867-44ad-864b-0c1b24466b67)
-
-Lets dive deeper into individual section now to understand better.
-
-## Parsing Mermaid diagram
-
-One of the dependencies of the library is [`mermaid`](https://www.npmjs.com/package/mermaid) library.
-We need the mermaid diagram in some extractable format so we can parse it to Excalidraw Elements.
-
-Parsing is broken into two steps
-1. [`Rendering Mermaid to Svg`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#rendering-mermaid-to-svg) - This helps in determining the position and dimensions of each element in the diagram
-
-2. [`Parsing the mermaid syntax`](/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser#parsing-the-mermaid-syntax) - We also need to know how elements are connected which isn't possible with svg alone hence we also parse the mermaid syntax which helps in determining the connections and bindings between elements in the diagram.
-
-### Rendering Mermaid to Svg
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/2c24cf7b-f096-4c12-88db-55520de27558)
-
-The [`mermaid`](https://www.npmjs.com/package/mermaid) library provides the API `mermaid.render` API which gives the output of the diagram in `svg`.
-
-
-If the diagram isn't supported, this svg is converted to `dataURL` and can be rendered as an image in Excalidraw.
-
-
-### Parsing the mermaid syntax
-
-For this we first need to process the options along with mermaid defination for diagram provided by the user.
-
-[`processMermaidTextWithOptions`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parseMermaid.ts#L13) takes the mermaid defination and options and returns the full defination including the mermaid [directives ](https://mermaid.js.org/config/directives.html).
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/3a4825d8-9704-468c-a02f-7e507f4d5b7a)
-
-Next we use mermaid api [getDiagramFromText](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L80) to parse the full defination and get the [Diagram](https://github.com/mermaid-js/mermaid/blob/00d06c7282a701849793680c1e97da1cfdfcce62/packages/mermaid/src/Diagram.ts#L15) json from it.
-
-```js
-const diagram = await mermaid.mermaidAPI.getDiagramFromText(fullDefinition);
-```
-
-Next we write our own parser to parse this diagram.
-
-### Parsing the Diagram
-
-For each diagram type, we need a parser as the result of every diagram would differ and dependinng on the data we have to write the parser. Since currently we support flowchart, so here is the [`parseMermaidFlowChartDiagram`](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/parser/flowchart.ts#L256) to parse the flowchart diagram.
-
-If you want to understand how flowchart parser works, you can navigate to [Flowchart Parser](http://localhost:3003/docs/@excalidraw/mermaid-to-excalidraw/codebase/parser/flowchart).
-
-## Converting to ExcalidrawElementSkeleton
-
-Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38) API so it can be rendered in Excalidraw.
-
-For this we have `converters` which takes the parsed mermaid data and gives back the Excalidraw Skeleton.
-For Unsupported types, we have already mentioned above that we convert it to `dataURL` and return the ExcalidrawImageSkeleton.
-
-For supported types, currently only flowchart, we have [flowchartConverter](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/src/converter/types/flowchart.ts#L24) which parses the data and converts to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/data/transform.ts#L133C13-L133C38).
-
-![image](https://github.com/excalidraw/excalidraw/assets/11256141/00226e9d-043d-4a08-989a-3ad9d2a574f1)

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/development.mdx

@@ -1,60 +0,0 @@
-# Development
-
-This page relates to developing the `@excalidraw/mermaid-to-excalidraw` package itself.
-
-## Setting up in Local
-
-To set up the library in local, follow the below steps 👇🏼
-
-### Clone the Repository
-
-Go to [@excalidraw/mermaid-to-excalidraw](https://github.com/excalidraw/mermaid-to-excalidraw) and clone the repository to your local.
-
-
-```bash
-git clone git@github.com:excalidraw/mermaid-to-excalidraw.git
-```
-
-### Install the dependencies
-
-Using `npm`
-
-```bash
-npm install @excalidraw/mermaid-to-excalidraw
-```
-
-Using `yarn`
-
-```bash
-yarn add @excalidraw/mermaid-to-excalidraw
-```
-
-### Run the playground server
-
-```bash
-yarn start
-```
-
-This will start the playground server in port `1234` and you start playing with the playground.
-
-## Creating a test release
-
-We will soon simplify creating release via commenting on GitHub PR similar till then you can create a release by following the below steps
-
-1. Create the build
-
-```bash
-yarn build
-```
-
-This will create the dist folder which we need to publish next.
-
-2. Publish the library
-
-Update the package name and version in [package.json](https://github.com/excalidraw/mermaid-to-excalidraw/blob/master/package.json) and run the below command to publish it
-
-```bash
-yarn publish
-```
-
-And thats all your test release is successfully created 🎉

dev-docs/docs/@excalidraw/mermaid-to-excalidraw/installation.mdx

@@ -1,42 +0,0 @@
-# Installation
-
-`@excalidraw/mermaid-to-excalidraw` is published to npm. This library is used in [excalidraw](https://excalidraw.com) to transform mermaid syntax to Excalidraw diagrams.
-
-Using `npm`
-
-```bash
-npm install @excalidraw/mermaid-to-excalidraw
-```
-
-Using `yarn`
-
-```bash
-yarn add @excalidraw/mermaid-to-excalidraw
-```
-
-## Usage
-
-Once the library is installed, its ready to use.
-
-```js
-import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
-import { convertToExcalidrawElements}  from "@excalidraw/excalidraw"
-
-try {
-  const { elements, files } = await parseMermaid(diagramDefinition, {
-    fontSize: DEFAULT_FONT_SIZE,
-  });
-  // currently the elements returned from the parser are in a "skeleton" format
-  // which we need to convert to fully qualified excalidraw elements first
-  const excalidrawElements = convertToExcalidrawElements(elements);
-
-  // Render elements and files on Excalidraw
-} catch (e) {
-  // Error handling
-}
-```
-
-## Playground
-
- Try it out [here](https://mermaid-to-excalidraw.vercel.app)
-

dev-docs/docs/codebase/frames.mdx

@@ -1,22 +0,0 @@
-# Frames
-
-## Ordering
-
-Frames should be ordered where frame children come first, followed by the frame element itself:
-
-```
-[
-  other_element,
-  frame1_child1,
-  frame1_child2,
-  frame1,
-  other_element,
-  frame2_child1,
-  frame2_child2,
-  frame2,
-  other_element,
-  ...
-]
-```
-
-If not ordered correctly, the editor will still function, but the elements may not be rendered and clipped correctly. Further, the renderer relies on this ordering for performance optimizations.

dev-docs/docs/codebase/json-schema.mdx

@@ -1,75 +0,0 @@
-# JSON Schema
-
-The Excalidraw data format uses plaintext JSON.
-
-## Excalidraw files
-
-When saving an Excalidraw scene locally to a file, the JSON file (`.excalidraw`) is using the below format.
-
-### Attributes
-
-| Attribute | Description | Value |
-| --- | --- | --- |
-| `type` | The type of the Excalidraw schema | `"excalidraw"` |
-| `version` | The version of the Excalidraw schema | number |
-| `source` | The source URL of the Excalidraw application | `"https://excalidraw.com"` |
-| `elements` | An array of objects representing excalidraw elements on canvas | Array containing excalidraw element objects |
-| `appState` | Additional application state/configuration | Object containing application state properties |
-| `files` | Data for excalidraw `image` elements | Object containing image data |
-
-### JSON Schema example
-
-```json
-{
-  // schema information
-  "type": "excalidraw",
-  "version": 2,
-  "source": "https://excalidraw.com",
-
-  // elements on canvas
-  "elements": [
-    // example element
-    {
-      "id": "pologsyG-tAraPgiN9xP9b",
-      "type": "rectangle",
-      "x": 928,
-      "y": 319,
-      "width": 134,
-      "height": 90
-      /* ...other element properties */
-    }
-    /* other elements */
-  ],
-
-  // editor state (canvas config, preferences, ...)
-  "appState": {
-    "gridSize": null,
-    "viewBackgroundColor": "#ffffff"
-  },
-
-  // files data for "image" elements, using format `{ [fileId]: fileData }`
-  "files": {
-    // example of an image data object
-    "3cebd7720911620a3938ce77243696149da03861": {
-      "mimeType": "image/png",
-      "id": "3cebd7720911620a3938c.77243626149da03861",
-      "dataURL": "data:image/png;base64,iVBORWOKGgoAAAANSUhEUgA=",
-      "created": 1690295874454,
-      "lastRetrieved": 1690295874454
-    }
-    /* ...other image data objects */
-  }
-}
-```
-
-## Excalidraw clipboard format
-
-When copying selected excalidraw elements to clipboard, the JSON schema is similar to `.excalidraw` format, except it differs in attributes.
-
-### Attributes
-
-| Attribute | Description | Example Value |
-| --- | --- | --- |
-| `type` | The type of the Excalidraw document. | "excalidraw/clipboard" |
-| `elements` | An array of objects representing excalidraw elements on canvas. | Array containing excalidraw element objects (see example below) |
-| `files` | Data for excalidraw `image` elements. | Object containing image data |

dev-docs/docs/introduction/contributing.mdx

@@ -2,11 +2,6 @@
 
 Pull requests are welcome. For major changes, please [open an issue](https://github.com/excalidraw/excalidraw/issues/new) first to discuss what you would like to change.
 
-We have a [roadmap](https://github.com/orgs/excalidraw/projects/3) which we strongly recommend to go through and check if something interests you.
-For new contributors we would recommend to start with *Easy* tasks.
-
-In case you want to pick up something from the roadmap, comment on that issue and one of the project maintainers will assign it to you, post which you can discuss in the issue and start working on it.
-
 ## Setup
 
 ### Option 1 - Manual
@@ -15,7 +10,7 @@ In case you want to pick up something from the roadmap, comment on that issue an
 1. Run `yarn` to install dependencies
 1. Create a branch for your PR with `git checkout -b your-branch-name`
 
-> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork, run:
+> To keep `master` branch pointing to remote repository and make pull requests from branches on your fork. To do this, run:
 >
 > ```bash
 > git remote add upstream https://github.com/excalidraw/excalidraw.git
@@ -25,7 +20,7 @@ In case you want to pick up something from the roadmap, comment on that issue an
 
 ### Option 2 - CodeSandbox
 
-1. Go to https://codesandbox.io/p/github/excalidraw/excalidraw
+1. Go to https://codesandbox.io/s/github/excalidraw/excalidraw
 1. Connect your GitHub account
 1. Go to Git tab on left side
 1. Tap on `Fork Sandbox`
@@ -52,6 +47,15 @@ Make sure the title starts with a semantic prefix:
 - **chore**: Other changes that don't modify src or test files
 - **revert**: Reverts a previous commit
 
+### Changelog
+
+Add a brief description of your pull request to the changelog located here: [changelog](https://github.com/excalidraw/excalidraw/blob/master/CHANGELOG.md)
+
+Notes:
+
+- Make sure to prepend to the section corresponding with the semantic prefix you selected in the title
+- Link to your pull request - this will require updating the CHANGELOG _after_ creating the pull request
+
 ### Testing
 
 Once you submit your pull request it will automatically be tested. Be sure to check the results of the test and fix any issues that arise.
@@ -60,10 +64,6 @@ It's also a good idea to consider if your change should include additional tests
 
 Finally - always manually test your changes using the convenient staging environment deployed for each pull request. As much as local development attempts to replicate production, there can still be subtle differences in behavior. For larger features consider testing your change in multiple browsers as well.
 
-:::note
-Some checks, such as the `lint` and `test`, require approval from the maintainers to run. 
-They will appear as `Expected — Waiting for status to be reported` in the PR checks when they are waiting for approval.
-:::
 
 ## Translating
 

dev-docs/docs/introduction/get-started.mdx

@@ -14,4 +14,3 @@ These docs are focused on developers, and structured in the following way:
 - [Introduction](/docs/) — development setup and introduction.
 - [@excalidraw/excalidraw](/docs/@excalidraw/excalidraw/installation) — docs for the npm package to help you integrate Excalidraw into your own app.
 - Editor — IN PROGRESS. Docs describing the internals of the Excalidraw editor to help in contributing to the codebase.
-- [@excalidraw/mermaid-to-excalidraw](/docs/@excalidraw/mermaid-to-excalidraw/installation) - Docs for the mermaid to excalidraw parser

dev-docs/docusaurus.config.js

@@ -1,11 +1,6 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-// Set the env variable to false so the excalidraw npm package doesn't throw
-// process undefined as docusaurus doesn't expose env variables by default
-
-process.env.IS_PREACT = "false";
-
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: "Excalidraw developer docs",
@@ -15,7 +10,7 @@ const config = {
   baseUrl: "/",
   onBrokenLinks: "throw",
   onBrokenMarkdownLinks: "warn",
-  favicon: "img/favicon.png",
+  favicon: "img/favicon.ico",
   organizationName: "Excalidraw", // Usually your GitHub org/user name.
   projectName: "excalidraw", // Usually your repo name.
 
@@ -41,7 +36,10 @@ const config = {
           showLastUpdateTime: true,
         },
         theme: {
-          customCss: [require.resolve("./src/css/custom.scss")],
+          customCss: [
+            require.resolve("./src/css/custom.scss"),
+            require.resolve("../src/packages/excalidraw/example/App.scss"),
+          ],
         },
       }),
     ],
@@ -125,7 +123,7 @@ const config = {
       prism: {
         theme: require("prism-react-renderer/themes/dracula"),
       },
-      image: "img/og-image-2.png",
+      image: "img/og-image.png",
       docs: {
         sidebar: {
           hideable: true,
@@ -141,15 +139,7 @@ const config = {
       },
     }),
   themes: ["@docusaurus/theme-live-codeblock"],
-  plugins: [
-    "docusaurus-plugin-sass",
-    [
-      "docusaurus2-dotenv",
-      {
-        systemvars: true,
-      },
-    ],
-  ],
+  plugins: ["docusaurus-plugin-sass"],
 };
 
 module.exports = config;

dev-docs/package.json

@@ -18,7 +18,7 @@
     "@docusaurus/core": "2.2.0",
     "@docusaurus/preset-classic": "2.2.0",
     "@docusaurus/theme-live-codeblock": "2.2.0",
-    "@excalidraw/excalidraw": "0.17.0",
+    "@excalidraw/excalidraw": "0.14.2",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
     "docusaurus-plugin-sass": "0.2.3",
@@ -30,7 +30,6 @@
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.0.0-rc.1",
     "@tsconfig/docusaurus": "^1.0.5",
-    "docusaurus2-dotenv": "1.4.0",
     "typescript": "^4.7.4"
   },
   "browserslist": {

dev-docs/sidebars.js

@@ -23,11 +23,7 @@ const sidebars = {
       },
       items: ["introduction/development", "introduction/contributing"],
     },
-    {
-      type: "category",
-      label: "Codebase",
-      items: ["codebase/json-schema", "codebase/frames"],
-    },
+
     {
       type: "category",
       label: "@excalidraw/excalidraw",
@@ -53,7 +49,7 @@ const sidebars = {
               },
               items: [
                 "@excalidraw/excalidraw/api/props/initialdata",
-                "@excalidraw/excalidraw/api/props/excalidraw-api",
+                "@excalidraw/excalidraw/api/props/ref",
                 "@excalidraw/excalidraw/api/props/render-props",
                 "@excalidraw/excalidraw/api/props/ui-options",
               ],
@@ -68,7 +64,6 @@ const sidebars = {
               items: [
                 "@excalidraw/excalidraw/api/children-components/main-menu",
                 "@excalidraw/excalidraw/api/children-components/welcome-screen",
-                "@excalidraw/excalidraw/api/children-components/sidebar",
                 "@excalidraw/excalidraw/api/children-components/footer",
                 "@excalidraw/excalidraw/api/children-components/live-collaboration-trigger",
               ],
@@ -85,48 +80,18 @@ const sidebars = {
                 "@excalidraw/excalidraw/api/utils/restore",
               ],
             },
-            "@excalidraw/excalidraw/api/constants",
-            "@excalidraw/excalidraw/api/excalidraw-element-skeleton",
+            {
+              type: "category",
+              label: "Constants",
+              link: { type: "doc", id: "@excalidraw/excalidraw/api/constants" },
+              items: [],
+            },
           ],
         },
         "@excalidraw/excalidraw/faq",
         "@excalidraw/excalidraw/development",
       ],
     },
-    {
-      type: "category",
-      label: "@excalidraw/mermaid-to-excalidraw",
-      link: {
-        type: "doc",
-        id: "@excalidraw/mermaid-to-excalidraw/installation",
-      },
-      items: [
-        "@excalidraw/mermaid-to-excalidraw/api",
-        "@excalidraw/mermaid-to-excalidraw/development",
-        {
-          type: "category",
-          label: "Codebase",
-          link: {
-            type: "doc",
-            id: "@excalidraw/mermaid-to-excalidraw/codebase/codebase",
-          },
-          items: [
-            {
-              type: "category",
-              label: "How Parser works under the hood?",
-              link: {
-                type: "doc",
-                id: "@excalidraw/mermaid-to-excalidraw/codebase/parser/parser",
-              },
-              items: [
-                "@excalidraw/mermaid-to-excalidraw/codebase/parser/flowchart",
-              ],
-            },
-            "@excalidraw/mermaid-to-excalidraw/codebase/new-diagram-type",
-          ],
-        },
-      ],
-    },
   ],
 };
 

dev-docs/src/components/Homepage/index.js

@@ -15,7 +15,7 @@ const FeatureList = [
     Svg: require("@site/static/img/undraw_blank_canvas.svg").default,
     description: (
       <>
-        Want to build your own app powered by Excalidraw but don't know where to
+        Want to build your own app powered by Excalidraw by don't know where to
         start?
       </>
     ),

dev-docs/src/theme/ReactLiveScope/index.js

@@ -24,8 +24,6 @@ const ExcalidrawScope = {
   Sidebar: ExcalidrawComp.Sidebar,
   exportToCanvas: ExcalidrawComp.exportToCanvas,
   initialData,
-  useI18n: ExcalidrawComp.useI18n,
-  convertToExcalidrawElements: ExcalidrawComp.convertToExcalidrawElements,
 };
 
 export default ExcalidrawScope;

dev-docs/static/img/logo.svg

@@ -1,7 +1,4 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
-  <rect width="1000" height="1000" rx="200" ry="200" fill="#fff" />
-  <svg viewBox="0 0 107 101" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
-    <path style="fill:none" d="M24 17h121v121H24z" transform="matrix(.8843 0 0 .83471 -21.223 -14.19)" />
-    <path d="M119.81 105.98a.549.549 0 0 0-.53-.12c-4.19-6.19-9.52-12.06-14.68-17.73l-.85-.93c0-.11-.05-.21-.12-.3a.548.548 0 0 0-.34-.2l-.17-.18-.12-.09c-.15-.32-.53-.56-.95-.35-1.58.81-3 1.97-4.4 3.04-1.87 1.43-3.7 2.92-5.42 4.52-.7.65-1.39 1.33-1.97 2.09-.28.37-.07.72.27.87-1.22 1.2-2.45 2.45-3.68 3.74-.11.12-.17.28-.16.44.01.16.09.31.22.41l2.16 1.65s.01.03.03.04c3.09 3.05 8.51 7.28 14.25 11.76.85.67 1.71 1.34 2.57 2.01.39.47.76.94 1.12 1.4.19.25.55.3.8.11.13.1.26.21.39.31a.57.57 0 0 0 .8-.1c.07-.09.1-.2.11-.31.04 0 .07.03.1.03.15 0 .31-.06.42-.18l10.18-11.12a.56.56 0 0 0-.04-.8l.01-.01Zm-29.23-3.85c.07.09.14.17.21.25 1.16.98 2.4 2.04 3.66 3.12l-5.12-3.91s-.32-.22-.52-.36c-.11-.08-.21-.16-.31-.24l-.38-.32s.07-.07.1-.11l.35-.35c1.72-1.74 4.67-4.64 6.19-6.06-1.61 1.62-4.87 6.37-4.17 7.98h-.01Zm17.53 13.81-4.22-3.22c-1.65-1.71-3.43-3.4-5.24-5.03 2.28 1.76 4.23 3.25 4.52 3.51 2.21 1.97 2.11 1.61 3.63 2.91l1.83 1.33c-.18.16-.36.33-.53.49l.01.01Zm1.06.81-.08-.06c.16-.13.33-.25.49-.38l-.4.44h-.01ZM42.24 51.45c.14.72.27 1.43.4 2.11.69 3.7 1.33 7.03 2.55 9.56l.48 1.92c.19.73.46 1.64.71 1.83 2.85 2.52 7.22 6.28 11.89 9.82.21.16.5.15.7-.01.01.02.03.03.04.04.11.1.24.15.38.15.16 0 .31-.06.42-.19 5.98-6.65 10.43-12.12 13.6-16.7.2-.25.3-.54.29-.84.2-.24.41-.48.6-.68a.558.558 0 0 0-.1-.86.578.578 0 0 0-.17-.36c-1.39-1.34-2.42-2.31-3.46-3.28-1.84-1.72-3.74-3.5-7.77-7.51-.02-.02-.05-.04-.07-.06a.555.555 0 0 0-.22-.14c-1.11-.39-3.39-.78-6.26-1.28-4.22-.72-10-1.72-15.2-3.27h-.04v-.01s-.02 0-.03.02h-.01l.04-.02s-.31.01-.37.04c-.08.04-.14.09-.19.15-.05.06-.09.12-.47.2-.38.08.08 0 .11 0h-.11v.03c.07.34.05.58.16.97-.02.1.21 1.02.24 1.11l1.83 7.26h.03Zm30.95 6.54s-.03.04-.04.05l-.64-.71c.22.21.44.42.68.66Zm-7.09 9.39s-.07.08-.1.12l-.02-.02c.04-.03.08-.07.13-.1h-.01Zm-7.07 8.47Zm3.02-28.57c.35.35 1.74 1.65 2.06 1.97-1.45-.66-5.06-2.34-6.74-2.88 1.65.29 3.93.66 4.68.91Zm-19.18-2.77c.84 1.44 1.5 6.49 2.16 11.4-.37-1.58-.69-3.12-.99-4.6-.52-2.56-1-4.85-1.67-6.88.14.01.31.03.49.05 0 .01 0 .02.02.03h-.01Zm-.29-1.21c-.23-.02-.44-.04-.62-.05-.02-.04-.03-.08-.04-.12l.66.18v-.01Zm-2.22.45v-.02.02ZM118.9 42.57c.04-.23-1.1-1.24-.74-1.26.85-.04.86-1.35 0-1.31-1.13.06-2.27.32-3.37.53-1.98.37-3.95.78-5.92 1.21-4.39.94-8.77 1.93-13.1 3.11-1.36.37-2.86.7-4.11 1.36-.42.22-.4.67-.17.95-.09.05-.18.08-.28.09-.37.07-.74.13-1.11.19a.566.566 0 0 0-.39.86c-2.32 3.1-4.96 6.44-7.82 9.95-2.81 3.21-5.73 6.63-8.72 10.14-9.41 11.06-20.08 23.6-31.9 34.64-.23.21-.24.57-.03.8.05.06.12.1.19.13-.16.15-.32.3-.48.44-.1.09-.14.2-.16.32-.08.08-.16.17-.23.25-.21.23-.2.59.03.8.23.21.59.2.8-.03.04-.04.08-.09.12-.13a.84.84 0 0 1 1.22 0c.69.74 1.34 1.44 1.95 2.09l-1.38-1.15a.57.57 0 0 0-.8.07c-.2.24-.17.6.07.8l14.82 12.43c.11.09.24.13.37.13.15 0 .29-.06.4-.17l.36-.36a.56.56 0 0 0 .63-.12c20.09-20.18 36.27-35.43 54.8-49.06.17-.12.25-.32.23-.51a.57.57 0 0 0 .48-.39c3.42-10.46 4.08-19.72 4.28-24.27 0-.03.01-.05.02-.07.02-.05.03-.1.04-.14.03-.11.05-.19.05-.19.26-.78.17-1.53-.15-2.15v.02ZM82.98 58.94c.9-1.03 1.79-2.04 2.67-3.02-5.76 7.58-15.3 19.26-28.81 33.14 9.2-10.18 18.47-20.73 26.14-30.12Zm-32.55 52.81-.03-.03c.11.02.19.04.2.04a.47.47 0 0 0-.17 0v-.01Zm6.9 6.42-.05-.04.03-.03c.02 0 .03.02.04.02 0 .02-.02.03-.03.05h.01Zm8.36-7.21 1.38-1.44c.01.01.02.03.03.05-.47.46-.94.93-1.42 1.39h.01Zm2.24-2.21c.26-.3.56-.65.87-1.02.01-.01.02-.03.04-.04 3.29-3.39 6.68-6.82 10.18-10.25.02-.02.05-.04.07-.06.86-.66 1.82-1.39 2.72-2.08-4.52 4.32-9.11 8.78-13.88 13.46v-.01Zm21.65-55.88c-1.86 2.42-3.9 5.56-5.63 8.07-5.46 7.91-23.04 27.28-23.43 27.65-2.71 2.62-10.88 10.46-16.09 15.37-.14.13-.25.24-.34.35a.794.794 0 0 1 .03-1.13c24.82-23.4 39.88-42.89 46-51.38-.13.33-.24.69-.55 1.09l.01-.02Zm16.51 7.1-.01.02c0-.02-.02-.07.01-.02Zm-.91-5.13Zm-5.89 9.45c-2.26-1.31-3.32-3.27-2.71-5.25l.19-.66c.08-.19.17-.38.28-.57.59-.98 1.49-1.85 2.52-2.36.05-.02.1-.03.15-.04a.795.795 0 0 1-.04-.43c.05-.31.25-.58.66-.58.67 0 2.75.62 3.54 1.3.24.19.47.4.68.63.3.35.74.92.96 1.33.13.06.23.62.38.91.14.46.2.93.18 1.4 0 .02 0 .02.01.03-.03.07 0 .37-.04.4-.1.72-.36 1.43-.75 2.05-.04.05-.07.11-.11.16 0 .01-.02.02-.03.04-.3.43-.65.83-1.08 1.13-1.26.89-2.73 1.16-4.2.79a6.33 6.33 0 0 1-.57-.25l-.02-.03Zm16.27-1.63c-.49 2.05-1.09 4.19-1.8 6.38-.03.08-.03.16-.03.23-.1.01-.19.05-.27.11-4.44 3.26-8.73 6.62-12.98 10.11 3.67-3.32 7.39-6.62 11.23-9.95a6.409 6.409 0 0 0 2.11-3.74l.56-3.37.03-.1c.25-.71 1.34-.4 1.17.33h-.02Z" style="fill:#6965db;fill-rule:nonzero" transform="matrix(1 0 0 1 -26.41 -29.49)" />
-  </svg>
+<svg viewBox="0 0 80 180" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2">
+	<path d="M22.197 150.382c-4.179-3.359-10.618-9.051-15.702-13.946l-4.01-3.813.734-5.009c.396-2.732 1.13-8.083 1.582-11.839.508-3.757 1.017-7.286 1.186-7.798.226-.683 0-1.025-.621-1.025-1.073 0-1.13.285 1.807-9.107a617.602 617.602 0 0 1 2.203-7.229c.113-.398.565-.569 1.073-.398.508.227.791.683.621 1.081-.169.455.113.911.565 1.082.621.227.565.683-.395 2.333-1.525 2.562-5.422 24.419-5.648 31.477-.17 5.009-.17 5.066 1.92 7.912 2.033 2.789 6.721 7.001 13.951 12.351 2.033 1.537 4.067 3.245 4.631 3.814.848 1.024 1.243.74 8.36-6.887 4.123-4.383 8.698-8.88 10.166-10.018l2.711-2.049-2.089-4.44c-1.13-2.391-5.705-11.612-10.223-20.377-9.433-18.442-7.513-16.678-18.47-16.849l-7.117-.056-2.372-2.733c-2.485-2.903-2.824-3.984-1.638-5.805.452-.627.791-1.651.791-2.277 0-1.025.395-1.196 2.655-1.309 1.412-.057 2.711-.228 2.88-.399.17-.171.396-3.7.565-7.855l.226-7.513-3.784-8.197C2.485 39.844 0 33.583 0 31.533c0-1.081.226-1.992.452-1.992.565 0 .565.057 23.553 48.382 10.675 22.426 20.785 43.544 22.479 47.016 1.695 3.472 3.22 6.659 3.333 7.115.113.512-3.785 4.439-9.998 9.961-5.591 5.008-10.505 9.562-10.957 10.074-1.299 1.594-3.219 1.082-6.665-1.707Zm1.921-65.458c-2.599-5.066-2.712-5.123-9.828-5.464-6.27-.342-6.383-.285-6.383.911 0 .683-.226 1.593-.508 2.049-.339.512-.113 1.423.678 2.675l1.242 1.935h5.649c3.106.057 6.664.285 7.907.512 1.243.228 2.316.342 2.429.285.113-.057-.452-1.366-1.186-2.903Zm-4.745-9.107c-.452-1.195-1.638-3.7-2.598-5.578-1.581-3.188-1.751-3.301-2.146-1.992-.226.797-.396 3.13-.452 5.236-.057 4.155-.17 4.098 4.575 4.383l1.525.057-.904-2.106Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
+	<path d="M23.892 136.835c-1.017-.74-1.299-1.48-1.299-3.358 0-2.22.169-2.562 1.694-3.188 1.525-.626 1.92-.569 3.671.626 2.316 1.594 2.373 1.992.678 4.554-1.468 2.22-2.937 2.618-4.744 1.366Zm3.219-2.049c.904-1.594.339-2.789-1.355-2.789-1.525 0-2.203 1.536-1.356 3.073.678 1.253 1.977 1.139 2.711-.284ZM59.306 124.028c0-.285-.339-.569-.735-.569-.339 0-1.299-1.594-2.033-3.529-2.259-5.92-24.852-50.943-24.908-49.52 0 .74-.339 1.252-.904 1.252-.791 0-.904-.456-.565-2.675.339-2.562.113-3.131-7.907-18.841-4.519-8.936-9.376-18.271-10.788-20.775-1.469-2.619-2.598-5.465-2.711-6.66-.17-2.049.056-2.334 4.97-6.603 2.824-2.504 6.439-5.635 8.02-7.058C28.862 2.504 32.194-.114 33.098.057c1.356.228 22.31 22.369 22.367 23.622 0 .569-1.017 9.221-2.259 19.238-2.147 17.076-4.18 37.055-3.954 38.99.169 1.196-.678 7.229-1.299 9.847-.509 2.05-.283 2.903 3.784 12.238 2.372 5.521 5.479 12.295 6.834 15.027 1.299 2.732 2.429 5.123 2.429 5.294 0 .17-.395.284-.847.284-.452 0-.847-.228-.847-.569ZM46.315 81.509c.621-3.984 1.864-13.547 2.767-21.231 1.751-14.116 3.785-29.769 4.349-33.753.339-1.993.113-2.391-3.558-6.489-6.382-7.229-13.16-14.344-15.476-16.165l-2.146-1.708-11.014 10.359C11.07 21.971 10.223 22.939 10.844 24.077c.339.626 3.22 5.92 6.383 11.725 3.163 5.806 7.342 13.547 9.263 17.19 1.977 3.7 3.784 6.887 4.123 7.058.395.228.508-5.521.395-17.759-.226-18.271-.169-18.328 1.638-17.929.226 0 .396 9.221.396 20.434v20.377l5.93 11.953c3.276 6.603 5.987 11.896 6.1 11.84.113-.058.678-3.416 1.243-7.457Z" style="fill-rule:nonzero;stroke:#000;stroke-width:2px" transform="matrix(1.01351 0 0 -1 9.088 166.517)" />
 </svg>

dev-docs/vercel.json

@@ -1,4 +0,0 @@
-{
-  "outputDirectory": "build",
-  "installCommand": "yarn install"
-}

dev-docs/yarn.lock

@@ -145,14 +145,6 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
-"@babel/code-frame@^7.22.13":
-  version "7.22.13"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
-  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
-  dependencies:
-    "@babel/highlight" "^7.22.13"
-    chalk "^2.4.2"
-
 "@babel/compat-data@^7.17.7", "@babel/compat-data@^7.18.8":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.8.tgz#2483f565faca607b8535590e84e7de323f27764d"
@@ -210,16 +202,6 @@
     "@jridgewell/gen-mapping" "^0.3.2"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.0.tgz#df5c386e2218be505b34837acbcb874d7a983420"
-  integrity sha512-lN85QRR+5IbYrMWM6Y4pE/noaQtg4pNiqeNGX60eqOfo6gtEj6uw/JagelB8vVztSd7R6M5n1+PQkDbHbBRU4g==
-  dependencies:
-    "@babel/types" "^7.23.0"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
-    jsesc "^2.5.1"
-
 "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -283,11 +265,6 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.9.tgz#0c0cee9b35d2ca190478756865bb3528422f51be"
   integrity sha512-3r/aACDJ3fhQ/EVgFy0hpj8oHyHpQc+LPtJoY9SzTThAsStm4Ptegq92vqKoE3vD706ZVFWITnMnxucw+S9Ipg==
 
-"@babel/helper-environment-visitor@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
-  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
-
 "@babel/helper-explode-assignable-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
@@ -303,14 +280,6 @@
     "@babel/template" "^7.18.6"
     "@babel/types" "^7.18.9"
 
-"@babel/helper-function-name@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
-  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
-  dependencies:
-    "@babel/template" "^7.22.15"
-    "@babel/types" "^7.23.0"
-
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz#d4d2c8fb4baeaa5c68b99cc8245c56554f926678"
@@ -318,13 +287,6 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-hoist-variables@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
-  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
 "@babel/helper-member-expression-to-functions@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz#1531661e8375af843ad37ac692c132841e2fd815"
@@ -412,28 +374,11 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-split-export-declaration@^7.22.6":
-  version "7.22.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
-  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
-  dependencies:
-    "@babel/types" "^7.22.5"
-
-"@babel/helper-string-parser@^7.22.5":
-  version "7.22.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
-  integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
-
 "@babel/helper-validator-identifier@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
-"@babel/helper-validator-identifier@^7.22.20":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
-  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
-
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -467,25 +412,11 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.22.13":
-  version "7.22.20"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
-  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.22.20"
-    chalk "^2.4.2"
-    js-tokens "^4.0.0"
-
 "@babel/parser@^7.12.7", "@babel/parser@^7.18.6", "@babel/parser@^7.18.8", "@babel/parser@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.9.tgz#f2dde0c682ccc264a9a8595efd030a5cc8fd2539"
   integrity sha512-9uJveS9eY9DJ0t64YbIBZICtJy8a5QrDEVdiLCG97fVLpDTpGX7t8mMSb6OWw6Lrnjqj4O8zwjELX3dhoMgiBg==
 
-"@babel/parser@^7.22.15", "@babel/parser@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.0.tgz#da950e622420bf96ca0d0f2909cdddac3acd8719"
-  integrity sha512-vvPKKdMemU85V9WE/l5wZEmImpCtLqbnTvqDS2U1fJ96KrxoW7KrXhNsNCblQlg8Ck4b85yxdTyelsMUgFUXiw==
-
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -1216,28 +1147,19 @@
     "@babel/parser" "^7.18.6"
     "@babel/types" "^7.18.6"
 
-"@babel/template@^7.22.15":
-  version "7.22.15"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
-  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
-  dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/parser" "^7.22.15"
-    "@babel/types" "^7.22.15"
-
 "@babel/traverse@^7.12.9", "@babel/traverse@^7.18.8", "@babel/traverse@^7.18.9":
-  version "7.23.2"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.2.tgz#329c7a06735e144a506bdb2cad0268b7f46f4ad8"
-  integrity sha512-azpe59SQ48qG6nu2CzcMLbxUudtN+dOM9kDbUqGq3HXUJRlo7i8fvPoxQUzYgLZ4cMVmuZgm8vvBpNeRhd6XSw==
+  version "7.18.9"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.9.tgz#deeff3e8f1bad9786874cb2feda7a2d77a904f98"
+  integrity sha512-LcPAnujXGwBgv3/WHv01pHtb2tihcyW1XuL9wd7jqh1Z8AQkTd+QVjMrMijrln0T7ED3UXLIy36P9Ao7W75rYg==
   dependencies:
-    "@babel/code-frame" "^7.22.13"
-    "@babel/generator" "^7.23.0"
-    "@babel/helper-environment-visitor" "^7.22.20"
-    "@babel/helper-function-name" "^7.23.0"
-    "@babel/helper-hoist-variables" "^7.22.5"
-    "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.0"
-    "@babel/types" "^7.23.0"
+    "@babel/code-frame" "^7.18.6"
+    "@babel/generator" "^7.18.9"
+    "@babel/helper-environment-visitor" "^7.18.9"
+    "@babel/helper-function-name" "^7.18.9"
+    "@babel/helper-hoist-variables" "^7.18.6"
+    "@babel/helper-split-export-declaration" "^7.18.6"
+    "@babel/parser" "^7.18.9"
+    "@babel/types" "^7.18.9"
     debug "^4.1.0"
     globals "^11.1.0"
 
@@ -1249,15 +1171,6 @@
     "@babel/helper-validator-identifier" "^7.18.6"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
-  version "7.23.0"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.0.tgz#8c1f020c9df0e737e4e247c0619f58c68458aaeb"
-  integrity sha512-0oIyUfKoI3mSqMvsxBdclDwxXKXAUA8v/apZbc+iSyARYou1o8ZGDxbUYyLFoW2arqS2jDGqJuZvv1d/io1axg==
-  dependencies:
-    "@babel/helper-string-parser" "^7.22.5"
-    "@babel/helper-validator-identifier" "^7.22.20"
-    to-fast-properties "^2.0.0"
-
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -1718,10 +1631,10 @@
     url-loader "^4.1.1"
     webpack "^5.73.0"
 
-"@excalidraw/excalidraw@0.17.0":
-  version "0.17.0"
-  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.17.0.tgz#3c64aa8e36406ac171b008cfecbdce5bb0755725"
-  integrity sha512-NzP22v5xMqxYW27ZtTHhiGFe7kE8NeBk45aoeM/mDSkXiOXPDH+PcvwzHRN/Ei+Vj/0sTPHxejn8bZyRWKGjXg==
+"@excalidraw/excalidraw@0.14.2":
+  version "0.14.2"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.14.2.tgz#150cb4b7a1bf0d11cd64295936c930e7e0db8375"
+  integrity sha512-8LdjpTBWEK5waDWB7Bt/G9YBI4j0OxkstUhvaDGz7dwQGfzF6FW5CXBoYHNEoX0qmb+Fg/NPOlZ7FrKsrSVCqg==
 
 "@hapi/hoek@^9.0.0":
   version "9.3.0"
@@ -1757,11 +1670,6 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
   integrity sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==
 
-"@jridgewell/resolve-uri@^3.1.0":
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.1.tgz#c08679063f279615a3326583ba3a90d1d82cc721"
-  integrity sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==
-
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
@@ -1780,19 +1688,6 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz#add4c98d341472a289190b424efbdb096991bb24"
   integrity sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==
 
-"@jridgewell/sourcemap-codec@^1.4.14":
-  version "1.4.15"
-  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
-  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
-
-"@jridgewell/trace-mapping@^0.3.17":
-  version "0.3.20"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.20.tgz#72e45707cf240fa6b081d0366f8265b0cd10197f"
-  integrity sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==
-  dependencies:
-    "@jridgewell/resolve-uri" "^3.1.0"
-    "@jridgewell/sourcemap-codec" "^1.4.14"
-
 "@jridgewell/trace-mapping@^0.3.7", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed"
@@ -1890,9 +1785,9 @@
     "@hapi/hoek" "^9.0.0"
 
 "@sideway/formula@^3.0.0":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.1.tgz#80fcbcbaf7ce031e0ef2dd29b1bfc7c3f583611f"
-  integrity sha512-/poHZJJVjx3L+zVD6g9KgHfYnb443oi7wLu/XKojDviHy6HOEOA6z1Trk5aR1dGcmPenJEgb2sK2I80LeS3MIg==
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@sideway/formula/-/formula-3.0.0.tgz#fe158aee32e6bd5de85044be615bc08478a0a13c"
+  integrity sha512-vHe7wZ4NOXVfkoRb8T5otiENVlT7a3IAiw7H5M2+GO+9CDgcVUUsX1zalAztCmwyOr2RUTGJdgB+ZvSVqmdHmg==
 
 "@sideway/pinpoint@^2.0.0":
   version "2.0.0"
@@ -3567,13 +3462,6 @@ docusaurus-plugin-sass@0.2.3:
   dependencies:
     sass-loader "^10.1.1"
 
-docusaurus2-dotenv@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/docusaurus2-dotenv/-/docusaurus2-dotenv-1.4.0.tgz#9ab900e29de9081f9f1f28f7224ff63760385641"
-  integrity sha512-iWqem5fnBAyeBBtX75Fxp71uUAnwFaXzOmade8zAhN4vL3RG9m27sLSRwjJGVVgIkEo3esjGyCcTGTiCjfi+sg==
-  dependencies:
-    dotenv-webpack "1.7.0"
-
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -3659,25 +3547,6 @@ dot-prop@^5.2.0:
   dependencies:
     is-obj "^2.0.0"
 
-dotenv-defaults@^1.0.2:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/dotenv-defaults/-/dotenv-defaults-1.1.1.tgz#032c024f4b5906d9990eb06d722dc74cc60ec1bd"
-  integrity sha512-6fPRo9o/3MxKvmRZBD3oNFdxODdhJtIy1zcJeUSCs6HCy4tarUpd+G67UTU9tF6OWXeSPqsm4fPAB+2eY9Rt9Q==
-  dependencies:
-    dotenv "^6.2.0"
-
-dotenv-webpack@1.7.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
-  integrity sha512-wwNtOBW/6gLQSkb8p43y0Wts970A3xtNiG/mpwj9MLUhtPCQG6i+/DSXXoNN7fbPCU/vQ7JjwGmgOeGZSSZnsw==
-  dependencies:
-    dotenv-defaults "^1.0.2"
-
-dotenv@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
-  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
-
 duplexer3@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/duplexer3/-/duplexer3-0.1.5.tgz#0b5e4d7bad5de8901ea4440624c8e1d20099217e"
@@ -4507,9 +4376,9 @@ htmlparser2@^8.0.1:
     entities "^4.3.0"
 
 http-cache-semantics@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.1.tgz#abe02fcb2985460bf0323be664436ec3476a6d5a"
-  integrity sha512-er295DKPVsV82j5kw1Gjt+ADA/XYHsajl82cGNQG2eyoPkvgUhX+nDIyelzhIWbbsXP39EHcI6l5tYs2FYqYXQ==
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz#49e91c5cbf36c9b94bcfcd71c23d5249ec74e390"
+  integrity sha512-carPklcUh7ROWRK7Cv27RPtdhYhUsela/ue5/jKzjegVvXDqM2ILE9Q2BGn9JZJh1g87cp56su/FgQSzcWS8cQ==
 
 http-deceiver@^1.2.7:
   version "1.2.7"
@@ -6742,19 +6611,19 @@ semver@7.0.0:
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
 semver@^5.4.1:
-  version "5.7.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
-  integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
+  version "5.7.1"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
+  integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
 
 semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.2.0, semver@^6.3.0:
-  version "6.3.1"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
-  integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
 semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
-  version "7.5.4"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
-  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
+  integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
   dependencies:
     lru-cache "^6.0.0"
 
@@ -7290,9 +7159,9 @@ typescript@^4.7.4:
   integrity sha512-C0WQT0gezHuw6AdY1M2jxUO83Rjf0HP7Sk1DtXj6j1EwkQNZrHAg2XPWlq62oqEhYvONq5pkC2Y9oPljWToLmQ==
 
 ua-parser-js@^0.7.30:
-  version "0.7.33"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.33.tgz#1d04acb4ccef9293df6f70f2c3d22f3030d8b532"
-  integrity sha512-s8ax/CeZdK9R/56Sui0WM6y9OFREJarMRHqLB2EwkovemBxNQ+Bqu8GAsUnVcXKgphb++ghr/B2BZx4mahujPw==
+  version "0.7.31"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.31.tgz#649a656b191dffab4f21d5e053e27ca17cbff5c6"
+  integrity sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==
 
 unescape@^1.0.1:
   version "1.0.1"
@@ -7673,9 +7542,9 @@ webpack-sources@^3.2.2, webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.73.0:
-  version "5.76.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.1.tgz#7773de017e988bccb0f13c7d75ec245f377d295c"
-  integrity sha512-4+YIK4Abzv8172/SGqObnUjaIHjLEuUasz9EwQj/9xmPPkYJy2Mh03Q/lJfSD3YLzbxy5FeTq5Uw0323Oh6SJQ==
+  version "5.74.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.74.0.tgz#02a5dac19a17e0bb47093f2be67c695102a55980"
+  integrity sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"

excalidraw-app/app-jotai.ts

@@ -1,3 +0,0 @@
-import { unstable_createStore } from "jotai";
-
-export const appJotaiStore = unstable_createStore();

excalidraw-app/collab/RoomDialog.scss

@@ -1,149 +0,0 @@
-@import "../../packages/excalidraw/css/variables.module.scss";
-
-.excalidraw {
-  .RoomDialog {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-
-    @include isMobile {
-      height: calc(100vh - 5rem);
-    }
-
-    &__popover {
-      @keyframes RoomDialog__popover__scaleIn {
-        from {
-          opacity: 0;
-        }
-        to {
-          opacity: 1;
-        }
-      }
-
-      box-sizing: border-box;
-      z-index: 100;
-
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: flex-start;
-      padding: 0.125rem 0.5rem;
-      gap: 0.125rem;
-
-      height: 1.125rem;
-
-      border: none;
-      border-radius: 0.6875rem;
-
-      font-family: "Assistant";
-      font-style: normal;
-      font-weight: 600;
-      font-size: 0.75rem;
-      line-height: 110%;
-
-      background: var(--color-success-lighter);
-      color: var(--color-success);
-
-      & > svg {
-        width: 0.875rem;
-        height: 0.875rem;
-      }
-
-      transform-origin: var(--radix-popover-content-transform-origin);
-      animation: RoomDialog__popover__scaleIn 150ms ease-out;
-    }
-
-    &__inactive {
-      font-family: "Assistant";
-
-      &__illustration {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: center;
-
-        & svg {
-          filter: var(--theme-filter);
-        }
-      }
-
-      &__header {
-        display: flex;
-        width: 100%;
-        align-items: center;
-        justify-content: center;
-
-        font-weight: 700;
-        font-size: 1.3125rem;
-        line-height: 130%;
-
-        color: var(--color-primary);
-      }
-
-      &__description {
-        font-weight: 400;
-        font-size: 0.875rem;
-        line-height: 150%;
-
-        text-align: center;
-
-        color: var(--text-primary-color);
-
-        & strong {
-          display: block;
-          font-weight: 700;
-        }
-      }
-
-      &__start_session {
-        display: flex;
-
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    &__active {
-      &__share {
-        display: none !important;
-
-        @include isMobile {
-          display: flex !important;
-        }
-      }
-
-      &__header {
-        margin: 0;
-      }
-
-      &__linkRow {
-        display: flex;
-        flex-direction: row;
-        align-items: flex-end;
-        gap: 0.75rem;
-      }
-
-      &__description {
-        border-top: 1px solid var(--color-gray-20);
-
-        padding: 0.5rem 0.5rem 0;
-        font-weight: 400;
-        font-size: 0.75rem;
-        line-height: 150%;
-
-        & p {
-          margin: 0;
-        }
-
-        & p + p {
-          margin-top: 1em;
-        }
-      }
-
-      &__actions {
-        display: flex;
-        justify-content: center;
-      }
-    }
-  }
-}

excalidraw-app/collab/RoomDialog.tsx

@@ -1,219 +0,0 @@
-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);
-
-      setJustCopied(true);
-
-      if (timerRef.current) {
-        window.clearTimeout(timerRef.current);
-      }
-
-      timerRef.current = window.setTimeout(() => {
-        setJustCopied(false);
-      }, 3000);
-    } catch (error: any) {
-      setErrorMessage(error.message);
-    }
-
-    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"
-              startIcon={getShareIcon()}
-              className="RoomDialog__active__share"
-              onClick={shareRoomLink}
-            />
-          )}
-          <Popover.Root open={justCopied}>
-            <Popover.Trigger asChild>
-              <FilledButton
-                size="large"
-                label="Copy link"
-                startIcon={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")}
-            startIcon={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")}
-          startIcon={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;

excalidraw-app/components/EncryptedIcon.tsx

@@ -1,21 +0,0 @@
-import { shield } from "../../packages/excalidraw/components/icons";
-import { Tooltip } from "../../packages/excalidraw/components/Tooltip";
-import { useI18n } from "../../packages/excalidraw/i18n";
-
-export const EncryptedIcon = () => {
-  const { t } = useI18n();
-
-  return (
-    <a
-      className="encrypted-icon tooltip"
-      href="https://blog.excalidraw.com/end-to-end-encryption/"
-      target="_blank"
-      rel="noopener noreferrer"
-      aria-label={t("encrypted.link")}
-    >
-      <Tooltip label={t("encrypted.tooltip")} long={true}>
-        {shield}
-      </Tooltip>
-    </a>
-  );
-};

excalidraw-app/debug.ts

@@ -1,135 +0,0 @@
-declare global {
-  interface Window {
-    debug: typeof Debug;
-  }
-}
-
-const lessPrecise = (num: number, precision = 5) =>
-  parseFloat(num.toPrecision(precision));
-
-const getAvgFrameTime = (times: number[]) =>
-  lessPrecise(times.reduce((a, b) => a + b) / times.length);
-
-const getFps = (frametime: number) => lessPrecise(1000 / frametime);
-
-export class Debug {
-  public static DEBUG_LOG_TIMES = true;
-
-  private static TIMES_AGGR: Record<string, { t: number; times: number[] }> =
-    {};
-  private static TIMES_AVG: Record<
-    string,
-    { t: number; times: number[]; avg: number | null }
-  > = {};
-  private static LAST_DEBUG_LOG_CALL = 0;
-  private static DEBUG_LOG_INTERVAL_ID: null | number = null;
-
-  private static setupInterval = () => {
-    if (Debug.DEBUG_LOG_INTERVAL_ID === null) {
-      console.info("%c(starting perf recording)", "color: lime");
-      Debug.DEBUG_LOG_INTERVAL_ID = window.setInterval(Debug.debugLogger, 1000);
-    }
-    Debug.LAST_DEBUG_LOG_CALL = Date.now();
-  };
-
-  private static debugLogger = () => {
-    if (
-      Date.now() - Debug.LAST_DEBUG_LOG_CALL > 600 &&
-      Debug.DEBUG_LOG_INTERVAL_ID !== null
-    ) {
-      window.clearInterval(Debug.DEBUG_LOG_INTERVAL_ID);
-      Debug.DEBUG_LOG_INTERVAL_ID = null;
-      for (const [name, { avg }] of Object.entries(Debug.TIMES_AVG)) {
-        if (avg != null) {
-          console.info(
-            `%c${name} run avg: ${avg}ms (${getFps(avg)} fps)`,
-            "color: blue",
-          );
-        }
-      }
-      console.info("%c(stopping perf recording)", "color: red");
-      Debug.TIMES_AGGR = {};
-      Debug.TIMES_AVG = {};
-      return;
-    }
-    if (Debug.DEBUG_LOG_TIMES) {
-      for (const [name, { t, times }] of Object.entries(Debug.TIMES_AGGR)) {
-        if (times.length) {
-          console.info(
-            name,
-            lessPrecise(times.reduce((a, b) => a + b)),
-            times.sort((a, b) => a - b).map((x) => lessPrecise(x)),
-          );
-          Debug.TIMES_AGGR[name] = { t, times: [] };
-        }
-      }
-      for (const [name, { t, times, avg }] of Object.entries(Debug.TIMES_AVG)) {
-        if (times.length) {
-          const avgFrameTime = getAvgFrameTime(times);
-          console.info(name, `${avgFrameTime}ms (${getFps(avgFrameTime)} fps)`);
-          Debug.TIMES_AVG[name] = {
-            t,
-            times: [],
-            avg:
-              avg != null ? getAvgFrameTime([avg, avgFrameTime]) : avgFrameTime,
-          };
-        }
-      }
-    }
-  };
-
-  public static logTime = (time?: number, name = "default") => {
-    Debug.setupInterval();
-    const now = performance.now();
-    const { t, times } = (Debug.TIMES_AGGR[name] = Debug.TIMES_AGGR[name] || {
-      t: 0,
-      times: [],
-    });
-    if (t) {
-      times.push(time != null ? time : now - t);
-    }
-    Debug.TIMES_AGGR[name].t = now;
-  };
-  public static logTimeAverage = (time?: number, name = "default") => {
-    Debug.setupInterval();
-    const now = performance.now();
-    const { t, times } = (Debug.TIMES_AVG[name] = Debug.TIMES_AVG[name] || {
-      t: 0,
-      times: [],
-    });
-    if (t) {
-      times.push(time != null ? time : now - t);
-    }
-    Debug.TIMES_AVG[name].t = now;
-  };
-
-  private static logWrapper =
-    (type: "logTime" | "logTimeAverage") =>
-    <T extends any[], R>(fn: (...args: T) => R, name = "default") => {
-      return (...args: T) => {
-        const t0 = performance.now();
-        const ret = fn(...args);
-        Debug.logTime(performance.now() - t0, name);
-        return ret;
-      };
-    };
-
-  public static logTimeWrap = Debug.logWrapper("logTime");
-  public static logTimeAverageWrap = Debug.logWrapper("logTimeAverage");
-
-  public static perfWrap = <T extends any[], R>(
-    fn: (...args: T) => R,
-    name = "default",
-  ) => {
-    return (...args: T) => {
-      // eslint-disable-next-line no-console
-      console.time(name);
-      const ret = fn(...args);
-      // eslint-disable-next-line no-console
-      console.timeEnd(name);
-      return ret;
-    };
-  };
-}
-//@ts-ignore
-window.debug = Debug;

excalidraw-app/global.d.ts

@@ -1,3 +0,0 @@
-interface Window {
-  __EXCALIDRAW_SHA__: string | undefined;
-}

excalidraw-app/package.json

@@ -1,40 +0,0 @@
-{
-  "name": "excalidraw-app",
-  "version": "1.0.0",
-  "private": true,
-  "homepage": ".",
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not ie <= 11",
-      "not op_mini all",
-      "not safari < 12",
-      "not kaios <= 2.5",
-      "not edge < 79",
-      "not chrome < 70",
-      "not and_uc < 13",
-      "not samsung < 10"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {},
-  "prettier": "@excalidraw/prettier-config",
-  "scripts": {
-    "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
-    "build:version": "node ../scripts/build-version.js",
-    "build": "yarn build:app && yarn build:version",
-    "start": "yarn && vite",
-    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
-    "build:preview": "yarn build && vite preview --port 5000"
-  }
-}

excalidraw-app/tests/LanguageList.test.tsx

@@ -1,34 +0,0 @@
-import { defaultLang } from "../../packages/excalidraw/i18n";
-import { UI } from "../../packages/excalidraw/tests/helpers/ui";
-import {
-  screen,
-  fireEvent,
-  waitFor,
-  render,
-} from "../../packages/excalidraw/tests/test-utils";
-
-import ExcalidrawApp from "../App";
-
-describe("Test LanguageList", () => {
-  it("rerenders UI on language change", async () => {
-    await render(<ExcalidrawApp />);
-
-    // select rectangle tool to show properties menu
-    UI.clickTool("rectangle");
-    // english lang should display `thin` label
-    expect(screen.queryByTitle(/thin/i)).not.toBeNull();
-    fireEvent.click(document.querySelector(".dropdown-menu-button")!);
-
-    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
-      target: { value: "de-DE" },
-    });
-    // switching to german, `thin` label should no longer exist
-    await waitFor(() => expect(screen.queryByTitle(/thin/i)).toBeNull());
-    // reset language
-    fireEvent.change(document.querySelector(".dropdown-select__language")!, {
-      target: { value: defaultLang.code },
-    });
-    // switching back to English
-    await waitFor(() => expect(screen.queryByTitle(/thin/i)).not.toBeNull());
-  });
-});

excalidraw-app/vite-env.d.ts

@@ -1,46 +0,0 @@
-/// <reference types="vite-plugin-pwa/vanillajs" />
-/// <reference types="vite-plugin-pwa/info" />
-/// <reference types="vite-plugin-svgr/client" />
-interface ImportMetaEnv {
-  // The port to run the dev server
-  VITE_APP_PORT: string;
-
-  VITE_APP_BACKEND_V2_GET_URL: string;
-  VITE_APP_BACKEND_V2_POST_URL: string;
-
-  // collaboration WebSocket server (https: string
-  VITE_APP_WS_SERVER_URL: string;
-
-  // set this only if using the collaboration workflow we use on excalidraw.com
-  VITE_APP_PORTAL_URL: string;
-  VITE_APP_AI_BACKEND: string;
-
-  VITE_APP_FIREBASE_CONFIG: string;
-
-  // whether to disable live reload / HMR. Usuaully what you want to do when
-  // debugging Service Workers.
-  VITE_APP_DEV_DISABLE_LIVE_RELOAD: string;
-
-  VITE_APP_DISABLE_SENTRY: string;
-
-  // Set this flag to false if you want to open the overlay by default
-  VITE_APP_COLLAPSE_OVERLAY: string;
-
-  // Enable eslint in dev server
-  VITE_APP_ENABLE_ESLINT: string;
-
-  VITE_APP_PLUS_LP: string;
-
-  VITE_APP_PLUS_APP: string;
-
-  VITE_APP_GIT_SHA: string;
-
-  MODE: string;
-
-  DEV: string;
-  PROD: string;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

excalidraw-app/vite.config.mts

@@ -1,194 +0,0 @@
-import { defineConfig, loadEnv } from "vite";
-import react from "@vitejs/plugin-react";
-import svgrPlugin from "vite-plugin-svgr";
-import { ViteEjsPlugin } from "vite-plugin-ejs";
-import { VitePWA } from "vite-plugin-pwa";
-import checker from "vite-plugin-checker";
-
-// To load .env.local variables
-const envVars = loadEnv("", `../`);
-// https://vitejs.dev/config/
-export default defineConfig({
-  server: {
-    port: Number(envVars.VITE_APP_PORT || 3000),
-    // open the browser
-    open: true,
-  },
-  // We need to specify the envDir since now there are no
-  //more located in parallel with the vite.config.ts file but in parent dir
-  envDir: "../",
-  build: {
-    outDir: "build",
-    rollupOptions: {
-      output: {
-        // Creating separate chunk for locales except for en and percentages.json so they
-        // can be cached at runtime and not merged with
-        // app precache. en.json and percentages.json are needed for first load
-        // or fallback hence not clubbing with locales so first load followed by offline mode works fine. This is how CRA used to work too.
-        manualChunks(id) {
-          if (
-            id.includes("packages/excalidraw/locales") &&
-            id.match(/en.json|percentages.json/) === null
-          ) {
-            const index = id.indexOf("locales/");
-            // Taking the substring after "locales/"
-            return `locales/${id.substring(index + 8)}`;
-          }
-        },
-      },
-    },
-    sourcemap: true,
-  },
-  plugins: [
-    react(),
-    checker({
-      typescript: true,
-      eslint:
-        envVars.VITE_APP_ENABLE_ESLINT === "false"
-          ? undefined
-          : { lintCommand: 'eslint "./**/*.{js,ts,tsx}"' },
-      overlay: {
-        initialIsOpen: envVars.VITE_APP_COLLAPSE_OVERLAY === "false",
-        badgeStyle: "margin-bottom: 4rem; margin-left: 1rem",
-      },
-    }),
-    svgrPlugin(),
-    ViteEjsPlugin(),
-    VitePWA({
-      registerType: "autoUpdate",
-      devOptions: {
-        /* set this flag to true to enable in Development mode */
-        enabled: false,
-      },
-
-      workbox: {
-        // Don't push fonts and locales to app precache
-        globIgnores: ["fonts.css", "**/locales/**", "service-worker.js"],
-        runtimeCaching: [
-          {
-            urlPattern: new RegExp("/.+.(ttf|woff2|otf)"),
-            handler: "CacheFirst",
-            options: {
-              cacheName: "fonts",
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24 * 90, // <== 90 days
-              },
-            },
-          },
-          {
-            urlPattern: new RegExp("fonts.css"),
-            handler: "StaleWhileRevalidate",
-            options: {
-              cacheName: "fonts",
-              expiration: {
-                maxEntries: 50,
-              },
-            },
-          },
-          {
-            urlPattern: new RegExp("locales/[^/]+.js"),
-            handler: "CacheFirst",
-            options: {
-              cacheName: "locales",
-              expiration: {
-                maxEntries: 50,
-                maxAgeSeconds: 60 * 60 * 24 * 30, // <== 30 days
-              },
-            },
-          },
-        ],
-      },
-      manifest: {
-        short_name: "Excalidraw",
-        name: "Excalidraw",
-        description:
-          "Excalidraw is a whiteboard tool that lets you easily sketch diagrams that have a hand-drawn feel to them.",
-        icons: [
-          {
-            src: "android-chrome-192x192.png",
-            sizes: "192x192",
-            type: "image/png",
-          },
-          {
-            src: "apple-touch-icon.png",
-            type: "image/png",
-            sizes: "180x180",
-          },
-          {
-            src: "favicon-32x32.png",
-            sizes: "32x32",
-            type: "image/png",
-          },
-          {
-            src: "favicon-16x16.png",
-            sizes: "16x16",
-            type: "image/png",
-          },
-        ],
-        start_url: "/",
-        display: "standalone",
-        theme_color: "#121212",
-        background_color: "#ffffff",
-        file_handlers: [
-          {
-            action: "/",
-            accept: {
-              "application/vnd.excalidraw+json": [".excalidraw"],
-            },
-          },
-        ],
-        share_target: {
-          action: "/web-share-target",
-          method: "POST",
-          enctype: "multipart/form-data",
-          params: {
-            files: [
-              {
-                name: "file",
-                accept: [
-                  "application/vnd.excalidraw+json",
-                  "application/json",
-                  ".excalidraw",
-                ],
-              },
-            ],
-          },
-        },
-        screenshots: [
-          {
-            src: "/screenshots/virtual-whiteboard.png",
-            type: "image/png",
-            sizes: "462x945",
-          },
-          {
-            src: "/screenshots/wireframe.png",
-            type: "image/png",
-            sizes: "462x945",
-          },
-          {
-            src: "/screenshots/illustration.png",
-            type: "image/png",
-            sizes: "462x945",
-          },
-          {
-            src: "/screenshots/shapes.png",
-            type: "image/png",
-            sizes: "462x945",
-          },
-          {
-            src: "/screenshots/collaboration.png",
-            type: "image/png",
-            sizes: "462x945",
-          },
-          {
-            src: "/screenshots/export.png",
-            type: "image/png",
-            sizes: "462x945",
-          },
-        ],
-      },
-    }),
-  ],
-  publicDir: "../public",
-});

package.json

@@ -1,67 +1,115 @@
 {
-  "private": true,
-  "name": "excalidraw-monorepo",
-  "workspaces": [
-    "excalidraw-app",
-    "packages/excalidraw",
-    "packages/utils"
-  ],
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not ie <= 11",
+      "not op_mini all",
+      "not safari < 12",
+      "not kaios <= 2.5",
+      "not edge < 79",
+      "not chrome < 70",
+      "not and_uc < 13",
+      "not samsung < 10"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
   "dependencies": {
-    "@excalidraw/random-username": "1.0.0",
+    "@dwelle/tunnel-rat": "0.1.1",
     "@sentry/browser": "6.2.5",
     "@sentry/integrations": "6.2.5",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.5",
+    "@tldraw/vec": "1.7.1",
+    "@types/jest": "27.4.0",
+    "@types/pica": "5.1.3",
+    "@types/react": "18.0.15",
+    "@types/react-dom": "18.0.6",
+    "@types/socket.io-client": "1.4.36",
+    "browser-fs-access": "0.29.1",
+    "clsx": "1.1.1",
+    "cross-env": "7.0.3",
+    "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
-    "jotai": "1.13.1",
+    "image-blob-reduce": "3.0.1",
+    "jotai": "1.6.4",
+    "lodash.throttle": "4.1.1",
+    "nanoid": "3.3.3",
+    "open-color": "1.9.1",
+    "pako": "1.0.11",
+    "perfect-freehand": "1.2.0",
+    "pica": "7.1.1",
+    "png-chunk-text": "1.0.0",
+    "png-chunks-encode": "1.0.0",
+    "png-chunks-extract": "1.0.0",
+    "points-on-curve": "0.2.0",
+    "pwacompat": "2.0.17",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "socket.io-client": "4.7.2"
+    "react-scripts": "5.0.1",
+    "roughjs": "4.5.2",
+    "sass": "1.51.0",
+    "socket.io-client": "2.3.1",
+    "tunnel-rat": "0.1.0",
+    "typescript": "4.9.4",
+    "workbox-background-sync": "^6.5.4",
+    "workbox-broadcast-update": "^6.5.4",
+    "workbox-cacheable-response": "^6.5.4",
+    "workbox-core": "^6.5.4",
+    "workbox-expiration": "^6.5.4",
+    "workbox-google-analytics": "^6.5.4",
+    "workbox-navigation-preload": "^6.5.4",
+    "workbox-precaching": "^6.5.4",
+    "workbox-range-requests": "^6.5.4",
+    "workbox-routing": "^6.5.4",
+    "workbox-strategies": "^6.5.4",
+    "workbox-streams": "^6.5.4"
   },
   "devDependencies": {
-    "@excalidraw/eslint-config": "1.0.3",
+    "@excalidraw/eslint-config": "1.0.0",
     "@excalidraw/prettier-config": "1.0.2",
     "@types/chai": "4.3.0",
-    "@types/jest": "27.4.0",
     "@types/lodash.throttle": "4.1.7",
-    "@types/react": "18.0.15",
-    "@types/react-dom": "18.0.6",
-    "@types/socket.io-client": "3.0.0",
-    "@vitejs/plugin-react": "3.1.0",
-    "@vitest/coverage-v8": "0.33.0",
-    "@vitest/ui": "0.32.2",
+    "@types/pako": "1.0.3",
+    "@types/resize-observer-browser": "0.1.7",
     "chai": "4.3.6",
     "dotenv": "16.0.1",
     "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "7.0.1",
     "eslint-plugin-prettier": "3.3.1",
     "http-server": "14.1.1",
     "husky": "7.0.4",
-    "jsdom": "22.1.0",
+    "jest-canvas-mock": "2.4.0",
     "lint-staged": "12.3.7",
     "pepjs": "0.5.3",
     "prettier": "2.6.2",
-    "rewire": "6.0.0",
-    "typescript": "4.9.4",
-    "vite": "5.0.6",
-    "vite-plugin-checker": "0.6.1",
-    "vite-plugin-ejs": "1.7.0",
-    "vite-plugin-pwa": "0.17.4",
-    "vite-plugin-svgr": "2.4.0",
-    "vitest": "1.0.1",
-    "vitest-canvas-mock": "0.3.2"
+    "rewire": "6.0.0"
   },
   "engines": {
-    "node": "18.0.0 - 20.x.x"
+    "node": ">=14.0.0"
   },
   "homepage": ".",
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!(roughjs|points-on-curve|path-data-parser|points-on-path|browser-fs-access)/)"
+    ],
+    "resetMocks": false
+  },
+  "name": "excalidraw",
   "prettier": "@excalidraw/prettier-config",
+  "private": true,
   "scripts": {
     "build-node": "node ./scripts/build-node.js",
-    "build:app:docker": "cross-env VITE_APP_DISABLE_SENTRY=true VITE_APP_DISABLE_TRACKING=true vite build",
-    "build:app": "cross-env VITE_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA vite build",
+    "build:app:docker": "cross-env REACT_APP_DISABLE_SENTRY=true REACT_APP_DISABLE_TRACKING=true react-scripts build",
+    "build:app": "cross-env REACT_APP_GIT_SHA=$VERCEL_GIT_COMMIT_SHA react-scripts build",
     "build:version": "node ./scripts/build-version.js",
-    "build": "yarn --cwd ./excalidraw-app build",
+    "build": "yarn build:app && yarn build:version",
+    "eject": "react-scripts eject",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
     "fix": "yarn fix:other && yarn fix:code",
@@ -69,21 +117,18 @@
     "locales-coverage:description": "node scripts/locales-coverage-description.js",
     "prepare": "husky install",
     "prettier": "prettier \"**/*.{css,scss,json,md,html,yml}\" --ignore-path=.eslintignore",
-    "start": "yarn --cwd ./excalidraw-app start",
-    "start:app:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
-    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watch=false",
-    "test:app": "vitest",
+    "start": "react-scripts start",
+    "start:production": "npm run build && npx http-server build -a localhost -p 5001 -o",
+    "test:all": "yarn test:typecheck && yarn test:code && yarn test:other && yarn test:app --watchAll=false",
+    "test:app": "react-scripts test --passWithNoTests",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
+    "test:debug": "react-scripts --inspect-brk test --runInBand --no-cache",
     "test:other": "yarn prettier --list-different",
     "test:typecheck": "tsc",
-    "test:update": "yarn test:app --update --watch=false",
+    "test:update": "yarn test:app --updateSnapshot --watchAll=false",
     "test": "yarn test:app",
-    "test:coverage": "vitest --coverage",
-    "test:coverage:watch": "vitest --coverage --watch",
-    "test:ui": "yarn test --ui --coverage.enabled=true",
     "autorelease": "node scripts/autorelease.js",
-    "prerelease:excalidraw": "node scripts/prerelease.js",
-    "build:preview": "yarn build && vite preview --port 5000",
-    "release:excalidraw": "node scripts/release.js"
+    "prerelease": "node scripts/prerelease.js",
+    "release": "node scripts/release.js"
   }
 }

packages/excalidraw/.gitignore

@@ -1,4 +0,0 @@
-node_modules
-types
-bundle.js
-bundle.css

packages/excalidraw/.size-limit.json

@@ -1,16 +0,0 @@
-[
-  {
-    "path": "dist/excalidraw.production.min.js",
-    "limit": "340 kB"
-  },
-  {
-    "path": "dist/excalidraw-assets/locales",
-    "name": "dist/excalidraw-assets/locales",
-    "limit": "290 kB"
-  },
-  {
-    "path": "dist/excalidraw-assets/vendor-*.js",
-    "name": "dist/excalidraw-assets/vendor*.js",
-    "limit": "900 kB"
-  }
-]

packages/excalidraw/actions/actionBoundText.tsx

@@ -1,305 +0,0 @@
-import {
-  BOUND_TEXT_PADDING,
-  ROUNDNESS,
-  VERTICAL_ALIGN,
-  TEXT_ALIGN,
-} from "../constants";
-import { isTextElement, newElement } from "../element";
-import { mutateElement } from "../element/mutateElement";
-import {
-  computeBoundTextPosition,
-  computeContainerDimensionForBoundText,
-  getBoundTextElement,
-  measureText,
-  redrawTextBoundingBox,
-} from "../element/textElement";
-import {
-  getOriginalContainerHeightFromCache,
-  resetOriginalContainerCache,
-  updateOriginalContainerCache,
-} from "../element/textWysiwyg";
-import {
-  hasBoundTextElement,
-  isTextBindableContainer,
-  isUsingAdaptiveRadius,
-} from "../element/typeChecks";
-import {
-  ExcalidrawElement,
-  ExcalidrawLinearElement,
-  ExcalidrawTextContainer,
-  ExcalidrawTextElement,
-} from "../element/types";
-import { AppState } from "../types";
-import { Mutable } from "../utility-types";
-import { getFontString } from "../utils";
-import { register } from "./register";
-
-export const actionUnbindText = register({
-  name: "unbindText",
-  contextItemLabel: "labels.unbindText",
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-
-    return selectedElements.some((element) => hasBoundTextElement(element));
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    selectedElements.forEach((element) => {
-      const boundTextElement = getBoundTextElement(element);
-      if (boundTextElement) {
-        const { width, height, baseline } = measureText(
-          boundTextElement.originalText,
-          getFontString(boundTextElement),
-          boundTextElement.lineHeight,
-        );
-        const originalContainerHeight = getOriginalContainerHeightFromCache(
-          element.id,
-        );
-        resetOriginalContainerCache(element.id);
-        const { x, y } = computeBoundTextPosition(element, boundTextElement);
-        mutateElement(boundTextElement as ExcalidrawTextElement, {
-          containerId: null,
-          width,
-          height,
-          baseline,
-          text: boundTextElement.originalText,
-          x,
-          y,
-        });
-        mutateElement(element, {
-          boundElements: element.boundElements?.filter(
-            (ele) => ele.id !== boundTextElement.id,
-          ),
-          height: originalContainerHeight
-            ? originalContainerHeight
-            : element.height,
-        });
-      }
-    });
-    return {
-      elements,
-      appState,
-      commitToHistory: true,
-    };
-  },
-});
-
-export const actionBindText = register({
-  name: "bindText",
-  contextItemLabel: "labels.bindText",
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-
-    if (selectedElements.length === 2) {
-      const textElement =
-        isTextElement(selectedElements[0]) ||
-        isTextElement(selectedElements[1]);
-
-      let bindingContainer;
-      if (isTextBindableContainer(selectedElements[0])) {
-        bindingContainer = selectedElements[0];
-      } else if (isTextBindableContainer(selectedElements[1])) {
-        bindingContainer = selectedElements[1];
-      }
-      if (
-        textElement &&
-        bindingContainer &&
-        getBoundTextElement(bindingContainer) === null
-      ) {
-        return true;
-      }
-    }
-    return false;
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-
-    let textElement: ExcalidrawTextElement;
-    let container: ExcalidrawTextContainer;
-
-    if (
-      isTextElement(selectedElements[0]) &&
-      isTextBindableContainer(selectedElements[1])
-    ) {
-      textElement = selectedElements[0];
-      container = selectedElements[1];
-    } else {
-      textElement = selectedElements[1] as ExcalidrawTextElement;
-      container = selectedElements[0] as ExcalidrawTextContainer;
-    }
-    mutateElement(textElement, {
-      containerId: container.id,
-      verticalAlign: VERTICAL_ALIGN.MIDDLE,
-      textAlign: TEXT_ALIGN.CENTER,
-    });
-    mutateElement(container, {
-      boundElements: (container.boundElements || []).concat({
-        type: "text",
-        id: textElement.id,
-      }),
-    });
-    const originalContainerHeight = container.height;
-    redrawTextBoundingBox(textElement, container);
-    // overwritting the cache with original container height so
-    // it can be restored when unbind
-    updateOriginalContainerCache(container.id, originalContainerHeight);
-
-    return {
-      elements: pushTextAboveContainer(elements, container, textElement),
-      appState: { ...appState, selectedElementIds: { [container.id]: true } },
-      commitToHistory: true,
-    };
-  },
-});
-
-const pushTextAboveContainer = (
-  elements: readonly ExcalidrawElement[],
-  container: ExcalidrawElement,
-  textElement: ExcalidrawTextElement,
-) => {
-  const updatedElements = elements.slice();
-  const textElementIndex = updatedElements.findIndex(
-    (ele) => ele.id === textElement.id,
-  );
-  updatedElements.splice(textElementIndex, 1);
-
-  const containerIndex = updatedElements.findIndex(
-    (ele) => ele.id === container.id,
-  );
-  updatedElements.splice(containerIndex + 1, 0, textElement);
-  return updatedElements;
-};
-
-const pushContainerBelowText = (
-  elements: readonly ExcalidrawElement[],
-  container: ExcalidrawElement,
-  textElement: ExcalidrawTextElement,
-) => {
-  const updatedElements = elements.slice();
-  const containerIndex = updatedElements.findIndex(
-    (ele) => ele.id === container.id,
-  );
-  updatedElements.splice(containerIndex, 1);
-
-  const textElementIndex = updatedElements.findIndex(
-    (ele) => ele.id === textElement.id,
-  );
-  updatedElements.splice(textElementIndex, 0, container);
-  return updatedElements;
-};
-
-export const actionWrapTextInContainer = register({
-  name: "wrapTextInContainer",
-  contextItemLabel: "labels.createContainerFromText",
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    const areTextElements = selectedElements.every((el) => isTextElement(el));
-    return selectedElements.length > 0 && areTextElements;
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    let updatedElements: readonly ExcalidrawElement[] = elements.slice();
-    const containerIds: Mutable<AppState["selectedElementIds"]> = {};
-
-    for (const textElement of selectedElements) {
-      if (isTextElement(textElement)) {
-        const container = newElement({
-          type: "rectangle",
-          backgroundColor: appState.currentItemBackgroundColor,
-          boundElements: [
-            ...(textElement.boundElements || []),
-            { id: textElement.id, type: "text" },
-          ],
-          angle: textElement.angle,
-          fillStyle: appState.currentItemFillStyle,
-          strokeColor: appState.currentItemStrokeColor,
-          roughness: appState.currentItemRoughness,
-          strokeWidth: appState.currentItemStrokeWidth,
-          strokeStyle: appState.currentItemStrokeStyle,
-          roundness:
-            appState.currentItemRoundness === "round"
-              ? {
-                  type: isUsingAdaptiveRadius("rectangle")
-                    ? ROUNDNESS.ADAPTIVE_RADIUS
-                    : ROUNDNESS.PROPORTIONAL_RADIUS,
-                }
-              : null,
-          opacity: 100,
-          locked: false,
-          x: textElement.x - BOUND_TEXT_PADDING,
-          y: textElement.y - BOUND_TEXT_PADDING,
-          width: computeContainerDimensionForBoundText(
-            textElement.width,
-            "rectangle",
-          ),
-          height: computeContainerDimensionForBoundText(
-            textElement.height,
-            "rectangle",
-          ),
-          groupIds: textElement.groupIds,
-          frameId: textElement.frameId,
-        });
-
-        // update bindings
-        if (textElement.boundElements?.length) {
-          const linearElementIds = textElement.boundElements
-            .filter((ele) => ele.type === "arrow")
-            .map((el) => el.id);
-          const linearElements = updatedElements.filter((ele) =>
-            linearElementIds.includes(ele.id),
-          ) as ExcalidrawLinearElement[];
-          linearElements.forEach((ele) => {
-            let startBinding = ele.startBinding;
-            let endBinding = ele.endBinding;
-
-            if (startBinding?.elementId === textElement.id) {
-              startBinding = {
-                ...startBinding,
-                elementId: container.id,
-              };
-            }
-
-            if (endBinding?.elementId === textElement.id) {
-              endBinding = { ...endBinding, elementId: container.id };
-            }
-
-            if (startBinding || endBinding) {
-              mutateElement(ele, { startBinding, endBinding }, false);
-            }
-          });
-        }
-
-        mutateElement(
-          textElement,
-          {
-            containerId: container.id,
-            verticalAlign: VERTICAL_ALIGN.MIDDLE,
-            boundElements: null,
-            textAlign: TEXT_ALIGN.CENTER,
-          },
-          false,
-        );
-        redrawTextBoundingBox(textElement, container);
-
-        updatedElements = pushContainerBelowText(
-          [...updatedElements, container],
-          container,
-          textElement,
-        );
-        containerIds[container.id] = true;
-      }
-    }
-
-    return {
-      elements: updatedElements,
-      appState: {
-        ...appState,
-        selectedElementIds: containerIds,
-      },
-      commitToHistory: true,
-    };
-  },
-});

packages/excalidraw/actions/actionElementLock.test.tsx

@@ -1,68 +0,0 @@
-import { Excalidraw } from "../index";
-import { queryByTestId, fireEvent } from "@testing-library/react";
-import { render } from "../tests/test-utils";
-import { Pointer, UI } from "../tests/helpers/ui";
-import { API } from "../tests/helpers/api";
-
-const { h } = window;
-const mouse = new Pointer("mouse");
-
-describe("element locking", () => {
-  it("should not show unlockAllElements action in contextMenu if no elements locked", async () => {
-    await render(<Excalidraw />);
-
-    mouse.rightClickAt(0, 0);
-
-    const item = queryByTestId(UI.queryContextMenu()!, "unlockAllElements");
-    expect(item).toBe(null);
-  });
-
-  it("should unlock all elements and select them when using unlockAllElements action in contextMenu", async () => {
-    await render(
-      <Excalidraw
-        initialData={{
-          elements: [
-            API.createElement({
-              x: 100,
-              y: 100,
-              width: 100,
-              height: 100,
-              locked: true,
-            }),
-            API.createElement({
-              x: 100,
-              y: 100,
-              width: 100,
-              height: 100,
-              locked: true,
-            }),
-            API.createElement({
-              x: 100,
-              y: 100,
-              width: 100,
-              height: 100,
-              locked: false,
-            }),
-          ],
-        }}
-      />,
-    );
-
-    mouse.rightClickAt(0, 0);
-
-    expect(Object.keys(h.state.selectedElementIds).length).toBe(0);
-    expect(h.elements.map((el) => el.locked)).toEqual([true, true, false]);
-
-    const item = queryByTestId(UI.queryContextMenu()!, "unlockAllElements");
-    expect(item).not.toBe(null);
-
-    fireEvent.click(item!.querySelector("button")!);
-
-    expect(h.elements.map((el) => el.locked)).toEqual([false, false, false]);
-    // should select the unlocked elements
-    expect(h.state.selectedElementIds).toEqual({
-      [h.elements[0].id]: true,
-      [h.elements[1].id]: true,
-    });
-  });
-});

packages/excalidraw/actions/actionElementLock.ts

@@ -1,105 +0,0 @@
-import { newElementWith } from "../element/mutateElement";
-import { isFrameLikeElement } from "../element/typeChecks";
-import { ExcalidrawElement } from "../element/types";
-import { KEYS } from "../keys";
-import { arrayToMap } from "../utils";
-import { register } from "./register";
-
-const shouldLock = (elements: readonly ExcalidrawElement[]) =>
-  elements.every((el) => !el.locked);
-
-export const actionToggleElementLock = register({
-  name: "toggleElementLock",
-  trackEvent: { category: "element" },
-  predicate: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements(appState);
-    return !selectedElements.some(
-      (element) => element.locked && element.frameId,
-    );
-  },
-  perform: (elements, appState, _, app) => {
-    const selectedElements = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    });
-
-    if (!selectedElements.length) {
-      return false;
-    }
-
-    const nextLockState = shouldLock(selectedElements);
-    const selectedElementsMap = arrayToMap(selectedElements);
-    return {
-      elements: elements.map((element) => {
-        if (!selectedElementsMap.has(element.id)) {
-          return element;
-        }
-
-        return newElementWith(element, { locked: nextLockState });
-      }),
-      appState: {
-        ...appState,
-        selectedLinearElement: nextLockState
-          ? null
-          : appState.selectedLinearElement,
-      },
-      commitToHistory: true,
-    };
-  },
-  contextItemLabel: (elements, appState, app) => {
-    const selected = app.scene.getSelectedElements({
-      selectedElementIds: appState.selectedElementIds,
-      includeBoundTextElement: false,
-    });
-    if (selected.length === 1 && !isFrameLikeElement(selected[0])) {
-      return selected[0].locked
-        ? "labels.elementLock.unlock"
-        : "labels.elementLock.lock";
-    }
-
-    return shouldLock(selected)
-      ? "labels.elementLock.lockAll"
-      : "labels.elementLock.unlockAll";
-  },
-  keyTest: (event, appState, elements, app) => {
-    return (
-      event.key.toLocaleLowerCase() === KEYS.L &&
-      event[KEYS.CTRL_OR_CMD] &&
-      event.shiftKey &&
-      app.scene.getSelectedElements({
-        selectedElementIds: appState.selectedElementIds,
-        includeBoundTextElement: false,
-      }).length > 0
-    );
-  },
-});
-
-export const actionUnlockAllElements = register({
-  name: "unlockAllElements",
-  trackEvent: { category: "canvas" },
-  viewMode: false,
-  predicate: (elements) => {
-    return elements.some((element) => element.locked);
-  },
-  perform: (elements, appState) => {
-    const lockedElements = elements.filter((el) => el.locked);
-
-    return {
-      elements: elements.map((element) => {
-        if (element.locked) {
-          return newElementWith(element, { locked: false });
-        }
-        return element;
-      }),
-      appState: {
-        ...appState,
-        selectedElementIds: Object.fromEntries(
-          lockedElements.map((el) => [el.id, true]),
-        ),
-      },
-      commitToHistory: true,
-    };
-  },
-  contextItemLabel: "labels.elementLock.unlockAll",
-});

packages/excalidraw/actions/actionFlip.ts

@@ -1,98 +0,0 @@
-import { register } from "./register";
-import { getSelectedElements } from "../scene";
-import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement, NonDeleted } from "../element/types";
-import { resizeMultipleElements } from "../element/resizeElements";
-import { AppState, PointerDownState } from "../types";
-import { arrayToMap } from "../utils";
-import { CODES, KEYS } from "../keys";
-import { getCommonBoundingBox } from "../element/bounds";
-import {
-  bindOrUnbindSelectedElements,
-  isBindingEnabled,
-  unbindLinearElements,
-} from "../element/binding";
-import { updateFrameMembershipOfSelectedElements } from "../frame";
-
-export const actionFlipHorizontal = register({
-  name: "flipHorizontal",
-  trackEvent: { category: "element" },
-  perform: (elements, appState, _, app) => {
-    return {
-      elements: flipSelectedElements(elements, appState, "horizontal"),
-      appState,
-      commitToHistory: true,
-    };
-  },
-  keyTest: (event) => event.shiftKey && event.code === CODES.H,
-  contextItemLabel: "labels.flipHorizontal",
-});
-
-export const actionFlipVertical = register({
-  name: "flipVertical",
-  trackEvent: { category: "element" },
-  perform: (elements, appState, _, app) => {
-    return {
-      elements: updateFrameMembershipOfSelectedElements(
-        flipSelectedElements(elements, appState, "vertical"),
-        appState,
-        app,
-      ),
-      appState,
-      commitToHistory: true,
-    };
-  },
-  keyTest: (event) =>
-    event.shiftKey && event.code === CODES.V && !event[KEYS.CTRL_OR_CMD],
-  contextItemLabel: "labels.flipVertical",
-});
-
-const flipSelectedElements = (
-  elements: readonly ExcalidrawElement[],
-  appState: Readonly<AppState>,
-  flipDirection: "horizontal" | "vertical",
-) => {
-  const selectedElements = getSelectedElements(
-    getNonDeletedElements(elements),
-    appState,
-    {
-      includeBoundTextElement: true,
-      includeElementsInFrames: true,
-    },
-  );
-
-  const updatedElements = flipElements(
-    selectedElements,
-    appState,
-    flipDirection,
-  );
-
-  const updatedElementsMap = arrayToMap(updatedElements);
-
-  return elements.map(
-    (element) => updatedElementsMap.get(element.id) || element,
-  );
-};
-
-const flipElements = (
-  elements: NonDeleted<ExcalidrawElement>[],
-  appState: AppState,
-  flipDirection: "horizontal" | "vertical",
-): ExcalidrawElement[] => {
-  const { minX, minY, maxX, maxY } = getCommonBoundingBox(elements);
-
-  resizeMultipleElements(
-    { originalElements: arrayToMap(elements) } as PointerDownState,
-    elements,
-    "nw",
-    true,
-    flipDirection === "horizontal" ? maxX : minX,
-    flipDirection === "horizontal" ? minY : maxY,
-  );
-
-  (isBindingEnabled(appState)
-    ? bindOrUnbindSelectedElements
-    : unbindLinearElements)(elements);
-
-  return elements;
-};

packages/excalidraw/actions/actionFrame.ts

@@ -1,142 +0,0 @@
-import { getNonDeletedElements } from "../element";
-import { ExcalidrawElement } from "../element/types";
-import { removeAllElementsFromFrame } from "../frame";
-import { getFrameChildren } from "../frame";
-import { KEYS } from "../keys";
-import { AppClassProperties, AppState } from "../types";
-import { updateActiveTool } from "../utils";
-import { setCursorForShape } from "../cursor";
-import { register } from "./register";
-import { isFrameLikeElement } from "../element/typeChecks";
-
-const isSingleFrameSelected = (appState: AppState, app: AppClassProperties) => {
-  const selectedElements = app.scene.getSelectedElements(appState);
-
-  return (
-    selectedElements.length === 1 && isFrameLikeElement(selectedElements[0])
-  );
-};
-
-export const actionSelectAllElementsInFrame = register({
-  name: "selectAllElementsInFrame",
-  trackEvent: { category: "canvas" },
-  perform: (elements, appState, _, app) => {
-    const selectedElement =
-      app.scene.getSelectedElements(appState).at(0) || null;
-
-    if (isFrameLikeElement(selectedElement)) {
-      const elementsInFrame = getFrameChildren(
-        getNonDeletedElements(elements),
-        selectedElement.id,
-      ).filter((element) => !(element.type === "text" && element.containerId));
-
-      return {
-        elements,
-        appState: {
-          ...appState,
-          selectedElementIds: elementsInFrame.reduce((acc, element) => {
-            acc[element.id] = true;
-            return acc;
-          }, {} as Record<ExcalidrawElement["id"], true>),
-        },
-        commitToHistory: false,
-      };
-    }
-
-    return {
-      elements,
-      appState,
-      commitToHistory: false,
-    };
-  },
-  contextItemLabel: "labels.selectAllElementsInFrame",
-  predicate: (elements, appState, _, app) =>
-    isSingleFrameSelected(appState, app),
-});
-
-export const actionRemoveAllElementsFromFrame = register({
-  name: "removeAllElementsFromFrame",
-  trackEvent: { category: "history" },
-  perform: (elements, appState, _, app) => {
-    const selectedElement =
-      app.scene.getSelectedElements(appState).at(0) || null;
-
-    if (isFrameLikeElement(selectedElement)) {
-      return {
-        elements: removeAllElementsFromFrame(
-          elements,
-          selectedElement,
-          appState,
-        ),
-        appState: {
-          ...appState,
-          selectedElementIds: {
-            [selectedElement.id]: true,
-          },
-        },
-        commitToHistory: true,
-      };
-    }
-
-    return {
-      elements,
-      appState,
-      commitToHistory: false,
-    };
-  },
-  contextItemLabel: "labels.removeAllElementsFromFrame",
-  predicate: (elements, appState, _, app) =>
-    isSingleFrameSelected(appState, app),
-});
-
-export const actionupdateFrameRendering = register({
-  name: "updateFrameRendering",
-  viewMode: true,
-  trackEvent: { category: "canvas" },
-  perform: (elements, appState) => {
-    return {
-      elements,
-      appState: {
-        ...appState,
-        frameRendering: {
-          ...appState.frameRendering,
-          enabled: !appState.frameRendering.enabled,
-        },
-      },
-      commitToHistory: false,
-    };
-  },
-  contextItemLabel: "labels.updateFrameRendering",
-  checked: (appState: AppState) => appState.frameRendering.enabled,
-});
-
-export const actionSetFrameAsActiveTool = register({
-  name: "setFrameAsActiveTool",
-  trackEvent: { category: "toolbar" },
-  perform: (elements, appState, _, app) => {
-    const nextActiveTool = updateActiveTool(appState, {
-      type: "frame",
-    });
-
-    setCursorForShape(app.interactiveCanvas, {
-      ...appState,
-      activeTool: nextActiveTool,
-    });
-
-    return {
-      elements,
-      appState: {
-        ...appState,
-        activeTool: updateActiveTool(appState, {
-          type: "frame",
-        }),
-      },
-      commitToHistory: false,
-    };
-  },
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] &&
-    !event.shiftKey &&
-    !event.altKey &&
-    event.key.toLocaleLowerCase() === KEYS.F,
-});

packages/excalidraw/actions/actionNavigate.tsx

@@ -1,83 +0,0 @@
-import { getClientColor } from "../clients";
-import { Avatar } from "../components/Avatar";
-import { GoToCollaboratorComponentProps } from "../components/UserList";
-import { eyeIcon } from "../components/icons";
-import { t } from "../i18n";
-import { Collaborator } from "../types";
-import { register } from "./register";
-
-export const actionGoToCollaborator = register({
-  name: "goToCollaborator",
-  viewMode: true,
-  trackEvent: { category: "collab" },
-  perform: (_elements, appState, collaborator: Collaborator) => {
-    if (
-      !collaborator.socketId ||
-      appState.userToFollow?.socketId === collaborator.socketId ||
-      collaborator.isCurrentUser
-    ) {
-      return {
-        appState: {
-          ...appState,
-          userToFollow: null,
-        },
-        commitToHistory: false,
-      };
-    }
-
-    return {
-      appState: {
-        ...appState,
-        userToFollow: {
-          socketId: collaborator.socketId,
-          username: collaborator.username || "",
-        },
-        // Close mobile menu
-        openMenu: appState.openMenu === "canvas" ? null : appState.openMenu,
-      },
-      commitToHistory: false,
-    };
-  },
-  PanelComponent: ({ updateData, data, appState }) => {
-    const { clientId, collaborator, withName, isBeingFollowed } =
-      data as GoToCollaboratorComponentProps;
-
-    const background = getClientColor(clientId);
-
-    return withName ? (
-      <div
-        className="dropdown-menu-item dropdown-menu-item-base UserList__collaborator"
-        onClick={() => updateData<Collaborator>(collaborator)}
-      >
-        <Avatar
-          color={background}
-          onClick={() => {}}
-          name={collaborator.username || ""}
-          src={collaborator.avatarUrl}
-          isBeingFollowed={isBeingFollowed}
-          isCurrentUser={collaborator.isCurrentUser === true}
-        />
-        {collaborator.username}
-        <div
-          className="UserList__collaborator-follow-status-icon"
-          style={{ visibility: isBeingFollowed ? "visible" : "hidden" }}
-          title={isBeingFollowed ? t("userList.hint.followStatus") : undefined}
-          aria-hidden
-        >
-          {eyeIcon}
-        </div>
-      </div>
-    ) : (
-      <Avatar
-        color={background}
-        onClick={() => {
-          updateData(collaborator);
-        }}
-        name={collaborator.username || ""}
-        src={collaborator.avatarUrl}
-        isBeingFollowed={isBeingFollowed}
-        isCurrentUser={collaborator.isCurrentUser === true}
-      />
-    );
-  },
-});

packages/excalidraw/actions/actionProperties.test.tsx

@@ -1,167 +0,0 @@
-import { Excalidraw } from "../index";
-import { queryByTestId } from "@testing-library/react";
-import { render } from "../tests/test-utils";
-import { UI } from "../tests/helpers/ui";
-import { API } from "../tests/helpers/api";
-import { COLOR_PALETTE, DEFAULT_ELEMENT_BACKGROUND_PICKS } from "../colors";
-import { FONT_FAMILY, STROKE_WIDTH } from "../constants";
-
-const { h } = window;
-
-describe("element locking", () => {
-  beforeEach(async () => {
-    await render(<Excalidraw />);
-  });
-
-  describe("properties when tool selected", () => {
-    it("should show active background top picks", () => {
-      UI.clickTool("rectangle");
-
-      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
-
-      // just in case we change it in the future
-      expect(color).not.toBe(COLOR_PALETTE.transparent);
-
-      h.setState({
-        currentItemBackgroundColor: color,
-      });
-      const activeColor = queryByTestId(
-        document.body,
-        `color-top-pick-${color}`,
-      );
-      expect(activeColor).toHaveClass("active");
-    });
-
-    it("should show fill style when background non-transparent", () => {
-      UI.clickTool("rectangle");
-
-      const color = DEFAULT_ELEMENT_BACKGROUND_PICKS[1];
-
-      // just in case we change it in the future
-      expect(color).not.toBe(COLOR_PALETTE.transparent);
-
-      h.setState({
-        currentItemBackgroundColor: color,
-        currentItemFillStyle: "hachure",
-      });
-      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
-
-      expect(hachureFillButton).toHaveClass("active");
-      h.setState({
-        currentItemFillStyle: "solid",
-      });
-      const solidFillStyle = queryByTestId(document.body, `fill-solid`);
-      expect(solidFillStyle).toHaveClass("active");
-    });
-
-    it("should not show fill style when background transparent", () => {
-      UI.clickTool("rectangle");
-
-      h.setState({
-        currentItemBackgroundColor: COLOR_PALETTE.transparent,
-        currentItemFillStyle: "hachure",
-      });
-      const hachureFillButton = queryByTestId(document.body, `fill-hachure`);
-
-      expect(hachureFillButton).toBe(null);
-    });
-
-    it("should show horizontal text align for text tool", () => {
-      UI.clickTool("text");
-
-      h.setState({
-        currentItemTextAlign: "right",
-      });
-
-      const centerTextAlign = queryByTestId(document.body, `align-right`);
-      expect(centerTextAlign).toBeChecked();
-    });
-  });
-
-  describe("properties when elements selected", () => {
-    it("should show active styles when single element selected", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        backgroundColor: "red",
-        fillStyle: "cross-hatch",
-      });
-      h.elements = [rect];
-      API.setSelectedElements([rect]);
-
-      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
-      expect(crossHatchButton).toHaveClass("active");
-    });
-
-    it("should not show fill style selected element's background is transparent", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        backgroundColor: COLOR_PALETTE.transparent,
-        fillStyle: "cross-hatch",
-      });
-      h.elements = [rect];
-      API.setSelectedElements([rect]);
-
-      const crossHatchButton = queryByTestId(document.body, `fill-cross-hatch`);
-      expect(crossHatchButton).toBe(null);
-    });
-
-    it("should highlight common stroke width of selected elements", () => {
-      const rect1 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.thin,
-      });
-      const rect2 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.thin,
-      });
-      h.elements = [rect1, rect2];
-      API.setSelectedElements([rect1, rect2]);
-
-      const thinStrokeWidthButton = queryByTestId(
-        document.body,
-        `strokeWidth-thin`,
-      );
-      expect(thinStrokeWidthButton).toBeChecked();
-    });
-
-    it("should not highlight any stroke width button if no common style", () => {
-      const rect1 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.thin,
-      });
-      const rect2 = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.bold,
-      });
-      h.elements = [rect1, rect2];
-      API.setSelectedElements([rect1, rect2]);
-
-      expect(queryByTestId(document.body, `strokeWidth-thin`)).not.toBe(null);
-      expect(
-        queryByTestId(document.body, `strokeWidth-thin`),
-      ).not.toBeChecked();
-      expect(
-        queryByTestId(document.body, `strokeWidth-bold`),
-      ).not.toBeChecked();
-      expect(
-        queryByTestId(document.body, `strokeWidth-extraBold`),
-      ).not.toBeChecked();
-    });
-
-    it("should show properties of different element types when selected", () => {
-      const rect = API.createElement({
-        type: "rectangle",
-        strokeWidth: STROKE_WIDTH.bold,
-      });
-      const text = API.createElement({
-        type: "text",
-        fontFamily: FONT_FAMILY.Cascadia,
-      });
-      h.elements = [rect, text];
-      API.setSelectedElements([rect, text]);
-
-      expect(queryByTestId(document.body, `strokeWidth-bold`)).toBeChecked();
-      expect(queryByTestId(document.body, `font-family-code`)).toBeChecked();
-    });
-  });
-});

packages/excalidraw/actions/actionToggleObjectsSnapMode.tsx

@@ -1,28 +0,0 @@
-import { CODES, KEYS } from "../keys";
-import { register } from "./register";
-
-export const actionToggleObjectsSnapMode = register({
-  name: "objectsSnapMode",
-  viewMode: true,
-  trackEvent: {
-    category: "canvas",
-    predicate: (appState) => !appState.objectsSnapModeEnabled,
-  },
-  perform(elements, appState) {
-    return {
-      appState: {
-        ...appState,
-        objectsSnapModeEnabled: !this.checked!(appState),
-        gridSize: null,
-      },
-      commitToHistory: false,
-    };
-  },
-  checked: (appState) => appState.objectsSnapModeEnabled,
-  predicate: (elements, appState, appProps) => {
-    return typeof appProps.objectsSnapModeEnabled === "undefined";
-  },
-  contextItemLabel: "buttons.objectsSnapMode",
-  keyTest: (event) =>
-    !event[KEYS.CTRL_OR_CMD] && event.altKey && event.code === CODES.S,
-});

packages/excalidraw/analytics.ts

@@ -1,40 +0,0 @@
-// 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 = ["ai"] as string[];
-
-export const trackEvent = (
-  category: string,
-  action: string,
-  label?: string,
-  value?: number,
-) => {
-  try {
-    // prettier-ignore
-    if (
-      typeof window === "undefined"
-      || import.meta.env.VITE_WORKER_ID
-      // comment out to debug locally
-      || import.meta.env.PROD
-    ) {
-      return;
-    }
-
-    if (!ALLOWED_CATEGORIES_TO_TRACK.includes(category)) {
-      return;
-    }
-
-    if (!import.meta.env.PROD) {
-      console.info("trackEvent", { category, action, label, value });
-    }
-
-    if (window.sa_event) {
-      window.sa_event(action, {
-        category,
-        label,
-        value,
-      });
-    }
-  } catch (error) {
-    console.error("error during analytics", error);
-  }
-};

packages/excalidraw/animated-trail.ts

@@ -1,148 +0,0 @@
-import { LaserPointer, LaserPointerOptions } from "@excalidraw/laser-pointer";
-import { AnimationFrameHandler } from "./animation-frame-handler";
-import { AppState } from "./types";
-import { getSvgPathFromStroke, sceneCoordsToViewportCoords } from "./utils";
-import type App from "./components/App";
-import { SVG_NS } from "./constants";
-
-export interface Trail {
-  start(container: SVGSVGElement): void;
-  stop(): void;
-
-  startPath(x: number, y: number): void;
-  addPointToPath(x: number, y: number): void;
-  endPath(): void;
-}
-
-export interface AnimatedTrailOptions {
-  fill: (trail: AnimatedTrail) => string;
-}
-
-export class AnimatedTrail implements Trail {
-  private currentTrail?: LaserPointer;
-  private pastTrails: LaserPointer[] = [];
-
-  private container?: SVGSVGElement;
-  private trailElement: SVGPathElement;
-
-  constructor(
-    private animationFrameHandler: AnimationFrameHandler,
-    private app: App,
-    private options: Partial<LaserPointerOptions> &
-      Partial<AnimatedTrailOptions>,
-  ) {
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
-
-    this.trailElement = document.createElementNS(SVG_NS, "path");
-  }
-
-  get hasCurrentTrail() {
-    return !!this.currentTrail;
-  }
-
-  hasLastPoint(x: number, y: number) {
-    if (this.currentTrail) {
-      const len = this.currentTrail.originalPoints.length;
-      return (
-        this.currentTrail.originalPoints[len - 1][0] === x &&
-        this.currentTrail.originalPoints[len - 1][1] === y
-      );
-    }
-
-    return false;
-  }
-
-  start(container?: SVGSVGElement) {
-    if (container) {
-      this.container = container;
-    }
-
-    if (this.trailElement.parentNode !== this.container && this.container) {
-      this.container.appendChild(this.trailElement);
-    }
-
-    this.animationFrameHandler.start(this);
-  }
-
-  stop() {
-    this.animationFrameHandler.stop(this);
-
-    if (this.trailElement.parentNode === this.container) {
-      this.container?.removeChild(this.trailElement);
-    }
-  }
-
-  startPath(x: number, y: number) {
-    this.currentTrail = new LaserPointer(this.options);
-
-    this.currentTrail.addPoint([x, y, performance.now()]);
-
-    this.update();
-  }
-
-  addPointToPath(x: number, y: number) {
-    if (this.currentTrail) {
-      this.currentTrail.addPoint([x, y, performance.now()]);
-      this.update();
-    }
-  }
-
-  endPath() {
-    if (this.currentTrail) {
-      this.currentTrail.close();
-      this.currentTrail.options.keepHead = false;
-      this.pastTrails.push(this.currentTrail);
-      this.currentTrail = undefined;
-      this.update();
-    }
-  }
-
-  private update() {
-    this.start();
-  }
-
-  private onFrame() {
-    const paths: string[] = [];
-
-    for (const trail of this.pastTrails) {
-      paths.push(this.drawTrail(trail, this.app.state));
-    }
-
-    if (this.currentTrail) {
-      const currentPath = this.drawTrail(this.currentTrail, this.app.state);
-
-      paths.push(currentPath);
-    }
-
-    this.pastTrails = this.pastTrails.filter((trail) => {
-      return trail.getStrokeOutline().length !== 0;
-    });
-
-    if (paths.length === 0) {
-      this.stop();
-    }
-
-    const svgPaths = paths.join(" ").trim();
-
-    this.trailElement.setAttribute("d", svgPaths);
-    this.trailElement.setAttribute(
-      "fill",
-      (this.options.fill ?? (() => "black"))(this),
-    );
-  }
-
-  private drawTrail(trail: LaserPointer, state: AppState): string {
-    const stroke = trail
-      .getStrokeOutline(trail.options.size / state.zoom.value)
-      .map(([x, y]) => {
-        const result = sceneCoordsToViewportCoords(
-          { sceneX: x, sceneY: y },
-          state,
-        );
-
-        return [result.x, result.y];
-      });
-
-    return getSvgPathFromStroke(stroke, true);
-  }
-}

packages/excalidraw/animation-frame-handler.ts

@@ -1,79 +0,0 @@
-export type AnimationCallback = (timestamp: number) => void | boolean;
-
-export type AnimationTarget = {
-  callback: AnimationCallback;
-  stopped: boolean;
-};
-
-export class AnimationFrameHandler {
-  private targets = new WeakMap<object, AnimationTarget>();
-  private rafIds = new WeakMap<object, number>();
-
-  register(key: object, callback: AnimationCallback) {
-    this.targets.set(key, { callback, stopped: true });
-  }
-
-  start(key: object) {
-    const target = this.targets.get(key);
-
-    if (!target) {
-      return;
-    }
-
-    if (this.rafIds.has(key)) {
-      return;
-    }
-
-    this.targets.set(key, { ...target, stopped: false });
-    this.scheduleFrame(key);
-  }
-
-  stop(key: object) {
-    const target = this.targets.get(key);
-    if (target && !target.stopped) {
-      this.targets.set(key, { ...target, stopped: true });
-    }
-
-    this.cancelFrame(key);
-  }
-
-  private constructFrame(key: object): FrameRequestCallback {
-    return (timestamp: number) => {
-      const target = this.targets.get(key);
-
-      if (!target) {
-        return;
-      }
-
-      const shouldAbort = this.onFrame(target, timestamp);
-
-      if (!target.stopped && !shouldAbort) {
-        this.scheduleFrame(key);
-      } else {
-        this.cancelFrame(key);
-      }
-    };
-  }
-
-  private scheduleFrame(key: object) {
-    const rafId = requestAnimationFrame(this.constructFrame(key));
-
-    this.rafIds.set(key, rafId);
-  }
-
-  private cancelFrame(key: object) {
-    if (this.rafIds.has(key)) {
-      const rafId = this.rafIds.get(key)!;
-
-      cancelAnimationFrame(rafId);
-    }
-
-    this.rafIds.delete(key);
-  }
-
-  private onFrame(target: AnimationTarget, timestamp: number): boolean {
-    const shouldAbort = target.callback(timestamp);
-
-    return shouldAbort ?? false;
-  }
-}

packages/excalidraw/assets/lock.svg

@@ -1,20 +0,0 @@
-<svg width="178" height="162" viewBox="0 0 178 162" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M40.3329 54.3823L38.5547 94.3134L39.7731 111.754L40.1282 118.907L41.0832 123.59L44.3502 131.942L48.9438 137.693L52.5472 143.333L58.5544 147.755L62.5364 150.239L72.3634 154.486L83.15 156.361L91.1212 158.708L101.174 157.525L110.808 156.719L115.983 154.049L124.511 151.377L129.276 148.71L133.701 143.947L139.666 135.877L142.001 128.136L145.746 118.192L145.188 111.065L145.489 94.3675L145.873 75.2546L143.227 59.7779L142.022 47.4695L138.595 46.8345L102.952 45.4703L56.9173 46.7498L46.0719 49.1207L41.9323 50.6825L39.5684 53.4297" fill="#E3E2FE"/>
-<path d="M41.0014 54.2859C41.0861 64.8796 38.3765 102.581 40.9779 117.876C43.5793 133.17 48.2646 139.346 56.6121 146.047C64.9596 152.746 79.1214 157.662 91.0653 158.078C103.009 158.492 119.347 155.242 128.277 148.543C137.206 141.842 142.112 133.527 144.641 117.874C147.169 102.221 146.061 66.4132 143.446 54.6222C140.83 42.8289 143.97 48.2857 128.948 47.1238C113.925 45.9619 67.9608 46.477 53.3051 47.6483C38.6493 48.8197 43.2053 53.0675 41.0155 54.1518M40.5263 53.9801C40.5404 64.6138 37.9249 103.418 40.5921 118.587C43.257 133.755 48.147 138.325 56.5251 144.991C64.9008 151.655 78.7263 157.935 90.8536 158.577C102.981 159.221 120.212 155.413 129.289 148.844C138.368 142.277 142.872 134.995 145.321 119.168C147.767 103.343 146.805 65.8698 143.977 53.8837C141.148 41.8975 143.615 48.4292 128.348 47.2508C113.081 46.0724 67.14 45.6726 52.3737 46.8157C37.6074 47.9564 41.7776 53.091 39.7524 54.1024" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M64.7935 45.726L66.36 36.6964L65.5979 34.4501L67.3384 30.7668L70.4197 26.5048L74.8157 21.0598L81.9095 16.9131L89.9419 14.4951L95.6127 12.8534L97.7555 13.2133L103.819 15.269L106.552 18.5807L109.967 22.3793L114.45 27.2387L114.904 34.3937L117.153 38.9214L116.031 44.5005L116.765 45.5448L118.863 47.3559L126.164 47.6782L127.744 46.7797L128.76 44.7052L123.882 25.8227L120.641 20.4835L116.351 15.8758L112.809 11.0729L108.617 7.36601L101.352 5.43025L93.263 3.31104L84.2451 5.1433L77.7299 7.86229L76.0011 8.0975L62.1168 19.8532L59.5366 24.5597L55.7733 32.3215L55.0371 39.5282L56.0626 44.8933L56.5636 47.1725L59.6401 46.8644L66.1648 46.0388" fill="#E3E2FE"/>
-<path d="M65.0037 46.0106C65.1166 43.8231 64.9237 36.8492 66.1421 33.2412C67.3605 29.6307 69.0799 27.2857 72.314 24.3527C75.5481 21.422 81.273 17.6093 85.5444 15.6453C89.8157 13.6813 94.3317 12.1148 97.9421 12.5664C101.555 13.0157 104.544 15.857 107.219 18.3478C109.893 20.8387 112.356 24.0869 113.986 27.5115C115.618 30.9338 116.389 35.8684 117.006 38.8861C117.622 41.9038 115.992 44.2888 117.69 45.6178C119.388 46.949 125.617 48.1721 127.195 46.8667C128.773 45.5613 127.717 41.1888 127.157 37.7877C126.597 34.3866 125.494 30.1247 123.838 26.4601C122.183 22.7956 119.746 18.9029 117.222 15.7982C114.698 12.6934 112.791 9.9086 108.696 7.83642C104.601 5.76189 97.8081 3.42863 92.6547 3.35337C87.5013 3.2781 81.5529 5.74308 77.7708 7.38717C73.991 9.03127 72.8879 10.6166 69.9666 13.218C67.043 15.8217 62.4306 19.6768 60.2384 23.0026C58.0486 26.3284 57.4818 29.252 56.8185 33.1753C56.1529 37.0962 54.6499 44.39 56.2517 46.5327C57.8511 48.6731 64.7756 45.98 66.4267 46.0247M65.9704 45.5096C65.9845 43.348 64.2652 37.5525 65.5423 33.8456C66.8172 30.1364 70.2959 26.4789 73.6264 23.259C76.9546 20.039 81.3177 16.3015 85.5208 14.5281C89.7216 12.7523 95.1079 11.7903 98.8383 12.6111C102.569 13.432 105.283 16.8072 107.903 19.4486C110.526 22.09 113.146 25.3029 114.567 28.4664C115.987 31.6276 116.03 35.4051 116.425 38.4204C116.82 41.4334 115.124 45.1426 116.937 46.5515C118.751 47.9604 125.539 48.2968 127.31 46.8761C129.081 45.4578 127.978 41.4428 127.562 38.0347C127.145 34.6265 126.501 30.1646 124.81 26.4296C123.116 22.6921 120.195 18.7594 117.413 15.6194C114.63 12.4818 112.247 9.39349 108.117 7.58945C103.987 5.78541 97.5776 5.02099 92.6335 4.79519C87.6895 4.56939 82.3503 4.78813 78.4505 6.23466C74.5484 7.68118 72.0882 10.6542 69.228 13.4696C66.3679 16.2851 63.4725 19.7873 61.2898 23.1319C59.1071 26.4789 56.9761 29.4896 56.1293 33.5469C55.285 37.6043 54.577 45.2132 56.2117 47.4759C57.8487 49.7409 64.2675 47.3418 65.9445 47.1301" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M140.37 54.8958C137.884 58.1322 127.704 71.2286 125.185 74.5427M139.697 54.209C137.098 57.5466 127.005 71.7884 124.51 75.3565" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.663 63.1765C139.661 66.0413 131.311 77.1501 129.077 79.9726M141.065 62.5908C139.021 65.2792 130.631 76.1364 128.717 78.8625" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.888 72.9917C139.475 75.8589 130.268 86.8478 127.966 89.7455M141.02 72.726C138.503 75.6496 129.775 87.2476 127.58 90.3242" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.948 82.215C139.815 85.1057 130.308 96.8214 127.961 99.7709M141.459 81.7375C139.298 84.4119 129.816 95.9888 127.479 98.8606" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.357 91.7838C138.885 95.2484 128.808 108.535 126.428 111.76M142.474 91.4757C139.917 94.7921 128.38 107.493 125.781 110.883" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M142.568 101.479C140.028 104.403 129.867 115.528 127.195 118.356M141.811 101.018C139.212 104.055 129.477 115.975 126.828 118.97" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M141.023 112.172C138.591 114.775 128.028 125.905 125.422 128.664M140.51 113.465C138.008 116.147 127.36 125.233 124.742 127.582" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M139.004 123.69C136.501 126.275 125.952 137.248 123.287 140.108M138.343 124.817C135.805 127.454 125.487 138.261 122.848 140.75" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M132.192 139.862C129.854 141.624 120.87 148.168 118.574 150.012M131.39 139.496C128.97 141.333 120.524 148.89 118.322 150.621" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M82.6351 92.3124L78.2767 89.0148L78.6718 88.8784L75.6282 79.6865L74.4922 76.0525L75.0379 74.1074L78.6248 69.5444L83.6182 65.186L86.6924 64.0711L93.7768 63.9864L99.9181 63.9276L103.905 64.4215L106.038 66.068L109.333 67.6392L110.251 69.4479L112.438 73.1877L112.702 81.928L111.674 82.93L110.907 85.5573L107.828 89.2336L101.273 92.9193L102.785 120.401L99.5488 125.521L98.0059 127.838L96.1313 129.414L93.17 130.237L92.2198 130.033L90.1358 129.233L88.8328 126.594L87.8378 95.2549L88.9386 93.3215L86.0409 91.294L80.9533 91.1552" fill="white"/>
-<path d="M82.8214 92.0607C82.0664 91.4327 79.291 90.7201 77.8539 88.2033C76.4167 85.6866 73.5284 80.4438 74.1964 76.9581C74.862 73.4723 78.6959 69.6384 81.8524 67.2887C85.0089 64.939 88.9227 63.1138 93.1353 62.8574C97.3478 62.6034 103.957 63.9888 107.132 65.7575C110.31 67.5263 111.416 70.5651 112.196 73.4747C112.977 76.3842 112.606 80.6626 111.82 83.2122C111.035 85.7642 109.078 87.1661 107.481 88.7749C105.883 90.3837 103.106 91.2751 102.233 92.8651C101.363 94.4551 102.327 95.3254 102.25 98.3125C102.172 101.3 101.76 107.227 101.767 110.788C101.772 114.349 102.487 116.981 102.285 119.676C102.085 122.374 101.52 125.126 100.556 126.965C99.5917 128.805 98.077 130.256 96.5011 130.715C94.9275 131.171 92.4485 130.36 91.1101 129.713C89.7742 129.066 89.0144 128.341 88.4805 126.836C87.9489 125.331 87.9678 123.964 87.9137 120.681C87.8596 117.397 88.1159 111.599 88.1583 107.14C88.203 102.68 89.2779 96.445 88.1724 93.9236C87.0693 91.4022 82.7791 92.4347 81.5325 92.0137M82.0194 91.6068C81.222 90.7624 78.4536 89.7886 77.3623 87.1567C76.2733 84.5247 74.6621 79.3125 75.4783 75.815C76.2921 72.3151 79.1428 68.3166 82.2522 66.1597C85.3617 64.0029 90.1693 63.062 94.1302 62.8739C98.0911 62.6857 102.925 63.0832 106.02 65.0331C109.118 66.9853 111.834 71.5836 112.705 74.5801C113.572 77.5743 111.949 80.7731 111.234 83.0076C110.519 85.2444 109.835 86.3711 108.417 87.9916C107.001 89.6146 103.738 90.9623 102.732 92.7358C101.725 94.5092 102.351 95.6382 102.377 98.6301C102.405 101.62 102.866 106.949 102.894 110.682C102.922 114.417 102.955 118.291 102.544 121.038C102.13 123.783 101.408 125.54 100.42 127.161C99.4318 128.781 98.1005 130.233 96.6163 130.759C95.1322 131.286 92.9353 130.893 91.51 130.322C90.0846 129.753 88.7769 128.889 88.0618 127.335C87.3468 125.78 87.0128 124.317 87.2198 120.998C87.4268 117.68 89.0874 112.046 89.299 107.422C89.5107 102.798 89.8494 95.9322 88.4946 93.2509C87.1398 90.5695 82.4804 91.4845 81.1679 91.3316" stroke="#6965DB" stroke-width="2" stroke-linecap="round"/>
-<path d="M28.1943 139.31C26.7936 139.432 25.332 140.402 23.8703 140.523C23.1395 140.766 22.5914 140.16 21.9824 139.735C21.5561 139.553 21.008 138.461 20.8253 138.219C20.5817 136.884 19.9118 134.276 20.0336 133.002C19.7291 131.364 21.5561 129.787 23.0786 129.727C23.2613 129.727 23.8094 129.787 23.8703 129.787C25.7583 130.151 27.5853 131.546 29.5341 131.728C29.595 131.728 29.6559 131.728 29.6559 131.668C30.4476 130.333 30.204 126.937 30.813 125.542C30.813 125.36 31.1784 123.54 31.1784 123.237C31.6048 122.327 32.1529 121.781 33.1273 122.084C33.7972 122.266 34.6498 122.388 34.6498 123.237V128.635C34.8325 129.242 36.1114 128.999 36.5986 128.999C38.7911 128.028 40.8617 127.422 43.3586 127.058C45.6729 127.179 46.7082 129.242 46.5864 131.304C46.6473 132.396 45.4293 133.245 44.6985 133.973C44.4549 134.094 43.4804 134.519 43.115 134.397C42.2624 133.791 41.1662 134.033 40.1309 134.094C40.1309 134.155 40.0091 134.337 40.07 134.397C41.288 135.853 43.5413 136.096 45.0639 137.066C46.1601 138.34 47.4999 138.643 47.1345 140.341C47.0736 141.191 47.1345 142.1 46.221 142.404C45.9774 142.586 44.5767 142.828 44.2722 142.828C43.9677 142.768 43.3586 142.343 43.115 142.04C40.9835 141.13 38.6693 140.402 36.2332 140.159V145.133C35.9896 146.468 35.6851 147.923 34.6498 148.955C34.2844 149.015 33.1273 149.015 32.7619 148.955C32.4574 148.773 31.4221 147.741 31.1784 147.438C30.5694 145.133 30.4476 142.404 29.6559 140.159C29.1687 139.553 28.986 139.25 28.1943 139.31Z" fill="#6965DB"/>
-<path d="M59.5964 139.31C58.1956 139.432 56.734 140.402 55.2724 140.523C54.5416 140.766 53.9935 140.16 53.3845 139.735C52.9582 139.553 52.41 138.461 52.2273 138.219C51.9837 136.884 51.3138 134.276 51.4356 133.002C51.1311 131.364 52.9582 129.787 54.4807 129.727C54.6634 129.727 55.2115 129.787 55.2724 129.787C57.1603 130.151 58.9874 131.546 60.9362 131.728C60.9971 131.728 61.058 131.728 61.058 131.668C61.8497 130.333 61.6061 126.937 62.2151 125.542C62.2151 125.36 62.5805 123.54 62.5805 123.237C63.0068 122.327 63.5549 121.781 64.5293 122.084C65.1992 122.266 66.0519 122.388 66.0519 123.237V128.635C66.2346 129.242 67.5135 128.999 68.0007 128.999C70.1931 128.028 72.2638 127.422 74.7607 127.058C77.0749 127.179 78.1103 129.242 77.9885 131.304C78.0494 132.396 76.8313 133.245 76.1005 133.973C75.8569 134.094 74.8825 134.519 74.5171 134.397C73.6645 133.791 72.5683 134.033 71.5329 134.094C71.5329 134.155 71.4112 134.337 71.4721 134.397C72.6901 135.853 74.9434 136.096 76.4659 137.066C77.5621 138.34 78.902 138.643 78.5366 140.341C78.4757 141.191 78.5366 142.1 77.623 142.404C77.3794 142.586 75.9787 142.828 75.6742 142.828C75.3697 142.768 74.7607 142.343 74.5171 142.04C72.3856 141.13 70.0713 140.402 67.6353 140.159V145.133C67.3917 146.468 67.0872 147.923 66.0519 148.955C65.6865 149.015 64.5293 149.015 64.1639 148.955C63.8594 148.773 62.8241 147.741 62.5805 147.438C61.9715 145.133 61.8497 142.404 61.058 140.159C60.5708 139.553 60.3881 139.25 59.5964 139.31Z" fill="#6965DB"/>
-<path d="M90.9984 139.31C89.5977 139.432 88.1361 140.402 86.6745 140.523C85.9436 140.766 85.3955 140.16 84.7865 139.735C84.3602 139.553 83.8121 138.461 83.6294 138.219C83.3858 136.884 82.7159 134.276 82.8377 133.002C82.5332 131.364 84.3602 129.787 85.8827 129.727C86.0654 129.727 86.6136 129.787 86.6745 129.787C88.5624 130.151 90.3894 131.546 92.3382 131.728C92.3991 131.728 92.46 131.728 92.46 131.668C93.2518 130.333 93.0082 126.937 93.6172 125.542C93.6172 125.36 93.9826 123.54 93.9826 123.237C94.4089 122.327 94.957 121.781 95.9314 122.084C96.6013 122.266 97.4539 122.388 97.4539 123.237V128.635C97.6366 129.242 98.9155 128.999 99.4028 128.999C101.595 128.028 103.666 127.422 106.163 127.058C108.477 127.179 109.512 129.242 109.391 131.304C109.451 132.396 108.233 133.245 107.503 133.973C107.259 134.094 106.285 134.519 105.919 134.397C105.067 133.791 103.97 134.033 102.935 134.094C102.935 134.155 102.813 134.337 102.874 134.397C104.092 135.853 106.345 136.096 107.868 137.066C108.964 138.34 110.304 138.643 109.939 140.341C109.878 141.191 109.939 142.1 109.025 142.404C108.782 142.586 107.381 142.828 107.076 142.828C106.772 142.768 106.163 142.343 105.919 142.04C103.788 141.13 101.473 140.402 99.0373 140.159V145.133C98.7937 146.468 98.4892 147.923 97.4539 148.955C97.0885 149.015 95.9314 149.015 95.566 148.955C95.2615 148.773 94.2262 147.741 93.9826 147.438C93.3736 145.133 93.2518 142.404 92.46 140.159C91.9728 139.553 91.7901 139.25 90.9984 139.31Z" fill="#6965DB"/>
-</svg>

packages/excalidraw/clients.ts

@@ -1,40 +0,0 @@
-function hashToInteger(id: string) {
-  let hash = 0;
-  if (id.length === 0) {
-    return hash;
-  }
-  for (let i = 0; i < id.length; i++) {
-    const char = id.charCodeAt(i);
-    hash = (hash << 5) - hash + char;
-  }
-  return hash;
-}
-
-export const getClientColor = (
-  /**
-   * any uniquely identifying key, such as user id or socket id
-   */
-  id: string,
-) => {
-  // to get more even distribution in case `id` is not uniformly distributed to
-  // begin with, we hash it
-  const hash = Math.abs(hashToInteger(id));
-  // we want to get a multiple of 10 number in the range of 0-360 (in other
-  // words a hue value of step size 10). There are 37 such values including 0.
-  const hue = (hash % 37) * 10;
-  const saturation = 100;
-  const lightness = 83;
-
-  return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
-};
-
-/**
- * returns first char, capitalized
- */
-export const getNameInitial = (name?: string | null) => {
-  // first char can be a surrogate pair, hence using codePointAt
-  const firstCodePoint = name?.trim()?.codePointAt(0);
-  return (
-    firstCodePoint ? String.fromCodePoint(firstCodePoint) : "?"
-  ).toUpperCase();
-};

packages/excalidraw/clipboard.test.ts

@@ -1,196 +0,0 @@
-import {
-  createPasteEvent,
-  parseClipboard,
-  serializeAsClipboardJSON,
-} from "./clipboard";
-import { API } from "./tests/helpers/api";
-
-describe("parseClipboard()", () => {
-  it("should parse JSON as plaintext if not excalidraw-api/clipboard data", async () => {
-    let text;
-    let clipboardData;
-    // -------------------------------------------------------------------------
-
-    text = "123";
-    clipboardData = await parseClipboard(
-      createPasteEvent({ types: { "text/plain": text } }),
-    );
-    expect(clipboardData.text).toBe(text);
-
-    // -------------------------------------------------------------------------
-
-    text = "[123]";
-    clipboardData = await parseClipboard(
-      createPasteEvent({ types: { "text/plain": text } }),
-    );
-    expect(clipboardData.text).toBe(text);
-
-    // -------------------------------------------------------------------------
-
-    text = JSON.stringify({ val: 42 });
-    clipboardData = await parseClipboard(
-      createPasteEvent({ types: { "text/plain": text } }),
-    );
-    expect(clipboardData.text).toBe(text);
-  });
-
-  it("should parse valid excalidraw JSON if inside text/plain", async () => {
-    const rect = API.createElement({ type: "rectangle" });
-
-    const json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    const clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/plain": json,
-        },
-      }),
-    );
-    expect(clipboardData.elements).toEqual([rect]);
-  });
-
-  it("should parse valid excalidraw JSON if inside text/html", async () => {
-    const rect = API.createElement({ type: "rectangle" });
-
-    let json;
-    let clipboardData;
-    // -------------------------------------------------------------------------
-    json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": json,
-        },
-      }),
-    );
-    expect(clipboardData.elements).toEqual([rect]);
-    // -------------------------------------------------------------------------
-    json = serializeAsClipboardJSON({ elements: [rect], files: null });
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<div> ${json}</div>`,
-        },
-      }),
-    );
-    expect(clipboardData.elements).toEqual([rect]);
-    // -------------------------------------------------------------------------
-  });
-
-  it("should parse <image> `src` urls out of text/html", async () => {
-    let clipboardData;
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<img src="https://example.com/image.png" />`,
-        },
-      }),
-    );
-    expect(clipboardData.mixedContent).toEqual([
-      {
-        type: "imageUrl",
-        value: "https://example.com/image.png",
-      },
-    ]);
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<div><img src="https://example.com/image.png" /></div><a><img src="https://example.com/image2.png" /></a>`,
-        },
-      }),
-    );
-    expect(clipboardData.mixedContent).toEqual([
-      {
-        type: "imageUrl",
-        value: "https://example.com/image.png",
-      },
-      {
-        type: "imageUrl",
-        value: "https://example.com/image2.png",
-      },
-    ]);
-  });
-
-  it("should parse text content alongside <image> `src` urls out of text/html", async () => {
-    const clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<a href="https://example.com">hello </a><div><img src="https://example.com/image.png" /></div><b>my friend!</b>`,
-        },
-      }),
-    );
-    expect(clipboardData.mixedContent).toEqual([
-      {
-        type: "text",
-        // trimmed
-        value: "hello",
-      },
-      {
-        type: "imageUrl",
-        value: "https://example.com/image.png",
-      },
-      {
-        type: "text",
-        value: "my friend!",
-      },
-    ]);
-  });
-
-  it("should parse spreadsheet from either text/plain and text/html", async () => {
-    let clipboardData;
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/plain": `a	b
-        1	2
-        4	5
-        7	10`,
-        },
-      }),
-    );
-    expect(clipboardData.spreadsheet).toEqual({
-      title: "b",
-      labels: ["1", "4", "7"],
-      values: [2, 5, 10],
-    });
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `a	b
-        1	2
-        4	5
-        7	10`,
-        },
-      }),
-    );
-    expect(clipboardData.spreadsheet).toEqual({
-      title: "b",
-      labels: ["1", "4", "7"],
-      values: [2, 5, 10],
-    });
-    // -------------------------------------------------------------------------
-    clipboardData = await parseClipboard(
-      createPasteEvent({
-        types: {
-          "text/html": `<html>
-        <body>
-        <!--StartFragment--><google-sheets-html-origin><style type="text/css"><!--td {border: 1px solid #cccccc;}br {mso-data-placement:same-cell;}--></style><table xmlns="http://www.w3.org/1999/xhtml" cellspacing="0" cellpadding="0" dir="ltr" border="1" style="table-layout:fixed;font-size:10pt;font-family:Arial;width:0px;border-collapse:collapse;border:none"><colgroup><col width="100"/><col width="100"/></colgroup><tbody><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;a&quot;}">a</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;" data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;b&quot;}">b</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:1}">1</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:2}">2</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:4}">4</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:5}">5</td></tr><tr style="height:21px;"><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:7}">7</td><td style="overflow:hidden;padding:2px 3px 2px 3px;vertical-align:bottom;text-align:right;" data-sheets-value="{&quot;1&quot;:3,&quot;3&quot;:10}">10</td></tr></tbody></table><!--EndFragment-->
-        </body>
-        </html>`,
-          "text/plain": `a	b
-        1	2
-        4	5
-        7	10`,
-        },
-      }),
-    );
-    expect(clipboardData.spreadsheet).toEqual({
-      title: "b",
-      labels: ["1", "4", "7"],
-      values: [2, 5, 10],
-    });
-  });
-});

packages/excalidraw/clipboard.ts

@@ -1,482 +0,0 @@
-import {
-  ExcalidrawElement,
-  NonDeletedExcalidrawElement,
-} from "./element/types";
-import { BinaryFiles } from "./types";
-import { tryParseSpreadsheet, Spreadsheet, VALID_SPREADSHEET } from "./charts";
-import {
-  ALLOWED_PASTE_MIME_TYPES,
-  EXPORT_DATA_TYPES,
-  MIME_TYPES,
-} from "./constants";
-import {
-  isFrameLikeElement,
-  isInitializedImageElement,
-} from "./element/typeChecks";
-import { deepCopyElement } from "./element/newElement";
-import { mutateElement } from "./element/mutateElement";
-import { getContainingFrame } from "./frame";
-import { isMemberOf, isPromiseLike } from "./utils";
-import { t } from "./i18n";
-
-type ElementsClipboard = {
-  type: typeof EXPORT_DATA_TYPES.excalidrawClipboard;
-  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles | undefined;
-};
-
-export type PastedMixedContent = { type: "text" | "imageUrl"; value: string }[];
-
-export interface ClipboardData {
-  spreadsheet?: Spreadsheet;
-  elements?: readonly ExcalidrawElement[];
-  files?: BinaryFiles;
-  text?: string;
-  mixedContent?: PastedMixedContent;
-  errorMessage?: string;
-  programmaticAPI?: boolean;
-}
-
-type AllowedPasteMimeTypes = typeof ALLOWED_PASTE_MIME_TYPES[number];
-
-type ParsedClipboardEvent =
-  | { type: "text"; value: string }
-  | { type: "mixedContent"; value: PastedMixedContent };
-
-export const probablySupportsClipboardReadText =
-  "clipboard" in navigator && "readText" in navigator.clipboard;
-
-export const probablySupportsClipboardWriteText =
-  "clipboard" in navigator && "writeText" in navigator.clipboard;
-
-export const probablySupportsClipboardBlob =
-  "clipboard" in navigator &&
-  "write" in navigator.clipboard &&
-  "ClipboardItem" in window &&
-  "toBlob" in HTMLCanvasElement.prototype;
-
-const clipboardContainsElements = (
-  contents: any,
-): contents is { elements: ExcalidrawElement[]; files?: BinaryFiles } => {
-  if (
-    [
-      EXPORT_DATA_TYPES.excalidraw,
-      EXPORT_DATA_TYPES.excalidrawClipboard,
-      EXPORT_DATA_TYPES.excalidrawClipboardWithAPI,
-    ].includes(contents?.type) &&
-    Array.isArray(contents.elements)
-  ) {
-    return true;
-  }
-  return false;
-};
-
-export const createPasteEvent = ({
-  types,
-  files,
-}: {
-  types?: { [key in AllowedPasteMimeTypes]?: string };
-  files?: File[];
-}) => {
-  if (!types && !files) {
-    console.warn("createPasteEvent: no types or files provided");
-  }
-
-  const event = new ClipboardEvent("paste", {
-    clipboardData: new DataTransfer(),
-  });
-
-  if (types) {
-    for (const [type, value] of Object.entries(types)) {
-      try {
-        event.clipboardData?.setData(type, value);
-        if (event.clipboardData?.getData(type) !== value) {
-          throw new Error(`Failed to set "${type}" as clipboardData item`);
-        }
-      } catch (error: any) {
-        throw new Error(error.message);
-      }
-    }
-  }
-
-  if (files) {
-    let idx = -1;
-    for (const file of files) {
-      idx++;
-      try {
-        event.clipboardData?.items.add(file);
-        if (event.clipboardData?.files[idx] !== file) {
-          throw new Error(
-            `Failed to set file "${file.name}" as clipboardData item`,
-          );
-        }
-      } catch (error: any) {
-        throw new Error(error.message);
-      }
-    }
-  }
-
-  return event;
-};
-
-export const serializeAsClipboardJSON = ({
-  elements,
-  files,
-}: {
-  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles | null;
-}) => {
-  const framesToCopy = new Set(
-    elements.filter((element) => isFrameLikeElement(element)),
-  );
-  let foundFile = false;
-
-  const _files = elements.reduce((acc, element) => {
-    if (isInitializedImageElement(element)) {
-      foundFile = true;
-      if (files && files[element.fileId]) {
-        acc[element.fileId] = files[element.fileId];
-      }
-    }
-    return acc;
-  }, {} as BinaryFiles);
-
-  if (foundFile && !files) {
-    console.warn(
-      "copyToClipboard: attempting to file element(s) without providing associated `files` object.",
-    );
-  }
-
-  // select bound text elements when copying
-  const contents: ElementsClipboard = {
-    type: EXPORT_DATA_TYPES.excalidrawClipboard,
-    elements: elements.map((element) => {
-      if (
-        getContainingFrame(element) &&
-        !framesToCopy.has(getContainingFrame(element)!)
-      ) {
-        const copiedElement = deepCopyElement(element);
-        mutateElement(copiedElement, {
-          frameId: null,
-        });
-        return copiedElement;
-      }
-
-      return element;
-    }),
-    files: files ? _files : undefined,
-  };
-
-  return JSON.stringify(contents);
-};
-
-export const copyToClipboard = async (
-  elements: readonly NonDeletedExcalidrawElement[],
-  files: BinaryFiles | null,
-  /** supply if available to make the operation more certain to succeed */
-  clipboardEvent?: ClipboardEvent | null,
-) => {
-  await copyTextToSystemClipboard(
-    serializeAsClipboardJSON({ elements, files }),
-    clipboardEvent,
-  );
-};
-
-const parsePotentialSpreadsheet = (
-  text: string,
-): { spreadsheet: Spreadsheet } | { errorMessage: string } | null => {
-  const result = tryParseSpreadsheet(text);
-  if (result.type === VALID_SPREADSHEET) {
-    return { spreadsheet: result.spreadsheet };
-  }
-  return null;
-};
-
-/** internal, specific to parsing paste events. Do not reuse. */
-function parseHTMLTree(el: ChildNode) {
-  let result: PastedMixedContent = [];
-  for (const node of el.childNodes) {
-    if (node.nodeType === 3) {
-      const text = node.textContent?.trim();
-      if (text) {
-        result.push({ type: "text", value: text });
-      }
-    } else if (node instanceof HTMLImageElement) {
-      const url = node.getAttribute("src");
-      if (url && url.startsWith("http")) {
-        result.push({ type: "imageUrl", value: url });
-      }
-    } else {
-      result = result.concat(parseHTMLTree(node));
-    }
-  }
-  return result;
-}
-
-const maybeParseHTMLPaste = (
-  event: ClipboardEvent,
-): { type: "mixedContent"; value: PastedMixedContent } | null => {
-  const html = event.clipboardData?.getData("text/html");
-
-  if (!html) {
-    return null;
-  }
-
-  try {
-    const doc = new DOMParser().parseFromString(html, "text/html");
-
-    const content = parseHTMLTree(doc.body);
-
-    if (content.length) {
-      return { type: "mixedContent", value: content };
-    }
-  } catch (error: any) {
-    console.error(`error in parseHTMLFromPaste: ${error.message}`);
-  }
-
-  return null;
-};
-
-export const readSystemClipboard = async () => {
-  const types: { [key in AllowedPasteMimeTypes]?: string } = {};
-
-  try {
-    if (navigator.clipboard?.readText) {
-      return { "text/plain": await navigator.clipboard?.readText() };
-    }
-  } catch (error: any) {
-    // @ts-ignore
-    if (navigator.clipboard?.read) {
-      console.warn(
-        `navigator.clipboard.readText() failed (${error.message}). Failling back to navigator.clipboard.read()`,
-      );
-    } else {
-      throw error;
-    }
-  }
-
-  let clipboardItems: ClipboardItems;
-
-  try {
-    clipboardItems = await navigator.clipboard?.read();
-  } catch (error: any) {
-    if (error.name === "DataError") {
-      console.warn(
-        `navigator.clipboard.read() error, clipboard is probably empty: ${error.message}`,
-      );
-      return types;
-    }
-    throw error;
-  }
-
-  for (const item of clipboardItems) {
-    for (const type of item.types) {
-      if (!isMemberOf(ALLOWED_PASTE_MIME_TYPES, type)) {
-        continue;
-      }
-      try {
-        types[type] = await (await item.getType(type)).text();
-      } catch (error: any) {
-        console.warn(
-          `Cannot retrieve ${type} from clipboardItem: ${error.message}`,
-        );
-      }
-    }
-  }
-
-  if (Object.keys(types).length === 0) {
-    console.warn("No clipboard data found from clipboard.read().");
-    return types;
-  }
-
-  return types;
-};
-
-/**
- * Parses "paste" ClipboardEvent.
- */
-const parseClipboardEvent = async (
-  event: ClipboardEvent,
-  isPlainPaste = false,
-): Promise<ParsedClipboardEvent> => {
-  try {
-    const mixedContent = !isPlainPaste && event && maybeParseHTMLPaste(event);
-
-    if (mixedContent) {
-      if (mixedContent.value.every((item) => item.type === "text")) {
-        return {
-          type: "text",
-          value:
-            event.clipboardData?.getData("text/plain") ||
-            mixedContent.value
-              .map((item) => item.value)
-              .join("\n")
-              .trim(),
-        };
-      }
-
-      return mixedContent;
-    }
-
-    const text = event.clipboardData?.getData("text/plain");
-
-    return { type: "text", value: (text || "").trim() };
-  } catch {
-    return { type: "text", value: "" };
-  }
-};
-
-/**
- * Attempts to parse clipboard. Prefers system clipboard.
- */
-export const parseClipboard = async (
-  event: ClipboardEvent,
-  isPlainPaste = false,
-): Promise<ClipboardData> => {
-  const parsedEventData = await parseClipboardEvent(event, isPlainPaste);
-
-  if (parsedEventData.type === "mixedContent") {
-    return {
-      mixedContent: parsedEventData.value,
-    };
-  }
-
-  try {
-    // if system clipboard contains spreadsheet, use it even though it's
-    // technically possible it's staler than in-app clipboard
-    const spreadsheetResult =
-      !isPlainPaste && parsePotentialSpreadsheet(parsedEventData.value);
-
-    if (spreadsheetResult) {
-      return spreadsheetResult;
-    }
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  try {
-    const systemClipboardData = JSON.parse(parsedEventData.value);
-    const programmaticAPI =
-      systemClipboardData.type === EXPORT_DATA_TYPES.excalidrawClipboardWithAPI;
-    if (clipboardContainsElements(systemClipboardData)) {
-      return {
-        elements: systemClipboardData.elements,
-        files: systemClipboardData.files,
-        text: isPlainPaste
-          ? JSON.stringify(systemClipboardData.elements, null, 2)
-          : undefined,
-        programmaticAPI,
-      };
-    }
-  } catch {}
-
-  return { text: parsedEventData.value };
-};
-
-export const copyBlobToClipboardAsPng = async (blob: Blob | Promise<Blob>) => {
-  try {
-    // in Safari so far we need to construct the ClipboardItem synchronously
-    // (i.e. in the same tick) otherwise browser will complain for lack of
-    // user intent. Using a Promise ClipboardItem constructor solves this.
-    // https://bugs.webkit.org/show_bug.cgi?id=222262
-    //
-    // Note that Firefox (and potentially others) seems to support Promise
-    // ClipboardItem constructor, but throws on an unrelated MIME type error.
-    // So we need to await this and fallback to awaiting the blob if applicable.
-    await navigator.clipboard.write([
-      new window.ClipboardItem({
-        [MIME_TYPES.png]: blob,
-      }),
-    ]);
-  } catch (error: any) {
-    // if we're using a Promise ClipboardItem, let's try constructing
-    // with resolution value instead
-    if (isPromiseLike(blob)) {
-      await navigator.clipboard.write([
-        new window.ClipboardItem({
-          [MIME_TYPES.png]: await blob,
-        }),
-      ]);
-    } else {
-      throw error;
-    }
-  }
-};
-
-export const copyTextToSystemClipboard = async (
-  text: string | null,
-  clipboardEvent?: ClipboardEvent | null,
-) => {
-  // (1) first try using Async Clipboard API
-  if (probablySupportsClipboardWriteText) {
-    try {
-      // NOTE: doesn't work on FF on non-HTTPS domains, or when document
-      // not focused
-      await navigator.clipboard.writeText(text || "");
-      return;
-    } catch (error: any) {
-      console.error(error);
-    }
-  }
-
-  // (2) if fails and we have access to ClipboardEvent, use plain old setData()
-  try {
-    if (clipboardEvent) {
-      clipboardEvent.clipboardData?.setData("text/plain", text || "");
-      if (clipboardEvent.clipboardData?.getData("text/plain") !== text) {
-        throw new Error("Failed to setData on clipboardEvent");
-      }
-      return;
-    }
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  // (3) if that fails, use document.execCommand
-  if (!copyTextViaExecCommand(text)) {
-    throw new Error(t("errors.copyToSystemClipboardFailed"));
-  }
-};
-
-// adapted from https://github.com/zenorocha/clipboard.js/blob/ce79f170aa655c408b6aab33c9472e8e4fa52e19/src/clipboard-action.js#L48
-const copyTextViaExecCommand = (text: string | null) => {
-  // execCommand doesn't allow copying empty strings, so if we're
-  // clearing clipboard using this API, we must copy at least an empty char
-  if (!text) {
-    text = " ";
-  }
-
-  const isRTL = document.documentElement.getAttribute("dir") === "rtl";
-
-  const textarea = document.createElement("textarea");
-
-  textarea.style.border = "0";
-  textarea.style.padding = "0";
-  textarea.style.margin = "0";
-  textarea.style.position = "absolute";
-  textarea.style[isRTL ? "right" : "left"] = "-9999px";
-  const yPosition = window.pageYOffset || document.documentElement.scrollTop;
-  textarea.style.top = `${yPosition}px`;
-  // Prevent zooming on iOS
-  textarea.style.fontSize = "12pt";
-
-  textarea.setAttribute("readonly", "");
-  textarea.value = text;
-
-  document.body.appendChild(textarea);
-
-  let success = false;
-
-  try {
-    textarea.select();
-    textarea.setSelectionRange(0, textarea.value.length);
-
-    success = document.execCommand("copy");
-  } catch (error: any) {
-    console.error(error);
-  }
-
-  textarea.remove();
-
-  return success;
-};

packages/excalidraw/colors.ts

@@ -1,170 +0,0 @@
-import oc from "open-color";
-import { Merge } from "./utility-types";
-
-// FIXME can't put to utils.ts rn because of circular dependency
-const pick = <R extends Record<string, any>, K extends readonly (keyof R)[]>(
-  source: R,
-  keys: K,
-) => {
-  return keys.reduce((acc, key: K[number]) => {
-    if (key in source) {
-      acc[key] = source[key];
-    }
-    return acc;
-  }, {} as Pick<R, K[number]>) as Pick<R, K[number]>;
-};
-
-export type ColorPickerColor =
-  | Exclude<keyof oc, "indigo" | "lime">
-  | "transparent"
-  | "bronze";
-export type ColorTuple = readonly [string, string, string, string, string];
-export type ColorPalette = Merge<
-  Record<ColorPickerColor, ColorTuple>,
-  { black: "#1e1e1e"; white: "#ffffff"; transparent: "transparent" }
->;
-
-// used general type instead of specific type (ColorPalette) to support custom colors
-export type ColorPaletteCustom = { [key: string]: ColorTuple | string };
-export type ColorShadesIndexes = [number, number, number, number, number];
-
-export const MAX_CUSTOM_COLORS_USED_IN_CANVAS = 5;
-export const COLORS_PER_ROW = 5;
-
-export const DEFAULT_CHART_COLOR_INDEX = 4;
-
-export const DEFAULT_ELEMENT_STROKE_COLOR_INDEX = 4;
-export const DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX = 1;
-export const ELEMENTS_PALETTE_SHADE_INDEXES = [0, 2, 4, 6, 8] as const;
-export const CANVAS_PALETTE_SHADE_INDEXES = [0, 1, 2, 3, 4] as const;
-
-export const getSpecificColorShades = (
-  color: Exclude<
-    ColorPickerColor,
-    "transparent" | "white" | "black" | "bronze"
-  >,
-  indexArr: Readonly<ColorShadesIndexes>,
-) => {
-  return indexArr.map((index) => oc[color][index]) as any as ColorTuple;
-};
-
-export const COLOR_PALETTE = {
-  transparent: "transparent",
-  black: "#1e1e1e",
-  white: "#ffffff",
-  // open-colors
-  gray: getSpecificColorShades("gray", ELEMENTS_PALETTE_SHADE_INDEXES),
-  red: getSpecificColorShades("red", ELEMENTS_PALETTE_SHADE_INDEXES),
-  pink: getSpecificColorShades("pink", ELEMENTS_PALETTE_SHADE_INDEXES),
-  grape: getSpecificColorShades("grape", ELEMENTS_PALETTE_SHADE_INDEXES),
-  violet: getSpecificColorShades("violet", ELEMENTS_PALETTE_SHADE_INDEXES),
-  blue: getSpecificColorShades("blue", ELEMENTS_PALETTE_SHADE_INDEXES),
-  cyan: getSpecificColorShades("cyan", ELEMENTS_PALETTE_SHADE_INDEXES),
-  teal: getSpecificColorShades("teal", ELEMENTS_PALETTE_SHADE_INDEXES),
-  green: getSpecificColorShades("green", ELEMENTS_PALETTE_SHADE_INDEXES),
-  yellow: getSpecificColorShades("yellow", ELEMENTS_PALETTE_SHADE_INDEXES),
-  orange: getSpecificColorShades("orange", ELEMENTS_PALETTE_SHADE_INDEXES),
-  // radix bronze shades 3,5,7,9,11
-  bronze: ["#f8f1ee", "#eaddd7", "#d2bab0", "#a18072", "#846358"],
-} as ColorPalette;
-
-const COMMON_ELEMENT_SHADES = pick(COLOR_PALETTE, [
-  "cyan",
-  "blue",
-  "violet",
-  "grape",
-  "pink",
-  "green",
-  "teal",
-  "yellow",
-  "orange",
-  "red",
-]);
-
-// -----------------------------------------------------------------------------
-// quick picks defaults
-// -----------------------------------------------------------------------------
-
-// ORDER matters for positioning in quick picker
-export const DEFAULT_ELEMENT_STROKE_PICKS = [
-  COLOR_PALETTE.black,
-  COLOR_PALETTE.red[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-  COLOR_PALETTE.green[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-  COLOR_PALETTE.blue[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_STROKE_COLOR_INDEX],
-] as ColorTuple;
-
-// ORDER matters for positioning in quick picker
-export const DEFAULT_ELEMENT_BACKGROUND_PICKS = [
-  COLOR_PALETTE.transparent,
-  COLOR_PALETTE.red[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-  COLOR_PALETTE.green[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-  COLOR_PALETTE.blue[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-  COLOR_PALETTE.yellow[DEFAULT_ELEMENT_BACKGROUND_COLOR_INDEX],
-] as ColorTuple;
-
-// ORDER matters for positioning in quick picker
-export const DEFAULT_CANVAS_BACKGROUND_PICKS = [
-  COLOR_PALETTE.white,
-  // radix slate2
-  "#f8f9fa",
-  // radix blue2
-  "#f5faff",
-  // radix yellow2
-  "#fffce8",
-  // radix bronze2
-  "#fdf8f6",
-] as ColorTuple;
-
-// -----------------------------------------------------------------------------
-// palette defaults
-// -----------------------------------------------------------------------------
-
-export const DEFAULT_ELEMENT_STROKE_COLOR_PALETTE = {
-  // 1st row
-  transparent: COLOR_PALETTE.transparent,
-  white: COLOR_PALETTE.white,
-  gray: COLOR_PALETTE.gray,
-  black: COLOR_PALETTE.black,
-  bronze: COLOR_PALETTE.bronze,
-  // rest
-  ...COMMON_ELEMENT_SHADES,
-} as const;
-
-// ORDER matters for positioning in pallete (5x3 grid)s
-export const DEFAULT_ELEMENT_BACKGROUND_COLOR_PALETTE = {
-  transparent: COLOR_PALETTE.transparent,
-  white: COLOR_PALETTE.white,
-  gray: COLOR_PALETTE.gray,
-  black: COLOR_PALETTE.black,
-  bronze: COLOR_PALETTE.bronze,
-
-  ...COMMON_ELEMENT_SHADES,
-} as const;
-
-// -----------------------------------------------------------------------------
-// helpers
-// -----------------------------------------------------------------------------
-
-// !!!MUST BE WITHOUT GRAY, TRANSPARENT AND BLACK!!!
-export const getAllColorsSpecificShade = (index: 0 | 1 | 2 | 3 | 4) =>
-  [
-    // 2nd row
-    COLOR_PALETTE.cyan[index],
-    COLOR_PALETTE.blue[index],
-    COLOR_PALETTE.violet[index],
-    COLOR_PALETTE.grape[index],
-    COLOR_PALETTE.pink[index],
-
-    // 3rd row
-    COLOR_PALETTE.green[index],
-    COLOR_PALETTE.teal[index],
-    COLOR_PALETTE.yellow[index],
-    COLOR_PALETTE.orange[index],
-    COLOR_PALETTE.red[index],
-  ] as const;
-
-export const rgbToHex = (r: number, g: number, b: number) =>
-  `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
-
-// -----------------------------------------------------------------------------

packages/excalidraw/components/Avatar.scss

@@ -1,7 +0,0 @@
-@import "../css/variables.module.scss";
-
-.excalidraw {
-  .Avatar {
-    @include avatarStyles;
-  }
-}

packages/excalidraw/components/BraveMeasureTextError.tsx

@@ -1,43 +0,0 @@
-import Trans from "./Trans";
-
-const BraveMeasureTextError = () => {
-  return (
-    <div data-testid="brave-measure-text-error">
-      <p>
-        <Trans
-          i18nKey="errors.brave_measure_text_error.line1"
-          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
-        />
-      </p>
-      <p>
-        <Trans
-          i18nKey="errors.brave_measure_text_error.line2"
-          bold={(el) => <span style={{ fontWeight: 600 }}>{el}</span>}
-        />
-      </p>
-      <p>
-        <Trans
-          i18nKey="errors.brave_measure_text_error.line3"
-          link={(el) => (
-            <a href="http://docs.excalidraw.com/docs/@excalidraw/excalidraw/faq#turning-off-aggresive-block-fingerprinting-in-brave-browser">
-              {el}
-            </a>
-          )}
-        />
-      </p>
-      <p>
-        <Trans
-          i18nKey="errors.brave_measure_text_error.line4"
-          issueLink={(el) => (
-            <a href="https://github.com/excalidraw/excalidraw/issues/new">
-              {el}
-            </a>
-          )}
-          discordLink={(el) => <a href="https://discord.gg/UexuTaE">{el}.</a>}
-        />
-      </p>
-    </div>
-  );
-};
-
-export default BraveMeasureTextError;

packages/excalidraw/components/ButtonIconSelect.tsx

@@ -1,59 +0,0 @@
-import clsx from "clsx";
-
-// TODO: It might be "clever" to add option.icon to the existing component <ButtonSelect />
-export const ButtonIconSelect = <T extends Object>(
-  props: {
-    options: {
-      value: T;
-      text: string;
-      icon: JSX.Element;
-      testId?: string;
-      /** if not supplied, defaults to value identity check */
-      active?: boolean;
-    }[];
-    value: T | null;
-    type?: "radio" | "button";
-  } & (
-    | { type?: "radio"; group: string; onChange: (value: T) => void }
-    | {
-        type: "button";
-        onClick: (
-          value: T,
-          event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
-        ) => void;
-      }
-  ),
-) => (
-  <div className="buttonList buttonListIcon">
-    {props.options.map((option) =>
-      props.type === "button" ? (
-        <button
-          key={option.text}
-          onClick={(event) => props.onClick(option.value, event)}
-          className={clsx({
-            active: option.active ?? props.value === option.value,
-          })}
-          data-testid={option.testId}
-          title={option.text}
-        >
-          {option.icon}
-        </button>
-      ) : (
-        <label
-          key={option.text}
-          className={clsx({ active: props.value === option.value })}
-          title={option.text}
-        >
-          <input
-            type="radio"
-            name={props.group}
-            onChange={() => props.onChange(option.value)}
-            checked={props.value === option.value}
-            data-testid={option.testId}
-          />
-          {option.icon}
-        </label>
-      ),
-    )}
-  </div>
-);