Revert "feat: rewrite preview to use React.Suspense"

This reverts commit cd021716f1.

.dockerignore

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

.env.development

@@ -13,8 +13,6 @@ VITE_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"}'
 
 # put these in your .env.local, or make sure you don't commit!

.env.production

@@ -9,8 +9,6 @@ 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
-
 # 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=

.eslintignore

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

.github/workflows/autorelease-preview.yml

@@ -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

@@ -16,7 +16,7 @@ jobs:
 
       - name: Install and lint
         run: |
-          yarn install
+          yarn --frozen-lockfile
           yarn test:other
           yarn test:code
           yarn test:typecheck

.github/workflows/locales-coverage.yml

@@ -22,11 +22,11 @@ jobs:
       - 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/size-limit.yml

@@ -15,14 +15,16 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18.x
-      - name: Install in packages/excalidraw
-        run: yarn
-        working-directory: packages/excalidraw
+      - name: Install
+        run: yarn --frozen-lockfile
+      - name: Install in src/packages/excalidraw
+        run: yarn --frozen-lockfile
+        working-directory: src/packages/excalidraw
         env:
           CI: true
       - uses: andresz1/size-limit-action@v1
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          build_script: build:esm
+          build_script: build:umd
           skip_step: install
-          directory: packages/excalidraw
+          directory: src/packages/excalidraw

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

@@ -16,7 +16,7 @@ jobs:
         with:
           node-version: "18.x"
       - name: "Install Deps"
-        run: yarn install
+        run: yarn --frozen-lockfile
       - name: "Test Coverage"
         run: yarn test:coverage
       - name: "Report Coverage"

.github/workflows/test.yml

@@ -13,5 +13,5 @@ jobs:
           node-version: 18.x
       - name: Install and test
         run: |
-          yarn install
+          yarn --frozen-lockfile
           yarn test:app

.gitignore

@@ -21,7 +21,10 @@ npm-debug.log*
 package-lock.json
 yarn-debug.log*
 yarn-error.log*
-packages/excalidraw/types
+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
 coverage
 dev-dist
 html

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

README.md

@@ -25,9 +25,6 @@
   <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"  />
   </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>
@@ -73,7 +70,7 @@ The Excalidraw editor (npm package) supports:
 
 ## Excalidraw.com
 
-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:
+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/src/excalidraw-app) is part of this repository as well, and the app features:
 
 - 📡&nbsp;PWA support (works offline).
 - 🤼&nbsp;Real-time collaboration.
@@ -85,7 +82,7 @@ We'll be adding these features as drop-in plugins for the npm package in the fut
 
 ## 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).
+Install the [Excalidraw npm package](https://www.npmjs.com/package/@excalidraw/excalidraw):
 
 ```
 npm install react react-dom @excalidraw/excalidraw
@@ -97,7 +94,7 @@ 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!
+Don't forget to check out our [Documentation](https://docs.excalidraw.com)!
 
 ## Contributing
 

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/footer.mdx

@@ -34,7 +34,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

@@ -38,7 +38,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 +70,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 |
@@ -133,7 +131,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

@@ -80,7 +80,7 @@ A given tab trigger button that switches to a given sidebar tab. It must be rend
 | `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.
+You can use the [`ref.toggleSidebar({ name: "custom" })`](/docs/@excalidraw/excalidraw/api/props/ref#toggleSidebar) api to control the sidebar, but we export a trigger button to make UI use cases easier.
 
 ## Example
 

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

@@ -2,25 +2,21 @@
 
 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).
+For this purpose we introduced a new type [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133). This is the simplified version of [`ExcalidrawElement`](https://github.com/excalidraw/excalidraw/blob/master/src/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).
+The [`ExcalidrawElementSkeleton`](https://github.com/excalidraw/excalidraw/blob/master/src/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`. |
+<pre>
+  convertToExcalidrawElements(elements:{" "}
+  <a href="https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L133">
+    ExcalidrawElementSkeleton
+  </a>
+  )
+</pre>
 
 **_How to use_**
 
@@ -28,13 +24,13 @@ convertToExcalidrawElements(
 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
+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/ref#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\_.
+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.
 
@@ -71,7 +67,7 @@ function App() {
 }
 ```
 
-You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/packages/excalidraw/element/types.ts#L27) as well to decorate the shapes.
+You can pass additional [`properties`](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L27) as well to decorate the shapes.
 
 :::info
 
@@ -192,7 +188,7 @@ convertToExcalidrawElements([
 
 ### 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.
+In addition to `type`, `x` and `y` properties, [`label`](https://github.com/excalidraw/excalidraw/blob/master/src/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.
 
@@ -326,7 +322,7 @@ convertToExcalidrawElements([
 
 ### 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
+To bind arrow to a shape you need to specify its [`start`](https://github.com/excalidraw/excalidraw/blob/master/src/data/transform.ts#L86) and [`end`](https://github.com/excalidraw/excalidraw/blob/master/src/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([
@@ -431,45 +427,3 @@ convertToExcalidrawElements([
 ```
 
 ![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. |
@@ -23,7 +23,7 @@ All `props` are _optional_.
 | [`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`](#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 |
@@ -33,11 +33,11 @@ All `props` are _optional_.
 
 ### 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 +59,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 +79,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 +110,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 +123,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 +136,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 +167,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 +176,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
@@ -251,4 +236,4 @@ validateEmbeddable?: boolean | string[] | RegExp | RegExp[] | ((link: string) =>
 
 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.
+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,27 @@
-# 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 +39,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 +102,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
@@ -125,13 +165,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 +181,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. |
@@ -189,7 +229,7 @@ function App() {
       </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 +244,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 +264,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#L115">
     ExcalidrawElement[]
   </a>
 </pre>
@@ -235,7 +275,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#L115">
     ExcalidrawElement
   </a>
   []&#62;
@@ -247,7 +287,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>
@@ -288,7 +328,7 @@ Scroll the nearest element out of the elements supplied to the center of the vie
 
 | 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. |
+| target | [ExcalidrawElement](https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L115) &#124; [ExcalidrawElement[]](https://github.com/excalidraw/excalidraw/blob/master/src/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%) |
@@ -336,7 +376,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,25 +387,14 @@ 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
 
@@ -392,51 +421,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

@@ -4,7 +4,7 @@
 
 <pre>
   (isMobile: boolean, appState:
-  <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>) => JSX | null
 </pre>
@@ -66,7 +66,7 @@ function App() {
 
 <pre>
   (element: NonDeleted&lt;ExcalidrawEmbeddableElement&gt;, appState:{" "}
-  <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>
   ) => JSX.Element | null

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,16 +29,16 @@ 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;
+  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;
   opts: &#123; refreshDimensions?: boolean, repairBindings?: 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`. |
+| `elements` | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/element/types.ts#L114">ImportedDataState["elements"]</a> | The `elements` to be restored |
+| [`localElements`](#localelements) | <a href="https://github.com/excalidraw/excalidraw/blob/master/src/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
@@ -70,15 +70,15 @@ Parameter `refreshDimensions` indicates whether we should also `recalculate` tex
 
 <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/>
+  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><br/>
   opts: &#123; refreshDimensions?: boolean, repairBindings?: boolean }<br/>
 
 )
 </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 +93,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,15 +331,14 @@ 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 |
+| `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` |
 
 ### i18n
 
@@ -350,8 +347,8 @@ 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) |
+| `languages` | [`Language[]`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) |
+| `useI18n` | [`() => { langCode, t }`](https://github.com/excalidraw/excalidraw/blob/master/src/i18n.ts#L15) |
 
 ```js
 import { defaultLang, languages, useI18n } from "@excalidraw/excalidraw";
@@ -386,94 +383,3 @@ function App() {
   );
 }
 ```
-
-### 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";
-```

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,7 +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.
+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.
 
 ### Turning off Aggressive Anti-Fingerprinting in Brave browser
 
@@ -18,7 +18,7 @@ We strongly recommend turning it off. You can follow the steps below on how to d
 
 2. Once opened, look for **Aggressively Block Fingerprinting**
 
-![Aggressive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
+![Aggresive block fingerprinting](../../assets/aggressive-block-fingerprint.png)
 
 3. Switch to **Block Fingerprinting**
 
@@ -31,17 +31,6 @@ We strongly recommend turning it off. You can follow the steps below on how to d
 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"),
-  },
-```
 
 ## Need help?
 

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

@@ -30,74 +30,25 @@ 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.
+The following worfklow shows one way how to render Excalidraw on Next.js. We'll add more detailed and alternative Next.js examples, soon.
 
 ```jsx showLineNumbers
 import { useState, useEffect } from "react";
 export default function App() {
   const [Excalidraw, setExcalidraw] = useState(null);
   useEffect(() => {
-    import("@excalidraw/excalidraw").then((comp) =>
-      setExcalidraw(comp.Excalidraw),
-    );
+    import("@excalidraw/excalidraw").then((comp) => setExcalidraw(comp.Excalidraw));
   }, []);
   return <>{Excalidraw && <Excalidraw />}</>;
 }
 ```
 
-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 +99,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/codebase/new-diagram-type.mdx

@@ -38,9 +38,9 @@ Add the diagram type in switch case in [`parseMermaid`](https://github.com/excal
 
 ## 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.
+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/src/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).
+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/src/data/transform.ts#L133).
 
 Thats it, you have added the new diagram type 🥳, now lets test it out!
 

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

@@ -6,7 +6,7 @@ In this section we will be diving into how the [flowchart parser](https://github
 
 ![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).
+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/src/data/transform.ts#L133C13-L133C38).
 
 
 For computing `vertices` and `edge`s lets consider the below svg generated by mermaid
@@ -42,7 +42,7 @@ Considering the same example this is the response from the API
 	}
 }
 ```
-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 dimensions and position is missing in this response and we need that to transform to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/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:
 

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

@@ -55,11 +55,11 @@ If you want to understand how flowchart parser works, you can navigate to [Flowc
 
 ## 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.
+Now we have all the data, we just need to transform it to [ExcalidrawElementSkeleton](https://github.com/excalidraw/excalidraw/blob/master/src/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).
+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/src/data/transform.ts#L133C13-L133C38).
 
 ![image](https://github.com/excalidraw/excalidraw/assets/11256141/00226e9d-043d-4a08-989a-3ad9d2a574f1)

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/introduction/contributing.mdx

@@ -15,7 +15,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
@@ -52,6 +52,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.

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",
@@ -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"),
+          ],
         },
       }),
     ],
@@ -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.15.2-eb020d0",
     "@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: "Codebase", items: ["codebase/json-schema"] },
     {
       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",
               ],

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/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.15.2-eb020d0":
+  version "0.15.2-eb020d0"
+  resolved "https://registry.yarnpkg.com/@excalidraw/excalidraw/-/excalidraw-0.15.2-eb020d0.tgz#25bd61e6f23da7c084fb16a3e0fe0dd9ad8e6533"
+  integrity sha512-TKGLzpOVqFQcwK1GFKTDXgg1s2U6tc5KE3qXuv87osbzOtftQn3x4+VH61vwdj11l00nEN80SMdXUC43T9uJqQ==
 
 "@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"
@@ -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"

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;
-}

index.html

@@ -121,7 +121,7 @@
       crossorigin="anonymous"
     />
 
-    <link rel="stylesheet" href="/fonts/fonts.css" type="text/css" />
+    <link rel="stylesheet" href="/fonts.css" type="text/css" />
     <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%"==="true" ) { %>
     <script>
       {
@@ -195,7 +195,7 @@
       <h1 class="visually-hidden">Excalidraw</h1>
     </header>
     <div id="root"></div>
-    <script type="module" src="index.tsx"></script>
+    <script type="module" src="/src/index.tsx"></script>
     <% if ("%VITE_APP_DEV_DISABLE_LIVE_RELOAD%" !== 'true') { %>
     <!-- 100% privacy friendly analytics -->
     <script>

package.json

@@ -1,22 +1,61 @@
 {
-  "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": {
+    "@braintree/sanitize-url": "6.0.2",
     "@excalidraw/random-username": "1.0.0",
+    "@radix-ui/react-popover": "1.0.3",
+    "@radix-ui/react-tabs": "1.0.2",
     "@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",
+    "browser-fs-access": "0.29.1",
+    "canvas-roundrect-polyfill": "0.0.1",
+    "clsx": "1.1.1",
+    "cross-env": "7.0.3",
+    "eslint-plugin-react": "7.32.2",
+    "fake-indexeddb": "3.1.7",
     "firebase": "8.3.3",
     "i18next-browser-languagedetector": "6.1.4",
     "idb-keyval": "6.0.3",
+    "image-blob-reduce": "3.0.1",
     "jotai": "1.13.1",
+    "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"
+    "roughjs": "4.5.2",
+    "sass": "1.51.0",
+    "socket.io-client": "2.3.1",
+    "tunnel-rat": "0.1.2"
   },
   "devDependencies": {
     "@excalidraw/eslint-config": "1.0.3",
@@ -24,9 +63,12 @@
     "@types/chai": "4.3.0",
     "@types/jest": "27.4.0",
     "@types/lodash.throttle": "4.1.7",
+    "@types/pako": "1.0.3",
+    "@types/pica": "5.1.3",
     "@types/react": "18.0.15",
     "@types/react-dom": "18.0.6",
-    "@types/socket.io-client": "3.0.0",
+    "@types/resize-observer-browser": "0.1.7",
+    "@types/socket.io-client": "1.4.36",
     "@vitejs/plugin-react": "3.1.0",
     "@vitest/coverage-v8": "0.33.0",
     "@vitest/ui": "0.32.2",
@@ -43,25 +85,27 @@
     "prettier": "2.6.2",
     "rewire": "6.0.0",
     "typescript": "4.9.4",
-    "vite": "5.0.6",
+    "vite": "4.4.2",
     "vite-plugin-checker": "0.6.1",
-    "vite-plugin-ejs": "1.7.0",
-    "vite-plugin-pwa": "0.17.4",
+    "vite-plugin-ejs": "1.6.4",
+    "vite-plugin-pwa": "0.16.4",
     "vite-plugin-svgr": "2.4.0",
-    "vitest": "1.0.1",
+    "vitest": "0.34.1",
     "vitest-canvas-mock": "0.3.2"
   },
   "engines": {
-    "node": "18.0.0 - 20.x.x"
+    "node": ">=18.0.0"
   },
   "homepage": ".",
+  "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:version": "node ./scripts/build-version.js",
-    "build": "yarn --cwd ./excalidraw-app build",
+    "build": "yarn build:app && yarn build:version",
     "fix:code": "yarn test:code --fix",
     "fix:other": "yarn prettier --write",
     "fix": "yarn fix:other && yarn fix:code",
@@ -69,10 +113,10 @@
     "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",
+    "start": "vite",
+    "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 --watch=false",
-    "test:app": "vitest",
+    "test:app": "vitest --config vitest.config.ts",
     "test:code": "eslint --max-warnings=0 --ext .js,.ts,.tsx .",
     "test:other": "yarn prettier --list-different",
     "test:typecheck": "tsc",
@@ -80,10 +124,10 @@
     "test": "yarn test:app",
     "test:coverage": "vitest --coverage",
     "test:coverage:watch": "vitest --coverage --watch",
-    "test:ui": "yarn test --ui --coverage.enabled=true",
+    "test:ui": "yarn test --ui",
     "autorelease": "node scripts/autorelease.js",
-    "prerelease:excalidraw": "node scripts/prerelease.js",
+    "prerelease": "node scripts/prerelease.js",
     "build:preview": "yarn build && vite preview --port 5000",
-    "release:excalidraw": "node scripts/release.js"
+    "release": "node scripts/release.js"
   }
 }

packages/excalidraw/.gitignore

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

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/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/components/Avatar.scss

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

packages/excalidraw/components/FollowMode/FollowMode.scss

@@ -1,59 +0,0 @@
-.excalidraw {
-  .follow-mode {
-    position: absolute;
-    box-sizing: border-box;
-    pointer-events: none;
-    border: 2px solid var(--color-primary-hover);
-    z-index: 9999;
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-
-    &__badge {
-      background-color: var(--color-primary-hover);
-      color: var(--color-primary-light);
-      padding: 0.25rem 0.5rem;
-      margin-bottom: 0.5rem;
-      border-radius: 0.5rem;
-      pointer-events: all;
-      font-size: 0.75rem;
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-
-      &__label {
-        display: flex;
-        white-space: pre-wrap;
-        line-height: 1;
-      }
-
-      &__username {
-        display: block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        max-width: 100px;
-      }
-    }
-
-    &__disconnect-btn {
-      all: unset;
-      cursor: pointer;
-      border-radius: 0.25rem;
-
-      &:hover {
-        background-color: var(--color-primary-darker);
-      }
-
-      &:active {
-        background-color: var(--color-primary-darkest);
-      }
-
-      svg {
-        display: block;
-        width: 1rem;
-        height: 1rem;
-      }
-    }
-  }
-}

packages/excalidraw/components/FollowMode/FollowMode.tsx

@@ -1,43 +0,0 @@
-import { UserToFollow } from "../../types";
-import { CloseIcon } from "../icons";
-import "./FollowMode.scss";
-
-interface FollowModeProps {
-  width: number;
-  height: number;
-  userToFollow: UserToFollow;
-  onDisconnect: () => void;
-}
-
-const FollowMode = ({
-  height,
-  width,
-  userToFollow,
-  onDisconnect,
-}: FollowModeProps) => {
-  return (
-    <div style={{ position: "relative" }}>
-      <div className="follow-mode" style={{ width, height }}>
-        <div className="follow-mode__badge">
-          <div className="follow-mode__badge__label">
-            Following{" "}
-            <span
-              className="follow-mode__badge__username"
-              title={userToFollow.username}
-            >
-              {userToFollow.username}
-            </span>
-          </div>
-          <button
-            onClick={onDisconnect}
-            className="follow-mode__disconnect-btn"
-          >
-            {CloseIcon}
-          </button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FollowMode;

packages/excalidraw/components/ImageExportDialog.tsx

@@ -1,378 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-
-import type { ActionManager } from "../actions/manager";
-import type { AppClassProperties, BinaryFiles, UIAppState } from "../types";
-
-import {
-  actionExportWithDarkMode,
-  actionChangeExportBackground,
-  actionChangeExportEmbedScene,
-  actionChangeExportScale,
-  actionChangeProjectName,
-} from "../actions/actionExport";
-import { probablySupportsClipboardBlob } from "../clipboard";
-import {
-  DEFAULT_EXPORT_PADDING,
-  EXPORT_IMAGE_TYPES,
-  isFirefox,
-  EXPORT_SCALES,
-} from "../constants";
-
-import { canvasToBlob } from "../data/blob";
-import { nativeFileSystemSupported } from "../data/filesystem";
-import { NonDeletedExcalidrawElement } from "../element/types";
-import { t } from "../i18n";
-import { isSomeElementSelected } from "../scene";
-import { exportToCanvas } from "../../utils/export";
-
-import { copyIcon, downloadIcon, helpIcon } from "./icons";
-import { Dialog } from "./Dialog";
-import { RadioGroup } from "./RadioGroup";
-import { Switch } from "./Switch";
-import { Tooltip } from "./Tooltip";
-
-import "./ImageExportDialog.scss";
-import { useAppProps } from "./App";
-import { FilledButton } from "./FilledButton";
-import { cloneJSON } from "../utils";
-import { prepareElementsForExport } from "../data";
-
-const supportsContextFilters =
-  "filter" in document.createElement("canvas").getContext("2d")!;
-
-export const ErrorCanvasPreview = () => {
-  return (
-    <div>
-      <h3>{t("canvasError.cannotShowPreview")}</h3>
-      <p>
-        <span>{t("canvasError.canvasTooBig")}</span>
-      </p>
-      <em>({t("canvasError.canvasTooBigTip")})</em>
-    </div>
-  );
-};
-
-type ImageExportModalProps = {
-  appStateSnapshot: Readonly<UIAppState>;
-  elementsSnapshot: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles;
-  actionManager: ActionManager;
-  onExportImage: AppClassProperties["onExportImage"];
-};
-
-const ImageExportModal = ({
-  appStateSnapshot,
-  elementsSnapshot,
-  files,
-  actionManager,
-  onExportImage,
-}: ImageExportModalProps) => {
-  const hasSelection = isSomeElementSelected(
-    elementsSnapshot,
-    appStateSnapshot,
-  );
-
-  const appProps = useAppProps();
-  const [projectName, setProjectName] = useState(appStateSnapshot.name);
-  const [exportSelectionOnly, setExportSelectionOnly] = useState(hasSelection);
-  const [exportWithBackground, setExportWithBackground] = useState(
-    appStateSnapshot.exportBackground,
-  );
-  const [exportDarkMode, setExportDarkMode] = useState(
-    appStateSnapshot.exportWithDarkMode,
-  );
-  const [embedScene, setEmbedScene] = useState(
-    appStateSnapshot.exportEmbedScene,
-  );
-  const [exportScale, setExportScale] = useState(appStateSnapshot.exportScale);
-
-  const previewRef = useRef<HTMLDivElement>(null);
-  const [renderError, setRenderError] = useState<Error | null>(null);
-
-  const { exportedElements, exportingFrame } = prepareElementsForExport(
-    elementsSnapshot,
-    appStateSnapshot,
-    exportSelectionOnly,
-  );
-
-  useEffect(() => {
-    const previewNode = previewRef.current;
-    if (!previewNode) {
-      return;
-    }
-    const maxWidth = previewNode.offsetWidth;
-    const maxHeight = previewNode.offsetHeight;
-    if (!maxWidth) {
-      return;
-    }
-    exportToCanvas({
-      elements: exportedElements,
-      appState: {
-        ...appStateSnapshot,
-        name: projectName,
-        exportBackground: exportWithBackground,
-        exportWithDarkMode: exportDarkMode,
-        exportScale,
-        exportEmbedScene: embedScene,
-      },
-      files,
-      exportPadding: DEFAULT_EXPORT_PADDING,
-      maxWidthOrHeight: Math.max(maxWidth, maxHeight),
-      exportingFrame,
-    })
-      .then((canvas) => {
-        setRenderError(null);
-        // if converting to blob fails, there's some problem that will
-        // likely prevent preview and export (e.g. canvas too big)
-        return canvasToBlob(canvas).then(() => {
-          previewNode.replaceChildren(canvas);
-        });
-      })
-      .catch((error) => {
-        console.error(error);
-        setRenderError(error);
-      });
-  }, [
-    appStateSnapshot,
-    files,
-    exportedElements,
-    exportingFrame,
-    projectName,
-    exportWithBackground,
-    exportDarkMode,
-    exportScale,
-    embedScene,
-  ]);
-
-  return (
-    <div className="ImageExportModal">
-      <h3>{t("imageExportDialog.header")}</h3>
-      <div className="ImageExportModal__preview">
-        <div className="ImageExportModal__preview__canvas" ref={previewRef}>
-          {renderError && <ErrorCanvasPreview />}
-        </div>
-        <div className="ImageExportModal__preview__filename">
-          {!nativeFileSystemSupported && (
-            <input
-              type="text"
-              className="TextInput"
-              value={projectName}
-              style={{ width: "30ch" }}
-              disabled={
-                typeof appProps.name !== "undefined" ||
-                appStateSnapshot.viewModeEnabled
-              }
-              onChange={(event) => {
-                setProjectName(event.target.value);
-                actionManager.executeAction(
-                  actionChangeProjectName,
-                  "ui",
-                  event.target.value,
-                );
-              }}
-            />
-          )}
-        </div>
-      </div>
-      <div className="ImageExportModal__settings">
-        <h3>{t("imageExportDialog.header")}</h3>
-        {hasSelection && (
-          <ExportSetting
-            label={t("imageExportDialog.label.onlySelected")}
-            name="exportOnlySelected"
-          >
-            <Switch
-              name="exportOnlySelected"
-              checked={exportSelectionOnly}
-              onChange={(checked) => {
-                setExportSelectionOnly(checked);
-              }}
-            />
-          </ExportSetting>
-        )}
-        <ExportSetting
-          label={t("imageExportDialog.label.withBackground")}
-          name="exportBackgroundSwitch"
-        >
-          <Switch
-            name="exportBackgroundSwitch"
-            checked={exportWithBackground}
-            onChange={(checked) => {
-              setExportWithBackground(checked);
-              actionManager.executeAction(
-                actionChangeExportBackground,
-                "ui",
-                checked,
-              );
-            }}
-          />
-        </ExportSetting>
-        {supportsContextFilters && (
-          <ExportSetting
-            label={t("imageExportDialog.label.darkMode")}
-            name="exportDarkModeSwitch"
-          >
-            <Switch
-              name="exportDarkModeSwitch"
-              checked={exportDarkMode}
-              onChange={(checked) => {
-                setExportDarkMode(checked);
-                actionManager.executeAction(
-                  actionExportWithDarkMode,
-                  "ui",
-                  checked,
-                );
-              }}
-            />
-          </ExportSetting>
-        )}
-        <ExportSetting
-          label={t("imageExportDialog.label.embedScene")}
-          tooltip={t("imageExportDialog.tooltip.embedScene")}
-          name="exportEmbedSwitch"
-        >
-          <Switch
-            name="exportEmbedSwitch"
-            checked={embedScene}
-            onChange={(checked) => {
-              setEmbedScene(checked);
-              actionManager.executeAction(
-                actionChangeExportEmbedScene,
-                "ui",
-                checked,
-              );
-            }}
-          />
-        </ExportSetting>
-        <ExportSetting
-          label={t("imageExportDialog.label.scale")}
-          name="exportScale"
-        >
-          <RadioGroup
-            name="exportScale"
-            value={exportScale}
-            onChange={(scale) => {
-              setExportScale(scale);
-              actionManager.executeAction(actionChangeExportScale, "ui", scale);
-            }}
-            choices={EXPORT_SCALES.map((scale) => ({
-              value: scale,
-              label: `${scale}\u00d7`,
-            }))}
-          />
-        </ExportSetting>
-
-        <div className="ImageExportModal__settings__buttons">
-          <FilledButton
-            className="ImageExportModal__settings__buttons__button"
-            label={t("imageExportDialog.title.exportToPng")}
-            onClick={() =>
-              onExportImage(EXPORT_IMAGE_TYPES.png, exportedElements, {
-                exportingFrame,
-              })
-            }
-            startIcon={downloadIcon}
-          >
-            {t("imageExportDialog.button.exportToPng")}
-          </FilledButton>
-          <FilledButton
-            className="ImageExportModal__settings__buttons__button"
-            label={t("imageExportDialog.title.exportToSvg")}
-            onClick={() =>
-              onExportImage(EXPORT_IMAGE_TYPES.svg, exportedElements, {
-                exportingFrame,
-              })
-            }
-            startIcon={downloadIcon}
-          >
-            {t("imageExportDialog.button.exportToSvg")}
-          </FilledButton>
-          {(probablySupportsClipboardBlob || isFirefox) && (
-            <FilledButton
-              className="ImageExportModal__settings__buttons__button"
-              label={t("imageExportDialog.title.copyPngToClipboard")}
-              onClick={() =>
-                onExportImage(EXPORT_IMAGE_TYPES.clipboard, exportedElements, {
-                  exportingFrame,
-                })
-              }
-              startIcon={copyIcon}
-            >
-              {t("imageExportDialog.button.copyPngToClipboard")}
-            </FilledButton>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-type ExportSettingProps = {
-  label: string;
-  children: React.ReactNode;
-  tooltip?: string;
-  name?: string;
-};
-
-const ExportSetting = ({
-  label,
-  children,
-  tooltip,
-  name,
-}: ExportSettingProps) => {
-  return (
-    <div className="ImageExportModal__settings__setting" title={label}>
-      <label
-        htmlFor={name}
-        className="ImageExportModal__settings__setting__label"
-      >
-        {label}
-        {tooltip && (
-          <Tooltip label={tooltip} long={true}>
-            {helpIcon}
-          </Tooltip>
-        )}
-      </label>
-      <div className="ImageExportModal__settings__setting__content">
-        {children}
-      </div>
-    </div>
-  );
-};
-
-export const ImageExportDialog = ({
-  elements,
-  appState,
-  files,
-  actionManager,
-  onExportImage,
-  onCloseRequest,
-}: {
-  appState: UIAppState;
-  elements: readonly NonDeletedExcalidrawElement[];
-  files: BinaryFiles;
-  actionManager: ActionManager;
-  onExportImage: AppClassProperties["onExportImage"];
-  onCloseRequest: () => void;
-}) => {
-  // we need to take a snapshot so that the exported state can't be modified
-  // while the dialog is open
-  const [{ appStateSnapshot, elementsSnapshot }] = useState(() => {
-    return {
-      appStateSnapshot: cloneJSON(appState),
-      elementsSnapshot: cloneJSON(elements),
-    };
-  });
-
-  return (
-    <Dialog onCloseRequest={onCloseRequest} size="wide" title={false}>
-      <ImageExportModal
-        elementsSnapshot={elementsSnapshot}
-        appStateSnapshot={appStateSnapshot}
-        files={files}
-        actionManager={actionManager}
-        onExportImage={onExportImage}
-      />
-    </Dialog>
-  );
-};

packages/excalidraw/components/InlineIcon.tsx

@@ -1,15 +0,0 @@
-export const InlineIcon = ({ icon }: { icon: JSX.Element }) => {
-  return (
-    <span
-      style={{
-        width: "1em",
-        margin: "0 0.5ex 0 0.5ex",
-        display: "inline-block",
-        lineHeight: 0,
-        verticalAlign: "middle",
-      }}
-    >
-      {icon}
-    </span>
-  );
-};

packages/excalidraw/components/LaserPointerButton.tsx

@@ -1,41 +0,0 @@
-import "./ToolIcon.scss";
-
-import clsx from "clsx";
-import { ToolButtonSize } from "./ToolButton";
-import { laserPointerToolIcon } from "./icons";
-
-type LaserPointerIconProps = {
-  title?: string;
-  name?: string;
-  checked: boolean;
-  onChange?(): void;
-  isMobile?: boolean;
-};
-
-const DEFAULT_SIZE: ToolButtonSize = "small";
-
-export const LaserPointerButton = (props: LaserPointerIconProps) => {
-  return (
-    <label
-      className={clsx(
-        "ToolIcon ToolIcon__LaserPointer",
-        `ToolIcon_size_${DEFAULT_SIZE}`,
-        {
-          "is-mobile": props.isMobile,
-        },
-      )}
-      title={`${props.title}`}
-    >
-      <input
-        className="ToolIcon_type_checkbox"
-        type="checkbox"
-        name={props.name}
-        onChange={props.onChange}
-        checked={props.checked}
-        aria-label={props.title}
-        data-testid="toolbar-LaserPointer"
-      />
-      <div className="ToolIcon__icon">{laserPointerToolIcon}</div>
-    </label>
-  );
-};

packages/excalidraw/components/MagicButton.tsx

@@ -1,38 +0,0 @@
-import "./ToolIcon.scss";
-
-import clsx from "clsx";
-import { ToolButtonSize } from "./ToolButton";
-
-const DEFAULT_SIZE: ToolButtonSize = "small";
-
-export const ElementCanvasButton = (props: {
-  title?: string;
-  icon: JSX.Element;
-  name?: string;
-  checked: boolean;
-  onChange?(): void;
-  isMobile?: boolean;
-}) => {
-  return (
-    <label
-      className={clsx(
-        "ToolIcon ToolIcon__MagicButton",
-        `ToolIcon_size_${DEFAULT_SIZE}`,
-        {
-          "is-mobile": props.isMobile,
-        },
-      )}
-      title={`${props.title}`}
-    >
-      <input
-        className="ToolIcon_type_checkbox"
-        type="checkbox"
-        name={props.name}
-        onChange={props.onChange}
-        checked={props.checked}
-        aria-label={props.title}
-      />
-      <div className="ToolIcon__icon">{props.icon}</div>
-    </label>
-  );
-};

packages/excalidraw/components/MagicSettings.scss

@@ -1,18 +0,0 @@
-.excalidraw {
-  .MagicSettings {
-    .Island {
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-    }
-  }
-
-  .MagicSettings-confirm {
-    padding: 0.5rem 1rem;
-  }
-
-  .MagicSettings__confirm {
-    margin-top: 2rem;
-    margin-right: auto;
-  }
-}

packages/excalidraw/components/MagicSettings.tsx

@@ -1,160 +0,0 @@
-import { useState } from "react";
-import { Dialog } from "./Dialog";
-import { TextField } from "./TextField";
-import { MagicIcon, OpenAIIcon } from "./icons";
-import { FilledButton } from "./FilledButton";
-import { CheckboxItem } from "./CheckboxItem";
-import { KEYS } from "../keys";
-import { useUIAppState } from "../context/ui-appState";
-import { InlineIcon } from "./InlineIcon";
-import { Paragraph } from "./Paragraph";
-
-import "./MagicSettings.scss";
-import TTDDialogTabs from "./TTDDialog/TTDDialogTabs";
-import { TTDDialogTab } from "./TTDDialog/TTDDialogTab";
-
-export const MagicSettings = (props: {
-  openAIKey: string | null;
-  isPersisted: boolean;
-  onChange: (key: string, shouldPersist: boolean) => void;
-  onConfirm: (key: string, shouldPersist: boolean) => void;
-  onClose: () => void;
-}) => {
-  const [keyInputValue, setKeyInputValue] = useState(props.openAIKey || "");
-  const [shouldPersist, setShouldPersist] = useState<boolean>(
-    props.isPersisted,
-  );
-
-  const appState = useUIAppState();
-
-  const onConfirm = () => {
-    props.onConfirm(keyInputValue.trim(), shouldPersist);
-  };
-
-  if (appState.openDialog?.name !== "settings") {
-    return null;
-  }
-
-  return (
-    <Dialog
-      onCloseRequest={() => {
-        props.onClose();
-        props.onConfirm(keyInputValue.trim(), shouldPersist);
-      }}
-      title={
-        <div style={{ display: "flex" }}>
-          Wireframe to Code (AI){" "}
-          <div
-            style={{
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "0.1rem 0.5rem",
-              marginLeft: "1rem",
-              fontSize: 14,
-              borderRadius: "12px",
-              color: "#000",
-              background: "pink",
-            }}
-          >
-            Experimental
-          </div>
-        </div>
-      }
-      className="MagicSettings"
-      autofocus={false}
-    >
-      {/*  <h2
-        style={{
-          margin: 0,
-          fontSize: "1.25rem",
-          paddingLeft: "2.5rem",
-        }}
-      >
-        AI Settings
-      </h2> */}
-      <TTDDialogTabs dialog="settings" tab={appState.openDialog.tab}>
-        {/* <TTDDialogTabTriggers>
-          <TTDDialogTabTrigger tab="text-to-diagram">
-            <InlineIcon icon={brainIcon} /> Text to diagram
-          </TTDDialogTabTrigger>
-          <TTDDialogTabTrigger tab="diagram-to-code">
-            <InlineIcon icon={MagicIcon} /> Wireframe to code
-          </TTDDialogTabTrigger>
-        </TTDDialogTabTriggers> */}
-        {/* <TTDDialogTab className="ttd-dialog-content" tab="text-to-diagram">
-          TODO
-        </TTDDialogTab> */}
-        <TTDDialogTab
-          //  className="ttd-dialog-content"
-          tab="diagram-to-code"
-        >
-          <Paragraph>
-            For the diagram-to-code feature we use{" "}
-            <InlineIcon icon={OpenAIIcon} />
-            OpenAI.
-          </Paragraph>
-          <Paragraph>
-            While the OpenAI API is in beta, its use is strictly limited — as
-            such we require you use your own API key. You can create an{" "}
-            <a
-              href="https://platform.openai.com/login?launch"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              OpenAI account
-            </a>
-            , add a small credit (5 USD minimum), and{" "}
-            <a
-              href="https://platform.openai.com/api-keys"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              generate your own API key
-            </a>
-            .
-          </Paragraph>
-          <Paragraph>
-            Your OpenAI key does not leave the browser, and you can also set
-            your own limit in your OpenAI account dashboard if needed.
-          </Paragraph>
-          <TextField
-            isRedacted
-            value={keyInputValue}
-            placeholder="Paste your API key here"
-            label="OpenAI API key"
-            onChange={(value) => {
-              setKeyInputValue(value);
-              props.onChange(value.trim(), shouldPersist);
-            }}
-            selectOnRender
-            onKeyDown={(event) => event.key === KEYS.ENTER && onConfirm()}
-          />
-          <Paragraph>
-            By default, your API token is not persisted anywhere so you'll need
-            to insert it again after reload. But, you can persist locally in
-            your browser below.
-          </Paragraph>
-
-          <CheckboxItem checked={shouldPersist} onChange={setShouldPersist}>
-            Persist API key in browser storage
-          </CheckboxItem>
-
-          <Paragraph>
-            Once API key is set, you can use the <InlineIcon icon={MagicIcon} />{" "}
-            tool to wrap your elements in a frame that will then allow you to
-            turn it into code. This dialog can be accessed using the{" "}
-            <b>AI Settings</b> <InlineIcon icon={OpenAIIcon} />.
-          </Paragraph>
-
-          <FilledButton
-            className="MagicSettings__confirm"
-            size="large"
-            label="Confirm"
-            onClick={onConfirm}
-          />
-        </TTDDialogTab>
-      </TTDDialogTabs>
-    </Dialog>
-  );
-};

packages/excalidraw/components/Paragraph.tsx

@@ -1,10 +0,0 @@
-export const Paragraph = (props: {
-  children: React.ReactNode;
-  style?: React.CSSProperties;
-}) => {
-  return (
-    <p className="excalidraw__paragraph" style={props.style}>
-      {props.children}
-    </p>
-  );
-};

packages/excalidraw/components/SVGLayer.scss

@@ -1,22 +0,0 @@
-.excalidraw {
-  .SVGLayer {
-    pointer-events: none;
-    width: 100vw;
-    height: 100vh;
-    position: fixed;
-    top: 0;
-    left: 0;
-
-    z-index: 2;
-
-    & svg {
-      image-rendering: auto;
-      overflow: visible;
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-    }
-  }
-}

packages/excalidraw/components/SVGLayer.tsx

@@ -1,33 +0,0 @@
-import { useEffect, useRef } from "react";
-import { Trail } from "../animated-trail";
-
-import "./SVGLayer.scss";
-
-type SVGLayerProps = {
-  trails: Trail[];
-};
-
-export const SVGLayer = ({ trails }: SVGLayerProps) => {
-  const svgRef = useRef<SVGSVGElement | null>(null);
-
-  useEffect(() => {
-    if (svgRef.current) {
-      for (const trail of trails) {
-        trail.start(svgRef.current);
-      }
-    }
-
-    return () => {
-      for (const trail of trails) {
-        trail.stop();
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, trails);
-
-  return (
-    <div className="SVGLayer">
-      <svg ref={svgRef} />
-    </div>
-  );
-};

packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.scss

@@ -1,10 +0,0 @@
-.excalidraw {
-  .dialog-mermaid {
-    &-title {
-      margin-block: 0.25rem;
-      font-size: 1.25rem;
-      font-weight: 700;
-      padding-inline: 2.5rem;
-    }
-  }
-}

packages/excalidraw/components/TTDDialog/MermaidToExcalidraw.tsx

@@ -1,128 +0,0 @@
-import { useState, useRef, useEffect, useDeferredValue } from "react";
-import { BinaryFiles } from "../../types";
-import { useApp } from "../App";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { ArrowRightIcon } from "../icons";
-import "./MermaidToExcalidraw.scss";
-import { t } from "../../i18n";
-import Trans from "../Trans";
-import {
-  MermaidToExcalidrawLibProps,
-  convertMermaidToExcalidraw,
-  insertToEditor,
-  saveMermaidDataToStorage,
-} from "./common";
-import { TTDDialogPanels } from "./TTDDialogPanels";
-import { TTDDialogPanel } from "./TTDDialogPanel";
-import { TTDDialogInput } from "./TTDDialogInput";
-import { TTDDialogOutput } from "./TTDDialogOutput";
-import { EditorLocalStorage } from "../../data/EditorLocalStorage";
-import { EDITOR_LS_KEYS } from "../../constants";
-import { debounce } from "../../utils";
-import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
-
-const MERMAID_EXAMPLE =
-  "flowchart TD\n A[Christmas] -->|Get money| B(Go shopping)\n B --> C{Let me think}\n C -->|One| D[Laptop]\n C -->|Two| E[iPhone]\n C -->|Three| F[Car]";
-
-const debouncedSaveMermaidDefinition = debounce(saveMermaidDataToStorage, 300);
-
-const MermaidToExcalidraw = ({
-  mermaidToExcalidrawLib,
-}: {
-  mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
-}) => {
-  const [text, setText] = useState(
-    () =>
-      EditorLocalStorage.get<string>(EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW) ||
-      MERMAID_EXAMPLE,
-  );
-  const deferredText = useDeferredValue(text.trim());
-  const [error, setError] = useState<Error | null>(null);
-
-  const canvasRef = useRef<HTMLDivElement>(null);
-  const data = useRef<{
-    elements: readonly NonDeletedExcalidrawElement[];
-    files: BinaryFiles | null;
-  }>({ elements: [], files: null });
-
-  const app = useApp();
-
-  useEffect(() => {
-    convertMermaidToExcalidraw({
-      canvasRef,
-      data,
-      mermaidToExcalidrawLib,
-      setError,
-      mermaidDefinition: deferredText,
-    }).catch(() => {});
-
-    debouncedSaveMermaidDefinition(deferredText);
-  }, [deferredText, mermaidToExcalidrawLib]);
-
-  useEffect(
-    () => () => {
-      debouncedSaveMermaidDefinition.flush();
-    },
-    [],
-  );
-
-  const onInsertToEditor = () => {
-    insertToEditor({
-      app,
-      data,
-      text,
-      shouldSaveMermaidDataToStorage: true,
-    });
-  };
-
-  return (
-    <>
-      <div className="ttd-dialog-desc">
-        <Trans
-          i18nKey="mermaid.description"
-          flowchartLink={(el) => (
-            <a href="https://mermaid.js.org/syntax/flowchart.html">{el}</a>
-          )}
-          sequenceLink={(el) => (
-            <a href="https://mermaid.js.org/syntax/sequenceDiagram.html">
-              {el}
-            </a>
-          )}
-          classLink={(el) => (
-            <a href="https://mermaid.js.org/syntax/classDiagram.html">{el}</a>
-          )}
-        />
-      </div>
-      <TTDDialogPanels>
-        <TTDDialogPanel label={t("mermaid.syntax")}>
-          <TTDDialogInput
-            input={text}
-            placeholder={"Write Mermaid diagram defintion here..."}
-            onChange={(event) => setText(event.target.value)}
-            onKeyboardSubmit={() => {
-              onInsertToEditor();
-            }}
-          />
-        </TTDDialogPanel>
-        <TTDDialogPanel
-          label={t("mermaid.preview")}
-          panelAction={{
-            action: () => {
-              onInsertToEditor();
-            },
-            label: t("mermaid.button"),
-            icon: ArrowRightIcon,
-          }}
-          renderSubmitShortcut={() => <TTDDialogSubmitShortcut />}
-        >
-          <TTDDialogOutput
-            canvasRef={canvasRef}
-            loaded={mermaidToExcalidrawLib.loaded}
-            error={error}
-          />
-        </TTDDialogPanel>
-      </TTDDialogPanels>
-    </>
-  );
-};
-export default MermaidToExcalidraw;

packages/excalidraw/components/TTDDialog/TTDDialog.scss

@@ -1,315 +0,0 @@
-@import "../../css/variables.module.scss";
-
-$verticalBreakpoint: 861px;
-
-.excalidraw {
-  .Modal.Dialog.ttd-dialog {
-    padding: 1.25rem;
-
-    &.Dialog--fullscreen {
-      margin-top: 0;
-    }
-
-    .Island {
-      padding-inline: 0 !important;
-      height: 100%;
-      display: flex;
-      flex-direction: column;
-      flex: 1 1 auto;
-      box-shadow: none;
-    }
-
-    .Modal__content {
-      height: auto;
-      max-height: 100%;
-
-      @media screen and (min-width: $verticalBreakpoint) {
-        max-height: 750px;
-        height: 100%;
-      }
-    }
-
-    .Dialog__content {
-      flex: 1 1 auto;
-    }
-  }
-
-  .ttd-dialog-desc {
-    font-size: 15px;
-    font-style: italic;
-    font-weight: 500;
-    margin-bottom: 1.5rem;
-  }
-
-  .ttd-dialog-tabs-root {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .ttd-dialog-tab-trigger {
-    color: var(--color-on-surface);
-    font-size: 0.875rem;
-    margin: 0;
-    padding: 0 1rem;
-    background-color: transparent;
-    border: 0;
-    height: 2.875rem;
-    font-weight: 600;
-    font-family: inherit;
-    letter-spacing: 0.4px;
-
-    &[data-state="active"] {
-      border-bottom: 2px solid var(--color-primary);
-    }
-  }
-
-  .ttd-dialog-triggers {
-    border-bottom: 1px solid var(--color-surface-high);
-    margin-bottom: 1.5rem;
-    padding-inline: 2.5rem;
-  }
-
-  .ttd-dialog-content {
-    padding-inline: 2.5rem;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-
-    &[hidden] {
-      display: none;
-    }
-  }
-
-  .ttd-dialog-input {
-    width: auto;
-    height: 10rem;
-    resize: none;
-    border-radius: var(--border-radius-lg);
-    border: 1px solid var(--dialog-border-color);
-    white-space: pre-wrap;
-    padding: 0.85rem;
-    box-sizing: border-box;
-    font-family: monospace;
-
-    @media screen and (min-width: $verticalBreakpoint) {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .ttd-dialog-output-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.85rem;
-    box-sizing: border-box;
-    flex-grow: 1;
-    position: relative;
-
-    background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==")
-      left center;
-    border-radius: var(--border-radius-lg);
-    border: 1px solid var(--dialog-border-color);
-
-    height: 400px;
-    width: auto;
-
-    @media screen and (min-width: $verticalBreakpoint) {
-      width: 100%;
-      // acts as min-height
-      height: 200px;
-    }
-
-    canvas {
-      max-width: 100%;
-      max-height: 100%;
-    }
-  }
-
-  .ttd-dialog-output-canvas-container {
-    display: flex;
-    width: 100%;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    flex-grow: 1;
-  }
-
-  .ttd-dialog-output-error {
-    color: red;
-    font-weight: 800;
-    font-size: 30px;
-    word-break: break-word;
-    overflow: auto;
-    max-height: 100%;
-    height: 100%;
-    width: 100%;
-    text-align: center;
-    position: absolute;
-    z-index: 10;
-
-    p {
-      font-weight: 500;
-      font-family: Cascadia;
-      text-align: left;
-      white-space: pre-wrap;
-      font-size: 0.875rem;
-      padding: 0 10px;
-    }
-  }
-
-  .ttd-dialog-panels {
-    height: 100%;
-
-    @media screen and (min-width: $verticalBreakpoint) {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 4rem;
-    }
-  }
-
-  .ttd-dialog-panel {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    &__header {
-      display: flex;
-      margin: 0px 4px 4px 4px;
-      align-items: center;
-      gap: 1rem;
-
-      label {
-        font-size: 14px;
-        font-style: normal;
-        font-weight: 600;
-      }
-    }
-
-    &:first-child {
-      .ttd-dialog-panel-button-container:not(.invisible) {
-        margin-bottom: 4rem;
-      }
-    }
-
-    @media screen and (min-width: $verticalBreakpoint) {
-      .ttd-dialog-panel-button-container:not(.invisible) {
-        margin-bottom: 0.5rem !important;
-      }
-    }
-
-    textarea {
-      height: 100%;
-      resize: none;
-      border-radius: var(--border-radius-lg);
-      border: 1px solid var(--dialog-border-color);
-      white-space: pre-wrap;
-      padding: 0.85rem;
-      box-sizing: border-box;
-      width: 100%;
-      font-family: monospace;
-
-      @media screen and (max-width: $verticalBreakpoint) {
-        width: auto;
-        height: 10rem;
-      }
-    }
-  }
-
-  .ttd-dialog-panel-button-container {
-    margin-top: 1rem;
-    margin-bottom: 0.5rem;
-
-    &.invisible {
-      .ttd-dialog-panel-button {
-        display: none;
-
-        @media screen and (min-width: $verticalBreakpoint) {
-          display: block;
-          visibility: hidden;
-        }
-      }
-    }
-  }
-
-  .ttd-dialog-panel-button {
-    &.excalidraw-button {
-      font-family: inherit;
-      font-weight: 600;
-      height: 2.5rem;
-
-      font-size: 12px;
-      color: $oc-white;
-      background-color: var(--color-primary);
-      width: 100%;
-
-      &:hover {
-        background-color: var(--color-primary-darker);
-      }
-      &:active {
-        background-color: var(--color-primary-darkest);
-      }
-
-      &:disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-
-        &:hover {
-          background-color: var(--color-primary);
-        }
-      }
-
-      @media screen and (min-width: $verticalBreakpoint) {
-        width: auto;
-        min-width: 7.5rem;
-      }
-
-      @at-root .excalidraw.theme--dark#{&} {
-        color: var(--color-gray-100);
-      }
-    }
-
-    position: relative;
-
-    div {
-      display: contents;
-
-      &.invisible {
-        visibility: hidden;
-      }
-
-      &.Spinner {
-        display: flex !important;
-        position: absolute;
-        inset: 0;
-
-        --spinner-color: white;
-
-        @at-root .excalidraw.theme--dark#{&} {
-          --spinner-color: var(--color-gray-100);
-        }
-      }
-
-      span {
-        padding-left: 0.5rem;
-        display: flex;
-      }
-    }
-  }
-
-  .ttd-dialog-submit-shortcut {
-    margin-inline-start: 0.5rem;
-    font-size: 0.625rem;
-    opacity: 0.6;
-    display: flex;
-    gap: 0.125rem;
-
-    &__key {
-      border: 1px solid gray;
-      padding: 2px 3px;
-      border-radius: 4px;
-    }
-  }
-}

packages/excalidraw/components/TTDDialog/TTDDialog.tsx

@@ -1,393 +0,0 @@
-import { Dialog } from "../Dialog";
-import { useApp, useExcalidrawSetAppState } from "../App";
-import MermaidToExcalidraw from "./MermaidToExcalidraw";
-import TTDDialogTabs from "./TTDDialogTabs";
-import { ChangeEventHandler, useEffect, useRef, useState } from "react";
-import { useUIAppState } from "../../context/ui-appState";
-import { withInternalFallback } from "../hoc/withInternalFallback";
-import { TTDDialogTabTriggers } from "./TTDDialogTabTriggers";
-import { TTDDialogTabTrigger } from "./TTDDialogTabTrigger";
-import { TTDDialogTab } from "./TTDDialogTab";
-import { t } from "../../i18n";
-import { TTDDialogInput } from "./TTDDialogInput";
-import { TTDDialogOutput } from "./TTDDialogOutput";
-import { TTDDialogPanel } from "./TTDDialogPanel";
-import { TTDDialogPanels } from "./TTDDialogPanels";
-import {
-  MermaidToExcalidrawLibProps,
-  convertMermaidToExcalidraw,
-  insertToEditor,
-  saveMermaidDataToStorage,
-} from "./common";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { BinaryFiles } from "../../types";
-import { ArrowRightIcon } from "../icons";
-
-import "./TTDDialog.scss";
-import { isFiniteNumber } from "../../utils";
-import { atom, useAtom } from "jotai";
-import { trackEvent } from "../../analytics";
-import { InlineIcon } from "../InlineIcon";
-import { TTDDialogSubmitShortcut } from "./TTDDialogSubmitShortcut";
-
-const MIN_PROMPT_LENGTH = 3;
-const MAX_PROMPT_LENGTH = 1000;
-
-const rateLimitsAtom = atom<{
-  rateLimit: number;
-  rateLimitRemaining: number;
-} | null>(null);
-
-const ttdGenerationAtom = atom<{
-  generatedResponse: string | null;
-  prompt: string | null;
-} | null>(null);
-
-type OnTestSubmitRetValue = {
-  rateLimit?: number | null;
-  rateLimitRemaining?: number | null;
-} & (
-  | { generatedResponse: string | undefined; error?: null | undefined }
-  | {
-      error: Error;
-      generatedResponse?: null | undefined;
-    }
-);
-
-export const TTDDialog = (
-  props:
-    | {
-        onTextSubmit(value: string): Promise<OnTestSubmitRetValue>;
-      }
-    | { __fallback: true },
-) => {
-  const appState = useUIAppState();
-
-  if (appState.openDialog?.name !== "ttd") {
-    return null;
-  }
-
-  return <TTDDialogBase {...props} tab={appState.openDialog.tab} />;
-};
-
-/**
- * Text to diagram (TTD) dialog
- */
-export const TTDDialogBase = withInternalFallback(
-  "TTDDialogBase",
-  ({
-    tab,
-    ...rest
-  }: {
-    tab: "text-to-diagram" | "mermaid";
-  } & (
-    | {
-        onTextSubmit(value: string): Promise<OnTestSubmitRetValue>;
-      }
-    | { __fallback: true }
-  )) => {
-    const app = useApp();
-    const setAppState = useExcalidrawSetAppState();
-
-    const someRandomDivRef = useRef<HTMLDivElement>(null);
-
-    const [ttdGeneration, setTtdGeneration] = useAtom(ttdGenerationAtom);
-
-    const [text, setText] = useState(ttdGeneration?.prompt ?? "");
-
-    const prompt = text.trim();
-
-    const handleTextChange: ChangeEventHandler<HTMLTextAreaElement> = (
-      event,
-    ) => {
-      setText(event.target.value);
-      setTtdGeneration((s) => ({
-        generatedResponse: s?.generatedResponse ?? null,
-        prompt: event.target.value,
-      }));
-    };
-
-    const [onTextSubmitInProgess, setOnTextSubmitInProgess] = useState(false);
-    const [rateLimits, setRateLimits] = useAtom(rateLimitsAtom);
-
-    const onGenerate = async () => {
-      if (
-        prompt.length > MAX_PROMPT_LENGTH ||
-        prompt.length < MIN_PROMPT_LENGTH ||
-        onTextSubmitInProgess ||
-        rateLimits?.rateLimitRemaining === 0 ||
-        // means this is not a text-to-diagram dialog (needed for TS only)
-        "__fallback" in rest
-      ) {
-        if (prompt.length < MIN_PROMPT_LENGTH) {
-          setError(
-            new Error(
-              `Prompt is too short (min ${MIN_PROMPT_LENGTH} characters)`,
-            ),
-          );
-        }
-        if (prompt.length > MAX_PROMPT_LENGTH) {
-          setError(
-            new Error(
-              `Prompt is too long (max ${MAX_PROMPT_LENGTH} characters)`,
-            ),
-          );
-        }
-
-        return;
-      }
-
-      try {
-        setOnTextSubmitInProgess(true);
-
-        trackEvent("ai", "generate", "ttd");
-
-        const { generatedResponse, error, rateLimit, rateLimitRemaining } =
-          await rest.onTextSubmit(prompt);
-
-        if (typeof generatedResponse === "string") {
-          setTtdGeneration((s) => ({
-            generatedResponse,
-            prompt: s?.prompt ?? null,
-          }));
-        }
-
-        if (isFiniteNumber(rateLimit) && isFiniteNumber(rateLimitRemaining)) {
-          setRateLimits({ rateLimit, rateLimitRemaining });
-        }
-
-        if (error) {
-          setError(error);
-          return;
-        }
-        if (!generatedResponse) {
-          setError(new Error("Generation failed"));
-          return;
-        }
-
-        try {
-          await convertMermaidToExcalidraw({
-            canvasRef: someRandomDivRef,
-            data,
-            mermaidToExcalidrawLib,
-            setError,
-            mermaidDefinition: generatedResponse,
-          });
-          trackEvent("ai", "mermaid parse success", "ttd");
-        } catch (error: any) {
-          console.info(
-            `%cTTD mermaid render errror: ${error.message}`,
-            "color: red",
-          );
-          console.info(
-            `>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>\nTTD mermaid definition render errror: ${error.message}`,
-            "color: yellow",
-          );
-          trackEvent("ai", "mermaid parse failed", "ttd");
-          setError(
-            new Error(
-              "Generated an invalid diagram :(. You may also try a different prompt.",
-            ),
-          );
-        }
-      } catch (error: any) {
-        let message: string | undefined = error.message;
-        if (!message || message === "Failed to fetch") {
-          message = "Request failed";
-        }
-        setError(new Error(message));
-      } finally {
-        setOnTextSubmitInProgess(false);
-      }
-    };
-
-    const refOnGenerate = useRef(onGenerate);
-    refOnGenerate.current = onGenerate;
-
-    const [mermaidToExcalidrawLib, setMermaidToExcalidrawLib] =
-      useState<MermaidToExcalidrawLibProps>({
-        loaded: false,
-        api: import("@excalidraw/mermaid-to-excalidraw"),
-      });
-
-    useEffect(() => {
-      const fn = async () => {
-        await mermaidToExcalidrawLib.api;
-        setMermaidToExcalidrawLib((prev) => ({ ...prev, loaded: true }));
-      };
-      fn();
-    }, [mermaidToExcalidrawLib.api]);
-
-    const data = useRef<{
-      elements: readonly NonDeletedExcalidrawElement[];
-      files: BinaryFiles | null;
-    }>({ elements: [], files: null });
-
-    const [error, setError] = useState<Error | null>(null);
-
-    return (
-      <Dialog
-        className="ttd-dialog"
-        onCloseRequest={() => {
-          app.setOpenDialog(null);
-        }}
-        size={1200}
-        title={false}
-        {...rest}
-        autofocus={false}
-      >
-        <TTDDialogTabs dialog="ttd" tab={tab}>
-          {"__fallback" in rest && rest.__fallback ? (
-            <p className="dialog-mermaid-title">{t("mermaid.title")}</p>
-          ) : (
-            <TTDDialogTabTriggers>
-              <TTDDialogTabTrigger tab="text-to-diagram">
-                <div style={{ display: "flex", alignItems: "center" }}>
-                  {t("labels.textToDiagram")}
-                  <div
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      padding: "1px 6px",
-                      marginLeft: "10px",
-                      fontSize: 10,
-                      borderRadius: "12px",
-                      background: "pink",
-                      color: "#000",
-                    }}
-                  >
-                    AI Beta
-                  </div>
-                </div>
-              </TTDDialogTabTrigger>
-              <TTDDialogTabTrigger tab="mermaid">Mermaid</TTDDialogTabTrigger>
-            </TTDDialogTabTriggers>
-          )}
-
-          <TTDDialogTab className="ttd-dialog-content" tab="mermaid">
-            <MermaidToExcalidraw
-              mermaidToExcalidrawLib={mermaidToExcalidrawLib}
-            />
-          </TTDDialogTab>
-          {!("__fallback" in rest) && (
-            <TTDDialogTab className="ttd-dialog-content" tab="text-to-diagram">
-              <div className="ttd-dialog-desc">
-                Currently we use Mermaid as a middle step, so you'll get best
-                results if you describe a diagram, workflow, flow chart, and
-                similar.
-              </div>
-              <TTDDialogPanels>
-                <TTDDialogPanel
-                  label={t("labels.prompt")}
-                  panelAction={{
-                    action: onGenerate,
-                    label: "Generate",
-                    icon: ArrowRightIcon,
-                  }}
-                  onTextSubmitInProgess={onTextSubmitInProgess}
-                  panelActionDisabled={
-                    prompt.length > MAX_PROMPT_LENGTH ||
-                    rateLimits?.rateLimitRemaining === 0
-                  }
-                  renderTopRight={() => {
-                    if (!rateLimits) {
-                      return null;
-                    }
-
-                    return (
-                      <div
-                        className="ttd-dialog-rate-limit"
-                        style={{
-                          fontSize: 12,
-                          marginLeft: "auto",
-                          color:
-                            rateLimits.rateLimitRemaining === 0
-                              ? "var(--color-danger)"
-                              : undefined,
-                        }}
-                      >
-                        {rateLimits.rateLimitRemaining} requests left today
-                      </div>
-                    );
-                  }}
-                  renderSubmitShortcut={() => <TTDDialogSubmitShortcut />}
-                  renderBottomRight={() => {
-                    if (typeof ttdGeneration?.generatedResponse === "string") {
-                      return (
-                        <div
-                          className="excalidraw-link"
-                          style={{ marginLeft: "auto", fontSize: 14 }}
-                          onClick={() => {
-                            if (
-                              typeof ttdGeneration?.generatedResponse ===
-                              "string"
-                            ) {
-                              saveMermaidDataToStorage(
-                                ttdGeneration.generatedResponse,
-                              );
-                              setAppState({
-                                openDialog: { name: "ttd", tab: "mermaid" },
-                              });
-                            }
-                          }}
-                        >
-                          View as Mermaid
-                          <InlineIcon icon={ArrowRightIcon} />
-                        </div>
-                      );
-                    }
-                    const ratio = prompt.length / MAX_PROMPT_LENGTH;
-                    if (ratio > 0.8) {
-                      return (
-                        <div
-                          style={{
-                            marginLeft: "auto",
-                            fontSize: 12,
-                            fontFamily: "monospace",
-                            color:
-                              ratio > 1 ? "var(--color-danger)" : undefined,
-                          }}
-                        >
-                          Length: {prompt.length}/{MAX_PROMPT_LENGTH}
-                        </div>
-                      );
-                    }
-
-                    return null;
-                  }}
-                >
-                  <TTDDialogInput
-                    onChange={handleTextChange}
-                    input={text}
-                    placeholder={"Describe what you want to see..."}
-                    onKeyboardSubmit={() => {
-                      refOnGenerate.current();
-                    }}
-                  />
-                </TTDDialogPanel>
-                <TTDDialogPanel
-                  label="Preview"
-                  panelAction={{
-                    action: () => {
-                      console.info("Panel action clicked");
-                      insertToEditor({ app, data });
-                    },
-                    label: "Insert",
-                    icon: ArrowRightIcon,
-                  }}
-                >
-                  <TTDDialogOutput
-                    canvasRef={someRandomDivRef}
-                    error={error}
-                    loaded={mermaidToExcalidrawLib.loaded}
-                  />
-                </TTDDialogPanel>
-              </TTDDialogPanels>
-            </TTDDialogTab>
-          )}
-        </TTDDialogTabs>
-      </Dialog>
-    );
-  },
-);

packages/excalidraw/components/TTDDialog/TTDDialogInput.tsx

@@ -1,52 +0,0 @@
-import { ChangeEventHandler, useEffect, useRef } from "react";
-import { EVENT } from "../../constants";
-import { KEYS } from "../../keys";
-
-interface TTDDialogInputProps {
-  input: string;
-  placeholder: string;
-  onChange: ChangeEventHandler<HTMLTextAreaElement>;
-  onKeyboardSubmit?: () => void;
-}
-
-export const TTDDialogInput = ({
-  input,
-  placeholder,
-  onChange,
-  onKeyboardSubmit,
-}: TTDDialogInputProps) => {
-  const ref = useRef<HTMLTextAreaElement>(null);
-
-  const callbackRef = useRef(onKeyboardSubmit);
-  callbackRef.current = onKeyboardSubmit;
-
-  useEffect(() => {
-    if (!callbackRef.current) {
-      return;
-    }
-    const textarea = ref.current;
-    if (textarea) {
-      const handleKeyDown = (event: KeyboardEvent) => {
-        if (event[KEYS.CTRL_OR_CMD] && event.key === KEYS.ENTER) {
-          event.preventDefault();
-          callbackRef.current?.();
-        }
-      };
-      textarea.addEventListener(EVENT.KEYDOWN, handleKeyDown);
-      return () => {
-        textarea.removeEventListener(EVENT.KEYDOWN, handleKeyDown);
-      };
-    }
-  }, []);
-
-  return (
-    <textarea
-      className="ttd-dialog-input"
-      onChange={onChange}
-      value={input}
-      placeholder={placeholder}
-      autoFocus
-      ref={ref}
-    />
-  );
-};

packages/excalidraw/components/TTDDialog/TTDDialogOutput.tsx

@@ -1,39 +0,0 @@
-import Spinner from "../Spinner";
-
-const ErrorComp = ({ error }: { error: string }) => {
-  return (
-    <div
-      data-testid="ttd-dialog-output-error"
-      className="ttd-dialog-output-error"
-    >
-      Error! <p>{error}</p>
-    </div>
-  );
-};
-
-interface TTDDialogOutputProps {
-  error: Error | null;
-  canvasRef: React.RefObject<HTMLDivElement>;
-  loaded: boolean;
-}
-
-export const TTDDialogOutput = ({
-  error,
-  canvasRef,
-  loaded,
-}: TTDDialogOutputProps) => {
-  return (
-    <div className="ttd-dialog-output-wrapper">
-      {error && <ErrorComp error={error.message} />}
-      {loaded ? (
-        <div
-          ref={canvasRef}
-          style={{ opacity: error ? "0.15" : 1 }}
-          className="ttd-dialog-output-canvas-container"
-        />
-      ) : (
-        <Spinner size="2rem" />
-      )}
-    </div>
-  );
-};

packages/excalidraw/components/TTDDialog/TTDDialogPanel.tsx

@@ -1,63 +0,0 @@
-import { ReactNode } from "react";
-import { Button } from "../Button";
-import clsx from "clsx";
-import Spinner from "../Spinner";
-
-interface TTDDialogPanelProps {
-  label: string;
-  children: ReactNode;
-  panelAction?: {
-    label: string;
-    action: () => void;
-    icon?: ReactNode;
-  };
-  panelActionDisabled?: boolean;
-  onTextSubmitInProgess?: boolean;
-  renderTopRight?: () => ReactNode;
-  renderSubmitShortcut?: () => ReactNode;
-  renderBottomRight?: () => ReactNode;
-}
-
-export const TTDDialogPanel = ({
-  label,
-  children,
-  panelAction,
-  panelActionDisabled = false,
-  onTextSubmitInProgess,
-  renderTopRight,
-  renderSubmitShortcut,
-  renderBottomRight,
-}: TTDDialogPanelProps) => {
-  return (
-    <div className="ttd-dialog-panel">
-      <div className="ttd-dialog-panel__header">
-        <label>{label}</label>
-        {renderTopRight?.()}
-      </div>
-
-      {children}
-      <div
-        className={clsx("ttd-dialog-panel-button-container", {
-          invisible: !panelAction,
-        })}
-        style={{ display: "flex", alignItems: "center" }}
-      >
-        <Button
-          className="ttd-dialog-panel-button"
-          onSelect={panelAction ? panelAction.action : () => {}}
-          disabled={panelActionDisabled || onTextSubmitInProgess}
-        >
-          <div className={clsx({ invisible: onTextSubmitInProgess })}>
-            {panelAction?.label}
-            {panelAction?.icon && <span>{panelAction.icon}</span>}
-          </div>
-          {onTextSubmitInProgess && <Spinner />}
-        </Button>
-        {!panelActionDisabled &&
-          !onTextSubmitInProgess &&
-          renderSubmitShortcut?.()}
-        {renderBottomRight?.()}
-      </div>
-    </div>
-  );
-};

packages/excalidraw/components/TTDDialog/TTDDialogPanels.tsx

@@ -1,5 +0,0 @@
-import { ReactNode } from "react";
-
-export const TTDDialogPanels = ({ children }: { children: ReactNode }) => {
-  return <div className="ttd-dialog-panels">{children}</div>;
-};

packages/excalidraw/components/TTDDialog/TTDDialogSubmitShortcut.tsx

@@ -1,14 +0,0 @@
-import { getShortcutKey } from "../../utils";
-
-export const TTDDialogSubmitShortcut = () => {
-  return (
-    <div className="ttd-dialog-submit-shortcut">
-      <div className="ttd-dialog-submit-shortcut__key">
-        {getShortcutKey("CtrlOrCmd")}
-      </div>
-      <div className="ttd-dialog-submit-shortcut__key">
-        {getShortcutKey("Enter")}
-      </div>
-    </div>
-  );
-};

packages/excalidraw/components/TTDDialog/TTDDialogTab.tsx

@@ -1,17 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-
-export const TTDDialogTab = ({
-  tab,
-  children,
-  ...rest
-}: {
-  tab: string;
-  children: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>) => {
-  return (
-    <RadixTabs.Content {...rest} value={tab}>
-      {children}
-    </RadixTabs.Content>
-  );
-};
-TTDDialogTab.displayName = "TTDDialogTab";

packages/excalidraw/components/TTDDialog/TTDDialogTabTrigger.tsx

@@ -1,21 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-
-export const TTDDialogTabTrigger = ({
-  children,
-  tab,
-  onSelect,
-  ...rest
-}: {
-  children: React.ReactNode;
-  tab: string;
-  onSelect?: React.ReactEventHandler<HTMLButtonElement> | undefined;
-} & Omit<React.HTMLAttributes<HTMLButtonElement>, "onSelect">) => {
-  return (
-    <RadixTabs.Trigger value={tab} asChild onSelect={onSelect}>
-      <button type="button" className="ttd-dialog-tab-trigger" {...rest}>
-        {children}
-      </button>
-    </RadixTabs.Trigger>
-  );
-};
-TTDDialogTabTrigger.displayName = "TTDDialogTabTrigger";

packages/excalidraw/components/TTDDialog/TTDDialogTabTriggers.tsx

@@ -1,13 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-
-export const TTDDialogTabTriggers = ({
-  children,
-  ...rest
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) => {
-  return (
-    <RadixTabs.List className="ttd-dialog-triggers" {...rest}>
-      {children}
-    </RadixTabs.List>
-  );
-};
-TTDDialogTabTriggers.displayName = "TTDDialogTabTriggers";

packages/excalidraw/components/TTDDialog/TTDDialogTabs.tsx

@@ -1,64 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import { ReactNode, useRef } from "react";
-import { useExcalidrawSetAppState } from "../App";
-import { isMemberOf } from "../../utils";
-
-const TTDDialogTabs = (
-  props: {
-    children: ReactNode;
-  } & (
-    | { dialog: "ttd"; tab: "text-to-diagram" | "mermaid" }
-    | { dialog: "settings"; tab: "text-to-diagram" | "diagram-to-code" }
-  ),
-) => {
-  const setAppState = useExcalidrawSetAppState();
-
-  const rootRef = useRef<HTMLDivElement>(null);
-  const minHeightRef = useRef<number>(0);
-
-  return (
-    <RadixTabs.Root
-      ref={rootRef}
-      className="ttd-dialog-tabs-root"
-      value={props.tab}
-      onValueChange={(
-        // at least in test enviros, `tab` can be `undefined`
-        tab: string | undefined,
-      ) => {
-        if (!tab) {
-          return;
-        }
-        const modalContentNode =
-          rootRef.current?.closest<HTMLElement>(".Modal__content");
-        if (modalContentNode) {
-          const currHeight = modalContentNode.offsetHeight || 0;
-          if (currHeight > minHeightRef.current) {
-            minHeightRef.current = currHeight;
-            modalContentNode.style.minHeight = `min(${minHeightRef.current}px, 100%)`;
-          }
-        }
-        if (
-          props.dialog === "settings" &&
-          isMemberOf(["text-to-diagram", "diagram-to-code"], tab)
-        ) {
-          setAppState({
-            openDialog: { name: props.dialog, tab, source: "settings" },
-          });
-        } else if (
-          props.dialog === "ttd" &&
-          isMemberOf(["text-to-diagram", "mermaid"], tab)
-        ) {
-          setAppState({
-            openDialog: { name: props.dialog, tab },
-          });
-        }
-      }}
-    >
-      {props.children}
-    </RadixTabs.Root>
-  );
-};
-
-TTDDialogTabs.displayName = "TTDDialogTabs";
-
-export default TTDDialogTabs;

packages/excalidraw/components/TTDDialog/TTDDialogTrigger.tsx

@@ -1,34 +0,0 @@
-import { ReactNode } from "react";
-import { useTunnels } from "../../context/tunnels";
-import DropdownMenu from "../dropdownMenu/DropdownMenu";
-import { useExcalidrawSetAppState } from "../App";
-import { brainIcon } from "../icons";
-import { t } from "../../i18n";
-import { trackEvent } from "../../analytics";
-
-export const TTDDialogTrigger = ({
-  children,
-  icon,
-}: {
-  children?: ReactNode;
-  icon?: JSX.Element;
-}) => {
-  const { TTDDialogTriggerTunnel } = useTunnels();
-  const setAppState = useExcalidrawSetAppState();
-
-  return (
-    <TTDDialogTriggerTunnel.In>
-      <DropdownMenu.Item
-        onSelect={() => {
-          trackEvent("ai", "dialog open", "ttd");
-          setAppState({ openDialog: { name: "ttd", tab: "text-to-diagram" } });
-        }}
-        icon={icon ?? brainIcon}
-      >
-        {children ?? t("labels.textToDiagram")}
-        <DropdownMenu.Item.Badge>AI</DropdownMenu.Item.Badge>
-      </DropdownMenu.Item>
-    </TTDDialogTriggerTunnel.In>
-  );
-};
-TTDDialogTrigger.displayName = "TTDDialogTrigger";

packages/excalidraw/components/TTDDialog/common.ts

@@ -1,162 +0,0 @@
-import { MermaidOptions } from "@excalidraw/mermaid-to-excalidraw";
-import { MermaidToExcalidrawResult } from "@excalidraw/mermaid-to-excalidraw/dist/interfaces";
-import {
-  DEFAULT_EXPORT_PADDING,
-  DEFAULT_FONT_SIZE,
-  EDITOR_LS_KEYS,
-} from "../../constants";
-import { convertToExcalidrawElements, exportToCanvas } from "../../index";
-import { NonDeletedExcalidrawElement } from "../../element/types";
-import { AppClassProperties, BinaryFiles } from "../../types";
-import { canvasToBlob } from "../../data/blob";
-import { EditorLocalStorage } from "../../data/EditorLocalStorage";
-
-const resetPreview = ({
-  canvasRef,
-  setError,
-}: {
-  canvasRef: React.RefObject<HTMLDivElement>;
-  setError: (error: Error | null) => void;
-}) => {
-  const canvasNode = canvasRef.current;
-
-  if (!canvasNode) {
-    return;
-  }
-  const parent = canvasNode.parentElement;
-  if (!parent) {
-    return;
-  }
-  parent.style.background = "";
-  setError(null);
-  canvasNode.replaceChildren();
-};
-
-export interface MermaidToExcalidrawLibProps {
-  loaded: boolean;
-  api: Promise<{
-    parseMermaidToExcalidraw: (
-      definition: string,
-      options: MermaidOptions,
-    ) => Promise<MermaidToExcalidrawResult>;
-  }>;
-}
-
-interface ConvertMermaidToExcalidrawFormatProps {
-  canvasRef: React.RefObject<HTMLDivElement>;
-  mermaidToExcalidrawLib: MermaidToExcalidrawLibProps;
-  mermaidDefinition: string;
-  setError: (error: Error | null) => void;
-  data: React.MutableRefObject<{
-    elements: readonly NonDeletedExcalidrawElement[];
-    files: BinaryFiles | null;
-  }>;
-}
-
-export const convertMermaidToExcalidraw = async ({
-  canvasRef,
-  mermaidToExcalidrawLib,
-  mermaidDefinition,
-  setError,
-  data,
-}: ConvertMermaidToExcalidrawFormatProps) => {
-  const canvasNode = canvasRef.current;
-  const parent = canvasNode?.parentElement;
-
-  if (!canvasNode || !parent) {
-    return;
-  }
-
-  if (!mermaidDefinition) {
-    resetPreview({ canvasRef, setError });
-    return;
-  }
-
-  try {
-    const api = await mermaidToExcalidrawLib.api;
-
-    let ret;
-    try {
-      ret = await api.parseMermaidToExcalidraw(mermaidDefinition, {
-        fontSize: DEFAULT_FONT_SIZE,
-      });
-    } catch (err: any) {
-      ret = await api.parseMermaidToExcalidraw(
-        mermaidDefinition.replace(/"/g, "'"),
-        {
-          fontSize: DEFAULT_FONT_SIZE,
-        },
-      );
-    }
-    const { elements, files } = ret;
-    setError(null);
-
-    data.current = {
-      elements: convertToExcalidrawElements(elements, {
-        regenerateIds: true,
-      }),
-      files,
-    };
-
-    const canvas = await exportToCanvas({
-      elements: data.current.elements,
-      files: data.current.files,
-      exportPadding: DEFAULT_EXPORT_PADDING,
-      maxWidthOrHeight:
-        Math.max(parent.offsetWidth, parent.offsetHeight) *
-        window.devicePixelRatio,
-    });
-    // if converting to blob fails, there's some problem that will
-    // likely prevent preview and export (e.g. canvas too big)
-    await canvasToBlob(canvas);
-    parent.style.background = "var(--default-bg-color)";
-    canvasNode.replaceChildren(canvas);
-  } catch (err: any) {
-    parent.style.background = "var(--default-bg-color)";
-    if (mermaidDefinition) {
-      setError(err);
-    }
-
-    throw err;
-  }
-};
-
-export const saveMermaidDataToStorage = (mermaidDefinition: string) => {
-  EditorLocalStorage.set(
-    EDITOR_LS_KEYS.MERMAID_TO_EXCALIDRAW,
-    mermaidDefinition,
-  );
-};
-
-export const insertToEditor = ({
-  app,
-  data,
-  text,
-  shouldSaveMermaidDataToStorage,
-}: {
-  app: AppClassProperties;
-  data: React.MutableRefObject<{
-    elements: readonly NonDeletedExcalidrawElement[];
-    files: BinaryFiles | null;
-  }>;
-  text?: string;
-  shouldSaveMermaidDataToStorage?: boolean;
-}) => {
-  const { elements: newElements, files } = data.current;
-
-  if (!newElements.length) {
-    return;
-  }
-
-  app.addElementsFromPasteOrLibrary({
-    elements: newElements,
-    files,
-    position: "center",
-    fitToContent: true,
-  });
-  app.setOpenDialog(null);
-
-  if (shouldSaveMermaidDataToStorage && text) {
-    saveMermaidDataToStorage(text);
-  }
-};

packages/excalidraw/components/UserList.scss

@@ -1,136 +0,0 @@
-@import "../css/variables.module";
-
-.excalidraw {
-  .UserList {
-    pointer-events: none;
-    /*github corner*/
-    padding: var(--space-factor) var(--space-factor) var(--space-factor)
-      var(--space-factor);
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 0.625rem;
-
-    &:empty {
-      display: none;
-    }
-
-    box-sizing: border-box;
-
-    // can fit max 4 avatars (3 avatars + show more) in a column
-    max-height: 120px;
-
-    // can fit max 4 avatars (3 avatars + show more) when there's enough space
-    max-width: 120px;
-
-    // Tweak in 30px increments to fit more/fewer avatars in a row/column ^^
-
-    overflow: hidden;
-  }
-
-  .UserList > * {
-    pointer-events: var(--ui-pointerEvents);
-  }
-
-  .UserList_mobile {
-    padding: 0;
-    justify-content: normal;
-    margin: 0.5rem 0;
-    max-width: none;
-    max-height: none;
-  }
-
-  .UserList__more {
-    @include avatarStyles;
-    background-color: var(--color-gray-20);
-    border: 0 !important;
-    font-size: 0.5rem;
-    font-weight: 400;
-    flex-shrink: 0;
-    color: var(--color-gray-100);
-  }
-
-  .UserList__collaborator-follow-status-icon {
-    margin-left: auto;
-    flex: 0 0 auto;
-    width: 1rem;
-    display: flex;
-  }
-
-  --userlist-hint-bg-color: var(--color-gray-10);
-  --userlist-hint-heading-color: var(--color-gray-80);
-  --userlist-hint-text-color: var(--color-gray-60);
-  --userlist-collaborators-border-color: var(--color-gray-20);
-
-  &.theme--dark {
-    --userlist-hint-bg-color: var(--color-gray-90);
-    --userlist-hint-heading-color: var(--color-gray-30);
-    --userlist-hint-text-color: var(--color-gray-40);
-    --userlist-collaborators-border-color: var(--color-gray-80);
-  }
-
-  .UserList__collaborators {
-    position: static;
-    top: auto;
-    margin-top: 0;
-    max-height: 12rem;
-    overflow-y: auto;
-    padding: 0.25rem 0.5rem;
-    border-top: 1px solid var(--userlist-collaborators-border-color);
-    border-bottom: 1px solid var(--userlist-collaborators-border-color);
-
-    &__empty {
-      color: var(--color-gray-60);
-      font-size: 0.75rem;
-      line-height: 150%;
-      padding: 0.5rem 0;
-    }
-  }
-
-  .UserList__hint {
-    padding: 0.5rem 0.75rem;
-    overflow: hidden;
-    text-align: center;
-    color: var(--userlist-hint-text-color);
-    font-size: 0.75rem;
-    line-height: 150%;
-  }
-
-  .UserList__search-wrapper {
-    position: relative;
-    height: 2.5rem;
-
-    svg {
-      position: absolute;
-      top: 50%;
-      transform: translateY(-50%);
-      left: 0.75rem;
-      width: 1.25rem;
-      height: 1.25rem;
-      color: var(--color-gray-40);
-      z-index: 1;
-    }
-  }
-
-  .UserList__search {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    border: 0 !important;
-    border-radius: 0 !important;
-    font-size: 0.875rem;
-    padding-left: 2.5rem !important;
-    padding-right: 0.75rem !important;
-
-    &::placeholder {
-      color: var(--color-gray-40);
-    }
-
-    &:focus {
-      box-shadow: none !important;
-    }
-  }
-}

packages/excalidraw/components/UserList.tsx

@@ -1,254 +0,0 @@
-import "./UserList.scss";
-
-import React from "react";
-import clsx from "clsx";
-import { Collaborator, SocketId } from "../types";
-import { Tooltip } from "./Tooltip";
-import { useExcalidrawActionManager } from "./App";
-import { ActionManager } from "../actions/manager";
-
-import * as Popover from "@radix-ui/react-popover";
-import { Island } from "./Island";
-import { searchIcon } from "./icons";
-import { t } from "../i18n";
-import { isShallowEqual } from "../utils";
-
-export type GoToCollaboratorComponentProps = {
-  clientId: ClientId;
-  collaborator: Collaborator;
-  withName: boolean;
-  isBeingFollowed: boolean;
-};
-
-/** collaborator user id or socket id (fallback) */
-type ClientId = string & { _brand: "UserId" };
-
-const FIRST_N_AVATARS = 3;
-const SHOW_COLLABORATORS_FILTER_AT = 8;
-
-const ConditionalTooltipWrapper = ({
-  shouldWrap,
-  children,
-  clientId,
-  username,
-}: {
-  shouldWrap: boolean;
-  children: React.ReactNode;
-  username?: string | null;
-  clientId: ClientId;
-}) =>
-  shouldWrap ? (
-    <Tooltip label={username || "Unknown user"} key={clientId}>
-      {children}
-    </Tooltip>
-  ) : (
-    <React.Fragment key={clientId}>{children}</React.Fragment>
-  );
-
-const renderCollaborator = ({
-  actionManager,
-  collaborator,
-  clientId,
-  withName = false,
-  shouldWrapWithTooltip = false,
-  isBeingFollowed,
-}: {
-  actionManager: ActionManager;
-  collaborator: Collaborator;
-  clientId: ClientId;
-  withName?: boolean;
-  shouldWrapWithTooltip?: boolean;
-  isBeingFollowed: boolean;
-}) => {
-  const data: GoToCollaboratorComponentProps = {
-    clientId,
-    collaborator,
-    withName,
-    isBeingFollowed,
-  };
-  const avatarJSX = actionManager.renderAction("goToCollaborator", data);
-
-  return (
-    <ConditionalTooltipWrapper
-      key={clientId}
-      clientId={clientId}
-      username={collaborator.username}
-      shouldWrap={shouldWrapWithTooltip}
-    >
-      {avatarJSX}
-    </ConditionalTooltipWrapper>
-  );
-};
-
-type UserListUserObject = Pick<
-  Collaborator,
-  "avatarUrl" | "id" | "socketId" | "username"
->;
-
-type UserListProps = {
-  className?: string;
-  mobile?: boolean;
-  collaborators: Map<SocketId, UserListUserObject>;
-  userToFollow: SocketId | null;
-};
-
-const collaboratorComparatorKeys = [
-  "avatarUrl",
-  "id",
-  "socketId",
-  "username",
-] as const;
-
-export const UserList = React.memo(
-  ({ className, mobile, collaborators, userToFollow }: UserListProps) => {
-    const actionManager = useExcalidrawActionManager();
-
-    const uniqueCollaboratorsMap = new Map<ClientId, Collaborator>();
-
-    collaborators.forEach((collaborator, socketId) => {
-      const userId = (collaborator.id || socketId) as ClientId;
-      uniqueCollaboratorsMap.set(
-        // filter on user id, else fall back on unique socketId
-        userId,
-        { ...collaborator, socketId },
-      );
-    });
-
-    const uniqueCollaboratorsArray = Array.from(uniqueCollaboratorsMap).filter(
-      ([_, collaborator]) => collaborator.username?.trim(),
-    );
-
-    const [searchTerm, setSearchTerm] = React.useState("");
-
-    if (uniqueCollaboratorsArray.length === 0) {
-      return null;
-    }
-
-    const searchTermNormalized = searchTerm.trim().toLowerCase();
-
-    const filteredCollaborators = searchTermNormalized
-      ? uniqueCollaboratorsArray.filter(([, collaborator]) =>
-          collaborator.username?.toLowerCase().includes(searchTerm),
-        )
-      : uniqueCollaboratorsArray;
-
-    const firstNCollaborators = uniqueCollaboratorsArray.slice(
-      0,
-      FIRST_N_AVATARS,
-    );
-
-    const firstNAvatarsJSX = firstNCollaborators.map(
-      ([clientId, collaborator]) =>
-        renderCollaborator({
-          actionManager,
-          collaborator,
-          clientId,
-          shouldWrapWithTooltip: true,
-          isBeingFollowed: collaborator.socketId === userToFollow,
-        }),
-    );
-
-    return mobile ? (
-      <div className={clsx("UserList UserList_mobile", className)}>
-        {uniqueCollaboratorsArray.map(([clientId, collaborator]) =>
-          renderCollaborator({
-            actionManager,
-            collaborator,
-            clientId,
-            shouldWrapWithTooltip: true,
-            isBeingFollowed: collaborator.socketId === userToFollow,
-          }),
-        )}
-      </div>
-    ) : (
-      <div className={clsx("UserList", className)}>
-        {firstNAvatarsJSX}
-
-        {uniqueCollaboratorsArray.length > FIRST_N_AVATARS && (
-          <Popover.Root
-            onOpenChange={(isOpen) => {
-              if (!isOpen) {
-                setSearchTerm("");
-              }
-            }}
-          >
-            <Popover.Trigger className="UserList__more">
-              +{uniqueCollaboratorsArray.length - FIRST_N_AVATARS}
-            </Popover.Trigger>
-            <Popover.Content
-              style={{
-                zIndex: 2,
-                width: "13rem",
-                textAlign: "left",
-              }}
-              align="end"
-              sideOffset={10}
-            >
-              <Island style={{ overflow: "hidden" }}>
-                {uniqueCollaboratorsArray.length >=
-                  SHOW_COLLABORATORS_FILTER_AT && (
-                  <div className="UserList__search-wrapper">
-                    {searchIcon}
-                    <input
-                      className="UserList__search"
-                      type="text"
-                      placeholder={t("userList.search.placeholder")}
-                      value={searchTerm}
-                      onChange={(e) => {
-                        setSearchTerm(e.target.value);
-                      }}
-                    />
-                  </div>
-                )}
-                <div className="dropdown-menu UserList__collaborators">
-                  {filteredCollaborators.length === 0 && (
-                    <div className="UserList__collaborators__empty">
-                      {t("userList.search.empty")}
-                    </div>
-                  )}
-                  <div className="UserList__hint">
-                    {t("userList.hint.text")}
-                  </div>
-                  {filteredCollaborators.map(([clientId, collaborator]) =>
-                    renderCollaborator({
-                      actionManager,
-                      collaborator,
-                      clientId,
-                      withName: true,
-                      isBeingFollowed: collaborator.socketId === userToFollow,
-                    }),
-                  )}
-                </div>
-              </Island>
-            </Popover.Content>
-          </Popover.Root>
-        )}
-      </div>
-    );
-  },
-  (prev, next) => {
-    if (
-      prev.collaborators.size !== next.collaborators.size ||
-      prev.mobile !== next.mobile ||
-      prev.className !== next.className ||
-      prev.userToFollow !== next.userToFollow
-    ) {
-      return false;
-    }
-
-    for (const [socketId, collaborator] of prev.collaborators) {
-      const nextCollaborator = next.collaborators.get(socketId);
-      if (
-        !nextCollaborator ||
-        !isShallowEqual(
-          collaborator,
-          nextCollaborator,
-          collaboratorComparatorKeys,
-        )
-      ) {
-        return false;
-      }
-    }
-    return true;
-  },
-);

packages/excalidraw/cursor.ts

@@ -1,105 +0,0 @@
-import { CURSOR_TYPE, MIME_TYPES, THEME } from "./constants";
-import OpenColor from "open-color";
-import { AppState, DataURL } from "./types";
-import { isHandToolActive, isEraserActive } from "./appState";
-
-const laserPointerCursorSVG_tag = `<svg viewBox="0 0 24 24" stroke-width="1" width="28" height="28" xmlns="http://www.w3.org/2000/svg">`;
-const laserPointerCursorBackgroundSVG = `<path d="M6.164 11.755a5.314 5.314 0 0 1-4.932-5.298 5.314 5.314 0 0 1 5.311-5.311 5.314 5.314 0 0 1 5.307 5.113l8.773 8.773a3.322 3.322 0 0 1 0 4.696l-.895.895a3.322 3.322 0 0 1-4.696 0l-8.868-8.868Z" style="fill:#fff"/>`;
-const laserPointerCursorIconSVG = `<path stroke="#1b1b1f" fill="#fff" d="m7.868 11.113 7.773 7.774a2.359 2.359 0 0 0 1.667.691 2.368 2.368 0 0 0 2.357-2.358c0-.625-.248-1.225-.69-1.667L11.201 7.78 9.558 9.469l-1.69 1.643v.001Zm10.273 3.606-3.333 3.333m-3.25-6.583 2 2m-7-7 3 3M3.664 3.625l1 1M2.529 6.922l1.407-.144m5.735-2.932-1.118.866M4.285 9.823l.758-1.194m1.863-6.207-.13 1.408"/>`;
-
-const laserPointerCursorDataURL_lightMode = `data:${
-  MIME_TYPES.svg
-},${encodeURIComponent(
-  `${laserPointerCursorSVG_tag}${laserPointerCursorIconSVG}</svg>`,
-)}`;
-const laserPointerCursorDataURL_darkMode = `data:${
-  MIME_TYPES.svg
-},${encodeURIComponent(
-  `${laserPointerCursorSVG_tag}${laserPointerCursorBackgroundSVG}${laserPointerCursorIconSVG}</svg>`,
-)}`;
-
-export const resetCursor = (interactiveCanvas: HTMLCanvasElement | null) => {
-  if (interactiveCanvas) {
-    interactiveCanvas.style.cursor = "";
-  }
-};
-
-export const setCursor = (
-  interactiveCanvas: HTMLCanvasElement | null,
-  cursor: string,
-) => {
-  if (interactiveCanvas) {
-    interactiveCanvas.style.cursor = cursor;
-  }
-};
-
-let eraserCanvasCache: any;
-let previewDataURL: string;
-export const setEraserCursor = (
-  interactiveCanvas: HTMLCanvasElement | null,
-  theme: AppState["theme"],
-) => {
-  const cursorImageSizePx = 20;
-
-  const drawCanvas = () => {
-    const isDarkTheme = theme === THEME.DARK;
-    eraserCanvasCache = document.createElement("canvas");
-    eraserCanvasCache.theme = theme;
-    eraserCanvasCache.height = cursorImageSizePx;
-    eraserCanvasCache.width = cursorImageSizePx;
-    const context = eraserCanvasCache.getContext("2d")!;
-    context.lineWidth = 1;
-    context.beginPath();
-    context.arc(
-      eraserCanvasCache.width / 2,
-      eraserCanvasCache.height / 2,
-      5,
-      0,
-      2 * Math.PI,
-    );
-    context.fillStyle = isDarkTheme ? OpenColor.black : OpenColor.white;
-    context.fill();
-    context.strokeStyle = isDarkTheme ? OpenColor.white : OpenColor.black;
-    context.stroke();
-    previewDataURL = eraserCanvasCache.toDataURL(MIME_TYPES.svg) as DataURL;
-  };
-  if (!eraserCanvasCache || eraserCanvasCache.theme !== theme) {
-    drawCanvas();
-  }
-
-  setCursor(
-    interactiveCanvas,
-    `url(${previewDataURL}) ${cursorImageSizePx / 2} ${
-      cursorImageSizePx / 2
-    }, auto`,
-  );
-};
-
-export const setCursorForShape = (
-  interactiveCanvas: HTMLCanvasElement | null,
-  appState: Pick<AppState, "activeTool" | "theme">,
-) => {
-  if (!interactiveCanvas) {
-    return;
-  }
-  if (appState.activeTool.type === "selection") {
-    resetCursor(interactiveCanvas);
-  } else if (isHandToolActive(appState)) {
-    interactiveCanvas.style.cursor = CURSOR_TYPE.GRAB;
-  } else if (isEraserActive(appState)) {
-    setEraserCursor(interactiveCanvas, appState.theme);
-    // do nothing if image tool is selected which suggests there's
-    // a image-preview set as the cursor
-    // Ignore custom type as well and let host decide
-  } else if (appState.activeTool.type === "laser") {
-    const url =
-      appState.theme === THEME.LIGHT
-        ? laserPointerCursorDataURL_lightMode
-        : laserPointerCursorDataURL_darkMode;
-    interactiveCanvas.style.cursor = `url(${url}), auto`;
-  } else if (!["image", "custom"].includes(appState.activeTool.type)) {
-    interactiveCanvas.style.cursor = CURSOR_TYPE.CROSSHAIR;
-  } else if (appState.activeTool.type !== "image") {
-    interactiveCanvas.style.cursor = CURSOR_TYPE.AUTO;
-  }
-};

packages/excalidraw/data/EditorLocalStorage.ts

@@ -1,51 +0,0 @@
-import { EDITOR_LS_KEYS } from "../constants";
-import { JSONValue } from "../types";
-
-export class EditorLocalStorage {
-  static has(key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS]) {
-    try {
-      return !!window.localStorage.getItem(key);
-    } catch (error: any) {
-      console.warn(`localStorage.getItem error: ${error.message}`);
-      return false;
-    }
-  }
-
-  static get<T extends JSONValue>(
-    key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS],
-  ) {
-    try {
-      const value = window.localStorage.getItem(key);
-      if (value) {
-        return JSON.parse(value) as T;
-      }
-      return null;
-    } catch (error: any) {
-      console.warn(`localStorage.getItem error: ${error.message}`);
-      return null;
-    }
-  }
-
-  static set = (
-    key: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS],
-    value: JSONValue,
-  ) => {
-    try {
-      window.localStorage.setItem(key, JSON.stringify(value));
-      return true;
-    } catch (error: any) {
-      console.warn(`localStorage.setItem error: ${error.message}`);
-      return false;
-    }
-  };
-
-  static delete = (
-    name: typeof EDITOR_LS_KEYS[keyof typeof EDITOR_LS_KEYS],
-  ) => {
-    try {
-      window.localStorage.removeItem(name);
-    } catch (error: any) {
-      console.warn(`localStorage.removeItem error: ${error.message}`);
-    }
-  };
-}

packages/excalidraw/data/ai/types.ts

@@ -1,300 +0,0 @@
-export namespace OpenAIInput {
-  type ChatCompletionContentPart =
-    | ChatCompletionContentPartText
-    | ChatCompletionContentPartImage;
-
-  interface ChatCompletionContentPartImage {
-    image_url: ChatCompletionContentPartImage.ImageURL;
-
-    /**
-     * The type of the content part.
-     */
-    type: "image_url";
-  }
-
-  namespace ChatCompletionContentPartImage {
-    export interface ImageURL {
-      /**
-       * Either a URL of the image or the base64 encoded image data.
-       */
-      url: string;
-
-      /**
-       * Specifies the detail level of the image.
-       */
-      detail?: "auto" | "low" | "high";
-    }
-  }
-
-  interface ChatCompletionContentPartText {
-    /**
-     * The text content.
-     */
-    text: string;
-
-    /**
-     * The type of the content part.
-     */
-    type: "text";
-  }
-
-  interface ChatCompletionUserMessageParam {
-    /**
-     * The contents of the user message.
-     */
-    content: string | Array<ChatCompletionContentPart> | null;
-
-    /**
-     * The role of the messages author, in this case `user`.
-     */
-    role: "user";
-  }
-
-  interface ChatCompletionSystemMessageParam {
-    /**
-     * The contents of the system message.
-     */
-    content: string | null;
-
-    /**
-     * The role of the messages author, in this case `system`.
-     */
-    role: "system";
-  }
-
-  export interface ChatCompletionCreateParamsBase {
-    /**
-     * A list of messages comprising the conversation so far.
-     * [Example Python code](https://cookbook.openai.com/examples/how_to_format_inputs_to_chatgpt_models).
-     */
-    messages: Array<
-      ChatCompletionUserMessageParam | ChatCompletionSystemMessageParam
-    >;
-
-    /**
-     * ID of the model to use. See the
-     * [model endpoint compatibility](https://platform.openai.com/docs/models/model-endpoint-compatibility)
-     * table for details on which models work with the Chat API.
-     */
-    model:
-      | (string & {})
-      | "gpt-4-1106-preview"
-      | "gpt-4-vision-preview"
-      | "gpt-4"
-      | "gpt-4-0314"
-      | "gpt-4-0613"
-      | "gpt-4-32k"
-      | "gpt-4-32k-0314"
-      | "gpt-4-32k-0613"
-      | "gpt-3.5-turbo"
-      | "gpt-3.5-turbo-16k"
-      | "gpt-3.5-turbo-0301"
-      | "gpt-3.5-turbo-0613"
-      | "gpt-3.5-turbo-16k-0613";
-
-    /**
-     * Number between -2.0 and 2.0. Positive values penalize new tokens based on their
-     * existing frequency in the text so far, decreasing the model's likelihood to
-     * repeat the same line verbatim.
-     *
-     * [See more information about frequency and presence penalties.](https://platform.openai.com/docs/guides/gpt/parameter-details)
-     */
-    frequency_penalty?: number | null;
-
-    /**
-     * Modify the likelihood of specified tokens appearing in the completion.
-     *
-     * Accepts a JSON object that maps tokens (specified by their token ID in the
-     * tokenizer) to an associated bias value from -100 to 100. Mathematically, the
-     * bias is added to the logits generated by the model prior to sampling. The exact
-     * effect will vary per model, but values between -1 and 1 should decrease or
-     * increase likelihood of selection; values like -100 or 100 should result in a ban
-     * or exclusive selection of the relevant token.
-     */
-    logit_bias?: Record<string, number> | null;
-
-    /**
-     * The maximum number of [tokens](/tokenizer) to generate in the chat completion.
-     *
-     * The total length of input tokens and generated tokens is limited by the model's
-     * context length.
-     * [Example Python code](https://cookbook.openai.com/examples/how_to_count_tokens_with_tiktoken)
-     * for counting tokens.
-     */
-    max_tokens?: number | null;
-
-    /**
-     * How many chat completion choices to generate for each input message.
-     */
-    n?: number | null;
-
-    /**
-     * Number between -2.0 and 2.0. Positive values penalize new tokens based on
-     * whether they appear in the text so far, increasing the model's likelihood to
-     * talk about new topics.
-     *
-     * [See more information about frequency and presence penalties.](https://platform.openai.com/docs/guides/gpt/parameter-details)
-     */
-    presence_penalty?: number | null;
-
-    /**
-     * This feature is in Beta. If specified, our system will make a best effort to
-     * sample deterministically, such that repeated requests with the same `seed` and
-     * parameters should return the same result. Determinism is not guaranteed, and you
-     * should refer to the `system_fingerprint` response parameter to monitor changes
-     * in the backend.
-     */
-    seed?: number | null;
-
-    /**
-     * Up to 4 sequences where the API will stop generating further tokens.
-     */
-    stop?: string | null | Array<string>;
-
-    /**
-     * If set, partial message deltas will be sent, like in ChatGPT. Tokens will be
-     * sent as data-only
-     * [server-sent events](https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events#Event_stream_format)
-     * as they become available, with the stream terminated by a `data: [DONE]`
-     * message.
-     * [Example Python code](https://cookbook.openai.com/examples/how_to_stream_completions).
-     */
-    stream?: boolean | null;
-
-    /**
-     * What sampling temperature to use, between 0 and 2. Higher values like 0.8 will
-     * make the output more random, while lower values like 0.2 will make it more
-     * focused and deterministic.
-     *
-     * We generally recommend altering this or `top_p` but not both.
-     */
-    temperature?: number | null;
-
-    /**
-     * An alternative to sampling with temperature, called nucleus sampling, where the
-     * model considers the results of the tokens with top_p probability mass. So 0.1
-     * means only the tokens comprising the top 10% probability mass are considered.
-     *
-     * We generally recommend altering this or `temperature` but not both.
-     */
-    top_p?: number | null;
-
-    /**
-     * A unique identifier representing your end-user, which can help OpenAI to monitor
-     * and detect abuse.
-     * [Learn more](https://platform.openai.com/docs/guides/safety-best-practices/end-user-ids).
-     */
-    user?: string;
-  }
-}
-
-export namespace OpenAIOutput {
-  export interface ChatCompletion {
-    /**
-     * A unique identifier for the chat completion.
-     */
-    id: string;
-
-    /**
-     * A list of chat completion choices. Can be more than one if `n` is greater
-     * than 1.
-     */
-    choices: Array<Choice>;
-
-    /**
-     * The Unix timestamp (in seconds) of when the chat completion was created.
-     */
-    created: number;
-
-    /**
-     * The model used for the chat completion.
-     */
-    model: string;
-
-    /**
-     * The object type, which is always `chat.completion`.
-     */
-    object: "chat.completion";
-
-    /**
-     * This fingerprint represents the backend configuration that the model runs with.
-     *
-     * Can be used in conjunction with the `seed` request parameter to understand when
-     * backend changes have been made that might impact determinism.
-     */
-    system_fingerprint?: string;
-
-    /**
-     * Usage statistics for the completion request.
-     */
-    usage?: CompletionUsage;
-  }
-  export interface Choice {
-    /**
-     * The reason the model stopped generating tokens. This will be `stop` if the model
-     * hit a natural stop point or a provided stop sequence, `length` if the maximum
-     * number of tokens specified in the request was reached, `content_filter` if
-     * content was omitted due to a flag from our content filters, `tool_calls` if the
-     * model called a tool, or `function_call` (deprecated) if the model called a
-     * function.
-     */
-    finish_reason:
-      | "stop"
-      | "length"
-      | "tool_calls"
-      | "content_filter"
-      | "function_call";
-
-    /**
-     * The index of the choice in the list of choices.
-     */
-    index: number;
-
-    /**
-     * A chat completion message generated by the model.
-     */
-    message: ChatCompletionMessage;
-  }
-
-  interface ChatCompletionMessage {
-    /**
-     * The contents of the message.
-     */
-    content: string | null;
-
-    /**
-     * The role of the author of this message.
-     */
-    role: "assistant";
-  }
-
-  /**
-   * Usage statistics for the completion request.
-   */
-  interface CompletionUsage {
-    /**
-     * Number of tokens in the generated completion.
-     */
-    completion_tokens: number;
-
-    /**
-     * Number of tokens in the prompt.
-     */
-    prompt_tokens: number;
-
-    /**
-     * Total number of tokens used in the request (prompt + completion).
-     */
-    total_tokens: number;
-  }
-
-  export interface APIError {
-    readonly status: 400 | 401 | 403 | 404 | 409 | 422 | 429 | 500 | undefined;
-    readonly headers: Headers | undefined;
-    readonly error: { message: string } | undefined;
-
-    readonly code: string | null | undefined;
-    readonly param: string | null | undefined;
-    readonly type: string | undefined;
-  }
-}

packages/excalidraw/data/magic.ts

@@ -1,104 +0,0 @@
-import { Theme } from "../element/types";
-import { DataURL } from "../types";
-import { OpenAIInput, OpenAIOutput } from "./ai/types";
-
-export type MagicCacheData =
-  | {
-      status: "pending";
-    }
-  | { status: "done"; html: string }
-  | {
-      status: "error";
-      message?: string;
-      code: "ERR_GENERATION_INTERRUPTED" | string;
-    };
-
-const SYSTEM_PROMPT = `You are a skilled front-end developer who builds interactive prototypes from wireframes, and is an expert at CSS Grid and Flex design.
-Your role is to transform low-fidelity wireframes into working front-end HTML code.
-
-YOU MUST FOLLOW FOLLOWING RULES:
-
-- Use HTML, CSS, JavaScript to build a responsive, accessible, polished prototype
-- Leverage Tailwind for styling and layout (import as script <script src="https://cdn.tailwindcss.com"></script>)
-- Inline JavaScript when needed
-- Fetch dependencies from CDNs when needed (using unpkg or skypack)
-- Source images from Unsplash or create applicable placeholders
-- Interpret annotations as intended vs literal UI
-- Fill gaps using your expertise in UX and business logic
-- generate primarily for desktop UI, but make it responsive.
-- Use grid and flexbox wherever applicable.
-- Convert the wireframe in its entirety, don't omit elements if possible.
-
-If the wireframes, diagrams, or text is unclear or unreadable, refer to provided text for clarification.
-
-Your goal is a production-ready prototype that brings the wireframes to life.
-
-Please output JUST THE HTML file containing your best attempt at implementing the provided wireframes.`;
-
-export async function diagramToHTML({
-  image,
-  apiKey,
-  text,
-  theme = "light",
-}: {
-  image: DataURL;
-  apiKey: string;
-  text: string;
-  theme?: Theme;
-}) {
-  const body: OpenAIInput.ChatCompletionCreateParamsBase = {
-    model: "gpt-4-vision-preview",
-    // 4096 are max output tokens allowed for `gpt-4-vision-preview` currently
-    max_tokens: 4096,
-    temperature: 0.1,
-    messages: [
-      {
-        role: "system",
-        content: SYSTEM_PROMPT,
-      },
-      {
-        role: "user",
-        content: [
-          {
-            type: "image_url",
-            image_url: {
-              url: image,
-              detail: "high",
-            },
-          },
-          {
-            type: "text",
-            text: `Above is the reference wireframe. Please make a new website based on these and return just the HTML file. Also, please make it for the ${theme} theme. What follows are the wireframe's text annotations (if any)...`,
-          },
-          {
-            type: "text",
-            text,
-          },
-        ],
-      },
-    ],
-  };
-
-  let result:
-    | ({ ok: true } & OpenAIOutput.ChatCompletion)
-    | ({ ok: false } & OpenAIOutput.APIError);
-
-  const resp = await fetch("https://api.openai.com/v1/chat/completions", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: `Bearer ${apiKey}`,
-    },
-    body: JSON.stringify(body),
-  });
-
-  if (resp.ok) {
-    const json: OpenAIOutput.ChatCompletion = await resp.json();
-    result = { ...json, ok: true };
-  } else {
-    const json: OpenAIOutput.APIError = await resp.json();
-    result = { ...json, ok: false };
-  }
-
-  return result;
-}

packages/excalidraw/element/ElementCanvasButtons.scss

@@ -1,14 +0,0 @@
-.excalidraw {
-  .excalidraw-canvas-buttons {
-    position: absolute;
-
-    box-shadow: 0px 2px 4px 0 rgb(0 0 0 / 30%);
-    z-index: var(--zIndex-canvasButtons);
-    background: var(--island-bg-color);
-    border-radius: var(--border-radius-lg);
-
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-  }
-}

packages/excalidraw/element/ElementCanvasButtons.tsx

@@ -1,60 +0,0 @@
-import { AppState } from "../types";
-import { sceneCoordsToViewportCoords } from "../utils";
-import { NonDeletedExcalidrawElement } from "./types";
-import { getElementAbsoluteCoords } from ".";
-import { useExcalidrawAppState } from "../components/App";
-
-import "./ElementCanvasButtons.scss";
-
-const CONTAINER_PADDING = 5;
-
-const getContainerCoords = (
-  element: NonDeletedExcalidrawElement,
-  appState: AppState,
-) => {
-  const [x1, y1] = getElementAbsoluteCoords(element);
-  const { x: viewportX, y: viewportY } = sceneCoordsToViewportCoords(
-    { sceneX: x1 + element.width, sceneY: y1 },
-    appState,
-  );
-  const x = viewportX - appState.offsetLeft + 10;
-  const y = viewportY - appState.offsetTop;
-  return { x, y };
-};
-
-export const ElementCanvasButtons = ({
-  children,
-  element,
-}: {
-  children: React.ReactNode;
-  element: NonDeletedExcalidrawElement;
-}) => {
-  const appState = useExcalidrawAppState();
-
-  if (
-    appState.contextMenu ||
-    appState.draggingElement ||
-    appState.resizingElement ||
-    appState.isRotating ||
-    appState.openMenu ||
-    appState.viewModeEnabled
-  ) {
-    return null;
-  }
-
-  const { x, y } = getContainerCoords(element, appState);
-
-  return (
-    <div
-      className="excalidraw-canvas-buttons"
-      style={{
-        top: `${y}px`,
-        left: `${x}px`,
-        // width: CONTAINER_WIDTH,
-        padding: CONTAINER_PADDING,
-      }}
-    >
-      {children}
-    </div>
-  );
-};

packages/excalidraw/emitter.ts

@@ -1,51 +0,0 @@
-import { UnsubscribeCallback } from "./types";
-
-type Subscriber<T extends any[]> = (...payload: T) => void;
-
-export class Emitter<T extends any[] = []> {
-  public subscribers: Subscriber<T>[] = [];
-
-  /**
-   * Attaches subscriber
-   *
-   * @returns unsubscribe function
-   */
-  on(...handlers: Subscriber<T>[] | Subscriber<T>[][]): UnsubscribeCallback {
-    const _handlers = handlers
-      .flat()
-      .filter((item) => typeof item === "function");
-
-    this.subscribers.push(..._handlers);
-
-    return () => this.off(_handlers);
-  }
-
-  once(...handlers: Subscriber<T>[] | Subscriber<T>[][]): UnsubscribeCallback {
-    const _handlers = handlers
-      .flat()
-      .filter((item) => typeof item === "function");
-
-    _handlers.push(() => detach());
-
-    const detach = this.on(..._handlers);
-    return detach;
-  }
-
-  off(...handlers: Subscriber<T>[] | Subscriber<T>[][]) {
-    const _handlers = handlers.flat();
-    this.subscribers = this.subscribers.filter(
-      (handler) => !_handlers.includes(handler),
-    );
-  }
-
-  trigger(...payload: T) {
-    for (const handler of this.subscribers) {
-      handler(...payload);
-    }
-    return this;
-  }
-
-  clear() {
-    this.subscribers = [];
-  }
-}

packages/excalidraw/hooks/useStable.ts

@@ -1,7 +0,0 @@
-import { useRef } from "react";
-
-export const useStable = <T extends Record<string, any>>(value: T) => {
-  const ref = useRef<T>(value);
-  Object.assign(ref.current, value);
-  return ref.current;
-};

packages/excalidraw/laser-trails.ts

@@ -1,124 +0,0 @@
-import { LaserPointerOptions } from "@excalidraw/laser-pointer";
-import { AnimatedTrail, Trail } from "./animated-trail";
-import { AnimationFrameHandler } from "./animation-frame-handler";
-import type App from "./components/App";
-import { SocketId } from "./types";
-import { easeOut } from "./utils";
-import { getClientColor } from "./clients";
-
-export class LaserTrails implements Trail {
-  public localTrail: AnimatedTrail;
-  private collabTrails = new Map<SocketId, AnimatedTrail>();
-
-  private container?: SVGSVGElement;
-
-  constructor(
-    private animationFrameHandler: AnimationFrameHandler,
-    private app: App,
-  ) {
-    this.animationFrameHandler.register(this, this.onFrame.bind(this));
-
-    this.localTrail = new AnimatedTrail(animationFrameHandler, app, {
-      ...this.getTrailOptions(),
-      fill: () => "red",
-    });
-  }
-
-  private getTrailOptions() {
-    return {
-      simplify: 0,
-      streamline: 0.4,
-      sizeMapping: (c) => {
-        const DECAY_TIME = 1000;
-        const DECAY_LENGTH = 50;
-        const t = Math.max(
-          0,
-          1 - (performance.now() - c.pressure) / DECAY_TIME,
-        );
-        const l =
-          (DECAY_LENGTH -
-            Math.min(DECAY_LENGTH, c.totalLength - c.currentIndex)) /
-          DECAY_LENGTH;
-
-        return Math.min(easeOut(l), easeOut(t));
-      },
-    } as Partial<LaserPointerOptions>;
-  }
-
-  startPath(x: number, y: number): void {
-    this.localTrail.startPath(x, y);
-  }
-
-  addPointToPath(x: number, y: number): void {
-    this.localTrail.addPointToPath(x, y);
-  }
-
-  endPath(): void {
-    this.localTrail.endPath();
-  }
-
-  start(container: SVGSVGElement) {
-    this.container = container;
-
-    this.animationFrameHandler.start(this);
-    this.localTrail.start(container);
-  }
-
-  stop() {
-    this.animationFrameHandler.stop(this);
-    this.localTrail.stop();
-  }
-
-  onFrame() {
-    this.updateCollabTrails();
-  }
-
-  private updateCollabTrails() {
-    if (!this.container || this.app.state.collaborators.size === 0) {
-      return;
-    }
-
-    for (const [key, collabolator] of this.app.state.collaborators.entries()) {
-      let trail!: AnimatedTrail;
-
-      if (!this.collabTrails.has(key)) {
-        trail = new AnimatedTrail(this.animationFrameHandler, this.app, {
-          ...this.getTrailOptions(),
-          fill: () => getClientColor(key),
-        });
-        trail.start(this.container);
-
-        this.collabTrails.set(key, trail);
-      } else {
-        trail = this.collabTrails.get(key)!;
-      }
-
-      if (collabolator.pointer && collabolator.pointer.tool === "laser") {
-        if (collabolator.button === "down" && !trail.hasCurrentTrail) {
-          trail.startPath(collabolator.pointer.x, collabolator.pointer.y);
-        }
-
-        if (
-          collabolator.button === "down" &&
-          trail.hasCurrentTrail &&
-          !trail.hasLastPoint(collabolator.pointer.x, collabolator.pointer.y)
-        ) {
-          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
-        }
-
-        if (collabolator.button === "up" && trail.hasCurrentTrail) {
-          trail.addPointToPath(collabolator.pointer.x, collabolator.pointer.y);
-          trail.endPath();
-        }
-      }
-    }
-
-    for (const key of this.collabTrails.keys()) {
-      if (!this.app.state.collaborators.has(key)) {
-        const trail = this.collabTrails.get(key)!;
-        trail.stop();
-        this.collabTrails.delete(key);
-      }
-    }
-  }
-}

packages/excalidraw/locales/da-DK.json

@@ -1,525 +0,0 @@
-{
-  "labels": {
-    "paste": "Indsæt",
-    "pasteAsPlaintext": "Indsæt som klartekst",
-    "pasteCharts": "Indsæt diagrammer",
-    "selectAll": "Marker alle",
-    "multiSelect": "Tilføj element til markering",
-    "moveCanvas": "Flyt lærred",
-    "cut": "Klip",
-    "copy": "Kopier",
-    "copyAsPng": "Kopier til klippebord som PNG",
-    "copyAsSvg": "Kopier til klippebord som SVG",
-    "copyText": "Kopiér til udklipsholder som tekst",
-    "copySource": "Kopiér kilde til udklipsholder",
-    "convertToCode": "Konvertér til kode",
-    "bringForward": "Flyt fremad",
-    "sendToBack": "Placer bagest",
-    "bringToFront": "Placer forrest",
-    "sendBackward": "Send bagud",
-    "delete": "Fjern",
-    "copyStyles": "Kopier stil",
-    "pasteStyles": "Indsæt stil",
-    "stroke": "Linje",
-    "background": "Baggrund",
-    "fill": "Udfyld",
-    "strokeWidth": "Linjebredde",
-    "strokeStyle": "Linjeform",
-    "strokeStyle_solid": "Solid",
-    "strokeStyle_dashed": "Stiplet",
-    "strokeStyle_dotted": "Prikket",
-    "sloppiness": "Sjuskethed",
-    "opacity": "Gennemsigtighed",
-    "textAlign": "Tekstjustering",
-    "edges": "Kanter",
-    "sharp": "Skarp",
-    "round": "Rund",
-    "arrowheads": "Pilehoveder",
-    "arrowhead_none": "Ingen",
-    "arrowhead_arrow": "Pil",
-    "arrowhead_bar": "Bjælke",
-    "arrowhead_circle": "",
-    "arrowhead_circle_outline": "",
-    "arrowhead_triangle": "Trekant",
-    "arrowhead_triangle_outline": "",
-    "arrowhead_diamond": "",
-    "arrowhead_diamond_outline": "",
-    "fontSize": "Skriftstørrelse",
-    "fontFamily": "Skrifttypefamilie",
-    "addWatermark": "Tilføj \"Lavet med Excalidraw\"",
-    "handDrawn": "Hånd-tegnet",
-    "normal": "Normal",
-    "code": "Kode",
-    "small": "Lille",
-    "medium": "Mellem",
-    "large": "Stor",
-    "veryLarge": "Meget stor",
-    "solid": "Solid",
-    "hachure": "Skravering",
-    "zigzag": "Zigzag",
-    "crossHatch": "Krydsskravering",
-    "thin": "Tynd",
-    "bold": "Fed",
-    "left": "Venstre",
-    "center": "Centrere",
-    "right": "Højre",
-    "extraBold": "Extra fed",
-    "architect": "Arkitekt",
-    "artist": "Kunstner",
-    "cartoonist": "Tegneserietegner",
-    "fileTitle": "Filnavn",
-    "colorPicker": "Farvevælger",
-    "canvasColors": "Brugt på lærred",
-    "canvasBackground": "Lærredsbaggrund",
-    "drawingCanvas": "Tegnelærred",
-    "layers": "Lag",
-    "actions": "Handlinger",
-    "language": "Sprog",
-    "liveCollaboration": "Live samarbejde...",
-    "duplicateSelection": "Duplikér",
-    "untitled": "Unavngivet",
-    "name": "Navn",
-    "yourName": "Dit navn",
-    "madeWithExcalidraw": "Fremstillet med Excalidraw",
-    "group": "Grupper valgte",
-    "ungroup": "Opløs gruppe",
-    "collaborators": "Deltagere",
-    "showGrid": "Vis gitter",
-    "addToLibrary": "Føj til Bibliotek",
-    "removeFromLibrary": "Fjern fra biblioteket",
-    "libraryLoadingMessage": "Indlæser bibliotek…",
-    "libraries": "Gennemse biblioteker",
-    "loadingScene": "Indlæser scene…",
-    "align": "Justér",
-    "alignTop": "Juster til top",
-    "alignBottom": "Juster til bund",
-    "alignLeft": "Venstrejusteret",
-    "alignRight": "Juster højre",
-    "centerVertically": "Center vertikalt",
-    "centerHorizontally": "Vandret centreret",
-    "distributeHorizontally": "Distribuer vandret",
-    "distributeVertically": "Distribuer lodret",
-    "flipHorizontal": "Spejlvend horisontalt",
-    "flipVertical": "Vend lodret",
-    "viewMode": "Visningstilstand",
-    "share": "Del",
-    "showStroke": "Vis stregfarve-vælger",
-    "showBackground": "Vis baggrundsfarve-vælger",
-    "toggleTheme": "Skift tema",
-    "personalLib": "Personligt bibliotek",
-    "excalidrawLib": "Excalidraw Bibliotek",
-    "decreaseFontSize": "Gør skriften mindre",
-    "increaseFontSize": "Gør skriften større",
-    "unbindText": "Frigør tekst",
-    "bindText": "Bind tekst til beholderen",
-    "createContainerFromText": "Ombryd tekst i en beholder",
-    "link": {
-      "edit": "Redigér link",
-      "editEmbed": "Redigér link & indlejret",
-      "create": "Link oprettet",
-      "createEmbed": "Opret link & indlejret",
-      "label": "Links",
-      "labelEmbed": "Link & indlejret",
-      "empty": "Intet link angivet"
-    },
-    "lineEditor": {
-      "edit": "Rediger Linje",
-      "exit": "Afslut linjeeditor"
-    },
-    "elementLock": {
-      "lock": "Lås",
-      "unlock": "Lås op",
-      "lockAll": "Lås alle",
-      "unlockAll": "Lås alle op"
-    },
-    "statusPublished": "Udgiver",
-    "sidebarLock": "Hold sidepanel åben",
-    "selectAllElementsInFrame": "Vælg alle elementer i rammen",
-    "removeAllElementsFromFrame": "Fjern alle elementer fra ramme",
-    "eyeDropper": "Vælg farve fra lærred",
-    "textToDiagram": "Tekst til diagram",
-    "prompt": "Prompt"
-  },
-  "library": {
-    "noItems": "Ingen varer tilføjet endnu...",
-    "hint_emptyLibrary": "Vælg et element på lærred for at tilføje det her, eller installer et bibliotek fra det offentlige arkiv, nedenfor.",
-    "hint_emptyPrivateLibrary": "Vælg et element på lærred for at tilføje det her."
-  },
-  "buttons": {
-    "clearReset": "Nulstil lærredet",
-    "exportJSON": "Eksportér til fil",
-    "exportImage": "Eksporter billede...",
-    "export": "Gem til...",
-    "copyToClipboard": "Kopier til klippebord",
-    "save": "Gem til nuværende fil",
-    "saveAs": "Gem som",
-    "load": "Åbn",
-    "getShareableLink": "Lav et delbart link",
-    "close": "Luk",
-    "selectLanguage": "Vælg sprog",
-    "scrollBackToContent": "Scroll tilbage til indhold",
-    "zoomIn": "Zoom ind",
-    "zoomOut": "Zoom ud",
-    "resetZoom": "Nulstil zoom",
-    "menu": "Menu",
-    "done": "Færdig",
-    "edit": "Rediger",
-    "undo": "Fortryd",
-    "redo": "Gendan",
-    "resetLibrary": "Nulstil bibliotek",
-    "createNewRoom": "Opret nyt rum",
-    "fullScreen": "Fuld skærm",
-    "darkMode": "Mørk tilstand",
-    "lightMode": "Lys baggrund",
-    "zenMode": "Zentilstand",
-    "objectsSnapMode": "Fastgør til objekter",
-    "exitZenMode": "Stop zentilstand",
-    "cancel": "Annuller",
-    "clear": "Ryd",
-    "remove": "Fjern",
-    "embed": "Slå indlejring til/fra",
-    "publishLibrary": "Publicér",
-    "submit": "Gem",
-    "confirm": "Bekræft",
-    "embeddableInteractionButton": "Klik for at interagere"
-  },
-  "alerts": {
-    "clearReset": "Dette vil rydde hele lærredet. Er du sikker?",
-    "couldNotCreateShareableLink": "Kunne ikke oprette delbart link.",
-    "couldNotCreateShareableLinkTooBig": "Kunne ikke oprette delbart link: scenen er for stor",
-    "couldNotLoadInvalidFile": "Kunne ikke indlæse ugyldig fil",
-    "importBackendFailed": "Import fra backend mislykkedes.",
-    "cannotExportEmptyCanvas": "Kan ikke eksportere tomt lærred.",
-    "couldNotCopyToClipboard": "Kunne ikke kopiere til udklipsholderen.",
-    "decryptFailed": "Kunne ikke dekryptere data.",
-    "uploadedSecurly": "Upload er blevet sikret med ende-til-ende kryptering, hvilket betyder, at Excalidraw server og tredjeparter ikke kan læse indholdet.",
-    "loadSceneOverridePrompt": "Indlæsning af ekstern tegning erstatter dit eksisterende indhold. Ønsker du at fortsætte?",
-    "collabStopOverridePrompt": "Stopper sessionen vil overskrive din tidligere, lokalt gemte tegning. Er du sikker?\n\n(Hvis du ønsker at beholde din lokale tegning, skal du blot lukke browserfanen i stedet.)",
-    "errorAddingToLibrary": "Kunne ikke tilføje element til biblioteket",
-    "errorRemovingFromLibrary": "Kunne ikke fjerne element fra biblioteket",
-    "confirmAddLibrary": "Dette vil tilføje {{numShapes}} form(er) til dit bibliotek. Er du sikker?",
-    "imageDoesNotContainScene": "Dette billede synes ikke at indeholde scene data. Har du aktiveret scene indlejring under eksport?",
-    "cannotRestoreFromImage": "Scene kunne ikke gendannes fra denne billedfil",
-    "invalidSceneUrl": "Kunne ikke importere scene fra den angivne URL. Det er enten misdannet eller indeholder ikke gyldige Excalidraw JSON data.",
-    "resetLibrary": "Dette vil rydde hele lærredet. Er du sikker?",
-    "removeItemsFromsLibrary": "Slet {{count}} vare(r) fra biblioteket?",
-    "invalidEncryptionKey": "Krypteringsnøglen skal være på 22 tegn. Live-samarbejde er deaktiveret.",
-    "collabOfflineWarning": "Ingen internetforbindelse tilgængelig.\nDine ændringer vil ikke blive gemt!"
-  },
-  "errors": {
-    "unsupportedFileType": "Filtypen er ikke understøttet.",
-    "imageInsertError": "Billedet kunne ikke indsættes. Prøv igen senere...",
-    "fileTooBig": "Filen er for stor. Maksimal tilladt størrelse er {{maxSize}}.",
-    "svgImageInsertError": "Kunne ikke indsætte SVG-billede. SVG-markup'en ser ugyldig ud.",
-    "failedToFetchImage": "Dataene blev ikke hentet.",
-    "invalidSVGString": "Ugyldig SVG.",
-    "cannotResolveCollabServer": "Kunne ikke oprette forbindelse til samarbejdsserveren. Genindlæs siden og prøv igen.",
-    "importLibraryError": "Biblioteket kunne ikke indlæses",
-    "collabSaveFailed": "Kunne ikke gemme i databasen. Hvis problemerne fortsætter, bør du gemme din fil lokalt for at sikre, at du ikke mister dit arbejde.",
-    "collabSaveFailed_sizeExceeded": "Kunne ikke gemme i databasen, lærredet lader til at være for stort. Du bør gemme filen lokalt for at sikre, at du ikke mister dit arbejde.",
-    "imageToolNotSupported": "Billeder er deaktiveret.",
-    "brave_measure_text_error": {
-      "line1": "Det ser ud til, at du bruger Brave browser med indstillingen <bold>Aggressively Block Fingerprinting</bold> aktiveret.",
-      "line2": "Dette kan resultere i brud på <bold>tekstelementerne</bold> i dine tegninger.",
-      "line3": "Vi anbefaler kraftigt at deaktivere denne indstilling. Du kan følge <link>disse trin</link> om, hvordan du gør det.",
-      "line4": "Hvis deaktivering af denne indstilling ikke løser visning af tekstelementer, åbn venligst et <issueLink>issue</issueLink> på vores GitHub, eller skriv os på <discordLink>Discord</discordLink>"
-    },
-    "libraryElementTypeError": {
-      "embeddable": "Indlejringselementer kan ikke tilføjes til biblioteket.",
-      "iframe": "IFrame elementer kan ikke tilføjes til biblioteket.",
-      "image": "Understøttelse af at tilføje billeder til biblioteket kommer snart!"
-    },
-    "asyncPasteFailedOnRead": "Kunne ikke indsætte (kan ikke læse fra systemets udklipsholder).",
-    "asyncPasteFailedOnParse": "Kunne ikke indsætte.",
-    "copyToSystemClipboardFailed": "Kunne ikke kopiere til udklipsholderen."
-  },
-  "toolBar": {
-    "selection": "&Udvalg",
-    "image": "Indsæt billeder",
-    "rectangle": "Rektangler",
-    "diamond": "Diamanter",
-    "ellipse": "Ellipser",
-    "arrow": "Pile",
-    "line": "Linje",
-    "freedraw": "Tegn",
-    "text": "Tekster",
-    "library": "~Bibliotek",
-    "lock": "Behold valgte værktøj aktiv efter tegning",
-    "penMode": "Pen-tilstand - forhindrer berøring",
-    "link": "Tilføj/ Opdater link for en valgt form",
-    "eraser": "Slet",
-    "frame": "Rammeværktøj",
-    "magicframe": "Wireframe til kode",
-    "embeddable": "Web-indlejring",
-    "laser": "Lasermarkør",
-    "hand": "Hånd (panorering værktøj)",
-    "extraTools": "Flere værktøjer",
-    "mermaidToExcalidraw": "Mermaid til Excalidraw",
-    "magicSettings": "AI indstillinger"
-  },
-  "headings": {
-    "canvasActions": "Lærred handlinger",
-    "selectedShapeActions": "Valgte figurhandlinger",
-    "shapes": "Former"
-  },
-  "hints": {
-    "canvasPanning": "For at flytte lærred, hold musehjulet eller mellemrumstasten mens du trækker, eller brug håndværktøjet",
-    "linearElement": "Klik for at starte flere punkter, træk for enkelt linje",
-    "freeDraw": "Klik og træk, slip når du er færdig",
-    "text": "Tip: du kan også tilføje tekst ved at dobbeltklikke hvor som helst med det valgte værktøj",
-    "embeddable": "Klik på træk for at oprette en hjemmeside indlejret",
-    "text_selected": "",
-    "text_editing": "",
-    "linearElementMulti": "",
-    "lockAngle": "",
-    "resize": "",
-    "resizeImage": "",
-    "rotate": "",
-    "lineEditor_info": "",
-    "lineEditor_pointSelected": "",
-    "lineEditor_nothingSelected": "",
-    "placeImage": "",
-    "publishLibrary": "",
-    "bindTextToElement": "",
-    "deepBoxSelect": "",
-    "eraserRevert": "",
-    "firefox_clipboard_write": "",
-    "disableSnapping": ""
-  },
-  "canvasError": {
-    "cannotShowPreview": "Kan ikke vise forhåndsvisning",
-    "canvasTooBig": "Lærredet kan være for stort.",
-    "canvasTooBigTip": "Tip: Prøv at flytte de fjerneste elementer lidt tættere sammen."
-  },
-  "errorSplash": {
-    "headingMain": "Der opstod en fejl. Prøv <button>at genindlæse siden</button>.",
-    "clearCanvasMessage": "",
-    "clearCanvasCaveat": "",
-    "trackedToSentry": "",
-    "openIssueMessage": "<button></button> Kopiere og indsæt venligst oplysningerne nedenfor i et GitHub problem.",
-    "sceneContent": "Scene indhold:"
-  },
-  "roomDialog": {
-    "desc_intro": "Du kan invitere folk til din nuværende scene, så de kan samarbejde med dig.",
-    "desc_privacy": "Bare rolig, sessionen bruger end-to-end kryptering, så uanset hvad du tegner vil det forblive privat. Ikke engang vores server vil kunne se, hvad du kommer op med.",
-    "button_startSession": "Start session",
-    "button_stopSession": "Stop session",
-    "desc_inProgressIntro": "Live-samarbejde session er nu begyndt.",
-    "desc_shareLink": "Del dette link med enhver, du ønsker at samarbejde med:",
-    "desc_exitSession": "",
-    "shareTitle": ""
-  },
-  "errorDialog": {
-    "title": "Fejl"
-  },
-  "exportDialog": {
-    "disk_title": "Gem til disk",
-    "disk_details": "",
-    "disk_button": "",
-    "link_title": "",
-    "link_details": "",
-    "link_button": "",
-    "excalidrawplus_description": "",
-    "excalidrawplus_button": "",
-    "excalidrawplus_exportError": ""
-  },
-  "helpDialog": {
-    "blog": "Læs vores blog",
-    "click": "",
-    "deepSelect": "",
-    "deepBoxSelect": "",
-    "curvedArrow": "",
-    "curvedLine": "",
-    "documentation": "",
-    "doubleClick": "",
-    "drag": "",
-    "editor": "",
-    "editLineArrowPoints": "",
-    "editText": "",
-    "github": "",
-    "howto": "",
-    "or": "",
-    "preventBinding": "",
-    "tools": "",
-    "shortcuts": "",
-    "textFinish": "",
-    "textNewLine": "",
-    "title": "",
-    "view": "",
-    "zoomToFit": "",
-    "zoomToSelection": "",
-    "toggleElementLock": "",
-    "movePageUpDown": "",
-    "movePageLeftRight": ""
-  },
-  "clearCanvasDialog": {
-    "title": ""
-  },
-  "publishDialog": {
-    "title": "",
-    "itemName": "",
-    "authorName": "",
-    "githubUsername": "",
-    "twitterUsername": "",
-    "libraryName": "",
-    "libraryDesc": "",
-    "website": "",
-    "placeholder": {
-      "authorName": "",
-      "libraryName": "",
-      "libraryDesc": "",
-      "githubHandle": "",
-      "twitterHandle": "",
-      "website": ""
-    },
-    "errors": {
-      "required": "",
-      "website": ""
-    },
-    "noteDescription": "",
-    "noteGuidelines": "",
-    "noteLicense": "",
-    "noteItems": "",
-    "atleastOneLibItem": "",
-    "republishWarning": ""
-  },
-  "publishSuccessDialog": {
-    "title": "",
-    "content": ""
-  },
-  "confirmDialog": {
-    "resetLibrary": "",
-    "removeItemsFromLib": ""
-  },
-  "imageExportDialog": {
-    "header": "",
-    "label": {
-      "withBackground": "",
-      "onlySelected": "",
-      "darkMode": "",
-      "embedScene": "",
-      "scale": "",
-      "padding": ""
-    },
-    "tooltip": {
-      "embedScene": ""
-    },
-    "title": {
-      "exportToPng": "",
-      "exportToSvg": "",
-      "copyPngToClipboard": ""
-    },
-    "button": {
-      "exportToPng": "",
-      "exportToSvg": "",
-      "copyPngToClipboard": ""
-    }
-  },
-  "encrypted": {
-    "tooltip": "",
-    "link": ""
-  },
-  "stats": {
-    "angle": "",
-    "element": "",
-    "elements": "",
-    "height": "",
-    "scene": "",
-    "selected": "",
-    "storage": "",
-    "title": "Statistik for nørder",
-    "total": "",
-    "version": "",
-    "versionCopy": "Klik for at kopiere",
-    "versionNotAvailable": "",
-    "width": "Bredde"
-  },
-  "toast": {
-    "addedToLibrary": "",
-    "copyStyles": "Kopieret stilarter.",
-    "copyToClipboard": "Kopieret til klippebord.",
-    "copyToClipboardAsPng": "Kopieret {{exportSelection}} til klippebord som PNG\n({{exportColorScheme}})",
-    "fileSaved": "Fil gemt.",
-    "fileSavedToFilename": "Gemt som {filename}",
-    "canvas": "canvas",
-    "selection": "markering",
-    "pasteAsSingleElement": "",
-    "unableToEmbed": "",
-    "unrecognizedLinkFormat": ""
-  },
-  "colors": {
-    "transparent": "",
-    "black": "",
-    "white": "",
-    "red": "",
-    "pink": "",
-    "grape": "",
-    "violet": "",
-    "gray": "",
-    "blue": "",
-    "cyan": "",
-    "teal": "",
-    "green": "",
-    "yellow": "",
-    "orange": "",
-    "bronze": ""
-  },
-  "welcomeScreen": {
-    "app": {
-      "center_heading": "",
-      "center_heading_plus": "",
-      "menuHint": ""
-    },
-    "defaults": {
-      "menuHint": "",
-      "center_heading": "",
-      "toolbarHint": "",
-      "helpHint": ""
-    }
-  },
-  "colorPicker": {
-    "mostUsedCustomColors": "",
-    "colors": "",
-    "shades": "",
-    "hexCode": "",
-    "noShades": ""
-  },
-  "overwriteConfirm": {
-    "action": {
-      "exportToImage": {
-        "title": "",
-        "button": "",
-        "description": ""
-      },
-      "saveToDisk": {
-        "title": "",
-        "button": "",
-        "description": ""
-      },
-      "excalidrawPlus": {
-        "title": "",
-        "button": "",
-        "description": ""
-      }
-    },
-    "modal": {
-      "loadFromFile": {
-        "title": "",
-        "button": "",
-        "description": ""
-      },
-      "shareableLink": {
-        "title": "",
-        "button": "",
-        "description": ""
-      }
-    }
-  },
-  "mermaid": {
-    "title": "",
-    "button": "",
-    "description": "",
-    "syntax": "",
-    "preview": ""
-  }
-}

packages/excalidraw/locales/percentages.json

@@ -1,56 +0,0 @@
-{
-  "ar-SA": 94,
-  "az-AZ": 17,
-  "bg-BG": 71,
-  "bn-BD": 52,
-  "ca-ES": 83,
-  "cs-CZ": 86,
-  "da-DK": 61,
-  "de-DE": 100,
-  "el-GR": 80,
-  "en": 100,
-  "es-ES": 96,
-  "eu-ES": 97,
-  "fa-IR": 84,
-  "fi-FI": 76,
-  "fr-FR": 99,
-  "gl-ES": 86,
-  "he-IL": 77,
-  "hi-IN": 76,
-  "hu-HU": 76,
-  "id-ID": 91,
-  "it-IT": 98,
-  "ja-JP": 90,
-  "kaa": 36,
-  "kab-KAB": 76,
-  "kk-KZ": 18,
-  "km-KH": 83,
-  "ko-KR": 100,
-  "ku-TR": 87,
-  "lt-LT": 48,
-  "lv-LV": 77,
-  "mr-IN": 98,
-  "my-MM": 35,
-  "nb-NO": 93,
-  "nl-NL": 75,
-  "nn-NO": 67,
-  "oc-FR": 92,
-  "pa-IN": 78,
-  "pl-PL": 99,
-  "pt-BR": 91,
-  "pt-PT": 83,
-  "ro-RO": 99,
-  "ru-RU": 92,
-  "si-LK": 7,
-  "sk-SK": 100,
-  "sl-SI": 100,
-  "sv-SE": 100,
-  "ta-IN": 81,
-  "th-TH": 44,
-  "tr-TR": 87,
-  "uk-UA": 93,
-  "vi-VN": 49,
-  "zh-CN": 100,
-  "zh-HK": 22,
-  "zh-TW": 100
-}

packages/excalidraw/math.test.ts

@@ -1,55 +0,0 @@
-import { rangeIntersection, rangesOverlap, rotate } from "./math";
-
-describe("rotate", () => {
-  it("should rotate over (x2, y2) and return the rotated coordinates for (x1, y1)", () => {
-    const x1 = 10;
-    const y1 = 20;
-    const x2 = 20;
-    const y2 = 30;
-    const angle = Math.PI / 2;
-    const [rotatedX, rotatedY] = rotate(x1, y1, x2, y2, angle);
-    expect([rotatedX, rotatedY]).toEqual([30, 20]);
-    const res2 = rotate(rotatedX, rotatedY, x2, y2, -angle);
-    expect(res2).toEqual([x1, x2]);
-  });
-});
-
-describe("range overlap", () => {
-  it("should overlap when range a contains range b", () => {
-    expect(rangesOverlap([1, 4], [2, 3])).toBe(true);
-    expect(rangesOverlap([1, 4], [1, 4])).toBe(true);
-    expect(rangesOverlap([1, 4], [1, 3])).toBe(true);
-    expect(rangesOverlap([1, 4], [2, 4])).toBe(true);
-  });
-
-  it("should overlap when range b contains range a", () => {
-    expect(rangesOverlap([2, 3], [1, 4])).toBe(true);
-    expect(rangesOverlap([1, 3], [1, 4])).toBe(true);
-    expect(rangesOverlap([2, 4], [1, 4])).toBe(true);
-  });
-
-  it("should overlap when range a and b intersect", () => {
-    expect(rangesOverlap([1, 4], [2, 5])).toBe(true);
-  });
-});
-
-describe("range intersection", () => {
-  it("should intersect completely with itself", () => {
-    expect(rangeIntersection([1, 4], [1, 4])).toEqual([1, 4]);
-  });
-
-  it("should intersect irrespective of order", () => {
-    expect(rangeIntersection([1, 4], [2, 3])).toEqual([2, 3]);
-    expect(rangeIntersection([2, 3], [1, 4])).toEqual([2, 3]);
-    expect(rangeIntersection([1, 4], [3, 5])).toEqual([3, 4]);
-    expect(rangeIntersection([3, 5], [1, 4])).toEqual([3, 4]);
-  });
-
-  it("should intersect at the edge", () => {
-    expect(rangeIntersection([1, 4], [4, 5])).toEqual([4, 4]);
-  });
-
-  it("should not intersect", () => {
-    expect(rangeIntersection([1, 4], [5, 7])).toEqual(null);
-  });
-});

packages/excalidraw/package.json

@@ -1,134 +0,0 @@
-{
-  "name": "@excalidraw/excalidraw",
-  "version": "0.17.1",
-  "main": "./dist/prod/index.js",
-  "type": "module",
-  "module": "./dist/prod/index.js",
-  "exports": {
-    ".": {
-      "development": "./dist/dev/index.js",
-      "types": "./dist/excalidraw/index.d.ts",
-      "default": "./dist/prod/index.js"
-    },
-    "./index.css": {
-      "development": "./dist/dev/index.css",
-      "default": "./dist/prod/index.css"
-    }
-  },
-  "types": "./dist/excalidraw/index.d.ts",
-  "files": [
-    "dist/*"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "description": "Excalidraw as a React component",
-  "repository": "https://github.com/excalidraw/excalidraw",
-  "license": "MIT",
-  "keywords": [
-    "excalidraw",
-    "excalidraw-embed",
-    "react",
-    "npm",
-    "npm excalidraw"
-  ],
-  "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"
-    ]
-  },
-  "peerDependencies": {
-    "react": "^17.0.2 || ^18.2.0",
-    "react-dom": "^17.0.2 || ^18.2.0"
-  },
-  "dependencies": {
-    "@braintree/sanitize-url": "6.0.2",
-    "@excalidraw/laser-pointer": "1.3.1",
-    "@excalidraw/mermaid-to-excalidraw": "0.2.0",
-    "@excalidraw/random-username": "1.1.0",
-    "@radix-ui/react-popover": "1.0.3",
-    "@radix-ui/react-tabs": "1.0.2",
-    "@tldraw/vec": "1.7.1",
-    "browser-fs-access": "0.29.1",
-    "canvas-roundrect-polyfill": "0.0.1",
-    "clsx": "1.1.1",
-    "cross-env": "7.0.3",
-    "image-blob-reduce": "3.0.1",
-    "jotai": "1.13.1",
-    "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": "1.0.1",
-    "pwacompat": "2.0.17",
-    "roughjs": "4.6.4",
-    "sass": "1.51.0",
-    "tunnel-rat": "0.1.2"
-  },
-  "devDependencies": {
-    "@babel/core": "7.18.9",
-    "@babel/plugin-transform-arrow-functions": "7.18.6",
-    "@babel/plugin-transform-async-to-generator": "7.18.6",
-    "@babel/plugin-transform-runtime": "7.18.9",
-    "@babel/plugin-transform-typescript": "7.18.8",
-    "@babel/preset-env": "7.18.6",
-    "@babel/preset-react": "7.18.6",
-    "@babel/preset-typescript": "7.18.6",
-    "@size-limit/preset-big-lib": "9.0.0",
-    "@types/pako": "1.0.3",
-    "@types/pica": "5.1.3",
-    "@types/resize-observer-browser": "0.1.7",
-    "autoprefixer": "10.4.7",
-    "babel-loader": "8.2.5",
-    "babel-plugin-transform-class-properties": "6.24.1",
-    "cross-env": "7.0.3",
-    "css-loader": "6.7.1",
-    "dotenv": "16.0.1",
-    "esbuild": "0.19.10",
-    "esbuild-plugin-external-global": "1.0.1",
-    "esbuild-sass-plugin": "2.16.0",
-    "eslint-plugin-react": "7.32.2",
-    "fake-indexeddb": "3.1.7",
-    "import-meta-loader": "1.1.0",
-    "mini-css-extract-plugin": "2.6.1",
-    "postcss-loader": "7.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "sass-loader": "13.0.2",
-    "size-limit": "9.0.0",
-    "style-loader": "3.3.3",
-    "@testing-library/jest-dom": "5.16.2",
-    "@testing-library/react": "12.1.5",
-    "ts-loader": "9.3.1",
-    "typescript": "4.9.4"
-  },
-  "bugs": "https://github.com/excalidraw/excalidraw/issues",
-  "homepage": "https://github.com/excalidraw/excalidraw/tree/master/packages/excalidraw",
-  "scripts": {
-    "gen:types": "rm -rf types && tsc",
-    "build:esm": "rm -rf dist && node ../../scripts/buildPackage.js && yarn gen:types",
-    "pack": "yarn build:umd && yarn pack",
-    "start": "node ../../scripts/buildExample.mjs && vite",
-    "build:example": "node ../../scripts/buildExample.mjs",
-    "size": "yarn build:umd && size-limit"
-  }
-}

packages/excalidraw/reactUtils.ts

@@ -1,61 +0,0 @@
-/**
- * @param func handler taking at most single parameter (event).
- */
-
-import { unstable_batchedUpdates } from "react-dom";
-import { version as ReactVersion } from "react";
-import { throttleRAF } from "./utils";
-
-export const withBatchedUpdates = <
-  TFunction extends ((event: any) => void) | (() => void),
->(
-  func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never,
-) =>
-  ((event) => {
-    unstable_batchedUpdates(func as TFunction, event);
-  }) as TFunction;
-
-/**
- * barches React state updates and throttles the calls to a single call per
- * animation frame
- */
-export const withBatchedUpdatesThrottled = <
-  TFunction extends ((event: any) => void) | (() => void),
->(
-  func: Parameters<TFunction>["length"] extends 0 | 1 ? TFunction : never,
-) => {
-  // @ts-ignore
-  return throttleRAF<Parameters<TFunction>>(((event) => {
-    unstable_batchedUpdates(func, event);
-  }) as TFunction);
-};
-
-export const isRenderThrottlingEnabled = (() => {
-  // we don't want to throttle in react < 18 because of #5439 and it was
-  // getting more complex to maintain the fix
-  let IS_REACT_18_AND_UP: boolean;
-  try {
-    const version = ReactVersion.split(".");
-    IS_REACT_18_AND_UP = Number(version[0]) > 17;
-  } catch {
-    IS_REACT_18_AND_UP = false;
-  }
-
-  let hasWarned = false;
-
-  return () => {
-    if (window.EXCALIDRAW_THROTTLE_RENDER === true) {
-      if (!IS_REACT_18_AND_UP) {
-        if (!hasWarned) {
-          hasWarned = true;
-          console.warn(
-            "Excalidraw: render throttling is disabled on React versions < 18.",
-          );
-        }
-        return false;
-      }
-      return true;
-    }
-    return false;
-  };
-})();